H5 与 Android、iOS 的 webview 桥接

1、H5 请求 App 的事件

1、请求 Android 的事件

window.customControllerInterface.customEvent(params)
注: 1、customControllerInterface Android 声明的Java对象暴露给 JavaScript
    2、customEvent 自定义事件
    3、params 当请求的时候传递了参数，在 Android 端的方法也需要接收参数，不然会报错（Android端参数是选填）

2、请求 iOS 的事件

window.webkit.messageHandlers.customEvent.postMessage(params)
注: 1、customEvent 自定义事件
    2、params iOS端参数是必填项

2、H5 监听 App 发送过来的事件

window.addEventListener('customEvent', event => {
  const params = event.detail
})
注: 1、customEvent App 通过 JavaScript 注入的自定义事件
    2、params 获取参数需要通过 .detail 获取

3、Android 端实现

public class MainActivity extends AppCompatActivity { 
    WebView webView; 
    @Override protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = findViewById(R.id.webview);
        webView.getSettings().setJavaScriptEnabled(true);
        // 创建一个Java对象
        MyJavaScriptInterface myJavaScriptInterface = new MyJavaScriptInterface(this);
        // 将Java对象暴露给JavaScript，名字为 'Android'
        webView.addJavascriptInterface(myJavaScriptInterface, "customControllerInterface");
        webView.loadUrl("file:///android_asset/index.html");
    }
    // 内部类，作为JavaScript - Java桥接的对象
    public class MyJavaScriptInterface {
        Context mContext;
        MyJavaScriptInterface(Context c) {
            mContext = c;
        }
        // 这个方法可以被JavaScript调用
        @JavascriptInterface
        public void showToast(String message) {
            Toast.makeText(mContext, message, Toast.LENGTH_SHORT).show();
        }
    }
}

4、iOS 端实现

  // 发送服务准备完成事件
func sendServiceReadyEventToWeb() {
    // 准备参数
    let params: [String: String] = [
        a: '123'
    ]
    
    // 将字典转为 JSON 字符串
    guard let jsonData = try? JSONSerialization.data(withJSONObject: params, options: []),
          let jsonString = String(data: jsonData, encoding: .utf8) else {
        print("Error: Failed to convert params to JSON string")
        return
    }
    
    // JavaScript 脚本
    // startServiceBack 为iOS注入JavaScript的自定义方法
    let script = """
    var event = new CustomEvent('startServiceBack', { detail: \(jsonString) });
    window.dispatchEvent(event);
    """
    
    // 执行脚本
    webView.evaluateJavaScript(script) { (result, error) in
        if let error = error {
            print("Error sending startServiceBack event: \(error.localizedDescription)")
        } else {
            print("startServiceBack event sent successfully")
        }
    }
}