未验证 提交 640d7d87 编写于 作者: O openharmony_ci 提交者: Gitee

!6250 翻译完成 5447、5935、5820、6101

Merge pull request !6250 from ester.zhou/C2-0701
......@@ -11,4 +11,4 @@
- [Application Package Structure Configuration File (Stage Model)](stage-structure.md)
- [Resource File Categories](basic-resource-file-categories.md)
- [SysCap](syscap.md)
- [HarmonyAppProvision Configuration File](app-provision-structure.md)
# HarmonyAppProvision Configuration File
The **HarmonyAppProvision** configuration file (also called profile) is the file where you declare permission and signature information for your application.
## Configuration File Internal Structure
The **HarmonyAppProvision** file consists of several parts, which are described in the table below.
**Table 1** Internal structure of the HarmonyAppProvision file
| Name | Description | Data Type| Mandatory | Initial Value Allowed|
| ----------- | ---------------------------------------------------------------------------------------- | -------- | -------- | -------- |
| version-code | Version number of the **HarmonyAppProvision** file format. The value is a positive integer containing 32 or less digits.| Number | Yes | No |
| version-name | Description of the version number. It is recommended that the value consist of three segments, for example, **A.B.C**. | String | Yes | No|
| uuid | Unique ID of the **HarmonyAppProvision** file. | String | Yes | No|
| type | Type of the **HarmonyAppProvision** file. The value can be **debug** (for application debugging) and **release** (for application release). The recommended value is **debug**.| String | Yes | No|
| issuer | Issuer of the **HarmonyAppProvision** file. | String | Yes | No|
| validity | Validity period of the **HarmonyAppProvision** file. For details, see [Internal Structure of the validity Object](#internal-structure-of-the-validity-object). | Object | Yes | No |
| bundle-info | Information about the application bundle and developer. For details, see [Internal Structure of the bundle-info Object](#internal-structure-of-the-bundle-info-object). | Object | Yes | No |
| acls | Information about the Access Control Lists (ACLs). For details, see [Internal Structure of the acls Object](#internal-structure-of-the-acls-object). | Object | No | No |
| permissions | Permissions required for your application. For details, see [Internal Structure of the permissions Object](#internal-structure-of-the-permissions-object). | Object | No | No |
| debug-info | Additional debug information. For details, see [Internal Structure of the debug-info Object](#internal-structure-of-the-debug-info-object). | Object | No | No |
An example of the **HarmonyAppProvision** file is as follows:
```json
{
"version-code": 1,
"version-name": "1.0.0",
"uuid": "string",
"type": "debug",
"validity": {
"not-before": 1586422743,
"not-after": 1617958743
},
"bundle-info" : {
"developer-id": "OpenHarmony",
"development-certificate": "Base64 string",
"distribution-certificate": "Base64 string",
"bundle-name": "com.OpenHarmony.app.test",
"apl": "normal",
"app-feature": "hos_normal_app"
},
"acls": {
"allowed-acls": ["string"]
},
"permissions": {
"restricted-permissions": ["string"]
},
"debug-info" : {
"device-id-type": "udid",
"device-ids": ["string"]
},
"issuer": "OpenHarmony"
}
```
### Internal Structure of the validity Object
| Name | Description | Data Type| Mandatory | Initial Value Allowed|
| ---------- | ------------------------------- | ------- | ------- | --------- |
| not-before | Start time of the file validity period. The value is a Unix timestamp, which is a non-negative integer.| Number | Yes | No |
| not-after | End time of the file validity period. The value is a Unix timestamp, which is a non-negative integer.| Number | Yes | No |
### Internal Structure of the bundle-info Object
| Name | Description | Data Type| Mandatory | Initial Value Allowed|
| ------------------------ | ------------------------------- | ------- | -------- | --------- |
| developer-id | Unique ID of the developer.| String | Yes | No |
| development-certificate | Information about the [debug certificate](../security/hapsigntool-guidelines.md).| Number | Yes if **type** is set to **debug** and no otherwise | No |
| distribution-certificate | Information about the [release certificate](../security/hapsigntool-guidelines.md).| Number | Yes if **type** is set to **release** and no otherwise | No |
| bundle-name | Bundle name of the application.| String | Yes | No |
| apl | [Ability privilege level (APL)](../security/accesstoken-overview.md) of your application. The value can be **normal**, **system_basic**, or **system_core**.| String | Yes | No |
| app-feature | Type of your application. The value can be **hos_system_app** (system application) or **hos_normal_app** (non-system application).| String | Yes | No |
### Internal Structure of the acls Object
The **acls** object contains the [ACLs](../security/accesstoken-overview.md) configured for your application. It should be noted that you still need to fill the ACL information in the **reqPermissions** attribute in the [config.json](package-structure.md) file.
**Table 4** Internal structure of the acls object
| Name | Description | Data Type| Mandatory | Initial Value Allowed|
| ------------------------ | ------------------------------- | ------- | ------- | --------- |
| allowed-acls | [ACLs](../security/accesstoken-overview.md) configured for your application.| String array | No | No |
### Internal Structure of the permissions Object
The **permissions** object contains restricted permissions required for your application. Different from the ACLs set in the **acls** object, these permissions need user authorization during the running of your application. It should be noted that you still need to fill the permission information in the **reqPermissions** attribute in the [config.json](package-structure.md) file.
**Table 5** Internal structure of the permissions object
| Name | Description | Data Type| Mandatory | Initial Value Allowed|
| ------------------------ | ------------------------------- | ------- | ------- | --------- |
| restricted-permissions | [Restricted permissions](../security/accesstoken-overview.md) required for your application.| String array | No | No |
### Internal Structure of the debug-info Object
The **debug-info** object contains debug information of your application, mainly device management and control information.
**Table 6** Internal structure of the debug-info object
| Name | Description | Data Type| Mandatory | Initial Value Allowed|
| ------------------------ | ------------------------------- | ------- | ------- | --------- |
| device-id-type | Type of the device ID. Currently, only the udid type is supported.| String | No | No |
| device-ids | IDs of devices on which your application can be debugged.| String array | No | No |
......@@ -14,7 +14,7 @@ import mediaquery from '@ohos.mediaquery'
## Required Permissions
None.
None
## mediaquery.matchMediaSync
......@@ -37,7 +37,7 @@ Sets the media query criteria and returns the corresponding listening handle.
**Example**
```js
listener = mediaquery.matchMediaSync('(orientation: landscape)'); // Listen for landscape events.
let listener = mediaquery.matchMediaSync('(orientation: landscape)'); // Listen for landscape events.
```
......@@ -91,7 +91,7 @@ Deregisters a callback with the corresponding query condition by using the handl
```js
import mediaquery from '@ohos.mediaquery'
listener = mediaquery.matchMediaSync('(orientation: landscape)'); // Listen for landscape events.
let listener = mediaquery.matchMediaSync('(orientation: landscape)'); // Listen for landscape events.
function onPortrait(mediaQueryResult) {
if (mediaQueryResult.matches) {
// do something here
......
......@@ -7,7 +7,7 @@
## Modules to Import
```
```js
import request from '@ohos.request';
```
......@@ -84,8 +84,10 @@ Uploads files. This API uses a promise to return the result.
```js
let file1 = { filename: "test", name: "test", uri: "internal://cache/test.jpg", type: "jpg" };
let data = { name: "name123", value: "123" };
let header = { key1: "value1", key2: "value2" };
let uploadTask;
request.upload({ url: 'https://patch', files: [file1] }).then((data) => {
request.upload({ url: 'https://patch', header: header, method: "POST", files: [file1], data: [data] }).then((data) => {
uploadTask = data;
}).catch((err) => {
console.error('Failed to request the upload. Cause: ' + JSON.stringify(err));
......@@ -114,8 +116,10 @@ Uploads files. This API uses an asynchronous callback to return the result.
```js
let file1 = { filename: "test", name: "test", uri: "internal://cache/test.jpg", type: "jpg" };
let data = { name: "name123", value: "123" };
let header = { key1: "value1", key2: "value2" };
let uploadTask;
request.upload({ url: 'https://patch', files: [file1] }, (err, data) => {
request.upload({ url: 'https://patch', header: header, method: "POST", files: [file1], data: [data] }, (err, data) => {
if (err) {
console.error('Failed to request the upload. Cause: ' + JSON.stringify(err));
return;
......
# video
> **NOTE**<br>
> **NOTE**
>
> - This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
>
......@@ -15,7 +15,7 @@
> ]
> ```
The **\<Video>** component provides a video player.
The **\<video>** component provides a video player.
## Child Components
......@@ -76,7 +76,8 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
| pause | - | Pauses a video.|
| setCurrentTime | {&nbsp;currenttime:&nbsp;value&nbsp;} | Sets the video playback position, in seconds.|
> **NOTE**<br>
> **NOTE**
>
> The methods in the above table can be called after the **attached** callback is invoked.
## Example
......@@ -89,7 +90,7 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
onpaues='pauesCallback' onfinish='finishCallback' onerror='errorCallback'
onseeking='seekingCallback' onseeked='seekedCallback'
ontimeupdate='timeupdateCallback'
style="object-fit:fit; width:80%; height:400px;"
style="object-fit:fill; width:80%; height:400px;"
onclick="change_start_pause">
</video>
</div>
......
# Progress
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> **NOTE**
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The **&lt;Progress&gt;** component is used to provide a progress bar that displays the progress of content loading or an operation.
The **\<Progress>** component is used to provide a progress bar that displays the progress of content loading or an operation.
## Required Permissions
......@@ -15,12 +16,12 @@ None
## Child Components
None
Not supported
## APIs
Progress(value: { value: number, total?: number, type?: ProgressType})
Progress(value: {value: number, total?: number, type?: ProgressType})
Creates a progress bar.
......@@ -54,7 +55,8 @@ Creates a progress bar.
## Example
```
```ts
// xxx.ets
@Entry
@Component
struct ProgressExample {
......@@ -88,8 +90,8 @@ struct ProgressExample {
Text('Capsule Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
Row({ space: 40 }) {
Progress({ value: 10, type: ProgressType.Capsule }).width(100)
Progress({ value: 20, total: 150, type: ProgressType.Capsule }).color(Color.Grey).value(50).width(100)
Progress({ value: 10, type: ProgressType.Capsule }).width(100).height(50)
Progress({ value: 20, total: 150, type: ProgressType.Capsule }).color(Color.Grey).value(50).width(100).height(50)
}
}.width('100%').margin({ top: 30 })
}
......
# TextArea
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
> **NOTE**
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The **&lt;TextArea&gt;** component provides multi-line text input.
The **\<TextArea>** component provides multi-line text input.
## Required Permissions
......@@ -15,12 +16,12 @@ None
## Child Components
None
Not supported
## APIs
TextArea(value?:{placeholder?: string controller?: TextAreaController})
TextArea(value?:{placeholder?: string, controller?: TextAreaController})
- Parameters
| Name | Type | Mandatory | Default Value | Description |
......@@ -37,9 +38,10 @@ In addition to universal attributes, the following attributes are supported.
| ------------------------ | ---------------------------------------- | ------------- | ---------------------------------------- |
| placeholderColor | Color | - | Placeholder text color. |
| placeholderFont | {<br/>size?: number,<br/>weight?:number \| [FontWeight](ts-universal-attributes-text-style.md),<br/>family?: string,<br/>style?: [FontStyle](ts-universal-attributes-text-style.md)<br/>} | - | Placeholder text style.<br/>- **size**: font size. If the value is of the number type, the unit fp is used.<br/>- **weight**: font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is **400**. A larger value indicates a larger font weight.<br/>- **family**: font family. Use commas (,) to separate multiple fonts, for example, **'Arial, sans-serif'**. The priority of the fonts is the sequence in which they are placed.<br/>- **style**: font style. |
| textAlign | TextAlign | Start | Sets the text horizontal alignment mode. |
| caretColor | Color | - | Sets the color of the cursor in the text box. |
| inputFilter<sup>8+</sup> | {<br/>value: [ResourceStr](../../ui/ts-types.md),<br/>error?: (value: string)<br/>} | - | Regular expression for input filtering. Only inputs that comply with the regular expression can be displayed. Other inputs are ignored. The specified regular expression can match single characters, but not strings. Example: ^(? =.\*\d)(? =.\*[a-z])(? =.\*[A-Z]).{8,10}$. Strong passwords containing 8 to 10 characters cannot be filtered.<br/>- **value**: indicates the regular expression to set.<br/>- **error**: returns the ignored content when regular expression matching fails. |
| textAlign | TextAlign | Start | Text horizontal alignment mode. |
| caretColor | Color | - | Color of the caret in the text box. |
| inputFilter<sup>8+</sup> | {<br/>value: [ResourceStr](../../ui/ts-types.md)<sup>8+</sup>,<br/>error?: (value:&nbsp;string)<br/>} | - | Regular expression for input filtering. Only inputs that comply with the regular expression can be displayed. Other inputs are ignored. The specified regular expression can match single characters, but not strings. Example: ^(? =.\*\d)(? =.\*[a-z])(? =.\*[A-Z]).{8,10}$. Strong passwords containing 8 to 10 characters cannot be filtered.<br/>- **value**: indicates the regular expression to set.<br/>- **error**: returns the ignored content when regular expression matching fails. |
| copyOption<sup>9+</sup> | boolean\|[CopyOption](ts-basic-components-text.md) | true | Whether copy and paste is allowed. |
- TextAlign enums
| Name | Description |
......@@ -77,8 +79,8 @@ Sets the position of the caret.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| ----- | ------ | --------- | ------------- | ---------------------------------------- |
| value | number | Yes | - | Length from the start of the string to the position where the input cursor is located. |
| ----- | ------ | --------- | ------------- | ------------------------------------------------------------ |
| value | number | Yes | - | Length from the start of the text string to the position where the caret is located. |
## Example
......@@ -87,14 +89,16 @@ Sets the position of the caret.
### Multi-line Text Input
```
```ts
// xxx.ets
@Entry
@Component
struct TextAreaExample1 {
controller: TextAreaController = new TextAreaController()
@State text: string = ''
build() {
Column() {
TextArea({ placeholder: 'input your word'})
TextArea({ placeholder: 'input your word', controller: this.controller})
.placeholderColor("rgb(0,0,225)")
.placeholderFont({ size: 30, weight: 100, family: 'cursive', style: FontStyle.Italic })
.textAlign(TextAlign.Center)
......@@ -110,6 +114,7 @@ struct TextAreaExample1 {
})
.onChange((value: string) => {
this.text = value
this.controller.caretPosition(-1)
})
Text(this.text).width('90%')
}
......@@ -120,10 +125,10 @@ struct TextAreaExample1 {
![en-us_image_0000001256858399](figures/en-us_image_0000001256858399.gif)
### Setting the Input Cursor
### Setting the Caret
```
```ts
// xxx.ets
@Entry
@Component
struct TextAreaExample2 {
......
# TextInput
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>
> **NOTE**
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The **&lt;TextInput&gt;** component provides single-line text input.
The **\<TextInput>** component provides single-line text input.
## Required Permissions
......@@ -14,7 +15,7 @@ None
## Child Components
None
Not supported
## APIs
......@@ -39,17 +40,18 @@ In addition to universal attributes, the following attributes are supported.
| placeholderFont | {<br/>size?: Length,<br/>weight?: number\|[FontWeight](ts-universal-attributes-text-style.md),<br/>family?: string,<br/>style?: [FontStyle](ts-universal-attributes-text-style.md)<br/>} | - | Placeholder text style.<br/>- **size**: font size. If the value is of the number type, the unit fp is used.<br/>- **weight**: font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is **400**. A larger value indicates a larger font weight.<br/>- **family**: font family. Use commas (,) to separate multiple fonts, for example, **'Arial, sans-serif'**. The priority of the fonts is the sequence in which they are placed.<br/>- **style**: font style. |
| enterKeyType | EnterKeyType | EnterKeyType.Done | How the Enter key is labeled. |
| caretColor | Color | - | Color of the caret (also known as the text insertion cursor). |
| maxLength<sup>8+</sup> | number | - | Maximum number of characters in the text input. |
| inputFilter<sup>8+</sup> | {<br/>value: [ResourceStr](../../ui/ts-types.md)<sup>8+</sup>,<br/>error?: (value: string)<br/>} | - | Regular expression for input filtering. Only inputs that comply with the regular expression can be displayed. Other inputs are ignored. The specified regular expression can match single characters, but not strings. Example: ^(? =.\*\d)(? =.\*[a-z])(? =.\*[A-Z]).{8,10}$. Strong passwords containing 8 to 10 characters cannot be filtered.<br/>- **value**: indicates the regular expression to set.<br/>- **error**: returns the ignored content when regular expression matching fails. |
| maxLength | number | - | Maximum number of characters in the text input. |
| inputFilter<sup>8+</sup> | {<br/>value: [ResourceStr](../../ui/ts-types.md)<sup>8+</sup>,<br/>error?: (value: string)<br/>} | - | Regular expression for input filtering. Only inputs that comply with the regular expression can be displayed. Other inputs are ignored. The specified regular expression can match single characters, but not strings. Example: ^(? =.\*\d)(? =.\*[a-z])(? =.\*[A-Z]).{8,10}$. Strong passwords containing 8 to 10 characters cannot be filtered.<br/>- **value**: regular expression to set.<br/>- **error**: error message containing the ignored content returned when regular expression matching fails. |
| copyOption<sup>9+</sup> | boolean\|[CopyOption](ts-basic-components-text.md) | true | Whether copy and paste is allowed. |
- EnterKeyType enums
| Name | Description |
| -------- | -------- |
| EnterKeyType.Go | The Enter key is labeled "Go." |
| EnterKeyType.Search | The Enter key is labeled "Search." |
| EnterKeyType.Send | The Enter key is labeled "Send." |
| EnterKeyType.Next | The Enter key is labeled "Next." |
| EnterKeyType.Done | The Enter key is labeled "Done." |
| EnterKeyType.Go | The Enter key is labeled **Go**. |
| EnterKeyType.Search | The Enter key is labeled **Search**. |
| EnterKeyType.Send | The Enter key is labeled **Send**. |
| EnterKeyType.Next | The Enter key is labeled **Next**. |
| EnterKeyType.Done | The Enter key is labeled **Done**. |
- InputType enums
| Name | Description |
......@@ -74,10 +76,10 @@ In addition to universal attributes, the following attributes are supported.
### TextInputController<sup>8+</sup>
Implements the controller of the **&lt;TextInput&gt;** component.
Implements the controller of the **\<TextInput>** component.
### Objects to Import
#### Objects to Import
```
......@@ -89,12 +91,12 @@ controller: TextInputController = new TextInputController()
caretPosition(value: number): void
Sets the cursor in a specified position.
Sets the position of the caret.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| value | number | Yes | - | Position of the input cursor.<br/>**value**: indicates the length from the start of the string to the position where the input cursor is located. |
| value | number | Yes | - | Length from the start of the text string to the position where the caret is located. |
......@@ -103,8 +105,8 @@ Sets the cursor in a specified position.
### Single-line Text Input
```
```ts
// xxx.ets
@Entry
@Component
struct TextInputExample1 {
......@@ -112,10 +114,9 @@ struct TextInputExample1 {
build() {
Column() {
TextArea({ placeholder: 'input your word' })
TextInput({ placeholder: 'input your word' })
.placeholderColor("rgb(0,0,225)")
.placeholderFont({ size: 30, weight: 100, family: 'cursive', style: FontStyle.Italic })
.textAlign(TextAlign.Center)
.caretColor(Color.Blue)
.height(50)
.fontSize(30)
......@@ -136,10 +137,10 @@ struct TextInputExample1 {
![en-us_image_0000001212378402](figures/en-us_image_0000001212378402.gif)
### Setting the Input Cursor
### Setting the Caret
```
```ts
// xxx.ets
@Entry
@Component
struct TextInputExample2 {
......
......@@ -74,97 +74,85 @@ The universal events are not supported.
| onShowFileSelector(callback: (event?: { result: [FileSelectorResult](#fileselectorresult), fileSelector: [FileSelectorParam](#fileselectorparam) }) => void) | <p>Triggered to process an HTML form whose input type is **file**, in response to the tapping of the **Select File** button.<br>**result**: file selection result to be sent to the web component.<br>**fileSelector**: information about the file selector.</p> |
| onUrlLoadIntercept(callback: (event?: { data:string \| [WebResourceRequest](#webresourcerequest) }) => boolean) | <p>Triggered before the **\<Web>** component loads the URL to determine whether to block the access. The callback returns **true** if the access is blocked, and **false** otherwise.<br>**data**: URL information.</p> |
### ConsoleMessage
## ConsoleMessage
- APIs
| Name | Description |
| ------------------------------- | ---------------------- |
| getLineNumber(): number | Obtains the number of rows in the **ConsoleMessage**. |
| getMessage(): string | Obtains the log information of the **ConsoleMessage**.|
| getMessageLevel(): MessageLevel | Obtains the log information level of the **ConsoleMessage**.|
| getSourceId(): string | Obtains the path and name of the web page source file. |
| Name | Description |
| ------------------------------- | ---------------------- |
| getLineNumber(): number | Obtains the number of rows in the **ConsoleMessage**. |
| getMessage(): string | Obtains the log information of the **ConsoleMessage**.|
| getMessageLevel(): [MessageLevel](#messagelevel-enums) | Obtains the log information level of the **ConsoleMessage**.|
| getSourceId(): string | Obtains the path and name of the web page source file. |
- MessageLevel enums
## MessageLevel Enums
| Name | Description |
| ----- | :---- |
| Debug | Debug level.|
| Error | Error level.|
| Info | Information level.|
| Log | Log level.|
| Warn | Warning level. |
| Name | Description |
| ----- | :---- |
| Debug | Debug level.|
| Error | Error level.|
| Info | Information level.|
| Log | Log level.|
| Warn | Warning level. |
### JsResult
## JsResult
Provides the result returned to the **\<Web>** component to indicate the user operation performed in the dialog box.
- APIs
| Name | Description |
| --------------------- | ----------------------- |
| handleCancel(): void | <p>The user's cancel operation in the dialog box.</p> |
| handleConfirm(): void | <p>The user's confirm operation in the dialog box.</p> |
### WebResourceError
- APIs
| Name | Description |
| --------------------- | ----------------------- |
| handleCancel(): void | <p>The user's cancel operation in the dialog box.</p> |
| handleConfirm(): void | <p>The user's confirm operation in the dialog box.</p> |
| Name | Description |
| ---------------------- | ------------ |
| getErrorCode(): number | Obtains the error code for resource loading. |
| getErrorInfo(): string | Obtains error information about resource loading.|
## WebResourceError
### WebResourceRequest
| Name | Description |
| ---------------------- | ------------ |
| getErrorCode(): number | Obtains the error code for resource loading. |
| getErrorInfo(): string | Obtains error information about resource loading.|
- APIs
## WebResourceRequest
| Name | Description |
| ---------------------------------------- | -------------------- |
| getRequestHeader(): Array\<[Header](#header)\> | Obtains the information about the resource request header. |
| getRequestUrl(): string | Obtains the URL of the resource request. |
| isMainFrame(): boolean | Checks whether the resource request is in the main frame. |
| isRedirect(): boolean | Checks whether the resource request is redirected by the server. |
| isRequestGesture(): boolean | Checks whether the resource request is associated with a gesture (for example, a tap).|
| Name | Description |
| ---------------------------------------- | -------------------- |
| getRequestHeader(): Array\<[Header](#header)\> | Obtains the information about the resource request header. |
| getRequestUrl(): string | Obtains the URL of the resource request. |
| isMainFrame(): boolean | Checks whether the resource request is in the main frame. |
| isRedirect(): boolean | Checks whether the resource request is redirected by the server. |
| isRequestGesture(): boolean | Checks whether the resource request is associated with a gesture (for example, a tap).|
### Header
## Header
Describes the request/response header returned by the **\<Web>** component.
- Parameters
| Name | Type | Description |
| ----------- | ------ | ------------- |
| headerKey | string | Key of the request/response header. |
| headerValue | string | Value of the request/response header.|
| Name | Type | Description |
| ----------- | ------ | ------------- |
| headerKey | string | Key of the request/response header. |
| headerValue | string | Value of the request/response header.|
### WebResourceResponse
## WebResourceResponse
- APIs
| Name | Description |
| ---------------------------------------- | ------------------ |
| getReasonMessage(): string | Obtains the status code description of the resource response. |
| getResponseCode(): number | Obtains the status code of the resource response. |
| getResponseData(): string | Obtains the data in the resource response. |
| getResponseEncoding(): string | Obtains the encoding of the resource response. |
| getResponseHeader(): Array\<[Header](#header)\> | Obtains the resource response header. |
| getResponseMimeType(): string | Obtains the media (MIME) type of the resource response.|
| Name | Description |
| ---------------------------------------- | ------------------ |
| getReasonMessage(): string | Obtains the status code description of the resource response. |
| getResponseCode(): number | Obtains the status code of the resource response. |
| getResponseData(): string | Obtains the data in the resource response. |
| getResponseEncoding(): string | Obtains the encoding of the resource response. |
| getResponseHeader(): Array\<[Header](#header)\> | Obtains the resource response header. |
| getResponseMimeType(): string | Obtains the media (MIME) type of the resource response.|
### RenderExitReason
## RenderExitReason
Explains why the rendering process exits.
| Name | Description |
| -------------------------- | ----------------- |
| ProcessAbnormalTermination | The rendering process exits abnormally. |
| ProcessWasKilled | The rendering process receives a SIGKILL message or is manually terminated.|
| ProcessCrashed | The rendering process crashes due to a segmentation error or other errors. |
| ProcessOom | The program memory is running low. |
| ProcessExitUnknown | Other reason. |
| PROCESS_ABNORMAL_TERMINATION | The rendering process exits abnormally. |
| PROCESS_WAS_KILLED | The rendering process receives a SIGKILL message or is manually terminated.|
| PROCESS_CRASHED | The rendering process crashes due to a segmentation error or other errors. |
| PROCESS_OOM | The program memory is running low. |
| PROCESS_EXIT_UNKNOWN | Other reason. |
### MixedMode
## MixedMode
| Name | Description |
| ---------- | ---------------------------------- |
......@@ -172,7 +160,7 @@ Explains why the rendering process exits.
| Compatible | HTTP and HTTPS hybrid content can be loaded in compatibility mode. This means that some insecure content may be loaded. |
| None | HTTP and HTTPS hybrid content cannot be loaded. |
### CacheMode
## CacheMode
| Name | Description |
| ------- | ------------------------------------ |
| Default | The cache that has not expired is used to load the resources. If the resources do not exist in the cache, they will be obtained from the Internet.|
......@@ -180,32 +168,28 @@ Explains why the rendering process exits.
| Online | The cache is not used to load the resources. All resources are obtained from the Internet. |
| Only | The cache alone is used to load the resources. |
### FileSelectorResult
## FileSelectorResult
Notifies the **\<Web>** component of the file selection result.
- APIs
| Name | Description |
| ---------------------------------------------- | ------------------------------------------------------------ |
| handleFileList(fileList: Array\<string>): void | Instructs the **\<Web>** component to select a file.<br>**fileList**: list of files to operate. |
### FileSelectorParam
- APIs
| Name | Description |
| ---------------------------------------------- | ------------------------------------------------------------ |
| handleFileList(fileList: Array\<string>): void | Instructs the **\<Web>** component to select a file.<br>**fileList**: list of files to operate. |
| Name | Description |
| -------------------------------- | ------------ |
| getTitle(): string | Obtains the title of the file selector. |
| getMode(): FileSelectorMode | Obtains the mode of the file selector. |
| getAcceptType(): Array\<string\> | Obtains the file filtering type. |
| isCapture(): boolean | Checks whether multimedia capabilities are invoked.|
## FileSelectorParam
| Name | Description |
| -------------------------------- | ------------ |
| title(): string | Title of the file selector. |
| mode(): FileSelectorMode | Mode of the file selector. |
| acceptType(): Array\<string\> | File filtering type. |
| isCapture(): boolean | Whether multimedia capabilities are invoked.|
### FileSelectorMode
## FileSelectorMode
| Name | Description |
| -------------------- | ---------- |
| FileOpenMode | Open and upload a file. |
| FileOpenMultipleMode | Open and upload multiple files. |
| FileOpenFolderMode | Open and upload a folder.|
| FileSaveMode | Save a file. |
| FILE_OPEN_MODE | Open and upload a file. |
| FILE_OPEN_MULTIPLE_MODE | Open and upload multiple files. |
| FILE_OPEN_FOLDER_MODE | Open and upload a folder.|
| FILE_SAVE_MODE | Save a file. |
## WebController
......
# Navigator
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> **NOTE**
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The **&lt;Navigator&gt;** component provides redirection.
The **\<Navigator>** component provides redirection to the target page.
## Required Permissions
......@@ -40,27 +41,28 @@ Creates a navigator.
## Attributes
| Name | Parameters | Default Value | Description |
| Name | Parameters | Default Value | Description |
| -------- | -------- | -------- | -------- |
| active | boolean | - | Whether the **&lt;Navigator&gt;** component is activated. If the component is activated, the corresponding navigation takes effect. |
| active | boolean | - | Whether the **\<Navigator>** component is activated. If the component is activated, the corresponding navigation takes effect. |
| params | Object | undefined | Data that needs to be passed to the target page during redirection. You can use **router.getParams()** to obtain the data on the target page. |
## Example
```
// Navigator Page
```ts
// Navigator.ets
@Entry
@Component
struct NavigatorExample {
@State active: boolean = false
@State Text: string = 'news'
@State Text: object = {name: 'news'}
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
Navigator({ target: 'pages/container/navigator/Detail', type: NavigationType.Push }) {
Text('Go to ' + this.Text + ' page').width('100%').textAlign(TextAlign.Center)
Text('Go to ' + this.Text['name'] + ' page')
.width('100%').textAlign(TextAlign.Center)
}.params({ text: this.Text })
Navigator() {
......@@ -75,14 +77,14 @@ struct NavigatorExample {
```
```
// Detail Page
```ts
// Detail.ets
import router from '@system.router'
@Entry
@Component
struct DetailExample {
@State text: string = router.getParams().text
@State text: any = router.getParams().text
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
......@@ -90,7 +92,8 @@ struct DetailExample {
Text('Go to back page').width('100%').height(20)
}
Text('This is ' + this.text + ' page').width('100%').textAlign(TextAlign.Center)
Text('This is ' + this.text['name'] + ' page')
.width('100%').textAlign(TextAlign.Center)
}
.width('100%').height(200).padding({ left: 35, right: 35, top: 35 })
}
......@@ -98,9 +101,8 @@ struct DetailExample {
```
```
// Back Page
```ts
// Back.ets
@Entry
@Component
struct BackExample {
......
# Gesture Binding Methods
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> **NOTE**<br>
> This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -16,21 +16,21 @@ None
Use the following attributes to bind gesture recognition to a component. When a gesture is recognized, the event callback is invoked to notify the component.
| Name | Type | Default Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| gesture | gesture: GestureType,<br/>mask?: GestureMask | gesture: -,<br/>mask: GestureMask.Normal | Gesture to recognize.<br/>**gesture** specifies the type of the gesture to bind, and **mask** specifies the event response setting. |
| priorityGesture | gesture: GestureType,<br/>mask?: GestureMask | gesture: -,<br/>mask: GestureMask.Normal | Gesture to preferentially recognize.<br/>**gesture** specifies the type of the gesture to bind, and **mask** specifies the event response setting.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> - By default, the child component takes precedence over the parent component in gesture recognition. When **priorityGesture** is configured for the parent component, the parent component takes precedence over the child component in gesture recognition. |
| parallelGesture | gesture: GestureType,<br/>mask?: GestureMask | gesture: -,<br/>mask: GestureMask.Normal | Gesture that can be triggered together with the child component gesture.<br/>**gesture** specifies the type of the gesture to bind, and **mask** specifies the event response setting.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> - The gesture event is not a bubbling event. When **parallelGesture** is set for the parent component, gesture events that are the same for the parent component and child components can be triggered, thereby implementing a bubbling effect. |
| gesture | gesture: GestureType,<br/>mask?: GestureMask | gesture: -,<br/>mask: GestureMask.Normal | Gesture to recognize.<br/>- **gesture**: type of the gesture to bind.<br/>- **mask**: event response setting. |
| priorityGesture | gesture: GestureType,<br/>mask?: GestureMask | gesture: -,<br/>mask: GestureMask.Normal | Gesture to preferentially recognize.<br/>- **gesture**: type of the gesture to bind.<br/>- **mask**: event response setting.<br/>By default, the child component takes precedence over the parent component in gesture recognition. When **priorityGesture** is configured for the parent component, the parent component takes precedence over the child component in gesture recognition. |
| parallelGesture | gesture: GestureType,<br/>mask?: GestureMask | gesture: -,<br/>mask: GestureMask.Normal | Gesture that can be triggered together with the child component gesture.<br/>- **gesture**: type of the gesture to bind.<br/>- **mask**: event response setting.<br/>The gesture event is not a bubbling event. When **parallelGesture** is set for the parent component, gesture events bound to both the parent and child components can be triggered, thereby implementing a bubbling effect. |
- GestureMask enums
| Name | Description |
| -------- | -------- |
| Normal | The gestures of child components are not masked and are recognized based on the default gesture recognition sequence. |
| IgnoreInternal | The gestures of child components are masked. Only the gestures of the current component are recognized.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> However, the built-in gestures of the child components are not masked. For example, when the child component is a **&lt;List&gt;** component, the built-in sliding gestures can still be triggered. |
| IgnoreInternal | The gestures of child components are masked. Only the gestures of the current component are recognized.<br/>However, the built-in gestures of the child components are not masked. For example, when the child component is a **&lt;List&gt;** component, the built-in sliding gestures can still be triggered. |
- Gesture types
- GestureType enums
| Name | Description |
| -------- | -------- |
| TapGesture | Tap gesture, which can be a single-tap or multi-tap gesture. |
......@@ -38,12 +38,13 @@ Use the following attributes to bind gesture recognition to a component. When a
| PanGesture | Pan gesture. |
| PinchGesture | Pinch gesture. |
| RotationGesture | Rotation gesture. |
| SwipeGesture | Swipe gesture, which can be idenfied when the swipe speed is 100 vp/s or higher. |
| GestureGroup | A group of gestures. Continuous recognition, parallel recognition, and exclusive recognition are supported. |
## Gesture Response Event
The component uses the **gesture** method to bind the gesture object and uses the events provided in this object to respond to the gesture operation. For example, the **onAction** event of the **TapGesture** object can be used to respond to a click event. For details about the event definition, see the section of each gesture object.
A component uses the **gesture** method to bind the gesture object and uses the events provided in this object to respond to the gesture operation. For example, the **onAction** event of the **TapGesture** object can be used to respond to a click event. For details about the event definition, see the section of each gesture object.
- TapGesture events
| Name | Description |
......@@ -54,13 +55,14 @@ The component uses the **gesture** method to bind the gesture object and uses th
| Name | Type | Description |
| -------- | -------- | -------- |
| timestamp | number | Timestamp of the event. |
| target<sup>8+</sup> | EventTarget | Object that triggers the gesture event. |
| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md) | Object that triggers the gesture event. |
## Example
```
```ts
// xxx.ets
@Entry
@Component
struct GestureSettingsExample {
......@@ -81,7 +83,7 @@ struct GestureSettingsExample {
TapGesture()
.onAction((event: GestureEvent) => {
this.value = 'priorityGesture onAction' + '\ncomponent globalPos:('
+ event.target.area.globalPos.x + ',' + event.target.area.globalPos.y + ')\nwidth:'
+ event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:'
+ event.target.area.width + '\nheight:' + event.target.area.height
}), GestureMask.IgnoreInternal
)
......
# Motion Path Animation
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> **NOTE**
>
> This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The attributes described in this topic are used to set the motion path of the component in a translation animation.
The attributes below can be used to set the motion path of the component in a translation animation.
## Attributes
| Name | Type | Default Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| motionPath | {<br/>path: string,<br/>from?: number,<br/>to?: number,<br/>rotatable?: boolean<br/>}<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> In a path, **start** and **end** can be used to replace the start point and end point. Example:<br/>> <br/>> 'Mstart.x start.y L50 50 Lend.x end.y Z' | {<br/>"",<br/>0.0,<br/>1.0,<br/>false<br/>} | Motion path of the component. The input parameters are described as follows:<br/>- **path**: motion path of the translation animation. The **svg** path string is used.<br/>- **from**: start point of the motion path. The default value is **0.0**.<br/>- **to**: end point of the motion path. The default value is **1.0**.<br/>- **rotatable**: whether to rotate along the path. |
| motionPath | {<br/>path: string,<br/>from?: number,<br/>to?: number,<br/>rotatable?: boolean<br/>}<br/>**NOTE**<br/>In a path, **start** and **end** can be used to replace the start point and end point. Example:<br/>'Mstart.x start.y L50 50 Lend.x end.y Z' | {<br/>"",<br/>0.0,<br/>1.0,<br/>false<br/>} | Motion path of the component. The input parameters are described as follows:<br/>- **path**: motion path of the translation animation. The **svg** path string is used.<br/>- **from**: start point of the motion path. The default value is **0.0**.<br/>- **to**: end point of the motion path. The default value is **1.0**.<br/>- **rotatable**: whether to rotate along the path. |
## Example
......
# Click Event
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> **NOTE**
>
> This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -14,10 +15,10 @@ None
| Name | Bubble Supported | Description |
| -------- | -------- | -------- |
| onClick(callback: (event?: ClickEvent) =&gt; void) | No | Called when a click event occurs. For details about the event parameters, see [ClickEvent](#clickevent). |
| onClick(callback: (event?: ClickEvent) =&gt; void) | No | Called when a click event occurs. For details about **event**, see [ClickEvent](#clickevent). |
### ClickEvent
## ClickEvent
| Name | Type | Description |
| -------- | -------- | -------- |
......@@ -25,36 +26,37 @@ None
| screenY | number | Y coordinate of the click relative to the upper edge of the screen. |
| x | number | X coordinate of the click relative to the left edge of the component being clicked. |
| y | number | Y coordinate of the click relative to the upper edge of the component being clicked. |
| target<sup>8+</sup> | EventTarget | Target element that is clicked. |
| target<sup>8+</sup> | [EventTarget](#eventtarget8) | Target element that is clicked. |
| timestamp | number | Timestamp of the event. |
- EventTarget<sup>8+</sup> attributes
## EventTarget<sup>8+</sup>
| Name | Type | Description |
| -------- | -------- | -------- |
| area | Area | Area information of the target element.|
| Name | Type | Description |
| -------- | -------- | -------- |
| area | [Area](#area8) | Area information of the target element.|
- Area<sup>8+</sup> attributes
## Area<sup>8+</sup>
| Name | Type | Description |
| -------- | -------- | -------- |
| width | number | Width of the target element, in vp. |
| height | number | Height of the target element, in vp. |
| position | Position | Position of the upper left corner of the target element relative to that of the parent element. |
| globalPosition | Position | Position of the upper left corner of the target element relative to that of the page. |
| Name | Type | Description |
| -------- | -------- | -------- |
| width | number | Width of the target element, in vp. |
| height | number | Height of the target element, in vp. |
| position | [Position](#position8) | Position of the upper left corner of the target element relative to that of the parent element. |
| globalPosition | [Position](#position8) | Position of the upper left corner of the target element relative to that of the page. |
- Position<sup>8+</sup> attributes
## Position<sup>8+</sup>
| Name | Type | Description |
| -------- | -------- | -------- |
| x | number | X-coordinate, in vp. |
| y | number | Y-coordinate, in vp. |
| Name | Type | Description |
| -------- | -------- | -------- |
| x | number | X-coordinate, in vp. |
| y | number | Y-coordinate, in vp. |
## Example
```
```ts
// xxx.ets
@Entry
@Component
struct ClickExample {
......@@ -66,7 +68,7 @@ struct ClickExample {
.onClick((event: ClickEvent) => {
console.info(this.text = 'Click Point:' + '\n screenX:' + event.screenX + '\n screenY:' + event.screenY
+ '\n x:' + event.x + '\n y:' + event.y + '\ntarget:' + '\n component globalPos:('
+ event.target.area.globalPos.x + ',' + event.target.area.globalPos.y + ')\n width:'
+ event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\n width:'
+ event.target.area.width + '\n height:' + event.target.area.height)
})
Text(this.text).padding(15)
......
# Touch Event
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> **NOTE**
> This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -14,44 +14,42 @@ None
| Name | Pop-up | Description |
| -------- | -------- | -------- |
| onTouch(callback: (event?: TouchEvent) =&gt; void) | Yes | Invoked when a touch action is triggered. For details about the event parameters, see [TouchEvent](#touchevent). |
| onTouch(callback: (event?: TouchEvent) =&gt; void) | Yes | Invoked when a touch action is triggered. For details about **event**, see [TouchEvent](#touchevent). |
### TouchEvent
## TouchEvent
- Attributes
| Name | Type | Description |
| -------- | -------- | -------- |
| --------------- | ----------------------- | ---------------------- |
| type | TouchType | Type of a touch event. |
| touches | Array&lt;TouchObject&gt; | All finger information. |
| changedTouches | Array&lt;TouchObject&gt; | Finger information changed. |
| touches | Array&lt;[TouchObject](#touchobject)&gt; | All finger information. |
| changedTouches | Array&lt;[TouchObject](#touchobject)&gt; | Finger information changed. |
| timestamp | number | Timestamp of the event. |
| target<sup>8+</sup> | EventTarget | Target of the event. |
| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md#eventtarget8) | Target of the event. |
- APIs
| API | Description |
| -------- | -------- |
| stopPropagation(): void | Pop-up of the stop event. |
- TouchObject
| Name | Type | Description |
| -------- | -------- | -------- |
| type | TouchType | Type of a touch event. |
| id | number | Unique identifier of a finger. |
| screenX | number | X coordinate of the touch point relative to the left edge of the screen. |
| screenY | number | Y coordinate of the touch point relative to the upper edge of the device screen. |
| x | number | X coordinate of the touch point relative to the left edge of the element to touch. |
| y | number | Y coordinate of the touch point relative to the upper edge of the element to touch. |
- TouchType
| Name | Description |
| -------- | -------- |
| Down | Trigger a touch event when a finger is pressed. |
| Up | Trigger a touch event when a finger is lifted. |
| Move | Trigger a touch event when a finger moves on the screen in pressed state. |
| Cancel | Trigger an event when a touch event is canceled. |
## TouchObject
| Name | Type | Description |
| -------- | -------- | -------- |
| type | [TouchType](#touchtype) | Type of a touch event. |
| id | number | Unique identifier of a finger. |
| screenX | number | X coordinate of the touch point relative to the left edge of the device screen. |
| screenY | number | Y coordinate of the touch point relative to the upper edge of the device screen. |
| x | number | X coordinate of the touch point relative to the left edge of the element to touch. |
| y | number | Y coordinate of the touch point relative to the upper edge of the element to touch. |
## TouchType
| Name | Description |
| -------- | -------- |
| Down | Trigger a touch event when a finger is pressed. |
| Up | Trigger a touch event when a finger is lifted. |
| Move | Trigger a touch event when a finger moves on the screen in pressed state. |
| Cancel | Trigger an event when a touch event is canceled. |
## Example
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册