微信小程序實現運動能耗計算

近我做了一個挺有意思的微信小程序，能夠實現運動能耗的計算。只需要輸入性別、年齡、體重、運動時長和運動類型這些信息，就能算出對應的消耗熱量。

具體來說，在小程序里，性別不同，身體基礎代謝和運動時的能耗模式會有差異；年齡影響著身體機能和基礎代謝率；體重是計算能耗的關鍵參數，體重越大，運動時消耗的能量通常越多；運動時長直接關聯能耗總量，時長越長，消耗熱量自然越多；而不同的運動類型，比如跑步、游泳、跳繩等，它們的運動強度和能耗效率各有不同，所以在計算時需要區分開來。通過綜合這些因素，運用特定的算法，就能較為準確地得出運動所消耗的熱量。

這個界面示例已經同步到微信小程序啦，大家在微信里搜索「蒜鳥編程」就能看到運行示例，直觀感受一下這個計算功能是怎么運作的。如果有對編程、小程序開發感興趣的小伙伴，還可以在小紅書、抖音搜索用戶「蒜鳥編程」，上面有更多相關內容分享哦。希望這個小程序和相關分享能給正在學習編程、對運動健康數據計算感興趣的朋友提供一些參考。當然，要是大家在使用過程中發現有不足的地方，或者覺得哪里有問題，真心希望大家能不吝指正，咱們一起交流探討，讓這個小程序能變得更完善。具體圖片如下：

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": "運動能耗計算"
}

如需查看運動能耗計算的完整源碼及運行示例，可在微信小程序、小紅書、抖音等平臺搜索「蒜鳥編程」獲取相關技術內容。平臺內提供的示例界面支持直觀了解算法實現邏輯，適合學習小程序開發、能耗計算模型的朋友作為參考案例。后續將圍繞編程技術持續更新更多實踐示例，歡迎開發者針對技術細節進行交流探討。