前端非原生開發有多少種方法

今天來探討下開發手機APP都有那些技術手段

大致分為三種開發模式：原生、混合開發、跨平台開發

原生方式：

原生技術棧指的是，只能用於特定手機平台的開發技術。比如，安卓平台的 Java 技術棧，iOS 平台的 Object-C 技術棧或 Swift 技術棧。

混合開發：

混合開發，也就是把 Web 網頁放到特定的容器中，然後再打包成各個平台的原生 App。所以，混合技術棧其實是 Web 技術棧 + 容器技術棧，典型代表是 PhoneGap、Cordova、Ionic 等框架

跨平台 App：

跨平台開發指的是使用一種技術，同時支持多個手機平台。它與混合技術棧的區別是，不使用 Web 技術，即它的頁面不是 HTML5 頁面，而是使用自己的語法寫的 UI 層，然後編譯成各平台的原生 App。

這個技術棧就是純粹的容器技術棧，React Native、Xamarin、Flutter 都屬於這一類。學習時，除了學習容器的 API Bridge，還要學習容器提供的 UI 層，即怎麼寫頁面

總結：H5 開發主要用在混合技術棧。但是，跨平台技術棧的某些容器也會用到（比如 React Native），因為它們的 UI 層借鑑了 Web 模型。

另外，混合技術棧和跨平台技術棧的基礎，都是原生技術棧，因為最終都要編譯成原生App。所以，不管使用哪一種技術棧，多多少少要了解一些各平台的原生技術。

此外 WebView 控件

不管什麼技術，最終在 App 裏面顯示網頁，一定需要一個網頁引擎，這樣才能解析網頁。通常情況下，App 內部會使用 WebView 控件作為網頁引擎。這是系統自帶的控件，專門用來顯示網頁。應用程序的界面，只要放上 WebView，就好像內嵌了瀏覽器窗口，可以顯示網頁。不同的 App 技術棧要顯示網頁，區別僅僅在於怎麼處理 WebView 這個原生控件。

原生開發：需要開發者自己把 WebView 控件放到頁面上。

混合開發：頁面本身就是網頁，默認在 WebView 中顯示。

跨平台開發：提供一個 WebView 的語法，編譯的時候將其換成原生的 WebView。

不同系統的 WebView 控件名稱不一樣，安卓系統就叫 WebView，iOS 系統有較老的 UIWebView，也有較新的 WKWebView，作用都是一樣的，差異在於功能的強弱。