提交 b4e804fe 编写于 作者: 廖康康 提交者: Gitee

Merge branch 'OpenHarmony-3.1-Release' of gitee.com:openharmony/docs into OpenHarmony-3.1-Release

Signed-off-by: N廖康康 <liaokangkang@huawei.com>
......@@ -222,7 +222,7 @@ zh-cn/application-dev/reference/apis/js-apis-data-preferences.md @ge-yafang
zh-cn/application-dev/reference/apis/js-apis-data-storage.md @ge-yafang
zh-cn/application-dev/reference/apis/js-apis-system-storage.md @ge-yafang
zh-cn/application-dev/reference/apis/js-apis-data-rdb.md @ge-yafang
zh-cn/application-dev/reference/apis/js-apis-settings.md @sun-yue14
zh-cn/application-dev/reference/apis/js-apis-settings.md @ge-yafang
zh-cn/application-dev/reference/apis/js-apis-data-resultset.md @ge-yafang
zh-cn/application-dev/reference/apis/js-apis-document.md @qinxiaowang
zh-cn/application-dev/reference/apis/js-apis-environment.md @qinxiaowang
......@@ -258,7 +258,7 @@ zh-cn/application-dev/reference/apis/js-apis-hitracechain.md @zengyawen
zh-cn/application-dev/reference/apis/js-apis-hitracemeter.md @zengyawen
zh-cn/application-dev/reference/apis/js-apis-inputmethod.md @sun-yue14
zh-cn/application-dev/reference/apis/js-apis-inputmethodengine.md @sun-yue14
zh-cn/application-dev/reference/apis/js-apis-pasteboard.md @sun-yue14
zh-cn/application-dev/reference/apis/js-apis-pasteboard.md @ge-yafang
zh-cn/application-dev/reference/apis/js-apis-screen-lock.md @sun-yue14
zh-cn/application-dev/reference/apis/js-apis-system-time.md @sun-yue14
zh-cn/application-dev/reference/apis/js-apis-wallpaper.md @sun-yue14
......
......@@ -15,7 +15,6 @@
- Development Fundamentals
- [Application Package Structure Configuration File (FA Model)](quick-start/package-structure.md)
- [Application Package Structure Configuration File (Stage Model)](quick-start/stage-structure.md)
- [Resource File Categories](quick-start/basic-resource-file-categories.md)
- [SysCap](quick-start/syscap.md)
- Development
- [Ability Development](ability/Readme-EN.md)
......@@ -33,20 +32,16 @@
- [Device Usage Statistics](device-usage-statistics/Readme-EN.md)
- [DFX](dfx/Readme-EN.md)
- [Internationalization](internationalization/Readme-EN.md)
- [Native APIs](napi/Readme-EN.md)
- [Using Native APIs in Application Projects](napi/Readme-EN.md)
- Tools
- [DevEco Studio (OpenHarmony) User Guide](quick-start/deveco-studio-user-guide-for-openharmony.md)
- Hands-On Tutorials
- [Samples](https://gitee.com/openharmony/app_samples/blob/master/README.md)
- [Codelabs](https://gitee.com/openharmony/codelabs/blob/master)
- [Codelabs](https://gitee.com/openharmony/codelabs)
- API References
- [Component Reference (JavaScript-based Web-like Development Paradigm)](reference/arkui-js/Readme-EN.md)
- [Component Reference (TypeScript-based Declarative Development Paradigm)](reference/arkui-ts/Readme-EN.md)
- [Component Reference (JavaScript-based Web-like Development Paradigm)](reference/arkui-js/Readme-EN.md)
- APIs
- [JS and TS APIs](reference/apis/Readme-EN.md)
- Native APIs
- [Standard Libraries](reference/native-lib/third_party_libc/musl.md)
- [Node_API](reference/native-lib/third_party_napi/napi.md)
- Contribution
- [How to Contribute](../contribute/documentation-contribution.md)
# Data Ability Development
## When to Use
A Data ability helps applications manage access to data stored by themselves and other applications. It also provides APIs for sharing data with other applications either on the same device or across devices.
Data ability providers can customize data access-related APIs such as data inserting, deleting, updating, and querying, as well as file opening, and share data with other applications through these open APIs.
## Available APIs
**Table 1** Data ability lifecycle APIs
......@@ -18,7 +21,7 @@ Data ability providers can customize data access-related APIs such as data inser
|denormalizeUri?(uri: string, callback: AsyncCallback\<string>): void|Converts a normalized URI generated by **normalizeUri** into a denormalized URI.|
|insert?(uri: string, valueBucket: rdb.ValuesBucket, callback: AsyncCallback\<number>): void|Inserts a data record into the database.|
|openFile?(uri: string, mode: string, callback: AsyncCallback\<number>): void|Opens a file.|
|getFileTypes?(uri: string, mimeTypeFilter: string, callback: AsyncCallback\<Array\<string>>): void|Obtains the MIME type of a file.|
|getFileTypes?(uri: string, mimeTypeFilter: string, callback: AsyncCallback<Array\<string>>): void|Obtains the MIME type of a file.|
|getType?(uri: string, callback: AsyncCallback\<string>): void|Obtains the MIME type matching the data specified by the URI.|
|executeBatch?(ops: Array\<DataAbilityOperation>, callback: AsyncCallback\<Array\<DataAbilityResult>>): void|Operates data in the database in batches.|
|call?(method: string, arg: string, extras: PacMap, callback: AsyncCallback\<PacMap>): void|Calls a custom API.|
......@@ -115,7 +118,7 @@ Import the basic dependency packages and obtain the URI string for communicating
The basic dependency packages include:
- @ohos.ability.featureAbility
- @ohos.data.dataability
- @ohos.data.dataAbility
- @ohos.data.rdb
#### Data Ability API Development
......
# Ability Development
## When to Use
Unlike the FA model, the [stage model](stage-brief.md) requires you to declare the application package structure in the `module.json` and `app.json` files during application development. For details about the configuration file, see [Application Package Structure Configuration File](../quick-start/stage-structure.md). To develop abilities based on the stage model, implement the following logic:
- Create abilities for an application that involves screen viewing and human-machine interaction. You must implement the following scenarios: ability lifecycle callbacks, obtaining ability configuration, requesting permissions, and notifying environment changes.
Ability development in the [stage model](stage-brief.md) is significantly different from that in the FA model. The stage model requires you to declare the application package structure in the `module.json` and `app.json` files during application development. For details about the configuration file, see [Application Package Structure Configuration File](../quick-start/stage-structure.md). To develop an ability based on the stage model, implement the following logic:
- Create an ability that supports screen viewing and human-machine interaction. You must implement the following scenarios: ability lifecycle callbacks, obtaining ability configuration, requesting permissions, and notifying environment changes.
- Start an ability. You need to implement ability startup on the same device, on a remote device, or with a specified UI page.
- Call abilities. For details, see [Call Development](stage-call.md).
- Connect to and disconnect from a Service Extension ability. For details, see [Service Extension Ability Development](stage-serviceextension.md).
- Continue the ability on another device. For details, see [Ability Continuation Development](stage-ability-continuation.md).
### Launch Type
The ability supports three launch types: singleton, multi-instance, and instance-specific. Each launch type, specified by `launchType` in the `module.json` file, specifies the action that can be performed when the ability is started.
An ability can be launched in the **standard**, **singleton**, or **specified** mode, as configured by `launchType` in the `module.json` file. Depending on the launch type, the action performed when the ability is started differs, as described below.
| Launch Type | Description |Description |
| Launch Type | Description |Action |
| ----------- | ------- |---------------- |
| standard | Multi-instance | A new instance is started each time an ability starts.|
| singleton | Singleton | Only one instance exists in the system. If an instance already exists when an ability is started, that instance is reused.|
| singleton | Singleton | The ability has only one instance in the system. If an instance already exists when an ability is started, that instance is reused.|
| specified | Instance-specific| The internal service of an ability determines whether to create multiple instances during running.|
By default, the singleton mode is used. The following is an example of the `module.json` file:
......@@ -58,7 +58,7 @@ To create Page abilities for an application in the stage model, you must impleme
```
import AbilityStage from "@ohos.application.AbilityStage"
```
2. Implement the `AbilityStage` class.
2. Implement the `AbilityStage` class. The default relative path generated by the APIs is **entry\src\main\ets\Application\AbilityStage.ts**.
```ts
export default class MyAbilityStage extends AbilityStage {
onCreate() {
......@@ -70,7 +70,7 @@ To create Page abilities for an application in the stage model, you must impleme
```js
import Ability from '@ohos.application.Ability'
```
4. Implement the lifecycle callbacks of the `Ability` class.
4. Implement the lifecycle callbacks of the `Ability` class. The default relative path generated by the APIs is **entry\src\main\ets\MainAbility\MainAbility.ts**.
In the `onWindowStageCreate(windowStage)` API, use `loadContent` to set the application page to be loaded. For details about how to use the `Window` APIs, see [Window Development](../windowmanager/window-guidelines.md).
```ts
......@@ -86,8 +86,8 @@ To create Page abilities for an application in the stage model, you must impleme
onWindowStageCreate(windowStage) {
console.log("MainAbility onWindowStageCreate")
windowStage.loadContent("pages/index").then((data) => {
console.log("MainAbility load content succeed with data: " + JSON.stringify(data))
windowStage.loadContent("pages/index").then(() => {
console.log("MainAbility load content succeed")
}).catch((error) => {
console.error("MainAbility load content failed with error: "+ JSON.stringify(error))
})
......@@ -140,14 +140,14 @@ export default class MainAbility extends Ability {
console.log("MainAbility ability name" + abilityInfo.name)
let config = this.context.config
console.log("MyAbilityStage config language" + config.language)
console.log("MainAbility config language" + config.language)
}
}
```
### Requesting Permissions
If an application needs to obtain user privacy information or use system capabilities, for example, obtaining location information or using the camera to take photos or record videos, it must request the permission from consumers. During application development, you need to specify the involved sensitive permissions, declare the required permissions in `module.json`, and use the `requestPermissionsFromUser` API to request the permission from consumers in the form of a dialog box. The following uses the permissions for calendar access as an example.
If an application needs to obtain user privacy information or use system capabilities, for example, obtaining location information or using the camera to take photos or record videos, it must request the respective permission from consumers. During application development, you need to specify the involved sensitive permissions, declare the required permissions in `module.json`, and use the `requestPermissionsFromUser` API to request the permission from consumers in the form of a dialog box. The following uses the permission for calendar access as an example.
Declare the required permissions in the `module.json` file.
Declare the required permission in the `module.json` file.
```json
"requestPermissions": [
{
......@@ -155,7 +155,7 @@ Declare the required permissions in the `module.json` file.
}
]
```
Request the permissions from consumers in the form of a dialog box:
Request the permission from consumers in the form of a dialog box:
```ts
let context = this.context
let permissions: Array<string> = ['ohos.permission.READ_CALENDAR']
......@@ -166,11 +166,11 @@ context.requestPermissionsFromUser(permissions).then((data) => {
})
```
### Notifying of Environment Changes
Environment changes include changes of global configurations and ability configurations. Currently, the global configurations include the system language and color mode. The change of global configurations is generally triggered by the configuration item in **Settings** or the icon in **Control Panel**. The ability configuration is specific to a single `Ability` instance, including the display ID, screen resolution, and screen orientation. The configuration is related to the display where the ability is located, and the change is generally triggered by the window. For details on the configuration, see [Configuration](../reference/apis/js-apis-configuration.md).
Environment changes include changes of global configurations and ability configurations. Currently, the global configurations include the system language and color mode. The change of global configurations is generally triggered by configuration items in **Settings** or icons in **Control Panel**. The ability configuration is specific to a single `Ability` instance, including the display ID, screen resolution, and screen orientation. The configuration is related to the display where the ability is located, and the change is generally triggered by the window. For details on the configuration, see [Configuration](../reference/apis/js-apis-configuration.md).
For an application in the stage model, when the configuration changes, its abilities are not restarted, but the `onConfigurationUpdated(config: Configuration)` callback is triggered. If the application needs to perform processing based on the change, you can overwrite `onConfigurationUpdated`. Note that the `Configuration` object in the callback contains all the configurations of the current ability, not only the changed configurations.
The following example shows the implement of the `onConfigurationUpdated` callback in the `AbilityStage` class. The callback is triggered when the system language and color mode are changed.
The following example shows the implementation of the `onConfigurationUpdated` callback in the `AbilityStage` class. The callback is triggered when the system language and color mode are changed.
```ts
import Ability from '@ohos.application.Ability'
import ConfigurationConstant from '@ohos.application.ConfigurationConstant'
......@@ -184,7 +184,7 @@ export default class MyAbilityStage extends AbilityStage {
}
```
The following example shows the implement of the `onConfigurationUpdated` callback in the `Ability` class. The callback is triggered when the system language, color mode, or display parameters (such as the direction and density) change.
The following example shows the implementation of the `onConfigurationUpdated` callback in the `Ability` class. The callback is triggered when the system language, color mode, or display parameters (such as the direction and density) change.
```ts
import Ability from '@ohos.application.Ability'
import ConfigurationConstant from '@ohos.application.ConfigurationConstant'
......@@ -205,7 +205,7 @@ export default class MainAbility extends Ability {
```
## Starting an Ability
### Available APIs
The `Ability` class has the `context` attribute, which belongs to the `AbilityContext` class. The `AbilityContext` class has the `abilityInfo`, `currentHapModuleInfo`, and other attributes and the APIs used for starting abilities. For details, see [AbilityContext](../reference/apis/js-apis-ability-context.md).
The `Ability` class has the `context` attribute, which belongs to the `AbilityContext` class. The `AbilityContext` class has the `abilityInfo`, `currentHapModuleInfo`, and other attributes as well as the APIs used for starting abilities. For details, see [AbilityContext](../reference/apis/js-apis-ability-context.md).
**Table 3** AbilityContext APIs
|API|Description|
......@@ -227,17 +227,16 @@ var want = {
"bundleName": "com.example.MyApplication",
"abilityName": "MainAbility"
};
context.startAbility(want).then((data) => {
console.log("Succeed to start ability with data: " + JSON.stringify(data))
context.startAbility(want).then(() => {
console.log("Succeed to start ability")
}).catch((error) => {
console.error("Failed to start ability with error: "+ JSON.stringify(error))
})
```
### Starting an Ability on a Remote Device
This feature applies only to system applications, since the `getTrustedDeviceListSync` API of the `DeviceManager` class is open only to system applications.
>This feature applies only to system applications, since the `getTrustedDeviceListSync` API of the `DeviceManager` class is open only to system applications.
In the cross-device scenario, you must specify the ID of the remote device. The sample code is as follows:
```ts
let context = this.context
var want = {
......@@ -245,8 +244,8 @@ var want = {
"bundleName": "com.example.MyApplication",
"abilityName": "MainAbility"
};
context.startAbility(want).then((data) => {
console.log("Succeed to start remote ability with data: " + JSON.stringify(data))
context.startAbility(want).then(() => {
console.log("Succeed to start remote ability")
}).catch((error) => {
console.error("Failed to start remote ability with error: " + JSON.stringify(error))
})
......@@ -268,9 +267,9 @@ function getRemoteDeviceId() {
}
}
```
Request the permission `ohos.permission.DISTRIBUTED_DATASYNC ` from consumers. This permission is used for data synchronization. For details about the sample code for requesting the permission, see [Requesting Permissions](##requesting-permissions).
Request the permission `ohos.permission.DISTRIBUTED_DATASYNC` from consumers. This permission is used for data synchronization. For details about the sample code for requesting the permission, see [Requesting Permissions](##requesting-permissions).
### Starting an Ability with the Specified Page
If the launch type of an ability is set to `singleton` and the ability has been started, the `onNewWant` callback is triggered when the ability is started again. You can pass start options through the `want`. For example, to start an ability with the specified page, use the `uri` or `parameters` parameter in the `want` to pass the page information. Currently, the ability in the stage model cannot directly use the `router` capability. You must pass the start options to the custom component and invoke the `router` method to display the specified page during the custom component lifecycle management. The sample code is as follows:
If the launch type of an ability is set to `singleton` and the ability has been started, the `onNewWant` callback rather than the `onCreate` callback is triggered when the ability is started again. You can pass start options through the `want`. For example, to start an ability with the specified page, use the `uri` or `parameters` parameter in the `want` to pass the page information. Currently, the ability in the stage model cannot directly use the `router` capability. You must pass the start options to the custom component and invoke the `router` method to display the specified page during the custom component lifecycle management. The sample code is as follows:
When using `startAbility` to start an ability again, use the `uri` parameter in the `want` to pass the page information.
```ts
......@@ -312,7 +311,7 @@ struct Index {
console.info('Index onPageShow')
let newWant = globalThis.newWant
if (newWant.hasOwnProperty("uri")) {
router.push({ uri: newWant.uri });
router.push({ url: newWant.uri });
globalThis.newWant = undefined
}
}
......
......@@ -26,7 +26,7 @@ OpenHarmony does not support creation of a Service Extension ability for third-p
1. Create a Service Extension ability.
2. Customize a class that inherits from **ServiceExtensionAbility** in the .ts file in the directory where the Service Extension ability is defined and override the lifecycle callbacks of the base class. The code sample is as follows:
2. Customize a class that inherits from **ServiceExtensionAbility** in the .ts file in the directory where the Service Extension ability is defined (**entry\src\main\ets\ServiceExtAbility\ServiceExtAbility.ts** by default) and override the lifecycle callbacks of the base class. The code sample is as follows:
```js
import rpc from '@ohos.rpc'
......
......@@ -53,8 +53,8 @@ To make you better understand how functions work together and jumpstart your app
API references encompass all components and APIs available in OpenHarmony, helping you use and integrate APIs more effectively.
They are organized as follows:
- [Component Reference (JavaScript-based Web-like Development Paradigm)](reference/arkui-js/Readme-EN.md)
- [Component Reference (TypeScript-based Declarative Development Paradigm)](reference/arkui-ts/Readme-EN.md)
- [Component Reference (JavaScript-based Web-like Development Paradigm)](reference/arkui-js/Readme-EN.md)
- APIs
- [JS and TS APIs](reference/apis/Readme-EN.md)
- Native APIs
......
......@@ -53,8 +53,8 @@ To make you better understand how functions work together and jumpstart your app
API references encompass all components and APIs available in OpenHarmony, helping you use and integrate APIs more effectively.
They are organized as follows:
- [Component Reference (JavaScript-based Web-like Development Paradigm)](reference/arkui-js/js-components-common-attributes.md)
- [Component Reference (TypeScript-based Declarative Development Paradigm)](reference/arkui-ts/ts-universal-events-click.md)
- [Component Reference (JavaScript-based Web-like Development Paradigm)](reference/arkui-js/js-components-common-attributes.md)
- [JS and TS APIs](reference/apis/js-apis-DataUriUtils.md)
- Native APIs
- [Standard Libraries](reference/native-lib/third_party_libc/musl.md)
......
......@@ -37,7 +37,7 @@
"reqPermissions":[
{
"name":"ohos.permission.ACCELEROMETER",
"reason"":"",
"reason":"",
"usedScene":{
"ability": ["sensor.index.MainAbility",".MainAbility"],
"when":"inuse"
......@@ -45,7 +45,7 @@
},
{
"name":"ohos.permission.GYROSCOPE",
"reason"":"",
"reason":"",
"usedScene":{
"ability": ["sensor.index.MainAbility",".MainAbility"],
"when":"inuse"
......@@ -53,7 +53,7 @@
},
{
"name":"ohos.permission.ACTIVITY_MOTION",
"reason"":"ACTIVITY_MOTION_TEST",
"reason":"ACTIVITY_MOTION_TEST",
"usedScene":{
"ability": ["sensor.index.MainAbility",".MainAbility"],
"when":"inuse"
......@@ -61,7 +61,7 @@
},
{
"name":"ohos.permission.READ_HEALTH_DATA",
"reason"":"HEALTH_DATA_TEST",
"reason":"HEALTH_DATA_TEST",
"usedScene":{
"ability": ["sensor.index.MainAbility",".MainAbility"],
"when":"inuse"
......
......@@ -57,10 +57,10 @@ function setCallBack(audioPlayer) {
});
audioPlayer.on('reset', () => { // Set the 'reset' event callback.
console.info('audio reset success');
audioPlayer.release(); // Release the AudioPlayer resources.
audioPlayer.release(); // Release the AudioPlayer instance.
audioPlayer = undefined;
});
audioPlayer.on('timeUpdate', (seekDoneTime) => {// Set the 'timeUpdate' event callback.
audioPlayer.on('timeUpdate', (seekDoneTime) => { // Set the 'timeUpdate' event callback.
if (typeof(seekDoneTime) == 'undefined') {
console.info('audio seek fail');
return;
......@@ -92,10 +92,10 @@ function setCallBack(audioPlayer) {
}
async function audioPlayerDemo() {
// 1. Create an audioPlayer instance.
// 1. Create an AudioPlayer instance.
let audioPlayer = media.createAudioPlayer();
setCallBack(audioPlayer); // Set the event callbacks.
// 2. Set the URI of the audio file selected by the user.
// 2. Set the URI of the audio file.
let fdPath = 'fd://'
// The stream in the path can be pushed to the device by running the "hdc file send D:\xxx\01.mp3 /data/app/el1/bundle/public/ohos.acts.multimedia.audio.audioplayer/ohos.acts.multimedia.audio.audioplayer/assets/entry/resources/rawfile" command.
let path = '/data/app/el1/bundle/public/ohos.acts.multimedia.audio.audioplayer/ohos.acts.multimedia.audio.audioplayer/assets/entry/resources/rawfile/01.mp3';
......@@ -128,7 +128,7 @@ export class AudioDemo {
});
audioPlayer.on('finish', () => { // Set the 'finish' event callback, which is triggered when the playback is complete.
console.info('audio play finish');
audioPlayer.release(); // Release the AudioPlayer resources.
audioPlayer.release(); // Release the AudioPlayer instance.
audioPlayer = undefined;
});
}
......@@ -228,7 +228,7 @@ export class AudioDemo {
audioPlayer.loop = true; // Set the loop playback attribute.
audioPlayer.play(); // Call the play() API to start the playback and trigger the 'play' event callback.
});
audioPlayer.on('play', () => { // Sets the 'play' event callback to start loop playback.
audioPlayer.on('play', () => { // Set the 'play' event callback to start loop playback.
console.info('audio play success');
});
}
......
......@@ -6,10 +6,7 @@
- [Getting Started with eTS in the Low-Code Approach](start-with-ets-low-code.md)
- [Getting Started with JavaScript in the Traditional Coding Approach](start-with-js.md)
- [Getting Started with JavaScript in the Low-Code Approach](start-with-js-low-code.md)
- Development Fundamentals
- [Application Package Structure Configuration File (FA Model)](package-structure.md)
- [Application Package Structure Configuration File (Stage Model)](stage-structure.md)
- [Resource File Categories](basic-resource-file-categories.md)
- [SysCap](syscap.md)
......@@ -99,50 +99,6 @@ Example of the **module.json** file:
"resource": "$profile:config_file2"
}
],
"metadata": [
{
"name": "string",
"value": "string",
"resource": "$profile:config_file1"
},
{
"name": "string",
"value": "string",
"resource": "$profile:config_file2"
}
],
"abilities": [
{
"name": "MainAbility",
"srcEntrance" : "./login/MyMainAbility.ts",
"description": "$string:description_main_ability",
"icon": "$media:icon",
"label": "HiMusic",
"visible": true,
"skills": [
{
"actions": [
"action.system.home"
],
"entities": [
"entity.system.home"
],
"uris": [ ]
}
],
"backgroundModes": [
"dataTransfer",
"audioPlayback",
"audioRecording",
"location",
"bluetoothInteraction",
"multiDeviceConnection",
"wifiInteraction",
"voip",
"taskKeeping"
],
}
],
"abilities": [
{
"name": "MainAbility",
......
......@@ -1141,8 +1141,8 @@ SystemCapability.BundleManager.BundleFramework
**Example**
```js
let bundleName = com.example.myapplication;
let abilityName = com.example.myapplication.MainAbility;
let bundleName = "com.example.myapplication";
let abilityName = "com.example.myapplication.MainAbility";
bundle.getAbilityIcon(bundleName, abilityName)
.then((data) => {
console.info('Operation successful. Data: ' + JSON.stringify(data));
......@@ -1176,8 +1176,8 @@ SystemCapability.BundleManager.BundleFramework
**Example**
```js
let bundleName = com.example.myapplication;
let abilityName = com.example.myapplication.MainAbility;
let bundleName = "com.example.myapplication";
let abilityName = "com.example.myapplication.MainAbility";
bundle.getAbilityIcon(bundleName, abilityName, (err, data) => {
if (err) {
console.error('Operation failed. Cause: ' + JSON.stringify(err));
......
......@@ -126,7 +126,7 @@ var options = {
windowMode: 0,
};
this.context.startAbility(want, options)
.then((data) => {
.then(() => {
console.log('Operation successful.')
}).catch((error) => {
console.log('Operation failed.');
......@@ -273,7 +273,7 @@ var options = {
};
var accountId = 11;
this.context.startAbility(want, accountId, options)
.then((data) => {
.then(() => {
console.log('Operation successful.')
}).catch((error) => {
console.log('Operation failed.');
......@@ -352,7 +352,7 @@ Starts an ability with **options** specified. This API uses a promise to return
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| want | [Want](js-apis-featureAbility.md#Want) | Yes| Information about the **Want** used for starting an ability.|
| options | StartOptions | Yes| Parameters used for starting the ability.|
| options | StartOptions | No | Parameters used for starting the ability.|
**Return value**
......@@ -511,8 +511,8 @@ Terminates this ability. This API uses a promise to return the result.
**Example**
```js
this.context.terminateSelf(want).then((data) => {
console.log('success:' + JSON.stringify(data));
this.context.terminateSelf(want).then(() => {
console.log('success:');
}).catch((error) => {
console.log('failed:' + JSON.stringify(error));
});
......@@ -571,7 +571,7 @@ this.context.terminateSelfWithResult(
{
want: {bundleName: "com.extreme.myapplication", abilityName: "MainAbilityDemo"},
resultCode: 100
}).then((result) => {
}).then(() => {
console.log("terminateSelfWithResult")
})
```
......@@ -595,7 +595,7 @@ Uses the **AbilityInfo.AbilityType.SERVICE** template to connect this ability to
| Type| Description|
| -------- | -------- |
| number | ID of the connection between the two abilities.|
| number | Result code of the ability connection.|
**Example**
```js
......@@ -606,7 +606,7 @@ var want = {
}
var options = {
onConnect: (elementName, remote) => {
console.log('connectAbility onConnect, elementName: ' + elementName + ', remote: ' remote)
console.log('connectAbility onConnect, elementName: ' + elementName + ', remote: ' + remote)
},
onDisconnect: (elementName) => {
console.log('connectAbility onDisconnect, elementName: ' + elementName)
......@@ -615,8 +615,8 @@ var options = {
console.log('connectAbility onFailed, code: ' + code)
}
}
this.context.connectAbility(want, options) {
console.log('code: ' + code)
let result = this.context.connectAbility(want, options) {
console.log('code: ' + result)
}
```
......@@ -652,7 +652,7 @@ var want = {
var accountId = 111;
var options = {
onConnect: (elementName, remote) => {
console.log('connectAbility onConnect, elementName: ' + elementName + ', remote: ' remote)
console.log('connectAbility onConnect, elementName: ' + elementName + ', remote: ' + remote)
},
onDisconnect: (elementName) => {
console.log('connectAbility onDisconnect, elementName: ' + elementName)
......@@ -768,8 +768,8 @@ Sets the label of the ability in the mission. This API uses a promise to return
**Example**
```js
this.context.setMissionLabel("test").then((data) => {
console.log('success:' + JSON.stringify(data));
this.context.setMissionLabel("test").then(() => {
console.log('success:');
}).catch((error) => {
console.log('failed:' + JSON.stringify(error));
});
......
# Ability Access Control
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> **NOTE**
>
> The initial APIs of this module are supported since API version 8. Newly added APIs will be marked with a superscript to indicate their earliest API version.
## Modules to Import
```
```js
import abilityAccessCtrl from '@ohos.abilityAccessCtrl'
```
......@@ -72,6 +73,8 @@ grantUserGrantedPermission(tokenID: number, permissionName: string, permissionFl
Grants a user granted permission to an application. This API uses a promise to return the result.
This is a system API.
**Required permissions**: ohos.permission.GRANT_SENSITIVE_PERMISSIONS
**System capability**: SystemCapability.Security.AccessToken
......@@ -109,6 +112,8 @@ grantUserGrantedPermission(tokenID: number, permissionName: string, permissionFl
Grants a user granted permission to an application. This API uses an asynchronous callback to return the result.
This is a system API.
**Required permissions**: ohos.permission.GRANT_SENSITIVE_PERMISSIONS
**System capability**: SystemCapability.Security.AccessToken
......@@ -139,6 +144,8 @@ revokeUserGrantedPermission(tokenID: number, permissionName: string, permissionF
Revokes a user granted permission given to an application. This API uses a promise to return the result.
This is a system API.
**Required permissions**: ohos.permission.REVOKE_SENSITIVE_PERMISSIONS
**System capability**: SystemCapability.Security.AccessToken
......@@ -175,6 +182,8 @@ revokeUserGrantedPermission(tokenID: number, permissionName: string, permissionF
Revokes a user granted permission given to an application. This API uses an asynchronous callback to return the result.
This is a system API.
**Required permissions**: ohos.permission.REVOKE_SENSITIVE_PERMISSIONS
**System capability**: SystemCapability.Security.AccessToken
......@@ -204,6 +213,8 @@ getPermissionFlags(tokenID: number, permissionName: string): Promise&lt;number&g
Obtains the flags of the specified permission of a given application. This API uses a promise to return the result.
This is a system API.
**Required permissions**: ohos.permission.GET_SENSITIVE_PERMISSIONS, GRANT_SENSITIVE_PERMISSIONS, or REVOKE_SENSITIVE_PERMISSIONS
**System capability**: SystemCapability.Security.AccessToken
......
# Want
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> The initial APIs of this module are supported since API version 8. Newly added APIs will be marked with a superscript to indicate their earliest API version.
**Want** is the basic communication component of the system.
The **Want** module provides the basic communication component of the system.
> **NOTE**
>
> The initial APIs of this module are supported since API version 8. Newly added APIs will be marked with a superscript to indicate their earliest API version.
## Modules to Import
```
import Want from '@ohos.application.Want';
```
......@@ -20,11 +19,55 @@ import Want from '@ohos.application.Want';
| Name | Readable/Writable| Type | Mandatory| Description |
| ----------- | -------- | -------------------- | ---- | ------------------------------------------------------------ |
| deviceId | Read only | string | No | ID of the device running the ability. |
| bundleName | Read only | string | No | Bundle name of the ability. If both **bundleName** and **abilityName** are specified in a **Want** object, the **Want** object can directly match the specified ability.|
| abilityName | Read only | string | No | Name of the ability. If both **bundleName** and **abilityName** are specified in a **Want** object, the **Want** object can directly match the specified ability.|
| bundleName | Read only | string | No | Bundle name of the ability. If both **bundleName** and **abilityName** are specified in a **Want** object, the **Want** object can match a specific ability.|
| abilityName | Read only | string | No | Name of the ability. If both **bundleName** and **abilityName** are specified in a **Want** object, the **Want** object can match a specific ability.|
| uri | Read only | string | No | URI information to match. If **uri** is specified in a **Want** object, the **Want** object will match the specified URI information, including **scheme**, **schemeSpecificPart**, **authority**, and **path**.|
| type | Read only | string | No | MIME type, for example, **text/plain** or **image/***. |
| flags | Read only | number | No | How the **Want** object will be handled. By default, numbers are passed in. For details, see [flags](js-apis-featureAbility.md#flags).|
| flags | Read only | number | No | How the **Want** object will be handled. For details, see [flags](js-apis-featureAbility.md#flags).|
| action | Read only | string | No | Action option. |
| parameters | Read only | {[key: string]: any} | No | List of parameters in the **Want** object. |
| entities | Read only | Array\<string> | No | List of entities. | |
| entities | Read only | Array\<string> | No | List of entities. |
| extensionAbilityType<sup>9+</sup> | Read only | bundle.ExtensionAbilityType | No | Type of the Extension ability. |
| extensionAbilityName<sup>9+<sup> | Read only | string | No | Description of the Extension ability name in the **Want** object. |
**Example**
- Basic usage
```js
var want = {
"deviceId": "", // An empty deviceId indicates the local device.
"bundleName": "com.extreme.test",
"abilityName": "MainAbility",
"uri": "pages/second" // uri is optional and can be used to pass the destination URI.
};
this.context.startAbility(want, (error) => {
// Start an ability explicitly. The bundleName, abilityName, and moduleName parameters work together to uniquely identify an ability.
console.log("error.code = " + error.code)
})
```
- Passing a file descriptor (FD)
```js
var fd;
try {
fd = fileio.openSync("/data/storage/el2/base/haps/pic.png");
} catch(e) {
console.log("openSync fail:" + JSON.stringify(e));
}
var want = {
"deviceId": "", // An empty deviceId indicates the local device.
"bundleName": "com.extreme.test",
"abilityName": "MainAbility",
"parameters": {
"keyFd":{"type":"FD", "value":fd}
}
};
this.context.startAbility(want, (error) => {
// Start an ability explicitly. The bundleName, abilityName, and moduleName parameters work together to uniquely identify an ability.
console.log("error.code = " + error.code)
})
```
\ No newline at end of file
......@@ -21,8 +21,8 @@ import Ability from '@ohos.application.Ability';
| Name| Type| Readable| Writable| Description|
| -------- | -------- | -------- | -------- | -------- |
| context | [AbilityContext](js-apis-ability-context.md) | Yes| No| Context of an ability.|
| launchWant | [Want](js-apis-featureAbility.md#Want)| Yes| No| Parameters for starting the ability.|
| lastRequestWant | [Want](js-apis-featureAbility.md#Want)| Yes| No| Parameters used when the ability was started last time.|
| launchWant | [Want](js-apis-application-want.md)| Yes| No| Parameters for starting the ability.|
| lastRequestWant | [Want](js-apis-application-want.md)| Yes| No| Parameters used when the ability was started last time.|
## Ability.onCreate
......@@ -37,7 +37,7 @@ Called to initialize the service logic when an ability is created.
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| want | [Want](js-apis-featureAbility.md#Want)| Yes| Information related to this ability, including the ability name and bundle name.|
| want | [Want](js-apis-application-want.md)| Yes| Information related to this ability, including the ability name and bundle name.|
| param | AbilityConstant.LaunchParam | Yes| Parameters for starting the ability, and the reason for the last abnormal exit.|
**Example**
......@@ -222,7 +222,7 @@ Called when the ability startup mode is set to singleton.
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| want | [Want](js-apis-featureAbility.md#Want)| Yes| Want parameters, such as the ability name and bundle name.|
| want | [Want](js-apis-application-want.md)| Yes| Want parameters, such as the ability name and bundle name.|
**Example**
......
# AbilityInfo
Unless otherwise specified, ability information is obtained through **GET_BUNDLE_DEFAULT**.
> **NOTE**
>
> The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
>
> API version 9 is a canary version for trial use. The APIs of this version may be unstable.
Provides the ability information.
## AbilityInfo
**System capability**: SystemCapability.BundleManager.BundleFramework
**System capability**: SystemCapability.BundleManager.BundleFramework
| Name | Type | Readable| Writable| Description |
| --------------------- | -------------------------------------------------------- | ---- | ---- | ----------------------------------------- |
......@@ -30,15 +30,16 @@ Provides the ability information.
| type | AbilityType | Yes | No | Ability type. |
| orientation | DisplayOrientation | Yes | No | Ability display orientation. |
| launchMode | LaunchMode | Yes | No | Ability launch mode. |
| permissions | Array\<string> | Yes | No | Permissions required for other applications to call the ability.|
| permissions | Array\<string> | Yes | No | Permissions required for other applications to call the ability.<br>The value is obtained by passing **GET_ABILITY_INFO_WITH_PERMISSION**.|
| deviceTypes | Array\<string> | Yes | No | Device types supported by the ability. |
| deviceCapabilities | Array\<string> | Yes | No | Device capabilities required for the ability. |
| readPermission | string | Yes | No | Permission required for reading the ability data. |
| writePermission | string | Yes | No | Permission required for writing data to the ability. |
| applicationInfo | ApplicationInfo | Yes | No | Application configuration information. |
| applicationInfo | ApplicationInfo | Yes | No | Application configuration information.<br>The value is obtained by passing **GET_ABILITY_INFO_WITH_APPLICATION**.|
| uri | string | Yes | No | URI of the ability. |
| labelId | number | Yes | No | Ability label ID. |
| subType | AbilitySubType | Yes | No | Subtype of the template that can be used by the ability. |
| metaData<sup>8+</sup> | Array\<[CustomizeData](js-apis-bundle-CustomizeData.md)> | Yes | No | Custom metadata of the ability. |
| metadata<sup>9+</sup> | Array\<[Metadata](js-apis-bundle-Metadata.md)> | Yes | No | Metadata of the ability. |
| metaData<sup>8+</sup> | Array\<[CustomizeData](js-apis-bundle-CustomizeData.md)> | Yes | No | Custom metadata of the ability.<br>The value is obtained by passing **GET_ABILITY_INFO_WITH_METADATA**.|
| metadata<sup>9+</sup> | Array\<[Metadata](js-apis-bundle-Metadata.md)> | Yes | No | Metadata of the ability.<br>The value is obtained by passing **GET_ABILITY_INFO_WITH_METADATA**.|
| enabled<sup>8+</sup> | boolean | Yes | No | Whether the ability is enabled. |
# ApplicationInfo
The **ApplicationInfo** module provides application information. Unless otherwise specified, all attributes are obtained through **GET_BUNDLE_DEFAULT**.
> **NOTE**
>
> The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
>
> API version 9 is a canary version for trial use. The APIs of this version may be unstable.
Provides the application information.
## ApplicationInfo
**System capability**: SystemCapability.BundleManager.BundleFramework
| Name | Type | Readable| Writable| Description |
| -------------------------- | ------------------------------------------------------------ | ---- | ---- | ------------------------------------------ |
| -------------------------- | ------------------------------------------------------------ | ---- | ---- | ------------------------------------------------------------ |
| name | string | Yes | No | Application name. |
| description | string | Yes | No | Application description. |
| descriptionId | number | Yes | No | Application description ID. |
......@@ -23,15 +23,15 @@ Provides the application information.
| labelId | string | Yes | No | Application label ID. |
| icon | string | Yes | No | Application icon. |
| iconId | string | Yes | No | Application icon ID. |
| process | string | Yes | No | Process in which the application runs. If this parameter is not set, the bundle name is used.|
| process | string | Yes | No | Process in which the application runs. If this parameter is not set, the bundle name is used. |
| supportedModes | number | Yes | No | Running modes supported by the application. |
| moduleSourceDirs | Array\<string> | Yes | No | Relative paths for storing application resources. |
| permissions | Array\<string> | Yes | No | Permissions required for accessing the application. |
| permissions | Array\<string> | Yes | No | Permissions required for accessing the application.<br>The value is obtained by passing **GET_APPLICATION_INFO_WITH_PERMISSION**.|
| moduleInfos | Array\<[ModuleInfo](js-apis-bundle-ModuleInfo.md)> | Yes | No | Application module information. |
| entryDir | string | Yes | No | Path for storing application files. |
| codePath<sup>8+</sup> | string | Yes | No | Installation directory of the application. |
| metaData<sup>8+</sup> | Map\<string, Array\<[CustomizeData](js-apis-bundle-CustomizeData.md)>> | Yes | No | Custom metadata of the application. |
| metadata<sup>9+</sup> | Map\<string, Array\<[Metadata](js-apis-bundle-Metadata.md)>> | Yes | No | Metadata of the application. |
| metaData<sup>8+</sup> | Map\<string, Array\<[CustomizeData](js-apis-bundle-CustomizeData.md)>> | Yes | No | Custom metadata of the application.<br>The value is obtained by passing **GET_APPLICATION_INFO_WITH_METADATA**.|
| metadata<sup>9+</sup> | Map\<string, Array\<[Metadata](js-apis-bundle-Metadata.md)>> | Yes | No | Metadata of the application.<br>The value is obtained by passing **GET_APPLICATION_INFO_WITH_METADATA**.|
| removable<sup>8+</sup> | boolean | Yes | No | Whether the application is removable. |
| accessTokenId<sup>8+</sup> | number | Yes | No | Access token ID of the application. |
| uid<sup>8+</sup> | number | Yes | No | UID of the application. |
......
# BundleInfo
The **BundleInfo** module provides bundle information. Unless otherwise specified, all attributes are obtained through **GET_BUNDLE_DEFAULT**.
> **NOTE**
>
> The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
>
> API version 9 is a canary version for trial use. The APIs of this version may be unstable.
Provides the application bundle information.
## BundleInfo
**System capability**: SystemCapability.BundleManager.BundleFramework
| Name | Type | Readable| Writable| Description |
| --------------------------------- | ------------------------------------------------------------ | ---- | ---- | ------------------------------------------ |
| --------------------------------- | ------------------------------------------------------------ | ---- | ---- | ------------------------------------------------------------ |
| name | string | Yes | No | Bundle name. |
| type | string | Yes | No | Bundle type. |
| appId | string | Yes | No | ID of the application to which the bundle belongs. |
......@@ -21,9 +21,9 @@ Provides the application bundle information.
| installTime | number | Yes | No | Time when the HAP file was installed. |
| updateTime | number | Yes | No | Time when the HAP file was updated. |
| appInfo | ApplicationInfo | Yes | No | Application configuration information. |
| abilityInfos | Array\<[AbilityInfo](js-apis-bundle-AbilityInfo.md)> | Yes | No | Ability configuration information. |
| reqPermissions | Array\<string> | Yes | No | Permissions to request from the system for running the application. |
| reqPermissionDetails | Array\<[ReqPermissionDetail](#reqpermissiondetail)> | Yes | No | Detailed information of the permissions to request from the system.|
| abilityInfos | Array\<[AbilityInfo](js-apis-bundle-AbilityInfo.md)> | Yes | No | Ability configuration information.<br>The value is obtained by passing **GET_BUNDLE_WITH_ABILITIES**.|
| reqPermissions | Array\<string> | Yes | No | Permissions to request from the system for running the application.<br>The value is obtained by passing **GET_BUNDLE_WITH_REQUESTED_PERMISSION**.|
| reqPermissionDetails | Array\<[ReqPermissionDetail](#reqpermissiondetail)> | Yes | No | Detailed information of the permissions to request from the system.<br>The value is obtained by passing **GET_BUNDLE_WITH_REQUESTED_PERMISSION**.|
| vendor | string | Yes | No | Vendor of the bundle. |
| versionCode | number | Yes | No | Version number of the bundle. |
| versionName | string | Yes | No | Version description of the bundle. |
......@@ -32,12 +32,14 @@ Provides the application bundle information.
| isCompressNativeLibs | boolean | Yes | No | Whether to compress the native library of the bundle. The default value is **true**. |
| hapModuleInfos | Array\<[HapModuleInfo](js-apis-bundle-HapModuleInfo.md)> | Yes | No | Module configuration information. |
| entryModuleName | string | Yes | No | Name of the entry module. |
| cpuAbi | string | Yes | No | cpuAbi information of the bundle. |
| cpuAbi | string | Yes | No | CPU and ABI information of the bundle. |
| isSilentInstallation | string | Yes | No | Whether the application can be installed in silent mode. |
| minCompatibleVersionCode | number | Yes | No | Earliest version compatible with the bundle in the distributed scenario. |
| entryInstallationFree | boolean | Yes | No | Whether installation-free is supported for the entry module. |
| reqPermissionStates<sup>8+</sup> | Array\<number> | Yes | No | Permission grant state. |
| extensionAbilityInfo<sup>9+</sup> | Array\<[ExtensionAbilityInfo](js-apis-bundle-ExtensionAbilityInfo.md)> | Yes | No | Extension ability information. |
| extensionAbilityInfo<sup>9+</sup> | Array\<[ExtensionAbilityInfo](js-apis-bundle-ExtensionAbilityInfo.md)> | Yes | No | Extension ability information.<br>The value is obtained by passing **GET_BUNDLE_WITH_EXTENSION_ABILITY**.|
## ReqPermissionDetail
......@@ -51,6 +53,8 @@ Provides the detailed information of the permissions to request from the system.
| reason | string | Yes | Yes | Reason for requesting the permission. |
| usedScene | [UsedScene](#usedscene) | Yes | Yes | Application scenario and timing for using the permission.|
## UsedScene
Describes the application scenario and timing for using the permission.
......
# ExtensionAbilityInfo
The **ExtensionAbilityInfo** module provides Extension ability information. Unless otherwise specified, all attributes are obtained through **GET_BUNDLE_DEFAULT**.
> **NOTE**
>
> The initial APIs of this module are supported since API version 9. Newly added APIs will be marked with a superscript to indicate their earliest API version.
>
> API version 9 is a canary version for trial use. The APIs of this version may be unstable.
Provides the Extension ability information.
## ExtensionAbilityInfo
**System capability**: SystemCapability.BundleManager.BundleFramework
......@@ -24,7 +24,7 @@ Provides the Extension ability information.
| extensionAbilityType | bundle.ExtensionAbilityType | Yes | No | Type of the Extension ability. |
| permissions | Array\<string> | Yes | No | Permissions required for other applications to call the Extension ability.|
| applicationInfo | ApplicationInfo | Yes | No | Application information of the Extension ability. |
| metaData | Array\<[Metadata](js-apis-bundle-Metadata.md)> | Yes | No | Metadata of the Extension ability. |
| metadata | Array\<[Metadata](js-apis-bundle-Metadata.md)> | Yes | No | Metadata of the Extension ability. |
| enabled | boolean | Yes | No | Whether the Extension ability is enabled. |
| readPermission | string | Yes | No | Permission required for reading the Extension ability data. |
| readPermission | string | Yes | No | Permission required for reading data from the Extension ability. |
| writePermission | string | Yes | No | Permission required for writing data to the Extension ability. |
# HapModuleInfo
The **HapModuleInfo** module provides module information. Unless otherwise specified, all attributes are obtained through **GET_BUNDLE_DEFAULT**.
> **NOTE**
>
> The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
>
> API version 9 is a canary version for trial use. The APIs of this version may be unstable.
Provides the HAP module information.
## HapModuleInfo
**System capability**: SystemCapability.BundleManager.BundleFramework
......
......@@ -1438,4 +1438,4 @@ Defines the **HuksResult** structure.
| errorCode | number | Yes | Error code. |
| outData | Uint8Array | No | Output data.|
| properties | Array\<HuksParam> | No | Properties. |
| certChains | Array\<string> | No | Certificate chain. |
| certChains | Array\<string> | No | Reserved. |
......@@ -4,7 +4,6 @@
>
> The initial APIs of this module are supported since API version 6. Newly added APIs will be marked with a superscript to indicate their earliest API version.
The multimedia subsystem provides a set of simple and easy-to-use APIs for you to access the system and use media resources.
This subsystem offers various media services covering audio and video, which provide the following capabilities:
......@@ -61,7 +60,7 @@ Creates a **VideoPlayer** instance in asynchronous mode. This API uses a callbac
let videoPlayer
media.createVideoPlayer((error, video) => {
if (typeof(video) != 'undefined') {
if (video != null) {
videoPlayer = video;
console.info('video createVideoPlayer success');
} else {
......@@ -90,7 +89,7 @@ Creates a **VideoPlayer** instance in asynchronous mode. This API uses a promise
let videoPlayer
media.createVideoPlayer().then((video) => {
if (typeof(video) != 'undefined') {
if (video != null) {
videoPlayer = video;
console.info('video createVideoPlayer success');
} else {
......@@ -106,7 +105,7 @@ media.createVideoPlayer().then((video) => {
createAudioRecorder(): AudioRecorder
Creates an **AudioRecorder** instance to control audio recording.
Only one **AudioRecorder** instance can be created for a device.
Only one **AudioRecorder** instance can be created per device.
**System capability**: SystemCapability.Multimedia.Media.AudioRecorder
......@@ -215,12 +214,12 @@ For details about the audio playback demo, see [Audio Playback Development](../.
**System capability**: SystemCapability.Multimedia.Media.AudioPlayer
| Name | Type | Readable| Writable| Description |
| ----------- | ------------------------- | ---- | ---- | ------------------------------------------------------------ |
| src | string | Yes | Yes | Audio media URL. The mainstream video formats (MPEG-4, MPEG-TS, WebM, and MKV) are supported.<br>**Example of supported URIs**:<br>1. FD playback: fd://xx<br>![](figures/en-us_image_url.png)<br>2. HTTP network playback: http://xx<br>3. HTTPS network playback: https://xx<br>4. HLS network playback: http://xx or https://xx<br>**Note**:<br>To use media materials, you must declare the read permission. Otherwise, the media materials cannot be played properly.|
| ------------------------------- | ----------------------------------- | ---- | ---- | ------------------------------------------------------------ |
| src | string | Yes | Yes | Audio file URI. The mainstream audio formats (MPEG-4, MPEG-TS, WebM, and MKV) are supported.<br>**Examples of supported URI schemes**:<br>1. FD: fd://xx<br>![](figures/en-us_image_url.png)<br>2. HTTP: http://xx<br>3. HTTPS: https://xx<br>4. HLS: http://xx or https://xx<br>**NOTE**<br>To use media materials, you must declare the read permission. Otherwise, the media materials cannot be played properly.|
| loop | boolean | Yes | Yes | Whether to loop audio playback. The value **true** means to loop audio playback, and **false** means the opposite. |
| currentTime | number | Yes | No | Current audio playback position. |
| duration | number | Yes | No | Audio duration. |
| state | [AudioState](#audiostate) | Yes | No | Audio playback state. |
| state | [AudioState](#audiostate) | Yes | No | Audio playback state. This state cannot be used as the condition for triggering the call of **play()**, **pause()**, or **stop()**.|
### play<a name=audioplayer_play></a>
......@@ -308,7 +307,7 @@ Seeks to the specified playback position.
```js
audioPlayer.on('timeUpdate', (seekDoneTime) => { // Set the 'timeUpdate' event callback.
if (typeof (seekDoneTime) == 'undefined') {
if (seekDoneTime == null) {
console.info('audio seek fail');
return;
}
......@@ -381,7 +380,7 @@ function printfDescription(obj) {
}
audioPlayer.getTrackDescription((error, arrlist) => {
if (typeof (arrlist) != 'undefined') {
if (arrlist != null) {
for (let i = 0; i < arrlist.length; i++) {
printfDescription(arrlist[i]);
}
......@@ -417,7 +416,7 @@ function printfDescription(obj) {
}
audioPlayer.getTrackDescription().then((arrlist) => {
if (typeof (arrlist) != 'undefined') {
if (arrlist != null) {
arrayDescription = arrlist;
} else {
console.log('audio getTrackDescription fail');
......@@ -492,7 +491,7 @@ audioPlayer.on('reset', () => { // Set the 'reset' event callback.
audioPlayer = undefined;
});
audioPlayer.on('timeUpdate', (seekDoneTime) => { // Set the 'timeUpdate' event callback.
if (typeof(seekDoneTime) == "undefined") {
if (seekDoneTime == null) {
console.info('audio seek fail');
return;
}
......@@ -547,7 +546,7 @@ Subscribes to the 'timeUpdate' event.
```js
audioPlayer.on('timeUpdate', (seekDoneTime) => { // Set the 'timeUpdate' event callback.
if (typeof (seekDoneTime) == 'undefined') {
if (seekDoneTime == null) {
console.info('audio seek fail');
return;
}
......@@ -560,7 +559,7 @@ audioPlayer.seek(30000); // Seek to 30000 ms.
on(type: 'error', callback: ErrorCallback): void
Subscribes to the audio playback error event.
Subscribes to audio playback error events.
**System capability**: SystemCapability.Multimedia.Media.AudioPlayer
......@@ -589,11 +588,11 @@ Enumerates the audio playback states. You can obtain the state through the **sta
**System capability**: SystemCapability.Multimedia.Media.AudioPlayer
| Name | Type | Description |
| ------------------ | ------ | -------------- |
| idle | string | The audio player is idle.|
| playing | string | Audio playback is in progress.|
| paused | string | Audio playback is paused.|
| stopped | string | Audio playback is stopped.|
| ------------------ | ------ | ---------------------------------------------- |
| idle | string | No audio playback is in progress.|
| playing | string | Audio playback is in progress. |
| paused | string | Audio playback is paused. |
| stopped | string | Audio playback is stopped. |
| error<sup>8+</sup> | string | Audio playback is in the error state. |
## VideoPlayer<sup>8+</sup>
......@@ -608,10 +607,10 @@ For details about the video playback demo, see [Video Playback Development](../.
| Name | Type | Readable| Writable| Description |
| ------------------------ | ---------------------------------- | ---- | ---- | ------------------------------------------------------------ |
| url<sup>8+</sup> | string | Yes | Yes | Video media URL. The mainstream video formats (MPEG-4, MPEG-TS, WebM, and MKV) are supported.<br>**Example of supported URIs**:<br>1. FD playback: fd://xx<br>![](figures/en-us_image_url.png)<br>2. HTTP network playback: http://xx<br>3. HTTPS network playback: https://xx<br>4. HLS network playback: http://xx or https://xx<br>**Note**:<br>To use media materials, you must declare the read permission. Otherwise, the media materials cannot be played properly.|
| url<sup>8+</sup> | string | Yes | Yes | Video media URL. The mainstream video formats (MPEG-4, MPEG-TS, WebM, and MKV) are supported.<br>**Example of supported URIs**:<br>1. FD: fd://xx<br>![](figures/en-us_image_url.png)<br>2. HTTP: http://xx<br>3. HTTPS: https://xx<br>4. HLS: http://xx or https://xx<br>**NOTE**<br>To use media materials, you must declare the read permission. Otherwise, the media materials cannot be played properly.|
| loop<sup>8+</sup> | boolean | Yes | Yes | Whether to loop video playback. The value **true** means to loop video playback, and **false** means the opposite. |
| currentTime<sup>8+</sup> | number | Yes | No | Current video playback position. |
| duration<sup>8+</sup> | number | Yes | No | Video duration. The value **-1** indicates the live streaming mode. |
| duration<sup>8+</sup> | number | Yes | No | Video duration. The value **-1** indicates the live mode. |
| state<sup>8+</sup> | [VideoPlayState](#videoplaystate8) | Yes | No | Video playback state. |
| width<sup>8+</sup> | number | Yes | No | Video width. |
| height<sup>8+</sup> | number | Yes | No | Video height. |
......@@ -635,7 +634,7 @@ Sets **SurfaceId**. This API uses a callback to return the result.
```js
videoPlayer.setDisplaySurface(surfaceId, (err) => {
if (typeof (err) == 'undefined') {
if (err == null) {
console.info('setDisplaySurface success!');
} else {
console.info('setDisplaySurface fail!');
......@@ -691,7 +690,7 @@ Prepares for video playback. This API uses a callback to return the result.
```js
videoPlayer.prepare((err) => {
if (typeof (err) == 'undefined') {
if (err == null) {
console.info('prepare success!');
} else {
console.info('prepare fail!');
......@@ -741,7 +740,7 @@ Starts to play video resources. This API uses a callback to return the result.
```js
videoPlayer.play((err) => {
if (typeof (err) == 'undefined') {
if (err == null) {
console.info('play success!');
} else {
console.info('play fail!');
......@@ -791,7 +790,7 @@ Pauses video playback. This API uses a callback to return the result.
```js
videoPlayer.pause((err) => {
if (typeof (err) == 'undefined') {
if (err == null) {
console.info('pause success!');
} else {
console.info('pause fail!');
......@@ -841,7 +840,7 @@ Stops video playback. This API uses a callback to return the result.
```js
videoPlayer.stop((err) => {
if (typeof (err) == 'undefined') {
if (err == null) {
console.info('stop success!');
} else {
console.info('stop fail!');
......@@ -891,7 +890,7 @@ Switches the video resource to be played. This API uses a callback to return the
```js
videoPlayer.reset((err) => {
if (typeof (err) == 'undefined') {
if (err == null) {
console.info('reset success!');
} else {
console.info('reset fail!');
......@@ -942,7 +941,7 @@ Seeks to the specified playback position. The next key frame at the specified po
```js
videoPlayer.seek((seekTime, err) => {
if (typeof (err) == 'undefined') {
if (err == null) {
console.info('seek success!');
} else {
console.info('seek fail!');
......@@ -970,7 +969,7 @@ Seeks to the specified playback position. This API uses a callback to return the
```js
videoPlayer.seek((seekTime, seekMode, err) => {
if (typeof (err) == 'undefined') {
if (err == null) {
console.info('seek success!');
} else {
console.info('seek fail!');
......@@ -1034,7 +1033,7 @@ Sets the volume. This API uses a callback to return the result.
```js
videoPlayer.setVolume((vol, err) => {
if (typeof (err) == 'undefined') {
if (err == null) {
console.info('setVolume success!');
} else {
console.info('setVolume fail!');
......@@ -1090,7 +1089,7 @@ Releases the video playback resource. This API uses a callback to return the res
```js
videoPlayer.release((err) => {
if (typeof (err) == 'undefined') {
if (err == null) {
console.info('release success!');
} else {
console.info('release fail!');
......@@ -1148,7 +1147,7 @@ function printfDescription(obj) {
}
videoPlayer.getTrackDescription((error, arrlist) => {
if (typeof (arrlist) != 'undefined') {
if (arrlist != null) {
for (let i = 0; i < arrlist.length; i++) {
printfDescription(arrlist[i]);
}
......@@ -1185,7 +1184,7 @@ function printfDescription(obj) {
let arrayDescription;
videoPlayer.getTrackDescription().then((arrlist) => {
if (typeof (arrlist) != 'undefined') {
if (arrlist != null) {
arrayDescription = arrlist;
} else {
console.log('video getTrackDescription fail');
......@@ -1217,7 +1216,7 @@ Sets the video playback speed. This API uses a callback to return the result.
```js
videoPlayer.setSpeed((speed:number, err) => {
if (typeof (err) == 'undefined') {
if (err == null) {
console.info('setSpeed success!');
} else {
console.info('setSpeed fail!');
......@@ -1353,7 +1352,7 @@ videoPlayer.on('videoSizeChanged', (width, height) => {
on(type: 'error', callback: ErrorCallback): void
Subscribes to the video playback error event.
Subscribes to video playback error events.
**System capability**: SystemCapability.Multimedia.Media.VideoPlayer
......@@ -1438,7 +1437,7 @@ function printfItemDescription(obj, key) {
}
audioPlayer.getTrackDescription((error, arrlist) => {
if (typeof (arrlist) != 'undefined') {
if (arrlist != null) {
for (let i = 0; i < arrlist.length; i++) {
printfItemDescription(arrlist[i], MD_KEY_TRACK_TYPE); // Print the MD_KEY_TRACK_TYPE value of each track.
}
......@@ -1656,7 +1655,7 @@ audioRecorder.prepare(audioRecorderConfig)
on(type: 'error', callback: ErrorCallback): void
Subscribes to the audio recording error event.
Subscribes to audio recording error events.
**System capability**: SystemCapability.Multimedia.Media.AudioRecorder
......@@ -1692,7 +1691,7 @@ Describes audio recording configurations.
| numberOfChannels | number | No | Number of audio channels. The default value is **2**. |
| format<sup>(deprecated)</sup> | [AudioOutputFormat](#audiooutputformat) | No | Audio output format. The default value is **MPEG_4**.<br>**Note**: This parameter is deprecated since API version 8. Use **fileFormat** instead. |
| location | [Location](#location) | No | Geographical location of the recorded audio. |
| uri | string | Yes | Audio output URI. Supported: fd://xx (fd number)<br>![](figures/en-us_image_url.png)<br>The file must be created by the caller and granted with proper permissions.|
| uri | string | Yes | Audio output URI. Supported: fd://xx (fd number)<br>![](figures/en-us_image_url.png) <br>The file must be created by the caller and granted with proper permissions.|
| audioEncoderMime<sup>8+</sup> | [CodecMimeType](#codecmimetype8) | No | Audio encoding format. |
| fileFormat<sup>8+</sup> | [ContainerFormatType](#containerformattype8) | No | Audio encoding format. |
......
......@@ -115,7 +115,7 @@ Returns to the previous page or a specified page.
**Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| options | [RouterOptions](#routeroptions) | Yes| Description of the page. The **url** parameter indicates the URL 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.|
| options | [RouterOptions](#routeroptions) | Yes| Description of the page. The **url** parameter indicates the URL of the page to return to. If the specified page does not exist in the page stack, the application does not respond. If no URL is set, the previous page is returned, and the page in the page stack is not reclaimed. It will be reclaimed after being popped up.|
**Example**
```js
......
......@@ -21,7 +21,7 @@ getUriSync(name: string): string
Obtains the URI of a data item.
**System capability**: SystemCapability.Applictaions.settings.Core
**System capability**: SystemCapability.Applications.settings.Core
**Parameters**
......@@ -49,7 +49,7 @@ getValueSync(dataAbilityHelper: DataAbilityHelper, name: string, defValue: strin
Obtains the value of a data item.
**System capability**: SystemCapability.Applictaions.settings.Core
**System capability**: SystemCapability.Applications.settings.Core
**Parameters**
| Name| Type| Mandatory| Description|
......@@ -87,7 +87,7 @@ If the specified data item exists in the database, the **setValueSync** method u
**Required permissions**: ohos.permission.WRITE_SYSTEM_SETTING
**System capability**: SystemCapability.Applictaions.settings.Core
**System capability**: SystemCapability.Applications.settings.Core
**Parameters**
......
# Media Query
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> **NOTE**
>
> - The APIs of this module are no longer maintained since API version 7. You are advised to use [`@ohos.mediaquery`](js-apis-mediaquery.md) instead.
> - The initial APIs of this module are supported since API version 3. Newly added APIs will be marked with a superscript to indicate their earliest API version.
......@@ -38,11 +39,7 @@ Creates a **MediaQueryList** object based on the query condition.
**Example**
```
export default {
matchMedia() {
var mMediaQueryList = mediaquery.matchMedia('(max-width: 466)');
},
}
var mMediaQueryList = mediaquery.matchMedia('(max-width: 466)');
```
## MediaQueryEvent
......@@ -95,11 +92,16 @@ Adds a listener for this **MediaQueryList** object. The listener must be added b
| Name | Type | Mandatory | Description |
| -------- | -------------------------------- | ---- | -------------- |
| callback | (event: MediaQueryEvent) => void | Yes | Callback invoked when the matching condition changes.|
| callback | (event: MediaQueryEvent) => void | Yes | Callback invoked when the query condition changes.|
**Example**
```
function maxWidthMatch(){
if(e.mathes){
// do something
}
}
mMediaQueryList.addListener(maxWidthMatch);
```
......@@ -116,10 +118,15 @@ Removes the listener for this **MediaQueryList** object.
| Name | Type | Mandatory | Description |
| -------- | --------------------------------- | ---- | -------------- |
| callback | (event: MediaQueryEvent) => void) | Yes | Callback invoked when the matching condition changes.|
| callback | (event: MediaQueryEvent) => void) | Yes | Callback invoked when the query condition changes.|
**Example**
```
function maxWidthMatch(){
if(e.mathes){
// do something
}
}
mMediaQueryList.removeListener(maxWidthMatch);
```
......@@ -7,6 +7,8 @@ This module provides WebGL APIs that correspond to the OpenGL ES 2.0 feature set
> **NOTE**
>
> The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
>
> WebGL complies with the OpenGL protocol and does not support multi-thread calling.
## Invoking Method
......@@ -90,7 +92,7 @@ gl.clearColor(0.0, 0.0, 0.0, 1.0);
WebGLContextAttributes
| Name| Type| Mandatory|
| Name| Type| Mandatory|
| -------- | -------- | -------- |
| alpha | boolean | No|
| depth | boolean | No|
......@@ -107,7 +109,7 @@ WebGLContextAttributes
WebGLActiveInfo
| Name| Type| Mandatory|
| Name| Type| Mandatory|
| -------- | -------- | -------- |
| size | GLint | Yes|
| type | GLenum | Yes|
......@@ -118,7 +120,7 @@ WebGLActiveInfo
WebGLShaderPrecisionFormat
| Name| Type| Mandatory|
| Name| Type| Mandatory|
| -------- | -------- | -------- |
| rangeMin | GLint | Yes|
| rangeMax | GLint | Yes|
......@@ -132,7 +134,7 @@ WebGLRenderingContextBase
### Attributes
| Name| Type| Mandatory|
| Name| Type| Mandatory|
| -------- | -------- | -------- |
| DEPTH_BUFFER_BIT | GLenum | Yes|
| STENCIL_BUFFER_BIT | GLenum | Yes|
......@@ -435,7 +437,7 @@ WebGLRenderingContextBase
### Methods
| Method| Return Value Type|
| Method| Return Value Type|
| -------- | -------- |
| getContextAttributes() | WebGLContextAttributes \| null |
| isContextLost() | boolean |
......@@ -561,14 +563,14 @@ WebGLRenderingContextBase
WebGLRenderingContextOverloads
| Method| Return Value Type|
| Method| Return Value Type|
| -------- | -------- |
| bufferData(target: GLenum, size: GLsizeiptr, usage: GLenum) | void |
| bufferData(target: GLenum, data: BufferSource \| null, usage: GLenum) | void |
| bufferSubData(target: GLenum, offset: GLintptr, data: BufferSource) | void |
| compressedTexImage2D(target: GLenum, level: GLint, internalformat: GLenum, width: GLsizei, height: GLsizei, border: GLint, data: ArrayBufferView) | void |
| compressedTexSubImage2D(target: GLenum, level: GLint, xoffset: GLint, yoffset: GLint, width: GLsizei, height: GLsizei, format: GLenum, data: ArrayBufferView) | void |
| readPixels(x: GLint, y: GLint, width: GLsizei, height: GLsizei, format: GLenum, type: GLenum, pixels: ArrayBufferView \| null) | void; |
| readPixels(x: GLint, y: GLint, width: GLsizei, height: GLsizei, format: GLenum, type: GLenum, pixels: ArrayBufferView \| null) | void |
| texImage2D(target: GLenum, level: GLint, internalformat: GLint, width: GLsizei, height: GLsizei, border: GLint, format: GLenum, type: GLenum, pixels: ArrayBufferView \| null) | void |
| texImage2D(target: GLenum, level: GLint, internalformat: GLint, format: GLenum, type: GLenum, source: TexImageSource) | void |
| texSubImage2D(target: GLenum, level: GLint, xoffset: GLint, yoffset: GLint, width: GLsizei, height: GLsizei, format: GLenum, type: GLenum, pixels: ArrayBufferView \| null) | void |
......
......@@ -7,6 +7,8 @@ This module provides WebGL APIs that correspond to the OpenGL ES 3.0 feature set
> **NOTE**
>
> The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
>
> WebGL2 complies with the OpenGL protocol and does not support multi-thread calling.
## Invoking Method
......
# JavaScript-based Web-like Development Paradigm
- Components
- Common
- Universal Component Information
- [Universal Attributes](js-components-common-attributes.md)
- [Universal Styles](js-components-common-styles.md)
- [Universal Events](js-components-common-events.md)
......@@ -12,8 +11,7 @@
- [Media Query](js-components-common-mediaquery.md)
- [Custom Font Styles](js-components-common-customizing-font.md)
- [Atomic Layout](js-components-common-atomic-layout.md)
- Container Component
- Container Components
- [badge](js-components-container-badge.md)
- [dialog](js-components-container-dialog.md)
- [div](js-components-container-div.md)
......@@ -31,8 +29,7 @@
- [tabs](js-components-container-tabs.md)
- [tab-bar](js-components-container-tab-bar.md)
- [tab-content](js-components-container-tab-content.md)
- Basic Components
- Basic Components
- [button](js-components-basic-button.md)
- [chart](js-components-basic-chart.md)
- [divider](js-components-basic-divider.md)
......@@ -61,11 +58,9 @@
- [toolbar-item](js-components-basic-toolbar-item.md)
- [toggle](js-components-basic-toggle.md)
- [web](js-components-basic-web.md)
- Media Components
- Media Components
- [video](js-components-media-video.md)
- Canvas Components
- Canvas Components
- [canvas](js-components-canvas-canvas.md)
- [CanvasRenderingContext2D](js-components-canvas-canvasrenderingcontext2d.md)
- [Image](js-components-canvas-image.md)
......@@ -75,14 +70,12 @@
- [ImageBitmap](js-components-canvas-imagebitmap.md)
- [OffscreenCanvas](js-components-canvas-offscreencanvas.md)
- [OffscreenCanvasRenderingContext2D](js-offscreencanvasrenderingcontext2d.md)
- Grid
- Grid Components
- [Basic Concepts](js-components-grid-basic-concepts.md)
- [grid-container](js-components-grid-container.md)
- [grid-row](js-components-grid-row.md)
- [grid-col](js-components-grid-col.md)
- SVG Components
- SVG Components
- [Universal Attributes](js-components-svg-common-attributes.md)
- [svg](js-components-svg.md)
- [rect](js-components-svg-rect.md)
......@@ -99,6 +92,7 @@
- [animateMotion](js-components-svg-animatemotion.md)
- [animateTransform](js-components-svg-animatetransform.md)
- Custom Components
- [Basic Usage](js-components-custom-basic-usage.md)
- [Custom Events](js-components-custom-events.md)
......@@ -106,5 +100,4 @@
- [Event Parameter](js-components-custom-event-parameter.md)
- [slot](js-components-custom-slot.md)
- [Lifecycle Definition](js-components-custom-lifecycle.md)
- [Type Attributes](js-appendix-types.md)
- [Data Type Attributes](js-appendix-types.md)
# Type Attributes
# Data Type Attributes
## Length Type
| Name | Type | Description |
| ---------- | ---------------- | ------------------------------------------------------------ |
| length | string \| number | Size unit. When the type is **number**, the unit is px. When the type is **string**, the pixel unit needs to be explicitly specified. Currently, the following pixel units are supported:<br/>- **px**: logical size unit.<br/>- **fp**<sup>6+</sup>: font size unit, which varies according to the system font size. Only text components support the setting of the font size. |
| ---------- | -------------------------- | ---------------------------------------- |
| length | string&nbsp;\|&nbsp;number | Size unit. When the type is **number**, the unit is px. When the type is **string**, the pixel unit needs to be explicitly specified. Currently, the following pixel units are supported:<br>- **px**: logical size unit.<br>- **fp**<sup>6+</sup>: font size unit, which varies with the system font size. This unit is only available for text components.|
| percentage | string | Unit in percentage, for example, **50%**. |
## Color Type
| Name | Type | Description |
| ----- | ---------------------------------- | ------------------------------------------------------------ |
| color | string \| Color enumeration values | Color information.<br/>The String format is as follows:<br/>- 'rgb(255, 255, 255)'<br/>- 'rgba(255, 255, 255, 1.0)'<br/>- HEX formats: #rrggbb and #aarrggbb<br/>- Enumeration format: 'black' and 'white'<br/>NOTE:<br/>The enumeration format is not supported in the JS script. |
| ----- | --------------------- | ---------------------------------------- |
| color | string&nbsp;\|&nbsp; color enums| Color information. The color enums are not supported in JavaScript scripts.<br>Available string formats are as follows:<br>-&nbsp;'rgb(255,&nbsp;255,&nbsp;255)'<br>-&nbsp;'rgba(255,&nbsp;255,&nbsp;255,&nbsp;1.0)'<br>- HEX format: '\#rrggbb', '\#aarrggbb'<br>- Enumeration format: 'black','white'.|
**Table 1** Currently supported colors
**Table 1** Color enums
| Name | Hexadecimal Code | Color |
| -------------------- | ---------------- | ------------------------------------------------------------ |
| -------------------- | -------- | ---------------------------------------- |
| aliceblue | \#f0f8ff | ![en-us_image_0000001173324803](figures/en-us_image_0000001173324803.png) |
| antiquewhite | \#faebd7 | ![en-us_image_0000001127285014](figures/en-us_image_0000001127285014.png) |
| aqua | \#00ffff | ![en-us_image_0000001127285050](figures/en-us_image_0000001127285050.png) |
......@@ -164,6 +165,3 @@
| whitesmoke | \#f5f5f5 | ![en-us_image_0000001127284992](figures/en-us_image_0000001127284992.png) |
| yellow | \#ffff00 | ![en-us_image_0000001173324837](figures/en-us_image_0000001173324837.png) |
| yellowgreen | \#9acd32 | ![en-us_image_0000001173164923](figures/en-us_image_0000001173164923.png) |
# Transition Styles
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** Supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
> **NOTE**
>
> Supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
## Transition of Shared Elements
### Attributes
| Name | Type | Default Value | Description |
| ------- | ------ | ------------- | ------------------------------------------------------------ |
| shareid | string | - | Used for the transition of shared elements and takes effect only when it is configured.**list-item**, **image**, **text**, **button**, and **label** components are supported for the transition of shared elements. |
| ------- | ------ | ---- | ---------------------------------------- |
| shareid | string | - | Used for the transition of shared elements, which takes effect only when this attribute is set. **\<list-item>**, **\<image>**, **\<text>**, **\<button>**, and **\<label>** components are supported for the transition of shared elements. |
### Styles
| Name | Type | Default Value | Description |
| --------------------------------- | ------ | ------------- | ------------------------------------------------------------ |
| shared-transition-effect | string | exchange | Entry style of a shared element during transition.<br> - **exchange** (default): The source page element is moved to the position of the target page element and is zoomed in or out properly. <br>- **static**: The position of the target page element remains unchanged. You can configure the opacity animation. Currently, only the static effect configured on the target page takes effect. |
| shared-transition-name | string | - | During the transition, the style configured on the target page takes effect preferentially. This style is used to configure the animation effect of shared elements. The animation effect is an animation sequence defined by **@keyframes** supporting transform and opacity animations. If the effect of shared elements conflicts with the custom animation, the latter is used. |
| shared-transition-timing-function | string | friction | During the transition, the style configured on the target page takes effect preferentially. This style defines the difference curve during the transition of shared elements. If it is not configured, the friction curve is used. |
| --------------------------------- | ------ | -------- | ---------------------------------------- |
| shared-transition-effect | string | exchange | Entry style of a shared element during transition.<br>-&nbsp;**exchange** (default): The source page element is moved to the position of the target page element and is zoomed in or out properly.<br>-&nbsp;**static**: The position of the target page element remains unchanged. You can configure the opacity animation. Currently, only the static effect configured on the target page takes effect.|
| shared-transition-name | string | - | During the transition, the style configured on the target page takes effect preferentially. This style is used to configure the animation effect of shared elements. The animation effect is an animation sequence defined by **@keyframes** supporting transform and opacity animations. If the effect of shared elements conflicts with the custom animation, the latter is used.|
| shared-transition-timing-function | string | friction | During the transition, the style configured on the target page takes effect preferentially. This style defines the difference curve during the transition of shared elements. If it is not configured, the friction curve is used.|
### Important Notes
1. If the shared element transition style and custom page transition style are both configured, the latter is used.
2. The exchange effect of shared elements is similar to the transition shown below.
**Figure 1** Default transition effect of shared elements ![en-us_image_0000001238424309](figures/en-us_image_0000001238424309.png)
**Figure 1** Default transition effect of shared elements
![en-us_image_0000001238424309](figures/en-us_image_0000001238424309.png)
3. The animation of a shared element does not take effect for the border and background color of the element.
4. During the transition of a shared element, the page element is hidden. Therefore, the animation style and function set for the page element are invalid.
5. During the dynamic change of **shareid**<sup>5+</sup>, if the **shareid** value in component A is overwritten by that in component B, the shared element effect of component A becomes ineffective and will not be restored even if the **shareid** value is changed in component B.
1. The animation of a shared element does not take effect for the border and background color of the element.
2. During the transition of a shared element, the page element is hidden. Therefore, the animation style and function set for the page element are invalid.
3. During the dynamic change of **shareid**<sup>5+</sup>, if the **shareid** value in component A is overwritten by that in component B, the shared element effect of component A becomes ineffective and will not be restored even if the **shareid** value is changed in component B.
### Example
In the example below, where **PageA** jumps to **PageB**, the shared element is **image**, and the **shareid** is "shareImage".
```
```html
<!-- PageA -->
<!-- xxx.hml -->
<div>
<list>
<list-item type="description">
<image src="item.jpg" shareid="shareImage" onclick="jump" class="shared-transition-style"></image>
<text onclick="jump">Click on picture to Jump to ths details</text>
</list-item>
<list-item>
<text onclick="jump">Click on picture to Jump to the details</text>
</list-item>
</list>
</div>
```
```js
// xxx.js
import router from '@system.router';
export default {
jump() {
router.push({
uri: 'detailpage',
// The path must be the same as that in the config.json file.
uri: 'pages/detailpage',
});
},
}
```
```css
/* xxx.css */
.shared-transition-style {
shared-transition-effect: exchange;
......@@ -62,11 +81,17 @@ export default {
from { opacity: 0; }
to { opacity: 1; }
}
```
```html
<!-- PageB -->
<!-- xxx.hml -->
<div>
<image src="itemDetail.jpg" shareid="shareImage" onclick="jumpBack" class="shared-transition-style"></image>
</div>
```
```js
// xxx.js
import router from '@system.router';
export default {
......@@ -74,6 +99,9 @@ export default {
router.back();
},
}
```
```css
/* xxx.css */
.shared-transition-style {
shared-transition-effect: exchange;
......@@ -85,21 +113,26 @@ export default {
}
```
## Card Transition
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** Card transitions are not available when other transitions (including shared element transitions and custom transitions) are used.
## Widget Transition
> **NOTE**
>
> Widget transitions are not available when other transitions (including shared element transitions and custom transitions) are used.
### Styles
| Name | Type | Default Value | Description |
| ----------------- | ------ | ------------- | ------------------------------------------------------------ |
| transition-effect | string | - | Whether a component on the current page displays the transition effect during a card transition. Available values are as follows: - **unfold**: The component will move upwards by one card height if the component is located above the card tapped by the user, or move downwards by one card height if the component is located below the card. - **none**: No transition effect is displayed. |
| ----------------- | ------ | ---- | ---------------------------------------- |
| transition-effect | string | - | Whether a component on the current page displays the transition effect during a widget transition. Available values are as follows:<br>-&nbsp;**unfold**: The component will move upwards by one widget height if the component is located above the widget tapped by the user, or move downwards by one widget height if the component is located below the widget.<br>-&nbsp;**none**: No transition effect is displayed. |
### Example
The **source_page** has a title area on the top and a card list. Users can tap a card to switch to the **target_page**.
The **source_page** has a title area on the top and a widget list. Users can tap a widget to switch to the **target_page**.
```
```html
<!-- source_page -->
<!-- xxx.hml -->
<div class="container">
......@@ -112,6 +145,9 @@ The **source_page** has a title area on the top and a card list. Users can tap a
</list-item>
</list>
</div>
```
```js
// xxx.js
import router from '@system.router'
export default {
......@@ -128,6 +164,9 @@ export default {
router.push({ uri: uri, params : { ref : cardId } });
}
}
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -145,6 +184,9 @@ export default {
align-items: flex-end;
transition-effect: unfold;
}
```
```html
<!-- target_page -->
<!-- xxx.hml -->
<div class="container">
......@@ -152,6 +194,9 @@ export default {
<text style="font-size: 30px">this is detail</text>
</div>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -168,16 +213,19 @@ export default {
![en-us_image_0000001193544358](figures/en-us_image_0000001193544358.gif)
## Page Transition Styles
## Page Transition
### Styles
| Name | Type | Default Value | Description |
| -------------------------- | ------ | ------------------------------------------------------ | ------------------------------------------------------------ |
| transition-enter | string | - | Works with **@keyframes** and supports transform and opacity animations. For details, see [Attributes available for the @keyframes rule](js-components-common-animation.md). |
| transition-exit | string | - | Works with **@keyframes** and supports transform and opacity animations. For details, see [Attributes available for the @keyframes rule](js-components-common-animation.md). |
| -------------------------- | ------ | ------------- | ---------------------------------------- |
| transition-enter | string | - | Works with **@keyframes** and supports transform and opacity animations. For details, see [Attributes available for the @keyframes rule](../arkui-js/js-components-common-animation.md).|
| transition-exit | string | - | Works with **@keyframes** and supports transform and opacity animations. For details, see [Attributes available for the @keyframes rule](../arkui-js/js-components-common-animation.md).|
| transition-duration | string | Follows the default page transition time of the device | The unit can be s or ms. The default unit is ms. If no value is specified, the default value is used. |
| transition-timing-function | string | friction | Speed curve of the transition animation, which makes the animation more fluent. For details, see the description of **animation-timing-function **in [Animation Styles](js-components-common-animation.md). |
| transition-timing-function | string | friction | Speed curve of the transition animation, which makes the animation more fluent. For details, see the description of **animation-timing-function **in [Animation Styles](../arkui-js/js-components-common-animation.md).|
### Important Notes
......@@ -187,9 +235,11 @@ export default {
3. Notes on the **transition-enter** and **transition-exit** styles:
a. In the push scenario, the animation defined by **transition-enter** is used for entering the **Page2.js** in the page stack; the animation defined by **transition-exit** is used for entering the **Page1.js** in the page stack. ![en-us_image_0000001193704354](figures/en-us_image_0000001193704354.png)
a. In the push scenario, the animation defined by **transition-enter** is used for entering the **Page2.js** in the page stack; the animation defined by **transition-exit** is used for entering the **Page1.js** in the page stack.
![en-us_image_0000001193704354](figures/en-us_image_0000001193704354.png)
b. In the back scenario, the animation defined by **transition-enter** is used for exiting the **Page2.js** in the page stack, with the animation played in reverse sequence; the animation defined by **transition-exit** is used for exiting the **Page1.js** in the page stack, with the animation played in reverse sequence. ![en-us_image_0000001238184345](figures/en-us_image_0000001238184345.png)
b. In the back scenario, the animation defined by **transition-enter** is used for exiting the **Page2.js** in the page stack, with the animation played in reverse sequence; the animation defined by **transition-exit** is used for exiting the **Page1.js** in the page stack, with the animation played in reverse sequence.
![en-us_image_0000001238184345](figures/en-us_image_0000001238184345.png)
### Example
......@@ -197,7 +247,7 @@ export default {
1. Page1
```
```html
<!-- xxx.hml -->
<div class="container">
<text>index</text>
......@@ -205,8 +255,8 @@ export default {
</div>
```
```
<!-- xxx.js -->
```css
// xxx.js
import router from '@system.router';
export default {
data: {
......@@ -220,8 +270,8 @@ export default {
}
```
```
<!-- xxx.css -->
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
......@@ -263,9 +313,10 @@ export default {
}
```
2. Page2
```
```html
<!-- xxx.hml -->
<div class="container">
<text>transition</text>
......@@ -273,8 +324,8 @@ export default {
</div
```
```
<!-- xxx.js -->
```js
// xxx.js
import router from '@system.router';
export default {
data: {
......@@ -286,8 +337,8 @@ export default {
}
```
```
<!-- xxx.css -->
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
......
# TypeScript-based Declarative Development Paradigm
- Components
- Universal Components
- Universal Component Information
- Universal Events
- [Click Event](ts-universal-events-click.md)
- [Touch Event](ts-universal-events-touch.md)
......@@ -47,7 +46,7 @@
- [RotationGesture](ts-basic-gestures-rotationgesture.md)
- [SwipeGesture](ts-basic-gestures-swipegesture.md)
- [Combined Gestures](ts-combined-gestures.md)
- Basic Components
- Basic Components
- [Blank](ts-basic-components-blank.md)
- [Button](ts-basic-components-button.md)
- [Checkbox](ts-basic-components-checkbox.md)
......@@ -82,8 +81,8 @@
- [TimePicker](ts-basic-components-timepicker.md)
- [Toggle](ts-basic-components-toggle.md)
- [Web](ts-basic-components-web.md)
- [Xcomponent](ts-basic-components-xcomponent.md)
- Container Components
- [XComponent](ts-basic-components-xcomponent.md)
- Container Components
- [AlphabetIndexer](ts-container-alphabet-indexer.md)
- [Badge](ts-container-badge.md)
- [Column](ts-container-column.md)
......@@ -106,9 +105,10 @@
- [Swiper](ts-container-swiper.md)
- [Tabs](ts-container-tabs.md)
- [TabContent](ts-container-tabcontent.md)
- Media Components
- Media Components
- [Video](ts-media-components-video.md)
- Drawing Components
- Drawing Components
- [Circle](ts-drawing-components-circle.md)
- [Ellipse](ts-drawing-components-ellipse.md)
- [Line](ts-drawing-components-line.md)
......@@ -117,7 +117,7 @@
- [Path](ts-drawing-components-path.md)
- [Rect](ts-drawing-components-rect.md)
- [Shape](ts-drawing-components-shape.md)
- Canvas Components
- Canvas Components
- [Canvas](ts-components-canvas-canvas.md)
- [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md)
- [OffscreenCanvasRenderingConxt2D](ts-offscreencanvasrenderingcontext2d.md)
......
# CanvasRenderingContext2D
> **NOTE**<br>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **\<RenderingContext>** component is used to draw rectangles, text, images, and other objects on a canvas.
> **NOTE**
>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## APIs
......@@ -1772,7 +1770,7 @@ Draws an image.
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| ------- | ---------------------------------------- | --------- | ------------- | ---------------------------------------- |
| ------- | ------------------------------------------------------------ | --------- | ------------- | ------------------------------------------------------------ |
| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) or [PixelMap](../apis/js-apis-image.md#pixelmap7) | Yes | null | Image resource. For details, see ImageBitmap or PixelMap. |
| sx | number | No | 0 | X-coordinate of the upper left corner of the rectangle used to crop the source image. |
| sy | number | No | 0 | Y-coordinate of the upper left corner of the rectangle used to crop the source image. |
......@@ -1780,8 +1778,8 @@ Draws an image.
| sHeight | number | No | 0 | Target height to crop the source image. |
| dx | number | Yes | 0 | X-coordinate of the upper left corner of the drawing area on the canvas. |
| dy | number | Yes | 0 | Y-coordinate of the upper left corner of the drawing area on the canvas. |
| dWidth | number | No | 0 | Width of the drawing area. |
| dHeight | number | No | 0 | Height of the drawing area. |
| dWidth | number | No | 0 | Width of the drawing area. If the width of the drawing area is different from that of the cropped image, the latter will be stretched or compressed to the former. |
| dHeight | number | No | 0 | Height of the drawing area. If the height of the drawing area is different from that of the cropped image, the latter will be stretched or compressed to the former. |
- Example
......
......@@ -25,7 +25,7 @@ None
| Name | Type | Description |
| -------- | -------- | -------- |
| type | [KeyType](#keytype-enums) | Type of a key. |
| [keyCode](../apis/js-apis-keycode.md) | number | Key code. |
| keyCode | number | Key code. |
| keyText | string | Key value. |
| keySource | [KeySource](#keysource-enums) | Type of the input device that triggers the key event. |
| deviceId | number | ID of the input device that triggers the key event. |
......
此差异已折叠。
此差异已折叠。
此差异已折叠。
......@@ -288,4 +288,4 @@ Data提供方可以自定义数据的增、删、改、查,以及文件打开
针对DataAbility开发,有以下相关实例可供参考:
- [`DataAbility`:DataAbility的创建与访问(eTS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/ability/DataAbility)
- [`DataAbility`:DataAbility的创建与访问(eTS)(API8)](https://gitee.com/openharmony/applications_app_samples/tree/master/ability/DataAbility)
此差异已折叠。
此差异已折叠。
此差异已折叠。
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册