一、案例描述
设计一个小程序，演示wx.onAccelerometerChange的功能和使用方法。小程序运行后页面上出现一张脸谱画面；点击脸谱时画面随机切换；摇晃手机时显示消息框同时画面也随机切换，实现"变脸"效果。
二、实现思路
- 用
<image src="{{faces[index]}}" bind:tap="changeFace" />展示当前脸谱，点击触发changeFace让 index 变为随机下标。 data.faces存储多张脸谱图片路径（课件用 14 张），createRandomIndex(n)工具函数生成[0, n)的随机整数。- 在
onShow中注册wx.onAccelerometerChange监听器，当加速度x/y/z任一方向绝对值大于 0.5 时触发变脸并wx.showToast提示。 - 扩展：新增
count字段记录累计变脸次数，changeFace每次自增，页面<view>显示{{count}}实时更新。
三、核心代码
index.wxml
<viewclass="title">wx.onAccelerometerChange示例</view><imagesrc="{{faces[index]}}"mode="widthFix"bind:tap="changeFace"/><!-- 功能扩展：动态显示累计变脸次数 --><viewclass="count-text">累计变脸总次数：{{count}}</view>index.js
Page({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.count+1// 功能扩展：次数累加})},onShow(){wx.onAccelerometerChange((res)=>{if(res.x>0.5||res.y>0.5||res.z>0.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: 0； changeFace中同时做count: this.data.count + 1；- WXML 中新增
<view class="count-text">累计变脸总次数：{{count}}</view>。
运行时每次点击或摇一摇触发变脸，次数同步自增并实时显示，与课件中"累计变脸总次数：5"的效果一致。
六、总结
本案例把"点击变脸"和"摇一摇变脸"两种交互方式串在一起，展示了wx.onAccelerometerChange这个设备 API 的典型用法，并通过累计变脸次数的实时显示完成了功能扩展。
