如果你熟悉 Java 语言，可以学习安卓开发；如果熟悉脚本语言（比如 Python 或 Ruby），可以学习 Swift 语言，进行 iOS 开发；如果像我一样，比较熟悉 Web 网页技术，那么 H5 开发是最容易上手的。

本文由国内最大的在线教育平台之一“腾讯课堂”^[2]赞助。他们现在启动了“腾讯课堂101计划”^[3]，推广优质课程资源。希望学习和提高手机 App 开发技术的朋友，可以留意一下本文结尾的安卓课程信息。

手机 App 的技术栈可以分成三类。

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

（2）混合 App 技术栈（hybrid technology stack）

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

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

（4）小结

另外，混合技术栈和跨平台技术栈的基础，都是原生技术栈，因为最终都要编译成原生App。所以，不管使用哪一种技术栈，多多少少要了解一些各平台的原生技术。

二、WebView 控件

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

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

三、原生技术栈

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

3.1 Xcode

它可以在 Mac 电脑上通过应用商店免费安装。注意，Xcode 只支持 Mac 系统，不支持其他系统。

然后，就进入了开发环境。

上面代码的意思是，启动 App 加载视图的时候（loadView()），新建一个 WebView 控件的实例。视图加载成功后（viewDidLoad()），WebView 再去加载外部网页（红框部分）。

如果一切正常，就可以让 Xcode 对源码打包，生成 App 的二进制安装文件。

安卓的官方开发工具是 Android Studio，可以去官网^[5]下载。

Android Studio 会询问项目参数，包括项目名称、开发语言（Java）等，然后就进入了开发环境。因为它是基于 Java IDE 修改的，懂 Java 的朋友应该对这个界面比较熟悉。

上面红框处的代码，就是在页面上添加并设置 WebView 实例，指定生成视图的时候（onCreate()），WebView 实例去加载外部网页。

如果一切正常，就可以让 Android Studio 打包，生成 App 的二进制安装文件。

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

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

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

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

基于 Cordova 的框架，用法都大同小异，下面就以 Ionic 为例，演示如何加载外部网页。

接着打开src/pages/Home.tsx文件，插入<iframe>标签即可。

然后，在本机起一个 Web 服务，看看 Demo 的效果。

$ ionic serve

如果一切正常，在命令行窗口按 Ctrl+c，退出服务。编译成 App 安装包的方法可以参考官方文档^[13]。

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

oReact Native: 使用 JavaScipt 语言编写页面oXamarin：使用 C# 语言编写页面oFlutter：使用 Dart 语言编写页面

（1）原理

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

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

下面就是 React Native 加载外部网页的实例。为了方便使用，官方团队提供了一个封装好的工具集，叫做 Expo^[15]。第一步，在手机安装 Expo 的 App 客户端（App Store^[16]，Google Play^[17]）。

新建项目时，会要求你选择项目模板，可以选minimum模板。然后，还会要求你填写项目描述displayName，这个可以随便写。

接着，打开主页面的脚本文件App.js，将其改成下面的代码。

接下来，预览页面效果。可以先把它编译成 Web 版，在浏览器预览，这样比较快，立刻就能看到效果。

$ npm run web

这时可以打开手机端的 Expo 客户端，扫描这个二维码，就会显示 App 的页面。注意，计算机和手机必须在同一个局域网。

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

如果你想用 React Native 做到 iOS 和安卓体验一致，并且充分发挥原生控件的功能，就需要同时熟悉 React Native、iOS、安卓三个平台，这对开发者的要求实在太高了。Airbnb 公司在使用 React Native 两年后，宣布放弃，改用原生技术栈。他们写了一篇很长的文章^[18]，解释为什么这么做，React Native 到底有什么问题，大家可以参考那篇文章。

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

上面代码中，首先新建了一个 WebView 控件的实例，然后把这个实例放到布局上，跟原生 App 的语法很像。

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

Flutter 历史还不长，应用还不广泛，API 也没稳定下来。但是很值得关注。

上面代码使用的是 Dart 语言。它是 Flutter 的官方语言，接近 Javascript 语法，但是多了静态类型支持。

通过上面的介绍，希望大家已经了解了各种技术栈的特点。

（2）混合技术栈的成本低，灵活性好，对性能要求不高的简单 App，尤其是纯展示性的页面，可以采用这种方式开发。

（正文完）

手机 App 的 UI（用户界面），往往是 App 成功的关键因素：产品的外观是否漂亮，点击和滑动是否流畅，意图是否清晰，都会影响到用户的留存率。一个好的 UI 不仅体现了产品经理和开发者的素质，还可以有效降低拉新成本。

这就要求开发者具有实现高级 UI 的开发能力，理解安卓 UI 的底层实现原理，比如自定义 View 的渲染流程（onMeasure->onLayout->onDraw），以及交互设计（touch事件）。

这个课程是直播课程，在线实时答疑，特别邀请了 Alvin 老师（前三星/小米高级研发经理）主讲，只需要0.1元就能参与。听课之后觉得满意，还可以学习其他 Android 高级进阶的实战课程。

References

[2]“腾讯课堂”:https://ke.qq.com/

[4]官方文档:https://developer.apple.com/documentation/webkit/wkwebview

[6]这篇教程:https://codingislove.com/android-web-view/

[8]Apache Cordova:https://cordova.apache.org/

[10]Monaca:https://monaca.io/

[12]官方文档:https://ionicframework.com/docs/react/your-first-app

[14]Nativescript:https://www.nativescript.org/

[16]App Store:https://itunes.apple.com/app/apple-store/id982107779

[18]很长的文章:https://medium.com/airbnb-engineering/sunsetting-react-native-1868ba28e30a

[20]Flutter:https://flutter.dev/

[21]这篇文章:https://medium.com/flutter/the-power-of-webviews-in-flutter-a56234b57df2