Webview通信系統學習指南

一、定義與核心概念

1. 什么是Webview？

• 定義：Webview是移動端（Android/iOS）內置的輕量級瀏覽器組件，用于在原生應用中嵌入網頁內容。
• 作用：實現H5頁面與原生應用的深度交互，彌補純H5在性能、設備API調用上的不足。

2. 為什么需要Webview通信？

• 能力互補：H5無法直接調用攝像頭、GPS等原生能力，需通過Webview橋接。
• 性能優化：復雜交互（如3D渲染）依賴原生性能。
• 業務需求：內嵌H5頁面需與App其他模塊（如支付、登錄）聯動。

---

二、技術原理與實現

1. 核心機制

• JS Bridge：通過自定義協議或API實現H5與原生的雙向通信。
• 數據格式：通常使用JSON傳遞消息，確保結構化解析。

2. 技術對比

方式	適用場景	優點	缺點
Webview通信	移動端內嵌H5	直接調用原生能力	開發復雜度高
Iframe通信	嵌入式網頁間交互	兼容性好，支持跨域	僅限同域或CORS配置
C++進程通信	動畫編輯器內部通信	高效直接	依賴特定工具鏈

---

三、代碼實戰示例

1. Android端實現

// 原生暴露接口給H5
public class WebAppInterface {Context mContext;WebAppInterface(Context c) {mContext = c;}@JavascriptInterfacepublic void showToast(String toast) {Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();}
}// WebView加載H5并綁定接口
WebView webView = findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(new WebAppInterface(this), "AndroidBridge");
webView.loadUrl("file:///android_asset/index.html");

2. iOS端實現（Swift）

import WebKitclass ViewController: UIViewController, WKScriptMessageHandler {var webView: WKWebView!override func viewDidLoad() {super.viewDidLoad()let contentController = WKUserContentController()contentController.add(self, name: "iOSBridge")let config = WKWebViewConfiguration()config.userContentController = contentControllerwebView = WKWebView(frame: view.frame, configuration: config)view.addSubview(webView)let url = Bundle.main.url(forResource: "index", withExtension: "html")!webView.loadFileURL(url, allowingReadAccessTo: url.deletingLastPathComponent())}// 接收H5消息func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {if message.name == "iOSBridge" {print("收到消息：\(message.body)")}}
}

3. H5通用代碼

// 調用原生方法
function callNative() {if (window.AndroidBridge) {window.AndroidBridge.showToast('Hello Android!');} else if (window.webkit && window.webkit.messageHandlers.iOSBridge) {window.webkit.messageHandlers.iOSBridge.postMessage('Hello iOS!');}
}// 接收原生消息
window.addEventListener('message', function(event) {console.log('收到原生消息:', event.data);
});