微信小程序实战：基于 Skyline 渲染引擎开发“摇一摇变脸”游戏-育师

项目结构

先来看一下项目的整体结构：

text

复制

下载

├── components/ │ └── navigation-bar/ # 自定义导航栏组件 ├── images/ # 脸谱素材图片 (01.png ~ 14.png) ├── pages/ │ └── index/ # 首页 ├── app.js ├── app.json ├── app.wxss └── project.config.json

1. 核心配置：开启 Skyline 渲染

在app.json中，我们开启了 Skyline 渲染引擎和 Glass-Easel 组件框架。这是微信小程序较新的渲染方案，性能更好，但也需要特定的配置。

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

注意点：

navigationStyle: "custom"：因为 Skyline 下原生导航栏表现可能不一致，通常建议自定义导航栏。
renderer: "skyline"：指定使用 Skyline 渲染。
componentFramework: "glass-easel"：Skyline 推荐的组件框架。

2. 自定义导航栏组件

由于开启了自定义导航，我们需要自己写一个导航栏组件navigation-bar。这个组件不仅要显示标题，还要处理刘海屏安全区域（Safe Area）和胶囊按钮的对齐问题。

组件逻辑 (navigation-bar.js)

组件的核心在于attached生命周期中，通过wx.getMenuButtonBoundingClientRect()和wx.getWindowInfo()计算出左右两侧的留白，确保标题居中且不被胶囊按钮遮挡。

javascript

复制

下载

Component({ properties: { title: { type: String, value: '' }, back: { type: Boolean, value: true }, // ... 其他属性 }, data: { displayStyle: '' }, lifetimes: { attached() { const rect = wx.getMenuButtonBoundingClientRect() const platform = (wx.getDeviceInfo() || wx.getSystemInfoSync()).platform const isAndroid = platform === 'android' const isDevtools = platform === 'devtools' const { windowWidth, safeArea: { top = 0, bottom = 0 } = {} } = wx.getWindowInfo() || wx.getSystemInfoSync() this.setData({ ios: !isAndroid, innerPaddingRight: `padding-right: ${windowWidth - rect.left}px`, leftWidth: `width: ${windowWidth - rect.left}px`, safeAreaTop: isDevtools || isAndroid ? `height: calc(var(--height) + ${top}px); padding-top: ${top}px` : `` }) }, }, methods: { back() { // 返回逻辑 } } })

组件样式 (navigation-bar.wxss)

样式部分使用了 CSS 变量--height来区分 iOS (44px) 和 Android (48px) 的高度，并利用env(safe-area-inset-top)适配刘海屏。

css

复制

下载

.weui-navigation-bar { --height: 44px; --left: 16px; } .weui-navigation-bar .android { --height: 48px; } .weui-navigation-bar__inner { height: calc(var(--height) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); display: flex; /* ... */ }

3. 核心玩法：随机变脸与摇一摇

页面的主要逻辑在index.js中。这里有两个触发变脸的方式：

点击图片：通过bind:tap绑定changeFace方法。
摇一摇：通过wx.onAccelerometerChange监听加速度变化。

数据与随机逻辑

我们准备了 14 张脸谱图片，通过Math.random()生成随机索引。

javascript

复制

下载

Page({ data: { index: 0, count: 0, // 累计变脸次数 faces: [ '/images/01.png', '/images/02.png', // ... 共14张 '/images/14.png' ] }, // 产生 [0, n) 的随机整数 createRandomIndex(n) { return Math.floor(Math.random() * n) }, changeFace() { let newCount = this.data.count + 1 this.setData({ index: this.createRandomIndex(this.data.faces.length), count: newCount }) } })

摇一摇监听

在onShow中开启加速度监听。为了灵敏度，这里简单判断了x、y、z任一轴大于 0.5 即触发变脸。

javascript

复制

下载

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

优化提示：实际开发中，加速度计回调触发频率很高，直接调用setData可能会导致性能问题。建议加入节流（Throttle）或防抖（Debounce）逻辑。

4. 页面布局 (index.wxml)

页面结构非常简洁：顶部是自定义导航栏，下面是一个滚动区域，包含标题、脸谱图片和计数器。

xml

复制

下载

运行

<!--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>

5. 样式美化 (WXSS)

利用 Flex 布局让内容居中，并给图片添加了一些简单的边距。

app.wxss (全局样式):

css

复制

下载

.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.wxss (页面样式):

css

复制

下载

page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } image { margin: 20rpx; width: 100%; /* 配合 mode="widthFix" 使用 */ }