Webview通信系统学习指南

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);
});