From 0ea8687c03f5d134bae565ad3e674f6342ab0957 Mon Sep 17 00:00:00 2001 From: zgit2021 Date: Mon, 4 Sep 2023 14:51:31 +0800 Subject: [PATCH] web ArkTs specification adaptation Signed-off-by: zgit2021 Change-Id: I0fd2227238d00a70a8d7e115ec73f6865d413184 --- .../web/web-app-page-data-channel.md | 9 ++-- .../web/web-cookie-and-data-storage-mgmt.md | 8 +++- zh-cn/application-dev/web/web-file-upload.md | 5 ++- .../web/web-geolocation-permission.md | 12 +++-- .../web/web-in-page-app-function-invoking.md | 44 ++++++++++++------- .../web/web-open-in-new-window.md | 2 +- .../web-page-loading-with-web-components.md | 12 +++-- ...b-redirection-and-browsing-history-mgmt.md | 39 ++++++++-------- .../web-resource-interception-request-mgmt.md | 10 +++-- 9 files changed, 91 insertions(+), 50 deletions(-) diff --git a/zh-cn/application-dev/web/web-app-page-data-channel.md b/zh-cn/application-dev/web/web-app-page-data-channel.md index b968e6f570..f7445f1a88 100644 --- a/zh-cn/application-dev/web/web-app-page-data-channel.md +++ b/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 }) diff --git a/zh-cn/application-dev/web/web-cookie-and-data-storage-mgmt.md b/zh-cn/application-dev/web/web-cookie-and-data-storage-mgmt.md index 7734b404fe..3f0b6d2af9 100644 --- a/zh-cn/application-dev/web/web-cookie-and-data-storage-mgmt.md +++ b/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 }) diff --git a/zh-cn/application-dev/web/web-file-upload.md b/zh-cn/application-dev/web/web-file-upload.md index d2d37e6734..5e9ff11566 100644 --- a/zh-cn/application-dev/web/web-file-upload.md +++ b/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 = [ 'xxx/test.png', ] - event.result.handleFileList(fileList) + if (event) { + event.result.handleFileList(fileList) + } return true; }) } diff --git a/zh-cn/application-dev/web/web-geolocation-permission.md b/zh-cn/application-dev/web/web-geolocation-permission.md index 82866d3ecd..65c2e6ec04 100644 --- a/zh-cn/application-dev/web/web-geolocation-permission.md +++ b/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); // 不允许此站点地理位置权限请求 + } } }) }) diff --git a/zh-cn/application-dev/web/web-in-page-app-function-invoking.md b/zh-cn/application-dev/web/web-in-page-app-function-invoking.md index 9f67783d80..ee337d5045 100644 --- a/zh-cn/application-dev/web/web-in-page-app-function-invoking.md +++ b/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 }) diff --git a/zh-cn/application-dev/web/web-open-in-new-window.md b/zh-cn/application-dev/web/web-open-in-new-window.md index b05a96ffec..faf0830039 100644 --- a/zh-cn/application-dev/web/web-open-in-new-window.md +++ b/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); }) diff --git a/zh-cn/application-dev/web/web-page-loading-with-web-components.md b/zh-cn/application-dev/web/web-page-loading-with-web-components.md index 46a1f5693b..85f9873eaf 100644 --- a/zh-cn/application-dev/web/web-page-loading-with-web-components.md +++ b/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 diff --git a/zh-cn/application-dev/web/web-redirection-and-browsing-history-mgmt.md b/zh-cn/application-dev/web/web-redirection-and-browsing-history-mgmt.md index 4d64482bf4..2f0122560c 100644 --- a/zh-cn/application-dev/web/web-redirection-and-browsing-history-mgmt.md +++ b/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; }) diff --git a/zh-cn/application-dev/web/web-resource-interception-request-mgmt.md b/zh-cn/application-dev/web/web-resource-interception-request-mgmt.md index 6a01c946ea..147f24b945 100644 --- a/zh-cn/application-dev/web/web-resource-interception-request-mgmt.md +++ b/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); -- GitLab