>[success] # Native App、Web App、Hybrid App 經常聽到名詞`Native App、Web App、Hybrid App` 這三者區別在 1. **Native App開發模式**，原生APP，使用原生（即Android或iOS）開發的APP應用,**Android 使用的是 Java（現已換成kotlin）,iOS 使用的者 ObjectC（現在主打 Swift 語言）** 2. **Web App開發模式**，是生存在瀏覽器里的應用，所以只能運行在瀏覽器里，宿主是瀏覽器，不再是操作系統。資源一般都在網絡上。利用設備上的瀏覽器(比如`iPhone`的`Safari`)來運行，而且它們不需要在設備上下載后安裝，說的根本點就是一個觸屏版的網站，Web 應用程序可能無法完全使用設備的所有功能，并且用戶體驗可能不如本地應用程序。 3. **混合應用 (Hybrid App)**，即混合開發,在 Native App 里，開一個 Web 容器（一般通稱 Webview），然后把網頁載進來。一般是由`Native`通過`JSBridge`等方法提供統一的`API`,然后用`Html5+JS`來寫實際的邏輯,調用API,這種模式下,由于`Android,iOS`的API一般有一致性,而且最終的頁面也是在`webview`中顯示,所有有跨平臺效果 >[danger] ##### Native App開發模式 優缺點 1. 一般依托于操作系統（如 iOS 或 Android）開發的移動應用程序，使用平臺提供的編程語言和工具，有很強的交互，是一個完整的App，可拓展性強。這些應用程序通常從應用商店下載并安裝在設備上。 ## 優點 **完美的用戶體驗**、**性能穩定**、**使用設備的所有功能例如訪問本地資源（通訊錄，相冊）** ## 缺點 * 分發成本高（不同平臺有不同的開發語言和界面適配） * 維護成本高（例如一款App已更新至V5版本，但仍有用戶在使用V2， V3， V4版本，需要更多的開發人員維護之前的版本） * 更新緩慢，根據不同平臺，提交–審核–上線 等等不同的流程，需要經過的流程較復雜 >[danger] ##### Web APP開發模式 優缺點 1. 一般依托在瀏覽器里，屬于H5頁面，屬于網頁性質，依靠瀏覽器因此不用下載，跨多端都可以使用 ## 優點 * 使用標準的 Web 技術和工具，而不是專用于特定平臺的編程語言和工具。這意味著開發人員可以使用熟悉的技術來開發應用程序，并且應用程序可以在任何具有 Web 瀏覽器的設備上使用包括 Windows、Mac、Linux 等桌面操作系統，以及 iOS、Android 等移動操作系統 * 不需要更新: Web App 不需要安裝和更新，所以開發者可以在任何時間更新應用程序，而用戶也不需要重新安裝和更新 * 更靈活的開發: Web App 可以使用多種 web 技術來構建，例如 HTML、CSS、JavaScript 等，這些技術都是開源的，并且有很多框架和庫可以使用，因此開發者可以更靈活地開發應用程序。 ## 缺點 * 性能問題: Web App 依賴于網頁瀏覽器的性能，如果瀏覽器的性能不好，可能會導致應用程序運行緩慢或者出現其他問題。 * 可能需要在線訪問: Web App 需要在線訪問，如果網絡不穩定或者離線狀態下可能無法使用。 * 可能存在兼容性問題: 不同的瀏覽器兼容 * 因為無法和 Native 互動因此不能使用原生自帶一些功能例如無法存取或呼叫設備硬件功能（電量、藍牙等） >[danger] ##### Hybrid( Native + Web ) 1. 一般依托在，Native App 里，開一個 Web 容器（一般通稱 Webview），然后把網頁載進來。是一個半原生程序，偽造了一個瀏覽器的`apk/ipa`原生程序，把地址寫死了，然后里面運行了一個`webapp`。里面是`WebView UI`。但是還是運行在機器的操作系統上，交互較弱，資源一般在本地或者網絡都可以 2. **以靜態資源打包到app內的方式**，前端將代碼提供給native，native客戶端拿到前端靜態頁面，以文件形式存儲在 app 中`Hybrid `的前端資源在本地，通過`file `協議讀取，讀取速度非常快，且可以做到**斷網模式下頁面合理的展示**。如果前端靜態頁面需要更新，客戶端就需要去server端下載靜態資源，即客戶端每次打開需要去線上檢查有無更新包有就下載壓縮包，解壓更新靜態資源，靜態資源越多native包就越大（所以這種模式更適用于，產品功能穩定，體驗要求又高，且迭代頻繁的場景）。 3. **以線上url方式（更偏H5）**，完全利用h5形式，將資源部署在線上，native打開一個新的webview請求線上資源展示，因此按**需加載，用戶使用到的頁面才會更新，發請求可以不經過native做代理**，不可避免請求線上資源，都需要時間，所以會出現瞬間白屏（弱網模式特別明顯）。斷網模式下沒有內容顯示。 注加載資源模式：**本地讀取：過file 協議** / **線上讀取：通過http或著https 請求加載資源** ## 優點 * 可以快速迭代開發更新。（無需app審核） * hybrid開發效率高,低成本,跨平臺,ios和安卓共用一套h5代碼 * hybrid從業務開發上講，沒有版本問題，有BUG能及時修復 ## 缺點 * 實際部分功能還是通過 `Webview`相當于運行在一個模擬的瀏覽器中，其使用`HTML5`，某些依賴于復雜的原生功能或者繁重的過渡動畫的應用會出現卡頓 >[info] ## 對比圖  >[info] ## React Native 和 uniApp 區別 1. **React Native** 是一種用于構建移動應用程序的框架，它使用 JavaScript 和 React 框架來開發 iOS 和 Android 應用程序。它的基本原理是通過 JavaScript 引擎來解釋執行 JavaScript 代碼，并與原生的 iOS 和 Android 代碼進行交互，來實現原生應用程序的效果。 React Native 不是運行在 WebView 中的，而是使用原生組件來渲染界面，它使用 JavaScriptCore 或者 V8 引擎來執行 JavaScript 代碼，并且通過 JavaScript-Native 橋接器來連接原生組件。 React Native 會在首次啟動時加載 JavaScript 腳本來啟動應用程序，并且在運行時通過 JavaScript 來更新界面。所以說React Native是運行在原生組件上，而不是在webview中。 2. **UniApp (或稱 H5 App)** 是一種使用 Vue.js 框架開發的多端應用程序開發框架。它可以使用一套代碼開發多個平臺的應用程序，包括 iOS、Android 和 Web。 UniApp 運行在 WebView 中，也就是說它是一個 HTML5 應用程序，運行在一個 WebView 容器中。它使用 Vue.js 框架來構建應用程序，并使用 WebView 容器來渲染界面，并在運行時通過 JavaScript 來更新界面。 UniApp 提供了一套 API 來訪問手機的原生功能，這些 API 可以通過 JavaScript 調用來實現對原生組件的控制。 總的來說UniApp是運行在webview中的，它使用Vue.js來構建應用程序并通過webview渲染界面，且可以通過API訪問手機原生功能。 >[danger] ##### rn 原理 **React Native 的工作原理是在 JavaScript 層與原生視圖層之間提供了一個橋梁。它使用 JavaScript 庫來渲染視圖，并使用原生模塊來訪問硬件功能和系統服務。** 當應用程序啟動時，React Native 在 JavaScript 中運行入口組件。這個組件是應用程序的根組件，它可以包含其他組件。React Native 將這些組件轉換為原生視圖，并將它們渲染到屏幕上。 當用戶與應用程序交互時，例如點擊按鈕或輸入文本，React Native 將事件傳遞到 JavaScript 中的組件。組件可以使用這些事件更新自己的狀態，并重新渲染視圖。 React Native 通過使用名為 JavaScript 橋的技術來實現 JavaScript 與原生視圖之間的通信。JavaScript 橋是一種機制，可以在 JavaScript 代碼和原生代碼之間傳遞消息。例如，JavaScript 代碼可以調用原生模塊中的方法來訪問硬件功能，而原生代碼可以調用 JavaScript 代碼來更新視圖。 **React Native 框架不會對應用程序的性能產生重大影響，因為它只是在 JavaScript 層和原生層之間提供了一個橋梁，而不是在運行時重新渲染整個應用程序。** >[danger] ##### uniapp 1. 使用`webview`是單線程的，不管多少個webview，它們的js跑在同一個線程里，會互相影響。js即運行邏輯，又操作頁面渲染，經常會阻塞 2. `uni-app`，引入獨立的js引擎（jscore）后，由單線程變成雙線程。將邏輯層和視圖層分離，邏輯層運行在jscore里，視圖層仍然在webview里，可以大幅提升頁面加載體驗。 3. 打開一個新webview，然后這個webview里的js代碼去聯網下載數據，下載數據后填充到頁面，這樣等待時間會很長。 但在uni-app里，打開新頁面時，聯網是在始終都存在的jscore里進行了，同時另一個線程打開了視圖層的webview頁面，它們雙線程并行工作而不是串行，所以新頁面內容加載非常快。 4. 引入獨立的jscore也會有代價，就是Android包體積增加，一個Android的js引擎大約7M的體積。iOS由于系統自帶jscore，不需要新增js引擎體積。 >[info] ## 參考 [# Web App Hybrid App和 Native App的區別](http://www.ionic.wang/article-index-id-58.html) [Native， Hybrid， Web App， Cross App哪一個是開發App最佳方案呢 ？ | by Milk Midi | Medium](https://milkmidi.medium.com/native-hybrid-web-app-cross-app%E5%93%AA%E4%B8%80%E5%80%8B%E6%98%AF%E9%96%8B%E7%99%BCapp%E6%9C%80%E4%BD%B3%E6%96%B9%E6%A1%88%E5%91%A2-381e5529e47) [# native APP,hybrid APP,web APP, 小程序的區別](https://blog.csdn.net/fish_study_csdn/article/details/110945817) [hybrid簡單了解](https://juejin.cn/post/6844903827972292615) [# 5+App和uni-app在App開發上的對比](https://ask.dcloud.net.cn/article/37228) https://ask.dcloud.net.cn/article/36083