如何对移动端跨平台框架进行技术选型

前言

作为技术总监或项目负责人经常会遇到这样的问题：“如何省时省力又快速地开发出一款全新的App？”，对于这个问题，究其实质就是低成本、高效地开发一款App。然而如何做到低成本又高效呢？编者认为最好的方式是选择一个跨平台的框架进行二次开发，正所谓“站在前人的肩膀上，能看得更高更远”。

另外，对于平台来说，特别是移动领域的平台。我们大家都知道，市面上主要有两个：一个是大家耳熟能详的苹果手机平台，另一个是拥有超大用户群的安卓手机平台。因这两个平台在硬件结构、软件系统架构不同，造成了功能设计和用户体验上有很大的差异。

若我们不选择跨平台开发的话，一般这么做：为了满足不同平台的用户需求，我们招一个iOS开发人员，按照苹果手机的界面和使用习惯，开发一个适合苹果手机用户的App；同样地，再招一个安卓开发人员，做个同样功能的App给安卓用户（就是我们常说的原生开发）。

这种做法对公司来说，有个显现的问题：需要两个开发人员来维护两套代码。显然，这样增加了很大的成本，是不划算的。作为技术总监或项目负责人，当然希望用尽量少的开发人员和代码来完成开发任务。

跨平台开发

那跨平台开发又是怎么回事呢？

跨平台开发，简单来说，就是一个开发者写一套代码，在不同的平台上正常运行。套用Java编程思想来说，就是“一处编写，多处运行”。它的好处，自然就是最大化的降低成本。

那具体怎么跨平台开发呢？其实，经过移动平台十几年的发展，还真出现不少优秀的跨平台框架。我们只要选择适合自己项目的框架，然后在此基础上进行二次开发即可。

下面介绍几款跨平台开发框架

Cordova

全称Apache Cordova，是由Nitob1在2009年创建和推出的移动开发框架。官网地址：https://cordova.apache.org/。它当初主要想解决Android，iOS，BlackBerry以及微软的Phone四个平台的跨平台问题。只是到现在只剩下android和iOS了。

该框架的主要设计思路是提供硬件设备API接口，通过简单且又在Web端适用的JavaScript语言完成调用，实现相应功能。

从架构的本质来说，是在原生基础上加了一个Cordova的容器，在该容器上使用简单易用的JavaScript语言，实现移动端的UI界面的统一。这在当时来说，是往跨平台方向迈进了一大步。这里UI界面采用JavaScript语言还有一个好处：和Web端统一起来。从而实现三端（iOS端、安卓端，Web端）统一。

然而，Cordova也有一些不足：

1.Cordova在自定义绘制视图和布局等复杂界面上，存在着很大的困难，一时还实现不了。所以Cordova一般适用于简单的界面。

2.Cordova的更新与操作系统的更新，差距很明显，例如最新的Cordova支持Android 10.但Android已经发展到12了。

3.Cordova的受欢迎程度正在逐年下降，2019-2021年使用Cordova的软件开发人数量下降到16%。

基于以上原因，Cordova正在被其他的移动框架所替代。

这里再补充下项目经验：之前接触过Cordova。在使用过程中，确实感觉Cordova接口简单粗放，调用设备API接口，缺少太多的异常保护。

再者，性能也不是很良好，一个2000人的企业组织架构数据，在首次打开的时候，必然会出现一段时间的白屏。

HTML5

HTML5简称H5，这个也是移动端跨平台运用比较多的一个框架。

从整体架构上看，H5框架，就是在移动端上，通过UIWebView控件打开一个HTML5页面，HTML5页面属于前端开发，移动端负责交互以及原生开发。当HTML5页面与原生要进行事件响应或数据交换时（如按钮点击，从原生获取工号、token等数据），一般通过JSBridge进行交互。

这种方式，个人认为在所有的跨平台框架中，应该最简单的（前面的Cordova，还需要学习Cordoava框架），只需要一个前端开发人员完成HTML5页面开发。当需要与原生进行交互时，通过WebViewJavascriptBridge或者JavaScriptCore库，进行注册或回调。

从性能方面来说，H5和Cordova框架性能相差无几。交互方面都是以接口的方式进行，UI界面方面采用JavaScript的渲染，所以性能方面差不多。

补充下项目经验：H5框架实现了前端、移动端UI界面的分离，即前端做前端的界面，移动端完成移动端的功能，两者相互独立。只有到了需要交互之时，才采用JSBridge进行通讯。

它的不足就是JSBridge不稳定，还包括iOS端和安卓端接口不兼容（项目中一直被前端开发人员抱怨）。面对这些问题，当时也是没有很好的方案去解决。

React Native

简称RN，是FaceBook在2015年开源的跨平台移动应用开发框架。

该框架在UI界面上是足够灵活，可以覆盖应用程序所需的大多数场景。它使用的语言是React.js（一门基于JavaScript的编程语言）。

从整体架构上说，React Native和Cordova类似，也是搞了一个React Native容器，通过容器对所有界面的视图进行桥接。也正是这个桥接，导致在实现动画和使用报告更新的视图时会出现一些问题。例如滚动视围位置、报表不刷新的问题且这样的问题不好解决。

从性能上说，RN优于前面两个框架，毕竟Facebook在RN容器上做了优化，增加了渲染引擎之类的模块。然而，正如前面所说，在某些场景中还存在一些问题。

再说下项目经验：在实际项目中，我们也遇到过报表刷新不了的问题，找了很久的问题，最后没折，只好减少数据量来曲线救国。还有我们遇到另一个印象深刻的问题是React Native包下载更新。当新版本的RN包更新时，手机端一直更新不了。找了很久也木有找到原因，最后我们通过加上MD5值、下载放入临时文件夹等方式才比较好的解决了问题。

Flutter

Flutter，应该说是现在最火的移动跨平台框架。是Google在2015年开源的构建用户界面工具包。

它是基于Dart语言开发的，且是目前构建UI界面最灵活的框架。它提供的许多小部件，可以直接拿来使用；它还可以一套代码库高效构建多平台应用，包括移动、Web、桌面和嵌入式四个方向；这样也让测试变得简单些，不需要各个平台重复验证了；还有Flutter有火热的开发者社区做支撑，发展前景非常乐观。

在性能方面，与原生iOS应用程序的相当；在某些情况下，与Android的应用程序相当甚至更快些；是目前跨平台框架中最接近原生开发的。

其他的跨平台框架

除了上面介绍的几个框架外，还有Xamarin、Ionic、Nativescript这三个。由于这三个框架只有很少用户使用，属于小众框架。这里就不再多介绍了。

总结

1.对于每一款框架来说，发展至今还存在，自有它有存在的理由。不管现在怎么样，编者认为这些框架都是不错的跨平台框架。

2.我们选择框架时，最好是根据自己项目实际情况进行选择，切不可求大求全。以一个实际项目为例，一个一年做一次的国庆宣传活动，活动内容就一两个页面来说，最合适的是HTML5框架。