长期起意
老早前就据说过一些高效记忆的办法,其中听的最多的就是艾宾浩斯记忆法和费曼学习法。
恰好赶上过年放假,就在想除了吃吃吃之外,还无能点什么。
原本想学习理财的常识,一看概念还真不少,什么市盈率,市净率,ROI,XXX。
怎么学的牢固点不容易忘呢?一搜高效学习的办法,这俩货又进去了,那罗唆把他们联合起来做个小程序好了。
产品概念
作为一个和产品经理奋斗多年的老后端,终于有一天要思考产品怎么出现了,有种苍天饶过谁的感觉。。
记得之前吐槽产品最多的话就是:产品逻辑这么简单,我都了解不了,让用户怎么用。
本着这个准则,做进去的货色就是要简略,简略,再简略。看一眼就晓得怎么用。
所以这个程序实质上就三个点:
- 内容输出
- 艾宾浩斯曲线温习。共有 8 个阶段,依据笔记创立工夫判断是否须要温习。
- 费曼学习法 - 讲进去
开发框架
最终抉择的开发组合是 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 命令是实时监听批改的,开发体验还不错,上图。
登录
通过 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 的限度,这就是说齐全能够把云函数当成一个网关来应用,通过云函数来调用后端服务。并且云开发当初提供收费额度。
云开发的应用步骤
- 注册小程序开发账号后,在开发工具上点击云开发。
- 之后会抉择应用哪种形式,间接抉择预付费,会提供收费应用的额度。
- 开明后,在开发工具中,创立时抉择云开发,也能够在小程序代码同级目录下,新建一个云函数目录。
- 之后在云函数目录中,新建一个云函数:httpApi,写好代码后,间接右键点击就能够上传云函数。
- 云函数只实现一个通用的 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();}
})
})
}
这样就能够把之前对后端服务的申请,通过云函数代理后,发送给服务器,间接省了域名。通过这篇文章心愿能够帮忙想要开发小程序的同学少走些弯路。
微信中搜寻:记忆笔记,就能够找到这个小程序,欢送试用。