关于记忆:用uniapp和springboot做出的高效记忆小程序技术点总结

长期起意

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

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

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

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

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