前端analysis | What,Why,Who,When,Where,How

《微信小程序》- 云函数开发实践之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);
本文作者：前端analysis
联系邮箱：cheonghu@126.com
版权声明： 本文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处！
Tags: 微信小程序 云函数
← 《微信小程序》-F2图表组件实践遇到的那些卡壳 《小程序》-多端构建Taro概念整理 →
赏
使用支付宝打赏
使用微信打赏

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