1.3-安卓开发

Create by fall on 09 Jun 2022
Recently revised in 04 Apr 2023

APP 开发技术栈

跨平台开发的目的

• 线上动态性，不需要频繁更新版本即可实现新业务的上线；
• 增加代码复用，减少开发者对多个平台差异适配的工作量，解决多端不一致的问题；
• 提高业务专注的同时，提供比web更好的体验；
• 降低开发成本

跨平台开发流派

• Web 流：也被称为 Hybrid 技术，它基于 Web 相关技术来实现界面及功能 Cordova，AppCan，小程序，快应用
• 代码转换流：将某个语言转成 Objective-C、Java 或 C#，然后使用不同平台下的官方工具来开发 java2OC，OC2Java，java2C#
• 编译流：将某个语言编译为二进制文件，生成动态库或打包成 apk/ipa/xap 文件 Xamarin
• 虚拟机流：通过将某个语言的虚拟机移植到不同平台上来运行 Flutter，Titanium，React Native，Weex

跨平台开发主流技术

• Flutter（Google）
• ReactNative（FaceBook）
• Weex（Alibaba）
• Hybrid App
• Cordova（原PhoneGap，Adobe）（）
• 小程序，快应用

主要可以分成三类：原生 App 技术栈 （native technology stack）、混合 App 技术栈 （hybrid technology stack）、跨平台 App 技术栈 （cross-platform technology stack），H5 开发主要用在混合技术栈。但是，跨平台技术栈的某些容器也会用到（比如 React Native），因为它们的 UI 层借鉴了 Web 模型。混合技术栈和跨平台技术栈的基础，都是原生技术栈，因为最终都要编译成原生App。所以，不管使用哪一种技术栈，多多少少要了解一些各平台的原生技术。

原生 App

原生 App 技术栈 （native technology stack）

原生技术栈指的是，只能用于特定手机平台的开发技术。比如，安卓平台的 Java 技术栈，iOS 平台的 Object-C 技术栈或 Swift 技术栈。

这种技术栈只能用在一个平台，不能跨平台。

混合 App

混合 App 技术栈 （hybrid technology stack）

混合技术栈指的是开发混合 App 的技术，也就是把 Web 网页放到特定的容器中，然后再打包成各个平台的原生 App。所以，混合技术栈其实是 Web 技术栈 + 容器技术栈，典型代表是 PhoneGap、Cordova、Ionic 等框架。

如果已经掌握了 Web 技术，这个技术栈就主要学习容器提供的 API Bridge，网页通过它们去调用底层硬件的 API。

跨平台 App

跨平台 App 技术栈 （cross-platform technology stack）

跨平台技术栈指的是使用一种技术，同时支持多个手机平台。它与混合技术栈的区别是，不使用 Web 技术，即它的页面不是 HTML5 页面，而是使用自己的语法写的 UI 层，然后编译成各平台的原生 App。

这个技术栈就是纯粹的容器技术栈，React Native、Xamarin、Flutter 都属于这一类。学习时，除了学习容器的 API Bridge，还要学习容器提供的 UI 层，即怎么写页面。

相关技术

讲解具体的技术栈之前，大家需要知道，不管什么技术，最终在 App 里面显示网页，一定需要一个网页引擎，这样才能解析网页。

WebView 控件

通常情况下，App 内部会使用 WebView 控件作为网页引擎。这是系统自带的控件，专门用来显示网页。应用程序的界面，只要放上 WebView，就好像内嵌了浏览器窗口，可以显示网页。

不同的 App 技术栈要显示网页，区别仅仅在于怎么处理 WebView 这个原生控件。

• 原生技术栈：需要开发者自己把 WebView 控件放到页面上。
• 混合技术栈：页面本身就是网页，默认在 WebView 中显示。
• 跨平台技术栈：提供一个 WebView 的语法，编译的时候将其换成原生的 WebView。

注意，不同系统的 WebView 控件名称不一样，安卓系统就叫 WebView，iOS 系统有较老的 UIWebView，也有较新的 WKWebView，作用都是一样的，差异在于功能的强弱。

原生技术栈

原生技术栈分成 iOS 和安卓两个平台。

• iOS 的原生技术栈就是使用 Object-C 语言或 Swift 语言，在 Xcode 开发环境中编程。
• 安卓的原生技术栈，则是使用 Java 语言或 Kotlin 语言，开发环境是 Android Studio。

混合技术栈

上面的原生技术栈需要自己新建 WebView 实例，相比之下，混合技术栈就简单多了。因为页面就是网页，所以容器已经设置好了 WebView，开发者直接写页面即可。

框架种类

混合技术栈的各种容器框架之中，历史最悠久是 PhoneGap，诞生于 2009 年。后来在 2011 年被 Adobe 公司收购，改名为 Adobe PhoneGap。

Adobe 公司将 PhoneGap 的核心代码，后来都捐给了 Apache 基金会，作为一个全新的开源项目，名为 Apache Cordova。

PhoneGap 和 Cordova 现在是两个独立发展的开源项目，但是彼此有密切的关系，可以简单理解成 Cordova 是 PhoneGap 的内核，PhoneGap 是 Cordova 的发行版。

后来，其他人也开始基于 Cordova 封装自己的框架，所以市场上有许多基于 Cordova 的开源框架，比较著名的有 Ionic、Monaca、Framework7 等。

所有这些框架的共同点，都是使用 Web 技术（HTML5 + CSS + JavaScript）开发页面，再由框架分别打包成 iOS 和安卓的 App 安装包。它们的优点是开发简单、周期短、成本低，缺点是功能和性能都很有限。

跨平台技术栈

上面的混合技术栈使用 HTML 语言编写页面，再用 WebView 控件加载页面，所以只写一次页面，就能支持多个平台。跨平台技术栈也能做到多平台支持，但是原理完全不同。

跨平台技术栈的框架，都是使用自己的语法编写页面，不使用 Web 技术，编译的时候再将其转为原生控件，或者使用自己的底层控件，生成原生 App。这样就完全解决了 Web 页面性能不佳的问题。下面介绍三个这样的框架。

• React Native: 使用 JavaScipt 语言编写页面
• Xamarin：使用 C# 语言编写页面
• Flutter：使用 Dart 语言编写页面

React Native

使用 React Native 的应用：墨刀，京东，手机百度，腾讯QQ，QQ空间，Facebook 及旗下应用

2013年， Facebook 公司发布了 React 框架，2015 年 4 月开源 React Native 。这个框架是为网页开发设计的，核心思想是在网页之上，建立一个 UI 的抽象层，所有数据操作都在这个抽象层完成（即在内存里面完成），然后再渲染成网页的 DOM 结构，这样就提升了性能。

很快，工程师们就意识到了，UI 抽象层本质上是一种数据结构，与底层设备无关，不仅可以渲染成网页，也可以渲染成手机的原生页面。这样的话，只要写一次 React 页面，就能分别编译成 iOS 和安卓的原生 App。这就是 React Native 项目的由来。

注意，React Native 虽然也使用 JavaScript 语言，并且写法看上去像 Web 页面，但其实所有控件都是自己定义的，编译时再一一翻译为对应的原生控件。举例来说，React Native 的文本渲染控件是，翻译成 iOS 控件为 UIView，翻译成安卓控件为TextView。这种做即保证了性能，又做到了跨平台支持，所以一诞生就引起开发者的关注，成了热门技术。

还有一个 NativeScript 框架，跟 React Native 很像，也是使用 JavaScript 语言，然后编译成原生控件。不过，它的开发模型是基于 Angular.js，而不是 React。

• 效率体验接近原生应用质量，发布和开发成本低于原生App；
• 支持热更新，快速迭代；
• 社区活跃，基本坑点都能解决；
• 代码跨越双平台

React Native 的问题

React Native 的想法虽然很美好，但是实际开发中出现了各种各样的问题。

最主要的一个问题是， UI 抽象层翻译出来的 iOS 和安卓原生页面，做不到完全一致，尤其是复杂页面，样式或功能存在差异。编译出来两个平台的原生 App 往往是一个正常，另一个会出现各种奇怪的小毛病。ReactNative 的底层还是没有做到无缝适配，两个系统之间的差距是客观存在的。

如果你想用 React Native 做到 iOS 和安卓体验一致，并且充分发挥原生控件的功能，就需要同时熟悉 React Native、iOS、安卓三个平台，这对开发者的要求实在太高了。Airbnb 公司在使用 React Native 两年后，宣布放弃，改用原生技术栈。

• RN 的开源库质量不可控；
• RN 运行时的初始化太慢，首次渲染时间慢（需要从 主线程 -> JS -> Yoga -> 主线程）
• 调试困难，JSCore 在 iOS / Android 上不一致 （Android 上是 RN 自己 bundle 的），很难 debug 这种坑

Xamarin

Xamarin 是微软公司的跨平台 App 开发框架，原理跟 React Native 很相似，只不过它的语言是 C#。

它的使用需要 Visual Studio，这里就不举例了。

Flutter

使用该技术的应用：闲鱼、美团，饿了么、NOW直播（腾讯）、京东金融

Flutter 是谷歌公司的跨平台开发框架。它为了解决 React Native 的平台差异问题，采用了一个完全不同的方案。

它自己实现了一套控件。打包的时候，会把这套控件打包进每一个 App，因此不存在调用原生控件的问题。不管什么平台，都调用内嵌的自己那套控件，就能做到 iOS 和安卓体验完全一致。

Dart 是 Flutter 的官方语言，接近 JavaScript 语法，多了静态类型支持。

Flutter是谷歌的最新移动UI框架。

优点

• 热重载（Hot Reload），利用 Android Studio 直接一个 ctrl+s 就可以保存并重载，模拟器立马就可以看见效果，相比原生冗长的编译过程强很多；
• 一切皆为 Widget 的理念，对于 Flutter 来说，手机应用里的所有东西都是 Widget，通过可组合的空间集合、丰富的动画库以及分层课扩展的架构实现了富有感染力的灵活界面设计；
• 借助可移植的 GPU 加速的渲染引擎以及高性能本地代码运行时以达到跨平台设备的高质量用户体验。 简单来说就是：最终结果就是利用Flutter构建的应用在运行效率上会和原生应用差不多。

缺点

• 不支持热更新；
• 三方库很少，需要自己造轮子；
• dart 语言编写，掌握该语言的开发者很少。

WEEX

原使用应用：淘宝，天猫，支付宝，网易考拉，网易严选

该跨平台方案已经不推荐使用

2016 年 4 月 21 日，阿里巴巴在 Qcon 大会上宣布跨平台移动开发工具 Weex。

缺点

• 社区没有 RN 活跃，功能尚不健全，暂不适合完全使用 Weex 开发 App

Hybrid App（Android/iOS+Html5）

微信，爱奇艺，我爱我家

Hybrid App 主要以 JS+Native 两者相互调用为主，从开发层面实现“一次开发，多处运行”的机制，成为真正适合跨平台的开发

优点

• 兼具了 Native App 良好用户体验的优势；
• 提升了开发效率，h5可以多平台复用，由服务器快速迭代；
• 实现简单，且原生与h5开发人员充沛。

缺点

• 体验比不上原生，webView 性能差；
• 适用部分展示页面，复杂交互仍需要原生开发；
• 需要对应平台人员配合，jsApi 因需求需要调整，版本迭代并不自由

技术对比

解决方案	ReactNative	Flutter	Hybrid App	Weex
平台实现	JavaScript	无桥接，原生编码	无桥接，原生编码	JavaScript
引擎	JSCore	Flutter engine	原生渲染	JS V8
核心语言	React	Dart	Java/Obeject-C	Vue
Apk大小（Release）	7.6M	8.1M		10.6M
bundle文件大小	默认单一，较大	不需要	不需要	较小，多页面可多文件
上手难度（原生角度）	较高	一般	容易	一般
框架程度	较重	重	-	较轻
特点	适合开发整体App	适合开发整体App	适合开发整体App	适合单页面
社区	丰富，FaceBook重点维护	刚出道小鲜肉，拥护者众多	丰富	有点残念，托管apache
线上动态性	✅	❎	❎	✅
跨平台支持	Android、iOS	Android、iOS	Android、iOS	Android、iOS、Web