微信小程序实现体重指数计算

微信小程序实现体重指数计算

使用微信小程序实现体重指数计算，功能详细、代码简洁，根据输入的身高、体重，分析出患相关疾病的概率，以及给出具体的健康建议。该界面示例已同步至微信小程序，在微信搜索「蒜鸟编程」即可查看运行示例。感兴趣的小伙伴，可在小红书、抖音搜索用户「蒜鸟编程」，关注我，将不定时更新各类示例~ 希望这些内容能为正在学习的朋友提供参考，若存在不足或问题，也恳请大家不吝指正！具体图片如下：

1、js代码：

Page({
  data: {
    height: '',
    weight: '',
    canCalculate: false,
    bmiValue: 0,
    bmiCategory: '---',
    bmiCategoryClass: '',
    standardWeightRange: [0, 0],
    riskList: [{
        'title': '高血压',
        'ratio': 0,
        'riskClass': '#4CAF50'
      },
      {
        'title': '糖尿病',
        'ratio': 0,
        'riskClass': '#FF9800'
      },
      {
        'title': '高血脂',
        'ratio': 0,
        'riskClass': '#F44336'
      },
      {
        'title': '冠心病',
        'ratio': 0,
        'riskClass': '#D32F2F'
      },
    ],
    healthTips: '',
    standList: [{
        col1: '<18.5',
        col2: '偏瘦'
      },
      {
        col1: '18.5~23.9',
        col2: '正常'
      },
      {
        col1: '24~27.9',
        col2: '偏胖'
      },
      {
        col1: '28~31.9',
        col2: '肥胖'
      },
      {
        col1: '≥32',
        col2: '重度肥胖'
      }
    ]
  },

  // 输入绑定
  onInputClick: function (e) {
    let keys = e.currentTarget.dataset.key;
    this.setData({
      [keys]: e.detail.value
    });
    this.checkInputValidity();
  },
  // 校验
  checkInputValidity: function () {
    const height = this.data.height;
    const weight = this.data.weight;
    const canCalculate = height && weight &&
      !isNaN(Number(height)) &&
      !isNaN(Number(weight)) &&
      Number(height) > 0 &&
      Number(weight) > 0;
    this.setData({
      canCalculate: canCalculate
    });
  },
  // 开始计算
  calculateClick: function () {
    const datas = Number(this.data.height);
    const weight = Number(this.data.weight);
    if(datas<120 || datas>220){
      wx.showToast({
        title: '身高的范围在【120cm~220cm】之间呦',
        icon: 'none'
      })
      return false;
    }
    if(weight<30 || weight>150){
      wx.showToast({
        title: '体重的范围在【30kg~150kg】之间呦',
        icon: 'none'
      })
      return false;
    }
    const height = datas / 100; // 转换为米
    const bmi = weight / (height * height);
    let category = '';
    let categoryClass = '';
    if (bmi < 18.5) {
      category = '体重过轻';
      categoryClass = 'underweight';
    } else if (bmi < 24) {
      category = '正常范围';
      categoryClass = 'normal';
    } else if (bmi < 28) {
      category = '超重';
      categoryClass = 'overweight';
    } else if (bmi < 32) {
      category = '肥胖';
      categoryClass = 'obese';
    } else {
      category = '重度肥胖';
      categoryClass = 'severely-obese';
    }
    const standardWeight = (height * 100 - 100) * 0.9;
    const weightRange = [
      (standardWeight * 0.9).toFixed(1),
      (standardWeight * 1.1).toFixed(1)
    ];
    const riskAssessment = this.calculateRiskAssessment(bmi);
    const healthTips = this.generateHealthTips(categoryClass);
    this.setData({
      bmiValue: bmi.toFixed(1),
      bmiCategory: category,
      bmiCategoryClass: categoryClass,
      standardWeightRange: weightRange,
      riskList: riskAssessment,
      healthTips: healthTips
    });
  },
  // 疾病风险评估
  calculateRiskAssessment: function (bmi) {
    const riskData = [{
        title: '高血压',
        baseRatio: 10
      },
      {
        title: '糖尿病',
        baseRatio: 8
      },
      {
        title: '高血脂',
        baseRatio: 12
      },
      {
        title: '冠心病',
        baseRatio: 6
      }
    ];
    return riskData.map(risk => {
      let ratio = risk.baseRatio;
      let riskClass = '#4CAF50';
      if (bmi >= 24) {
        ratio += (bmi - 24) * 2;
        riskClass = '#FF9800';
      }
      if (bmi >= 28) {
        ratio += (bmi - 28) * 3;
        riskClass = '#F44336';
      }
      if (bmi >= 32) {
        ratio += (bmi - 32) * 5;
        riskClass = '#D32F2F';
      }
      // 限制最大概率为95%
      ratio = Math.min(ratio, 95);
      return {
        ...risk,
        ratio: ratio.toFixed(1),
        riskClass: riskClass
      };
    });
  },
  // 生成健康建议 (高性能实现: 预定义建议模板)
  generateHealthTips: function (category) {
    console.log(category)
    const tipsMap = {
      'underweight': '您的体重过轻，建议增加蛋白质摄入，合理增重，保持健康饮食和规律作息。',
      'normal': '您的体重正常，继续保持健康的生活方式，均衡饮食，适量运动。',
      'overweight': '您的体重超重，建议控制热量摄入，增加运动量，逐步减轻体重，降低患病风险。',
      'obese': '您的体重肥胖，建议咨询专业医生或营养师，制定科学的减重计划，定期体检。',
      'severely-obese': '您的体重重度肥胖，患慢性疾病的风险很高，建议立即寻求医疗帮助，制定严格的减重和健康管理方案。'
    };
    return tipsMap[category] || '请保持健康的生活方式，均衡饮食，适量运动。';
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
});

2、wxml代码：

<view class="level top-box">
  <view class="top-col">
    <text class="top-1">身体状况text>
    <text class="top-2 {{bmiCategoryClass}}">{{bmiCategory}}text>
  view>
  <view class="top-col">
    <view class="top-dot">
      <text class="top-num {{bmiCategoryClass}}">{{bmiValue}}text>
      <text class="top-2">BMI指数text>
    view>
  view>
  <view class="top-col">
    <text class="top-1">标准范围text>
    <text class="top-2" wx:if="{{standardWeightRange[0]==0}}">---text>
    <text class="top-2 {{bmiCategoryClass}}" wx:else>{{standardWeightRange[0]+'~'+standardWeightRange[1]}}kgtext>
  view>
  <view class="top-tip">
    <text class="top-tip-text">注：平台仅提供参考示例，不作为其他依据text>
  view>
view>
<view class="input-section">
  <view class="input-group">
    <text class="label">身高 (cm)text>
    <input class="input" type="number" bindinput="onInputClick" maxlength="6" data-key="height" value="{{height}}" placeholder="请输入身高" />
  view>
  <view class="input-group">
    <text class="label">体重 (kg)text>
    <input class="input" type="number" bindinput="onInputClick" maxlength="5" data-key="weight" value="{{weight}}" placeholder="请输入体重" />
  view>
  <button class="calculate-btn" bindtap="calculateClick" disabled="{{!canCalculate}}">
    开始计算
  button>
view>
<view class="any-box">
  <view class="any-title">相关疾病风险评估view>
  <block wx:for="{{riskList}}" wx:for-item="item" wx:key="item" wx:for-index="index">
    <view class="margin">
      <view>{{item.title}}view>
      <progress percent="{{item.ratio}}" show-info color="{{item.riskClass}}" border-radius="10">progress>
    view>
  block>
  <block wx:if="{{healthTips!=''}}">
    <view class="any-title">健康建议view>
    <view class="any-advice">{{healthTips}}view>
  block>
view>

<view class="any-box end-box">
  <view class="any-title">标准对照表view>
  <view class="any-row">
    <view class="level">
      <view class="table-row header-cell">BMI值view>
      <view class="table-row header-cell">身体状况view>
    view>
    <view class="level" wx:for="{{standList}}" wx:key="index">
      <view class="table-cell table-row">{{item.col1}}view>
      <view class="table-cell table-row">{{item.col2}}view>
    view>
  view>
view>

3、wxss代码：

page {
  font-size: 32rpx;
  padding-bottom: 20rpx;
  background-color: #f1f1f1;
}

.level {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.top-box {
  position: relative;
  padding: 40rpx 20rpx 60rpx 20rpx;
  background-color: #3CB371;
}

.top-col {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.top-1 {
  font-weight: bold;
  margin: 10rpx 20rpx;
}

.top-2 {
  margin: 0 20rpx;
  font-size: 28rpx;
  color: #696969;
}

.top-num {
  padding-bottom: 10rpx;
  font-size: 40rpx;
  font-weight: bold;
}

.top-dot {
  display: flex;
  flex-direction: column;
  background-color: white;
  color: #000000;
  border-radius: 200rpx;
  width: 200rpx;
  height: 200rpx;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 15rpx 15rpx #75be96;
}

.top-tip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -20rpx;
  text-align: center;
}

.top-tip-text {
  background-color: #ffffff;
  padding: 15rpx 10%;
  font-size: 24rpx;
  border-radius: 50rpx;
  color: #909399;
}

.input-section {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 25rpx;
  margin-top: 50rpx;
}

.input-group {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.label {
  width: 20%;
  font-size: 28rpx;
  color: #666;
}

.input {
  flex: 1;
  height: 80rpx;
  font-size: 32rpx;
  padding: 0 10rpx;
  border-bottom: 1rpx solid #eee;
}

.calculate-btn {
  background-color: #4CAF50;
  color: white;
  font-size: 32rpx;
  margin-top: 20rpx;
  border-radius: 40rpx;
  height: 88rpx;
  line-height: 88rpx;
  padding: 0;
  box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.3);
}

.calculate-btn[disabled] {
  background-color: #ccc;
  box-shadow: none;
}

.calculate-btn::after {
  box-shadow: none;
  border: none;
}

.any-box {
  background-color: white;
  padding: 20rpx;
}

.any-title {
  font-weight: bold;
  margin-bottom: 40rpx;
  margin-top: 20rpx;
}

.margin {
  margin-top: 20rpx;
}

.any-advice {
  margin-bottom: 20rpx;
  margin-top: -15rpx;
  font-size: 30rpx;
  color: #777777;
}

/* 提示文字 */

.underweight {
  color: #2b85e4;
}

.normal {
  color: #5ef507;
}

.overweight {
  color: #f29100;
}

.obese {
  color: #dd6161;
}

.severely-obese {
  color: #fa3534;
}


.end-box {
  margin-top: 25rpx;
}

/* 表格 */
.table-row {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  font-size: 30rpx;
}

.header-cell {
  background-color: #f1f1f1;
}

.table-cell {
  font-size: 28rpx;
  color: #5c5b5b;
  border-bottom: 1rpx solid #f1f1f1;
  border-right: 1rpx solid #f1f1f1;
  border-left: 1rpx solid #f1f1f1;
}

4、json代码：

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#3CB371",
  "navigationBarTitleText": "体重指数计算"
}

更多示例，请在微信小程序、小红书、抖音搜索「蒜鸟编程」，可直接查看源码运行示例界面，关注我，将不定时更新各类示例呦~