微信小程序——简单饮食推荐（四）

该篇是转接我的文章简单饮食推荐（一）功能实现中的个人数据模块。

1、个人数据页面简介

该模块主要使用的是小程序中使用的Form组件加上Input组件，最后使用的按钮进行数据的传输到JS中进行处理，Input输入您的性别，您的年龄，身高体重的数据，使用公式进行科学热量计算的。

---

2、模块创意

在该模块中，创意点如下：

创意点是form组件通过input实现数据的传输，使用按钮的点击事件，进行数据的处理，使用公式来计算热量的可摄入量。
还有就是使用缓存的进行数据的存储，个人的数据并不多，所以使用的同步存储缓存，并且提取也是使用的同步提取。通过存入缓存，实现别的界面实现数据的提取和存储。之后进行多人数据的存储的话，之后会使用小程序的云开发使用数据库来存储，更加方便了。

---

3、设计思路

要想完成该模块并实现菜品识别的相应功能，必须要解决下面的这几个问题：

• 使用Form组件
• Form组件里面使用input组件来输入
• 按钮进行数据传输，处理
• 显示可以摄入的热量
• 缓存存储个人数据

---

4、实现过程

4.1 使用Form组件

我们使用Form组件，嵌套input组件，使用按钮，进行数据的处理，在JS文件中进行处理。
使用Form，input组件进行处理

<form bindsubmit="csc" bindreset="reset">
  <input name="name" placeholder="请输入你的性别" type="text" ></input>
  <input name="shengao" placeholder="请输入你的身高（cm）" type="digit" auto-focus="true"></input>
  <input name="tizhong" placeholder="请输入你的体重（kg）" type="digit" auto-focus="true"></input>
  <input name="year" placeholder="请输入你的年龄" type="number" auto-focus="true"></input>
  <button type="primary" form-type="submit">计算出你的每天可以的热量输入</button>
</form>

后面再来一句来实现你可以摄入的热量的输入

 <view class="shujushuchu">
    每天可以摄入的热量:
    <view>{{reliang}}千卡</view>
 </view>

4.2 通过公式实现热量计算

公式是网上搜的（只是用于测试，结果仅作参考🤫）

按每个人的性别、体重、身高以及年龄来计算。计算公式为：

• 男性：66 + ［ 13.7 × 体重（千克）］ + ［5 × 身高（厘米）］-（6.8 × 年龄）
• 女性：655 + ［ 9.6 × 体重（千克）］ + ［1.7 × 高度（厘米）］-（4.7 × 年龄）

（例如44岁的张先生，身高183厘米，重88千克，那么他每天所需的热量为：66 +（13.7× 88）+（5×183）-（6.8× 44）=1887千卡；
又例如，23岁的高小姐，身高160厘米，重55千克，那么她每天所需的热量为： 655+（9.6×55）+（1.7 × 160）-（4.7×23）=1347千卡。）

对于数据性别进行数据的选择，如果是男的走男性公式，如果是女的，走女性公式

csc:function(e){
    var name = e.detail.value.name;
    var shengao = parseFloat(e.detail.value.shengao) ;
    var tizhong = parseFloat(e.detail.value.tizhong) ;
    var year = parseFloat(e.detail.value.year);
    var reliang = 0;
    if(name == "男"||name == "nan"||name == "man"){
      reliang = parseInt(66+(13.7*tizhong)+(5*shengao)-(6.8*year));
    }else if(name == "女"||name == "nv"||name == "woman"){
      reliang = parseInt(655+(9.6*tizhong)+(1.7*shengao)-(4.7*year));
    }else{
      wx.showToast({
        title: '请输入正常的性别',
        icon:'none',
        duration:2000
      })
    }
    var man = new Array();
    var man1 = new this.man('1',name,shengao,tizhong,year,reliang);
    man.push(man1);
    wx.setStorageSync('热量',man );
    try{
      var value = wx.getStorageSync('热量');
      console.log(value);
    }catch(e){
      console.log(e);
    }
    this.setData({
      reliang:reliang
    })
  }

4.3 使用的同步储存缓存数据

我们使用存入缓存中进行数据的存储的，别的界面进行数据的调用，并且我们通过同步存储进行缓存的存入，对于缓存存取需要定义对象，所以我定义了一个人的对象，里面有性别，年龄，身高，体重。

man:function(id,name,shengao,tizhong,year,reliang){
    this.id = id;
    this.name = name;
    this.shengao = shengao;
    this.tizhong = tizhong;
    this.year = year;
    this.reliang = reliang;
  },

把对象进行实例化，然后存入缓存中去，最后测试提取是否成功，如果成功则输出提取的数据，如果不成功，输出不成功的返回值。

var man = new Array();
var man1 = new this.man('1',name,shengao,tizhong,year,reliang);
man.push(man1);
wx.setStorageSync('热量',man );
try{
  var value = wx.getStorageSync('热量');
  console.log(value);
}catch(e){
  console.log(e);
}
this.setData({
  reliang:reliang
})

5、总体外观设计

这部分的wxml关键代码如下：

<!--pages/shuju/shuju.wxml-->
<view class="title">
  <view>你的身体数据？？？？？</view>
</view>
<view>
<form bindsubmit="csc" bindreset="reset">
  <input name="name" placeholder="请输入你的性别" type="text" ></input>
  <input name="shengao" placeholder="请输入你的身高（cm）" type="digit" auto-focus="true"></input>
  <input name="tizhong" placeholder="请输入你的体重（kg）" type="digit" auto-focus="true"></input>
  <input name="year" placeholder="请输入你的年龄" type="number" auto-focus="true"></input>
  <button type="primary" form-type="submit">计算出你的每天可以的热量输入</button>
  <view class="shujushuchu">
    每天可以摄入的热量:
    <view>{{reliang}}千卡</view>
  </view>
</form>
</view>

通过JS文件进行数据的处理，计算出热量值，并且存入缓存中，

使用WXSS文件实现了，布局和排布：

.title{
  text-align: center;
  font-size: 15px;
  color: rgb(245, 177, 75);

}
.shujushuchu{
  text-align: center;
  font-size: larger;
  font-style: italic;
  color: blueviolet;
}
input{
  border: 2px solid rgb(0, 255, 234);
  border-radius: 10px;
  margin: 30px 10px;
  font-size: 15px;
  color: black;
  padding: 15px;
}
button{
  background-color: black;
  margin: 10px;
}

这样这部分的实现效果就如下图所示：

6、验证效果

输入数据，点击按钮，即可把数据计算出来，如下：

再去看Console中，发现已经有输出了：

之后去看Storage中，就发现了缓存中间也有了东西

7、与其他部分的关系

通过输入自己的身体数据，可以直观的看到自己一天所需的热量，从而选餐时可以清楚地了解到自己应该选择多少热量的饭餐来达到合理科学饮食的目的。该部分是科学合理饮食不可或缺的一部分，每个人的身体数据都是不同的，所需要的能量也是不同的，所以该部分有着承前启后的作用。