Wechat applet project example - Fitness calculator

Wechat applet project example —— Physique calculator

See the bottom of the text for the project code , Praise, focus and surprise

---

One 、 Project presentation

Fitness calculator is a simple health class small program
Users can choose their own height and weight
Select the measured standard （ China 、 Asia 、 The international ）
Generate itself BMI Value and current physical condition
The standard body weight and the prediction of related diseases are given

Two 、 Project core code

An applet is just a simple page
From top to bottom are the test results 、 Data collection and BMI Comparison table
Users can select three criteria 【 China 、 Asia 、 The international 】
Physical condition is divided into 【 Thin 、 normal 、 Overweight 、 obesity 、 Severe obesity 、 Extremely obese 】

<!--index.wxml-->
<view class="container">
  <view class="result">
    <view class="title">BMI value </view>
    <view class="score">{
   {score}}</view>
    <view class="tip first-tip">
      <view class="physical-condition"> Physical condition ：<text class="">{
   {physicalCondition}}</text></view>
      <view class="weight-standard no-border"> Height standard weight ：<text class="">{
   {weightStandard}}kg</text></view>
    </view>
    <view class="tip">
      <view class="physical-condition"> Risk of related diseases : <text class="">{
   {danger}}</text></view>
    </view>
  </view>
  <view class="input-container">
    <view class="item">
      <text class="label"> height </text>
      <text class="unit">cm</text>
      <input type="digit" bindinput="bindKeyHightInput" maxlength="6" class="" />
    </view>
    <view class="item">
      <text class="label"> weight </text>
      <text class="unit">kg</text>
      <input type="digit" bindinput="bindKeyWeightInput" maxlength="6" class="" />
    </view>
    <view class="item no-border">
      <text class="label"> standard </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"> Start calculating </button>
  </view>

  <view class="compatable">
    <text class="table-title"> Standard comparison table </text>
    <!-- Chinese standards -->
    <view class="table" hidden="{
   {index!= 0}}">
      <view class="row thead">
        <text class="col">BMI value </text>
        <text class="col"> Physical condition </text>
      </view>
      <view class="row">
        <text class="col">{
   {charLt}}18.5</text>
        <text class="col"> Thin </text>
      </view>
      <view class="row">
        <text class="col">	18.5～23.9</text>
        <text class="col"> normal </text>
      </view>
       <view class="row">
        <text class="col">24～27.9</text>
        <text class="col"> Overweight </text>
      </view>
       <view class="row">
        <text class="col">≥28</text>
        <text class="col"> obesity </text>
      </view>
    </view>

    <!-- international standard -->
    <view class="table" hidden="{
   {index!= 1}}">
      <view class="row thead">
        <text class="col">BMI value </text>
        <text class="col"> Physical condition </text>
      </view>
      <view class="row">
        <text class="col">{
   {charLt}}18.5</text>
        <text class="col"> Thin </text>
      </view>
      <view class="row">
        <text class="col">	18.5～24.9</text>
        <text class="col"> normal </text>
      </view>
       <view class="row">
        <text class="col">25～29.9</text>
        <text class="col"> Overweight </text>
      </view>
             <view class="row">
        <text class="col">30.0～34.9</text>
        <text class="col"> obesity </text>
      </view>
       <view class="row">
        <text class="col">35.0～39.9</text>
        <text class="col"> Severe obesity </text>
      </view>
       <view class="row">
        <text class="col">≥40.0</text>
        <text class="col"> Extremely obese </text>
      </view>
    </view>
    <!-- Asian standard -->
     <view class="table" hidden="{
   {index!= 2}}">
      <view class="row thead">
        <text class="col">BMI value </text>
        <text class="col"> Physical condition </text>
      </view>
      <view class="row">
        <text class="col">{
   {charLt}}18.5</text>
        <text class="col"> Thin </text>
      </view>
      <view class="row">
        <text class="col">	18.5～22.9</text>
        <text class="col"> normal </text>
      </view>
       <view class="row">
        <text class="col">23～24.9</text>
        <text class="col"> Overweight </text>
      </view>
       <view class="row">
        <text class="col">25～29.9</text>
        <text class="col"> obesity </text>
      </view>
      <view class="row">
        <text class="col">≥30</text>
        <text class="col"> Severe obesity </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;
}

At the end of the article

That's all for the specific introduction
Interested students can continue to study
The code is in the link below

Click to download Applet