HarmonyOS开发实战：Web组件与APP应用互操作功能

最新推荐文章于 2025-09-12 21:11:12 发布

原创

最新推荐文章于 2025-09-12 21:11:12 发布 · 1.2k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #harmonyos #网络 #华为 #单片机 #鸿蒙 #鸿蒙开发

1. APP内嵌网页与应用互操作概述

在通常的APP开发中，经常会采用内嵌网页的形式，通过网页来展现丰富的动态内容，虽少了很多原生开发的功能，但是这么做无可厚非，毕竟APP需要适配的系统平台很多，比如安卓、苹果、各种PC端，现在还有如日中天的鸿蒙系统；为每一种平台做定制难度还是很大的，但是这些平台的APP都支持内嵌网页，通过网页可以屏蔽各平台的差异，从而减少开发难度，提高开发效率。

当然，单纯的内嵌网页还是有不少局限性的，不过，可以通过应用和网页的互操作来提升用户的使用体验，所谓的互操作，就是可以在网页中调用APP中的方法，或者在APP中执行网页中的脚本，鸿蒙通过web组件中的javaScriptProxy接口提供了注册应用侧js对象到web组件中的方法：

javaScriptProxy(javaScriptProxy: { object: object, name: string, methodList: Array<string>,controller: WebviewController | WebController, asyncMethodList?: Array<string>})

当然，也可以使用WebviewController的registerJavaScriptProxy接口：

registerJavaScriptProxy(object: object, name: string, methodList: Array<string>, asyncMethodList?: Array<string>): void

在应用侧执行网页中的脚本使用的是WebviewController类的runJavaScript接口：

runJavaScript(script: string): Promise<string>

通过上述几个接口，就可以实现强大的Web组件与应用互操作功能

2. Web组件与应用互操作示例

本示例运行后的界面如下所示

单击网页中“计算应用侧的乘法”按钮，可以自动计算app上部的乘法，计算后的界面如下所示；

在app内调节RGB颜色分量，设置好选择的背景色后，单击应用中的“设置网页背景色”按钮，可以设置网页的背景色：

下面详细介绍创建该应用的步骤。

步骤1：创建Empty Ability项目。

步骤2：在module.json5配置文件加上对权限的声明：

"requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ]

这里添加了获取互联网信息的权限。

步骤3：添加资源文件demo.html，路径为src/main/resources/rawfile/demo.html，内容如下：

<!-- index.html -->
<!DOCTYPE html>
<html>
<meta charset="utf-8">

<body>
  <div style="text-align: center;font-size: larger;">
    <button type="button" onclick="compute()">计算应用侧的乘法</button>
  </div>
  <div id="info">

  </div>
</body>
<script type="text/javascript">
  function compute() {
    let multiplier = multipObj.getMultiplier();
    let multiplicand = multipObj.getMultiplicand();
    let product = multiplier * multiplicand
    multipObj.setProduct(product);
  }

  function setbackcolor(color) {
    document.body.style.backgroundColor = color;
  }
</script>

</html>

该资源文件很重要，是本示例互操作实现的基础。