一、案例概述本案例演示微信小程序加速度计 APIwx.onAccelerometerChange的使用方法实现摇一摇换脸的小游戏点击图片或摇动手机页面上的表情图片随机切换为另一张。功能扩展在页面顶部实时显示累计变脸次数每次换脸计数加 1。实现效果页面显示wx.onAccelerometerChange示例标题和一张卡通表情图片点击图片图片立即随机换成另一张表情把手机摇一摇图片同样随机切换并弹出摇一摇成功的 Toast 提示标题下方显示累计变脸次数N每次换脸 N 加 1。二、项目结构miniprogram/ ├── app.js ├── app.json ├── app.wxss ├── sitemap.json ├── components/ │ └── navigation-bar/ # 自定义导航栏组件 ├── images/ │ ├── 01.png # 表情图片 │ ├── 02.png │ ├── ... │ └── 14.png # 共 14 张表情图片 └── pages/ └── index/ ├── index.js ├── index.json ├── index.wxml └── index.wxss三、核心代码3.1 index.wxml!--index.wxml--navigation-bartitle变脸游戏back{{false}}colorblackbackground#FFF/navigation-barscroll-viewclassscrollareascroll-ytypelistviewclassboxviewclasstitlewx.onAccelerometerChange示例/viewviewclasscount累计变脸次数{{count}}/viewimagesrc{{faces[index]}}modewidthFixbind:tapchangeFace//view/scroll-view代码解析image的src通过数据绑定{{faces[index]}}取表情图片路径index变化即换图。modewidthFix表示宽度固定、高度按原比例自动调整避免图片被拉伸变形。bind:tapchangeFace让点击图片也能换脸方便在没有加速度计的模拟器里测试。3.2 index.js// index.jsPage({data:{index:0,// 作业扩展累计变脸次数count: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){// 产生[0,n)之间的随机数其中Math.random()产生[0,1)之间的随机数returnMath.floor(Math.random()*n)},changeFace(){this.setData({index:this.createRandomIndex(this.data.faces.length),count:this.data.count1})},// 生命周期函数onShow(){wx.onAccelerometerChange((res){if(res.x0.5||res.y0.5||res.z0.5){this.changeFace()wx.showToast({title:摇一摇成功,icon:success,duration:1000})}})}})代码解析data.faces保存 14 张表情图片的路径data.index是当前显示图片的下标。createRandomIndex(n)用Math.floor(Math.random() * n)产生[0, n)的随机整数。changeFace()同时更新index换图和count累计次数加 1一次setData完成两个字段的更新。onShow在页面显示时注册加速度计监听wx.onAccelerometerChange回调参数res包含x、y、z三个方向的加速度值。当任一方向加速度超过0.5时判定为摇一摇动作调用changeFace()换脸并用wx.showToast弹出提示。监听放在onShow而不是onLoad可以保证从其他页面返回时监听依然有效对应的wx.offAccelerometerChange可在onHide中调用以节省电量。3.3 index.wxss/**index.wxss**/page{height:100vh;display:flex;flex-direction:column;}.scrollarea{flex:1;overflow-y:hidden;}image{margin:20rpx;}.count{font-size:32rpx;text-align:center;margin-bottom:10rpx;color:#333333;}3.4 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.5 app.json{pages:[pages/index/index],window:{navigationBarTextStyle:black,navigationStyle:custom},style:v2,renderer:skyline,rendererOptions:{skyline:{defaultDisplayBlock:true,defaultContentBox:true,tagNameStyleIsolation:legacy,disableABTest:true,sdkVersionBegin:3.0.0,sdkVersionEnd:15.255.255}},componentFramework:glass-easel,sitemapLocation:sitemap.json,lazyCodeLoading:requiredComponents}代码解析renderer设为skyline使用 Skyline 渲染引擎rendererOptions.skyline中开启默认块级布局和内容盒模型对应本案例 PPT 的工程配置。四、功能扩展累计变脸次数原案例只在换脸时更新图片下标。扩展的实现只改两处data中增加count: 0changeFace()中在setData里同时更新count: this.data.count 1。页面上用view classcount累计变脸次数{{count}}/view显示。这样每点击一次图片或摇一次手机计数都会加 1可以直观验证换脸功能是否被触发也便于测试加速度计阈值是否合适。在微信开发者工具中测试摇一摇时可以点击模拟器右上角的「模拟加速度计」或在调试面板中手动改变x/y/z的值来触发。五、运行效果进入页面显示第一张表情图片和累计变脸次数0。点击图片图片随机换成另一张表情计数变为 1。连续点击图片在 14 张表情中随机切换计数依次递增。在真机上摇动手机图片切换并弹出摇一摇成功的绿色 Toast。六、总结本案例的两个知识点一是wx.onAccelerometerChange监听加速度计数据通过x/y/z三个方向的阈值判断摇一摇动作二是用随机数下标驱动图片切换。扩展的累计次数看似简单但把随机换图变成了可验证、可测试的交互答辩时也能直观说明摇一摇确实被触发了。实际开发中要注意在onHide里调用wx.offAccelerometerChange避免页面隐藏后仍持续监听消耗电量。
