!11373 【web子系统】更新webMessagePort资料样例，添加判空处理

Merge pull request !11373 from echoorchid/master

zh-cn/application-dev/reference/apis/js-apis-webview.md

@@ -46,7 +46,11 @@ struct WebComponent {
     Column() {
       Button('close')
         .onClick(() => {
-          this.msgPort[1].close();
+          if (this.msgPort && this.msgPort[1]) {
+            this.msgPort[1].close();
+          } else {
+            console.error("msgPort is null, Please initialize first");
+          }
         })
       Web({ src: 'www.example.com', controller: this.controller })
     }
@@ -1383,7 +1387,11 @@ struct WebComponent {
       Button('SendDataToHTML')
         .onClick(() => {
           try {
-            this.ports[1].postMessageEvent("post message from ets to HTML");
+            if (this.ports && this.ports[1]) {
+              this.ports[1].postMessageEvent("post message from ets to HTML");
+            } else {
+              console.error(`ports is null, Please initialize first`);
+            }
           } catch (error) {
             console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
           }
@@ -1434,7 +1442,11 @@ window.addEventListener('message', function (event) {
 
 // 3. 使用h5Port往ets侧发送消息.
 function PostMsgToEts(data) {
-    h5Port.postMessage(data);
+    if (h5Port) {
+      h5Port.postMessage(data);
+    } else {
+      console.error("h5Port is null, Please initialize first");
+    }
 }
 ```