HarmonyOS NEXT鸿蒙开发入门，ArkWeb前端js调鸿蒙函数

文章目录

1. 前言导读

在上集中，我们学些了鸿蒙如何去调用前端js函数，这集我们来学习js如何调用鸿蒙函数。在应用开发中，数据交互常用的两种形式：js调鸿蒙和鸿蒙调js两种形式

2. 官方文档指南

js调鸿蒙：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-in-page-app-function-invoking-V5

3. 实现过程

开发者使用Web组件将应用侧代码注册到前端页面中，注册完成之后，前端页面中使用注册的对象名称就可以调用应用侧的函数，实现在前端页面中调用应用侧方法。

注册应用侧代码有两种方式，一种在Web组件初始化调用，使用javaScriptProxy()接口。另外一种在Web组件初始化完成后调用，使用registerJavaScriptProxy()接口。

这里只讲javaScriptProxy()的实现

javaScriptProxy
javaScriptProxy(javaScriptProxy: JavaScriptProxy)

注入JavaScript对象到window对象中，并在window对象中调用该对象的方法。所有参数不支持更新。注册对象时，同步与异步方法列表请至少选择一项不为空，可同时注册两类方法。同一方法在同步与异步列表中重复注册，将默认异步调用。此接口只支持注册一个对象，若需要注册多个对象请使用registerJavaScriptProxy9+。

参数：

参数名	参数类型	必填	参数描述
javaScriptProxy	JavaScriptProxy	`是`	参与注册的对象。`只能声明方法，不能声明属性`。

JavaScriptProxy（定义要注入的JavaScript对象）

名称	类型	必填	说明
object	object	`是`	参与注册的对象。只能声明方法，不能声明属性。
name	string	`是`	注册对象的名称，与window中调用的对象名一致。
methodList	Array	`是`	参与注册的应用侧JavaScript对象的同步方法。
controller	WebviewController^9+	-	-
asyncMethodList^12+	Array	否	参与注册的应用侧JavaScript对象的异步方法。异步方法无法获取返回值。

编写一个index3.html前端网页

<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<button type="button" style="font-size:80px" onclick="callArkTS()">点我，js调鸿蒙，看看效果吧</button>
<p id="demo" style="font-size:80px;color:red"></p>
<script>
    function callArkTS() {
      
      
        let str = userObject.getUserName();
        document.getElementById("demo").innerHTML = str;
        console.info('ArkTS Hello World! :' + str);
    }
</script>
</body>
</html>

将index3.html放在项目rawfile文件夹中
使用javaScriptProxy注入

 .javaScriptProxy({
    
    
          object: this.userInfo,
          name: 'userObject',
          methodList: ["getUserName"],
          controller: this.controller
        })

4. 鸿蒙端代码实现全过程

import {
    
     webview } from '@kit.ArkWeb'


class UserInfo {
    
    
  //构造方法
  constructor() {
    
    
  }

  getUserName(): string {
    
    
    return '我是浩宇软件开发~~~'
  }
}

@Entry
@Component
struct TestPage {
    
    
  controller: webview.WebviewController = new webview.WebviewController()
  @State userInfo: UserInfo = new UserInfo()

  build() {
    
    
    Column() {
    
    
      Web({
    
    
        src: $rawfile('index3.html'),
        controller: this.controller
      })// 将对象注入到web端
        .javaScriptProxy({
    
    
          object: this.userInfo,
          name: 'userObject',
          methodList: ["getUserName"],
          controller: this.controller
        })
    }
    .height('100%')
    .width('100%')
  }
}

5. 演示效果图

在这里插入图片描述