一、引言微信小程序提供了丰富的设备 API其中 wx.onAccelerometerChange 可以监听手机的加速度变化是实现“摇一摇”类功能的核心接口。本文通过一个有趣的“变脸游戏”案例演示点击图片随机换脸 摇一摇手机换脸的完整实现并加上“动态显示累计变脸次数”的拓展功能。二、案例效果启动小程序页面显示一张川剧脸谱图片点击脸谱画面随机切换成另一张脸谱摇一摇手机弹出“摇一摇成功”提示框同时脸谱随机切换页面底部实时显示累计变脸次数拓展功能。三、核心知识点image 组件src 绑定 {{faces[index]}} 图片数组实现动态换图bind:tap 绑定点击事件mode“widthFix” 保持宽高比加速计 APIwx.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 更新 indeximage 组件的 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、节流防抖、音效播放等感兴趣的同学可以自行尝试
