企业官网建设流程全解析

一、项目效果

1. 点击脸谱图片，随机切换一张脸谱，变脸次数 + 1
2. 摇晃手机，触发加速度传感器，自动随机变脸，变脸次数 + 1，并弹出摇一摇成功提示框
3. 页面底部实时动态展示：累计变脸总次数：N

项目前置准备：在小程序根目录新建images文件夹，放入01.png ~ 14.png一共 14 张脸谱图片资源。

二、页面结构 index.wxml

<!--index.wxml--> <navigation-bar title="变脸游戏" back="{{false}}" color="black" background="#FFF"></navigation-bar> <scroll-view class="scrollarea" scroll-y type="list"> <view class="box"> <view class="title">wx.onAccelerometerChange示例</view> <image src="{{faces[index]}}" mode="widthFix" bind:tap="changeFace" /> <view class="count-text">累计变脸总次数：{{count}}</view> </view> </scroll-view>

三、页面样式 index.wxss

/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } image { margin: 20rpx; } .count-text{ text-align:center; font-size:36rpx; color:rebeccapurple; margin-top:20rpx; }

四、全局样式 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; }

五、逻辑代码 index.js（核心）

// index.js Page({ 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' ] }, // 产生[0,n)之间随机索引 createRandomIndex(n) { // Math.random() 生成 [0,1) 随机小数 return Math.floor(Math.random() * n) }, // 变脸函数：切换图片、次数自增 changeFace() { let newCount = this.data.count + 1 this.setData({ index: this.createRandomIndex(this.data.faces.length), count: newCount }) }, // 页面显示时，开启加速度监听（摇一摇核心API） 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 }) } }) } })

六、知识点讲解

1. wx.onAccelerometerChange：小程序加速度传感器 API，持续监听手机 X/Y/Z 三轴加速度变化，是摇一摇功能的核心。
2. Math.floor(Math.random() * n)：生成 0 ~ n-1 的随机整数，用来随机选取脸谱数组下标。
3. setData：小程序更新视图的唯一方式，修改index切换图片、修改count实现次数动态刷新。
4. 扩展需求实现思路：在原始变脸案例基础上，在data新增count，每次调用变脸方法时count+1，wxml 直接渲染{{count}}完成计数展示。

七、测试说明与踩坑提示

1. 微信开发者工具模拟器测试摇一摇：打开模拟器侧边栏，找到【传感器】面板，拖动模拟摇晃；
2. 真机调试效果最好，直接摇晃手机即可触发变脸；
3. 图片路径注意：图片放在项目根目录images，路径必须写/images/xx.png，少写/会图片加载失败；
4. 优化建议（可选）：当前监听频率很高，快速摇晃会多次触发变脸，可以增加防抖定时器，限制短时间内重复触发。

八、总结

本案例是小程序传感器 API 入门经典作业，同时练习了数组、随机数、数据绑定、点击事件、生命周期函数。在基础变脸游戏上完成了作业要求的扩展：动态统计累计变脸次数。