鸿蒙HarmonyOS实战开发-Web组件（前端函数和应用侧函数相互调用）

本文链接：https://blog.youkuaiyun.com/HarmonyOS_002/article/details/140252153

前言

前端函数和应用侧函数相互调用是指前端页面中的JavaScript函数和应用程序侧的函数之间进行相互调用。

在前端开发中，常常会使用JavaScript函数来处理用户的交互事件和操作。这些函数可以在前端页面中定义，例如通过事件监听器或者按钮点击事件来触发函数的执行。这些前端函数可以使用DOM操作、修改页面样式以及向后端发送请求等。

而应用侧函数是指在应用程序中定义的函数，例如后端服务器端脚本、数据库操作函数等。这些函数通常用于处理业务逻辑、数据处理、数据库操作等。

前端函数和应用侧函数可以通过各种方式进行相互调用。例如，前端函数可以通过AJAX请求将数据发送到应用侧函数进行处理，应用侧函数可以返回处理结果给前端函数。另外，前端函数也可以通过调用后端API接口来执行应用侧函数。

不过HarmonyOS的Web组件前端函数和应用侧函数相互调用是已经封装好的。

一、调用前端页面函数

1.应用侧调用前端页面函数

1.1 前端页面

<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<h1>执行JavaScript</h1>
<p id="locationInfo">位置信息</p>
<script>
    var locationInfo=document.getElementById("locationInfo");
    function htmlTest() {
        locationInfo.innerHTML='JavaScript Hello World! '
    }
</script>
</body>
</html>

1.2 应用侧

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

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

  build() {
    Column() {
      Web({ src: $rawfile('local.html'), controller: this.webviewController})
      Button('runJavaScript')
        .onClick(() => {
          this.webviewController.runJavaScript('htmlTest()');
        })
    }
  }
}

在这里插入图片描述

🔎2.前端页面调用应用侧函数

2.1 前端页面

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

2.2 应用侧

2.2.1 初始化时调用

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

class testClass {
  constructor() {
  }

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

@Entry
@Component
struct WebComponent {
  webviewController: web_webview.WebviewController = new web_webview.W