<noframes id="bhrfl"><address id="bhrfl"></address>

    <address id="bhrfl"></address>

    <noframes id="bhrfl"><address id="bhrfl"><th id="bhrfl"></th></address>

    <form id="bhrfl"><th id="bhrfl"><progress id="bhrfl"></progress></th></form>

    <em id="bhrfl"><span id="bhrfl"></span></em>

    全部
    常見問題
    產品動態
    精選推薦

    Skyline 渲染引擎新版本發布

    管理 管理 編輯 刪除

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

    在正式版發布后,有越來越多的小程序使用 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 文檔

    bf24b202311131806388833.png

    1f0e220231113180650516.png

    68478202311131806554524.png

    9b81d202311131807006443.png


    4b78a202311131807088587.png


    新增 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 系列事件,可監聽輸入草稿狀態,包括草稿開始、更新、結束幾個狀態。這在輸入中文的場景就比較有用,如用戶在搜索時,在輸入未完成前可提前聯想,幫助用戶更快完成。

    21600202311131808575084.png

    草稿狀態下、紅色的光標顏色


    性能相關優化

    持續的性能優化是 Skyline 渲染引擎最重要的工作之一,在新版本中,我們解決了在個別場景下發現的一些性能問題。比如,通過調整 Skyline 啟動過程中的時序依賴,提高 JS 腳本執行與 Skyline 引擎啟動的并行度,使 iOS 的啟動耗時降低了近 100ms。

    其次,開啟了按需渲染的 scroll-view 場景下,由于對布局節點的誤標臟,使得在滾動過程中觸發了不必要的布局操作,在一些復雜的情況下會出現掉幀的情況。我們在新版本解決了這一問題。

    此外,由于實現上的原因,在 iOS 下的原生組件(如 video)渲染時會出現發熱現象,在新版本中,我們改用另一種實現方式優先解決了 video 渲染發熱的問題,其它原生組件在后續的版本會逐一解決。

    以上是新版本中 Skyline 帶來的主要變更,還有更多的變更可查閱 變更日志,同時也可以關注后續版本即將支持的 特性狀態。如開發者在 Skyline 開發過程中遇到問題,歡迎在社區發帖咨詢


    原文鏈接:點此查看

    請登錄后查看

    CRMEB-慕白寒窗雪 最后編輯于2023-11-13 18:09:44

    快捷回復
    回復
    回復
    回復({{post_count}}) {{!is_user ? '我的回復' :'全部回復'}}
    排序 默認正序 回復倒序 點贊倒序

    {{item.user_info.nickname ? item.user_info.nickname : item.user_name}} LV.{{ item.user_info.bbs_level }}

    作者 管理員 企業

    {{item.floor}}# 同步到gitee 已同步到gitee {{item.is_suggest == 1? '取消推薦': '推薦'}}
    {{item.is_suggest == 1? '取消推薦': '推薦'}}
    沙發 板凳 地板 {{item.floor}}#
    {{item.user_info.title || '暫無簡介'}}
    附件

    {{itemf.name}}

    {{item.created_at}}  {{item.ip_address}}
    打賞
    已打賞¥{{item.reward_price}}
    {{item.like_count}}
    {{item.showReply ? '取消回復' : '回復'}}
    刪除
    回復
    回復

    {{itemc.user_info.nickname}}

    {{itemc.user_name}}

    回復 {{itemc.comment_user_info.nickname}}

    附件

    {{itemf.name}}

    {{itemc.created_at}}
    打賞
    已打賞¥{{itemc.reward_price}}
    {{itemc.like_count}}
    {{itemc.showReply ? '取消回復' : '回復'}}
    刪除
    回復
    回復
    查看更多
    打賞
    已打賞¥{{reward_price}}
    3897
    {{like_count}}
    {{collect_count}}
    添加回復 ({{post_count}})

    相關推薦

    快速安全登錄

    使用微信掃碼登錄
    {{item.label}} 加精
    {{item.label}} {{item.label}} 板塊推薦 常見問題 產品動態 精選推薦 首頁頭條 首頁動態 首頁推薦
    取 消 確 定
    回復
    回復
    問題:
    問題自動獲取的帖子內容,不準確時需要手動修改. [獲取答案]
    答案:
    提交
    bug 需求 取 消 確 定
    打賞金額
    當前余額:¥{{rewardUserInfo.reward_price}}
    {{item.price}}元
    請輸入 0.1-{{reward_max_price}} 范圍內的數值
    打賞成功
    ¥{{price}}
    完成 確認打賞

    微信登錄/注冊

    切換手機號登錄

    {{ bind_phone ? '綁定手機' : '手機登錄'}}

    {{codeText}}
    切換微信登錄/注冊
    暫不綁定
    亚洲欧美字幕
    CRMEB客服

    CRMEB咨詢熱線 咨詢熱線

    400-8888-794

    微信掃碼咨詢

    CRMEB開源商城下載 源碼下載 CRMEB幫助文檔 幫助文檔
    返回頂部 返回頂部
    CRMEB客服