评论

Skyline 渲染引擎 1.1.0 版本发布

Skyline 是微信小程序推出的一个类原生的渲染引擎,其使用更精简高效的渲染管线,性能比 WebView 更优异,并且带来诸多增强特性,如 Worklet 动画、手势系统、自定义路由、共享元素等

在正式版发布后,有越来越多的小程序使用 Skyline 渲染引擎开发,并且出现了不少体验接近原生的小程序,其中大量运用了 Skyline 渲染引擎提供的新特性,如手势系统、自定义路由等。我们也整理了一些案例,发表在「微信开发者」公众号上,供开发者参考。

同时,过去几个月,我们得到了开发者诸多反馈,Skyline 渲染引擎通过快速迭代去支持或解决这些需求与反馈。现在,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 开发过程中遇到问题,欢迎在社区发帖咨询。



最后一次编辑于  02-19  
点赞 5
收藏
评论

12 个评论

  • APP+小程序+网站系统定制开发
    APP+小程序+网站系统定制开发
    发表于移动端
    2023-11-10
    这个框架非常不错,我用它重构了SaaS商城小程序,很顺滑,性能大大提升!
    2023-11-10
    赞同 2
    回复
  • Mr.Hope
    Mr.Hope
    发表于移动端
    2023-11-13
    有计划支持min-width max-width的media query么? 现有产品涉及到响应式布局,支持iPad和PC,因为这个原因现在迁移不过去。 写很多套骨架,用绑定屏幕宽度的变量,换的方式,太不好维护了。
    2023-11-13
    赞同 1
    回复 4
    • 黄思程
      黄思程
      2023-11-13
      这个应该迟一点再考虑,目前 Skyline 还不支持 PC,可以单独写个针对的 PC 的 media query,这样 PC 跑 webview 能生效,移动端不识别不会生效,也能兼容
      2023-11-13
      回复
    • Mr.Hope
      Mr.Hope
      01-04回复黄思程
      感谢回复,不只是PC,产品还支持了 iPad,实际上一套针对移动设计的布局,700px以上通常就会很丑了。
      希望能够尽快支持一下吧。
      01-04
      回复
    • 黄思程
      黄思程
      01-12
      好的,我们排期搞一搞
      01-12
      回复
    • Mr.Hope
      Mr.Hope
      发表于小程序端
      1天前回复黄思程

      大哥,这个有进展么

      1天前
      回复
  • 929756265
    929756265
    05-08

    对 图表库的支持咋样涅

    05-08
    赞同
    回复
  • 忽忽
    忽忽
    01-09

    能否先支持 下 map的 customCallout, 一个问题都两年了,还没解决。都没有清单吗?

    01-09
    赞同
    回复 1
    • 黄思程
      黄思程
      01-12
      这个支持了
      01-12
      回复
  • Api调用师
    Api调用师
    2023-11-13

    视频怎么还没了呢

    2023-11-13
    赞同
    回复
  • Jianbo
    Jianbo
    2023-11-10

    期待。

    2023-11-10
    赞同
    回复
  • 专讲冷知识
    专讲冷知识
    2023-11-10

    这个 input的caret光标真实用 

    2023-11-10
    赞同
    回复
  • 大山
    大山
    2023-11-10

    持续关注,体验一下。

    2023-11-10
    赞同
    回复
  • Hlxuan.
    Hlxuan.
    2023-11-10

    👍👍👍

    2023-11-10
    赞同
    回复
  • 清风
    清风
    2023-11-10

    希望越来越好


    2023-11-10
    赞同
    回复

正在加载...

登录 后发表内容