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

引言

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

功能介绍

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

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

技术栈

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

开发步骤

1. 创建 Uniapp 项目

2. 编写页面代码

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

<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>