likes
comments
collection
share

如何将微信小程序从WebView迁移到Skyline

作者站长头像
站长
· 阅读数 10

什么是 Skyline

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

具体可以查阅官网介绍

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

  1. 调试基础库切到 2.30.4 或以上版本

  2. 确保右上角 > 详情 > 本地设置里的 开启 Skyline 渲染调试、启用独立域进行调试 选项被勾选上

  3. 确保右上角 > 详情 > 本地设置里的 将 JS 编译成 ES5 选项被勾选上

使用 skylint 工具迁移


npx skylint

如何将微信小程序从WebView迁移到Skyline

如何将微信小程序从WebView迁移到Skyline

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

如何将微信小程序从WebView迁移到Skyline

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

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

  1. @position-fixed 不支持 position: fixed：如果你根据不同 renderer 兼容，则会导致该提示一直存在

  2. @no-pseudo-element 不支持伪元素: 目前对已经支持的 ::before 和 ::after 也会进行提示

手动迁移

在 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 渲染

如何将微信小程序从WebView迁移到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"]

参考