!10897 【优化webMessage文档】如何进行webview内外通信，接口资料分散，优化改进

Merge pull request !10897 from echoorchid/master

!10897 【优化webMessage文档】如何进行webview内外通信，接口资料分散，优化改进
Merge pull request !10897 from echoorchid/master
4f17a1fb · openharmony_ci · Gitee · 8dbc92e5 · 6c350396 · 4f17a1fb
2 changed file
--- 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 {
 <html>
 <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>WebView Callback Demo</title>
+    <title>WebView Message Port Demo</title>
 </head>

-<body>
-<h1>Message Demo</h1>
-<div>
-    <input type="button" value="SendToEts" onclick="testPostWebMsg(msgFromJS.value);"/><br/>
-    <input id="msgFromJs" type="text" value="Msg From H5 Demo"/><br/>
-</div>
-<p class="output">My body</p>
-</body>
-<script src="xxx.js"></script>
+  <body>
+    <h1>WebView Message Port Demo</h1>
+    <div>
+        <input type="button" value="SendToEts" onclick="PostMsgToEts(msgFromJS.value);"/><br/>
+        <input id="msgFromJs" type="text" value="send this message from HTML to ets"/><br/>
+    </div>
+    <p class="output">display received message send from ets</p>
+  </body>
+  <script src="xxx.js"></script>
 </html>
 ```

 ```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);
 }
 ```

--- 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
+  <!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>
@@ -5305,7 +5366,7 @@ close(): void
 ### postMessageEvent<sup>9+</sup>
 postMessageEvent(message: WebMessageEvent): void

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

 **参数：**

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

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

 **参数：**

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

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

 **参数：**

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

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

 **参数：**