跨平台开发模式盘点

一、说明

手机App的开发方式进入跨平台时代，但目前跨平台的开发方式很多，以至于App开发爱好者在进行技术选型时感到很迷茫，在此对App开发常见的几种方案做一个分析，包括原生开发、混合App、ReactNative、Weex、Flutter、uniapp等，希望能通过此文找到最适合我们项目的开发语言。

内容仅为自己学习过程中的浅薄心得，欢迎指正。

本文主要从“原生开发”和“跨平台技术”两种方式介绍，具体内容请见下文。

二、原生开发

原生应用程序是指某一个移动平台（比如iOS或安卓）所特有的应用，使用相应平台支持的开发工具和语言，并直接调用系统提供的SDK API。比如Android原生应用就是指使用Java或Kotlin语言直接调用Android SDK开发的应用程序；而iOS原生应用就是指通过Objective-C或Swift语言直接调用iOS SDK开发的应用程序。

技术类型	优势	缺陷	代表平台
原生开发	可访问平台全部功能（GPS、摄像头）； 第三方SDK直接支持；可通过webView与网页交互； 速度快、性能高、可以实现复杂动画及绘制，整体用户体验好。	平台特定，开发成本高； 不同平台必须维护不同代码，人力成本随之变大； 内容固定，动态化弱，大多数情况下，有新功能更新时只能发版。	Android、iOS

三、跨平台技术

传统的纯原生开发已经不能满足需求。主要表现在如下两个方面：

1. 业务需求变化快，开发成本变大。由于原生开发一般都要维护 Android、iOS两个

开发团队，版本迭代时，无论人力成本还是测试成本都会变大。

1. 动态化内容需求增大。当需求发生变化时，纯原生应用需要通过版本升级来更新内容，但应用上架、审核是需要周期的，这个周期对高速变化的互联网时代来说是很难接受的，所以，对应用动态化(不发版也可以更新应用内容)的需求就变得迫在眉睫了。

3.1 跨平台技术演进

3.2 跨平台技术的分类

根据跨平台技术的原理，主要可分为如下三类：

1. H5 + 原生( Cordova、  Tonic、微信小程序)；
2. Javascript开发+原生渲染( React Native、Weex)；
3. 自绘UI+原生(Flutter、 QT Mobile)。

3.3 H5 + 原生混合开发

这类框架的主要原理是将APP需要动态变动的一部分内容通过H5来实现，通过原生的网页加载控件 Webview( Android)或 WK Webview(iOS)来加载。这样，H5部分就可以随时改变而不用发版，动态化需求得到满足。同时，由于H5代码只需要一次开发，就能同时在 Android和OS两个平台上正常运行，这也可以降低开发成本。

这类框架里最具有代表性的就是Cordova。

技术特点：

在混合开发中，H5代码是运行在WebView中的，Webview实质上就是一个浏览器器内核，依然运行在一个权限受限的沙箱中，所以对大多数系统能力都没有访向权限，如无法访问文件系统、不能使用蓝牙等，所以，对于H5不能实现的功能，都需要原生来实现。

而混合框架一般都会在原生代码中预先实现一些访问系统能力的API，然后暴露给 Webview以供 Javascript调用，这样一来， Webview就成为 Javascript与原生AP之间通信的桥梁，主要负责 Javascript与原生之间调用消息的传递，而消息的传递必须遵守一个标准的协议，其规定了消息的格式与含义，这种依赖于 Webview的、用于在 Javascript与原生之间通信并实现了某种消息传输协议的工具称为 Webview Javascript Bridge，简称 Jsbridge，它也是混合开发框架的核心.

技术名	优点	缺陷	代表框架
H5 + 原生混合开发	可以跨平台，可以随时更新发布内容，方便与第三方网页交互	无系统访问权限； 无SDK访问权限； 性能差，对于复杂用户界面或动画支持性差	Cordova、微信小程序

3.4 Javascript开发+原生渲染

采用web技术栈，将dom映射为原生控件树，体验好，接近原生，这类框架里最具代表性的为React-Native，React-Native的生态非常强大，它开发出来的，也是真正的原生应用，原理如下：

在React-Native文件中编写的代码，会在内存中生成虚拟DOM对象，然后再通过javaScriptCore映射成原生控件树：

技术名	优点	缺陷	代表框架
Javascript开发+原生渲染	采用Web开发技术栈，社区庞大、上手快、开发成本相对较低。 原生渲染，性能相比H5提高很多。 动态化较好，支持热更新。	渲染时需要JavaScript和原生之间通信，在有些场景如拖动可能会因为通信频繁导致卡顿； JavaScript为脚本语言，执行时需要JIT，执行效率和AOT代码仍有差距； 需要自编写插件与系统和SDK交互。	React-native

3.5自绘UI+原生

这种技术的思路是，通过在不同平台实现一个统一接口的渲染引擎来绘制UI，而不依赖系统原生控件，所以可以做到不同平台UI的一致性。

注意，自绘引擎解决的是UI的跨平台问题，如果涉及其它系统能力调用，依然要涉及原生开发。

技术名	优点	缺陷	代表框架
自绘UI+原生	性能高；UI外观保真度和一致性高；代码容易维护；不会受原生布局系统的限制，布局系统灵活。	动态性不足，不能动态下发代码； 需要自编写插件与原生系统和SDK交互； 与网页交互需要编写插件。	Flutter

这类框架里最具代表性的为Flutter：

Flutter是Google推出并开源的移动应用开发框架，主要特点是跨平台、高保真、有些性能。开发者可以通过Dart语言开发APP，一套代码可以同时运行在iOS和 Android平台以上。Flutter提供了丰富的组件、接口，开发者可以很快地为 Flutter添加 Native扩展。同时Flutter还可以使用 Native引擎渲染视图，这无疑能为用户提供良好的体验。

3.5.1跨平台自绘引擎

Flutter与用于构建移动应用程序的其他大多数框架不同，因为 Flutter既不使用Webview，也不使用操作系统的原生控件。相反， Flutter使用自己的高性能渲染引擎来绘制 Widget。这样不仅可以保证在 Android和iOS上UI的一致性，而且可以避免因对原生控件依赖而带来的限制及高昂的维护成本。

3.5.2高性能

Flutter的高性能主要靠两点来保证，首先， Flutter APP采用Dart语言开发。Dart在JIT(即时编译)模式下，速度与 Javascript基本持平。同时Dar还支持AOT，当以AOT模式运行时， Javascript便远远追不上了。

速度的提升对高帧率下的视图数据计算很有帮助。其次， Flutter使用自己的渲染引擎来绘制UI，布局数据等由Dart语言直接控制，所以在布局过程中不需要像RN那样要在 Javascript和 Native之间通信。

Flutter高性能：

Flutter与原生交互原理：

3.6 uniApp

uni-app 是一个使用 Vue.js (opens new window)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

uni-app打包成App后，支持webview渲染和weex原生渲染这2种引擎，可以任由开发者切换使用。

webview渲染方式，架构和微信小程序一样。微信小程序的Hybrid应用框架是业内体验上的标杆，实践证明这种体验足以承载一线互联网开发商获得上亿用户。uni-app的App端体验同微信小程序，超过其他平台的小程序，超过一般的hybrid框架。

原生渲染方式，是DCloud改造了weex引擎，在原生渲染引擎上实现了uni-app的组件和API。达到更优秀的用户体验。

由于有丰富的插件市场，以及支持所有小程序SDK在App端的使用，使得uni-app拥有更庞大的应用生态。

3.7 weex

Weex是一个可以利用web 前端开发技术来实现Android/ios 原生引用的框架，使用 Vue 作为上层框架；

Weex原理：

weex 中文件默认为 .vue ，而 vue 文件是被无法直接运行的，所以 vue 会被编译成 .js 格式的文件，Weex SDK会负责加载渲染这个js文件。Weex可以做到跨三端的原理在于：在开发过程中，代码模式、编译过程、模板组件、数据绑定、生命周期等上层语法是一致的。不同的是在 JS Framework 层的最后，web 平台和 Native 平台，对 Virtual DOM 执行的解析方法是有区别的。

weex 比起react native，主要是在JS V8的引擎上，多了 JS Framework 承当了重要的职责，使得上层具备统一性，可以支持跨三个平台。

技术名	优点	缺陷	代表框架
Uni-App	采用Vue开发技术栈，可以直接编译成小程序、Android和iOS平台，提供Android和iOS平台的sdk，比较适合做原生+web的混合型App开发。	性能比原生和自渲染的平台差。	Uni-app

四、小结

本文档主要介绍了目前移动开发中用到的技术技术，现在我们从框架角度对比一下它们，如表：

技术类型	UI渲染方式	性能	开发效率	动态化	框架代表
原生开发	原生渲染	最好	低	不支持	Android、iOS
H5 + 原生混合开发	WebView渲染	一般	高	支持	Cordova、  Tonic、微信小程序
Javascript开发+原生渲染	原生控件渲染	好	高	支持	ReactNative、Weex
自绘UI+原生	调用系统API渲染	好	Flutter高	目前不支持	Flutter
uni-app	原生控件渲染	好	高	支持	uni-app

注：本文为了方便描述，从网络上引用了部分图片，单纯为了学习使用，如有侵权，请联系删除！