微信小程序加速计开发指南

微信小程序提供了加速计API，允许开发者监听设备加速度变化，适用于游戏、运动健康等场景。以下将介绍如何使用加速计API，并提供完整案例和代码。

加速计API基础

微信小程序通过wx.onAccelerometerChange监听加速度数据，返回三个方向的加速度值：

x：左右方向（左为正）
y：前后方向（前为正）
z：垂直方向（上为正）
单位均为m/s²。

javascript 复制代码

wx.onAccelerometerChange(function(res) {
  console.log('X轴加速度: ' + res.x)
  console.log('Y轴加速度: ' + res.y)
  console.log('Z轴加速度: ' + res.z)
})

实现摇一摇功能案例

通过监听加速度变化实现经典摇一摇功能，当设备晃动幅度达到阈值时触发事件。

javascript 复制代码

// index.js
Page({
  data: {
    shaking: false,
    threshold: 15, // 摇晃阈值
    lastX: 0,
    lastY: 0,
    lastZ: 0
  },

  onLoad() {
    this.startShakeDetection()
  },

  startShakeDetection() {
    wx.onAccelerometerChange((res) => {
      const { x, y, z } = res
      const { lastX, lastY, lastZ, threshold } = this.data
      
      const speed = Math.abs(x + y + z - lastX - lastY - lastZ) / 0.1 * 10000
      
      if (speed > threshold) {
        this.setData({ shaking: true })
        this.onShakeSuccess()
      } else {
        this.setData({ shaking: false })
      }
      
      this.setData({
        lastX: x,
        lastY: y,
        lastZ: z
      })
    })
  },

  onShakeSuccess() {
    wx.showToast({
      title: '摇一摇成功！',
      icon: 'success'
    })
    // 执行摇一摇后的业务逻辑
  }
})

WXML界面布局

xml 复制代码

<!-- index.wxml -->
<view class="container">
  <view class="shake-area {{shaking ? 'active' : ''}}">
    <text>摇动手机试试</text>
    <image src="/images/shake.png" mode="aspectFit"></image>
  </view>
</view>

样式设置

css 复制代码

/* index.wxss */
.shake-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300rpx;
  border: 1px solid #eee;
  transition: all 0.3s;
}

.shake-area.active {
  background-color: #f0f0f0;
  transform: scale(1.05);
}

.shake-area image {
  width: 100rpx;
  height: 100rpx;
  margin-top: 20rpx;
}

性能优化建议

适当设置监听频率：

javascript 复制代码

wx.startAccelerometer({
  interval: 'game' // 高频率，适用于游戏场景
})

页面隐藏时停止监听：

javascript 复制代码

onUnload() {
  wx.stopAccelerometer()
}

使用防抖处理高频事件：

javascript 复制代码

let timer = null
wx.onAccelerometerChange((res) => {
  clearTimeout(timer)
  timer = setTimeout(() => {
    // 处理逻辑
  }, 200)
})

实际应用场景扩展

游戏控制：通过倾斜手机控制游戏角色移动
运动检测：计算步数或运动强度
AR应用：结合陀螺仪实现更精确的空间定位
趣味互动：摇一摇抽奖、切换内容等

注意事项

部分安卓机型需要用户授权
iOS和安卓设备的传感器精度可能不同
真机调试才能获得准确效果
长时间监听会增加耗电量

通过以上代码和案例，可以快速在微信小程序中实现加速计功能。根据具体业务需求调整阈值和交互逻辑，可以创造出丰富的用户体验。