移动跨平台技术方案总结

时间 2019-11-21

标签移动跨平台技术方案总结栏目无线繁體版

原文原文链接

“得移动端者得天下”，移动端取代PC端，成为了互联网行业最大的流量分发入口，所以很多公司制定了“移动优先”的发展策略。前端

为了帮助读者更好地学习WEEX，本节将对React Native、Weex和Flutter等主流的跨平台方案进行简单的介绍和对比。node

React Native

React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的React框架在原生移动应用平台的衍生产物，目前主要支持iOS和安卓两大平台。react

RN使用Javascript语言来开发移动应用，但UI渲染、网络请求等均由原生端实现。具体来讲，开发者编写的Javascript代码，经过中间层转化为原生控件后再执行，所以熟悉Web前端开发的技术人员只需不多的学习就能够进入移动应用开发领域，并能够在不牺牲用户体验的前提下提升开发效率。android

做为一个跨平台技术框架，RN从上到下能够分为Javascript层、C++层和Native层。其中，C++层主要用于实现动态连结库(.so)，做为中间适配层桥接，实现js端与原生端的双向通讯交互，以下图所示是RN在Android平台上的通讯原理图。 ios

在RN的三层架构中，最核心的就是中间的C++层，C++层最核心的功能就是封装JavaScriptCore，用于执行对js的解析。同时，原生端提供的各类Native Module（如网络请求，ViewGroup控件模块）和JS端提供的各类JS Module（如JS EventEmiter模块）都会在C++实现的so文件中保存起来，最终经过C++层中的保存的映射实现两端的交互。 git

在RN开发过程当中，大多数状况下开发人员并不须要须要了解RN框架的具体细节，只须要专一JS端的逻辑代码实现便可。可是须要注意的是，因为js代码是运行在独立的JS线程中，因此在js中不能处理耗时的操做，如fetch、图片加载和数据持久化等操做。github

最终，JS代码会被打包成一个bundle文件并自动添加到应用程序的资源目录下，而应用程序最终加载的也是打包后的bundle文件。RN的打包脚本位于“/node_modules/react-native/local-cli”目录下，打包后经过metro模块压缩成bundle文件，而bundle文件只包含打包js的代码，并不包含图片、多媒体等静态资源，而打包后的静态资源会是被拷贝到对应的平台资源文件夹中。npm

总的来讲，RN使用Javascript来编写应用程序，而后调用原生组件执行页面渲染操做，在提升了开发效率的同时又保留了Native的用户体验。而且，伴随着Facebook重构RN工做的完成，RN也将变得更快、更轻量、性能更好。编程

Weex

做为一套前端跨平台技术框架，Weex创建了一套源码转换以及Native与Js通讯的机制。Weex表面上是一个客户端框架，但实际上它串联起了从本地开发、云端部署到分发的整个链路。具体来讲，在开发阶段编写一个.we文件，而后使用Weex提供的weex-toolkit转换工具将.we文件转换为JS bundle，并将生成的JS bundle上传部署到云端，最后经过网络请求或预下发的方式加载至用户的移动应用客户端。当集成了Weex SDK的客户端接收到JS bundle文件后，调用本地的JavaScript引擎执行环境执行相应的JS bundle，并将执行过程当中产生的各类命令发送到native端进行界面渲染、数据存储、网络通讯以及用户交互响应。 react-native

由上图可知，Weex框架中最核心的部分就是JavaScript Runtime。具体来讲，当须要执行渲染操做时，在iOS环境下选择基于JavaScriptCore内核的iOS系统提供的JSContext，在Android环境下使用基于JavaScriptCore内核的JavaScript引擎。

当JS bundle从服务器下载完成以后，Weex的Android、iOS和H5会运行一个JavaScript引擎来执行JS bundle，同时向各终端的渲染层发送渲染指令，并调度客户端的渲染引擎实现视图渲染、事件绑定和处理用户交互等操做。因为Android、iOS和H5等终端最终使用的是native渲染引擎，也就是说使用同一套代码在不一样终端上展现的样式是相同的，而且Weex使用native引擎渲染的是native组件，因此在性能上比传统的WebView方案要好不少。

固然，尽管Weex已经提供了开发者所须要的最经常使用的组件和模块，但面对丰富多样的移动应用研发需求，这些经常使用基础组件仍是远远不能知足开发的须要，所以Weex提供了灵活自由的扩展能力，开发者能够根据自身的状况定制属于本身客户端的组件和模块，从而丰富Weex生态。

Flutter

Flutter是Google开源的移动跨平台框架，其历史最先能够追溯到2015年的Sky项目，该项目能够同时运行在Android、iOS和fuchsia等包含Dart虚拟机的平台上，而且性能无限接近原生。相较于RN和Weex使用Javascript做为编程语言与使用平台自身引擎渲染界面不一样，Flutter直接选择2D绘图引擎库skia来渲染界面。

如上图所示，Flutter框架主要由Framework和Engine层组成，而咱们基于Framework开发App最终会运行在Engine上。其中，Engine是Flutter提供的独立虚拟机，正是因为它的存在Flutter程序才能运行在不一样的平台上，实现跨平台运行的能力。与RN和Weex使用原生控件渲染界面不一样，Flutter并不须要使用原生控件来渲染界面，而是使用Engine来绘制Widget（Flutter显示单元），而且Dart代码会经过AOT编译为平台的原生代码，实现与平台的直接通讯，不须要JS引擎的桥接，也不须要原平生台的Dalvik虚拟机，如图1-5所示。同时，Flutter的Widget采用现代响应式框架来构建，而Widget是不可变的，仅支持一帧，而且每一帧上的内容不能直接更新，须要经过Widget的状态来间接更新。在Flutter中，无状态和有状态Widget的核心特性是相同的，视图的每一帧Flutter都会从新构建，经过State对象Flutter就能够跨帧存储状态数据并恢复它。

总的来讲，Flutter是目前跨平台开发中最好的方案，它以一套代码便可生成Android和iOS平台两种应用，很大程度上减小了App开发和维护的成本，同时Dart语言强大的性能表现和丰富的特性，也使得跨平台开发变得更加便利。而不足的是，Flutter还处于Alpha阶段，许多功能还不是特别完善，而全新的Dart语言也带来了学习上的成本，若是想要彻底替代Android和iOS开发还有比较长的路要走。

PWA

PWA，全称Progressive Web App，是Google在2015年提出渐进式的网页技术。PWA结合了一系列的现代Web技术，并使用多种技术来加强Web App的功能，最终可让网页应用呈现和原生应用类似的体验。

相比于传统的网页技术，渐进式Web技术是能够横跨Web技术及Native APP开发的技术解决方案，具备可靠、快速且可参与等诸多特色。

具体来讲，当用户从手机主屏幕启动时，不用考虑网络的状态就能够马上加载出PWA。而且，相比传统的网页加载速度，PWA的加载速度是很是快的，由于PWA使用了Service Worker 等先进技术。除此以外，PWA还能够被添加在用户的主屏幕上，不用从应用商店进行下载便可经过网络应用程序Manifest file提供相似于APP的使用体验。

做为一种全新Web技术方案，PWA的正常工做须要一些重要的技术组件，它们协同工做并为传统的Web应用程序注入活力，如图1-8所示。

其中，Service Worker表示离线缓存文件，其本质是Web应用程序与浏览器之间的代理服务器，能够在网络可用时做为浏览器和网络间的代理，也能够在离线或者网络极差的环境下使用离线的缓冲文件。

Manifest则是W3C一个技术规范，它定义了基于JSON的清单，为开发人员提供一个放置与Web应用程序关联的元数据的集中地点。Manifest是PWA 开发中的重要一环，它为开发人员控制应用程序提供了可能。

目前，渐进式Web应用还处于起步阶段，使用的厂商也是诸如Twitter、淘宝、微博等大平台。不过，PWA做为Google主推的一项技术标准，Edge、Safari和FireFox等主流浏览器也都开始支持渐进式Web应用。所以，能够预见的是，PWA必将成为继移动以后的又一革命性技术方案。

对比

在当前诸多的跨平台方案中，RN、Weex和Flutter无疑是最优秀的。而从不一样的细节来看，三大跨平台框架又有各自的优势和缺点，能够经过表1-1来查看。

对比类型	React Native	Weex	Flutter
支持平台	Android/IOS	Android/IOS/Web	Android/IOS
实现技术	JavaScript	JavaScript	原生编码/渲染
引擎	JS V8	JSCore	Flutter Engine
编程语言	React	Vue	Dart
bundle包大小	单1、较大	较小、多页面	不须要
框架程度	较重	较轻	重
社区	活跃、FB维护	不活跃	活跃

如上表所示，RN、Weex采用的技术方案大致相同，它们都使用JavaScript做为编程语言，而后经过中间层转换为原生的组件后再利用Native渲染引擎执行渲染操做。而Flutter直接使用skia来渲染视图，而Flutter Widget则使用现代响应式框架来构建，和平台没有直接的关系。就目前跨平台技术来看，JavaScript在跨平台开发中可谓占据半壁江山，大有“一统天下”的趋势。从性能方面来讲，Flutter的性能理论上是最好的，RN和Weex次之，而且都好于传统的WebView方案。但从目前的实际应用来看却并无太大的差距，特别是和0.5.0版本以上的RN对比性能体验上差别并不明显。而从社群和社区的活跃来看，RN和Flutter无疑是最活跃的，RN通过4年多的发展已经成长为跨平台开发的实际领导者，并拥有各种丰富的第三方库和开发群体。Flutter做为最近才火起来的跨平台技术方案，不过目前还处在beta阶段，商用的实例也不多，不过应该看到google的号召力一直是很强，将来究竟如何发展让咱们拭目以待。

示例

eros-yanxuan

简介

eros-yanxuan 是基于 eros 开发的Weex项目，部分页面参考了项目网易严选 weex 版本，欢迎star或fork。

运行

确保你本地已经集成了 eros 开发所需的环境。

clone 项目到本地：

$ git clone https://github.com/xiangzhihong/eros-yanxuan.git
复制代码

进入目录，下载前端所需的依赖：

$ cd eros-yanxuan
$ npm install
复制代码

iOS SDK

打开platforms目录下的WeexEros项目，在WeexEros中使用pod添加依赖。

$ cd platforms/ios/WeexEros
$ pod update                // 下载 iOS 依赖
$ open WeexEros.xcworkspace // 自动打开项目
复制代码

选中模拟器，点击绿色箭头运行 app 便可。

Android

对于Android工程来讲，使用Android Studio打开platforms目录下的WeexFrameworkWrapper的Android工程，而后使用install.sh安装Android工程的须要依赖包nexus和wxframework。

具体能够参考自行导入项目，即可运行起来。

运行

项目根目录下运行 eros dev
关闭调试，拦截器，打开热更新
从新 build app

效果

Question

运行过程当中出现问题在如下地址解决方法，若是没有找到，能够参考eros快速入门新建一个Weex工程，而后将src和配置文件的代码拷贝过去。若是还有问题，请加群：515980159