小程序社区 › 首页 › 教程› 实战教程 › 查看内容

用uni-app和springboot做出的高效记忆小程序，技术点总结

Rolan 2021-2-24 09:28

232

本着这个原则，做出来的东西就是要简单，简单，再简单。看一眼就知道怎么用。

作为一个和产品经理斗争多年的老后端，终于有一天要考虑产品怎么呈现了，有种苍天饶过谁的感觉。。

记得之前吐槽产品最多的话就是：产品逻辑这么复杂，我都理解不了，让用户怎么用。

本着这个原则，做出来的东西就是要简单，简单，再简单。看一眼就知道怎么用。

所以这个程序本质上就三个点：

内容输入
艾宾浩斯曲线复习。共有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命令是实时监听修改的，开发体验还不错，上图。

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();
            }
        })
    })
}