鸿蒙ArkTS页面如何与H5页面交互？

自然醒

已于 2024-08-22 08:14:02 修改

阅读量945

点赞数 3

文章标签： harmonyos 交互 webview

于 2024-08-14 09:49:54 首次发布

本文链接：https://blog.csdn.net/twk857857/article/details/141180801

版权

鸿蒙页面如何与H5页面交互？

在开发App时，我们经常会遇到使用webView加载H5页面的场景，这样做的好处就不多加赘述了，那么鸿蒙App如何加载H5页面呢？又怎么与H5页面进行通信呢？，废话少说，直接上代码。

鸿蒙App调用H5页面函数

App可以通过runJavaScript()方法调用html页面的JavaScript相关函数。在下面的示例中，点击App的“runJavaScript”按钮时，来触发html页面的htmlTest()方法。

html文件目录：harmonyApp\entry\src\main\resources\rawfile
html代码如下：

<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<script>
    function htmlTest() {
        console.info('JavaScript Hello World! ');
    }
</script>
</body>
</html>

鸿蒙App代码如下：

// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      // src可以改为你的H5页面网址，我这里用的是本地的html文件
      Web({ src: $rawfile('index.html'), controller: this.webviewController})
      Button('runJavaScript')
        .onClick(() => {
           this.webviewController.runJavaScript('htmlTest()');
        })
    }
  }
}

H5页面调用鸿蒙App函数

鸿蒙App可以通过web组件的javaScriptProxy()注册代码，在H5页面调用注册的对象和方法名实现触发App的函数。具体代码如下：

鸿蒙App代码如下：

// xxx.ets
import web_webview from '@ohos.web.webview';

class WebViewModel {
  constructor() {
  }

  test(): string {
    return 'ArkTS Hello World!';
  }
}

@Entry
@Component
struct WebComponent {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  // 声明需要注册的对象
  @State vm: WebViewModel = new WebViewModel();

  build() {
    Column() {
      // web组件加载本地index.html页面
      Web({ src: $rawfile('index.html'), controller: this.webviewController})
        // 将对象注入到web端
        .javaScriptProxy({
          object: this.vm,
          name: "harmony",
          methodList: ["test"],
          controller: this.webviewController
        })
    }
  }
}

html代码如下：

<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="callArkTS()">Click Me!</button>
<p id="demo"></p>
<script>
    function callArkTS() {
        let str = window.harmony.test();
        document.getElementById("demo").innerHTML = str;
        console.info('ArkTS Hello World! :' + str);
    }
</script>
</body>
</html>

Web组件使用问题

鸿蒙的Web组件加载H5页面会出现很多意外的问题，我这里建议把Web组件的以下两个选项开启，避免问题的产生。

domStorageAccess(true)开启文档对象模型存储接口（DOM Storage API）权限
javaScriptAccess(true)允许执行JavaScript脚本

具体代码如下：

// xxx.ets
import web_webview from '@ohos.web.webview';

class WebViewModel {
  constructor() {
  }

  test(): string {
    return 'ArkTS Hello World!';
  }
}

@Entry
@Component
struct WebComponent {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  // 声明需要注册的对象
  @State vm: WebViewModel = new WebViewModel();

  build() {
    Column() {
      // web组件加载本地index.html页面
      Web({ src: $rawfile('index.html'), controller: this.webviewController})
      	.domStorageAccess(true)
      	.javaScriptAccess(true)
        // 将对象注入到web端
        .javaScriptProxy({
          object: this.vm,
          name: "harmony",
          methodList: ["test"],
          controller: this.webviewController
        })
    }
  }
}