微信小程序实现膳食营养计算

微信小程序实现膳食营养计算

在健康意识日益提升的今天，合理膳食成为大家关注的焦点。但如何准确计算每日所需营养，搭配出科学的饮食方案，却让不少人犯了难。别担心，一款功能强大的微信小程序 ——膳食营养计算工具，能帮你轻松解决这些问题，让科学饮食不再复杂！​
这款小程序的操作简单易懂，只需输入身高、体重、年龄、性别和活动量等基础信息，系统就会根据专业算法，为你计算出每日所需的热量、碳水化合物、蛋白质和脂肪的目标摄入量。接着，在丰富的食物类别中进行选择，每个食物类别都清晰标注了每份 50g 的营养数据，你可以根据个人喜好和实际需求，自由添加或减少食物份数。小程序会实时计算出所选食物的总热量、碳水化合物量、蛋白质量和脂肪量，并与目标摄入量进行对比，让你对自己的饮食情况一目了然。​
从技术层面来看，小程序采用了先进的数据处理算法，确保营养计算的准确性和科学性。其简洁直观的界面设计，让用户无需复杂操作，就能快速完成各项数据的输入和查询。无论是健身爱好者想要精准控制饮食，还是注重养生的人群希望合理搭配膳食，这款小程序都能满足你的需求。​
这款实用的小程序来自 【蒜鸟编程】 。除了微信小程序，在抖音、小红书平台搜索 【蒜鸟编程】 ，还能获取更多编程技巧以及实用工具推荐。致力于为大家带来更多优质、有趣的内容和工具，助力每个人在数字化时代轻松掌握实用技能，拥抱健康生活。​
如果你也想拥有一位专属的 “膳食营养管家”，快来体验这款微信小程序吧！使用过程中有任何建议或想法，欢迎在评论区留言，也别忘了关注我呦 ，获取更多惊喜！具体图片如下：

1、js代码：

Page({data: {// 基础输入数据genderList: ['男性', '女性'],genderIndex: 0,weight: '',height: '',ageValue: '',activityList: ['轻体力', '中体力', '重体力', '极重体力'],activityIndex: 0,activityCoeff: [1.53, 1.76, 2.25, 2.4], // 对应活动量系数// 食物类别定义foodCategories: [{category: 'staple',name: '主食类',unit: '每份50g（生重）'},{category: 'meat',name: '肉蛋豆类',unit: '每份50g'},{category: 'vegetable',name: '蔬菜类',unit: '每份100g'},{category: 'fruit',name: '水果类',unit: '每份200g'},{category: 'dairy',name: '乳制品',unit: '每份200ml'},{category: 'nuts',name: '油脂坚果类',unit: '每份10g'}],selectedCounts: { // 初始选择份数staple: 0,meat: 0,vegetable: 0,fruit: 0,dairy: 0,nuts: 0},// 结果展示showResult: false,totalKcal: 0,totalCarb: 0,totalProtein: 0,totalFat: 0,targetCarb: 0,targetProtein: 0,targetFat: 0,tips: []},// 食物营养数据库（每份含量）foodDatabase: {staple: {carb: 35,protein: 5,fat: 0.8,kcal: 150 // 大米为例},meat: {carb: 1,protein: 10,fat: 5,kcal: 100 // 鸡胸肉为例},vegetable: {carb: 5,protein: 2,fat: 0.3,kcal: 25 // 菠菜为例},fruit: {carb: 15,protein: 1,fat: 0.2,kcal: 60 // 苹果为例},dairy: {carb: 5,protein: 6,fat: 3,kcal: 65 // 牛奶为例},nuts: {carb: 2,protein: 4,fat: 10,kcal: 100 // 花生为例}},// 输入事件处理onGenderChange(e) {this.setData({genderIndex: e.detail.value});},// 输入绑定onInputClick: function (e) {let keys = e.currentTarget.dataset.key;this.setData({[keys]: e.detail.value});},onActivityChange(e) {this.setData({activityIndex: e.detail.value});},// 食物类别选择increaseCount(e) {const category = e.currentTarget.dataset.category;this.setData({[`selectedCounts.${category}`]: this.data.selectedCounts[category] + 1});},decreaseCount(e) {const category = e.currentTarget.dataset.category;if (this.data.selectedCounts[category] > 0) {this.setData({[`selectedCounts.${category}`]: this.data.selectedCounts[category] - 1});}},// 核心计算函数calculateClick() {const {weight,height,ageValue,genderIndex,activityIndex,selectedCounts} = this.data;if (!weight || !height || !ageValue) {wx.showToast({title: '请填写完整基础信息',icon: 'none'});return;}// 1. 计算基础代谢率const bmr = genderIndex === 0 ?10 * weight + 6.25 * height - 5 * ageValue + 5 :10 * weight + 6.25 * height - 5 * ageValue - 161;// 2. 计算总热量需求const totalKcal = Math.round(bmr * this.data.activityCoeff[activityIndex]);// 3. 计算各营养素目标（占比：碳水50%、蛋白质20%、脂肪30%）const targetCarb = Math.round(totalKcal * 0.5 / 4); // 每g碳水4kcalconst targetProtein = Math.round(totalKcal * 0.2 / 4);const targetFat = Math.round(totalKcal * 0.3 / 9); // 每g脂肪9kcal// 4. 计算当前选择的营养成分let [totalCarb, totalProtein, totalFat] = [0, 0, 0];Object.keys(selectedCounts).forEach(category => {const count = selectedCounts[category];const food = this.foodDatabase[category];totalCarb += food.carb * count;totalProtein += food.protein * count;totalFat += food.fat * count;});// 5. 生成饮食建议const tips = [];if (totalCarb > targetCarb * 1.1) tips.push(`碳水化合物偏多，建议减少${Math.ceil((totalCarb - targetCarb)/35)}份主食类。`);if (totalProtein < targetProtein * 0.9) tips.push(`蛋白质不足，建议增加${Math.ceil((targetProtein - totalProtein)/10)}份肉蛋豆类。`);if (totalFat > targetFat * 1.1) tips.push(`脂肪偏多，建议减少${Math.ceil((totalFat - targetFat)/10)}份油脂坚果类。`);if (totalCarb < targetCarb * 0.9) tips.push(`碳水化合物不足，建议增加${Math.ceil((targetCarb - totalCarb)/35)}份主食类。`);if (totalProtein > targetProtein * 1.1) tips.push(`蛋白质偏多，建议减少${Math.ceil((totalProtein - targetProtein)/10)}份肉蛋豆类。`);if (totalFat < targetFat * 0.9) tips.push(`脂肪不足，建议增加${Math.ceil((targetFat - totalFat)/10)}份油脂坚果类。`);if (this.data.selectedCounts.vegetable < 3) tips.push(`蔬菜摄入不足，建议至少摄入3份蔬菜类。`);if (this.data.selectedCounts.fruit < 2) tips.push(`水果摄入不足，建议至少摄入2份水果类。`);if (this.data.selectedCounts.dairy < 1) tips.push(`乳制品摄入不足，建议至少摄入1份乳制品。`);this.setData({showResult: true,totalKcal,totalCarb: Math.round(totalCarb),totalProtein: Math.round(totalProtein),totalFat: Math.round(totalFat),targetCarb,targetProtein,targetFat,tips}, () => {const query = wx.createSelectorQuery();query.selectViewport().scrollOffset(function (res) {const contentHeight = res.scrollHeight;wx.pageScrollTo({scrollTop: contentHeight,duration: 300});}).exec();});}
});

2、wxml代码：

<view class="input-section"><view class="input-title">基础信息</view><view class="input-group"><text class="label">身高 (cm)</text><input class="input" type="number" bindinput="onInputClick" maxlength="3" data-key="height" value="{{height}}" placeholder="请输入身高" /></view><view class="input-group"><text class="label">体重 (kg)</text><input class="input" type="number" bindinput="onInputClick" maxlength="3" data-key="weight" value="{{weight}}" placeholder="请输入体重" /></view><view class="input-group"><text class="label">年龄 (岁)</text><input class="input" type="number" bindinput="onInputClick" maxlength="3" data-key="ageValue" value="{{ageValue}}" placeholder="请输入年龄" /></view><view class="input-group"><text class="label">性别 (♂)</text><picker class="input" bindchange="onGenderChange" value="{{genderIndex}}" range="{{genderList}}"><text>{{genderList[genderIndex]}}</text></picker></view><view class="input-group"><text class="label">活动量</text><picker class="input" bindchange="onActivityChange" value="{{activityIndex}}" range="{{activityList}}"><text>{{activityList[activityIndex]}}</text></picker></view>
</view>
<view class="input-section"><view class="input-title">食物类别选择</view><view class="food-group" wx:for="{{foodCategories}}" wx:key="category"><view class="food-info"><text>{{item.name}}</text><text class="unit-gray">({{item.unit}})</text></view><view class="count-container"><button class="food-btn" bindtap="decreaseCount" data-category="{{item.category}}">-</button><text class="count">{{selectedCounts[item.category]}}</text><button class="food-btn" bindtap="increaseCount" data-category="{{item.category}}">+</button></view></view>
</view>
<button class="calculate-btn" bindtap="calculateClick">生成饮食方案
</button>
<view class="input-section" wx:if="{{showResult}}"><view class="input-title">饮食方案结果</view><view class="result-summary"><view class="result-item">每日总热量<text class="result-text">{{totalKcal}}</text>kcal</view><view class="result-item">碳水化合物<text class="result-text">{{totalCarb}}</text>g (目标<text class="result-text">{{targetCarb}}</text>g)</view><view class="result-item">蛋白质<text class="result-text">{{totalProtein}}</text>g (目标<text class="result-text">{{targetProtein}}</text>g)</view><view class="result-item">脂肪<text class="result-text">{{totalFat}}</text>g (目标<text class="result-text">{{targetFat}}</text>g)</view></view><view class="tip" wx:if="{{tips.length}}"><view class="tip-title">饮食建议：</view><view class="tip-content" wx:for="{{tips}}" wx:key="index">- {{item}}</view></view>
</view>

3、wxss代码：

page {font-size: 28rpx;background-color: #f8f8f8;padding-bottom: 30rpx;
}.input-section {background-color: #fff;padding: 30rpx;margin: 20rpx;border-radius: 16rpx;box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}.input-title {font-size: 32rpx;font-weight: 600;color: #3A7BD5;margin-bottom: 20rpx;
}.input-group {display: flex;align-items: center;padding: 16rpx 0;border-bottom: 1rpx solid #f0f0f0;
}.input-group:last-child {border-bottom: none;
}.label {width: 20%;color: #666;font-size: 28rpx;
}.input {flex: 1;padding: 10rpx 20rpx;color: #333;font-size: 28rpx;
}.gray {color: gray;
}.calculate-btn {background-color: #3A7BD5;color: white;font-size: 32rpx;margin: 20rpx;border-radius: 40rpx;height: 88rpx;line-height: 88rpx;padding: 0;box-shadow: 0 4rpx 12rpx rgba(58, 123, 213, 0.3);font-weight: 500;
}.calculate-btn::after {box-shadow: none;border: none;
}.food-group {display: flex;align-items: center;justify-content: space-between;padding: 20rpx 0;border-bottom: 1rpx solid #f0f0f0;
}.food-group:last-child {border-bottom: none;
}.food-info {display: flex;align-items: center;
}.food-name {font-size: 28rpx;color: #333;font-weight: 500;
}.unit-gray {font-size: 24rpx;color: #999;margin-left: 10rpx;
}.count-container {display: flex;align-items: center;
}.food-btn {width: 60rpx;height: 60rpx;line-height: 50rpx;text-align: center;border: 1rpx solid #3A7BD5;color: #3A7BD5;border-radius: 50%;font-size: 36rpx;padding: 0;margin: 0 10rpx;background-color: #f5f8ff;
}.food-btn::after {border: none;
}.count {font-size: 32rpx;color: #333;padding: 0 10rpx;width: 60rpx;text-align: center;
}.result-summary {margin-top: 20rpx;
}.result-item {font-size: 28rpx;color: #333;line-height: 40rpx;padding: 10rpx 0;
}.result-text {padding: 0 8rpx;color: #E53935;font-weight: 500;border-bottom: 1rpx dashed #E53935;
}.tip {margin-top: 20rpx;
}.tip-title {font-size: 28rpx;color: #333;font-weight: 500;margin-bottom: 10rpx;
}.tip-content {font-size: 26rpx;color: #666;line-height: 36rpx;padding-left: 20rpx;position: relative;
}.tip-content::before {content: '';position: absolute;left: 0;top: 12rpx;width: 12rpx;height: 12rpx;background-color: #3A7BD5;border-radius: 50%;
}

4、json代码：

{"usingComponents": {},"navigationBarBackgroundColor": "#3A7BD5","navigationBarTitleText": "膳食营养计算"
}

这款示例不仅是营养计算器，更是健康生活的 “数字化助手”。想了解更多工具开发逻辑？或是获取个性化饮食建议？关注 蒜鸟编程（微信小程序 / 抖音 / 小红书同名称），在这里，编程与生活的边界从未如此清晰，期待与大家共同成长！后续将围绕编程技术持续更新更多实践示例，欢迎开发者针对技术细节进行交流探讨。