前端H5与客户端Native交互原理 - JSBridge

String jsCode = String.format("window.showWebDialog('%s')", text);webView.evaluateJavascript(jsCode, new ValueCallback<String>() {  @Override  public void onReceiveValue(String value) {
  }});

[webView evaluateJavaScript:@"执行的JS代码"   completionHandler:^(id _Nullable response, NSError * _Nullable error) {  // }];

<protocol>://<host>/<path>?<qeury>#fragment  // 我们可以自定义JSBridge通信的URL Schema，比如：hellobike://showToast?text=hello

get existOrderRedirect() {    let url: string;    if (this.env.isHelloBikeApp) {      url = 'hellobike://hellobike.com/xxxxx_xxx?from_type=xxxx&selected_tab=xxxxx';    } else if (this.env.isSFCApp) {      url = 'hellohitch://hellohitch.com/xxx/xxxx?bottomTab=xxxx';    }    return url;  }

// 注入全局JS对象webView.addJavascriptInterface(new NativeBridge(this), "NativeBridge");
class NativeBridge {    private Context ctx;    NativeBridge(Context ctx) {        this.ctx = ctx;    }
    // 绑定方法    @JavascriptInterface    public void showNativeDialog(String text) {        new AlertDialog.Builder(ctx).setMessage(text).create().show();    }}

// 调用nativeBridge的方法window.NativeBridge.showNativeDialog('hello');

// 定义一个名为 callNative 的方法，用于在 JavaScript 中调用原生方法callNative<P, R>(classMap: string, method: string, params: P): Promise<R> {    return new Promise<R>((resolve, reject) => {        // 生成一个唯一的回调 ID        const id = v4();        // 将当前的回调函数保存到 __callbacks 对象中，以 callbackId 作为键        this.__callbacks[id] = { resolve, reject, method: `${classMap} - ${method}` };        // 构造通信数据，包括原生类映射、要调用的方法、参数和 callbackId         const data = {            classMap,            method,            params: params === null ? '' : JSON.stringify(params),            callbackId: id,        };        const dataStr = JSON.stringify(data);        // 根据当前环境判断是 iOS 还是 Android，并调用相应平台的原生方法        if (this.env.isIOS && isFunction(window?.webkit?.messageHandlers?.callNative?.postMessage)) {            // 如果是 iOS 平台，则调用 iOS 的原生方法            window.webkit.messageHandlers.callNative.postMessage(dataStr);        } else if (this.env.isAndroid && isFunction(window?.AppFunctions?.callNative)) {            // 如果是 Android 平台，则调用 Android 的原生方法            window.AppFunctions.callNative(dataStr);        }    });}

// 初始化桥接回调函数，该参数在 constructor 中调用private initBridgeCallback() {    // 保存旧的回调函数到 oldCallback 变量中    const oldCallback = window.callBack;    // 重新定义 window.callBack 方法，用于处理原生应用的回调数据    window.callBack = (data) => {        // 如果存在旧的回调函数，则调用旧的回调函数        if (isFunction(oldCallback)) {            oldCallback(data);        }        // 获取原生应用的回调信息，包括数据和回调 ID        console.info('native callback', data, data.callbackId);        // 从回调数据中获取回调 ID        const { callbackId } = data;        // 根据回调 ID 查找对应的回调函数        const callback = this.__callbacks[callbackId];        // 如果找到了对应的回调函数        if (callback) {            // 如果回调数据中的 code 为 0，则表示执行成功，调用 resolve 方法处理成功的结果            if (data.code === 0) {                callback.resolve(data.data);            } else {                // 否则，表示执行失败，构造一个错误对象并调用 reject 方法处理错误信息                const error = new Error(data.msg) as Error & {response:unknown};                error.response = data;                callback.reject(error);            }            // 删除已经处理过的回调函数            delete this.__callbacks[callbackId];        }    };}

// 调用原生方法的封装函数callNative<P, R>(classMap: string, method: string, params: P) {    // 从容器中解析出 AppBridge 实例    const bridge = container.resolve<AppBridge>(AppBridge);    // 使用 bind 方法将 AppBridge 实例中的 callNative 方法绑定到 bridge 对象上，并保存到 func 变量中    const func = bridge.callNative.bind(bridge);    // 调用 func 方法，并传入 classMap、method 和 params 参数，实现调用原生方法的功能    return func<P, R>(classMap, method, params);}

// 打开 webview// 调用 callNative 方法，传入参数 url，classMap 为 'xxxxx/hitch'，method 为 'openWebview'openWebView(url: string): Promise<void> {    return this.callNative<{url:string}, void>('xxxxx/hitch', 'openWebview', { url });}

// 获取驾驶证 OCR 信息getDriverLicenseOcrInfo(    params: HBNative.getDriverLicenseOcrInfo.Params,): Promise<HBNative.getDriverLicenseOcrInfo.Result> {    // 调用 callNative 方法，传入参数 params，classMap 为 'xxxxx/hitch'，method 为 'getOcrInfo'    // 返回一个 Promise 对象，该 Promise 对象用于处理异步结果    return this.callNative<        HBNative.getDriverLicenseOcrInfo.Params,        HBNative.getDriverLicenseOcrInfo.Result>(            'xxxxx/hitch', 'getOcrInfo', params,        );}