长期起意

老早前就据说过一些高效记忆的办法，其中听的最多的就是艾宾浩斯记忆法和费曼学习法。

恰好赶上过年放假，就在想除了吃吃吃之外，还无能点什么。

原本想学习理财的常识，一看概念还真不少，什么市盈率，市净率，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-promisevar 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();            }        })    })}

这样就能够把之前对后端服务的申请，通过云函数代理后，发送给服务器，间接省了域名。通过这篇文章心愿能够帮忙想要开发小程序的同学少走些弯路。

微信中搜寻：记忆笔记，就能够找到这个小程序，欢送试用。