微信小程序加速计开发指南
微信小程序提供了加速计API，允许开发者监听设备加速度变化，适用于游戏、运动健康等场景。以下将介绍如何使用加速计API，并提供完整案例和代码。
加速计API基础
微信小程序通过wx.onAccelerometerChange监听加速度数据，返回三个方向的加速度值：
- x：左右方向（左为正）
- y：前后方向（前为正）
- z：垂直方向（上为正）
单位均为m/s²。
wx.onAccelerometerChange(function(res) {console.log('X轴加速度: ' + res.x)console.log('Y轴加速度: ' + res.y)console.log('Z轴加速度: ' + res.z)
})
实现摇一摇功能案例
通过监听加速度变化实现经典摇一摇功能，当设备晃动幅度达到阈值时触发事件。
// 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 } = resconst { lastX, lastY, lastZ, threshold } = this.dataconst speed = Math.abs(x + y + z - lastX - lastY - lastZ) / 0.1 * 10000if (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界面布局
<!-- index.wxml -->
<view class="container"><view class="shake-area {{shaking ? 'active' : ''}}"><text>摇动手机试试</text><image src="/images/shake.png" mode="aspectFit"></image></view>
</view>
样式设置
/* 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;
}
性能优化建议
- 适当设置监听频率：
wx.startAccelerometer({interval: 'game' // 高频率，适用于游戏场景
})
- 页面隐藏时停止监听：
onUnload() {wx.stopAccelerometer()
}
- 使用防抖处理高频事件：
let timer = null
wx.onAccelerometerChange((res) => {clearTimeout(timer)timer = setTimeout(() => {// 处理逻辑}, 200)
})
实际应用场景扩展
- 游戏控制：通过倾斜手机控制游戏角色移动
- 运动检测：计算步数或运动强度
- AR应用：结合陀螺仪实现更精确的空间定位
- 趣味互动：摇一摇抽奖、切换内容等
注意事项
- 部分安卓机型需要用户授权
- iOS和安卓设备的传感器精度可能不同
- 真机调试才能获得准确效果
- 长时间监听会增加耗电量
通过以上代码和案例，可以快速在微信小程序中实现加速计功能。根据具体业务需求调整阈值和交互逻辑，可以创造出丰富的用户体验。