前一段看到朋友圈里總是有人用txt記錄體重，就特別想寫一個(gè)記錄體重的小程序， 現(xiàn)在小程序的云開發(fā)有云函數(shù)、數(shù)據(jù)庫，真的挺好用，很適合個(gè)人開發(fā)者，服務(wù)器域名什么都不用管，云開發(fā)讓你完全不用操心這些東西。

先看看頁面效果圖吧：

記錄的幾個(gè)點(diǎn)：

1.全局變量 globalData

2.npm 的使用

3.云函數(shù)

4.數(shù)據(jù)庫操作

5.async 的使用

6.分享的配置

7.antV使用

8.tabBar地址跳轉(zhuǎn)

9.切換頁面刷新

1.全局變量 globalData

首次進(jìn)入后，要存儲(chǔ)openId給其他頁面使用，使用globalData共享。

<!--app.js 設(shè)置 globalData.openid --> App({onLaunch: function () {this.globalData = {}wx.cloud.init({})wx.cloud.callFunction({name: 'login',data: {},success: res => {this.globalData.openid = res.result.openidwx.switchTab({url: '/pages/add/add',fail: function(e) {}})}, fail: err => { }})} })<!--其他頁面引用--> const app = getApp() // 獲得實(shí)例 app.globalData.openid // 直接引用即可

2.npm 的使用

1.進(jìn)入小程序源碼miniprogram 目錄，創(chuàng)建 package.json 文件（使用 npm init 一路回車）

2.npm i --save 我們要安裝的 npm 包

3.設(shè)置微信開發(fā)者工具 構(gòu)建 npm

4.package.json 增加 "miniprogram": "dist" 打包目錄字段，如果不設(shè)置的話上傳和預(yù)覽不成功，提示文件包過大。

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

設(shè)置微信開發(fā)者工具

構(gòu)建 npm

最后，務(wù)必添加 miniprogram 字段

{"name": "21Day","version": "1.1.0","miniprogram": "dist","description": "一個(gè)21天體重記錄的app","license": "MIT","dependencies": {"@antv/f2-canvas": "~1.0.5","@antv/wx-f2": "~1.1.4"},"devDependencies": {} }

3.云函數(shù)

官方解釋 云函數(shù)即在云端（服務(wù)器端）運(yùn)行的函數(shù) ，服務(wù)端是 node.js ，都是 JavaScript 。官方有數(shù)據(jù)庫的操作，但是更新的操作強(qiáng)制要求使用云函數(shù), 另外，如果云函數(shù)中使用了 npm 包，記得在所在云函數(shù)文件夾右鍵上傳并部署，不然運(yùn)行失敗。

上一個(gè)例子，更新體重的云函數(shù)

// 云函數(shù) 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 入?yún)?shù)delete event.userInfotry {return await db.collection('list').where({_openid:wxContext.OPENID,date:moment().format('YYYY-MM-DD')}).update({data: {...event},})} catch(e) {console.error(e)} }

小程序端調(diào)用

wx.cloud.callFunction({name: 'add',data: {...Param},success: res => {wx.showToast({title: '新增記錄成功',})},fail: err => { wx.showToast({icon: 'none',title: '新增記錄失敗'})}})

4.數(shù)據(jù)庫操作

其實(shí)是接入的 MongoDB ，封裝了一部分 api 出來，詳細(xì)的就看官方文檔吧，有區(qū)分服務(wù)端和小程序段。

const db = wx.cloud.database()// 查詢數(shù)據(jù) 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 這個(gè)包，先 npm i regenerator 。
然后把 node_modules 文件夾下的 regenerator-runtime 的 runtime-module.js 和 runtime.js 兩個(gè)文件拷貝到lib目錄下，在頁面上引入即可。

<!--事例--> const regeneratorRuntime = require('../../lib/runtime.js') onLoad: async function (options) {// 獲取當(dāng)天數(shù)據(jù)await this.step1()// 時(shí)間類型設(shè)置let nowHour = moment().hour(),timeTypenowHour > 12 ? timeType = 'evening' : timeType = 'morning'this.setData({timeType})}

6.分享的配置

分享很簡(jiǎn)單，有區(qū)分右上角的直接分享和點(diǎn)擊按鈕分享

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}

分享后，他人點(diǎn)擊頁面，跳轉(zhuǎn)到對(duì)應(yīng) pages 地址，從 onLoad 的 options中拿入?yún)⒄?qǐng)求數(shù)即可

onLoad: function (options) {const db = wx.cloud.database()let This = thislet resault = {}db.collection('list').where({_openid: options.item}).get({success: function (res) {resault = res.dataThis.setData({resault:resault})}})},

7.antV使用

上邊第二小節(jié)有提到 antV 的安裝，就不再贅述，直接說一下再頁面中引用。

說下使用，需要設(shè)置一個(gè)全局變量?jī)?chǔ)存圖表的實(shí)例，然后在鉤子函數(shù)內(nèi)容使用 changeData 方法修改數(shù)據(jù)。

index.json 中引入包名

{"usingComponents": {"ff-canvas": "@antv/f2-canvas"} } // 引入F2 import F2 from '@antv/wx-f2';// 設(shè)置實(shí)例全局變量（務(wù)必） 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; }// 生命周期函數(shù) onLoad(){// 使用changeData賦值chart.changeData(stepInfoList) }

8.tabBar地址跳轉(zhuǎn)

如果要跳轉(zhuǎn)的地址不在 app.json 的 tabBar 內(nèi)可以使用 wx.navigateTo ，如果在死活跳不過去，要使用wx.switchTab 方法跳轉(zhuǎn)。

wx.switchTab({url: '/pages/add/add',fail: function(e) {} })wx.navigateTo({url: '../deployFunctions/deployFunctions', })

9.切換頁面刷新

切換幾個(gè)tabBar的時(shí)候，需要刷新數(shù)據(jù)。 在 onShow 方法中再調(diào)用一下 onLoad 方法就可以了。

onShow: function () {this.onLoad() }

源碼鏈接

https://github.com/TencentCloudBase/Good-practice-tutorial-recommended

---

如果你有關(guān)于使用云開發(fā)CloudBase相關(guān)的技術(shù)故事/技術(shù)實(shí)戰(zhàn)經(jīng)驗(yàn)想要跟大家分享，歡迎留言聯(lián)系我們哦~比心！

轉(zhuǎn)載于:https://www.cnblogs.com/CloudBase/p/11303340.html

總結(jié)

以上是生活随笔為你收集整理的小程序·云开发实战 - 体重记录小程序的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。