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

分享很简单,有区分右上角的直接分享和点击按钮分享

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

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

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