学习移动应用开发的新手总是必须在一开始就选择一条学习路径。
如果熟悉Java语言，可以学习Android开发； 如果你熟悉脚本语言（如Python或Ruby），可以学习Swift语言进行iOS开发； 如果你和我一样，对网页技术比较熟悉，那么H5开发是最容易上手的。
本系列教程的第一部分已经介绍了移动应用程序的类型。 所谓的H5页面，其实就是混合应用的后端，外面是原生shell，里面是网页。 本文继上一篇文章之后，介绍了移动App开发的技术栈，特别是H5开发相关的技术。
本文由国外最大的在线教育平台之一“腾讯课堂”赞助。 他们现在推出了“腾讯课堂101计划”，推广优质课程资源。 想要学习和提高移动App开发技术的同学可以关注本文最后的Android课程信息。
1. 移动应用技术栈
移动应用程序的技术栈可以分为三类。
（1）Native App技术栈（原生技术栈）
原生技术栈是指只能用于特定手机平台的开发技术。 例如Android平台的Java技术栈、iOS平台的Object-C技术栈或Swift技术栈。
这个技术栈只能在一个平台上使用，不能跨平台。
（2）Hybrid App技术栈（混合技术栈）
混合技术栈是指开发混合应用程序的技术，即将网页放在特定的容器中，然后将其打包成各个平台的原生应用程序。 因此，混合技术栈看起来就是Web技术栈+容器技术栈，典型代表有PhoneGap、Cordova、Ionic等框架。
如果你已经掌握了Web技术，这个技术栈主要学习容器提供的API Bridge，网页通过它们来调用底层硬件的API。
（3）跨平台App技术栈（跨平台技术栈）
跨平台技术栈是指使用一种技术同时支持多个手机平台。 它与混合技术栈的区别在于，它不使用Web技术，即它的页面不是HTML5页面，而是用自己的句型编写的UI层，然后编译成各个平台的原生应用程序。
这个技术栈是纯容器技术栈，React Native、Xamarin、Flutter都属于这一类。 学习的时候，除了学习容器的API Bridge之外，还需要学习容器提供的UI层，即页面如何写。
（四）总结
H5开发主要应用于混合技术栈。 然而，跨平台技术栈的单独容器也被使用（例如React Native），因为它们的UI层借鉴了Web模型。
另外，混合技术栈和跨平台技术栈的基础是原生技术栈，因为它最终必须编译成原生App。 因此，无论使用哪种技术栈，都需要或多或少地了解一些各个平台的原生技术。
下面将依次介绍三类技术栈，每种技术栈都会举一个最简单的例子：加载网页。 通过各种技术栈加载网页的不同方式，将帮助你了解它们的特点，对App的技术实现有一个整体的了解。
二、WebView控件
在讲解具体的技术栈之前，大家需要知道，无论App中使用什么技术来显示网页，都必须需要一个Web引擎，以便能够解析网页。
通常，App内部使用WebView控件作为网页引擎。 这是系统自带的一个控件，专门用来显示网页的。 只要将WebView放置在应用程序的界面上，就如同嵌入了一个浏览器窗口一样，就可以显示网页了。
不同的App技术栈都需要显示网页，唯一的区别就是如何处理原生控件WebView。
原生技术栈：开发者需要自己将WebView控件放到页面上。 混合技术栈：页面本身就是一个网页，默认显示在WebView中。 跨平台技术栈：提供WebView句型，编译时替换为原生WebView。
注意，不同系统中WebView控件的名称是不同的。 Android系统称为WebView，iOS系统有较旧的UIWebView和较新的WKWebView。 功能是一样的，区别在于功能的强弱。
3. 原生技术栈
原生技术栈分为两个平台：iOS和Android。
简单来说，iOS的原生技术栈就是在Xcode开发环境中使用Object-C语言或者Swift语言进行编程。 Android原生技术栈采用Java语言或Kotlin语言，开发环境为Android Studio。
让我们看看他们是如何加载网页的。
3.1 代码
iOS开发需要安装Xcode。 它是一个集成开发环境（IDE），是Apple指定的官方iOS开发工具。 所有苹果手机应用程序都是由它打包和生成的。
它可以从 Mac 计算机上的 App Store 免费安装。 注意，Xcode仅支持Mac系统，不支持其他系统。
安装完成后，打开并创建一个新项目，类型为单视图App，然后系统会询问一些项目参数和存储位置，这里不再详细说明。
然后，进入开发环境。
在左侧目录树上方，找到 ViewController.swifter 文件，该文件负责视图逻辑。 根据官方文档，填写下面的代码。
上面代码的含义是，当应用程序启动加载视图（loadView()）时，创建一个新的WebView控件实例。 视图加载成功后（viewDidLoad()），WebView会加载外部网页（红框内的部分）。
然后就可以查看代码运行结果了。 点击工具栏上的运行按钮，Xcode会弹出一个iPhone模拟器，这是当前代码的运行结果。
如果一切正常，就可以让Xcode打包源码，生成App的二进制安装文件。
3.2 安卓工作室
Android的官方开发工具是Android Studio，可以从官网下载。
安装完成后，打开一个新项目，类型为“Empty Activity”。
Android Studio会询问项目参数，包括项目名称、开发语言（Java）等，然后进入开发环境。 由于是基于Java IDE修改的，了解Java的同学应该对这个界面很熟悉。
根据网上的这个教程[6]，接下来需要改三个文件，其中最重要的就是将MainActivity.java文件改成如下。
上面红框中的代码是在页面上添加并设置一个WebView实例，指定何时生成视图（onCreate()），WebView实例加载外部网页。
在运行代码之前，Android Studio 要求必须连接真实设备，或者安装 Android 模拟器。 完成后点击工具栏上的运行按钮运行代码即可查看效果。
如果一切正常，就可以让Android Studio打包生成App的二进制安装文件了。
4.混合技术栈
上述原生技术栈需要自己创建一个新的WebView实例。 相比之下，混合技术栈要简单得多。 因为页面是网页，容器已经设置好了WebView，开发者可以直接编写页面。
4.1 帧类型
在混合技术栈的各种容器框架中，历史最悠久的是PhoneGap[7]，它诞生于2009年，后来在2011年被Adobe竞标，更名为Adobe PhoneGap。
Adobe 将 PhoneGap 的核心代码捐赠给 Apache 基金会，作为一个名为 Apache Cordova 的新开源项目[8]。
PhoneGap 和 Cordova 现在是两个独立开发的开源项目，但它们彼此密切相关。 可以简单理解为Cordova是PhoneGap的核心，PhoneGap是Cordova的release版本。
后来其他人也开始基于Cordova封装自己的框架，所以市面上有很多基于Cordova的开源框架，比较知名的有Ionic[9]、Monaca[10]、Framework7等。
这些框架的共同点是都是使用Web技术（HTML5+CSS+JavaScript）来开发页面，然后分别打包成iOS和Android的App安装包。 它们的优点是开发简单、周期短、成本低，缺点是功能和性能有限。
4.2 离子实例
基于Cordova框架，用法类似。 我们以Ionic为例，演示如何加载外部网页。
首先，根据官方文档[12]，生成项目的脚手架。
$ npm install -g ionic@latest
$ ionic start myApp 空白 --type=react
$ cd myApp
然后打开 src/pages/Home.tsx 文件并插入标签。
上面的代码中，由于页面本身就是一个网页，所以可以直接使用标签来插入外部网页。
然后，在本机启动一个Web服务，看看Demo的效果。
$ 离子服务
上述命令会手动打开浏览器窗口，访问本机的8100端口，并在浏览器中显示网页的效果。
如果一切正常，在命令行窗口中按Ctrl+c退出服务。 编译成App安装包的方式可以参考官方文档[13]。
5. 跨平台技术栈
上述混合技术栈使用HTML语言编译页面，然后使用WebView控件加载页面，因此只需编写一个页面即可支持多个平台。 跨平台技术栈也可以实现多平台支持，但原理完全不同。
跨平台技术栈的框架使用自己的句型来编译页面，不使用Web技术，并在编译时将其转换为原生控件，或者使用自己的底层控件来生成原生应用程序。 这样就彻底解决了网页性能差的问题。 下面描述了三个这样的框架。
React Native：使用JavaScipt语言编写页面 Xamarin：使用C#语言编写页面 Flutter：使用Dart语言编写页面
5.1 反应本机
(一)原理
2013年，Facebook公司发布了React框架。 该框架专为网页开发而设计。 核心思想是在网页之上构建一个具体的 UI 层。 所有的数据操作都是在这个具体层上完成的（即在显存上完成的）html5 app 打包，然后渲染到网页的DOM结构中。 这提高了性能。
很快，工程师们意识到UI抽象层本质上是一种与底层设备无关的数据结构，不仅可以渲染为网页，还可以渲染为手机原生页面。 这样，只要编写一次React页面，就可以分别编译成iOS和Android的原生应用程序。 这就是 React Native 项目的用武之地。
需要注意的是，React Native虽然也使用了JavaScript语言，而且写法看起来也像网页，但毕竟所有的控件都是自己定义的，在编译的时候都会一一翻译成对应的原生控件。 例如，React Native的文本渲染控件被翻译为iOS控件的UIView和Android控件的TextView。 这种性能既保证了性能，又实现了跨平台的支持，因此一诞生就引起了开发者的关注，成为了热门技术。
还有一个 NativeScript[14] 框架，它与 React Native 非常相似。 它还使用 JavaScript 语言，然后编译为本机控件。 然而，它的开发模型是基于Angular.js，而不是React。
(2) 举例
下面是 React Native 加载外部网页的示例。 为了方便使用，官方团队提供了一个名为 Expo[15] 的打包工具集。 第一步是在手机上安装Expo的App客户端（App Store[16]、Google Play[17]）。
然后，在命令行安装脚手架工具expo-cli，并创建原理图项目。
$ npm install -g expo-cli
$ expo init rnDemo
创建新项目时，会要求您选择项目模板，您可以选择最小模板。 然后会要求你填写项目描述displayName，可以自由书写。
然后，安装React Native自带的WebView控件。
$ cd rn演示
$ npm install --save React-Native-WebView
接下来，打开主页面的脚本文件App.js，将其更改为以下代码。
上面的代码中，React Native自带的WebView控件在编译时会转换为iOS和Android原生的WebView控件。
接下来预览页面效果。 您可以先将其编译成Web版本，然后在浏览器中预览。 这样比较快，立马就能看到疗效。
$ npm 运行网络
运行里面的命令，命令行上会出现一个二维码。
此时，您可以在手机上打开Expo客户端，扫描二维码，就会显示App页面。 注意电脑和手机必须在同一个局域网内。
(3)React Native 的问题
React Native的观点其实很美，但是在实际开发中却出现了各种各样的问题。
最重要的问题是，UI抽象层翻译出来的iOS和Android原生页面无法完全一致，尤其是复杂的页面，样式或功能上存在差异。 两个平台编译出来的原生app往往都是正常的，而另一个平台就会出现各种奇怪的故障。 React Native底层还没有无缝适配。 它还没有发布1.0版本（2019年底的0.61版本），这或多或少说明了一些问题。
如果想要使用React Native实现iOS和Android一样的体验，并充分发挥原生控件的功能，需要同时熟悉React Native、iOS、Android这三个平台，这对开发商来说太高了。 在使用 React Native 两年后，Airbnb 宣布放弃它，转而使用原生技术栈。 他们写了一篇很长的文章[18]解释他们为什么这样做以及 React Native 存在哪些问题。 你可以参考那篇文章。
5.2 Xamarin
Xamarin是微软的跨平台App开发框架，原理与React Native非常相似，但它的语言是C#。
它的使用需要Visual Studio，这里就不举例了。 根据官方文档[19]，WebView的用法如下。
上面的代码中，首先创建一个新的WebView控件实例，然后将这个实例放置到布局上，这和原生App的句型非常相似。
5.3 颤振
Flutter[20]是Google最新的跨平台开发框架。 它采用了完全不同的方案来解决React Native的平台差异问题。
它自己实现了一组控件。 打包时，这套控件会被打包到每个App中，所以不存在调用原生控件的问题。 无论使用何种平台，您都可以使用内置的控件集在 iOS 和 Android 之间实现相同的体验。
Flutter的历史不长，应用尚未广泛，API也尚未稳定。 但非常值得一看。
加载外部网页的示例可以参考Flutter官方团队的这篇文章[21]。 核心代码如下：
上面的代码使用了Dart语言。 它是 Flutter 的官方语言html5 app 打包，接近 JavaScript 语法，但具有更多静态类型支持。
六、总结
通过前面的介绍，希望大家已经了解了各种技术栈的特点。
（1）原生技术栈的技能和经验是最好的。 对于复杂的小型应用程序，如果条件允许，应该采用这些方法进行开发。
(2)混合技术栈成本低、灵活性好。 不需要高性能的简单应用程序，尤其是纯显示页面，可以使用这些方法来开发。
（3）跨平台技术栈适用于有外部或内部限制，只有一个团队开发跨平台应用的情况。
发表评论