awesome-skyline：微信小程序 Skyline 渲染引擎示例合集导入与运行指南
一、项目官方信息
| 项目 | 信息 |
|---|---|
| GitHub 仓库 | https://github.com/wechat-miniprogram/awesome-skyline |
| 官方文档 | https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/skyline/introduction.html |
| 开源协议 | MIT |
| Star 数 | 约 198 |
| 项目类型 | Skyline 官方示例合集 |
awesome-skyline 是微信小程序官方维护的 Skyline 渲染引擎示例合集。README 中对 Skyline 的定义是：
Skyline 是微信小程序推出的新渲染引擎，用于替代 WebView 渲染，其能够带来更好的渲染性能，并且添加了诸多增强特性，让小程序拥有更接近原生的交互体验。
也就是说，Skyline 不再走传统的 WebView 渲染管线，而是用一套更轻量、更接近原生的渲染方式，让小程序在滑动、动画、转场等场景下更顺滑。这个仓库把官方提供的一组典型交互示例集中在一起，供开发者学习和参考。
二、官方图片
上图为该仓库在 GitHub 上的社交预览图（og:image）。README 本身以示例清单为主，每个示例都是一个可直接运行的小程序工程，导入微信开发者工具后即可在模拟器与真机上看到对应交互效果。
三、环境要求
- 微信开发者工具：下载最新稳定版（Skyline 需要较新版本的工具链支持）。
- 一个可用于调试的小程序 AppID（没有 AppID 可选择「测试号」）。
- Git 客户端，用于克隆仓库。
- 真机预览建议用较新的微信版本，以获得完整的 Skyline 渲染效果。
四、导入与运行步骤
1. 克隆仓库
git clone https://github.com/wechat-miniprogram/awesome-skyline.git
2. 打开微信开发者工具
启动「微信开发者工具」，选择「导入项目」（不要选新建小程序）。
3. 选择示例目录作为项目根目录
仓库下 examples/ 目录里每个子文件夹都是一个独立示例。例如想运行「通讯录」，就把项目目录指向：
awesome-skyline/examples/address-book
各示例与目录对应关系（README 示例清单）：
| 示例 | 目录 |
|---|---|
| 通讯录 | examples/address-book |
| 相册 | examples/album |
| 卡片转场 | examples/card_transition |
| 半屏弹窗 | examples/half-screen |
| 分段式半屏 | examples/segmented-half-screen |
| Tab 指示条 | examples/tab-indicator |
| 搜索栏吸附 | examples/product-list |
| 沉浸式商品浏览 | examples/expanded-scroll-view |
| 分类列表联动 | examples/associated-scroll-view |
4. 填写 AppID 并导入
在导入弹窗中填入你的小程序 AppID（或选测试号），确认目录无误后点「导入」。工具会自动编译并在模拟器中打开该示例。
5. 确认 Skyline 渲染已生效
Skyline 是在页面/窗口配置中启用的。在示例工程的 app.json 或页面 json 中，可以看到类似渲染配置。确认「详情 → 本地设置」中的调试基础库版本足够新；若模拟器没有按 Skyline 渲染，可切换到真机预览扫码查看，真机效果更接近最终表现。
6. 逐个体验示例
重复第 3～5 步，依次把目录换成 examples/ 下的其他示例，即可逐个体验：半屏弹窗的弹出手感、卡片转场动画、Tab 指示条跟随、搜索栏吸附、沉浸式滚动、分类列表联动等典型 Skyline 交互。
五、使用方法
- 作为交互参考：仓库不是组件库，而是一组演示。直接阅读对应示例的 WXML/WXSS/JS，理解 Skyline 下如何实现某种动效或布局。
- 半屏弹窗类：
half-screen、segmented-half-screen展示了 Skyline 下半屏容器的用法，适合做底部弹层、分享面板。 - 滚动联动类：
product-list（搜索栏吸附）、expanded-scroll-view（沉浸式商品浏览）、associated-scroll-view（分类列表联动）展示了滚动时的吸顶、展开、双向联动。 - 转场与指示条：
card_transition、tab-indicator展示页面转场动画与 Tab 指示器跟随。 - 相册 / 通讯录：
album、address-book是较完整的列表 + 详情类示例，可作为业务页面骨架参考。 - 移植到自己的项目：把示例里的关键 WXML 结构、WXSS 样式与 JS 逻辑抽取出来，在自己的小程序工程中套用；注意 Skyline 对部分 CSS 选择器与布局属性有约束，以官方文档为准。
六、常见问题 FAQ
-
导入后模拟器白屏或报错？ 多为基础库版本过低或工具不是最新版。升级到最新微信开发者工具，并在「详情 → 本地设置」把调试基础库调到较新的版本后重试。
-
为什么我这里看起来和 WebView 没区别？ Skyline 必须在工程配置中启用对应渲染。请确认示例工程本身的 json 配置正确，并用真机预览扫码查看——部分增强动效在模拟器里表现不完整。
-
这是一个可以 npm 安装的组件库吗？ 不是。awesome-skyline 是示例合集，不提供 npm 包。它的价值是演示官方推荐的写法，需要你自己把相关代码复制到项目中。
-
每个示例都要单独导入一次吗？ 是的。
examples/下每个子目录是独立工程，在开发者工具里用「导入项目」分别指向对应目录即可，也可以在工具里通过「项目列表」切换。 -
Skyline 和 WebView 渲染能混用吗？ 官方文档说明了 Skyline 的适用范围与约束。建议按页面粒度评估是否启用 Skyline，不支持的页面仍走原渲染。具体能力边界以官方 Skyline 文档为准。
-
没有 AppID 能跑吗？ 可以。导入时选择「测试号」即可在模拟器里调试；真机预览需要扫码，测试号也支持基础的真机预览。