微信小程序设备 API 实战：变脸游戏

发布时间：2026/10/30 4:53:24
微信小程序设备 API 实战：变脸游戏

一、前言

微信小程序提供丰富的设备能力 API，wx.onAccelerometerChange加速计监听，可以感知手机摇晃动作。本次案例实现变脸小游戏：点击图片切换脸谱，摇晃手机同样切换脸谱，作业扩展实现累计变脸次数统计。

开发环境：微信开发者工具，skyline 渲染模式，不使用云开发。

二、实现效果

  1. 页面展示脸谱图片，点击图片，随机更换一张脸谱，变脸计数 + 1；
  2. 摇晃手机，触发加速计，弹出摇一摇成功提示框，同时变脸，计数 + 1；
  3. 页面实时展示累计变脸总次数，点击和摇晃两种变脸方式都会累加。

加速计属于手机硬件能力，模拟器无法模拟摇晃，必须真机预览测试。

三、项目目录结构

变脸游戏
├─ app.js
├─ app.json
├─ app.wxss
├─ images #存放脸谱图片01.png~14.png
│ ├─ 01.png
│ ├─ 02.png
│ └─ ...
└─ pages
└─ index
├─ index.js
├─ index.json
├─ index.wxml
└─ index.wxss

四、完整源码

1.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"
}

2.pages/index/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"></image>

<view class="count-text">累计变脸总次数：{{count}}</view>

</view>

</scroll-view>

3.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;
font-weight: bold;
text-align: center;
color: rebeccapurple;
margin-top: 20rpx;
}

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;
}

5.pages/index/index.js（核心逻辑）

Page({
data: {
index: 0, // 当前脸谱数组下标
count: 0, // 作业扩展：变脸总次数，初始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‑1] 的随机整数
* @param {Number} n 数组长度
*/
createRandomIndex(n) {
return Math.floor(Math.random() * n)
},

/**
* 变脸函数：点击图片、摇晃手机都会调用该函数
*/
changeFace() {
const newIdx = this.createRandomIndex(this.data.faces.length)
this.setData({
index: newIdx,
count: this.data.count + 1 // 每变脸一次，计数自增1
})
},

//页面显示：开启加速计监听
onShow() {
wx.onAccelerometerChange((res) => {
// x/y/z三轴加速度，达到阈值判定为摇晃手机
if (res.x > 0.5 || res.y > 0.5 || res.z > 0.5) {
this.changeFace()
wx.showToast({
title: '摇一摇成功',
icon: 'success',
duration: 5000
})
}
})
},

//页面隐藏，关闭加速计监听，防止事件重复注册
onHide() {
wx.stopAccelerometer()
}
})

五、核心 API 知识点解析

  1. wx.onAccelerometerChange(callback)加速计监听监听手机加速度传感器，手机移动、摇晃时持续执行回调函数。回调参数res包含x、y、z三个轴加速度值；数值超过阈值，就判定用户摇晃手机。
  2. wx.stopAccelerometer()停止监听加速计。页面离开必须调用，否则监听不会销毁，多次进入页面会重复注册事件，导致变脸疯狂触发。
  3. wx.showToast(Object object)显示消息提示框，本案例用来弹出 “摇一摇成功” 提示。
  4. 随机数生成Math.random()+Math.floor()Math.random()生成[0,1)浮点数；Math.floor()向下取整，生成合法数组下标，实现随机切换脸谱。
  5. 作业扩展计数逻辑点击图片、摇晃变脸都调用同一个changeFace()函数，只需要在此函数内部执行count+1，两种操作都可以正确累计变脸次数，代码复用。

六、踩坑记录

坑 1：摇晃手机没有反应

原因：wx.onAccelerometerChange读取手机硬件传感器，微信开发者工具模拟器不支持模拟摇晃。 解决：点击预览，微信扫码，真机调试。

坑 2：页面多次跳转，摇晃时疯狂变脸

原因：onShow每次页面显示都会注册加速计监听，旧监听没有销毁，多个监听同时生效。 解决：onHide生命周期调用wx.stopAccelerometer()关闭传感器监听。

坑 3：图片显示空白

原因：图片路径错误，没有写开头斜杠，或者图片文件名大小写不匹配。 解决：路径必须写/images/01.png，图片放在项目根目录 images 文件夹。

坑 4：计数不增加

不要分别在点击、摇晃两处写 count++，统一写在公共函数changeFace里面，避免漏写、逻辑不一致。

七、拓展思考

  1. 可以修改加速度阈值，调整摇晃灵敏度；数值调小，轻微晃动就触发变脸；数值调大，需要用力摇晃。
  2. 可以增加重置按钮，一键把变脸总次数清零。
  3. 结合本地存储wx.setStorageSync，关闭小程序再打开，也可以保留历史变脸次数。

八、总结

这个案例学习小程序设备传感器 API，加速计监听实现摇一摇交互。重点注意传感器监听用完要关闭，防止内存泄漏、事件重复触发。把变脸逻辑封装为公共函数，点击、摇晃复用同一套变脸与计数逻辑，代码简洁便于维护