文章來源：小程序官方公告

在正式版發(fā)布后，有越來越多的小程序使用 Skyline 渲染引擎開發(fā)，并且出現(xiàn)了不少體驗(yàn)接近原生的小程序，其中大量運(yùn)用了 Skyline 渲染引擎提供的新特性，如手勢系統(tǒng)、自定義路由等。我們也整理了一些案例，發(fā)表在「微信開發(fā)者」公眾號上，供開發(fā)者參考。

同時(shí)，過去幾個(gè)月，我們得到了開發(fā)者諸多反饋，Skyline 渲染引擎通過快速迭代去支持或解決這些需求與反饋?，F(xiàn)在，1.1.0 版本跟隨基礎(chǔ)庫 3.2.0 發(fā)布，以下介紹主要變更點(diǎn)：

增強(qiáng) WXSS 樣式支持度

在之前的版本提供 默認(rèn) block 布局 后，從 WebView 遷移過來的成本較之前有較大改善，隨后，適配問題更多在 inline 行為和 position fixed 特性上，為此我們著重做了支持。其中 inline 行為主要是對自定義組件節(jié)點(diǎn)本身改為默認(rèn) display inline，解決了大部分情況。此外，span / text 組件里嵌套的節(jié)點(diǎn)也支持了 display inline-block，可以解決文本與 image / view 內(nèi)聯(lián)的場景。

另外一項(xiàng)重要更新是，box-sizing 可開啟 默認(rèn) content-box 盒模型，若沒有設(shè)置過 box-sizing 的話，會使得節(jié)點(diǎn)寬高更符合預(yù)期，從而減少適配點(diǎn)。

Swiper 組件增加大量新交互

現(xiàn)有的 swiper 組件提供的默認(rèn)交互動畫較為單調(diào)，但為了能夠更有效引導(dǎo)用戶注意力，在原生 App 中往往能看到各式各樣的動效，為了方便開發(fā)者使用，并借助于 Skyline 的高效渲染能力，我們在基礎(chǔ)庫 3.2.0 起內(nèi)置了一些常見的交互類型，包括 swiper-item 和指示條的切換動效。同時(shí)，若開發(fā)者有更高的定制要求，也能基于 swiper 提供的事件并結(jié)合 worklet 動畫機(jī)制實(shí)現(xiàn)。

以下列舉一些支持的類型，更多請查閱 swiper 文檔

新增 draggable-sheet 組件

之前，在 Skyline 下已經(jīng)能夠?qū)崿F(xiàn)完美的半屏拖拽交互，這得益于 Skyline 的手勢協(xié)商系統(tǒng)。不過，考慮到半屏拖拽交互是比較常見的，同時(shí)也是推薦使用的一種交互，在基礎(chǔ)庫 3.2.0 起新增 draggable-sheet 半屏拖拽組件，開發(fā)者可以省去手勢協(xié)商相關(guān)的代碼，使用該組件，并配置容器大小、吸附閾值等即可很方便地實(shí)現(xiàn)半屏交互。

同樣地，為了方便開發(fā)者使用自定義路由，我們也 內(nèi)置一些頁面轉(zhuǎn)場效果，只要一行代碼即可實(shí)現(xiàn)。

Scroll-view 組件支持 nested 模式

為了讓一個(gè)頁面內(nèi)能展示更豐富的信息，在界面設(shè)計(jì)上，頁面中間通常會有個(gè)分類導(dǎo)航（如下 demo 所展示），每個(gè)分類下都是一個(gè)長列表，為了有更好的長列表渲染性能，每個(gè)分類都需要用 scroll-view 承載，這就出現(xiàn)了 scroll-view 嵌套 scroll-view 的場景，此時(shí) scroll-view 之間的滾動交替并不能很好地切換。為此，在基礎(chǔ)庫 3.2.0 起 scroll-view 組件新增 nested 模式，以解決上述場景。

Input / Textarea 組件優(yōu)化

在新版本中修復(fù)了大量有關(guān) input / textarea 的問題，也包括支持了 hold-keyboard、auto-height、confirm-hold 等原有特性。同時(shí)，還添加了諸多特性：

● 支持 cursor-color 屬性，可設(shè)置光標(biāo)的顏色。相比于 WebView 的版本在安卓下只能設(shè)置 default 和 green，Skyline 的版本則對顏色值的支持度更廣泛。

● 支持 selectionchange 事件，可監(jiān)聽光標(biāo)移動的事件，并返回光標(biāo)所在位置。

● 支持 composing 系列事件，可監(jiān)聽輸入草稿狀態(tài)，包括草稿開始、更新、結(jié)束幾個(gè)狀態(tài)。這在輸入中文的場景就比較有用，如用戶在搜索時(shí)，在輸入未完成前可提前聯(lián)想，幫助用戶更快完成。

草稿狀態(tài)下、紅色的光標(biāo)顏色

性能相關(guān)優(yōu)化

持續(xù)的性能優(yōu)化是 Skyline 渲染引擎最重要的工作之一，在新版本中，我們解決了在個(gè)別場景下發(fā)現(xiàn)的一些性能問題。比如，通過調(diào)整 Skyline 啟動過程中的時(shí)序依賴，提高 JS 腳本執(zhí)行與 Skyline 引擎啟動的并行度，使 iOS 的啟動耗時(shí)降低了近 100ms。

其次，開啟了按需渲染的 scroll-view 場景下，由于對布局節(jié)點(diǎn)的誤標(biāo)臟，使得在滾動過程中觸發(fā)了不必要的布局操作，在一些復(fù)雜的情況下會出現(xiàn)掉幀的情況。我們在新版本解決了這一問題。

此外，由于實(shí)現(xiàn)上的原因，在 iOS 下的原生組件（如 video）渲染時(shí)會出現(xiàn)發(fā)熱現(xiàn)象，在新版本中，我們改用另一種實(shí)現(xiàn)方式優(yōu)先解決了 video 渲染發(fā)熱的問題，其它原生組件在后續(xù)的版本會逐一解決。

以上是新版本中 Skyline 帶來的主要變更，還有更多的變更可查閱 變更日志，同時(shí)也可以關(guān)注后續(xù)版本即將支持的 特性狀態(tài)。如開發(fā)者在 Skyline 開發(fā)過程中遇到問題，歡迎在社區(qū)發(fā)帖咨詢

原文鏈接：點(diǎn)此查看