一、 实验目的
本次实验基于《案例 5.1 变脸游戏》，旨在掌握微信小程序中wx.onAccelerometerChange(function listener)接口的使用方法。通过监听手机加速度计，实现摇晃手机触发“摇一摇”事件。结合Math.random()随机函数和setData数据绑定，实现点击图片或摇晃手机时随机切换脸谱，并在基础功能上扩展实现“动态显示累计变脸次数”的功能。
二、 项目准备与配置
1. 新建项目
打开微信开发者工具，新建一个项目，后端服务选择“不使用云服务”，模板选择“不使用模板”。
2. 准备图片资源
在项目根目录（与pages文件夹同级）下新建images文件夹，放入 14 张脸谱图片，分别命名为01.png到14.png。
(注：必须放在根目录，否则使用/images/xx.png绝对路径时会报 500 错误)
3. 修改app.json
配置小程序顶部的导航栏标题。
{ "pages": [ "pages/index/index" ], "window": { "navigationBarTitleText": "变脸游戏", "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black" } }三、 核心代码实现
1. 页面结构 (index.wxml)
使用<image>组件展示脸谱，绑定点击事件bind:tap；并在底部新增一个<view>用于显示累计变脸次数。
<view class="box"> <view class="title">wx.onAccelerometerChange示例</view> <!-- 脸谱图片，绑定点击事件 --> <image src="{{faces[index]}}" mode="widthFix" bind:tap="changeFace" /> <!-- 扩展要求：动态显示累计变脸次数 --> <view class="count-text">累计变脸总次数：{{changeCount}}</view> </view>2. 页面样式 (index.wxss & app.wxss)
让界面布局美观，脸谱居中显示，计数文本醒目。
app.wxss：
.box { padding: 20rpx; border: 2rpx solid purple; margin: 20rpx; display: flex; flex-direction: column; align-items: center; } .title { font-size: 40rpx; font-weight: bolder; text-align: center; margin-bottom: 30rpx; color: rebeccapurple; }index.wxss：
page { height: 100vh; display: flex; flex-direction: column; } image { margin: 20rpx; width: 600rpx; height: 600rpx; border-radius: 50%; } /* 扩展要求：次数文本样式 */ .count-text { font-size: 36rpx; font-weight: bold; color: blue; text-align: center; margin-top: 20rpx; }3. 逻辑处理 (index.js) —— 包含计数器与摇一摇
在data中定义图片数组、当前索引和累计次数。编写随机生成索引的函数，并在onShow生命周期中开启加速度监听。
Page({ data: { index: 0, // 当前显示的图片索引 changeCount: 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' ] }, // 产生 [0, n) 之间的随机数 createRandomIndex(n) { return Math.floor(Math.random() * n); }, // 核心：换脸函数（点击或摇一摇触发） changeFace() { let newIndex = this.createRandomIndex(this.data.faces.length); // 防止随机到与当前相同的图片（优化体验） while (newIndex === this.data.index && this.data.faces.length > 1) { newIndex = this.createRandomIndex(this.data.faces.length); } // 更新图片索引，并累加变脸次数 this.setData({ index: newIndex, changeCount: this.data.changeCount + 1 // 扩展功能：每次换脸加1 }); }, // 生命周期函数：监听加速度计（摇一摇） onShow() { wx.onAccelerometerChange((res) => { // 判断 X、Y、Z 任一轴的加速度绝对值是否超过阈值 (0.5) if (Math.abs(res.x) > 0.5 || Math.abs(res.y) > 0.5 || Math.abs(res.z) > 0.5) { this.changeFace(); // 摇动触发换脸及计数 wx.showToast({ title: '摇一摇成功', icon: 'success', duration: 1000 }); } }); }, // 生命周期函数：页面隐藏时关闭加速度监听，节省性能 onHide() { wx.offAccelerometerChange(); } });四、 运行效果展示
点击换脸：点击页面中央的脸谱，脸谱会随机切换，底部的“累计变脸总次数”随之 +1。
摇一摇换脸：在微信开发者工具的模拟面板中（或使用真机），点击“摇一摇”模拟加速度变化。页面会弹出
摇一摇成功的提示框，同时脸谱切换，累计次数 +1。
运行截图：
五、 实验总结
通过本次实验，我掌握了小程序传感器 API 的基本调用流程。在排错过程中，再次深刻理解了小程序绝对路径的使用规则（图片必须放在根目录的images下才能被/images/xxx.png正确读取）。扩展功能的实现让我更加熟悉了this.setData的数据驱动视图机制，实现了数据的动态渲染。同时，在onHide中取消监听wx.offAccelerometerChange也是一个重要的性能优化习惯。
