混合 APP（WebView）前端开发：与原生交互避坑指南

{
  "type": "openCamera",
  "payload": {"quality": 0.8},
  "callbackId": "c_172931",
  "timestamp": 1732520000
}

const Bridge = (() => {
  const callbacks = new Map()
  const genId = () => 'cb_' + Date.now() + '_' + Math.random().toString(16).slice(2)
  const post = msg => {
    if (window.AppBridge && typeof window.AppBridge.postMessage === 'function') {
      window.AppBridge.postMessage(JSON.stringify(msg))
    } else if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.AppBridge) {
      window.webkit.messageHandlers.AppBridge.postMessage(msg)
    }
  }
  const callNative = (type, payload = {}, {timeout = 8000} = {}) => new Promise((resolve, reject) => {
    const id = genId()
    const timer = setTimeout(() => {
      callbacks.delete(id)
      reject(new Error('TIMEOUT'))
    }, timeout)
    callbacks.set(id, res => {
      clearTimeout(timer)
      callbacks.delete(id)
      if (res && res.error) reject(new Error(res.error))
      else resolve(res)
    })
    post({type, payload, callbackId: id, timestamp: Date.now()})
  })
  const onNative = data => {
    const {callbackId} = data || {}
    if (callbackId && callbacks.has(callbackId)) callbacks.get(callbackId)(data)
  }
  return {callNative, onNative}
})()
window.Bridge = Bridge

webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setDomStorageEnabled(true);
webView.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_COMPATIBILITY_MODE);
webView.addJavascriptInterface(new AppBridge(activity), "AppBridge");

public class AppBridge {
  private final Activity activity;
  public AppBridge(Activity a){ this.activity = a; }
  @JavascriptInterface
  public void postMessage(String json){
    // 解析 json 并分发，完成后回调 onNative
  }
}

private void sendToWeb(WebView webView, String json){
  webView.post(() -> webView.evaluateJavascript("Bridge.onNative(" + json + ")", null));
}

let config = WKWebViewConfiguration()
let ucc = WKUserContentController()
ucc.add(self, name: "AppBridge")
config.userContentController = ucc
let webView = WKWebView(frame: .zero, configuration: config)

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
  if message.name == "AppBridge" {
    // 解析 message.body，处理后回调到 JS
  }
}

let script = "Bridge.onNative(" + jsonString + ")"
webView.evaluateJavaScript(script)

Bridge.callNative('pickImage', {source: 'camera'}).then(res => {
  const {url} = res
})

function onPushMessage(data){
  const {payload} = data
}

document.addEventListener('DOMContentLoaded', () => {
  if (window.Bridge) {
  }
})