移动端技术选型

选型步骤

了解业务需求

了解不同的方案，比较不同方案的优缺点

考虑成本、开发周期、成员技术栈

进行技术选型

移动端开发的方式

目前主要有四种开发模式：

Native App ：原生App，原生安卓或ios开发的App

- 优点：最佳的性能，出色的用户体验，高速接口

- 缺点：需要为每个平台编写代码，Swift/Objective-C用于iOS开发，Java/Kotlin用于Android开发，需要多名开发人员，开发周期长

Web App：移动web，使用HTML、CSS、JS进行开发

- 优点：简单

- 缺点：不能操作手机系统api（比如：扫码、读取通讯录、麦克风 、摄像头）

Hybrid App：混合App，web+原生混合开发

- 基于 WebView 控件以全屏格式呈现 HTML 和 JavaScript 文件。换句话说，它是包装在原生移动容器内的网页

- 优点：支持所有平台，需要的开发人员少

- 缺点：比起原生，效果相对较差

跨平台：Cross-Platform，一套代码，运行在不同的平台

- 跨平台移动应用开发与混合开发的区别在于，前者不使用 WebView 控件来呈现 HTML 和 JavaScript 文件。跨平台开发会创建在多个平台（包括 Android 和 iOS）上共享的代码库

前三种开发模式的原理示意图：

由于成本和周期问题，放弃用原生开发模式。

由于app需要调用手机操作系统的api，故放弃移动web模式。

最终选用跨平台方案

旧的方案

（主要作为参考，不会作为最终技术选型方案）

Cordova

Cordova是开发跨平台web App的工具, 使用前端技术来开发App。

底层逻辑是:HTML+CSS搭建页面, 使用JS和原生平台交互来展示原生平台的功能.

提供了一组设备相关的API，通过这组API，移动应用能够以JavaScript访问原生的设备功能，如摄像头、麦克风等。

还提供了一组统一的JavaScript类库，以及为这些类库所用的设备相关的原生后台代码。

缺点：

用HTML、CSS、JS开发，没有用Vue之类的框架，不符合一般的开发习惯

没有丰富的开源插件，需要自己用原生进行插件开发

Ionic

基于Cordova，可以与Vue、React配合。

缺点：

最初是与Angular搭配使用，所以对Vue、React的支持尚处于开发状态

据说坑很多，国内用的人少，对问题的解决方案也比较少

Xamarin

由Microsoft开发，使用C#作为编程语言。Xamarin允许开发者在不同平台上共享大部分代码，同时保留原生应用的性能和外观。Xamarin可以与.NET生态系统无缝集成。

缺点：

主要用于.NET生态，需要掌握C#语言

新的跨平台方案

（会从以下几种技术方案中选定最后的技术方案）

Uni-App/Weex

使用框架：Vue

开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台，uniapp是双引擎渲染，同时支持webView和weex渲染。

使用场景：uni-app由于技术门槛比较低，交互与性能的精细定制化很难做到。主要适合于外包这种快速开发市场，当下市场上没有代表性的uniapp产品。

优点：

学习成本低（掌握vue），开发周期短

可以部署到移动端、小程序和web端

通用UI，写一套界面UI，可以适应不同的手机

国内生态好，中国开发者需要的全端推送（UniPush集成了iOS、华为、小米、OPPO等众多原厂推送）、各种国内登陆、支付、分享SDK、各种国内地图、各种ui库、以及Echart图表等，都是在uni-app体系里

缺点：

性能和用户体验在三者中较差，渲染卡顿

不适用于复杂业务场景

主要还是做小程序的，不同端的厂商可能api调用会有问题

可能需要在不同开发平台下单独调试

据说bug比较多

架构经常换，而且升级后之前的很难兼容

注意点：

uni-app的nvue开发app，语法是vue语法的子集。比如：

只支持flex布局

对一些css不支持

不能使用过渡动画的一些属性

项目搭建：

juejin.cn/post/713719…

juejin.cn/post/713822…

从入门到实践：Uni-app跨平台开发与应用：juejin.cn/post/721261…

玩转 uniapp 全端开发：juejin.cn/post/713719…

Weex

1.uniapp已经嵌入了weex了，uniapp有两套引擎：webview和weex

2.根据数据显示，weex已经不怎么维护

所以这里只讨论uniapp。

React Native

（下文中rn、react native、RN都是指React Native者同一种框架）

使用框架：React

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

使用场景：市面上有很多成熟的产品，见下文APP开发者工具分析

项目搭建过程：

最新版React Native环境搭建：juejin.cn/post/713564…

重点参考文章：

React Native技术在小米有品App中的应用：juejin.cn/post/704137…

云音乐 React Native 体系建设与发展：segmentfault.com/a/119000002…

优点：

渲染效率比uniapp高

rn是纯单页的，嵌入原生App比较灵活

学习成本较小（掌握react）

缺点：

web端无法使用

维护成本高

升级时重新构建困难

需要两套不同的UI库，需要写两套不同的代码

涉及底层的功能，需要Android和IOS双端单独开发，JS再进行调用

前期的工程准备成本相对会高一些（有墙），安装某些工程内容很心累（一般出现在ios开发中）

Flutter

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面

优点：

将近原生，性能和用户体验是三者中最好的

缺点：

学习成本高，使用Dart语言而不是JavaScript语言

JavaScript与Dart完成同样的页面，进行对比：

JavaScript语言：

<div class="greybox">  
  <div class=redbox>  
    smaple text  
  </div>  
</div>  

.greybox {  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  background-color: #e0e0e0; /* grey 300 */  
  width: 320px;  
  height: 240px;  
  font: 18px  
}  
.redbox {  
  background-color: #ef5350; /* red 400 */  
  padding: 16px;  
  color: #ffffff  
}

Dart语言：

var container = new Container( // grey box  
  child: new Center(  
    child: new Container( // red box  
      child: new Text(  
        "smaple text",  
        style: new TextStyle(  
          color: Colors.white,  
          fontSize: 18.0,  
        ),  
      ),  
      decoration: new BoxDecoration(  
        color: Colors.red[400],  
      ),  
      padding: new EdgeInsets.all(16.0),  
    ),  
  ),  
  width: 320.0,  
  height: 240.0,  
  color: Colors.grey[300],  
);

可见，Dart语言使用的是嵌套模式。

dart语言是一个只有js，没有html和css的语言。需要用js createElement来创建元素，用js的style方法给每个element设style，不能写html和css代码。前端都已经发展到各种mvc等视图逻辑分离的架构了，也有了vue这种组件化模式方便用各种轮子快速完成界面，dart界面开发模式不同于之前的模式。

不同方案对比

特征	Uniapp	Reacti Native	Flutter
学习成本	低	中	高
语言	JavaScript	JavaScript	dart
性能	一般	好	最好
三方库	较少	多	多
原生生开发协作	不太需要	需要紧密的原生协作开发	需要紧密的原生协作开发
维护代码数量	1	3	3
原生通信开销	较大	较大	小
可持续性	较低	高	高
所属公司	DCloud	Facebook	Google

（下面内容是对上面表格的拓展和解释，如果只想直观地对三者进行比较，只需要看表格就可以）

flutter自制了一套自己的sdk，直接使用GPU渲染机制。也就是说，渲染时没有和原生通信的开销。

中国市场上的hybrid混合开发基本上都会涉及到一个概念，就是JSBridge。无论是uniapp、还是rn，工程开发的时候虽然是js，但最终还是会打包成一个原生包，也就是native。程序会通过jsbridge搭建起一个js与native之间的桥梁，js做什么操作，返回反馈给native对应的命令。uniapp和react native都有JS和Native之间的通信开销，所以交互流畅性比较差。

rn和uniapp为了能够让UI有效渲染，用原生最简单的一些View组件进行封装，比较复杂的UI组件还是需要工程师自己一层套一层实现，渲染压力就会高。毕竟不是原生，再加上通信开销，卡就会变的很正常，所以一些大厂会专门找人做这种底层组件保证效率。

rn和flutter都需要紧密的原生写作开发，而uniapp则不用

js调用原生渲染（react native/weex/uni-app）、flutter自绘渲染，复杂度依次降低，渲染性能依次上升。

浏览器的html提供了tag和样式分离的写法，还有各种各样的css选择器，但其实这也是有代价的。它导致webview初始化时要同时先启动webkit排版引擎来解析这些编写随性的html、css，同时还要启动一个js引擎比如v8或jscore来解析里面的js。而dart就很简单，只启动一个dart引擎，解析严格的dart语法，它不会去操心有些标签未闭合要如何容错，不会判断宽度320后面是px还是rem或者是动态计算百分比。从解析效率上，flutter肯定比webview要高。

不管是rn还是flutter，有一个设计，很不中国化。它们在iOS和Android平台上，使用2套ui库。
比如flutter，在iOS上写一个button，要用CupertinoButton，是iOS风格的控件，在Android上则要用RaisedButton，是Material风格的控件。
rn也是如此，它确实要求开发者写2套代码。