鸿蒙版本的JSBridge兼容与安卓配套的H5啦

现在主流的手机操作系统有Android、iOS和HarmonyOS（鸿蒙系统），为了减少同时维护三种客户端的工作量，一般采用APP内嵌H5页面的形式。由于H5不能直接调用客户端的原生能力，比如相机、麦克风，以及读取设备信息，因此需要在APP与H5之间搭建一种双向通信的桥梁机制。

一、JSBridge的开源框架

JSBridge（JavaScript Bridge）就是这种H5混合App的双向通信桥梁，它通过定义JS接口与Native接口，既支持H5调用APP原生的Native接口，也支持APP回调H5的JS接口，使得APP与H5之间能够互相调用并传递数据。

常见的JSBridge开源框架有两个，一个是WebViewJavascriptBridge（源码托管地址为https://github.com/marcuswestin/WebViewJavascriptBridge，星星数14.3K，分支数3K），另一个是JsBridge（源码托管地址为https://github.com/lzyzsd/JsBridge或https://github.com/happydog-intj/JsBridge，星星数9.9K，分支数2K）。这两个JSBridge框架以前都是安卓版，现在WebViewJavascriptBridge有了鸿蒙版本，但JsBridge还没有合适的鸿蒙版本，所以本文就介绍怎么把安卓版的JsBridge改造为鸿蒙版。

二、系统SDK的API变更

虽说如今有了各种AI工具，可以很方便地把安卓代码转换为鸿蒙代码，但后续的调试与适配操作仍需人工完成，故开发者还是有必要了解怎么迁移开源框架的关键API。好在JsBridge的源码不多，1.0.4版的代码文件才8个，去掉简单的接口与实体类定义，真正需要大幅改写的代码文件也就两三个。下面列出关键的修改部分说明：

1、拦截网页URL

首先，在网页跳转时就要拦截JSBridge特制的URL串，以判断是要求获取请求数据还是要求返回应答数据。对于安卓来说，要修改WebViewClient组件的shouldOverrideUrlLoading方法；对于鸿蒙来说，要修改Web组件的onLoadIntercept接口。

其次，在网页加载完成后，要把JSBridge通信需要的JS代码注入到H5。对于安卓来说，要修改WebViewClient组件的onPageFinished方法；对于鸿蒙来说，要修改Web组件的onPageEnd接口。

再次，安卓和鸿蒙注入JS代码的方式各不相同。对于安卓来说，可调用WebView组件的loadUrl("javascript:***")方法或者evaluateJavaScript方法；对于鸿蒙来说，应调用WebviewController控制器的runJavaScript接口或者runJavaScriptExt接口。

2、注入JS对象

APP与H5之间双向通信，其实就是互相调用对方定义的方法。但由于APP与H5属于不同的端侧，因此它们的方法不能被对方直接调用，而要先将方法名作为对象注入，然后才能由对方间接调用。

对于安卓来说，注入对象要调用WebView组件的addJavascriptInterface方法；对于鸿蒙来说，注入对象要调用Web组件的javaScriptProxy接口或者WebviewController控制器的registerJavaScriptProxy接口。因为Web组件的javaScriptProxy接口只能在初始化Web组件时调用一次，无法注入多个对象，所以得采取WebviewController控制器的registerJavaScriptProxy接口，以便注入多个对象。

或者不用对象注入，仍然调用WebviewController控制器的runJavaScriptExt接口，参数输入"javascript:window.H5方法名"，也能实现APP调用H5方法的功能。

3、工具库迁移

JSBridge涉及到的常见工具库包括：

JSON串解析的工具库：要把安卓侧由谷歌提供的三方库Gson改为鸿蒙系统自带的JSON库。

URL串解码的工具库：要把安卓侧的URLDecoder工具改为鸿蒙系统自带的decodeURIComponent接口。

资源目录的文件解析库：要把安卓侧的AssetManager管理器改为鸿蒙系统自带的ResourceManager管理器。

字符串替换：安卓侧的replaceAll方法可输入字符串形式的正则串，而鸿蒙的replaceAll方法要输入RegExp类型的正则串。

三、开发语言的语法变更

安卓APP开发传统采用Java语言，而鸿蒙APP开发主要采用ArkTS语言。两种语言在一些关键场合有着不同的处理方式，所以JSBridge需要对部分语法进行针对性适配，包括如下几点：

1、匿名函数与闭包函数

Java语言对于匿名函数的接口定义是这样的：

public interface CallBackFunction {
    public void onCallBack(String data);
}

调用的时候可以这么写：

CallBackFunction func = new CallBackFunction() {
                           @Override
                           public void onCallBack(String data) {
                               ***
                           }
                        };

或者采用下面的Lambda写法：

CallBackFunction func = data -> {
                                    ***
                                };

但是ArkTS语言对应的闭包函数及其接口定义必须这样：

export interface CallBackFunction {
  onCallBack: (data: string) => void
}

然后按照下面代码调用闭包函数：

let func = {
             onCallBack: (data: string): void => {
               ***
             }
           };

这种针对性适配一开始会觉得有点怪异，习惯就好。

2、组件继承与组件组合

安卓APP可以自定义新组件继承自WebView，但鸿蒙APP的Web组件属于ArkUI，它基于struct定义，不支持面向对象意义上的类继承，因此无法直接继承Web组件。只能通过组合模式封装Web组件：在自定义组件的build函数中内嵌Web组件，内部管理WebviewController，并通过回调将控制器暴露给父组件，从而实现功能扩展。

但组合模式传递的WebviewController与父组件的WebviewController持有不同的对象引用，不能直接调用控制器的各种方法，还要另外定义扩展的动作类型，让新类型在回调函数中使用：

export type ExtendAction = (action: string) => void

然后组合后的新Web组件要按照如下方式输入动作类型变量：

BridgeWeb({
  src: this.localUrl,
  bridge: this.bridge,
  onRegister: (action: ExtendAction): void => {
    this.extendAction = action
  }
})
  .width('100%').height('100%')

改造后的JSBridge支持鸿蒙APP，而改造前的JSBridge支持安卓APP，于是只要同样的H5页面，即可同时对接安卓APP和鸿蒙APP，成功实现了"一套网页多处运行"的功能。

改造前后的JSBridge及其使用范例均已开放源码，其中安卓版的JSBridge基于com.github.lzyzsd.jsbridge的1.0.4版本，模块入口为https://gitee.com/aqi00/android3/tree/main/jsbridge，使用范例的页面代码为https://gitee.com/aqi00/android3/blob/main/chapter13/src/main/java/com/example/chapter13/WebBridgeActivity.java。

鸿蒙版的JSBridge由1.0.4的安卓JSBridge改造而来，模块入口为https://gitee.com/aqi00/harmony/tree/main/chapter12/jsbridge，使用范例的页面代码为https://gitee.com/aqi00/harmony/blob/main/chapter12/entry/src/main/ets/pages/WebBridgePage.ets，相关代码附在《鸿蒙HarmonyOS 6应用开发:从零基础到App上线》的随书源码中。

查找鸿蒙仓库尚未发现兼容com.github.lzyzsd.jsbridge的合适三方库，本文改造后的鸿蒙版JSBridge正好填补了这一空白。