From 7cc3fd9f631a842604e2f03753f0f1c58d42cb7d Mon Sep 17 00:00:00 2001 From: "ester.zhou" Date: Thu, 4 May 2023 11:49:29 +0800 Subject: [PATCH] Update docs (17170) Signed-off-by: ester.zhou --- .../reference/apis/js-apis-webview.md | 82 ++++++++++++++----- .../arkui-ts/ts-basic-components-web.md | 76 +++++++++++++++-- 2 files changed, 130 insertions(+), 28 deletions(-) diff --git a/en/application-dev/reference/apis/js-apis-webview.md b/en/application-dev/reference/apis/js-apis-webview.md index 503e6c262b..1531e98c54 100644 --- a/en/application-dev/reference/apis/js-apis-webview.md +++ b/en/application-dev/reference/apis/js-apis-webview.md @@ -234,7 +234,7 @@ Sends a message. For the complete sample code, see [onMessageEventExt](#onmessag | Name | Type | Mandatory| Description | | ------- | ------ | ---- | :------------- | -| message | [WebMessageExt](#webmessageext) | Yes | Message to send.| +| message | [WebMessageExt](#webmessageext10) | Yes | Message to send.| **Error codes** @@ -491,7 +491,7 @@ Sets how the \ component uses HTTPDNS for DNS resolution. | Name | Type | Mandatory | Description| | ------------------ | ------- | ---- | ------------- | -| secureDnsMode | [SecureDnsMode](#securednsmode) | Yes | Mode in which HTTPDNS is used.| +| secureDnsMode | [SecureDnsMode](#securednsmode10) | Yes | Mode in which HTTPDNS is used.| | secureDnsConfig | string | Yes| Information about the HTTPDNS server to use, which must use HTTPS. Only one HTTPDNS server can be configured.| **Example** @@ -504,7 +504,6 @@ import web_webview from '@ohos.web.webview'; export default class EntryAbility extends UIAbility { onCreate(want, launchParam) { console.log("EntryAbility onCreate") - web_webview.WebviewController.initializeWebEngine() try { web_webview.WebviewController.setHttpDns(web_webview.SecureDnsMode.Auto, "https://example1.test") } catch(error) { @@ -1420,7 +1419,7 @@ Executes a JavaScript script. This API uses a promise to return the script execu | Type | Description | | --------------- | --------------------------------------------------- | -| Promise\ | Promise used to return the result. Returns **null** if the JavaScript script fails to be executed| +| Promise\ | Promise used to return the result if the operation is successful and null otherwise.| **Error codes** @@ -2637,7 +2636,7 @@ Stores this web page. This API uses an asynchronous callback to return the resul | Name | Type | Mandatory| Description | | -------- | --------------------- | ---- | ------------------------------------------------------------ | | baseName | string | Yes | Save path. The value cannot be null. | -| autoName | boolean | Yes | Whether to automatically generate a file name. The value **false** means not to automatically generate a file name. The value **true** means to automatically generate a file name based on the URL of current page and the **baseName** value. In this case, **baseName** is regarded as a directory.| +| autoName | boolean | Yes | Whether to automatically generate a file name. The value **false** means not to automatically generate a file name. The value **true** means to automatically generate a file name based on the URL of the current page and the **baseName** value. In this case, **baseName** is regarded as a directory.| | callback | AsyncCallback\ | Yes | Callback used to return the save path if the operation is successful and null otherwise. | **Error codes** @@ -2662,7 +2661,7 @@ struct WebComponent { build() { Column() { - Button('saveWebArchive') + Button('storeWebArchive') .onClick(() => { try { this.controller.storeWebArchive("/data/storage/el2/base/", true, (error, filename) => { @@ -2697,7 +2696,7 @@ Stores this web page. This API uses a promise to return the result. | Name | Type| Mandatory| Description | | -------- | -------- | ---- | ------------------------------------------------------------ | | baseName | string | Yes | Save path. The value cannot be null. | -| autoName | boolean | Yes | Whether to automatically generate a file name. The value **false** means not to automatically generate a file name. The value **true** means to automatically generate a file name based on the URL of current page and the **baseName** value. In this case, **baseName** is regarded as a directory.| +| autoName | boolean | Yes | Whether to automatically generate a file name. The value **false** means not to automatically generate a file name. The value **true** means to automatically generate a file name based on the URL of the current page and the **baseName** value. In this case, **baseName** is regarded as a directory.| **Return value** @@ -2727,7 +2726,7 @@ struct WebComponent { build() { Column() { - Button('saveWebArchive') + Button('storeWebArchive') .onClick(() => { try { this.controller.storeWebArchive("/data/storage/el2/base/", true) @@ -2848,6 +2847,8 @@ backOrForward(step: number): void Performs a specific number of steps forward or backward on the current page based on the history stack. No redirection will be performed if the corresponding page does not exist in the history stack. +Because the previously loaded web pages are used for the operation, no page reloading is involved. + **System capability**: SystemCapability.Web.Webview.Core **Parameters** @@ -3586,10 +3587,11 @@ For details about the error codes, see [Webview Error Codes](../errorcodes/error **Example** +1. To perform operations on files, you must import the file management module. For details, see [File Management](./js-apis-file-fs.md). ```ts // xxx.ets import web_webview from '@ohos.web.webview'; -import fileio from '@ohos.fileio'; +import fs from '@ohos.file.fs'; @Entry @Component @@ -3602,11 +3604,13 @@ struct WebComponent { .onClick(() => { try { let state = this.controller.serializeWebState(); - let path = globalThis.AbilityContext.cacheDir; + // Obtain the value of globalThis.cacheDir from MainAbility.ts. + let path = globalThis.cacheDir; path += '/WebState'; - let fd = fileio.openSync(path, 0o2 | 0o100, 0o666); - fileio.writeSync(fd, state.buffer); - fileio.closeSync(fd); + // Synchronously open a file. + let file = fs.openSync(path, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE); + fs.writeSync(file.fd, state.buffer); + fs.closeSync(file.fd); } catch (error) { console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); } @@ -3617,6 +3621,21 @@ struct WebComponent { } ``` +2. Modify **MainAbility.ts**. +Obtain the path of the application cache file. +```ts +// xxx.ts +import UIAbility from '@ohos.app.ability.UIAbility'; +import web_webview from '@ohos.web.webview'; + +export default class MainAbility extends UIAbility { + onCreate(want, launchParam) { + // Bind cacheDir to the globalThis object to implement data synchronization between the UIAbility component and the page. + globalThis.cacheDir = this.context.cacheDir; + } +} +``` + ### restoreWebState restoreWebState(state: Uint8Array): void @@ -3641,10 +3660,11 @@ For details about the error codes, see [Webview Error Codes](../errorcodes/error **Example** +1. To perform operations on files, you must import the file management module. For details, see [File Management](./js-apis-file-fs.md). ```ts // xxx.ets import web_webview from '@ohos.web.webview'; -import fileio from '@ohos.fileio'; +import fs from '@ohos.file.fs'; @Entry @Component @@ -3656,17 +3676,22 @@ struct WebComponent { Button('RestoreWebState') .onClick(() => { try { - let path = globalThis.AbilityContext.cacheDir; + // Obtain the value of globalThis.cacheDir from MainAbility.ts. + let path = globalThis.cacheDir; path += '/WebState'; - let fd = fileio.openSync(path, 0o002, 0o666); - let stat = fileio.fstatSync(fd); + // Synchronously open a file. + let file = fs.openSync(path, fs.OpenMode.READ_WRITE); + let stat = fs.statSync(path); let size = stat.size; let buf = new ArrayBuffer(size); - fileio.read(fd, buf, (err, data) => { - if (data) { - this.controller.restoreWebState(new Uint8Array(data.buffer)); + fs.read(file.fd, buf, (err, readLen) => { + if (err) { + console.info("mkdir failed with error message: " + err.message + ", error code: " + err.code); + } else { + console.info("read file data succeed"); + this.controller.restoreWebState(new Uint8Array(buf.slice(0, readLen))); + fs.closeSync(file); } - fileio.closeSync(fd); }); } catch (error) { console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); @@ -3678,6 +3703,21 @@ struct WebComponent { } ``` +2. Modify **MainAbility.ts**. +Obtain the path of the application cache file. +```ts +// xxx.ts +import UIAbility from '@ohos.app.ability.UIAbility'; +import web_webview from '@ohos.web.webview'; + +export default class MainAbility extends UIAbility { + onCreate(want, launchParam) { + // Bind cacheDir to the globalThis object to implement data synchronization between the UIAbility component and the page. + globalThis.cacheDir = this.context.cacheDir; + } +} +``` + ### customizeSchemes static customizeSchemes(schemes: Array\): void diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-web.md b/en/application-dev/reference/arkui-ts/ts-basic-components-web.md index 18f30aeadc..f02aa129d4 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-web.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-web.md @@ -537,7 +537,7 @@ multiWindowAccess(multiWindow: boolean) Sets whether to enable the multi-window permission. -Enabling the multi-window permission requires implementation of the **onWindowNew** event. For details about the sample code, see [onWindowNew](#onwindownew9). +Enabling the multi-window permission requires implementation of the **onWindowNew** event. For the sample code, see [onWindowNew](#onwindownew9). **Parameters** @@ -703,6 +703,40 @@ Sets the cache mode. } ``` +### textZoomAtio(deprecated) + +textZoomAtio(textZoomAtio: number) + +Sets the text zoom ratio of the page. The default value is **100**, which indicates 100%. + +This API is deprecated since API version 9. You are advised to use [textZoomRatio9+](#textzoomratio9) instead. + +**Parameters** + +| Name | Type | Mandatory | Default Value | Description | +| ------------- | ------ | ---- | ---- | --------------- | +| textZoomAtio | number | Yes | 100 | Text zoom ratio to set.| + +**Example** + + ```ts + // xxx.ets + import web_webview from '@ohos.web.webview' + + @Entry + @Component + struct WebComponent { + controller: WebController = new WebController() + @State atio: number = 150 + build() { + Column() { + Web({ src: 'www.example.com', controller: this.controller }) + .textZoomAtio(this.atio) + } + } + } + ``` + ### textZoomRatio9+ textZoomRatio(textZoomRatio: number) @@ -1937,7 +1971,7 @@ Called when loading of the web page is complete. This API is used by an applicat | Name | Type | Description | | ----------- | ------- | ---------------------------------------- | | url | string | URL to be accessed. | -| isRefreshed | boolean | Whether the page is reloaded. The value **true** means that the page is reloaded by invoking the [refresh](#refresh) API, and **false** means the opposite.| +| isRefreshed | boolean | Whether the page is reloaded. The value **true** means that the page is reloaded by invoking the [refresh9+](../apis/js-apis-webview.md#refresh) API, and **false** means the opposite.| **Example** @@ -3099,7 +3133,7 @@ Called when this web page receives a new favicon. Column() { Web({ src:'www.example.com', controller: this.controller }) .onFaviconReceived((event) => { - console.log('onFaviconReceived:' + JSON.stringify(event)) + console.log('onFaviconReceived'); this.icon = event.favicon; }) } @@ -3221,6 +3255,34 @@ Called when the **\** component is about to access a URL. This API is used } ``` +### onRequestSelected + +onRequestSelected(callback: () => void) + +Called when the **\** component obtains the focus. + +**Example** + + ```ts + // xxx.ets + import web_webview from '@ohos.web.webview' + + @Entry + @Component + struct WebComponent { + controller: web_webview.WebviewController = new web_webview.WebviewController() + + build() { + Column() { + Web({ src: 'www.example.com', controller: this.controller }) + .onRequestSelected(() => { + console.log('onRequestSelected') + }) + } + } + } + ``` + ## ConsoleMessage Implements the **ConsoleMessage** object. For the sample code, see [onConsole](#onconsole). @@ -4145,7 +4207,7 @@ Describes the web-based media playback policy. | Name | Type | Readable| Writable| Mandatory| Description | | -------------- | --------- | ---- | ---- | --- | ---------------------------- | -| resumeInterval | number | Yes | Yes | No |Validity period for automatically resuming a paused web audio, in seconds. The maximum validity period is 60 seconds.| +| resumeInterval | number | Yes | Yes | No |Validity period for automatically resuming a paused web audio, in seconds. The maximum validity period is 60 seconds. Due to the approximate value, the validity period may have a deviation of less than 1 second.| | audioExclusive | boolean | Yes | Yes | No | Whether the audio of multiple **\** instances in an application is exclusive. | ## DataResubmissionHandler9+ @@ -4228,7 +4290,7 @@ Obtains the cookie management object of the **\** component. | Type | Description | | --------- | ---------------------------------------- | -| WebCookie | Cookie management object. For details, see [WebCookie](#webcookie).| +| WebCookie | Cookie management object. For details, see [WebCookie](#webcookiedeprecated).| **Example** @@ -4457,7 +4519,7 @@ This API is deprecated since API version 9. You are advised to use [forward deleteJavaScriptRegister(name: string) -Deletes a specific application JavaScript object that is registered with the window through **registerJavaScriptProxy**. The deletion takes effect immediately, with no need for invoking the [refresh](#refresh) API. +Deletes a specific application JavaScript object that is registered with the window through **registerJavaScriptProxy**. The deletion takes effect immediately, with no need for invoking the[refresh](#refreshdeprecated) API. This API is deprecated since API version 9. You are advised to use [deleteJavaScriptRegister9+](../apis/js-apis-webview.md#deletejavascriptregister). @@ -4738,7 +4800,7 @@ This API is deprecated since API version 9. You are advised to use [refresh registerJavaScriptProxy(options: { object: object, name: string, methodList: Array\ }) -Registers a JavaScript object with the window. APIs of this object can then be invoked in the window. You must invoke the [refresh](#refresh) API for the registration to take effect. +Registers a JavaScript object with the window. APIs of this object can then be invoked in the window. You must invoke the [refresh](#refreshdeprecated) API for the registration to take effect. This API is deprecated since API version 9. You are advised to use [registerJavaScriptProxy9+](../apis/js-apis-webview.md#registerjavascriptproxy). -- GitLab