小程序·云开发实战 - 体重记录小程序

前一段看到朋友圈里总是有人用txt记录体重,就特别想写一个记录体重的小程序, 现在小程序云开发有云函数、数据库,真的挺好用,很适合个人开发者,服务器域名什么都不用管,云开发让你完全不用操心这些东西。

先看看页面效果图吧:

小程序·云开发实战 - 体重记录小程序


小程序·云开发实战 - 体重记录小程序


小程序·云开发实战 - 体重记录小程序


小程序·云开发实战 - 体重记录小程序


小程序·云开发实战 - 体重记录小程序


小程序·云开发实战 - 体重记录小程序


小程序·云开发实战 - 体重记录小程序

记录的几个点:

1.全局变量 globalData

2.npm 的使用

3.云函数

4.数据库操作

5.async 的使用

6.分享的配置

7.antV使用

8.tabBar地址跳转

9.切换页面刷新

1.全局变量 globalData

首次进入后,要存储openId给其他页面使用,使用globalData共享。

<!--app.js 设置 globalData.openid --> App({ onLaunch: function () { this.globalData = {} wx.cloud.init({}) wx.cloud.callFunction({ name: 'login', data: {}, success: res => { this.globalData.openid = res.result.openid wx.switchTab({ url: '/pages/add/add', fail: function(e) {} }) }, fail: err => { } }) } }) <!--其他页面引用--> const app = getApp() // 获得实例 app.globalData.openid // 直接引用即可 2.npm 的使用

1.进入小程序源码miniprogram 目录,创建 package.json 文件(使用 npm init 一路回车)

2.npm i --save 我们要安装的 npm 包

3.设置微信开发者工具 构建 npm

4.package.json 增加 "miniprogram": "dist" 打包目录字段,如果不设置的话上传和预览不成功,提示文件包过大。

cd miniprogram npm init npm i @antv/f2-canvas --save // 我用到了f2,可以换成其他包

设置微信开发者工具

小程序·云开发实战 - 体重记录小程序

构建 npm

小程序·云开发实战 - 体重记录小程序

最后,务必添加 miniprogram 字段

{ "name": "21Day", "version": "1.1.0", "miniprogram": "dist", "description": "一个21天体重记录的app", "license": "MIT", "dependencies": { "@antv/f2-canvas": "~1.0.5", "@antv/wx-f2": "~1.1.4" }, "devDependencies": {} } 3.云函数

官方解释 云函数即在云端(服务器端)运行的函数 ,服务端是 node.js ,都是 JavaScript 。官方有数据库的操作,但是更新的操作强制要求使用云函数, 另外,如果云函数中使用了 npm 包,记得在所在云函数文件夹右键上传并部署,不然运行失败。

小程序·云开发实战 - 体重记录小程序

上一个例子,更新体重的云函数

// 云函数 const cloud = require('wx-server-sdk') const moment = require('moment') cloud.init( { traceUser: true } ) const db = cloud.database() const wxContext = cloud.getWXContext() exports.main = async (event, context) => { // event 入参参数 delete event.userInfo try { return await db.collection('list').where({ _openid:wxContext.OPENID, date:moment().format('YYYY-MM-DD') }) .update({ data: { ...event }, }) } catch(e) { console.error(e) } }

小程序端调用

wx.cloud.callFunction({ name: 'add', data: { ...Param }, success: res => { wx.showToast({ title: '新增记录成功', }) }, fail: err => { wx.showToast({ icon: 'none', title: '新增记录失败' }) } }) 4.数据库操作

其实是接入的 MongoDB ,封装了一部分 api 出来,详细的就看官方文档吧,有区分服务端和小程序段。

const db = wx.cloud.database() // 查询数据 db.collection('list').where({ _openid: app.globalData.openid, date: moment().subtract(1, 'days').format('YYYY-MM-DD'), }).get({ success: function (res) { // do someThing } }) 5.async 的使用

小程序·云开发实战 - 体重记录小程序

官方文档提示不支持 async,需要引入 regeneratorRuntime 这个包,先 npm i regenerator 。
然后把 node_modules 文件夹下的 regenerator-runtime 的 runtime-module.js 和 runtime.js 两个文件拷贝到lib目录下,在页面上引入即可。

<!--事例--> const regeneratorRuntime = require('../../lib/runtime.js') onLoad: async function (options) { // 获取当天数据 await this.step1() // 时间类型设置 let nowHour = moment().hour(),timeType nowHour > 12 ? timeType = 'evening' : timeType = 'morning' this.setData({timeType}) } 6.分享的配置

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpswyf.html