!10937 挑单合入3.2Beta3【优化webMessage文档】如何进行webview内外通信，接口资料分散，优化改进

Merge pull request !10937 from echoorchid/OpenHarmony-3.2-Beta3

!10937 挑单合入3.2Beta3【优化webMessage文档】如何进行webview内外通信，接口资料分散，优化改进
Merge pull request !10937 from echoorchid/OpenHarmony-3.2-Beta3
555a1818 · openharmony_ci · Gitee · b568682d · ef2eb518 · 555a1818
隐藏空白更改
内联并排

Showing with 74 addition and 13 deletion

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md ...ication-dev/reference/arkui-ts/ts-basic-components-web.md +74 -13

未找到文件。
--- 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
@@ -3404,38 +3404,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
+  <!DOCTYPE html>
+  <html>
+      <body>
+          <h1>Web Message Port Demo</h1>
+          <div style="font-size: 24pt;">
+            <input type="button" value="5.SendToEts" onclick="PostMsgToEts(msgFromJS.value);" /><br/>
+            <input id="msgFromJS" type="text" value="send this message from HTML to ets" style="font-size: 16pt;" /><br/>
+          </div>
+          <p class="output">display received message send from ets</p>
+      </body>
+      <script src="index.js"></script>
+  </html>
+
+  // 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)
+  }
  ```

 ### getUrl<sup>9+</sup>
@@ -5065,7 +5126,7 @@ close(): void
 ### postMessageEvent<sup>9+</sup>
 postMessageEvent(message: WebMessageEvent): void

-发送消息。
+发送消息。完整示例代码参考[postMessage](#postmessage9)

 **参数：**

@@ -5100,7 +5161,7 @@ postMessageEvent(message: WebMessageEvent): void
 ### onMessageEvent<sup>9+</sup>
 onMessageEvent(callback: (result: string) => void): void

-注册回调函数，接收HTML5侧发送过来的消息。
+注册回调函数，接收HTML5侧发送过来的消息。完整示例代码参考[postMessage](#postmessage9)

 **参数：**

@@ -5172,7 +5233,7 @@ getData(): string
 ### setData<sup>9+</sup>
 setData(data: string): void

-设置当前对象中的消息。
+设置当前对象中的消息。完整示例代码参考[postMessage](#postmessage9)

 **参数：**

@@ -5240,7 +5301,7 @@ getPorts(): Array\<WebMessagePort\>
 ### setPorts<sup>9+</sup>
 setPorts(ports: Array\<WebMessagePort\>): void

-设置当前对象中的消息端口。
+设置当前对象中的消息端口。完整示例代码参考[postMessage](#postmessage9)

 **参数：**