大家好，我是Hub哥，本期又到了分享的时间了。本期我们来聊聊多终端统一框架。

目前，市场上有多种形式的高端。 Web、App、微信小程序等各种终端非常受欢迎。当业务需求同时要求不同终端上的性能时，为不同终端编写多套代码的成本显然是非常高的。根本原因是传统的Web开发受到浏览器能力的限制太大。特别是各个浏览器的不同实现方式、离线能力以及性能缺陷，使得应用程序很难满足用户体验需求。

“跨端”是前端界的一个流行术语。跨终端框架本质上是以一种形式为业务开发提供终端能力。虽然所有终端能力都可以不受限制地使用，但业务开发人员只能编写一套代码。这样既可以满足性能要求，又可以降低开发成本。成本。

但纵观整个社区的跨端开发框架，仍然存在两个主要问题：

1.跨端框架对于前端开发者来说难度更大。如果没有移动端开发能力，很难上手；

2、平台差异较大，同一功能必须针对不同平台使用不同的接口编写大量的平台相关代码。

出现上述问题的原因在于，目前业界的跨端框架大多是由终端开发人员开发的，并不是从前端开发人员的角度来开发的，因此对于前端开发人员来说不够友好。

于是，市面上出现了很多跨端技术：uni-app、WePY、

本文主要介绍国内几大厂商推出的解决方案：、、、Taro、Weex

腾讯跨终端框架-

当前星级：4.5k

：

去年2月20日，腾讯QQ浏览器部门推出开源跨终端框架。在腾讯内部，已运行3年，各BG上线业务共计18个，日均PV过亿，已建立起完整的生态系统。与其他跨端框架相比，它对前端开发人员更加友好：紧密遵循W3C标准，遵守Web开发的各种规则，使用Java作为开发语言，同时支持主流前端框架和Vue 。

实现了类似的引擎透传架构（图中的架构），将C++开发的模块直接插入到JS引擎中运行，绕过了前端通信编解码的开销，有效提升了前端之间的通信性能。 JS前端代码和终端。在此基础上正在实现高性能自绘，提供更强的性能和更好的用户体验。

- 语法在一定程度上更接近终端底层。同时，通过官方提供的--web组件库，也可以轻松生成Web版的网页。

特征：

项目结构：

示例：全民K歌：+ - + --web

滴滴跨端框架-

当前星级：7.3k

：

（简称CML）中文名，中文含义：变色龙，意为像变色龙一样能够适应不同环境的跨端整体解决方案。提供工程设计、丰富的基础库、独创的多态协议、标准的MVVM架构开发模型，统一各种终端。

上图中各层的定义如下：

支持的平台：

web、微信小程序、支付宝小程序、百度小程序、（weex）、ios（weex）、小程序、字节跳动小程序、快应用，持续更新

代码示例：

{{}}{{}}

{data = {: ""} = {: { this..('')..join('')}} {} {}} 新 ;

Web 编程使用 HTML + CSS + JS 的组合。出于同样的原因，在Web编程中使用CML+CMSS+JS。

JS语法用于处理页面的逻辑层。与普通网页编程相比，本项目的目标是定义一个标准的MVVM框架，该框架具有完整的生命周期、双向数据绑定等优秀特性，可以快速提高开发速度并减少维护。成本。

CML()用于描述页面的结构。我们知道HTML有一套标准的语义标签，比如文本、按钮等。CML也有一套标准的标签。我们将标签定义为组件，CML为用户提供了一系列组件。同时，CML还支持模板语法，例如条件渲染、列表渲染、数据绑定等。同时CML支持使用类似VUE的语法，让您更快上手。

CMSS()是一种用于描述CML页面结构的样式语言。它具有CSS的大部分功能，还可以支持各种CSS预处理语言。

特征：

1、多端高度一致

深入编程语言维度保证一致性，包括高度统一的框架、生命周期、内置组件、事件通信、路由、界面布局、接口单元、组件作用域、组件通信等。

2. 组件

使用CML编写页面时，它提供了丰富的组件供开发人员使用。内置有cc-c-等组件，涵盖了开发工作中常用的组件。

3.API

为了方便开发者高效开发，提供了丰富的API库，发布为npm -api，其中包括网络请求、数据存储、地理位置、系统信息、动画等方法。

4.免费定制

基于多态协议，任何API和组件都可以自由扩展，不严重依赖框架更新。各端原有项目中已经积累了大量的组件，也可以直接引入到跨端项目中使用，可以充分隔离各端的差异化实现。

5. 智能规格验证

代码规范验证。当出现不符合规范要求的代码时，编辑器会显示智能提示，无需对代码的每一端进行一一调试。同时命令行启动窗口也会提示代码的错误位置。

6. 渐进式跨端

不仅可以使用cml开发页面，还可以使用cml开发多端可复用组件并直接在原项目中调用。

京东跨端框架-Taro

当前星级：24.5k

：

Taro是一个遵循语法规范的多端统一开发框架，由京东-傲路实验室打造。

一套代码，通过Taro的编译工具，将源码编译成可以在不同终端（微信小程序、H5、App端等）运行的代码。同时，Taro 还提供开箱即用的语法检测和自动补全功能，有效提升了开发体验和效率。

与微信自己的小程序框架不同，Taro 积极拥抱社区现有的现代开发流程，包括但不限于：

Taro受到微信小程序编译过程的启发，开发了自研的打包机制，不断调用AST，因此代码分析的速度得到了很大的提升。 2015年的15英寸RMBP只需要大约15秒即可编译数百个组件。

在 Taro 中，你不需要区分什么是 App 组件、什么是 Page 组件、什么是小程序之类的组件。 Taro 都是组件，它们的生命周期完全一致。可以说，一旦掌握了它，就几乎掌握了太郎。还使用声明性 JSX 语法。与字符串模板语法相比，JSX 在处理微妙复杂的需求时更加得心应手。

//一个典型的Taro组件

芋头，{ } 来自 '@/taro' { 查看，} 来自 '@/'

{ （） {（）这。 = {: '家',列表: [1, 2, 3]}}

{} {} (, ) {} (, ) {}e (, ) { true}

添加 = (e) => {// }

{ { 列表，} = 这个。 ({}{list.map(item => { ({item})})}添加)}}

Taro已经有一个比较完整的IDE了：

不正确的语法会触发错误并给出错误信息和文档地址描述：

自动完成功能：

阿里巴巴无线前端-Weex

当前星级：17.6k

：

Weex 是阿里巴巴开源的一套跨平台开发解决方案，用于构建高性能、可扩展的原生应用程序。

2016年阿里巴巴双十一，Weex在阿里巴巴双十一场馆的覆盖率接近99%，页面数量接近2000个，覆盖了包括主会场、分会场、分会场在内的几乎所有阿里巴巴场馆。人群聚集的场所。双十一场馆生意。阿里巴巴双十一主会场即时打开率为97%，所有会场页面达到93%。

特征：

1.页面的开发目前支持Rax和Vue

Weex 不仅支持 Vue 和 Rax。您还可以将您喜欢的前端框架集成到 Weex 中。有一个扩展前端框架的文档描述了如何实现它，但是这个过程仍然非常复杂和棘手。您需要了解 js 通信以及本机渲染引擎的许多底层细节。

2、一次编写，三个终端运行（iOS、前端）

前提是weex sdk是集成的。另外，视觉表现也不可能完全相同。有些会有一些差异，需要进行调整。因此，在编写weex页面时，如果支持三个终端，则需要在三个终端上都进行自检。

3. 沟通

UI通过组件绘制，Java逻辑运行在JS引擎中，两者通过

4.支持扩展

您可以将UI组件封装到其中，并将逻辑代码封装到其中。所以可以在weex中使用。这里的UI组件包括 、 等，这里的逻辑代码包括 、等。

5. 查看

每个weex页面都会被打包成一个js文件，weex sdk将js文件渲染成视图

weex打包后，每个页面都被打包成一个独立的js文件。 Weex sdk 会解析 js，将 UI 部分绘制成视图，然后将视图的事件绑定到 js 代码。

6、调试

可以调试 JS 代码，weex 支持预览页面 dom 节点

7. 页面开发

Weex 提供了开发中页面的便捷预览

8.即时预览

Weex 和 都提供热功能，你可以一边改代码一边在手机上看效果

9. 包装

weex默认生成的js只包含业务js代码，体积较小。基本的js库包含在weex sdk中。

10. 异步

weex 仅支持

例子：

代码：

//......

。 = {数据:{:'',:''},:{: () {this. = .;},: () {这个。 = .;},//......}}

写在最后

目前大家可能会有一些疑问，比如未来跨端技术会取代原生开发吗？对于这个一直争议不断的问题，笔者认为，从目前的发展趋势来看，跨端的灵活性和低成本还没有被取代。大多数应用场景是在一些快速变化的常规业务开发中，而原生开发中，比如定制视频渲染、复杂文本阅读器、高响应复杂动画、各种传感器如蓝牙、陀螺仪、距离感应等。这些都与交互体验的精致度，依然可以原生开发。处理。因此，与其说是互相替代，不如说两者相辅相成，互相配合，达到最高效率，这才是正确的操作。

跨端技术非常多，每种技术都有自己的优点和缺点。不能用一句话来判断谁好谁坏。至于选择哪一款，就要考虑自己系统现有的架构以及开发者的配置。那么哪一款适合您呢？选择标准。相信未来类似的框架会越来越多，越来越成熟，学习成本也会越来越低。目前国内的这些跨端开源框架，你更喜欢哪一个呢？

如果您觉得文章对您有用，请点赞、阅读并分享。