!23503 web ArkTs规范整改( zh-cn/application-dev/web/ )

Merge pull request !23503 from zgit2021/main

zh-cn/application-dev/web/web-app-page-data-channel.md

@@ -12,12 +12,13 @@
   ```ts
   // xxx.ets
   import web_webview from '@ohos.web.webview';
+  import business_error from '@ohos.base';
 
   @Entry
   @Component
   struct WebComponent {
     controller: web_webview.WebviewController = new web_webview.WebviewController();
-    ports: web_webview.WebMessagePort[];
+    ports: web_webview.WebMessagePort[] = [];
     @State sendFromEts: string = 'Send this message from ets to HTML';
     @State receivedFromHtml: string = 'Display received message send from HTML';
 
@@ -57,7 +58,8 @@
               // 3、将另一个消息端口(如端口0)发送到HTML侧，由HTML侧保存并使用。
               this.controller.postMessage('__init_port__', [this.ports[0]], '*');
             } catch (error) {
-              console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
+              let e: business_error.BusinessError = error as business_error.BusinessError;
+              console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
             }
           })
 
@@ -71,7 +73,8 @@
                 console.error(`ports is null, Please initialize first`);
               }
             } catch (error) {
-              console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
+              let e: business_error.BusinessError = error as business_error.BusinessError;
+              console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
             }
           })
         Web({ src: $rawfile('xxx.html'), controller: this.controller })

zh-cn/application-dev/web/web-cookie-and-data-storage-mgmt.md

@@ -13,6 +13,7 @@ Web组件提供了WebCookieManager类，用于管理Web组件的Cookie信息。C
 ```ts
 // xxx.ets
 import web_webview from '@ohos.web.webview';
+import business_error from '@ohos.base';
 
 @Entry
 @Component
@@ -26,7 +27,8 @@ struct WebComponent {
           try {
             web_webview.WebCookieManager.setCookie('https://www.example.com', 'value=test');
           } catch (error) {
-            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
+            let e: business_error.BusinessError = error as business_error.BusinessError;
+            console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
           }
         })
       Web({ src: 'www.example.com', controller: this.controller })
@@ -82,6 +84,7 @@ struct WebComponent {
 ```ts
 // xxx.ets
 import web_webview from '@ohos.web.webview';
+import business_error from '@ohos.base';
 
 @Entry
 @Component
@@ -96,7 +99,8 @@ struct WebComponent {
             // 设置为true时同时清除rom和ram中的缓存，设置为false时只清除ram中的缓存
             this.controller.removeCache(true);
           } catch (error) {
-            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
+            let e: business_error.BusinessError = error as business_error.BusinessError;
+            console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
           }
         })
       Web({ src: 'www.example.com', controller: this.controller })

zh-cn/application-dev/web/web-file-upload.md

@@ -12,6 +12,7 @@ Web组件支持前端页面选择文件上传功能，应用开发者可以使
   ```ts
   // xxx.ets
   import web_webview from '@ohos.web.webview';
+
   @Entry
   @Component
   struct WebComponent {
@@ -25,7 +26,9 @@ Web组件支持前端页面选择文件上传功能，应用开发者可以使
              let fileList: Array<string> = [
                 'xxx/test.png',
              ]
-             event.result.handleFileList(fileList)
+             if (event) {
+                event.result.handleFileList(fileList)
+             }
              return true;
           })
       }

zh-cn/application-dev/web/web-geolocation-permission.md

@@ -53,17 +53,23 @@ Web组件提供位置权限管理能力。开发者可以通过[onGeolocationSho
               primaryButton: {
                 value: 'cancel',
                 action: () => {
-                  event.geolocation.invoke(event.origin, false, false);   // 不允许此站点地理位置权限请求
+                  if (event) {
+                    event.geolocation.invoke(event.origin, false, false);   // 不允许此站点地理位置权限请求
+                  }
                 }
               },
               secondaryButton: {
                 value: 'ok',
                 action: () => {
-                  event.geolocation.invoke(event.origin, true, false);    // 允许此站点地理位置权限请求
+                  if (event) {
+                    event.geolocation.invoke(event.origin, true, false);    // 允许此站点地理位置权限请求
+                  }
                 }
               },
               cancel: () => {
-                event.geolocation.invoke(event.origin, false, false);   // 不允许此站点地理位置权限请求
+                if (event) {
+                  event.geolocation.invoke(event.origin, false, false);   // 不允许此站点地理位置权限请求
+                }
               }
             })
           })

zh-cn/application-dev/web/web-in-page-app-function-invoking.md

@@ -16,16 +16,21 @@
   // xxx.ets
   import web_webview from '@ohos.web.webview';
 
+  class testClass {
+    constructor() {
+    }
+
+    test(): string {
+      return 'ArkTS Hello World!';
+    }
+  }
+
   @Entry
   @Component
   struct WebComponent {
     webviewController: web_webview.WebviewController = new web_webview.WebviewController();
     // 声明需要注册的对象
-    testObj = {
-      test: () => {
-        return 'ArkTS Hello World!';
-      }
-    }
+    @State testObj: testClass = new testClass();
 
     build() {
       Column() {
@@ -49,19 +54,26 @@
   ```ts
   // xxx.ets
   import web_webview from '@ohos.web.webview';
+  import business_error from '@ohos.base';
+
+  class testClass {
+    constructor() {
+    }
+  
+    test(): string {
+      return "ArkUI Web Component";
+    }
+  
+    toString(): void {
+      console.log('Web Component toString');
+    }
+  }
 
   @Entry
   @Component
   struct Index {
     webviewController: web_webview.WebviewController = new web_webview.WebviewController();
-    testObj = {
-      test: (data) => {
-        return "ArkUI Web Component";
-      },
-      toString: () => {
-        console.info('Web Component toString');
-      }
-    }
+    @State testObj: testClass = new testClass();
 
     build() {
       Column() {
@@ -70,7 +82,8 @@
             try {
               this.webviewController.refresh();
             } catch (error) {
-              console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
+              let e: business_error.BusinessError = error as business_error.BusinessError;
+              console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
             }
           })
         Button('Register JavaScript To Window')
@@ -78,7 +91,8 @@
             try {
               this.webviewController.registerJavaScriptProxy(this.testObj, "objName", ["test", "toString"]);
             } catch (error) {
-              console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
+              let e: business_error.BusinessError = error as business_error.BusinessError;
+              console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
             }
           })
         Web({ src: $rawfile('index.html'), controller: this.webviewController })

zh-cn/application-dev/web/web-open-in-new-window.md

@@ -31,7 +31,7 @@ Web组件提供了在新窗口打开页面的能力，开发者可以通过[mult
         .multiWindowAccess(true)
         .onWindowNew((event) => {
           console.info("onWindowNew...");
-          var popController: web_webview.WebviewController = new web_webview.WebviewController();
+          let popController: web_webview.WebviewController = new web_webview.WebviewController();
           // 开发者需要在此处新建窗口,跟popController关联，并且将popController返回给Web组件。如果不需要打开新窗口请将返回值设置为event.handler.setWebController(null);
           event.handler.setWebController(popController);
         })

zh-cn/application-dev/web/web-page-loading-with-web-components.md

@@ -19,6 +19,7 @@
 ```ts
 // xxx.ets
 import web_webview from '@ohos.web.webview';
+import business_error from '@ohos.base';
 
 @Entry
 @Component
@@ -33,7 +34,8 @@ struct WebComponent {
             // 点击按钮时，通过loadUrl，跳转到www.example1.com
             this.webviewController.loadUrl('www.example1.com');
           } catch (error) {
-            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
+            let e: business_error.BusinessError = error as business_error.BusinessError;
+            console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
           }
         })
       // 组件创建时，加载www.example.com
@@ -64,6 +66,7 @@ struct WebComponent {
   ```ts
   // xxx.ets
   import web_webview from '@ohos.web.webview';
+  import business_error from '@ohos.base';
 
   @Entry
   @Component
@@ -78,7 +81,8 @@ struct WebComponent {
               // 点击按钮时，通过loadUrl，跳转到local1.html
               this.webviewController.loadUrl($rawfile("local1.html"));
             } catch (error) {
-              console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
+              let e: business_error.BusinessError = error as business_error.BusinessError;
+              console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
             }
           })
         // 组件创建时，通过$rawfile加载本地文件local.html
@@ -111,6 +115,7 @@ Web组件可以通过[loadData()](../reference/apis/js-apis-webview.md#loaddata)
 ```ts
 // xxx.ets
 import web_webview from '@ohos.web.webview';
+import business_error from '@ohos.base';
 
 @Entry
 @Component
@@ -129,7 +134,8 @@ struct WebComponent {
               'UTF-8'
             );
           } catch (error) {
-            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
+            let e: business_error.BusinessError = error as business_error.BusinessError;
+            console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
           }
         })
       // 组件创建时，加载www.example.com

zh-cn/application-dev/web/web-redirection-and-browsing-history-mgmt.md

@@ -21,7 +21,6 @@ struct WebComponent {
         .onClick(() => {
           if (this.webviewController.accessBackward()) {
             this.webviewController.backward();
-            return true;
           }
         })
       Web({ src: 'https://www.example.com/cn/', controller: this.webviewController})
@@ -55,11 +54,13 @@ struct WebComponent {
       Column() {
         Web({ src: $rawfile('route.html'), controller: this.webviewController })
           .onUrlLoadIntercept((event) => {
-            let url: string = event.data as string;
-            if (url.indexOf('native://') === 0) {
-              // 跳转其他界面
-              router.pushUrl({ url:url.substring(9) })
-              return true;
+            if (event) {
+              let url: string = event.data as string;
+              if (url.indexOf('native://') === 0) {
+                // 跳转其他界面
+                router.pushUrl({ url:url.substring(9) })
+                return true;
+              }
             }
             return false;
           })
@@ -122,18 +123,20 @@ Web组件可以实现点击前端页面超链接跳转到其他应用。
       Column() {
         Web({ src: $rawfile('xxx.html'), controller: this.webviewController})
           .onUrlLoadIntercept((event) => {
-            let url: string = event.data as string;
-            // 判断链接是否为拨号链接
-            if (url.indexOf('tel://') === 0) {
-              // 跳转拨号界面
-              call.makeCall(url.substring(6), (err) => {
-                if (!err) {
-                  console.info('make call succeeded.');
-                } else {
-                  console.info('make call fail, err is:' + JSON.stringify(err));
-                }
-              });
-              return true;
+            if (event) {
+              let url: string = event.data as string;
+              // 判断链接是否为拨号链接
+              if (url.indexOf('tel://') === 0) {
+                // 跳转拨号界面
+                call.makeCall(url.substring(6), (err) => {
+                  if (!err) {
+                    console.info('make call succeeded.');
+                  } else {
+                    console.info('make call fail, err is:' + JSON.stringify(err));
+                  }
+                });
+                return true;
+              }
             }
             return false;
           })

zh-cn/application-dev/web/web-resource-interception-request-mgmt.md

@@ -51,10 +51,12 @@ Web网页上发起资源加载请求，应用层收到资源请求消息。应
       Column() {
         Web({ src: $rawfile('example.html'), controller: this.controller })
           .onInterceptRequest((event) => {
-            console.info('url:' + event.request.getRequestUrl());
-            // 拦截页面请求
-            if (event.request.getRequestUrl() !== 'https://www.intercept.com/test.html') {
-              return null;
+            if (event) {
+              console.info('url:' + event.request.getRequestUrl());
+              // 拦截页面请求
+              if (event.request.getRequestUrl() !== 'https://www.intercept.com/test.html') {
+                return this.responseResource;
+              }
             }
             // 构造响应数据
             this.responseResource.setResponseData(this.webData);