From 6c350396ea8b5ae19b9460ae6b332c0c7d12b0af Mon Sep 17 00:00:00 2001 From: echoorchid Date: Thu, 20 Oct 2022 22:18:42 +0800 Subject: [PATCH] updata docs for web message port Signed-off-by: echoorchid --- .../reference/apis/js-apis-webview.md | 57 +++++++++--- .../arkui-ts/ts-basic-components-web.md | 91 ++++++++++++++++--- 2 files changed, 120 insertions(+), 28 deletions(-) diff --git a/zh-cn/application-dev/reference/apis/js-apis-webview.md b/zh-cn/application-dev/reference/apis/js-apis-webview.md index fdaaf855c5..383ae8a709 100644 --- a/zh-cn/application-dev/reference/apis/js-apis-webview.md +++ b/zh-cn/application-dev/reference/apis/js-apis-webview.md @@ -1380,14 +1380,41 @@ import web_webview from '@ohos.web.webview'; struct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController(); ports: web_webview.WebMessagePort[]; + @State sendFromEts: string = 'Send this message from ets to HTML'; + @State receivedFromHtml: string = 'Display received message send from HTML'; build() { Column() { + // 展示接收到的来自HTML的内容 + Text(this.receivedFromHtml) + // 输入框的内容发送到html + TextInput({placeholder: 'Send this message from ets to HTML'}) + .onChange((value: string) => { + this.sendFromEts = value; + }) + Button('postMessage') .onClick(() => { try { + // 1、创建两个消息端口 this.ports = this.controller.createWebMessagePorts(); + // 2、将其中一个消息端口发送到HTML侧，由HTML侧保存并使用。 this.controller.postMessage('__init_port__', [this.ports[0]], '*'); + // 3、另一个消息端口在应用侧注册回调事件。 + this.ports[1].onMessageEvent((result: string) => { + var msg = 'Got msg from HTML: ' + result; + this.receivedFromHtml = msg; + }) + } catch (error) { + console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); + } + }) + + // 4、使用应用侧的端口给另一个已经发送到html的端口发送消息。 + Button('SendDataToHTML') + .onClick(() => { + try { + this.ports[1].postMessageEvent("post message from ets to HTML"); } catch (error) { console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); } @@ -1404,36 +1431,40 @@ struct WebComponent { - WebView Callback Demo + WebView Message Port Demo - -

Message Demo

-
-
-
-
-

My body

- - + +

WebView Message Port Demo

+
+
+
+
+

display received message send from ets

+ + ``` ```js //xxx.js var h5Port; +var output = document.querySelector('.output'); window.addEventListener('message', function (event) { if (event.data == '__init_port__') { if (event.ports[0] != null) { - h5Port = event.ports[0]; + h5Port = event.ports[0]; // 1. 保存从ets侧发送过来的端口 h5Port.onmessage = function (event) { - console.log('receive message from ets, on message:' + event.data); + // 2. 接收ets侧发送过来的消息. + var msg = 'Got message from ets:' + event.data; + output.innerHTML = msg; } } } }) -function PostWebMsg(data) { +// 3. 使用h5Port往ets侧发送消息. +function PostMsgToEts(data) { h5Port.postMessage(data); } ``` 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 cfc799864d..df6e8b8f12 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 @@ -123,7 +123,7 @@ domStorageAccess(domStorageAccess: boolean) fileAccess(fileAccess: boolean) -设置是否开启应用中文件系统的访问，默认启用。[$rawfile(filepath/filename)](../../ui/ts-resource-access.md)中rawfile路径的文件不受该属性影响而限制访问。 +设置是否开启应用中文件系统的访问，默认启用。[$rawfile(filepath/filename)](../../quick-start/resource-categories-and-access.md)中rawfile路径的文件不受该属性影响而限制访问。 **参数：** @@ -152,7 +152,7 @@ fileAccess(fileAccess: boolean) fileFromUrlAccess(fileFromUrlAccess: boolean) -设置是否允许通过网页中的JavaScript脚本访问应用文件系统中的内容，默认未启用。[$rawfile(filepath/filename)](../../ui/ts-resource-access.md)中rawfile路径的文件不受该属性影响而限制访问。 +设置是否允许通过网页中的JavaScript脚本访问应用文件系统中的内容，默认未启用。[$rawfile(filepath/filename)](../../quick-start/resource-categories-and-access.md)中rawfile路径的文件不受该属性影响而限制访问。 **参数：** @@ -3644,38 +3644,99 @@ postMessage(options: { message: WebMessageEvent, uri: string}): void **示例：** ```ts - // xxx.ets + // index.ets @Entry @Component struct WebComponent { controller: WebController = new WebController(); ports: WebMessagePort[] = null; + @State sendFromEts: string = 'Send this message from ets to HTML'; + @State receivedFromHtml: string = 'Display received message send from HTML'; + build() { Column() { - Button('postMessage') + // 展示接收到的来自HTML的内容 + Text(this.receivedFromHtml) + // 输入框的内容发送到HTML + TextInput({placeholder: 'Send this message from ets to HTML'}) + .onChange((value: string) => { + this.sendFromEts = value; + }) + + // 1、创建两个消息端口 + Button('1.CreateWebMessagePorts') + .onClick(() => { + this.ports = this.controller.createWebMessagePorts(); + console.log("createWebMessagePorts size:" + this.ports.length) + }) + + // 2、将其中一个消息端口发送到HTML侧，由HTML侧保存并使用。 + Button('2.PostMessagePort') .onClick(() => { var sendPortArray = new Array(this.ports[1]); var msgEvent = new WebMessageEvent(); - msgEvent.setData("__init_ports__"); + msgEvent.setData("__init_port__"); msgEvent.setPorts(sendPortArray); this.controller.postMessage({message: msgEvent, uri: "*"}); }) - Web({ src: 'www.example.com', controller: this.controller }) + + // 3、另一个消息端口在应用侧注册回调事件。 + Button('3.RegisterCallback') + .onClick(() => { + this.ports[0].onMessageEvent((result: string) => { + var msg = 'Got msg from HTML: ' + result; + this.receivedFromHtml = msg; + }) + }) + + // 4、使用应用侧的端口给另一个已经发送到HTML的消息端口发送消息。 + Button('4.SendDataToHtml5') + .onClick(() => { + var msg = new WebMessageEvent(); + msg.setData(this.sendFromEts); + this.ports[0].postMessageEvent(msg); + }) + Web({ src: $rawfile("index.html"), controller: this.controller }) + .javaScriptAccess(true) + .fileAccess(true) } } } - // xxx.js + + // index.html + + + +

Web Message Port Demo

+
+
+
+
+

display received message send from ets

+ + + + + // index.js var h5Port; - window.addEventListener('message', function(event){ - if (event.data == '__init_ports__') { + var output = document.querySelector('.output'); + window.addEventListener('message', function(event) { + if (event.data == '__init_port__') { if(event.ports[0] != null) { - h5Port = event.ports[0]; + h5Port = event.ports[0]; // 1. 保存从ets侧发送过来的端口 h5Port.onmessage = function(event) { - console.log('receive message from ets, on message:' + event.data); + // 2. 接收ets侧发送过来的消息. + var msg = 'Got message from ets:' + event.data; + output.innerHTML = msg; } } } }) + + // 3. 使用h5Port往ets侧发送消息. + function PostMsgToEts(data) { + h5Port.postMessage(data) + } ``` ### getUrl9+ @@ -5305,7 +5366,7 @@ close(): void ### postMessageEvent9+ postMessageEvent(message: WebMessageEvent): void -发送消息。 +发送消息。完整示例代码参考[postMessage](#postmessage9) **参数：** @@ -5340,7 +5401,7 @@ postMessageEvent(message: WebMessageEvent): void ### onMessageEvent9+ onMessageEvent(callback: (result: string) => void): void -注册回调函数，接收HTML5侧发送过来的消息。 +注册回调函数，接收HTML5侧发送过来的消息。完整示例代码参考[postMessage](#postmessage9) **参数：** @@ -5412,7 +5473,7 @@ getData(): string ### setData9+ setData(data: string): void -设置当前对象中的消息。 +设置当前对象中的消息。完整示例代码参考[postMessage](#postmessage9) **参数：** @@ -5480,7 +5541,7 @@ getPorts(): Array\ ### setPorts9+ setPorts(ports: Array\): void -设置当前对象中的消息端口。 +设置当前对象中的消息端口。完整示例代码参考[postMessage](#postmessage9) **参数：** -- GitLab