一、前言微信小程序提供丰富的设备能力 APIwx.onAccelerometerChange加速计监听可以感知手机摇晃动作。本次案例实现变脸小游戏点击图片切换脸谱摇晃手机同样切换脸谱作业扩展实现累计变脸次数统计。开发环境微信开发者工具skyline 渲染模式不使用云开发。二、实现效果页面展示脸谱图片点击图片随机更换一张脸谱变脸计数 1摇晃手机触发加速计弹出摇一摇成功提示框同时变脸计数 1页面实时展示累计变脸总次数点击和摇晃两种变脸方式都会累加。加速计属于手机硬件能力模拟器无法模拟摇晃必须真机预览测试。三、项目目录结构变脸游戏├─ app.js├─ app.json├─ app.wxss├─ images #存放脸谱图片01.png~14.png│ ├─ 01.png│ ├─ 02.png│ └─ ...└─ pages└─ index├─ index.js├─ index.json├─ index.wxml└─ index.wxss四、完整源码1.app.json{pages: [pages/index/index],window: {navigationBarTextStyle: black,navigationStyle: custom},style: v2,renderer: skyline,rendererOptions: {skyline: {defaultDisplayBlock: true,defaultContentBox: true,tagNameStyleIsolation: legacy,disableABTest: true,sdkVersionBegin: 3.0.0,sdkVersionEnd: 15.255.255}},componentFramework: glass‑easel,sitemapLocation: sitemap.json,lazyCodeLoading: requiredComponents}2.pages/index/index.wxml!--index.wxml--navigation-bar title变脸游戏 back{{false}} colorblack background#FFF/navigation-barscroll-view classscrollarea scroll-y typelistview classboxview classtitlewx.onAccelerometerChange示例/viewimage src{{faces[index]}} modewidthFix bind:tapchangeFace/imageview classcount-text累计变脸总次数{{count}}/view/view/scroll-view3.pages/index/index.wxss/**index.wxss**/page {height: 100vh;display: flex;flex-direction: column;}.scrollarea {flex: 1;overflow-y: hidden;}image {margin: 20rpx;}.count-text {font-size: 40rpx;font-weight: bold;text-align: center;color: rebeccapurple;margin-top: 20rpx;}4.app.wxss/**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;}5.pages/index/index.js核心逻辑Page({data: {index: 0, // 当前脸谱数组下标count: 0, // 作业扩展变脸总次数初始0faces: [ // 脸谱图片路径数组/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‑1] 的随机整数* param {Number} n 数组长度*/createRandomIndex(n) {return Math.floor(Math.random() * n)},/*** 变脸函数点击图片、摇晃手机都会调用该函数*/changeFace() {const newIdx this.createRandomIndex(this.data.faces.length)this.setData({index: newIdx,count: this.data.count 1 // 每变脸一次计数自增1})},//页面显示开启加速计监听onShow() {wx.onAccelerometerChange((res) {// x/y/z三轴加速度达到阈值判定为摇晃手机if (res.x 0.5 || res.y 0.5 || res.z 0.5) {this.changeFace()wx.showToast({title: 摇一摇成功,icon: success,duration: 5000})}})},//页面隐藏关闭加速计监听防止事件重复注册onHide() {wx.stopAccelerometer()}})五、核心 API 知识点解析wx.onAccelerometerChange(callback)加速计监听监听手机加速度传感器手机移动、摇晃时持续执行回调函数。回调参数res包含x、y、z三个轴加速度值数值超过阈值就判定用户摇晃手机。wx.stopAccelerometer()停止监听加速计。页面离开必须调用否则监听不会销毁多次进入页面会重复注册事件导致变脸疯狂触发。wx.showToast(Object object)显示消息提示框本案例用来弹出 “摇一摇成功” 提示。随机数生成Math.random()Math.floor()Math.random()生成[0,1)浮点数Math.floor()向下取整生成合法数组下标实现随机切换脸谱。作业扩展计数逻辑点击图片、摇晃变脸都调用同一个changeFace()函数只需要在此函数内部执行count1两种操作都可以正确累计变脸次数代码复用。六、踩坑记录坑 1摇晃手机没有反应原因wx.onAccelerometerChange读取手机硬件传感器微信开发者工具模拟器不支持模拟摇晃。 解决点击预览微信扫码真机调试。坑 2页面多次跳转摇晃时疯狂变脸原因onShow每次页面显示都会注册加速计监听旧监听没有销毁多个监听同时生效。 解决onHide生命周期调用wx.stopAccelerometer()关闭传感器监听。坑 3图片显示空白原因图片路径错误没有写开头斜杠或者图片文件名大小写不匹配。 解决路径必须写/images/01.png图片放在项目根目录 images 文件夹。坑 4计数不增加不要分别在点击、摇晃两处写 count统一写在公共函数changeFace里面避免漏写、逻辑不一致。七、拓展思考可以修改加速度阈值调整摇晃灵敏度数值调小轻微晃动就触发变脸数值调大需要用力摇晃。可以增加重置按钮一键把变脸总次数清零。结合本地存储wx.setStorageSync关闭小程序再打开也可以保留历史变脸次数。八、总结这个案例学习小程序设备传感器 API加速计监听实现摇一摇交互。重点注意传感器监听用完要关闭防止内存泄漏、事件重复触发。把变脸逻辑封装为公共函数点击、摇晃复用同一套变脸与计数逻辑代码简洁便于维护