>[success] # webview 初步 不論是手機或是電腦，連上網絡后，必須使用瀏覽器（Browser）才能觀看網頁，除了手機內建瀏覽器以外，其實手機都有一個迷你瀏覽器，在Android被稱為Webview，而iOS上則稱為WKWebView，但作用是一樣的：無須切換程序，就能快速觀看網頁內容。 值得一提的是Android上的Webview早期有安全問題，但Webview與Android捆綁在一起，導致安全問題更新困難，直到Android 5.0版本之后Webview正式成為獨立項目，用戶可以自行開啟、關閉、更新Webview程序。 >[dabger] ##### webview 日常案例 1. 有時你開啟游戲內的通知，會跳出一個網頁貼在游戲畫面前端 2. app點擊開啟網頁鏈接時，往往不會直接跳到瀏覽器上，而是迅速的切換到一個窗口看到內容，這也是Webview的功勞 >[success] # webview 是什么 1. `WebView `用來展示網頁的 view 組件，該組件是你運行自己的瀏覽器或者在你的線程中展示線上內容的基礎。使用 `Webkit `渲染引擎來展示，并且支持前進后退等基于瀏覽歷史，放大縮小，等更多功能。簡單來說 `WebView `是手機中內置了一款高性能 `Webkit `內核瀏覽器，在 `SDK `中封裝的一個組件。**不過沒有提供地址欄和導航欄，只是單純的展示一個網頁界面。** 2. `WebView` 是一種嵌入式瀏覽器，可以在**移動應用程序中展示網頁內容（理解為想在一個app 中讓其可以打開一個網頁）**。**它可以在應用中打開網頁而不需要用戶退出應用**。WebView 可以通過 HTML、CSS 和 JavaScript 來顯示網頁內容，并且支持與網頁交互，例如點擊鏈接或填寫表單。WebView 主要用于移動應用程序開發，常用于安卓、IOS 和 Windows Phone 等移動平臺。 3. `WebView `的原理是在移動應用程序中嵌入了一個瀏覽器引擎，這個引擎可以讀取 `HTML、CSS 和 JavaScript` 代碼，**并將其解析和渲染成網頁內容** 4. `WebView` 可以為 JavaScript 提供一些特定的接口，這些接口可以讓 JavaScript 訪問手機的資源，例如相機、麥克風、GPS 等。JavaScript 可以調用這些接口來訪問手機的資源，并與手機應用程序進行通信，`WebView` 也可以讓 JavaScript 注冊事件監聽器，當手機應用程序發生特定事件時，JavaScript 可以接收到通知并執行相應的操作。 >[danger] ##### webview的好處 原生APP是將頁面的布局設計，以及業務代碼打包然后用戶下載安裝使用，而webview是通過加載html文件來進行頁面的展示，當需要更新頁面布局的或者業務邏輯變更時，如果是原生的APP就需要修改前端內容，升級打包，重新發布才可以使用最新的。 而通過webview方式的頁面則只需要修改html代碼或者js文件（如果是從服務器端獲取，只要新的文件部署完成），用戶重新刷新就可以使用更新后的，無需通過下載安裝的方式完成升級。 >[danger] ##### 和原生app 通信 1. `WebView `所承載的頁面，通過 `JS `與 `Native `進行通信，我們將這個通信**橋梁為 JSBridge **，**構建 Native 和非 Native 間消息通信的通道**，而且是 **雙向通信的通道**。讓混合開發中的『前端部分』可以方便地使用地址位置、攝像頭甚至支付等 Native 功能。 * JS 向 Native 發送消息 : 調用相關功能、通知 Native 當前 JS 的相關狀態等。 * Native 向 JS 發送消息 : 回溯調用結果、消息推送、通知 JS 當前 Native 的狀態等。 2. JSBridge * 在**IOS**中，主要使用`WebViewJavascriptBridge`來注冊 * 在**Android**中，需要通過`addJavascriptInterface`來注冊 >[info] ## 參考 https://cloud.tencent.com/developer/article/1807367 [Webview是什么程序？ 為什么網站在Webview開啟出了問題？ -iWare網頁設計公司](https://www.iware.com.tw/qa-816.html) [schema 喚起app原理](https://zhuanlan.zhihu.com/p/58691238)