临时起意
老早前就听说过一些高效记忆的方法，其中听的最多的就是艾宾浩斯记忆法和费曼学习法。
恰好赶上过年放假，就在想除了吃吃吃之外，还能干点什么。
本来想学习理财的知识，一看概念还真不少，什么市盈率，市净率，ROI，XXX。
怎么学的牢固点不容易忘呢？一搜高效学习的方法，这俩货又出来了，那干脆把他们结合起来做个小程序好了。
产品概念
作为一个和产品经理斗争多年的老后端，终于有一天要考虑产品怎么呈现了，有种苍天饶过谁的感觉。。
记得之前吐槽产品最多的话就是：产品逻辑这么复杂，我都理解不了，让用户怎么用。
本着这个原则，做出来的东西就是要简单，简单，再简单。看一眼就知道怎么用。
所以这个程序本质上就三个点：
- 内容输入
- 艾宾浩斯曲线复习。共有8个阶段，根据笔记创建时间判断是否需要复习。
- 费曼学习法-讲出来
introduce.png
开发框架
最终选择的开发组合是uni-app + springboot。
后端服务就是用自己最熟悉的springboot，同时使用一个非常好用的微信开发包：weixin-java-miniapp
在小程序端的框架选择上是费了点时间。由于之前有过一些vue的基础，就想着最好还是用vue来做，那么小程序的vue框架就有个mp-vue。
但是这时的想法是，万一之后用户多了，是不是可以搞出ios和android的app呢（梦想是要有的，万一实现了呢）。起码PC页面还是要做一个的。
基于这些考虑，就需要一个基于vue开发的多端代码生成框架，最终选择了uni-app。
uni-app
uni-app官方提供了一个编辑器HBuilderX，但是对于新学一个编辑器感觉没有必要，使用vscode开发也是可以的。
这里通过@vue/cli来创建环境，搭建只需要两条命令。
- 创建代码库：
vue create -p dcloudio/uni-preset-vue my-project - 生成微信小程序代码：
npm run dev:mp-weixin
之后使用微信小程序官方开发工具，打开uni-app生成的代码目录就可以了，dev命令是实时监听修改的，开发体验还不错，上图。
work-screen.png
登录
通过uni-app的统一登录接口，可以获取到微信小程序中的openid等信息，这里发送到后端，用来创建系统用户。
后端创建或登录成功后返回一个token，将token缓存到手机中，在之后的每次请求中发送给后端。
login() {
var that = this;
uni.login({
provider: 'weixin',
success: function (res) {
// 获取用户信息
uni.getUserInfo({
provider: 'weixin',
success: function (infoRes) {
that.$request({
header: {
'X-WX-Code': res.code,
'X-WX-Encrypted-Data': infoRes.encryptedData,
'X-WX-IV': infoRes.iv,
},
url: "/user/wx/login",
}).then(res => {
uni.setStorageSync("mkey", res.data.mkey)
//保存用户信息
uni.setStorageSync('userInfo', res.data.mainUser);
that.$goto('/pages/home/home')
})
}
});
}
});
}
封装request函数实现加载中效果
小程序中请求api会有等待的时间，要在每次请求时加一个等待请求的页面提示，通过封装底层的request，统一加等待效果。
export default (params) => {
//判断用户登录状态
var mkey = uni.getStorageSync('mkey')
//加载中页面
uni.showLoading({
title: '加载中',
mask: true
})
var loginHeader = {
'X-MKEY': mkey
};
var header = params.header == undefined ? loginHeader : params.header
return new Promise((resolve, reject) => {
uni.request({
header: header,
success: ({ data, statusCode, header }) => {
resolve(data)
},
fail: (error) => {
reject(error)
},
complete: () => {
//关闭加载中
uni.hideLoading()
},
...params,
url
})
})
}
文件上传与存储
编辑器中可以通过启用相机或相册，添加图片，需要将图片保存起来。
这里使用腾讯云的cos保存图片信息，需要在后端生成cos的带有鉴权信息的上传连接，返回给小程序。
然后通过链接直接上传图片到cos，不再通过后端，节省服务器资源。
上传成功后，会返回图片的url，这里要注意url是在返回的header里面。
useCamera() {
var that = this;
uni.chooseImage({
count: 1, //最多可选图片张数
success: async function (res) {
//图片路径
var filePath = res.tempFilePaths[0];
//获取腾讯云COS预签名url
var urlData = await that.request({
url: "/resource/cosurl"
});
that.preUrl = urlData.data.preUrl;
//获取图片信息
var fileInfo = await uni.getImageInfo({
src: filePath
})
//上传图片
uni.uploadFile({
url: that.preUrl,
filePath: filePath,
name: "file",
formData: {
"key": urlData.data.key + "." + fileInfo[1].type
},
success: (res) => {
that.imgUrl = res.header.Location
}
});
}
});
}
没域名没证书怎么提供后端服务？
微信小程序中，要求调用后端接口只能使用https，这意味着要购买并备案一个域名，并且要搞到证书才可以提供后端服务。
不过现在，腾讯提供了一个云开发的服务，可以在小程序中使用。
云开发提供了完整的云函数和云数据库的支持，完全可以满足后端服务的需求。但是看了下文档后，发现代码编写和云数据库操作与我之前常用的springboot+mysql+redis开发体系差距较大，学习成本比较高。
但是云函数中调用外部接口却没有https的限制，这就是说完全可以把云函数当成一个网关来使用，通过云函数来调用后端服务。并且云开发现在提供免费额度。
yunfunc.png
云开发的使用步骤
- 注册小程序开发账号后，在开发工具上点击云开发。
yunfunc-1.png
- 之后会选择使用哪种方式，直接选择预付费，会提供免费使用的额度。
-
开通后，在开发工具中，创建时选择云开发，也可以在小程序代码同级目录下，新建一个云函数目录。
yunfunc-3.png
yunfunc-2.png
- 之后在云函数目录中，新建一个云函数：httpApi，写好代码后，直接右键点击就可以上传云函数。
yunfunc-4.png
- 云函数只实现一个通用的http请求转发功能，将请求代理到实际的服务器上。代码实现如下：
// 云函数入口文件
const cloud = require('wx-server-sdk')
// 这里使用了request-promise
var rp = require('request-promise');
cloud.init()
// 实际服务的ip地址，可以直接用ip端口
var host = "http://xxx.xxx.xxx.xx:8990";
// 云函数入口函数
exports.main = async (event, context) => {
var options = {
url: host + event.url,
method: event.method,
json: true,
headers: event.header
}
// 判断请求类型
if (event.method != 'post') {
options.qs = event.data
} else {
options.body = event.data
}
var res = await rp(options)
.then(function (res) {
return res
})
.catch(function (err) {
return err
});
return res;
}
小程序代码的改造
小程序中，之前的https请求，需要替换为云函数请求。之前已经把请求封装到了request方法中，直接对request方法内部改造就可以。
- 首先在main.js中声明要使用云函数，加入下面的代码。
wx.cloud.init({
// 此处请填入环境 ID, 环境 ID 可打开云控制台查看
env: '你的环境id',
traceUser: true,
})
- 修改request为使用云函数
export default (params) => {
//判断用户登录状态
var mkey = uni.getStorageSync('mkey')
//加载中页面
uni.showLoading({
title: '加载中',
mask: true
})
var loginHeader = {
'X-MKEY': mkey
};
var header = params.header == undefined ? loginHeader : params.header
return new Promise((resolve, reject) => {
//使用云函数
wx.cloud.callFunction({
name: 'httpApi',
data: {
url: params.url,
header: header,
data: params.data,
method: params.method
},
success: function (res) {
uni.hideLoading();
var data = res.result
resolve(data)
},
fail: (err) => {
console.log("err", err)
uni.hideLoading();
}
})
})
}
这样就可以把之前对后端服务的请求，通过云函数代理后，发送给服务器，直接省了域名。通过这篇文章希望可以帮助想要开发小程序的同学少走些弯路。
微信中搜索：记忆笔记。或关注公众号：技术Fun。就可以找到这个小程序，欢迎试用。
网友评论