Webview通信系统学习指南

作者: 前端AC | 原文: https://juejin.cn/post/7501159920600301568

Webview通信系统学习指南

学习h5的知识之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;
    }

    @JavascriptInterface
    public 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 WebKit

class ViewController: UIViewController, WKScriptMessageHandler {
    var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let contentController = WKUserContentController()
        contentController.add(self, name: "iOSBridge")
        
        let config = WKWebViewConfiguration()
        config.userContentController = contentController
        
        webView = 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);
});