HarmonyOS鸿蒙Next中webview执行h5提供的方法

HarmonyOS鸿蒙Next中webview执行h5提供的方法 h5将方法名传递给web组件，web组件点击后去执行h5提供的方法

4 回复

楼主您好

应用侧可以通过runJavaScript()方法调用前端页面的JavaScript相关函数。

参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-in-app-frontend-page-function-invoking-V5

demo参考：https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_NEXT-SelectContact

H5页面如何与ArkTS交互：https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs-V5/faqs-arkweb-1-V5

更多关于HarmonyOS鸿蒙Next中webview执行h5提供的方法的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


JSBridge是一种JavaScript与Web客户端之间的通信机制。通过JSBridge，可以在WebView中通过JavaScript代码调用客户端提供的功能，也可以从客户端中调用JavaScript函数。JSBridge可能无法满足复杂的通信需求，这时可以使用端口通信技术来实现更灵活的跨平台通信。

  • 使用runJavaScript与registerJavaScriptProxy的JSBridge技术：

    • 特点：调用函数，不需要一直保持通道。
    • 使用场景：对于函数调用的场景，可以选择runJavaScript或者registerJavaScriptProxy实现。

  • 使用WebMessagePort建立端口通信：

    • 特点：建立通道，实时监听，持续消耗资源。
    • 使用场景：对于有双向通信需求的场景，对于数据实时更新，聊天应用，大文件如图片等场景建议选择端口通信技术，更加稳定。

参考链接：

应用侧调用前端页面函数

前端页面调用应用侧函数

建立应用侧与前端页面数据通道

在HarmonyOS鸿蒙Next中，WebView组件可以加载并执行H5页面提供的方法。使用WebView时，可以通过loadUrl方法加载H5页面，并通过evaluateJavascript方法执行H5页面中的JavaScript代码。以下是一个简单的示例：

  1. 在MainAbilitySlice中创建WebView组件，并加载H5页面：
import webview from '@ohos.web.webview';

let webView = new webview.WebView();
webView.loadUrl("file:///entry/index.html");
  1. 在H5页面中定义一个JavaScript方法：
<!DOCTYPE html>
<html>
<head>
    <title>H5 Page</title>
</head>
<body>
    <script>
        function showMessage() {
            alert('Hello from H5!');
        }
    </script>
</body>
</html>
  1. 在MainAbilitySlice中通过evaluateJavascript方法调用H5页面中的showMessage方法：
webView.evaluateJavascript('showMessage()', (result) => {
    console.log('JavaScript executed: ' + result);
});

通过这种方式，可以在HarmonyOS鸿蒙Next中实现WebView与H5页面的交互，执行H5页面提供的方法。

在HarmonyOS鸿蒙Next中，使用WebView组件执行H5提供的方法可以通过WebView的executeJs方法实现。首先，确保H5页面上定义了可供调用的JavaScript方法。然后，通过WebView的executeJs方法调用该方法并传递参数。例如：

webView.executeJs("javascript:myH5Function('Hello from HarmonyOS')");

其中，myH5Function是H5页面上定义的JavaScript方法。通过这种方式，HarmonyOS应用可以与H5页面进行交互，执行特定的JavaScript逻辑。

回到顶部