前端analysis | 3w & 1h

《微信小程序》- 云函数开发实践之BMI体重管理

2020-03-01

效果图

BMI体重管理 BMI体重管理

界面设计

设计目的:BMI数据管理

首页 - 如何实现:

* BMI,是什么?-- 需要简单解释下
* 必须有录入入口 -- 记录一下
* 可视化展示录入的数据 -- 身高固定、体重可变
* 可视化数据对不对  -- 历史记录进行比对展示

录入页 - 如何实现:

* 录入输入框 
* 录入的指标计算展示 
* 指标好不好,有个参考 
* 指标对不对,给个计算公式 
* 按钮名称,凸显主人公

代码实现

图表实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
const chart = new F2.Chart(config);
chart.legend(false);
chart.point()
.position('date*weight')
.size('tag', function (val) {
return val ? 3 : 0;
})
.style('tag', {
fill: function fill(val) {
return '#0ac7d9'
},
stroke: '#fff',
lineWidth: 1
});
chart.source(chartData, {
date: {
range: [0, 1],
type: 'timeCat',
mask: 'MM-DD'
},
weight: {
max: 120,
tickCount: 5,
alias: '体重(kg)'
}
});
chart.tooltip({
showCrosshairs: true,
showTitle: false,
showItemMarker: false,
snap: true,
crosshairsType: 'xy',
onShow: function onShow(ev) {
return (ev.items = ev.items.splice(1));
},
});
chart.area().position('date*weight').color('#0ac7d9').shape('smooth').adjust('stack');
chart.line().position('date*weight').color('#0ac7d9').shape('smooth').adjust('stack');
chart.render();
f2Chart = chart;
return chart;

指标参考

1
2
3
4
5
<view class="bmi-item" wx:for="{{bmiArray}}" wx:for-item="item" wx:for-index="index" wx:key="index">
<view class="bmi-start" wx:if="{{item.start !== ''}}">{{item.start}}</view>
<view class="bmi-middle">{{item.desc}}</view>
<view class="bmi-end" wx:if="{{item.end !== ''}}">{{item.end}}</view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
[{
start:0,
desc:'偏瘦',
end:''
},{
start: 18.5,
desc: '正常',
end:''
},{
start: 24,
desc: '偏胖',
end: ''
},{
start:27,
desc:'肥胖',
end:40,
}
]

微信云端请求http

1
2
3
4
5
6
7
8
9
10
11
12
13
  // 云函数入口文件
const cloud = require('wx-server-sdk')
const rq = require('request-promise');

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
const url = `xxxx`
const res = await rq(url);
return res;
}

云端数据库请求

1
2
3
4
5
6
7
8
9
10
11
12
if (!params){
console.error(`[数据库]${dbName} [新增记录],参数空`);
}
const data = {
data: params //切记,这里params,需要时{},形式
}
const db = wx.cloud.database();
return db.collection(dbName).add(data).then((res) => {
console.log(`[数据库]${dbName} [新增记录] 成功,记录 _id:`, params, res._id)
}).catch(err => {
console.error(`[数据库]${dbName} [新增记录] 失败:`, params, err)
})

测试总结

图表数据加载问题 -

  • value不可为字符串,否则数值图表绘制失败

  • 自定义图表颜色 – 参考上一篇【《微信小程序》-F2图表组件实践遇到的那些卡壳》】

  • 数据请求云端获取,界面加载早,怎么解决数据加载延迟问题?
    数据没有准备好,就不展示界面。
    等数据准备好,才绘制。

    图表再次刷新问题

  • 记录下后,数据要刷新 ?
    把图表实例chart,全局下,然后触发changeData()

    1
    f2Chart.changeData(bmiLocalData);
使用支付宝打赏
使用微信打赏

若你觉得我的文章对你有帮助,欢迎点击上方按钮对我打赏