1. 前言导读
在上集中,我们学些了鸿蒙如何去调用前端js函数,这集我们来学习js如何调用鸿蒙函数。在应用开发中,数据交互常用的两种形式:
js调鸿蒙和鸿蒙调js
两种形式
2. 官方文档指南
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%')
}
}