前言本次课程案例是利用小程序加速度传感器wx.onAccelerometerChange制作变脸小游戏。功能包含点击图片随机切换脸谱、摇晃手机自动变脸同时完成作业扩展统计并展示累计变脸次数。开发过程遇到了 Skyline 渲染器navigation-bar导航栏组件报错这里记录完整代码与踩坑细节。✅ 功能清单点击脸谱图片随机更换脸谱摇晃手机触发加速传感器自动变脸并弹出提示实时展示累计变脸总次数点击、摇晃变脸都计入页面离开时关闭传感器监听节约性能项目目录完整源码1. app.json改为webview渲染器避开skyline导航栏报错{ pages: [ pages/index/index ], window: { navigationBarTextStyle: black, navigationStyle: custom }, style: v2, renderer: webview, sitemapLocation: sitemap.json, lazyCodeLoading: requiredComponents }2. app.wxss全局公共样式/**app.wxss**/ .box { margin: 20rpx; padding: 20rpx; border: 2rpx solid purple; } .title { font-size: 40rpx; font-weight: bolder; text-align: center; margin-bottom: 30rpx; color: rebeccapurple; }3. pages/index/index.wxml!--index.wxml-- scroll-view classscrollarea scroll-y typelist view classbox view classtitlewx.onAccelerometerChange示例/view image src{{faces[index]}} modewidthFix bind:tapchangeFace/image !-- 作业扩展累计变脸次数 -- view classcount-text累计变脸总次数{{totalCount}}/view /view /scroll-view4. pages/index/index.wxss/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } image { margin: 20rpx; } .count-text { font-size:40rpx; text-align:center; color:rebeccapurple; margin-top:20rpx; }5. pages/index/index.js核心逻辑// index.js Page({ data: { index: 0, totalCount: 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 ] }, // 生成随机索引 createRandomIndex(n) { return Math.floor(Math.random() * n) }, // 变脸函数点击、摇晃共用 changeFace() { this.setData({ index: this.createRandomIndex(this.data.faces.length), totalCount: this.data.totalCount 1 }) }, onShow() { // 监听加速度传感器 wx.onAccelerometerChange((res) { // 三轴任意方向加速度大于0.5判定为摇晃 if (res.x 0.5 || res.y 0.5 || res.z 0.5) { this.changeFace() wx.showToast({ title: 摇一摇成功, icon: success, duration: 5000 }) } }) }, // 页面隐藏关闭传感器监听防止后台持续触发 onHide(){ wx.offAccelerometerChange() } })6. pages/index/index.json{ usingComponents: {} }知识点讲解加速度传感器wx.onAccelerometerChange持续监听手机三轴加速度x、y、z数值正负代表倾斜方向。当晃动幅度超过阈值就触发变脸逻辑。取消监听wx.offAccelerometerChange()传感器监听会持续占用硬件资源必须在onHide生命周期取消监听否则离开页面后还会继续触发变脸。随机数生成Math.floor(Math.random() * n)生成0 ~ n-1的整数用来随机选取脸谱数组下标。作业扩展次数统计 在data定义totalCount每次执行变脸函数时自增视图里渲染该变量实现计数。摇晃一次连续多次变脸加速度传感器回调触发频率很高这是原生接口特性如果想要防抖可以增加时间戳判断限制短时间内只响应一次摇晃。小结这个案例学习了小程序传感器的调用理解了传感器监听的开启与销毁。同时结合点击事件、随机逻辑、数据绑定完成小游戏开发适合小程序传感器入门练习。
前言本次课程案例是利用小程序加速度传感器wx.onAccelerometerChange制作变脸小游戏。功能包含点击图片随机切换脸谱、摇晃手机自动变脸同时完成作业扩展统计并展示累计变脸次数。开发过程遇到了 Skyline 渲染器navigation-bar导航栏组件报错这里记录完整代码与踩坑细节。✅ 功能清单点击脸谱图片随机更换脸谱摇晃手机触发加速传感器自动变脸并弹出提示实时展示累计变脸总次数点击、摇晃变脸都计入页面离开时关闭传感器监听节约性能项目目录完整源码1. app.json改为webview渲染器避开skyline导航栏报错{ pages: [ pages/index/index ], window: { navigationBarTextStyle: black, navigationStyle: custom }, style: v2, renderer: webview, sitemapLocation: sitemap.json, lazyCodeLoading: requiredComponents }2. app.wxss全局公共样式/**app.wxss**/ .box { margin: 20rpx; padding: 20rpx; border: 2rpx solid purple; } .title { font-size: 40rpx; font-weight: bolder; text-align: center; margin-bottom: 30rpx; color: rebeccapurple; }3. pages/index/index.wxml!--index.wxml-- scroll-view classscrollarea scroll-y typelist view classbox view classtitlewx.onAccelerometerChange示例/view image src{{faces[index]}} modewidthFix bind:tapchangeFace/image !-- 作业扩展累计变脸次数 -- view classcount-text累计变脸总次数{{totalCount}}/view /view /scroll-view4. pages/index/index.wxss/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } image { margin: 20rpx; } .count-text { font-size:40rpx; text-align:center; color:rebeccapurple; margin-top:20rpx; }5. pages/index/index.js核心逻辑// index.js Page({ data: { index: 0, totalCount: 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 ] }, // 生成随机索引 createRandomIndex(n) { return Math.floor(Math.random() * n) }, // 变脸函数点击、摇晃共用 changeFace() { this.setData({ index: this.createRandomIndex(this.data.faces.length), totalCount: this.data.totalCount 1 }) }, onShow() { // 监听加速度传感器 wx.onAccelerometerChange((res) { // 三轴任意方向加速度大于0.5判定为摇晃 if (res.x 0.5 || res.y 0.5 || res.z 0.5) { this.changeFace() wx.showToast({ title: 摇一摇成功, icon: success, duration: 5000 }) } }) }, // 页面隐藏关闭传感器监听防止后台持续触发 onHide(){ wx.offAccelerometerChange() } })6. pages/index/index.json{ usingComponents: {} }知识点讲解加速度传感器wx.onAccelerometerChange持续监听手机三轴加速度x、y、z数值正负代表倾斜方向。当晃动幅度超过阈值就触发变脸逻辑。取消监听wx.offAccelerometerChange()传感器监听会持续占用硬件资源必须在onHide生命周期取消监听否则离开页面后还会继续触发变脸。随机数生成Math.floor(Math.random() * n)生成0 ~ n-1的整数用来随机选取脸谱数组下标。作业扩展次数统计 在data定义totalCount每次执行变脸函数时自增视图里渲染该变量实现计数。摇晃一次连续多次变脸加速度传感器回调触发频率很高这是原生接口特性如果想要防抖可以增加时间戳判断限制短时间内只响应一次摇晃。小结这个案例学习了小程序传感器的调用理解了传感器监听的开启与销毁。同时结合点击事件、随机逻辑、数据绑定完成小游戏开发适合小程序传感器入门练习。
排查指南)
