# 環(huán)境準(zhǔn)備

Skyline 具體支持版本如下：

• 微信安卓客戶端 8.0.33 或以上版本（對(duì)應(yīng)基礎(chǔ)庫為 2.30.4 或以上版本）
• 微信 iOS 客戶端 8.0.34 或以上版本（對(duì)應(yīng)基礎(chǔ)庫為 2.31.1 或以上版本）
• 開發(fā)者工具 Stable 1.06.2307260 或以上版本（建議使用 Nightly 最新版）

掃碼快速確認(rèn)環(huán)境是否正確

# 使用開發(fā)者工具調(diào)試

開發(fā)者工具提供了對(duì)齊移動(dòng)端的 Skyline 渲染引擎，支持 WXML 調(diào)試、 WXSS 樣式錯(cuò)誤提示、新增的特性等

按以下步驟切換到 Skyline 模式：

1. 在 app.json 或 page.json 中配上 renderer: skyline，并按下一節(jié)添加好配置項(xiàng)，或者按開發(fā)者工具的提示逐個(gè)加上配置項(xiàng)
2. 確保右上角 > 詳情 > 本地設(shè)置里的 開啟 Skyline 渲染調(diào)試 選項(xiàng)被勾選上
3. 使用 worklet 動(dòng)畫特性時(shí)，確保右上角 > 詳情 > 本地設(shè)置里的 編譯 worklet 代碼 選項(xiàng)被勾選上 (代碼包體積會(huì)少量增加)
4. 調(diào)試基礎(chǔ)庫切到 3.0.0 或以上版本

若切換期間出現(xiàn)報(bào)錯(cuò)、白屏等問題，可嘗試重啟開發(fā)者工具解決

已知問題：熱重載暫未支持

此時(shí)，在模擬器左上角能夠看到當(dāng)前的 renderer 為 skyline，見下圖

# 開始遷移

遷移到 Skyline，無需大動(dòng)干弋，我們保持了上層框架的語法、接口基本不變，只需要做局部的調(diào)整，主要是加強(qiáng)了 WXSS 樣式、內(nèi)置組件及部分特性的約束，基本流程如下：

1. 在 app.json 加上如下必要配置項(xiàng)，若只想在某些頁面開啟，可將 renderer componentFramework 配置在頁面 json 中

"lazyCodeLoading": "requiredComponents",
"renderer": "skyline",
"componentFramework": "glass-easel",
"rendererOptions": {
  "skyline": {
    "defaultDisplayBlock": true,
    "defaultContentBox": true,
    "tagNameStyleIsolation": "legacy",
    "enableScrollViewAutoSize": true,
    "keyframeStyleIsolation": "legacy"
  }
}

2. 進(jìn)行組件與 WXSS 適配，參考 Skyline 基礎(chǔ)組件支持與差異、Skyline WXSS 樣式支持與差異

參考代碼模板

按照指引適配后，可以保證在微信低版本或 PC 端 fallback 到 WebView 渲染時(shí)，也能表現(xiàn)正確

更多詳細(xì)指引參考 最佳實(shí)踐 和 兼容建議

# 在真機(jī)上預(yù)覽效果

由于 Skyline 默認(rèn)接入 We 分析的 AB 實(shí)驗(yàn)，未配置的情況下，頁面渲染仍為 WebView 引擎，可通過以下方式正確切到 Skyline 渲染

1. 配置 We 分析 AB 實(shí)驗(yàn)，加上白名單，操作步驟詳見下節(jié)
2. 關(guān)閉 We 分析 AB 實(shí)驗(yàn)，默認(rèn)啟用 Skyline 渲染，配置方式詳見此處第 2 點(diǎn)
3. 通過快捷切換入口，強(qiáng)切到 Skyline 渲染，操作步驟詳見下節(jié)

# 配置 We 分析 AB 實(shí)驗(yàn)

遷移完 Skyline 之后，為了讓開發(fā)者能夠針對(duì) Skyline 逐步灰度放量，并且與 WebView 對(duì)比性能表現(xiàn)，我們?cè)?We 分析 提供了 AB 實(shí)驗(yàn)機(jī)制。

因此，需要在 We 分析 配置之后，小程序用戶才可以命中 Skyline 渲染，需要注意的是，小程序開發(fā)者也會(huì)受 AB 實(shí)驗(yàn)影響。操作步驟如下：

首先，進(jìn)入 We 分析，在 AB 實(shí)驗(yàn) > 實(shí)驗(yàn)看板，點(diǎn)擊“新建實(shí)驗(yàn)”

接著，實(shí)驗(yàn)類型選擇 小程序基礎(chǔ)庫實(shí)驗(yàn)，然后按需選擇實(shí)驗(yàn)層級(jí)并分配流量，如果是小范圍調(diào)試，可分配 0% 流量，并在 Skyline 渲染 的實(shí)驗(yàn)分組里填上測(cè)試微信號(hào)

最后，創(chuàng)建實(shí)驗(yàn)即可生效。后續(xù)經(jīng) AB 實(shí)驗(yàn)驗(yàn)證穩(wěn)定后，需在 We 分析上先關(guān)閉實(shí)驗(yàn)再選擇 Skyline 全量

點(diǎn)擊查看更多 We 分析 AB 實(shí)驗(yàn)相關(guān)內(nèi)容

# 快捷切換入口

考慮到本地調(diào)試時(shí)，配置 AB 實(shí)驗(yàn)會(huì)稍微繁瑣一些，并且也會(huì)需要對(duì)比 WebView 的表現(xiàn)，我們提供了快捷切換渲染引擎的入口。

該入口只對(duì)開發(fā)版/體驗(yàn)版小程序生效，入口為：小程序菜單 > 開發(fā)調(diào)試 > Switch Render，會(huì)出現(xiàn)三個(gè)選項(xiàng)，說明如下：

• Auto ：跟隨 AB 實(shí)驗(yàn)，即對(duì)齊小程序正式用戶的表現(xiàn)
• WebView ：強(qiáng)制切為 WebView 渲染。強(qiáng)切后，開發(fā)版、體驗(yàn)版、正式版均為 WebView 渲染，需手動(dòng)切到 Auto 才能恢復(fù)
• Skyline ：若當(dāng)前頁面已遷移到 Skyline，則強(qiáng)制切為 Skyline 渲染。強(qiáng)切后，開發(fā)版、體驗(yàn)版、正式版均為 Skyline 渲染，需手動(dòng)切到 Auto 才能恢復(fù)

# 如何識(shí)別當(dāng)前頁面是否使用 Skyline

• 通過客戶端菜單：

  打開開發(fā)版/體驗(yàn)版小程序，點(diǎn)擊菜單即可查看當(dāng)前頁面是否使用 Skyline 渲染。

• 通過 vConsole 按鈕的右上角的紅底文案識(shí)別

• vConsole 的路由日志

  路由日志中會(huì)包含頁面路由的目標(biāo)頁面、路由類型和目標(biāo)頁面的渲染后端。

  一個(gè)可能的日志形如：On app route: pages/index/index (navigateTo), renderer: skyline，代表通過 navigateTo 跳轉(zhuǎn)到了 pages/index/index，渲染后端為 skyline

• 通過接口判斷

  頁面和自定義組件示例上有屬性 renderer，可以用于判斷當(dāng)前組件的實(shí)際渲染后端，如：

  Page({
    onLoad() {
      console.log(this.renderer)
    }
  })