一、引言
微信小程序提供了丰富的设备 API，其中 wx.onAccelerometerChange 可以监听手机的加速度变化，是实现“摇一摇”类功能的核心接口。本文通过一个有趣的“变脸游戏”案例，演示点击图片随机换脸 + 摇一摇手机换脸的完整实现，并加上“动态显示累计变脸次数”的拓展功能。

二、案例效果
启动小程序，页面显示一张川剧脸谱图片；
点击脸谱：画面随机切换成另一张脸谱；
摇一摇手机：弹出“摇一摇成功”提示框，同时脸谱随机切换；
页面底部实时显示累计变脸次数（拓展功能）。
三、核心知识点
image 组件：src 绑定 {{faces[index]}} 图片数组实现动态换图，bind:tap 绑定点击事件，mode=“widthFix” 保持宽高比；
加速计 API：wx.onAccelerometerChange(callback)，回调参数 res 含 x、y、z 三轴加速度（单位 g），任一轴超过阈值（本文取 0.5）即判定为摇动；
随机数：Math.floor(Math.random() * n) 产生 [0, n) 的随机整数，作为脸谱数组的下标；
数据驱动视图：所有变化都通过 this.setData() 修改 data，页面自动刷新——这是小程序开发的灵魂。

四、实现原理剖析
随机换脸：changeFace() 用 Math.floor(Math.random() * 14) 生成新下标，通过 setData 更新 index，image 组件的 src 随之变化——数据驱动，无需手动操作 DOM；
摇一摇检测：加速计回调非常频繁（默认约 200ms 一次），res.x/y/z 是当前加速度与重力加速度的比值。手机静止时各轴约在 0~1 之间（z 轴约 1），剧烈摇晃时瞬时值会显著增大，任一轴 > 0.5 的增长即认为发生摇动；
计数拓展：把 count: this.data.count + 1 放进同一个 setData 里，点击和摇一摇两条路径都走 changeFace()，所以无论哪种方式变脸，计数都会实时 +1 并刷新到界面。
五、踩坑总结
模拟器摇不了：加速计是真机传感器，开发者工具需在“传感器”面板手动模拟，正式演示务必用真机；
一次摇动多次触发：回调频率高，一次摇晃可能连续多次满足条件。想要只触发一次，可以加时间戳节流（如 1 秒内只处理一次）；
图片路径：/images/01.png 开头的 / 表示项目根目录，漏写会导致图片不显示；
页面隐藏时仍在回调：加速计监听是全局的，若只在单页使用，建议在 onShow 注册、onHide 中用 wx.offAccelerometerChange 注销，节省电量。
六、总结
本案例代码量很小，却完整覆盖了小程序开发的三大基本功：组件事件绑定（tap）、设备 API 调用（加速计）、数据驱动视图（setData）​。在此基础上还可以继续扩展：加入变脸动画（CSS animation）、节流防抖、音效播放等，感兴趣的同学可以自行尝试