使用 uniapp 开发标准体重计算小程序

引言

在现代生活中，健康管理越来越受到重视，而体重是衡量健康状况的重要指标之一。为了方便用户快速计算自己的标准体重并了解体重状态，我使用 uniapp 开发了一款简单的标准体重计算小程序。本文将详细介绍开发过程，并分享核心代码。

功能介绍

这款小程序的主要功能包括：

输入身高和体重：用户可以输入自己的身高（cm）和当前体重（kg）。
选择性别：用户可以选择性别，因为男性和女性的标准体重计算公式不同。
计算标准体重：根据世界卫生组织（WHO）的公式计算标准体重。
判断体重状态：根据当前体重与标准体重的差值，判断用户是偏瘦、正常还是偏胖。
输入校验：对用户输入的身高和体重进行有效性校验，避免不合理的数据。

技术栈

Uniapp：跨平台开发框架，支持一次开发，多端发布（微信小程序、H5、App 等）。
Vue.js：前端框架，用于构建用户界面和逻辑。
微信开发者工具：用于调试和预览小程序。

开发步骤

1. 创建 Uniapp 项目

2. 编写页面代码

在 pages/index/index.vue 中编写主页面代码，包括输入框、选择器和计算逻辑。以下是核心代码：

html 复制代码

<template>
  <view class="container">
    <view class="input-group">
      <text>身高 (cm):</text>
      <input v-model="height" type="number" placeholder="请输入身高" />
    </view>

    <view class="input-group">
      <text>性别:</text>
      <picker mode="selector" :range="genders" @change="onGenderChange">
        <view class="picker">{{ genders[genderIndex] }}</view>
      </picker>
    </view>

    <view class="input-group">
      <text>当前体重 (kg):</text>
      <input v-model="currentWeight" type="number" placeholder="请输入当前体重" />
    </view>

    <button @click="calculateWeight">计算标准体重</button>

    <view class="result" v-if="result !== null">
      <text>您的标准体重是: {{ result.standardWeight }} kg</text>
      <text>您的体重状态: {{ result.status }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      height: '', // 用户输入的身高
      currentWeight: '', // 用户输入的当前体重
      genders: ['男', '女'], // 性别选项
      genderIndex: 0, // 当前选中的性别索引
      result: null, // 计算结果
    };
  },
  methods: {
    // 性别选择器变化事件
    onGenderChange(e) {
      this.genderIndex = e.detail.value;
    },
    // 校验输入是否合理
    validateInput(height, weight) {
      if (height < 50 || height > 250) {
        uni.showToast({
          title: '身高应在 50cm 到 250cm 之间',
          icon: 'none',
        });
        return false;
      }
      if (weight < 10 || weight > 500) {
        uni.showToast({
          title: '体重应在 10kg 到 500kg 之间',
          icon: 'none',
        });
        return false;
      }
      return true;
    },
    // 计算标准体重并判断体重状态
    calculateWeight() {
      const height = parseFloat(this.height);
      const currentWeight = parseFloat(this.currentWeight);

      // 校验输入是否合理
      if (isNaN(height) || isNaN(currentWeight)) {
        uni.showToast({
          title: '请输入有效的数字',
          icon: 'none',
        });
        return;
      }

      if (!this.validateInput(height, currentWeight)) {
        return;
      }

      let standardWeight;

      if (this.genderIndex === 0) {
        // 男性
        standardWeight = (height - 80) * 0.7;
      } else {
        // 女性
        standardWeight = (height - 70) * 0.6;
      }

      // 计算体重差值
      const difference = currentWeight - standardWeight;
      let status;

      if (difference < -5) {
        status = '偏瘦';
      } else if (difference > 5) {
        status = '偏胖';
      } else {
        status = '正常';
      }

      this.result = {
        standardWeight: standardWeight.toFixed(2), // 保留两位小数
        status: status,
      };
    },
  },
};
</script>

3. 运行和调试

在 HBuilderX 中点击运行，选择微信开发者工具进行调试。确保代码无误后，可以在微信开发者工具中预览小程序。

4. 发布小程序

完成开发和测试后，按照微信小程序的发布流程，将代码上传至微信公众平台并提交审核。

总结

通过这个项目，我学习了如何使用 uniapp 快速开发跨平台小程序，并掌握了以下技能：

Uniapp 的基本用法和页面开发。
Vue.js 的数据绑定和事件处理。
微信小程序的调试和发布流程。

这款小程序虽然简单，但功能实用，适合初学者练手。未来可以进一步扩展功能，例如：

增加 BMI 计算。
保存用户的历史记录。
提供健康建议和饮食计划。

希望本文对大家有所帮助！如果你有任何问题或建议，欢迎在评论区留言。