提交 887b6d9e 编写于 作者: zyjhandsome's avatar zyjhandsome

Merge branch 'master' of https://gitee.com/openharmony/docs

......@@ -15,8 +15,8 @@ In the multi-dimensional state management mechanism for ArkUI, UI-related data c
| @Link | Primitive data types, classes, and arrays | This decorator is used to establish two-way data binding between the parent and child components. The internal state data of the parent component is used as the data source. Any changes made to one component will be reflected to the other.|
| @Observed | Class | This decorator is used to indicate that the data changes in the class will be managed by the UI page. |
| @ObjectLink | Objects of **@Observed** decorated classes| When the decorated state variable is modified, the parent and sibling components that have the state variable will be notified for UI re-rendering.|
| @Consume | Primitive data types, classes, and arrays | When the **@Consume** decorated variable detects the update of the **@Provide** decorated variable, the re-rendering of the current custom component is triggered.|
| @Provide | Primitive data types, classes, and arrays | As the data provider, **@Provide** can update the data of child nodes and trigger page re-rendering.|
| @Consume | Primitive data types, classes, and arrays | When the **@Consume** decorated variable detects the update of the **@Provide** decorated variable, the re-rendering of the current custom component is triggered.|
## State Management with Application-level Variables
......@@ -25,5 +25,8 @@ In the multi-dimensional state management mechanism for ArkUI, UI-related data c
- **@StorageLink**: works in a way similar to that of **@Consume**. The difference is that the target object is obtained from the **AppStorage** based on the given name. **@StorageLink** establishes two-way binding between the decorated UI component and **AppStorage** to synchronize data.
- **@StorageProp**: synchronizes UI component attributes with the **AppStorage** unidirectionally. That is, the value change in the **AppStorage** will trigger an update of the corresponding UI component, but the change of the UI component will not cause an update of the attribute value in the **AppStorage**.
- Service logic implementation API: adds, reads, modifies, or deletes the state data of applications. The changes made by this API will be synchronized to the UI component for UI update.
- **LocalStorage**: provides ability-specific storage.
- **@LocalStorageLink**: establishes two-way data binding between a component and the **LocalStorage**. Specifically, this is achieved by decorating the component's state variable with **@LocalStorageLink(*key*)**. Wherein, **key** is the attribute key value in the **LocalStorage**.
- **@LocalStorageProp**: establishes one-way data binding between a component and the **LocalStorage**. Specifically, this is achieved by decorating the component's state variable with **@LocalStorageProp(*key*)**. Wherein, **key** is the attribute key value in the **LocalStorage**.
- **PersistentStorage**: provides a set of static methods for managing persistent data of applications. Persistent data with specific tags can be linked to the **AppStorage**, and then the persistent data can be accessed through the **AppStorage** APIs. Alternatively, the **@StorageLink** decorator can be used to access the variable that matches the specific key.
- **Environment**: provides the **AppStorage** with an array of environment state attributes that are required by the application and describe the device environment where the application runs. It is a singleton object created by the framework when the application is started.
......@@ -82,14 +82,18 @@ struct MyComponent {
## @Prop
**@Prop** and **@State** have the same semantics but different initialization modes. Variables decorated by **@Prop** must be initialized using the **@State** decorated variable provided by their parent components. The **@Prop** decorated variable can be modified in the component, but the modification is not updated to the parent component; that is, **@Prop** uses one-way data binding.
**@Prop** and **@State** have the same semantics but different initialization modes. A **@Prop** decorated variable in a component must be initialized using the **@State** decorated variable in its parent component. The **@Prop** decorated variable can be modified in the component, but the modification is not updated to the parent component; the modification to the **@State** decorated variable is synchronized to the **@Prop** decorated variable. That is, **@Prop** establishes one-way data binding.
The **@Prop** decorated state variable has the following features:
- Support for simple types: The number, string, and boolean types are supported.
- Private: Data is accessed only within the component.
- Support for multiple instances: A component can have multiple attributes decorated by **@Prop**.
- Support for initialization with a value passed to the @Prop decorated variable: When a new instance of the component is created, all **@Prop** decorated variables must be initialized. Initialization inside the component is not supported.
- Support for initialization with a value passed to the @Prop decorated variable: When a new instance of the component is created, all **@Prop** variables must be initialized. Initialization inside the component is not supported.
> **NOTE**
>
> A **@Prop** decorated variable cannot be initialized inside the component.
**Example**
......@@ -152,13 +156,13 @@ Two-way binding can be established between the **@Link** decorated variable and
- Support for multiple types: The **@Link** decorated variables support the data types the same as the **@State** decorated variables; that is, the value can be of the following types: class, number, string, boolean, or arrays of these types.
- Private: Data is accessed only within the component.
- Single data source: The variable of the parent component used for initializing the **@Link** decorated variable must be a **@State** decorated variable.
- Single data source: The variable used to initialize the **@Link** decorated variable in a component must be a state variable defined in the parent component.
- **Two-way binding**: When a child component changes the **@Link** decorated variable, the **@State** decorated variable of its parent component is also changed.
- Support for initialization with the variable reference passed to the @Link decorated variable: When creating an instance of the component, you must use the naming parameter to initialize all **@Link** decorated variables. **@Link** decorated variables can be initialized by using the reference of the **@State** or **@Link** decorated variable. Wherein, the **@State** decorated variables can be referenced using the **'$'** operator.
> **NOTE**
>
> **@Link** decorated variables cannot be initialized within the component.
> A **@Link** decorated variable cannot be initialized inside the component.
**Simple Type Example**
......@@ -391,13 +395,13 @@ struct ViewB {
```
## @Consume and @Provide
## @Provide and @Consume
As the data provider, **@Provide** can update the data of child nodes and trigger page rendering. After **@Consume** detects that the **@Provide** decorated variable is updated, it will initiate re-rendering of the current custom component.
> **NOTE**
>
> To avoid infinite loops caused by circular reference, exercise caution when using **@Provide** and **@Consume**.
> When using **@Provide** and **@Consume**, avoid circular reference that may lead to infinite loops.
### @Provide
......
# Interpolation Calculation
# @ohos.curves
The **Curves** module provides APIs for interpolation calculation to construct step, cubic Bezier, and spring curve objects.
The **Curves** module provides APIs for interpolation calculation to create step, cubic Bezier, and spring curves.
> **NOTE**
>
......@@ -19,7 +19,7 @@ import Curves from '@ohos.curves'
initCurve(curve?: Curve): ICurve
Implements initialization for the interpolation curve, which is used to create an interpolation curve object based on the input parameter.
Implements initialization for the interpolation curve, which is used to create an interpolation curve based on the input parameter.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
......@@ -33,7 +33,7 @@ Implements initialization for the interpolation curve, which is used to create a
| Type | Description |
| ---------------------------------- | ---------------- |
| [ICurve](#icurve) | Curve object.|
| [ICurve](#icurve) | Interpolation curve.|
**Example**
......@@ -49,7 +49,7 @@ Curves.initCurve(Curve.EaseIn) // Create a default ease-in curve, where the inte
stepsCurve(count: number, end: boolean): ICurve
Constructs a step curve object.
Creates a step curve.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
......@@ -64,7 +64,7 @@ Constructs a step curve object.
| Type | Description |
| ---------------------------------- | ---------------- |
| [ICurve](#icurve) | Curve object.|
| [ICurve](#icurve) | Interpolation curve.|
**Example**
......@@ -80,7 +80,7 @@ Curves.stepsCurve(9, true) // Create a step curve.
cubicBezierCurve(x1: number, y1: number, x2: number, y2: number): ICurve
Constructs a cubic Bezier curve object. The curve values must be between 0 and 1.
Creates a cubic Bezier curve. The curve values must be between 0 and 1.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
......@@ -96,7 +96,7 @@ Constructs a cubic Bezier curve object. The curve values must be between 0 and 1
| Type | Description |
| ---------------------------------- | ---------------- |
| [ICurve](#icurve) | Curve object.|
| [ICurve](#icurve) | Interpolation curve.|
**Example**
......@@ -112,7 +112,7 @@ Curves.cubicBezierCurve(0.1, 0.0, 0.1, 1.0) // Create a cubic Bezier curve.
springCurve(velocity: number, mass: number, stiffness: number, damping: number): ICurve
Constructs a spring curve object.
Creates a spring curve.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
......@@ -120,7 +120,7 @@ Constructs a spring curve object.
| Name | Type | Mandatory | Description |
| --------- | ------ | ---- | ----- |
| velocity | number | Yes | Initial velocity. It is applied by external factors to the elastic animation. It aims to help ensure the smooth transition from the previous motion state to the elastic animation.|
| mass | number | Yes | Mass. Force object of the elastic system, which will have inertia effect on the elastic system. The greater the mass, the greater the amplitude of the oscillation, and the slower the speed of restoring to the equilibrium position.|
| mass | number | Yes | Mass, which influences the inertia in the spring system. The greater the mass, the greater the amplitude of the oscillation, and the slower the speed of restoring to the equilibrium position.|
| stiffness | number | Yes | Stiffness. It is the degree to which an object deforms by resisting the force applied. In an elastic system, the greater the stiffness, the stronger the ability to resist deformation, and the faster the speed of restoring to the equilibrium position.|
| damping | number | Yes | Damping. It is a pure number and has no real physical meaning. It is used to describe the oscillation and attenuation of the system after being disturbed. The larger the damping, the smaller the number of oscillations of elastic motion, and the smaller the oscillation amplitude.|
......@@ -129,7 +129,7 @@ Constructs a spring curve object.
| Type | Description |
| ---------------------------------- | ---------------- |
| [ICurve](#icurve)| Curve object.|
| [ICurve](#icurve)| Interpolation curve.|
**Example**
......@@ -140,6 +140,68 @@ Curves.springCurve(100, 1, 228, 30) // Create a spring curve.
```
## Curves.springMotion<sup>9+</sup>
springMotion(response?: number, dampingFraction?: number, overlapDuration?: number): ICurve
Creates a spring animation curve. If multiple spring animations are applied to the same attribute of an object, each animation replaces their predecessor and inherits the velocity.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory | Description |
| --------- | ------ | ---- | ----- |
| response | number | No | Duration of one complete oscillation, in seconds.<br>Default value: **0.55**|
| dampingFraction | number | No | Damping coefficient.<br>**0**: undamped. In this case, the spring oscillates forever.<br>> 0 and < 1: underdamped. In this case, the spring overshoots the equilibrium position.<br>**1**: critically damped.<br>> 1: overdamped. In this case, the spring approaches equilibrium gradually.<br>Default value: **0.825**|
| overlapDuration | number | No | Duration for animations to overlap, in seconds. When animations overlap, if the **response** values of the two animations are different, they will transit smoothly over this duration.<br> Default value: **0**|
**Return value**
| Type | Description |
| ---------------------------------- | ---------------- |
| [ICurve](#icurve)| Curve.<br>Note: The spring animation curve is physics-based. Its duration depends on the **springMotion** parameters and the previous velocity, rather than the **duration** parameter in **animation** or **animateTo**. The time cannot be normalized. Therefore, the interpolation cannot be obtained by using the [interpolate](#interpolate) function of the curve.|
**Example**
```ts
import Curves from '@ohos.curves'
Curves.springMotion() // Create a spring animation curve with default settings.
Curves.springMotion(0.5) // Create a spring animation curve with the specified response value.
Curves.springMotion (0.5, 0.6) // Create a spring animation curve with the specified response and dampingFraction values.
Curves.springMotion(0.5, 0.6, 0) // Create a spring animation curve with the specified parameter values.
```
## Curves.responsiveSpringMotion<sup>9+</sup>
responsiveSpringMotion(response?: number, dampingFraction?: number, overlapDuration?: number): ICurve
Creates a responsive spring animation curve. It is a special case of [springMotion](#curvesspringmotion9), with the only difference in the default values. It can be used together with **springMotion**.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory | Description |
| --------- | ------ | ---- | ----- |
| response | number | No | See **response** in **springMotion**. Default value: **0.15**|
| dampingFraction | number | No | See **dampingFraction** in **springMotion**. Default value: **0.86**|
| overlapDuration | number | No | See **overlapDuration** in **springMotion**. Default value: **0.25**|
**Return value**
| Type | Description |
| ---------------------------------- | ---------------- |
| [ICurve](#icurve)| Curve.<br>**NOTE**<br>1. To apply custom settings for a spring animation, you are advised to use **springMotion**. When using **responsiveSpringMotion**, you are advised to retain the default settings.<br>2. The duration of the responsive spring animation depends on the **responsiveSpringMotion** parameters and the previous velocity, rather than the **duration** parameter in **animation** or **animateTo**. In addition, the interpolation cannot be obtained by using the [interpolate](#interpolate) function of the curve.|
**Example**
```ts
import Curves from '@ohos.curves'
Curves.responsiveSpringMotion() // Create a responsive spring animation curve with default settings.
```
## ICurve
......@@ -194,7 +256,7 @@ Implements initialization to create a curve. This API is deprecated since API ve
steps(count: number, end: boolean): string
Constructs a step curve object. This API is deprecated since API version 9. You are advised to use [Curves.stepsCurve](#curvesstepscurve9) instead.
Creates a step curve. This API is deprecated since API version 9. You are advised to use [Curves.stepsCurve](#curvesstepscurve9) instead.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
......@@ -211,7 +273,7 @@ Constructs a step curve object. This API is deprecated since API version 9. You
cubicBezier(x1: number, y1: number, x2: number, y2: number): string
Constructs a cubic Bezier curve object. The curve value must range from 0 to 1. This API is deprecated since API version 9. You are advised to use [Curves.cubicBezierCurve](#curvescubicbeziercurve9) instead.
Creates a cubic Bezier curve. The curve value must range from 0 to 1. This API is deprecated since API version 9. You are advised to use [Curves.cubicBezierCurve](#curvescubicbeziercurve9) instead.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
......@@ -229,7 +291,7 @@ Constructs a cubic Bezier curve object. The curve value must range from 0 to 1.
spring(velocity: number, mass: number, stiffness: number, damping: number): string
Constructs a spring curve object. This API is deprecated since API version 9. You are advised to use [Curves.springCurve](#curvesspringcurve9) instead.
Creates a spring curve. This API is deprecated since API version 9. You are advised to use [Curves.springCurve](#curvesspringcurve9) instead.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
......@@ -238,7 +300,7 @@ Constructs a spring curve object. This API is deprecated since API version 9. Yo
| Name | Type | Mandatory | Description |
| --------- | ------ | ---- | ----- |
| velocity | number | Yes | Initial velocity. It is applied by external factors to the elastic animation. It aims to help ensure the smooth transition from the previous motion state to the elastic animation.|
| mass | number | Yes | Mass. Force object of the elastic system, which will have inertia effect on the elastic system. The greater the mass, the greater the amplitude of the oscillation, and the slower the speed of restoring to the equilibrium position.|
| mass | number | Yes | Mass, which influences the inertia in the spring system. The greater the mass, the greater the amplitude of the oscillation, and the slower the speed of restoring to the equilibrium position.|
| stiffness | number | Yes | Stiffness. It is the degree to which an object deforms by resisting the force applied. In an elastic system, the greater the stiffness, the stronger the ability to resist deformation, and the faster the speed of restoring to the equilibrium position.|
| damping | number | Yes | Damping. It is a pure number and has no real physical meaning. It is used to describe the oscillation and attenuation of the system after being disturbed. The larger the damping, the smaller the number of oscillations of elastic motion, and the smaller the oscillation amplitude.|
......@@ -247,6 +309,7 @@ Constructs a spring curve object. This API is deprecated since API version 9. Yo
```ts
// xxx.ets
import Curves from '@ohos.curves'
@Entry
@Component
struct ImageComponent {
......@@ -256,16 +319,16 @@ struct ImageComponent {
build() {
Column() {
Text()
.margin({top:100})
.margin({ top: 100 })
.width(this.widthSize)
.height(this.heightSize)
.backgroundColor(Color.Red)
.onClick(()=> {
.onClick(() => {
let curve = Curves.cubicBezierCurve(0.25, 0.1, 0.25, 1.0);
this.widthSize = curve.interpolate(0.5) * this.widthSize;
this.heightSize = curve.interpolate(0.5) * this.heightSize;
})
.animation({duration: 2000 , curve: Curves.stepsCurve(9, true)})
.animation({ duration: 2000, curve: Curves.stepsCurve(9, true) })
}.width("100%").height("100%")
}
}
......
......@@ -145,11 +145,12 @@ Copies this matrix object.
```ts
// xxx.ets
import matrix4 from '@ohos.matrix4'
@Entry
@Component
struct Test {
private matrix1 = matrix4.identity().translate({x:100})
private matrix2 = this.matrix1.copy().scale({x:2})
private matrix1 = matrix4.identity().translate({ x: 100 })
private matrix2 = this.matrix1.copy().scale({ x: 2 })
build() {
Column() {
......@@ -160,7 +161,7 @@ struct Test {
Image($r("app.media.bg2"))
.width("40%")
.height(100)
.margin({top:50})
.margin({ top: 50 })
.transform(this.matrix2)
}
}
......@@ -199,11 +200,12 @@ Combines the effects of two matrices to generate a new matrix object.
```ts
// xxx.ets
import matrix4 from '@ohos.matrix4'
@Entry
@Component
struct Test {
private matrix1 = matrix4.identity().translate({x:200}).copy()
private matrix2 = matrix4.identity().scale({x:2}).copy()
private matrix1 = matrix4.identity().translate({ x: 200 }).copy()
private matrix2 = matrix4.identity().scale({ x: 2 }).copy()
build() {
Column() {
......@@ -211,13 +213,13 @@ struct Test {
Image($r("app.media.icon"))
.width("40%")
.height(100)
.margin({top:50})
.margin({ top: 50 })
// Translate the x-axis by 200px, and then scale it twice to obtain the resultant matrix.
Image($r("app.media.icon"))
.transform(this.matrix1.combine(this.matrix2))
.width("40%")
.height(100)
.margin({top:50})
.height(100)
.margin({ top: 50 })
}
}
}
......@@ -245,8 +247,9 @@ Inverts this matrix object.
```ts
import matrix4 from '@ohos.matrix4'
// The effect of matrix 1 (width scaled up by 2x) is opposite to that of matrix 2 (width scaled down by 2x).
let matrix1 = matrix4.identity().scale({x:2})
let matrix1 = matrix4.identity().scale({ x: 2 })
let matrix2 = matrix1.invert()
@Entry
@Component
struct Tests {
......@@ -295,10 +298,11 @@ Translates this matrix object along the x, y, and z axes.
```ts
// xxx.ets
import matrix4 from '@ohos.matrix4'
@Entry
@Component
struct Test {
private matrix1 = matrix4.identity().translate({x:100, y:200, z:30})
private matrix1 = matrix4.identity().translate({ x: 100, y: 200, z: 30 })
build() {
Column() {
......@@ -346,7 +350,7 @@ import matrix4 from '@ohos.matrix4'
@Entry
@Component
struct Test {
private matrix1 = matrix4.identity().scale({x:2, y:3, z:4, centerX:50, centerY:50})
private matrix1 = matrix4.identity().scale({ x:2, y:3, z:4, centerX:50, centerY:50 })
build() {
Column() {
......@@ -392,17 +396,18 @@ Rotates this matrix object along the x, y, and z axes.
```ts
// xxx.ets
import matrix4 from '@ohos.matrix4'
@Entry
@Component
struct Test {
private matrix1 = matrix4.identity().rotate({x:1, y:1, z:2, angle:30})
private matrix1 = matrix4.identity().rotate({ x: 1, y: 1, z: 2, angle: 30 })
build() {
Column() {
Image($r("app.media.bg1")).transform(this.matrix1)
.width("40%")
.height(100)
}.width("100%").margin({top:50})
}.width("100%").margin({ top: 50 })
}
}
```
......
# Page Routing
# @system.router
The **Router** module provides APIs to access pages through URIs.
......@@ -43,8 +43,8 @@ export default {
data1: 'message',
data2: {
data3: [123, 456, 789]
},
},
}
}
});
}
}
......@@ -67,7 +67,8 @@ export default {
}
```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> **NOTE**
>
> The page routing stack supports a maximum of 32 pages.
......@@ -94,8 +95,8 @@ export default {
router.replace({
uri: 'pages/detail/detail',
params: {
data1: 'message',
},
data1: 'message'
}
});
}
}
......@@ -135,7 +136,7 @@ Returns to the previous page or a specified page.
export default {
indexPushPage() {
router.push({
uri: 'pages/detail/detail',
uri: 'pages/detail/detail'
});
}
}
......@@ -147,7 +148,7 @@ export default {
export default {
detailPushPage() {
router.push({
uri: 'pages/mall/mall',
uri: 'pages/mall/mall'
});
}
}
......@@ -183,7 +184,8 @@ export default {
}
```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> **NOTE**
>
> In the example, the **uri** field indicates the page route, which is specified by the **pages** list in the **config.json** file.
## router.getParams
......@@ -237,7 +239,7 @@ Obtains the number of pages in the current stack.
```js
export default {
getLength() {
var size = router.getLength();
let size = router.getLength();
console.log('pages stack size = ' + size);
}
}
......@@ -262,7 +264,7 @@ Obtains state information about the current page.
```js
export default {
getState() {
var page = router.getState();
let page = router.getState();
console.log('current index = ' + page.index);
console.log('current name = ' + page.name);
console.log('current path = ' + page.path);
......@@ -296,7 +298,7 @@ export default {
},
cancel: function() {
console.log('cancel');
},
}
});
}
}
......@@ -327,7 +329,7 @@ export default {
},
cancel: function() {
console.log('cancel');
},
}
});
}
}
......@@ -339,10 +341,10 @@ Defines the page routing parameters.
**System capability**: SystemCapability.ArkUI.ArkUI.Lite
| Name | Type | Mandatory | Description |
| ------ | ------ | ---- | ---------------------------------------- |
| uri | string | Yes | URI of the target page, in either of the following formats:<br>1. Absolute path, which is provided by the **pages** list in the **config.json** file. Example:<br>- pages/index/index<br> - pages/detail/detail<br>2. Specific path. If the URI is a slash (/), the home page is displayed.|
| params | Object | No | Data that needs to be passed to the target page during redirection. The target page can use **router.getParams()** to obtain the passed parameters, for example, **this.keyValue** (**keyValue** is the value of a key in **params**). In the web-like paradigm, these parameters can be directly used on the target page. If the field specified by **key** already exists on the target page, the passed value of the key will be displayed.|
| Name | Type| Mandatory| Description |
| ------ | -------- | ---- | ------------------------------------------------------------ |
| uri | string | Yes | URI of the target page, in either of the following formats:<br>1. Absolute path, which is provided by the **pages** list in the **config.json** file. Example:<br>- pages/index/index<br> - pages/detail/detail<br>2. Specific path. If the URI is a slash (/), the home page is displayed.|
| params | object | No | Data that needs to be passed to the target page during redirection. The target page can use **router.getParams()** to obtain the passed parameters, for example, **this.keyValue** (**keyValue** is the value of a key in **params**). In the web-like paradigm, these parameters can be directly used on the target page. If the field specified by **key** already exists on the target page, the passed value of the key will be displayed.|
## BackRouterOptions
......@@ -351,10 +353,10 @@ Defines the parameters for routing back.
**System capability**: The items in the table below require different system capabilities. For details, see the table.
| Name | Type | Mandatory | Description |
| ------ | ------ | ---- | ---------------------------------------- |
| uri | string | No | URI of the page to return to. If the specified page does not exist in the page stack, the application does not respond. If this parameter is not set, the application returns to the previous page.<br>**System capability**: SystemCapability.ArkUI.ArkUI.Full|
| params | Object | No | Data that needs to be passed to the target page during redirection.<br>**System capability**: SystemCapability.ArkUI.ArkUI.Lite|
| Name | Type| Mandatory| Description |
| ------ | -------- | ---- | ------------------------------------------------------------ |
| uri | string | No | URI of the page to return to. If the specified page does not exist in the page stack, the application does not respond. If this parameter is not set, the application returns to the previous page.<br>**System capability**: SystemCapability.ArkUI.ArkUI.Full|
| params | object | No | Data that needs to be passed to the target page during redirection.<br>**System capability**: SystemCapability.ArkUI.ArkUI.Lite|
## RouterState
......
......@@ -42,7 +42,7 @@ You can set universal styles for components in the **style** attribute or **.css
| backdrop-filter<sup>5+</sup> | string | - | Syntax: backdrop-filter: blur(px)<br>Radius of the background blur area within the component layout. If this style is not set, the default value **0** (no blur) is used. Percentage values are not supported.<br>Example:<br>- backdrop-filter: blur(10px) |
| window-filter<sup>5+</sup> | string | - | Syntax: window-filter: blur(percent), style<sup>5+</sup><br>Blur degree and style for windows within the component layout. If this style is not set, the default value **0%** (no blur area) is used. Different blur degrees and styles for multiple blur areas are not supported. Available values of **style** are as follows: small_light (default value), medium_light, large_light, xlarge_light, small_dark, medium_dark, large_dark, xlarge_dark<br>Example:<br>- window-filter: blur(50%)<br>- window-filter: blur(10%), large_light |
| opacity | number | 1 | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. |
| display | string | flex | Type of the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered<br>- **grid**: grid layout (available only **div** supports the **display** style)|
| display | string | flex | Type of the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered<br>- **grid**: grid layout (available only for the **\<div>** component) |
| visibility | string | visible | Whether to display the box containing an element. The invisible box occupies layout space. (To remove the box, set the **display** attribute to **none**.) Available values are as follows:<br>- **visible**: The element is visible.<br>- **hidden**: The box is hidden but still takes up space.<br>If both **visibility** and **display** are set, only **display** takes effect.|
| flex | number \| string | - | How to divide available space of the parent component for each child component.<br>You can set one, two<sup>5+</sup>, or three<sup>5+</sup> values for this style.<br>Set one value in either of the following ways:<br>- A unitless number to set **flex-grow**.<br>- A valid width value<sup>5+</sup> to set **flex-basis**.<br>Set two values<sup>5+</sup> in the following ways:<br>The first value must be a unitless number used to set **flex-grow**. The second value must be either of the following:<br>- A unitless number to set **flex-shrink**.<br>- A valid width value to set **flex-basis**.<br>Set three values<sup>5+</sup> in the following ways:<br>The first value must be a unitless number used to set **flex-grow**. The second value must be a unitless number used to set **flex-shrink**. The third value must be a valid width value used to set **flex-basis**.<br>This style takes effect only when the container is any of the following components: **\<div>**, **\<list-item>**, **\<tabs>**, **\<refresh>**, and **\<stepper-item><sup>5+</sup>**.|
| flex-grow | number | 0 | How much a child component will grow. The value specifies allocation of the remaining space on the main axis of the parent component. Size of available space = Container size - Total size of all child components. Value **0** indicates that the child component does not grow.<br>This style takes effect only when the container is any of the following components: **\<div>**, **\<list-item>**, **\<tabs>**, **\<refresh>**, and **\<stepper-item><sup>5+</sup>**.|
......
......@@ -102,7 +102,6 @@
- [Counter](ts-container-counter.md)
- [Flex](ts-container-flex.md)
- [FlowItem](ts-container-flowitem.md)
- [GridContainer](ts-container-gridcontainer.md)
- [GridCol](ts-container-gridcol.md)
- [GridRow](ts-container-gridrow.md)
- [Grid](ts-container-grid.md)
......@@ -124,25 +123,25 @@
- [TabContent](ts-container-tabcontent.md)
- [WaterFlow](ts-container-waterflow.md)
- Media Components
- [Video](ts-media-components-video.md)
- [Video](ts-media-components-video.md)
- Drawing Components
- [Circle](ts-drawing-components-circle.md)
- [Ellipse](ts-drawing-components-ellipse.md)
- [Line](ts-drawing-components-line.md)
- [Polyline](ts-drawing-components-polyline.md)
- [Polygon](ts-drawing-components-polygon.md)
- [Path](ts-drawing-components-path.md)
- [Rect](ts-drawing-components-rect.md)
- [Shape](ts-drawing-components-shape.md)
- [Circle](ts-drawing-components-circle.md)
- [Ellipse](ts-drawing-components-ellipse.md)
- [Line](ts-drawing-components-line.md)
- [Polyline](ts-drawing-components-polyline.md)
- [Polygon](ts-drawing-components-polygon.md)
- [Path](ts-drawing-components-path.md)
- [Rect](ts-drawing-components-rect.md)
- [Shape](ts-drawing-components-shape.md)
- Canvas Components
- [Canvas](ts-components-canvas-canvas.md)
- [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md)
- [CanvasGradient](ts-components-canvas-canvasgradient.md)
- [ImageBitmap](ts-components-canvas-imagebitmap.md)
- [ImageData](ts-components-canvas-imagedata.md)
- [OffscreenCanvasRenderingContext2D](ts-offscreencanvasrenderingcontext2d.md)
- [Path2D](ts-components-canvas-path2d.md)
- [Lottie](ts-components-canvas-lottie.md)
- [Canvas](ts-components-canvas-canvas.md)
- [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md)
- [CanvasGradient](ts-components-canvas-canvasgradient.md)
- [ImageBitmap](ts-components-canvas-imagebitmap.md)
- [ImageData](ts-components-canvas-imagedata.md)
- [OffscreenCanvasRenderingContext2D](ts-offscreencanvasrenderingcontext2d.md)
- [Path2D](ts-components-canvas-path2d.md)
- [Lottie](ts-components-canvas-lottie.md)
- Animation
- [AnimatorProperty](ts-animatorproperty.md)
- [Explicit Animatio](ts-explicit-animation.md)
......
......@@ -27,7 +27,7 @@ Obtains an image from the specified source for subsequent rendering and display.
| Name| Type | Mandatory| Description |
| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| src | string \| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](ts-types.md#resource) | Yes | Image source. Both local and online images are supported.<br>When using an image referenced using a relative path, for example, **Image("common/test.jpg")**, the **\<Image>** component cannot be called across bundles or modules. Therefore, you are advised to use **$r** to reference image resources that need to be used globally.<br>- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.<br>\- Base64 strings are supported. The value format is data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data], where [base64 data] is a Base64 string.<br/>\- Strings with the **datashare://path** prefix are supported, which are used to access the image path provided by a data ability.<br>\- Strings with the **file:///data/storage** prefix are supported, which are used to read image resources in the **files** folder in the installation directory of the application. Ensure that the files in the directory package path have the read permission. |
| src | string \| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](ts-types.md#resource) | Yes | Image source. Both local and online images are supported.<br>When using an image referenced using a relative path, for example, `Image("common/test.jpg")`, the **\<Image>** component cannot be called across bundles or modules. Therefore, you are advised to use `$r` to reference image resources that need to be used globally.<br>- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.<br>\- Base64 strings are supported. The value format is data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data], where [base64 data] is a Base64 string.<br/>\- Strings with the **datashare://path** prefix are supported, which are used to access the image path provided by a data ability. Before loading images, the application must [request the required permissions](../../file-management/medialibrary-overview.md#requesting-permissions).<br>\- Strings with the **file:///data/storage** prefix are supported, which are used to read image resources in the **files** folder in the installation directory of the application. Ensure that the files in the directory package path have the read permission.|
## Attributes
......@@ -38,7 +38,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| alt | string \| [Resource](ts-types.md#resource)| Placeholder image displayed during loading. Local images are supported. |
| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | Image scale mode.<br>Default value: **ImageFit.Cover** |
| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat) | Whether the image is repeated.<br>Default value: **ImageRepeat.NoRepeat**<br>**NOTE**<br>This attribute is not applicable to SVG images.|
| interpolation | [ImageInterpolation](#imageinterpolation) | Interpolation effect of the image. This attribute is intended to alleviate aliasing that occurs when a low-definition image is zoomed in.<br>Default value: **ImageInterpolation.None**<br>**NOTE**<br>This attribute is not applicable to SVG images and **PixelMap** objects. |
| interpolation | [ImageInterpolation](#imageinterpolation) | Interpolation effect of the image. This attribute is intended to alleviate aliasing that occurs when a low-definition image is zoomed in.<br>Default value: **ImageInterpolation.None**<br>**NOTE**<br>This attribute is not applicable to SVG images.<br>This attribute is not applicable to **PixelMap** objects.|
| renderMode | [ImageRenderMode](#imagerendermode) | Rendering mode of the image.<br>Default value: **ImageRenderMode.Original**<br>**NOTE**<br>This attribute is not applicable to SVG images.|
| sourceSize | {<br>width: number,<br>height: number<br>} | Size of the decoded image. The original image is decoded into a **pixelMap** of the specified size, in px.<br>**NOTE**<br>This attribute is not applicable to **PixelMap** objects.|
| matchTextDirection | boolean | Whether to display the image in the system language direction. When this parameter is set to true, the image is horizontally flipped in the right-to-left (RTL) language context.<br>Default value: **false** |
......@@ -74,11 +74,11 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
| Name | Description |
| Name | Description |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| onComplete(callback: (event?: { width: number, height: number, componentWidth: number,<br> componentHeight: number, loadingStatus: number }) =&gt; void) | Triggered when an image is successfully loaded. The size of the loaded image is returned.<br>- **width**: width of the image, in pixels.<br>- **height**: height of the image, in pixels.<br>- **componentWidth**: width of the container component, in pixels.<br>- **componentHeight**: height of the container component, in pixels.<br>- **loadingStatus**: image loading status. |
| onError(callback: (event?: { componentWidth: number, componentHeight: number , message<sup>9+</sup>: string }) =&gt; void) | Triggered when an exception occurs during image loading.<br>- **componentWidth**: width of the container component, in pixels.<br>- **componentHeight**: height of the container component, in pixels. |
| onFinish(event: () =&gt; void) | Triggered when the animation playback in the loaded SVG image is complete. If the animation is an infinite loop, this callback is not triggered. |
| onComplete(callback: (event?: { width: number, height: number, componentWidth: number,<br> componentHeight: number, loadingStatus: number }) =&gt; void) | Triggered when an image is successfully loaded. The size of the loaded image is returned.<br>- **width**: width of the image, in pixels.<br>- **height**: height of the image, in pixels.<br>- **componentWidth**: width of the container component, in pixels.<br>- **componentHeight**: height of the container component, in pixels.<br>- **loadingStatus**: image loading status.<br>|
| onError(callback: (event?: { componentWidth: number, componentHeight: number , message<sup>9+</sup>: string }) =&gt; void) | Triggered when an exception occurs during image loading.<br>- **componentWidth**: width of the container component, in pixels.<br>- **componentHeight**: height of the container component, in pixels.|
| onFinish(event: () =&gt; void) | Triggered when the animation playback in the loaded SVG image is complete. If the animation is an infinite loop, this callback is not triggered.|
## Example
......@@ -161,7 +161,7 @@ The default network timeout period is 5 minutes for loading online images. When
```tsx
// @ts-nocheck
import http from '@ohos.net.http';
import ResponseCode from '@ohos.net.http';
import ResponseCode from '@ohos.net.http'
import image from '@ohos.multimedia.image'
......@@ -176,7 +176,7 @@ struct Index {
Column({space: 10}) {
Button ("Get Online Image")
.onClick(() => {
this.httpRequest();
this.httpRequest()
})
Image(this.image).height(100).width(100)
}
......@@ -187,7 +187,7 @@ struct Index {
// Request an online image.
private httpRequest() {
let httpRequest = http.createHttp();
let httpRequest = http.createHttp()
httpRequest.request(
"https://www.example.com/xxx.png", // Enter a specific URL of the online image.
......@@ -207,7 +207,7 @@ struct Index {
this.image = pixelMap
})
} else {
console.log("response code: " + code);
console.log("response code: " + code)
}
}
}
......@@ -216,9 +216,9 @@ struct Index {
}
```
> **NOTE**
>
> For details about the request mode, timeout, and additional request parameters for loading online images, see [request()](../../reference/apis/js-apis-http.md) in the HTTP module.
> **NOTE**
>
> For details about the request mode, timeout, and additional request parameters for loading online images, see [request()](../../reference/apis/js-apis-http.md) in the HTTP module.
### Setting Attributes
......@@ -356,7 +356,7 @@ struct ImageExample3 {
```ts
import fileio from '@ohos.fileio'
import fs from '@ohos.file.fs';
import fs from '@ohos.file.fs'
import context from '@ohos.application.context'
@Entry
......
......@@ -27,7 +27,7 @@ ImageAnimator()
| duration | number | Playback duration, in ms. The default duration is 1000 ms. When the duration is **0**, no image is played. The value change takes effect only at the beginning of the next cycle. When a separate duration is set in **images**, the setting of this attribute is invalid.<br>Default value: **1000**|
| reverse | boolean | Playback sequence. The value **false** indicates that images are played from the first one to the last one, and **true** indicates that images are played from the last one to the first one.<br>Default value: **false**|
| fixedSize | boolean | Whether the image size is the same as the component size.<br> **true**: The image size is the same as the component size. In this case, the width, height, top, and left attributes of the image are invalid.<br> **false**: The width, height, top, and left attributes of each image must be set separately.<br>Default value: **true**|
| preDecode | number | Whether to enable pre-decoding. The default value **0** indicates that pre-decoding is disabled. The value **2** indicates that two images following the currently playing frame will be cached in advance to improve performance.<br>Default value: **0**|
| preDecode<sup>(deprecated)</sup> | number | Number of pre-decoded images. The value **2** indicates that two images following the currently playing page will be pre-decoded to improve performance.<br>This API is deprecated since API version 9.<br>Default value: **0**|
| fillMode | [FillMode](ts-appendix-enums.md#fillmode) | Status before and after the animation starts. For details about the options, see **FillMode**.<br>Default value: **FillMode.Forwards**|
| iterations | number | Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times.<br>Default value: **1**|
......@@ -102,7 +102,7 @@ struct ImageAnimatorExample {
left: 0
}
])
.state(this.state).reverse(this.reverse).fixedSize(false).preDecode(2)
.state(this.state).reverse(this.reverse).fixedSize(false)
.fillMode(FillMode.None).iterations(this.iterations).width(340).height(240)
.margin({ top: 100 })
.onStart(() => {
......@@ -119,6 +119,7 @@ struct ImageAnimatorExample {
})
.onFinish(() => {
console.info('Finish')
this.state = AnimationStatus.Stopped
})
Row() {
Button('start').width(100).padding(5).onClick(() => {
......
......@@ -6,27 +6,26 @@ The **\<XComponent>** can accept and display the EGL/OpenGL ES and media data in
>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## Child Components
Child components are not supported when **type** is set to **"surface"**.\
Since API version 9, child components are supported when **type** is set to **"component"**.
Child components are not supported when **type** is set to **"surface"**.
Since API version 9, child components are supported when **type** is set to **"component"**.
## APIs
XComponent(value: {id: string, type: string, libraryname?: string, controller?: XComponentController})
XComponent(value: {id: string, type: string, libraryname?: string, controller?: XComponentController})
**Parameters**
| Name | Type | Mandatory | Description |
| --------- | ------ | ---- | ----- |
| id | string | Yes | Unique ID of the component. The value can contain a maximum of 128 characters.|
| type | string | Yes | Type of the component. The options are as follows:<br>- **"surface"**: The content of the component is displayed individually, without being combined with that of other components. This option is used for displaying EGL/OpenGL ES and media data.<br>- **"component"**<sup>9+</sup>: The component becomes a container where non-UI logic can be executed to dynamically load the display content.|
| libraryname | string | No | Name of the dynamic library generated after compilation at the application native layer. This parameter is valid only when the component type is **"surface"**.|
| controller | [XComponentcontroller](#xcomponentcontroller) | No | Controller bound to the component, which can be used to invoke the methods of the component. This parameter is valid only when the component type is **"surface"**. |
| Name | Type | Mandatory | Description |
| ----------- | ---------------------------------------- | ---- | ---------------------------------------- |
| id | string | Yes | Unique ID of the component. The value can contain a maximum of 128 characters. |
| type | string | Yes | Type of the component. The options are as follows:<br>- **"surface"**: The content of the component is displayed individually, without being combined with that of other components. This option is used for displaying EGL/OpenGL ES and media data.<br>- **"component"**<sup>9+</sup>: The component becomes a container where non-UI logic can be executed to dynamically load the display content.|
| libraryname | string | No | Name of the dynamic library generated after compilation at the application native layer. This parameter is valid only when the component type is **"surface"**.|
| controller | [XComponentcontroller](#xcomponentcontroller) | No | Controller bound to the component, which can be used to invoke methods of the component. This parameter is valid only when the component type is **"surface"**.|
> **NOTE**<br>
> **NOTE**
>
> When **type** is set to **"component"**, the **\<XComponent>** functions as a container, where child components are laid out vertically.
>
......@@ -46,7 +45,7 @@ The **\<XComponent>** can accept and display the EGL/OpenGL ES and media data in
## Events
The following events are supported only when **type** is set to **"surface"**. The [universal events and gestures](./Readme-EN.md) are not supported.
The following events are supported only when **type** is set to **"surface"**. The [universal events](ts-universal-events-click.md) and [universal gestures](ts-gesture-settings.md) are not supported.
### onLoad
......@@ -56,9 +55,9 @@ Triggered when the plug-in is loaded.
**Parameters**
| Name | Type | Mandatory | Description |
| ------------- | ------ | ---- | ----------------------- |
| event | object | No | Context of the **\<XComponent>** object. The APIs contained in the context are defined at the C++ layer by developers.|
| Name | Type | Mandatory | Description |
| ----- | ------ | ---- | ---------------------------------------- |
| event | object | No | Context of the **\<XComponent>** object. The APIs contained in the context are defined at the C++ layer by developers.|
### onDestroy
......@@ -99,7 +98,7 @@ Sets the width and height of the surface held by the **\<XComponent>**. This API
**Parameters**
| Name | Type | Mandatory | Description |
| Name | Type | Mandatory | Description |
| ------------- | ------ | ---- | ----------------------- |
| surfaceWidth | number | Yes | Width of the surface held by the **\<XComponent>**.|
| surfaceHeight | number | Yes | Height of the surface held by the **\<XComponent>**.|
......
......@@ -134,7 +134,7 @@ struct AlphabetIndexerSample {
.selectedFont({size: 16, weight: FontWeight.Bolder}) // Font style of the selected text.
.popupFont({ size: 30, weight: FontWeight.Bolder}) // Font style of the pop-up text.
.itemSize(28) // Size of an item in the alphabetic index bar.
.alignStyle(IndexerAlign.Left) // Position of the pop-up window relative to the center of the indexer bar's top border, which is left in this example.
.alignStyle(IndexerAlign.Left) // The pop-up window is displayed on the right of the alphabetic index bar.
.onSelect((index: number) => {
console.info(this.value[index] + ' Selected!')
})
......@@ -162,4 +162,4 @@ struct AlphabetIndexerSample {
}
```
![en-us_image_0000001212378392](figures/en-us_image_0000001212378392.gif)
![alphabet](figures/alphabet.gif)
......@@ -16,7 +16,7 @@ The **\<RelativeContainer>** component is used for element alignment in complex
* A child component can set the container or another child component as the anchor.
* To show in the **\<RelativeContainer>**, child components must have an ID. The container ID is fixed at **__container__**.
* Three positions of the child component in a direction can use three positions of the container or another child components in the same direction as anchors. If anchors are set for more than two positions in a single direction, the third position is skipped.
* The child component size set on the frontend page is not affected by the **\<RelativeContainer>** rules.
* The child component size set on the frontend page is not affected by the **\<RelativeContainer>** rules. If two or more **alignRules** values are set for one direction of the child component, you are not advised to set the size for this direction.
* If offset is required after the alignment, it can be set through **offset**.
* Exceptions
* When a mutual or circular dependency occurs, none of the child components in the container are drawn.
......@@ -39,62 +39,60 @@ RelativeContainer()
struct Index {
build() {
Row() {
Button("Extra button").width(100).height(50)
RelativeContainer() {
Button("Button 1")
.width(120)
.height(30)
Row().width(100).height(100)
.backgroundColor("#FF3333")
.alignRules({
middle: { anchor: "__container__", align: HorizontalAlign.Center },
top: {anchor: "__container__", align: VerticalAlign.Top},
left: {anchor: "__container__", align: HorizontalAlign.Start}
})
.id("bt1")
.borderWidth(1)
.borderColor(Color.Black)
.id("row1")
Text("This is text 2")
.fontSize(20)
.padding(10)
Row().width(100).height(100)
.backgroundColor("#FFCC00")
.alignRules({
bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
top: { anchor: "bt1", align: VerticalAlign.Bottom },
right: { anchor: "bt1", align: HorizontalAlign.Center }
top: {anchor: "__container__", align: VerticalAlign.Top},
right: {anchor: "__container__", align: HorizontalAlign.End}
})
.id("tx2")
.borderWidth(1)
.borderColor(Color.Black)
.height(30)
Button("Button 3")
.width(100)
.height(100)
.id("row2")
Row().height(100)
.backgroundColor("#FF6633")
.alignRules({
left: { anchor: "bt1", align: HorizontalAlign.End },
top: { anchor: "tx2", align: VerticalAlign.Center },
bottom: { anchor: "__container__", align: VerticalAlign.Bottom }
top: {anchor: "row1", align: VerticalAlign.Bottom},
left: {anchor: "row1", align: HorizontalAlign.End},
right: {anchor: "row2", align: HorizontalAlign.Start}
})
.id("bt3")
.borderWidth(1)
.borderColor(Color.Black)
.id("row3")
Text("This is text 4")
.fontSize(20)
.padding(10)
Row()
.backgroundColor("#FF9966")
.alignRules({
left: { anchor: "tx2", align: HorizontalAlign.End },
right: { anchor: "__container__", align: HorizontalAlign.End },
top: { anchor: "__container__", align: VerticalAlign.Top },
bottom: { anchor: "bt3", align: VerticalAlign.Top }
top: {anchor: "row3", align: VerticalAlign.Bottom},
bottom: {anchor: "__container__", align: VerticalAlign.Bottom},
left: {anchor: "__container__", align: HorizontalAlign.Start},
right: {anchor: "row1", align: HorizontalAlign.End}
})
.id("tx4")
.borderWidth(1)
.borderColor(Color.Black)
.id("row4")
Row()
.backgroundColor("#FF66FF")
.alignRules({
top: {anchor: "row3", align: VerticalAlign.Bottom},
bottom: {anchor: "__container__", align: VerticalAlign.Bottom},
left: {anchor: "row2", align: HorizontalAlign.Start},
right: {anchor: "__container__", align: HorizontalAlign.End}
})
.id("row5")
}
.width(200).height(200)
.backgroundColor(Color.Orange)
.width(300).height(300)
.margin({left: 100})
.border({width:2, color: "#6699FF"})
}
.height('100%')
}
}
```
![relative container](figures/relativecontainer.png)
......@@ -20,7 +20,7 @@ animateTo(value: AnimateParam, event: () => void): void
| -------- | -------- | -------- |
| duration | number | Animation duration, in ms.<br>Default value: **1000**|
| tempo | number | Animation playback speed. A larger value indicates faster animation playback, and a smaller value indicates slower animation playback. The value **0** means that there is no animation.<br>Default value: **1.0**|
| curve | Curve \| Curves | Animation curve.<br>Default value: **Curve.Linear**|
| curve | [Curve](ts-appendix-enums.md#curve) \| [ICurve](../apis/js-apis-curve.md#icurve) \| string | Animation curve.<br>Default value: **Curve.Linear**|
| delay | number | Delay of animation playback, in ms. By default, the playback is not delayed.<br>Default value: **0**|
| iterations | number | Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times.<br>Default value: **1**|
| playMode | [PlayMode](ts-appendix-enums.md#playmode) | Animation playback mode. By default, the animation is played from the beginning after the playback is complete.<br>Default value: **PlayMode.Normal**|
......
......@@ -8,7 +8,7 @@ The framework provides four pixel units, with vp as the reference data unit.
| px | Physical pixel unit of the screen. |
| vp | Pixel unit specific to the screen density. Pixels in this unit are converted into physical pixels of the screen based on the screen pixel density. This unit is used for values whose unit is not specified.|
| fp | Font pixel, which is similar to vp and varies according to the system font size. |
| lpx | Logical pixel unit of the window. It is the ratio of the actual screen width to the logical width (configured by **designWidth**. For example, if **designWidth** is set to **720** (default value), then 1lpx is equal to 2px for a screen with an actual width of 1440 physical pixels.|
| lpx | Logical pixel unit of the window. It is the ratio of the actual screen width to the logical width (configured by **designWidth**). For example, if **designWidth** is set to **720** (default value), then 1lpx is equal to 2px for a screen with an actual width of 1440 physical pixels. |
## Pixel Unit Conversion
......
......@@ -42,4 +42,4 @@ struct AreaExample {
}
```
![en-us_image_0000001257058403](figures/en-us_image_0000001257058403.gif)
![en-us_image_0000001189634870](figures/en-us_image_0000001189634870.gif)
\ No newline at end of file
......@@ -59,6 +59,6 @@ Application resources can be accessed via an absolute or relative path. In this
## Configuration Files
If you are developing a widget in the FA model, configure the **config.json** file. For details, see [FA Widget Development](../../ability/fa-formability.md#configuring-the-widget-configuration-file).
If you are developing a widget in the FA model, configure the **config.json** file.
If you are developing a widget in the stage model, configure **ExtensionAbility** under **extensionAbilities** in the **module.json5** file. For details, see [Stage Widget Development](../../ability/stage-formextension.md#configuring-the-widget-configuration-file).
If you are developing a widget in the stage model, configure **ExtensionAbility** under **extensionAbilities** in the **module.json5** file.
......@@ -99,11 +99,11 @@ You can also implement redirection to the target application using a **want**, w
| Selector | Type | Default Value | Description |
| ------ | ------ | -------- | ---------------------------------------- |
| action | string | "router" | Event type.<br>- **"router"**: redirection event.<br>- **"message"**: message event.|
| want | [Want](../apis/js-apis-application-Want.md) | - | Information about the target application. For details, see the **want** format. |
| want | [Want](../apis/js-apis-app-ability-want.md) | - | Information about the target application. For details, see the **want** format. |
```json
{
```json
{
"data": {
"mainAbility": "xxx.xxx.xxx"
},
......@@ -124,9 +124,9 @@ You can also implement redirection to the target application using a **want**, w
}
}
}
```
```
In API version 8, the [featureAbility.getWant](../apis/js-apis-featureAbility.md) API in the **onCreate** method of the **app.js** or **app.ets** file must be called for the **want** parameter to receive related parameters.
In API version 8, the [featureAbility.getWant](../apis/js-apis-ability-featureAbility.md) API in the **onCreate** method of the **app.js** or **app.ets** file must be called for the **want** parameter to receive related parameters.
- Message event properties
......
# UI Development
- [ArkUI Overview](arkui-overview.md)
- UI Development with eTS-based Declarative Development Paradigm
- UI Development with ArkTS-based Declarative Development Paradigm
- [Overview](ui-ts-overview.md)
- [Declarative UI Development Guidelines](ui-ts-developing-intro.md)
- Declarative UI Development Examples
......
......@@ -27,7 +27,7 @@ ArkUI is a UI development framework for building OpenHarmony applications. It pr
| Development Paradigm | Description | Applicable To | Target Audience |
| -------- | ---------------------------------------- | ---------------- | ------------------- |
| Declarative development paradigm | Uses [ArkTS](../quick-start/arkts-get-started.md) – a superset of TypeScript with declarative UI syntax, providing UI drawing capabilities from three dimensions: component, animation, and status management. The programming mode used is closer to natural semantics. You can intuitively describe the UI without caring about how the framework implements UI drawing and rendering, leading to simplified and efficient development.| Applications involving technological sophistication and teamwork| Mobile application and system application developers|
| Web-like development paradigm| Uses the classical three-stage programming model, in which OpenHarmony Markup Language (HML) is used for building layouts, CSS for defining styles, and JS for adding processing logic. UI components are associated with data through one-way data-binding. This means that when data changes, the UI automatically refreshes with the new data. This development paradigm has a low learning curve for frontend web developers, allowing them to quickly transform existing web applications into ArkUI applications.| Small- and medium-sized applications and service widgets with simple UIs | Frontend web developers |
| Web-like development paradigm| Uses the classical three-stage programming model, in which OpenHarmony Markup Language (HML) is used for building layouts, CSS for defining styles, and JS for adding processing logic. UI components are associated with data through one-way data-binding. This means that when data changes, the UI automatically refreshes with the new data. This development paradigm has a low learning curve for frontend web developers, allowing them to quickly transform existing web applications into ArkUI applications.| Small- and medium-sized applications and service widgets with simple UIs | Frontend web developers |
## Framework Structure
......@@ -37,22 +37,22 @@ As shown above, the two development paradigms share the UI backend engine and la
## Relationship Between UI and Ability Framework
Ability is an essential part of OpenHarmony applications. The [ability framework](../ability/ability-brief.md) provides two models: Feature Ability (FA) model and stage model. The table below describes the relationship between the two models of the ability framework and the two development paradigms of ArkUI.
OpenHarmony provides two application models: FA model and stage model. The table below describes the relationship between these two models and the two development paradigms of ArkUI.
**FA Model**
| Type| UI Development Paradigm | Description|
| -------- | --------------------------- | --------------------------- |
| Application| Web-like development paradigm| UI development: HML, CSS, and JS<br>Service entries: files with fixed file names, which are **app.ets** (Page ability), **service.ts** (Service ability), and **data.ts** (Data ability)<br>Service logic: JS and TS|
| | Declarative development paradigm| UI development: ArkTS<br>Service entries: files with fixed file names, which are **app.ets** (Page ability), **service.ts** (Service ability), and **data.ts** (Data ability)<br>Service logic: JS and TS|
| Type | UI Development Paradigm | Description |
| ---- | -------- | ---------------------------------------- |
| Application | Web-like development paradigm| UI development: HML, CSS, and JS<br>Service entries: files with fixed file names, which are **app.ets** (Page ability), **service.ts** (Service ability), and **data.ts** (Data ability)<br>Service logic: JS and TS|
| | Declarative development paradigm | UI development: ArkTS<br>Service entries: files with fixed file names, which are **app.ets** (Page ability), **service.ts** (Service ability), and **data.ts** (Data ability)<br>Service logic: JS and TS|
| Service widget| Web-like development paradigm| UI development: HML, CSS, and JSON (action)<br>Service entry: **form.ts**<br>Service logic: JS and TS|
| | Declarative development paradigm| Not supported currently|
| | Declarative development paradigm | Not supported currently |
**Stage Model**
| Type| UI Development Paradigm | Description|
| -------- | --------------------------- | --------------------------- |
| Application| Web-like development paradigm| Not supported currently|
| | Declarative development paradigm| UI development: ArkTS<br>Service entries: derived from **ohos.application.Ability**/**ExtensionAbility**<br>Service logic: TS|
| Type | UI Development Paradigm | Description |
| ---- | -------- | ---------------------------------------- |
| Application | Web-like development paradigm| Not supported currently |
| | Declarative development paradigm | UI development: ArkTS<br>Service entries: derived from **ohos.application.Ability**/**ExtensionAbility**<br>Service logic: TS|
| Service widget| Web-like development paradigm| UI development: HML, CSS, and JSON (action)<br>Service entries: derived from **FormExtensionAbility**<br>Service logic: TS|
| | Declarative development paradigm| Not supported currently|
| | Declarative development paradigm | Not supported currently |
......@@ -28,7 +28,7 @@ Functions of the folders are as follows:
>**NOTE**
>
>- Reserved folders \(**i18n** and **resources**\) cannot be renamed.
>- The **i18n** and **resources** folders cannot be renamed.
>- If the same resource name and directory are used under the share directory and the instance \(**default**\) directory, the resource in the instance directory will be used when you reference the directory.
>- The **share** directory does not support **i18n**.
>- You should create the optional folders \(shown in the directory structure\) as needed after you create the project in DevEco Studio.
......
......@@ -9,7 +9,7 @@ You only need to perform operations in [Resource Files](#resource-files) and [Re
## Resource Files
Resource files store application content in multiple languages. This framework uses JSON files to store resource definitions. Place the resource file of each locale in the i18n directory described in [File Organization](../ui/js-framework-file.md).
Resource files store application content in multiple languages. This framework uses JSON files to store resource definitions. Place the resource file of each locale in the i18n directory described in [File Organization](js-framework-file.md).
Resource files should be named in _language-script-region_.json format. For example, the resource file for Hong Kong(China) in the traditional script is named zh-Hant-HK. You can omit the region, for example, zh-CN for simplified Chinese, or omit both the script and region, for example, zh for Chinese.
......@@ -191,4 +191,4 @@ Table 3 $t function parameters
## Language Acquisition
For details about how to obtain the language, see [Configuration](../reference/apis/js-apis-configuration.md).
For details about how to obtain the language, see [Configuration](../reference/apis/js-apis-application-configuration.md).
\ No newline at end of file
......@@ -28,9 +28,8 @@ Before creating a page, create an ArkTS project. For details, see [Creating an A
![en-us_image_0000001214128687](figures/en-us_image_0000001214128687.png)
2. Display food pictures.
Create an **\<Image>** component and specify a URL for it. To display the **\<Text>** component above the **\<Image>** component, declare the **\<Image>** component first. Image resources are stored in the **rawfile** folder in **resources**. When referencing the resources in the **rawfile** folder, use the `$rawfile('filename')` format, where **filename** indicates the relative path of the file in the **rawfile** folder. `$rawfile` only allows the **\<Image>** component to reference image resources.
```ts
@Entry
@Component
......@@ -50,11 +49,10 @@ Before creating a page, create an ArkTS project. For details, see [Creating an A
![en-us_image_0000001168410342](figures/en-us_image_0000001168410342.png)
3. Access images through resources.
In addition to specifying the image path, you can also use the media resource symbol **$r** to reference resources based on the resource qualifier rules in the **resources** folder. Right-click the **resources** folder, choose **New** > **Resource Directory** from the shortcut menu, and set **Resource Type** to **Media** (image resource).
Place **Tomato.png** in the **media** folder. You can then reference the application resources in the `$r('app.type.name')` format, which is `$r('app.media.Tomato')` in this example.
```ts
@Entry
@Component
......@@ -71,11 +69,9 @@ Before creating a page, create an ArkTS project. For details, see [Creating an A
}
}
```
4. Set the width and height of the image, and set the **objectFit** attribute of the image to **ImageFit.Contain**, which means to keep the aspect ratio of the image to ensure that the image is completely displayed within the boundary.
4. Set the width and height of the image, and set the **objectFit** attribute of the image to **ImageFit.Contain**, which means to keep the aspect ratio of the image to ensure that the image is completely displayed within the boundary.
If the image fills the entire screen, the possible causes are as follows:
1. The width and height of the image are not set.
2. The default attribute of **objectFit** of the image is **ImageFit.Cover**, that is, the image is zoomed in or zoomed out to fill the entire display boundary with the aspect ratio locked.
......@@ -315,9 +311,8 @@ Use the **Flex** layout to build a food composition table. In this way, cell siz
![en-us_image_0000001215079443](figures/en-us_image_0000001215079443.png)
4. Create the **Nutrient** class in a similar process. **Nutrition** consists of four parts: **Protein**, **Fat**, **Carbohydrates**, and **VitaminC**. The names of the last three parts are omitted in the table and represented by spaces.
Set **FlexDirection.Column**, **FlexAlign.SpaceBetween**, and **ItemAlign.Start**.
```ts
@Component
struct ContentTable {
......@@ -411,15 +406,17 @@ Use the **Flex** layout to build a food composition table. In this way, cell siz
}
}
```
![en-us_image_0000001215199399](figures/en-us_image_0000001215199399.png)
5. Use the custom constructor **\@Builder** to simplify the code. It can be found that the food groups in each food composition table are actually of the same UI structure.
![en-us_image_0000001169599582](figures/en-us_image_0000001169599582.png)
Currently, all food groups are declared, resulting in code duplication and redundancy. You can use **\@Builder** to build a custom method and abstract the same UI structure declaration. The **\@Builder** decorated method and the **build** method for the **@Component** decorated component are used to declare some UI rendering structures and comply with the same ArkTS syntax. You can define one or more methods decorated by **\@Builder**, but a component decorated by **@Component** can have only one **build** method.
Declare the **IngredientItem** method decorated by **\@Builder** in **ContentTable** to declare the UI descriptions for the category name, content name, and content value.
![en-us_image_0000001169599582](figures/en-us_image_0000001169599582.png)
Currently, all food groups are declared, resulting in code duplication and redundancy. You can use **\@Builder** to build a custom method and abstract the same UI structure declaration. The **\@Builder** decorated method and the **build** method for the **@Component** decorated component are used to declare some UI rendering structures and comply with the same ArkTS syntax. You can define one or more methods decorated by **\@Builder**, but a component decorated by **@Component** can have only one **build** method.
Declare the **IngredientItem** method decorated by **\@Builder** in **ContentTable** to declare the UI descriptions for the category name, content name, and content value.
```ts
@Component
struct ContentTable {
......@@ -441,9 +438,9 @@ Use the **Flex** layout to build a food composition table. In this way, cell siz
}
}
```
When the **IngredientItem** API is called in the **build** method of **ContentTable**, **this** needs to be used to invoke the method in the scope of the component to distinguish the global method call.
When the **IngredientItem** API is called in the **build** method of **ContentTable**, **this** needs to be used to invoke the method in the scope of the component to distinguish the global method call.
```ts
@Component
struct ContentTable {
......@@ -461,9 +458,9 @@ Use the **Flex** layout to build a food composition table. In this way, cell siz
}
}
```
The overall code of the **ContentTable** component is as follows:
The overall code of the **ContentTable** component is as follows:
```ts
@Component
struct ContentTable {
......@@ -509,7 +506,7 @@ Use the **Flex** layout to build a food composition table. In this way, cell siz
}
}
```
![en-us_image_0000001215199399](figures/en-us_image_0000001215199399.png)
![en-us_image_0000001215199399](figures/en-us_image_0000001215199399.png)
You've learned how to build a simple food details page. Read on to learn how to define the page layout and connection.
......@@ -79,17 +79,4 @@ Flags说明。用于表示处理Want的方式。
| ------------------------------------ | ---------- | ------------------------------------------------------------ |
| FLAG_AUTH_READ_URI_PERMISSION | 0x00000001 | 指示对URI执行读取操作的授权。 |
| FLAG_AUTH_WRITE_URI_PERMISSION | 0x00000002 | 指示对URI执行写入操作的授权。 |
| FLAG_ABILITY_FORWARD_RESULT | 0x00000004 | 将结果返回给元能力。 |
| FLAG_ABILITY_CONTINUATION | 0x00000008 | 确定是否可以将本地设备上的功能迁移到远程设备。 |
| FLAG_NOT_OHOS_COMPONENT | 0x00000010 | 指定组件是否属于OHOS。 |
| FLAG_ABILITY_FORM_ENABLED | 0x00000020 | 指定是否启动某个能力。 |
| FLAG_AUTH_PERSISTABLE_URI_PERMISSION | 0x00000040 | 指示URI上可能持久化的授权。<br>**系统API**: 此接口为系统接口,三方应用不支持调用。 |
| FLAG_AUTH_PREFIX_URI_PERMISSION | 0x00000080 | 按照前缀匹配的方式验证URI权限。<br>**系统API**: 此接口为系统接口,三方应用不支持调用。 |
| FLAG_ABILITYSLICE_MULTI_DEVICE | 0x00000100 | 支持分布式调度系统中的多设备启动。 |
| FLAG_START_FOREGROUND_ABILITY | 0x00000200 | 指示无论主机应用程序是否已启动,都将启动使用服务模板的功能。 |
| FLAG_ABILITY_CONTINUATION_REVERSIBLE | 0x00000400 | 表示迁移是可拉回的。<br>**系统API**: 此接口为系统接口,三方应用不支持调用。 |
| FLAG_INSTALL_ON_DEMAND | 0x00000800 | 如果未安装指定的功能,请安装该功能。 |
| FLAG_INSTALL_WITH_BACKGROUND_MODE | 0x80000000 | 如果未安装,使用后台模式安装该功能。 |
| FLAG_ABILITY_CLEAR_MISSION | 0x00008000 | 指示清除其他任务的操作。可以为传递给 **[ohos.app.Context](js-apis-ability-context.md)****startAbility**方法的**Want**设置此标志,并且必须与**flag_ABILITY_NEW_MISSION**一起使用。 |
| FLAG_ABILITY_NEW_MISSION | 0x10000000 | 指示在历史任务堆栈上创建任务的操作。 |
| FLAG_ABILITY_MISSION_TOP | 0x20000000 | 指示如果启动能力的现有实例已位于任务堆栈的顶部,则将重用该实例。否则,将创建一个新的能力实例。 |
\ No newline at end of file
| FLAG_INSTALL_ON_DEMAND | 0x00000800 | 如果未安装指定的功能,请安装该功能。 |
\ No newline at end of file
......@@ -90,7 +90,7 @@ export default class MyFormExtensionAbility extends FormExtensionAbility {
onUpdateForm(formId: string): void
卡片提供方接收更新卡片的通知接口。获取最新数据后调用[FormExtensionContext](js-apis-inner-application-formExtensionContext.md)的updateForm接口刷新卡片数据。
卡片提供方接收更新卡片的通知接口。获取最新数据后调用formProvider的[updateForm](js-apis-app-form-formProvider.md#updateform)接口刷新卡片数据。
**系统能力**:SystemCapability.Ability.Form
......
......@@ -34,36 +34,6 @@ import buffer from '@ohos.buffer';
| 'binary' | 表示二进制格式,不区分大小写。 |
| 'hex' | 表示十六进制格式,不区分大小写。 |
## 属性
**系统能力:** SystemCapability.Utils.Lang
| 名称 | 类型 | 可读 | 可写 | 说明 |
| -------- | -------- | -------- | -------- | -------- |
| length | number | 是 | 否 | Buffer对象的字节长度。 |
| buffer | ArrayBuffer | 是 | 否 | ArrayBuffer对象。 |
| byteOffset | number | 是 | 否 | 当前Buffer所在内存池的偏移量。 |
**错误码:**
以下错误码的详细介绍请参见[语言基础类库错误码](../errorcodes/errorcode-utils.md)
| 错误码ID | 错误信息 |
| -------- | -------- |
| 10200013 | Cannot set property ${propertyName} of Buffer which has only a getter. |
**示例:**
```ts
import buffer from '@ohos.buffer';
let buf = buffer.from("1236");
console.log(JSON.stringify(buf.length));
let arrayBuffer = buf.buffer;
console.log(JSON.stringify(new Uint8Array(arrayBuffer)));
console.log(JSON.stringify(buf.byteOffset));
```
## buffer.alloc
alloc(size: number, fill?: string | Buffer | number, encoding?: BufferEncoding): Buffer
......@@ -101,7 +71,7 @@ let buf3 = buffer.alloc(11, 'aGVsbG8gd29ybGQ=', 'base64');
allocUninitializedFromPool(size: number): Buffer
创建指定大小未被初始化的Buffer对象。内存从缓冲池分配。
创建的Buffer的内容未知,需要使用[buffer.fill](#bufferfill)函数来初始化Buffer对象。
创建的Buffer的内容未知,需要使用[fill](#fill)函数来初始化Buffer对象。
**系统能力:** SystemCapability.Utils.Lang
......@@ -131,7 +101,7 @@ buf.fill(0);
allocUninitialized(size: number): Buffer
创建指定大小未被初始化的Buffer实例。内存不从缓冲池分配。
创建的Buffer的内容未知,需要使用[buffer.fill](#bufferfill)函数来初始化Buffer对象。
创建的Buffer的内容未知,需要使用[fill](#fill)函数来初始化Buffer对象。
**系统能力:** SystemCapability.Utils.Lang
......@@ -418,7 +388,7 @@ let buf1 = buffer.from('this is a test');
let buf2 = buffer.from('7468697320697320612074c3a97374', 'hex');
console.log(buf1.toString()); // 打印: this is a test
console.log(buf2.toString());
console.log(buf2.toString()); // 打印: this is a test
```
......@@ -485,7 +455,71 @@ console.log(buffer.isEncoding('utf/8').toString()); // 打印: false
console.log(buffer.isEncoding('').toString()); // 打印: false
```
## buffer.compare
## buffer.transcode
transcode(source: Buffer | Uint8Array, fromEnc: string, toEnc: string): Buffer
将给定的Buffer或Uint8Array对象从一种字符编码重新编码为另一种。
**系统能力:** SystemCapability.Utils.Lang
**参数:**
| 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- |
| source | Buffer&nbsp;\|&nbsp;Uint8Array | 是 | 实例对象。 |
| fromEnc | string | 是 | 当前编码。 |
| toEnc | string | 是 | 目标编码。 |
**返回值:**
| 类型 | 说明 |
| -------- | -------- |
| Buffer | 根据当前编码转换成目标编码,并返回一个新的buffer实例。 |
**示例:**
```ts
import buffer from '@ohos.buffer';
let buf = buffer.alloc(50);
let newBuf = buffer.transcode(buffer.from(''), 'utf-8', 'ascii');
console.log(newBuf.toString('ascii'));
```
## Buffer
### 属性
**系统能力:** SystemCapability.Utils.Lang
| 名称 | 类型 | 可读 | 可写 | 说明 |
| -------- | -------- | -------- | -------- | -------- |
| length | number | 是 | 否 | Buffer对象的字节长度。 |
| buffer | ArrayBuffer | 是 | 否 | ArrayBuffer对象。 |
| byteOffset | number | 是 | 否 | 当前Buffer所在内存池的偏移量。 |
**错误码:**
以下错误码的详细介绍请参见[语言基础类库错误码](../errorcodes/errorcode-utils.md)
| 错误码ID | 错误信息 |
| -------- | -------- |
| 10200013 | Cannot set property ${propertyName} of Buffer which has only a getter. |
**示例:**
```ts
import buffer from '@ohos.buffer';
let buf = buffer.from("1236");
console.log(JSON.stringify(buf.length));
let arrayBuffer = buf.buffer;
console.log(JSON.stringify(new Uint8Array(arrayBuffer)));
console.log(JSON.stringify(buf.byteOffset));
```
### compare
compare(target: Buffer | Uint8Array, targetStart?: number, targetEnd?: number, sourceStart?: number, sourceEnd?: number): -1 | 0 | 1
......@@ -530,7 +564,7 @@ console.log(buf1.compare(buf2, 0, 6, 4).toString()); // 打印: -1
console.log(buf1.compare(buf2, 5, 6, 5).toString()); // 打印: 1
```
## buffer.copy
### copy
copy(target: Buffer| Uint8Array, targetStart?: number, sourceStart?: number, sourceEnd?: number): number
......@@ -578,7 +612,7 @@ console.log(buf2.toString('ascii', 0, 25));
// 打印: !!!!!!!!qrst!!!!!!!!!!!!!
```
## buffer.entries
### entries
entries(): IterableIterator&lt;[number,&nbsp;number]&gt;
......@@ -604,7 +638,7 @@ for (let pair of buf.entries()) {
}
```
## buffer.equals
### equals
equals(otherBuffer: Uint8Array | Buffer): boolean
......@@ -637,7 +671,7 @@ console.log(buf1.equals(buf2).toString()); // 打印: true
console.log(buf1.equals(buf3).toString()); // 打印: false
```
## buffer.fill
### fill
fill(value: string | Buffer | Uint8Array | number, offset?: number, end?: number, encoding?: BufferEncoding): Buffer
......@@ -678,7 +712,7 @@ console.log(b.toString());
```
## buffer.includes
### includes
includes(value: string | number | Buffer | Uint8Array, byteOffset?: number, encoding?: BufferEncoding): boolean
......@@ -710,7 +744,7 @@ console.log(buf.includes('this').toString()); // 打印: true
console.log(buf.includes('be').toString()); // 打印: false
```
## buffer.indexOf
### indexOf
indexOf(value: string | number | Buffer | Uint8Array, byteOffset?: number, encoding?: BufferEncoding): number
......@@ -742,7 +776,7 @@ console.log(buf.indexOf('this').toString()); // 打印: 0
console.log(buf.indexOf('is').toString()); // 打印: 2
```
## buffer.keys
### keys
keys(): IterableIterator&lt;number&gt;
......@@ -767,7 +801,7 @@ for (const key of buf.keys()) {
}
```
## buffer.lastIndexOf
### lastIndexOf
lastIndexOf(value: string | number | Buffer | Uint8Array, byteOffset?: number, encoding?: BufferEncoding): number
......@@ -800,7 +834,7 @@ console.log(buf.lastIndexOf('buffer').toString()); // 打印: 17
```
## buffer.readBigInt64BE
### readBigInt64BE
readBigInt64BE(offset?: number): bigint
......@@ -841,7 +875,7 @@ let buf1 = buffer.allocUninitializedFromPool(8);
buf1.writeBigInt64BE(0x0102030405060708n, 0);
```
## buffer.readBigInt64LE
### readBigInt64LE
readBigInt64LE(offset?: number): bigint
......@@ -882,7 +916,7 @@ let buf1 = buffer.allocUninitializedFromPool(8);
buf1.writeBigInt64BE(0x0102030405060708n, 0);
```
## buffer.readBigUInt64BE
### readBigUInt64BE
readBigUInt64BE(offset?: number): bigint
......@@ -923,7 +957,7 @@ let buf1 = buffer.allocUninitializedFromPool(8);
buf1.writeBigUInt64BE(0xdecafafecacefaden, 0);
```
## buffer.readBigUInt64LE
### readBigUInt64LE
readBigUInt64LE(offset?: number): bigint
......@@ -964,7 +998,7 @@ let buf1 = buffer.allocUninitializedFromPool(8);
buf1.writeBigUInt64BE(0xdecafafecacefaden, 0);
```
## buffer.readDoubleBE
### readDoubleBE
readDoubleBE(offset?: number): number
......@@ -1004,7 +1038,7 @@ let buf1 = buffer.allocUninitializedFromPool(8);
buf1.writeDoubleBE(123.456, 0);
```
## buffer.readDoubleLE
### readDoubleLE
readDoubleLE(offset?: number): number
......@@ -1044,7 +1078,7 @@ let buf1 = buffer.allocUninitializedFromPool(8);
buf1.writeDoubleLE(123.456, 0);
```
## buffer.readFloatBE
### readFloatBE
readFloatBE(offset?: number): number
......@@ -1084,7 +1118,7 @@ let buf1 = buffer.allocUninitializedFromPool(4);
buf1.writeFloatBE(0xcabcbcbc, 0);
```
## buffer.readFloatLE
### readFloatLE
readFloatLE(offset?: number): number
......@@ -1124,7 +1158,7 @@ let buf1 = buffer.allocUninitializedFromPool(4);
buf1.writeFloatLE(0xcabcbcbc, 0);
```
## buffer.readInt8
### readInt8
readInt8(offset?: number): number
......@@ -1165,7 +1199,7 @@ let buf1 = buffer.allocUninitializedFromPool(2);
buf1.writeInt8(0x12);
```
## buffer.readInt16BE
### readInt16BE
readInt16BE(offset?: number): number
......@@ -1205,7 +1239,7 @@ let buf1 = buffer.alloc(2);
buf1.writeInt16BE(0x1234, 0);
```
## buffer.readInt16LE
### readInt16LE
readInt16LE(offset?: number): number
......@@ -1245,7 +1279,7 @@ let buf1 = buffer.alloc(2);
buf1.writeInt16BE(0x1234, 0);
```
## buffer.readInt32BE
### readInt32BE
readInt32BE(offset?: number): number
......@@ -1285,7 +1319,7 @@ let buf1 = buffer.alloc(4);
buf1.writeInt32BE(0x12345678, 0);
```
## buffer.readInt32LE
### readInt32LE
readInt32LE(offset?: number): number
......@@ -1325,7 +1359,7 @@ let buf1 = buffer.alloc(4);
buf1.writeInt32BE(0x12345678, 0);
```
## buffer.readIntBE
### readIntBE
readIntBE(offset: number, byteLength: number): number
......@@ -1369,7 +1403,7 @@ buf1.writeIntBE(0x123456789011, 0, 6);
```
## buffer.readIntLE
### readIntLE
readIntLE(offset: number, byteLength: number): number
......@@ -1411,7 +1445,7 @@ let buf1 = buffer.allocUninitializedFromPool(6);
buf1.writeIntLE(0x123456789011, 0, 6);
```
## buffer.readUInt8
### readUInt8
readUInt8(offset?: number): number
......@@ -1453,7 +1487,7 @@ let buf1 = buffer.allocUninitializedFromPool(4);
buf1.writeUInt8(0x42);
```
## buffer.readUInt16BE
### readUInt16BE
readUInt16BE(offset?: number): number
......@@ -1495,7 +1529,7 @@ let buf1 = buffer.allocUninitializedFromPool(4);
buf1.writeUInt16BE(0x1234, 0);
```
## buffer.readUInt16LE
### readUInt16LE
readUInt16LE(offset?: number): number
......@@ -1537,7 +1571,7 @@ let buf1 = buffer.allocUninitializedFromPool(4);
buf1.writeUInt16LE(0x1234, 0);
```
## buffer.readUInt32BE
### readUInt32BE
readUInt32BE(offset?: number): number
......@@ -1578,7 +1612,7 @@ let buf1 = buffer.allocUninitializedFromPool(4);
buf1.writeUInt32BE(0x12345678, 0);
```
## buffer.readUInt32LE
### readUInt32LE
readUInt32LE(offset?: number): number
......@@ -1619,7 +1653,7 @@ let buf1 = buffer.allocUninitializedFromPool(4);
buf1.writeUInt32LE(0x12345678, 0);
```
## buffer.readUIntBE
### readUIntBE
readUIntBE(offset: number, byteLength: number): number
......@@ -1661,7 +1695,7 @@ let buf1 = buffer.allocUninitializedFromPool(4);
buf1.writeUIntBE(0x13141516, 0, 4);
```
## buffer.readUIntLE
### readUIntLE
readUIntLE(offset: number, byteLength: number): number
......@@ -1703,7 +1737,7 @@ let buf1 = buffer.allocUninitializedFromPool(4);
buf1.writeUIntLE(0x13141516, 0, 4);
```
## buffer.subarray
### subarray
subarray(start?: number, end?: number): Buffer
......@@ -1739,7 +1773,7 @@ console.log(buf2.toString('ascii', 0, buf2.length));
// 打印: abc
```
## buffer.swap16
### swap16
swap16(): Buffer
......@@ -1774,7 +1808,7 @@ buf1.swap16();
console.log(buf1.toString('hex')); // 打印: 0201040306050807
```
## buffer.swap32
### swap32
swap32(): Buffer
......@@ -1809,7 +1843,7 @@ buf1.swap32();
console.log(buf1.toString('hex')); // 打印: 0403020108070605
```
## buffer.swap64
### swap64
swap64(): Buffer
......@@ -1843,7 +1877,7 @@ buf1.swap64();
console.log(buf1.toString('hex')); // 打印: 0807060504030201
```
## buffer.toJSON
### toJSON
toJSON(): Object
......@@ -1869,7 +1903,7 @@ console.log(JSON.stringify(obj))
// 打印: {"type":"Buffer","data":[1,2,3,4,5]}
```
## buffer.toString
### toString
toString(encoding?: string, start?: number, end?: number): string
......@@ -1904,7 +1938,7 @@ console.log(buf1.toString('utf-8'));
// 打印: abcdefghijklmnopqrstuvwxyz
```
## buffer.values
### values
values(): IterableIterator&lt;number&gt;
......@@ -1929,7 +1963,7 @@ for (let value of buf1.values()) {
}
```
## buffer.write
### write
write(str: string, offset?: number, length?: number, encoding?: string): number
......@@ -1975,7 +2009,7 @@ let buffer1 = buffer.alloc(10);
let length = buffer1.write('abcd', 8);
```
## buffer.writeBigInt64BE
### writeBigInt64BE
writeBigInt64BE(value: bigint, offset?: number): number
......@@ -2014,7 +2048,7 @@ let buf = buffer.allocUninitializedFromPool(8);
buf.writeBigInt64BE(0x0102030405060708n, 0);
```
## buffer.writeBigInt64LE
### writeBigInt64LE
writeBigInt64LE(value: bigint, offset?: number): number
......@@ -2053,7 +2087,7 @@ let buf = buffer.allocUninitializedFromPool(8);
buf.writeBigInt64LE(0x0102030405060708n, 0);
```
## buffer.writeBigUInt64BE
### writeBigUInt64BE
writeBigUInt64BE(value: bigint, offset?: number): number
......@@ -2092,7 +2126,7 @@ let buf = buffer.allocUninitializedFromPool(8);
buf.writeBigUInt64BE(0xdecafafecacefaden, 0);
```
## buffer.writeBigUInt64LE
### writeBigUInt64LE
writeBigUInt64LE(value: bigint, offset?: number): number
......@@ -2131,7 +2165,7 @@ let buf = buffer.allocUninitializedFromPool(8);
buf.writeBigUInt64LE(0xdecafafecacefaden, 0);
```
## buffer.writeDoubleBE
### writeDoubleBE
writeDoubleBE(value: number, offset?: number): number
......@@ -2170,7 +2204,7 @@ let buf = buffer.allocUninitializedFromPool(8);
buf.writeDoubleBE(123.456, 0);
```
## buffer.writeDoubleLE
### writeDoubleLE
writeDoubleLE(value: number, offset?: number): number
......@@ -2209,7 +2243,7 @@ let buf = buffer.allocUninitializedFromPool(8);
buf.writeDoubleLE(123.456, 0);
```
## buffer.writeFloatBE
### writeFloatBE
writeFloatBE(value: number, offset?: number): number
......@@ -2249,7 +2283,7 @@ buf.writeFloatBE(0xcafebabe, 0);
```
## buffer.writeFloatLE
### writeFloatLE
writeFloatLE(value: number, offset?: number): number
......@@ -2288,7 +2322,7 @@ let buf = buffer.allocUninitializedFromPool(8);
buf.writeFloatLE(0xcafebabe, 0);
```
## buffer.writeInt8
### writeInt8
writeInt8(value: number, offset?: number): number
......@@ -2329,7 +2363,7 @@ buf.writeInt8(-2, 1);
```
## buffer.writeInt16BE
### writeInt16BE
writeInt16BE(value: number, offset?: number): number
......@@ -2369,7 +2403,7 @@ buf.writeInt16BE(0x0102, 0);
```
## buffer.writeInt16LE
### writeInt16LE
writeInt16LE(value: number, offset?: number): number
......@@ -2408,7 +2442,7 @@ let buf = buffer.allocUninitializedFromPool(2);
buf.writeInt16LE(0x0304, 0);
```
## buffer.writeInt32BE
### writeInt32BE
writeInt32BE(value: number, offset?: number): number
......@@ -2448,7 +2482,7 @@ buf.writeInt32BE(0x01020304, 0);
```
## buffer.writeInt32LE
### writeInt32LE
writeInt32LE(value: number, offset?: number): number
......@@ -2487,7 +2521,7 @@ let buf = buffer.allocUninitializedFromPool(4);
buf.writeInt32LE(0x05060708, 0);
```
## buffer.writeIntBE
### writeIntBE
writeIntBE(value: number, offset: number, byteLength: number): number
......@@ -2528,7 +2562,7 @@ buf.writeIntBE(0x1234567890ab, 0, 6);
```
## buffer.writeIntLE
### writeIntLE
writeIntLE(value: number, offset: number, byteLength: number): number
......@@ -2568,7 +2602,7 @@ let buf = buffer.allocUninitializedFromPool(6);
buf.writeIntLE(0x1234567890ab, 0, 6);
```
## buffer.writeUInt8
### writeUInt8
writeUInt8(value: number, offset?: number): number
......@@ -2610,7 +2644,7 @@ buf.writeUInt8(0x23, 2);
buf.writeUInt8(0x42, 3);
```
## buffer.writeUInt16BE
### writeUInt16BE
writeUInt16BE(value: number, offset?: number): number
......@@ -2650,7 +2684,7 @@ buf.writeUInt16BE(0xdead, 0);
buf.writeUInt16BE(0xbeef, 2);
```
## buffer.writeUInt16LE
### writeUInt16LE
writeUInt16LE(value: number, offset?: number): number
......@@ -2690,7 +2724,7 @@ buf.writeUInt16LE(0xdead, 0);
buf.writeUInt16LE(0xbeef, 2);
```
## buffer.writeUInt32BE
### writeUInt32BE
writeUInt32BE(value: number, offset?: number): number
......@@ -2729,7 +2763,7 @@ let buf = buffer.allocUninitializedFromPool(4);
buf.writeUInt32BE(0xfeedface, 0);
```
## buffer.writeUInt32LE
### writeUInt32LE
writeUInt32LE(value: number, offset?: number): number
......@@ -2768,7 +2802,7 @@ let buf = buffer.allocUninitializedFromPool(4);
buf.writeUInt32LE(0xfeedface, 0);
```
## buffer.writeUIntBE
### writeUIntBE
writeUIntBE(value: number, offset: number, byteLength: number): number
......@@ -2808,7 +2842,7 @@ let buf = buffer.allocUninitializedFromPool(6);
buf.writeUIntBE(0x1234567890ab, 0, 6);
```
## buffer.writeUIntLE
### writeUIntLE
writeUIntLE(value: number, offset: number, byteLength: number): number
......@@ -2848,38 +2882,6 @@ let buf = buffer.allocUninitializedFromPool(6);
buf.writeUIntLE(0x1234567890ab, 0, 6);
```
## buffer.transcode
transcode(source: Buffer | Uint8Array, fromEnc: string, toEnc: string): Buffer
将给定的Buffer或Uint8Array对象从一种字符编码重新编码为另一种。
**系统能力:** SystemCapability.Utils.Lang
**参数:**
| 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- |
| source | Buffer&nbsp;\|&nbsp;Uint8Array | 是 | 实例对象。 |
| fromEnc | string | 是 | 当前编码。 |
| toEnc | string | 是 | 目标编码。 |
**返回值:**
| 类型 | 说明 |
| -------- | -------- |
| Buffer | 根据当前编码转换成目标编码,并返回一个新的buffer实例。 |
**示例:**
```ts
import buffer from '@ohos.buffer';
let buf = buffer.alloc(50);
let newBuf = buffer.transcode(buffer.from(''), 'utf-8', 'ascii');
console.log(newBuf.toString('ascii'));
```
## Blob
### 属性
......
......@@ -216,11 +216,11 @@ let bundleFlags = bundleManager.BundleFlag.GET_BUNDLE_INFO_DEFAULT;
try {
bundleManager.getBundleInfoForSelf(bundleFlags).then((data) => {
hilog.info(0x0000, 'testTag', 'getBundleInfoForSelf successfully. Data: %{public}s', JSON.stringify(data));
}).catch(error => {
hilog.error(0x0000, 'testTag', 'getBundleInfoForSelf failed. Cause: %{public}s', error.message);
}).catch(err => {
hilog.error(0x0000, 'testTag', 'getBundleInfoForSelf failed. Cause: %{public}s', err.message);
});
} catch (error) {
hilog.error(0x0000, 'testTag', 'getBundleInfoForSelf failed: %{public}s', error.message);
} catch (err) {
hilog.error(0x0000, 'testTag', 'getBundleInfoForSelf failed: %{public}s', err.message);
}
```
......@@ -249,13 +249,13 @@ let bundleFlags = bundleManager.BundleFlag.GET_BUNDLE_INFO_DEFAULT;
try {
bundleManager.getBundleInfoForSelf(bundleFlags, (err, data) => {
if (err) {
hilog.error(0x0000, 'testTag', 'getBundleInfoForSelf failed: %{public}s', error.message);
hilog.error(0x0000, 'testTag', 'getBundleInfoForSelf failed: %{public}s', err.message);
} else {
hilog.info(0x0000, 'testTag', 'getBundleInfoForSelf successfully: %{public}s', JSON.stringify(data));
}
});
} catch (err) {
hilog.error(0x0000, 'testTag', 'getBundleInfoForSelf failed: %{public}s', error.message);
hilog.error(0x0000, 'testTag', 'getBundleInfoForSelf failed: %{public}s', err.message);
}
```
......@@ -441,10 +441,10 @@ let userId = 100;
try {
bundleManager.getBundleInfo(bundleName, bundleFlags, userId).then((data) => {
hilog.info(0x0000, 'testTag', 'getBundleInfo successfully. Data: %{public}s', + JSON.stringify(data));
}).catch(error => {
}).catch(err => {
hilog.error(0x0000, 'testTag', 'getBundleInfo failed. Cause: %{public}s' + err.message);
});
} catch (error) {
} catch (err) {
hilog.error(0x0000, 'testTag', 'getBundleInfo failed. Cause: %{public}s' + err.message);
}
```
......@@ -458,10 +458,10 @@ let bundleFlags = bundleManager.BundleFlag.GET_BUNDLE_INFO_DEFAULT;
try {
bundleManager.getBundleInfo(bundleName, bundleFlags).then((data) => {
hilog.info(0x0000, 'testTag', 'getBundleInfo successfully. Data: %{public}s', + JSON.stringify(data));
}).catch(error => {
}).catch(err => {
hilog.error(0x0000, 'testTag', 'getBundleInfo failed. Cause: %{public}s' + err.message);
});
} catch (error) {
} catch (err) {
hilog.error(0x0000, 'testTag', 'getBundleInfo failed. Cause: %{public}s' + err.message);
}
......@@ -625,10 +625,10 @@ let userId = 100;
try {
bundleManager.getApplicationInfo(bundleName, appFlags, userId).then((data) => {
hilog.info(0x0000, 'testTag', 'getApplicationInfo successfully. Data: %{public}s', + JSON.stringify(data));
}).catch(error => {
}).catch(err => {
hilog.error(0x0000, 'testTag', 'getApplicationInfo failed. Cause: %{public}s' + err.message);
});
} catch (error) {
} catch (err) {
hilog.error(0x0000, 'testTag', 'getApplicationInfo failed. Cause: %{public}s' + err.message);
}
```
......@@ -772,10 +772,10 @@ let bundleFlags = bundleManager.BundleFlag.GET_BUNDLE_INFO_DEFAULT;
try {
bundleManager.getAllBundleInfo(bundleFlags).then((data) => {
hilog.info(0x0000, 'testTag', 'getAllBundleInfo successfully. Data: %{public}s', + JSON.stringify(data));
}).catch(error => {
}).catch(err => {
hilog.error(0x0000, 'testTag', 'getAllBundleInfo failed. Cause: %{public}s' + err.message);
});
} catch (error) {
} catch (err) {
hilog.error(0x0000, 'testTag', 'getAllBundleInfo failed. Cause: %{public}s' + err.message);
}
```
......@@ -919,10 +919,10 @@ let appFlags = bundleManager.ApplicationFlag.GET_APPLICATION_INFO_DEFAULT;
try {
bundleManager.getAllApplicationInfo(appFlags).then((data) => {
hilog.info(0x0000, 'testTag', 'getAllApplicationInfo successfully. Data: %{public}s', + JSON.stringify(data));
}).catch(error => {
}).catch(err => {
hilog.error(0x0000, 'testTag', 'getAllApplicationInfo failed. Cause: %{public}s' + err.message);
});
} catch (error) {
} catch (err) {
hilog.error(0x0000, 'testTag', 'getAllApplicationInfo failed. Cause: %{public}s' + err.message);
}
......@@ -1095,10 +1095,10 @@ let want = {
try {
bundleManager.queryAbilityInfo(want, abilityFlags, userId).then((data) => {
hilog.info(0x0000, 'testTag', 'queryAbilityInfo successfully. Data: %{public}s', + JSON.stringify(data));
}).catch(error => {
}).catch(err => {
hilog.error(0x0000, 'testTag', 'queryAbilityInfo failed. Cause: %{public}s' + err.message);
});
} catch (error) {
} catch (err) {
hilog.error(0x0000, 'testTag', 'queryAbilityInfo failed. Cause: %{public}s' + err.message);
}
```
......@@ -1115,10 +1115,10 @@ let want = {
try {
bundleManager.queryAbilityInfo(want, abilityFlags).then((data) => {
hilog.info(0x0000, 'testTag', 'queryAbilityInfo successfully. Data: %{public}s', + JSON.stringify(data));
}).catch(error => {
}).catch(err => {
hilog.error(0x0000, 'testTag', 'queryAbilityInfo failed. Cause: %{public}s' + err.message);
})
} catch (error) {
} catch (err) {
hilog.error(0x0000, 'testTag', 'queryAbilityInfo failed. Cause: %{public}s' + err.message);
}
```
......@@ -1294,10 +1294,10 @@ let want = {
try {
bundleManager.queryExtensionAbilityInfo(want, extensionAbilityType, extensionFlags, userId).then((data) => {
hilog.info(0x0000, 'testTag', 'queryExtensionAbilityInfo successfully. Data: %{public}s', + JSON.stringify(data));
}).catch(error => {
}).catch(err => {
hilog.error(0x0000, 'testTag', 'queryExtensionAbilityInfo failed. Cause: %{public}s' + err.message);
});
} catch (error) {
} catch (err) {
hilog.error(0x0000, 'testTag', 'queryExtensionAbilityInfo failed. Cause: %{public}s' + err.message);
}
```
......@@ -1315,10 +1315,10 @@ let want = {
try {
bundleManager.queryExtensionAbilityInfo(want, extensionAbilityType, extensionFlags).then((data) => {
hilog.info(0x0000, 'testTag', 'queryExtensionAbilityInfo successfully. Data: %{public}s', + JSON.stringify(data));
}).catch(error => {
}).catch(err => {
hilog.error(0x0000, 'testTag', 'queryExtensionAbilityInfo failed. Cause: %{public}s' + err.message);
})
} catch (error) {
} catch (err) {
hilog.error(0x0000, 'testTag', 'queryExtensionAbilityInfo failed. Cause: %{public}s' + err.message);
}
```
......@@ -1410,10 +1410,10 @@ let uid = 20010005;
try {
bundleManager.getBundleNameByUid(uid).then((data) => {
hilog.info(0x0000, 'testTag', 'getBundleNameByUid successfully. Data: %{public}s', + JSON.stringify(data));
}).catch(error => {
}).catch(err => {
hilog.error(0x0000, 'testTag', 'getBundleNameByUid failed. Cause: %{public}s' + err.message);
});
} catch (error) {
} catch (err) {
hilog.error(0x0000, 'testTag', 'getBundleNameByUid failed. Cause: %{public}s' + err.message);
}
```
......@@ -1511,10 +1511,10 @@ let bundleFlags = bundleManager.BundleFlag.GET_BUNDLE_INFO_DEFAULT;
try {
bundleManager.getBundleArchiveInfo(hapFilePath, bundleFlags).then((data) => {
hilog.info(0x0000, 'testTag', 'getBundleArchiveInfo successfully. Data: %{public}s', + JSON.stringify(data));
}).catch(error => {
}).catch(err => {
hilog.error(0x0000, 'testTag', 'getBundleArchiveInfo failed. Cause: %{public}s' + err.message);
});
} catch (error) {
} catch (err) {
hilog.error(0x0000, 'testTag', 'getBundleArchiveInfo failed. Cause: %{public}s' + err.message);
}
```
......@@ -1771,10 +1771,10 @@ try {
hilog.info(0x0001, "testTag", "setAbilityEnabled successfully.");
}
});
}).catch(error => {
}).catch(err => {
hilog.error(0x0000, 'testTag', 'queryAbilityInfo failed. Cause: %{public}s' + err.message);
});
} catch (error) {
} catch (err) {
hilog.error(0x0000, 'testTag', 'queryAbilityInfo failed. Cause: %{public}s' + err.message);
}
```
......@@ -1836,10 +1836,10 @@ try {
}).catch(err => {
hilog.error(0x0000, 'testTag', 'setAbilityEnabled failed: %{public}s' + err.message);
});
}).catch(error => {
}).catch(err => {
hilog.error(0x0000, 'testTag', 'queryAbilityInfo failed. Cause: %{public}s' + err.message);
});
} catch (error) {
} catch (err) {
hilog.error(0x0000, 'testTag', 'queryAbilityInfo failed. Cause: %{public}s' + err.message);
}
```
......@@ -1929,10 +1929,10 @@ let bundleName = 'com.example.myapplication';
try {
bundleManager.isApplicationEnabled(bundleName).then((data) => {
hilog.info(0x0000, 'testTag', 'isApplicationEnabled successfully. Data: %{public}s', + JSON.stringify(data));
}).catch(error => {
}).catch(err => {
hilog.error(0x0000, 'testTag', 'isApplicationEnabled failed. Cause: %{public}s' + err.message);
});
} catch (error) {
} catch (err) {
hilog.error(0x0000, 'testTag', 'isApplicationEnabled failed. Cause: %{public}s' + err.message);
}
```
......@@ -1988,10 +1988,10 @@ try {
hilog.info(0x0000, 'testTag', 'isAbilityEnabled successfully: %{public}s', + JSON.stringify(data));
}
});
}).catch(error => {
}).catch(err => {
hilog.error(0x0000, 'testTag', 'queryAbilityInfo failed. Cause: %{public}s' + err.message);
});
} catch (error) {
} catch (err) {
hilog.error(0x0000, 'testTag', 'queryAbilityInfo failed. Cause: %{public}s' + err.message);
}
```
......@@ -2050,10 +2050,10 @@ try {
}).catch(err => {
hilog.error(0x0000, 'testTag', 'isAbilityEnabled failed. Cause: %{public}s' + err.message);
});
}).catch(error => {
}).catch(err => {
hilog.error(0x0000, 'testTag', 'queryAbilityInfo failed. Cause: %{public}s' + err.message);
});
} catch (error) {
} catch (err) {
hilog.error(0x0000, 'testTag', 'queryAbilityInfo failed. Cause: %{public}s' + err.message);
}
```
......@@ -2204,10 +2204,10 @@ let userId = 100;
try {
bundleManager.getLaunchWantForBundle(bundleName, userId).then((data) => {
hilog.info(0x0000, 'testTag', 'getLaunchWantForBundle successfully. Data: %{public}s', + JSON.stringify(data));
}).catch(error => {
}).catch(err => {
hilog.error(0x0000, 'testTag', 'getLaunchWantForBundle failed. Cause: %{public}s' + err.message);
});
} catch (error) {
} catch (err) {
hilog.error(0x0000, 'testTag', 'getLaunchWantForBundle failed. Cause: %{public}s' + err.message);
}
```
......@@ -2308,10 +2308,10 @@ let abilityName = 'MainAbility';
try {
bundleManager.getProfileByAbility(moduleName, abilityName).then((data) => {
hilog.info(0x0000, 'testTag', 'getProfileByAbility successfully. Data: %{public}s', + JSON.stringify(data));
}).catch(error => {
}).catch(err => {
hilog.error(0x0000, 'testTag', 'getProfileByAbility failed. Cause: %{public}s' + err.message);
});
} catch (error) {
} catch (err) {
hilog.error(0x0000, 'testTag', 'getProfileByAbility failed. Cause: %{public}s' + err.message);
}
```
......@@ -2325,10 +2325,10 @@ let metadataName = 'com.example.myapplication.metadata';
try {
bundleManager.getProfileByAbility(moduleName, abilityName, metadataName).then((data) => {
hilog.info(0x0000, 'testTag', 'getProfileByAbility successfully. Data: %{public}s', + JSON.stringify(data));
}).catch(error => {
}).catch(err => {
hilog.error(0x0000, 'testTag', 'getProfileByAbility failed. Cause: %{public}s' + err.message);
});
} catch (error) {
} catch (err) {
hilog.error(0x0000, 'testTag', 'getProfileByAbility failed. Cause: %{public}s' + err.message);
}
```
......@@ -2428,20 +2428,20 @@ let metadataName = 'com.example.myapplication.metadata';
try {
bundleManager.getProfileByExtensionAbility(moduleName, extensionAbilityName).then((data) => {
hilog.info(0x0000, 'testTag', 'getProfileByExtensionAbility successfully. Data: %{public}s', + JSON.stringify(data));
}).catch(error => {
}).catch(err => {
hilog.error(0x0000, 'testTag', 'getProfileByExtensionAbility failed. Cause: %{public}s' + err.message);
});
} catch (error) {
} catch (err) {
hilog.error(0x0000, 'testTag', 'getProfileByExtensionAbility failed. Cause: %{public}s' + err.message);
}
try {
bundleManager.getProfileByExtensionAbility(moduleName, extensionAbilityName, metadataName).then((data) => {
hilog.info(0x0000, 'testTag', 'getProfileByExtensionAbility successfully. Data: %{public}s', + JSON.stringify(data));
}).catch(error => {
}).catch(err => {
hilog.error(0x0000, 'testTag', 'getProfileByExtensionAbility failed. Cause: %{public}s' + err.message);
});
} catch (error) {
} catch (err) {
hilog.error(0x0000, 'testTag', 'getProfileByExtensionAbility failed. Cause: %{public}s' + err.message);
}
```
......@@ -2533,10 +2533,10 @@ let permissionName = "ohos.permission.GET_BUNDLE_INFO";
try {
bundleManager.getPermissionDef(permissionName).then((data) => {
hilog.info(0x0000, 'testTag', 'getPermissionDef successfully. Data: %{public}s', + JSON.stringify(data));
}).catch(error => {
}).catch(err => {
hilog.error(0x0000, 'testTag', 'getPermissionDef failed. Cause: %{public}s' + err.message);
});
} catch (error) {
} catch (err) {
hilog.error(0x0000, 'testTag', 'getPermissionDef failed. Cause: %{public}s' + err.message);
}
```
......@@ -2646,10 +2646,10 @@ let abilityName = 'MainAbility';
try {
bundleManager.getAbilityLabel(bundleName, moduleName, abilityName).then((data) => {
hilog.info(0x0000, 'testTag', 'getAbilityLabel successfully. Data: %{public}s', + JSON.stringify(data));
}).catch(error => {
}).catch(err => {
hilog.error(0x0000, 'testTag', 'getAbilityLabel failed. Cause: %{public}s' + err.message);
});
} catch (error) {
} catch (err) {
hilog.error(0x0000, 'testTag', 'getAbilityLabel failed. Cause: %{public}s' + err.message);
}
```
......@@ -2759,10 +2759,10 @@ let abilityName = 'MainAbility';
try {
bundleManager.getAbilityIcon(bundleName, moduleName, abilityName).then((data) => {
hilog.info(0x0000, 'testTag', 'getAbilityIcon successfully. Data: %{public}s', + JSON.stringify(data));
}).catch(error => {
}).catch(err => {
hilog.error(0x0000, 'testTag', 'getAbilityIcon failed. Cause: %{public}s' + err.message);
});
} catch (error) {
} catch (err) {
hilog.error(0x0000, 'testTag', 'getAbilityIcon failed. Cause: %{public}s' + err.message);
}
```
......
......@@ -5,7 +5,9 @@
LightWeightMap可用于存储具有关联关系的key-value键值对集合,存储元素中key值唯一,每个key对应一个value。
LightWeightMap依据泛型定义,采用轻量级结构,集合中key值的查找依赖于hash算法,通过一个数组存储hash值,然后映射到其他数组中的key值及value值。
LightWeightMap依据泛型定义,采用轻量级结构,初始默认容量大小为8,每次扩容大小为原始容量的两倍。
集合中key值的查找依赖于hash算法,通过一个数组存储hash值,然后映射到其他数组中的key值及value值。
LightWeightMap和[HashMap](js-apis-hashmap.md)都是用来存储键值对的集合,LightWeightMap占用内存更小。
......@@ -158,10 +160,8 @@ hasKey(key: K): boolean;
```ts
let lightWeightMap = new LightWeightMap();
let result = lightWeightMap.hasKey;
lightWeightMap.hasKey("squirrel");
lightWeightMap.set("squirrel", 123);
let result1 = lightWeightMap.hasKey("squirrel");
let result = lightWeightMap.hasKey("squirrel");
```
......@@ -415,7 +415,7 @@ let lightWeightMap = new LightWeightMap();
lightWeightMap.set("squirrel", 123);
lightWeightMap.set("sparrow", 356);
let map = new LightWeightMap();
lightWeightMap.setAll(map);
map.setAll(lightWeightMap); // 将lightWeightMap中所有的元素添加到map中
```
......@@ -817,7 +817,7 @@ toString(): String
let lightWeightMap = new LightWeightMap();
lightWeightMap.set("squirrel", 123);
lightWeightMap.set("sparrow", 356);
let iter = lightWeightMap.toString();
let result = lightWeightMap.toString();
```
### [Symbol.iterator]
......
......@@ -32,7 +32,7 @@ pushUrl(options: RouterOptions): Promise&lt;void&gt;
| 类型 | 说明 |
| ------------------- | --------- |
| Promise&lt;void&gt; | 异常返回结果 |
| Promise&lt;void&gt; | 异常返回结果 |
**错误码:**
......@@ -81,7 +81,7 @@ pushUrl(options: RouterOptions, callback: AsyncCallback&lt;void&gt;): void
| 参数名 | 类型 | 必填 | 说明 |
| ------- | ------------------------------- | ---- | --------- |
| options | [RouterOptions](#routeroptions) | 是 | 跳转页面描述信息。 |
| callback | AsyncCallback&lt;void&gt; | 是 | 异常响应回调 |
| callback | AsyncCallback&lt;void&gt; | 是 | 异常响应回调 |
**错误码:**
......@@ -185,7 +185,7 @@ pushUrl(options: RouterOptions, mode: RouterMode, callback: AsyncCallback&lt;voi
| ------- | ------------------------------- | ---- | ---------- |
| options | [RouterOptions](#routeroptions) | 是 | 跳转页面描述信息。 |
| mode | [RouterMode](#routermode9) | 是 | 跳转页面使用的模式。 |
| callback | AsyncCallback&lt;void&gt; | 是 | 异常响应回调 |
| callback | AsyncCallback&lt;void&gt; | 是 | 异常响应回调 |
**错误码:**
......@@ -239,7 +239,7 @@ replaceUrl(options: RouterOptions): Promise&lt;void&gt;
| 类型 | 说明 |
| ------------------- | --------- |
| Promise&lt;void&gt; | 异常返回结果 |
| Promise&lt;void&gt; | 异常返回结果 |
**错误码:**
......@@ -284,7 +284,7 @@ replaceUrl(options: RouterOptions, callback: AsyncCallback&lt;void&gt;): void
| 参数名 | 类型 | 必填 | 说明 |
| ------- | ------------------------------- | ---- | ------------------ |
| options | [RouterOptions](#routeroptions) | 是 | 替换页面描述信息。 |
| callback | AsyncCallback&lt;void&gt; | 是 | 异常响应回调 |
| callback | AsyncCallback&lt;void&gt; | 是 | 异常响应回调 |
**错误码:**
......@@ -336,7 +336,7 @@ replaceUrl(options: RouterOptions, mode: RouterMode): Promise&lt;void&gt;
| 类型 | 说明 |
| ------------------- | --------- |
| Promise&lt;void&gt; | 异常返回结果 |
| Promise&lt;void&gt; | 异常返回结果 |
**错误码:**
......@@ -382,7 +382,7 @@ replaceUrl(options: RouterOptions, mode: RouterMode, callback: AsyncCallback&lt;
| ------- | ------------------------------- | ---- | ---------- |
| options | [RouterOptions](#routeroptions) | 是 | 替换页面描述信息。 |
| mode | [RouterMode](#routermode9) | 是 | 跳转页面使用的模式。 |
| callback | AsyncCallback&lt;void&gt; | 是 | 异常响应回调 |
| callback | AsyncCallback&lt;void&gt; | 是 | 异常响应回调 |
**错误码:**
......@@ -636,7 +636,7 @@ export default {
### 基于TS扩展的声明式开发范式
```ts
//通过router.push跳转至目标页携带params参数
// 通过router.push跳转至目标页携带params参数
import router from '@ohos.router'
@Entry
......@@ -682,7 +682,7 @@ struct Index {
```
```ts
//在second页面中接收传递过来的参数
// 在second页面中接收传递过来的参数
import router from '@ohos.router'
@Entry
......@@ -804,7 +804,7 @@ router.replace({
});
```
## router.replace<sup>(deprecated)</sup>
## router.replace<sup>(deprecated)</sup>
replace(options: RouterOptions, mode: RouterMode): void
......
......@@ -281,7 +281,7 @@ setAll(map: TreeMap<K, V>): void
| 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | -------- | -------- |
| map | TreeMap<K, V> | 是 | 被添加元素的treeMap。 |
| map | TreeMap<K, V> | 是 | 该map会添加到其调用setAll接口的map对象中。 |
**错误码:**
......@@ -298,7 +298,11 @@ let treeMap = new TreeMap();
treeMap.set("squirrel", 123);
treeMap.set("sparrow", 356);
let map = new TreeMap();
treeMap.setAll(map);
map.set("demo", 12);
map.setAll(treeMap); // 将treeMap中的所有元素添加到map中
map.forEach((value, key) => {
console.log("test" + value, key); // 打印结果 12 demo、356 sparrow、123 squirrel
})
```
......
......@@ -277,7 +277,7 @@ start : () => void
| -------- | ------- |
| 201 | Permission verification failed. |
| 401 | Incorrect parameters. |
| 12500001 | Execution failed. |
| 12500001 | Authentication failed. |
| 12500002 | General operation error. |
| 12500003 | The operation is canceled. |
| 12500004 | The operation is time-out. |
......@@ -489,7 +489,7 @@ try {
| 名称 | 值 | 说明 |
| ----------------------- | ------ | -------------------- |
| SUCCESS | 12500000 | 执行成功。 |
| FAIL | 12500001 | 执行失败。 |
| FAIL | 12500001 | 认证失败。 |
| GENERAL_ERROR | 12500002 | 操作通用错误。 |
| CANCELED | 12500003 | 操作取消。 |
| TIMEOUT | 12500004 | 操作超时。 |
......@@ -802,7 +802,7 @@ auth.auth(null, userIAM_userAuth.UserAuthType.FACE, userIAM_userAuth.AuthTrustLe
| 名称 | 值 | 说明 |
| ----------------------- | ------ | -------------------- |
| SUCCESS | 0 | 执行成功。 |
| FAIL | 1 | 执行失败。 |
| FAIL | 1 | 认证失败。 |
| GENERAL_ERROR | 2 | 操作通用错误。 |
| CANCELED | 3 | 操作取消。 |
| TIMEOUT | 4 | 操作超时。 |
......
......@@ -101,7 +101,7 @@ struct WebComponent {
### postMessageEvent
postMessageEvent(message: string): void
postMessageEvent(message: WebMessage): void
发送消息。完整示例代码参考[postMessage](#postmessage)
......@@ -111,7 +111,7 @@ postMessageEvent(message: string): void
| 参数名 | 类型 | 必填 | 说明 |
| ------- | ------ | ---- | :------------- |
| message | string | 是 | 要发送的消息。 |
| message | [WebMessage](#webmessage) | 是 | 要发送的消息。 |
**错误码:**
......@@ -153,7 +153,7 @@ struct WebComponent {
### onMessageEvent
onMessageEvent(callback: (result: string) => void): void
onMessageEvent(callback: (result: WebMessage) => void): void
注册回调函数,接收HTML5侧发送过来的消息。完整示例代码参考[postMessage](#postmessage)
......@@ -163,7 +163,7 @@ onMessageEvent(callback: (result: string) => void): void
| 参数名 | 类型 | 必填 | 说明 |
| -------- | -------- | ---- | :------------------- |
| result | string | 是 | 接收到的消息。 |
| result | [WebMessage](#webmessage) | 是 | 接收到的消息。 |
**错误码:**
......@@ -192,7 +192,17 @@ struct WebComponent {
try {
this.ports = this.controller.createWebMessagePorts();
this.ports[1].onMessageEvent((msg) => {
console.log("received message from html5, on message:" + msg);
if (typeof(msg) == "string") {
console.log("received string message from html5, string is:" + msg);
} else if (typeof(msg) == "object") {
if (msg instanceof ArrayBuffer) {
console.log("received arraybuffer from html5, length is:" + msg.byteLength);
} else {
console.log("not support");
}
} else {
console.log("not support");
}
})
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
......@@ -1464,8 +1474,21 @@ struct WebComponent {
// 2、将其中一个消息端口发送到HTML侧,由HTML侧保存并使用。
this.controller.postMessage('__init_port__', [this.ports[0]], '*');
// 3、另一个消息端口在应用侧注册回调事件。
this.ports[1].onMessageEvent((result: string) => {
var msg = 'Got msg from HTML: ' + result;
this.ports[1].onMessageEvent((result: WebMessage) => {
var 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");
}
} else {
console.log("not support");
}
this.receivedFromHtml = msg;
})
} catch (error) {
......@@ -1523,7 +1546,21 @@ window.addEventListener('message', function (event) {
h5Port = event.ports[0]; // 1. 保存从ets侧发送过来的端口
h5Port.onmessage = function (event) {
// 2. 接收ets侧发送过来的消息.
var msg = 'Got message from ets:' + event.data;
var msg = 'Got message from ets:';
var result = event.data;
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");
}
} else {
console.log("not support");
}
output.innerHTML = msg;
}
}
......@@ -4428,6 +4465,15 @@ Web组件返回的请求/响应头对象。
| type | [HitTestTypeV9](#hittesttypev9) | 是 | 否 | 当前被点击区域的元素类型。|
| extra | string | 是 | 否 |点击区域的附加参数信息。若被点击区域为图片或链接,则附加参数信息为其url地址。 |
## WebMessage
用于描述[WebMessagePort](#webmessageport)所支持的数据类型。
| 类型 | 说明 |
| -------- | -------------------------------------- |
| string | 字符串类型数据。 |
| ArrayBuffer | 二进制类型数据。 |
## WebStorageOrigin
提供Web SQL数据库的使用信息。
......
......@@ -48,6 +48,7 @@ Image(src: string | PixelMap | Resource)
| syncLoad<sup>8+</sup> | boolean | 设置是否同步加载图片,默认是异步加载。同步加载时阻塞UI线程,不会显示占位图。<br/>默认值:false |
| copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 设置图片是否可复制(SVG图片不支持复制)。<br/>当copyOption设置为非CopyOptions.None时,支持使用长按、鼠标右击、快捷组合键'CTRL+C'等方式进行复制。<br/>默认值:CopyOptions.None |
| colorFilter<sup>9+</sup> | [ColorFilter](ts-types.md#colorfilter9) | 给图像设置颜色滤镜效果。 |
| draggable<sup>9+</sup> | boolean | 设置默认拖拽效果。(不能和[onDragStart](ts-universal-events-drag-drop.md)事件同时使用。)<br/>默认值:false |
> **说明:**
>
......
......@@ -27,7 +27,7 @@ loadAnimation(
path: string, container: object, render: string, loop: boolean, autoplay: boolean, name: string ): AnimationItem
加载动画,须提前声明Animator('__lottie_ets')对象,并在Canvas完成布局后调用。可配合Canvas组件生命周期接口使用,比如onAppear()与onPageShow()
加载动画,须提前声明Animator('__lottie_ets')对象,并在Canvas完成布局后调用。可配合Canvas组件生命周期接口onReady()使用
**参数:**
......
......@@ -17,7 +17,7 @@
| position | [Position](ts-types.md#position8) | 绝对定位,设置元素左上角相对于父容器左上角偏移位置。在布局容器中,设置该属性不影响父容器布局,仅在绘制时进行位置调整。 |
| markAnchor | [Position](ts-types.md#position8) | 设置元素在位置定位时的锚点,以元素左上角作为基准点进行偏移。通常配合position和offset属性使用,单独使用时,效果类似offset<br/>默认值:<br/>{<br/>x: 0,<br/>y: 0<br/>} |
| offset | [Position](ts-types.md#position8) | 相对定位,设置元素相对于自身的偏移量。设置该属性,不影响父容器布局,仅在绘制时进行位置调整。<br/>默认值:<br/>{<br/>x: 0,<br/>y: 0<br/>} |
| alignRules<sup>9+</sup> | {<br/>left?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };<br/>right?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };<br/>middle?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };<br/>top?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) };<br/>bottom?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) };<br/>center?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) }<br/>} | 指定相对容器的对齐规则。<br/>-&nbsp;left:设置左对齐参数。<br/>-&nbsp;right:设置右对齐参数。<br/>-&nbsp;middle:设置中间对齐的参数。<br/>-&nbsp;top:设置顶部对齐的参数。<br/>-&nbsp;bottom:设置底部对齐的参数。<br/>-&nbsp;center:设置中心对齐的参数。<br/>**说明:**<br/>-&nbsp;anchor:设置作为锚点的组件的id值。<br>-&nbsp;align:设置相对于锚点组件的对齐方式。 |
| alignRules<sup>9+</sup> | {<br/>left?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };<br/>right?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };<br/>middle?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };<br/>top?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) };<br/>bottom?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) };<br/>center?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) }<br/>} | 指定相对容器的对齐规则,仅当父容器为[RelativeContainer](ts-container-relativecontainer.md)时生效<br/>-&nbsp;left:设置左对齐参数。<br/>-&nbsp;right:设置右对齐参数。<br/>-&nbsp;middle:设置中间对齐的参数。<br/>-&nbsp;top:设置顶部对齐的参数。<br/>-&nbsp;bottom:设置底部对齐的参数。<br/>-&nbsp;center:设置中心对齐的参数。<br/>**说明:**<br/>-&nbsp;anchor:设置作为锚点的组件的id值。<br>-&nbsp;align:设置相对于锚点组件的对齐方式。 |
## 示例
......
......@@ -12,7 +12,7 @@
具体参见[通用错误码](./errorcode-universal.md)
## 12500001 执行认证失败
## 12500001 认证失败
**错误信息**
......@@ -20,11 +20,11 @@ Authentication failed.
**可能原因**
出现该错误码一般是系统内部错误,例如内存申请失败、内存拷贝出错等
当前凭据与设备里已经录入的凭据比对失败
**处理步骤**
启设备,重新调用接口
新发起认证
## 12500002 一般的操作错误
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册