实验简介本次实验使用微信小程序加速计 APIwx.onAccelerometerChange实现变脸小游戏。实现两种切换脸谱方式点击图片切换、摇晃手机切换脸谱扩展功能统计并展示累计变脸总次数。 开发环境微信开发者工具基础库 3.7.5✅实现功能点击脸谱图片随机切换脸谱变脸次数 1真机摇晃手机触发加速计监听自动切换脸谱弹出提示变脸次数 1页面实时展示累计变脸总次数⚠️注意模拟器无法模拟摇晃摇一摇功能需要手机真机预览测试核心 API 说明表格API作用wx.onAccelerometerChange(cb)监听加速度数据手机晃动时持续回调拿到 x/y/z 三轴加速度wx.offAccelerometerChange()取消加速计监听页面销毁 / 隐藏时调用节约性能wx.showToast()弹出轻提示摇晃成功时弹窗提醒用户Math.random()生成随机数随机选取脸谱下标原理手机摇晃时三轴加速度数值会明显变化本实验判断任意轴绝对值大于 0.5 即判定为摇晃动作。项目文件结构MINIPROGRAM-3 ├── images │ ├ 1.png │ ├ 2.png │ ... │ └ 14.png ├── pages │ └── index │ ├ index.js │ ├ index.wxml │ ├ index.wxss │ └ index.json ├── app.json └── app.wxss完整代码1. app.json{ pages: [ pages/index/index ], window: { navigationBarTextStyle: black, navigationBarTitleText: 变脸游戏, navigationBarBackgroundColor: #ffffff, navigationStyle: default }, style: v2, sitemapLocation: sitemap.json, lazyCodeLoading: requiredComponents }2. pages/index/index.wxmlview classbox view classtitlewx.onAccelerometerChange示例/view image src{{faces[index]}} modewidthFix bindtapchangeFace/image view classcount-text累计变脸总次数{{totalCount}}/view /view3. pages/index/index.wxsspage { height: 100vh; background-color: #ffffff; } .box { margin: 20rpx; padding: 20rpx; border: 2rpx solid purple; } .title { font-size: 40rpx; font-weight: bolder; text-align: center; margin-bottom: 30rpx; color: rebeccapurple; } image { margin: 20rpx; width:100%; } .count-text { font-size: 40rpx; color: blue; text-align: center; margin-top:30rpx; }4. pages/index/index.jsPage({ data: { index: 0, faces: [ /images/1.png, /images/2.png, /images/3.png, /images/4.png, /images/5.png, /images/6.png, /images/7.png, /images/8.png, /images/9.png, /images/10.png, /images/11.png, /images/12.png, /images/13.png, /images/14.png ], totalCount:0 }, createRandomIndex(n) { return Math.floor(Math.random() * n) }, changeFace() { let newIdx this.createRandomIndex(this.data.faces.length) this.setData({ index: newIdx, totalCount: this.data.totalCount 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: 1000 }) } }) }, onHide() { wx.offAccelerometerChange() } })实验踩坑记录坑 1图片加载失败控制台报 500 资源加载错误原因图片路径写错、文件夹名称不匹配代码写/images/1.png但是没有images文件夹或者图片放错目录 ✅解决项目根目录新建images文件夹全部脸谱图片放入路径严格一致修改后清缓存重新编译。坑 2模拟器摇晃手机没有反应原因模拟器不支持加速度传感器wx.onAccelerometerChange在模拟器无法触发 ✅解决使用真机预览扫码在手机上摇晃测试摇一摇变脸功能。坑 3页面离开之后摇晃还会触发变脸原因只开启监听没有取消加速计事件监听监听持续后台运行 ✅解决在onHide生命周期调用wx.offAccelerometerChange()关闭监听。坑 4顶部出现黑色状态栏、标题栏消失原因navigationStyle设置为custom自定义导航 ✅解决app.json中设置navigationStyle:default启用小程序原生导航栏。✨实验收获掌握小程序设备传感器 API加速计wx.onAccelerometerChange可以感知手机姿态、摇晃动作。理解页面生命周期onShow、onHide页面显示时开启监听页面隐藏时释放监听避免资源浪费。学会随机数实现随机切换素材使用data数据绑定实现页面动态更新。图片资源路径是小程序高频报错点绝对路径/images/xxx.png从项目根目录开始查找资源。区分模拟器和真机能力差异传感器类 API 大多需要真机调试。
实验简介本次实验使用微信小程序加速计 APIwx.onAccelerometerChange实现变脸小游戏。实现两种切换脸谱方式点击图片切换、摇晃手机切换脸谱扩展功能统计并展示累计变脸总次数。 开发环境微信开发者工具基础库 3.7.5✅实现功能点击脸谱图片随机切换脸谱变脸次数 1真机摇晃手机触发加速计监听自动切换脸谱弹出提示变脸次数 1页面实时展示累计变脸总次数⚠️注意模拟器无法模拟摇晃摇一摇功能需要手机真机预览测试核心 API 说明表格API作用wx.onAccelerometerChange(cb)监听加速度数据手机晃动时持续回调拿到 x/y/z 三轴加速度wx.offAccelerometerChange()取消加速计监听页面销毁 / 隐藏时调用节约性能wx.showToast()弹出轻提示摇晃成功时弹窗提醒用户Math.random()生成随机数随机选取脸谱下标原理手机摇晃时三轴加速度数值会明显变化本实验判断任意轴绝对值大于 0.5 即判定为摇晃动作。项目文件结构MINIPROGRAM-3 ├── images │ ├ 1.png │ ├ 2.png │ ... │ └ 14.png ├── pages │ └── index │ ├ index.js │ ├ index.wxml │ ├ index.wxss │ └ index.json ├── app.json └── app.wxss完整代码1. app.json{ pages: [ pages/index/index ], window: { navigationBarTextStyle: black, navigationBarTitleText: 变脸游戏, navigationBarBackgroundColor: #ffffff, navigationStyle: default }, style: v2, sitemapLocation: sitemap.json, lazyCodeLoading: requiredComponents }2. pages/index/index.wxmlview classbox view classtitlewx.onAccelerometerChange示例/view image src{{faces[index]}} modewidthFix bindtapchangeFace/image view classcount-text累计变脸总次数{{totalCount}}/view /view3. pages/index/index.wxsspage { height: 100vh; background-color: #ffffff; } .box { margin: 20rpx; padding: 20rpx; border: 2rpx solid purple; } .title { font-size: 40rpx; font-weight: bolder; text-align: center; margin-bottom: 30rpx; color: rebeccapurple; } image { margin: 20rpx; width:100%; } .count-text { font-size: 40rpx; color: blue; text-align: center; margin-top:30rpx; }4. pages/index/index.jsPage({ data: { index: 0, faces: [ /images/1.png, /images/2.png, /images/3.png, /images/4.png, /images/5.png, /images/6.png, /images/7.png, /images/8.png, /images/9.png, /images/10.png, /images/11.png, /images/12.png, /images/13.png, /images/14.png ], totalCount:0 }, createRandomIndex(n) { return Math.floor(Math.random() * n) }, changeFace() { let newIdx this.createRandomIndex(this.data.faces.length) this.setData({ index: newIdx, totalCount: this.data.totalCount 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: 1000 }) } }) }, onHide() { wx.offAccelerometerChange() } })实验踩坑记录坑 1图片加载失败控制台报 500 资源加载错误原因图片路径写错、文件夹名称不匹配代码写/images/1.png但是没有images文件夹或者图片放错目录 ✅解决项目根目录新建images文件夹全部脸谱图片放入路径严格一致修改后清缓存重新编译。坑 2模拟器摇晃手机没有反应原因模拟器不支持加速度传感器wx.onAccelerometerChange在模拟器无法触发 ✅解决使用真机预览扫码在手机上摇晃测试摇一摇变脸功能。坑 3页面离开之后摇晃还会触发变脸原因只开启监听没有取消加速计事件监听监听持续后台运行 ✅解决在onHide生命周期调用wx.offAccelerometerChange()关闭监听。坑 4顶部出现黑色状态栏、标题栏消失原因navigationStyle设置为custom自定义导航 ✅解决app.json中设置navigationStyle:default启用小程序原生导航栏。✨实验收获掌握小程序设备传感器 API加速计wx.onAccelerometerChange可以感知手机姿态、摇晃动作。理解页面生命周期onShow、onHide页面显示时开启监听页面隐藏时释放监听避免资源浪费。学会随机数实现随机切换素材使用data数据绑定实现页面动态更新。图片资源路径是小程序高频报错点绝对路径/images/xxx.png从项目根目录开始查找资源。区分模拟器和真机能力差异传感器类 API 大多需要真机调试。
