新人学习手机 App 开发，一开始总要选择一条学习路径。html
若是你熟悉 Java 语言，能够学习安卓开发；若是熟悉脚本语言（好比 Python 或 Ruby），能够学习 Swift 语言，进行 iOS 开发；若是像我同样，比较熟悉 Web 网页技术，那么 H5 开发是最容易上手的。前端
这个系列教程的第一篇，已经介绍过了手机 App 的种类。所谓的 H5 页面，其实就是混合 App 的前端，外面是一个原生的壳，里面是 Web 网页。本文紧接上一篇，介绍手机 App 开发的技术栈，尤为是跟 H5 开发相关的技术。java
本文由国内最大的在线教育平台之一"腾讯课堂"赞助。他们如今启动了"腾讯课堂101计划"，推广优质课程资源。但愿学习和提升手机 App 开发技术的朋友，能够留意一下本文结尾的安卓课程信息。react
1、手机 App 的技术栈
手机 App 的技术栈能够分红三类。android
（1）原生 App 技术栈 （native technology stack）web
原生技术栈指的是，只能用于特定手机平台的开发技术。好比，安卓平台的 Java 技术栈，iOS 平台的 Object-C 技术栈或 Swift 技术栈。apache
这种技术栈只能用在一个平台，不能跨平台。npm
（2）混合 App 技术栈 （hybrid technology stack）编程
混合技术栈指的是开发混合 App 的技术，也就是把 Web 网页放到特定的容器中，而后再打包成各个平台的原生 App。因此，混合技术栈实际上是 Web 技术栈 + 容器技术栈，典型表明是 PhoneGap、Cordova、Ionic 等框架。swift
若是已经掌握了 Web 技术，这个技术栈就主要学习容器提供的 API Bridge，网页经过它们去调用底层硬件的 API。
（3）跨平台 App 技术栈 （cross-platform technology stack）
跨平台技术栈指的是使用一种技术，同时支持多个手机平台。它与混合技术栈的区别是，不使用 Web 技术，即它的页面不是 HTML5 页面，而是使用本身的语法写的 UI 层，而后编译成各平台的原生 App。
这个技术栈就是纯粹的容器技术栈，React Native、Xamarin、Flutter 都属于这一类。学习时，除了学习容器的 API Bridge，还要学习容器提供的 UI 层，即怎么写页面。
（4）小结
H5 开发主要用在混合技术栈。可是，跨平台技术栈的某些容器也会用到（好比 React Native），由于它们的 UI 层借鉴了 Web 模型。
另外，混合技术栈和跨平台技术栈的基础，都是原生技术栈，由于最终都要编译成原生App。因此，无论使用哪种技术栈，多多少少要了解一些各平台的原生技术。
下面就依次介绍上面三类技术栈，每一个技术栈都会给出一个最简单的例子：加载网页。经过各类技术栈加载网页的不一样作法，帮助你们理解它们的特色，对 App 的技术实现有一个整体的认识。
2、WebView 控件
讲解具体的技术栈以前，你们须要知道，无论什么技术，最终在 App 里面显示网页，必定须要一个网页引擎，这样才能解析网页。
一般状况下，App 内部会使用 WebView 控件做为网页引擎。这是系统自带的控件，专门用来显示网页。应用程序的界面，只要放上 WebView，就好像内嵌了浏览器窗口，能够显示网页。
不一样的 App 技术栈要显示网页，区别仅仅在于怎么处理 WebView 这个原生控件。
- 原生技术栈：须要开发者本身把 WebView 控件放到页面上。
- 混合技术栈：页面自己就是网页，默认在 WebView 中显示。
- 跨平台技术栈：提供一个 WebView 的语法，编译的时候将其换成原生的 WebView。
注意，不一样系统的 WebView 控件名称不同，安卓系统就叫 WebView，iOS 系统有较老的 UIWebView，也有较新的 WKWebView，做用都是同样的，差别在于功能的强弱。
3、原生技术栈
原生技术栈分红 iOS 和安卓两个平台。
简单说，iOS 的原生技术栈就是使用 Object-C 语言或 Swift 语言，在 Xcode 开发环境中编程。安卓的原生技术栈，则是使用 Java 语言或 Kotlin 语言，开发环境是 Android Studio。
下面就来看看，它们怎么加载网页。
3.1 Xcode
iOS 开发须要安装 Xcode。它是一种集成开发环境（IDE），也是苹果公司指定的 iOS 官方开发工具，全部苹果手机的 App 都由它打包生成。
它能够在 Mac 电脑上经过应用商店免费安装。注意，Xcode 只支持 Mac 系统，不支持其余系统。
安装完成后，打开新建一个项目，类型是单视图 App，而后系统会询问一些项目参数和储存位置，这里就不详细说明了。
而后，就进入了开发环境。
左侧的目录树里面，找到ViewController.swifter文件，它负责视图逻辑。按照官方文档，填入下面的代码。
上面代码的意思是，启动 App 加载视图的时候（loadView()），新建一个 WebView 控件的实例。视图加载成功后（viewDidLoad()），WebView 再去加载外部网页（红框部分）。
而后，就能够查看代码运行结果。点击工具栏的运行按钮，Xcode 就会弹出一个 iPhone 模拟器，里面就是当前代码的运行结果。
若是一切正常，就可让 Xcode 对源码打包，生成 App 的二进制安装文件。
3.2 Android Studio
安卓的官方开发工具是 Android Studio，能够去官网下载。
安装完成后，打开新建一个项目，类型是"Empty Activity"。
Android Studio 会询问项目参数，包括项目名称、开发语言（Java）等，而后就进入了开发环境。由于它是基于 Java IDE 修改的，懂 Java 的朋友应该对这个界面比较熟悉。
按照网上的这篇教程，接下来须要修改三个文件，其中最主要的是把MainActivity.java文件改为下面这样。
上面红框处的代码，就是在页面上添加并设置 WebView 实例，指定生成视图的时候（onCreate()），WebView 实例去加载外部网页。
运行代码以前，Android Studio 要求必须链接真机，或安装安卓模拟器。完成之后后，在工具栏上点击运行按钮，就能够运行代码查看效果了。
若是一切正常，就可让 Android Studio 打包，生成 App 的二进制安装文件。
4、混合技术栈
上面的原生技术栈须要本身新建 WebView 实例，相比之下，混合技术栈就简单多了。由于页面就是网页，因此容器已经设置好了 WebView，开发者直接写页面便可。
4.1 框架种类
混合技术栈的各类容器框架之中，历史最悠久是 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 安装包。它们的优势是开发简单、周期短、成本低，缺点是功能和性能都颇有限。
4.2 Ionic 实例
基于 Cordova 的框架，用法都大同小异，下面就以 Ionic 为例，演示如何加载外部网页。
首先，根据官方文档，生成项目的脚手架。
$ npm install -g ionic@latest $ ionic start myApp blank --type=react $ cd myApp
接着打开 src/pages/Home.tsx 文件，插入 iframe 标签便可。
上面代码中，因为页面自己就是网页，因此能够直接用iframe标签插入外部网页。
而后，在本机起一个 Web 服务，看看 Demo 的效果。
$ ionic serve
上面命令会自动打开浏览器窗口，访问本机的8100端口，在浏览器中显示网页效果。
若是一切正常，在命令行窗口按 Ctrl+c，退出服务。编译成 App 安装包的方法能够参考官方文档。
5、跨平台技术栈
上面的混合技术栈使用 HTML 语言编写页面，再用 WebView 控件加载页面，因此只写一次页面，就能支持多个平台。跨平台技术栈也能作到多平台支持，可是原理彻底不一样。
跨平台技术栈的框架，都是使用本身的语法编写页面，不使用 Web 技术，编译的时候再将其转为原生控件，或者使用本身的底层控件，生成原生 App。这样就彻底解决了 Web 页面性能不佳的问题。下面介绍三个这样的框架。
- React Native: 使用 JavaScipt 语言编写页面
- Xamarin：使用 C# 语言编写页面
- Flutter：使用 Dart 语言编写页面
5.1 React Native
（1）原理
2013年， Facebook 公司发布了 React 框架。这个框架是为网页开发设计的，核心思想是在网页之上，创建一个 UI 的抽象层，全部数据操做都在这个抽象层完成（即在内存里面完成），而后再渲染成网页的 DOM 结构，这样就提高了性能。
很快，工程师们就意识到了，UI 抽象层本质上是一种数据结构，与底层设备无关，不只能够渲染成网页，也能够渲染成手机的原生页面。这样的话，只要写一次 React 页面，就能分别编译成 iOS 和安卓的原生 App。这就是 React Native 项目的由来。
注意，React Native 虽然也使用 JavaScript 语言，而且写法看上去像 Web 页面，但其实全部控件都是本身定义的，编译时再一一翻译为对应的原生控件。举例来讲，React Native 的文本渲染控件是<Text>，翻译成 iOS 控件为UIView，翻译成安卓控件为TextView。这种作即保证了性能，又作到了跨平台支持，因此一诞生就引发开发者的关注，成了热门技术。
还有一个 NativeScript 框架，跟 React Native 很像，也是使用 JavaScript 语言，而后编译成原生控件。不过，它的开发模型是基于 Angular.js，而不是 React。
（2）实例
下面就是 React Native 加载外部网页的实例。为了方便使用，官方团队提供了一个封装好的工具集，叫作 Expo。第一步，在手机安装 Expo 的 App 客户端（App Store，Google Play）。
而后，在命令行安装脚手架工具expo-cli，新建一个示意项目。
$ npm install -g expo-cli $ expo init rnDemo
新建项目时，会要求你选择项目模板，能够选minimum模板。而后，还会要求你填写项目描述displayName，这个能够随便写。
而后，安装 React Native 本身的 WebView 控件。
$ cd rnDemo
$ npm install --save react-native-webview
接着，打开主页面的脚本文件App.js，将其改为下面的代码。
上面代码中，React Native 自身的WebView控件，编译时会分别转为 iOS 和安卓的原生 WebView 控件。
接下来，预览页面效果。能够先把它编译成 Web 版，在浏览器预览，这样比较快，马上就能看到效果。
$ npm run web
运行上面的命令，命令行会出现一个二维码。
这时能够打开手机端的 Expo 客户端，扫描这个二维码，就会显示 App 的页面。注意，计算机和手机必须在同一个局域网。
（3）React Native 的问题
React Native 的想法虽然很美好，可是实际开发中出现了各类各样的问题。
最主要的一个问题是， UI 抽象层翻译出来的 iOS 和安卓原生页面，作不到彻底一致，尤为是复杂页面，样式或功能存在差别。编译出来两个平台的原生 App 每每是一个正常，另外一个会出现各类奇怪的小毛病。React Native 的底层仍是没有作到无缝适配，它至今没有发布 1.0 版（2019年末是 0.61 版），这多多少少也说明了一些问题。
若是你想用 React Native 作到 iOS 和安卓体验一致，而且充分发挥原生控件的功能，就须要同时熟悉 React Native、iOS、安卓三个平台，这对开发者的要求实在过高了。Airbnb 公司在使用 React Native 两年后，宣布放弃，改用原生技术栈。他们写了一篇很长的文章，解释为何这么作，React Native 到底有什么问题，你们能够参考那篇文章。
5.2 Xamarin
Xamarin 是微软公司的跨平台 App 开发框架，原理跟 React Native 很类似，只不过它的语言是 C#。
它的使用须要 Visual Studio，这里就不举例了。根据官方文档，WebView 的用法以下。
上面代码中，首先新建了一个 WebView 控件的实例，而后把这个实例放到布局上，跟原生 App 的语法很像。
5.3 Flutter
Flutter 是谷歌公司最新的跨平台开发框架。它为了解决 React Native 的平台差别问题，采用了一个彻底不一样的方案。
它本身实现了一套控件。打包的时候，会把这套控件打包进每个 App，所以不存在调用原生控件的问题。无论什么平台，都调用内嵌的本身那套控件，就能作到 iOS 和安卓体验彻底一致。
Flutter 历史还不长，应用还不普遍，API 也没稳定下来。可是很值得关注。
加载外部网页的实例，能够参考 Flutter 官方团队的这篇文章。核心代码以下：
上面代码使用的是 Dart 语言。它是 Flutter 的官方语言，接近 JavaScript 语法，可是多了静态类型支持。
6、总结
经过上面的介绍，但愿你们已经了解了各类技术栈的特色。
（1）原生技术栈的技能和体验最好，对于复杂的大型 App，若是条件容许，应该采用这种方式开发。
（2）混合技术栈的成本低，灵活性好，对性能要求不高的简单 App，尤为是纯展现性的页面，能够采用这种方式开发。
（3）跨平台技术栈适用于，存在外部或内部条件的限制，只有一个团队开发跨平台 App 的状况。
（正文完）