Rax 小程序月报 202108 期:支持云端一体化应用、支持运行时小程序插件开发、性能提升等

527 阅读4分钟

新功能

1. Rax 小程序云开发一体化应用发布

小程序一体化是 Midway.js 团队与 Rax 团队合作的产品,通过 Midway.js 对一体化的支持与 Rax 对小程序的支持,我们可以为小程序带去更好的研发体验。

现在,你可以使用更贴近现代前端 Web 研发的方式来开发小程序云开发一体化应用。更多使用详情,可以阅读文档小程序一体化

2. Rax 小程序插件工程支持运行时开发

之前 Rax 小程序插件工程只支持使用编译时方案开发页面、组件及 JS API,现在我们也支持了运行时方案。如果你有一系列的关联页面(比如交易链路),并且需要在各种类型的宿主小程序应用(原生 DSL 或者 Rax DSL)里使用,那么就可以使用运行时方案快速开发一个小程序插件。需要注意的是,运行时暂时只支持开发小程序插件页面,更多详细介绍可以查看插件开发与使用文档

3. 编译时小程序支持列表的 key

在编译时小程序下在 x-for 或 map 方法中默认使用满足条件的用户自定义的 key 作为列表的 key,此功能将优化动态列表的性能。使用注意事项参考列表渲染-Key

新特性

1. 性能优化

我们重构了微信端 DOM API 对数据的处理方式,着重提升了长列表的渲染性能。重构后长列表追加数据耗时保持稳定。同时,在所有小程序端,每次更新需要 setData 时数据也经过了一层冗余去除,以降低 setData 的整体耗时。

以微信小程序 IDE 内模拟淘宝订单列表页为例(首次渲染十条订单,下拉加载更多订单),优化前后耗时数据对比(单位: ms)如下表所示:

检测项目优化前优化后
首屏渲染耗时412379
首次新增十条订单更新耗时382255
首次新增十条订单交互耗时4229
第五次新增十条订单更新耗时702334
第五次新增十条订单交互耗时6067

说明: 首屏渲染耗时:指小程序打开页面后,在不做任何交互动作下,完整渲染一个页面的时间。 交互耗时:指一个动作从发起到得到反馈(触发 setData)的时间。 更新耗时:指从数据操作事件触发到对应渲染完成的耗时,包括交互反馈耗时+ setData 耗时。

2. 修复 scroll-view 抖动问题

在上一个版本中,scroll-view 及 rax-scrollview 在使用时会偶发抖动问题,新版本中进行了修复。

3. 百度、快手小程序支持 flex 布局

百度和快手小程序底层的渲染机制会将 template 渲染为真实节点,导致 flex 布局失效。Rax 参考了 Taro 社区用户的处理方式,对 view 和 rax-view 进行了特殊处理,以确保二者能在百度和快手小程序中使用 flex 布局。

生态

1. Uni API 支持百度、快手小程序

作为跨端生态重要的一环,Uni API 于近期正式完成了对百度和快手小程序的支持。更多关于 Uni API 的介绍请查看API 的一码多端方案——Uni API

2. Fusion Mobile 发布微信预览小程序

Fusion Mobile 于近期发布了微信端的预览小程序,现在你可以扫描下方小程序码快速体验 Fusion Mobile 丰富的组件内容了。

Fusion Mobile

业务落地

快手小程序上线

首个 Rax 快手小程序已完成上线,用户可在快手 APP 搜索栏搜索『优酷视频』即可体验:

如果你也有使用 Rax 开发上线的小程序案例,欢迎来这里提交展示:github.com/raxjs/minia…

关于

官网:rax.js.org/ Rax Repo: github.com/alibaba/rax Releases: github.com/raxjs/minia… 问题反馈:github.com/raxjs/minia…

关于我们

Rax 小程序由『淘系前端团队』出品,欢迎加入钉钉群,与我们联系。