Zuo移动端 H5 开发，和原生 App 通信是必修课，今天咱就来盘点一下主流的几种方案。

说实话，这事儿挺有意思的，H5 和原生之间的通信，就像两个好朋友在聊天需要找到合适的方式才Neng顺畅交流。

H5 发起一个特殊格式的 URL 请求，原生拦截这个请求，解析参数执行操作。

比如说H5 要获取用户信息，就发起一个 myapp://bridge?action=getUserInfo 的请求。

// 发起请求 function callNative { const query = Object.keys .map}`) .join; const url = `myapp://bridge?action=${action}${query ? '&' + query : ''}`; // 方式1：location 跳转 window.location.href = url; // 方式2：iframe const iframe = document.createElement; iframe.src = url; iframe.style.display = 'none'; document.body.appendChild; setTimeout => document.body.removeChild, 100); } // 调用示例 callNative; callNative;

iOS 需要实现 WKNavigationDelegate 的 shouldOverrideUrlLoading 方法来拦截 URL 请求。

func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping -> Void) { guard let url = navigationAction.request.url else { decisionHandler return } if url.scheme == "myapp" { // 解析 URL，执行对应操作 let action = url.host // "bridge" let query = url.query // "action=getUserInfo" handleAction) decisionHandler return } decisionHandler }

Android 需要实现 shouldOverrideUrlLoading 方法来拦截 URL 请求。

webView.setWebViewClient { @Override public boolean shouldOverrideUrlLoading { if ) { // 解析 URL，执行对应操作 Uri uri = Uri.parse; String action = uri.getQueryParameter; handleAction; return true; } return false; } });

原生往 WebView 注入一个全局对象，H5 直接调用这个对象的方法。

iOS 的 WKWebView Ke以通过 WKUserContentController 添加原生对象。

// 定义原生对象 class NativeBridge: NSObject { @objc func getUserInfo { let userInfo = // 调用 H5 回调 webView.evaluateJavaScript)") } @objc func openPage { // 解析参数，跳转页面 } } // 注入对象 let contentController = WKUserContentController contentController.add, name: "nativeBridge") let config = WKWebViewConfiguration config.userContentController = contentController

Android Ke以通过 addJavascriptInterface 方法注入原生对象。

// 定义原生对象 public class NativeBridge { @JavascriptInterface public String getUserInfo { JSONObject userInfo = new JSONObject; userInfo.put; userInfo.put; return userInfo.toString; } @JavascriptInterface public void openPage { // 解析参数，跳转页面 } } // 注入对象 webView.addJavascriptInterface, "nativeBridge");

iOS 的 WKWebView 提供了消息处理器机制，H5 发送消息，原生接收处理。

// 发送消息 function callNative { window.webkit.messageHandlers.nativeBridge.postMessage({ action: action, params: params || {} }); } // 调用 callNative; callNative;

iOS 需要实现 WKScriptMessageHandler 来接收 H5 消息。

class ViewController: UIViewController, WKScriptMessageHandler { override func viewDidLoad { let contentController = WKUserContentController contentController.add let config = WKWebViewConfiguration config.userContentController = contentController webView = WKWebView } func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) { guard let body = message.body as? else { return } let action = body as? String let params = body as? switch action { case "getUserInfo": let userInfo = // 回调 H5 webView.evaluateJavaScript)") case "openPage": // 处理跳转 break default: break } } }

H5 通过 console.log 输出特定格式的信息，原生拦截 console 输出。

// 定义协议格式 function callNative { const message = JSON.stringify({ type: 'native-call', action: action, params: params || {} }); console.log; } // 调用 callNative;

iOS 需要重写 console.log，将消息转发给原生。

// 重写 console.log let script = """ window.console = { log: function { // 转发给原生 window.webkit.messageHandlers.console.postMessage; } }; """ let userScript = WKUserScript(source: script, injectionTime: .atDocumentStart, forMainFrameOnly: true) contentController.addUserScript

Android 需要实现 WebChromeClient 的 onConsoleMessage 方法来拦截 console 输出。

// 使用 WebChromeClient 拦截 webView.setWebChromeClient { @Override public boolean onConsoleMessage { String message = consoleMessage.message; try { JSONObject json = new JSONObject; if )) { String action = json.getString; JSONObject params = json.getJSONObject; handleAction; return true; } } catch { // 不是 JSON，正常 console.log } return super.onConsoleMessage; } });

推荐方案：注入全局对象 或 WKScriptMessageHandler。 Zui终，还是要根据实际项目需求和团队技术栈来选择Zui合适的方案。 不同的场景可Neng需要不同的解决方案，没有万Neng的方案，只有Zui合适的方案。