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

长期起意

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

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

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年99元

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

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

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

阿里云限时活动-2核2G-5M带宽-40-100G SSD服务器,特惠价86元/年(原价724元/年,限时99元续购三次),速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

发表评论

邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据