什么是 Skyline

微信小程序新的渲染引擎，使用更加高效的渲染管线，提供更好的性能和全新的交互动画体验。

具体可以查阅官网介绍

将开发者工具切换成 Sykline 模式

使用 skylint 工具迁移

npx skylint

使用过程中可能会出现文件未找到错误，例如

原因就是使用绝对路径 <import src="/components/chooserList/index.wxml" />导入模块，而 skylint 无法找到该文件，需要修改为相对路径 <import src="../../components/chooserList/index.wxml" />导入模块

有几种提示不是很准确，可以评估下:

手动迁移

在 app.json 配置

{
"lazyCodeLoading": "requiredComponents", // 开启按需注入
"rendererOptions": {
"skyline": {
"defaultDisplayBlock": true // skyline 下节点默认为 flex 布局，可以在此切换为默认 block 布局
}
}
}

在 page.json 配置

{
"renderer": "skyline", // 声明为 skyline 渲染，对于已有的项目，建议渐进式迁移，对于新项目，直接全局打开，在 app.json 里进行配置
"componentFramework": "glass-easel", // 声明使用新版 glass-easel 组件框架
"disableScroll": true, // skyline 不支持页面全局滚动，为了使之与WebView保持兼容，在此禁止滚动
"navigationStyle": "custom" // skyline 不支持原生导航栏，为了使之与WebView保持兼容，并且自行实现自定义导航栏
}

skyline 不支持页面全局滚动，如果需要页面滚动，在需要滚动的区域使用 scroll-view 实现

<scroll-view type="list" scroll-y style="flex: 1; width: 100%; overflow: hidden;"></scroll-view>

page {
display: flex;
flex-direction: column;
height: 100vh;

}

skyline 渲染模式下 flex-direction 默认值是 column，为了使之与WebView保持兼容，需要在 flex 布局里将 flex-direction 默认值改为 row

在真机上调试 skyline 渲染模式

小程序菜单 > 开发调试 > Switch Render，会出现三个选项，说明如下：

Auto ：跟随 AB 实验，即对齐小程序正式用户的表现

WebView ：强制切为 WebView 渲染

Skyline ：若当前页面已迁移到 Skyline，则强制切为 Skyline 渲染

常见问题

position: fixed 不支持

需要将

<view class="background"></view>

.background {

position: fixed;


}

修改为

<root-portal>

<view class="background"></view>

</root-portal>

.background {

position: absolute;


}

如果无法做到适配，则可以根据不同 renderer 兼容

<view class="position {{renderer}}"></view>

.position {
position: fixed;

}

.position.skyline {
position: absolute;

}

Page({
data: {
renderer: 'webview'

    },

onLoad() {
this.setData({
renderer: this.renderer,

        })

    },

})

不支持 Canvas 旧版接口

Skyline 渲染模式下，旧版 Canvas 绘制图案无效（使用 wx.createCanvasContext 创建的上下文）

在真机中图片的 referer 丢失

测试结果如下:

使用 WebView 渲染 Image，请求的 header 是：

{

    host: 'xxx',

    connection: 'keep-alive',

    accept: 'image/webp,image/avif,video/*;q=0.8,image/png,image/svg+xml,image/*;q=0.8,*/*;q=0.5',

    'user-agent': 'xxx',

    'accept-language': 'zh-CN,zh-Hans;q=0.9',

    referer: 'https://servicewechat.com/',

    'accept-encoding': 'gzip, deflate'
}

使用 Skyline 渲染 Image，请求的 header 是:

{


    'user-agent': 'Dart/2.16 (dart:io)',

    'accept-encoding': 'gzip',

    host: 'xxx'
}

官方 Demo

可以参考官方Demo学习使用 Skyline 的增强特性，比如 Worklet 动画、手势系统等，但在首次下载编译时，会遇到【交互动画】页面为空的问题，主要原因是该页面是由 TypeScript 写的，编译成 JavaScript 需要开启工具内置的 TypeScript编译插件，需要在project.config.json project.config.json 配置:

setting.useCompilerPlugins: ["typescript"]

参考

• 
  
• 从 WebView 迁移
  
• Skylint：Skyline 小程序迁移工具
  
• miniprogram-demo