刚刚提交的小程序已经通过审核，将发送备注。上一段看到朋友圈里总是用txt记录体重，所以特别想写个小程序记录体重。现在小程序的云开发有云函数和数据库。它真的很好用，非常适合个人开发者。你不用担心服务器域名，云开发让你完全不用担心这些事情。先看一下页面渲染：记录几点：1.globalData2.npm的使用3.云函数的使用4.数据库操作5.async的使用6.共享配置7.AntV的使用8.TabBar地址跳转到to9.切换页面刷新1.第一次进入全局变量globalData后，需要存储openId给其他页面使用，使用globalData共享。App({onLaunch:function(){this.globalData={}wx.cloud.init({})wx.cloud.callFunction({name:'login',数据:{},成功:res=>{this.globalData.openid=res.result.openidwx.switchTab({url:'/pages/add/add',失败:function(e){}})},fail:err=>{}})}})constapp=getApp()//获取实例app.globalData.openid//直接引用即可2.npm的使用1.进入小程序源码小程序目录，创建package.json文件（使用npminit，一路回车）2.npmi--保存我们要安装的npm包3.设置微信开发者工具构建npm4.package.json添加"miniprogram":"dist"包目录字段，如果不设置，上传预览会失败，提示文件包过大。cdminiprogramnpminitnpmi@antv/f2-canvas--save//我用的是f2，可以换成其他包设置微信开发者工具搭建npm最后一定要加上小程序字段{"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。cloudfunctions官方的解释是，cloudfunctions是运行在云端（server端）的Function，服务端是node.js，全是JavaScript。有官方的数据库操作，但是更新操作是必须使用云函数的。另外，如果云函数中使用了npm包，记得在云函数文件夹上右击上传部署，否则会运行失败。在前面的例子中，云函数更新权重//cloudfunctionconstcloud=require('wx-server-sdk')constmoment=require('moment')cloud.init({traceUser:true})constdb=云。database()constwxContext=cloud.getWXContext()exports.main=async(event,context)=>{//事件参数删除event.userInfotry{returnawaitdb.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:'Addrecordsuccessfully',})},fail:err=>{wx.showToast({icon:'none',title:'添加记录失败'})}})4.数据库操作其实是连接到MongoDB上的，里面封装了一部分api。具体可以参考官方文档，里面区分了服务端和小程序段。constdb=wx.cloud.database()//查询数据db.collection('list').where({_openid:app.globalData.openid,date:moment().subtract(1,'days').format('YYYY-MM-DD'),}).get({success:function(res){//dosomething}})5.async用法官方文档说明不支持async，需要regeneratorRuntime包需要介绍的是，npmfirstiregenerator。然后将node_modules文件夹下regenerator-runtime的runtime-module.js和runtime.js这两个文件复制到lib目录下，在页面中导入。constregeneratorRuntime=require('../../lib/runtime.js')onLoad:asyncfunction(options){//获取当天的数据awaitthis.step1()//时间类型SetletnowHour=moment().hour(),timeTypenowHour>12?timeType='evening':timeType='morning'this.setData({timeType})}6.分享的配置很简单，右上角有区别直接分享和点击按钮分享onShareAppMessage:function(res){//右上角分享letShareOption={title:'21天减肥记录',path:'/pages/index/index',}//按钮分享if(res.from=="button"){ShareOption={title:'快来看看我的减肥记录',path:'/pages/detail/detail?item='+app.globalData.openid,}}returnShareOption}分享后别人点击page，跳转到对应的pages地址，从onLoad的options中获取参数请求个数。onLoad:function(options){constdb=wx.cloud.database()letThis=thisletresult={}db.collection('list').where({_openid:options.item}).get({成功：功能（重新s){result=res.dataThis.setData({result:resault})}})},7.antV使用的是上面第二节提到的antV的安装，这里就不赘述了，简单说一下并在页面引用它说到用法，需要设置一个全局变量来存放图表的实例，然后使用changeData方法修改钩子函数内容中的数据。importpackagenameinindex.json{"usingComponents":{"ff-canvas":"@antv/f2-canvas"}}//importF2importF2from'@antv/wx-f2';//设置实例全局变量(required)letchart=null;functioninitChart(canvas,width,height,F2){//使用F2绘制图表letdata=[//{timestamp:'1951',step:38},];chart=newF2.Chart({el:canvas,width,height});chart.source（数据，{步骤：{tickCount：5}，时间戳：{tickCount：8}，}）;chart.axis('timestamp',{label(text,index,total){consttextCfg={};if(index===0){textCfg.textAlign='left';}if(index===total-1){textCfg.textAlign='right';}returntextCfg;}});chart.axis('step',{label(text){return{text:text/1000+'kstep'};}});chart.tooltip({showItemMarker:false,onShow(ev){const{items}=ev;items[0].name=null;items[0].name=items[0].title;items[0].valuee=items[0].value+'step';}});chart.area().position('timestamp*step').shape('smooth').color('l(0)0:#F2C5870.5:#ED79731:#8659AF');chart.line().position('timestamp*step').shape('smooth').color('l(0)0:#F2C5870.5:#ED79731:#8659AF');图表渲染（）；returnchart;}//LifecyclefunctiononLoad(){//使用changeData赋值chart.changeData(stepInfoList)}8.TabBar地址跳转如果要跳转的地址不在app中可以在tabBar中使用wx.navigateTo的.json。如果跳不过去，使用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/TencentClo...如果您有任何使用云开发CloudBase相关的技术故事/技术经验想与您分享，请留言联系我们~比心！
