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

临时起意

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

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

本来想学习理财的知识,一看概念还真不少,什么市盈率,市净率,ROI,XXX。

怎么学的牢固点不容易忘呢?一搜高效学习的方法,这俩货又出来了,那干脆把他们结合起来做个小程序好了。

产品概念

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

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

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

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

  • 内容输入
  • 艾宾浩斯曲线复习。共有8个阶段,根据笔记创建时间判断是否需要复习。
  • 费曼学习法-讲出来

introduce

开发框架

最终选择的开发组合是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命令是实时监听修改的,开发体验还不错,上图。

work-screen

登录

通过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的限制,这就是说完全可以把云函数当成一个网关来使用,通过云函数来调用后端服务。并且云开发现在提供免费额度。

yunfunc

云开发的使用步骤

  • 注册小程序开发账号后,在开发工具上点击云开发。

yunfunc-1

  • 之后会选择使用哪种方式,直接选择预付费,会提供免费使用的额度。
  • 开通后,在开发工具中,创建时选择云开发,也可以在小程序代码同级目录下,新建一个云函数目录。

yunfunc-2

yunfunc-3

  • 之后在云函数目录中,新建一个云函数:httpApi,写好代码后,直接右键点击就可以上传云函数。

yunfunc-4

  • 云函数只实现一个通用的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();
            }
        })
    })
}

这样就可以把之前对后端服务的请求,通过云函数代理后,发送给服务器,直接省了域名。通过这篇文章希望可以帮助想要开发小程序的同学少走些弯路。

微信中搜索:记忆笔记,就可以找到这个小程序,欢迎试用。

你可能感兴趣的