经过多次深入讨论和数月的精心研究,我们对 Vue 的根本架构进行了局部调整,并且对易于使用的 uni-app 框架进行了全方位的升级。这些持续不断的努力显著提升了微信平台的表现力,使得性能实现了成倍的增长,同时增强了对于更多 Vue 语法特性的支持与兼容。
uni-app在初创阶段采纳了wepy的解决方案,从而与微信小程序平台达成了迅速的兼容性。对此,我们向美团点评团队表达由衷的感激之情,他们为开源领域所作出的贡献,对于uni-app的早期成长起到了至关重要的作用。
然而,随着开发团队人数的持续增加,以及业务难题的逐步升级,uni-app开始显现出若干问题。在这些问题中,开发者们最为频繁地指出的是对Vue语法的覆盖面不足,以及在特定条件下显现的性能瓶颈。特别是在页面集成复杂组件的情况下,这一性能瓶颈表现得尤为突出。这些问题的根本所在,实际上源于wepy实现过程中所积累下来的历史负担。
/wepy 实现机制的局限性
wepy问世之际,微信小程序的生态系统还未允许自定义组件的使用,这一限制阻碍了开发者进行组件化编程的尝试。为了打破这一束缚,wepy实施了一种创新策略:将开发者编写的Vue组件转换成WXML模板,从而间接达成了组件化开发的目标。在那个时期,这种做法满足了组件复用的强烈需求,并且被广泛认可为一次卓越的技术创新。
但这一方案也带来了一些问题:
在Vue的组件架构里,数据必须被转换成符合Page要求的格式。每当组件中的数据发生改变,路径映射机制便会自动触发,激活Page的setData方法,从而实现全局数据的同步更新。
在页面组件众多且数据量庞大的情况下,任何单个组件的细微调整都可能导致整个页面的全面刷新,进而引发明显的性能损耗。
微信自定义组件的性能优势
随后,微信平台新增了自定义组件的功能,并且允许对这些组件进行局部调整。经过实际操作测试,我们观察到,相较于进行全面的更新,利用自定义组件进行数据更新在性能上表现出了显著的提升。鉴于这一考量,我们决定对 uni-app 框架进行重构工程,旨在全面摒弃 wepy 的实现方法,转而采用微信提供的自定义组件,并以此为核心,重新构建 Vue.js 的组件化开发体系。
性能对比测试
vivo nex手机平台上,我们对既有的以及新开发的架构进行了多次试验,通过对数据的平均化处理,最终得出了以下的研究结论:,
旧框架在复杂页面中的渲染耗时:约 300ms
新框架在相同场景下的渲染耗时:约 150ms
测试数据表明,新框架在复杂页面中的性能提升了一倍左右。
增强 Vue 语法支持
在确保性能得到显著提升的前提下,我们对 uni-app 的编译器进行了全方位的深度优化处理,并且拓宽了其语法支持的边界,这一支持范围涵盖了包括但不限于以下 Vue 语法:
1. v-model
的深度绑定支持
在运用 v-on
指令时,我们能够借助事件修饰符(例如:.stop
和 .prevent
)对事件动作作出适当的调节。
3. v-for
的 key
支持优化
4. 更灵活的组件动态插槽支持
当前支持范围与使用方式
目前,微信平台上的开发工作已全面采用新型框架;与此同时,众多小程序及应用的编译工具却依旧沿用旧版本。若开发者想亲自体验这一新框架,他们可以采取以下几种途径:
1. 使用 vue-cli 创建 uni-app 项目
2. 编译并发布到微信小程序
为确保现有项目不受干扰,uni-app的测试版集成了古典与当代技术框架于一体,且系统默认继续采用古典架构。若开发者希望转用新型编译框架,则需在manifest.json
文件下的mp-weixin
模块内添加相应的配置选项。
{
"mp-weixin": {
"usingCustomComponents": true
}
}
注意事项
若您选择采纳此新引入的 Vue 语法,需留意该语法目前仅限于在 H5 以及微信小程序这两个平台上使用;若您计划在其他平台进行代码编译,那么您将不得不借助条件编译的方法来实现这一目标。
为确保自定义组件的兼容性,我们建议在微信开发者工具内进行操作,并升级基础库至最新版本。
跨端优势
与Taro等框架相较,uni-app在跨平台应用案例的丰富性方面更显优势,它不仅涵盖了微信小程序的开发,更实现了便捷的一键式部署至App、H5等多种小程序平台。此次对微信端进行的性能优化及语法升级,无疑为uni-app的整体竞争力增添了新的动力,进而显著提升了其市场竞争力。
我们深信,这一全新构建的框架将为开发者带来更加顺滑的开发过程和更为卓越的运行表现。面向未来,我们计划持续改进其他平台的编译能力,致力于进一步增强 uni-app 的跨平台性能。
工作时间:8:00-18:00
电子邮件
扫码二维码
获取最新动态