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

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

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

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

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

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": "运动能耗计算"
}

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