Exemple de projet d'applet Wechat - calculatrice de constitution

Exemple de projet d'applet Wechat——Calculatrice de masse corporelle

Voir le bas du texte pour le Code du projet,Il y a des surprises

---

Un.、Présentation du projet

La calculatrice de masse corporelle est une simple applet de classe santé
L'utilisateur peut choisir en fonction de sa taille et de son poids
Sélectionner les critères mesurés（Chine、Asie、International）
Générer soi - mêmeBMIValeurs et état de santé actuel
.Et donne des prédictions du poids standard et des maladies associées

2.、Code de base du projet

Applet n'a qu'une page simple
Les résultats des tests sont de haut en bas、Collecte de données etBMITableau comparatif
L'utilisateur peut choisir trois critères【Chine、Asie、International】
L'état physique est divisé en【Maigre、Normal、 Trop gros.、Obésité、 Obésité sévère、Obésité extrême】

<!--index.wxml-->
<view class="container">
  <view class="result">
    <view class="title">BMIValeur</view>
    <view class="score">{
   {score}}</view>
    <view class="tip first-tip">
      <view class="physical-condition">Condition physique：<text class="">{
   {physicalCondition}}</text></view>
      <view class="weight-standard no-border"> Taille poids standard ：<text class="">{
   {weightStandard}}kg</text></view>
    </view>
    <view class="tip">
      <view class="physical-condition"> Risque de maladies connexes : <text class="">{
   {danger}}</text></view>
    </view>
  </view>
  <view class="input-container">
    <view class="item">
      <text class="label">Taille</text>
      <text class="unit">cm</text>
      <input type="digit" bindinput="bindKeyHightInput" maxlength="6" class="" />
    </view>
    <view class="item">
      <text class="label">Poids corporel</text>
      <text class="unit">kg</text>
      <input type="digit" bindinput="bindKeyWeightInput" maxlength="6" class="" />
    </view>
    <view class="item no-border">
      <text class="label">Critères</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">Début du calcul</button>
  </view>

  <view class="compatable">
    <text class="table-title"> Tableau de référence standard </text>
    <!--Normes chinoises-->
    <view class="table" hidden="{
   {index!= 0}}">
      <view class="row thead">
        <text class="col">BMIValeur</text>
        <text class="col">Condition physique</text>
      </view>
      <view class="row">
        <text class="col">{
   {charLt}}18.5</text>
        <text class="col">Maigre</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">Trop gros.</text>
      </view>
       <view class="row">
        <text class="col">≥28</text>
        <text class="col">Obésité</text>
      </view>
    </view>

    <!--Normes internationales-->
    <view class="table" hidden="{
   {index!= 1}}">
      <view class="row thead">
        <text class="col">BMIValeur</text>
        <text class="col">Condition physique</text>
      </view>
      <view class="row">
        <text class="col">{
   {charLt}}18.5</text>
        <text class="col">Maigre</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">Trop gros.</text>
      </view>
             <view class="row">
        <text class="col">30.0～34.9</text>
        <text class="col">Obésité</text>
      </view>
       <view class="row">
        <text class="col">35.0～39.9</text>
        <text class="col">Obésité sévère</text>
      </view>
       <view class="row">
        <text class="col">≥40.0</text>
        <text class="col">Obésité extrême</text>
      </view>
    </view>
    <!-- Normes asiatiques -->
     <view class="table" hidden="{
   {index!= 2}}">
      <view class="row thead">
        <text class="col">BMIValeur</text>
        <text class="col">Condition physique</text>
      </view>
      <view class="row">
        <text class="col">{
   {charLt}}18.5</text>
        <text class="col">Maigre</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">Trop gros.</text>
      </view>
       <view class="row">
        <text class="col">25～29.9</text>
        <text class="col">Obésité</text>
      </view>
      <view class="row">
        <text class="col">≥30</text>
        <text class="col">Obésité sévère</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;
}

Fin du texte

Voici les détails
Les étudiants intéressés peuvent poursuivre leurs études
Le Code est dans le lien ci - dessous.

Cliquez pour télécharger Applet