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

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;
}