乐趣区

关于记忆:用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();}
        })
    })
}

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

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

退出移动版