前言
在微信小程序的开发中，设备硬件能力的调用往往能为应用增添很多趣味性。其中，加速计（Accelerometer）API 允许我们获取手机在三维空间中的运动状态，常用于实现“摇一摇”抽奖、游戏互动等场景。
本文将以一个趣味“变脸游戏”为例，带大家一步步实现：点击屏幕切换脸谱、摇晃手机切换脸谱并弹出提示，同时我们还会扩展一个功能——实时统计变脸的总次数。
一、 核心知识点
图片数组渲染：利用
wx:if或数据绑定动态渲染图片。wx.onAccelerometerChange：监听设备重力感应数据（加速度）。wx.showToast：展示轻量级的反馈提示框。随机数生成：利用
Math.random()生成随机索引。
二、 项目准备与页面布局
首先，在项目根目录下创建一个images文件夹，放入准备好的脸谱图片素材（例如01.png到14.png）。
接着，在index.wxml中搭建页面结构。这里我们使用image组件来展示脸谱，并绑定点击事件；同时新增一个文本组件用于显示变脸次数。
html
<!--index.wxml--> <scroll-view class="scrollarea" scroll-y type="list"> <view class="box"> <view class="title">wx.onAccelerometerChange示例</view> <!-- 脸谱展示区域，绑定点击事件 --> <image src="{{faces[index]}}" mode="widthFix" bind:tap="changeFace" /> <!-- 扩展功能：累计变脸次数展示 --> <view class="count-text">累计变脸总次数：{{count}}</view> </view> </scroll-view>为了让界面美观，在index.wxss和app.wxss中添加如下样式：
css
/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } image { margin: 20rpx; } /* 扩展次数展示的样式 */ .count-text { text-align: center; font-size: 36rpx; font-weight: bold; color: #4a148c; /* 深紫色 */ margin-top: 20rpx; }css
/**app.wxss**/ .box { margin: 20rpx; padding: 20rpx; border: 2rpx solid purple; } .title { font-size: 40rpx; font-weight: bolder; text-align: center; margin-bottom: 30rpx; color: rebeccapurple; }三、 核心逻辑实现 (index.js)
这是整个游戏的核心。我们需要在页面加载时（onShow）开启加速计监听，并在触摸事件和监听回调中处理变脸逻辑与计数。
1. 数据准备与随机数生成
在data中定义好脸谱图片的路径数组、当前索引以及扩展的累计次数。同时编写一个生成指定范围随机数的方法。
javascript
Page({ data: { index: 0, // 当前显示的脸谱索引 count: 0, // 扩展功能：累计变脸次数 faces: [ '/images/01.png', '/images/02.png', '/images/03.png', '/images/04.png', '/images/05.png', '/images/06.png', '/images/07.png', '/images/08.png', '/images/09.png', '/images/10.png', '/images/11.png', '/images/12.png', '/images/13.png', '/images/14.png' ] }, // 生成 [0, n) 之间的随机整数 createRandomIndex(n) { return Math.floor(Math.random() * n) }, // ... 后续方法 })2. 点击变脸逻辑
当用户点击图片时，随机切换一张脸谱，并让累计次数加 1。
javascript
// 点击图片触发的变脸 changeFace() { let newIndex = this.createRandomIndex(this.data.faces.length) this.setData({ index: newIndex, count: this.data.count + 1 // 次数累加 }) },3. 摇一摇变脸逻辑（核心难点）
我们需要监听手机的加速度。当 x、y 或 z 轴的加速度绝对值超过设定的阈值（例如0.5）时，判定为发生了“摇晃”动作。
注意：为了避免摇一次手机触发多次变脸，建议在触发后添加一定的防抖处理，或者利用标志位控制。
javascript
// 生命周期函数--监听页面显示 onShow() { // 开启加速计监听 wx.onAccelerometerChange((res) => { // 判断加速度阈值，只要有一个方向大于 0.5 即视为摇动 if (res.x > 0.5 || res.y > 0.5 || res.z > 0.5) { // 这里可以加一个简单的防抖逻辑，避免摇一次触发太多次 // 简单处理：直接调用 changeFace 并弹出 Toast this.changeFace() wx.showToast({ title: '摇一摇成功', icon: 'success', duration: 1000 // 提示框持续时间 }) } }) },进阶提示：在实际项目中，wx.onAccelerometerChange触发频率极高，如果在回调里频繁setData会导致页面卡顿。建议可以引入一个isShaking标志位，当状态变为 true 时执行动作，延时一段时间后才允许下一次触发。
四、 效果展示与总结
完成代码编写后，运行小程序，体验如下：
点击变脸：点击界面上的脸谱图片，画面会随机变成另一张脸，底部的“累计变脸总次数”加 1。
摇一摇变脸：晃动手机，屏幕底部会弹出“摇一摇成功”的提示框，同时脸谱也会随机切换，并且“累计变脸总次数”同步加 1。
开发踩坑提示：
真机调试：由于电脑端开发者工具无法直接模拟手机晃动（部分新版工具支持模拟，但不够真实），建议务必使用真机预览测试摇一摇功能。
性能优化：由于加速计监听在页面显示时会一直运行，记得在合适的生命周期（如
onHide）调用wx.offAccelerometerChange来关闭监听，节约设备电量。阈值调整：如果发现摇动手机没有反应，可以尝试调小代码中的
0.5这个阈值；如果稍微碰一下手机就触发了，可以适当调大阈值。
通过这个案例，我们不仅掌握了小程序中设备硬件 API 的基本调用，还学习了如何将用户的物理动作转化为页面交互。你可以在此基础上加入音效或动画，让这个小游戏更加丰富！
