1111author:
1212 nick: yuche
1313 github_name: yuche
14- date: 2019-02-28 23:09:41
14+ date: 2019-03-12 23:09:41
1515wechat:
1616 share_cover: https://img10.360buyimg.com/img/jfs/t1/22405/1/8604/16989/5c77fb25E865fae31/594259c936ac1e12.jpg
1717 share_title: 小程序框架全面测评
@@ -29,13 +29,13 @@ wechat:
2929## 多端
3030笔者以为,现在流行的多端框架可以大致分为三类:
3131
32- ### 1. 全包型
32+ #### 1. 全包型
3333
3434这类框架最大的特点就是从底层的渲染引擎、布局引擎,到中层的 DSL,再到上层的框架全部由自己开发,代表框架是 Qt 和 Flutter。这类框架优点非常明显:性能(的上限)高;各平台渲染结果一致。缺点也非常明显:需要完全重新学习 DSL(QML/Dart),以及难以适配中国特色的端:小程序。
3535
3636这类框架是最原始也是最纯正的的多端开发框架,由于底层到上层每个环节都掌握在自己手里,也能最大可能地去保证开发和跨端体验一致。但它们的框架研发成本巨大,渲染引擎、布局引擎、DSL、上层框架每个部分都需要大量人力开发维护。
3737
38- ### 2. Web 技术型
38+ #### 2. Web 技术型
3939
4040这类框架把 Web 技术(JavaScript,CSS)带到移动开发中,自研布局引擎处理 CSS,使用 JavaScript 写业务逻辑,使用流行的前端框架作为 DSL,各端分别使用各自的原生组件渲染。代表框架是 React Native 和 Weex,这样做的优点有:
4141
@@ -48,7 +48,7 @@ wechat:
48481 . 交互复杂时难以写出高性能的代码,这类框架的设计就必然导致 ` JS ` 和 ` Native ` 之间需要通信,类似于手势操作这样频繁地触发通信就很可能使得 UI 无法在 16ms 内及时绘制。React Native 有一些声明式的组件可以避免这个问题,但声明式的写法很难满足复杂交互的需求。
49492 . 由于没有渲染引擎,使用各端的原生组件渲染,相同代码渲染的一致性没有第一种高。
5050
51- ### 3. JavaScript 编译型
51+ #### 3. JavaScript 编译型
5252
5353这类框架就是我们这篇文章的主角们:` Taro ` 、` WePY ` 、` uni-app ` 、 ` mpvue ` 、 ` chameleon ` ,它们的原理也都大同小异:先以 JavaScript 作为基础选定一个 DSL 框架,以这个 DSL 框架为标准在各端分别编译为不同的代码,各端分别有一个运行时框架或兼容组件库保证代码正确运行。
5454
@@ -65,7 +65,7 @@ wechat:
6565## 生态
6666以下内容均以各框架现在(2019 年 3 月 11日)已发布稳定版为标准进行讨论。
6767
68- ### 开发工具
68+ #### 开发工具
6969
7070就开发工具而言 ` uni-app ` 应该是一骑绝尘,它的文档内容最为翔实丰富,还自带了 IDE 图形化开发工具,鼠标点点点就能编译测试发布。
7171
@@ -82,7 +82,7 @@ CSS 方面,所有框架均支持 `SASS`、`LESS`、`Stylus`,Taro 则多一
8282 ![ 开发工具] ( https://storage.jd.com/taro-resource/develop_tools.png )
8383
8484
85- ### 多端支持度
85+ #### 多端支持度
8686
8787只从支持端的数量来看,` Taro ` 和 ` uni-app ` 以六端略微领先(移动端、H5、微信小程序、百度小程序、支付宝小程序、头条小程序),` chameleon ` 少了头条小程序紧随其后。
8888
@@ -101,7 +101,7 @@ H5 方面,`chameleon` 同样是由多态协议实现支持,`uni-app` 和 `Ta
101101![ 多端支持] ( https://storage.jd.com/taro-resource/duoduan.png )
102102
103103
104- ### 组件库/工具库/demo
104+ #### 组件库/工具库/demo
105105
106106作为开源时间最长的框架,` WePY ` 不管从 Demo,组件库数量 ,工具库来看都占有一定优势。
107107
@@ -117,7 +117,7 @@ H5 方面,`chameleon` 同样是由多态协议实现支持,`uni-app` 和 `Ta
117117
118118![ 组件库/工具库/demo] ( https://storage.jd.com/taro-resource/component.png )
119119
120- ### 接入成本
120+ #### 接入成本
121121
122122接入成本有两个方面:
123123
@@ -131,7 +131,7 @@ H5 方面,`chameleon` 同样是由多态协议实现支持,`uni-app` 和 `Ta
131131
132132` Taro ` > ` mpvue ` 、 ` uni-app ` > ` WePY ` > ` chameleon `
133133
134- ### 流行度
134+ #### 流行度
135135
136136从 GitHub 的 star 来看,` mpvue ` 、` Taro ` 、` WePY ` 的差距非常小。从 NPM 和 CNPM 的 CLI 工具下载量来看,是 Taro(3k/week)> mpvue (2k/w) > WePY (1k/w)。但发布时间也刚好反过来。笔者估计三家的流行程度和案例都差不太多。
137137
@@ -146,7 +146,7 @@ H5 方面,`chameleon` 同样是由多态协议实现支持,`uni-app` 和 `Ta
146146
147147
148148
149- ### 开源建设
149+ #### 开源建设
150150
151151一个开源作品能走多远是由框架维护团队和第三方开发者共同决定的。虽然开源建设不能具体地量化,但依然是衡量一个框架/库生命力的非常重要的标准。
152152
0 commit comments