苹果及安桌登录主界面实现原理

一、手机 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。

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

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

不同的 App 技术栈要显示网页，区别仅仅在于怎么处理 WebView 这个原生控件。
原生技术栈：需要开发者自己把 WebView 控件放到页面上。
混合技术栈：页面本身就是网页，默认在 WebView 中显示。
跨平台技术栈：提供一个 WebView 的语法，编译的时候将其换成原生的 WebView。
注意，不同系统的 WebView 控件名称不一样，安卓系统就叫 WebView，iOS 系统有较老的 UIWebView，也有较新的 WKWebView，作用都是一样的，差异在于功能的强弱。

三、swift项目
找到ViewController.swifter文件，它负责视图逻辑。按照官方文档，填入下面的代码

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

四、
Android Studio
把MainActivity.java文件改成下面这样。

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