css计算函数 scalc 微信小程序_微信小程序（8）健康计算器
当今社会生活质量已经有极大的提升，生活品质、健康生活变成了大家追求的新目标，基于此目标咱们本节课制作一个能时刻计算是否肥胖以及肥胖程度的掌中计算器-----健康计算器
在我们开始本项目的编写之前，先对其进行一番设计：
1、身体质量指数计算公式(身高、体重)
2、基础代谢率的计算公式(身高、体重、年龄)
3、每日需要热量的计算公式(体重、活动系数)
4、增重减重对每日摄入卡路里数量的建议
这些计算公式都是可以从互联网获取到：
1、身体质量指数计算标准：
女性标准体重 = 身高 - 105 ; 男性标准体重 = 身高 – 100
体质指数(BMI)=体重(kg)/身高(m)的平方
体重指数——男性： |
体重指数——女性： |
过轻——低于20 |
过轻——低于19 |
适中—— 20-25 |
适中——19-24 |
过重——25-30 |
过重——24-29 |
肥胖——30-35 |
肥胖—— 29-34 |
非常肥胖—— 高于35 |
非常肥胖——高于34 |
2、基础代谢率计算标准：
男性的基础代谢率=67+13.73*体重+5*身高-6.9*年龄
女性的基础代谢率=661+9.6*体重+1.72*身高-4.7*年龄。
3、每日所需热量计算标准：
| 年龄 | 男(体重单位为公斤) | 女(体重单位为公斤) |
| 10-17岁 | (17.5*体重+651)*活动系数 | (12.2*体重+746)*活动系数 |
| 18-29岁 | (15.3*体重+679)*活动系数 | (14.7*体重+496)*活动系数 |
| 30-59岁 | (11.6*体重+879)*活动系数 | (8.7*体重+829)*活动系数 |
| 60岁- | (13.5*体重+487)*活动系数 | (10.5*体重+596)*活动系数 |
| 运动强度 | 男子活动系数 | 女子活动系数 |
| 轻度 | 1.55 | 1.56 |
| 中度 | 1.78 | 1.64 |
| 重度 | 2.10 | 1.82 |
4、增重减重对每日摄入卡路里数量的建议：
增减重都是以计算标准上下浮500~1000卡路里作为标准。
在有了这些计算公式之后，咱们便开始制作第一部分吧：
首先是制作index.wxml界面，在本节课中，我们需要进行输入操作，这里涉及了input和form两个标签及相互的绑定关系，如何用我们直接上代码：
您的性别view> {{arrgender[indexgender]}}view>picker>view> view> view> 您的身高view> input>view> 厘米(cm)view> view> 您的体重view> input>view> 千克(kg)view> view> 您的年龄view> input>view> 岁view> view> 日运动量view> {{arrsport[indexsport]}}view>picker>view> view> view> index.wxss：
.item{ width: 80%; margin: 5rpx auto; display: flex; flex-direction: row; align-items: center; text-align: center;}.formleft, .formmid, .formright{ display: flex; flex-direction: row; align-items: center; text-align: center; padding: 5rpx;}.formleft, .formmid{ width: 32%;}.formright{ width: 36%;}input{ border: 1px solid lightgray;}picker{ width: 100%;}.picker{ width: 100%; text-align: center; border: 1px solid lightgray; box-sizing: border-box;}index.js
Page({ data: { gender: '', tall: '', weight: '', arrgender:['男','女'], indexgender: 0, arrsport: ['轻度','中度','重度'], indexsport: 0 }, calSubmit: function(e){ // e.detail.value.xxx }, calReset: function(e){ }, bindPickerChangeGender: function(e){ this.setData({ indexgender: e.detail.value }) }, bindPickerChangeSport: function(e){ this.setData({ indexsport: e.detail.value }) }})有了这部分代码之后，咱们就有了基本的结构，在上面这些代码中，可以看出
、、这三个标签是新学的知识，咱们先来熟悉标签的用法，再按照计算规则在js中进行计算，最终将结果显示在wxml中，大功便告成啦！首先，form和input是一对，input是用来让用户输入内容的，而form是用来提交的。接下来咱们探究一下form提交数据的过程，首先还是看一段代码：
请输入身高：input> 提交button> 在上面的代码中，我们就是在输入框里输入一个数据，然后可以提交数据或者重置数据，输入的数据存放在名称为tall的变量中，提交按钮对应表单中的类型为submit，呼应form标签中的bindsubmit，绑定的是tallSubmit函数，在调用函数的时候，会有一个参数event，在event中可以通过调用event.detail.value.tall来获取输入的值；同理，重置按钮类型为reset，呼应的是bindreset，绑定的是tallReset函数。
接下来，仔细的你一定看到了不普通的picker标签，它为何方神圣呢？就是预先将选项设置好，当大家点击的时候，可以通过滑动列表来选择，确保不会输入其他内容，代码如下所示：
{{arrgender[indexgender]}}view>picker> 这个标签承载的内容很多，咱们来逐个剖析，首先是设置所承载的内容(range)及当前值是第几个内容(value)，在上面代码中，arrgender是数组，只有两个值 ['男', '女']，indexgender是当前值的下标为0，那么就可以很容易知道{{arrgender[indexgender]}}显示的值就是 男 ，也就是默认值是男，当点击选择改变时，就会调用函数bindPickerChangeGender，在函数中，会获取当前所选择的下标，并更新indexgender变量，这样便能显示出更改啦。
这里是分割线，请各位先将上面的代码复制到开发环境中运行并感受一下，再继续下面的内容。
如果上面的运行原理你都搞清楚了，那么恭喜你！咱们继续下面的内容。接下来，咱们就要开始对想要得到的数据进行计算了，首先大家要清楚一个问题，就是所有的计算都是在计算按钮绑定的calSubmit函数中完成的，在开始具体计算之前，咱们把最后要显示的内容摆出来：
您体型{{shape}}view> 理想体重：{{perfectweight}}view> 身体质量指数：{{weightexp}}(21-22为最佳)view> 基础代谢率：{{metabolic}}卡路里/天view> 每天需要热量：{{heat}}卡路里/天view> 如需增重：{{heat+500}} ~ {{heat+1000}}卡路里/天view> 如需减重：{{heat-1000}} ~ {{heat-500}}卡路里/天view>view> 通过看到wx:if就能知道，需要改变状态(也就是点击calSubmit进行计算，并且要计算成功)才能将结果显示出来。
那么下面就开始书写函数吧：
data:{ sportpara: [[1.55, 1.78, 2.10], [1.56, 1.64, 1.82]], calsuccess: false, shape: '', perfectweight:0, weightexp: 0, metabolic: 0, heat: 0},calSubmit: function(e){ //通过picker选择器来获取性别 var gender = this.data.arrgender[this.data.indexgender]; //通过input输入框获取身高数据 var tall = e.detail.value.tall; //通过input输入框获取体重数据 var weight = e.detail.value.weight; //通过input输入框获取年龄数据 var age = e.detail.value.age; //通过picker选择器来获取运动强度 var sportpara = this.data.indexsport; //下面三个参数通过调用函数来获取 var bmi = this.getBmi(tall, weight); var metabolic = this.getMetabolic(gender,weight,tall,age); var heat = this.getHeat(gender, age, weight, sportpara); this.setData({ calsuccess: true, shape: bmi[0], perfectweight: bmi[1], weightexp: bmi[2], metabolic: metabolic, heat: heat })},getBmi: function(tall,weight){ console.log(tall, weight); var bmi = weight / (tall/100) / (tall/100); var shape = ''; var expectweight = 21.5 * (tall/100) * (tall/100); if(bmi <= 18.4) shape = "偏瘦"; else if(bmi <= 23.9) shape = "正常"; else if(bmi <= 27.9) shape = "过重"; else shape = "肥胖"; return [shape, expectweight, bmi]; //这个return的方式大家可以学习一下，但是不要过分依赖 //这个方式是将不同类型的数据绑定到一个数组中，再按位置进行调用。 }, getMetabolic: function (gender, weight, tall, age){ if(gender == "男"){ return 67 + 13.73 * weight + 5 * (tall) - 6.9 * age; }else{ return 661 + 9.6 * weight + 1.72 * (tall) - 4.7 * age; } }, getHeat: function(gender, age, weight, sportpara){ sportpara = parseInt(sportpara); if(gender == "男"){ if(age <= 17){ return (17.5 * weight + 651) * this.data.sportpara[0][sportpara]; }else if(age <= 29){ return (15.3 * weight + 679) * this.data.sportpara[0][sportpara]; }else if(age <= 59){ return (11.6 * weight + 879) * this.data.sportpara[0][sportpara]; }else{ return (13.5 * weight + 487) * this.data.sportpara[0][sportpara]; } }else{ if (age <= 17) { return (12.2 * weight + 746) * this.data.sportpara[1][sportpara]; } else if (age <= 29) { return (14.7 * weight + 496) * this.data.sportpara[1][sportpara]; } else if (age <= 59) { return (8.7 * weight + 829) * this.data.sportpara[1][sportpara]; } else { return (10.5 * weight + 596) * this.data.sportpara[1][sportpara]; } } }代码看起来特别长，可是只要仔细分析一下就不那么可怕了，整个是四个函数：calSubmit、getBmi、getMetabolic、getHeat
calSubmit是计算按钮触发的函数，用来计算各种想要得到的值，由于要计算的内容比较多，所以将一些计算进行拆分，封装进不同的函数中，方便以后的维护。
getBmi是计算身体质量指数的函数，通过计算公式将bmi值计算出来，并计算出是否肥胖、标准体重，将这三个值组合成一个数组，返回。
getMetabolic是计算基础代谢率的函数。
getHeat是计算每日所需热量的函数。计算的代码就是根据计算规则来书写代码即可，这里需要主意一行代码就是：
return (17.5 * weight + 651) * this.data.sportpara[0][sportpara];sportpara是一个二维数组，存储男女运动程度所对应的系数。第一维0是男性运动系数数组、1是女性运动系数数组，第二维是轻度、中度、重度三个层次的具体系数，这个sportpara变量就是通过picker标签获取的数组中的下标，同轻度中度重度依次对应。
在所有计算结束后，在calSubmit中进行值的更改即可，大功告成！通过这个例子大家可以看出来，虽然代码很长，但是并不一定很难理解，很多时候特别长的代码部分仅仅是一些计算规则，一些固定算法而已，这个时候可以选择对其进行封装，将其封装成函数，然后再进行调用。例如上面代码中第23、24、25这三行代码，调用封装好的函数进行使用，但要注意调用的时候不要忘了this哦，不知道原因是什么？因为它是Page下面的一个又一个属性呀。
明白以上代码，这个程序也就算结束了，但这个程序还有一些隐藏的bug，例如：在输入框中如何确定只允许输入大于零的数字，如何强制将三个框都输入进数据才允许计算、显示结果如何控制小数位数等等。
这些大家在理解好上面代码之后，自行修改。
也祝愿大家都有个好身材哦～～～❤️❤️❤️
