如果你熟习 Java 措辞，可以学习安卓开拓；如果熟习脚本措辞（比如 Python 或 Ruby），可以学习 Swift 措辞，进行 iOS 开拓；如果像我一样，比较熟习 Web 网页技能，那么 H5 开拓是最随意马虎上手的。
这个系列教程的第一篇，已经先容过了手机 App 的种类[1]。所谓的 H5 页面，实在便是稠浊 App 的前端，表面是一个原生的壳，里面是 Web 网页。本文紧接上一篇，先容手机 App 开拓的技能栈，尤其是跟 H5 开拓干系的技能。
本文由海内最大的在线教诲平台之一“腾讯教室”[2]资助。他们现在启动了“腾讯教室101操持”[3]，推广优质课程资源。希望学习和提高手机 App 开拓技能的朋友，可以留神一下本文结尾的安卓课程信息。
手机 App 的技能栈可以分成三类。
（1）原生 App 技能栈（native technology stack）
原生技能栈指的是，只能用于特定手机平台的开拓技能。比如，安卓平台的 Java 技能栈，iOS 平台的 Object-C 技能栈或 Swift 技能栈。
这种技能栈只能用在一个平台，不能跨平台。
（2）稠浊 App 技能栈（hybrid technology stack）
稠浊技能栈指的是开拓稠浊 App 的技能，也便是把 Web 网页放到特定的容器中，然后再打包成各个平台的原生 App。以是，稠浊技能栈实在是 Web 技能栈 + 容器技能栈，范例代表是 PhoneGap、Cordova、Ionic 等框架。
如果已经节制了 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 的技能实现有一个总体的认识。
二、WebView 控件
讲解详细的技能栈之前，大家须要知道，不管什么技能，终极在 App 里面显示网页，一定须要一个网页引擎，这样才能解析网页。
常日情形下，App 内部会利用 WebView 控件作为网页引擎。这是系统自带的控件，专门用来显示网页。运用程序的界面，只要放上 WebView，就彷佛内嵌了浏览器窗口，可以显示网页。
不同的 App 技能栈要显示网页，差异仅仅在于怎么处理 WebView 这个原生控件。
•原生技能栈：须要开拓者自己把 WebView 控件放到页面上。•稠浊技能栈：页面本身便是网页，默认在 WebView 中显示。•跨平台技能栈：供应一个 WebView 的语法，编译的时候将其换成原生的 WebView。
把稳，不同系统的 WebView 控件名称不一样，安卓系统就叫 WebView，iOS 系统有较老的 UIWebView，也有较新的 WKWebView，浸染都是一样的，差异在于功能的强弱。
三、原生技能栈
原生技能栈分成 iOS 和安卓两个平台。
大略说，iOS 的原生技能栈便是利用 Object-C 措辞或 Swift 措辞，在 Xcode 开拓环境中编程。安卓的原生技能栈，则是利用 Java 措辞或 Kotlin 措辞，开拓环境是 Android Studio。
下面就来看看，它们怎么加载网页。
3.1 Xcode iOS 开拓须要安装 Xcode。它是一种集成开拓环境（IDE），也是苹果公司指定的 iOS 官方开拓工具，所有苹果手机的 App 都由它打包天生。 它可以在 Mac 电脑上通过运用商店免费安装。把稳，Xcode 只支持 Mac 系统，不支持其他系统。 安装完成后，打开新建一个项目，类型是单视图 App，然后系统会讯问一些项目参数和储存位置，这里就不详细解释了。 然后，就进入了开拓环境。 左侧的目录树里面，找到 上面代码的意思是，启动 App 加载视图的时候（ 然后，就可以查看代码运行结果。点击工具栏的运行按钮，Xcode 就会弹出一个 iPhone 仿照器，里面便是当前代码的运行结果。 如果统统正常，就可以让 Xcode 对源码打包，天生 App 的二进制安装文件。 3.2 Android Studio 安卓的官方开拓工具是 Android Studio，可以辞官网[5]下载。 安装完成后，打开新建一个项目，类型是“Empty Activity”。 Android Studio 会讯问项目参数，包括项目名称、开拓措辞（Java）等，然后就进入了开拓环境。由于它是基于 Java IDE 修正的，懂 Java 的朋友该当对这个界面比较熟习。 按照网上的这篇教程[6]，接下来须要修正三个文件，个中最紧张的是把 上面红框处的代码，便是在页面上添加并设置 WebView 实例，指定天生视图的时候（ 运行代码之前，Android Studio 哀求必须连接真机，或安装安卓仿照器。完成往后后，在工具栏上点击运行按钮，就可以运行代码查看效果了。 如果统统正常，就可以让 Android Studio 打包，天生 App 的二进制安装文件。 四、稠浊技能栈 上面的原生技能栈须要自己新建 WebView 实例，比较之下，稠浊技能栈就大略多了。由于页面便是网页，以是容器已经设置好了 WebView，开拓者直接写页面即可。 4.1 框架种类 稠浊技能栈的各种容器框架之中，历史最悠久是 PhoneGap[7]，出身于2009年。后来在2011年被 Adobe 公司收购，改名为 Adobe PhoneGap。 Adobe 公司将 PhoneGap 的核心代码，后来都捐给了 Apache 基金会，作为一个全新的开源项目，名为 Apache Cordova[8]。 PhoneGap 和 Cordova 现在是两个独立发展的开源项目，但是彼此有密切的关系，可以大略理解成 Cordova 是 PhoneGap 的内核，PhoneGap 是 Cordova 的发行版。 后来，其他人也开始基于 Cordova 封装自己的框架，以是市场上有许多基于 Cordova 的开源框架，比较著名的有 Ionic[9]、Monaca[10]、Framework7[11]等。 所有这些框架的共同点，都是利用 Web 技能（HTML5 + CSS + JavaScript）开拓页面，再由框架分别打包成 iOS 和安卓的 App 安装包。它们的优点是开拓大略、周期短、本钱低，缺陷是功能和性能都很有限。 4.2 Ionic 实例 基于 Cordova 的框架，用法都大同小异，下面就以 Ionic 为例，演示如何加载外部网页。 首先，根据官方文档[12]，天生项目的脚手架。 接着打开 上面代码中，由于页面本身便是网页，以是可以直接用 然后，在本机起一个 Web 做事，看看 Demo 的效果。 上面命令会自动打开浏览器窗口，访问本机的8100端口，在浏览器中显示网页效果。 如果统统正常，在命令行窗口按 Ctrl+c，退出做事。编译成 App 安装包的方法可以参考官方文档[13]。 五、跨平台技能栈 上面的稠浊技能栈利用 HTML 措辞编写页面，再用 WebView 控件加载页面，以是只写一次页面，就能支持多个平台。跨平台技能栈也能做到多平台支持，但是事理完备不同。 跨平台技能栈的框架，都是利用自己的语法编写页面，不该用 Web 技能，编译的时候再将其转为原生控件，或者利用自己的底层控件，天生原生 App。这样就完备办理了 Web 页面性能不佳的问题。下面先容三个这样的框架。 •React Native: 利用 JavaScipt 措辞编写页面•Xamarin：利用 C# 措辞编写页面•Flutter：利用 Dart 措辞编写页面 （1）事理 2013年， Facebook 公司发布了 React 框架。这个框架是为网页开拓设计的，核心思想是在网页之上，建立一个 UI 的抽象层，所有数据操作都在这个抽象层完成（即在内存里面完成），然后再渲染成网页的 DOM 构造，这样就提升了性能。 很快，工程师们就意识到了，UI 抽象层实质上是一种数据构造，与底层设备无关，不仅可以渲染成网页，也可以渲染成手机的原生页面。这样的话，只要写一次 React 页面，就能分别编译成 iOS 和安卓的原生 App。这便是 React Native 项目的由来。 把稳，React Native 虽然也利用 JavaScript 措辞，并且写法看上去像 Web 页面，但实在所有控件都是自己定义的，编译时再逐一翻译为对应的原生控件。举例来说，React Native 的文本渲染控件是 还有一个 NativeScript[14]框架，跟 React Native 很像，也是利用 JavaScript 措辞，然后编译成原生控件。不过，它的开拓模型是基于 Angular.js，而不是 React。 （2）实例 下面便是 React Native 加载外部网页的实例。为了方便利用，官方团队供应了一个封装好的工具集，叫做 Expo[15]。第一步，在手机安装 Expo 的 App 客户端（App Store[16]，Google Play[17]）。 然后，在命令行安装脚手架工具 新建项目时，会哀求你选择项目模板，可以选 然后，安装 React Native 自己的 WebView 控件。 接着，打开主页面的脚本文件 上面代码中，React Native 自身的 接下来，预览页面效果。可以先把它编译成 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 两年后，宣告放弃，改用原生技能栈。他们写了一篇很长的文章[18]，阐明为什么这么做，React Native 到底有什么问题，大家可以参考那篇文章。 5.2 Xamarin Xamarin 是微软公司的跨平台 App 开拓框架，事理跟 React Native 很相似，只不过它的措辞是 C#。 它的利用须要 Visual Studio，这里就不举例了。根据官方文档[19]，WebView 的用法如下。 上面代码中，首先新建了一个 WebView 控件的实例，然后把这个实例放到布局上，跟原生 App 的语法很像。 5.3 Flutter Flutter[20]是谷歌公司最新的跨平台开拓框架。它为理解决 React Native 的平台差异问题，采取了一个完备不同的方案。 它自己实现了一套控件。打包的时候，会把这套控件打包进每一个 App，因此不存在调用原生控件的问题。不管什么平台，都调用内嵌的自己那套控件，就能做到 iOS 和安卓体验完备同等。 Flutter 历史还不长，运用还不广泛，API 也没稳定下来。但是很值得关注。 加载外部网页的实例，可以参考 Flutter 官方团队的这篇文章[21]。核心代码如下： 上面代码利用的是 Dart 措辞。它是 Flutter 的官方措辞，靠近 JavaScript 语法，但是多了静态类型支持。 六、总结 通过上面的先容，希望大家已经理解了各种技能栈的特点。 （1）原生技能栈的技能和体验最好，对付繁芜的大型 App，如果条件许可，该当采取这种办法开拓。 （2）稠浊技能栈的本钱低，灵巧性好，对性能哀求不高的大略 App，尤其是纯展示性的页面，可以采取这种办法开拓。 （3）跨平台技能栈适用于，存在外部或内部条件的限定，只有一个团队开拓跨平台 App 的情形。 （正文完） 安卓开拓高等 UI 课程 手机 App 的 UI（用户界面），每每是 App 成功的关键成分：产品的外不雅观是否俊秀，点击和滑动是否流畅，意图是否清晰，都会影响到用户的留存率。一个好的 UI 不仅表示了产品经理和开拓者的本色，还可以有效降落拉新本钱。 一样平常的开拓者接到产品的 UI 设计方案之后，可能就会去网上找类似的效果，看看有没有开源代码。但是，精良的开拓者会努力思考，如何通过完备自定义来实现这个效果，做到功能和性能的最佳状态。 这就哀求开拓者具有实现高等 UI 的开拓能力，理解安卓 UI 的底层实现事理，比如自定义 View 的渲染流程（ 若何才能高效地学习安卓高等 UI 开拓，早日进阶成为高等安卓工程师呢？这里先容享学教室的一门课程 《高等安卓 UI ——自定义 ViewGroup 与 UI 性能优化》，它带大家一行一行代码去实现一个京东自定义 这个课程是直播课程，在线实时答疑，特殊约请了 Alvin 老师（前三星/小米高等研发经理）主讲，只须要0.1元就能参与。听课之后以为满意，还可以学习其他 Android 高等进阶的实战课程。 （完） ReferencesViewController.swifter文件，它卖力视图逻辑。按照官方文档[4]，填入下面的代码。loadView()），新建一个 WebView 控件的实例。视图加载成功后（viewDidLoad()），WebView 再去加载外部网页（红框部分）。MainActivity.java文件改成下面这样。onCreate()），WebView 实例去加载外部网页。$ npm install -g ionic@latest$ ionic start myApp blank --type=react$ cd myAppsrc/pages/Home.tsx文件，插入<iframe>标签即可。<iframe>标签插入外部网页。$ ionic serve<Text>，翻译成 iOS 控件为UIView，翻译成安卓控件为TextView。这种做即担保了性能，又做到了跨平台支持，以是一出身就引起开拓者的关注，成了热门技能。expo-cli，新建一个示意项目。$ npm install -g expo-cli$ expo init rnDemominimum模板。然后，还会哀求你填写项目描述displayName，这个可以随便写。$ cd rnDemo$ npm install --save react-native-webviewApp.js，将其改成下面的代码。WebView控件，编译时会分别转为 iOS 和安卓的原生 WebView 控件。$ npm run webonMeasure->onLayout->onDraw），以及交互设计（touch事宜）。ViewGroup，研究系统的FrameLayout与ViewPager的源码，末了通过阅读源码，剖析ViewPager设计过程中的显示问题和性能问题。下图是课程先容（点击看大图）。[1]手机 App 的种类:http://www.ruanyifeng.com/blog/2019/12/hybrid-app-concepts.html[2]“腾讯教室”:https://ke.qq.com/[3]“腾讯教室101操持”:https://edu.qq.com/a/20190119/005414.htm[4]官方文档:https://developer.apple.com/documentation/webkit/wkwebview[5]官网:https://developer.android.com/studio[6]这篇教程:https://codingislove.com/android-web-view/[7]PhoneGap:https://phonegap.com/[8]Apache Cordova:https://cordova.apache.org/[9]Ionic:https://ionicframework.com/[10]Monaca:https://monaca.io/[11]Framework7:https://framework7.io/[12]官方文档:https://ionicframework.com/docs/react/your-first-app[13]官方文档:https://ionicframework.com/docs/react/your-first-app#build-a-native-app[14]NativeScript:https://www.nativescript.org/[15]Expo:https://expo.io/[16]App Store:https://itunes.apple.com/app/apple-store/id982107779[17]Google Play:https://play.google.com/store/apps/details?id=host.exp.exponent[18]很长的文章:https://medium.com/airbnb-engineering/sunsetting-react-native-1868ba28e30a[19]官方文档:https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.webview?view=xamarin-forms[20]Flutter:https://flutter.dev/[21]这篇文章:https://medium.com/flutter/the-power-of-webviews-in-flutter-a56234b57df2
