众所周知如今市面上端的形态多种多样,手机、、微信小程序, 支付宝小程序, 快应用等,每一端都是巨大的流量入口,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。但面对目前市面上成熟的小程序第三方框架如何针对自己的需求进行选择也是一个麻烦事,本文针对当前市面上的三大转译框架进行一个综合对比,希望能对大家的技术选择有所帮助,如有哪里不妥的地方希望指正;
.1 { : 0.0 0.0 0.0 0.0; -: ; : 30.0 " "; : #0 } .1 { }
.1 { : 0.0 0.0 0.0 0.0; -: ; : 30.0 " "; : #0 } .1 { }
.1 { : 0.0 0.0 0.0 0.0; -: ; : 30.0 " "; : #0 } .1 { }
.1 { : 0.0 0.0 0.0 0.0; -: ; : 30.0 " "; : #0 } .1 { }
.1 { : 0.0 0.0 0.0 0.0; : 24.0 " "; : #0 } .1 { }
.1 { : 0.0 0.0 0.0 0.0; : 24.0 " "; : #0 } .1 { }
.1 { : 0.0 0.0 0.0 0.0; : 24.0 " "; : #0 } .1 { }
在这里我通过对目前已开源的三种常用小程序框架做一个综合对比, 还有一个叫的基于的小程序转译框架,由于没来的及研究暂不做比较;
腾讯团队开源的一款类语法规范的小程序框架,借鉴了的语法风格和功能特性,支持了的诸多特征,比如父子组件、组件之间的通信、属性计算、监听器、传值、槽分发,还有很多高级的特征支持:混合、拦截器等;发布的第一个版本是2025年12月份,也就是小程序刚刚推出的时候,到目前为止,已经发布了52个版本, 最新版本为1.7.2;
美团团队开源的一款使用 . 微信小程序的前端框架。使用此框架,者将得到完整的 . 体验,同时为 5 和小程序提供了代码复用的能力。在发布后的几天间获得2.7的,上升速度飞起,截至目前为止已经有13.7的;
京东凹凸实验室开源的一款使用 . 微信小程序的前端框架。它采用与 一致的组件化思想,组件生命周期与 保持一致,同时支持使用 语法,让代码具有更丰富的表现力,使用 进行可以获得和 一致的体验。,同时因为使用了的原因所以除了能编译5, 小程序外还可以编译为;
同为规范的和的生命周期和各种方法不尽相同
生命周期基本与原生小程序相同,再此基础上糅合了一些的特性; 对于中的属性,因为与中的使用习惯不一致,非常容易造成误解,这里需要特别强调一下:中的属性只能页面标签的、事件,不能自定义方法,这与中的用法是不一致的。
除了 本身的生命周期外,还兼容了小程序生命周期,这部分生命周期钩子的来源于, 除特殊情况外,不建议使用小程序的生命周期 钩子。
简单示例 与生命周期完全相同在列表渲染上三者也分别有不同的应用方法
当需要循环渲染组件时(类似于通过循环渲染原生的标签),必须使用定义的辅助标签
使用-与一致,只是需要注意一点,嵌套列表渲染,必须指定不同的索引!
的列表循环用法基本与相同,有一点需要注意,在 中, 是会编译成普通的 的执行,每一个 元素,其实会通过 函数创建成一个 对象( ),因此实际上你可以这样写代码 也是完全能渲染的:
但是 中, 会编译成微信小程序模板字符串,因此你不能把 函数生成的模板当做一个数组来处理。当你需要这么做时,应该先处理需要循环的数组,再用处理好的数组来调用 函数。例如上例应该写成:
目前全支持小程序的事件处理器,引入了 . 的虚拟 ,在前文模版中绑定的事件会被挂在到 上,同时 在 上绑定了小程序的事件,并做了相应的映射,所以你在真实点击的时候通过 中 通过事件类型分发到 的事件上,同 在 的机制一样,所以可以做到无损支持。同时还顺便支持了自定义事件和 机制
踩坑注意(官方文档):
事件绑定区别于,根据原生小程序事件提供了语法优化
.1 { : 0.0 0.0 0.0 0.0; : 30.0 " "; : # } .1 { : 30.0 } .2 { } .3 { : # }
绑定事件
="" 替换为 @="",
取消冒泡
原=""替换为@.=""。
捕获监听事件
-:="" 替换为 @.="",
中断捕获监听
-:=“"替换为 @..=""。
元素的事件处理和 元素的很相似。但是有一点语法上的不同:
事件绑定属性的命名采用驼峰式写法,而不是小写。 如果采用 的语法你需要传入一个函数作为事件处理函数,而不是一个字符串 ( 元素的写法)。 例如,传统的微信小程序模板:
中稍稍有点不同:
在 中另一个不同是你不能使用 的方式阻止事件冒泡。你必须明确的使用 。例如,阻止事件冒泡你可以这样写:
拦截器
对进行了二次封装,可以使用.()发起网络请求,支持 化使用。
没有对做特殊优化,与原生相同,可以自己根据需要进行封装
可引用和,目前的脚手架内已经集成了,选择需要即可;
使用
使用
.1 { : 0.0 0.0 0.0 0.0; : 24.0 " "; : #0 } .1 { }.1 { : 0.0 0.0 0.0 0.0; : 24.0 " "; : #0 } .1 { }.1 { : 0.0 0.0 0.0 0.0; : 24.0 " "; : #0 } .1 { }.1 { : 0.0 0.0 0.0 0.0; : 24.0 " "; : #0 } .1 { }.1 { : 0.0 0.0 0.0 0.0; : 24.0 " "; : #0 } .1 { }.1 { : 0.0 0.0 0.0 0.0; : 24.0 " "; : #0 } .1 { }.1 { : 0.0 0.0 0.0 0.0; -: ; : 33.0 " "; : #0 } .1 { }