Skip to content

D
Docs

OpenHarmony / Docs
大约 1 年 前同步成功

通知 159
Star 292
Fork 28
D
Docs
提交 205b004c 编写于 作者: E ester.zhou
浏览文件
操作

Update docs (18047) 

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 37e74c28
隐藏空白更改
内联 并排
Showing with 233 addition and 98 deletion
en/application-dev/quick-start/arkts-appstorage.md
浏览文件 @ 205b004c
......@@ -16,7 +16,7 @@ AppStorage is a singleton LocalStorage object that is created by the UI framewor
UI components synchronize application state attributes with the AppStorage. Implementation of application business logic can access AppStorage as well.
Selected state attributes of AppStorage can be synched with different data sources or data sinks. Those data sources and sinks can be on a local or remote device, and have different capabilities, such as data persistence (see [PersistentStorage](arkts-persiststorage.md)). These data sources and sinks are implemented in the business logic, separate from the UI. Link those AppStorage attributes to [@StorageProp](#storageprop) and [@StorageLink](#storagelink) whose values should be kept until application re-start.
Selected state attributes of AppStorage can be synced with different data sources or data sinks. Those data sources and sinks can be on a local or remote device, and have different capabilities, such as data persistence (see [PersistentStorage](arkts-persiststorage.md)). These data sources and sinks are implemented in the business logic, separate from the UI. Link those AppStorage attributes to [@StorageProp](#storageprop) and [@StorageLink](#storagelink) whose values should be kept until application re-start.
## \@StorageProp
......
en/application-dev/quick-start/arkts-localstorage.md
浏览文件 @ 205b004c
......@@ -35,7 +35,8 @@ LocalStorage provides two decorators based on the synchronization type of the co
## Restrictions
Once created, the type of a named attribute cannot be changed. Subsequent calls to **Set** must set a value of same type.
- Once created, the type of a named attribute cannot be changed. Subsequent calls to **Set** must set a value of same type.
- LocalStorage provides page-level storage. The [GetShared](../reference/arkui-ts/ts-state-management.md#getshared9) API can only obtain the LocalStorage instance transferred through [windowStage.loadContent](../reference/apis/js-apis-window.md#loadcontent9) in the current stage. Otherwise, **undefined** is returned. Example: [Sharing a LocalStorage Instance from UIAbility to One or More Pages](#sharing-a-localstorage-instance-from-uiability-to-one-or-more-pages).
## \@LocalStorageProp
......@@ -51,7 +52,7 @@ When a custom component is initialized, the \@LocalStorageProp(key)/\@LocalStora
> Since API version 9, this decorator is supported in ArkTS widgets.
By decorating a variable with \@LocalStorageProp(key), a one-way data synchronization is established with the attribute with the given key in LocalStorage. A local change can be made, but it will not besynchronized to LocalStorage. An update to the attribute with the given key in LocalStorage will overwrite local changes.
By decorating a variable with \@LocalStorageProp(key), a one-way data synchronization is established with the attribute with the given key in LocalStorage. A local change can be made, but it will not be synchronized to LocalStorage. An update to the attribute with the given key in LocalStorage will overwrite local changes.
### Rules of Use
......@@ -127,7 +128,7 @@ By decorating a variable with \@LocalStorageProp(key), a one-way data synchroniz
| Transfer/Access | Description |
| ---------- | ---------------------------------------- |
| Initialization and update from the parent component| Forbidden.|
| Subnode initialization | Supported; can be used to initialize a n \@State, \@Link, \@Prop, or \@Provide decorated variable in the child component.|
| Subnode initialization | Supported; can be used to initialize an \@State, \@Link, \@Prop, or \@Provide decorated variable in the child component.|
| Access | None. |
......@@ -423,3 +424,5 @@ struct CompA {
> **NOTE**
>
> It is good practice to always create a LocalStorage instance with meaningful default values, which serve as a backup when execution exceptions occur and are also useful for unit testing of pages.
<!--no_check-->
en/application-dev/quick-start/arkts-prop.md
浏览文件 @ 205b004c
......@@ -24,7 +24,7 @@ For an \@Prop decorated variable, the value synchronization is uni-directional f
| ----------- | ---------------------------------------- |
| Decorator parameters | None. |
| Synchronization type | One-way: from the data source provided by the parent component to the @Prop decorated variable.|
| Allowed variable types | string, number, boolean, or enum type.<br>**any** is not supported. The **undefined** and **null** values are not allowed.<br>The type must be specified.<br>Negative examples:<br>CompA&nbsp;({&nbsp;aProp:&nbsp;undefined&nbsp;})<br>CompA&nbsp;({&nbsp;aProp:&nbsp;null&nbsp;})<br>The type must be the same as that of the [data source](arkts-state-management-overview.md#basic-concepts). There are three cases (\@State is used as an example of the data source):<br>- The type of the \@Prop decorated variable is the same as that of the state variable of the parent component, that is, \@Prop: S and \@State: S. For an example, see [Simple Type @Prop Synced from @State in Parent Component](#simple-type-prop-synced-from-state-in-parent-component).<br>- When the state variable of the parent component is an array, the type of the \@Prop decorated variable is the same as that of the array item of the state variable of the parent component, that is, \@Prop: S and \@State: Array\<S>. For examples, see [Simple Type @Prop Synched from @State Array Item in Parent Component](#simple-type-prop-synched-from-state-array-item-in-parent-component).<br>- When the state variable of the parent component is Object or class, the type of the \@Prop decorated variableis the same as the attribute type of the state variable of the parent component, that is, \@Prop: S and \@State: { propA: S }. For examples, see [Class Object Type @Prop Synchedd from @State Class Object Property in Parent Component](#class-object-type-prop-synchedd-from-state-class-object-property-in-parent-component).|
| Allowed variable types | string, number, boolean, or enum type.<br>**any** is not supported. The **undefined** and **null** values are not allowed.<br>The type must be specified.<br>Negative examples:<br>CompA&nbsp;({&nbsp;aProp:&nbsp;undefined&nbsp;})<br>CompA&nbsp;({&nbsp;aProp:&nbsp;null&nbsp;})<br>The type must be the same as that of the [data source](arkts-state-management-overview.md#basic-concepts). There are three cases (\@State is used as an example of the data source):<br>- The type of the \@Prop decorated variable is the same as that of the state variable of the parent component, that is, \@Prop: S and \@State: S. For an example, see [Simple Type @Prop Synced from @State in Parent Component](#simple-type-prop-synced-from-state-in-parent-component).<br>- When the state variable of the parent component is an array, the type of the \@Prop decorated variable is the same as that of the array item of the state variable of the parent component, that is, \@Prop: S and \@State: Array\<S>. For examples, see [Simple Type @Prop Synced from @State Array Item in Parent Component](#simple-type-prop-synced-from-state-array-item-in-parent-component).<br>- When the state variable of the parent component is Object or class, the type of the \@Prop decorated variable is the same as the attribute type of the state variable of the parent component, that is, \@Prop: S and \@State: { propA: S }. For examples, see [Class Object Type @Prop Synced from @State Class Object Attribute in Parent Component](#class-object-type-prop-synced-from-state-class-object-attribute-in-parent-component). |
| Initial value for the decorated variable | Local initialization is allowed. |
......@@ -146,16 +146,16 @@ In the preceding example:
1. On initial render, when the **CountDownComponent** child component is created, its @Prop decorated **count** variable is initialized from the \@State decorated **countDownStartValue** variable in the **ParentComponent**.
2. When the "+1" or "-1" button is touched, the @State decorated **countDownStartValue** of the **ParentComponent** changes. This will cause the **ParentComponent** to re-render. At the minumum, the **CountDownComponent** will be updated because of the changed **count** variable value.
2. When the "+1" or "-1" button is touched, the @State decorated **countDownStartValue** of the **ParentComponent** changes. This will cause the **ParentComponent** to re-render. At the minimum, the **CountDownComponent** will be updated because of the changed **count** variable value.
3. Because of the changed **count** variable value, the **CountDownComponent** child component will re-render. At a minimum, the **if** statement's conditions (**this.counter> 0**) is-evaluated and the **\<Text>** child component inside the **if** would be updated.
4. When **Try again** in the **CountDownComponent** child component is touched, the value of the **count** variable is modified, but the change remains within the child component and does not affect the **countDownStartValue** in the parenet component.
4. When **Try again** in the **CountDownComponent** child component is touched, the value of the **count** variable is modified, but the change remains within the child component and does not affect the **countDownStartValue** in the parent component.
5. Updating **countDownStartValue** will overwrite the local value changes of the @Prop decorated **count** in the **CountDownComponent** child component.
### Simple Type @Prop Synched from @State Array Item in Parent Component
### Simple Type @Prop Synced from @State Array Item in Parent Component
The \@State decorated array an array item in the parent component can be used as data source to initialize and update a @Prop decorated variable. In the following example, the \@State decorated array **arr** in the parent component **Index** initializes the \@Prop decorated **value** variable in the child component **Child**.
......@@ -240,7 +240,7 @@ After **replace entire arr** is clicked, the following information is displayed:
```
- Changes made in the **Child** component are not synchronized to the parent component **Index**. Therefore, even if the values of the six intances of the **Child** component are 7, the value of **this.arr** in the **Index** component is still **[1,2,3]**.
- Changes made in the **Child** component are not synchronized to the parent component **Index**. Therefore, even if the values of the six instances of the **Child** component are 7, the value of **this.arr** in the **Index** component is still **[1,2,3]**.
- After **replace entire arr** is clicked, if **this.arr[0] == 1** is true, **this.arr** is set to **[3, 4, 5]**.
......@@ -250,9 +250,9 @@ After **replace entire arr** is clicked, the following information is displayed:
- The change of **this.arr** causes **ForEach** to update: The array item with the ID **3** is retained in this update, array items with IDs **1** and **2** are deleted, and array items with IDs **4** and **5** are added. The array before and after the update is **[1, 2, 3]** and **[3, 4, 5]**, respectively. This implies that the **Child** instance generated for item **3** will be moved to the first place, but not updated. In this case, the component value corresponding to **3** is **7**, and the final render result of **ForEach** is **7**, **4**, and **5**.
### Class Object Type @Prop Synchedd from @State Class Object Property in Parent Component
### Class Object Type @Prop Synced from @State Class Object Attribute in Parent Component
In a library with one book and two users, each user can mark the book as read, but this does not affect the other user reader. Technically speaking, local changes to the \@Prop decorated **book** object do not sync back to the @State decorated **book** in the **Library** component.
In a library with one book and two users, each user can mark the book as read, and the marking does not affect the other user reader. Technically speaking, local changes to the \@Prop decorated **book** object do not sync back to the @State decorated **book** in the **Library** component.
```ts
......@@ -296,7 +296,7 @@ struct Library {
```
### Simple Type @Prop with Local Initialization and No Sync from Parent Parent
### Simple Type @Prop with Local Initialization and No Sync from Parent Component
To enable an \@Component decorated component to be reusable, \@Prop allows for optional local initialization. This makes the synchronization with a variable in the parent component a choice, rather than mandatory. Providing a data source in the parent component is optional only when local initialization is provided for the \@Prop decorated variable.
......@@ -351,11 +351,11 @@ struct MainProgram {
Row() {
Column()
// customCounter must be initialized from the parent component due to lack of local initialization. Here, customCounter2 does not need to be initialized.
MyComponent({ customCounter: this.mainCounter })
// customCounter2 of the child component can also be initialized from the parent component. The value from the parent component overwrites the locally assigned value of customCounter2 during initialization.
MyComponent({ customCounter: this.mainCounter, customCounter2: this.mainCounter })
}.width('40%')
// customCounter must be initialized from the parent component due to lack of local initialization. Here, customCounter2 does not need to be initialized.
MyComponent({ customCounter: this.mainCounter })
// customCounter2 of the child component can also be initialized from the parent component. The value from the parent component overwrites the locally assigned value of customCounter2 during initialization.
MyComponent({ customCounter: this.mainCounter, customCounter2: this.mainCounter })
}.width('40%')
}
}
}
......
en/application-dev/reference/apis/js-apis-webview.md
浏览文件 @ 205b004c
......@@ -278,6 +278,7 @@ Sets whether to enable web debugging.
| ------------------ | ------- | ---- | ------------- |
| webDebuggingAccess | boolean | Yes | Whether to enable web debugging.|
**Example**
```ts
// xxx.ets
......@@ -1607,24 +1608,24 @@ struct WebComponent {
this.ports = this.controller.createWebMessagePorts();
// 2. Register a callback on a message port (for example, port 1) on the application side.
this.ports[1].onMessageEvent((result: web_webview.WebMessage) => {
let msg = 'Got msg from HTML:';
if (typeof(result) == "string") {
console.log("received string message from html5, string is:" + result);
msg = msg + result;
} else if (typeof(result) == "object") {
if (result instanceof ArrayBuffer) {
console.log("received arraybuffer from html5, length is:" + result.byteLength);
msg = msg + "lenght is " + result.byteLength;
} else {
console.log("not support");
}
let msg = 'Got msg from HTML:';
if (typeof(result) == "string") {
console.log("received string message from html5, string is:" + result);
msg = msg + result;
} else if (typeof(result) == "object") {
if (result instanceof ArrayBuffer) {
console.log("received arraybuffer from html5, length is:" + result.byteLength);
msg = msg + "lenght is " + result.byteLength;
} else {
console.log("not support");
}
this.receivedFromHtml = msg;
})
// 3. Send another message port (for example, port 0) to the HTML side, which can then save the port for future use.
this.controller.postMessage('__init_port__', [this.ports[0]], '*');
} else {
console.log("not support");
}
this.receivedFromHtml = msg;
})
// 3. Send another message port (for example, port 0) to the HTML side, which can then save the port for future use.
this.controller.postMessage('__init_port__', [this.ports[0]], '*');
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
......@@ -1677,9 +1678,9 @@ var output = document.querySelector('.output');
window.addEventListener('message', function (event) {
if (event.data == '__init_port__') {
if (event.ports[0] != null) {
h5Port = event.ports[0]; // 1. Save the port number sent from the ArkTS side.
h5Port = event.ports[0]; // 1. Save the port number sent from the eTS side.
h5Port.onmessage = function (event) {
// 2. Receive the message sent from the ArkTS side.
// 2. Receive the message sent from the eTS side.
var msg = 'Got message from ets:';
var result = event.data;
if (typeof(result) == "string") {
......@@ -1701,7 +1702,7 @@ window.addEventListener('message', function (event) {
}
})
// 3. Use h5Port to send messages to the ArkTS side.
// 3. Use h5Port to send messages to the eTS side.
function PostMsgToEts(data) {
if (h5Port) {
h5Port.postMessage(data);
......@@ -1993,6 +1994,37 @@ struct WebComponent {
}
```
You can customize the user agent based on the default user agent.
```ts
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
@State ua: string = ""
aboutToAppear():void {
web_webview.once('webInited', () => {
try {
// Customize the user agent on the application side.
this.ua = this.controller.getUserAgent() + 'xxx';
} catch(error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
}
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.userAgent(this.ua)
}
}
}
```
### getTitle
getTitle(): string
......@@ -2661,7 +2693,7 @@ import image from "@ohos.multimedia.image"
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
@State pixelmap: image.PixelMap = undefined;
@State pixelmap: image.PixelMap = undefined;
build() {
Column() {
......@@ -2767,12 +2799,12 @@ struct WebComponent {
.onClick(() => {
try {
this.controller.hasImage((error, data) => {
if (error) {
console.info(`hasImage error: ` + JSON.stringify(error))
return;
}
console.info("hasImage: " + data);
});
if (error) {
console.info(`hasImage error: ` + JSON.stringify(error))
return;
}
console.info("hasImage: " + data);
});
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
......@@ -2822,11 +2854,11 @@ struct WebComponent {
.onClick(() => {
try {
this.controller.hasImage().then((data) => {
console.info('hasImage: ' + data);
})
.catch(function (error) {
console.error("error: " + error);
})
console.info('hasImage: ' + data);
})
.catch(function (error) {
console.error("error: " + error);
})
} catch (error) {
console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
}
......@@ -3241,7 +3273,7 @@ struct WebComponent {
Implements a **WebCookieManager** instance to manage behavior of cookies in **\<Web>** components. All **\<Web>** components in an application share a **WebCookieManager** instance.
### getCookie
### getCookie
static getCookie(url: string): string
......@@ -3297,7 +3329,7 @@ struct WebComponent {
}
```
### setCookie
### setCookie
static setCookie(url: string, value: string): void
......@@ -3348,7 +3380,7 @@ struct WebComponent {
}
```
### saveCookieAsync
### saveCookieAsync
static saveCookieAsync(callback: AsyncCallback\<void>): void
......@@ -3360,7 +3392,7 @@ Saves the cookies in the memory to the drive. This API uses an asynchronous call
| Name | Type | Mandatory| Description |
| -------- | ---------------------- | ---- | :------------------------------------------------- |
| callback | AsyncCallback\<void> | Yes | Callback used to return the operation result.|
| callback | AsyncCallback\<void> | Yes | Callback used to return whether the cookies are successfully saved.|
**Example**
......@@ -3394,7 +3426,7 @@ struct WebComponent {
}
```
### saveCookieAsync
### saveCookieAsync
static saveCookieAsync(): Promise\<void>
......@@ -3441,7 +3473,7 @@ struct WebComponent {
}
```
### putAcceptCookieEnabled
### putAcceptCookieEnabled
static putAcceptCookieEnabled(accept: boolean): void
......@@ -3482,7 +3514,7 @@ struct WebComponent {
}
```
### isCookieAllowed
### isCookieAllowed
static isCookieAllowed(): boolean
......@@ -3520,7 +3552,7 @@ struct WebComponent {
}
```
### putAcceptThirdPartyCookieEnabled
### putAcceptThirdPartyCookieEnabled
static putAcceptThirdPartyCookieEnabled(accept: boolean): void
......@@ -3561,7 +3593,7 @@ struct WebComponent {
}
```
### isThirdPartyCookieAllowed
### isThirdPartyCookieAllowed
static isThirdPartyCookieAllowed(): boolean
......@@ -3599,7 +3631,7 @@ struct WebComponent {
}
```
### existCookie
### existCookie
static existCookie(): boolean
......@@ -3637,7 +3669,7 @@ struct WebComponent {
}
```
### deleteEntireCookie
### deleteEntireCookie
static deleteEntireCookie(): void
......@@ -3668,7 +3700,7 @@ struct WebComponent {
}
```
### deleteSessionCookie
### deleteSessionCookie
static deleteSessionCookie(): void
......
en/application-dev/reference/arkui-ts/ts-basic-components-web.md
浏览文件 @ 205b004c
......@@ -29,7 +29,7 @@ Web(options: { src: ResourceStr, controller: WebviewController | WebController})
| Name | Type | Mandatory | Description |
| ---------- | ---------------------------------------- | ---- | ------- |
| src | [ResourceStr](ts-types.md) | Yes | Address of a web page resource. To load a local resource file in the sandbox outside of the application package, use **file://** to specify the path of the sandbox.|
| controller | [WebviewController<sup>9+</sup>](../apis/js-apis-webview.md#webviewcontroller) \| [WebController](#webcontroller) | Yes | Controller. **WebController** is deprecated since API version 9. You are advised to use **WebviewController** instead.|
| controller | [WebviewController<sup>9+</sup>](../apis/js-apis-webview.md#webviewcontroller) \| [WebController](#webcontroller) | Yes | Controller. This API is deprecated since API version 9. You are advised to use **WebviewController** instead.|
**Example**
......@@ -225,7 +225,7 @@ Registers a JavaScript object with the window. APIs of this object can then be i
| object | object | Yes | - | Object to be registered. Methods can be declared, but attributes cannot. |
| name | string | Yes | - | Name of the object to be registered, which is the same as that invoked in the window.|
| methodList | Array\<string\> | Yes | - | Methods of the JavaScript object to be registered at the application side. |
| controller | [WebviewController<sup>9+</sup>](../apis/js-apis-webview.md#webviewcontroller) \| [WebController](#webcontroller) | Yes | - | Controller. **WebController** is deprecated since API version 9. You are advised to use **WebviewController** instead.|
| controller | [WebviewController<sup>9+</sup>](../apis/js-apis-webview.md#webviewcontroller) \| [WebController](#webcontroller) | Yes | - | Controller. This API is deprecated since API version 9. You are advised to use **WebviewController** instead.|
**Example**
......@@ -518,7 +518,6 @@ Sets whether video playback must be started by user gestures. This API is not ap
multiWindowAccess(multiWindow: boolean)
Sets whether to enable the multi-window permission.
Enabling the multi-window permission requires implementation of the **onWindowNew** event. For the sample code, see [onWindowNew](#onwindownew9).
**Parameters**
......@@ -652,7 +651,6 @@ Sets whether to display the vertical scrollbar, including the default system scr
</html>
```
### cacheMode
cacheMode(cacheMode: CacheMode)
......@@ -703,8 +701,6 @@ This API is deprecated since API version 9. You are advised to use [textZoomRati
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
......@@ -1288,8 +1284,10 @@ Called when **alert()** is invoked to display an alert dialog box on the web pag
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
Web({ src: $rawfile("xxx.html"), controller: this.controller })
.onAlert((event) => {
console.log("event.url:" + event.url)
console.log("event.message:" + event.message)
AlertDialog.show({
title: 'onAlert',
message: 'text',
......@@ -1316,6 +1314,25 @@ Called when **alert()** is invoked to display an alert dialog box on the web pag
}
```
```
<!--xxx.html-->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
</head>
<body>
<h1>WebView onAlert Demo</h1>
<button onclick="myFunction()">Click here</button>
<script>
function myFunction() {
alert("Hello World");
}
</script>
</body>
</html>
```
### onBeforeUnload
onBeforeUnload(callback: (event?: { url: string; message: string; result: JsResult }) => boolean)
......@@ -1349,7 +1366,7 @@ Called when this page is about to exit after the user refreshes or closes the pa
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
Web({ src: $rawfile("xxx.html"), controller: this.controller })
.onBeforeUnload((event) => {
console.log("event.url:" + event.url)
console.log("event.message:" + event.message)
......@@ -1379,6 +1396,25 @@ Called when this page is about to exit after the user refreshes or closes the pa
}
```
```
<!--xxx.html-->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
</head>
<body onbeforeunload="return myFunction()">
<h1>WebView onBeforeUnload Demo</h1>
<a href="https://www.example.com">Click here</a>
<script>
function myFunction() {
return "onBeforeUnload Event";
}
</script>
</body>
</html>
```
### onConfirm
onConfirm(callback: (event?: { url: string; message: string; result: JsResult }) => boolean)
......@@ -1412,11 +1448,10 @@ Called when **confirm()** is invoked by the web page.
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
Web({ src: $rawfile("xxx.html"), controller: this.controller })
.onConfirm((event) => {
console.log("event.url:" + event.url)
console.log("event.message:" + event.message)
console.log("event.result:" + event.result)
AlertDialog.show({
title: 'onConfirm',
message: 'text',
......@@ -1443,6 +1478,34 @@ Called when **confirm()** is invoked by the web page.
}
```
```
<!--xxx.html-->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
</head>
<body>
<h1>WebView onConfirm Demo</h1>
<button onclick="myFunction()">Click here</button>
<p id="demo"></p>
<script>
function myFunction() {
let x;
let r = confirm("click button!");
if (r == true) {
x = "ok";
} else {
x = "cancel";
}
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
```
### onPrompt<sup>9+</sup>
onPrompt(callback: (event?: { url: string; message: string; value: string; result: JsResult }) => boolean)
......@@ -1474,7 +1537,7 @@ onPrompt(callback: (event?: { url: string; message: string; value: string; resul
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
Web({ src: $rawfile("xxx.html"), controller: this.controller })
.onPrompt((event) => {
console.log("url:" + event.url)
console.log("message:" + event.message)
......@@ -1491,7 +1554,7 @@ onPrompt(callback: (event?: { url: string; message: string; value: string; resul
secondaryButton: {
value: 'ok',
action: () => {
event.result.handleConfirm()
event.result.handlePromptConfirm(event.value)
}
},
cancel: () => {
......@@ -1505,6 +1568,30 @@ onPrompt(callback: (event?: { url: string; message: string; value: string; resul
}
```
```
<!--xxx.html-->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
</head>
<body>
<h1>WebView onPrompt Demo</h1>
<button onclick="myFunction()">Click here</button>
<p id="demo"></p>
<script>
function myFunction() {
let message = prompt("Message info", "Hello World");
if (message != null && message != "") {
document.getElementById("demo").innerHTML = message;
}
}
</script>
</body>
</html>
```
### onConsole
onConsole(callback: (event?: { message: ConsoleMessage }) => boolean)
......@@ -1558,6 +1645,7 @@ onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisp
| Name | Type | Description |
| ------------------ | ------------- | ----------------------------------- |
| url | string | URL for the download task. |
| userAgent | string | User agent used for download. |
| contentDisposition | string | Content-Disposition response header returned by the server, which may be empty.|
| mimetype | string | MIME type of the content returned by the server. |
| contentLength | contentLength | Length of the content returned by the server. |
......@@ -2021,7 +2109,7 @@ Called when the display ratio of this page changes.
}
```
### onUrlLoadIntercept<sup>(deprecated)</sup>
### onUrlLoadIntercept
onUrlLoadIntercept(callback: (event?: { data:string | WebResourceRequest }) => boolean)
......@@ -2640,7 +2728,6 @@ If opening a new window is not needed, set the parameter to **null** when callin
.javaScriptAccess(true)
// MultiWindowAccess needs to be enabled.
.multiWindowAccess(true)
.allowWindowOpenMethod(true)
.onWindowNew((event) => {
if (this.dialogController) {
this.dialogController.close()
......@@ -3868,7 +3955,7 @@ Resends the web form data.
}
```
### cancel<sup>9+</sup>
### cancel<sup>9+</sup>
cancel(): void
......@@ -3899,7 +3986,7 @@ Cancels the resending of web form data.
Implements a **WebController** to control the behavior of the **\<Web>** component. A **WebController** can control only one **\<Web>** component, and the APIs in the **WebController** can be invoked only after it has been bound to the target **\<Web>** component.
This API is deprecated since API version 9. You are advised to use [WebviewController<sup>9+</sup>](../apis/js-apis-webview.md#webviewcontroller).
This API is deprecated since API version 9. You are advised to use [WebviewController<sup>9+</sup>](../apis/js-apis-webview.md#webviewcontroller) instead.
### Creating an Object
......@@ -3946,7 +4033,7 @@ requestFocus()
Requests focus for this web page.
This API is deprecated since API version 9. You are advised to use [requestFocus<sup>9+</sup>](../apis/js-apis-webview.md#requestfocus).
This API is deprecated since API version 9. You are advised to use [requestFocus<sup>9+</sup>](../apis/js-apis-webview.md#requestfocus) instead.
**Example**
......@@ -3975,7 +4062,7 @@ accessBackward(): boolean
Checks whether going to the previous page can be performed on the current page.
This API is deprecated since API version 9. You are advised to use [accessBackward<sup>9+</sup>](../apis/js-apis-webview.md#accessbackward).
This API is deprecated since API version 9. You are advised to use [accessBackward<sup>9+</sup>](../apis/js-apis-webview.md#accessbackward) instead.
**Return value**
......@@ -4011,7 +4098,7 @@ accessForward(): boolean
Checks whether going to the next page can be performed on the current page.
This API is deprecated since API version 9. You are advised to use [accessForward<sup>9+</sup>](../apis/js-apis-webview.md#accessforward).
This API is deprecated since API version 9. You are advised to use [accessForward<sup>9+</sup>](../apis/js-apis-webview.md#accessforward) instead.
**Return value**
......@@ -4047,7 +4134,7 @@ accessStep(step: number): boolean
Performs a specific number of steps forward or backward from the current page.
This API is deprecated since API version 9. You are advised to use [accessStep<sup>9+</sup>](../apis/js-apis-webview.md#accessstep).
This API is deprecated since API version 9. You are advised to use [accessStep<sup>9+</sup>](../apis/js-apis-webview.md#accessstep) instead.
**Parameters**
......@@ -4090,7 +4177,7 @@ backward(): void
Goes to the previous page based on the history stack. This API is generally used together with **accessBackward**.
This API is deprecated since API version 9. You are advised to use [backward<sup>9+</sup>](../apis/js-apis-webview.md#backward).
This API is deprecated since API version 9. You are advised to use [backward<sup>9+</sup>](../apis/js-apis-webview.md#backward) instead.
**Example**
......@@ -4119,7 +4206,7 @@ forward(): void
Goes to the next page based on the history stack. This API is generally used together with **accessForward**.
This API is deprecated since API version 9. You are advised to use [forward<sup>9+</sup>](../apis/js-apis-webview.md#forward).
This API is deprecated since API version 9. You are advised to use [forward<sup>9+</sup>](../apis/js-apis-webview.md#forward) instead.
**Example**
......@@ -4148,7 +4235,7 @@ 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](#refreshdeprecated) API.
This API is deprecated since API version 9. You are advised to use [deleteJavaScriptRegister<sup>9+</sup>](../apis/js-apis-webview.md#deletejavascriptregister).
This API is deprecated since API version 9. You are advised to use [deleteJavaScriptRegister<sup>9+</sup>](../apis/js-apis-webview.md#deletejavascriptregister) instead.
**Parameters**
......@@ -4184,7 +4271,7 @@ getHitTest(): HitTestType
Obtains the element type of the area being clicked.
This API is deprecated since API version 9. You are advised to use [getHitTest<sup>9+</sup>](../apis/js-apis-webview.md#gethittest).
This API is deprecated since API version 9. You are advised to use [getHitTest<sup>9+</sup>](../apis/js-apis-webview.md#gethittest) instead.
**Return value**
......@@ -4224,7 +4311,7 @@ If **baseUrl** is set to a data URL, the encoded string will be loaded by the **
If **baseUrl** is set to an HTTP or HTTPS URL, the encoded string will be processed by the **\<Web>** component as a non-encoded string in a manner similar to **loadUrl**.
This API is deprecated since API version 9. You are advised to use [loadData<sup>9+</sup>](../apis/js-apis-webview.md#loaddata).
This API is deprecated since API version 9. You are advised to use [loadData<sup>9+</sup>](../apis/js-apis-webview.md#loaddata) instead.
**Parameters**
......@@ -4271,7 +4358,7 @@ The object injected through **loadUrl** is valid only in the current document. I
The object injected through **registerJavaScriptProxy** is still valid on a new page redirected through **loadUrl**.
This API is deprecated since API version 9. You are advised to use [loadUrl<sup>9+</sup>](../apis/js-apis-webview.md#loadurl).
This API is deprecated since API version 9. You are advised to use [loadUrl<sup>9+</sup>](../apis/js-apis-webview.md#loadurl) instead.
**Parameters**
......@@ -4307,7 +4394,7 @@ onActive(): void
Called when the **\<Web>** component enters the active state.
This API is deprecated since API version 9. You are advised to use [onActive<sup>9+</sup>](../apis/js-apis-webview.md#onactive).
This API is deprecated since API version 9. You are advised to use [onActive<sup>9+</sup>](../apis/js-apis-webview.md#onactive) instead.
**Example**
......@@ -4336,7 +4423,7 @@ onInactive(): void
Called when the **\<Web>** component enters the inactive state.
This API is deprecated since API version 9. You are advised to use [onInactive<sup>9+</sup>](../apis/js-apis-webview.md#oninactive).
This API is deprecated since API version 9. You are advised to use [onInactive<sup>9+</sup>](../apis/js-apis-webview.md#oninactive) instead.
**Example**
......@@ -4364,7 +4451,7 @@ zoom(factor: number): void
Sets a zoom factor for the current web page.
This API is deprecated since API version 9. You are advised to use [zoom<sup>9+</sup>](../apis/js-apis-webview.md#zoom).
This API is deprecated since API version 9. You are advised to use [zoom<sup>9+</sup>](../apis/js-apis-webview.md#zoom) instead.
**Parameters**
......@@ -4400,7 +4487,7 @@ refresh()
Called when the **\<Web>** component refreshes the web page.
This API is deprecated since API version 9. You are advised to use [refresh<sup>9+</sup>](../apis/js-apis-webview.md#refresh).
This API is deprecated since API version 9. You are advised to use [refresh<sup>9+</sup>](../apis/js-apis-webview.md#refresh) instead.
**Example**
......@@ -4429,7 +4516,7 @@ registerJavaScriptProxy(options: { object: object, name: string, methodList: Arr
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 [registerJavaScriptProxy<sup>9+</sup>](../apis/js-apis-webview.md#registerjavascriptproxy).
This API is deprecated since API version 9. You are advised to use [registerJavaScriptProxy<sup>9+</sup>](../apis/js-apis-webview.md#registerjavascriptproxy) instead.
**Parameters**
......@@ -4497,7 +4584,7 @@ runJavaScript(options: { script: string, callback?: (result: string) => void })
Executes a JavaScript script. This API uses an asynchronous callback to return the script execution result. **runJavaScript** can be invoked only after **loadUrl** is executed. For example, it can be invoked in **onPageEnd**.
This API is deprecated since API version 9. You are advised to use [runJavaScript<sup>9+</sup>](../apis/js-apis-webview.md#runjavascript).
This API is deprecated since API version 9. You are advised to use [runJavaScript<sup>9+</sup>](../apis/js-apis-webview.md#runjavascript) instead.
**Parameters**
......@@ -4558,7 +4645,7 @@ stop()
Stops page loading.
This API is deprecated since API version 9. You are advised to use [stop<sup>9+</sup>](../apis/js-apis-webview.md#stop).
This API is deprecated since API version 9. You are advised to use [stop<sup>9+</sup>](../apis/js-apis-webview.md#stop) instead.
**Example**
......@@ -4587,7 +4674,7 @@ clearHistory(): void
Clears the browsing history.
This API is deprecated since API version 9. You are advised to use [clearHistory<sup>9+</sup>](../apis/js-apis-webview.md#clearhistory).
This API is deprecated since API version 9. You are advised to use [clearHistory<sup>9+</sup>](../apis/js-apis-webview.md#clearhistory) instead.
**Example**
......
en/application-dev/reference/arkui-ts/ts-container-griditem.md
浏览文件 @ 205b004c
......@@ -26,14 +26,27 @@ GridItem()
| columnStart | number | Start column number of the component.|
| columnEnd | number | End column number of the component.|
| forceRebuild<sup>(deprecated)</sup> | boolean | Whether to re-create the component when it is being built.<br>This API is deprecated since API version 9. Whether to re-create the component is automatically determined based on the component attributes and child component changes. No manual configuration is required.<br>Default value: **false**|
| selectable<sup>8+</sup> | boolean | Whether the current grid item is selectable by the mouse.<br>> **NOTE**<br>> This attribute takes effect only when mouse frame selection is enabled for the parent **\<Grid>** container.<br>Default value: **true**|
| selectable<sup>8+</sup> | boolean | Whether the current grid item is selectable by the mouse.<br>**NOTE**<br>This attribute takes effect only when mouse frame selection is enabled for the parent **\<Grid>** container.<br>Default value: **true** |
> **NOTE**
>
> Rules for setting **rowStart**, **rowEnd**, **columnStart**, and **columnEnd**:
>
> - The valid value range of **rowStart** and **rowEnd** is 0 to the total number of rows minus 1. The valid value range of **columnStart** and **columnEnd** is 0 to the total number of columns minus 1.
>
> - Settings outside of the valid ranges do not take effect.
>
> - In the grid that has both **columnTemplate** and **rowTemplate** set, a grid item takes up the specified number of rows (rowEnd – rowStart + 1) or columns (columnEnd – columnStart + 1), depending on whether **rowStart**/**rowEnd** or **columnStart**/**columnEnd** is set.
>- In the grid that has only **columnTemplate** set, a grid item takes up the specified number of columns.
> - In the grid that has only **rowTemplate** set, a grid item takes up the specified number of rows.
>- In the grid that has neither **columnTemplate** nor **rowTemplate** set, the row and column number attributes do not work.
## Events
| Name| Description|
| -------- | -------- |
| onSelect(event: (isSelected: boolean) =&gt; void)<sup>8+</sup> | Triggered when the selected state of the grid item changes.<br>**isSelected**: Returns **true** if the grid item is selected by the mouse; returns **false** otherwise.|
| onSelect(event: (isSelected: boolean) =&gt; void)<sup>8+</sup> | Triggered when the selected state of the grid item changes.<br>**isSelected**: returns **true** if the grid item is being selected by the mouse; returns **false** otherwise. |
## Example
......@@ -57,7 +70,7 @@ struct GridItemExample {
.width('100%')
.height('100%')
.textAlign(TextAlign.Center)
}.rowStart(1).rowEnd(4)
}.rowStart(1).rowEnd(2).columnStart(1).columnEnd(2) // Set valid row and column numbers.
ForEach(this.numbers, (item) => {
GridItem() {
......@@ -77,7 +90,7 @@ struct GridItemExample {
.width('100%')
.height('100%')
.textAlign(TextAlign.Center)
}.columnStart(1).columnEnd(5)
}.columnStart(1).columnEnd(4) // Set only the column numbers. The layout does not start from the first column.
}
.columnsTemplate('1fr 1fr 1fr 1fr 1fr')
.rowsTemplate('1fr 1fr 1fr 1fr 1fr')
......@@ -87,4 +100,4 @@ struct GridItemExample {
}
```
![en-us_image_0000001256858433](figures/en-us_image_0000001256858433.gif)
![en-us_image_0000001174582870](figures/en-us_image_0000001174582870.gif)
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或