纯血鸿蒙Next中webview如何调用H5并在window下挂载新方法给App调用

在纯血鸿蒙Next系统中，使用WebView加载H5页面时，如何实现在window对象下挂载新的方法供App端调用？具体应该如何编写JS Bridge代码？是否需要特殊配置才能让H5成功调用到鸿蒙原生方法？求完整的实现示例和注意事项。

2 回复

在纯血鸿蒙Next中，可以通过WebView的addJavascriptInterface方法将ArkTS对象注入到H5的window对象中。例如：

// 创建JS桥接对象
class JSBridge {
  // 供H5调用的方法
  showToast(message: string) {
    // 调用原生能力
  }
}

// 注入到WebView
webView.addJavascriptInterface(new JSBridge(), "JSBridge")

这样H5就能通过window.JSBridge.showToast()调用原生方法啦！记得处理安全校验哦~

更多关于纯血鸿蒙Next中webview如何调用H5并在window下挂载新方法给App调用的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在纯血鸿蒙Next（HarmonyOS NEXT）中，可以通过Web组件加载H5页面，并使用registerJavaScriptProxy()方法在H5的window对象下挂载新方法，供App调用。以下是实现步骤和示例代码：

1. 创建Web组件并加载H5页面

在ArkUI中使用Web组件加载本地或远程H5页面。

import webview from '@ohos.web.webview';

@Entry
@Component
struct WebViewExample {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      // 加载本地H5页面（路径为resources/rawfile/）
      Web({ src: $rawfile('index.html'), controller: this.controller })
        .width('100%')
        .height('100%')
    }
  }
}

2. 注册JavaScript方法供H5调用

使用registerJavaScriptProxy()在H5的window对象下挂载方法。例如，挂载一个showToast方法：

import webview from '@ohos.web.webview';
import prompt from '@ohos.promptAction';

@Entry
@Component
struct WebViewExample {
  controller: webview.WebviewController = new webview.WebviewController();

  aboutToAppear() {
    // 注册方法到H5的window对象
    this.controller.registerJavaScriptProxy({
      // 定义showToast方法，H5可通过window.showToast调用
      showToast: (msg: string) => {
        prompt.showToast({ message: `App收到: ${msg}` });
      }
    }, 'window'); // 第二个参数指定挂载到window对象
  }

  build() {
    Column() {
      Web({ src: $rawfile('index.html'), controller: this.controller })
        .width('100%')
        .height('100%')
        .onPageEnd(() => {
          // 页面加载完成后刷新代理，确保方法生效
          this.controller.refresh();
        })
    }
  }
}

3. H5页面调用App方法

在H5的JavaScript代码中，直接通过window调用挂载的方法：

<!DOCTYPE html>
<html>
<head>
    <title>H5页面</title>
</head>
<body>
    <button onclick="callAppMethod()">调用App方法</button>
    
    <script>
        function callAppMethod() {
            // 调用App挂载的showToast方法
            if (window.showToast) {
                window.showToast('Hello from H5!');
            } else {
                alert('方法未挂载成功');
            }
        }
    </script>
</body>
</html>

注意事项：

  • 安全机制：确保仅信任的H5页面可调用这些方法，避免安全风险。
  • 生命周期：在页面加载完成（如onPageEnd）后调用refresh()，确保代理生效。
  • 类型匹配：H5和App间传递的数据需为基本类型（如string、number），复杂对象需序列化。

通过以上步骤，即可在纯血鸿蒙Next中实现WebView与H5的交互，并在H5的window对象下安全挂载方法供App调用。

回到顶部