一、案例描述

设计一个小程序，演示wx.onAccelerometerChange的功能和使用方法。小程序运行后页面上出现一张脸谱画面；点击脸谱时画面随机切换；摇晃手机时显示消息框同时画面也随机切换，实现"变脸"效果。

二、实现思路

1. 用<image src="{{faces[index]}}" bind:tap="changeFace" />展示当前脸谱，点击触发changeFace让 index 变为随机下标。
2. data.faces存储多张脸谱图片路径（课件用 14 张），createRandomIndex(n)工具函数生成[0, n)的随机整数。
3. 在onShow中注册wx.onAccelerometerChange监听器，当加速度x/y/z任一方向绝对值大于 0.5 时触发变脸并wx.showToast提示。
4. 扩展：新增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，视图自动刷新。

五、功能扩展

在课件基础上：

1. data 中新增count: 0；
2. changeFace中同时做count: this.data.count + 1；
3. WXML 中新增<view class="count-text">累计变脸总次数：{{count}}</view>。
   运行时每次点击或摇一摇触发变脸，次数同步自增并实时显示，与课件中"累计变脸总次数：5"的效果一致。

六、总结

本案例把"点击变脸"和"摇一摇变脸"两种交互方式串在一起，展示了wx.onAccelerometerChange这个设备 API 的典型用法，并通过累计变脸次数的实时显示完成了功能扩展。