小程序·云开发实战 - 体重记录小程序
前一段看到朋友圈里总是有人用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.分享的配置
分享很简单，有区分右上角的直接分享和点击按钮分享
[代码]onShareAppMessage: function (res) {
// 右上角分享
let ShareOption = {
title: '21天体重减肥记录',
path: '/pages/index/index',
}
// 按钮分享
if(res.from == "button"){
ShareOption = {
title: '来呀 看看我的减肥记录呀',
path: '/pages/detail/detail?item=' + app.globalData.openid,
}
}
return ShareOption
}
[代码]
分享后，他人点击页面，跳转到对应 [代码]pages[代码] 地址，从 [代码]onLoad[代码] 的 [代码]options[代码]中拿入参请求数即可
[代码]onLoad: function (options) {
const db = wx.cloud.database()
let This = this
let resault = {}
db.collection('list').where({
_openid: options.item
}).get({
success: function (res) {
resault = res.data
This.setData({
resault:resault
})
}
})
},
[代码]
7.antV使用
上边第二小节有提到 [代码]antV[代码] 的安装，就不再赘述，直接说一下再页面中引用。
说下使用，需要设置一个全局变量储存图表的实例，然后在钩子函数内容使用 [代码]changeData[代码] 方法修改数据。
[代码]index.json[代码] 中引入包名
[代码]{
"usingComponents": {
"ff-canvas": "@antv/f2-canvas"
}
}
[代码]
[代码]// 引入F2
import F2 from '@antv/wx-f2';
// 设置实例全局变量（务必）
let chart = null;
function initChart(canvas, width, height, F2) { // 使用 F2 绘制图表
let data = [
// { timestamp: '1951 年', step: 38 },
];
chart = new F2.Chart({
el: canvas,
width,
height
});
chart.source(data, {
step: {
tickCount: 5
},
timestamp: {
tickCount: 8
},
});
chart.axis('timestamp', {
label(text, index, total) {
const textCfg = {};
if (index === 0) {
textCfg.textAlign = 'left';
}
if (index === total - 1) {
textCfg.textAlign = 'right';
}
return textCfg;
}
});
chart.axis('step', {
label(text) {
return {
text: text / 1000 + 'k步'
};
}
});
chart.tooltip({
showItemMarker: false,
onShow(ev) {
const { items } = ev;
items[0].name = null;
items[0].name = items[0].title;
items[0].value = items[0].value + '步';
}
});
chart.area().position('timestamp*step').shape('smooth').color('l(0) 0:#F2C587 0.5:#ED7973 1:#8659AF');
chart.line().position('timestamp*step').shape('smooth').color('l(0) 0:#F2C587 0.5:#ED7973 1:#8659AF');
chart.render();
return chart;
}
// 生命周期函数
onLoad(){
// 使用changeData赋值
chart.changeData(stepInfoList)
}
[代码]
8.tabBar地址跳转
如果要跳转的地址不在 [代码]app.json[代码] 的 [代码]tabBar[代码] 内可以使用 [代码]wx.navigateTo[代码] ，如果在死活跳不过去，要使用[代码]wx.switchTab[代码] 方法跳转。
[代码]wx.switchTab({
url: '/pages/add/add',
fail: function(e) {}
})
wx.navigateTo({
url: '../deployFunctions/deployFunctions',
})
[代码]
9.切换页面刷新
切换几个tabBar的时候，需要刷新数据。 在 [代码]onShow[代码] 方法中再调用一下 [代码]onLoad[代码] 方法就可以了。
[代码]onShow: function () {
this.onLoad()
}
[代码]
源码链接
https://github.com/TencentCloudBase/Good-practice-tutorial-recommended
如果你有关于使用云开发CloudBase相关的技术故事/技术实战经验想要跟大家分享，欢迎留言联系我们哦~比心！
[图片]
