微信小程序项目实例——体质计算器

微信小程序项目实例——体质计算器

项目代码见文字底部，点赞关注有惊喜

---

一、项目展示

体质计算器是一款简单的健康类小程序
用户可以根据自身的身高和体重
选择所测标准（中国、亚洲、国际）
生成自身BMI值和当前身体状况
并给出标准体重和相关疾病的预测

二、项目核心代码

小程序仅一个简单的页面
从上至下分别是测试结果、数据收集和BMI对照表
用户可以选择三大标准【中国、亚洲、国际】
身体状况分为【偏瘦、正常、 偏胖、肥胖、 重度肥胖、极重度肥胖】

<!--index.wxml-->
<view class="container">
  <view class="result">
    <view class="title">BMI值</view>
    <view class="score">{
   
   {score}}</view>
    <view class="tip first-tip">
      <view class="physical-condition">身体状况：<text class="">{
   
   {physicalCondition}}</text></view>
      <view class="weight-standard no-border">身高标准体重：<text class="">{
   
   {weightStandard}}kg</text></view>
    </view>
    <view class="tip">
      <view class="physical-condition">相关疾病发病危险性: <text class="">{
   
   {danger}}</text></view>
    </view>
  </view>
  <view class="input-container">
    <view class="item">
      <text class="label">身高</text>
      <text class="unit">cm</text>
      <input type="digit" bindinput="bindKeyHightInput" maxlength="6" class="" />
    </view>
    <view class="item">
      <text class="label">体重</text>
      <text class="unit">kg</text>
      <input type="digit" bindinput="bindKeyWeightInput" maxlength="6" class="" />
    </view>
    <view class="item no-border">
      <text class="label">标准</text>
      <picker mode="selector" value="{
   
   {index}}" range="{
   
   {array}}" bindchange="bindPickerChange" class="type_select">
        <view class="picker">
          {
   
   {array[index]}}
          <text>></text>
        </view>
      </picker>
    </view>
    <button class="calcu_btn" bindtap="calculateBtn">开始计算</button>
  </view>

  <view class="compatable">
    <text class="table-title">标准对照表</text>
    <!--中国标准-->
    <view class="table" hidden="{
   
   {index!= 0}}">
      <view class="row thead">
        <text class="col">BMI值</text>
        <text class="col">身体状况</text>
      </view>
      <view class="row">
        <text class="col">{
   
   {charLt}}18.5</text>
        <text class="col">偏瘦</text>
      </view>
      <view class="row">
        <text class="col">	18.5～23.9</text>
        <text class="col">正常</text>
      </view>
       <view class="row">
        <text class="col">24～27.9</text>
        <text class="col">偏胖</text>
      </view>
       <view class="row">
        <text class="col">≥28</text>
        <text class="col">肥胖</text>
      </view>
    </view>

    <!--国际标准-->
    <view class="table" hidden="{
   
   {index!= 1}}">
      <view class="row thead">
        <text class="col">BMI值</text>
        <text class="col">身体状况</text>
      </view>
      <view class="row">
        <text class="col">{
   
   {charLt}}18.5</text>
        <text class="col">偏瘦</text>
      </view>
      <view class="row">
        <text class="col">	18.5～24.9</text>
        <text class="col">正常</text>
      </view>
       <view class="row">
        <text class="col">25～29.9</text>
        <text class="col">偏胖</text>
      </view>
             <view class="row">
        <text class="col">30.0～34.9</text>
        <text class="col">肥胖</text>
      </view>
       <view class="row">
        <text class="col">35.0～39.9</text>
        <text class="col">重度肥胖</text>
      </view>
       <view class="row">
        <text class="col">≥40.0</text>
        <text class="col">极重度肥胖</text>
      </view>
    </view>
    <!--亚洲标准-->
     <view class="table" hidden="{
   
   {index!= 2}}">
      <view class="row thead">
        <text class="col">BMI值</text>
        <text class="col">身体状况</text>
      </view>
      <view class="row">
        <text class="col">{
   
   {charLt}}18.5</text>
        <text class="col">偏瘦</text>
      </view>
      <view class="row">
        <text class="col">	18.5～22.9</text>
        <text class="col">正常</text>
      </view>
       <view class="row">
        <text class="col">23～24.9</text>
        <text class="col">偏胖</text>
      </view>
       <view class="row">
        <text class="col">25～29.9</text>
        <text class="col">肥胖</text>
      </view>
      <view class="row">
        <text class="col">≥30</text>
        <text class="col">重度肥胖</text>
      </view>
    </view>
  </view>
</view>

/**index.wxss**/
.result{
  width:100%;
  background-color: #22afcc;
}

.result .title{
  padding: 0 40rpx;
  font-size: 28rpx;
  padding-top:20rpx;
  color: #f1f1f1;
  font-weight:600;
}

.result .score{
  padding: 0 40rpx;
  line-height: 100rpx;
  font-size: 60rpx;
  color: #fff;
}

 .tip{
   display: flex;
 }

 .first-tip{
   margin-bottom: 4rpx;
 }

 .tip view{
   line-height: 80rpx;
   color: #f1f1f1;
   font-size: 24rpx;
   background-color:#20a1bb;
   flex: 1;
   padding-left: 40rpx;
 }

 .tip view text{
   color: #fff;
 }

 .physical-condition{
    margin: 0 4rpx 0 0;
 }

.input-container {
   padding: 0 40rpx;
}
.item {
  border-bottom: 1px solid #e2e2e2;
  height:56rpx;
  line-height: 56rpx;
  font-size:32rpx;
  padding: 20rpx 0rpx;
  color: #909090;
}

.item .label{
  width: 20%;
  float: left;
  vertical-align: middle;
}

.item input{
  margin-left: 30%;
  margin-right: 10%;
  height:40rpx;
  border: 1rpx solid #d9d9d9;
  border-radius: 6rpx;
  background-color: #f1f1f1;
  text-align: right;
  padding-right: 8rpx;
  color:#22afcc;
}

.item .unit{
  float: right;
}

.item .type_select{
  float: right;
}

.item .type_select text{
  margin-left: 8rpx;
}

.no-border{
  border-bottom: 0px;
}

.calcu_btn {
  background-color: #22afcc;
  color: #fff;
  font-weight: 400;
}

#result-container{
  padding: 20rpx 0;
}

.compatable{
  padding: 40rpx 40rpx 0 40rpx;
  font-size: 28rpx;
  color:#909090;
}

.compatable .table-title{
  line-height: 50rpx;
  height: 50rpx;
}

.table{
  border: 1rpx solid #e2e2e2;
}

.table .row{
  display: flex;
  border-bottom: 1rpx solid #e2e2e2;
  line-height: 60rpx;
  height: 60rpx;
}

.table .row .col{
  flex: 1;
  text-align: center;
  border-right: 1rpx solid #e2e2e2;
}

.table .thead{
  background-color: #22afcc;
  color:#f1f1f1;
}

.table .row .col:last-child{
  border-right: 0rpx;
}

.table .row:last-child{
   border-bottom: 0rpx;
}

文末

具体的介绍就到这里了
有兴趣的同学可以继续研究
代码放到下面链接里了

点击下载 小程序