From 5cb9b3b8c89f8b0afe14d6d7c10da731fae91a75 Mon Sep 17 00:00:00 2001 From: echoorchid Date: Thu, 11 Aug 2022 11:19:19 +0800 Subject: [PATCH] =?UTF-8?q?webMessagePort=E6=8E=A5=E5=8F=A3doc=E6=8F=8F?= =?UTF-8?q?=E8=BF=B0=E5=8F=8A=E7=A4=BA=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: echoorchid --- .../arkui-ts/ts-basic-components-web.md | 248 ++++++++++++++++++ 1 file changed, 248 insertions(+) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md index c242620a36..13fe4ce219 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md @@ -2548,6 +2548,86 @@ getCookieManager(): WebCookie } ``` +### createWebMessagePorts9+ + +createWebMessagePorts(): Array + +创建Web信息端口。 + +**返回值：** +| 类型 | 说明 | +| ------------------------------- | ------------- | +| Array | web信息端口列表 | + +**示例：** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + ports: WebMessagePorts[] = null; + build() { + Column() { + Button('createWebMessagePorts') + .onClick(() => { + this.ports = this.controller.createWebMessagePorts(); + console.log("createWebMessagePorts size:" + this.ports.length) + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } + } + ``` + +### postMessage9+ + +postMessage(options: { message: WebMessageEvent, uri: string}): void + +发送Web信息端口到Html5。 + +**参数：** +| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | +| ---------- | --------------- | ---- | ---- | ------------------------- | +| message | WebMessageEvent | 是 | - |要发送的信息，包含数据和信息端口 。 | +| uri | string | 是 | - | 接收该信息的URI。 | + +**示例：** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + ports: WebMessagePorts[] = null; + build() { + Column() { + Button('postMessage') + .onClick(() => { + var sendPortArray = new Array(this.ports[1]); + var msgEvent = new WebMessageEvent(); + msgEvent.setData("__init_ports__"); + msgEvent.setPorts(sendPortArray); + this.controller.postMessage(msgEvent, uri:"*"); + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } + } + // xxx.js + var h5Port; + window.addEventListener('message', function(event){ + if (event.data == '__init_ports__') { + if(event.ports[0] != null) { + h5Port = event.ports[0]; + h5Port.onmessage = function(event) { + console.log('receive message from ets, on message:' + event.data); + } + } + } + }) + ``` + ## HitTestValue9+ 提供点击区域的元素信息。示例代码参考[getHitTestValue](#gethittestvalue9)。 @@ -3402,3 +3482,171 @@ storeWebArchive(baseName: string, autoName: boolean): Promise } } ``` + +## WebMessagePort9+ + +通过WebMessagePort可以进行消息的发送以及接收。 +### postMessageEvent +close(): void + +关闭该信息端口。 + +### postMessageEvent +postMessageEvent(message: WebMessageEvent): void + +发送消息。 + +**参数：** +| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | +| ----- | ------ | ---- | ---- | ----------------- | +| message | WebMessageEvent | 是 | - | 要发送的消息。 | + +**示例：** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + ports: WebMessagePorts[] = null; + + build() { + Column() { + Button('postMessageEvent') + .onClick(() => { + var msg = new WebMessageEvent(); + msg.setData("post message from ets to h5"); + this.port[0].postMessageEvent(msg); + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } + } + ``` + +### onMessageEvent +onMessageEvent(callback: (result: string) => void): void + +注册回调函数，接收h5侧发送过来的消息。 + +**参数：** +| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | +| ----- | ------ | ---- | ---- | ----------------- | +| callback | function | 是 | - | 接收消息的回调函数。 | + +**示例：** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + ports: WebMessagePorts[] = null; + + build() { + Column() { + Button('onMessageEvent') + .onClick(() => { + this.port[0].onMessageEvent((result: string) => { + console.log("received message from h5, on message:" + result); + }) + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } + } + ``` + + +## WebMessageEvent9+ + +通过WebMessagePort对要发送的消息和端口进行封装。 + +### getData +getData(): string + +获取当前对象中存放的消息。 + +**返回值：** +| 类型 | 说明 | +| ------------------------------- | ------------- | +| string | 当前该类型对象中存放的消息。 | + + +### setData +setData(data: string): void + +设置当前对象中的消息。 + +**参数：** +| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | +| ----- | ------ | ---- | ---- | ----------------- | +| data | string | 是 | - | 要发送的消息。 | + +**示例：** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + ports: WebMessagePorts[] = null; + + build() { + Column() { + Button('setData') + .onClick(() => { + var msg = new WebMessageEvent(); + msg.setData("post message from ets to h5"); + this.port[0].postMessageEvent(msg); + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } + } + ``` +### getPorts +getPorts(): Array + +获取当前对象中存放的消息端口。 + +**返回值：** +| 类型 | 说明 | +| ------------------------------- | ------------- | +| Array | 当前该类型对象中存放的消息端口。 | + + +### setPorts +setPorts(ports: Array): void + +设置当前对象中的消息端口。 + +**参数：** +| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | +| ----- | ------ | ---- | ---- | ----------------- | +| ports | Array | 是 | - | 要发送的消息端口。 | + +**示例：** + ```ts + // xxx.ets + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController(); + ports: WebMessagePorts[] = null; + + build() { + Column() { + Button('setPorts') + .onClick(() => { + var sendPortArray = new Array(this.ports[1]); + var msgEvent = new WebMessageEvent(); + msgEvent.setData("__init_ports__"); + msgEvent.setPorts(sendPortArray); + this.controller.postMessage(msgEvent, uri:"*"); + }) + Web({ src: 'www.example.com', controller: this.controller }) + } + } + } + ``` \ No newline at end of file -- GitLab