微信小程序实现运动能耗计算

微信小程序实现运动能耗计算

近我做了一个挺有意思的微信小程序，能够实现运动能耗的计算。只需要输入性别、年龄、体重、运动时长和运动类型这些信息，就能算出对应的消耗热量。

具体来说，在小程序里，性别不同，身体基础代谢和运动时的能耗模式会有差异；年龄影响着身体机能和基础代谢率；体重是计算能耗的关键参数，体重越大，运动时消耗的能量通常越多；运动时长直接关联能耗总量，时长越长，消耗热量自然越多；而不同的运动类型，比如跑步、游泳、跳绳等，它们的运动强度和能耗效率各有不同，所以在计算时需要区分开来。通过综合这些因素，运用特定的算法，就能较为准确地得出运动所消耗的热量。

这个界面示例已经同步到微信小程序啦，大家在微信里搜索「蒜鸟编程」就能看到运行示例，直观感受一下这个计算功能是怎么运作的。如果有对编程、小程序开发感兴趣的小伙伴，还可以在小红书、抖音搜索用户「蒜鸟编程」，上面有更多相关内容分享哦。希望这个小程序和相关分享能给正在学习编程、对运动健康数据计算感兴趣的朋友提供一些参考。当然，要是大家在使用过程中发现有不足的地方，或者觉得哪里有问题，真心希望大家能不吝指正，咱们一起交流探讨，让这个小程序能变得更完善。具体图片如下：

1、js代码：

Page({/*** 页面的初始数据*/data: {current: 'f',metValue: 0,runList: [{id: 1,name: '静坐/办公',met: 1.5},{id: 2,name: '慢走（4km/h）',met: 3.5},{id: 3,name: '快走（6km/h）',met: 5.5},{id: 4,name: '慢跑（8km/h）',met: 8.0},{id: 5,name: '跑步（10km/h）',met: 10.0},{id: 6,name: '游泳（自由泳）',met: 8.0},{id: 7,name: '骑自行车（中速）',met: 6.0},{id: 8,name: '篮球（比赛）',met: 8.0},{id: 9,name: '足球',met: 9.0},{id: 10,name: '跳绳（中等强度）',met: 10.0},{id: 11,name: '跳健身操',met: 7.0},{id: 12,name: '登山',met: 7.0},{id: 13,name: '瑜伽',met: 3.0},{id: 14,name: '力量训练',met: 6.0}],isVisible: false,sexValue: '',ageValue: '',weight: '',runInfo: '',duration: '',blinkTimer: null},onSelectClick(e) {let self = this;let attr = ['男性', '女性', '未知'];wx.showActionSheet({itemList: attr,success(res) {self.setData({sexValue: attr[res.tapIndex]})},fail(res) {console.log(res.errMsg)}})},//选择监听selectClick(e) {let old = this.data.current;let info = e.currentTarget.dataset;let tag = info.index;this.setData({current: old == tag ? 'f' : tag,runInfo: old == tag ? 'f' : info.item})},// 输入绑定onInputClick: function (e) {let keys = e.currentTarget.dataset.key;this.setData({[keys]: e.detail.value});},// 计算能耗calculateClick() {let self = this;const {sexValue,ageValue,weight,runInfo,duration} = this.data;const age = parseInt(ageValue);const wgt = parseFloat(weight);const tim = parseFloat(duration);// 获取选中的MET值if (sexValue == '') {wx.showToast({title: '请选择性别',icon: 'none'});return;}if (isNaN(Number(age)) || isNaN(Number(wgt)) || isNaN(Number(tim))) {wx.showToast({title: '输入的年龄、体重、时长格式存在异常！',icon: 'none'});return;}// 获取选中的MET值if (!runInfo.met) {wx.showToast({title: '请选择运动类型',icon: 'none'});return;}let energy = 0;if (sexValue === '男性') {energy = ((0.2 * (runInfo.met) * wgt) + 7) * (tim / 60);} else if (sexValue === '女性') {energy = ((0.15 * (runInfo.met) * wgt) + 7) * (tim / 60);} else {energy = (runInfo.met) * wgt * (tim / 60);}// 更新结果this.setData({metValue: energy,isVisible: true}, () => {wx.pageScrollTo({scrollTop: 0,duration: 300 // 滚动时间，单位为毫秒，可以根据需要调整});setTimeout(() => {self.setData({isVisible: false,blinkTimer: null});}, 2000);});},onUnload() {let timer = this.data.blinkTimer;if (timer) {clearTimeout(timer);}},
})

2、wxml代码：

<view class="level top-box"><view class="top-dot"><text class="top-num {{isVisible?'blink-text':''}}">{{metValue}} 卡路里</text><text class="top-text">消耗热量</text></view><view class="top-tip"><text class="top-tip-text">注：平台仅提供参考示例，不作为其他依据</text></view>
</view>
<view class="input-section"><view class="input-group"><text class="label">性别 (♀)</text><input class="input" disabled bind:tap="onSelectClick" value="{{sexValue}}" 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">体重 (kg)</text><input class="input" type="number" bindinput="onInputClick" maxlength="5" data-key="weight" value="{{weight}}" placeholder="请输入体重" /></view><view class="input-group"><text class="label">运动时长</text><input class="input" type="number" bindinput="onInputClick" maxlength="5" data-key="duration" value="{{duration}}" placeholder="请输入运动时长 (分钟)" /></view><view class="input-group"><text class="label">运动类型</text><input class="input" disabled value="{{runInfo.name}}" placeholder="点击下方选择运动类型" /></view>
</view>
<view class="run-box"><view class="run-title">选择运动类型</view><view class="label-box"><block wx:for="{{runList}}" wx:key="item"><text bindtap="selectClick" data-item="{{item}}" data-index="{{index}}"class="label-run {{current==index?'select':''}}">{{item.name}}</text></block></view>
</view><button class="calculate-btn" bindtap="calculateClick">开始计算
</button>

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;justify-content: center;
}.top-text {margin: 0 20rpx;font-size: 28rpx;color: #696969;
}.top-num {padding-bottom: 10rpx;font-weight: bold;color: #3CB371;
}.top-dot {display: flex;flex-direction: column;background-color: white;color: #000000;border-radius: 200rpx;width: 60%;height: 150rpx;align-items: center;justify-content: center;box-shadow: 0 0 10rpx 10rpx #61a07d;
}.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: 25%;font-size: 28rpx;color: #666;
}.input {flex: 1;height: 80rpx;font-size: 32rpx;padding: 0 10rpx;border-bottom: 1rpx solid #eee;
}.run-box {margin-top: 20rpx;padding: 30rpx;background-color: white;
}.run-title {font-size: 30rpx;margin-bottom: 10rpx;color: #666666;
}.label-box {margin-top: 10rpx;flex-wrap: wrap;display: inline-flex;flex-direction: row;
}.label-run {background-color: white;color: #3CB371;margin: 10rpx 25rpx 15rpx 0;font-size: 28rpx;padding: 8rpx 20rpx;border-radius: 50rpx;text-align: center;border: 1rpx solid #3CB371;
}.select {background-color: #3CB371;color: white;
}.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;
}/* 定义闪烁动画 */
.blink-text {color: #da7828;animation: blink 1s infinite;
}@keyframes blink {0%,100% {opacity: 1;}50% {opacity: 0;}
}

4、json代码：

{"usingComponents": {},"navigationBarBackgroundColor": "#3CB371","navigationBarTitleText": "运动能耗计算"
}

如需查看运动能耗计算的完整源码及运行示例，可在微信小程序、小红书、抖音等平台搜索「蒜鸟编程」获取相关技术内容。平台内提供的示例界面支持直观了解算法实现逻辑，适合学习小程序开发、能耗计算模型的朋友作为参考案例。后续将围绕编程技术持续更新更多实践示例，欢迎开发者针对技术细节进行交流探讨。