文章來源:小程序官方公告
在正式版發布后,有越來越多的小程序使用 Skyline 渲染引擎開發,并且出現了不少體驗接近原生的小程序,其中大量運用了 Skyline 渲染引擎提供的新特性,如手勢系統、自定義路由等。我們也整理了一些案例,發表在「微信開發者」公眾號上,供開發者參考。
同時,過去幾個月,我們得到了開發者諸多反饋,Skyline 渲染引擎通過快速迭代去支持或解決這些需求與反饋?,F在,1.1.0 版本跟隨基礎庫 3.2.0 發布,以下介紹主要變更點:
增強 WXSS 樣式支持度
在之前的版本提供 默認 block 布局 后,從 WebView 遷移過來的成本較之前有較大改善,隨后,適配問題更多在 inline 行為和 position fixed 特性上,為此我們著重做了支持。其中 inline 行為主要是對自定義組件節點本身改為默認 display inline,解決了大部分情況。此外,span / text 組件里嵌套的節點也支持了 display inline-block,可以解決文本與 image / view 內聯的場景。
另外一項重要更新是,box-sizing 可開啟 默認 content-box 盒模型,若沒有設置過 box-sizing 的話,會使得節點寬高更符合預期,從而減少適配點。
Swiper 組件增加大量新交互
現有的 swiper 組件提供的默認交互動畫較為單調,但為了能夠更有效引導用戶注意力,在原生 App 中往往能看到各式各樣的動效,為了方便開發者使用,并借助于 Skyline 的高效渲染能力,我們在基礎庫 3.2.0 起內置了一些常見的交互類型,包括 swiper-item 和指示條的切換動效。同時,若開發者有更高的定制要求,也能基于 swiper 提供的事件并結合 worklet 動畫機制實現。
以下列舉一些支持的類型,更多請查閱 swiper 文檔
新增 draggable-sheet 組件
之前,在 Skyline 下已經能夠實現完美的半屏拖拽交互,這得益于 Skyline 的手勢協商系統。不過,考慮到半屏拖拽交互是比較常見的,同時也是推薦使用的一種交互,在基礎庫 3.2.0 起新增 draggable-sheet 半屏拖拽組件,開發者可以省去手勢協商相關的代碼,使用該組件,并配置容器大小、吸附閾值等即可很方便地實現半屏交互。
同樣地,為了方便開發者使用自定義路由,我們也 內置一些頁面轉場效果,只要一行代碼即可實現。
Scroll-view 組件支持 nested 模式
為了讓一個頁面內能展示更豐富的信息,在界面設計上,頁面中間通常會有個分類導航(如下 demo 所展示),每個分類下都是一個長列表,為了有更好的長列表渲染性能,每個分類都需要用 scroll-view 承載,這就出現了 scroll-view 嵌套 scroll-view 的場景,此時 scroll-view 之間的滾動交替并不能很好地切換。為此,在基礎庫 3.2.0 起 scroll-view 組件新增 nested 模式,以解決上述場景。
Input / Textarea 組件優化
在新版本中修復了大量有關 input / textarea 的問題,也包括支持了 hold-keyboard、auto-height、confirm-hold 等原有特性。同時,還添加了諸多特性:
● 支持 cursor-color 屬性,可設置光標的顏色。相比于 WebView 的版本在安卓下只能設置 default 和 green,Skyline 的版本則對顏色值的支持度更廣泛。
● 支持 selectionchange 事件,可監聽光標移動的事件,并返回光標所在位置。
● 支持 composing 系列事件,可監聽輸入草稿狀態,包括草稿開始、更新、結束幾個狀態。這在輸入中文的場景就比較有用,如用戶在搜索時,在輸入未完成前可提前聯想,幫助用戶更快完成。
草稿狀態下、紅色的光標顏色
性能相關優化
持續的性能優化是 Skyline 渲染引擎最重要的工作之一,在新版本中,我們解決了在個別場景下發現的一些性能問題。比如,通過調整 Skyline 啟動過程中的時序依賴,提高 JS 腳本執行與 Skyline 引擎啟動的并行度,使 iOS 的啟動耗時降低了近 100ms。
其次,開啟了按需渲染的 scroll-view 場景下,由于對布局節點的誤標臟,使得在滾動過程中觸發了不必要的布局操作,在一些復雜的情況下會出現掉幀的情況。我們在新版本解決了這一問題。
此外,由于實現上的原因,在 iOS 下的原生組件(如 video)渲染時會出現發熱現象,在新版本中,我們改用另一種實現方式優先解決了 video 渲染發熱的問題,其它原生組件在后續的版本會逐一解決。
以上是新版本中 Skyline 帶來的主要變更,還有更多的變更可查閱 變更日志,同時也可以關注后續版本即將支持的 特性狀態。如開發者在 Skyline 開發過程中遇到問題,歡迎在社區發帖咨詢
原文鏈接:點此查看