一、案例描述设计一个小程序演示wx.onAccelerometerChange的功能和使用方法。小程序运行后页面上出现一张脸谱画面点击脸谱时画面随机切换摇晃手机时显示消息框同时画面也随机切换实现变脸效果。二、实现思路用image src{{faces[index]}} bind:tapchangeFace /展示当前脸谱点击触发changeFace让 index 变为随机下标。data.faces存储多张脸谱图片路径课件用 14 张createRandomIndex(n)工具函数生成[0, n)的随机整数。在onShow中注册wx.onAccelerometerChange监听器当加速度x/y/z任一方向绝对值大于 0.5 时触发变脸并wx.showToast提示。扩展新增count字段记录累计变脸次数changeFace每次自增页面view显示{{count}}实时更新。三、核心代码index.wxmlviewclasstitlewx.onAccelerometerChange示例/viewimagesrc{{faces[index]}}modewidthFixbind:tapchangeFace/!-- 功能扩展动态显示累计变脸次数 --viewclasscount-text累计变脸总次数{{count}}/viewindex.jsPage({data:{index: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],count:0// 功能扩展},createRandomIndex(n){returnMath.floor(Math.random()*n)},changeFace(){this.setData({index:this.createRandomIndex(this.data.faces.length),count:this.data.count1// 功能扩展次数累加})},onShow(){wx.onAccelerometerChange((res){if(res.x0.5||res.y0.5||res.z0.5){this.changeFace()wx.showToast({title:摇一摇成功,icon:success,duration:5000})}})}})四、关键知识点wx.onAccelerometerChange监听加速度数据变化回调参数res含x/y/z三个方向的加速度值单位 g。Math.random()产生[0, 1)的随机数结合Math.floor得到随机整数下标。事件绑定image的bind:tap绑定点击事件onShow中注册加速计监听。setData 响应式更新变脸时同时更新index和count视图自动刷新。五、功能扩展在课件基础上data 中新增count: 0changeFace中同时做count: this.data.count 1WXML 中新增view classcount-text累计变脸总次数{{count}}/view。运行时每次点击或摇一摇触发变脸次数同步自增并实时显示与课件中累计变脸总次数5的效果一致。六、总结本案例把点击变脸和摇一摇变脸两种交互方式串在一起展示了wx.onAccelerometerChange这个设备 API 的典型用法并通过累计变脸次数的实时显示完成了功能扩展。