小程式·雲開發實戰 - 體重記錄小程式
前一段看到朋友圈裡總是有人用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-recommen