diff --git a/zh-cn/application-dev/application-dev-guide.md b/zh-cn/application-dev/application-dev-guide.md index 1f33f72dc0f16c3f6c928b920e27c74139236b8d..7cd523be39e17b2323628402e546120fd7d90e20 100644 --- a/zh-cn/application-dev/application-dev-guide.md +++ b/zh-cn/application-dev/application-dev-guide.md @@ -1,10 +1,10 @@ -# 应用开发导读 +# 应用开发导读 应用开发文档用于指导开发者通过OpenHarmony提供的接口完成应用开发。当前应用开发文档提供了在标准系统上开发应用的JS接口。 -在这部分中，开发者可以通过“[入门](quick-start/Readme-CN.md)”来了解应用开发的基本方法。完整的接口清单和参考使用指导可参见“[JS参考规范](js-reference/Readme-CN.md)”。 +在这部分中，开发者可以通过“[入门](https://gitee.com/openharmony/docs/blob/5b6b26c33680dd1162a4df35c896e5ddefcb55b3/zh-cn/application-dev/quick-start/Readme-CN.md)”来了解应用开发的基本方法。完整的接口清单和参考使用指导可参见“[JS开发参考](https://gitee.com/openharmony/docs/blob/5b6b26c33680dd1162a4df35c896e5ddefcb55b3/zh-cn/application-dev/js-reference/Readme-CN.md)”。 -除此之外，为方便开发者对常用功能进行深入理解，还提供了[UI](ui/Readme-CN.md)、[媒体](media/Readme-CN.md)、[网络与连接](connectivity/Readme-CN.md)三个模块的开发指南。 +除此之外，为方便开发者对常用功能进行深入理解，还提供了[UI](https://gitee.com/openharmony/docs/blob/5b6b26c33680dd1162a4df35c896e5ddefcb55b3/zh-cn/application-dev/ui/Readme-CN.md)、[媒体](https://gitee.com/openharmony/docs/blob/5b6b26c33680dd1162a4df35c896e5ddefcb55b3/zh-cn/application-dev/media/Readme-CN.md)、[网络与连接](https://gitee.com/openharmony/docs/blob/5b6b26c33680dd1162a4df35c896e5ddefcb55b3/zh-cn/application-dev/connectivity/Readme-CN.md)三个模块的开发指南。 如果需要了解各子系统的原理和基本信息，可以参考“docs/zh-cn/readme”目录中各子系统readme的介绍。 diff --git "a/zh-cn/application-dev/connectivity/IPC\344\270\216RPC\351\200\232\344\277\241.md" "b/zh-cn/application-dev/connectivity/IPC\344\270\216RPC\351\200\232\344\277\241.md" deleted file mode 100644 index 60d8422b73afb4b58c7ef7b3245d68e4e585c722..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/connectivity/IPC\344\270\216RPC\351\200\232\344\277\241.md" +++ /dev/null @@ -1,9 +0,0 @@ -# IPC与RPC通信 - -- **[IPC与RPC通信概述](IPC与RPC通信概述.md)** - -- **[IPC与RPC通信开发指导](IPC与RPC通信开发指导.md)** - -- **[远端状态订阅开发实例](远端状态订阅开发实例.md)** - - diff --git a/zh-cn/application-dev/connectivity/Readme-CN.md b/zh-cn/application-dev/connectivity/Readme-CN.md index af63561d24f8260ee452d105e3efd4ea222171eb..846651b2554bc2f64eafb775b03b5d683a3f377d 100755 --- a/zh-cn/application-dev/connectivity/Readme-CN.md +++ b/zh-cn/application-dev/connectivity/Readme-CN.md @@ -1,7 +1,7 @@ # 网络与连接 -- [IPC与RPC通信](IPC与RPC通信.md) - - [IPC与RPC通信概述](IPC与RPC通信概述.md) - - [IPC与RPC通信开发指导](IPC与RPC通信开发指导.md) - - [远端状态订阅开发实例](远端状态订阅开发实例.md) +- [IPC与RPC通信](ipc-rpc.md) + - [IPC与RPC通信概述](ipc-rpc-overview.md) + - [IPC与RPC通信开发指导](ipc-rpc-development-guideline.md) + - [远端状态订阅开发实例](subscribe-remote-state.md) diff --git "a/zh-cn/application-dev/connectivity/IPC\344\270\216RPC\351\200\232\344\277\241\345\274\200\345\217\221\346\214\207\345\257\274.md" b/zh-cn/application-dev/connectivity/ipc-rpc-development-guideline.md old mode 100755 new mode 100644 similarity index 100% rename from "zh-cn/application-dev/connectivity/IPC\344\270\216RPC\351\200\232\344\277\241\345\274\200\345\217\221\346\214\207\345\257\274.md" rename to zh-cn/application-dev/connectivity/ipc-rpc-development-guideline.md diff --git "a/zh-cn/application-dev/connectivity/IPC\344\270\216RPC\351\200\232\344\277\241\346\246\202\350\277\260.md" b/zh-cn/application-dev/connectivity/ipc-rpc-overview.md old mode 100755 new mode 100644 similarity index 100% rename from "zh-cn/application-dev/connectivity/IPC\344\270\216RPC\351\200\232\344\277\241\346\246\202\350\277\260.md" rename to zh-cn/application-dev/connectivity/ipc-rpc-overview.md diff --git a/zh-cn/application-dev/connectivity/ipc-rpc.md b/zh-cn/application-dev/connectivity/ipc-rpc.md new file mode 100644 index 0000000000000000000000000000000000000000..eab1edb479701933c6112b64c3ac0c8e61a7578d --- /dev/null +++ b/zh-cn/application-dev/connectivity/ipc-rpc.md @@ -0,0 +1,9 @@ +# IPC与RPC通信 + +- **[IPC与RPC通信概述](ipc-rpc-overview.md)** + +- **[IPC与RPC通信开发指导](ipc-rpc-development-guideline.md)** + +- **[远端状态订阅开发实例](subscribe-remote-state.md)** + + diff --git "a/zh-cn/application-dev/connectivity/\350\277\234\347\253\257\347\212\266\346\200\201\350\256\242\351\230\205\345\274\200\345\217\221\345\256\236\344\276\213.md" b/zh-cn/application-dev/connectivity/subscribe-remote-state.md old mode 100755 new mode 100644 similarity index 100% rename from "zh-cn/application-dev/connectivity/\350\277\234\347\253\257\347\212\266\346\200\201\350\256\242\351\230\205\345\274\200\345\217\221\345\256\236\344\276\213.md" rename to zh-cn/application-dev/connectivity/subscribe-remote-state.md diff --git a/zh-cn/application-dev/js-reference/Bundle.md b/zh-cn/application-dev/js-reference/Bundle.md deleted file mode 100644 index 38df3d405d6913577b659dd140ee0a72c8b533ce..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/Bundle.md +++ /dev/null @@ -1,1328 +0,0 @@ -### Bundle模块(JS端SDK接口) - -#### 支持设备 - -| API | 手机 | 平板 | 智慧屏 | 智能穿戴 | 轻量级智能穿戴 | 智慧视觉设备 | -| ------------------------------------------------------------ | ---- | ---- | ------ | -------- | -------------- | ------------ | -| Bundle.getApplicationInfo(bundleName: string, bundleFlags: number, userId: number) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| Bundle.getApplicationInfo(bundleName: string, bundleFlags: number, userId: number, callback: AsyncCallback) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| Bundle.getAllBundleInfo(bundlelFlag: BundleFlag) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| Bundle.getAllBundleInfo(bundlelFlag: BundleFlag, callback: AsyncCallback>) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| Bundle.getBundleInfo(bundleName: string, bundleFlags: number) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| Bundle.getBundleInfo(bundleName: string, bundleFlags: number, callback: AsyncCallback) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| Bundle.getAllApplicationInfo(bundleFlags: number, userId: number) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| Bundle.getAllApplicationInfo(bundleFlags: number, userId: number, callback: AsyncCallback>) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| Bundle.queryAbilityByWant(want: Want, bundleFlags: number, userId: number) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| Bundle.queryAbilityByWant(want: Want, bundleFlags: number, userId: number, callback: AsyncCallback>) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| Bundle.getPermissionDef(permissionName: string) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| Bundle.getPermissionDef(permissionName: string, callback: AsyncCallback) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| Bundle.getBundleArchiveInfo(hapFilePath: string, flags: number) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| Bundle.getBundleArchiveInfo(hapFilePath: string, flags: number, callback: AsyncCallback) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| Bundle.getBundleInstaller().install(bundleFilePaths: Array, param: InstallParam, callback: AsyncCallback) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| Bundle.getBundleInstaller().uninstall(bundleName: string, param: InstallParam, callback: AsyncCallback) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| Bundle.getAllShortcutInfo(bundleName: string): Promise> | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| Bundle.getAllShortcutInfo(bundleName: string, callback: AsyncCallback>) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| getModuleUsageRecords(maxNum: number): Promise> | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| getModuleUsageRecords(maxNum: number, callback: AsyncCallback>) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| checkPermission(bundleName: string, permission: string): Promise | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| checkPermission(bundleName: string, permission: string, callback: AsyncCallback) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | - -#### 权限列表 - -- - -#### 导入模块 - -``` -import bundle from '@ohos.bundle'; -``` - - - -#### getApplicationInfo(bundleName: string, bundleFlags: number, userId: number) - -* 功能说明 - - 根据给定的bundle名称获取ApplicationInfo - -* getApplicationInfo参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ----------- | -------- | ------ | ---- | ------------------------------------------------------- | - | bundleName | 只读 | string | 是 | 应用名 | - | bundleFlags | 只读 | number | 是 | 0：返回默认app信息<
8：返回包含permissions的app信息 | - | userId | 只读 | number | 是 | 用户ID | - -* 返回值 - - Promise：返回值为Promise对象，Promise中包含应用信息。 - -* 示例 - -``` -bundle.getApplicationInfo('com.example.myapplicationInstall', 8, 0).then((data) => { - console.info("name: for begin"); - console.info("name:" + data.name); - console.info("bundleName:" + data.bundleName); - console.info("description:" + data.description); - console.info("descriptionId:" + data.descriptionId); - console.info("iconPath:" + data.iconPath); - console.info("iconId:" + data.iconId); - console.info("label:" + data.label); - console.info("labelId:" + data.labelId); - console.info("deviceId:" + data.deviceId); - console.info("signatureKey:" + data.signatureKey); - console.info("process:" + data.process); - console.info("isSystemApp:" + data.isSystemApp); - console.info("isLauncherApp:" + data.isLauncherApp); - console.info("supportedModes:" + data.supportedModes); - - console.info('getApplicationInfo permissions length [' + data.permissions.length + ']'); - for (var j = 0; j < data.permissions.length; j++) { - console.info("permissions[" + j + "]:" + data.permissions[j]); - } - console.info('getApplicationInfo moduleSourceDirs length [' + data.moduleSourceDirs.length + ']'); - for (var j = 0; j < data.moduleSourceDirs.length; j++) { - console.info("moduleSourceDirs[" + j + "]:" + data.moduleSourceDirs[j]); - } - console.info('getApplicationInfo moduleInfos length [' + data.moduleInfos.length + ']'); - for (var j = 0; j < data.moduleInfos.length; j++) { - console.info("moduleInfos[" + j + "]moduleName:" + data.moduleInfos[j].moduleName); - console.info("moduleInfos[" + j + "]moduleSourceDir:" + data.moduleInfos[j].moduleSourceDir); - } - console.info("entryDir:" + data.entryDir); - console.info("codePath:" + data.codePath); - console.info("dataDir:" + data.dataDir); - console.info("dataBaseDir:" + data.dataBaseDir); - console.info("cacheDir:" + data.cacheDir); -}) -``` - - - -#### getApplicationInfo(bundleName: string, bundleFlags: number, userId: number, callback: AsyncCallback) - -* 功能说明 - - 根据给定的bundle名称获取ApplicationInfo - -* getApplicationInfo参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ----------- | -------- | ------------------------------ | ---- | ------------------------------------------------------- | - | bundleName | 只读 | string | 是 | 应用名 | - | bundleFlags | 只读 | number | 是 | 0：返回默认app信息<
8：返回包含permissions的app信息 | - | userId | 只读 | number | 是 | 用户ID | - | callback | 只读 | AsyncCallback | 是 | 回调方法 | - -* 返回值 - - void - -* 示例 - -``` -bundle.getApplicationInfo('com.example.myapplicationInstall', 8, 0, OnReceiveEvent); - -function OnReceiveEvent(err, data) { - console.info("name: for begin"); - console.info("name:" + data.name); - console.info("bundleName:" + data.bundleName); - console.info("description:" + data.description); - console.info("descriptionId:" + data.descriptionId); - console.info("iconPath:" + data.iconPath); - console.info("iconId:" + data.iconId); - console.info("label:" + data.label); - console.info("labelId:" + data.labelId); - console.info("deviceId:" + data.deviceId); - console.info("signatureKey:" + data.signatureKey); - console.info("process:" + data.process); - console.info("isSystemApp:" + data.isSystemApp); - console.info("isLauncherApp:" + data.isLauncherApp); - console.info("supportedModes:" + data.supportedModes); - - console.info('getApplicationInfo permissions length [' + data.permissions.length + ']'); - for (var j = 0; j < data.permissions.length; j++) { - console.info("permissions[" + j + "]:" + data.permissions[j]); - } - console.info('getApplicationInfo moduleSourceDirs length [' + data.moduleSourceDirs.length + ']'); - for (var j = 0; j < data.moduleSourceDirs.length; j++) { - console.info("moduleSourceDirs[" + j + "]:" + data.moduleSourceDirs[j]); - } - console.info('getApplicationInfo moduleInfos length [' + data.moduleInfos.length + ']'); - for (var j = 0; j < data.moduleInfos.length; j++) { - console.info("moduleInfos[" + j + "]moduleName:" + data.moduleInfos[j].moduleName); - console.info("moduleInfos[" + j + "]moduleSourceDir:" + data.moduleInfos[j].moduleSourceDir); - } - console.info("entryDir:" + data.entryDir); - console.info("codePath:" + data.codePath); - console.info("dataDir:" + data.dataDir); - console.info("dataBaseDir:" + data.dataBaseDir); - console.info("cacheDir:" + data.cacheDir); -} -``` - - - -#### getAllBundleInfo(bundleFlag: BundleFlag) - -* 功能说明 - - 获取系统中所有可用的包信息 - -* getAllBundleInfo参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ---------- | -------- | ---------- | ---- | ----------------------------------------------------------- | - | bundleFlag | 只读 | BundleFlag | 是 | 0：返回默认BundleInfo
1：返回包含abilityInfo的BundleInfo | - -* 返回值 - - Promise>：返回值为Promise对象，Promise中包含包信息列表。 - -* 示例 - -``` -bundle.getAllBundleInfo(0).then((data) => { - for (var i = 0; i < data.length; i++) { - console.info("index[" + i + "].name: for begin"); - console.info("index[" + i + "].name:" + data[i].name); - console.info("index[" + i + "].label:" + data[i].label); - console.info("index[" + i + "].description:" + data[i].description); - console.info("index[" + i + "].vendor:" + data[i].vendor); - console.info("index[" + i + "].versionCode:" + data[i].versionCode); - console.info("index[" + i + "].versionName:" + data[i].versionName); - console.info("index[" + i + "].jointUserId:" + data[i].jointUserId); - console.info("index[" + i + "].minSdkVersion:" + data[i].minSdkVersion); - console.info("index[" + i + "].maxSdkVersion:" + data[i].maxSdkVersion); - console.info("index[" + i + "].mainEntry:" + data[i].mainEntry); - console.info("index[" + i + "].cpuAbi:" + data[i].cpuAbi); - console.info("index[" + i + "].appId:" + data[i].appId); - console.info("index[" + i + "].compatibleVersion:" + data[i].compatibleVersion); - console.info("index[" + i + "].targetVersion:" + data[i].targetVersion); - console.info("index[" + i + "].releaseType:" + data[i].releaseType); - console.info("index[" + i + "].uid:" + data[i].uid); - console.info("index[" + i + "].gid:" + data[i].gid); - console.info("index[" + i + "].seInfo:" + data[i].seInfo); - console.info("index[" + i + "].entryModuleName:" + data[i].entryModuleName); - console.info("index[" + i + "].isKeepAlive:" + data[i].isKeepAlive); - console.info("index[" + i + "].isNativeApp:" + data[i].isNativeApp); - console.info("index[" + i + "].installTime:" + data[i].installTime); - console.info("index[" + i + "].updateTime:" + data[i].updateTime); - console.info("index[" + i + "].appInfo.name:" + data[i].applicationInfo.name); - console.info("index[" + i + "].appInfo.bundleName:" + data[i].applicationInfo.bundleName); - console.info('getAllBundleInfo reqPermissions length [' + data[i].reqPermissions.length + ']'); - for (var j = 0; j < data[i].reqPermissions.length; j++) { - console.info("index[" + i + "]reqPermissions[" + j + "]:" + data[i].reqPermissions[j]); - } - console.info('getAllBundleInfo defPermissions length [' + data[i].defPermissions.length + ']'); - for (var j = 0; j < data[i].defPermissions.length; j++) { - console.info("index[" + i + "]defPermissions[" + j + "]:" + data[i].defPermissions[j]); - } - - console.info('getAllBundleInfo hapModuleNames length [' + data[i].hapModuleNames.length + ']'); - for (var j = 0; j < data[i].hapModuleNames.length; j++) { - console.info("index[" + i + "]hapModuleNames[" + j + "]:" + data[i].hapModuleNames[j]); - } - console.info('getAllBundleInfo moduleNames length [' + data[i].moduleNames.length + ']'); - for (var j = 0; j < data[i].moduleNames.length; j++) { - console.info("index[" + i + "]moduleNames[" + j + "]:" + data[i].moduleNames[j]); - } - console.info('getAllBundleInfo modulePublicDirs length [' + data[i].modulePublicDirs.length + ']'); - for (var j = 0; j < data[i].modulePublicDirs.length; j++) { - console.info("index[" + i + "]modulePublicDirs[" + j + "]:" + data[i].modulePublicDirs[j]); - } - console.info('getAllBundleInfo moduleDirs length [' + data[i].moduleDirs.length + ']'); - for (var j = 0; j < data[i].moduleDirs.length; j++) { - console.info("index[" + i + "]moduleDirs[" + j + "]:" + data[i].moduleDirs[j]); - } - console.info('getAllBundleInfo moduleResPaths length [' + data[i].moduleResPaths.length + ']'); - for (var j = 0; j < data[i].moduleResPaths.length; j++) { - console.info("index[" + i + "]moduleResPaths[" + j + "]:" + data[i].moduleResPaths[j]); - } - console.info('getAllBundleInfo abilityInfo length [' + data[i].abilityInfos.length + ']'); - for (var j = 0; j < data[i].abilityInfos.length; j++) { - console.info("index[" + i + "]abilityInfos[" + j + "]name:" + data[i].abilityInfos[j].name); - console.info("index[" + i + "]abilityInfos[" + j + "]package:" + data[i].abilityInfos[j].package); - } - } -}) -``` - - - -#### getAllBundleInfo(bundleFlag: BundleFlag, callback: AsyncCallback>) - -* 功能说明 - - 获取系统中所有可用的包信息 - -* getAllBundleInfo参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ---------- | -------- | -------------------------------- | ---- | ------------------------------------------------------------ | - | bundleFlag | 只读 | BundleFlag | 是 | 0：返回默认BundleInfo
1：返回包含abilityInfo的BundleInfo | - | callback | 只读 | AsyncCallback> | 是 | 回调方法 | - -* 返回值 - - void - -* 示例 - -``` -bundle.getAllBundleInfo(0, OnReceiveEvent); - -function OnReceiveEvent(err, data) { - console.info('xxx getAllBundleInfo data length [' + data.length + ']'); - for (var i = 0; i < data.length; i++) { - console.info("index[" + i + "].name: for begin"); - console.info("index[" + i + "].name:" + data[i].name); - console.info("index[" + i + "].label:" + data[i].label); - console.info("index[" + i + "].description:" + data[i].description); - console.info("index[" + i + "].vendor:" + data[i].vendor); - console.info("index[" + i + "].versionCode:" + data[i].versionCode); - console.info("index[" + i + "].versionName:" + data[i].versionName); - console.info("index[" + i + "].jointUserId:" + data[i].jointUserId); - console.info("index[" + i + "].minSdkVersion:" + data[i].minSdkVersion); - console.info("index[" + i + "].maxSdkVersion:" + data[i].maxSdkVersion); - console.info("index[" + i + "].mainEntry:" + data[i].mainEntry); - console.info("index[" + i + "].cpuAbi:" + data[i].cpuAbi); - console.info("index[" + i + "].appId:" + data[i].appId); - console.info("index[" + i + "].compatibleVersion:" + data[i].compatibleVersion); - console.info("index[" + i + "].targetVersion:" + data[i].targetVersion); - console.info("index[" + i + "].releaseType:" + data[i].releaseType); - console.info("index[" + i + "].uid:" + data[i].uid); - console.info("index[" + i + "].gid:" + data[i].gid); - console.info("index[" + i + "].seInfo:" + data[i].seInfo); - console.info("index[" + i + "].entryModuleName:" + data[i].entryModuleName); - console.info("index[" + i + "].isKeepAlive:" + data[i].isKeepAlive); - console.info("index[" + i + "].isNativeApp:" + data[i].isNativeApp); - console.info("index[" + i + "].installTime:" + data[i].installTime); - console.info("index[" + i + "].updateTime:" + data[i].updateTime); - console.info("index[" + i + "].appInfo.name:" + data[i].applicationInfo.name); - console.info("index[" + i + "].appInfo.bundleName:" + data[i].applicationInfo.bundleName); - console.info('getAllBundleInfo reqPermissions length [' + data[i].reqPermissions.length + ']'); - for (var j = 0; j < data[i].reqPermissions.length; j++) { - console.info("index[" + i + "]reqPermissions[" + j + "]:" + data[i].reqPermissions[j]); - } - console.info('getAllBundleInfo defPermissions length [' + data[i].defPermissions.length + ']'); - for (var j = 0; j < data[i].defPermissions.length; j++) { - console.info("index[" + i + "]defPermissions[" + j + "]:" + data[i].defPermissions[j]); - } - - console.info('getAllBundleInfo hapModuleNames length [' + data[i].hapModuleNames.length + ']'); - for (var j = 0; j < data[i].hapModuleNames.length; j++) { - console.info("index[" + i + "]hapModuleNames[" + j + "]:" + data[i].hapModuleNames[j]); - } - console.info('getAllBundleInfo moduleNames length [' + data[i].moduleNames.length + ']'); - for (var j = 0; j < data[i].moduleNames.length; j++) { - console.info("index[" + i + "]moduleNames[" + j + "]:" + data[i].moduleNames[j]); - } - console.info('getAllBundleInfo modulePublicDirs length [' + data[i].modulePublicDirs.length + ']'); - for (var j = 0; j < data[i].modulePublicDirs.length; j++) { - console.info("index[" + i + "]modulePublicDirs[" + j + "]:" + data[i].modulePublicDirs[j]); - } - console.info('getAllBundleInfo moduleDirs length [' + data[i].moduleDirs.length + ']'); - for (var j = 0; j < data[i].moduleDirs.length; j++) { - console.info("index[" + i + "]moduleDirs[" + j + "]:" + data[i].moduleDirs[j]); - } - console.info('getAllBundleInfo moduleResPaths length [' + data[i].moduleResPaths.length + ']'); - for (var j = 0; j < data[i].moduleResPaths.length; j++) { - console.info("index[" + i + "]moduleResPaths[" + j + "]:" + data[i].moduleResPaths[j]); - } - console.info('getAllBundleInfo abilityInfo length [' + data[i].abilityInfos.length + ']'); - for (var j = 0; j < data[i].abilityInfos.length; j++) { - console.info("index[" + i + "]abilityInfos[" + j + "]name:" + data[i].abilityInfos[j].name); - console.info("index[" + i + "]abilityInfos[" + j + "]package:" + data[i].abilityInfos[j].package); - } - } -} -``` - - - -#### getBundleInfo(bundleName: string, bundleFlags: number) - -* 功能说明 - - 根据bundle名称获取BundleInfo - -* getBundleInfo参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ----------- | -------- | ------ | ---- | ------------------------------------------------------------ | - | bundleName | 只读 | string | 是 | 包名 | - | bundleFlags | 只读 | number | 是 | 0：返回默认BundleInfo
1：返回包含abilityInfo的BundleInfo | - -* 返回值 - - Promise：返回值为Promise对象，Promise中包含包信息。 - -* 示例 - -``` -bundle.getBundleInfo('com.example.myapplicationInstall', 1).then((data) => { - console.info("name:" + data.name); - console.info("label:" + data.label); - console.info("description:" + data.description); - console.info("vendor:" + data.vendor); - console.info("versionCode:" + data.versionCode); - console.info("versionName:" + data.versionName); - console.info("jointUserId:" + data.jointUserId); - console.info("minSdkVersion:" + data.minSdkVersion); - console.info("maxSdkVersion:" + data.maxSdkVersion); - console.info("mainEntry:" + data.mainEntry); - console.info("cpuAbi:" + data.cpuAbi); - console.info("appId:" + data.appId); - console.info("compatibleVersion:" + data.compatibleVersion); - console.info("targetVersion:" + data.targetVersion); - console.info("releaseType:" + data.releaseType); - console.info("uid:" + data.uid); - console.info("gid:" + data.gid); - console.info("seInfo:" + data.seInfo); - console.info("entryModuleName:" + data.entryModuleName); - console.info("isKeepAlive:" + data.isKeepAlive); - console.info("isNativeApp:" + data.isNativeApp); - console.info("installTime:" + data.installTime); - console.info("updateTime:" + data.updateTime); - console.info("appInfo.name:" + data.applicationInfo.name); - console.info("appInfo.bundleName:" + data.applicationInfo.bundleName); - console.info('getBundleInfo reqPermissions length [' + data.reqPermissions.length + ']'); - for (var j = 0; j < data.reqPermissions.length; j++) { - console.info("reqPermissions[" + j + "]:" + data.reqPermissions[j]); - } - console.info('getBundleInfo defPermissions length [' + data.defPermissions.length + ']'); - for (var j = 0; j < data.defPermissions.length; j++) { - console.info("defPermissions[" + j + "]:" + data.defPermissions[j]); - } - - console.info('getBundleInfo hapModuleNames length [' + data.hapModuleNames.length + ']'); - for (var j = 0; j < data.hapModuleNames.length; j++) { - console.info("hapModuleNames[" + j + "]:" + data.hapModuleNames[j]); - } - console.info('getBundleInfo moduleNames length [' + data.moduleNames.length + ']'); - for (var j = 0; j < data.moduleNames.length; j++) { - console.info("moduleNames[" + j + "]:" + data.moduleNames[j]); - } - console.info('getBundleInfo modulePublicDirs length [' + data.modulePublicDirs.length + ']'); - for (var j = 0; j < data.modulePublicDirs.length; j++) { - console.info("modulePublicDirs[" + j + "]:" + data.modulePublicDirs[j]); - } - console.info('getBundleInfo moduleDirs length [' + data.moduleDirs.length + ']'); - for (var j = 0; j < data.moduleDirs.length; j++) { - console.info("moduleDirs[" + j + "]:" + data.moduleDirs[j]); - } - console.info('getBundleInfo moduleResPaths length [' + data.moduleResPaths.length + ']'); - for (var j = 0; j < data.moduleResPaths.length; j++) { - console.info("moduleResPaths[" + j + "]:" + data.moduleResPaths[j]); - } - console.info('getBundleInfo abilityInfo length [' + data.abilityInfos.length + ']'); - for (var j = 0; j < data.abilityInfos.length; j++) { - console.info("abilityInfos[" + j + "]name:" + data.abilityInfos[j].name); - console.info("abilityInfos[" + j + "]package:" + data.abilityInfos[j].package); - } -}) -``` - - - -#### getBundleInfo(bundleName: string, bundleFlags: number, callback: AsyncCallback) - -* 功能说明 - - 根据bundle名称获取BundleInfo - -* getBundleInfo参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ----------- | -------- | ------------------------- | ---- | ------------------------------------------------------------ | - | bundleName | 只读 | string | 是 | 包名 | - | bundleFlags | 只读 | number | 是 | 0：返回默认BundleInfo
1：返回包含abilityInfo的BundleInfo | - | callback | 只读 | AsyncCallback | 是 | 回调方法 | - -* 返回值 - - void - -* 示例 - -``` -bundle.getBundleInfo('com.example.myapplicationInstall', 1, OnReceiveEvent); - -function OnReceiveEvent(err, data) { - console.info("name:" + data.name); - console.info("label:" + data.label); - console.info("description:" + data.description); - console.info("vendor:" + data.vendor); - console.info("versionCode:" + data.versionCode); - console.info("versionName:" + data.versionName); - console.info("jointUserId:" + data.jointUserId); - console.info("minSdkVersion:" + data.minSdkVersion); - console.info("maxSdkVersion:" + data.maxSdkVersion); - console.info("mainEntry:" + data.mainEntry); - console.info("cpuAbi:" + data.cpuAbi); - console.info("appId:" + data.appId); - console.info("compatibleVersion:" + data.compatibleVersion); - console.info("targetVersion:" + data.targetVersion); - console.info("releaseType:" + data.releaseType); - console.info("uid:" + data.uid); - console.info("gid:" + data.gid); - console.info("seInfo:" + data.seInfo); - console.info("entryModuleName:" + data.entryModuleName); - console.info("isKeepAlive:" + data.isKeepAlive); - console.info("isNativeApp:" + data.isNativeApp); - console.info("installTime:" + data.installTime); - console.info("updateTime:" + data.updateTime); - console.info("appInfo.name:" + data.applicationInfo.name); - console.info("appInfo.bundleName:" + data.applicationInfo.bundleName); - console.info('getBundleInfo reqPermissions length [' + data.reqPermissions.length + ']'); - for (var j = 0; j < data.reqPermissions.length; j++) { - console.info("reqPermissions[" + j + "]:" + data.reqPermissions[j]); - } - console.info('getBundleInfo defPermissions length [' + data.defPermissions.length + ']'); - for (var j = 0; j < data.defPermissions.length; j++) { - console.info("defPermissions[" + j + "]:" + data.defPermissions[j]); - } - - console.info('getBundleInfo hapModuleNames length [' + data.hapModuleNames.length + ']'); - for (var j = 0; j < data.hapModuleNames.length; j++) { - console.info("hapModuleNames[" + j + "]:" + data.hapModuleNames[j]); - } - console.info('getBundleInfo moduleNames length [' + data.moduleNames.length + ']'); - for (var j = 0; j < data.moduleNames.length; j++) { - console.info("moduleNames[" + j + "]:" + data.moduleNames[j]); - } - console.info('getBundleInfo modulePublicDirs length [' + data.modulePublicDirs.length + ']'); - for (var j = 0; j < data.modulePublicDirs.length; j++) { - console.info("modulePublicDirs[" + j + "]:" + data.modulePublicDirs[j]); - } - console.info('getBundleInfo moduleDirs length [' + data.moduleDirs.length + ']'); - for (var j = 0; j < data.moduleDirs.length; j++) { - console.info("moduleDirs[" + j + "]:" + data.moduleDirs[j]); - } - console.info('getBundleInfo moduleResPaths length [' + data.moduleResPaths.length + ']'); - for (var j = 0; j < data.moduleResPaths.length; j++) { - console.info("moduleResPaths[" + j + "]:" + data.moduleResPaths[j]); - } - console.info('getBundleInfo abilityInfo length [' + data.abilityInfos.length + ']'); - for (var j = 0; j < data.abilityInfos.length; j++) { - console.info("abilityInfos[" + j + "]name:" + data.abilityInfos[j].name); - console.info("abilityInfos[" + j + "]package:" + data.abilityInfos[j].package); - } -} -``` - - - -#### getAllApplicationInfo(bundleFlags: number, userId: number) - -* 功能说明 - - 获取指定用户下所有已安装的应用信息 - -* getAllApplicationInfo参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ----------- | -------- | ------ | ---- | ------------------------------------------------------- | - | bundleFlags | 只读 | number | 是 | 0：返回默认app信息<
8：返回包含permissions的app信息 | - | userId | 只读 | number | 是 | 用户ID | - -* 返回值 - - Promise>：返回值为Promise对象，Promise中包含应用信息列表。 - -* 示例 - -``` -bundle.getAllApplicationInfo(8, 0).then((data) => { - console.info('xxx getAllApplicationInfo data length [' + data.length + ']'); - for (var i = 0; i < data.length; i++) { - console.info("index[" + i + "].name: for begin"); - console.info("index[" + i + "].name:" + data[i].name); - console.info("index[" + i + "].bundleName:" + data[i].bundleName); - console.info("index[" + i + "].description:" + data[i].description); - console.info("index[" + i + "].descriptionId:" + data[i].descriptionId); - console.info("index[" + i + "].iconPath:" + data[i].iconPath); - console.info("index[" + i + "].iconId:" + data[i].iconId); - console.info("index[" + i + "].label:" + data[i].label); - console.info("index[" + i + "].labelId:" + data[i].labelId); - console.info("index[" + i + "].deviceId:" + data[i].deviceId); - console.info("index[" + i + "].signatureKey:" + data[i].signatureKey); - console.info("index[" + i + "].process:" + data[i].process); - console.info("index[" + i + "].isSystemApp:" + data[i].isSystemApp); - console.info("index[" + i + "].isLauncherApp:" + data[i].isLauncherApp); - console.info("index[" + i + "].supportedModes:" + data[i].supportedModes); - - console.info('getAllApplicationInfo Async permissions length [' + data[i].permissions.length + ']'); - for (var j = 0; j < data[i].permissions.length; j++) { - console.info("index[" + i + "]permissions[" + j + "]:" + data[i].permissions[j]); - } - console.info('getAllApplicationInfo Async moduleSourceDirs length [' + data[i].moduleSourceDirs.length + ']'); - for (var j = 0; j < data[i].moduleSourceDirs.length; j++) { - console.info("index[" + i + "]moduleSourceDirs[" + j + "]:" + data[i].moduleSourceDirs[j]); - } - console.info('getAllApplicationInfo Async moduleInfos length [' + data[i].moduleInfos.length + ']'); - for (var j = 0; j < data[i].moduleInfos.length; j++) { - console.info("index[" + i + "]moduleInfos[" + j + "]moduleName:" + data[i].moduleInfos[j].moduleName); - console.info("index[" + i + "]moduleInfos[" + j + "]moduleSourceDir:" + data[i].moduleInfos[j].moduleSourceDir); - } - console.info("index[" + i + "].entryDir:" + data[i].entryDir); - console.info("index[" + i + "].codePath:" + data[i].codePath); - console.info("index[" + i + "].dataDir:" + data[i].dataDir); - console.info("index[" + i + "].dataBaseDir:" + data[i].dataBaseDir); - console.info("index[" + i + "].cacheDir:" + data[i].cacheDir); - } -}) -``` - - - -#### getAllApplicationInfo(bundleFlags: number, userId: number, callback: AsyncCallback>) - -* 功能说明 - - 获取指定用户下所有已安装的应用信息 - -* getAllApplicationInfo参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ----------- | -------- | ------------------------------------- | ---- | ------------------------------------------------------- | - | bundleFlags | 只读 | number | 是 | 0：返回默认app信息<
8：返回包含permissions的app信息 | - | userId | 只读 | number | 是 | 用户ID | - | callback | 只读 | AsyncCallback> | 是 | 回调方法 | - -* 返回值 - - void - -* 示例 - -``` -bundle.getAllApplicationInfo(8, 0, OnReceiveEvent); - -function OnReceiveEvent(err, data) { - console.info('xxx getAllApplicationInfo data length [' + data.length + ']'); - for (var i = 0; i < data.length; i++) { - console.info("index[" + i + "].name: for begin"); - console.info("index[" + i + "].name:" + data[i].name); - console.info("index[" + i + "].bundleName:" + data[i].bundleName); - console.info("index[" + i + "].description:" + data[i].description); - console.info("index[" + i + "].descriptionId:" + data[i].descriptionId); - console.info("index[" + i + "].iconPath:" + data[i].iconPath); - console.info("index[" + i + "].iconId:" + data[i].iconId); - console.info("index[" + i + "].label:" + data[i].label); - console.info("index[" + i + "].labelId:" + data[i].labelId); - console.info("index[" + i + "].deviceId:" + data[i].deviceId); - console.info("index[" + i + "].signatureKey:" + data[i].signatureKey); - console.info("index[" + i + "].process:" + data[i].process); - console.info("index[" + i + "].isSystemApp:" + data[i].isSystemApp); - console.info("index[" + i + "].isLauncherApp:" + data[i].isLauncherApp); - console.info("index[" + i + "].supportedModes:" + data[i].supportedModes); - - console.info('getAllApplicationInfo Async permissions length [' + data[i].permissions.length + ']'); - for (var j = 0; j < data[i].permissions.length; j++) { - console.info("index[" + i + "]permissions[" + j + "]:" + data[i].permissions[j]); - } - console.info('getAllApplicationInfo Async moduleSourceDirs length [' + data[i].moduleSourceDirs.length + ']'); - for (var j = 0; j < data[i].moduleSourceDirs.length; j++) { - console.info("index[" + i + "]moduleSourceDirs[" + j + "]:" + data[i].moduleSourceDirs[j]); - } - console.info('getAllApplicationInfo Async moduleInfos length [' + data[i].moduleInfos.length + ']'); - for (var j = 0; j < data[i].moduleInfos.length; j++) { - console.info("index[" + i + "]moduleInfos[" + j + "]moduleName:" + data[i].moduleInfos[j].moduleName); - console.info("index[" + i + "]moduleInfos[" + j + "]moduleSourceDir:" + data[i].moduleInfos[j].moduleSourceDir); - } - console.info("index[" + i + "].entryDir:" + data[i].entryDir); - console.info("index[" + i + "].codePath:" + data[i].codePath); - console.info("index[" + i + "].dataDir:" + data[i].dataDir); - console.info("index[" + i + "].dataBaseDir:" + data[i].dataBaseDir); - console.info("index[" + i + "].cacheDir:" + data[i].cacheDir); - } -} -``` - - - -#### queryAbilityByWant(want: Want, bundleFlags: number, userId: number) - -* 功能说明 - - 通过Want获取对应的Ability信息 - -* queryAbilityInfo参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ----------- | -------- | ------ | ---- | ------------------------------------------------------------ | - | want | 只读 | Want | 是 | 指定Want信息 | - | bundleFlags | 只读 | number | 是 | 0：返回默认BundleInfo
1：返回包含abilityInfo的BundleInfo | - | userId | 只读 | number | 是 | 用户ID | - -* Want类型说明 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ----------- | -------- | -------------------- | ---- | ------------------------------------------------------------ | - | elementName | 只读 | ElementName | 是 | 表示运行指定Ability的ElementName。 | - | uri | 只读 | string | 否 | 表示Uri描述。 | - | flags | 只读 | int | 否 | Ability的flag，表示处理Want的方式。 | - | type | 只读 | string | 否 | Want中的type属性是指由Want的URI所指示的资源的MIME类型。 | - | action | 只读 | string | 否 | 表示动作，通常使用系统预置Action，应用也可以自定义Action。 | - | want_param | 只读 | {[key: string]: any} | 否 | want_param是一种支持自定义的数据结构，开发者可以通过want_param传递某些请求所需的额外信息。 | - | entities | 只读 | Array | 否 | 表示类别，通常使用系统预置Entity，应用也可以自定义Entity。 | - -* ElementName类型说明 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ----------- | -------- | ------ | ---- | ------------------------------------------------------------ | - | deviceId | 只读 | string | 否 | 表示运行指定Ability的设备ID。 | - | bundleName | 只读 | string | 是 | 表示包描述。如果在Want中同时指定了BundleName和AbilityName，则Want可以直接匹配到指定的Ability。 | - | abilityName | 只读 | string | 是 | 表示待启动的Ability名称。如果在Want中同时指定了BundleName和AbilityName，则Want可以直接匹配到指定的Ability。 | - -* 返回值 - - Promise>：返回值为Promise对象，Promise中包含Ability信息。 - -* 示例 - -``` -bundle.queryAbilityByWant({ - want: { - action: "action.system.home", - entities: ["entity.system.home"], - elementName: { - deviceId: "0", - bundleName: "com.example.myapplicationInstall", - abilityName: "com.example.myapplication.MainAbility", - }, - } -}, 1, 0, -}).then((data) => { - console.info("name:" + data.name); - console.info("label:" + data.label); - console.info("description:" + data.description); - console.info("iconPath:" + data.iconPath); - console.info("visible:" + data.visible); - console.info("kind:" + data.kind); - console.info("uri:" + data.uri); - console.info("process:" + data.process); - console.info("package:" + data.package); - console.info("bundleName:" + data.bundleName); - console.info("moduleName:" + data.moduleName); - console.info("applicationName:" + data.applicationName); - console.info("deviceId:" + data.deviceId); - console.info("codePath:" + data.codePath); - console.info("resourcePath:" + data.resourcePath); - console.info("libPath:" + data.libPath); - - console.info('queryAbilityInfo permissions length [' + data.permissions.length + ']'); - for (var j = 0; j < data.permissions.length; j++) { - console.info("permissions[" + j + "]:" + data.permissions[j]); - } - console.info('queryAbilityInfo deviceTypes length [' + data.deviceTypes.length + ']'); - for (var j = 0; j < data.deviceTypes.length; j++) { - console.info("deviceTypes[" + j + "]:" + data.deviceTypes[j]); - } - console.info('queryAbilityInfo deviceCapabilities length [' + data.deviceCapabilities.length + ']'); - for (var j = 0; j < data.deviceCapabilities.length; j++) { - console.info("deviceCapabilities[" + j + "]:" + data.deviceCapabilities[j]); - } - console.info("appInfo.name:" + data.applicationInfo.name); - console.info("appInfo.bundleName:" + data.applicationInfo.bundleName); - // ability type: 0:UNKNOWN, 1:PAGE, 2:SERVICE, 3:DATA - console.info("type:" + data.type); - // orientation: 0:UNSPECIFIED, 1:LANDSCAPE, 2:PORTRAIT, 3:FOLLOWRECENT, - console.info("orientation:" + data.orientation); - // launchMode: 0:SINGLETON, 1:SINGLETOP, 2:STANDARD - console.info("launchMode:" + data.launchMode); - - // the enum of AbilityType - console.info("AbilityType:" + bundle.AbilityType.UNKNOWN); - console.info("AbilityType:" + bundle.AbilityType.PAGE); - console.info("AbilityType:" + bundle.AbilityType.SERVICE); - console.info("AbilityType:" + bundle.AbilityType.DATA); - if (data.type == bundle.AbilityType.PAGE) { - console.info("this AbilityType is PAGE"); - } - // the enum of DisplayOrientation - console.info("DisplayOrientation:" + bundle.DisplayOrientation.UNSPECIFIED); - console.info("DisplayOrientation:" + bundle.DisplayOrientation.LANDSCAPE); - console.info("DisplayOrientation:" + bundle.DisplayOrientation.PORTRAIT); - console.info("DisplayOrientation:" + bundle.DisplayOrientation.FOLLOWRECENT); - if (data.orientation == bundle.DisplayOrientation.UNSPECIFIED) { - console.info("this DisplayOrientation is UNSPECIFIED"); - } - // the enum of LaunchMode - console.info("LaunchMode:" + bundle.LaunchMode.SINGLETON); - console.info("LaunchMode:" + bundle.LaunchMode.SINGLETOP); - console.info("LaunchMode:" + bundle.LaunchMode.STANDARD); - if (data.launchMode == bundle.LaunchMode.STANDARD) { - console.info("this LaunchMode is STANDARD"); - } - -}) -``` - - - -#### queryAbilityByWant(want: Want, bundleFlags: number, userId: number, callback: AsyncCallback>) - -* 功能说明 - - 通过Want获取对应的Ability信息 - -* queryAbilityInfo参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ----------- | -------- | --------------------------------- | ---- | ------------------------------------------------------------ | - | want | 只读 | Want | 是 | 指定Want信息 | - | bundleFlags | 只读 | number | 是 | 0：返回默认BundleInfo
1：返回包含abilityInfo的BundleInfo | - | userId | 只读 | number | 是 | 用户ID | - | callback | 只读 | AsyncCallback> | 是 | 回调方法 | - -* Want类型说明 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ----------- | -------- | -------------------- | ---- | ------------------------------------------------------------ | - | elementName | 只读 | ElementName | 是 | 表示运行指定Ability的ElementName。 | - | uri | 只读 | string | 否 | 表示Uri描述。 | - | flags | 只读 | int | 否 | Ability的flag，表示处理Want的方式。 | - | type | 只读 | string | 否 | Want中的type属性是指由Want的URI所指示的资源的MIME类型。 | - | action | 只读 | string | 否 | 表示动作，通常使用系统预置Action，应用也可以自定义Action。 | - | want_param | 只读 | {[key: string]: any} | 否 | want_param是一种支持自定义的数据结构，开发者可以通过want_param传递某些请求所需的额外信息。 | - | entities | 只读 | Array | 否 | 表示类别，通常使用系统预置Entity，应用也可以自定义Entity。 | - -* ElementName类型说明 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ----------- | -------- | ------ | ---- | ------------------------------------------------------------ | - | deviceId | 只读 | string | 否 | 表示运行指定Ability的设备ID。 | - | bundleName | 只读 | string | 是 | 表示包描述。如果在Want中同时指定了BundleName和AbilityName，则Want可以直接匹配到指定的Ability。 | - | abilityName | 只读 | string | 是 | 表示待启动的Ability名称。如果在Want中同时指定了BundleName和AbilityName，则Want可以直接匹配到指定的Ability。 | - -* 返回值 - - void - -* 示例 - -``` -bundle.queryAbilityByWant( - { - want: { - action: "action.system.home", - entities: ["entity.system.home"], - elementName: { - deviceId: "0", - bundleName: "com.example.myapplicationInstall", - abilityName: "com.example.myapplication.MainAbility", - }, - } - }, 1, 0, - }, OnReceiveEvent); - -function OnReceiveEvent(err, data) { - console.info("name:" + data.name); - console.info("label:" + data.label); - console.info("description:" + data.description); - console.info("iconPath:" + data.iconPath); - console.info("visible:" + data.visible); - console.info("kind:" + data.kind); - console.info("uri:" + data.uri); - console.info("process:" + data.process); - console.info("package:" + data.package); - console.info("bundleName:" + data.bundleName); - console.info("moduleName:" + data.moduleName); - console.info("applicationName:" + data.applicationName); - console.info("deviceId:" + data.deviceId); - console.info("codePath:" + data.codePath); - console.info("resourcePath:" + data.resourcePath); - console.info("libPath:" + data.libPath); - - console.info('queryAbilityInfo permissions length [' + data.permissions.length + ']'); - for (var j = 0; j < data.permissions.length; j++) { - console.info("permissions[" + j + "]:" + data.permissions[j]); - } - console.info('queryAbilityInfo deviceTypes length [' + data.deviceTypes.length + ']'); - for (var j = 0; j < data.deviceTypes.length; j++) { - console.info("deviceTypes[" + j + "]:" + data.deviceTypes[j]); - } - console.info('queryAbilityInfo deviceCapabilities length [' + data.deviceCapabilities.length + ']'); - for (var j = 0; j < data.deviceCapabilities.length; j++) { - console.info("deviceCapabilities[" + j + "]:" + data.deviceCapabilities[j]); - } - console.info("appInfo.name:" + data.applicationInfo.name); - console.info("appInfo.bundleName:" + data.applicationInfo.bundleName); - // ability type: 0:UNKNOWN, 1:PAGE, 2:SERVICE, 3:DATA - console.info("type:" + data.type); - // orientation: 0:UNSPECIFIED, 1:LANDSCAPE, 2:PORTRAIT, 3:FOLLOWRECENT, - console.info("orientation:" + data.orientation); - // launchMode: 0:SINGLETON, 1:SINGLETOP, 2:STANDARD - console.info("launchMode:" + data.launchMode); - - // the enum of AbilityType - console.info("AbilityType:" + bundle.AbilityType.UNKNOWN); - console.info("AbilityType:" + bundle.AbilityType.PAGE); - console.info("AbilityType:" + bundle.AbilityType.SERVICE); - console.info("AbilityType:" + bundle.AbilityType.DATA); - if (data.type == bundle.AbilityType.PAGE) { - console.info("this AbilityType is PAGE"); - } - // the enum of DisplayOrientation - console.info("DisplayOrientation:" + bundle.DisplayOrientation.UNSPECIFIED); - console.info("DisplayOrientation:" + bundle.DisplayOrientation.LANDSCAPE); - console.info("DisplayOrientation:" + bundle.DisplayOrientation.PORTRAIT); - console.info("DisplayOrientation:" + bundle.DisplayOrientation.FOLLOWRECENT); - if (data.orientation == bundle.DisplayOrientation.UNSPECIFIED) { - console.info("this DisplayOrientation is UNSPECIFIED"); - } - // the enum of LaunchMode - console.info("LaunchMode:" + bundle.LaunchMode.SINGLETON); - console.info("LaunchMode:" + bundle.LaunchMode.SINGLETOP); - console.info("LaunchMode:" + bundle.LaunchMode.STANDARD); - if (data.launchMode == bundle.LaunchMode.STANDARD) { - console.info("this LaunchMode is STANDARD"); - } -} -``` - - - -#### getPermissionDef(permissionName: string) - -* 功能说明 - - 获取指定权限的详细信息 - -* getPermissionDef参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | -------------- | -------- | ------ | ---- | ------ | - | permissionName | 只读 | string | 是 | 权限名 | - -* 返回值 - - Promise：返回值为bundle信息。 - -* 示例 - -``` -bundle.getPermissionDef('com.permission.CAMERA').then((data) => { - console.info("permissionName:" + data.permissionName); - console.info("bundleName:" + data.bundleName); - console.info("grantMode:" + data.grantMode); - console.info("availableScope:" + data.availableScope); - console.info("label:" + data.label); - console.info("labelId:" + data.labelId); -}) -``` - - - -#### getPermissionDef(permissionName: string, callback: AsyncCallback) - -* 功能说明 - - 获取指定权限的详细信息 - -* getPermissionDef参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | -------------- | -------- | ---------------------------- | ---- | -------- | - | permissionName | 只读 | string | 是 | 权限名 | - | callback | 只读 | AsyncCallback | 是 | 回调方法 | - -* 返回值 - - void - -* 示例 - -``` -bundle.getBundleInstaller().then((data) => { - data.getPermissionDef('com.permission.CAMERA', OnReceiveEvent); - - function OnReceiveEvent(err, data) { - console.info("permissionName:" + data.permissionName); - console.info("bundleName:" + data.bundleName); - console.info("grantMode:" + data.grantMode); - console.info("availableScope:" + data.availableScope); - console.info("label:" + data.label); - console.info("labelId:" + data.labelId); - } -}) -``` - - - -#### getBundleArchiveInfo(hapFilePath: string, bundleFlags: number) - -* 功能说明 - - 获取HAP包含的应用包信息 - -* getBundleArchiveInfo参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ----------- | -------- | ------ | ---- | ------------------------------------------------------------ | - | hapFilePath | 只读 | string | 是 | hap包文件路径 | - | bundleFlags | 只读 | number | 是 | 0：返回默认BundleInfo
1：返回包含abilityInfo的BundleInfo | - -* 返回值 - - Promise：返回值为bundle信息。 - -* 示例 - -``` -bundle.getBundleArchiveInfo('/data/test.hap', 1).then((data) => { - console.info("name:" + data.name); - console.info("label:" + data.label); - console.info("description:" + data.description); - console.info("vendor:" + data.vendor); - console.info("versionCode:" + data.versionCode); - console.info("versionName:" + data.versionName); - console.info("jointUserId:" + data.jointUserId); - console.info("minSdkVersion:" + data.minSdkVersion); - console.info("maxSdkVersion:" + data.maxSdkVersion); - console.info("mainEntry:" + data.mainEntry); - console.info("cpuAbi:" + data.cpuAbi); - console.info("appId:" + data.appId); - console.info("compatibleVersion:" + data.compatibleVersion); - console.info("targetVersion:" + data.targetVersion); - console.info("releaseType:" + data.releaseType); - console.info("uid:" + data.uid); - console.info("gid:" + data.gid); - console.info("seInfo:" + data.seInfo); - console.info("entryModuleName:" + data.entryModuleName); - console.info("isKeepAlive:" + data.isKeepAlive); - console.info("isNativeApp:" + data.isNativeApp); - console.info("installTime:" + data.installTime); - console.info("updateTime:" + data.updateTime); - console.info("appInfo.name:" + data.applicationInfo.name); - console.info("appInfo.bundleName:" + data.applicationInfo.bundleName); - console.info('getBundleArchiveInfo reqPermissions length [' + data.reqPermissions.length + ']'); - for (var j = 0; j < data.reqPermissions.length; j++) { - console.info("reqPermissions[" + j + "]:" + data.reqPermissions[j]); - } - console.info('getBundleArchiveInfo defPermissions length [' + data.defPermissions.length + ']'); - for (var j = 0; j < data.defPermissions.length; j++) { - console.info("defPermissions[" + j + "]:" + data.defPermissions[j]); - } - console.info('getBundleArchiveInfo hapModuleNames length [' + data.hapModuleNames.length + ']'); - for (var j = 0; j < data.hapModuleNames.length; j++) { - console.info("hapModuleNames[" + j + "]:" + data.hapModuleNames[j]); - } - console.info('getBundleArchiveInfo moduleNames length [' + data.moduleNames.length + ']'); - for (var j = 0; j < data.moduleNames.length; j++) { - console.info("moduleNames[" + j + "]:" + data.moduleNames[j]); - } - console.info('getBundleArchiveInfo modulePublicDirs length [' + data.modulePublicDirs.length + ']'); - for (var j = 0; j < data.modulePublicDirs.length; j++) { - console.info("modulePublicDirs[" + j + "]:" + data.modulePublicDirs[j]); - } - console.info('getBundleArchiveInfo moduleDirs length [' + data.moduleDirs.length + ']'); - for (var j = 0; j < data.moduleDirs.length; j++) { - console.info("moduleDirs[" + j + "]:" + data.moduleDirs[j]); - } - console.info('getBundleArchiveInfo moduleResPaths length [' + data.moduleResPaths.length + ']'); - for (var j = 0; j < data.moduleResPaths.length; j++) { - console.info("moduleResPaths[" + j + "]:" + data.moduleResPaths[j]); - } - console.info('getBundleArchiveInfo abilityInfo length [' + data.abilityInfos.length + ']'); - for (var j = 0; j < data.abilityInfos.length; j++) { - console.info("abilityInfos[" + j + "]name:" + data.abilityInfos[j].name); - console.info("abilityInfos[" + j + "]package:" + data.abilityInfos[j].package); - } -}) -``` - - - -#### getBundleArchiveInfo(hapFilePath: string, bundleFlags: number, callback: AsyncCallback) - -* 功能说明 - - 获取HAP包含的应用包信息 - -* getBundleArchiveInfo参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ----------- | -------- | ------------------------- | ---- | ------------------------------------------------------------ | - | hapFilePath | 只读 | string | 是 | hap包文件路径 | - | bundleFlags | 只读 | number | 是 | 0：返回默认BundleInfo
1：返回包含abilityInfo的BundleInfo | - | callback | 只读 | AsyncCallback | 是 | 回调方法 | - -* 返回值 - - void - -* 示例 - -``` -bundle.getBundleArchiveInfo('/data/test.hap', 1, OnReceiveEvent); - -function OnReceiveEvent(err, data) { - console.info("name:" + data.name); - console.info("label:" + data.label); - console.info("description:" + data.description); - console.info("vendor:" + data.vendor); - console.info("versionCode:" + data.versionCode); - console.info("versionName:" + data.versionName); - console.info("jointUserId:" + data.jointUserId); - console.info("minSdkVersion:" + data.minSdkVersion); - console.info("maxSdkVersion:" + data.maxSdkVersion); - console.info("mainEntry:" + data.mainEntry); - console.info("cpuAbi:" + data.cpuAbi); - console.info("appId:" + data.appId); - console.info("compatibleVersion:" + data.compatibleVersion); - console.info("targetVersion:" + data.targetVersion); - console.info("releaseType:" + data.releaseType); - console.info("uid:" + data.uid); - console.info("gid:" + data.gid); - console.info("seInfo:" + data.seInfo); - console.info("entryModuleName:" + data.entryModuleName); - console.info("isKeepAlive:" + data.isKeepAlive); - console.info("isNativeApp:" + data.isNativeApp); - console.info("installTime:" + data.installTime); - console.info("updateTime:" + data.updateTime); - console.info("appInfo.name:" + data.applicationInfo.name); - console.info("appInfo.bundleName:" + data.applicationInfo.bundleName); - console.info('getBundleArchiveInfo reqPermissions length [' + data.reqPermissions.length + ']'); - for (var j = 0; j < data.reqPermissions.length; j++) { - console.info("reqPermissions[" + j + "]:" + data.reqPermissions[j]); - } - console.info('getBundleArchiveInfo defPermissions length [' + data.defPermissions.length + ']'); - for (var j = 0; j < data.defPermissions.length; j++) { - console.info("defPermissions[" + j + "]:" + data.defPermissions[j]); - } - console.info('getBundleArchiveInfo hapModuleNames length [' + data.hapModuleNames.length + ']'); - for (var j = 0; j < data.hapModuleNames.length; j++) { - console.info("hapModuleNames[" + j + "]:" + data.hapModuleNames[j]); - } - console.info('getBundleArchiveInfo moduleNames length [' + data.moduleNames.length + ']'); - for (var j = 0; j < data.moduleNames.length; j++) { - console.info("moduleNames[" + j + "]:" + data.moduleNames[j]); - } - console.info('getBundleArchiveInfo modulePublicDirs length [' + data.modulePublicDirs.length + ']'); - for (var j = 0; j < data.modulePublicDirs.length; j++) { - console.info("modulePublicDirs[" + j + "]:" + data.modulePublicDirs[j]); - } - console.info('getBundleArchiveInfo moduleDirs length [' + data.moduleDirs.length + ']'); - for (var j = 0; j < data.moduleDirs.length; j++) { - console.info("moduleDirs[" + j + "]:" + data.moduleDirs[j]); - } - console.info('getBundleArchiveInfo moduleResPaths length [' + data.moduleResPaths.length + ']'); - for (var j = 0; j < data.moduleResPaths.length; j++) { - console.info("moduleResPaths[" + j + "]:" + data.moduleResPaths[j]); - } - console.info('getBundleArchiveInfo abilityInfo length [' + data.abilityInfos.length + ']'); - for (var j = 0; j < data.abilityInfos.length; j++) { - console.info("abilityInfos[" + j + "]name:" + data.abilityInfos[j].name); - console.info("abilityInfos[" + j + "]package:" + data.abilityInfos[j].package); - } -} -``` - - - -#### install(bundleFilePaths: Array, param: InstallParam, callback: AsyncCallback) - -* 功能说明 - - 安装hap包 - -* install参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | --------------- | -------- | ---------------------------- | ---- | ------------------------------------------------------------ | - | bundleFilePaths | 只读 | Array | 是 | 安装用包路径 | - | param | 只读 | InstallParam | 是 | userId：用户ID
installFlag：安装标识。
NORMAL：安装/卸载
REPLACE_EXISTING：更新
isKeepData：卸载时是否保留运行时数据 | - | callback | 只读 | AsyncCallback | 是 | 回调方法 | - -* 返回值 - - void - -* InstallStatus类型说明 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ------------- | -------- | ---------------- | ---- | ------------------------------------------------------------ | - | status | 只读 | InstallErrorCode | 是 | 安装结果code
SUCCESS = 0
STATUS_INSTALL_FAILURE = 1
STATUS_INSTALL_FAILURE_ABORTED = 2,
STATUS_INSTALL_FAILURE_INVALID = 3
STATUS_INSTALL_FAILURE_CONFLICT = 4
STATUS_INSTALL_FAILURE_STORAGE = 5
STATUS_INSTALL_FAILURE_INCOMPATIBLE = 6
STATUS_INSTALL_FAILURE_DOWNLOAD_TIMEOUT = 0x0B
STATUS_INSTALL_FAILURE_DOWNLOAD_FAILED = 0x0C
STATUS_ABILITY_NOT_FOUND = 0x40
STATUS_BMS_SERVICE_ERROR = 0x41 | - | statusMessage | 只读 | string | 是 | 安装结果Message | - -* 示例 - -``` -bundle.getBundleInstaller().then((data) => { - data.install(['/data/test.hap'], { - param: { - userId: 0, - isKeepData: false - } - }, OnReceiveinstallEvent); - - function OnReceiveinstallEvent(err, data) { - console.info("name: for begin"); - console.info("install result code:" + data.status); - console.info("install result msg:" + data.statusMessage); - } -}) -``` - - - -#### uninstall(bundleName: string, param: InstallParam, callback: AsyncCallback) - -* 功能说明 - - 卸载hap包 - -* uninstall参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ---------- | -------- | ---------------------------- | ---- | ------------------------------------------------------------ | - | bundleName | 只读 | string | 是 | 卸载用包名 | - | param | 只读 | InstallParam | 是 | userId：用户ID
installFlag：安装标识。
NORMAL：安装/卸载
REPLACE_EXISTING：更新
isKeepData：卸载时是否保留运行时数据 | - | callback | 只读 | AsyncCallback | 是 | 回调方法 | - -* 返回值 - - void - -* InstallStatus类型说明 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ------------- | -------- | ---------------- | ---- | ------------------------------------------------------------ | - | status | 只读 | InstallErrorCode | 是 | 卸载结果code
SUCCESS = 0
STATUS_UNINSTALL_FAILURE = 7
STATUS_UNINSTALL_FAILURE_BLOCKED = 8
STATUS_UNINSTALL_FAILURE_ABORTED = 9,
STATUS_UNINSTALL_FAILURE_CONFLICT = 10
STATUS_ABILITY_NOT_FOUND = 0x40
STATUS_BMS_SERVICE_ERROR = 0x41 | - | statusMessage | 只读 | string | 是 | 卸载结果Message | - -* 示例 - -``` -bundle.getBundleInstaller().then((data) => { - data.uninstall('com.example.myapplication', { - param: { - userId: 0, - isKeepData: false - } - }, OnReceiveinstallEvent); - - function OnReceiveinstallEvent(err, data) { - console.info("name: for begin"); - console.info("uninstall result code:" + data.status); - console.info("uninstall result msg:" + data.statusMessage); - } -}) -``` - - - -#### getAllShortcutInfo(bundleName: string) - -* 功能说明 - - 获取指定bundle名的shortcut信息 - -* getAllShortcutInfo参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ---------- | -------- | ------ | ---- | -------- | - | bundleName | 只读 | string | 是 | bundle名 | - -* 返回值 - - Promise：返回值为bundle信息。 - -* 示例 - -``` -bundle.getAllShortcutInfo('com.example.third1').then((data) => { - ... -}); -``` - - - -#### getAllShortcutInfo(bundleName: string, callback: AsyncCallback>) - -* 功能说明 - - 获取指定bundle名的shortcut信息 - -* getAllShortcutInfo参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ---------- | -------- | --------------------------- | ---- | -------- | - | bundleName | 只读 | string | 是 | bundle名 | - | callback | 只读 | AsyncCallback | 是 | 回调方法 | - -* 返回值 - - void - -* 示例 - -``` -bundle.getAllShortcutInfo('com.example.third1', OnReceiveEvent); - -function OnReceiveEvent(err, data) { - ... -} -``` - - - -#### checkPermission(bundleName: string, permission: string) - -* 功能说明 - - 获取指定最大记录数的Usage信息 - -* checkPermission参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ---------- | -------- | ------ | ---- | -------- | - | bundleName | 只读 | string | 是 | bundle名 | - | permission | 只读 | string | 是 | 权限名 | - -* 返回值 - - Promise：返回值为bundle信息。 - -* 示例 - -``` -bundle.getModuleUsageRecords('com.example.actsbmscheckpermissiontest', 'com.permission.CAMERA').then((data) => { - ... -}); -``` - - - -#### checkPermission(bundleName: string, permission: string, callback: AsyncCallback) - -* 功能说明 - - 获取指定最大记录数的Usage信息 - -* checkPermission参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ---------- | -------- | -------------------------- | ---- | -------- | - | bundleName | 只读 | string | 是 | bundle名 | - | permission | 只读 | string | 是 | 权限名 | - | callback | 只读 | AsyncCallback | 是 | 回调方法 | - -* 返回值 - - void - -* 示例 - -``` -bundle.checkPermission('com.example.actsbmscheckpermissiontest', 'com.permission.CAMERA', OnReceiveEvent); - -function OnReceiveEvent(err, data) { - ... -} -``` diff --git a/zh-cn/application-dev/js-reference/Camera.md b/zh-cn/application-dev/js-reference/Camera.md deleted file mode 100644 index dc649e600906eb3a0f3debd19f68a9140700f57f..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/Camera.md +++ /dev/null @@ -1,336 +0,0 @@ -# Camera - -- [子组件](#zh-cn_topic_0000001062209279_section172027510456) -- [属性](#zh-cn_topic_0000001062209279_section153601034618) -- [样式](#zh-cn_topic_0000001062209279_section1889052254711) -- [事件](#zh-cn_topic_0000001062209279_section104349151916) -- [方法](#zh-cn_topic_0000001062209279_section568225514199) - -相机组件。一个页面仅支持一个camera组件。 - -## 子组件 - -> 不支持 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-
- -## 样式 - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

width

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的宽度。

-

缺省时使用元素自身内容需要的宽度。

-

height

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的高度。

-

缺省时使用元素自身内容需要的高度。

-
- - - -## 事件 - -通用 - -## 方法 - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

takePhoto

-

CameraTakePhotoOptions

-

执行拍照

-

startRecord

-

-

-

开始录像

-

closeRecord

-

CameraRecordOptions

-

结束录像

-
- -CameraTakePhotoOptions - - - - - - - - - - - - - - - - - - - - - - - - -
-

quality

-		 -

string

-		 -

图片质量(L3)

-
-

success

-		 -

Function

-		 -

接口调用成功，返回uri

-
-

fail

-		 -

Function

-		 -

接口调用失败

-
-

complete

-		 -

Function

-		 -

接口调用结束

-
- -CameraRecordOptions - - - - - - - - - - - - - - - - - - - -
-

success

-		 -

Function

-		 -

接口调用成功，返回uri

-
-

fail

-		 -

Function

-		 -

接口调用失败

-
-

complete

-		 -

Function

-		 -

接口调用结束

-
- -## 示例 - -``` -
-
- -
- src： {{src}} photoUri： {{photoUri}} -
- - -
-
- - -
-
-//.js -import router from '@system.router'; -export default { - data: { - photoUri: "", - val: "", - arr:[], - size: -1, - quality:'', - src:'', - heights: 600, - widths:600, - }, - onInit() { - }, - startRecord() { - this.$element('cameraId').startRecorder(); - }, - closeRecord() { - this.$element('cameraId').closeRecorder( - { - success: (res) => { - this.src = res.uri; - }, - fail: (res) => { - this.val = "fail " + res.errormsg + " " + res.errorcode; - }, - complete : (res) => { - this.val += " :complete"; - }, - } - ); - }, - takePhoto() { - this.$element('cameraId').takePhoto( - { - quality: -1, - success: (res) => { - this.photoUri = res.uri; - }, - fail: (res) => { - this.val = "fail " + res.errormsg + " " + res.errorcode; - }, - complete : (res) => { - this.val += " :complete"; - }, - } - ); - }, -``` - -} \ No newline at end of file diff --git a/zh-cn/application-dev/js-reference/CommonEvent.md b/zh-cn/application-dev/js-reference/CommonEvent.md deleted file mode 100644 index afe70d6ead54ab64790743a74ba6ee779413034f..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/CommonEvent.md +++ /dev/null @@ -1,508 +0,0 @@ -CommonEvent模块(JS端SDK接口) - -#### 支持设备 - -| API | 手机 | 平板 | 智慧屏 | 智能穿戴 | 轻量级智能穿戴 | -| ------------------------------------------------------------ | ---- | ---- | ------ | -------- | -------------- | -| CommonEvent.publish(event: string, callback: AsyncCallback) | 支持 | 支持 | 支持 | 支持 | 不支持 | -| CommonEvent.publish(event: string, options: CommonEventPublishData, callback: AsyncCallback) | 支持 | 支持 | 支持 | 支持 | 不支持 | -| CommonEvent.createSubscriber(subscribeInfo: CommonEventSubscribeInfo, callback: AsyncCallback) | 支持 | 支持 | 支持 | 支持 | 不支持 | -| CommonEvent.createSubscriber(subscribeInfo: CommonEventSubscribeInfo) | 支持 | 支持 | 支持 | 支持 | 不支持 | -| CommonEvent.subscribe(subscriber: CommonEventSubscriber, callback: AsyncCallback) | 支持 | 支持 | 支持 | 支持 | 不支持 | -| CommonEvent.unsubscribe(subscriber: CommonEventSubscriber, callback?: AsyncCallback) | 支持 | 支持 | 支持 | 支持 | 不支持 | - -#### 权限列表 - -| 系统公共事件宏 | 系统公共事件名称 | 订阅者所需权限 | -| ------------------------------------------------------------ | ----------------------------------------------------------- | ------------------------------------------------------------ | -| COMMON_EVENT_BOOT_COMPLETED | usual.event.BOOT_COMPLETED | ohos.permission.RECEIVER_STARTUP_COMPLETED | -| COMMON_EVENT_LOCKED_BOOT_COMPLETED | usual.event.LOCKED_BOOT_COMPLETED | ohos.permission.RECEIVER_STARTUP_COMPLETED | -| COMMON_EVENT_SHUTDOWN | usual.event.SHUTDOWN | 无 | -| COMMON_EVENT_BATTERY_CHANGED | usual.event.BATTERY_CHANGED | 无 | -| COMMON_EVENT_BATTERY_LOW | usual.event.BATTERY_LOW | 无 | -| COMMON_EVENT_BATTERY_OKAY | usual.event.BATTERY_OKAY | 无 | -| COMMON_EVENT_POWER_CONNECTED | usual.event.POWER_CONNECTED | 无 | -| COMMON_EVENT_POWER_DISCONNECTED | usual.event.POWER_DISCONNECTED | 无 | -| COMMON_EVENT_SCREEN_OFF | usual.event.SCREEN_OFF | 无 | -| COMMON_EVENT_SCREEN_ON | usual.event.SCREEN_ON | 无 | -| COMMON_EVENT_USER_PRESENT | usual.event.USER_PRESENT | 无 | -| COMMON_EVENT_TIME_TICK | usual.event.TIME_TICK | 无 | -| COMMON_EVENT_TIME_CHANGED | usual.event.TIME_CHANGED | 无 | -| COMMON_EVENT_DATE_CHANGED | usual.event.DATE_CHANGED | 无 | -| COMMON_EVENT_TIMEZONE_CHANGED | usual.event.TIMEZONE_CHANGED | 无 | -| COMMON_EVENT_CLOSE_SYSTEM_DIALOGS | usual.event.CLOSE_SYSTEM_DIALOGS | 无 | -| COMMON_EVENT_PACKAGE_ADDED | usual.event.PACKAGE_ADDED | 无 | -| COMMON_EVENT_PACKAGE_REPLACED | usual.event.PACKAGE_REPLACED | 无 | -| COMMON_EVENT_MY_PACKAGE_REPLACED | usual.event.MY_PACKAGE_REPLACED | 无 | -| COMMON_EVENT_PACKAGE_REMOVED | usual.event.PACKAGE_REMOVED | 无 | -| COMMON_EVENT_PACKAGE_FULLY_REMOVED | usual.event.PACKAGE_FULLY_REMOVED | 无 | -| COMMON_EVENT_PACKAGE_CHANGED | usual.event.PACKAGE_CHANGED | 无 | -| COMMON_EVENT_PACKAGE_RESTARTED | usual.event.PACKAGE_RESTARTED | 无 | -| COMMON_EVENT_PACKAGE_DATA_CLEARED | usual.event.PACKAGE_DATA_CLEARED | 无 | -| COMMON_EVENT_PACKAGES_SUSPENDED | usual.event.PACKAGES_SUSPENDED | 无 | -| COMMON_EVENT_PACKAGES_UNSUSPENDED | usual.event.PACKAGES_UNSUSPENDED | 无 | -| COMMON_EVENT_MY_PACKAGE_SUSPENDED | usual.event.MY_PACKAGE_SUSPENDED | 无 | -| COMMON_EVENT_MY_PACKAGE_UNSUSPENDED | usual.event.MY_PACKAGE_UNSUSPENDED | 无 | -| COMMON_EVENT_UID_REMOVED | usual.event.UID_REMOVED | 无 | -| COMMON_EVENT_PACKAGE_FIRST_LAUNCH | usual.event.PACKAGE_FIRST_LAUNCH | 无 | -| COMMON_EVENT_PACKAGE_NEEDS_VERIFICATION | usual.event.PACKAGE_NEEDS_VERIFICATION | 无 | -| COMMON_EVENT_PACKAGE_VERIFIED | usual.event.PACKAGE_VERIFIED | 无 | -| COMMON_EVENT_EXTERNAL_APPLICATIONS_AVAILABLE | usual.event.EXTERNAL_APPLICATIONS_AVAILABLE | 无 | -| COMMON_EVENT_EXTERNAL_APPLICATIONS_UNAVAILABLE | usual.event.EXTERNAL_APPLICATIONS_UNAVAILABLE | 无 | -| COMMON_EVENT_CONFIGURATION_CHANGED | usual.event.CONFIGURATION_CHANGED | 无 | -| COMMON_EVENT_LOCALE_CHANGED | usual.event.LOCALE_CHANGED | 无 | -| COMMON_EVENT_MANAGE_PACKAGE_STORAGE | usual.event.MANAGE_PACKAGE_STORAGE | 无 | -| COMMON_EVENT_DRIVE_MODE | common.event.DRIVE_MODE | 无 | -| COMMON_EVENT_HOME_MODE | common.event.HOME_MODE | 无 | -| COMMON_EVENT_OFFICE_MODE | common.event.OFFICE_MODE | 无 | -| COMMON_EVENT_USER_STARTED | usual.event.USER_STARTED | 无 | -| COMMON_EVENT_USER_BACKGROUND | usual.event.USER_BACKGROUND | 无 | -| COMMON_EVENT_USER_FOREGROUND | usual.event.USER_FOREGROUND | 无 | -| COMMON_EVENT_USER_SWITCHED | usual.event.USER_SWITCHED | ohos.permission.MANAGE_USERS | -| COMMON_EVENT_USER_STARTING | usual.event.USER_STARTING | ohos.permission.INTERACT_ACROSS_USERS | -| COMMON_EVENT_USER_UNLOCKED | usual.event.USER_UNLOCKED | 无 | -| COMMON_EVENT_USER_STOPPING | usual.event.USER_STOPPING | ohos.permission.INTERACT_ACROSS_USERS | -| COMMON_EVENT_USER_STOPPED | usual.event.USER_STOPPED | 无 | -| COMMON_EVENT_HWID_LOGIN | common.event.HWID_LOGIN | 无 | -| COMMON_EVENT_HWID_LOGOUT | common.event.HWID_LOGOUT | 无 | -| COMMON_EVENT_HWID_TOKEN_INVALID | common.event.HWID_TOKEN_INVALID | 无 | -| COMMON_EVENT_HWID_LOGOFF | common.event.HWID_LOGOFF | 无 | -| COMMON_EVENT_WIFI_POWER_STATE | usual.event.wifi.POWER_STATE | 无 | -| COMMON_EVENT_WIFI_SCAN_FINISHED | usual.event.wifi.SCAN_FINISHED | ohos.permission.LOCATION | -| COMMON_EVENT_WIFI_RSSI_VALUE | usual.event.wifi.RSSI_VALUE | ohos.permission.GET_WIFI_INFO | -| COMMON_EVENT_WIFI_CONN_STATE | usual.event.wifi.CONN_STATE | 无 | -| COMMON_EVENT_WIFI_HOTSPOT_STATE | usual.event.wifi.HOTSPOT_STATE | 无 | -| COMMON_EVENT_WIFI_AP_STA_JOIN | usual.event.wifi.WIFI_HS_STA_JOIN | ohos.permission.GET_WIFI_INFO | -| COMMON_EVENT_WIFI_AP_STA_LEAVE | usual.event.wifi.WIFI_HS_STA_LEAVE | ohos.permission.GET_WIFI_INFO | -| COMMON_EVENT_WIFI_MPLINK_STATE_CHANGE | usual.event.wifi.mplink.STATE_CHANGE | ohos.permission.MPLINK_CHANGE_STATE | -| COMMON_EVENT_WIFI_P2P_CONN_STATE | usual.event.wifi.p2p.CONN_STATE_CHANGE | ohos.permission.GET_WIFI_INFO and ohos.permission.LOCATION | -| COMMON_EVENT_WIFI_P2P_STATE_CHANGED | usual.event.wifi.p2p.STATE_CHANGE | ohos.permission.GET_WIFI_INFO | -| COMMON_EVENT_WIFI_P2P_PEERS_STATE_CHANGED | usual.event.wifi.p2p.DEVICES_CHANGE | ohos.permission.GET_WIFI_INFO | -| COMMON_EVENT_WIFI_P2P_PEERS_DISCOVERY_STATE_CHANGED | usual.event.wifi.p2p.PEER_DISCOVERY_STATE_CHANGE | ohos.permission.GET_WIFI_INFO | -| COMMON_EVENT_WIFI_P2P_CURRENT_DEVICE_STATE_CHANGED | usual.event.wifi.p2p.CURRENT_DEVICE_CHANGE | ohos.permission.GET_WIFI_INFO | -| COMMON_EVENT_WIFI_P2P_GROUP_STATE_CHANGED | usual.event.wifi.p2p.GROUP_STATE_CHANGED | ohos.permission.GET_WIFI_INFO | -| COMMON_EVENT_BLUETOOTH_HANDSFREE_AG_CONNECT_STATE_UPDATE | usual.event.bluetooth.handsfree.ag.CONNECT_STATE_UPDATE | ohos.permission.USE_BLUETOOTH | -| COMMON_EVENT_BLUETOOTH_HANDSFREE_AG_CURRENT_DEVICE_UPDATE | usual.event.bluetooth.handsfree.ag.CURRENT_DEVICE_UPDATE | ohos.permission.USE_BLUETOOTH | -| COMMON_EVENT_BLUETOOTH_HANDSFREE_AG_AUDIO_STATE_UPDATE | usual.event.bluetooth.handsfree.ag.AUDIO_STATE_UPDATE | ohos.permission.USE_BLUETOOTH | -| COMMON_EVENT_BLUETOOTH_A2DPSOURCE_CONNECT_STATE_UPDATE | usual.event.bluetooth.a2dpsource.CONNECT_STATE_UPDATE | ohos.permission.USE_BLUETOOTH | -| COMMON_EVENT_BLUETOOTH_A2DPSOURCE_CURRENT_DEVICE_UPDATE | usual.event.bluetooth.a2dpsource.CURRENT_DEVICE_UPDATE | ohos.permission.USE_BLUETOOTH | -| COMMON_EVENT_BLUETOOTH_A2DPSOURCE_PLAYING_STATE_UPDATE | usual.event.bluetooth.a2dpsource.PLAYING_STATE_UPDATE" | ohos.permission.USE_BLUETOOTH | -| COMMON_EVENT_BLUETOOTH_A2DPSOURCE_AVRCP_CONNECT_STATE_UPDATE | usual.event.bluetooth.a2dpsource.AVRCP_CONNECT_STATE_UPDATE | ohos.permission.USE_BLUETOOTH | -| COMMON_EVENT_BLUETOOTH_A2DPSOURCE_CODEC_VALUE_UPDATE | usual.event.bluetooth.a2dpsource.CODEC_VALUE_UPDATE | ohos.permission.USE_BLUETOOTH | -| COMMON_EVENT_BLUETOOTH_REMOTEDEVICE_DISCOVERED | usual.event.bluetooth.remotedevice.DISCOVERED | ohos.permission.USE_BLUETOOTH and ohos.permission.LOCATION | -| COMMON_EVENT_BLUETOOTH_REMOTEDEVICE_CLASS_VALUE_UPDATE | usual.event.bluetooth.remotedevice.CLASS_VALUE_UPDATE | ohos.permission.USE_BLUETOOTH | -| COMMON_EVENT_BLUETOOTH_REMOTEDEVICE_ACL_CONNECTED | usual.event.bluetooth.remotedevice.ACL_CONNECTED | ohos.permission.USE_BLUETOOTH | -| COMMON_EVENT_BLUETOOTH_REMOTEDEVICE_ACL_DISCONNECTED | usual.event.bluetooth.remotedevice.ACL_DISCONNECTED | ohos.permission.USE_BLUETOOTH | -| COMMON_EVENT_BLUETOOTH_REMOTEDEVICE_NAME_UPDATE | usual.event.bluetooth.remotedevice.NAME_UPDATE | ohos.permission.USE_BLUETOOTH | -| COMMON_EVENT_BLUETOOTH_REMOTEDEVICE_PAIR_STATE | usual.event.bluetooth.remotedevice.PAIR_STATE | ohos.permission.USE_BLUETOOTH | -| COMMON_EVENT_BLUETOOTH_REMOTEDEVICE_BATTERY_VALUE_UPDATE | usual.event.bluetooth.remotedevice.BATTERY_VALUE_UPDATE | ohos.permission.USE_BLUETOOTH | -| COMMON_EVENT_BLUETOOTH_REMOTEDEVICE_SDP_RESULT | usual.event.bluetooth.remotedevice.SDP_RESULT | 无 | -| COMMON_EVENT_BLUETOOTH_REMOTEDEVICE_UUID_VALUE | usual.event.bluetooth.remotedevice.UUID_VALUE | ohos.permission.DISCOVER_BLUETOOTH | -| COMMON_EVENT_BLUETOOTH_REMOTEDEVICE_PAIRING_REQ | usual.event.bluetooth.remotedevice.PAIRING_REQ | ohos.permission.DISCOVER_BLUETOOTH | -| COMMON_EVENT_BLUETOOTH_REMOTEDEVICE_PAIRING_CANCEL | usual.event.bluetooth.remotedevice.PAIRING_CANCEL | 无 | -| COMMON_EVENT_BLUETOOTH_REMOTEDEVICE_CONNECT_REQ | usual.event.bluetooth.remotedevice.CONNECT_REQ | 无 | -| COMMON_EVENT_BLUETOOTH_REMOTEDEVICE_CONNECT_REPLY | usual.event.bluetooth.remotedevice.CONNECT_REPLY | 无 | -| COMMON_EVENT_BLUETOOTH_REMOTEDEVICE_CONNECT_CANCEL | usual.event.bluetooth.remotedevice.CONNECT_CANCEL | 无 | -| COMMON_EVENT_BLUETOOTH_HANDSFREEUNIT_CONNECT_STATE_UPDATE | usual.event.bluetooth.handsfreeunit.CONNECT_STATE_UPDATE | 无 | -| COMMON_EVENT_BLUETOOTH_HANDSFREEUNIT_AUDIO_STATE_UPDATE | usual.event.bluetooth.handsfreeunit.AUDIO_STATE_UPDATE | 无 | -| COMMON_EVENT_BLUETOOTH_HANDSFREEUNIT_AG_COMMON_EVENT | usual.event.bluetooth.handsfreeunit.AG_COMMON_EVENT | 无 | -| COMMON_EVENT_BLUETOOTH_HANDSFREEUNIT_AG_CALL_STATE_UPDATE | usual.event.bluetooth.handsfreeunit.AG_CALL_STATE_UPDATE | 无 | -| COMMON_EVENT_BLUETOOTH_HOST_STATE_UPDATE | usual.event.bluetooth.host.STATE_UPDATE | 无 | -| COMMON_EVENT_BLUETOOTH_HOST_REQ_DISCOVERABLE | usual.event.bluetooth.host.REQ_DISCOVERABLE | 无 | -| COMMON_EVENT_BLUETOOTH_HOST_REQ_ENABLE | usual.event.bluetooth.host.REQ_ENABLE | ohos.permission.USE_BLUETOOTH | -| COMMON_EVENT_BLUETOOTH_HOST_REQ_DISABLE | usual.event.bluetooth.host.REQ_DISABLE | ohos.permission.USE_BLUETOOTH | -| COMMON_EVENT_BLUETOOTH_HOST_SCAN_MODE_UPDATE | usual.event.bluetooth.host.SCAN_MODE_UPDATE | ohos.permission.USE_BLUETOOTH | -| COMMON_EVENT_BLUETOOTH_HOST_DISCOVERY_STARTED | usual.event.bluetooth.host.DISCOVERY_STARTED | ohos.permission.USE_BLUETOOTH | -| COMMON_EVENT_BLUETOOTH_HOST_DISCOVERY_FINISHED | usual.event.bluetooth.host.DISCOVERY_FINISHED | ohos.permission.USE_BLUETOOTH | -| COMMON_EVENT_BLUETOOTH_HOST_NAME_UPDATE | usual.event.bluetooth.host.NAME_UPDATE | ohos.permission.USE_BLUETOOTH | -| COMMON_EVENT_BLUETOOTH_A2DPSINK_CONNECT_STATE_UPDATE | usual.event.bluetooth.a2dpsink.CONNECT_STATE_UPDATE | ohos.permission.USE_BLUETOOTH | -| COMMON_EVENT_BLUETOOTH_A2DPSINK_PLAYING_STATE_UPDATE | usual.event.bluetooth.a2dpsink.PLAYING_STATE_UPDATE | ohos.permission.USE_BLUETOOTH | -| COMMON_EVENT_BLUETOOTH_A2DPSINK_AUDIO_STATE_UPDATE | usual.event.bluetooth.a2dpsink.AUDIO_STATE_UPDATE | ohos.permission.USE_BLUETOOTH | -| COMMON_EVENT_NFC_ACTION_ADAPTER_STATE_CHANGED | usual.event.nfc.action.ADAPTER_STATE_CHANGED | 无 | -| COMMON_EVENT_NFC_ACTION_RF_FIELD_ON_DETECTED | usual.event.nfc.action.RF_FIELD_ON_DETECTED | ohos.permission.MANAGE_SECURE_SETTINGS | -| COMMON_EVENT_NFC_ACTION_RF_FIELD_OFF_DETECTED | usual.event.nfc.action.RF_FIELD_OFF_DETECTED | ohos.permission.MANAGE_SECURE_SETTINGS | -| COMMON_EVENT_DISCHARGING | usual.event.DISCHARGING | 无 | -| COMMON_EVENT_CHARGING | usual.event.CHARGING | 无 | -| COMMON_EVENT_DEVICE_IDLE_MODE_CHANGED | usual.event.DEVICE_IDLE_MODE_CHANGED | 无 | -| COMMON_EVENT_POWER_SAVE_MODE_CHANGED | usual.event.POWER_SAVE_MODE_CHANGED | 无 | -| COMMON_EVENT_USER_ADDED | usual.event.USER_ADDED | ohos.permission.MANAGE_USERS | -| COMMON_EVENT_USER_REMOVED | usual.event.USER_REMOVED | ohos.permission.MANAGE_USERS | -| COMMON_EVENT_ABILITY_ADDED | common.event.ABILITY_ADDED | ohos.permission.LISTEN_BUNDLE_CHANGE | -| COMMON_EVENT_ABILITY_REMOVED | common.event.ABILITY_REMOVED | ohos.permission.LISTEN_BUNDLE_CHANGE | -| COMMON_EVENT_ABILITY_UPDATED | common.event.ABILITY_UPDATED | ohos.permission.LISTEN_BUNDLE_CHANGE | -| COMMON_EVENT_LOCATION_MODE_STATE_CHANGED | usual.event.location.MODE_STATE_CHANGED | 无 | -| COMMON_EVENT_IVI_SLEEP | common.event.IVI_SLEEP | 无 | -| COMMON_EVENT_IVI_PAUSE | common.event.IVI_PAUSE | 无 | -| COMMON_EVENT_IVI_STANDBY | common.event.IVI_STANDBY | 无 | -| COMMON_EVENT_IVI_LASTMODE_SAVE | common.event.IVI_LASTMODE_SAVE | 无 | -| COMMON_EVENT_IVI_VOLTAGE_ABNORMAL | common.event.IVI_VOLTAGE_ABNORMAL | 无 | -| COMMON_EVENT_IVI_HIGH_TEMPERATURE | common.event.IVI_HIGH_TEMPERATURE | 无 | -| COMMON_EVENT_IVI_EXTREME_TEMPERATURE | common.event.IVI_EXTREME_TEMPERATURE | 无 | -| COMMON_EVENT_IVI_TEMPERATURE_ABNORMAL | common.event.IVI_TEMPERATURE_ABNORMAL | 无 | -| COMMON_EVENT_IVI_VOLTAGE_RECOVERY | common.event.IVI_VOLTAGE_RECOVERY | 无 | -| COMMON_EVENT_IVI_TEMPERATURE_RECOVERY | common.event.IVI_TEMPERATURE_RECOVERY | 无 | -| COMMON_EVENT_IVI_ACTIVE | common.event.IVI_ACTIVE | 无 | -| COMMON_EVENT_USB_DEVICE_ATTACHED | usual.event.hardware.usb.action.USB_DEVICE_ATTACHED | 无 | -| COMMON_EVENT_USB_DEVICE_DETACHED | usual.event.hardware.usb.action.USB_DEVICE_DETACHED | 无 | -| COMMON_EVENT_USB_ACCESSORY_ATTACHED | usual.event.hardware.usb.action.USB_ACCESSORY_ATTACHED | 无 | -| COMMON_EVENT_USB_ACCESSORY_DETACHED | usual.event.hardware.usb.action.USB_ACCESSORY_DETACHED | 无 | -| COMMON_EVENT_DISK_REMOVED | usual.event.data.DISK_REMOVED | ohos.permission.WRITE_USER_STORAGE or ohos.permission.READ_USER_STORAGE | -| COMMON_EVENT_DISK_UNMOUNTED | usual.event.data.DISK_UNMOUNTED | ohos.permission.WRITE_USER_STORAGEor ohos.permission.READ_USER_STORAGE | -| COMMON_EVENT_DISK_MOUNTED | usual.event.data.DISK_MOUNTED | ohos.permission.WRITE_USER_STORAGEor ohos.permission.READ_USER_STORAGE | -| COMMON_EVENT_DISK_BAD_REMOVAL | usual.event.data.DISK_BAD_REMOVAL | ohos.permission.WRITE_USER_STORAGEor ohos.permission.READ_USER_STORAGE | -| COMMON_EVENT_DISK_UNMOUNTABLE | usual.event.data.DISK_UNMOUNTABLE | ohos.permission.WRITE_USER_STORAGEor ohos.permission.READ_USER_STORAGE | -| COMMON_EVENT_DISK_EJECT | usual.event.data.DISK_EJECT | ohos.permission.WRITE_USER_STORAGEor ohos.permission.READ_USER_STORAGE | -| COMMON_EVENT_VISIBLE_ACCOUNTS_UPDATED | usual.event.data.VISIBLE_ACCOUNTS_UPDATED | ohos.permission.GET_APP_ACCOUNTS | -| COMMON_EVENT_ACCOUNT_DELETED | usual.event.data.ACCOUNT_DELETED | ohos.permission.INTERACT_ACROSS_LOCAL_ACCOUNTS | -| COMMON_EVENT_FOUNDATION_READY | common.event.FOUNDATION_READY | ohos.permission.RECEIVER_STARTUP_COMPLETED | -| COMMON_EVENT_AIRPLANE_MODE_CHANGED | usual.event.AIRPLANE_MODE | 无 | - -#### 导入模块 - -```js -import CommonEvent from '@ohos.commonevent'; -``` - - - -#### CommonEvent.publish(event: string, callback: AsyncCallback) - -- 接口说明 - - 发布公共事件（callback形式） - -* publish参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | -------- | -------- | ------------------- | ---- | -------------------- | - | event | 只读 | string | 是 | 表示要发送的公共事件 | - | callback | 只读 | AsyncCallback | 是 | 表示被指定的回调方法 | - -* 返回值 - - void - -* 示例 - -```js -//发布公共事件回调 -function PublishCallBack(err) { - console.info("==========================>PublishCallBack=======================>"); - console.info("==========================>err:=======================>", err.code); -} -//发布公共事件 -CommonEvent.publish("publish_event", PublishCallBack); -``` - - - -#### CommonEvent.publish(event: string, options: CommonEventPublishData, callback: AsyncCallback) - -- 接口说明 - - 发布公共事件指定发布信息（callback形式） - -- publish参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | -------- | -------- | ---------------------- | ---- | ---------------------- | - | event | 只读 | string | 是 | 表示要发布的公共事件 | - | options | 只读 | CommonEventPublishData | 是 | 表示发布公共事件的属性 | - | callback | 只读 | AsyncCallback | 是 | 表示被指定的回调方法 | - -- CommonEventPublishData类型说明 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | --------------------- | -------- | -------------------- | ---- | ---------------------------- | - | bundleName | 只读 | string | 否 | 表示包名称 | - | code | 只读 | int | 否 | 表示公共事件的结果代码 | - | data | 只读 | string | 否 | 表示公共事件的自定义结果数据 | - | subscriberPermissions | 只读 | Array | 否 | 表示订阅者的权限 | - | isOrdered | 只读 | bool | 否 | 表示是否是有序事件 | - | parameters | 只读 | {[key: string]: any} | 否 | 表示公共事件的附加信息 | - -- 返回值 - - void - -- 示例 - -```js -//公共事件相关信息 -var options = { - code: 0; //公共事件的初始代码 - data: "initial data";//公共事件的初始数据 - isOrdered: true; //有序公共事件 -} -//发布公共事件回调 -function PublishCallBack(err) { - console.info("==========================>PublishCallBack=======================>"); -} -//发布公共事件 -CommonEvent.publish("publish_event", options, PublishCallBack); -``` - - - -#### CommonEvent.createSubscriber(subscribeInfo: CommonEventSubscribeInfo, callback: AsyncCallback) - -- 接口说明 - - 创建订阅者（callback形式） - -- createSubscriber参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ------------- | -------- | ------------------------------------ | ---- | ------------------------ | - | subscribeInfo | 只读 | CommonEventSubscribeInfo | 是 | 表示订阅信息 | - | callback | 只读 | AsyncCallback | 是 | 表示创建订阅者的回调方法 | - -- CommonEventSubscriber 类说明 - - | 名称 | 参数 | 返回值 | 描述 | - | --------------------- | --------------------------------------------------------- | --------------------------------- | ------------------------------------------------------------ | - | getCode | callback: AsyncCallback | void | 获取公共事件的结果代码（callback形式） | - | getCode | void | Promise | 获取公共事件的结果代码（Promise形式） | - | setCode | code: number, callback: AsyncCallback | void | 设置公共事件的结果代码（callback形式） | - | setCode | code: number | Promise | 设置公共事件的结果代码（Promise形式） | - | getData | callback: AsyncCallback | void | 获取公共事件的结果数据（callback形式） | - | getData | void | Promise | 获取公共事件的结果数据（Promise形式） | - | setData | data: string, callback: AsyncCallback | void | 设置公共事件的结果数据（callback形式） | - | setData | data: string | Promise | 设置公共事件的结果数据（Promise形式） | - | setCodeAndData | code: number, data: string, callback: AsyncCallback | void | 设置公共事件的结果代码和结果数据（callback形式） | - | setCodeAndData | code: number, data: string | Promise | 设置公共事件的结果代码和结果数据（Promise形式） | - | isOrderedCommonEvent | callback: AsyncCallback | void | 查询当前公共事件的是否为有序公共事件，返回true代表是有序公共事件，false代表不是有序公共事件（callback形式） | - | isOrderedCommonEvent | void | Promise | 查询当前公共事件的是否为有序公共事件，返回true代表是有序公共事件，false代表不是有序公共事件（Promise形式） | - | abortCommonEvent | callback: AsyncCallback | void | 取消当前的公共事件，仅对有序公共事件有效，取消后，公共事件不再向下一个订阅者传递（callback形式） | - | abortCommonEvent | void | Promise | 取消当前的公共事件，仅对有序公共事件有效，取消后，公共事件不再向下一个订阅者传递（Promise形式） | - | clearAbortCommonEvent | callback: AsyncCallback | void | 清除当前有序公共事件abort状态（callback形式） | - | clearAbortCommonEvent | void | Promise | 清除当前有序公共事件abort状态（Promise形式） | - | getAbortCommonEvent | callback: AsyncCallback | void | 获取当前有序公共事件是否取消的状态（callback形式） | - | getAbortCommonEvent | void | Promise | 获取当前有序公共事件是否取消的状态Promise形式） | - | getSubscribeInfo | callback: AsyncCallback | void | 获取订阅者的订阅信息（callback形式） | - | getSubscribeInfo | void | Promise | 获取订阅者的订阅信息（Promise形式） | - -- CommonEventSubscribeInfo类型说明 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ------------------- | -------- | ------------- | ---- | ------------------------------------------------------------ | - | events | 只读 | Array | 是 | 表示要订阅的公共事件 | - | publisherPermission | 只读 | string | 否 | 表示发布者的权限 | - | publisherDeviceId | 只读 | int | 否 | 表示设备ID，该值必须是同一ohos网络上的现有设备ID | - | userId | 只读 | int | 否 | 表示用户ID。此参数是可选的，默认值当前用户的ID。如果指定了此参数，则该值必须是系统中现有的用户ID。 | - | priority | 只读 | int | 否 | 表示订阅者的优先级，范围为-100~1000。 | - -- 返回值 - - void - -- 示例 - -```js -var subscriber; //用于保存创建成功的订阅者对象，后续使用其完成订阅及退订的动作 -//订阅者信息 -var subscribeInfo = { - events: ["event"] -}; -//创建订阅者回调 -function CreateSubscriberCallBack(err, data) { - console.info("==========================>CreateSubscriberCallBack=======================>"); - subscriber = data; -} -//创建订阅者 -CommonEvent.createSubscriber(subscribeInfo, CreateSubscriberCallBack); -``` - - - -#### CommonEvent.createSubscriber(subscribeInfo: CommonEventSubscribeInfo) - -- 接口说明 - - 创建订阅者（Promise形式） - -- createSubscriber参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ------------- | -------- | ------------------------ | ---- | ------------ | - | subscribeInfo | 只读 | CommonEventSubscribeInfo | 是 | 表示订阅信息 | - -- CommonEventSubscribeInfo类型说明 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ------------------- | -------- | ------------- | ---- | ------------------------------------------------------------ | - | events | 只读 | Array | 是 | 表示要发送的公共事件 | - | publisherPermission | 只读 | string | 否 | 表示发布者的权限 | - | publisherDeviceId | 只读 | int | 否 | 表示设备ID，该值必须是同一ohos网络上的现有设备ID | - | userId | 只读 | int | 否 | 表示用户ID。此参数是可选的，默认值当前用户的ID。如果指定了此参数，则该值必须是系统中现有的用户ID。 | - | priority | 只读 | int | 否 | 表示订阅者的优先级。值的范围是-100到1000 | - -- 返回值 - - Promise - -- 示例 - -```js -var subscriber; //用于保存创建成功的订阅者对象，后续使用其完成订阅及退订的动作 -//订阅者信息 -var subscribeInfo = { - events: ["event"] -}; -//创建订阅者 -CommonEvent.createSubscriber(subscribeInfo).then((data) => { - console.info("==========================>createSubscriberPromise=======================>"); - subscriber = data; -}); -``` - - - -#### CommonEvent.subscribe(subscriber: CommonEventSubscriber, callback: AsyncCallback) - -- 接口说明 - - 订阅公共事件（callback形式） - -- subscribe参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ---------- | -------- | ------------------------------ | ---- | ------------------------------ | - | subscriber | 只读 | CommonEventSubscriber | 是 | 表示订阅者对象 | - | callback | 只读 | AsyncCallback | 是 | 表示接收公共事件数据的回调函数 | - -- CommonEventData类型说明 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ---------- | -------- | -------------------- | ---- | ------------------------------------------------------- | - | event | 只读 | string | 是 | 表示当前接收的公共事件名称 | - | bundleName | 只读 | string | 否 | 表示包名称 | - | code | 只读 | int | 否 | 表示公共事件的结果代码，用于传递int类型的数据 | - | data | 只读 | string | 否 | 表示公共事件的自定义结果数据，用于传递string 类型的数据 | - | parameters | 只读 | {[key: string]: any} | 否 | 表示公共事件的附加信息 | - -- 返回值 - - void - -- 示例 - - * 无序事件： - - ```js - var subscriber; //用于保存创建成功的订阅者对象，后续使用其完成订阅及退订的动作 - //订阅者信息 - var subscribeInfo = { - events: ["event"] - }; - //订阅公共事件回调 - function SubscribeCallBack(err, data) { - console.info("==========================>SubscribeCallBack=======================>"); - } - //创建订阅者回调 - function CreateSubscriberCallBack(err, data) { - console.info("==========================>CreateSubscriberCallBack=======================>"); - subscriber = data; - //订阅公共事件 - CommonEvent.subscribe(subscriber, SubscribeCallBack); - } - //创建订阅者 - CommonEvent.createSubscriber(subscribeInfo, CreateSubscriberCallBack); - ``` - - * 有序事件 - - ```js - var subscriber; //用于保存创建成功的订阅者对象，后续使用其完成订阅及退订的动作 - //订阅者信息 - var subscribeInfo = { - events: ["event"] - }; - - //设置有序公共事件的结果代码回调 - function SetCodeCallBack(err) { - console.info("==========================>SetCodeCallBack=======================>"); - } - //设置有序公共事件的结果数据回调 - function SetDataCallBack(err) { - console.info("==========================>SetDataCallBack=======================>"); - } - //完成本次有序公共事件处理回调 - function FinishCommonEventCallBack(err) { - console.info("==========================>FinishCommonEventCallBack=======================>"); - } - //订阅公共事件回调 - function SubscribeCallBack(err, data) { - console.info("==========================>SubscribeCallBack=======================>"); - //设置有序公共事件的结果代码 - subscriber.setCode(0, SetCodeCallBack); - //设置有序公共事件的结果数据 - subscriber.setData("publish_data_changed", SetDataCallBack); - //完成本次有序公共事件处理 - subscriber.finishCommonEvent(FinishCommonEventCallBack) - } - - //创建订阅者回调 - function CreateSubscriberCallBack(err, data) { - console.info("==========================>CreateSubscriberCallBack=======================>"); - subscriber = data; - //订阅公共事件 - CommonEvent.subscribe(subscriber, SubscribeCallBack); - } - - //创建订阅者 - CommonEvent.createSubscriber(subscribeInfo, CreateSubscriberCallBack); - ``` - - - -#### CommonEvent.unsubscribe(subscriber: CommonEventSubscriber, callback?: AsyncCallback) - -- 接口说明 - - 取消订阅公共事件（callback形式） - -- unsubscribe参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ---------- | -------- | --------------------- | ---- | ---------------------- | - | subscriber | 只读 | CommonEventSubscriber | 是 | 表示订阅者对象 | - | callback | 只读 | AsyncCallback | 是 | 表示取消订阅的回调方法 | - -- 返回值 - - void - -- 示例 - -```js -var subscriber; //用于保存创建成功的订阅者对象，后续使用其完成订阅及退订的动作 -//订阅者信息 -var subscribeInfo = { - events: ["event"] -}; -//订阅公共事件回调 -function SubscribeCallBack(err, data) { - console.info("==========================>SubscribeCallBack=======================>"); -} -//创建订阅者回调 -function CreateSubscriberCallBack(err, data) { - console.info("==========================>CreateSubscriberCallBack=======================>"); - subscriber = data; - //订阅公共事件 - CommonEvent.subscribe(subscriber, SubscribeCallBack); -} -//取消订阅公共事件回调 -function UnsubscribeCallBack(err) { - console.info("==========================>UnsubscribeCallBack=======================>"); -} -//创建订阅者 -CommonEvent.createSubscriber(subscribeInfo, CreateSubscriberCallBack); -//取消订阅公共事件 -CommonEvent.unsubscribe(subscriber, UnsubscribeCallBack); -``` - - - - - diff --git a/zh-cn/application-dev/js-reference/Context.md b/zh-cn/application-dev/js-reference/Context.md deleted file mode 100644 index 00e423f4580308e627fb80fe83594af04cdb3578..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/Context.md +++ /dev/null @@ -1,542 +0,0 @@ -### Context模块(JS端SDK接口) - -#### 支持设备 - -| API | 手机 | 平板 | 智慧屏 | 智能穿戴 | 轻量级智能穿戴 | 智慧视觉设备 | -| ------------------------------------------------------------ | ---- | ---- | ------ | -------- | -------------- | ------------ | -| Context.getOrCreateLocalDir(callback: AsyncCallback\) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| Context.getOrCreateLocalDir() | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| Context.verifyPermission(permission: string, options: PermissionOptions, callback: AsyncCallback\) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| Context.verifyPermission(permission: string, callback: AsyncCallback\) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| Context.verifyPermission(permission: string, options?: PermissionOptions) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| Context.requestPermissionsFromUser(permissions: Array\, requestCode: number, resultCallback: AsyncCallback\) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| Context.getApplicationInfo(callback: AsyncCallback\) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| Context.getApplicationInfo() | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| Context.getBundleName(callback: AsyncCallback\) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| Context.getBundleName() | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| Context.getProcessInfo(callback: AsyncCallback\) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| Context.getProcessInfo() | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| Context.getElementName(callback: AsyncCallback\) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| Context.getElementName() | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| Context.getProcessName(callback: AsyncCallback\) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| Context.getProcessName() | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| Context.getCallingBundle(callback: AsyncCallback\) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| Context.getCallingBundle() | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | - -#### 权限列表 - -**ohos.permission.RUNNING_LOCK permission** - -#### 导入模块 - -``` -import featureAbility from '@ohos.ability.featureAbility' -import bundle from '@ohos.bundle' -``` - -#### Context.getOrCreateLocalDir(callback: AsyncCallback\) - -- 接口说明 - - 获取应用程序的本地根目录。如果是第一次调用，将创建目录(callback形式) - -- getOrCreateLocalDir参数描述 - - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| -------- | -------- | ----------------------- | ---- | ---------------- | -| callback | 只读 | AsyncCallback\) | 是 | 被指定的回调方法 | - -- 返回值 - - 根目录 - -- 示例 - -```js -import featureAbility from '@ohos.ability.featureAbility' -var context = featureAbility.getContext(); -context.getOrCreateLocalDir() -``` - - - -#### Context.getOrCreateLocalDir() - -- 接口说明 - - 获取应用程序的本地根目录。如果是第一次调用，将创建目录(Promise形式) - -- 返回值 - - 根目录 - -- 示例 - -```js -import featureAbility from '@ohos.ability.featureAbility' -var context = featureAbility.getContext(); -context.getOrCreateLocalDir().then((void) => { - console.info("==========================>getOrCreateLocalDirCallback=======================>"); -}); -``` - - - -#### Context.verifyPermission(permission: string, options: PermissionOptions, callback: AsyncCallback\) - -- 接口说明 - - 验证系统中运行的特定pid和uid是否允许指定的权限(callback形式) - -- verifyPermission参数描述 - - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ---------- | -------- | ---------------------- | ---- | ---------------- | -| permission | 只读 | string | 是 | 指定权限的名称 | -| options | 只读 | PermissionOptions | 是 | 进程id | -| callback | 只读 | AsyncCallback\ | 是 | 被指定的回调方法 | - -- PermissionOptions类型说明 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ---- | -------- | ------ | ---- | ------ | -| pid | 只读 | number | 否 | 进程id | -| uid | 只读 | number | 否 | 用户id | - -- 返回值 - - 如果PID和UID具有权限，则使用{@code 0}进行异步回调；否则使用{@code-1}回调。 - -- 示例 - -```js -import featureAbility from '@ohos.ability.featureAbility' -import bundle from '@ohos.bundle' -var context = featureAbility.getContext(); -var datainfo = await bundle.getBundleInfo('com.context.test',1); -context.verifyPermission("com.example.permission",datainfo.uid,) - -``` - - - -#### Context.verifyPermission(permission: string, callback: AsyncCallback\) - -- 接口说明 - - 验证系统中运行的特定pid和uid是否允许指定的权限(callback形式) - -- 参数描述 - - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ---------- | -------- | ----------------------- | ---- | ---------------- | -| permission | 只读 | string | 是 | 指定权限的名称 | -| callback | 只读 | AsyncCallback\) | 是 | 被指定的回调方法 | - -- 返回值 - - 如果PID和UID具有权限，则使用{@code 0}进行异步回调；否则使用{@code-1}回调。 - -- 示例 - -```js -import featureAbility from '@ohos.ability.featureAbility' -var context = featureAbility.getContext(); -context.verifyPermission("com.example.permission") -``` - - - -#### Context.verifyPermission(permission: string, options?: PermissionOptions) - -- 接口说明 - - 验证系统中运行的特定pid和uid是否允许指定的权限(Promise形式) -- verifyPermission参数描述 - - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ---------- | -------- | ----------------- | ---- | -------------- | -| permission | 只读 | string | 是 | 指定权限的名称 | -| options | 只读 | PermissionOptions | 否 | 进程id | - -- PermissionOptions类型说明 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ---- | -------- | ------ | ---- | ------ | -| pid | 只读 | number | 否 | 进程id | -| uid | 只读 | number | 否 | 用户id | - -- 返回值 - - 如果PID和UID具有权限，则使用{@code 0}进行异步回调；否则使用{@code-1}回调。 - -- 示例 - -```js -import featureAbility from '@ohos.ability.featureAbility' -var context = featureAbility.getContext(); -var Permission = context.PermissionOptions(1,1); -context.getOrCreateLocalDir('com.context.permission',Permission).then((void) => { - console.info("==========================>verifyPermissionCallback=======================>"); -}); -``` - - - -#### Context.requestPermissionsFromUser(permissions: Array\, requestCode: number, resultCallback: AsyncCallback\) - -- 接口说明 - - 从系统请求某些权限(callback形式) - -- requestPermissionsFromUser参数描述 - - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| -------------- | -------- | ---------------------------------------- | ---- | --------------------------------------------- | -| permissions | 只读 | Array\ | 是 | 指示要请求的权限列表。此参数不能为null | -| requestCode | 只读 | number | 是 | 指示要传递给PermissionRequestResult的请求代码 | -| resultCallback | 只读 | AsyncCallback\) | 是 | 被指定的回调方法 | -- PermissionRequestResult类型说明 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ----------- | -------- | -------------- | ---- | ------------------ | -| requestCode | 只读 | number | 是 | 用户传入的请求代码 | -| permissions | 只读 | Array\ | 是 | 用户传入的权限 | -| authResults | 只读 | Array\ | 是 | 求权限的结果 | - -- 返回值 - - void - -- 示例 - -```js -import featureAbility from '@ohos.ability.featureAbility' -var context = featureAbility.getContext(); -context.getOrCreateLocalDir( - ["com.example.permission1", - "com.example.permission2", - "com.example.permission3", - "com.example.permission4", - "com.example.permission5"], - 1, -) -``` - - - -#### Context.getApplicationInfo(callback: AsyncCallback\) - -- 接口说明 - - 获取有关当前应用程序的信息（callback形式） - -- 参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | -------- | -------- | ------------------------------- | ---- | -------------------- | - | callback | 只读 | AsyncCallback\ | 是 | 表示被指定的回调方法 | - -- 返回值 - - void - -- 示例 - -```js -import featureAbility from '@ohos.ability.featureAbility' -var context = featureAbility.getContext(); -context.getApplicationInfo() -``` - - - -#### Context.getApplicationInfo() - -- 接口说明 - - 获取有关当前应用程序的信息（Promise形式) - -- 参数描述 - - Null - -- 返回值 - - void - -- 示例 - -```js -import featureAbility from '@ohos.ability.featureAbility' -var context = featureAbility.getContext(); -context.getApplicationInfo().then((void) => { - console.info("==========================>getApplicationInfoCallback=======================>"); -}); -``` - - - -#### Context.getBundleName(callback: AsyncCallback\) - -- 接口说明 - - 获取当前ability的捆绑包名称（callback形式） - -- 参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | -------- | -------- | ---------------------- | ---- | -------------------- | - | callback | 只读 | AsyncCallback\ | 是 | 表示被指定的回调方法 | - -- 返回值 - - void - -- 示例 - -```js -import featureAbility from '@ohos.ability.featureAbility' -var context = featureAbility.getContext(); -context.getBundleName() -``` - - - -#### Context.getBundleName() - -- 接口说明 - - 获取当前ability的捆绑包名称（Promise形式) - -- 参数描述 - - Null - -- 返回值 - - void - -- 示例 - -```js -import featureAbility from '@ohos.ability.featureAbility' -var context = featureAbility.getContext(); -context.getBundleName().then((void) => { - console.info("==========================>getBundleNameCallback=======================>"); -}); -``` - - - -#### Context.getProcessInfo(callback: AsyncCallback\) - -- 接口说明 - - 获取有关当前进程的信息，包括进程ID和名称（callback形式） - -- 参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | -------- | -------- | --------------------------- | ---- | -------------------- | - | callback | 只读 | AsyncCallback\ | 是 | 表示被指定的回调方法 | - -- 返回值 - - void - -- 示例 - -```js -import featureAbility from '@ohos.ability.featureAbility' -var context = featureAbility.getContext(); -context.getProcessInfo() -``` - - - -#### Context.getProcessInfo() - -- 接口说明 - - 获取有关当前进程的信息，包括进程ID和名称（Promise形式) - -- 参数描述 - - Null - -- 返回值 - - void - -- 示例 - -```js -import featureAbility from '@ohos.ability.featureAbility' -var context = featureAbility.getContext(); -context.getProcessInfo().then((void) => { - console.info("==========================>getProcessInfoCallback=======================>"); -}); -``` - - - -#### Context.getElementName(callback: AsyncCallback\) - -- 接口说明 - - 获取当前能力的ohos.bundle.ElementName对象。此方法仅适用于页面功能(callback形式） - -- 参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | -------- | -------- | --------------------------- | ---- | -------------------- | - | callback | 只读 | AsyncCallback\ | 是 | 表示被指定的回调方法 | - -- 返回值 - - void - -- 示例 - -```js -import featureAbility from '@ohos.ability.featureAbility' -var context = featureAbility.getContext(); -context.getElementName() -``` - - - -#### Context.getElementName() - -- 接口说明 - - 获取当前能力的ohos.bundle.ElementName对象。此方法仅适用于页面功能(Promise形式) - -- 参数描述 - - Null - -- 返回值 - - void - -- 示例 - -```js -import featureAbility from '@ohos.ability.featureAbility' -var context = featureAbility.getContext(); -context.getElementName().then((void) => { - console.info("==========================>getElementNameCallback=======================>"); -}); -``` - -#### - -#### Context.getProcessName(callback: AsyncCallback\) - -- 接口说明 - - 获取当前进程的名称(callback形式） - -- 参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | -------- | -------- | ---------------------- | ---- | -------------------- | - | callback | 只读 | AsyncCallback\ | 是 | 表示被指定的回调方法 | - -- 返回值 - - void - -- 示例 - -```js -import featureAbility from '@ohos.ability.featureAbility' -var context = featureAbility.getContext(); -context.getProcessName() -``` - - - -#### Context.getProcessName() - -- 接口说明 - - 获取当前进程的名称(Promise形式) - -- 参数描述 - - Null - -- 返回值 - - void - -- 示例 - -```js -import featureAbility from '@ohos.ability.featureAbility' -var context = featureAbility.getContext(); -context.getProcessName().then((void) => { - console.info("==========================>getProcessNameCallback=======================>"); -}); -``` - - - -#### Context.getCallingBundle(callback: AsyncCallback\) - -- 接口说明 - - 获取调用当前能力的能力的捆绑包名称(callback形式） - -- 参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | -------- | -------- | ---------------------- | ---- | -------------------- | - | callback | 只读 | AsyncCallback\ | 是 | 表示被指定的回调方法 | - -- 返回值 - - void - -- 示例 - -```js -import featureAbility from '@ohos.ability.featureAbility' -var context = featureAbility.getContext(); -context.getCallingBundle() -``` - - - -#### Context.getCallingBundle() - -- 接口说明 - - 获取调用当前能力的能力的捆绑包名称(Promise形式) - -- 参数描述 - - Null - -- 返回值 - - void - -- 示例 - -```js -import featureAbility from '@ohos.ability.featureAbility' -var context = featureAbility.getContext(); -context.getCallingBundle().then((void) => { - console.info("==========================>getCallingBundleCallback=======================>"); -}); -``` - diff --git a/zh-cn/application-dev/js-reference/DataUriUtils.md b/zh-cn/application-dev/js-reference/DataUriUtils.md deleted file mode 100644 index 225145d1b9f951f74e0f5901847a7438548e898c..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/DataUriUtils.md +++ /dev/null @@ -1,131 +0,0 @@ -### DataUriUtils模块(JS端SDK接口) - -#### 支持设备 - -| API | 手机 | 平板 | 智慧屏 | 智能穿戴 | 轻量级智能穿戴 | 智慧视觉设备 | -| ---------------------------------------------- | ---- | ---- | ------ | -------- | -------------- | ------------ | -| DataUriUtils.getId(uri: string) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| DataUriUtils.attachId(uri: string, id: number) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| DataUriUtils.deleteId(uri: string) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| DataUriUtils.updateId(uri: string, id: number) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | - -#### 权限列表 - -ohos.permission.RUNNING_LOCK permission - -#### 导入模块 - -```js -import notify from '@ohos.ability.dataUriUtils'; -``` - -#### DataUriUtils.getId(uri: string) - -- 接口说明 - - 获取附加到给定uri的路径组件末尾的ID - -- 参数描述 - - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ---- | -------- | ------ | ---- | ------------------------- | -| uri | 只读 | string | 是 | 指示要从中获取ID的uri对象 | - -- 返回值 - - 附加到路径组件末尾的ID - -- 示例 - -```js -import dataUriUtils from '@ohos.ability.datauriutils' -dataUriUtils.getIdSync("com.example.dataUriUtils/1221") -``` - - - -#### DataUriUtils.attachId(uri: string, id: number) - -- 接口说明 - - 将给定ID附加到给定uri的路径组件的末尾 - -- 参数描述 - - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ---- | -------- | ------ | ---- | ------------------------- | -| uri | 只读 | string | 是 | 指示要从中获取ID的uri对象 | -| id | 只读 | number | 是 | 指示要附加的ID | - -- 返回值 - - 附加给定ID的uri对象 - -- 示例 - -```js -import dataUriUtils from '@ohos.ability.datauriutils' -var idint = 1122; -dataUriUtils.attachId( - "com.example.dataUriUtils" - idint, -) -``` - - - -#### DataUriUtils.deleteId(uri: string) - -- 接口说明 - - 从给定uri的路径组件的末尾删除ID - -- 参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ---- | -------- | ------ | ---- | ------------------------- | - | uri | 只读 | string | 是 | 指示要从中删除ID的uri对象 | - -- 返回值 - - ID已删除的uri对象 - -- 示例 - -```js -import dataUriUtils from '@ohos.ability.datauriutils' -dataUriUtils.deleteId("com.example.dataUriUtils/1221") -``` - - - -#### DataUriUtils.updateId(uri: string, id: number) - -- 接口说明 - - 更新指定uri中的ID - -- updateId参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ---- | -------- | ------ | ---- | ------------------- | - | uri | 只读 | string | 是 | 指示要更新的uri对象 | - | id | 只读 | number | 是 | 指示新ID | - -- 返回值 - - 更新的uri对象 - -- 示例 - -```js -import dataUriUtils from '@ohos.ability.datauriutils' -var idint = 1122; -dataUriUtils.updateId( - "com.example.dataUriUtils" - idint, -) -``` - diff --git a/zh-cn/application-dev/js-reference/FeatureAbility.md b/zh-cn/application-dev/js-reference/FeatureAbility.md deleted file mode 100644 index 7db9dc5e921b9b905dc7aba807f05cd9b740c665..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/FeatureAbility.md +++ /dev/null @@ -1,913 +0,0 @@ -### FeatureAbility模块(JS端SDK接口) - -#### 支持设备 - -| API | 手机 | 平板 | 智慧屏 | 智能穿戴 | 轻量级智能穿戴 | 智慧视觉设备 | -| ------------------------------------------------------------ | ---- | ---- | ------ | -------- | -------------- | ------------ | -| FeatureAbility.startAbility(parameter: StartAbilityParameter, callback: AsyncCallback\) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| FeatureAbility.startAbility(parameter: StartAbilityParameter) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| FeatureAbility.acquireDataAbilityHelper(uri: string) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| FeatureAbility.startAbilityForResult(parameter: StartAbilityParameter, callback: AsyncCallback\) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| FeatureAbility.startAbilityForResult(parameter: StartAbilityParameter) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| FeatureAbility.terminateSelfWithResult(parameter: AbilityResult, callback: AsyncCallback\) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| FeatureAbility.terminateSelfWithResult(parameter: AbilityResult) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| FeatureAbility.hasWindowFocus(callback: AsyncCallback\) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| FeatureAbility.hasWindowFocus() | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| FeatureAbility.getWant(callback: AsyncCallback\) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| FeatureAbility.getWant() | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| FeatureAbility.getContext() | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| FeatureAbility.terminateSelf(callback: AsyncCallback\) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| FeatureAbility.terminateSelf() | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | - -#### 权限列表 - -ohos.permission.RUNNING_LOCK permission - -#### 使用限制 - -FeatureAbility模块的接口只能在Page类型的Ability调用 - -#### 导入模块 - -``` -import featureAbility from '@ohos.ability.featureAbility' -``` - -#### FeatureAbility.startAbility(parameter: StartAbilityParameter, callback: AsyncCallback\) - -* 接口说明 - - 启动新的ability(callback形式) - -* startAbility参数描述 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| --------- | -------- | --------------------- | ---- | ------------------- | -| parameter | 只读 | StartAbilityParameter | 是 | 表示被启动的Ability | -| callback | 只读 | AsyncCallback | 是 | 被指定的回调方法 | - -- StartAbilityParameter类型说明 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ------------------- | -------- | ------ | ---- | ---------------------------------- | -| want | 只读 | want | 是 | 表示需要包含有关目标启动能力的信息 | -| abilityStartSetting | 只读 | string | 否 | 指示启动能力中使用的特殊启动设置 | - -- want类型说明 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ----------- | -------- | ------ | ---- | -------------------------- | -| deviceId | 只读 | string | 否 | 设备id | -| bundleName | 只读 | string | 否 | 捆绑包名称 | -| abilityName | 只读 | string | 否 | ability 名字 | -| uri | 只读 | string | 否 | 请求中URI的描述 | -| type | 只读 | string | 否 | 此文件中类型的说明 | -| flags | 只读 | number | 否 | 此文件中标志的选项是必需的 | -| action | 只读 | string | 否 | 需求中对操作的描述 | -| parameters | 只读 | string | 否 | Want中WantParams对象的描述 | -| entities | 只读 | string | 否 | 对象中实体的描述 | - -* flags类型说明 - - | 名称 | 参数 | 描述 | - | ------------------------------------ | ---------- | ------------------------------------------------------------ | - | FLAG_AUTH_READ_URI_PERMISSION | 0x00000001 | 指示对URI执行读取操作的授权 | - | FLAG_AUTH_WRITE_URI_PERMISSION | 0x00000002 | 指示对URI执行写入操作的授权 | - | FLAG_ABILITY_FORWARD_RESULT | 0x00000004 | 将结果返回给源异能 | - | FLAG_ABILITY_CONTINUATION | 0x00000008 | 确定是否可以将本地设备上的功能迁移到远程设备 | - | FLAG_NOT_OHOS_COMPONENT | 0x00000010 | 指定组件是否不属于OHOS | - | FLAG_ABILITY_FORM_ENABLED | 0x00000020 | 指定是否启动某个能力 | - | FLAG_AUTH_PERSISTABLE_URI_PERMISSION | 0x00000040 | 指示URI上可能持久化的授权 | - | FLAG_AUTH_PREFIX_URI_PERMISSION | 0x00000080 | 将结果返回到源能力片 | - | FLAG_ABILITYSLICE_MULTI_DEVICE | 0x00000100 | 支持分布式调度系统中的多设备启动 | - | FLAG_START_FOREGROUND_ABILITY | 0x00000200 | 指示无论主机应用程序是否已启动，都将启动使用服务模板的功能 | - | FLAG_ABILITY_CONTINUATION_REVERSIBLE | 0x00000400 | 表示延续是可逆的。 | - | FLAG_INSTALL_ON_DEMAND | 0x00000800 | 如果未安装指定的功能，请安装该功能 | - | FLAG_INSTALL_WITH_BACKGROUND_MODE | 0x80000000 | 如果未安装，请使用后台模式安装指定的DI功能。 | - | FLAG_ABILITY_CLEAR_MISSION | 0x00008000 | 指示清除其他任务的操作。可以为传递给{@link ohos.app.Context#startAbility}的{@code Intent}设置此标志，并且必须与{@link flag_ABILITY_NEW_MISSION}一起使用 | - | FLAG_ABILITY_NEW_MISSION | 0x10000000 | 指示在历史任务堆栈上创建任务的操作。 | - | FLAG_ABILITY_MISSION_TOP | 0x20000000 | 指示如果启动能力的现有实例已位于任务堆栈的顶部，则将重用该实例。否则，将创建一个新的能力实例。 | - -* 返回值 - - void - -* 示例 - -```javascript -import featureAbility from '@ohos.ability.featureAbility' -featureAbility.startAbility( - { - want: - { - action: "", - entities: [""], - type: "", - flags: FLAG_AUTH_READ_URI_PERMISSION, - deviceId: "", - bundleName: "com.example.startability", - abilityName: "com.example.startability.MainAbility", - uri: "" - }, - }, - ); -) -``` - - - -#### FeatureAbility.startAbility(parameter: StartAbilityParameter) - -* 接口说明 - - 启动新的ability(Promise形式) - -* startAbility参数描述 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| --------- | -------- | --------------------- | ---- | ------------------- | -| parameter | 只读 | StartAbilityParameter | 是 | 表示被启动的Ability | - -- StartAbilityParameter类型说明 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ------------------- | -------- | ------ | ---- | ---------------------------------- | -| want | 只读 | want | 是 | 表示需要包含有关目标启动能力的信息 | -| abilityStartSetting | 只读 | string | 否 | 指示启动能力中使用的特殊启动设置 | - -- want类型说明 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ----------- | -------- | ------ | ---- | -------------------------- | -| deviceId | 只读 | string | 否 | 设备id | -| bundleName | 只读 | string | 否 | 捆绑包名称 | -| abilityName | 只读 | string | 否 | ability 名字 | -| uri | 只读 | string | 否 | 请求中URI的描述 | -| type | 只读 | string | 否 | 此文件中类型的说明 | -| flags | 只读 | number | 否 | 此文件中标志的选项是必需的 | -| action | 只读 | string | 否 | 需求中对操作的描述 | -| parameters | 只读 | string | 否 | Want中WantParams对象的描述 | -| entities | 只读 | string | 否 | 对象中实体的描述 | - -* flags类型说明 - - | 名称 | 参数 | 描述 | - | ------------------------------------ | ---------- | ------------------------------------------------------------ | - | FLAG_AUTH_READ_URI_PERMISSION | 0x00000001 | 指示对URI执行读取操作的授权 | - | FLAG_AUTH_WRITE_URI_PERMISSION | 0x00000002 | 指示对URI执行写入操作的授权 | - | FLAG_ABILITY_FORWARD_RESULT | 0x00000004 | 将结果返回给源异能 | - | FLAG_ABILITY_CONTINUATION | 0x00000008 | 确定是否可以将本地设备上的功能迁移到远程设备 | - | FLAG_NOT_OHOS_COMPONENT | 0x00000010 | 指定组件是否不属于OHOS | - | FLAG_ABILITY_FORM_ENABLED | 0x00000020 | 指定是否启动某个能力 | - | FLAG_AUTH_PERSISTABLE_URI_PERMISSION | 0x00000040 | 指示URI上可能持久化的授权 | - | FLAG_AUTH_PREFIX_URI_PERMISSION | 0x00000080 | 将结果返回到源能力片 | - | FLAG_ABILITYSLICE_MULTI_DEVICE | 0x00000100 | 支持分布式调度系统中的多设备启动 | - | FLAG_START_FOREGROUND_ABILITY | 0x00000200 | 指示无论主机应用程序是否已启动，都将启动使用服务模板的功能 | - | FLAG_ABILITY_CONTINUATION_REVERSIBLE | 0x00000400 | 表示延续是可逆的。 | - | FLAG_INSTALL_ON_DEMAND | 0x00000800 | 如果未安装指定的功能，请安装该功能 | - | FLAG_INSTALL_WITH_BACKGROUND_MODE | 0x80000000 | 如果未安装，请使用后台模式安装指定的DI功能。 | - | FLAG_ABILITY_CLEAR_MISSION | 0x00008000 | 指示清除其他任务的操作。可以为传递给{@link ohos.app.Context#startAbility}的{@code Intent}设置此标志，并且必须与{@link flag_ABILITY_NEW_MISSION}一起使用 | - | FLAG_ABILITY_NEW_MISSION | 0x10000000 | 指示在历史任务堆栈上创建任务的操作。 | - | FLAG_ABILITY_MISSION_TOP | 0x20000000 | 指示如果启动能力的现有实例已位于任务堆栈的顶部，则将重用该实例。否则，将创建一个新的能力实例。 | - -* 返回值 - - void - -* 示例 - -```javascript -import featureAbility from '@ohos.ability.featureAbility' -featureAbility.startAbility( - { - want: - { - action: "action.system.home", - entities: ["entity.system.home"], - type: "MIMETYPE", - flags: FLAG_AUTH_READ_URI_PERMISSION, - deviceId: "", - bundleName: "com.example.startability", - abilityName: "com.example.startability.MainAbility", - uri: "" - }, - } - ).then((void) => { - console.info("==========================>startAbility=======================>"); -}); -``` - - - -#### FeatureAbility.acquireDataAbilityHelper(uri: string) - -* 接口说明 - - 获取dataAbilityHelper - -* 参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ---- | -------- | ------ | ---- | ---------------------- | - | uri | 只读 | string | 是 | 指示要打开的文件的路径 | - -* 返回值 - - 返回dataAbilityHelper - -* 示例 - -```javascript -import featureAbility from '@ohos.ability.featureAbility' -featureAbility.acquireDataAbilityHelper( - "dataability:///com.exmaple.DataAbility" -) -``` - - - -#### FeatureAbility.startAbilityForResult(parameter: StartAbilityParameter, callback: AsyncCallback\) - -* 接口说明 - - 启动一个ability，并在该ability被销毁时返回执行结果(callback形式) - -* startAbility参数描述 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| --------- | -------- | ---------------------- | ---- | ------------------- | -| parameter | 只读 | StartAbilityParameter | 是 | 表示被启动的Ability | -| callback | 只读 | AsyncCallback\ | 是 | 被指定的回调方法 | - -- StartAbilityParameter类型说明 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ------------------- | -------- | ------ | ---- | ---------------------------------- | -| want | 只读 | want | 是 | 表示需要包含有关目标启动能力的信息 | -| abilityStartSetting | 只读 | string | 否 | 指示启动能力中使用的特殊启动设置 | - -- want类型说明 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ----------- | -------- | ------ | ---- | -------------------------- | -| deviceId | 只读 | string | 否 | 设备id | -| bundleName | 只读 | string | 否 | 捆绑包名称 | -| abilityName | 只读 | string | 否 | ability 名字 | -| uri | 只读 | string | 否 | 请求中URI的描述 | -| type | 只读 | string | 否 | 此文件中类型的说明 | -| flags | 只读 | number | 否 | 此文件中标志的选项是必需的 | -| action | 只读 | string | 否 | 需求中对操作的描述 | -| parameters | 只读 | string | 否 | Want中WantParams对象的描述 | -| entities | 只读 | string | 否 | 对象中实体的描述 | - -* flags类型说明 - - | 名称 | 参数 | 描述 | - | ------------------------------------ | ---------- | ------------------------------------------------------------ | - | FLAG_AUTH_READ_URI_PERMISSION | 0x00000001 | 指示对URI执行读取操作的授权 | - | FLAG_AUTH_WRITE_URI_PERMISSION | 0x00000002 | 指示对URI执行写入操作的授权 | - | FLAG_ABILITY_FORWARD_RESULT | 0x00000004 | 将结果返回给源异能 | - | FLAG_ABILITY_CONTINUATION | 0x00000008 | 确定是否可以将本地设备上的功能迁移到远程设备 | - | FLAG_NOT_OHOS_COMPONENT | 0x00000010 | 指定组件是否不属于OHOS | - | FLAG_ABILITY_FORM_ENABLED | 0x00000020 | 指定是否启动某个能力 | - | FLAG_AUTH_PERSISTABLE_URI_PERMISSION | 0x00000040 | 指示URI上可能持久化的授权 | - | FLAG_AUTH_PREFIX_URI_PERMISSION | 0x00000080 | 将结果返回到源能力片 | - | FLAG_ABILITYSLICE_MULTI_DEVICE | 0x00000100 | 支持分布式调度系统中的多设备启动 | - | FLAG_START_FOREGROUND_ABILITY | 0x00000200 | 指示无论主机应用程序是否已启动，都将启动使用服务模板的功能 | - | FLAG_ABILITY_CONTINUATION_REVERSIBLE | 0x00000400 | 表示延续是可逆的。 | - | FLAG_INSTALL_ON_DEMAND | 0x00000800 | 如果未安装指定的功能，请安装该功能 | - | FLAG_INSTALL_WITH_BACKGROUND_MODE | 0x80000000 | 如果未安装，请使用后台模式安装指定的DI功能。 | - | FLAG_ABILITY_CLEAR_MISSION | 0x00008000 | 指示清除其他任务的操作。可以为传递给{@link ohos.app.Context#startAbility}的{@code Intent}设置此标志，并且必须与{@link flag_ABILITY_NEW_MISSION}一起使用 | - | FLAG_ABILITY_NEW_MISSION | 0x10000000 | 指示在历史任务堆栈上创建任务的操作。 | - | FLAG_ABILITY_MISSION_TOP | 0x20000000 | 指示如果启动能力的现有实例已位于任务堆栈的顶部，则将重用该实例。否则，将创建一个新的能力实例。 | - -* 返回值 - - 返回{@link AbilityResult} - -* 示例 - -```javascript -import featureAbility from '@ohos.ability.featureability'; -featureAbility.startAbilityForResult( - { - want: - { - action: "action.system.home", - entities: ["entity.system.home"], - type: "MIMETYPE", - flags: FLAG_AUTH_READ_URI_PERMISSION, - deviceId: "", - bundleName: "com.example.featureabilitytest", - abilityName: "com.example.startabilityforresulttest1.MainAbility", - uri:"" - }, - }, -) -``` - - - -#### FeatureAbility.startAbilityForResult(parameter: StartAbilityParameter) - -* 接口说明 - - 启动一个ability，并在该ability被销毁时返回执行结果(Promise形式) - -* startAbility参数描述 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| --------- | -------- | --------------------- | ---- | ------------------- | -| parameter | 只读 | StartAbilityParameter | 是 | 表示被启动的Ability | - -- StartAbilityParameter类型说明 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ------------------- | -------- | ------ | ---- | ---------------------------------- | -| want | 只读 | want | 是 | 表示需要包含有关目标启动能力的信息 | -| abilityStartSetting | 只读 | string | 否 | 指示启动能力中使用的特殊启动设置 | - -- want类型说明 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ----------- | -------- | ------ | ---- | -------------------------- | -| deviceId | 只读 | string | 否 | 设备id | -| bundleName | 只读 | string | 否 | 捆绑包名称 | -| abilityName | 只读 | string | 否 | ability 名字 | -| uri | 只读 | string | 否 | 请求中URI的描述 | -| type | 只读 | string | 否 | 此文件中类型的说明 | -| flags | 只读 | number | 否 | 此文件中标志的选项是必需的 | -| action | 只读 | string | 否 | 需求中对操作的描述 | -| parameters | 只读 | string | 否 | Want中WantParams对象的描述 | -| entities | 只读 | string | 否 | 对象中实体的描述 | - -* flags类型说明 - - | 名称 | 参数 | 描述 | - | ------------------------------------ | ---------- | ------------------------------------------------------------ | - | FLAG_AUTH_READ_URI_PERMISSION | 0x00000001 | 指示对URI执行读取操作的授权 | - | FLAG_AUTH_WRITE_URI_PERMISSION | 0x00000002 | 指示对URI执行写入操作的授权 | - | FLAG_ABILITY_FORWARD_RESULT | 0x00000004 | 将结果返回给源异能 | - | FLAG_ABILITY_CONTINUATION | 0x00000008 | 确定是否可以将本地设备上的功能迁移到远程设备 | - | FLAG_NOT_OHOS_COMPONENT | 0x00000010 | 指定组件是否不属于OHOS | - | FLAG_ABILITY_FORM_ENABLED | 0x00000020 | 指定是否启动某个能力 | - | FLAG_AUTH_PERSISTABLE_URI_PERMISSION | 0x00000040 | 指示URI上可能持久化的授权 | - | FLAG_AUTH_PREFIX_URI_PERMISSION | 0x00000080 | 将结果返回到源能力片 | - | FLAG_ABILITYSLICE_MULTI_DEVICE | 0x00000100 | 支持分布式调度系统中的多设备启动 | - | FLAG_START_FOREGROUND_ABILITY | 0x00000200 | 指示无论主机应用程序是否已启动，都将启动使用服务模板的功能 | - | FLAG_ABILITY_CONTINUATION_REVERSIBLE | 0x00000400 | 表示延续是可逆的。 | - | FLAG_INSTALL_ON_DEMAND | 0x00000800 | 如果未安装指定的功能，请安装该功能 | - | FLAG_INSTALL_WITH_BACKGROUND_MODE | 0x80000000 | 如果未安装，请使用后台模式安装指定的DI功能。 | - | FLAG_ABILITY_CLEAR_MISSION | 0x00008000 | 指示清除其他任务的操作。可以为传递给{@link ohos.app.Context#startAbility}的{@code Intent}设置此标志，并且必须与{@link flag_ABILITY_NEW_MISSION}一起使用 | - | FLAG_ABILITY_NEW_MISSION | 0x10000000 | 指示在历史任务堆栈上创建任务的操作。 | - | FLAG_ABILITY_MISSION_TOP | 0x20000000 | 指示如果启动能力的现有实例已位于任务堆栈的顶部，则将重用该实例。否则，将创建一个新的能力实例。 | - -* 返回值 - - 返回{@link AbilityResult} - -* 示例 - -```javascript -import featureAbility from '@ohos.ability.featureability'; -featureAbility.startAbilityForResult( - { - want: - { - action: "action.system.home", - entities: ["entity.system.home"], - type: "MIMETYPE", - flags: FLAG_AUTH_READ_URI_PERMISSION, - deviceId: "", - bundleName: "com.example.featureabilitytest", - abilityName: "com.example.startabilityforresulttest2.MainAbility", - uri:"", - parameters: - { - mykey0: 1111, - mykey1: [1, 2, 3], - mykey2: "[1, 2, 3]", - mykey3: "xxxxxxxxxxxxxxxxxxxxxx", - mykey4: [1, 15], - mykey5: [false, true, false], - mykey6: ["aaaaaa", "bbbbb", "ccccccccccc"], - mykey7: true, - }, - }, - requestCode: 2, - }, -).then((void) => { - console.info("==========================>startAbilityForResult=======================>"); -}); -``` - - - -#### FeatureAbility.terminateSelfWithResult(parameter: AbilityResult, callback: AsyncCallback\) - -* 接口说明 - - 设置此page ability将返回给调用者的结果代码和数据并破坏此page ability(callback形式) - - -* startAbility参数描述 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| --------- | -------- | ------------- | ---- | ------------------- | -| parameter | 只读 | AbilityResult | 是 | 表示被启动的Ability | -| callback | 只读 | AsyncCallback | 是 | 被指定的回调方法 | - - -* AbilityResult类型说明 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ---------- | -------- | ------ | ---- | ------------------------------------------------------------ | -| resultCode | 只读 | number | 是 | 指示销毁该能力后返回的结果代码。您可以定义结果代码来识别错误（暂不支持） | -| want | 只读 | Want | 否 | 指示销毁该能力后返回的数据。您可以定义返回的数据。此参数可以为null。 | - -- want类型说明 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ----------- | -------- | ------ | ---- | -------------------------- | -| deviceId | 只读 | string | 否 | 设备id | -| bundleName | 只读 | string | 否 | 捆绑包名称 | -| abilityName | 只读 | string | 否 | ability 名字 | -| uri | 只读 | string | 否 | 请求中URI的描述 | -| type | 只读 | string | 否 | 此文件中类型的说明 | -| flags | 只读 | number | 否 | 此文件中标志的选项是必需的 | -| action | 只读 | string | 否 | 需求中对操作的描述 | -| parameters | 只读 | string | 否 | Want中WantParams对象的描述 | -| entities | 只读 | string | 否 | 对象中实体的描述 | - -* flags类型说明 - - | 名称 | 参数 | 描述 | - | ------------------------------------ | ---------- | ------------------------------------------------------------ | - | FLAG_AUTH_READ_URI_PERMISSION | 0x00000001 | 指示对URI执行读取操作的授权 | - | FLAG_AUTH_WRITE_URI_PERMISSION | 0x00000002 | 指示对URI执行写入操作的授权 | - | FLAG_ABILITY_FORWARD_RESULT | 0x00000004 | 将结果返回给源异能 | - | FLAG_ABILITY_CONTINUATION | 0x00000008 | 确定是否可以将本地设备上的功能迁移到远程设备 | - | FLAG_NOT_OHOS_COMPONENT | 0x00000010 | 指定组件是否不属于OHOS | - | FLAG_ABILITY_FORM_ENABLED | 0x00000020 | 指定是否启动某个能力 | - | FLAG_AUTH_PERSISTABLE_URI_PERMISSION | 0x00000040 | 指示URI上可能持久化的授权 | - | FLAG_AUTH_PREFIX_URI_PERMISSION | 0x00000080 | 将结果返回到源能力片 | - | FLAG_ABILITYSLICE_MULTI_DEVICE | 0x00000100 | 支持分布式调度系统中的多设备启动 | - | FLAG_START_FOREGROUND_ABILITY | 0x00000200 | 指示无论主机应用程序是否已启动，都将启动使用服务模板的功能 | - | FLAG_ABILITY_CONTINUATION_REVERSIBLE | 0x00000400 | 表示延续是可逆的。 | - | FLAG_INSTALL_ON_DEMAND | 0x00000800 | 如果未安装指定的功能，请安装该功能 | - | FLAG_INSTALL_WITH_BACKGROUND_MODE | 0x80000000 | 如果未安装，请使用后台模式安装指定的DI功能。 | - | FLAG_ABILITY_CLEAR_MISSION | 0x00008000 | 指示清除其他任务的操作。可以为传递给{@link ohos.app.Context#startAbility}的{@code Intent}设置此标志，并且必须与{@link flag_ABILITY_NEW_MISSION}一起使用 | - | FLAG_ABILITY_NEW_MISSION | 0x10000000 | 指示在历史任务堆栈上创建任务的操作。 | - | FLAG_ABILITY_MISSION_TOP | 0x20000000 | 指示如果启动能力的现有实例已位于任务堆栈的顶部，则将重用该实例。否则，将创建一个新的能力实例。 | - -* 返回值 - - void - -* 示例 - -```javascript -import featureAbility from '@ohos.ability.featureAbility' -featureAbility.terminateSelfWithResult( - { - resultCode: 1, - want: - { - action: "action.system.home", - entities: ["entity.system.home"], - type: "MIMETYPE", - flags: FLAG_AUTH_READ_URI_PERMISSION, - deviceId: "", - bundleName: "com.example.featureabilitytest", - abilityName: "com.example.finishwithresulttest1.MainAbility", - uri:"", - parameters: { - mykey0: 2222, - mykey1: [1, 2, 3], - mykey2: "[1, 2, 3]", - mykey3: "ssssssssssssssssssssssssss", - mykey4: [1, 15], - mykey5: [false, true, false], - mykey6: ["qqqqq", "wwwwww", "aaaaaaaaaaaaaaaaa"], - mykey7: true, - } - }, - }, -); -``` - - - -#### FeatureAbility.terminateSelfWithResult(parameter: AbilityResult) - -* 接口说明 - - 设置此page ability将返回给调用者的结果代码和数据并破坏此page ability(Promise形式) - -* startAbility参数描述 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| --------- | -------- | ------------- | ---- | ------------------- | -| parameter | 只读 | AbilityResult | 是 | 表示被启动的Ability | - - -* AbilityResult类型说明 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ---------- | -------- | ------ | ---- | ------------------------------------------------------------ | -| resultCode | 只读 | number | 是 | 指示销毁该能力后返回的结果代码。您可以定义结果代码来识别错误（暂不支持） | -| want | 只读 | Want | 否 | 指示销毁该能力后返回的数据。您可以定义返回的数据。此参数可以为null。 | - -- want类型说明 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ----------- | -------- | ------ | ---- | -------------------------- | -| deviceId | 只读 | string | 否 | 设备id | -| bundleName | 只读 | string | 否 | 捆绑包名称 | -| abilityName | 只读 | string | 否 | ability 名字 | -| uri | 只读 | string | 否 | 请求中URI的描述 | -| type | 只读 | string | 否 | 此文件中类型的说明 | -| flags | 只读 | number | 否 | 此文件中标志的选项是必需的 | -| action | 只读 | string | 否 | 需求中对操作的描述 | -| parameters | 只读 | string | 否 | Want中WantParams对象的描述 | -| entities | 只读 | string | 否 | 对象中实体的描述 | - -* flags类型说明 - - | 名称 | 参数 | 描述 | - | ------------------------------------ | ---------- | ------------------------------------------------------------ | - | FLAG_AUTH_READ_URI_PERMISSION | 0x00000001 | 指示对URI执行读取操作的授权 | - | FLAG_AUTH_WRITE_URI_PERMISSION | 0x00000002 | 指示对URI执行写入操作的授权 | - | FLAG_ABILITY_FORWARD_RESULT | 0x00000004 | 将结果返回给源异能 | - | FLAG_ABILITY_CONTINUATION | 0x00000008 | 确定是否可以将本地设备上的功能迁移到远程设备 | - | FLAG_NOT_OHOS_COMPONENT | 0x00000010 | 指定组件是否不属于OHOS | - | FLAG_ABILITY_FORM_ENABLED | 0x00000020 | 指定是否启动某个能力 | - | FLAG_AUTH_PERSISTABLE_URI_PERMISSION | 0x00000040 | 指示URI上可能持久化的授权 | - | FLAG_AUTH_PREFIX_URI_PERMISSION | 0x00000080 | 将结果返回到源能力片 | - | FLAG_ABILITYSLICE_MULTI_DEVICE | 0x00000100 | 支持分布式调度系统中的多设备启动 | - | FLAG_START_FOREGROUND_ABILITY | 0x00000200 | 指示无论主机应用程序是否已启动，都将启动使用服务模板的功能 | - | FLAG_ABILITY_CONTINUATION_REVERSIBLE | 0x00000400 | 表示延续是可逆的。 | - | FLAG_INSTALL_ON_DEMAND | 0x00000800 | 如果未安装指定的功能，请安装该功能 | - | FLAG_INSTALL_WITH_BACKGROUND_MODE | 0x80000000 | 如果未安装，请使用后台模式安装指定的DI功能。 | - | FLAG_ABILITY_CLEAR_MISSION | 0x00008000 | 指示清除其他任务的操作。可以为传递给{@link ohos.app.Context#startAbility}的{@code Intent}设置此标志，并且必须与{@link flag_ABILITY_NEW_MISSION}一起使用 | - | FLAG_ABILITY_NEW_MISSION | 0x10000000 | 指示在历史任务堆栈上创建任务的操作。 | - | FLAG_ABILITY_MISSION_TOP | 0x20000000 | 指示如果启动能力的现有实例已位于任务堆栈的顶部，则将重用该实例。否则，将创建一个新的能力实例。 | - -* 返回值 - - void - -* 示例 - -```javascript -import featureAbility from '@ohos.ability.featureability'; -featureAbility.terminateSelfWithResult( - { - resultCode: 1, - want: - { - action: "action.system.home", - entities: ["entity.system.home"], - type: "MIMETYPE", - flags: FLAG_AUTH_READ_URI_PERMISSION, - deviceId: "", - bundleName: "com.example.featureabilitytest", - abilityName: "com.example.finishwithresulttest1.MainAbility", - uri:"", - parameters: { - mykey0: 2222, - mykey1: [1, 2, 3], - mykey2: "[1, 2, 3]", - mykey3: "ssssssssssssssssssssssssss", - mykey4: [1, 15], - mykey5: [false, true, false], - mykey6: ["qqqqq", "wwwwww", "aaaaaaaaaaaaaaaaa"], - mykey7: true, - } - }, - } -).then((void) => { - console.info("==========================>terminateSelfWithResult=======================>"); -}); -``` - - - -#### FeatureAbility.hasWindowFocus(callback: AsyncCallback\) - -* 接口说明 - - 检查ability的主窗口是否具有窗口焦点(callback形式) - -* 参数描述 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| -------- | -------- | ----------------------- | ---- | ---------------- | -| callback | 只读 | AsyncCallback\ | 是 | 被指定的回调方法 | - -* 返回值 - - 如果此异能当前具有视窗焦点，则返回{@code true}；否则返回{@code false} - -* 示例 - -```javascript -import featureAbility from '@ohos.ability.featureability'; -featureAbility.hasWindowFocus() -``` - - - -#### FeatureAbility.hasWindowFocus() - -* 接口说明 - - 检查ability的主窗口是否具有窗口焦点(Promise形式) - -* 参数描述 - - Null - -* 返回值 - - 如果此异能当前具有视窗焦点，则返回{@code true}；否则返回{@code false} - -* 示例 - -```javascript -import featureAbility from '@ohos.ability.featureability'; -featureAbility.hasWindowFocus().then((void) => { - console.info("==========================>hasWindowFocus=======================>"); -}); -``` - - - -#### FeatureAbility.getWant(callback: AsyncCallback\) - -* 接口说明 - - 获取从ability发送的want(callback形式) - -* 参数描述 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| -------- | -------- | -------------------- | ---- | ---------------- | -| callback | 只读 | AsyncCallback\ | 是 | 被指定的回调方法 | - -* 返回值 - - void - -* 示例 - -```javascript -import featureAbility from '@ohos.ability.featureability'; -featureAbility.getWant() -``` - - - -#### FeatureAbility.getWant() - -* 接口说明 - - 获取从ability发送的want(Promise形式) - -* 参数描述 - - Null - -* 返回值 - - void - -* 示例 - -```javascript -import featureAbility from '@ohos.ability.featureability'; -featureAbility.getWant().then((void) => { - console.info("==========================>getWantCallBack=======================>"); -}); -``` - - - -#### FeatureAbility.getContext() - -* 接口说明 - - 获取应用程序上下文 - -* 返回值 - - 返回应用程序上下文 - -* 示例 - -```javascript -import featureAbility from '@ohos.ability.featureability'; -var context = featureAbility.getContext() -context.getBundleName() -``` - - - -#### FeatureAbility.terminateSelf(callback: AsyncCallback\) - -* 接口说明 - - 设置page ability返回给被调用方的结果代码和数据，并销毁此page ability(callback形式) - -* 参数描述 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| -------- | -------- | -------------------- | ---- | ---------------- | -| callback | 只读 | AsyncCallback\ | 是 | 被指定的回调方法 | - -* 返回值 - - void - -* 示例 - -```javascript -import featureAbility from '@ohos.ability.featureability'; -featureAbility.terminateSelf() -``` - - - -#### FeatureAbility.terminateSelf() - -* 接口说明 - - 设置page ability返回给被调用方的结果代码和数据，并销毁此page ability(Promise形式) - -* 参数描述 - - Null - -* 返回值 - -* void - -* 示例 - -```javascript -import featureAbility from '@ohos.ability.featureability'; -featureAbility.terminateSelf().then((void) => { console.info("==========================>terminateSelfCallBack=======================>"); -}); -``` - -#### FeatureAbility.connectAbility(*request*: Want, *options*:ConnectOptions): number - -* 接口说明 - - 将当前ability连接到指定ServiceAbility(callback形式) - -* connectAbility参数描述 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ------- | -------- | -------------- | ---- | -------------------------- | -| request | 只读 | Want | 是 | 表示被连接的ServiceAbility | -| options | 只读 | ConnectOptions | 是 | 被指定的回调方法 | - -- ConnectOptions类型说明 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ------------ | -------- | -------- | ---- | ---------------------------------- | -| onConnect | 只读 | function | 是 | 连接成功时的回调函数 | -| onDisconnect | 只读 | function | 是 | 连接失败时的回调函数 | -| onFailed | 只读 | function | 是 | ConnectAbility调用失败时的回调函数 | - -* 返回值 - - 连接的ServiceAbilityID。 - -* 示例 - -```javascript -import featureAbility from '@ohos.ability.featureAbility' -var mRemote; -var connId; -function onConnectCallback(element, remote){ - mRemote = remote; - console.log('ConnectAbility onConnect remote is proxy:' + (remote instanceof rpc.RemoteProxy)); -} -function onDisconnectCallback(element){ - console.log('ConnectAbility onDisconnect element.deviceId : ' + element.deviceId) -} -function onFailedCallback(code){ - console.log('featureAbilityTest ConnectAbility onFailed errCode : ' + code) -} -var connId = featureAbility.connectAbility( - { - bundleName: "com.ix.ServiceAbility", - abilityName: "ServiceAbilityA", - }, - { - onConnect: onConnectCallback, - onDisconnect: onDisconnectCallback, - onFailed: onFailedCallback, - }, -); -``` - -#### FeatureAbility.disconnectAbility(connection: number, callback:AsyncCallback): void - -* 接口说明 - - 断开与指定ServiceAbility的连接(callback形式) - -* disconnectAbility参数描述 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ---------- | -------- | ------------- | ---- | ------------------------------ | -| connection | 只读 | number | 是 | 指定断开连接的ServiceAbilityID | -| callback | 只读 | AsyncCallback | 是 | 被指定的回调方法 | - -* 返回值 - - 无 - -* 示例 - -```javascript -import featureAbility from '@ohos.ability.featureAbility' -var mRemote; -var connId; -function onConnectCallback(element, remote){ - mRemote = remote; - console.log('ConnectAbility onConnect remote is proxy:' + (remote instanceof rpc.RemoteProxy)); -} -function onDisconnectCallback(element){ - console.log('ConnectAbility onDisconnect element.deviceId : ' + element.deviceId) -} -function onFailedCallback(code){ - console.log('featureAbilityTest ConnectAbility onFailed errCode : ' + code) -} -var connId = featureAbility.connectAbility( - { - bundleName: "com.ix.ServiceAbility", - abilityName: "ServiceAbilityA", - }, - { - onConnect: onConnectCallback, - onDisconnect: onDisconnectCallback, - onFailed: onFailedCallback, - }, -); -var result = featureAbility.disconnectAbility(connId, - (error,data) => { - console.log('featureAbilityTest DisConnectJsSameBundleName result errCode : ' + error.code + " data: " + data) - }, -); -``` - -#### FeatureAbility.disconnectAbility(connection: number): Promise; - -* 接口说明 - - 断开与指定ServiceAbility的连接(promise形式) - -* disconnectAbility参数描述 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ---------- | -------- | ------ | ---- | ------------------------------ | -| connection | 只读 | number | 是 | 指定断开连接的ServiceAbilityID | - -* 返回值 - - 无 - -* 示例 - -```javascript -import featureAbility from '@ohos.ability.featureAbility' -var mRemote; -var connId; -function onConnectCallback(element, remote){ - mRemote = remote; - console.log('ConnectAbility onConnect remote is proxy:' + (remote instanceof rpc.RemoteProxy)); -} -function onDisconnectCallback(element){ - console.log('ConnectAbility onDisconnect element.deviceId : ' + element.deviceId) -} -function onFailedCallback(code){ - console.log('featureAbilityTest ConnectAbility onFailed errCode : ' + code) -} -var connId = featureAbility.connectAbility( - { - bundleName: "com.ix.ServiceAbility", - abilityName: "ServiceAbilityA", - }, - { - onConnect: onConnectCallback, - onDisconnect: onDisconnectCallback, - onFailed: onFailedCallback, - }, -); -var result = await featureAbility.disconnectAbility(connId); -``` - diff --git "a/zh-cn/application-dev/js-reference/Image\345\257\271\350\261\241.md" "b/zh-cn/application-dev/js-reference/Image\345\257\271\350\261\241.md" deleted file mode 100755 index 3cb6d3cc980e72e6e6516de0eedd7f496737ffc9..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/js-reference/Image\345\257\271\350\261\241.md" +++ /dev/null @@ -1,95 +0,0 @@ -# Image对象 - -- [属性](#zh-cn_topic_0000001058948927_section1968021961113) -- [示例](#zh-cn_topic_0000001058948927_section13457717134912) - -图片对象。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

属性

-

类型

-

默认值

-

必填

-

描述

-

src

-

string

-

-

-

是

-

图片资源的路径。。

-

width

-

<length>

-

0px

-

否

-

图片的宽度。

-

height

-

<length>

-

0px

-

否

-

图片的高度。

-

onload

-

Function

-

-

-

否

-

图片加载成功后触发该事件，无参数。

-

onerror

-

Function

-

-

-

否

-

图片加载失败后触发该事件，无参数。

-
- -## 示例 - -``` -var ctx = this.$element('drawImage').getContext('2d'); -var img = new Image(); -img.src = 'common/image/huawei.jpg'; -img.onload = function() { - console.log('Image load success'); - ctx.drawImage(img, 200, 200); -}; -img.onerror = function() { - console.log('Image load fail'); -}; -``` - diff --git "a/zh-cn/application-dev/js-reference/JS\350\257\255\346\263\225\345\217\202\350\200\203.md" "b/zh-cn/application-dev/js-reference/JS\350\257\255\346\263\225\345\217\202\350\200\203.md" deleted file mode 100755 index a72c6252496d49eb562640893bbee9df6baad367..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/js-reference/JS\350\257\255\346\263\225\345\217\202\350\200\203.md" +++ /dev/null @@ -1,649 +0,0 @@ -# JS语法参考 - -- [语法](#zh-cn_topic_0000001058562835_s6ca2e99746664509961f65b82d11ab58) -- [对象](#zh-cn_topic_0000001058562835_s7493791622a248fbb2e03703149bb3b5) -- [方法](#zh-cn_topic_0000001058562835_s4e1ff24ec78e41948502d8977d24e44c) -- [获取DOM元素](#zh-cn_topic_0000001058562835_section1560185062215) -- [获取ViewModel](#zh-cn_topic_0000001058562835_section13798143717421) -- [生命周期接口](#zh-cn_topic_0000001058562835_s962b82fb67304ec9a50fb06ffa977560) - -JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语言。基于JavaScript语言的动态化能力，可以使应用更加富有表现力，具备更加灵活的设计。下面讲述JS文件的编译和运行的支持情况。 - -## 语法 - -支持ES6语法。 - -- 模块声明 - - 使用import方法引入功能模块： - - ``` - import router from '@system.router'; - ``` - -- 代码引用 - - 使用import方法导入js代码： - - ``` - import utils from '../../common/utils.js'; - ``` - - -## 对象 - -- 应用对象 - - - - - - - - - - - - -

属性

-

类型

-

描述

-

$def

-

Object

-

使用this.$app.$def获取在app.js中暴露的对象。

-
说明：

应用对象不支持数据绑定，需主动触发UI更新。

-
-
- - 示例代码 - - ``` - // app.js - export default { - onCreate() { - console.info('AceApplication onCreate'); - }, - onDestroy() { - console.info('AceApplication onDestroy'); - }, - globalData: { - appData: 'appData', - appVersion: '2.0', - }, - globalMethod () { - console.info('This is a global method!'); - this.globalData.appVersion = '3.0'; - } - }; - ``` - - ``` - // index.js页面逻辑代码 - export default { - data: { - appData: 'localData', - appVersion:'1.0', - }, - onInit() { - this.appData = this.$app.$def.globalData.appData; - this.appVersion = this.$app.$def.globalData.appVersion; - }, - invokeGlobalMethod() { - this.$app.$def.globalMethod(); - }, - getAppVersion() { - this.appVersion = this.$app.$def.globalData.appVersion; - } - } - ``` - -- 页面对象 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

属性

-

类型

-

描述

-

data

-

Object/Function

-

页面的数据模型，类型是对象或者函数，如果类型是函数，返回值必须是对象。属性名不能以$或_开头，不要使用保留字for, if, show, tid。

-

data与private和public不能重合使用。

-

$refs

-

Object

-

持有注册过ref 属性的DOM元素或子组件实例的对象。示例见获取DOM元素。

-

private

-

Object

-

页面的数据模型，private下的数据属性只能由当前页面修改。

-

public

-

Object

-

页面的数据模型，public下的数据属性的行为与data保持一致。

-

props

-

Array/Object

-

props用于组件之间的通信，可以通过<tag xxxx='value'>方式传递给组件；props名称必须用小写，不能以$或_开头，不要使用保留字for, if, show, tid。目前props的数据类型不支持Function。示例见自定义组件。

-

computed

-

Object

-

用于在读取或设置进行预先处理，计算属性的结果会被缓存。计算属性名不能以$或_开头，不要使用保留字。示例见自定义组件。

-
- - -## 方法 - -- 数据方法 - - - - - - - - - - - - - - - - - - - -

属性

-

类型

-

参数

-

描述

-

$set

-

Function

-

key: string

-

value: any

-

添加新的数据属性或者修改已有数据属性。

-

用法：

-

this.$set('key',value)：添加数据属性。

-

$delete

-

Function

-

key: string

-

删除数据属性。

-

用法：

-

this.$delete('key')：删除数据属性。

-
- - 示例代码 - - ``` - export default { - data: { - keyMap: { - OS: 'OpenHarmony', - Version: '2.0', - }, - }, - getAppVersion() { - this.$set('keyMap.Version', '3.0'); - console.info("keyMap.Version = " + this.keyMap.Version); // keyMap.Version = 3.0 - - this.$delete('keyMap'); - console.info("keyMap.Version = " + this.keyMap); // log print: keyMap.Version = undefined - } - } - ``` - -- 公共方法 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

属性

-

类型

-

参数

-

描述

-

$element

-

Function

-

id: string 组件id

-

获得指定id的组件对象，如果无指定id，则返回根组件对象。示例见获取DOM元素。

-

用法：

-

<div id='xxx'></div>

-
  • this.$element('xxx')：获得id为xxx的组件对象。
  • this.$element()：获得根组件对象。
-

$root

-

Function

-

无

-

获得顶级ViewModel实例。获取ViewModel示例。

-

$parent

-

Function

-

无

-

获得父级ViewModel实例。获取ViewModel示例。

-

$child

-

Function

-

id: string 组件id

-

获得指定id的子级自定义组件的ViewModel实例。获取ViewModel示例。

-

用法：

-

this.$child('xxx') ：获取id为xxx的子级自定义组件的ViewModel实例。

-
- -- 事件方法 - - - - - - - - - - - - - - -

属性

-

类型

-

参数

-

描述

-

$watch

-

Function

-

data: string

-

callback: 函数名，回调函数里有两个参数，第一个参数为属性新值，第二个参数为属性旧值

-

观察data中的属性变化，如果属性值改变，触发绑定的事件。示例见自定义组件。

-

用法：

-

this.$watch('key', callback)

-
- - -## 获取DOM元素 - -1. 通过$refs获取DOM元素 - - ``` - -
- -
- ``` - - ``` - // index.js - export default { - data: { - images: [ - { src: '/common/frame1.png' }, - { src: '/common/frame2.png' }, - { src: '/common/frame3.png' }, - ], - }, - handleClick() { - const animator = this.$refs.animator; // 获取ref属性为animator的DOM元素 - const state = animator.getState(); - if (state === 'paused') { - animator.resume(); - } else if (state === 'stopped') { - animator.start(); - } else { - animator.pause(); - } - }, - }; - ``` - -2. 通过$element 方法获取DOM元素 - - ``` - -
- -
- ``` - - ``` - // index.js - export default { - data: { - images: [ - { src: '/common/frame1.png' }, - { src: '/common/frame2.png' }, - { src: '/common/frame3.png' }, - ], - }, - handleClick() { - const animator = this.$element('animator'); // 获取id属性为animator的DOM元素 - const state = animator.getState(); - if (state === 'paused') { - animator.resume(); - } else if (state === 'stopped') { - animator.start(); - } else { - animator.pause(); - } - }, - }; - ``` - - -## 获取ViewModel - -根节点所在页面： - -``` - - -
-
- {{text}} - -
-
-``` - -``` -// root.js -export default { - data: { - text: 'I am root!', - }, -} -``` - -自定义parent组件： - -``` - - -
- parent component click - hello parent component! - -
-``` - -``` -// parent.js -export default { - data: { - show: false, - text: 'I am parent component!', - }, - parentClicked () { - this.show = !this.show; - console.info('parent component get parent text'); - console.info(`${this.$parent().text}`); - console.info("parent component get child function"); - console.info(`${this.$child('selfDefineChild').childClicked()}`); - }, -} -``` - -自定义child组件： - -``` - -
- child component clicked - hello child component -
-``` - -``` -// child.js -export default { - data: { - show: false, - text: 'I am child component!', - }, - childClicked () { - this.show = !this.show; - console.info('child component get parent text'); - console.info('${this.$parent().text}'); - console.info('child component get root text'); - console.info('${this.$root().text}'); - }, -} -``` - -## 生命周期接口 - -- 页面生命周期 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

属性

-

类型

-

参数

-

返回值

-

描述

-

触发时机

-

onInit

-

Function

-

无

-

无

-

页面初始化

-

页面数据初始化完成时触发，只触发一次。

-

onReady

-

Function

-

无

-

无

-

页面创建完成

-

页面创建完成时触发，只触发一次。

-

onShow

-

Function

-

无

-

无

-

页面显示

-

页面显示时触发。

-

onHide

-

Function

-

无

-

无

-

页面消失

-

页面消失时触发。

-

onDestroy

-

Function

-

无

-

无

-

页面销毁

-

页面销毁时触发。

-

onBackPress

-

Function

-

无

-

Boolean

-

返回按钮动作

-

当用户点击返回按钮时触发。

-
  • 返回true表示页面自己处理返回逻辑。
  • 返回false表示使用默认的返回逻辑。
  • 不返回值会作为false处理。
-

onActive()5+

-

Function

-

无

-

无

-

页面激活

-

页面激活时触发。

-

onInactive()5+

-

Function

-

无

-

无

-

页面暂停

-

页面暂停时触发。

-

onNewRequest()5+

-

Function

-

无

-

无

-

FA重新请求

-

该回调当FA已经启动时收到新的请求后触发。

-
- - 页面A的生命周期接口的调用顺序 - - - 打开页面A：onInit\(\) -\> onReady\(\) -\> onShow\(\) -\> onActive\(\) - - 在页面A打开页面B：onInactive\(\) -\> onHide\(\) - - 从页面B返回页面A：onShow\(\) -\> onActive\(\) - - 退出页面A：onBackPress\(\) -\> onInactive\(\) -\> onHide\(\) -\> onDestroy\(\) - - 页面隐藏到后台运行：onInactive\(\) -\> onHide\(\) - - 页面从后台运行恢复到前台：onShow\(\) - -- 应用生命周期 - - - - - - - - - - - - - - - - - - - - - - - - - -

属性

-

类型

-

参数

-

返回值

-

描述

-

触发时机

-

onCreate

-

Function

-

无

-

无

-

应用创建

-

当应用创建时调用。

-

onDestroy

-

Function

-

无

-

无

-

应用退出

-

当应用退出时触发。

-
- - diff --git a/zh-cn/application-dev/js-reference/Notification.md b/zh-cn/application-dev/js-reference/Notification.md deleted file mode 100644 index 992b4ef99f6eebd99f0b2c1e71c48e93f9aeabc7..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/Notification.md +++ /dev/null @@ -1,1676 +0,0 @@ - - -Notification模块(JS端SDK接口) - -#### 支持设备 - -| API | 手机 | 平板 | 智慧屏 | 智能穿戴 | -| ------------------------------------------------------------ | ---- | ---- | ------ | -------- | -| Notification.publish(request: NotificationRequest, callback: AsyncCallback) | 支持 | 支持 | 支持 | 支持 | -| Notification.publish(request: NotificationRequest) | 支持 | 支持 | 支持 | 支持 | -| Notification.cancel(id: number, label: string, callback: AsyncCallback) | 支持 | 支持 | 支持 | 支持 | -| Notification.cancel(id：number, label？：string） | 支持 | 支持 | 支持 | 支持 | -| Notification.cancel(id: number, callback: AsyncCallback) | 支持 | 支持 | 支持 | 支持 | -| Notification.cancelAll(callback: AsyncCallback) | 支持 | 支持 | 支持 | 支持 | -| Notification.cancelAll() | 支持 | 支持 | 支持 | 支持 | -| Notification.addSlot(slot: NotificationSlot, callback: AsyncCallback) | 支持 | 支持 | 支持 | 支持 | -| Notification.addSlot(slot: NotificationSlot) | 支持 | 支持 | 支持 | 支持 | -| Notification.addSlot(type: SlotType, callback: AsyncCallback) | 支持 | 支持 | 支持 | 支持 | -| Notification.addSlot(type: SlotType) | 支持 | 支持 | 支持 | 支持 | -| Notification.addSlots(slots: Array, callback: AsyncCallback) | 支持 | 支持 | 支持 | 支持 | -| Notification.addSlots(slots: Array) | 支持 | 支持 | 支持 | 支持 | -| Notification.getSlot(slotType: SlotType, callback: AsyncCallback) | 支持 | 支持 | 支持 | 支持 | -| Notification.getSlot(slotType: SlotType) | 支持 | 支持 | 支持 | 支持 | -| Notification.getSlots(callback: AsyncCallback>) | 支持 | 支持 | 支持 | 支持 | -| Notification.getSlots() | 支持 | 支持 | 支持 | 支持 | -| Notification.removeSlot(slotType: SlotType, callback: AsyncCallback) | 支持 | 支持 | 支持 | 支持 | -| Notification.removeSlot(slotType: SlotType) | 支持 | 支持 | 支持 | 支持 | -| Notification.removeAllSlots(callback: AsyncCallback): void | 支持 | 支持 | 支持 | 支持 | -| Notification.removeAllSlots(): Promise | 支持 | 支持 | 支持 | 支持 | -| Notification.subscribe(subscriber: NotificationSubscriber, callback: AsyncCallback) | 支持 | 支持 | 支持 | 支持 | -| Notification.subscribe(subscriber: NotificationSubscriber, info: NotificationSubscribeInfo, callback: AsyncCallback) | 支持 | 支持 | 支持 | 支持 | -| Notification.subscribe(subscriber: NotificationSubscriber, info?: NotificationSubscribeInfo) | 支持 | 支持 | 支持 | 支持 | -| Notification.unsubscribe(subscriber: NotificationSubscriber, callback: AsyncCallback) | 支持 | 支持 | 支持 | 支持 | -| Notification.unsubscribe(subscriber: NotificationSubscriber) | 支持 | 支持 | 支持 | 支持 | -| Notification.enableNotification(bundle: BundleOption, enable: boolean, callback: AsyncCallback) | 支持 | 支持 | 支持 | 支持 | -| Notification.enableNotification(bundle: BundleOption, enable: boolean) | 支持 | 支持 | 支持 | 支持 | -| Notification.isNotificationEnabled(bundle: BundleOption, callback: AsyncCallback) | 支持 | 支持 | 支持 | 支持 | -| Notification.isNotificationEnabled(bundle: BundleOption) | 支持 | 支持 | 支持 | 支持 | -| Notification.isNotificationEnabled(callback: AsyncCallback) | 支持 | 支持 | 支持 | 支持 | -| Notification.isNotificationEnabled() | 支持 | 支持 | 支持 | 支持 | -| Notification.displayBadge(bundle: BundleOption, enable: boolean, callback: AsyncCallback) | 支持 | 支持 | 支持 | 支持 | -| Notification.displayBadge(bundle: BundleOption, enable: boolean) | 支持 | 支持 | 支持 | 支持 | -| Notification.isBadgeDisplayed(bundle: BundleOption, callback: AsyncCallback) | 支持 | 支持 | 支持 | 支持 | -| Notification.isBadgeDisplayed(bundle: BundleOption) | 支持 | 支持 | 支持 | 支持 | -| Notification.setSlotByBundle(bundle: BundleOption, slot: NotificationSlot, callback: AsyncCallback) | 支持 | 支持 | 支持 | 支持 | -| Notification.setSlotByBundle(bundle: BundleOption, slot: NotificationSlot) | 支持 | 支持 | 支持 | 支持 | -| Notification.getSlotsByBundle(bundle: BundleOption, callback: AsyncCallback>) | 支持 | 支持 | 支持 | 支持 | -| Notification.getSlotsByBundle(bundle: BundleOption) | 支持 | 支持 | 支持 | 支持 | -| Notification.getSlotNumByBundle(bundle: BundleOption, callback: AsyncCallback) | 支持 | 支持 | 支持 | 支持 | -| Notification.getSlotNumByBundle(bundle: BundleOption) | 支持 | 支持 | 支持 | 支持 | -| Notification.remove(bundle: BundleOption, notificationKey: NotificationKey, callback: AsyncCallback) | 支持 | 支持 | 支持 | 支持 | -| Notification.remove(bundle: BundleOption, notificationKey: NotificationKey) | 支持 | 支持 | 支持 | 支持 | -| Notification.remove(hashCode: string, callback: AsyncCallback) | 支持 | 支持 | 支持 | 支持 | -| Notification.remove(hashCode: string) | 支持 | 支持 | 支持 | 支持 | -| Notification.removeAll(bundle: BundleOption, callback: AsyncCallback) | 支持 | 支持 | 支持 | 支持 | -| Notification.removeAll(callback: AsyncCallback) | 支持 | 支持 | 支持 | 支持 | -| Notification.removeAll(bundle?: BundleOption) | 支持 | 支持 | 支持 | 支持 | -| Notification.getAllActiveNotifications(callback: AsyncCallback>) | 支持 | 支持 | 支持 | 支持 | -| Notification.getAllActiveNotifications() | 支持 | 支持 | 支持 | 支持 | -| Notification.getActiveNotificationCount(callback: AsyncCallback) | 支持 | 支持 | 支持 | 支持 | -| Notification.getActiveNotificationCount() | 支持 | 支持 | 支持 | 支持 | -| Notification.getActiveNotifications(callback: AsyncCallback>) | 支持 | 支持 | 支持 | 支持 | -| Notification.getActiveNotifications() | 支持 | 支持 | 支持 | 支持 | -| WantAgent.getWantAgent(info: WantAgentInfo, callback: AsyncCallback) | 支持 | 支持 | 支持 | 支持 | -| WantAgent.getWantAgent(info: WantAgentInfo): Promise | 支持 | 支持 | 支持 | 支持 | -| WantAgent.getBundleName(agent: WantAgent, callback: AsyncCallback) | 支持 | 支持 | 支持 | 支持 | -| WantAgent.getBundleName(agent: WantAgent): Promise | 支持 | 支持 | 支持 | 支持 | -| WantAgent.getUid(agent: WantAgent, callback: AsyncCallback) | 支持 | 支持 | 支持 | 支持 | -| WantAgent.getUid(agent: WantAgent): Promise | 支持 | 支持 | 支持 | 支持 | -| WantAgent.getWant(agent: WantAgent, callback: AsyncCallback) | 支持 | 支持 | 支持 | 支持 | -| WantAgent.getWant(agent: WantAgent): Promise | 支持 | 支持 | 支持 | 支持 | -| WantAgent.cancel(agent: WantAgent, callback: AsyncCallback) | 支持 | 支持 | 支持 | 支持 | -| WantAgent.cancel(agent: WantAgent): Promise | 支持 | 支持 | 支持 | 支持 | -| WantAgent.trigger(agent: WantAgent, triggerInfo: TriggerInfo, callback?: Callback) | 支持 | 支持 | 支持 | 支持 | -| WantAgent.equal(agent: WantAgent, otherAgent: WantAgent, callback: AsyncCallback) | 支持 | 支持 | 支持 | 支持 | -| WantAgent.equal(agent: WantAgent, otherAgent: WantAgent): Promise | 支持 | 支持 | 支持 | 支持 | - -#### 权限列表 - -无 - -#### 通知接口 - -#### 导入模块 - -```js -import notify from '@ohos.notification'; -``` - -#### Notification.publish(request: NotificationRequest, callback: AsyncCallback) - -- 接口说明 - - 发布通知（callback形式） - -- publish参数描述 - - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| -------- | -------- | ------------------- | ---- | ------------------------------------------- | -| request | 只读 | NotificationRequest | 是 | 设置要发布通知内容的NotificationRequest对象 | -| callback | 只读 | AsyncCallback | 是 | 被指定的回调方法 | - -- NotificationRequest类型说明 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ----------------- | -------- | ------------------------------- | ---- | -------------------------- | -| content | 读、写 | NotificationContent | 是 | 通知内容 | -| id | 读、写 | number | 否 | 通知ID | -| slotType | 读、写 | SlotType | 否 | 通道类型 | -| isOngoing | 读、写 | boolean | 否 | 是否进行时通知 | -| isUnremovable | 读、写 | boolean | 否 | 是否可移除 | -| deliveryTime | 读、写 | number | 否 | 通知发送时间 | -| tapDismissed | 读、写 | boolean | 否 | 通知是否自动清除 | -| autoDeletedTime | 读、写 | number | 否 | 自动清除的时间 | -| wantAgent | 读、写 | WantAgent | 否 | 点击跳转的WantAgent | -| extraInfo | 读、写 | {[key: string]: any} | 否 | 扩展参数 | -| color | 读、写 | number | 否 | 通知背景颜色 | -| colorEnabled | 读、写 | boolean | 否 | 通知背景颜色是否使能 | -| isAlertOnce | 读、写 | boolean | 否 | 设置是否仅有一次此通知警报 | -| isStopwatch | 读、写 | boolean | 否 | 是否显示已用时间 | -| isCountDown | 读、写 | boolean | 否 | 是否显示倒计时时间 | -| isFloatingIcon | 读、写 | boolean | 否 | 是否显示状态栏图标 | -| isFloatingIcon | 读、写 | boolean | 否 | 是否显示状态栏图标 | -| label | 读、写 | string | 否 | 通知标签 | -| badgeIconStyle | 读、写 | number | 否 | 通知角标类型 | -| showDeliveryTime | 读、写 | boolean | 否 | 是否显示分发时间 | -| actionButtons | 读、写 | Array | 否 | 通知按钮，最多两个按钮 | -| smallIcon | 读、写 | PixelMap | 否 | 通知小图标 | -| largeIcon | 读、写 | PixelMap | 否 | 通知大图标 | -| creatorBundleName | 只读 | string | 否 | 创建通知的包名 | -| creatorUid | 只读 | number | 否 | 创建通知的UID | -| creatorPid | 只读 | number | 否 | 创建通知的PID | -| hashCode | 只读 | string | 否 | 通知唯一标识 | -| classification | 读、写 | string | 否 | 通知分类 | - -NotificationContent类型说明 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ----------- | -------- | ---------------------------- | ---- | -------------- | -| contentType | 读、写 | ContentType | 是 | 通知内容类型 | -| normal | 读、写 | NotificationBasicContent | 否 | 通知基本内容 | -| longText | 读、写 | NotificationLongTextContent | 否 | 通知长文本内容 | -| multiLine | 读、写 | NotificationMultiLineContent | 否 | 通知多行内容 | - -- ContentType类型说明 - -| 名称 | 读写属性 | 类型 | 描述 | -| --------------------------------- | -------- | ----------- | ---------------- | -| NOTIFICATION_CONTENT_BASIC_TEXT | 只读 | ContentType | 普通类型通知 | -| NOTIFICATION_CONTENT_LONG_TEXT | 只读 | ContentType | 长文本类型通知 | -| NOTIFICATION_CONTENT_PICTURE | 只读 | ContentType | 图片类型通知 | -| NOTIFICATION_CONTENT_CONVERSATION | 只读 | ContentType | 社交类型通知 | -| NOTIFICATION_CONTENT_MULTILINE | 只读 | ContentType | 多行文本类型通知 | - -- NotificationBasicContent类型说明 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| -------------- | -------- | ------ | ---- | -------------------------------- | -| title | 读、写 | string | 是 | 通知标题 | -| text | 读、写 | string | 是 | 通知内容 | -| additionalText | 读、写 | string | 是 | 通知次要内容，是对通知内容的补充 | - -- NotificationLongTextContent类型说明 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| -------------- | -------- | ------ | ---- | -------------------------------- | -| title | 读、写 | string | 是 | 通知标题 | -| text | 读、写 | string | 是 | 通知内容 | -| additionalText | 读、写 | string | 是 | 通知次要内容，是对通知内容的补充 | -| longText | 读、写 | string | 是 | 通知的长文本 | -| briefText | 读、写 | string | 是 | 通知概要内容，是对通知内容的总结 | -| expandedTitle | 读、写 | string | 是 | 通知展开时的标题 | - -- NotificationMultiLineContent类型说明 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| -------------- | -------- | ------------- | ---- | -------------------------------- | -| title | 读、写 | string | 是 | 通知标题 | -| text | 读、写 | string | 是 | 通知内容 | -| additionalText | 读、写 | string | 是 | 通知次要内容，是对通知内容的补充 | -| briefText | 读、写 | string | 是 | 通知概要内容，是对通知内容的总结 | -| longTitle | 读、写 | string | 是 | 通知展开时的标题 | -| lines | 读、写 | Array | 是 | 通知的多行文本 | - -- NotificationPictureContent类型说明 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| -------------- | -------- | -------------- | ---- | -------------------------------- | -| title | 读、写 | string | 是 | 通知标题 | -| text | 读、写 | string | 是 | 通知内容 | -| additionalText | 读、写 | string | 是 | 通知次要内容，是对通知内容的补充 | -| briefText | 读、写 | string | 是 | 通知概要内容，是对通知内容的总结 | -| expandedTitle | 读、写 | string | 是 | 通知展开时的标题 | -| picture | 读、写 | image.PixelMap | 是 | 通知的图片内容 | - -- NotificationActionButton类型说明 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| --------- | -------- | -------------- | ---- | ------------------------- | -| title | 读、写 | string | 是 | 按钮标题 | -| wantAgent | 读、写 | wantAgent | 是 | 点击按钮时触发的WantAgent | -| extras | 读、写 | Array | 否 | 按钮扩展信息 | -| icon | 读、写 | image.PixelMap | 否 | 按钮图标 | - -- - - 返回值为void - -- 示例 - -```js -//publish回调 -function publishCallback(err) { - console.info("==========================>publishCallback=======================>"); -} -//通知Request对象 -var notificationRequest = { - id: 1, - content: { - contentType: notify.ContentType.NOTIFICATION_CONTENT_BASIC_TEXT, - normal: { - title: "test_title", - text: "test_text", - additionalText: "test_additionalText" - } - } -} -Notification.publish(notificationRequest, publishCallback) -``` - - - -#### Notification.publish(request: NotificationRequest) - -- 接口说明 - - 发布通知（Promise形式） - -- - - 返回值为Promise<**void**> - -- 示例 - -```js -//通知Request对象 -var notificationRequest = { - notificationId: 1, - content: { - contentType: notify.ContentType.NOTIFICATION_CONTENT_BASIC_TEXT, - normal: { - title: "test_title", - text: "test_text", - additionalText: "test_additionalText" - } - } -} -Notification.publish(notificationRequest).then((void) => { - console.info("==========================>publishCallback=======================>"); -}); - -``` - - - -#### Notification.cancel(id: number, label: string, callback: AsyncCallback) - -- 接口说明 - - 取消与指定id和label相匹配的已发布通知（callback形式） - -- cancel参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | -------- | -------- | ------------------- | ---- | -------------------- | - | id | 只读 | number | 是 | 通知ID | - | lable | 只读 | string | 是 | 通知标签 | - | callback | 只读 | AsyncCallback | 是 | 表示被指定的回调方法 | - -- - - 返回值为void - -- 示例 - -```js -//cancel回调 -function cancelCallback(err) { - console.info("==========================>cancelCallback=======================>"); -} -Notification.cancel(0, "label", cancelCallback) -``` - - - -#### Notification.cancel(id：number, label？：string） - -- 接口说明 - - 取消与指定id相匹配的已发布通知,label可以指定也可以不指定（Promise形式) - -- cancel参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ----- | -------- | ------ | ---- | -------- | - | id | 只读 | number | 是 | 通知ID | - | lable | 只读 | string | 是 | 通知标签 | - -- - - 返回值为Promise<**void**> - -- 示例 - -```js -Notification.cancel(0).then((void) => { - console.info("==========================>cancelCallback=======================>"); -}); -``` - - - -#### Notification.cancel(id: number, callback: AsyncCallback) - -- 接口说明 - - 取消与指定id相匹配的已发布通知（callback形式) - -- cancel参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | -------- | -------- | ------------------- | ---- | -------------------- | - | id | 只读 | number | 是 | 通知ID | - | callback | 只读 | AsyncCallback | 是 | 表示被指定的回调方法 | - -- - - 返回值为void - -- 示例 - -```js -//cancel回调 -function cancelCallback(err) { - console.info("==========================>cancelCallback=======================>"); -} -Notification.cancel(0, cancelCallback) -``` - - - -#### Notification.cancelAll(callback: AsyncCallback) - -- 接口说明 - - 取消所有已发布的通知（callback形式) - -- cancelAll参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | -------- | -------- | ------------------- | ---- | -------------------- | - | callback | 只读 | AsyncCallback | 是 | 表示被指定的回调方法 | - -- - - 返回值为void - -- 示例 - -```js -//cancel回调 -function cancelAllback(err) { - console.info("==========================>cancelAllback=======================>"); -} -Notification.cancelAll(cancelCallback) -``` - - - -#### Notification.cancelAll() - -- 接口说明 - - 取消所有已发布的通知（callback形式) - -- 参数描述 - - 无参数 - -- - - 返回值为void - -- 示例 - -```js -Notification.cancelAll().then((void) => { - console.info("==========================>cancelAllback=======================>"); -}); -``` - -#### Notification.addSlot(type: SlotType, callback: AsyncCallback) - -- 接口说明 - - 创建通知通道（callback形式) - -- addSlot参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | -------- | -------- | ------------------- | ---- | ---------------------- | - | type | 只读 | SlotType | 是 | 要创建的通知通道的类型 | - | callback | 只读 | AsyncCallback | 是 | 表示被指定的回调方法 | - -- SlotType类型说明 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| -------------------- | -------- | -------- | ---- | -------- | -| SOCIAL_COMMUNICATION | 只读 | SlotType | 否 | 社交类型 | -| SERVICE_INFORMATION | 只读 | SlotType | 否 | 服务类型 | -| CONTENT_INFORMATION | 只读 | SlotType | 否 | 内容类型 | -| OTHER_TYPES | 只读 | SlotType | 否 | 其他类型 | - -* - - 返回值为void - -* 示例 - -```js -//addslot回调 -function addSlotCallBack(err) { - console.info("==========================>addSlotCallBack=======================>"); -} -Notification.addSlot(SOCIAL_COMMUNICATION, addSlotCallBack) -``` - - - -#### Notification.addSlot(type: SlotType) - -- 接口说明 - - 创建通知通道（Promise形式) - -- addSlot参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ---- | -------- | -------- | ---- | ---------------------- | - | type | 只读 | SlotType | 是 | 要创建的通知通道的类型 | - -- - - 返回值为Promise<**void**> - -- 示例 - -```js -Notification.addSlot(SOCIAL_COMMUNICATION).then((void) => { - console.info("==========================>addSlotCallback=======================>"); -}); -``` - -#### Notification.getSlot(slotType: SlotType, callback: AsyncCallback) - -- 接口说明 - - 获取一个通知通道（callback形式) - -- getSlot参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | -------- | -------- | ------------------------------- | ---- | ----------------------------------------------------------- | - | slotType | 只读 | slotType | 是 | 通知渠道类型,目前分为社交通信、服务提醒、内容咨询和其他类型 | - | callback | 只读 | AsyncCallback | 是 | 表示被指定的回调方法 | - -- - - 返回值为void - -- 示例 - -```js -//getSlot回调 -function getSlotCallback(err,data) { - console.info("==========================>getSlotCallback=======================>"); -} -var slotType = SOCIAL_COMMUNICATION; -Notification.getSlot(slotType, getSlotCallback) -``` - - - -#### Notification.getSlot(slotType) - -- 接口说明 - - 获取一个通知通道（Promise形式) - -* getSlot参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | -------- | -------- | -------- | ---- | ----------------------------------------------------------- | - | slotType | 只读 | slotType | 是 | 通知渠道类型,目前分为社交通信、服务提醒、内容咨询和其他类型 | - -* - - 返回值为Promise - -* 示例 - -```js -var slotType = SOCIAL_COMMUNICATION; -Notification.getSlot(slotType).then((data) => { - console.info("==========================>getSlotCallback=======================>"); -``` - - - -#### Notification.getSlots(callback: AsyncCallback>) - -- 接口说明 - - 获取此应用程序的所有通知通道（callback形式) - -- getSlots参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | -------- | -------- | ------------------------------- | ---- | -------------------- | - | callback | 只读 | AsyncCallback | 是 | 表示被指定的回调方法 | - -- - - 返回值为void - -- 示例 - -```js -//getSlots回调 -function getSlotsCallback(err,data) { - console.info("==========================>getSlotsCallback=======================>"); -} -Notification.getSlots(getSlotsCallback) -``` - - - -#### Notification.getSlots() - -- 接口说明 - - 获取此应用程序的所有通知通道（Promise形式) - -- getSlots参数描述 - - 无参数 - -- - - 返回值为Promise> - -- 示例 - -```js -Notification.getSlots().then((data) => { - console.info("==========================>getSlotsCallback=======================>"); -``` - - - -#### Notification.removeSlot(slotType: SlotType, callback: AsyncCallback) - -- 接口说明 - - 根据通知通道类型删除创建的通知通道（callback形式) - -- removeSlot参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | -------- | -------- | ------------------- | ---- | ----------------------------------------------------------- | - | SlotType | 只读 | SlotType | 是 | 通知渠道类型,目前分为社交通信、服务提醒、内容咨询和其他类型 | - | callback | 只读 | AsyncCallback | 是 | 表示被指定的回调方法 | - -- - - 返回值为void - -- 示例 - -```js -//removeSlot回调 -function removeSlotCallback(err) { - console.info("==========================>removeSlotCallback=======================>"); -} -var slotType = SOCIAL_COMMUNICATION; -Notification.removeSlot(slotType,removeSlotCallback) -``` - - - -#### Notification.removeSlot(slotType: SlotType) - -- 接口说明 - - 根据通知通道类型删除创建的通知通道（Promise形式) - -- removeSlot参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | -------- | -------- | -------- | ---- | ----------------------------------------------------------- | - | SlotType | 只读 | SlotType | 是 | 通知渠道类型,目前分为社交通信、服务提醒、内容咨询和其他类型 | - -- - - 返回值为Promise<**void**> - -- 示例 - -```js -var slotType = SOCIAL_COMMUNICATION; -Notification.removeSlot(slotType).then((void) => { - console.info("==========================>removeSlotCallback=======================>"); -``` - - - -#### Notification.removeAllSlots(callback: AsyncCallback) - -- 接口说明 - - 删除所有通知通道（callback形式) - -- removeAllSlots参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | -------- | -------- | ------------------- | ---- | -------------------- | - | callback | 只读 | AsyncCallback | 是 | 表示被指定的回调方法 | - -- - - 返回值为void - -- 示例 - -```js -function removeAllCallBack(err) { - console.info("================>removeAllCallBack=======================>"); -} -Notification.removeAllSlots(removeAllCallBack) -``` - - - -#### Notification.removeAllSlots() - -- 接口说明 - - 删除所有通知通道（Promise形式) - -- removeAllSlots参数描述 - - 参数无 - -- - - 返回值为Promise<**void**> - -- 示例 - -```js - -Notification.removeAllSlots().then((void) => { - console.info("==========================>removeAllCallBack=======================>"); -}); -``` - -#### Notification.getAllActiveNotifications(callback: AsyncCallback>) - -- 接口说明 - - 获取活动通知（Callback形式) - -- getAllActiveNotifications参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | -------- | -------- | ----------------------------------------- | ---- | -------------------- | - | callback | 只读 | AsyncCallback> | 是 | 获取活动通知回调函数 | - -- - - 返回值为void - -- 示例 - -```js -function getAllActiveNotificationsCallback(err, data) { - console.info("==========================>getAllActiveNotificationsCallback=======================>"); -} - -Notification.getAllActiveNotifications(getAllActiveNotificationsCallback); -``` - - - -#### Notification.getAllActiveNotifications() - -- 接口说明 - - 获取活动通知（Promise形式) - -- getAllActiveNotifications参数描述 - - 无 - -- - - 返回值为Promise> - -- 示例 - -```js -Notification.getAllActiveNotifications().then((data) => { - console.info("==========================>getAllActiveNotificationsCallback=======================>"); -}); -``` - - - -#### Notification.getActiveNotificationCount(callback: AsyncCallback<**number**>) - -- 接口说明 - - 获取当前应用的活动通知数（Callback形式) - -- getActiveNotificationCount参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | -------- | -------- | ------------------------- | ---- | ---------------------- | - | callback | 只读 | AsyncCallback<**number**> | 是 | 获取活动通知数回调函数 | - -- - - 返回值为void - -- 示例 - -```js -function getActiveNotificationCountCallback(err, data) { - console.info("==========================>getActiveNotificationCountCallback=======================>"); -} - -Notification.getActiveNotificationCount(getActiveNotificationCountCallback); -``` - - - -#### Notification.getActiveNotificationCount() - -- 接口说明 - - 获取当前应用的活动通知数（Promise形式) - -- getActiveNotificationCount参数描述 - - 无 - -- - - 返回值为Promise<**number**> - -- 示例 - -```js -Notification.getActiveNotificationCount().then((data) => { - console.info("==========================>getActiveNotificationCountCallback=======================>"); -}); -``` - - - -#### Notification.getActiveNotifications(callback: AsyncCallback>) - -- 接口说明 - - 获取当前应用的活动通知（Callback形式) - -- getActiveNotifications参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | -------- | -------- | ----------------------------------------- | ---- | ------------------------------ | - | callback | 只读 | AsyncCallback> | 是 | 获取当前应用的活动通知回调函数 | - -- - - 返回值为void - -- 示例 - -```js -function getActiveNotificationsCallback(err, data) { - console.info("==========================>getActiveNotificationsCallback=======================>"); -} - -Notification.getActiveNotifications(getActiveNotificationsCallback); -``` - - - -#### Notification.getActiveNotifications() - -- 接口说明 - - 获取当前应用的活动通知（Promise形式) - -- getActiveNotifications参数描述 - - 无 - -- - - 返回值为Promise> - -- 示例 - -```js -Notification.getActiveNotifications().then((data) => { - console.info("==========================>getActiveNotificationsCallback=======================>"); -}); -``` - - - -#### WantAgent接口 - -#### 导入模块 - -```js -import WantAgent from '@ohos.wantAgent'; -``` - -#### WantAgent.getWantAgent(info: WantAgentInfo, callback: AsyncCallback) - -- 接口说明 - - 创建WantAgent（callback形式） - -- getWantAgent参数描述 - - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| -------- | -------- | ------------------------ | ---- | ----------------------- | -| info | 只读 | WantAgentInfo | 是 | WantAgent信息 | -| callback | 只读 | AsyncCallback | 是 | 创建WantAgent的回调方法 | - -- WantAgentInfo类型说明 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| -------------- | -------- | ------------------------------- | ---- | ---------------------- | -| wants | 读、写 | Array | 是 | 将被执行的动作列表 | -| operationType | 读、写 | wantAgent.OperationType | 是 | 动作类型 | -| requestCode | 读、写 | number | 是 | 使用者定义的一个私有值 | -| wantAgentFlags | 读、写 | Array | 否 | 动作执行属性 | -| extraInfo | 读、写 | {[key: string]: any} | 否 | 额外数据 | - -- - WantAgentFlags类型说明 - - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ------------------- | -------- | ---- | ---- | ------------------------------------------------------------ | -| ONE_TIME_FLAG | 只读 | enum | 否 | WantAgent仅能使用一次 | -| NO_BUILD_FLAG | 只读 | enum | 否 | 如果描述WantAgent对象不存在，则不创建它，直接返回null | -| CANCEL_PRESENT_FLAG | 只读 | enum | 否 | 在生成一个新的WantAgent对象前取消已存在的一个WantAgent对象 | -| UPDATE_PRESENT_FLAG | 只读 | enum | 否 | 使用新的WantAgent的额外数据替换已存在的WantAgent中的额外数据 | -| CONSTANT_FLAG | 只读 | enum | 否 | WantAgent是不可变的 | -| REPLACE_ELEMENT | 只读 | enum | 否 | 当前Want中的element属性可被WantAgent.trigger()中Want的element属性取代 | -| REPLACE_ACTION | 只读 | enum | 否 | 当前Want中的action属性可被WantAgent.trigger()中Want的action属性取代 | -| REPLACE_URI | 只读 | enum | 否 | 当前Want中的uri属性可被WantAgent.trigger()中Want的uri属性取代 | -| REPLACE_ENTITIES | 只读 | enum | 否 | 当前Want中的entities属性可被WantAgent.trigger()中Want的entities属性取代 | -| REPLACE_BUNDLE | 只读 | enum | 否 | 当前Want中的bundleName属性可被WantAgent.trigger()中Want的bundleName属性取代 | - -- OperationType类型说明 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ----------------- | -------- | ---- | ---- | ----------------------- | -| UNKNOWN_TYPE | 只读 | enum | 否 | 不识别的类型 | -| START_ABILITY | 只读 | enum | 否 | 开启一个有页面的Ability | -| START_ABILITIES | 只读 | enum | 否 | 开启多个有页面的Ability | -| START_SERVICE | 只读 | enum | 否 | 开启一个无页面的ability | -| SEND_COMMON_EVENT | 只读 | enum | 否 | 发送一个公共事件 | - -- - - 返回值为void - -- 示例 - -```js -import wantAgent from '@ohos.wantAgent'; -import { OperationType, Flags } from '@ohos.wantagent'; - -//getWantAgent回调 -function getWantAgentCallback(err, data) { - console.info("==========================>getWantAgentCallback=======================>"); -} -//WantAgentInfo对象 -var wantAgentInfo = { - wants: [ - { - deviceId: "deviceId", - bundleName: "com.neu.setResultOnAbilityResultTest1", - abilityName: "com.example.test.MainAbility", - action: "action1", - entities: ["entity1"], - type: "MIMETYPE", - uri: "key={true,true,false}", - parameters: - { - mykey0: 2222, - mykey1: [1, 2, 3], - mykey2: "[1, 2, 3]", - mykey3: "ssssssssssssssssssssssssss", - mykey4: [false, true, false], - mykey5: ["qqqqq", "wwwwww", "aaaaaaaaaaaaaaaaa"], - mykey6: true, - } - } - ], - operationType: OperationType.START_ABILITIES, - requestCode: 0, - wantAgentFlags:[Flags.UPDATE_PRESENT_FLAG] -} - -wantAgent.getWantAgent(wantAgentInfo, getWantAgentCallback) -``` - - - -#### WantAgent.getWantAgent(info: WantAgentInfo): Promise - -- 接口说明 - - 创建WantAgent（Promise形式） - -- getWantAgent参数描述 - - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ---- | -------- | ------------- | ---- | ------------- | -| info | 只读 | WantAgentInfo | 是 | WantAgent信息 | - -- - - 返回值为Promise - -- 示例 - -```js -import wantAgent from '@ohos.wantAgent'; -import { OperationType, Flags } from '@ohos.wantagent'; - -//WantAgentInfo对象 -var wantAgentInfo = { - wants: [ - { - deviceId: "deviceId", - bundleName: "com.neu.setResultOnAbilityResultTest1", - abilityName: "com.example.test.MainAbility", - action: "action1", - entities: ["entity1"], - type: "MIMETYPE", - uri: "key={true,true,false}", - parameters: - { - mykey0: 2222, - mykey1: [1, 2, 3], - mykey2: "[1, 2, 3]", - mykey3: "ssssssssssssssssssssssssss", - mykey4: [false, true, false], - mykey5: ["qqqqq", "wwwwww", "aaaaaaaaaaaaaaaaa"], - mykey6: true, - } - } - ], - operationType: OperationType.START_ABILITIES, - requestCode: 0, - wantAgentFlags:[Flags.UPDATE_PRESENT_FLAG] -} - -wantAgent.getWantAgent(wantAgentInfo).then((data) => { - console.info("==========================>getWantAgentCallback=======================>"); -}); -``` - - - -#### WantAgent.getBundleName(agent: WantAgent, callback: AsyncCallback) - -- 接口说明 - - 获取WantAgent实例的包名（callback形式） - -- getBundleName参数描述 - - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| -------- | -------- | --------------------- | ---- | --------------------------------- | -| agent | 只读 | WantAgent | 是 | WantAgent对象 | -| callback | 只读 | AsyncCallback | 是 | 获取WantAgent实例的包名的回调方法 | - -- 返回值为void - -- 示例 - -```js -import wantAgent from '@ohos.wantAgent'; -import { OperationType, Flags } from '@ohos.wantagent'; - -//wantAgent对象 -var WantAgent; - -//getWantAgent回调 -function getWantAgentCallback(err, data) { - console.info("==========================>getWantAgentCallback=======================>"); - if (err.code == 0) { - WantAgent = data; - } else { - console.info('----getWantAgent failed!----'); - } -} -//WantAgentInfo对象 -var wantAgentInfo = { - wants: [ - { - deviceId: "deviceId", - bundleName: "com.neu.setResultOnAbilityResultTest1", - abilityName: "com.example.test.MainAbility", - action: "action1", - entities: ["entity1"], - type: "MIMETYPE", - uri: "key={true,true,false}", - parameters: - { - mykey0: 2222, - mykey1: [1, 2, 3], - mykey2: "[1, 2, 3]", - mykey3: "ssssssssssssssssssssssssss", - mykey4: [false, true, false], - mykey5: ["qqqqq", "wwwwww", "aaaaaaaaaaaaaaaaa"], - mykey6: true, - } - } - ], - operationType: OperationType.START_ABILITIES, - requestCode: 0, - wantAgentFlags:[Flags.UPDATE_PRESENT_FLAG] -} - -wantAgent.getWantAgent(wantAgentInfo, getWantAgentCallback) - -//getBundleName回调 -function getBundleNameCallback(err, data) { - console.info("==========================>getBundleNameCallback=======================>"); -} -wantAgent.getBundleName(WantAgent, getBundleNameCallback) -``` - - - -#### WantAgent.getBundleName(agent: WantAgent): Promise - -- 接口说明 - - 获取WantAgent实例的包名（Promise形式） - -- getBundleName参数描述 - - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ----- | -------- | --------- | ---- | ------------- | -| agent | 只读 | WantAgent | 是 | WantAgent对象 | - -- - - 返回值为Promise - -- 示例 - -```js -import wantAgent from '@ohos.wantAgent'; -import { OperationType, Flags } from '@ohos.wantagent'; - -//wantAgent对象 -var WantAgent; - -//WantAgentInfo对象 -var wantAgentInfo = { - wants: [ - { - deviceId: "deviceId", - bundleName: "com.neu.setResultOnAbilityResultTest1", - abilityName: "com.example.test.MainAbility", - action: "action1", - entities: ["entity1"], - type: "MIMETYPE", - uri: "key={true,true,false}", - parameters: - { - mykey0: 2222, - mykey1: [1, 2, 3], - mykey2: "[1, 2, 3]", - mykey3: "ssssssssssssssssssssssssss", - mykey4: [false, true, false], - mykey5: ["qqqqq", "wwwwww", "aaaaaaaaaaaaaaaaa"], - mykey6: true, - } - } - ], - operationType: OperationType.START_ABILITIES, - requestCode: 0, - wantAgentFlags:[Flags.UPDATE_PRESENT_FLAG] -} - -wantAgent.getWantAgent(wantAgentInfo).then((data) => { - console.info("==========================>getWantAgentCallback=======================>"); - WantAgent = data; -}); - -wantAgent.getBundleName(WantAgent).then((data) => { - console.info("==========================>getBundleNameCallback=======================>"); -}); -``` - - - -#### WantAgent.getUid(agent: WantAgent, callback: AsyncCallback) - -- 接口说明 - - 获取WantAgent实例的用户ID（callback形式） - -- getUid参数描述 - - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| -------- | -------- | --------------------- | ---- | ----------------------------------- | -| agent | 只读 | WantAgent | 是 | WantAgent对象 | -| callback | 只读 | AsyncCallback | 是 | 获取WantAgent实例的用户ID的回调方法 | - -- 返回值为void - -- 示例 - -```js -import wantAgent from '@ohos.wantAgent'; -import { OperationType, Flags } from '@ohos.wantagent'; - -//wantAgent对象 -var WantAgent; - -//getWantAgent回调 -function getWantAgentCallback(err, data) { - console.info("==========================>getWantAgentCallback=======================>"); - if (err.code == 0) { - WantAgent = data; - } else { - console.info('----getWantAgent failed!----'); - } -} -//WantAgentInfo对象 -var wantAgentInfo = { - wants: [ - { - deviceId: "deviceId", - bundleName: "com.neu.setResultOnAbilityResultTest1", - abilityName: "com.example.test.MainAbility", - action: "action1", - entities: ["entity1"], - type: "MIMETYPE", - uri: "key={true,true,false}", - parameters: - { - mykey0: 2222, - mykey1: [1, 2, 3], - mykey2: "[1, 2, 3]", - mykey3: "ssssssssssssssssssssssssss", - mykey4: [false, true, false], - mykey5: ["qqqqq", "wwwwww", "aaaaaaaaaaaaaaaaa"], - mykey6: true, - } - } - ], - operationType: OperationType.START_ABILITIES, - requestCode: 0, - wantAgentFlags:[Flags.UPDATE_PRESENT_FLAG] -} - -wantAgent.getWantAgent(wantAgentInfo, getWantAgentCallback) - -//getUid回调 -function getUidCallback(err, data) { - console.info("==========================>getUidCallback=======================>"); -} -wantAgent.getUid(WantAgent, getUidCallback) -``` - - - -#### WantAgent.getUid(agent: WantAgent): Promise - -- 接口说明 - - 获取WantAgent实例的用户ID（Promise形式） - -- getUid参数描述 - - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ----- | -------- | --------- | ---- | ------------- | -| agent | 只读 | WantAgent | 是 | WantAgent对象 | - -- - - 返回值为Promise - -- 示例 - -```js -import wantAgent from '@ohos.wantAgent'; -import { OperationType, Flags } from '@ohos.wantagent'; - -//wantAgent对象 -var WantAgent; - -//WantAgentInfo对象 -var wantAgentInfo = { - wants: [ - { - deviceId: "deviceId", - bundleName: "com.neu.setResultOnAbilityResultTest1", - abilityName: "com.example.test.MainAbility", - action: "action1", - entities: ["entity1"], - type: "MIMETYPE", - uri: "key={true,true,false}", - parameters: - { - mykey0: 2222, - mykey1: [1, 2, 3], - mykey2: "[1, 2, 3]", - mykey3: "ssssssssssssssssssssssssss", - mykey4: [false, true, false], - mykey5: ["qqqqq", "wwwwww", "aaaaaaaaaaaaaaaaa"], - mykey6: true, - } - } - ], - operationType: OperationType.START_ABILITIES, - requestCode: 0, - wantAgentFlags:[Flags.UPDATE_PRESENT_FLAG] -} - -wantAgent.getWantAgent(wantAgentInfo).then((data) => { - console.info("==========================>getWantAgentCallback=======================>"); - WantAgent = data; -}); - -wantAgent.getUid(WantAgent).then((data) => { - console.info("==========================>getUidCallback=======================>"); -}); -``` - - - -#### WantAgent.cancel(agent: WantAgent, callback: AsyncCallback) - -- 接口说明 - - 取消WantAgent实例（callback形式） - -- cancel参数描述 - - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| -------- | -------- | ------------------- | ---- | --------------------------- | -| agent | 只读 | WantAgent | 是 | WantAgent对象 | -| callback | 只读 | AsyncCallback | 是 | 取消WantAgent实例的回调方法 | - -- 返回值为void - -- 示例 - -```js -import wantAgent from '@ohos.wantAgent'; -import { OperationType, Flags } from '@ohos.wantagent'; - -//wantAgent对象 -var WantAgent; - -//getWantAgent回调 -function getWantAgentCallback(err, data) { - console.info("==========================>getWantAgentCallback=======================>"); - if (err.code == 0) { - WantAgent = data; - } else { - console.info('----getWantAgent failed!----'); - } -} -//WantAgentInfo对象 -var wantAgentInfo = { - wants: [ - { - deviceId: "deviceId", - bundleName: "com.neu.setResultOnAbilityResultTest1", - abilityName: "com.example.test.MainAbility", - action: "action1", - entities: ["entity1"], - type: "MIMETYPE", - uri: "key={true,true,false}", - parameters: - { - mykey0: 2222, - mykey1: [1, 2, 3], - mykey2: "[1, 2, 3]", - mykey3: "ssssssssssssssssssssssssss", - mykey4: [false, true, false], - mykey5: ["qqqqq", "wwwwww", "aaaaaaaaaaaaaaaaa"], - mykey6: true, - } - } - ], - operationType: OperationType.START_ABILITIES, - requestCode: 0, - wantAgentFlags:[Flags.UPDATE_PRESENT_FLAG] -} - -wantAgent.getWantAgent(wantAgentInfo, getWantAgentCallback) - -//cancel回调 -function cancelCallback(err, data) { - console.info("==========================>cancelCallback=======================>"); -} -wantAgent.cancel(WantAgent, cancelCallback) -``` - - - -#### WantAgent.cancel(agent: WantAgent): Promise - -- 接口说明 - - 取消WantAgent实例（Promise形式） - -- cancel参数描述 - - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ----- | -------- | --------- | ---- | ------------- | -| agent | 只读 | WantAgent | 是 | WantAgent对象 | - -- - - 返回值为Promise - -- 示例 - -```js -import wantAgent from '@ohos.wantAgent'; -import { OperationType, Flags } from '@ohos.wantagent'; - -//wantAgent对象 -var WantAgent; - -//WantAgentInfo对象 -var wantAgentInfo = { - wants: [ - { - deviceId: "deviceId", - bundleName: "com.neu.setResultOnAbilityResultTest1", - abilityName: "com.example.test.MainAbility", - action: "action1", - entities: ["entity1"], - type: "MIMETYPE", - uri: "key={true,true,false}", - parameters: - { - mykey0: 2222, - mykey1: [1, 2, 3], - mykey2: "[1, 2, 3]", - mykey3: "ssssssssssssssssssssssssss", - mykey4: [false, true, false], - mykey5: ["qqqqq", "wwwwww", "aaaaaaaaaaaaaaaaa"], - mykey6: true, - } - } - ], - operationType: OperationType.START_ABILITIES, - requestCode: 0, - wantAgentFlags:[Flags.UPDATE_PRESENT_FLAG] -} - -wantAgent.getWantAgent(wantAgentInfo).then((data) => { - console.info("==========================>getWantAgentCallback=======================>"); - WantAgent = data; -}); - -wantAgent.cancel(WantAgent).then((data) => { - console.info("==========================>cancelCallback=======================>"); -}); -``` - - - -#### WantAgent.trigger(agent: WantAgent, triggerInfo: TriggerInfo, callback?: Callback) - -- 接口说明 - - 主动激发WantAgent实例（callback形式） - -- trigger参数描述 - - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ----------- | -------- | --------------------------- | ---- | ------------------------------- | -| agent | 只读 | WantAgent | 是 | WantAgent对象 | -| triggerInfo | 只读 | TriggerInfo | 是 | TriggerInfo对象 | -| callback | 只读 | AsyncCallback | 是 | 主动激发WantAgent实例的回调方法 | - -- TriggerInfo类型说明 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ---------- | -------- | -------------------- | ---- | ----------- | -| code | 读、写 | number | 是 | result code | -| want | 读、写 | Want | 否 | Want | -| permission | 读、写 | string | 否 | 权限定义 | -| extraInfo | 读、写 | {[key: string]: any} | 否 | 额外数据 | - -- 返回值为void -- 示例 - -```js -import wantAgent from '@ohos.wantAgent'; -import { OperationType, Flags } from '@ohos.wantagent'; - -//wantAgent对象 -var WantAgent; - -//getWantAgent回调 -function getWantAgentCallback(err, data) { - console.info("==========================>getWantAgentCallback=======================>"); - if (err.code == 0) { - WantAgent = data; - } else { - console.info('----getWantAgent failed!----'); - } -} -//WantAgentInfo对象 -var wantAgentInfo = { - wants: [ - { - deviceId: "deviceId", - bundleName: "com.neu.setResultOnAbilityResultTest1", - abilityName: "com.example.test.MainAbility", - action: "action1", - entities: ["entity1"], - type: "MIMETYPE", - uri: "key={true,true,false}", - parameters: - { - mykey0: 2222, - mykey1: [1, 2, 3], - mykey2: "[1, 2, 3]", - mykey3: "ssssssssssssssssssssssssss", - mykey4: [false, true, false], - mykey5: ["qqqqq", "wwwwww", "aaaaaaaaaaaaaaaaa"], - mykey6: true, - } - } - ], - operationType: OperationType.START_ABILITIES, - requestCode: 0, - wantAgentFlags:[Flags.UPDATE_PRESENT_FLAG] -} - -wantAgent.getWantAgent(wantAgentInfo, getWantAgentCallback) - -//cancel回调 -function triggerCallback(err, data) { - console.info("==========================>triggerCallback=======================>"); -} -wantAgent.trigger(WantAgent, triggerCallback) -``` - - - -#### WantAgent.equal(agent: WantAgent, otherAgent: WantAgent, callback: AsyncCallback) - -- 接口说明 - - 判断两个WantAgent实例是否相等（callback形式） - -- equal参数描述 - - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ---------- | -------- | ---------------------- | ---- | --------------------------------------- | -| agent | 只读 | WantAgent | 是 | WantAgent对象 | -| otherAgent | 只读 | WantAgent | 是 | WantAgent对象 | -| callback | 只读 | AsyncCallback | 是 | 判断两个WantAgent实例是否相等的回调方法 | - -- 返回值为void - -- 示例 - -```js -import wantAgent from '@ohos.wantAgent'; -import { OperationType, Flags } from '@ohos.wantagent'; - -//wantAgent对象 -var WantAgent1; -var WantAgent2; - -//getWantAgent回调 -function getWantAgentCallback(err, data) { - console.info("==========================>getWantAgentCallback=======================>"); - if (err.code == 0) { - WantAgent1 = data; - WantAgent2 = data; - } else { - console.info('----getWantAgent failed!----'); - } -} -//WantAgentInfo对象 -var wantAgentInfo = { - wants: [ - { - deviceId: "deviceId", - bundleName: "com.neu.setResultOnAbilityResultTest1", - abilityName: "com.example.test.MainAbility", - action: "action1", - entities: ["entity1"], - type: "MIMETYPE", - uri: "key={true,true,false}", - parameters: - { - mykey0: 2222, - mykey1: [1, 2, 3], - mykey2: "[1, 2, 3]", - mykey3: "ssssssssssssssssssssssssss", - mykey4: [false, true, false], - mykey5: ["qqqqq", "wwwwww", "aaaaaaaaaaaaaaaaa"], - mykey6: true, - } - } - ], - operationType: OperationType.START_ABILITIES, - requestCode: 0, - wantAgentFlags:[Flags.UPDATE_PRESENT_FLAG] -} - -wantAgent.getWantAgent(wantAgentInfo, getWantAgentCallback) - -//cancel回调 -function equalCallback(err, data) { - console.info("==========================>equalCallback=======================>"); -} -wantAgent.equal(WantAgent1, WantAgent1, equalCallback) -``` - - - -#### WantAgent.equal(agent: WantAgent, otherAgent: WantAgent): Promise - -- 接口说明 - - 判断两个WantAgent实例是否相等（Promise形式） - -- equal参数描述 - - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ---------- | -------- | --------- | ---- | ------------- | -| agent | 只读 | WantAgent | 是 | WantAgent对象 | -| otherAgent | 只读 | WantAgent | 是 | WantAgent对象 | - -- - - 返回值为Promise - -- 示例 - -```js -import wantAgent from '@ohos.wantAgent'; -import { OperationType, Flags } from '@ohos.wantagent'; - -//wantAgent对象 -var WantAgent1; -var WantAgent2; - -//WantAgentInfo对象 -var wantAgentInfo = { - wants: [ - { - deviceId: "deviceId", - bundleName: "com.neu.setResultOnAbilityResultTest1", - abilityName: "com.example.test.MainAbility", - action: "action1", - entities: ["entity1"], - type: "MIMETYPE", - uri: "key={true,true,false}", - parameters: - { - mykey0: 2222, - mykey1: [1, 2, 3], - mykey2: "[1, 2, 3]", - mykey3: "ssssssssssssssssssssssssss", - mykey4: [false, true, false], - mykey5: ["qqqqq", "wwwwww", "aaaaaaaaaaaaaaaaa"], - mykey6: true, - } - } - ], - operationType: OperationType.START_ABILITIES, - requestCode: 0, - wantAgentFlags:[Flags.UPDATE_PRESENT_FLAG] -} - -wantAgent.getWantAgent(wantAgentInfo).then((data) => { - console.info("==========================>getWantAgentCallback=======================>"); - WantAgent = data; -}); - -wantAgent.equal(WantAgent1, WantAgent2).then((data) => { - console.info("==========================>equalCallback=======================>"); -}); -``` - - - -#### - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/zh-cn/application-dev/js-reference/ParticleAbility.md b/zh-cn/application-dev/js-reference/ParticleAbility.md deleted file mode 100644 index a547da02f9444affa12e3987ca4fd5631e7fb924..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/ParticleAbility.md +++ /dev/null @@ -1,411 +0,0 @@ -### ParticleAbility模块(JS端SDK接口) - -#### 支持设备 - -| API | 手机 | 平板 | 智慧屏 | 智能穿戴 | 轻量级智能穿戴 | 智慧视觉设备 | -| ------------------------------------------------------------ | ---- | ---- | ------ | -------- | -------------- | ------------ | -| ParticleAbility.startAbility(parameter: StartAbilityParameter, callback: AsyncCallback\ | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| ParticleAbility.startAbility(parameter: StartAbilityParameter) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| ParticleAbility.terminateSelf(callback: AsyncCallback\) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| ParticleAbility.terminateSelf() | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| ParticleAbility.acquireDataAbilityHelper(uri: string) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | - -#### 权限列表 - -ohos.permission.RUNNING_LOCK permission - -#### 使用限制 - -ParticleAbility模块的接口只能在Ability为Data和Service类型的时候进行调用 - -#### 导入模块 - -``` -import featureAbility from '@ohos.ability.featureAbility' -``` - -#### ParticleAbility.startAbility(parameter: StartAbilityParameter, callback: AsyncCallback\ - -- 接口说明 - - 服务ability使用此方法启动特定ability(callback形式) - -- startAbility参数描述 - - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| --------- | -------- | --------------------- | ---- | ----------------- | -| parameter | 只读 | StartAbilityParameter | 是 | 指示启动的ability | -| callback | 只读 | AsyncCallback\ | 是 | 被指定的回调方法 | - -- StartAbilityParameter类型说明 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ------------------- | -------- | ------ | ---- | ---------------------------------- | -| want | 只读 | want | 是 | 表示需要包含有关目标启动能力的信息 | -| abilityStartSetting | 只读 | string | 否 | 指示启动能力中使用的特殊启动设置 | - -- want类型说明 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ----------- | -------- | ------ | ---- | -------------------------- | -| deviceId | 只读 | string | 否 | 设备id | -| bundleName | 只读 | string | 否 | 捆绑包名称 | -| abilityName | 只读 | string | 否 | ability 名字 | -| uri | 只读 | string | 否 | 请求中URI的描述 | -| type | 只读 | string | 否 | 此文件中类型的说明 | -| flags | 只读 | number | 否 | 此文件中标志的选项是必需的 | -| action | 只读 | string | 否 | 需求中对操作的描述 | -| parameters | 只读 | string | 否 | Want中WantParams对象的描述 | -| entities | 只读 | string | 否 | 对象中实体的描述 | - -- flags类型说明 - - | 名称 | 参数 | 描述 | - | ------------------------------------ | ---------- | ------------------------------------------------------------ | - | FLAG_AUTH_READ_URI_PERMISSION | 0x00000001 | 指示对URI执行读取操作的授权 | - | FLAG_AUTH_WRITE_URI_PERMISSION | 0x00000002 | 指示对URI执行写入操作的授权 | - | FLAG_ABILITY_FORWARD_RESULT | 0x00000004 | 将结果返回给源异能 | - | FLAG_ABILITY_CONTINUATION | 0x00000008 | 确定是否可以将本地设备上的功能迁移到远程设备 | - | FLAG_NOT_OHOS_COMPONENT | 0x00000010 | 指定组件是否不属于OHOS | - | FLAG_ABILITY_FORM_ENABLED | 0x00000020 | 指定是否启动某个能力 | - | FLAG_AUTH_PERSISTABLE_URI_PERMISSION | 0x00000040 | 指示URI上可能持久化的授权 | - | FLAG_AUTH_PREFIX_URI_PERMISSION | 0x00000080 | 将结果返回到源能力片 | - | FLAG_ABILITYSLICE_MULTI_DEVICE | 0x00000100 | 支持分布式调度系统中的多设备启动 | - | FLAG_START_FOREGROUND_ABILITY | 0x00000200 | 指示无论主机应用程序是否已启动，都将启动使用服务模板的功能 | - | FLAG_ABILITY_CONTINUATION_REVERSIBLE | 0x00000400 | 表示延续是可逆的。 | - | FLAG_INSTALL_ON_DEMAND | 0x00000800 | 如果未安装指定的功能，请安装该功能 | - | FLAG_INSTALL_WITH_BACKGROUND_MODE | 0x80000000 | 如果未安装，请使用后台模式安装指定的DI功能。 | - | FLAG_ABILITY_CLEAR_MISSION | 0x00008000 | 指示清除其他任务的操作。可以为传递给{@link ohos.app.Context#startAbility}的{@code Intent}设置此标志，并且必须与{@link flag_ABILITY_NEW_MISSION}一起使用 | - | FLAG_ABILITY_NEW_MISSION | 0x10000000 | 指示在历史任务堆栈上创建任务的操作。 | - | FLAG_ABILITY_MISSION_TOP | 0x20000000 | 指示如果启动能力的现有实例已位于任务堆栈的顶部，则将重用该实例。否则，将创建一个新的能力实例。 | - -- 返回值 - - void - -- 示例 - -```js -import particleAbility from '@ohos.ability.particleAbility' -particleAbility.startAbility( - { - want: - { - action: "action.system.home", - entities: ["entity.system.home"], - type: "MIMETYPE", - flags: FLAG_AUTH_READ_URI_PERMISSION; - deviceId: "", - bundleName: "com.example.Data", - abilityName: "com.jstest.startabilitytest5.MainAbility", - uri:"" - }, - }, -) -``` - - - -#### ParticleAbility.startAbility(parameter: StartAbilityParameter) - -- 接口说明 -服务ability使用此方法启动特定ability((Promise形式) -- startAbility参数描述 - - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| --------- | -------- | --------------------- | ---- | ----------------- | -| parameter | 只读 | StartAbilityParameter | 是 | 指示启动的ability | -- StartAbilityParameter类型说明 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ------------------- | -------- | ------ | ---- | ---------------------------------- | -| want | 只读 | want | 是 | 表示需要包含有关目标启动能力的信息 | -| abilityStartSetting | 只读 | string | 否 | 指示启动能力中使用的特殊启动设置 | - -- want类型说明 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ----------- | -------- | ------ | ---- | -------------------------- | -| deviceId | 只读 | string | 否 | 设备id | -| bundleName | 只读 | string | 否 | 捆绑包名称 | -| abilityName | 只读 | string | 否 | ability 名字 | -| uri | 只读 | string | 否 | 请求中URI的描述 | -| type | 只读 | string | 否 | 此文件中类型的说明 | -| flags | 只读 | number | 否 | 此文件中标志的选项是必需的 | -| action | 只读 | string | 否 | 需求中对操作的描述 | -| parameters | 只读 | string | 否 | Want中WantParams对象的描述 | -| entities | 只读 | string | 否 | 对象中实体的描述 | - -- flags类型说明 - - | 名称 | 参数 | 描述 | - | ------------------------------------ | ---------- | ------------------------------------------------------------ | - | FLAG_AUTH_READ_URI_PERMISSION | 0x00000001 | 指示对URI执行读取操作的授权 | - | FLAG_AUTH_WRITE_URI_PERMISSION | 0x00000002 | 指示对URI执行写入操作的授权 | - | FLAG_ABILITY_FORWARD_RESULT | 0x00000004 | 将结果返回给源异能 | - | FLAG_ABILITY_CONTINUATION | 0x00000008 | 确定是否可以将本地设备上的功能迁移到远程设备 | - | FLAG_NOT_OHOS_COMPONENT | 0x00000010 | 指定组件是否不属于OHOS | - | FLAG_ABILITY_FORM_ENABLED | 0x00000020 | 指定是否启动某个能力 | - | FLAG_AUTH_PERSISTABLE_URI_PERMISSION | 0x00000040 | 指示URI上可能持久化的授权 | - | FLAG_AUTH_PREFIX_URI_PERMISSION | 0x00000080 | 将结果返回到源能力片 | - | FLAG_ABILITYSLICE_MULTI_DEVICE | 0x00000100 | 支持分布式调度系统中的多设备启动 | - | FLAG_START_FOREGROUND_ABILITY | 0x00000200 | 指示无论主机应用程序是否已启动，都将启动使用服务模板的功能 | - | FLAG_ABILITY_CONTINUATION_REVERSIBLE | 0x00000400 | 表示延续是可逆的。 | - | FLAG_INSTALL_ON_DEMAND | 0x00000800 | 如果未安装指定的功能，请安装该功能 | - | FLAG_INSTALL_WITH_BACKGROUND_MODE | 0x80000000 | 如果未安装，请使用后台模式安装指定的DI功能。 | - | FLAG_ABILITY_CLEAR_MISSION | 0x00008000 | 指示清除其他任务的操作。可以为传递给{@link ohos.app.Context#startAbility}的{@code Intent}设置此标志，并且必须与{@link flag_ABILITY_NEW_MISSION}一起使用 | - | FLAG_ABILITY_NEW_MISSION | 0x10000000 | 指示在历史任务堆栈上创建任务的操作。 | - | FLAG_ABILITY_MISSION_TOP | 0x20000000 | 指示如果启动能力的现有实例已位于任务堆栈的顶部，则将重用该实例。否则，将创建一个新的能力实例。 | - -- 返回值 - - void - -- 示例 - -```js -import featureAbility from '@ohos.ability.featureAbility' -import particleAbility from '@ohos.ability.particleAbility' -var windowMode = featureAbility.AbilityStartSetting.WINDOW_MODE_KEY; -particleAbility.startAbility( - want: - { - bundleName: "com.jstest.featureabilitytest", - abilityName: "com.jstest.startabilitytest1.MainAbility", - }, - abilityStartSetting: - { - windowMode: featureAbility.AbilityWindowConfiguration.WINDOW_MODE_FLOATING, - }, - } - - ).then((void) => { - console.info("==========================>startAbilityCallback=======================>"); -}); -``` - - - -#### ParticleAbility.terminateSelf(callback: AsyncCallback\) - -- 接口说明 - - 摧毁服务ability(callback形式) - -- terminateSelf参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | -------- | -------- | -------------------- | ---- | -------------------- | - | callback | 只读 | AsyncCallback\ | 是 | 表示被指定的回调方法 | - -- 返回值 - - void - -- 示例 - -```js -import particleAbility from '@ohos.ability.particleAbility' -ParticleAbility.terminateSelf() -``` - - - -#### ParticleAbility.terminateSelf() - -- 接口说明 - - 摧毁服务ability(Promise形式) - -- 返回值 - - void - -- 示例 - -```js -import particleAbility from '@ohos.ability.particleAbility' -particleAbility.terminateSelf().then((void) => { - console.info("==========================>terminateSelfCallback=======================>"); -}); -``` - - - -#### ParticleAbility.acquireDataAbilityHelper(uri: string) - -- 接口说明 - - 获取dataAbilityHelper - -- acquireDataAbilityHelper参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | :--- | -------- | ------ | ---- | ---------------------- | - | uri | 只读 | string | 是 | 指示要打开的文件的路径 | - -- 返回值 - - 返回dataAbilityHelper - -- 示例 - -```js -import particleAbility from '@ohos.ability.particleAbility' -var uri = ""; -ParticleAbility.acquireDataAbilityHelper(uri) -``` - -#### ParticleAbility.connectAbility(*request*: Want, *options*:ConnectOptions): number - -* 接口说明 - - 将当前ability连接到指定ServiceAbility(callback形式) - -* connectAbility参数描述 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ------- | -------- | -------------- | ---- | -------------------------- | -| request | 只读 | Want | 是 | 表示被连接的ServiceAbility | -| options | 只读 | ConnectOptions | 是 | 被指定的回调方法 | - -- ConnectOptions类型说明 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ------------ | -------- | -------- | ---- | ---------------------------------- | -| onConnect | 只读 | function | 是 | 连接成功时的回调函数 | -| onDisconnect | 只读 | function | 是 | 连接失败时的回调函数 | -| onFailed | 只读 | function | 是 | ConnectAbility调用失败时的回调函数 | - -* 返回值 - - 连接的ServiceAbilityID。 - -* 示例 - -```javascript -import particleAbility from '@ohos.ability.particleAbility' -var mRemote; -var connId; -function onConnectCallback(element, remote){ - mRemote = remote; - console.log('ConnectAbility onConnect remote is proxy:' + (remote instanceof rpc.RemoteProxy)); -} -function onDisconnectCallback(element){ - console.log('ConnectAbility onDisconnect element.deviceId : ' + element.deviceId) -} -function onFailedCallback(code){ - console.log('particleAbilityTest ConnectAbility onFailed errCode : ' + code) -} -var connId = particleAbility.connectAbility( - { - bundleName: "com.ix.ServiceAbility", - abilityName: "ServiceAbilityA", - }, - { - onConnect: onConnectCallback, - onDisconnect: onDisconnectCallback, - onFailed: onFailedCallback, - }, -); -``` - -#### ParticleAbility.disconnectAbility(connection: number, callback:AsyncCallback): void - -* 接口说明 - - 断开与指定ServiceAbility的连接(callback形式) - -* disconnectAbility参数描述 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ---------- | -------- | ------------- | ---- | ------------------------------ | -| connection | 只读 | number | 是 | 指定断开连接的ServiceAbilityID | -| callback | 只读 | AsyncCallback | 是 | 被指定的回调方法 | - -* 返回值 - - 无 - -* 示例 - -```javascript -import particleAbility from '@ohos.ability.particleAbility' -var mRemote; -var connId; -function onConnectCallback(element, remote){ - mRemote = remote; - console.log('ConnectAbility onConnect remote is proxy:' + (remote instanceof rpc.RemoteProxy)); -} -function onDisconnectCallback(element){ - console.log('ConnectAbility onDisconnect element.deviceId : ' + element.deviceId) -} -function onFailedCallback(code){ - console.log('particleAbilityTest ConnectAbility onFailed errCode : ' + code) -} -var connId = particleAbility.connectAbility( - { - bundleName: "com.ix.ServiceAbility", - abilityName: "ServiceAbilityA", - }, - { - onConnect: onConnectCallback, - onDisconnect: onDisconnectCallback, - onFailed: onFailedCallback, - }, -); -var result = particleAbility.disconnectAbility(connId, - (error,data) => { - console.log('particleAbilityTest DisConnectJsSameBundleName result errCode : ' + error.code + " data: " + data) - }, -); -``` - -#### ParticleAbility.disconnectAbility(connection: number): Promise; - -* 接口说明 - - 断开与指定ServiceAbility的连接(promise形式) - -* disconnectAbility参数描述 - -| 名称 | 读写属性 | 类型 | 必填 | 描述 | -| ---------- | -------- | ------ | ---- | ------------------------------ | -| connection | 只读 | number | 是 | 指定断开连接的ServiceAbilityID | - -* 返回值 - - 无 - -* 示例 - -```javascript -import particleAbility from '@ohos.ability.particleAbility' -var mRemote; -var connId; -function onConnectCallback(element, remote){ - mRemote = remote; - console.log('ConnectAbility onConnect remote is proxy:' + (remote instanceof rpc.RemoteProxy)); -} -function onDisconnectCallback(element){ - console.log('ConnectAbility onDisconnect element.deviceId : ' + element.deviceId) -} -function onFailedCallback(code){ - console.log('particleAbilityTest ConnectAbility onFailed errCode : ' + code) -} -var connId = particleAbility.connectAbility( - { - bundleName: "com.ix.ServiceAbility", - abilityName: "ServiceAbilityA", - }, - { - onConnect: onConnectCallback, - onDisconnect: onDisconnectCallback, - onFailed: onFailedCallback, - }, -); -var result = await particleAbility.disconnectAbility(connId); -``` - diff --git a/zh-cn/application-dev/js-reference/Readme-CN.md b/zh-cn/application-dev/js-reference/Readme-CN.md index 33a5316b4272315712710fd67df268180b4679ad..1c5407eae504a10ff938ec9d15b2964e08669610 100755 --- a/zh-cn/application-dev/js-reference/Readme-CN.md +++ b/zh-cn/application-dev/js-reference/Readme-CN.md @@ -1,109 +1,168 @@ -# JS参考规范 +# JS开发参考 -- [框架说明](框架说明.md) - - [文件组织](文件组织.md) - - [js标签配置](js标签配置.md) - - [app.js](app-js.md) - - [语法](语法.md) - - [HML语法参考](HML语法参考.md) - - [CSS语法参考](CSS语法参考.md) - - [JS语法参考](JS语法参考.md) +- [框架说明](js-framework.md) + - [文件组织](js-framework-file.md) + - [js标签配置](js-framework-js-tag.md) + - [app.js](js-framework-js-file.md) + - [语法](js-framework-syntax.md) + - [HML语法参考](js-framework-syntax-hml.md) + - [CSS语法参考](js-framework-syntax-css.md) + - [JS语法参考](js-framework-syntax-js.md) -- [组件](组件.md) - - [通用](通用.md) - - [组件方法](组件方法.md) - - [动画样式](动画样式.md) - - [渐变样式](渐变样式.md) - - [转场样式](转场样式.md) - - [自定义字体样式](自定义字体样式.md) - - [原子布局](原子布局.md) + - [生命周期](js-framework-lifecycle.md) + - [资源限定与访问](js-framework-resource-restriction.md) + - [多语言支持](js-framework-multiple-languages.md) - - [容器组件](容器组件.md) - - [badge](badge.md) - - [dialog](dialog.md) - - [div](div.md) - - [list](list.md) - - [list-item](list-item.md) - - [list-item-group](list-item-group.md) - - [panel](panel.md) - - [popup](popup.md) - - [refresh](refresh.md) - - [stack](stack.md) - - [stepper](stepper.md) - - [stepper-item](stepper-item.md) - - [swiper](swiper.md) - - [tabs](tabs.md) - - [tab-bar](tab-bar.md) - - [tab-content](tab-content.md) +- [组件](component/Readme-CN.md) + - [通用](component/js-components-common.md) + - [通用属性](component/js-components-common-attributes.md) + - [通用样式](component/js-components-common-styles.md) + - [通用事件](component/js-components-common-events.md) + - [通用方法](component/js-components-common-methods.md) + - [动画样式](component/js-components-common-animation.md) + - [渐变样式](component/js-components-common-gradient.md) + - [转场样式](component/js-components-common-transition.md) + - [媒体查询](component/js-components-common-mediaquery.md) + - [自定义字体样式](component/js-components-common-customizing-font.md) + - [原子布局](component/js-components-common-atomic-layout.md) - - [基础组件](基础组件.md) - - [button](button.md) - - [chart](chart.md) - - [divider](divider.md) - - [image](image.md) - - [image-animator](image-animator.md) - - [input](input.md) - - [label](label.md) - - [marquee](marquee.md) - - [menu](menu.md) - - [option](option.md) - - [picker](picker.md) - - [picker-view](picker-view.md) - - [piece](piece.md) - - [progress](progress.md) - - [qrcode](qrcode.md) - - [rating](rating.md) - - [select](select.md) - - [slider](slider.md) - - [span](span.md) - - [switch](switch.md) - - [text](text.md) - - [toolbar](toolbar.md) - - [toolbar-item](toolbar-item.md) - - [toggle](toggle.md) + - [容器组件](component/js-components-container.md) + - [badge](component/js-components-container-badge.md) + - [dialog](component/js-components-container-dialog.md) + - [div](component/js-components-container-div.md) + - [form](component/js-components-container-form.md) + - [list](component/js-components-container-list.md) + - [list-item](component/js-components-container-list-item.md) + - [list-item-group](component/js-components-container-list-item-group.md) + - [panel](component/js-components-container-panel.md) + - [popup](component/js-components-container-popup.md) + - [refresh](component/js-components-container-refresh.md) + - [stack](component/js-components-container-stack.md) + - [stepper](component/js-components-container-stepper.md) + - [stepper-item](component/js-components-container-stepper-item.md) + - [swiper](component/js-components-container-swiper.md) + - [tabs](component/js-components-container-tabs.md) + - [tab-bar](component/js-components-container-tab-bar.md) + - [tab-content](component/js-components-container-tab-content.md) - - [媒体组件](媒体组件.md) - - [Camera](Camera.md) + - [基础组件](component/js-components-basic.md) + - [button](component/js-components-basic-button.md) + - [chart](component/js-components-basic-chart.md) + - [divider](component/js-components-basic-divider.md) + - [image](component/js-components-basic-image.md) + - [image-animator](component/js-components-basic-image-animator.md) + - [input](component/js-components-basic-input.md) + - [label](component/js-components-basic-label.md) + - [marquee](component/js-components-basic-marquee.md) + - [menu](component/js-components-basic-menu.md) + - [option](component/js-components-basic-option.md) + - [picker](component/js-components-basic-picker.md) + - [picker-view](component/js-components-basic-picker-view.md) + - [piece](component/js-components-basic-piece.md) + - [progress](component/js-components-basic-progress.md) + - [qrcode](component/js-components-basic-qrcode.md) + - [rating](component/js-components-basic-rating.md) + - [richtext](component/js-components-basic-richtext.md) + - [search](component/js-components-basic-search.md) + - [select](component/js-components-basic-select.md) + - [slider](component/js-components-basic-slider.md) + - [span](component/js-components-basic-span.md) + - [switch](component/js-components-basic-switch.md) + - [text](component/js-components-basic-text.md) + - [textarea](component/js-components-basic-textarea.md) + - [toolbar](component/js-components-basic-toolbar.md) + - [toolbar-item](component/js-components-basic-toolbar-item.md) + - [toggle](component/js-components-basic-toggle.md) - - [画布组件](画布组件.md) - - [canvas组件](canvas组件.md) - - [CanvasRenderingContext2D对象](CanvasRenderingContext2D对象.md) - - [Image对象](Image对象.md) - - [CanvasGradient对象](CanvasGradient对象.md) - - [ImageData对象](ImageData对象.md) + - [媒体组件](component/js-components-media.md) + - [video](component/js-components-media-video.md) - - [栅格组件](栅格组件.md) - - [基本概念](基本概念.md) - - [grid-container](grid-container.md) - - [grid-row](grid-row.md) - - [grid-col](grid-col.md) + - [画布组件](component/js-components-canvas.md) + - [canvas组件](component/js-components-canvas-canvas.md) + - [CanvasRenderingContext2D对象](component/js-components-canvas-canvasrenderingcontext2d.md) + - [Image对象](component/js-components-canvas-image.md) + - [CanvasGradient对象](component/js-components-canvas-canvasgradient.md) + - [ImageData对象](component/js-components-canvas-imagedata.md) + - [Path2D对象](component/js-components-canvas-path2d.md) + - [ImageBitmap对象](component/js-components-canvas-imagebitmap.md) + - [OffscreenCanvas对象](component/js-components-canvas-offscreencanvas.md) + - [OffscreenCanvasRenderingContext2D对象](component/js-components-canvas-offscreencanvasrenderingcontext2d.md) -- [自定义组件](自定义组件.md) - - [基本用法](基本用法.md) - - [自定义事件](自定义事件.md) - - [Props](Props.md) - - [事件参数](事件参数.md) + - [栅格组件](component/js-components-grid.md) + - [基本概念](component/js-components-grid-basic-concepts.md) + - [grid-container](component/js-components-grid-container.md) + - [grid-row](component/js-components-grid-row.md) + - [grid-col](component/js-components-grid-col.md) -- [组件通用说明](组件通用说明.md) - - [通用事件](通用事件.md) - - [通用属性](通用属性.md) - - [通用样式](通用样式.md) + - [svg组件](component/js-components-svg.md) + - [通用属性](component/js-components-svg-common-attributes.md) + - [svg](component/js-components-svg-0.md) + - [rect](component/js-components-svg-rect.md) + - [circle](component/js-components-svg-circle.md) + - [ellipse](component/js-components-svg-ellipse.md) + - [path](component/js-components-svg-path.md) + - [line](component/js-components-svg-line.md) + - [polyline](component/js-components-svg-polyline.md) + - [polygon](component/js-components-svg-polygon.md) + - [text](component/js-components-svg-text.md) + - [tspan](component/js-components-svg-tspan.md) + - [textPath](component/js-components-svg-textpath.md) + - [animate](component/js-components-svg-animate.md) + - [animateMotion](component/js-components-svg-animate-motion.md) + - [animateTransform](component/js-components-svg-animate-transform.md) + +- [自定义组件](component/js-components-custom.md) + - [基本用法](component/js-components-custom-basic-usage.md) + - [自定义事件](component/js-components-custom-events.md) + - [Props](component/js-components-custom-props.md) + - [事件参数](component/js-components-custom-event-parameter.md) + - [slot插槽](component/js-components-custom-slot.md) + - [生命周期定义](component/js-components-custom-lifecycle.md) + +- [接口](apis/Readme-CN.md) + - [基本功能](apis/js-apis-basic-features.md) + - [应用上下文](apis/js-apis-system-app.md) + - [日志打印](apis/js-apis-basic-features-logs.md) + - [页面路由](apis/js-apis-system-router.md) + - [弹窗](apis/js-apis-system-prompt.md) + - [应用配置](apis/js-apis-system-configuration.md) + - [定时器](apis/js-apis-system-timer.md) + - [动画](apis/js-apis-animator.md) + - [应用打点](apis/js-apis-hiappevent.md) + - [性能打点](apis/js-apis-bytrace.md) + - [分布式帐号管理](apis/js-apis-distributedaccount.md) + + - [媒体](apis/js-api-multmedia.md) + - [音频管理](apis/js-api-audio.md) + - [音频播放](apis/js-api-media.md) + + - [数据管理](apis/js-apis-data.md) + - [文件管理](apis/js-apis-fileio.md) + - [单版本分布式数据库](apis/js-apis-data-singlekvstore.md) + - [创建和获取分布式数据库](apis/js-apis-data-kvmanager.md) + - [KVManager配置信息](apis/js-apis-data-kvmanager-config.md) + - [分布式数据库操作描述](apis/js-apis-data-kvstore.md) + - [数据类型描述](apis/js-apis-data-type.md) + - [轻量级存储](apis/js-apis-data-storage.md) + + - [设备管理](apis/js-apis-device-mgmt.md) + - [设备信息](apis/js-apis-deviceinfo.md) + - [系统属性](apis/js-apis-systemparameter.md) + - [系统恢复](apis/js-apis-update.md) + - [显示设备属性](apis/js-apis-display.md) + - [电池和充电属性](apis/js-apis-batteryinfo.md) + - [设置系统屏幕亮度](apis/js-apis-brightness.md) + - [系统电源管理](apis/js-apis-power.md) + - [Runninglock锁](apis/js-apis-runninglock.md) + - [传感器](apis/js-apis-sensor.md) + - [振动](apis/js-apis-vibrate.md) + - [国际化（I18n）](apis/js-apis-i18n.md) + - [国际化（Intl）](apis/js-apis-intl.md) + - [资源管理](apis/js-apis-resourcemanage.md) + - [时间设置](apis/js-apis-systemtime.md) + - [升级](apis/js-apis-libupdateclient.md) + - [获取进程相关的信息](apis/js-apis-process.md) + - [字符串编解码](apis/js-apis-util.md) + - [启动一个worker](apis/js-apis-worker.md) + - [URL字符串解析](apis/js-apis-url.md) -- [接口](接口.md) - - [日志打印](日志打印.md) - - [应用打点](应用打点.md) - - [页面路由](页面路由.md) - - [弹窗](弹窗.md) - - [定时器](定时器.md) - - [时间设置](时间设置.md) - - [音频管理](音频管理.md) - - [音频播放](音频播放.md) - - [设备信息](设备信息.md) - - [系统属性](系统属性.md) - - [电池和充电属性](电池和充电属性.md) - - [设置系统屏幕亮度](设置系统屏幕亮度.md) - - [国际化](国际化.md) - - [资源管理](资源管理.md) - - [升级](升级.md) - - [文件管理](文件管理.md) - - [文件存储](文件存储.md) \ No newline at end of file diff --git "a/zh-cn/application-dev/js-reference/SIM\345\215\241\347\256\241\347\220\206.md" "b/zh-cn/application-dev/js-reference/SIM\345\215\241\347\256\241\347\220\206.md" deleted file mode 100755 index 1daf3a6529e13551917c445a2e926eb552ab60cb..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/js-reference/SIM\345\215\241\347\256\241\347\220\206.md" +++ /dev/null @@ -1,836 +0,0 @@ -# SIM卡管理 - -- [导入模块](#s56d19203690d4782bfc74069abb6bd71) -- [sim.getSimIccId](#section18529027065) -- [sim.getSimIccId](#section9200164911401) -- [sim.getDefaultVoiceSlotId7+](#section3313193864611) -- [sim.getDefaultVoiceSlotId7+](#section19013665018) -- [sim.getISOCountryCodeForSim](#section1429719645712) -- [sim.getISOCountryCodeForSim](#section1087375135713) -- [sim.getSimOperatorNumeric](#section1245831911019) -- [sim.getSimOperatorNumeric](#section450711512119) -- [sim.getSimSpn](#section18826326532) -- [sim.getSimSpn](#section1862714201148) -- [sim.getSimState](#section19837481195) -- [sim.getSimState](#section1763675061914) -- [sim.getSimGid1](#section18536193963119) -- [sim.getSimGid1](#section14446155983211) -- [SimState](#section17389192625218) - ->**说明：** -> ->标记7+的表示从API Version 7开始支持，未标记的表示从API Version 6开始支持。 - -## 导入模块 - -``` -import sim from '@ohos.telephony.sim'; -``` - -## sim.getSimIccId - -getSimIccId\(slotId: number, callback: AsyncCallback\): void - -获取指定卡槽SIM卡的ICCID（Integrate Circuit Card Identity），使用callback方式作为异步方法。 - -需要ohos.permission.GET\_TELEPHONY\_STATE权限，该权限为系统权限。 - -- 参数 - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

slotId

-

number

-

是

-

卡槽ID。

-

0：卡槽1

-

1：卡槽2

-

callback

-

AsyncCallback<string>

-

是

-

回调函数。

-
- - -- 示例 - - ``` - sim.getSimIccId(0, (err, data) => { - console.log(`callback: err->${JSON.stringify(err)}, data->${JSON.stringify(data)}`); - }); - ``` - - -## sim.getSimIccId - -getSimIccId\(slotId: number\): Promise - -获取指定卡槽SIM卡的ICCID（Integrate Circuit Card Identity），使用Promise方式作为异步方法。 - -需要ohos.permission.GET\_TELEPHONY\_STATE权限，该权限为系统权限。 - -- 参数 - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

slotId

-

number

-

是

-

卡槽ID。

-

0：卡槽1

-

1：卡槽2

-
- -- 返回值 - - - - - - - - - - -

类型

-

说明

-

Promise<string>

-

以Promise形式返回指定卡槽的ICCID。

-
- -- 示例 - - ``` - let promise = sim.getSimIccId(0); - promise.then(data => { - console.log(`getSimIccId success, promise: data->${JSON.stringify(data)}`); - }).catch(err => { - console.log(`getSimIccId fail, promise: err->${JSON.stringify(err)}`); - }); - ``` - -## sim.getDefaultVoiceSlotId7+ - -getDefaultVoiceSlotId\(callback: AsyncCallback\): void7+ - -获取默认语音业务的卡槽ID，使用callback方式作为异步方法。 - -- 参数 - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

callback

-

AsyncCallback<number>

-

是

-

回调函数。

-
- -- 示例 - - ``` - sim.getDefaultVoiceSlotId((err, data) => { - console.log(`callback: err->${JSON.stringify(err)}, data->${JSON.stringify(data)}`); - }); - ``` - - -## sim.getDefaultVoiceSlotId7+ - -getDefaultVoiceSlotId\(\): Promise7+ - -获取默认语音业务的卡槽ID，使用Promise方式作为异步方法。 - -- 返回值 - - - - - - - - - - -

类型

-

说明

-

Promise<number>

-

以Promise形式返回默认语音业务的卡槽ID。

-
- -- 示例 - - ``` - let promise = sim.getDefaultVoiceSlotId(); - promise.then(data => { - console.log(`getDefaultVoiceSlotId success, promise: data->${JSON.stringify(data)}`); - }).catch(err => { - console.log(`getDefaultVoiceSlotId fail, promise: err->${JSON.stringify(err)}`); - }); - ``` - -## sim.getISOCountryCodeForSim - -getISOCountryCodeForSim\(slotId: number, callback: AsyncCallback\): void - -获取指定卡槽SIM卡的ISO国家码，使用callback方式作为异步方法。 - -- 参数 - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

slotId

-

number

-

是

-

卡槽ID。

-

0：卡槽1

-

1：卡槽2

-

callback

-

AsyncCallback<string>

-

是

-

回调函数。返回国家码，例如：CN（中国）。

-
- -- 示例 - - ``` - sim.getISOCountryCodeForSim(0, (err, data) => { - console.log(`callback: err->${JSON.stringify(err)}, data->${JSON.stringify(data)}`); - }); - ``` - - -## sim.getISOCountryCodeForSim - -getISOCountryCodeForSim\(slotId: number\): Promise - -获取指定卡槽SIM卡的ISO国家码，使用Promise方式作为异步方法。 - -- 参数 - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

slotId

-

number

-

是

-

卡槽ID。

-

0：卡槽1

-

1：卡槽2

-
- -- 返回值 - - - - - - - - - - -

类型

-

说明

-

Promise<string>

-

以Promise形式返回获取指定卡槽SIM卡的ISO国家码，例如：CN（中国）。

-
- -- 示例 - - ``` - let promise = sim.getISOCountryCodeForSim(0); - promise.then(data => { - console.log(`getISOCountryCodeForSim success, promise: data->${JSON.stringify(data)}`); - }).catch(err => { - console.log(`getISOCountryCodeForSim fail, promise: err->${JSON.stringify(err)}`); - }); - ``` - - -## sim.getSimOperatorNumeric - -getSimOperatorNumeric\(slotId: number, callback: AsyncCallback\): void - -获取指定卡槽SIM卡的归属PLMN（Public Land Mobile Network）号，使用callback方式作为异步方法。 - -- 参数 - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

slotId

-

number

-

是

-

卡槽ID。

-

0：卡槽1

-

1：卡槽2

-

callback

-

AsyncCallback<string>

-

是

-

回调函数。

-
- -- 示例 - - ``` - sim.getSimOperatorNumeric(0, (err, data) => { - console.log(`callback: err->${JSON.stringify(err)}, data->${JSON.stringify(data)}`); - }); - ``` - - -## sim.getSimOperatorNumeric - -getSimOperatorNumeric\(slotId: number\): Promise - -获取指定卡槽SIM卡的归属PLMN（Public Land Mobile Network）号，使用Promise方式作为异步方法。 - -- 参数 - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

slotId

-

number

-

是

-

卡槽ID。

-

0：卡槽1

-

1：卡槽2

-
- -- 返回值 - - - - - - - - - - -

类型

-

说明

-

Promise<string>

-

以Promise形式返回获取指定卡槽SIM卡的归属PLMN号。

-
- -- 示例 - - ``` - let promise = sim.getSimOperatorNumeric(0); - promise.then(data => { - console.log(`getSimOperatorNumeric success, promise: data->${JSON.stringify(data)}`); - }).catch(err => { - console.log(`getSimOperatorNumeric fail, promise: err->${JSON.stringify(err)}`); - }); - ``` - - -## sim.getSimSpn - -getSimSpn\(slotId: number, callback: AsyncCallback\): void - -获取指定卡槽SIM卡的服务提供商名称（Service Provider Name，SPN），使用callback方式作为异步方法。 - -- 参数 - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

slotId

-

number

-

是

-

卡槽ID。

-

0：卡槽1

-

1：卡槽2

-

callback

-

AsyncCallback<string>

-

是

-

回调函数。

-
- -- 示例 - - ``` - sim.getSimSpn(0, (err, data) => { - console.log(`callback: err->${JSON.stringify(err)}, data->${JSON.stringify(data)}`); - }); - ``` - - -## sim.getSimSpn - -getSimSpn\(slotId: number\): Promise - -获取指定卡槽SIM卡的服务提供商名称（Service Provider Name，SPN），使用Promise方式作为异步方法。 - -- 参数 - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

slotId

-

number

-

是

-

卡槽ID。

-

0：卡槽1

-

1：卡槽2

-
- -- 返回值 - - - - - - - - - - - -

类型

-

说明

-

Promise<string>

-

以Promise形式返回获取指定卡槽SIM卡的SPN。

-
- -- 示例 - - ``` - let promise = sim.getSimSpn(0); - promise.then(data => { - console.log(`getSimSpn success, promise: data->${JSON.stringify(data)}`); - }).catch(err => { - console.log(`getSimSpn fail, promise: err->${JSON.stringify(err)}`); - }); - ``` - - -## sim.getSimState - -getSimState\(slotId: number, callback: AsyncCallback\): void - -获取指定卡槽的SIM卡状态，使用callback方式作为异步方法。 - -- 参数 - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

slotId

-

number

-

是

-

卡槽ID。

-

0：卡槽1

-

1：卡槽2

-

callback

-

AsyncCallback<SimState>

-

是

-

回调函数。参考SimState。

-
- -- 示例 - - ``` - sim.getSimState(0, (err, data) => { - console.log(`callback: err->${JSON.stringify(err)}, data->${JSON.stringify(data)}`); - }); - ``` - - -## sim.getSimState - -getSimState\(slotId: number\): Promise - -获取指定卡槽的SIM卡状态，使用Promise方式作为异步方法。 - -- 参数 - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

slotId

-

number

-

是

-

卡槽ID。

-

0：卡槽1

-

1：卡槽2

-
- -- 返回值 - - - - - - - - - - - -

类型

-

说明

-

Promise<SimState>

-

以Promise形式返回获取指定卡槽的SIM卡状态。

-
- -- 示例 - - ``` - let promise = sim.getSimState(0); - promise.then(data => { - console.log(`getSimState success, promise: data->${JSON.stringify(data)}`); - }).catch(err => { - console.log(`getSimState fail, promise: err->${JSON.stringify(err)}`); - }); - ``` - -## sim.getSimGid1 - -getSimGid1\(slotId: number, callback: AsyncCallback\): void - -获取指定卡槽SIM卡的GID1\(Group Identifier Level 1\)，使用callback方式作为异步方法。 - -需要ohos.permission.GET\_TELEPHONY\_STATE权限，该权限为系统权限。 - -- 参数 - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

slotId

-

number

-

是

-

卡槽ID。

-

0：卡槽1

-

1：卡槽2

-

callback

-

AsyncCallback<string>

-

是

-

回调函数。

-
- -- 示例 - - ``` - sim.getSimGid1(0, (err, data) => { - console.log(`callback: err->${JSON.stringify(err)}, data->${JSON.stringify(data)}`); - }); - ``` - - -## sim.getSimGid1 - -getSimGid1\(slotId: number\): Promise - -获取指定卡槽SIM卡的GID1\(Group Identifier Level 1\)，使用Promise方式作为异步方法。 - -需要ohos.permission.GET\_TELEPHONY\_STATE权限，该权限为系统权限。 - -- 参数 - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

slotId

-

number

-

是

-

卡槽ID。

-

0：卡槽1

-

1：卡槽2

-
- -- 返回值 - - - - - - - - - - - -

类型

-

说明

-

Promise<string>

-

以Promise形式返回获取指定卡槽SIM卡的GID1(Group Identifier Level 1)。

-
- -- 示例 - - ``` - let promise = sim.getSimGid1(0); - promise.then(data => { - console.log(`getSimGid1 success, promise: data->${JSON.stringify(data)}`); - }).catch(err => { - console.log(`getSimGid1 fail, promise: err->${JSON.stringify(err)}`); - }); - ``` - - -## SimState - -SIM卡状态。 - - - - - - - - - - - - - - - - - - - - - - - - - - -

变量

-

说明

-

SIM_STATE_UNKNOWN

-

SIM卡状态未知，即无法获取准确的状态。

-

SIM_STATE_NOT_PRESENT

-

表示SIM卡处于not present状态，即卡槽中没有插入SIM卡。

-

SIM_STATE_LOCKED

-

表示SIM卡处于locked状态，即SIM卡被PIN、PUK或网络锁锁定。

-

SIM_STATE_NOT_READY

-

表示SIM卡处于not ready状态，即SIM卡在位但无法正常工作。

-

SIM_STATE_READY

-

表示SIM卡处于ready状态，即SIM卡在位且工作正常。

-

SIM_STATE_LOADED

-

表示SIM卡处于loaded状态，即SIM卡在位且所有卡文件加载完毕。

-
\ No newline at end of file diff --git a/zh-cn/application-dev/js-reference/apis/Readme-CN.md b/zh-cn/application-dev/js-reference/apis/Readme-CN.md new file mode 100644 index 0000000000000000000000000000000000000000..d74f78a07ee8ae91f3c7c139ff23fc5726c726c5 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/Readme-CN.md @@ -0,0 +1,50 @@ +# 接口 + +- [基本功能](js-apis-basic-features.md) + - [应用上下文](js-apis-system-app.md) + - [日志打印](js-apis-basic-features-logs.md) + - [页面路由](js-apis-system-router.md) + - [弹窗](js-apis-system-prompt.md) + - [应用配置](js-apis-system-configuration.md) + - [定时器](js-apis-system-timer.md) + - [动画](js-apis-animator.md) + - [应用打点](js-apis-hiappevent.md) + - [性能打点](js-apis-bytrace.md) + - [分布式帐号管理](js-apis-distributedaccount.md) + +- [媒体](js-api-multmedia.md) + - [音频管理](js-api-audio.md) + - [音频播放](js-api-media.md) + +- [数据管理](js-apis-data.md) + - [文件管理](js-apis-fileio.md) + - [单版本分布式数据库](js-apis-data-singlekvstore.md) + - [创建和获取分布式数据库](js-apis-data-kvmanager.md) + - [KVManager配置信息](js-apis-data-kvmanager-config.md) + - [分布式数据库操作描述](js-apis-data-kvstore.md) + - [数据类型描述](js-apis-data-type.md) + - [轻量级存储](js-apis-data-storage.md) + +- [设备管理](js-apis-device-mgmt.md) + - [设备信息](js-apis-deviceinfo.md) + - [系统属性](js-apis-systemparameter.md) + - [系统恢复](js-apis-update.md) + - [显示设备属性](js-apis-display.md) + - [电池和充电属性](js-apis-batteryinfo.md) + - [设置系统屏幕亮度](js-apis-brightness.md) + - [系统电源管理](js-apis-power.md) + - [Runninglock锁](js-apis-runninglock.md) + - [传感器](js-apis-sensor.md) + - [振动](js-apis-vibrate.md) + - [国际化（I18n）](js-apis-i18n.md) + - [国际化（Intl）](js-apis-intl.md) + - [资源管理](js-apis-resourcemanage.md) + - [时间设置](js-apis-systemtime.md) + - [升级](js-apis-libupdateclient.md) + - [获取进程相关的信息](js-apis-process.md) + - [字符串编解码](js-apis-util.md) + - [启动一个worker](js-apis-worker.md) + - [URL字符串解析](js-apis-url.md) + + + diff --git "a/zh-cn/application-dev/js-reference/figures/\346\211\223\345\215\260\346\227\245\345\277\227.png" "b/zh-cn/application-dev/js-reference/apis/figures/\346\211\223\345\215\260\346\227\245\345\277\227.png" old mode 100755 new mode 100644 similarity index 100% rename from "zh-cn/application-dev/js-reference/figures/\346\211\223\345\215\260\346\227\245\345\277\227.png" rename to "zh-cn/application-dev/js-reference/apis/figures/\346\211\223\345\215\260\346\227\245\345\277\227.png" diff --git a/zh-cn/application-dev/js-reference/apis/js-api-audio.md b/zh-cn/application-dev/js-reference/apis/js-api-audio.md new file mode 100644 index 0000000000000000000000000000000000000000..a33ad609f1bdbf214dabff3a50eeda0f4e511e57 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-api-audio.md @@ -0,0 +1,2083 @@ +# 音频管理 + +- [导入模块](#zh-cn_topic_0000001149807881_s56d19203690d4782bfc74069abb6bd71) +- [权限](#zh-cn_topic_0000001149807881_section11257113618419) +- [getAudioManager\(\): AudioManager](#zh-cn_topic_0000001149807881_section84581011418) +- [AudioVolumeType](#zh-cn_topic_0000001149807881_section92261857172218) +- [DeviceFlag](#zh-cn_topic_0000001149807881_section11285183164210) +- [DeviceRole](#zh-cn_topic_0000001149807881_section380038142619) +- [DeviceType](#zh-cn_topic_0000001149807881_section11727420122710) +- [AudioRingMode7+](#zh-cn_topic_0000001149807881_section14948916131018) +- [AudioManager](#zh-cn_topic_0000001149807881_section8265143814015) + - [setVolume\(volumeType: AudioVolumeType, volume: number, callback: AsyncCallback\): void](#zh-cn_topic_0000001149807881_section189141826104616) + - [setVolume\(volumeType: AudioVolumeType, volume: number\): Promise](#zh-cn_topic_0000001149807881_section102021249114612) + - [getVolume\(volumeType: AudioVolumeType, callback: AsyncCallback\): void](#zh-cn_topic_0000001149807881_section4387320194714) + - [getVolume\(volumeType: AudioVolumeType\): Promise](#zh-cn_topic_0000001149807881_section04121965119) + - [getMinVolume\(volumeType: AudioVolumeType, callback: AsyncCallback\): void](#zh-cn_topic_0000001149807881_section188714283511) + - [getMinVolume\(volumeType: AudioVolumeType\): Promise](#zh-cn_topic_0000001149807881_section41556389511) + - [getMaxVolume\(volumeType: AudioVolumeType, callback: AsyncCallback\): void](#zh-cn_topic_0000001149807881_section690395418516) + - [getMaxVolume\(volumeType: AudioVolumeType\): Promise](#zh-cn_topic_0000001149807881_section155151345217) + - [mute\(volumeType: AudioVolumeType, mute: boolean, callback: AsyncCallback\): void7+](#zh-cn_topic_0000001149807881_section13516136134613) + - [mute\(volumeType: AudioVolumeType, mute: boolean\): Promise7+](#zh-cn_topic_0000001149807881_section7519036144616) + - [isMute\(volumeType: AudioVolumeType, callback: AsyncCallback\): void7+](#zh-cn_topic_0000001149807881_section10684183819585) + - [isMute\(volumeType: AudioVolumeType\): Promise7+](#zh-cn_topic_0000001149807881_section6920211145610) + - [isActive\(volumeType: AudioVolumeType, callback: AsyncCallback\): void7+](#zh-cn_topic_0000001149807881_section380012544121) + - [isActive\(volumeType: AudioVolumeType\): Promise7+](#zh-cn_topic_0000001149807881_section1880315481216) + - [setRingerMode\(mode: AudioRingMode, callback: AsyncCallback\): void7+](#zh-cn_topic_0000001149807881_section18572131483613) + - [setRingerMode\(mode: AudioRingMode\): Promise7+](#zh-cn_topic_0000001149807881_section55741914143615) + - [getRingerMode\(callback: AsyncCallback\): void7+](#zh-cn_topic_0000001149807881_section149044108162) + - [getRingerMode\(\): Promise7+](#zh-cn_topic_0000001149807881_section13908210101620) + - [setAudioParameter\(key: string, value: string, callback: AsyncCallback\): void7+](#zh-cn_topic_0000001149807881_section1691957174818) + - [setAudioParameter\(key: string, value: string\): Promise7+](#zh-cn_topic_0000001149807881_section18121057174820) + - [getAudioParameter\(key: string, callback: AsyncCallback\): void7+](#zh-cn_topic_0000001149807881_section1415145714812) + - [getAudioParameter\(key: string\): Promise7+](#zh-cn_topic_0000001149807881_section3185577485) + - [getDevices\(deviceFlag: DeviceFlag, callback: AsyncCallback\): void](#zh-cn_topic_0000001149807881_section11536182020523) + - [getDevices\(deviceFlag: DeviceFlag\): Promise](#zh-cn_topic_0000001149807881_section181733125210) + - [setDeviceActive\(deviceType: DeviceType, active: boolean, callback: AsyncCallback\): void7+](#zh-cn_topic_0000001149807881_section103558400222) + - [setDeviceActive\(deviceType: DeviceType, active: boolean\): Promise7+](#zh-cn_topic_0000001149807881_section1235914401228) + - [isDeviceActive\(deviceType: DeviceType, callback: AsyncCallback\): void7+](#zh-cn_topic_0000001149807881_section12363240122219) + - [isDeviceActive\(deviceType: DeviceType\): Promise7+](#zh-cn_topic_0000001149807881_section18366184012213) + - [setMicrophoneMute\(mute: boolean, callback: AsyncCallback\): void7+](#zh-cn_topic_0000001149807881_section14703163618122) + - [setMicrophoneMute\(mute: boolean\): Promise7+](#zh-cn_topic_0000001149807881_section56287111791) + - [isMicrophoneMute\(callback: AsyncCallback\): void7+](#zh-cn_topic_0000001149807881_section6632141119912) + - [isMicrophoneMute\(\): Promise7+](#zh-cn_topic_0000001149807881_section196363111918) + +- [AudioDeviceDescriptor](#zh-cn_topic_0000001149807881_section164657411927) + - [属性](#zh-cn_topic_0000001149807881_section4947115405) + +- [AudioDeviceDescriptors](#zh-cn_topic_0000001149807881_section5181155710523) + +## 导入模块 + +``` +import audio from '@ohos.multimedia.audio'; +``` + +## 权限 + +无 + +## getAudioManager\(\): AudioManager + +获取音频管理器。 + +**返回值：** + + + + + + + + + + +

类型

+

说明

+

AudioManager

+

音频管理类。

+
+ +**示例：** + +``` +var audioManager = audio.getAudioManager(); +``` + +## AudioVolumeType + +枚举，音频流类型。 + + + + + + + + + + + + + + + + +

名称

+

默认值

+

描述

+

RINGTONE

+

2

+

表示铃声。

+

MEDIA

+

3

+

表示媒体。

+
+ +## DeviceFlag + +枚举，可获取的设备种类。 + + + + + + + + + + + + + + + + + + + + +

名称

+

默认值

+

描述

+

OUTPUT_DEVICES_FLAG

+

1

+

表示输出设备种类。

+

INPUT_DEVICES_FLAG

+

2

+

表示输入设备种类。

+

ALL_DEVICES_FLAG

+

3

+

表示所有设备种类。

+
+ +## DeviceRole + +枚举，设备角色。 + + + + + + + + + + + + + + + + +

名称

+

默认值

+

描述

+

INPUT_DEVICE

+

1

+

输入设备角色。

+

OUTPUT_DEVICE

+

2

+

输出设备角色。

+
+ +## DeviceType + +枚举，设备类型。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

默认值

+

描述

+

INVALID

+

0

+

无效设备。

+

SPEAKER

+

1

+

扬声器。

+

WIRED_HEADSET

+

2

+

有线耳机。

+

BLUETOOTH_SCO

+

3

+

SCO（Synchronous Connection Oriented Link）蓝牙设备。

+

BLUETOOTH_A2DP

+

4

+

A2DP（Advanced Audio Distribution Profile ）蓝牙设备。

+

MIC

+

5

+

麦克风。

+
+ +## AudioRingMode7+ + +枚举，铃声模式。 + + + + + + + + + + + + + + + + + + + + +

名称

+

默认值

+

描述

+

RINGER_MODE_SILENT

+

0

+

静音模式

+

RINGER_MODE_VIBRATE

+

1

+

震动模式

+

RINGER_MODE_NORMAL

+

2

+

响铃模式

+
+ +## AudioManager + +管理音频音量和音频设备。 + +### setVolume\(volumeType: AudioVolumeType, volume: number, callback: AsyncCallback\): void + +设置指定流的音量，使用callback方式返回异步结果。 + +**参数：** + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

volumeType

+

AudioVolumeType

+

是

+

音量流类型。

+

volume

+

number

+

是

+

音量等级，可设置范围通过getMinVolume和getMaxVolume获取。

+

callback

+

AsyncCallback<void>

+

是

+

回调表示成功还是失败。

+
+ +**返回值：** + +无 + +**示例：** + +``` +audioManager.setVolume(audio.AudioVolumeType.MEDIA, 10, (err)=>{ + if (err) { + console.error('Failed to set the volume. ${err.message}'); + return; + } + console.log('Callback invoked to indicate a successful volume setting.'); +}) +``` + +### setVolume\(volumeType: AudioVolumeType, volume: number\): Promise + +设置指定流的音量，使用promise方式返回异步结果。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

volumeType

+

AudioVolumeType

+

是

+

音量流类型。

+

volume

+

number

+

是

+

音量等级，可设置范围通过getMinVolume和getMaxVolume获取。

+
+ +**返回值：** + + + + + + + + + + +

类型

+

说明

+

Promise<void>

+

Promise回调表示成功还是失败。

+
+ +**示例：** + +``` +audioManager.setVolume(audio.AudioVolumeType.MEDIA, 10).then(()=> + console.log('Promise returned to indicate a successful volume setting.'); +) +``` + +### getVolume\(volumeType: AudioVolumeType, callback: AsyncCallback\): void + +获取指定流的音量，使用callback方式返回异步结果。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

volumeType

+

AudioVolumeType

+

是

+

音量流类型。

+

callback

+

AsyncCallback<number>

+

是

+

回调返回音量大小。

+
+ +**返回值：** + +无 + +**示例：** + +``` +audioManager.getVolume(audio.AudioVolumeType.MEDIA, (err, value) => { + if (err) { + console.error('Failed to obtain the volume. ${err.message}'); + return; + } + console.log('Callback invoked to indicate that the volume is obtained.'); +}) +``` + +### getVolume\(volumeType: AudioVolumeType\): Promise + +获取指定流的音量，使用promise方式返回异步结果。 + +**参数：** + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

volumeType

+

AudioVolumeType

+

是

+

音量流类型。

+
+ +**返回值：** + + + + + + + + + + +

类型

+

说明

+

Promise<number>

+

Promise回调返回音量大小。

+
+ +**示例：** + +``` +audioManager.getVolume(audio.AudioVolumeType.MEDIA).then((value) => + console.log('Promise returned to indicate that the volume is obtained.' + value); +) +``` + +### getMinVolume\(volumeType: AudioVolumeType, callback: AsyncCallback\): void + +获取指定流的最小音量，使用callback方式返回异步结果。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

volumeType

+

AudioVolumeType

+

是

+

音量流类型。

+

callback

+

AsyncCallback<number>

+

是

+

回调返回最小音量。

+
+ +**返回值：** + +无 + +**示例：** + +``` +audioManager.getMinVolume(audio.AudioVolumeType.MEDIA, (err, value) => { + if (err) { + console.error('Failed to obtain the minimum volume. ${err.message}'); + return; + } + console.log('Callback invoked to indicate that the minimum volume is obtained.' + value); +}) +``` + +### getMinVolume\(volumeType: AudioVolumeType\): Promise + +获取指定流的最小音量，使用promise方式返回异步结果。 + +**参数：** + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

volumeType

+

AudioVolumeType

+

是

+

音量流类型。

+
+ +**返回值：** + + + + + + + + + + +

类型

+

说明

+

Promise<number>

+

Promise回调返回最小音量。

+
+ +**示例：** + +``` +audioManager.getMinVolume(audio.AudioVolumeType.MEDIA).then((value) => + console.log('Promised returned to indicate that the minimum volume is obtained.' + value); +) +``` + +### getMaxVolume\(volumeType: AudioVolumeType, callback: AsyncCallback\): void + +获取指定流的最大音量，使用callback方式返回异步结果。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

volumeType

+

AudioVolumeType

+

是

+

音量流类型。

+

callback

+

AsyncCallback<number>

+

是

+

回调返回最大音量大小。

+
+ +**返回值：** + +无 + +**示例：** + +``` +audioManager.getMaxVolume(audio.AudioVolumeType.MEDIA, (err, value) => { + if (err) { + console.error('Failed to obtain the maximum volume. ${err.message}'); + return; + } + console.log('Callback invoked to indicate that the maximum volume is obtained.' + value); +}) +``` + +### getMaxVolume\(volumeType: AudioVolumeType\): Promise + +获取指定流的最大音量，使用promise方式返回异步结果。 + +**参数：** + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

volumeType

+

AudioVolumeType

+

是

+

音量流类型。

+
+ +**返回值：** + + + + + + + + + + +

类型

+

说明

+

Promise<number>

+

Promise回调返回最大音量大小。

+
+ +**示例：** + +``` +audioManager.getMaxVolume(audio.AudioVolumeType.MEDIA).then((data)=> + console.log('Promised returned to indicate that the maximum volume is obtained.'); +) +``` + +### mute\(volumeType: AudioVolumeType, mute: boolean, callback: AsyncCallback\): void7+ + +设置指定音量流静音，使用callback方式返回异步结果。 + +**参数：** + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

volumeType

+

AudioVolumeType

+

是

+

音量流类型。

+

mute

+

boolean

+

是

+

静音状态，true为静音，false为非静音。

+

callback

+

AsyncCallback<void>

+

是

+

回调表示成功还是失败。

+
+ +**返回值：** + +无 + +**示例：** + +``` +audioManager.mute(audio.AudioVolumeType.MEDIA, true, (err) => { + if (err) { + console.error('Failed to mute the stream. ${err.message}'); + return; + } + console.log('Callback invoked to indicate that the stream is muted.'); +}) +``` + +### mute\(volumeType: AudioVolumeType, mute: boolean\): Promise7+ + +设置指定音量流静音，使用promise方式返回异步结果。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

volumeType

+

AudioVolumeType

+

是

+

音量流类型。

+

mute

+

boolean

+

是

+

静音状态，true为静音，false为非静音。

+
+ +**返回值：** + + + + + + + + + + +

类型

+

说明

+

Promise<void>

+

Promise回调表示成功还是失败。

+
+ +**示例：** + +``` +audioManager.mute(audio.AudioVolumeType.MEDIA, true).then(() => + console.log('Promise returned to indicate that the stream is muted.'); +) +``` + +### isMute\(volumeType: AudioVolumeType, callback: AsyncCallback\): void7+ + +获取指定音量流是否被静音，使用callback方式返回异步结果。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

volumeType

+

AudioVolumeType

+

是

+

音量流类型。

+

callback

+

AsyncCallback<boolean>

+

是

+

回调返回流静音状态，true为静音，false为非静音。

+
+ +**返回值：** + +无 + +**示例：** + +``` +audioManager.isMute(audio.AudioVolumeType.MEDIA, (err, value) => { + if (err) { + console.error('Failed to obtain the mute status. ${err.message}'); + return; + } + console.log('Callback invoked to indicate that the mute status of the stream is obtained.' + value); +}) +``` + +### isMute\(volumeType: AudioVolumeType\): Promise7+ + +获取指定音量流是否被静音，使用promise方式返回异步结果。 + +**参数：** + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

volumeType

+

AudioVolumeType

+

是

+

音量流类型。

+
+ +**返回值：** + + + + + + + + + + +

类型

+

说明

+

Promise<boolean>

+

Promise回调返回流静音状态，true为静音，false为非静音。

+
+ +**示例：** + +``` +audioManager.isMute(audio.AudioVolumeType.MEDIA).then((value) => + console.log('Promise returned to indicate that the mute status of the stream is obtained.' + value); +) +``` + +### isActive\(volumeType: AudioVolumeType, callback: AsyncCallback\): void7+ + +获取指定音量流是否为活跃状态，使用callback方式返回异步结果。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

volumeType

+

AudioVolumeType

+

是

+

音量流类型。

+

callback

+

AsyncCallback<boolean>

+

是

+

回调返回流的活跃状态，true为活跃，false为不活跃。

+
+ +**返回值：** + +无 + +**示例：** + +``` +audioManager.isActive(audio.AudioVolumeType.MEDIA, (err, value) => { + if (err) { + console.error('Failed to obtain the active status of the stream. ${err.message}'); + return; + } + console.log('Callback invoked to indicate that the active status of the stream is obtained.' + value); +}) +``` + +### isActive\(volumeType: AudioVolumeType\): Promise7+ + +获取指定音量流是否为活跃状态，使用promise方式返回异步结果。 + +**参数：** + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

volumeType

+

AudioVolumeType

+

是

+

音量流类型。

+
+ +**返回值：** + + + + + + + + + + +

类型

+

说明

+

Promise<boolean>

+

Promise回调返回流的活跃状态，true为活跃，false为不活跃。

+
+ +**示例：** + +``` +audioManager.isActive(audio.AudioVolumeType.MEDIA).then((value) => + console.log('Promise returned to indicate that the active status of the stream is obtained.' + value); +) +``` + +### setRingerMode\(mode: AudioRingMode, callback: AsyncCallback\): void7+ + +设置铃声模式，使用callback方式返回异步结果。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

mode

+

AudioRingMode

+

是

+

音频铃声模式。

+

callback

+

AsyncCallback<void>

+

是

+

回调返回设置成功或失败。

+
+ +**返回值：** + +无 + +**示例：** + +``` +audioManager.setRingerMode(audio.AudioRingMode.RINGER_MODE_NORMAL, (err) => { + if (err) { + console.error('Failed to set the ringer mode.​ ${err.message}'); + return; + } + console.log('Callback invoked to indicate a successful setting of the ringer mode.'); +}) +``` + +### setRingerMode\(mode: AudioRingMode\): Promise7+ + +设置铃声模式，使用promise方式返回异步结果。 + +**参数：** + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

mode

+

AudioRingMode

+

是

+

音频铃声模式。

+
+ +**返回值：** + + + + + + + + + + +

类型

+

说明

+

Promise<void>

+

Promise回调返回设置成功或失败。

+
+ +**示例：** + +``` +audioManager.setRingerMode(audio.AudioRingMode.RINGER_MODE_NORMAL).then(() => + console.log('Promise returned to indicate a successful setting of the ringer mode.'); +) +``` + +### getRingerMode\(callback: AsyncCallback\): void7+ + +获取铃声模式，使用callback方式返回异步结果。 + +**参数：** + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

callback

+

AsyncCallback<AudioRingMode>

+

是

+

回调返回系统的铃声模式。

+
+ +**返回值：** + +无 + +**示例：** + +``` +audioManager.getRingerMode((err, value) => { + if (err) { + console.error('Failed to obtain the ringer mode.​ ${err.message}'); + return; + } + console.log('Callback invoked to indicate that the ringer mode is obtained.' + value); +}) +``` + +### getRingerMode\(\): Promise7+ + +获取铃声模式，使用promise方式返回异步结果。 + +**参数：** + +无 + +**返回值：** + + + + + + + + + + +

类型

+

说明

+

Promise<AudioRingMode>

+

Promise回调返回系统的铃声模式。

+
+ +**示例：** + +``` +audioManager.getRingerMode().then((value) => + console.log('Promise returned to indicate that the ringer mode is obtained.' + value); +) +``` + +### setAudioParameter\(key: string, value: string, callback: AsyncCallback\): void7+ + +音频参数设置，使用callback方式返回异步结果。 + +**参数：** + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

key

+

string

+

是

+

被设置的音频参数的键。

+

value

+

string

+

是

+

被设置的音频参数的值。

+

callback

+

AsyncCallback<void>

+

是

+

回调返回设置成功或失败。

+
+ +**返回值：** + +无 + +**示例：** + +``` +audioManager.setAudioParameter('PBits per sample', '8 bit', (err) => { + if (err) { + console.error('Failed to set the audio parameter. ${err.message}'); + return; + } + console.log('Callback invoked to indicate a successful setting of the audio parameter.'); +}) +``` + +### setAudioParameter\(key: string, value: string\): Promise7+ + +音频参数设置，使用promise方式返回异步结果。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

key

+

string

+

是

+

被设置的音频参数的键。

+

value

+

string

+

是

+

被设置的音频参数的值。

+
+ +**返回值：** + + + + + + + + + + +

类型

+

说明

+

Promise<void>

+

Promise回调返回设置成功或失败。

+
+ +**示例：** + +``` +audioManager.setAudioParameter('PBits per sample', '8 bit').then(() => + console.log('Promise returned to indicate a successful setting of the audio parameter.'); +) +``` + +### getAudioParameter\(key: string, callback: AsyncCallback\): void7+ + +获取指定音频参数值，使用callback方式返回异步结果。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

key

+

string

+

是

+

待获取的音频参数的键。

+

callback

+

AsyncCallback<string>

+

是

+

回调返回获取的音频参数的值。

+
+ +**返回值：** + +无 + +**示例：** + +``` +audioManager.getAudioParameter('PBits per sample', (err, value) => { + if (err) { + console.error('Failed to obtain the value of the audio parameter. ${err.message}'); + return; + } + console.log('Callback invoked to indicate that the value of the audio parameter is obtained.' + value); +}) +``` + +### getAudioParameter\(key: string\): Promise7+ + +获取指定音频参数值，使用promise方式返回异步结果。 + +**参数：** + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

key

+

string

+

是

+

待获取的音频参数的键。

+
+ +**返回值：** + + + + + + + + + + +

类型

+

说明

+

Promise<string>

+

Promise回调返回获取的音频参数的值。

+
+ +**示例：** + +``` +audioManager.getAudioParameter('PBits per sample').then((value) => + console.log('Promise returned to indicate that the value of the audio parameter is obtained.' + value); +) +``` + +### getDevices\(deviceFlag: DeviceFlag, callback: AsyncCallback\): void + +获取音频设备列表，使用callback方式返回异步结果。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

deviceFlag

+

DeviceFlag

+

是

+

设备类型的flag。

+

callback

+

AsyncCallback<AudioDeviceDescriptors>

+

是

+

回调，返回设备列表。

+
+ +**返回值：** + +无 + +**示例：** + +``` +audioManager.getDevices(audio.DeviceFlag.OUTPUT_DEVICES_FLAG, (err, value)=>{ + if (err) { + console.error('Failed to obtain the device list. ${err.message}'); + return; + } + console.log('Callback invoked to indicate that the device list is obtained.'); +}) +``` + +### getDevices\(deviceFlag: DeviceFlag\): Promise + +获取音频设备列表，使用promise方式返回异步结果。 + +**参数：** + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

deviceFlag

+

DeviceFlag

+

是

+

设备类型的flag。

+
+ +**返回值：** + + + + + + + + + + +

类型

+

说明

+

Promise<AudioDeviceDescriptors>

+

Promise回调返回设备列表。

+
+ +**示例：** + +``` +audioManager.getDevices(audio.DeviceFlag.OUTPUT_DEVICES_FLAG).then((data)=> + console.log('Promise returned to indicate that the device list is obtained.'); +) +``` + +### setDeviceActive\(deviceType: DeviceType, active: boolean, callback: AsyncCallback\): void7+ + +设置设备激活状态，使用callback方式返回异步结果。 + +**参数：** + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

deviceType

+

DeviceType

+

是

+

音频设备类型。

+

active

+

boolean

+

是

+

设备激活状态。

+

callback

+

AsyncCallback<void>

+

是

+

回调返回设置成功或失败。

+
+ +**返回值：** + +无 + +**示例：** + +``` +audioManager.setDeviceActive(audio.DeviceType.SPEAKER, true, (err)=> { + if (err) { + console.error('Failed to set the active status of the device. ${err.message}'); + return; + } + console.log('Callback invoked to indicate that the device is set to the active status.'); +}) +``` + +### setDeviceActive\(deviceType: DeviceType, active: boolean\): Promise7+ + +设置设备激活状态，使用promise方式返回异步结果。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

deviceType

+

DeviceType

+

是

+

音频设备类型。

+

active

+

boolean

+

是

+

设备激活状态。

+
+ +**返回值：** + + + + + + + + + + +

类型

+

说明

+

Promise<void>

+

Promise回调返回设置成功或失败。

+
+ +**示例：** + +``` +audioManager.setDeviceActive(audio.DeviceType.SPEAKER, true).then(()=> + console.log('Promise returned to indicate that the device is set to the active status.'); +) +``` + +### isDeviceActive\(deviceType: DeviceType, callback: AsyncCallback\): void7+ + +获取指定设备激活状态，使用callback方式返回异步结果。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

deviceType

+

DeviceType

+

是

+

音频设备类型。

+

callback

+

AsyncCallback<boolean>

+

是

+

回调返回设备的激活状态。

+
+ +**返回值：** + +无 + +**示例：** + +``` +audioManager.isDeviceActive(audio.DeviceType.SPEAKER, (err, value) => { + if (err) { + console.error('Failed to obtain the active status of the device. ${err.message}'); + return; + } + console.log('Callback invoked to indicate that the active status of the device is obtained.'); +}) +``` + +### isDeviceActive\(deviceType: DeviceType\): Promise7+ + +获取指定设备激活状态，使用promise方式返回异步结果。 + +**参数：** + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

deviceType

+

DeviceType

+

是

+

音频设备类型。

+
+ +**返回值：** + + + + + + + + + + +

Type

+

Description

+

Promise<boolean>

+

Promise回调返回设备的激活状态。

+
+ +**示例：** + +``` +audioManager.isDeviceActive(audio.DeviceType.SPEAKER).then((value) => + console.log('Promise returned to indicate that the active status of the device is obtained.' + value); +) +``` + +### setMicrophoneMute\(mute: boolean, callback: AsyncCallback\): void7+ + +设置麦克风静音状态，使用callback方式返回异步结果。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

mute

+

boolean

+

是

+

待设置的静音状态，true为静音，false为非静音。

+

callback

+

AsyncCallback<void>

+

是

+

回调返回设置成功或失败。

+
+ +**返回值：** + +无 + +**示例：** + +``` +audioManager.setMicrophoneMute(true, (err) => { + if (err) { + console.error('Failed to mute the microphone. ${err.message}'); + return; + } + console.log('Callback invoked to indicate that the microphone is muted.'); +}) +``` + +### setMicrophoneMute\(mute: boolean\): Promise7+ + +设置麦克风静音状态，使用promise方式返回异步结果。 + +**参数：** + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

mute

+

boolean

+

是

+

待设置的静音状态，true为静音，false为非静音。

+
+ +**返回值：** + + + + + + + + + + +

类型

+

说明

+

Promise<void>

+

Promise回调返回设置成功或失败。

+
+ +**示例：** + +``` +audioManager.setMicrophoneMute(true).then(() => + console.log('Promise returned to indicate that the microphone is muted.'); +) +``` + +### isMicrophoneMute\(callback: AsyncCallback\): void7+ + +获取麦克风静音状态，使用callback方式返回异步结果。 + +**参数：** + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

callback

+

AsyncCallback<boolean>

+

是

+

回调返回系统麦克风静音状态，true为静音，false为非静音。

+
+ +**返回值：** + +无 + +**示例：** + +``` +audioManager.isMicrophoneMute((err, value) => { + if (err) { + console.error('Failed to obtain the mute status of the microphone. ${err.message}'); + return; + } + console.log('Callback invoked to indicate that the mute status of the microphone is obtained.' + value); +}) +``` + +### isMicrophoneMute\(\): Promise7+ + +获取麦克风静音状态，使用promise方式返回异步结果。 + +**参数：** + +无 + +**返回值：** + + + + + + + + + + +

类型

+

说明

+

Promise<boolean>

+

Promise回调返回系统麦克风静音状态，true为静音，false为非静音。

+
+ +**示例：** + +``` +audioManager.isMicrophoneMute().then((value) => + console.log('Promise returned to indicate that the mute status of the microphone is obtained.', + value); +) +``` + +## AudioDeviceDescriptor + +描述音频设备。 + +### 属性 + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数型

+

可读

+

可写

+

说明

+

deviceRole

+

DeviceRole

+

是

+

否

+

设备角色。

+

deviceType

+

DeviceType

+

是

+

否

+

设备类型。

+
+ +## AudioDeviceDescriptors + + + + + + + + + + +

名称

+

描述

+

设备属性数组

+

AudioDeviceDescriptor的数组，只读。

+
+ diff --git a/zh-cn/application-dev/js-reference/apis/js-api-media.md b/zh-cn/application-dev/js-reference/apis/js-api-media.md new file mode 100644 index 0000000000000000000000000000000000000000..28b33359ccf7363788614c2435a5a2593bbf2ea7 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-api-media.md @@ -0,0 +1,637 @@ +# 音频播放 + +- [导入模块](#zh-cn_topic_0000001103383404_s56d19203690d4782bfc74069abb6bd71) +- [权限](#zh-cn_topic_0000001103383404_section11257113618419) +- [createAudioPlayer\(\)](#zh-cn_topic_0000001103383404_section582314017253) +- [AudioPlayer](#zh-cn_topic_0000001103383404_section5174142818365) + - [属性](#zh-cn_topic_0000001103383404_section4947115405) + - [play\(\): void](#zh-cn_topic_0000001103383404_section964512672913) + - [pause\(\): void](#zh-cn_topic_0000001103383404_section78173258296) + - [stop\(\): void](#zh-cn_topic_0000001103383404_section122114334296) + - [seek\(timeMs: number\): void](#zh-cn_topic_0000001103383404_section1387113816298) + - [setVolume\(vol: number\): void](#zh-cn_topic_0000001103383404_section164235176552) + - [reset\(\): void7+](#zh-cn_topic_0000001103383404_section1473283011356) + - [release\(\): void](#zh-cn_topic_0000001103383404_section9224621145512) + - [on\(type: string, callback: \(\) =\> void\): void](#zh-cn_topic_0000001103383404_section4486193914193) + - [on\(type: string, callback: Callback\): void](#zh-cn_topic_0000001103383404_section632591014157) + - [on\(type: string, callback: ErrorCallback\): void](#zh-cn_topic_0000001103383404_section92241852949) + - [事件](#zh-cn_topic_0000001103383404_section1825183472812) + +- [AudioState](#zh-cn_topic_0000001103383404_section5181155710523) + +## 导入模块 + +``` +import media from '@ohos.multimedia.media'; +``` + +## 权限 + +无 + +## createAudioPlayer\(\) + +创建音频播放的实例。 + +- 参数： + + 无 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

AudioPlayer

+

返回AudioPlayer类实例，失败时返回null。

+
+ +**示例：** + +``` +var audioplayer = media.createAudioPlayer(); +``` + +## AudioPlayer + +音频播放管理类，用于管理和播放音频媒体。在调用AudioPlayer的方法前，需要先通过[createAudioPlayer\(\)](#zh-cn_topic_0000001103383404_section582314017253)构建一个AudioPlayer实例。 + +### 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

src

+

string

+

是

+

是

+

音频媒体URI，支持当前主流的音频格式(mp4、aac、mp3、ogg)，支持本地绝对路径（file://)

+

loop

+

boolean

+

是

+

是

+

音频循环播放属性，设置为'true'表示循环播放。

+

currentTime

+

number

+

是

+

否

+

音频的当前播放阶段。

+

duration

+

number

+

是

+

否

+

音频播放的时长。

+

state

+

AudioState

+

是

+

否

+

音频播放的状态。

+
+ +### play\(\): void + +开始播放音频资源。 + +- 参数： + + 无 + +- 返回值： + + 无 + +- 示例： + + ``` + audioplayer.src = 'file://xxx/sounds.mp4'; + audioplayer.on('play', () => { + console.log('Playback starts.'); + audioplayer.pause(); + }); + audioplayer.play(); + ``` + + +### pause\(\): void + +暂停播放音频资源。 + +- 参数： + + 无 + +- 返回值： + + 无 + +- 示例： + + ``` + audioplayer.src = 'file://xxx/sounds.mp4'; + audioplayer.on('pause', () => { + console.log('Playback paused.'); + }); + audioplayer.pause(); + ``` + + +### stop\(\): void + +停止播放音频资源。 + +- 参数： + + 无 + +- 返回值： + + 无 + +- 示例： + + ``` + audioplayer.src = 'file://xxx/sounds.mp4'; + audioplayer.on('stop',() => { + console.log('Playback stopped.'); + }); + audioplayer.stop(); + ``` + + +### seek\(timeMs: number\): void + +跳转到指定播放位置。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

timeMs

+

number

+

是

+

指定的跳转时间节点。

+
+ +- 返回值： + + 无 + +- 示例： + + ``` + audioplayer.src = 'file://xxx/sounds.mp4'; + audioplayer.on('timeupdate', (action) => { + var newTime = audioplayer.currenTime; + if(newTime >= 30000) { + console.info('Seek succeeded. New time: ' + newTime); + } else { + console.info('Seek failed.'); + } + }); + audioplayer.seek(30000); + ``` + + +### setVolume\(vol: number\): void + +设置音量。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

vol

+

number

+

是

+

指定的相对音量大小，取值范围为[0.00-1.00]，1表示最大音量，即100%。

+
+ +- 返回值： + + 无 + +- 示例： + + ``` + audioplayer.src = 'file://xxx/sounds.mp4'; + audioplayer.on('volumeChange', () => { + console.log('Playback volume changed.'); + }); + audioplayer.setVolume(1); + ``` + + +### reset\(\): void7+ + +切换播放音频资源。 + +- 参数： + + 无 + +- 返回值： + + 无 + +- 示例： + + ``` + audioplay.reset(); + ``` + + +### release\(\): void + +释放音频资源。 + +- 参数： + + 无 + +- 返回值： + + 无 + +- 示例： + +``` +audioplay.release(); +``` + +### on\(type: string, callback: \(\) =\> void\): void + +开始监听音频播放事件。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

string

+

是

+

播放事件回调类型，支持的事件包括：'play' | 'pause' | 'stop' | 'dataLoad' |'reset'| |'finish' | 'volumeChange'。

+

callback

+

()=>void

+

是

+

播放事件回调方法。

+
+ +- 返回值： + + 无 + +- 示例： + + ``` + audioplayer.src = 'file://xxx/sounds.mp4'; + audioplayer.on('play', () => { + console.log('Playback starts.'); + }); + audioplayer.play(); + ``` + + +### on\(type: string, callback: Callback\): void + +开始监听音频播放时间戳更新事件。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

string

+

是

+

播放事件回调类型，支持的事件为：'timeUpdate'。

+

callback

+

Callback<number>

+

是

+

播放事件回调方法。

+
+ +- 返回值： + + 无 + +- 示例： + + ``` + audioplayer.src = 'file://xxx/sounds.mp4'; + audioplayer.on('timeupdate', (action) => { + var newTime = audioplayer.currenTime; + if(newTime >= 30000) { + console.info('Seek succeeded. New time: ' + newTime); + } else { + console.info('Seek failed.'); + } + }); + audioplayer.seek(30000); + ``` + + +### on\(type: string, callback: ErrorCallback\): void + +开始监听音频播放错误事件。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

string

+

是

+

播放错误事件回调类型'error'。

+

callback

+

ErrorCallback

+

是

+

播放错误事件回调方法。

+
+ +- 返回值： + + 无 + +- 示例： + + ``` + audioplayer.src = 'file:///xxx/sounds.mp4'; + audioplayer.on('error', (err) => { + console.info('error callback info: ' + err); + }); + audioplayer.setVolume(30000); + ``` + + +### 事件 + +AudioPlayer支持订阅以下事件。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

play

+

-

+

完成play方法调用，音频开始播放，触发该事件。

+

pause

+

-

+

完成pause方法调用，音频暂停播放，触发该事件。

+

stop

+

-

+

完成stop方法调用，音频停止播放，触发该事件。

+

reset

+

-

+

完成reset方法调用，释放音频播放资源，触发该事件。

+

dataLoad

+

-

+

完成音频数据加载后触发该事件。

+

finish

+

-

+

完成音频播放后触发该事件。

+

volumeChange

+

-

+

播放音量改变后触发该事件。

+

timeUpdate

+

-

+

完成seek方法调用，音频播放时间戳更新，触发该事件。

+

error

+

callback

+

音频播放中发生错误，触发该事件。

+
+ +**表 1** error事件的参数说明 + + + + + + + + + + + + +

参数名

+

类型

+

说明

+

callback

+

ErrorCallback

+

错误事件的回调函数。

+
+ +## AudioState + +音频播放的状态机。 + + + + + + + + + + + + + + + + + + + +

名称

+

描述

+

idle

+

音频播放空闲。

+

playing

+

音频正在播放。

+

paused

+

音频暂停播放。

+

stopped

+

音频播放停止。

+
+ diff --git a/zh-cn/application-dev/js-reference/apis/js-api-multmedia.md b/zh-cn/application-dev/js-reference/apis/js-api-multmedia.md new file mode 100644 index 0000000000000000000000000000000000000000..acea0c646896937d2914d6e4ece10f7561e801c7 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-api-multmedia.md @@ -0,0 +1,7 @@ +# 媒体 + +- **[音频管理](js-api-audio.md)** + +- **[音频播放](js-api-media.md)** + + diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-animator.md b/zh-cn/application-dev/js-reference/apis/js-apis-animator.md new file mode 100644 index 0000000000000000000000000000000000000000..c1e6b64fd262c9701d72727ed5c06829ea6c44d6 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-animator.md @@ -0,0 +1,435 @@ +# 动画 + +- [导入模块](#zh-cn_topic_0000001127125026_s0e7b1e85a4274f58a8206e0b065bd80c) +- [权限列表](#zh-cn_topic_0000001127125026_section11257113618419) +- [requestAnimationFrame](#zh-cn_topic_0000001127125026_s298a3cf59a3b470dbb0742706102ced7) +- [cancelAnimationFrame](#zh-cn_topic_0000001127125026_section114651915245) +- [createAnimator](#zh-cn_topic_0000001127125026_section333714110229) + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 6 开始支持。 + +## 导入模块 + +requestAnimationFrame：无需导入 + +cancelAnimationFrame：无需导入 + +createAnimator： + +``` +import animator from '@ohos.animator'; +``` + +## 权限列表 + +无 + +## requestAnimationFrame + +requestAnimationFrame\(handler\[, \[ ...args\]\]\): number + +请求动画帧，逐帧回调JS函数。 + +- 参数 + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

handler

+

Function

+

是

+

表示要逐帧回调的函数。requestAnimationFrame函数回调handler函数时会在第一个参数位置传入timestamp时间戳。它表示requestAnimationFrame开始去执行回调函数的时刻。

+

...args

+

Array<any>

+

否

+

附加参数，函数回调时，他们会作为参数传递给handler。

+
+ +- 返回值 + + + + + + + + + + +

类型

+

说明

+

number

+

requestID请求的ID。

+
+ +- 示例 + + ``` + data: { + requestId: 0, + startTime: 0, + }, + beginAnimation() { + cancelAnimationFrame(this.requestId); + this.requestId = requestAnimationFrame(this.runAnimation); + }, + runAnimation(timestamp) { + if (this.startTime == 0) { + this.startTime = timestamp; + } + var elapsed = timestamp - this.startTime; + if (elapsed < 500) { + console.log('callback handler timestamp: ' + timestamp); + this.requestId = requestAnimationFrame(this.runAnimation); + } + } + ``` + + +## cancelAnimationFrame + +cancelAnimationFrame\(requestId: number\): void + +取消动画帧，取消逐帧回调请求。 + +- 参数 + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

requestId

+

number

+

是

+

逐帧回调函数的标识id。

+
+ +- 示例 + + ``` + data: { + requestId: 0, + startTime: 0, + }, + beginAnimation() { + cancelAnimationFrame(this.requestId); + this.requestId = requestAnimationFrame(this.runAnimation); + }, + runAnimation(timestamp) { + if (this.startTime == 0) { + this.startTime = timestamp; + } + var elapsed = timestamp - this.startTime; + if (elapsed < 500) { + console.log('callback handler timestamp: ' + timestamp); + this.requestId = requestAnimationFrame(this.runAnimation); + } + }, + stopAnimation() { + cancelAnimationFrame(this.requestId); + } + ``` + + +## createAnimator + +createAnimator\(options\[...\]\): void + +创建动画对象。 + +- 参数 + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

options

+

Object

+

是

+

表示待创建Animator对象的属性，详情见下表options说明。

+
+ +- options说明 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

duration

+

number

+

否

+

动画播放的时长，单位毫秒，默认为0。

+

easing

+

string

+

否

+

动画插值曲线，默认为' ease '。

+

delay

+

number

+

否

+

动画延时播放时长，单位毫秒，默认为0，即不延时。

+

fill

+

string

+

否

+

动画启停模式，默认值none，详情见：animation-fill-mode

+

direction

+

string

+

否

+

动画播放模式，默认值normal，详情见：animation-direction

+

iterations

+

number

+

否

+

动画播放次数，默认值1，设置为0时不播放，设置为-1时无限次播放。

+

begin

+

number

+

否

+

动画插值起点，不设置时默认为0。

+

end

+

number

+

否

+

动画插值终点，不设置时默认为1。

+
+ +- animator支持的接口 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

说明

+

update

+

options

+

过程中可以使用这个接口更新动画参数，入参与createAnimator一致。

+

play

+

-

+

开始动画。

+

finish

+

-

+

结束动画。

+

pause

+

-

+

暂停动画。

+

cancel

+

-

+

取消动画。

+

reverse

+

-

+

倒播动画。

+
+ + +- animator支持的事件： + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

说明

+

frame

+

number

+

逐帧插值回调事件，入参为当前帧的插值

+

cancel

+

-

+

动画被强制取消

+

finish

+

-

+

动画播放完成

+

repeat

+

-

+

动画重新播放

+
+ +- 示例 + + ``` + +
+
+
+
+ ``` + + ``` + // js + import Animator from "@ohos.animator"; + export default { + data : { + divWidth: 200, + divHeight: 200, + animator: null + }, + onInit() { + var options = { + duration: 1500, + easing: 'friction', + fill: 'forwards', + iterations: 2, + begin: 200.0, + end: 400.0 + }; + this.animator = Animator.createAnimator(options); + }, + Show() { + var options1 = { + duration: 2000, + easing: 'friction', + fill: 'forwards', + iterations: 1, + begin: 200.0, + end: 400.0 + }; + this.animator.update(options1); + var _this = this; + this.animator.onframe = function(value) { + _this.divWidth = value; + _this.divHeight = value; + }; + this.animator.play(); + } + } + ``` + + diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-logs.md b/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-logs.md new file mode 100644 index 0000000000000000000000000000000000000000..3de7df438d7a930578fc2f61fa3b0e9cdcc87f84 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-logs.md @@ -0,0 +1,195 @@ +# 日志打印 + +- [导入模块](#zh-cn_topic_0000001127284842_s56d19203690d4782bfc74069abb6bd71) +- [权限列表](#zh-cn_topic_0000001127284842_section11257113618419) +- [console.debug](#zh-cn_topic_0000001127284842_s298a3cf59a3b470dbb0742706102ced7) +- [console.log](#zh-cn_topic_0000001127284842_section146351482051) +- [console.info](#zh-cn_topic_0000001127284842_section93434457711) +- [console.warn](#zh-cn_topic_0000001127284842_section1363520541678) +- [console.error](#zh-cn_topic_0000001127284842_section326012551578) +- [示例](#zh-cn_topic_0000001127284842_section738673813104) + +## 导入模块 + +无需导入。 + +## 权限列表 + +无 + +## console.debug + +debug\(message: string\): void + +打印debug级别的日志信息。 + +- 参数 + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

message

+

string

+

是

+

表示要打印的文本信息。

+
+ + +## console.log + +log\(message: string\): void + +打印log级别的日志信息。 + +- 参数 + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

message

+

string

+

是

+

表示要打印的文本信息。

+
+ + >![](../../public_sys-resources/icon-note.gif) **说明：** + >console.log\(\)打印的是debug级别日志信息。 + + +## console.info + +info\(message: string\): void + +打印info级别的日志信息。 + +- 参数 + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

message

+

string

+

是

+

表示要打印的文本信息。

+
+ + +## console.warn + +warn\(message: string\): void + +打印warn级别的日志信息。 + +- 参数 + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

message

+

string

+

是

+

表示要打印的文本信息。

+
+ + +## console.error + +error\(message: string\): void + +打印error级别的日志信息。 + +- 参数 + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

message

+

string

+

是

+

表示要打印的文本信息。

+
+ + +## 示例 + +``` +var versionCode = 1; +console.info('Hello World. The current version code is ' + versionCode); +console.log(`versionCode: ${versionCode}`) +console.log('versionCode:%d.', versionCode);6+ +``` + +在DevEco Studio的底部，切换到“HiLog”窗口。选择当前的设备及进程，日志级别选择Info，搜索内容设置为“Hello World”。此时窗口仅显示符合条件的日志，效果如图所示： + +![](figures/打印日志.png) + diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-basic-features.md b/zh-cn/application-dev/js-reference/apis/js-apis-basic-features.md new file mode 100644 index 0000000000000000000000000000000000000000..e18a036a49a1b98a2418616f2b0b7a5050cea455 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-basic-features.md @@ -0,0 +1,23 @@ +# 基本功能 + +- **[应用上下文](js-apis-system-app.md)** + +- **[日志打印](js-apis-basic-features-logs.md)** + +- **[页面路由](js-apis-system-router.md)** + +- **[弹窗](js-apis-system-prompt.md)** + +- **[应用配置](js-apis-system-configuration.md)** + +- **[定时器](js-apis-system-timer.md)** + +- **[动画](js-apis-animator.md)** + +- **[应用打点](js-apis-hiappevent.md)** + +- **[性能打点](js-apis-bytrace.md)** + +- **[分布式帐号管理](js-apis-distributedaccount.md)** + + diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-batteryinfo.md b/zh-cn/application-dev/js-reference/apis/js-apis-batteryinfo.md new file mode 100644 index 0000000000000000000000000000000000000000..58bafe703f6d2789f8baeb0cbc61a2a1d61a0885 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-batteryinfo.md @@ -0,0 +1,251 @@ +# 电池和充电属性 + +- [导入模块](#zh-cn_topic_0000001164127376_section199443271307) +- [batteryInfo](#zh-cn_topic_0000001164127376_section0536924123914) +- [BatteryPluggedType](#zh-cn_topic_0000001164127376_section1861134715488) +- [BatteryChargeState](#zh-cn_topic_0000001164127376_section629045815408) +- [BatteryHealthState](#zh-cn_topic_0000001164127376_section1636311513419) + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从 API Version 6 开始支持。 + +## 导入模块 + +``` +import batteryInfo from '@ohos.batteryinfo'; +``` + +## batteryInfo + +描述电池信息。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

读写属性

+

类型

+

描述

+

batterySOC

+

只读

+

number

+

表示当前设备剩余电池容量。

+

chargingStatus

+

只读

+

BatteryChargeState

+

表示当前设备电池的充电状态。

+

healthStatus

+

只读

+

BatteryHealthState

+

表示当前设备电池的健康状态。

+

pluggedType

+

只读

+

BatteryPluggedType

+

表示当前设备连接的充电器类型。

+

voltage

+

只读

+

number

+

表示当前设备电池的电压。

+

technology

+

只读

+

string

+

表示当前设备电池的技术型号。

+

batteryTemperature

+

只读

+

number

+

表示当前设备电池的温度。

+
+ +**示例**： + +``` +import batteryInfo from '@ohos.batteryInfo'; +var batterySoc = batteryInfo.batterySOC; +``` + +## BatteryPluggedType + +表示连接的充电器类型的枚举。 + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

默认值

+

描述

+

NONE

+

0

+

表示连接充电器类型未知。

+

AC

+

1

+

表示连接的充电器类型为交流充电器。

+

USB

+

2

+

表示连接的充电器类型为USB。

+

WIRELESS

+

3

+

表示连接的充电器类型为无线充电器。

+
+ +## BatteryChargeState + +表示电池充电状态的枚举。 + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

默认值

+

描述

+

NONE

+

0

+

表示电池充电状态未知。

+

ENABLE

+

1

+

表示电池充电状态为使能状态。

+

DISABLE

+

2

+

表示电池充电状态为停止状态。

+

FULL

+

3

+

表示电池充电状态为已充满状态。

+
+ +## BatteryHealthState + +表示电池的健康状态的枚举。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

默认值

+

描述

+

UNKNOWN

+

0

+

表示电池健康状态未知。

+

GOOD

+

1

+

表示电池健康状态为正常。

+

OVERHEAT

+

2

+

表示电池健康状态为过热。

+

OVERVOLTAGE

+

3

+

表示电池健康状态为过压。

+

COLD

+

4

+

表示电池健康状态为低温。

+

DEAD

+

5

+

表示电池健康状态为僵死状态。

+
+ diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-brightness.md b/zh-cn/application-dev/js-reference/apis/js-apis-brightness.md new file mode 100644 index 0000000000000000000000000000000000000000..e8f04a6f71b2454368efc722bcbc76e66c27ec2b --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-brightness.md @@ -0,0 +1,53 @@ +# 设置系统屏幕亮度 + +- [导入模块](#zh-cn_topic_0000001163808920_s56d19203690d4782bfc74069abb6bd71) +- [brightness.setValue](#zh-cn_topic_0000001163808920_section1853612361618) + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从 API Version 7 开始支持。 + +## 导入模块 + +``` +import brightness from '@ohos.brightness.d.ts'. +``` + +## brightness.setValue + +setValue\(value: number\) + +设置系统的屏幕亮度。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

value

+

number

+

是

+

亮度的值（0~255）

+
+ +- 示例： + + ``` + import brightness from '@ohos.brightness.d.ts' + brightness.setValue(128); + ``` + + diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-bytrace.md b/zh-cn/application-dev/js-reference/apis/js-apis-bytrace.md new file mode 100644 index 0000000000000000000000000000000000000000..e24428644d6139938a408b579b6a8c13551c3c64 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-bytrace.md @@ -0,0 +1,182 @@ +# 性能打点 + +- [导入模块](#zh-cn_topic_0000001209019195_s56d19203690d4782bfc74069abb6bd71) +- [权限](#zh-cn_topic_0000001209019195_section11257113618419) +- [bytrace.startTrace](#zh-cn_topic_0000001209019195_section785191510485) +- [bytrace.finishTrace](#zh-cn_topic_0000001209019195_section7895134841213) +- [bytrace.traceByValue](#zh-cn_topic_0000001209019195_section1388414179173) + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从 API Version 7 开始支持。 + +## 导入模块 + +``` +import bytrace from '@ohos.bytrace'; +``` + +## 权限 + +无 + +## bytrace.startTrace + +startTrace\(name: string, taskId: number, expectedTime?: number\): void + +标记一个预追踪耗时任务的开始，expectedTime是可选参数，标识该任务的期望耗时。 + +- 参数： + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

name

+

string

+

是

+

要追踪的任务名称

+

taskId

+

number

+

是

+

任务id

+

expectedTime

+

number

+

否

+

期望的耗时时间，单位：ms

+
+ + >![](../../public_sys-resources/icon-note.gif) **说明：** + >如果多个要追踪任务的name相同，taskId必须不一致。通过name和taskId来唯一标识一个任务。 + +- 示例： + + ``` + bytrace.startTrace("myTestFunc", 1); + bytrace.startTrace("myTestFunc", 1, 5); //从startTrace到finishTrace流程的耗时期望为5ms + ``` + + +## bytrace.finishTrace + +finishTrace\(name: string, taskId: number\): void + +标记一个预追踪耗时任务的结束。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

name

+

string

+

是

+

要追踪的任务名称

+

taskId

+

number

+

是

+

任务id

+
+ + >![](../../public_sys-resources/icon-note.gif) **说明：** + >finishTrace的name和taskId必须与流程开始的startTrace对应参数值一致。 + +- 示例： + + ``` + bytrace.finishTrace("myTestFunc", 1); + ``` + + +## bytrace.traceByValue + +traceByValue\(name: string, count: number\): void + +用来标记一个预追踪的数值变量，该变量的数值会不断变化。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

name

+

string

+

是

+

要追踪的数值变量名称

+

count

+

number

+

是

+

变量的值

+
+ +- 示例： + + ``` + let traceCount = 3; + bytrace.traceByValue("myTestCount", traceCount); + ...... + traceCount = 5; + bytrace.traceByValue("myTestCount", traceCount); + ``` + + diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-data-kvmanager-config.md b/zh-cn/application-dev/js-reference/apis/js-apis-data-kvmanager-config.md new file mode 100644 index 0000000000000000000000000000000000000000..4e8a8397a5c45c46f8e1520d3a9bae4f20fe5bf1 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-data-kvmanager-config.md @@ -0,0 +1,130 @@ +# KVManager配置信息 + +- [导入模块](#zh-cn_topic_0000001175852127_s56d19203690d4782bfc74069abb6bd71) +- [权限](#zh-cn_topic_0000001175852127_section11257113618419) +- [UserType](#zh-cn_topic_0000001175852127_section099619567453) +- [KVManagerConfig](#zh-cn_topic_0000001175852127_section4346145712159) +- [UserInfo](#zh-cn_topic_0000001175852127_section12882825611) + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从 API Version 7 开始支持。 + +## 导入模块 + +``` +import factory from '@ohos.data.distributeddata'; +``` + +## 权限 + +无 + +## UserType + +描述用户类型。 + + + + + + + + + + + + +

名称

+

默认值

+

说明

+

SAME_USER_ID

+

0

+

表示使用同一帐户登录不同设备的用户。

+
+ +## KVManagerConfig + +提供KVManager实例的配置信息。 + +包括调用者的包名称和分布式网络类型。 + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

userInfo

+

UserInfo

+

是

+

是

+

用户信息。

+

bundleName

+

string

+

是

+

是

+

应用包名。长度应小于1KB。

+
+ +## UserInfo + +用户信息管理类。 + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

userId

+

string

+

是

+

是

+

表示需要设置的用户ID。长度应小于1KB。

+

userType

+

UserType

+

是

+

是

+

表示需要设置的用户类型。

+
+ diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-data-kvmanager.md b/zh-cn/application-dev/js-reference/apis/js-apis-data-kvmanager.md new file mode 100644 index 0000000000000000000000000000000000000000..4eba1ebe246881218cd3a3201b6005b4f18b88f2 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-data-kvmanager.md @@ -0,0 +1,246 @@ +# 创建和获取分布式数据库 + +- [导入模块](#zh-cn_topic_0000001179090937_s56d19203690d4782bfc74069abb6bd71) +- [权限](#zh-cn_topic_0000001179090937_section11257113618419) +- [createKVManager\(config: KVManagerConfig, callback: AsyncCallback\): void](#zh-cn_topic_0000001179090937_section192192415554) +- [createKVManager\(config: KVManagerConfig\): Promise](#zh-cn_topic_0000001179090937_section19618143402218) +- [KVManager](#zh-cn_topic_0000001179090937_section12882825611) + - [getKVStore\(storeId: string, options: Options\): Promise](#zh-cn_topic_0000001179090937_section51960467216) + - [getKVStore\(storeId: string, options: Options, callback: AsyncCallback\): void](#zh-cn_topic_0000001179090937_section06419235582) + + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从 API Version 7 开始支持。 + +## 导入模块 + +``` +import factory from '@ohos.data.distributeddata'; +``` + +## 权限 + +无 + +## createKVManager\(config: KVManagerConfig, callback: AsyncCallback\): void + +创建分布式数据库管理对象。 + +此方法为异步callback方法。 + +- 参数： + + + + + + + + + + + + + + + + +

参数名

+

类型

+

说明

+

config

+

KVManagerConfig

+

用于配置管理对象，包括用户信息和应用包名。

+

callback

+

AsyncCallback<KVManager>

+

回调函数，获取数据库管理对象实例。

+
+ +- 返回值： + + 无 + +- 示例： + + ``` + factory.createKVManager(config, function (err, manager) { + kvManager = manager; + }); + ``` + + +## createKVManager\(config: KVManagerConfig\): Promise + +创建分布式数据库管理对象。 + +此方法为异步promise方法。 + +- 参数： + + + + + + + + + + + + +

参数名

+

类型

+

说明

+

config

+

KVManagerConfig

+

用于配置管理对象，包括用户信息和应用包名。

+
+ +- 返回值： + + + + + + + + + + +

参数名

+

类型

+

Promise<KVManager>

+

promise实例，用于获取异步返回结果。

+
+ +- 示例： + + ``` + const promise = factory.createKVManager(config); + promise.then((manager) => { + kvManager = manager; + }).catch((err) => { + }); + ``` + + +## KVManager + +提供管理分布式数据库的接口。 + +### getKVStore\(storeId: string, options: Options\): Promise + +创建或获取数据库实例。需要先通过[createKVManager](#zh-cn_topic_0000001179090937_section192192415554)创建或获取KVStore实例。 + +此方法为异步promise方法。 + +- 参数： + + + + + + + + + + + + + + + + +

参数名

+

类型

+

说明

+

storeId

+

string

+

用于标识数据库。同一应用下该参数值必须唯一且长度应小于1KB。

+

options

+

Options

+

数据库实例的配置信息。

+
+ +- 返回值： + + + + + + + + + + +

参数名

+

类型

+

Promise<T>

+

promise实例，用于获取异步返回结果。

+
+ +- 示例： + + ``` + const promise = kvManager.getKVStore(options); + promise.then((store) => { + kvStore = store; + }).catch((err) => { + }); + ``` + + +### getKVStore\(storeId: string, options: Options, callback: AsyncCallback\): void + +创建并获取数据库实例。 + +此方法为异步callback方法。 + +- 参数： + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

说明

+

storeId

+

string

+

用于标识数据库。同一应用下该参数值必须唯一且长度应小于1KB。

+

options

+

Options

+

数据库实例的配置信息。

+

callback

+

AsyncCallback<T>

+

回调函数，获取数据库实例。

+
+ +- 返回值： + + 无 + +- 示例： + + ``` + kvManager.getKVStore('storeId', options, function(err, store){ + kvStore = store; + }); + ``` + + diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-data-kvstore.md b/zh-cn/application-dev/js-reference/apis/js-apis-data-kvstore.md new file mode 100644 index 0000000000000000000000000000000000000000..a97a102fc61543b0331fb0e57cda78bee4cc4b2b --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-data-kvstore.md @@ -0,0 +1,346 @@ +# 分布式数据库操作描述 + +- [导入模块](#zh-cn_topic_0000001175986853_s56d19203690d4782bfc74069abb6bd71) +- [权限](#zh-cn_topic_0000001175986853_section11257113618419) +- [KVStore](#zh-cn_topic_0000001175986853_section12882825611) + - [put\(key: string, value: Uint8Array | string | number | boolean, callback: AsyncCallback\): void](#zh-cn_topic_0000001175986853_section1942221513) + - [put\(key: string, value: Uint8Array | string | number | boolean\): Promise](#zh-cn_topic_0000001175986853_section43065440019) + - [delete\(key: string, callback: AsyncCallback\): void](#zh-cn_topic_0000001175986853_section15564125555713) + - [delete\(key: string\): Promise](#zh-cn_topic_0000001175986853_section1298265189) + - [on\(event: 'dataChange', type: SubscribeType, observer: Callback\): void](#zh-cn_topic_0000001175986853_section9748071812) + - [on\(event: 'syncComplete', syncCallback: Callback\>\): void](#zh-cn_topic_0000001175986853_section06419235582) + + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从 API Version 7 开始支持。 + +## 导入模块 + +``` +import factory from '@ohos.data.distributeddata'; +``` + +## 权限 + +无 + +## KVStore + +表示分布式数据库，并提供添加数据、删除数据和订阅数据变更的方法。 + +### put\(key: string, value: Uint8Array | string | number | boolean, callback: AsyncCallback\): void + +添加指定类型键值对到数据库。 + +此方法是异步callback方法。 + +- 参数： + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

说明

+

key

+

string

+

要添加数据的key。不能为空且长度不大于1KB。

+

value

+

Uint8Array | string | number | boolean

+

存储的新值。支持Uint8Array、number 、 string 、boolean。

+

Uint8Array的长度小于4M。

+

callback

+

AsyncCallback<void>

+

回调函数。

+
+ +- 返回值： + + 无 + +- 示例 + + ``` + kvStore.put('key-001', 'value-001', function(err, value){ + }); + ``` + + +### put\(key: string, value: Uint8Array | string | number | boolean\): Promise + +添加指定类型键值对到数据库。 + +此方法是异步promise方法。 + +- 参数： + + + + + + + + + + + + + + + + +

参数名

+

类型

+

说明

+

key

+

string

+

要添加数据的key。不能为空且长度不大于1KB。

+

value

+

Uint8Array | string | number | boolean

+

要添加的数据。支持Uint8Array、number 、 string 、boolean。

+

Uint8Array和string类型的value长度必须小于4MB。

+
+ +- 返回值： + + + + + + + + + + +

类型

+

说明

+

Promise<void>

+

Promise实例，用于异步处理。

+
+ + +- 示例 + + ``` + const promise = kvStore.put('key-001', 'value-001'); + promise.then((data) => { + }).catch((err) => { + }); + ``` + + +### delete\(key: string, callback: AsyncCallback\): void + +从数据库中删除指定键值的数据。 + +此方法是异步callback方法。 + +- 参数： + + + + + + + + + + + + + + + + +

参数名

+

类型

+

说明

+

key

+

string

+

要删除数据的key。不能为空且长度不大于1KB。

+

callback

+

AsyncCallback<void>

+

回调函数。

+
+ +- 返回值： + + 无 + +- 示例 + + ``` + kvStore.delete('key-001', function(err, value){ + }); + ``` + + +### delete\(key: string\): Promise + +从数据库中删除指定键值的数据。 + +此方法是异步promise方法。 + +- 参数： + + + + + + + + + + + + +

参数名

+

类型

+

说明

+

key

+

string

+

要删除数据的key。不能为空且长度不大于1KB。

+
+ +- 返回值： + + + + + + + + + + +

类型

+

说明

+

Promise<void>

+

Promise实例，用于异步处理。

+
+ +- 示例 + + ``` + const promise = kvStore.delete('key-001'); + promise.then((data) => { + }).catch((err) => { + }); + ``` + + +### on\(event: 'dataChange', type: SubscribeType, observer: Callback\): void + +订阅指定类型的数据更改通知。 + +此方法是同步方法。 + +- 参数： + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

说明

+

event

+

'dataChange'

+

回调函数名称。

+

type

+

SubscribeType

+

表示订阅的类型。具体参考SubscribeType。

+

observer

+

Callback<ChangeNotification>

+

回调函数。

+
+ +- 返回值： + + 无 + +- 示例 + + ``` + kvStore.on('dataChange', 0, function(notification){ + }); + ``` + + +### on\(event: 'syncComplete', syncCallback: Callback\>\): void + +订阅指定类型的数据更改通知。 + +此方法是同步方法。 + +- 参数： + + + + + + + + + + + + + + + + +

参数名

+

类型

+

说明

+

event

+

'syncComplete'

+

回调函数名称。

+

syncCallback

+

Callback<Array<[string, number]>>

+

回调函数。

+
+ +- 返回值： + + 无 + +- 示例 + + ``` + kvStore.on('syncComplete', function(data){ + }); + ``` + + diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-data-singlekvstore.md b/zh-cn/application-dev/js-reference/apis/js-apis-data-singlekvstore.md new file mode 100644 index 0000000000000000000000000000000000000000..c8244adf9149788f5588583cd94316a6c138d7f2 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-data-singlekvstore.md @@ -0,0 +1,190 @@ +# 单版本分布式数据库 + +- [导入模块](#zh-cn_topic_0000001129947446_s56d19203690d4782bfc74069abb6bd71) +- [权限](#zh-cn_topic_0000001129947446_section11257113618419) +- [SingleKVStore](#zh-cn_topic_0000001129947446_section12882825611) + - [get\(key: string, callback: AsyncCallback\): void](#zh-cn_topic_0000001129947446_section2013623011386) + - [get\(key: string\): Promise](#zh-cn_topic_0000001129947446_section5647141894316) + - [sync\(deviceIdList: string\[\], mode: SyncMode, allowedDelayMs?: number\): void](#zh-cn_topic_0000001129947446_section06419235582) + + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从 API Version 7 开始支持。 + +## 导入模块 + +``` +import factory from '@ohos.data.distributeddata'; +``` + +## 权限 + +无 + +## SingleKVStore + +单版本分布式数据库，继承自分布式数据库，支持查询、同步数据，也具备分布式数据库的所有的接口能力。需要先通过[getKVStore](js-apis-data-kvmanager.md#zh-cn_topic_0000001179090937_section51960467216)获取实例。 + +### get\(key: string, callback: AsyncCallback\): void + +获取指定键的值。 + +此方法为异步callback方法。 + +- 参数： + + + + + + + + + + + + + + + + +

参数名

+

类型

+

说明

+

key

+

string

+

要查询数据的key。不能为空且长度不大于1KB

+

callback

+

AsyncCallback<Uint8Array | string | boolean | number>

+

回调函数，获取查询的值。

+
+ +- 返回值： + + 无 + +- 示例： + + ``` + kvStore.get('key-001', function(err, value){ + console.info(value); + }); + ``` + + +### get\(key: string\): Promise + +获取指定键的值。 + +此方法为异步promise方法。 + +- 参数： + + + + + + + + + + + + +

参数名

+

类型

+

说明

+

key

+

string

+

要查询数据的key。不能为空且长度不大于1KB

+
+ +- 返回值： + + + + + + + + + + +

类型

+

说明

+

Promise<Uint8Array | string | boolean | number>

+

promise实例，用于获取异步返回结果。

+
+ +- 示例： + + ``` + const promise = kvStore.get('key-001'); + promise.then((data) => { + console.info(value); + }).catch((err) => { + }); + ``` + + +### sync\(deviceIdList: string\[\], mode: SyncMode, allowedDelayMs?: number\): void + +在手动模式下，触发数据库同步。 + +此方法为同步方法。 + +- 参数： + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

deviceIdList

+

string[]

+

是

+

同一组网环境下，需要同步的设备networkid列表。

+

mode

+

SyncMode

+

是

+

同步类型。

+

0：PUSH_ONLY, 1: PULL_ONLY, 2: PUSH_PULL

+

allowedDelayMs

+

number

+

否

+

可选参数。允许延时时间，单位毫秒。

+
+ +- 返回值： + + 无 + +- 示例： + + ``` + kvStore.sync(deviceIds, 1, 1000); + ``` + + diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-data-storage.md b/zh-cn/application-dev/js-reference/apis/js-apis-data-storage.md new file mode 100644 index 0000000000000000000000000000000000000000..304de0b47611e1965578b3f214ebd1e6cfffb309 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-data-storage.md @@ -0,0 +1,1853 @@ +# 轻量级存储 + +- [导入模块](#zh-cn_topic_0000001117163542_s56d19203690d4782bfc74069abb6bd71) +- [权限](#zh-cn_topic_0000001117163542_section11257113618419) +- [属性](#zh-cn_topic_0000001117163542_section7299123218370) +- [方法](#zh-cn_topic_0000001117163542_section88091318127) +- [getStorageSync\(path: string\)](#zh-cn_topic_0000001117163542_section172447329132) +- [getStorage\(path: string, callback: AsyncCallback\)](#zh-cn_topic_0000001117163542_section192192415554) +- [getStorage\(path: string\)](#zh-cn_topic_0000001117163542_section761705115251) +- [deleteStorageSync\(path: string\)](#zh-cn_topic_0000001117163542_section1396463815379) +- [deleteStorage\(path: string, callback: AsyncCallback\)](#zh-cn_topic_0000001117163542_section17967123883712) +- [deleteStorage\(path: string\)](#zh-cn_topic_0000001117163542_section1497163823719) +- [removeStorageFromCacheSync\(path: string\)](#zh-cn_topic_0000001117163542_section1212418572425) +- [removeStorageFromCache\(path: string, callback: AsyncCallback\)](#zh-cn_topic_0000001117163542_section141288570429) +- [removeStorageFromCache\(path: string\)](#zh-cn_topic_0000001117163542_section1813245718422) +- [附录](#zh-cn_topic_0000001117163542_section1933416317165) +- [Storage](#zh-cn_topic_0000001117163542_section12882825611) +- [方法](#zh-cn_topic_0000001117163542_section1442928184214) +- [getSync\(key: string, defValue: ValueType\)](#zh-cn_topic_0000001117163542_section175783467507) +- [get\(key: string, defValue: ValueType, callback: AsyncCallback\)](#zh-cn_topic_0000001117163542_section858234618501) +- [get\(key: string, defValue: ValueType\)](#zh-cn_topic_0000001117163542_section20585144614501) +- [putSync\(key: string, value: ValueType\)](#zh-cn_topic_0000001117163542_section428912524119) +- [put\(key: string, value: ValueType, callback: AsyncCallback\)](#zh-cn_topic_0000001117163542_section92951552111117) +- [put\(key: string, value: ValueType\)](#zh-cn_topic_0000001117163542_section230117522119) +- [hasSync\(key: string\)](#zh-cn_topic_0000001117163542_section0884174321910) +- [has\(key: string, callback: AsyncCallback\)](#zh-cn_topic_0000001117163542_section1889144312199) +- [has\(key: string\)](#zh-cn_topic_0000001117163542_section19894343121917) +- [deleteSync\(key: string\)](#zh-cn_topic_0000001117163542_section1360034110271) +- [delete\(key: string, callback: AsyncCallback\)](#zh-cn_topic_0000001117163542_section1960515413272) +- [delete\(key: string\)](#zh-cn_topic_0000001117163542_section36125414279) +- [flushSync\(\)](#zh-cn_topic_0000001117163542_section1593555103112) +- [flush\(callback: AsyncCallback\)](#zh-cn_topic_0000001117163542_section1994165173117) +- [flush\(\)](#zh-cn_topic_0000001117163542_section169491651163113) +- [clearSync\(\)](#zh-cn_topic_0000001117163542_section890817195434) +- [clear\(callback: AsyncCallback\)](#zh-cn_topic_0000001117163542_section291391994316) +- [clear\(\)](#zh-cn_topic_0000001117163542_section19192196432) +- [on\(type: 'change', callback: Callback\)](#zh-cn_topic_0000001117163542_section19353521332) +- [off\(type: 'change', callback: Callback\)](#zh-cn_topic_0000001117163542_section1194235213313) +- [事件](#zh-cn_topic_0000001117163542_section335774517218) + - [change](#zh-cn_topic_0000001117163542_section1151314331741) + +- [StorageObserver](#zh-cn_topic_0000001117163542_section256244135613) + +轻量级数据库为应用提供key-value键值型的文件数据处理能力，支持应用对数据进行轻量级存储及查询。数据存储形式为键值对，键的类型为字符串型，值的存储数据类型包括数字型、字符型、布尔型。 + +## 导入模块 + +``` +import data_storage from '@ohos.data.storage'; +``` + +## 权限 + +无 + +## 属性 + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

MAX_KEY_LENGTH

+

string

+

是

+

否

+

key的最大长度限制，大小为80字节。

+

MAX_VALUE_LENGTH

+

string

+

是

+

否

+

string类型value的最大长度限制，大小为8192字节。

+
+ +## 方法 + +## getStorageSync\(path: string\) + +读取指定文件，将数据加载到Storage实例，用于数据操作。 + +此方法为同步方法。 + +**参数：** + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

path

+

string

+

是

+

应用程序内部数据存储路径。

+
+ +**返回值：** + + + + + + + + + + +

类型

+

说明

+

Storage

+

获取到要操作的Storage实例，用于进行数据库的操作。

+
+ +**示例：** + +``` +const PATH = '/data/accounts/account_0/appdata/com.example.myapplication/database/{storage_name}'; +let store = data_storage.getStorageSync(PATH); +``` + +## getStorage\(path: string, callback: AsyncCallback\) + +读取指定文件，将数据加载到Storage实例，用于数据操作。 + +此方法为异步方法。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

path

+

string

+

是

+

应用程序内部数据存储路径。

+

callback

+

AsyncCallback<Storage>

+

是

+

回调函数。

+
+ +**返回值：** + + + + + + + + + + +

类型

+

说明

+

void

+

无

+
+ +**示例：** + +``` +data_storage.getStorage(PATH, function(err, data) { + strore = data; +}); +``` + +## getStorage\(path: string\) + +读取指定文件，将数据加载到Storage实例，用于数据操作。 + +此方法为异步方法。 + +**参数：** + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

path

+

string

+

是

+

应用程序内部数据存储路径。

+
+ +**返回值：** + + + + + + + + + + +

类型

+

说明

+

Promise<Storage>

+

Promise实例，用于异步获取结果。

+
+ +**示例：** + +``` +const promise = data_storage.getStorage(PATH); +promise.then((data) => { + data.clearSync(); + }).catch((err) => { +}); +``` + +## deleteStorageSync\(path: string\) + +从内存中移除指定文件对应的Storage单实例，并删除指定文件及其备份文件、损坏文件。删除指定文件时，应用不允许再使用该实例进行数据操作，否则会出现数据一致性问题。 + +此方法为同步方法。 + +**参数：** + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

path

+

string

+

是

+

应用程序内部数据存储路径。

+
+ +**返回值：** + + + + + + + + + + +

类型

+

说明

+

void

+

无

+
+ +**示例：** + +``` +const PATH = '/data/accounts/account_0/appdata/com.example.myapplication/database/{storage_name}'; +data_storage.deleteStorageSync(PATH); +``` + +## deleteStorage\(path: string, callback: AsyncCallback\) + +从内存中移除指定文件对应的Storage单实例，并删除指定文件及其备份文件、损坏文件。删除指定文件时，应用不允许再使用该实例进行数据操作，否则会出现数据一致性问题。 + +此方法为异步方法。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

path

+

string

+

是

+

应用程序内部数据存储路径。

+

callback

+

AsyncCallback<Storage>

+

是

+

回调函数。

+
+ +**返回值：** + + + + + + + + + + +

类型

+

说明

+

void

+

无

+
+ +**示例：** + +``` +data_storage.deleteStorage(PATH, function(err, data) { +}); +``` + +## deleteStorage\(path: string\) + +从内存中移除指定文件对应的Storage单实例，并删除指定文件及其备份文件、损坏文件。删除指定文件时，应用不允许再使用该实例进行数据操作，否则会出现数据一致性问题。 + +此方法为异步方法。 + +**参数：** + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

path

+

string

+

是

+

应用程序内部数据存储路径。

+
+ +**返回值：** + + + + + + + + + + +

类型

+

说明

+

Promise<void>

+

Promise实例，用于异步获取结果。

+
+ +**示例：** + +``` +const promise = data_storage.deleteStorage(PATH); +promise.then((data) => { + }).catch((err) => { +}); +``` + +## removeStorageFromCacheSync\(path: string\) + +从内存中移除指定文件对应的Storage单实例。移除Storage单实例时，应用不允许再使用该实例进行数据操作，否则会出现数据一致性问题。 + +此方法为同步方法。 + +**参数：** + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

path

+

string

+

是

+

应用程序内部数据存储路径。

+
+ +**返回值：** + + + + + + + + + + +

类型

+

说明

+

void

+

无

+
+ +**示例：** + +``` +const PATH = '/data/accounts/account_0/appdata/com.example.myapplication/database/{storage_name}'; +data_storage.removeStorageFromCacheSync(PATH); +``` + +## removeStorageFromCache\(path: string, callback: AsyncCallback\) + +从内存中移除指定文件对应的Storage单实例。移除Storage单实例时，应用不允许再使用该实例进行数据操作，否则会出现数据一致性问题。 + +此方法为异步方法。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

path

+

string

+

是

+

应用程序内部数据存储路径。

+

callback

+

AsyncCallback<Storage>

+

是

+

回调函数。

+
+ +**返回值：** + + + + + + + + + + +

类型

+

说明

+

void

+

无

+
+ +**示例：** + +``` +data_storage.removeStorageFromCache(PATH, function(err, data) { +}); +``` + +## removeStorageFromCache\(path: string\) + +从内存中移除指定文件对应的Storage单实例。移除Storage单实例时，应用不允许再使用该实例进行数据操作，否则会出现数据一致性问题。 + +此方法为异步方法。 + +**参数：** + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

path

+

string

+

是

+

应用程序内部数据存储路径。

+
+ +**返回值：** + + + + + + + + + + +

类型

+

说明

+

Promise<void>

+

Promise实例，用于异步获取结果。

+
+ +**示例：** + +``` +const promise = data_storage.removeStorageFromCache(PATH); +promise.then((data) => { + }).catch((err) => { +}); +``` + +## 附录 + +## Storage + +提供获取和修改存储数据的接口。 + +## 方法 + +## getSync\(key: string, defValue: ValueType\) + +获取键对应的值，如果值为null或者非默认值类型，返默认数据 + +此方法为同步方法。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

key

+

string

+

是

+

要获取的存储key名称。它不能为空。

+

defValue

+

ValueType

+

是

+

给定key的存储不存在，则要返回的默认值。支持number 、 string 、boolean。

+
+ +**返回值：** + + + + + + + + + + +

类型

+

说明

+

ValueType

+

键对应的值，如果值为null或者非默认值类型，返默认数据

+
+ +**示例：** + +``` +let ret = store.getSync(key, ‘defValue’); +``` + +## get\(key: string, defValue: ValueType, callback: AsyncCallback\) + +获取键对应的值，如果值为null或者非默认值类型，返默认数据。 + +此方法为异步方法。 + +**参数：** + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

key

+

string

+

是

+

要获取的存储key名称。它不能为空。

+

defValue

+

ValueType

+

是

+

默认返回值。支持number 、 string 、boolean。

+

callback

+

AsyncCallback<ValueType>

+

是

+

回调函数。

+
+ +**返回值：** + + + + + + + + + + +

类型

+

说明

+

void

+

无

+
+ +**示例：** + +``` +store.get(key, 'test', function(err, data) { + console.info(data); +}); +``` + +## get\(key: string, defValue: ValueType\) + +获取键对应的值，如果值为null或者非默认值类型，返默认数据。 + +此方法为异步方法。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

key

+

string

+

是

+

要获取的存储key名称。它不能为空。

+

defValue

+

ValueType

+

是

+

默认返回值。支持number 、 string 、boolean。

+
+ +**返回值：** + + + + + + + + + + +

类型

+

说明

+

Promise<ValueType>

+

Promise实例，用于异步获取结果。

+
+ +**示例：** + +``` +const promise = store.get(key, 'test'); +promise.then((data) => { + console.info(data); + }).catch((err) => { +}); +``` + +## putSync\(key: string, value: ValueType\) + +首先获取指定文件对应的Storage实例，然后借助Storage API将数据写入Storage实例，通过flush或者flushSync将Storage实例持久化。 + +此方法为同步方法。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

key

+

string

+

是

+

要修改的存储的key。它不能为空。

+

value

+

ValueType

+

是

+

存储的新值。支持number 、 string 、boolean。

+
+ +**返回值：** + + + + + + + + + + +

类型

+

说明

+

void

+

无

+
+ +**示例：** + +``` +let data = store.putSync(key, ‘defValue’); +``` + +## put\(key: string, value: ValueType, callback: AsyncCallback\) + +首先获取指定文件对应的Storage实例，然后借助Storage API将数据写入Storage实例，通过flush或者flushSync将Storage实例持久化。 + +此方法为异步方法。 + +**参数：** + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

key

+

string

+

是

+

要修改的存储的key。它不能为空。

+

value

+

ValueType

+

是

+

存储的新值。支持number 、 string 、boolean。

+

callback

+

AsyncCallback<void>

+

是

+

回调函数。

+
+ +**返回值：** + + + + + + + + + + +

类型

+

说明

+

void

+

无

+
+ +**示例：** + +``` +store.put(key, 'test', function(err, data) { +}); +``` + +## put\(key: string, value: ValueType\) + +首先获取指定文件对应的Storage实例，然后借助Storage API将数据写入Storage实例，通过flush或者flushSync将Storage实例持久化。 + +此方法为异步方法。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

key

+

string

+

是

+

要修改的存储的key。它不能为空。

+

value

+

ValueType

+

是

+

存储的新值。支持number 、 string 、boolean。

+
+ +**返回值：** + + + + + + + + + + +

类型

+

说明

+

Promise<void>

+

Promise实例，用于异步处理。

+
+ +**示例：** + +``` +const promise = store.put(key, 'test'); +promise.then((data) => { + }).catch((err) => { +}); +``` + +## hasSync\(key: string\) + +检查存储对象是否包含名为给定key的存储。 + +此方法为同步方法。 + +**参数：** + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

key

+

string

+

是

+

要获取的存储key名称。它不能为空。

+
+ +**返回值：** + + + + + + + + + + +

类型

+

说明

+

boolean

+

true 表示存在，false表示不存在

+
+ +**示例：** + +``` +let ret = store.hasSync(key); +``` + +## has\(key: string, callback: AsyncCallback\) + +检查存储对象是否包含名为给定key的存储。 + +此方法为异步方法。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

key

+

string

+

是

+

要获取的存储key名称。它不能为空。

+

callback

+

AsyncCallback<boolean>

+

是

+

回调函数。

+
+ +**返回值：** + + + + + + + + + + +

类型

+

说明

+

boolean

+

true 表示存在，false表示不存在。

+
+ +**示例：** + +``` +store.has(key, function(err, data) { + console.info(data); +}); +``` + +## has\(key: string\) + +检查存储对象是否包含名为给定key的存储。 + +此方法为异步方法。 + +**参数：** + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

key

+

string

+

是

+

要获取的存储key名称。它不能为空。

+
+ +**返回值：** + + + + + + + + + + +

类型

+

说明

+

Promise<boolean>

+

Promise实例，用于异步处理。

+
+ +**示例：** + +``` +const promise = store.has(key); +promise.then((data) => { + console.info(data); + }).catch((err) => { +}); +``` + +## deleteSync\(key: string\) + +从此对象中删除名为给定key的存储。 + +此方法为同步方法。 + +**参数：** + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

key

+

string

+

是

+

要获取的存储key名称。它不能为空。

+
+ +**返回值：** + + + + + + + + + + +

类型

+

说明

+

void

+

无

+
+ +**示例：** + +``` +store.deleteSync(key); +``` + +## delete\(key: string, callback: AsyncCallback\) + +从此对象中删除名为给定key的存储。 + +此方法为异步方法。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

key

+

string

+

是

+

要获取的存储key名称。它不能为空。

+

callback

+

AsyncCallback<void>

+

是

+

回调函数。

+
+ +**返回值：** + + + + + + + + + + +

类型

+

说明

+

void

+

无

+
+ +**示例：** + +``` +store.delete(key, function(err, data) { +}); +``` + +## delete\(key: string\) + +从此对象中删除名为给定key的存储。 + +此方法为异步方法。 + +**参数：** + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

key

+

string

+

是

+

要获取的存储key名称。它不能为空。

+
+ +**返回值：** + + + + + + + + + + +

类型

+

说明

+

Promise<void>

+

Promise实例，用于异步处理。

+
+ +**示例：** + +``` +const promise = store.delete(key); +promise.then((data) => { + }).catch((err) => { +}); +``` + +## flushSync\(\) + +将当前storage对象中的修改保存到当前的storage，并同步存储到文件中。 + +此方法为同步方法。 + +**参数：** + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

无

+

无

+

无

+

无

+
+ +**返回值：** + + + + + + + + + + +

类型

+

说明

+

void

+

无

+
+ +**示例：** + +``` +store.flushSync(); +``` + +## flush\(callback: AsyncCallback\) + +将当前storage对象中的修改保存到当前的storage，并异步存储到文件中。 + +此方法为异步方法。 + +**参数：** + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

callback

+

AsyncCallback<void>

+

是

+

回调函数。

+
+ +**返回值：** + + + + + + + + + + +

类型

+

说明

+

void

+

无

+
+ +**示例：** + +``` +store.flush(function(err, data) { +}); +``` + +## flush\(\) + +将当前storage对象中的修改保存到当前的storage，并异步存储到文件中。 + +此方法为异步方法。 + +**参数：** + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

无

+

无

+

无

+

无

+
+ +**返回值：** + + + + + + + + + + +

类型

+

说明

+

Promise<void>

+

Promise实例，用于异步处理。

+
+ +**示例：** + +``` +const promise = store.flush(); +promise.then((data) => { + }).catch((err) => { +}); +``` + +## clearSync\(\) + +清除此存储对象中的所有存储。 + +此方法为同步方法。 + +**参数：** + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

无

+

无

+

无

+

无

+
+ +**返回值：** + + + + + + + + + + +

类型

+

说明

+

void

+

无

+
+ +**示例：** + +``` +store.clearSync(); +``` + +## clear\(callback: AsyncCallback\) + +清除此存储对象中的所有存储。 + +此方法为异步方法。 + +**参数：** + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

callback

+

AsyncCallback<void>

+

是

+

回调函数。

+
+ +**返回值：** + + + + + + + + + + +

类型

+

说明

+

void

+

无

+
+ +**示例：** + +``` +store.clear(function(err, data) { +}); +``` + +## clear\(\) + +清除此存储对象中的所有存储。 + +此方法为异步方法。 + +**参数：** + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

无

+

无

+

无

+

无

+
+ +**返回值：** + + + + + + + + + + +

类型

+

说明

+

Promise<void>

+

Promise实例，用于异步处理。

+
+ +**示例：** + +``` +const promise = store.clear(); +promise.then((data) => { + }).catch((err) => { +}); +``` + +## on\(type: 'change', callback: Callback\) + +监听者类需要实现StorageObserver接口，当数据发生改变时,监听者的 StorageObserver\#onChange会被回调。 + + + + + + + + + + + + + + + + +

参数名

+

类型

+

说明

+

type

+

'change'

+

事件类型，表示数据变更。

+

callback

+

Callback<StorageObserver>

+

当数据发生改变时,监听者的onChange会被回调。

+
+ +**示例：** + +``` +var observer = function (data) { + console.info(data); + }; +store.on('change', observer); +``` + +## off\(type: 'change', callback: Callback\) + +监听者类需要实现StorageObserver接口，当不再进行数据监听时，使用此接口取消监听。 + + + + + + + + + + + + + + + + +

参数名

+

类型

+

说明

+

type

+

'change'

+

事件类型，表示数据变更。

+

callback

+

Callback<StorageObserver>

+

需要取消的回调对象实例

+
+ +**示例：** + +``` +var observer = function (data) { + console.info(data); + }; +store.off('change', observer); +``` + +## 事件 + +### change + +**表 1** 回调函数的参数说明（可选，如不涉及可删除） + + + + + + + + + + + + +

参数名

+

类型

+

说明

+

observer

+

StorageObserver

+

当有数据变化时会收到此回调

+
+ +## StorageObserver + + + + + + + + + + + + + + +

名称

+

参数类型

+

必填

+

说明

+

key

+

string

+

否

+

变更的数据内容

+
+ diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-data-type.md b/zh-cn/application-dev/js-reference/apis/js-apis-data-type.md new file mode 100644 index 0000000000000000000000000000000000000000..2ec92a56e1fee55d95690a6104cf5644e5c58cd7 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-data-type.md @@ -0,0 +1,476 @@ +# 数据类型描述 + +- [导入模块](#zh-cn_topic_0000001129943828_s56d19203690d4782bfc74069abb6bd71) +- [权限](#zh-cn_topic_0000001129943828_section11257113618419) +- [SubscribeType](#zh-cn_topic_0000001129943828_section099619567453) +- [KVStoreType](#zh-cn_topic_0000001129943828_section720518449379) +- [SecurityLevel](#zh-cn_topic_0000001129943828_section205876465372) +- [Options](#zh-cn_topic_0000001129943828_section16417114202216) +- [SyncMode](#zh-cn_topic_0000001129943828_section53541759205119) +- [ValueType](#zh-cn_topic_0000001129943828_section19236155475512) +- [Value](#zh-cn_topic_0000001129943828_section12882825611) +- [Entry](#zh-cn_topic_0000001129943828_section1467716175115) +- [ChangeNotification](#zh-cn_topic_0000001129943828_section9868357105716) + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从 API Version 7 开始支持。 + +## 导入模块 + +``` +import factory from '@ohos.data.distributeddata'; +``` + +## 权限 + +无 + +## SubscribeType + +描述订阅类型。 + + + + + + + + + + + + + + + + + + + + +

名称

+

默认值

+

说明

+

SUBSCRIBE_TYPE_LOCAL

+

0

+

表示订阅本地数据变更。

+

SUBSCRIBE_TYPE_REMOTE

+

1

+

表示订阅远端数据变更。

+

SUBSCRIBE_TYPE_ALL

+

2

+

表示订阅远端和本地数据变更。

+
+ +## KVStoreType + +用于指定创建的数据库的类型。 + + + + + + + + + + + + + + + + + + + + +

名称

+

默认值

+

说明

+

DEVICE_COLLABORATION

+

0

+

表示设备协同数据库。

+

SINGLE_VERSION

+

1

+

表示单版本数据库。

+

MULTI_VERSION

+

2

+

表示多版本数据库。此类型当前不允许使用。

+
+ +## SecurityLevel + +用于指定创建的数据库的安全级别。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

默认值

+

说明

+

NO_LEVEL

+

0

+

表示数据库不设置安全级别。

+

S0

+

1

+

表示数据库的安全级别为公共级别安全，当数据泄露时不会产生影响。

+

S1

+

2

+

表示数据库的安全级别为低级别安全，当数据泄露时会产生较低影响。

+

S2

+

3

+

表示数据库的安全级别为中级别安全，当数据泄露时会产生较大影响。

+

S3

+

5

+

表示数据库的安全级别为高级别安全，当数据泄露时会产生重大影响。

+

S4

+

6

+

表示数据库的安全级别为关键级别安全，当数据泄露时会产生严重影响。

+
+ +## Options + +用于提供创建数据库的配置信息。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

createIfMissing

+

boolean

+

否

+

当数据库文件不存在时是否创建数据库。默认创建。

+

encrypt

+

boolean

+

否

+

设置数据库文件是否加密。默认不加密。

+

backup

+

boolean

+

否

+

设置数据库文件是否备份。默认备份。

+

autoSync

+

boolean

+

否

+

设置数据库文件是否自动同步。默认自动同步。

+

kvStoreType

+

KVStoreType

+

否

+

设置要创建的数据库类型。默认为多设备协同数据库。

+

securityLevel

+

SecurityLevel

+

否

+

设置数据库安全级别。默认不设置安全级别。

+
+ +## SyncMode + +用于指定同步模式。 + + + + + + + + + + + + + + + + + + + + +

名称

+

默认值

+

说明

+

PULL_ONLY

+

0

+

表示只能从远端拉取数据到本端。

+

PUSH_ONLY

+

1

+

表示只能从本端推送数据到对端。

+

PUSH_PULL

+

2

+

表示从本端推送数据到远端，然后从远端拉取数据到对端。

+
+ +## ValueType + +用于表示数据类型。 + +只能被内部应用使用。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

默认值

+

说明

+

STRING

+

0

+

表示值类型为字符串。

+

INTEGER

+

1

+

表示值类型为整数。

+

FLOAT

+

2

+

表示值类型为浮点数。

+

BYTE_ARRAY

+

3

+

表示值类型为字节数组。

+

BOOLEAN

+

4

+

表示值类型为布尔值。

+

DOUBLE

+

5

+

表示值类型为双浮点数。

+
+ +## Value + +存储在数据库中的对象。 + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

type

+

ValueType

+

是

+

是

+

值类型。

+

value

+

Uint8Array | string | number | boolean

+

是

+

是

+

返回值。Uint8Array的长度小于4MB。

+
+ +## Entry + +表示存储在分布式数据库中的键值对。 + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

key

+

string

+

是

+

是

+

键值。

+

value

+

Value

+

是

+

是

+

值对象。

+
+ +## ChangeNotification + +数据变更时通知的对象，包括数据插入、更新和删除。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

insertEntries

+

Entry[]

+

是

+

是

+

数据添加记录。

+

updateEntries

+

Entry[]

+

是

+

是

+

数据更新记录。

+

deleteEntries

+

Entry[]

+

是

+

是

+

数据删除记录。

+

deviceId

+

string

+

是

+

是

+

设备ID。此处为设备UUID。

+
+ diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-data.md b/zh-cn/application-dev/js-reference/apis/js-apis-data.md new file mode 100644 index 0000000000000000000000000000000000000000..80d67c3732c493accff1036cfc81c18be8bc6582 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-data.md @@ -0,0 +1,17 @@ +# 数据管理 + +- **[文件管理](js-apis-fileio.md)** + +- **[单版本分布式数据库](js-apis-data-singlekvstore.md)** + +- **[创建和获取分布式数据库](js-apis-data-kvmanager.md)** + +- **[KVManager配置信息](js-apis-data-kvmanager-config.md)** + +- **[分布式数据库操作描述](js-apis-data-kvstore.md)** + +- **[数据类型描述](js-apis-data-type.md)** + +- **[轻量级存储](js-apis-data-storage.md)** + + diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-device-mgmt.md b/zh-cn/application-dev/js-reference/apis/js-apis-device-mgmt.md new file mode 100644 index 0000000000000000000000000000000000000000..a4f6bb1182eeb0ee71a834a2ba1272abbac4ed5f --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-device-mgmt.md @@ -0,0 +1,41 @@ +# 设备管理 + +- **[设备信息](js-apis-deviceinfo.md)** + +- **[系统属性](js-apis-systemparameter.md)** + +- **[系统恢复](js-apis-update.md)** + +- **[显示设备属性](js-apis-display.md)** + +- **[电池和充电属性](js-apis-batteryinfo.md)** + +- **[设置系统屏幕亮度](js-apis-brightness.md)** + +- **[系统电源管理](js-apis-power.md)** + +- **[Runninglock锁](js-apis-runninglock.md)** + +- **[传感器](js-apis-sensor.md)** + +- **[振动](js-apis-vibrate.md)** + +- **[国际化（I18n）](js-apis-i18n.md)** + +- **[国际化（Intl）](js-apis-intl.md)** + +- **[资源管理](js-apis-resourcemanage.md)** + +- **[时间设置](js-apis-systemtime.md)** + +- **[升级](js-apis-libupdateclient.md)** + +- **[获取进程相关的信息](js-apis-process.md)** + +- **[字符串编解码](js-apis-util.md)** + +- **[启动一个worker](js-apis-worker.md)** + +- **[URL字符串解析](js-apis-url.md)** + + diff --git "a/zh-cn/application-dev/js-reference/\350\256\276\345\244\207\344\277\241\346\201\257.md" b/zh-cn/application-dev/js-reference/apis/js-apis-deviceinfo.md old mode 100755 new mode 100644 similarity index 99% rename from "zh-cn/application-dev/js-reference/\350\256\276\345\244\207\344\277\241\346\201\257.md" rename to zh-cn/application-dev/js-reference/apis/js-apis-deviceinfo.md index 07680eb5359b4d1dd09b2d47eaad063b791def35..94715992f5026546f6bb6b1aecf22eb3ae8eaa27 --- "a/zh-cn/application-dev/js-reference/\350\256\276\345\244\207\344\277\241\346\201\257.md" +++ b/zh-cn/application-dev/js-reference/apis/js-apis-deviceinfo.md @@ -1,4 +1,4 @@ -# 设备信息 +# 设备信息 - [导入模块](#zh-cn_topic_0000001139910745_section370mcpsimp) - [权限列表](#zh-cn_topic_0000001139910745_section373mcpsimp) @@ -7,7 +7,7 @@ ## 导入模块 ``` -import deviceinfo from '@ohos.deviceinfo' +import deviceInfo from '@ohos.deviceInfo' ``` ## 权限列表 diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-display.md b/zh-cn/application-dev/js-reference/apis/js-apis-display.md new file mode 100644 index 0000000000000000000000000000000000000000..6f75303b620b3f2c3b5225b012239a227d32aca9 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-display.md @@ -0,0 +1,447 @@ +# 显示设备属性 + +- [导入模块](#zh-cn_topic_0000001163727614_s56d19203690d4782bfc74069abb6bd71) +- [权限列表](#zh-cn_topic_0000001163727614_section11257113618419) +- [DisplayState](#zh-cn_topic_0000001163727614_section099619567453) +- [Display](#zh-cn_topic_0000001163727614_section12882825611) + - [属性](#zh-cn_topic_0000001163727614_section1059684317312) + +- [display.getDefaultDisplay](#zh-cn_topic_0000001163727614_section39061940191) +- [display.getAllDisplay](#zh-cn_topic_0000001163727614_section129251146697) +- [display.on\('add'|'remove'|'change'\)](#zh-cn_topic_0000001163727614_section5851341125) +- [display.off\('add'|'remove'|'change'\)](#zh-cn_topic_0000001163727614_section13178205443512) + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从 API Version 7 开始支持。 + +## 导入模块 + +``` +import display from '@ohos.display'; +``` + +## 权限列表 + +无 + +## DisplayState + +用于表示显示设备的状态。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

默认值

+

说明

+

STATE_UNKNOWN

+

0

+

表示显示设备状态未知。

+

STATE_OFF

+

1

+

表示显示设备状态为关闭。

+

STATE_ON

+

2

+

表示显示设备状态为开启。

+

STATE_DOZE

+

3

+

表示显示设备为低电耗模式。

+

STATE_DOZE_SUSPEND

+

4

+

表示显示设备为睡眠模式，CPU为挂起状态 。

+

STATE_VR

+

5

+

表示显示设备为VR模式。

+

STATE_ON_SUSPEND

+

6

+

表示显示设备为开启状态，CPU为挂起状态。

+
+ +## Display + +描述display对象的属性。 + +### 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

id

+

number

+

是

+

否

+

显示设备的id号。

+

name

+

string

+

是

+

否

+

显示设备的名称。

+

alive

+

boolean

+

是

+

否

+

显示设备是否启用。

+

state

+

DisplayState

+

是

+

否

+

显示设备的状态。

+

refreshRate

+

number

+

是

+

否

+

显示设备的刷新率。

+

rotation

+

number

+

是

+

否

+

显示设备的屏幕旋转角度。

+

width

+

number

+

是

+

否

+

显示设备的宽度，单位为像素。

+

height

+

number

+

是

+

否

+

显示设备的高度，单位为像素。

+

densityDPI

+

number

+

是

+

否

+

显示设备的屏幕密度，单位为DPI。

+

densityPixels

+

number

+

是

+

否

+

显示设备的屏幕密度，单位为像素。

+

scaledDensity

+

number

+

是

+

否

+

显示设备的显示字体的缩放因子。

+

xDPI

+

number

+

是

+

否

+

x方向中每英寸屏幕的确切物理像素值。

+

yDPI

+

number

+

是

+

否

+

y方向中每英寸屏幕的确切物理像素值。

+
+ +## display.getDefaultDisplay + +getDefaultDisplay\(callback: AsyncCallback\): void; + +获取当前默认的display对象。 + +- 参数 + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

callback

+

AsyncCallback<Display>

+

是

+

回调返回显示设备的属性。

+
+ +- 示例 + + ``` + var displayClass = null; + display.getDefaultDisplay((err, data) => { + if (err) { + console.error('Failed to obtain the default display object. Code: ' + JSON.stringify(err)); + return; + } + console.info('Succeeded in obtaining the default display object. Data:' + JSON.stringify(data)); + displayClass = data; + }); + ``` + + +## display.getAllDisplay + +getAllDisplay\(callback: AsyncCallback\>\): void; + +获取当前所有的display对象。 + +- 参数 + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

callback

+

AsyncCallback<Array<Display>>

+

是

+

回调返回多个显示设备的属性。

+
+ +- 示例 + + ``` + display.getAllDisplay((err, data) => { + if (err) { + console.error('Failed to obtain all the display objects. Code: ' + JSON.stringify(err)); + return; + } + console.info('Succeeded in obtaining all the display objects. Data: ' + JSON.stringify(data)) + }); + ``` + + +## display.on\('add'|'remove'|'change'\) + +on\(type: 'add'|'remove'|'change', callback: Callback\): void; + +开启监听。 + +- 参数 + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

string

+

是

+

设置监听类型。

+
  • type为"add"，表示监听增加显示设备。
  • type为"remove"，表示监听移除显示设备。
  • type为"change"，表示监听改变显示设备。
+

callback

+

Callback<number>

+

是

+

回调返回监听到的显示设备的id。

+
+ +- 示例 + + ``` + var type = "add"; + var callback = (data) => { + console.info('Listening enabled. Data: ' + JSON.stringify(data)) + } + display.on(type, callback); + ``` + + +## display.off\('add'|'remove'|'change'\) + +off\(type: 'add'|'remove'|'change', callback?: Callback\): void; + +关闭监听。 + +- 参数 + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

string

+

是

+

设置监听类型。

+
  • type为"add"，表示监听增加显示设备。
  • type为"remove"，表示监听移除显示设备。
  • type为"change"，表示监听改变显示设备。
+

callback

+

Callback<number>

+

否

+

回调返回监听到的显示设备的id。

+
+ +- 示例 + + ``` + var type = "remove"; + display.off(type); + ``` + + diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-distributedaccount.md b/zh-cn/application-dev/js-reference/apis/js-apis-distributedaccount.md new file mode 100644 index 0000000000000000000000000000000000000000..ec4ea3c8f4d9f72da48a5ebdc8ddf86d48adf2a9 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-distributedaccount.md @@ -0,0 +1,303 @@ +# 分布式帐号管理 + +- [导入模块](#zh-cn_topic_0000001209412247_section818153115716) +- [account\_distributedAccount.getDistributedAccountAbility](#zh-cn_topic_0000001209412247_section192192415554) +- [DistributedAccountAbility](#zh-cn_topic_0000001209412247_section189341937163212) + - [queryOsAccountDistributedInfo](#zh-cn_topic_0000001209412247_section7209156183516) + - [queryOsAccountDistributedInfo](#zh-cn_topic_0000001209412247_section186285471210) + - [updateOsAccountDistributedInfo](#zh-cn_topic_0000001209412247_section52221846181514) + - [updateOsAccountDistributedInfo](#zh-cn_topic_0000001209412247_section122504611155) + +- [DistributedInfo](#zh-cn_topic_0000001209412247_section720518449379) + +## 导入模块 + +``` +import account_distributedAccount from '@ohos.account.distributedAccount'; +``` + +## account\_distributedAccount.getDistributedAccountAbility + +getDistributedAccountAbility\(\): DistributedAccountAbility + +获取分布式帐号单实例对象。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

DistributedAccountAbility

+

返回一个实例，实例提供查询和更新分布式帐号登录状态方法。

+
+ +- 示例： + + ``` + const accountAbility = account_distributedAccount.getDistributedAccountAbility(); + ``` + + +## DistributedAccountAbility + +提供查询和更新分布式帐号登录状态方法\(需要先获取分布式帐号的单实例对象\)。 + +### queryOsAccountDistributedInfo + +queryOsAccountDistributedInfo\(callback: AsyncCallback\): void + +获取分布式帐号信息，使用callback回调异步返回结果。 + +需要权限：ohos.permission.MANAGE\_LOCAL\_ACCOUNTS，该权限仅供系统应用使用。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

callback

+

AsyncCallback<DistributedInfo>

+

是

+

获取分布式帐号信息的回调。

+
+ +- 示例： + + ``` + accountAbility.queryOsAccountDistributedInfo((err, data) => { + console.log("queryOsAccountDistributedInfo err: " + JSON.stringify(err)); + console.log('Query account info name: ' + data.name); + console.log('Query account info id: ' + data.id); + }); + ``` + + +### queryOsAccountDistributedInfo + +queryOsAccountDistributedInfo\(\): Promise + +获取分布式帐号信息，使用Promise方式异步返回结果。 + +需要权限：ohos.permission.MANAGE\_LOCAL\_ACCOUNTS，该权限仅供系统应用使用。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

Promise<DistributedInfo>

+

Promise实例，用于获取异步返回结果。

+
+ +- 示例： + + ``` + accountAbility.queryOsAccountDistributedInfo().then((data) => { + console.log('Query account info name: ' + data.name); + console.log('Query account info id: ' + data.id); + }).catch((err) => { + console.log("queryOsAccountDistributedInfoerr: " + JSON.stringify(err)); + }); + ``` + + +### updateOsAccountDistributedInfo + +updateOsAccountDistributedInfo\(accountInfo: DistributedInfo, callback: AsyncCallback\): void + +更新分布式帐号信息，使用callback回调异步返回结果。 + +需要权限：ohos.permission.MANAGE\_LOCAL\_ACCOUNTS，该权限仅供系统应用使用。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

accountInfo

+

DistributedInfo

+

是

+

用于更新的分布式帐号信息。

+

callback

+

AsyncCallback<void>

+

是

+

更新分布式帐号信息的回调。

+
+ +- 示例： + + ``` + let accountInfo = {id: '12345', name: 'ZhangSan', event: 'Ohos.account.event.LOGIN'}; + accountAbility.updateOsAccountDistributedInfo(accountInfo, (err) => { + console.log("queryOsAccountDistributedInfo err: " + JSON.stringify(err)); + }); + ``` + + +### updateOsAccountDistributedInfo + +updateOsAccountDistributedInfo\(accountInfo: DistributedInfo\): Promise + +更新分布式帐号信息，使用Promise方式异步返回结果。 + +需要权限：ohos.permission.MANAGE\_LOCAL\_ACCOUNTS，该权限仅供系统应用使用。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

accountInfo

+

DistributedInfo

+

是

+

分布式系统使用的操作系统帐户信息。

+
+ +- 返回值： + + + + + + + + + + +

类型

+

说明

+

Promise<void>

+

Promise实例，用于获取异步返回结果。

+
+ +- 示例： + + ``` + let accountInfo = {id: '12345', name: 'ZhangSan', event: 'Ohos.account.event.LOGIN'}; + accountAbility.updateOsAccountDistributedInfo(accountInfo).then(() => { + console.log('updateOsAccountDistributedInfo Success'); + }).catch((err) => { + console.log("updateOsAccountDistributedInfo err: " + JSON.stringify(err)); + }); + ``` + + +## DistributedInfo + +提供操作系统帐户的分布式信息。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

name

+

string

+

是

+

分布式帐号名称，非空字符串。

+

id

+

string

+

是

+

分布式帐号UID，非空字符串。

+

event

+

string

+

是

+

分布式帐号登录状态，包括登录、登出、Token失效和注销，分别对应以下字符串：

+
  • Ohos.account.event.LOGIN
  • Ohos.account.event.LOGOUT
  • Ohos.account.event.TOKEN_INVALID
  • Ohos.account.event.LOGOFF
+

scalableData

+

object

+

否

+

分布式帐号扩展信息，根据业务所需，以k-v形式传递定制化信息。

+

说明：该参数是预留的可选项，目前查询和更新的方法实现中未使用。

+
+ diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-fileio.md b/zh-cn/application-dev/js-reference/apis/js-apis-fileio.md new file mode 100644 index 0000000000000000000000000000000000000000..67a01b0732b021ddc536964fb04ca5f3e73fbc77 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-fileio.md @@ -0,0 +1,2132 @@ +# 文件管理 + +- [导入模块](#zh-cn_topic_0000001208447259_s56d19203690d4782bfc74069abb6bd71) +- [权限列表](#zh-cn_topic_0000001208447259_section11257113618419) +- [使用说明](#zh-cn_topic_0000001208447259_section17323786612) +- [fileio.statSync](#zh-cn_topic_0000001208447259_section014281412198) +- [fileio.opendirSync](#zh-cn_topic_0000001208447259_section7741145112216) +- [fileio.accessSync](#zh-cn_topic_0000001208447259_section9627104782212) +- [fileio.closeSync](#zh-cn_topic_0000001208447259_section11518951152211) +- [fileio.copyFileSync](#zh-cn_topic_0000001208447259_section752155117222) +- [fileio.mkdirSync](#zh-cn_topic_0000001208447259_section11419920164917) +- [fileio.openSync](#zh-cn_topic_0000001208447259_section7431145402220) +- [fileio.readSync](#zh-cn_topic_0000001208447259_section1682515612227) +- [fileio.rmdirSync](#zh-cn_topic_0000001208447259_section1420012610423) +- [fileio.unlinkSync](#zh-cn_topic_0000001208447259_section1659112267472) +- [fileio.writeSync](#zh-cn_topic_0000001208447259_section144923345218) +- [fileio.chmodSync7+](#zh-cn_topic_0000001208447259_section199971741181414) +- [fileio.fstatSync7+](#zh-cn_topic_0000001208447259_section14821537102219) +- [fileio.ftruncateSync7+](#zh-cn_topic_0000001208447259_section514613516446) +- [fileio.fchmodSync7+](#zh-cn_topic_0000001208447259_section16345147182418) +- [fileio.truncateSync7+](#zh-cn_topic_0000001208447259_section2759113014567) +- [fileio.renameSync7+](#zh-cn_topic_0000001208447259_section153395523116) +- [fileio.fsyncSync7+](#zh-cn_topic_0000001208447259_section11863111112544) +- [fileio.chownSync7+](#zh-cn_topic_0000001208447259_section1717097183517) +- [fileio.createStreamSync7+](#zh-cn_topic_0000001208447259_section1956102153713) +- [fileio.fdopenStreamSync7+](#zh-cn_topic_0000001208447259_section185160523522) +- [fileio.fchownSync7+](#zh-cn_topic_0000001208447259_section118619326160) +- [Stat](#zh-cn_topic_0000001208447259_section7315249105116) + - [属性](#zh-cn_topic_0000001208447259_section23751576140) + - [isBlockDevice](#zh-cn_topic_0000001208447259_section1041074182716) + - [isCharacterDevice](#zh-cn_topic_0000001208447259_section154111646277) + - [isDirectory](#zh-cn_topic_0000001208447259_section2041115418271) + - [isFIFO](#zh-cn_topic_0000001208447259_section1941244122719) + - [isFile](#zh-cn_topic_0000001208447259_section341284192710) + - [isSocket](#zh-cn_topic_0000001208447259_section154131413278) + - [isSymbolicLink](#zh-cn_topic_0000001208447259_section241317413274) + +- [Stream7+](#zh-cn_topic_0000001208447259_section109771933162919) + - [closeSync7+](#zh-cn_topic_0000001208447259_section45453128524) + - [flushSync7+](#zh-cn_topic_0000001208447259_section55111014181917) + - [writeSync7+](#zh-cn_topic_0000001208447259_section1959319151511) + - [readSync7+](#zh-cn_topic_0000001208447259_section547517381167) + +- [Dir](#zh-cn_topic_0000001208447259_section189341937163212) + - [readSync](#zh-cn_topic_0000001208447259_section10198204912710) + - [closeSync](#zh-cn_topic_0000001208447259_section1140053017119) + +- [Dirent](#zh-cn_topic_0000001208447259_section92331215118) + - [属性](#zh-cn_topic_0000001208447259_section152315121617) + - [isBlockDevice](#zh-cn_topic_0000001208447259_section121576105554) + - [isCharacterDevice](#zh-cn_topic_0000001208447259_section20158121011550) + - [isDirectory](#zh-cn_topic_0000001208447259_section181581010165520) + - [isFIFO](#zh-cn_topic_0000001208447259_section615811095517) + - [isFile](#zh-cn_topic_0000001208447259_section91591310195520) + - [isSocket](#zh-cn_topic_0000001208447259_section216031020555) + - [isSymbolicLink](#zh-cn_topic_0000001208447259_section1216010104553) + + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从 API Version 6 开始支持。 + +## 导入模块 + +``` +import fileio from '@ohos.fileio'; +``` + +## 权限列表 + +无 + +## 使用说明 + +使用该功能模块对文件/目录进行操作前，需要先获取其绝对路径。 + + + + + + + + + + + + + + + + +

目录类型

+

说明

+

相关接口

+

内部存储的缓存目录

+

可读写，随时可能清除，不保证持久性。一般用作下载临时目录或缓存目录。

+

getCacheDir

+

内部存储目录

+

随应用卸载删除。

+

getFilesDir

+
+ +“文件/目录绝对路径”=“应用目录路径”+“文件/目录名” + +通过上述接口获取到应用目录路径dir，文件名为“xxx.txt”，文件所在绝对路径为： + +``` +let path = dir + "xxx.txt" +``` + +文件描述符fd： + +``` +let fd = fileio.openSync(path); +``` + +## fileio.statSync + +statSync\(path:string\): Stat + +以同步方法获取文件的信息。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

path

+

string

+

是

+

待获取文件的绝对路径。

+
+ + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

Stat

+

表示文件的具体信息。

+
+ +- 示例： + + ``` + let stat = fileio.statSync(path); + ``` + + +## fileio.opendirSync + +opendirSync\(path: string\): Dir + +以同步方法打开文件目录。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

path

+

string

+

是

+

待打开文件目录的绝对路径。

+
+ +- 返回值： + + + + + + + + + + +

类型

+

说明

+

Dir

+

返回Dir对象。

+
+ +- 示例： + + ``` + let dir = fileio.opendirSync(path); + ``` + + +## fileio.accessSync + +accessSync\(path: string, mode?: number\): void + +以同步方法检查当前进程是否可访问某文件。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

path

+

string

+

是

+

待访问文件的绝对路径。

+

mode

+

number

+

否

+

访问文件时的选项，可给定如下选项，以按位或的方式使用多个选项，默认给定0。

+

确认当前进程是否具有对应权限：

+
  • 0：确认文件是否存在。
+
  • 1：确认当前进程是否具有可执行权限。
  • 2：确认当前进程是否具有写权限。
  • 4：确认当前进程是否具有读权限。
+
+ +- 示例： + + ``` + fileio.accessSync(path); + ``` + + +## fileio.closeSync + +closeSync\(fd: number\): void + +以同步方法关闭文件。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

fd

+

number

+

是

+

待关闭文件的文件描述符。

+
+ +- 示例： + + ``` + fileio.closeSync(fd); + ``` + + +## fileio.copyFileSync + +fileio.copyFileSync\(src: string, dest: string, mode?:number\): void + +以同步方法复制文件。 + +- 参数： + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

src

+

string

+

是

+

待复制文件的路径。

+

dest

+

string

+

是

+

目标文件路径。

+

mode

+

number

+

否

+

mode提供覆盖文件的选项，当前仅支持0，且默认为0。

+

0：完全覆盖目标文件，未覆盖部分将被裁切掉。

+
+ +- 示例： + + ``` + fileio.copyFileSync(src, dest); + ``` + + +## fileio.mkdirSync + +fileio.mkdirSync\(path: string, mode?: number\): void + +以同步方法创建目录。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

path

+

string

+

是

+

待创建目录的绝对路径。

+

mode

+

number

+

否

+

创建目录的权限，可给定如下权限，以按位或的方式追加权限，默认给定0o775。

+
  • 0o775：所有者具有读、写及可执行权限，其余用户具有读及可执行权限。
  • 0o700：所有者具有读、写及可执行权限。
  • 0o400：所有者具有读权限。
  • 0o200：所有者具有写权限。
  • 0o100：所有者具有可执行权限。
  • 0o070：所有用户组具有读、写及可执行权限。
  • 0o040：所有用户组具有读权限。
  • 0o020：所有用户组具有写权限。
  • 0o010：所有用户组具有可执行权限。
  • 0o007：其余用户具有读、写及可执行权限。
  • 0o004：其余用户具有读权限。
  • 0o002：其余用户具有写权限。
  • 0o001：其余用户具有可执行权限。
+
+ +- 示例： + + ``` + fileio.mkdirSync(path); + ``` + + +## fileio.openSync + +openSync\(path: string, flags?: number, mode?: number\): number + +以同步方法打开文件。 + +- 参数： + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

path

+

string

+

是

+

待打开文件的绝对路径。

+

flags

+

number

+

否

+

打开文件的选项，必须指定如下选项中的一个，默认以只读方式打开：

+
  • 0o0：只读打开。
  • 0o1：只写打开。
  • 0o2：读写打开。
+

同时，也可给定如下选项，以按位或的方式追加，默认不给定任何额外选项：

+
  • 0o100：若文件不存在，则创建文件。使用该选项时必须指定第三个参数 mode。
  • 0o200：如果追加了0o100选项，且文件已经存在，则出错。
  • 0o1000：如果文件存在且以只写或读写的方式打开文件，则将其长度裁剪为零。
  • 0o2000：以追加方式打开，后续写将追加到文件末尾。
  • 0o4000：如果path指向FIFO、块特殊文件或字符特殊文件，则本次打开及后续 IO 进行非阻塞操作。
  • 0o200000：如果path指向目录，则出错。
  • 0o400000：如果path指向符号链接，则出错。
  • 0o4010000：以同步IO的方式打开文件。
+

mode

+

number

+

否

+

若创建文件，则指定文件的权限，可给定如下权限，以按位或的方式追加权限，默认给定0o666。

+
  • 0o666：所有者具有读、写权限，所有用户组具有读、写权限，其余用户具有读、写权限。
  • 0o700：所有者具有读、写及可执行权限。
  • 0o400：所有者具有读权限。
  • 0o200：所有者具有写权限。
  • 0o100：所有者具有可执行权限。
  • 0o070：所有用户组具有读、写及可执行权限。
  • 0o040：所有用户组具有读权限。
  • 0o020：所有用户组具有写权限。
  • 0o010：所有用户组具有可执行权限。
  • 0o007：其余用户具有读、写及可执行权限。
  • 0o004：其余用户具有读权限。
  • 0o002：其余用户具有写权限。
  • 0o001：其余用户具有可执行权限。
+
+ +- 返回值： + + + + + + + + + + +

类型

+

说明

+

number

+

打开文件的文件描述符。

+
+ +- 示例： + + ``` + fileio.openSync(path); + ``` + + +## fileio.readSync + +readSync\(fd: number, buffer: ArrayBuffer, options?: Object\): number + +以同步方法从文件读取数据。 + +- 参数： + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

fd

+

number

+

是

+

待读取文件的文件描述符。

+

buffer

+

ArrayBuffer

+

是

+

用于读取文件的缓冲区。

+

options

+

Object

+

否

+

支持如下选项：

+
  • offset，number 类型，表示将数据读取到缓冲区的位置，即相对于缓冲区首地址的偏移。可选，默认为0。
  • length，number 类型，表示期望读取数据的长度。可选，默认缓冲区长度减去偏移长度。
  • position，number 类型，表示期望读取文件的位置。可选，默认从当前位置开始读。
+
+ +- 返回值： + + + + + + + + + + +

类型

+

说明

+

number

+

实际读取的长度。

+
+ +- 示例： + + ``` + let fd = fileio.openSync(path, 0o2); + let buf = new ArrayBuffer(4096); + fileio.readSync(fd, buf); + console.log(String.fromCharCode.apply(null, new Uint8Array(buf))); + ``` + + +## fileio.rmdirSync + +rmdirSync\(path: string\): void + +以同步方法删除目录。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

path

+

string

+

是

+

待删除目录的绝对路径。

+
+ +- 示例： + + ``` + fileio.rmdirSync(path); + ``` + + +## fileio.unlinkSync + +unlinkSync\(path: string\): void + +以同步方法删除文件。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

path

+

string

+

是

+

待删除文件的绝对路径。

+
+ +- 示例： + + ``` + fileio.unlinkSync(path); + ``` + + +## fileio.writeSync + +writeSync\(fd: number, buffer: ArrayBuffer | string, options?:Object\): number + +以同步方法将数据写入文件。 + +- 参数： + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

fd

+

number

+

是

+

待写入文件的文件描述符。

+

buffer

+

ArrayBuffer | string

+

是

+

待写入文件的数据，可来自缓冲区或字符串。

+

options

+

Object

+

否

+

支持如下选项：

+
  • offset，number类型，表示期望写入数据的位置相对于数据首地址的偏移。可选，默认为0。
  • length，number类型，表示期望写入数据的长度。可选，默认缓冲区长度减去偏移长度。
  • position，number类型，表示期望写入文件的位置。可选，默认从当前位置开始写。
  • encoding，string类型，当数据是 string 类型时有效，表示数据的编码方式，默认 'utf-8'，仅支持 'utf-8'。
+
+ +- 返回值： + + + + + + + + + + +

类型

+

说明

+

number

+

实际写入的长度。

+
+ +- 示例： + + ``` + let fd = fileio.openSync(path, 0o102, 0o666); + fileio.writeSync(fd, "hello, world"); + ``` + + +## fileio.chmodSync7+ + +chmodSync\(path: string, mode: number\): void + +以同步方法基于文件路径改变文件权限。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

path

+

string

+

是

+

待改变文件权限的绝对路径。

+

mode

+

number

+

是

+

改变文件权限，可给定如下权限，以按位或的方式追加权限。

+
  • 0o700：所有者具有读、写及可执行权限。
  • 0o400：所有者具有读权限。
  • 0o200：所有者具有写权限。
  • 0o100：所有者具有可执行权限。
  • 0o070：所有用户组具有读、写及可执行权限。
  • 0o040：所有用户组具有读权限。
  • 0o020：所有用户组具有写权限。
  • 0o010：所有用户组具有可执行权限。
  • 0o007：其余用户具有读、写及可执行权限。
  • 0o004：其余用户具有读权限。
  • 0o002：其余用户具有写权限。
  • 0o001：其余用户具有可执行权限。
+
+ +- 示例： + + ``` + fileio.chmodSync(fpath, mode); + ``` + + +## fileio.fstatSync7+ + +fstatSync\(fd: number\): Stat + +以同步方法基于文件描述符获取文件状态信息。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

fd

+

number

+

是

+

待获取文件的文件描述符。

+
+ + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

Promise<Stat>

+

表示文件的具体信息。

+
+ + +- 示例： + + ``` + let fd = fileio.openSync(path); + let stat = fileio.fstatSync(fd); + ``` + + +## fileio.ftruncateSync7+ + +ftruncateSync\(fd: number, len?: number\): void + +以同步方法基于文件描述符截断文件。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

fd

+

number

+

是

+

待截断文件的文件描述符。

+

len

+

number

+

否

+

文件截断后的长度，以字节为单位。

+
+ + +- 示例： + + ``` + fileio.ftruncate(fd, len); + ``` + + +## fileio.fchmodSync7+ + +fchmodSync\(existingPath: string, newPath: string\): void + +以同步方法基于文件描述符改变文件权限。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

fd

+

number

+

是

+

待改变文件的文件描述符。

+

mode

+

number

+

是

+

若创建文件，则指定文件的权限，可给定如下权限，以按位或的方式追加权限。

+
  • 0o700：所有者具有读、写及可执行权限。
  • 0o400：所有者具有读权限。
  • 0o200：所有者具有写权限。
  • 0o100：所有者具有可执行权限。
  • 0o070：所有用户组具有读、写及可执行权限。
  • 0o040：所有用户组具有读权限。
  • 0o020：所有用户组具有写权限。
  • 0o010：所有用户组具有可执行权限。
  • 0o007：其余用户具有读、写及可执行权限。
  • 0o004：其余用户具有读权限。
  • 0o002：其余用户具有写权限。
  • 0o001：其余用户具有可执行权限。
+
+ +- 示例： + + ``` + fileio.fchmodSync(fd, mode); + ``` + + +## fileio.truncateSync7+ + +truncateSync\(fpath: string, len?: number\): void + +以同步方法基于文件路径截断文件。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

path

+

string

+

是

+

待截断文件的绝对路径。

+

len

+

number

+

否

+

文件截断后的长度，以字节为单位。

+
+ + +- 示例： + + ``` + fileio.ftruncate(path, len); + ``` + + +## fileio.renameSync7+ + +renameSync\(oldPath: string, newPath: string\): void + +以同步方法重命名文件。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

oldPath

+

string

+

是

+

目标文件的当前绝对路径。

+

Newpath

+

String

+

是

+

目标文件的新绝对路径。

+
+ +- 示例： + + ``` + fileio.rename(oldpath，newpath); + ``` + + +## fileio.fsyncSync7+ + +fsyncSync\(fd: number\): void + +以同步方法同步文件数据。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

fd

+

number

+

是

+

待同步文件的文件描述符。

+
+ +- 示例： + + ``` + fileio.fyncsSync)(fd); + ``` + + +## fileio.chownSync7+ + +chownSync\(path: string, uid: number, gid: number\): void + +以同步的方法基于文件路径改变文件所有者。 + +- 参数： + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

path

+

string

+

是

+

待改变文件的绝对路径。

+

uid

+

number

+

是

+

新的UID。

+

gid

+

number

+

是

+

新的GID。

+
+ +- 示例： + + ``` + let stat = fileio.statSync(fpath) + fileio.chownSync(path, stat.uid, stat.gid); + ``` + + +## fileio.createStreamSync7+ + +createStreamSync\(path: string, mode: string\): Stream + +以同步方法基于文件路径打开文件流。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

path

+

string

+

是

+

待打开文件的绝对路径。

+

mode

+

string

+

是

+
  • r：打开只读文件，该文件必须存在。
  • r+：打开可读写的文件，该文件必须存在。
  • w：打开只写文件，若文件存在则文件长度清0，即该文件内容会消失。若文件不存在则建立该文件。
  • w+：打开可读写文件，若文件存在则文件长度清0，即该文件内容会消失。若文件不存在则建立该文件。
  • a：以附加的方式打开只写文件。若文件不存在，则会建立该文件，如果文件存在，写入的数据会被加到文件尾，即文件原先的内容会被保留。
  • a+：以附加方式打开可读写的文件。若文件不存在，则会建立该文件，如果文件存在，写入的数据会被加到文件尾后，即文件原先的内容会被保留。
+
+ + +- 返回值： + + + + + + + + + + +

参数名

+

说明

+

Stream

+

返回文件流的结果。

+
+ +- 示例： + + ``` + let ss = fileio.createStream(path, "r+"); + ``` + + +## fileio.fdopenStreamSync7+ + +fdopenStreamSync\(fd: number, mode: string\): Stream + +以同步方法基于文件描述符打开文件流。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

fd

+

number

+

是

+

待打开文件的文件描述符。

+

mode

+

string

+

是

+
  • r：打开只读文件，该文件必须存在。
  • r+：打开可读写的文件，该文件必须存在。
  • w：打开只写文件，若文件存在则文件长度清0，即该文件内容会消失。若文件不存在则建立该文件。
  • w+：打开可读写文件，若文件存在则文件长度清0，即该文件内容会消失。若文件不存在则建立该文件。
  • a：以附加的方式打开只写文件。若文件不存在，则会建立该文件，如果文件存在，写入的数据会被加到文件尾，即文件原先的内容会被保留。
  • a+：以附加方式打开可读写的文件。若文件不存在，则会建立该文件，如果文件存在，写入的数据会被加到文件尾后，即文件原先的内容会被保留。
+
+ + +- 返回值： + + + + + + + + + + +

参数名

+

说明

+

Stream

+

返回文件流的结果。

+
+ +- 示例： + + ``` + let ss = fileio.fdopenStreamSync(fd, "r+"); + ``` + + +## fileio.fchownSync7+ + +fchownSync\(fd: number, uid: number, gid: number\): void + +以同步方法基于文件描述符改变文件所有者。 + +- 参数： + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

fd

+

number

+

是

+

待改变文件的文件描述符。

+

uid

+

number

+

是

+

文件所有者的UID。

+

gid

+

number

+

是

+

文件所有组的GID。

+
+ +- 示例： + + ``` + let stat = fileio.statSync(fpath); + fileio.fchownSync(fd, stat.uid, stat.gid); + ``` + + +## Stat + +文件具体信息，在调用Stat的方法前，需要先通过[fileio.statSync](#zh-cn_topic_0000001208447259_section014281412198)来构建一个Stat实例。 + +### 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

dev

+

number

+

是

+

否

+

标识包含该文件的主设备号。

+

ino

+

number

+

是

+

否

+

标识该文件。通常同设备上的不同文件的INO不同。

+

mode

+

number

+

是

+

否

+

表示文件类型及权限，其首 4 位表示文件类型，后 12 位表示权限。各特征位的含义如下：

+
  • 0o170000：可用于获取文件类型的掩码。
  • 0o140000：文件是套接字。
  • 0o120000：文件是符号链接。
  • 0o100000：文件是一般文件。
  • 0o060000：文件属于块设备。
  • 0o040000：文件是目录。
  • 0o020000：文件是字符设备。
  • 0o010000：文件是具名管道，即FIFO。
  • 0o0700：可用于获取用户权限的掩码。
  • 0o0400：用户读，对于普通文件，所有者可读取文件；对于目录，所有者可读取目录项。
  • 0o0200：用户写，对于普通文件，所有者可写入文件；对于目录，所有者可创建/删除目录项。
  • 0o0100：用户执行，对于普通文件，所有者可执行文件；对于目录，所有者可在目录中搜索给定路径名。
  • 0o0070：可用于获取用户组权限的掩码。
  • 0o0040：用户组读，对于普通文件，所有用户组可读取文件；对于目录，所有用户组可读取目录项。
  • 0o0020：用户组写，对于普通文件，所有用户组可写入文件；对于目录，所有用户组可创建/删除目录项。
  • 0o0010：用户组执行，对于普通文件，所有用户组可执行文件；对于目录，所有用户组是否可在目录中搜索给定路径名。
  • 0o0007：可用于获取其他用户权限的掩码。
  • 0o0004：其他读，对于普通文件，其余用户可读取文件；对于目录，其他用户组可读取目录项。
  • 0o0002：其他写，对于普通文件，其余用户可写入文件；对于目录，其他用户组可创建/删除目录项。
  • 0o0001：其他执行，对于普通文件，其余用户可执行文件；对于目录，其他用户组可在目录中搜索给定路径名。
+

nlink

+

number

+

是

+

否

+

文件的硬链接数。

+

uid

+

number

+

是

+

否

+

文件所有者的ID。

+

gid

+

number

+

是

+

否

+

文件所有组的ID。

+

rdev

+

number

+

是

+

否

+

标识包含该文件的从设备号。

+

size

+

number

+

是

+

否

+

文件的大小，以字节为单位。仅对普通文件有效。

+

blocks

+

number

+

是

+

否

+

文件占用的块数，计算时块大小按512B计算。

+

atime

+

number

+

是

+

否

+

上次访问该文件的时间，表示距1970年1月1日0时0分0秒的秒数。

+

mtime

+

number

+

是

+

否

+

上次修改该文件的时间，表示距1970年1月1日0时0分0秒的秒数。

+

ctime

+

number

+

是

+

否

+

最近改变文件状态的时间，表示距1970年1月1日0时0分0秒的秒数。

+
+ +### isBlockDevice + +isBlockDevice\(\): boolean + +用于判断当前目录项是否是块特殊文件。一个块特殊文件只能以块为粒度进行访问，且访问的时候带缓存。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

boolean

+

表示当前目录项是否是块特殊设备。

+
+ +- 示例： + + ``` + let isBLockDevice = fileio.statSync(path).isBlockDevice(); + ``` + + +### isCharacterDevice + +isCharacterDevice\(\): boolean + +用于判断当前目录项是否是字符特殊文件。一个字符特殊设备可进行随机访问，且访问的时候不带缓存。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

boolean

+

表示当前目录项是否是字符特殊设备。

+
+ +- 示例： + + ``` + let isCharacterDevice = fileio.statSync(path).isCharacterDevice(); + ``` + + +### isDirectory + +isDirectory\(\): boolean + +用于判断当前目录项是否是目录。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

boolean

+

表示当前目录项是否是目录。

+
+ +- 示例： + + ``` + let isDirectory= fileio.statSync(path).isDirectory(); + ``` + + +### isFIFO + +isFIFO\(\): boolean + +用于判断当前目录项是否是命名管道（有时也称为FIFO）。命名管道通常用于进程间通信。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

boolean

+

表示当前目录项是否是 FIFO。

+
+ +- 示例： + + ``` + let isFIFO= fileio.statSync(path).isFIFO(); + ``` + + +### isFile + +isFile\(\): boolean + +用于判断当前目录项是否是普通文件。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

boolean

+

表示当前目录项是否是普通文件。

+
+ +- 示例： + + ``` + let isFile= fileio.statSync(fpath).isFile(); + ``` + + +### isSocket + +isSocket\(\): boolean + +用于判断当前目录项是否是套接字。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

boolean

+

表示当前目录项是否是套接字。

+
+ +- 示例： + + ``` + let isSocket = fileio.statSync(path).isSocket(); + ``` + + +### isSymbolicLink + +isSymbolicLink\(\): boolean + +用于判断当前目录项是否是符号链接。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

boolean

+

表示当前目录项是否是符号链接。

+
+ +- 示例： + + ``` + let isSymbolicLink = fileio.statSync(path).isSymbolicLink(); + ``` + + +## Stream7+ + +文件流，在调用Stream的方法前，需要先通过[fileio.createStreamSync](#zh-cn_topic_0000001208447259_section1956102153713)方法来构建一个Stream实例。 + +### closeSync7+ + +closeSync\(\): void + +同步关闭文件流。 + +- 示例： + + ``` + let ss= fileio.createStreamSync(path); + ss.closeSync(); + ``` + + +### flushSync7+ + +flushSync\(\): void + +同步刷新文件流。 + +- 示例： + + ``` + let ss= fileio.createStreamSync(path); + ss.flushSync(); + ``` + + +### writeSync7+ + +writeSync\(buffer: ArrayBuffer | string, options?:Object\): number + +以同步方法将数据写入流文件。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

buffer

+

ArrayBuffer | string

+

是

+

待写入文件的数据，可来自缓冲区或字符串。

+

options

+

Object

+

否

+

支持如下选项：

+
  • offset，number类型，表示期望写入数据的位置相对于数据首地址的偏移。可选，默认为0。
  • length，number类型，表示期望写入数据的长度。可选，默认缓冲区长度减去偏移长度。
  • position，number类型，表示期望写入文件的位置。可选，默认从当前位置开始写。
  • encoding，string类型，当数据是 string 类型时有效，表示数据的编码方式，默认 'utf-8'，仅支持 'utf-8'。
+
+ +- 返回值： + + + + + + + + + + +

类型

+

说明

+

number

+

实际写入的长度。

+
+ +- 示例： + + ``` + let ss= fileio.createStreamSync(fpath,"r+"); + ss.writeSync("hello, world",{offset: 1,length: 5,position: 5,encoding :'utf-8'}); + ``` + + +### readSync7+ + +readSync\(buffer: ArrayBuffer, options?: Object\): number + +以同步方法从流文件读取数据。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

buffer

+

ArrayBuffer

+

是

+

用于读取文件的缓冲区。

+

options

+

Object

+

否

+

支持如下选项：

+
  • offset，number 类型，表示将数据读取到缓冲区的位置，即相对于缓冲区首地址的偏移。可选，默认为0。
  • length，number 类型，表示期望读取数据的长度。可选，默认缓冲区长度减去偏移长度。
  • position，number 类型，表示期望读取文件的位置。可选，默认从当前位置开始读。
+
+ +- 返回值： + + + + + + + + + + +

类型

+

说明

+

number

+

实际读取的长度。

+
+ +- 示例： + + ``` + let ss = fileio.createStreamSync(fpath, "r+"); + ss.readSync(new ArrayBuffer(4096),{offset: 1,length: FILE_CONTENT.length,position: 5}); + ``` + + +## Dir + +管理目录，在调用Dir的方法前，需要先通过[fileio.opendirSync](#zh-cn_topic_0000001208447259_section7741145112216)方法来构建一个Dir实例。 + +### readSync + +readSync\(\): Dirent + +同步读取下一个目录项。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

Dirent

+

表示一个目录项。

+
+ +- 示例： + + ``` + let dir = fileio.opendirSync(dpath); + let dirent = dir.readSync(); + console.log(dirent.name); + ``` + + +### closeSync + +closeSync\(\): void + +用于关闭目录。目录被关闭后，Dir中持有的文件描述将被释放，后续将无法从Dir中读取目录项。 + +- 示例： + + ``` + let dir = fileio.opendirSync(dpath); + dir.closeSync(); + ``` + + +## Dirent + +在调用Dirent的方法前，需要先通过[readSync](#zh-cn_topic_0000001208447259_section10198204912710)方法来构建一个Dirent实例。 + +### 属性 + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

name

+

string

+

是

+

否

+

目录项的名称。

+
+ +### isBlockDevice + +isBlockDevice\(\): boolean + +用于判断当前目录项是否是块特殊文件。一个块特殊文件只能以块为粒度进行访问，且访问的时候带缓存。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

boolean

+

表示当前目录项是否是块特殊设备。

+
+ +- 示例： + + ``` + let dir = fileio.opendirSync(dpath); + let isBLockDevice = dir.readSync().isBlockDevice(); + ``` + + +### isCharacterDevice + +isCharacterDevice\(\): boolean + +用于判断当前目录项是否是字符特殊设备。一个字符特殊设备可进行随机访问，且访问的时候不带缓存。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

boolean

+

表示当前目录项是否是字符特殊设备。

+
+ +- 示例： + + ``` + let dir = fileio.opendirSync(dpath); + let isCharacterDevice = dir.readSync().isCharacterDevice(); + ``` + + +### isDirectory + +isDirectory\(\): boolean + +用于判断当前目录项是否是目录。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

boolean

+

表示当前目录项是否是目录。

+
+ +- 示例： + + ``` + let dir = fileio.opendirSync(dpath); + let isDirectory = dir.readSync().isDirectory(); + ``` + + +### isFIFO + +isFIFO\(\): boolean + +用于判断当前目录项是否是命名管道（有时也称为FIFO）。命名管道通常用于进程间通信。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

boolean

+

表示当前目录项是否是FIFO。

+
+ +- 示例： + + ``` + let dir = fileio.opendirSync(dpath); + let isFIFO = dir.readSync().isFIFO(); + ``` + + +### isFile + +isFile\(\): boolean + +用于判断当前目录项是否是普通文件。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

boolean

+

表示当前目录项是否是普通文件。

+
+ +- 示例： + + ``` + let dir = fileio.opendirSync(dpath); + let isFile = dir.readSync().isFile(); + ``` + + +### isSocket + +isSocket\(\): boolean + +用于判断当前目录项是否是套接字。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

boolean

+

表示当前目录项是否是套接字。

+
+ +- 示例： + + ``` + let dir = fileio.opendirSync(dpath); + let isSocket = dir.readSync().isSocket(); + ``` + + +### isSymbolicLink + +isSymbolicLink\(\): boolean + +用于判断当前目录项是否是符号链接。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

boolean

+

表示当前目录项是否是符号链接。

+
+ +- 示例： + + ``` + let dir = fileio.opendirSync(dpath); + let isSymbolicLink = dir.readSync().isSymbolicLink(); + ``` + + diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-hiappevent.md b/zh-cn/application-dev/js-reference/apis/js-apis-hiappevent.md new file mode 100644 index 0000000000000000000000000000000000000000..ed824883bbd53a1c12ff830cb6f86a38aab55332 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-hiappevent.md @@ -0,0 +1,437 @@ +# 应用打点 + +- [导入模块](#zh-cn_topic_0000001163817362_s56d19203690d4782bfc74069abb6bd71) +- [权限](#zh-cn_topic_0000001163817362_section11257113618419) +- [hiAppEvent.write](#zh-cn_topic_0000001163817362_section570630172512) +- [hiAppEvent.write](#zh-cn_topic_0000001163817362_section0857164934517) +- [hiAppEvent.configure](#zh-cn_topic_0000001163817362_section5378143772018) +- [ConfigOption](#zh-cn_topic_0000001163817362_section1877154515916) +- [EventType](#zh-cn_topic_0000001163817362_section099619567453) +- [Event](#zh-cn_topic_0000001163817362_section107763162597) + - [属性](#zh-cn_topic_0000001163817362_section13128518134118) + +- [Param](#zh-cn_topic_0000001163817362_section382852073116) + - [属性](#zh-cn_topic_0000001163817362_section0452193894112) + + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从 API Version 7 开始支持。 + +## 导入模块 + +``` +import hiAppEvent from '@ohos.hiAppEvent'; +``` + +## 权限 + +无 + +## hiAppEvent.write + +write\(eventName: string, eventType: EventType, keyValues: object, callback: AsyncCallback\): void + +应用事件打点方法，将事件写入到当天的事件文件中，可接收类型为Json对象的事件参数，使用callback方式作为异步回调。 + +- 参数： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

eventName

+

string

+

是

+

应用事件名称。

+

eventType

+

EventType

+

是

+

应用事件类型。

+

keyValues

+

object

+

是

+

应用事件的参数，key类型只能为string，value类型只能为string、number、boolean、Array（数组数据类型只能为string、number、boolean）。

+

callback

+

AsyncCallback<void>

+

否

+

回调函数，可以在回调函数中处理接口返回值。

+
  • 返回值为0表示事件校验成功，事件正常异步写入事件文件；
  • 大于0表示事件校验存在异常参数，在忽略异常参数后将事件异步写入事件文件；
  • 小于0表示事件校验失败，不将事件写入事件文件。
+
+ +- 示例： + + ``` + hiAppEvent.write("test_event", hiAppEvent.EventType.FAULT, {"int_data":100, "str_data":"strValue"}, (err, value) => { + if (err) { + // 事件写入异常：事件存在异常参数时忽略异常参数后继续写入，或者事件校验失败时不执行写入 + console.error(`failed to write event because ${err.code}`); + return; + } + + // 事件写入正常 + console.log(`success to write event: ${value}`); + }); + ``` + + +## hiAppEvent.write + +write\(eventName: string, eventType: EventType, keyValues: object\): Promise + +应用事件打点方法，将事件写入到当天的事件文件中，可接收类型为Json对象的事件参数，使用promise方式作为异步回调。 + +- 参数： + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

eventName

+

string

+

是

+

应用事件名称。

+

eventType

+

EventType

+

是

+

应用事件类型。

+

keyValues

+

object

+

是

+

应用事件的参数，key类型只能为string，value类型只能为string、number、boolean、Array（数组数据类型只能为string、number、boolean）。

+
+ +- 返回值： + + + + + + + + + + +

类型

+

说明

+

Promise<void>

+

Promise实例，可以在其then()、catch()方法中分别对事件写入成功、写入异常的情况进行回调处理。

+
+ +- 示例： + + ``` + hiAppEvent.write("test_event", hiAppEvent.EventType.FAULT, {"int_data":100, "str_data":"strValue"}) + .then((value) => { + // 事件写入正常 + console.log(`success to write event: ${value}`); + }).catch((err) => { + // 事件写入异常：事件存在异常参数时忽略异常参数后继续写入，或者事件校验失败时不执行写入 + console.error(`failed to write event because ${err.code}`); + }); + ``` + + +## hiAppEvent.configure + +configure\(config: ConfigOption\): boolean + +应用事件打点配置方法，可用于配置打点开关、文件目录存储限额大小等功能。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

config

+

ConfigOption

+

是

+

应用事件打点配置项对象。

+
+ +- 返回值： + + + + + + + + + + +

类型

+

说明

+

boolean

+

配置结果，true 表示配置成功，false 表示配置失败。

+
+ +- 示例： + + ``` + // 配置应用事件打点功能开关 + hiAppEvent.configure({ + disable: true + }); + + // 配置事件文件目录存储限额大小 + hiAppEvent.configure({ + maxStorage: '100M' + }); + ``` + + +## ConfigOption + +此接口提供了应用打点的配置选项。 + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

disable

+

boolean

+

否

+

应用打点功能开关。配置值为true表示关闭打点功能，false表示不关闭打点功能。

+

maxStorage

+

string

+

否

+

打点数据本地存储文件所在目录的配额大小，默认限额为“10M”。所在目录大小超出限额后会对目录进行清理操作，会按从旧到新的顺序逐个删除打点数据文件，直到目录大小不超出限额时停止。

+
+ +## EventType + +事件类型枚举。 + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

默认值

+

说明

+

FAULT

+

1

+

故障类型事件。

+

STATISTIC

+

2

+

统计类型事件。

+

SECURITY

+

3

+

安全类型事件。

+

BEHAVIOR

+

4

+

行为类型事件。

+
+ +## Event + +此接口提供了所有预定义事件的事件名称常量。 + +### 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

USER_LOGIN

+

string

+

是

+

否

+

用户登录事件。

+

USER_LOGOUT

+

string

+

是

+

否

+

用户登出事件。

+

DISTRIBUTED_SERVICE_START

+

string

+

是

+

否

+

分布式服务启动事件。

+
+ +## Param + +此接口提供了所有预定义参数的参数名称常量。 + +### 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

USER_ID

+

string

+

是

+

否

+

用户自定义ID。

+

DISTRIBUTED_SERVICE_NAME

+

string

+

是

+

否

+

分布式服务名称。

+

DISTRIBUTED_SERVICE_INSTANCE_ID

+

string

+

是

+

否

+

分布式服务实例ID。

+
+ diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-i18n.md b/zh-cn/application-dev/js-reference/apis/js-apis-i18n.md new file mode 100644 index 0000000000000000000000000000000000000000..486ee1518416ed0d1fa8350d651c5c09f864b7b7 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-i18n.md @@ -0,0 +1,261 @@ +# 国际化（I18n） + +- [导入模块](#zh-cn_topic_0000001163490118_s56d19203690d4782bfc74069abb6bd71) +- [权限](#zh-cn_topic_0000001163490118_section11257113618419) +- [i18n.getDisplayLanguage](#zh-cn_topic_0000001163490118_section4734636131914) +- [i18n.getDisplayCountry](#zh-cn_topic_0000001163490118_section156643561735) +- [i18n.getSystemLanugage](#zh-cn_topic_0000001163490118_section25111622174311) +- [i18n.getSystemRegion](#zh-cn_topic_0000001163490118_section65121922114312) +- [i18n.getSystemLocale](#zh-cn_topic_0000001163490118_section10514122204316) + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从 API Version 7 开始支持。 + +## 导入模块 + +``` +import i18n from '@ohos.i18n'; +``` + +## 权限 + +无 + +## i18n.getDisplayLanguage + +getDisplayLanguage\(language: string, locale: string, sentenceCase?: boolean\): string + +获取指定语言的本地化显示文本。 + +- 参数： + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

language

+

string

+

是

+

指定语言

+

locale

+

string

+

是

+

显示指定语言的区域ID

+

sentenceCase

+

boolean

+

否

+

本地化显示文本是否要首字母大写

+
+ +- 返回值： + + + + + + + + + + +

类型

+

说明

+

string

+

指定语言的本地化显示文本

+
+ +- 示例： + + ``` + i18n.getDisplayLanguage("zh", "en-GB", true); + i18n.getDisplayLanguage("zh", "en-GB"); + ``` + + +## i18n.getDisplayCountry + +getDisplayCountry\(country: string, locale: string, sentenceCase?: boolean\): string + +获取指定国家的本地化显示文本。 + +- 参数： + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

country

+

string

+

是

+

指定国家

+

locale

+

string

+

是

+

显示指定国家的区域ID

+

sentenceCase

+

boolean

+

否

+

本地化显示文本是否要首字母大写

+
+ +- 返回值： + + + + + + + + + + +

类型

+

说明

+

string

+

指定国家的本地化显示文本

+
+ +- 示例： + + ``` + i18n.getDisplayCountry("zh-CN", "en-GB", true); + i18n.getDisplayCountry("zh-CN", "en-GB"); + ``` + + +## i18n.getSystemLanugage + +getSystemLanguage\(\): string + +获取系统语言。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

string

+

系统语言ID

+
+ +- 示例： + + ``` + i18n.getSystemLanguage(); + ``` + + +## i18n.getSystemRegion + +getSystemRegion\(\): string + +获取系统地区。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

string

+

系统地区ID

+
+ +- 示例： + + ``` + i18n.getSystemRegion(); + ``` + + +## i18n.getSystemLocale + +getSystemLocale\(\): string + +获取系统区域。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

string

+

系统区域ID

+
+ +- 示例： + + ``` + i18n.getSystemLocale(); + ``` + + diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-intl.md b/zh-cn/application-dev/js-reference/apis/js-apis-intl.md new file mode 100644 index 0000000000000000000000000000000000000000..167c63e8e3feebde4122c684bf362f0d1a91e01f --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-intl.md @@ -0,0 +1,1211 @@ +# 国际化（Intl） + +- [导入模块](#zh-cn_topic_0000001103315838_s56d19203690d4782bfc74069abb6bd71) +- [权限](#zh-cn_topic_0000001103315838_section11257113618419) +- [Locale](#zh-cn_topic_0000001103315838_section422715643011) + - [属性](#zh-cn_topic_0000001103315838_section1778221585513) + - [constructor](#zh-cn_topic_0000001103315838_section32282618302) + - [toString](#zh-cn_topic_0000001103315838_section6361163518520) + - [maximize](#zh-cn_topic_0000001103315838_section16459237152) + - [minimize](#zh-cn_topic_0000001103315838_section8112183915517) + +- [DateTimeFormat](#zh-cn_topic_0000001103315838_section164003264319) + - [constructor](#zh-cn_topic_0000001103315838_section740052693112) + - [constructor](#zh-cn_topic_0000001103315838_section1400182613114) + - [format](#zh-cn_topic_0000001103315838_section1840262614313) + - [formatRange](#zh-cn_topic_0000001103315838_section4402132614312) + - [resolvedOptions](#zh-cn_topic_0000001103315838_section1093513817123) + +- [NumberFormat](#zh-cn_topic_0000001103315838_section10453336123119) + - [constructor](#zh-cn_topic_0000001103315838_section14453163693117) + - [constructor](#zh-cn_topic_0000001103315838_section54533363319) + - [format](#zh-cn_topic_0000001103315838_section94551936203114) + - [resolvedOptions](#zh-cn_topic_0000001103315838_section13178203919219) + +- [DateTimeOptions](#zh-cn_topic_0000001103315838_section12882825611) + - [属性](#zh-cn_topic_0000001103315838_section1059684317312) + +- [NumberOptions](#zh-cn_topic_0000001103315838_section7200123494410) + - [属性](#zh-cn_topic_0000001103315838_section2201153419440) + + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从 API Version 6 开始支持。 + +## 导入模块 + +``` +import intl from '@ohos.intl'; +``` + +## 权限 + +无 + +## Locale + +### 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

language

+

string

+

是

+

否

+

与区域设置关联的语言

+

script

+

string

+

是

+

否

+

语言的书写方式

+

region

+

string

+

是

+

否

+

与区域设置相关的地区

+

baseName

+

string

+

是

+

否

+

Locale的基本核心信息

+

caseFirst

+

string

+

是

+

否

+

区域的整理规则是否考虑大小写

+

calendar

+

string

+

是

+

否

+

区域的日历信息

+

collation

+

string

+

是

+

否

+

区域的排序规则

+

hourCycle

+

string

+

是

+

否

+

区域的时制信息

+

numberingSystem

+

string

+

是

+

否

+

区域使用的数字系统

+

numeric

+

boolean

+

是

+

否

+

是否对数字字符具有特殊的排序规则处理

+
+ +### constructor + +constructor\(locale: string, options?:options\) + +创建区域对象 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

locale

+

string

+

是

+

包含区域设置信息的字符串，包括语言以及可选的脚本和区域。

+

options

+

options

+

否

+

用于创建区域对象的选项。

+
+ + +- 示例： + + ``` + var locale = new Locale("zh-CN"); + ``` + + +### toString + +toString\(\): string + +将区域信息转换为字符串 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

string

+

字符串形式的区域信息

+
+ + +- 示例： + + ``` + var locale = new Locale("zh-CN"); + locale.toString(); + ``` + + +### maximize + +maximize\(\): Locale + +最大化区域信息，若缺少脚本与地区信息，则补齐。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

Locale

+

最大化后的区域对象

+
+ + +- 示例： + + ``` + var locale = new Locale("zh-CN"); + locale.maximize(); + ``` + + +### minimize + +minimize\(\): Locale + +最小化区域信息，若包含脚本与地区信息，则去除。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

Locale

+

最小化后的区域对象

+
+ + +- 示例： + + ``` + var locale = new Locale("zh-CN"); + locale.minimize(); + ``` + + +## DateTimeFormat + +### constructor + +constructor\(locale: string, options?:DateTimeOptions\) + +创建时间日期格式化对象。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

locale

+

string

+

是

+

包含区域设置信息的字符串，包括语言以及可选的脚本和区域。

+

options

+

DateTimeOptions

+

否

+

用于创建时间日期格式化的选项。

+
+ + +- 示例： + + ``` + var datefmt= new DateTimeFormat("zh-CN", { dateStyle: 'full', timeStyle: 'medium' }); + ``` + + +### constructor + +constructor\(locales: Array, options?:DateTimeOptions\) + +创建时间日期格式化对象。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

locales

+

Array<string>

+

是

+

包含区域设置信息的字符串的数组。

+

options

+

DateTimeOptions

+

否

+

用于创建时间日期格式化的选项。

+
+ + +- 示例： + + ``` + var datefmt= new DateTimeFormat(["ban", "zh"], { dateStyle: 'full', timeStyle: 'medium' }); + ``` + + +### format + +format\(date: Date\): string; + +格式化时间日期字符串。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

date

+

Date

+

是

+

时间日期对象。

+
+ +- 返回值： + + + + + + + + + + +

类型

+

说明

+

string

+

格式化后的时间日期字符串

+
+ + +- 示例： + + ``` + var date = new Date(2021, 11, 17, 3, 24, 0); + var datefmt = new Intl.DateTimeFormat("en-GB"); + datefmt.format(date); + ``` + + +### formatRange + +formatRange\(fromDate: Date, toDate: Date\): string; + +格式化时间日期段字符串。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

startDate

+

Date

+

是

+

起始的时间日期

+

endDate

+

Date

+

是

+

结束的时间日期

+
+ +- 返回值： + + + + + + + + + + +

类型

+

说明

+

string

+

格式化后的时间日期段字符串

+
+ + +- 示例： + + ``` + var startDate = new Date(2021, 11, 17, 3, 24, 0); + var endDate = new Date(2021, 11, 18, 3, 24, 0); + var datefmt = new Intl.DateTimeFormat("en-GB"); + datefmt.formatRange(startDate, endDate); + ``` + + +### resolvedOptions + +resolvedOptions\(\): DateTimeOptions + +获取DateTimeFormat 对象的格式化选项。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

DateTimeOptions

+

DateTimeFormat 对象的格式化选项。

+
+ + +- 示例： + + ``` + var datefmt = new Intl.DateTimeFormat("en-GB"); + datefmt.resolvedOptions(); + ``` + + +## NumberFormat + +### constructor + +constructor\(locale: string, options?:NumberOptions\) + +创建数字格式化对象。 + +参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

locale

+

string

+

是

+

包含区域设置信息的字符串，包括语言以及可选的脚本和区域。

+

options

+

NumberOptions

+

否

+

用于创建数字格式化的选项。

+
+ +- 示例： + + ``` + var numfmt = new Intl.NumberFormat("en-GB", {style:'decimal', notation:"scientific"}); + ``` + + +### constructor + +constructor\(locales: Array, options?:NumberOptions\) + +创建数字格式化对象。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

locales

+

Array<string>

+

是

+

包含区域设置信息的字符串的数组。

+

options

+

NumberOptions

+

否

+

用于创建数字格式化的选项。

+
+ + +- 示例： + + ``` + var numfmt = new Intl.NumberFormat(["en-GB", "zh"], {style:'decimal', notation:"scientific"}); + ``` + + +### format + +format\(number: number\): string; + +格式化数字字符串。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

number

+

number

+

是

+

数字对象

+
+ +- 返回值： + + + + + + + + + + +

类型

+

说明

+

string

+

格式化后的数字字符串

+
+ + +- 示例： + + ``` + var numfmt = new Intl.NumberFormat(["en-GB", "zh"], {style:'decimal', notation:"scientific"}); + numfmt.format(1223); + ``` + + +### resolvedOptions + +resolvedOptions\(\): NumberOptions + +获取NumberFormat 对象的格式化选项。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

NumberOptions

+

NumberFormat 对象的格式化选项。

+
+ + +- 示例： + + ``` + var numfmt = new Intl.NumberFormat(["en-GB", "zh"], {style:'decimal', notation:"scientific"}); + numfmt.resolvedOptions(); + ``` + + +## DateTimeOptions + +表示时间日期格式化选项。 + +### 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

locale

+

string

+

是

+

否

+

区域参数

+

dateStyle

+

string

+

是

+

是

+

日期显示格式，取值范围："long", "short", "medium", "full"

+

timeStyle

+

string

+

是

+

是

+

时间显示格式，取值范围："long", "short", "medium", "full"

+

hourCycle

+

string

+

是

+

是

+

时制格式，取值范围："h11", "h12", "h23", "h24".

+

timeZone

+

string

+

是

+

是

+

使用的时区（合法的IANA时区ID）

+

numberingSystem

+

string

+

是

+

是

+

数字系统

+

hour12

+

boolean

+

是

+

是

+

是否使用12小时制

+

weekday

+

string

+

是

+

是

+

工作日的显示格式，取值范围："long", "short", "narrow"

+

era

+

string

+

是

+

是

+

时代的显示格式，取值范围："long", "short", "narrow"

+

year

+

string

+

是

+

是

+

年份的显示格式，取值范围："numeric", "2-digit"

+

month

+

string

+

是

+

是

+

月份的显示格式，取值范围："numeric", "2-digit", "long", "short", "narrow"

+

day

+

string

+

是

+

是

+

日期的显示格式，取值范围："numeric", "2-digit"

+

hour

+

string

+

是

+

是

+

小时的显示格式，取值范围："numeric", "2-digit"

+

minute

+

string

+

是

+

是

+

分钟的显示格式，取值范围："numeric", "2-digit"

+

second

+

string

+

是

+

是

+

秒钟的显示格式，取值范围："numeric", "2-digit"

+

timeZoneName

+

string

+

是

+

是

+

时区名称的本地化表示

+

dayPeriod

+

string

+

是

+

是

+

时段的显示格式，取值范围："long", "short", "narrow"

+

localeMatcher

+

string

+

是

+

是

+

要使用的区域匹配算法，取值范围："lookup", "best fit"

+

formatMatcher

+

string

+

是

+

是

+

要使用的格式匹配算法，取值范围："basic", "best fit"

+
+ +## NumberOptions + +表示设备支持的能力。 + +### 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

locale

+

string

+

是

+

否

+

区域参数

+

currency

+

string

+

是

+

是

+

货币单位

+

currencySign

+

string

+

是

+

是

+

货币单位的符号显示

+

currencyDisplay

+

string

+

是

+

是

+

货币的显示方式，取值范围："symbol", "narrowSymbol", "code", "name"

+

unit

+

string

+

是

+

是

+

单位

+

unitDisplay

+

string

+

是

+

是

+

单位的显示格式，取值范围："long", "short", "medium"

+

signDisplay

+

string

+

是

+

是

+

数字符号的显示格式，取值范围："auto", "never", "always", "expectZero"

+

compactDisplay

+

string

+

是

+

是

+

紧凑型的显示格式，取值范围："long", "short"

+

notation

+

string

+

是

+

是

+

数字的格式化规格，取值范围："standard", "scientific", "engineering", "compact"

+

localeMatcher

+

string

+

是

+

是

+

要使用的区域匹配算法，取值范围："lookup", "best fit"

+

style

+

string

+

是

+

是

+

数字的显示格式，取值范围："decimal", "currency", "percent", "unit"

+

numberingSystem

+

string

+

是

+

是

+

数字系统

+

useGrouping

+

boolean

+

是

+

是

+

是否分组显示

+

miniumumIntegerDigits

+

number

+

是

+

是

+

最少整数个数

+

miniumumFractionDigits

+

number

+

是

+

是

+

最少小数个数

+

maxiumumFractionDigits

+

number

+

是

+

是

+

最多小数个数

+

miniumumSignificantDigits

+

number

+

是

+

是

+

最少有效位个数

+

maxiumumSignificantDigits

+

number

+

是

+

是

+

最多有效位个数

+
+ diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-libupdateclient.md b/zh-cn/application-dev/js-reference/apis/js-apis-libupdateclient.md new file mode 100644 index 0000000000000000000000000000000000000000..260f7b7f6d946d90947d67f0d71189a934de4597 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-libupdateclient.md @@ -0,0 +1,1345 @@ +# 升级 + +- [导入模块](#zh-cn_topic_0000001149710363_section749mcpsimp) +- [权限列表](#zh-cn_topic_0000001149710363_section752mcpsimp) +- [getNewVersionInfo\(callback: AsyncCallback\): void](#zh-cn_topic_0000001149710363_section755mcpsimp) +- [getNewVersionInfo\(\): Promise](#zh-cn_topic_0000001149710363_section6448163034418) +- [checkNewVersion\(callback: AsyncCallback\): void](#zh-cn_topic_0000001149710363_section817mcpsimp) +- [checkNewVersion\(\): Promise](#zh-cn_topic_0000001149710363_section1849020253364) +- [verifyUpdatePackage\(upgradeFile: string, certsFile: string\): void](#zh-cn_topic_0000001149710363_section16874643181519) +- [rebootAndCleanUserData\(\): Promise](#zh-cn_topic_0000001149710363_section3242122116516) +- [rebootAndCleanUserData\(callback: AsyncCallback\): void](#zh-cn_topic_0000001149710363_section15242102114516) +- [applyNewVersion\(\): Promise](#zh-cn_topic_0000001149710363_section129661811195815) +- [applyNewVersion\(callback: AsyncCallback\): void](#zh-cn_topic_0000001149710363_section3381192816421) +- [download\(\): void](#zh-cn_topic_0000001149710363_section879mcpsimp) +- [updater.upgrade\(\):void](#zh-cn_topic_0000001149710363_section894mcpsimp) +- [setUpdatePolicy\(policy: UpdatePolicy, callback: AsyncCallback\): void](#zh-cn_topic_0000001149710363_section909mcpsimp) +- [setUpdatePolicy\(policy: UpdatePolicy\): Promise](#zh-cn_topic_0000001149710363_section8623195623216) +- [getUpdatePolicy\(callback: AsyncCallback\): void](#zh-cn_topic_0000001149710363_section1572219615412) +- [getUpdatePolicy\(\): Promise](#zh-cn_topic_0000001149710363_section1553973516586) +- [getUpdater\(upgradeFile: string, updateType?: UpdateTypes\): Updater](#zh-cn_topic_0000001149710363_section24411282249) +- [getUpdaterForOther\(upgradeFile: string, device: string, updateType?: UpdateTypes\): Updater](#zh-cn_topic_0000001149710363_section13233572411) +- [getUpdaterFromOther\(upgradeFile: string, device: string, updateType?: UpdateTypes\): Updater](#zh-cn_topic_0000001149710363_section8954144012416) +- [UpdateTypes](#zh-cn_topic_0000001149710363_section197492318513) +- [PackageTypes](#zh-cn_topic_0000001149710363_section19316738135716) +- [InstallMode](#zh-cn_topic_0000001149710363_section15197191318487) +- [NewVersionStatus](#zh-cn_topic_0000001149710363_section148419085512) +- [UpdatePolicy](#zh-cn_topic_0000001149710363_section5220623434) +- [NewVersionInfo](#zh-cn_topic_0000001149710363_section15357856134620) +- [CheckResult](#zh-cn_topic_0000001149710363_section125591515125819) +- [DescriptionInfo](#zh-cn_topic_0000001149710363_section6472174588) + +升级范围：升级整个OpenHarmony系统，包括内置的资源、预置应用；第三方的应用不在升级的范围。 + +升级依赖：升级分为SD卡升级和在线升级两种。 + +- SD卡升级依赖升级包和SD卡安装。 +- 在线升级依赖手机厂商部署的用于管理升级包的服务器。服务器由手机厂商部署，IP由调用者传入，请求的request接口是固定的，由手机厂商开发。 + +## 导入模块 + +``` +import client from 'libupdateclient.z.so' +``` + +## 权限列表 + +无 + +## getNewVersionInfo\(callback: AsyncCallback\): void + +获取新版本信息，使用callback方式作为异步方法。 + +- 参数 + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

callback

+

AsyncCallback<NewVersionInfo>

+

否

+

回调返回新版本信息

+
+ + +- 返回值 + + 无 + + +- 示例 + + ``` + updater.getNewVersionInfo(info => { + console.log("getNewVersionInfo success " + info.status); + console.log(`info versionName = ` + info.result[0].versionName); + console.log(`info versionCode = ` + info.result[0].versionCode); + console.log(`info verifyInfo = ` + info.result[0].verifyInfo); + )}; + ``` + + +## getNewVersionInfo\(\): Promise + +获取新版本信息，使用promise方式作为异步方法。 + +- 参数 + + 无 + + +- 返回值 + + + + + + + + + + +

类型

+

说明

+

Promise<NewVersionInfo>

+

Promise，用于异步获取结果

+
+ + +- 示例 + + ``` + var p = updater.getNewVersionInfo(); + p.then(function (value) { + console.log(`info versionName = ` + value.result[0].versionName); + console.log(`info versionCode = ` + value.result[0].versionCode); + console.log(`info verifyInfo = ` + value.result[0].verifyInfo); + }).catch(function (err) { + console.log("getNewVersionInfo promise error: " + err.code); + )}; + ``` + + +## checkNewVersion\(callback: AsyncCallback\): void + +检查新版本，使用callback方式作为异步方法。 + +- 参数 + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

callback

+

AsyncCallback<NewVersionInfo>

+

否

+

回调返回新版本信息

+
+ + +- 返回值 + + 无 + + +- 示例 + + ``` + updater.checkNewVersion(info => { + console.log("checkNewVersion success " + info.status); + console.log(`info versionName = ` + info.result[0].versionName); + console.log(`info versionCode = ` + info.result[0].versionCode); + console.log(`info verifyInfo = ` + info.result[0].verifyInfo); + )}; + ``` + + +## checkNewVersion\(\): Promise + +检查新版本，使用promise方式作为异步方法。 + +- 参数 + + 无 + + +- 返回值 + + + + + + + + + + +

类型

+

说明

+

Promise<NewVersionInfo>

+

Promise函数返回新版本信息

+
+ + +- 示例 + + ``` + var p = updater.checkNewVersion(); + p.then(function (value) { + console.log(`info versionName = ` + value.result[0].versionName); + console.log(`info versionCode = ` + value.result[0].versionCode); + console.log(`info verifyInfo = ` + value.result[0].verifyInfo); + }).catch(function (err) { + console.log("checkNewVersion promise error: " + err.code); + )}; + ``` + + +## verifyUpdatePackage\(upgradeFile: string, certsFile: string\): void + +升级前检查升级包是否有效。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

upgradeFile

+

string

+

是

+

待校验的升级包路径

+

certsFile

+

string

+

是

+

证书路径

+
+ +- 返回值： + + 无 + +- 示例： + + ``` + var getVar = update.getUpdater(); + getVar.on("verifyProgress", function (callback){ + console.info('on verifyProgress ' + callback.percent); + }); + getVar.verifyUpdatePackage("XXX", "XXX"); + getVar.off("verifyProgress"); + ``` + + +## rebootAndCleanUserData\(\): Promise + +重启设备并清除用户分区数据。 + +- 参数： + + 无 + + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

Promise<number>

+

Promise示例，用于异步获取结果。

+
+ + +- 示例： + + ``` + var getVar = update.getUpdater(); + p = getVar.rebootAndCleanUserData(); + p.then(function (value) { + console.info("rebootAndCleanUserData promise success: " + value); + }).catch(function (err) { + console.info("rebootAndCleanUserData promise error: " + err.code); + }); + ``` + + +## rebootAndCleanUserData\(callback: AsyncCallback\): void + +重启设备并清除用户分区数据。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

callback

+

Function

+

是

+

AsyncCallback<number>

+
+ + +- 返回值： + + 无 + + +- 示例： + + ``` + var getVar = update.getUpdater(); + getVar.rebootAndCleanUserData(function (err, data) { + if (err.code == 0) { + console.info("rebootAndCleanUserData callback success:" + data) + } else { + console.info("rebootAndCleanUserData callback err:" + err.code) + } + }); + ``` + + +## applyNewVersion\(\): Promise + +重启设备后安装升级包。 + +- 参数： + + 无 + + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

Promise<number>

+

Promise示例，用于异步获取结果。

+
+ + +- 示例： + + ``` + var getVar = update.getUpdater(); + p.then(function (value) { + console.info("applyNewVersion promise success: " + value); + }).catch(function (err) { + console.info("applyNewVersion promise error: " + err.code); + }); + ``` + + +## applyNewVersion\(callback: AsyncCallback\): void + +重启设备后安装升级包。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

callback

+

Function

+

是

+

AsyncCallback<number>

+
+ + +- 返回值： + + 无 + + +- 示例： + + ``` + var getVar = update.getUpdater(); + getVar.applyNewVersion(function (err, data) { + if (err.code == 0) { + console.info("applyNewVersion callback success:" + data) + } else { + console.info("applyNewVersion callback err:" + err.code) + } + }); + ``` + + +## download\(\): void + +下载新版本，并监听下载进程。 + +- 参数 + + 无 + + +- 返回值 + + 无 + + +- 示例 + +``` +updater.on("downloadProgress", progress => { + console.log("downloadProgress on" + progress); + console.log(`downloadProgress status: ` + progress.status); + console.log(`downloadProgress percent: ` + progress.percent); +)}; +updater.download(); +``` + +## updater.upgrade\(\):void + +启动升级。 + +- 参数 + + 无 + + +- 返回值 + + 无 + + +- 示例 + +``` +updater.on("upgradeProgress", progress => { + console.log("upgradeProgress on" + progress); + console.log(`upgradeProgress status: ` + progress.status); + console.log(`upgradeProgress percent: ` + progress.percent); +)}; +updater.upgrade(); +``` + +## setUpdatePolicy\(policy: UpdatePolicy, callback: AsyncCallback\): void + +设置升级策略，使用callback方式作为异步方法。 + +- 参数 + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

policy

+

UpdatePolicy

+

是

+

设置升级策略

+

callback

+

AsyncCallback<number>

+

是

+

回调返回结果

+
+ + +- 返回值 + + 无 + +- 示例 + + ``` + // 设置策略 + let policy = { + autoDownload: false, + autoDownloadNet: true, + mode: 2, + autoUpgradeInterval: [ 2, 3 ], + autoUpgradeCondition: 2 + } + updater.setUpdatePolicy(policy, function(result) { + console.log("setUpdatePolicy ", result)}); + ``` + + +## setUpdatePolicy\(policy: UpdatePolicy\): Promise + +设置升级策略，使用promise方式作为异步方法。 + +- 参数 + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

policy

+

UpdatePolicy

+

是

+

设置升级策略

+
+ + +- 返回值 + + + + + + + + + + +

类型

+

说明

+

Promise<number>

+

Promise函数返回设置结果

+
+ + +- 示例 + + ``` + let policy = { + autoDownload: false, + autoDownloadNet: true, + mode: 2, + autoUpgradeInterval: [ 2, 3 ], + autoUpgradeCondition: 2 + } + updater.setUpdatePolicy(policy) + .then(data=> + console.log('set policy success') + ) + ``` + + +## getUpdatePolicy\(callback: AsyncCallback\): void + +获取升级策略信息，使用callback方式作为异步方法。 + +- 参数 + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

callback

+

AsyncCallback<UpdatePolicy>

+

否

+

回调返回升级策略信息

+
+ + +- 返回值 + + + + + + + + + + + + +

参数名

+

类型

+

说明

+

policy

+

UpdatePolicy

+

升级策略信息

+
+ + +- 示例 + + ``` + updater.getUpdatePolicy(policy => { + console.log("getUpdatePolicy success"); + console.log(`policy autoDownload = ` + policy.autoDownload); + console.log(`policy autoDownloadNet = ` + policy.autoDownloadNet); + console.log(`policy mode = ` + policy.mode); + )}; + ``` + + +## getUpdatePolicy\(\): Promise + +获取升级策略，通过promise方式作为异步方法。 + +- 参数 + + 无 + + +- 返回值 + + + + + + + + + + +

类型

+

说明

+

Promise<UpdatePolicy>

+

Promise函数返回升级策略信息

+
+ + +- 示例 + + ``` + p = updater.getUpdatePolicy(); + p.then(function (value) { + console.log(`info autoDownload = ` + value.autoDownload); + console.log(`info autoDownloadNet = ` + value.autoDownloadNet); + console.log(`info mode = ` + value.mode); + }).catch(function (err) { + console.log("getUpdatePolicy promise error: " + err.code); + )}; + ``` + + +## getUpdater\(upgradeFile: string, updateType?: UpdateTypes\): Updater + +获取本地升级Updater。 + +- 参数 + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

upgradeFile

+

string

+

是

+

升级文件

+

updateType

+

UpdateTypes

+

是

+

升级类型

+
+ + +- 返回值 + + + + + + + + + + + + +

参数名

+

类型

+

说明

+

updater

+

Updater

+

升级对象

+
+ + +- 示例 + + ``` + try { + page.data.updater = client.getUpdater('/data/updater/updater.zip', 'OTA'); + } catch(error) { + console.error(" Fail to get updater error: " + error); + } + ``` + + +## getUpdaterForOther\(upgradeFile: string, device: string, updateType?: UpdateTypes\): Updater + +获取升级对象给待升级设备。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

upgradeFile

+

string

+

是

+

升级文件

+

device

+

string

+

是

+

待升级设备

+

updateType

+

UpdateTypes

+

是

+

升级类型

+
+ + +- 返回值 + + + + + + + + + + + + +

参数名

+

类型

+

说明

+

updater

+

Updater

+

升级对象

+
+ + +- 示例 + + ``` + try { + page.data.updater = client.getUpdaterForOther('/data/updater/updater.zip', '1234567890', 'OTA'); + } catch(error) { + console.error(" Fail to get updater error: " + error); + } + ``` + + +## getUpdaterFromOther\(upgradeFile: string, device: string, updateType?: UpdateTypes\): Updater + +获取其它设备为本设备升级的Updater。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

upgradeFile

+

string

+

是

+

升级文件

+

device

+

string

+

是

+

待升级设备

+

updateType

+

UpdateTypes

+

是

+

升级类型

+
+ + +- 返回值 + + + + + + + + + + + + +

参数名

+

类型

+

说明

+

updater

+

Updater

+

升级对象

+
+ + +- 示例 + + ``` + try { + page.data.updater = client.getUpdaterFromOther('/data/updater/updater.zip', '1234567890', 'OTA'); + } catch(error) { + console.error(" Fail to get updater error: " + error); + } + ``` + + +## UpdateTypes + +升级类型 + + + + + + + + + + + + + +

参数名

+

说明

+

OTA

+

OTA升级

+

patch

+

补丁升级

+
+ +## PackageTypes + +升级包类型 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

默认值

+

说明

+

PACKAGE_TYPE_NORMAL

+

1

+

通用升级包

+

PACKAGE_TYPE_BASE

+

2

+

基础升级包

+

PACKAGE_TYPE_CUST

+

3

+

定制升级包

+

PACKAGE_TYPE_PRELOAD

+

4

+

预装升级包

+

PACKAGE_TYPE_COTA

+

5

+

参数配置升级包

+

PACKAGE_TYPE_VERSION

+

6

+

版本升级包

+

PACKAGE_TYPE_PATCH

+

7

+

补丁包

+
+ +## InstallMode + +安装模式 + + + + + + + + + + + + + + + + + + + + +

参数名

+

默认值

+

说明

+

INSTALL_MODE_NORMAL

+

0

+

正常升级

+

INSTALL_MODE_NIGHT

+

1

+

夜间升级

+

INSTALL_MODE_AUTO

+

2

+

自动升级

+
+ +## NewVersionStatus + +新版本检测状态 + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

默认值

+

说明

+

VERSION_STATUS_ERR

+

-1

+

检测版本时出错

+

VERSION_STATUS_NEW

+

0

+

检测到新版本

+

VERSION_STATUS_NONE

+

1

+

没有检测到新版本

+

VERSION_STATUS_BUSY

+

2

+

检测版本时忙

+
+ +## UpdatePolicy + +升级策略 + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

必填

+

说明

+

autoDownload

+

bool

+

是

+

自动升级开关

+

installMode

+

InstallMode

+

是

+

安装模式

+

autoUpgradeInterval

+

Array<number>

+

是

+

自动升级时间段

+
+ +## NewVersionInfo + +新版本信息 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

必填

+

说明

+

status

+

NewVersionStatus

+

是

+

升级状态

+

errMsg

+

string

+

是

+

错误信息

+

checkResults

+

Array<CheckResult>

+

是

+

检测结果

+

descriptionInfo

+

Array<DescriptionInfo>

+

是

+

描述信息

+
+ +## CheckResult + +检测结果 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

必填

+

说明

+

versionName

+

string

+

是

+

版本名称

+

versionCode

+

number

+

是

+

版本编码

+

size

+

number

+

是

+

版本大小

+

verifyInfo

+

string

+

是

+

版本校验信息

+

packageType

+

PackageTypes

+

是

+

版本类型

+

descriptionId

+

string

+

是

+

版本描述信息

+
+ +## DescriptionInfo + +版本描述信息 + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

必填

+

说明

+

descriptionId

+

string

+

是

+

版本versionId信息

+

content

+

string

+

是

+

版本changelog信息

+
+ diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-power.md b/zh-cn/application-dev/js-reference/apis/js-apis-power.md new file mode 100644 index 0000000000000000000000000000000000000000..760f20553ab6a33eaaef0db7ce18608d25a6dcd1 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-power.md @@ -0,0 +1,216 @@ +# 系统电源管理 + +- [支持设备](#zh-cn_topic_0000001209567627_section8858145319412) +- [导入模块](#zh-cn_topic_0000001209567627_s56d19203690d4782bfc74069abb6bd71) +- [权限](#zh-cn_topic_0000001209567627_section11257113618419) +- [power.shutdownDevice](#zh-cn_topic_0000001209567627_section192192415554) +- [power.rebootDevice](#zh-cn_topic_0000001209567627_section1773218207620) +- [power.isScreenOn](#zh-cn_topic_0000001209567627_section69511458115312) +- [power.isScreenOn](#zh-cn_topic_0000001209567627_section143367619119) + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从 API Version 7 开始支持。 + +## 支持设备 + + + + + + + + + + + + + + +

手机

+

平板

+

智慧屏

+

智能穿戴

+

支持

+

支持

+

不支持

+

支持

+
+ +## 导入模块 + +``` +import power from '@ohos.power'; +``` + +## 权限 + +关机权限： ohos.permission.SHUTDOWN + +重启权限： ohos.permission.REBOOT + +重启并进入recovery模式的权限：ohos.permission.REBOOT\_RECOVERY + +## power.shutdownDevice + +shutdownDevice\(reason: string\): void + +系统关机。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

reason

+

string

+

是

+

关机原因。

+
+ +- 示例： + + ``` + power.shutdownDevice("shutdown_test"); + console.info('power_shutdown_device_test success') + ``` + + +## power.rebootDevice + +rebootDevice\(reason: string\): void + +重启设备。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

reason

+

string

+

是

+

重启原因。

+
+ +- 示例： + + ``` + power.rebootDevice("reboot_test"); + console.info('power_reboot_device_test success') + ``` + + +## power.isScreenOn + +isScreenOn\(callback: AsyncCallback\): void + +检测当前设备的亮灭屏状态。 + +- 参数： + + + + + + + + + + + + + + +

类型

+

类型

+

必填

+

说明

+

callback

+

AsyncCallback<boolean>

+

是

+

指定的callback回调方法，用于获取返回值。

+

callback返回值：亮屏返回true，灭屏返回false。

+
+ + +- 示例： + + ``` + power.isScreenOn((error, screenOn) => { + if (typeof error === "undefined") { + console.info('screenOn status is ' + screenOn); + done(); + } else { + console.log('error: ' + error); + done(); + } + }) + ``` + + +## power.isScreenOn + +isScreenOn\(\): Promise + +检测当前设备的亮灭屏状态。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

Promise<boolean>

+

Promise实例，用于异步获取返回值，亮屏返回true，灭屏返回false。

+
+ +- 示例： + + ``` + power.isScreenOn() + .then(screenOn => { + console.info('screenOn status is ' + screenOn); + done(); + }) + .catch(error => { + console.log('error: ' + error); + done(); + }) + ``` + + diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-process.md b/zh-cn/application-dev/js-reference/apis/js-apis-process.md new file mode 100644 index 0000000000000000000000000000000000000000..bc03638eabe27e9e625971591719987403d9a23f --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-process.md @@ -0,0 +1,797 @@ +# 获取进程相关的信息 + +- [导入模块](#zh-cn_topic_0000001164647334_s56d19203690d4782bfc74069abb6bd71) +- [权限](#zh-cn_topic_0000001164647334_section11257113618419) +- [属性](#zh-cn_topic_0000001164647334_section3317114914546) +- [ChildProcess](#zh-cn_topic_0000001164647334_section6521387200) + - [属性](#zh-cn_topic_0000001164647334_section18482944113517) + - [wait](#zh-cn_topic_0000001164647334_section9594134194318) + - [getOutput](#zh-cn_topic_0000001164647334_section1732152812716) + - [getErrorOutput](#zh-cn_topic_0000001164647334_section14671040141315) + - [close](#zh-cn_topic_0000001164647334_section28221257121518) + - [kill](#zh-cn_topic_0000001164647334_section9528134162114) + +- [process.runCmd](#zh-cn_topic_0000001164647334_section19358326587) +- [process.abort](#zh-cn_topic_0000001164647334_section564715329325) +- [process.on](#zh-cn_topic_0000001164647334_section2394161818344) +- [process.off](#zh-cn_topic_0000001164647334_section1228205293415) +- [process.exit](#zh-cn_topic_0000001164647334_section114951112414) +- [process.cwd](#zh-cn_topic_0000001164647334_section13686195712218) +- [process.chdir](#zh-cn_topic_0000001164647334_section43111956114115) +- [process.uptime](#zh-cn_topic_0000001164647334_section167881439204913) +- [process.kill](#zh-cn_topic_0000001164647334_section3121181316503) + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从 API Version 7 开始支持。 + +## 导入模块 + +``` +import process from '@ohos.process'; +``` + +## 权限 + +无 + +## 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

可读

+

可写

+

说明

+

getEgid

+

number

+

是

+

否

+

获取进程的数字有效组标识。

+

getEuid

+

number

+

是

+

否

+

获取进程的数字有效用户身份。

+

getGid

+

number

+

是

+

否

+

获取进程的数字组标识。

+

getUid

+

number

+

是

+

否

+

获取进程的数字用户标识。

+

getGroups

+

number[]

+

是

+

否

+

获取一个带有补充组id的数组。

+

getPid

+

number

+

是

+

否

+

获取当前进程的pid。

+

getPpid

+

number

+

是

+

否

+

获取当前进程的父进程的pid。

+
+ +## ChildProcess + +主进程可以获取子进程的标准输入输出，以及发送信号和关闭子进程。 + +### 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

可读

+

可写

+

说明

+

pid

+

number

+

是

+

否

+

返回子进程的pid。

+

ppid

+

number

+

是

+

否

+

返回子进程的父进程的pid。

+

exitCode

+

number

+

是

+

否

+

返回子进程的退出码。

+

killed

+

boolean

+

是

+

否

+

返回父进程给子进程发信号是否成功。

+
+ +### wait + +wait\(\): Promise + +等待子进程运行结束，返回promise对象，其值为子进程的退出码。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

Promise<number>

+

异步返回子进程的退出码。

+
+ +- 示例： + + ``` + import process from '@ohos.process'; + var child = process.runCmd('ls'); + var result = child.wait(); + result.then(val=>{ + console.log("result = " + val); + }) + ``` + + +### getOutput + +getOutput\(\): Promise + +获取子进程的标准输出。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

Promise<Uint8Array>

+

异步返回标准输出的字节流。

+
+ +- 示例： + + ``` + import process from '@ohos.process'; + var child = process.runCmd('ls'); + var result = child.wait(); + child.getOutput.then(val=>{ + console.log("child.getOutput = " + val); + }) + ``` + + +### getErrorOutput + +getErrorOutput\(\): Promise + +getErrorOutput函数用来获取子进程的标准错误输出。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

Promise<Uint8Array>

+

异步返回标准错误输出的字节流。

+
+ +- 示例： + + ``` + import process from '@ohos.process'; + var child = process.runCmd('madir test.text'); + var result = child.wait(); + child.getErrorOutput.then(val=>{ + console.log("child.getErrorOutput= " + val); + }) + ``` + + +### close + +close\(\): void + +关闭正在运行的子进程。 + +- 示例： + + ``` + import process from '@ohos.process'; + var child = process.runCmd('sleep 5; ls'); + child.close(); + ``` + + +### kill + +kill\(signal: number | string\): void + +kill函数用来发送信号给子进程。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

signal

+

number | string

+

是

+

数字或字符串。

+
+ +- 示例： + + ``` + import process from '@ohos.process'; + var child = process.runCmd('sleep 5; ls'); + child.kill(9); + ``` + + +## process.runCmd + +runCmd\(command: string, options?: \{ timeout : number, killSignal ：number | string, maxBuffer : number \}\) : ChildProcess + +通过runcmd可以fork一个新的进程来运行一段shell，并返回ChildProcess对象。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

command

+

string

+

是

+

shell命令。

+

options

+

Object

+

否

+

相关选项参数。

+
+ + **表 1** options + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

必填

+

说明

+

timeout

+

number

+

否

+

子进程运行的ms数，当子进程运行时间超出此时间，则父进程发送killSignal信号给子进程。timeout默认为0。

+

killSignal

+

number | string

+

否

+

子进程运行时间超出timeout时，父进程发送killSignal 信号给子进程。killSignal 默认为'SIGTERM'。

+

maxBuffer

+

number

+

否

+

子进程标准输入输出的最大缓冲区大小，当超出此大小时则终止子进程。maxBuffer默认1024*1024。

+
+ +- 返回值： + + + + + + + + + + +

类型

+

说明

+

ChildProcess

+

子进程对象。

+
+ +- 示例： + + ``` + import process from '@ohos.process'; + var child = process.runCmd('ls', { maxBuffer : 2 }); + var result = child.wait(); + child.getOutput.then(val=>{ + console.log("child.getOutput = " + val); + } + ``` + + +## process.abort + +abort\(\): void + +该方法会导致进程立即退出并生成一个核心文件，谨慎使用。 + +- 示例： + + ``` + import process from '@ohos.process'; + process.abort(); + ``` + + +## process.on + +on\(type: string, listener: EventListener\): void + +用该方法来存储用户所触发的事件。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

string

+

是

+

存储事件的type。

+

listener

+

EventListener

+

是

+

回调的事件。

+
+ + **表 2** EventListener + + + + + + + + + + +

名称

+

说明

+

EventListener = (evt: Object) => void

+ 		  
+ +- 示例： + + ``` + import process from '@ohos.process'; + process.on("data", (e)=>{ + console.log("data callback); + }) + ``` + + +## process.off + +off\(type: string\): boolean + +用该方法来删除用户存储的事件。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

string

+

是

+

删除事件的type。

+
+ +- 返回值： + + + + + + + + + + +

类型

+

说明

+

boolean

+

事件是否删除成功。

+
+ +- 示例： + + ``` + import process from '@ohos.process'; + process.on("data", (e)=>{ + console.log("data callback); + }) + var result = process.off("data"); + ``` + + +## process.exit + +exit\(code: number\): void + +用该方法终止程序，谨慎使用。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

code

+

number

+

是

+

进程的退出码。

+
+ +- 示例： + + ``` + import process from '@ohos.process'; + process.exit(0); + ``` + + +## process.cwd + +cwd\(\): string + +用该方法获取进程的工作目录。 + +- 示例： + + ``` + import process from '@ohos.process'; + var path = process.cwd(); + ``` + + +## process.chdir + +chdir\(dir: string\): void + +用该方法更改进程的当前工作目录。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

dir

+

string

+

是

+

路径。

+
+ +- 示例： + + ``` + import process from '@ohos.process'; + process.chdir('/system'); + ``` + + +## process.uptime + +uptime\(\): number + +获取当前系统已运行的秒数。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

number

+

当前系统已运行的秒数。

+
+ +- 示例： + + ``` + import process from '@ohos.process'; + var time = process.uptime(); + ``` + + +## process.kill + +kill\(pid: number，signal: number \): boolean + +用该方法发送signal到指定的进程。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

pid

+

number

+

是

+

进程的id。

+

signal

+

number

+

是

+

发送的信号。

+
+ +- 返回值： + + + + + + + + + + +

类型

+

说明

+

boolean

+

信号是否发送成功。

+
+ +- 示例： + + ``` + import process from '@ohos.process' + var pres = process.getPid + var result = that.kill(pres, 28) + ``` + + diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-resourcemanage.md b/zh-cn/application-dev/js-reference/apis/js-apis-resourcemanage.md new file mode 100644 index 0000000000000000000000000000000000000000..d2efacc991c6f3809b938f6b9fb0beea724eae9c --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-resourcemanage.md @@ -0,0 +1,1246 @@ +# 资源管理 + +- [导入模块](#zh-cn_topic_0000001163468626_s56d19203690d4782bfc74069abb6bd71) +- [权限](#zh-cn_topic_0000001163468626_section11257113618419) +- [resourceManager.getResourceManager](#zh-cn_topic_0000001163468626_section192192415554) +- [resourceManager.getResourceManager](#zh-cn_topic_0000001163468626_section46989284018) +- [resourceManager.getResourceManager](#zh-cn_topic_0000001163468626_section0543541673) +- [resourceManager.getResourceManager](#zh-cn_topic_0000001163468626_section1816951410716) +- [Direction](#zh-cn_topic_0000001163468626_section099619567453) +- [DeviceType](#zh-cn_topic_0000001163468626_section4734636131914) +- [ScreenDensity](#zh-cn_topic_0000001163468626_section7331173812197) +- [Configuration](#zh-cn_topic_0000001163468626_section12882825611) + - [属性](#zh-cn_topic_0000001163468626_section254242964810) + +- [DeviceCapability](#zh-cn_topic_0000001163468626_section7200123494410) + - [属性](#zh-cn_topic_0000001163468626_section2201153419440) + +- [ResourceManager](#zh-cn_topic_0000001163468626_section137771134135415) + - [getString](#zh-cn_topic_0000001163468626_section9779153419548) + - [getString](#zh-cn_topic_0000001163468626_section159261924165411) + - [getStringArray](#zh-cn_topic_0000001163468626_section4490132775420) + - [getStringArray](#zh-cn_topic_0000001163468626_section1992322017541) + - [getMedia](#zh-cn_topic_0000001163468626_section6710152513409) + - [getMedia](#zh-cn_topic_0000001163468626_section6711152517409) + - [getMediaBase64](#zh-cn_topic_0000001163468626_section11402326194315) + - [getMediaBase64](#zh-cn_topic_0000001163468626_section6404726124312) + - [getConfiguration](#zh-cn_topic_0000001163468626_section8123152874015) + - [getConfiguration](#zh-cn_topic_0000001163468626_section312515284406) + - [getDeviceCapability](#zh-cn_topic_0000001163468626_section104951210135017) + - [getDeviceCapability](#zh-cn_topic_0000001163468626_section114961410115013) + - [getPluralString](#zh-cn_topic_0000001163468626_section1549163064013) + - [getPluralString](#zh-cn_topic_0000001163468626_section165183015405) + + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从 API Version 6 开始支持。 + +## 导入模块 + +``` +import resourceManager from '@ohos.resourceManager'; +``` + +## 权限 + +无 + +## resourceManager.getResourceManager + +getResourceManager\(callback: AsyncCallback\): void + +获取当前应用的资源管理对象，使用callback形式返回ResourceManager对象。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

callback

+

AsyncCallback<ResourceManager>

+

是

+

callback方式返回ResourceManager对象

+
+ + +- 示例： + + ``` + resourceManager.getResourceManager((error, mgr) => { + if (error != null) { + console.log("error occurs" + error); + return; + } + mgr.getString(0x1000000, (error, value) => { + if (error != null) { + console.log(value); + } else { + console.log(value); + } + }); + } + + ``` + + +## resourceManager.getResourceManager + +getResourceManager\(bundleName: string, callback: AsyncCallback\): void + +获取指定应用的资源管理对象，使用callback形式返回ResourceManager对象。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

bundleName

+

string

+

是

+

指定应用的Bundle名称

+

callback

+

AsyncCallback<ResourceManager>

+

是

+

callback方式返回ResourceManager对象

+
+ +- 示例： + + ``` + resourceManager.getResourceManager("com.example.myapplication", (error, mgr) => { + } + ``` + + +## resourceManager.getResourceManager + +getResourceManager\(\): Promise + +获取当前应用的资源管理对象，使用Promise形式返回ResourceManager对象。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

Promise<ResourceManager>

+

Promise方式返回资源管理对象

+
+ +- 示例： + + ``` + resourceManager.getResourceManager().then(mgr => { + mgr.getString(0x1000000, (error, value) => { + if (error != null) { + console.log(value); + } else { + console.log(value); + } + }); + }).catch(error => { + console.log(error); + }); + ``` + + +## resourceManager.getResourceManager + +getResourceManager\(bundleName: string\): Promise + +获取指定应用的资源管理对象，使用Promise形式返回ResourceManager对象。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

bundleName

+

string

+

是

+

指定应用的Bundle名称

+
+ +- 返回值： + + + + + + + + + + +

类型

+

说明

+

Promise<ResourceManager>

+

Promise方式返回的资源管理对象

+
+ +- 示例： + + ``` + resourceManager.getResourceManager("com.example.myapplication").then(mgr => { + + }).catch(error => { + + }); + ``` + + +## Direction + +用于表示设备屏幕方向。 + + + + + + + + + + + + + + + + +

名称

+

默认值

+

说明

+

DIRECTION_VERTICAL

+

0

+

竖屏

+

DIRECTION_HORIZONTAL

+

1

+

横屏

+
+ +## DeviceType + +用于表示当前设备类型。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

默认值

+

说明

+

DEVICE_TYPE_PHONE

+

0x00

+

手机.

+

DEVICE_TYPE_TABLET

+

0x01

+

平板

+

DEVICE_TYPE_CAR

+

0x02

+

汽车

+

DEVICE_TYPE_PC

+

0x03

+

电脑

+

DEVICE_TYPE_TV

+

0x04

+

电视

+

DEVICE_TYPE_WEARABLE

+

0x06

+

穿戴

+
+ +## ScreenDensity + +用于表示当前设备屏幕密度。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

默认值

+

说明

+

SCREEN_SDPI

+

120

+

小规模的屏幕密度

+

SCREEN_MDPI

+

160

+

中规模的屏幕密度

+

SCREEN_LDPI

+

240

+

大规模的屏幕密度

+

SCREEN_XLDPI

+

320

+

特大规模的屏幕密度

+

SCREEN_XXLDPI

+

480

+

超大规模的屏幕密度

+

SCREEN_XXXLDPI

+

640

+

超特大规模的屏幕密度

+
+ +## Configuration + +表示当前设备的状态。 + +### 属性 + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

direction

+

Direction

+

是

+

否

+

当前设备屏幕方向

+

locale

+

string

+

是

+

否

+

当前系统语言

+
+ +## DeviceCapability + +表示设备支持的能力。 + +### 属性 + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

screenDensity

+

ScreenDensity

+

是

+

否

+

当前设备屏幕密度

+

deviceType

+

DeviceType

+

是

+

否

+

当前设备类型

+
+ +## ResourceManager + +提供访问应用资源的能力。 + +### getString + +getString\(resId: number, callback: AsyncCallback\): void + +用户获取指定资源ID对应的字符串，使用callback形式返回字符串。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

resId

+

number

+

是

+

资源ID值

+

callback

+

AsyncCallback<string>

+

是

+

异步回调，用于返回获取的字符串

+
+ +- 示例： + + ``` + resourceManager.getResourceManager((error, mgr) => { + mgr.getString(0x1000000, (error, value) => { + if (error != null) { + console.log(value); + } else { + console.log(value); + } + }); + } + ``` + + +### getString + +getString\(resId: number\): Promise + +用户获取指定资源ID对应的字符串，使用Promise形式返回字符串。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

resId

+

number

+

是

+

资源ID值

+
+ +- 返回值： + + + + + + + + + + +

类型

+

说明

+

Promise<string>

+

资源ID值对应的字符串

+
+ +- 示例： + + ``` + resourceManager.getResourceManager((error, mgr) => { + mgr.getString(0x1000000).then(value => { + console.log(value); + }).catch(error => { + console.log("getstring promise " + error); + }); + } + ``` + + +### getStringArray + +getStringArray\(resId: number, callback: AsyncCallback\>\): void + +用户获取指定资源ID对应的字符串数组，使用callback形式返回字符串数组。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

resId

+

number

+

是

+

资源ID值

+

callback

+

AsyncCallback<Array<string>>

+

是

+

异步回调，用于返回获取的字符串数组

+
+ +- 示例： + + ``` + resourceManager.getResourceManager((error, mgr) => { + mgr.getStringArray(0x1000000, (error, value) => { + if (error != null) { + console.log(value); + } else { + console.log(value); + } + }); + } + ``` + + +### getStringArray + +getStringArray\(resId: number\): Promise\> + +用户获取指定资源ID对应的字符串数组，使用Promise形式返回字符串数组。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

resId

+

number

+

是

+

资源ID值

+
+ +- 返回值： + + + + + + + + + + +

类型

+

说明

+

Promise<Array<string>>

+

资源ID值对应的字符串数组

+
+ +- 示例： + + ``` + resourceManager.getResourceManager((error, mgr) => { + mgr.getStringArray(0x1000000).then(value => { + console.log(value); + }).catch(error => { + console.log("getstring promise " + error); + }); + } + ``` + + +### getMedia + +getMedia\(resId: number, callback: AsyncCallback\): void + +用户获取指定资源ID对应的媒体文件内容，使用callback形式返回字节数组。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

resId

+

number

+

是

+

资源ID值

+

callback

+

AsyncCallback<Array<Uint8Array>>

+

是

+

异步回调，用于返回获取的媒体文件内容

+
+ +- 示例： + + ``` + resourceManager.getResourceManager((error, mgr) => { + mgr.getMedia(0x1000000, (error, value) => { + if (error != null) { + console.log(value); + } else { + console.log(value); + } + }); + } + ``` + + +### getMedia + +getMedia\(resId: number\): Promise + +用户获取指定资源ID对应的媒体文件内容，使用Promise形式返回字节数组。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

resId

+

number

+

是

+

资源ID值

+
+ +- 返回值： + + + + + + + + + + +

类型

+

说明

+

Promise<Array<Uint8Array>>

+

资源ID值对应的媒体文件内容

+
+ +- 示例： + + ``` + resourceManager.getResourceManager((error, mgr) => { + mgr.getMedia(0x1000000).then(value => { + console.log(value); + }).catch(error => { + console.log("getstring promise " + error); + }); + } + ``` + + +### getMediaBase64 + +getMediaBase64\(resId: number, callback: AsyncCallback\): void + +用户获取指定资源ID对应的图片资源Base64编码，使用callback形式返回字符串。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

resId

+

number

+

是

+

资源ID值

+

callback

+

AsyncCallback<string>

+

是

+

异步回调，用于返回获取的图片资源Base64编码

+
+ +- 示例： + + ``` + resourceManager.getResourceManager((error, mgr) => { + mgr.getMediaBase64(0x1000000, (error, value) => { + if (error != null) { + console.log(value); + } else { + console.log(value); + } + }); + } + ``` + + +### getMediaBase64 + +getMediaBase64\(resId: number\): Promise + +用户获取指定资源ID对应的图片资源Base64编码，使用Promise形式返回字符串。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

resId

+

number

+

是

+

资源ID值

+
+ +- 返回值： + + + + + + + + + + +

类型

+

说明

+

Promise<string>

+

资源ID值对应的图片资源Base64编码

+
+ +- 示例： + + ``` + resourceManager.getResourceManager((error, mgr) => { + mgr.getMediaBase64(0x1000000).then(value => { + console.log(value); + }).catch(error => { + console.log("getstring promise " + error); + }); + } + ``` + + +### getConfiguration + +getConfiguration\(callback: AsyncCallback\): void + +用户获取设备的Configuration，使用callback形式返回Configuration对象。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

callback

+

AsyncCallback<Configuration>

+

是

+

异步回调，用于返回设备的Configuration

+
+ +- 示例： + + ``` + resourceManager.getResourceManager((error, mgr) => { + mgr.getConfiguration((error, value) => { + if (error != null) { + console.log(value); + } else { + console.log(value); + } + }); + } + ``` + + +### getConfiguration + +getConfiguration\(\): Promise + +用户获取设备的Configuration，使用Promise形式返回Configuration对象。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

Promise<Configuration>

+

设备的Configuration

+
+ +- 示例： + + ``` + resourceManager.getResourceManager((error, mgr) => { + mgr.getConfiguration().then(value => { + console.log(value); + }).catch(error => { + console.log("getstring promise " + error); + }); + } + ``` + + +### getDeviceCapability + +getDeviceCapability\(callback: AsyncCallback\): void + +用户获取设备的DeviceCapability，使用callback形式返回DeviceCapability对象。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

callback

+

AsyncCallback<DeviceCapability>

+

是

+

异步回调，用于返回设备的DeviceCapability

+
+ +- 示例： + + ``` + resourceManager.getResourceManager((error, mgr) => { + mgr.getDeviceCapability((error, value) => { + if (error != null) { + console.log(value); + } else { + console.log(value); + } + }); + } + ``` + + +### getDeviceCapability + +getDeviceCapability\(\): Promise + +用户获取设备的DeviceCapability，使用Promise形式返回DeviceCapability对象。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

Promise<DeviceCapability>

+

设备的DeviceCapability

+
+ +- 示例： + + ``` + resourceManager.getResourceManager((error, mgr) => { + mgr.getDeviceCapability().then(value => { + console.log(value); + }).catch(error => { + console.log("getstring promise " + error); + }); + } + ``` + + +### getPluralString + +getPluralString\(resId: number, num: number, callback: AsyncCallback\): void + +根据指定数量获取指定ID字符串表示的单复数字符串，使用callback形式返回字符串。 + +- 参数： + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

resId

+

number

+

是

+

资源ID值

+

num

+

number

+

是

+

数量值

+

callback

+

AsyncCallback<string>

+

是

+

异步回调，返回根据指定数量获取指定ID字符串表示的单复数字符串

+
+ +- 示例： + + ``` + resourceManager.getResourceManager((error, mgr) => { + mgr.getPluralString(0x1000000, 1, (error, value) => { + if (error != null) { + console.log(value); + } else { + console.log(value); + } + }); + } + ``` + + +### getPluralString + +getPluralString\(resId: number, num: number\): Promise + +根据指定数量获取对指定ID字符串表示的单复数字符串，使用Promise形式返回字符串。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

resId

+

number

+

是

+

资源ID值

+

num

+

number

+

是

+

数量值

+
+ +- 返回值： + + + + + + + + + + +

类型

+

说明

+

Promise<string>

+

根据提供的数量获取对应ID字符串表示的单复数字符串

+
+ +- 示例： + + ``` + resourceManager.getResourceManager((error, mgr) => { + mgr.getPluralString(0x1000000, 1).then(value => { + console.log(value); + }).catch(error => { + console.log("getstring promise " + error); + }); + } + ``` + + diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-runninglock.md b/zh-cn/application-dev/js-reference/apis/js-apis-runninglock.md new file mode 100644 index 0000000000000000000000000000000000000000..f4dc09124bb743684a86359b894f4b918675ff11 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-runninglock.md @@ -0,0 +1,423 @@ +# Runninglock锁 + +- [导入模块](#zh-cn_topic_0000001209249145_s56d19203690d4782bfc74069abb6bd71) +- [权限](#zh-cn_topic_0000001209249145_section11257113618419) +- [RunningLockType](#zh-cn_topic_0000001209249145_section7299123218370) +- [runninglock.isRunningLockTypeSupported](#zh-cn_topic_0000001209249145_section192192415554) +- [runninglock.isRunningLockTypeSupported](#zh-cn_topic_0000001209249145_section517513334611) +- [runningLock.createRunningLock](#zh-cn_topic_0000001209249145_section787751152220) +- [runningLock.createRunningLock](#zh-cn_topic_0000001209249145_section16799155115717) +- [RunningLock](#zh-cn_topic_0000001209249145_section189341937163212) + - [lock](#zh-cn_topic_0000001209249145_section86521450132716) + - [unlock](#zh-cn_topic_0000001209249145_section19100160122813) + - [isUsed](#zh-cn_topic_0000001209249145_section1410593619146) + + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从 API Version 7 开始支持。 + +## 导入模块 + +``` +import runninglock from '@runninglock'; +``` + +## 权限 + +申请、使用锁的权限：ohos.permission.RUNNING\_LOCK + +## RunningLockType + +Runninglock锁的类型。 + + + + + + + + + + + + + + + + +

名称

+

默认值

+

描述

+

BACKGROUND

+

1

+

阻止系统休眠的锁。

+

PROXIMITY_SCREEN_CONTROL

+

2

+

通过接近或者远离状态来控制亮灭屏的锁。

+
+ +## runninglock.isRunningLockTypeSupported + +isRunningLockTypeSupported\(type: RunningLockType, callback: AsyncCallback\): void + +查询系统是否支持该类型的锁。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

RunningLockType

+

是

+

需要查询的锁的类型。

+

callback

+

AsyncCallback<boolean>

+

是

+

指定的callback回调方法，用于获取返回值。

+

callback返回值：支持返回true，不支持返回false。

+
+ +- 示例： + + ``` + runningLock.isRunningLockTypeSupported(runningLock.RunningLockType.BACKGROUND, (error, supported) => { + if (typeof error === "undefined") { + console.info('BACKGROUND support status is ' + supported); + done(); + } else { + console.log('error: ' + error); + done(); + } + }) + ``` + + +## runninglock.isRunningLockTypeSupported + +isRunningLockTypeSupported\(type: RunningLockType\): Promise + +查询系统是否支持该类型的锁。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

RunningLockType

+

是

+

需要查询的锁的类型。

+
+ +- 返回值： + + + + + + + + + + +

类型

+

说明

+

Promise<boolean>

+

Promise实例，用于异步获取返回值，支持返回true，不支持返回false。

+
+ +- 示例： + + ``` + runninglock.isRunningLockTypeSupported(runninglock.RunningLockType.PROXIMITY_SCREEN_CONTROL) + .then(supported => { + console.info('PROXIMITY_SCREEN_CONTROL support status is ' + supported); + done(); + }) + .catch(error => { + console.log('error: ' + error); + done(); + }); + ``` + + +## runningLock.createRunningLock + +createRunningLock\(name: string, type: RunningLockType, callback: AsyncCallback\): void + +创建Runninglock锁。 + +- 参数： + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

name

+

string

+

是

+

锁的名字。

+

type

+

RunningLockType

+

是

+

要创建的锁的类型。

+

callback

+

AsyncCallback<RunningLock>

+

是

+

指定的callback回调方法，用于获取返回的RunningLock锁对象。

+
+ +- 示例： + + ``` + runningLock.createRunningLock("running_lock_test", runningLock.RunningLockType.BACKGROUND) + .then(runninglock => { + var used = runninglock.isUsed(); + console.info('runninglock is used: ' + used); + runninglock.lock(500); + used = runninglock.isUsed(); + console.info('after lock runninglock is used ' + used); + done(); + }) + .catch(error => { + console.log('create runningLock test error: ' + error); + done(); + }) + ``` + + +## runningLock.createRunningLock + +createRunningLock\(name: string, type: RunningLockType\): Promise + +创建Runninglock锁。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

name

+

string

+

是

+

锁的名字。

+

type

+

RunningLockType

+

是

+

要创建的锁的类型。

+
+ +- 返回值： + + + + + + + + + + +

类型

+

说明

+

Promise<RunningLock>

+

Promise实例，用于异步获取返回的RunningLock锁对象。

+
+ +- 示例： + + ``` + runningLock.createRunningLock("running_lock_test", runningLock.RunningLockType.BACKGROUND) + .then(runninglock => { + console.info('create runningLock success'); + done(); + }) + .catch(error => { + console.log('create runningLock test error: ' + error); + done(); + }) + ``` + + +## RunningLock + +阻止系统休眠的锁。 + +### lock + +lock\(timeout: number\): void + +锁定和持有RunningLock + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

timeout

+

number

+

否

+

锁定和持有Runninglock的时长。

+
+ +- 示例： + + ``` + runninglock.createRunningLock("running_lock_test", runninglock.RunningLockType.BACKGROUND) + .then(runningLock => { + runningLock.lock(100) + console.info('create runningLock success') + }) + .catch(error => { + console.log('Lock runningLock test error: ' + error) + }); + ``` + + +### unlock + +unlock\(\): void + +释放Runninglock锁。 + +- 示例： + + ``` + runninglock.createRunningLock("running_lock_test", runninglock.RunningLockType.BACKGROUND) + .then(runningLock => { + runningLock.unlock() + console.info('unLock runningLock success') + }) + .catch(error => { + console.log('unLock runningLock test error: ' + error) + }); + ``` + + +### isUsed + +isUsed\(\): boolean + +查询当前Runninglock是持有状态，还是释放状态。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

boolean

+

当前Runninglock是持有状态返回true，释放状态返回false。

+
+ +- 示例： + + ``` + runninglock.createRunningLock("running_lock_test", runninglock.RunningLockType.BACKGROUND) + .then(runningLock => { + var used = runningLock.isUsed() + console.info('runningLock used status: ' + used) + }) + .catch(error => { + console.log('runningLock isUsed test error: ' + error) + }); + ``` + + diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-sensor.md b/zh-cn/application-dev/js-reference/apis/js-apis-sensor.md new file mode 100644 index 0000000000000000000000000000000000000000..2dd3a5b801cb830d19274714381f4a82a4e0277f --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-sensor.md @@ -0,0 +1,3831 @@ +# 传感器 + +- [导入模块](#zh-cn_topic_0000001145015663_s56d19203690d4782bfc74069abb6bd71) +- [权限列表](#zh-cn_topic_0000001145015663_section11257113618419) +- [sensor.on](#zh-cn_topic_0000001145015663_section18465193010412) +- [sensor.on](#zh-cn_topic_0000001145015663_section136091757133617) +- [sensor.on](#zh-cn_topic_0000001145015663_section146931430738) +- [sensor.on](#zh-cn_topic_0000001145015663_section61785238140) +- [sensor.on](#zh-cn_topic_0000001145015663_section6189623151413) +- [sensor.on](#zh-cn_topic_0000001145015663_section5203122341410) +- [sensor.on](#zh-cn_topic_0000001145015663_section1824612372145) +- [sensor.on](#zh-cn_topic_0000001145015663_section13257937131411) +- [sensor.on](#zh-cn_topic_0000001145015663_section2266113791419) +- [sensor.on](#zh-cn_topic_0000001145015663_section14362204121410) +- [sensor.on](#zh-cn_topic_0000001145015663_section337584101411) +- [sensor.on](#zh-cn_topic_0000001145015663_section1738444151414) +- [sensor.on](#zh-cn_topic_0000001145015663_section12931751101418) +- [sensor.on](#zh-cn_topic_0000001145015663_section0302151141413) +- [sensor.on](#zh-cn_topic_0000001145015663_section63108518141) +- [sensor.on](#zh-cn_topic_0000001145015663_section20525181564919) +- [sensor.on](#zh-cn_topic_0000001145015663_section121685551415) +- [sensor.on](#zh-cn_topic_0000001145015663_section794801295516) +- [sensor.on](#zh-cn_topic_0000001145015663_section4764201154) +- [sensor.on](#zh-cn_topic_0000001145015663_section9776110101518) +- [sensor.once](#zh-cn_topic_0000001145015663_section19783707153) +- [sensor.once](#zh-cn_topic_0000001145015663_section18010433133) +- [sensor.once](#zh-cn_topic_0000001145015663_section3897145813147) +- [sensor.once](#zh-cn_topic_0000001145015663_section79121058181416) +- [sensor.once](#zh-cn_topic_0000001145015663_section12419351519) +- [sensor.once](#zh-cn_topic_0000001145015663_section02033181520) +- [sensor.once](#zh-cn_topic_0000001145015663_section046513810156) +- [sensor.once](#zh-cn_topic_0000001145015663_section84801280158) +- [sensor.once](#zh-cn_topic_0000001145015663_section7781212101520) +- [sensor.once](#zh-cn_topic_0000001145015663_section1595121217155) +- [sensor.once](#zh-cn_topic_0000001145015663_section20209715181517) +- [sensor.once](#zh-cn_topic_0000001145015663_section42211015191510) +- [sensor.once](#zh-cn_topic_0000001145015663_section569171821513) +- [senor.once](#zh-cn_topic_0000001145015663_section481181811512) +- [sensor.once](#zh-cn_topic_0000001145015663_section178111120201520) +- [sensor.once](#zh-cn_topic_0000001145015663_section6826920141517) +- [sensor.once](#zh-cn_topic_0000001145015663_section449943418257) +- [sensor.once](#zh-cn_topic_0000001145015663_section438833732512) +- [sensor.once](#zh-cn_topic_0000001145015663_section25391940192520) +- [sensor.once](#zh-cn_topic_0000001145015663_section1345034310258) +- [sensor.once](#zh-cn_topic_0000001145015663_section2288135016254) +- [sensor.off](#zh-cn_topic_0000001145015663_section359005312519) +- [SensorType](#zh-cn_topic_0000001145015663_section02298004614) +- [AccelerometerResponse](#zh-cn_topic_0000001145015663_section965820576618) + - [属性](#zh-cn_topic_0000001145015663_section1691231513269) + +- [LinearAccelerometerResponse](#zh-cn_topic_0000001145015663_section1151477447) + - [属性](#zh-cn_topic_0000001145015663_section391215312374) + +- [AccelerometerUncalibratedResponse](#zh-cn_topic_0000001145015663_section253082316457) + - [属性](#zh-cn_topic_0000001145015663_section11136125063918) + +- [GravityResponse](#zh-cn_topic_0000001145015663_section162913399453) + - [属性](#zh-cn_topic_0000001145015663_section2706171615431) + +- [OrientationResponse](#zh-cn_topic_0000001145015663_section128271514456) + - [属性](#zh-cn_topic_0000001145015663_section118909390444) + +- [RotationVectorResponse](#zh-cn_topic_0000001145015663_section13776194114611) + - [属性](#zh-cn_topic_0000001145015663_section181539462) + +- [GyroscopeResponse](#zh-cn_topic_0000001145015663_section3669131713463) + - [属性](#zh-cn_topic_0000001145015663_section44402377478) + +- [GyroscopeUncalibratedResponse](#zh-cn_topic_0000001145015663_section1041541413475) + - [属性](#zh-cn_topic_0000001145015663_section14776155394811) + +- [SignificantMotionResponse](#zh-cn_topic_0000001145015663_section1213143164712) + - [属性](#zh-cn_topic_0000001145015663_section47057254505) + +- [ProximityResponse](#zh-cn_topic_0000001145015663_section5275184313476) + - [属性](#zh-cn_topic_0000001145015663_section793914713520) + +- [LightResponse](#zh-cn_topic_0000001145015663_section195685404716) + - [属性](#zh-cn_topic_0000001145015663_section178311815710) + +- [HallResponse](#zh-cn_topic_0000001145015663_section18608467487) + - [属性](#zh-cn_topic_0000001145015663_section182341639185912) + +- [MagneticFieldResponse](#zh-cn_topic_0000001145015663_section20218191813489) + - [属性](#zh-cn_topic_0000001145015663_section42069182819) + +- [MagneticFieldUncalibratedResponse](#zh-cn_topic_0000001145015663_section13749143113486) + - [属性](#zh-cn_topic_0000001145015663_section323717293100) + +- [PedometerResponse](#zh-cn_topic_0000001145015663_section1350145915489) + - [属性](#zh-cn_topic_0000001145015663_section972014301087) + +- [HumidityResponse](#zh-cn_topic_0000001145015663_section20444511666) + - [属性](#zh-cn_topic_0000001145015663_section1692614391487) + +- [PedometerDetectResponse](#zh-cn_topic_0000001145015663_section145653910491) + - [属性](#zh-cn_topic_0000001145015663_section18892104816811) + +- [AmbientTemperatureResponse](#zh-cn_topic_0000001145015663_section728281924920) + - [属性](#zh-cn_topic_0000001145015663_section1728819541189) + +- [BarometerResponse](#zh-cn_topic_0000001145015663_section143457303496) + - [属性](#zh-cn_topic_0000001145015663_section758518594817) + +- [HeartRateResponse](#zh-cn_topic_0000001145015663_section95011341124915) + - [属性](#zh-cn_topic_0000001145015663_section17214266911) + +- [WearDetectionResponse](#zh-cn_topic_0000001145015663_section128278501495) + - [属性](#zh-cn_topic_0000001145015663_section13926161914914) + + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7 开始支持。 + +## 导入模块 + +``` +import sensor from '@ohos.sensor'; +``` + +## 权限列表 + +计步器：ohos.permission.ACTIVITY\_MOTION + +心率：ohos.permission.READ\_HEALTH\_DATA + +加速度：ohos.permission.ACCELEROMETER + +## sensor.on + +on\(type: SensorType.SENSOR\_TYPE\_ID\_ACCELEROMETER, callback: AsyncCallback,options?: Options\): void + +监听加速度传感器的数据变化。如果多次调用该接口，仅最后一次调用生效。 + +**参数：** + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

SensorType

+

是

+

要订阅的加速度传感器类型为SENSOR_TYPE_ID_ACCELEROMETER。

+

callback

+

AsyncCallback<AccelerometerResponse>

+

是

+

注册加速度传感器的回调函数，上报的数据类型为AccelerometerResponse。

+

Options

+

options

+

否

+

可选参数列表，设置上报频率，默认值为200000000ns。

+
+ +**示例**： + +``` +sensor.on(sensor.SensorType.SENSOR_TYPE_ID_ACCELEROMETER, function(error, data) { + if (error) { + console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); + return; + } + //打印data的x,y,z轴坐标的分量 + console.info('X-coordinate component: ' + data.x); + console.info('Y-coordinate component: ' + data.y); + console.info('Z-coordinate component: ' + data.z); + }, + {interval: 10000000} +); +``` + +## sensor.on + +on\(type:SensorType.SENSOR\_TYPE\_ID\_LINEAR\_ACCELERATION,callback:AsyncCallback, options?: Options\): void + +监听线性加速度传感器的数据变化。如果多次调用该接口，仅最后一次调用生效。 + +**参数：** + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

SensorType

+

是

+

要订阅的线性加速度传感器类型为SENSOR_TYPE_ID_LINEAR_ACCELERATION。

+

callback

+

AsyncCallback<LinearAccelerometerResponse>

+

是

+

注册线性加速度传感器的回调函数，上报的数据类型为LinearAccelerometerResponse。

+

Options

+

options

+

否

+

可选参数列表，设置上报频率，默认值为200000000ns。

+
+ +**示例**： + +``` +sensor.on(sensor.SensorType.SENSOR_TYPE_ID_LINEAR_ACCELERATION, function(error, data) { + if (error) { + console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); + return; + } + //打印data的x,y,z轴坐标的分量 + console.info('X-coordinate component: ' + data.x); + console.info('Y-coordinate component: ' + data.y); + console.info('Z-coordinate component: ' + data.z); + } + {interval: 10000000} +); +``` + +## sensor.on + +on\(type:SensorType.SENSOR\_TYPE\_ID\_ACCELEROMETER\_UNCALIBRATED,callback:AsyncCallback, options?: Options\): void + +监听未校准加速度计传感器的数据变化。如果多次调用该接口，仅最后一次调用生效。 + +**参数**： + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

SensorType

+

是

+

要订阅的未校准加速度计传感器类型为SENSOR_TYPE_ID_ACCELEROMETER_UNCALIBRATED。

+

callback

+

AsyncCallback<AccelerometerUncalibratedResponse>

+

是

+

注册未校准加速度计传感器的回调函数，上报的数据类型为AccelerometerUncalibratedResponse。

+

Options

+

options

+

否

+

可选参数列表，设置上报频率，默认值为200000000ns。

+
+ +**示例**： + +``` +sensor.on(sensor.SensorType.SENSOR_TYPE_ID_ACCELEROMETER_UNCALIBRATED, function(error, data) { + if (error) { + console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); + return; + } + //打印data的x,y,z轴坐标的分量 + console.info('X-coordinate component: ' + data.x); + console.info('Y-coordinate component: ' + data.y); + console.info('Z-coordinate component: ' + data.z); + //打印data在x,y,z轴坐标的偏移量 + console.info('X-coordinate bias: ' + data.biasX); + console.info('Y-coordinate bias: ' + data.biasY); + console.info('Z-coordinate bias: ' + data.biasZ); + } + {interval: 10000000} +); +``` + +## sensor.on + +on\(type: SensorType.SENSOR\_TYPE\_ID\_GRAVITY, callback: AsyncCallback,options?: Options\): void + +监听重力传感器的数据变化。如果多次调用该接口，仅最后一次调用生效。 + +**参数：** + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

SensorType

+

是

+

要订阅的重力传感器类型为SENSOR_TYPE_ID_GRAVITY。

+

callback

+

AsyncCallback<GravityResponse>

+

是

+

注册重力传感器的回调函数，上报的数据类型为GravityResponse。

+

Options

+

options

+

否

+

可选参数列表，设置上报频率，默认值为200000000ns。

+
+ +**示例**： + +``` +sensor.on(sensor.SensorType.SENSOR_TYPE_ID_GRAVITY, function(error, data) { + if (error) { + console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); + return; + } + //打印data的x,y,z轴坐标的分量 + console.info('X-coordinate component: ' + data.x); + console.info('Y-coordinate component: ' + data.y); + console.info('Z-coordinate component: ' + data.z); + } + {interval: 10000000} +); +``` + +## sensor.on + +on\(type: SensorType.SENSOR\_TYPE\_ID\_GYROSCOPE, callback: AsyncCallback, options?: Options\): void + +监听陀螺仪传感器的数据变化。如果多次调用该接口，仅最后一次调用生效。 + +**参数：** + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

SensorType

+

是

+

要订阅的陀螺仪传感器类型为SENSOR_TYPE_ID_GYROSCOPE。

+

callback

+

AsyncCallback<GyroscopeResponse>

+

是

+

注册陀螺仪传感器的回调函数，上报的数据类型为GyroscopeResponse。

+

Options

+

options

+

否

+

可选参数列表，设置上报频率，默认值为200000000ns。

+
+ +**示例：** + +``` +sensor.on(sensor.SensorType.SENSOR_TYPE_ID_GYROSCOPE, function(error, data) { + if (error) { + console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); + return; + } + //打印data的x,y,z轴坐标的分量 + console.info('X-coordinate component: ' + data.x); + console.info('Y-coordinate component: ' + data.y); + console.info('Z-coordinate component: ' + data.z); + } + {interval: 10000000} +); +``` + +## sensor.on + +on\(type:SensorType.SENSOR\_TYPE\_ID\_GYROSCOPE\_UNCALIBRATED,callback:AsyncCallback, options?: Options\): void + +监听未校准陀螺仪传感器的数据变化。如果多次调用该接口，仅最后一次调用生效。 + +**参数：** + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

SensorType

+

是

+

要订阅的未校准陀螺仪传感器类型为SENSOR_TYPE_ID_GYROSCOPE_UNCALIBRATED。

+

callback

+

AsyncCallback<GyroscopeUncalibratedResponse>

+

是

+

注册未校准陀螺仪传感器的回调函数，上报的数据类型为GyroscopeUncalibratedResponse。

+

Options

+

options

+

否

+

可选参数列表，设置上报频率。

+
+ +**示例：** + +``` +sensor.on(sensor.SensorType.SENSOR_TYPE_ID_GYROSCOPE_UNCALIBRATED, function(error, data) { + if (error) { + console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); + return; + } + //打印data的x,y,z轴坐标的分量 + console.info('X-coordinate component: ' + data.x); + console.info('Y-coordinate component: ' + data.y); + console.info('Z-coordinate component: ' + data.z); + //打印data的x,y,z轴坐标的偏移量 + console.info('X-coordinate bias: ' + data.biasX); + console.info('Y-coordinate bias: ' + data.biasY); + console.info('Z-coordinate bias: ' + data.biasZ); + } + {interval: 10000000} +); +``` + +## sensor.on + +on\(type: SensorType.SENSOR\_TYPE\_ID\_SIGNIFICANT\_MOTION, callback: AsyncCallback, options?: Options\): void + +监听有效运动传感器数据变化。如果多次调用该接口，仅最后一次调用生效。 + +**参数：** + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

SensorType

+

是

+

要订阅的有效运动传感器类型为SENSOR_TYPE_ID_SIGNIFICANT_MOTION。

+

callback

+

AsyncCallback<SignificantMotionResponse>

+

是

+

注册有效运动传感器的回调函数，上报的数据类型为SignificantMotionResponse。

+

Options

+

options

+

否

+

可选参数列表，设置上报频率，默认值为200000000ns。

+
+ +**示例：** + +``` +sensor.on(sensor.SensorType.SENSOR_TYPE_ID_SIGNIFICANT_MOTION, function(error, data) { + if (error) { + console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); + return; + } + console.info('Scalar data: ' + data.scalar); + } + {interval: 10000000} +); +``` + +## sensor.on + +on\(type: SensorType.SENSOR\_TYPE\_ID\_PEDOMETER\_DETECTION, callback: AsyncCallback, options?: Options\): void + +监听计步检测传感器的数据变化。如果多次调用该接口，仅最后一次调用生效。 + +**参数：** + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

SensorType

+

是

+

要订阅的计步检测传感器类型为SENSOR_TYPE_ID_PEDOMETER_DETECTION。

+

callback

+

AsyncCallback<PedometerDetectResponse>

+

是

+

注册计步检测传感器的回调函数，上报的数据类型为PedometerDetectResponse。

+

Options

+

options

+

否

+

可选参数列表，设置上报频率，默认值为200000000ns。

+
+ +**示例：** + +``` +sensor.on(sensor.SensorType.SENSOR_TYPE_ID_PEDOMETER_DETECTION, function(error, data) { + if (error) { + console.error(""Subscription failed. Error code: " + error.code + "; message: " + error.message); + return; + } + console.info('Scalar data: ' + data.scalar); + } + {interval: 10000000} +); +``` + +## sensor.on + +on\(type: SensorType.SENSOR\_TYPE\_ID\_PEDOMETER, callback: AsyncCallback, options?: Options\): void + +监听计步传感器的数据变化。如果多次调用该接口，仅最后一次调用生效。 + +**参数：** + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

SensorType

+

是

+

要订阅的计步传感器类型为SENSOR_TYPE_ID_PEDOMETER。

+

callback

+

AsyncCallback<PedometerResponse>

+

是

+

注册计步传感器的回调函数，上报的数据类型为PedometerResponse。

+

Options

+

options

+

否

+

可选参数列表，设置上报频率，默认值为200000000ns。

+
+ +**示例：** + +``` +sensor.on(sensor.SensorType.SENSOR_TYPE_ID_PEDOMETER, function(error, data) { + if (error) { + console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); + return; + } + //打印data的步数 + console.info('Steps: ' + data.steps); + } + {interval: 10000000} +); +``` + +## sensor.on + +on\(type:SensorType.SENSOR\_TYPE\_ID\_AMBIENT\_TEMPERATURE,callback:AsyncCallback, options?: Options\): void + +监听环境温度传感器的数据变化。如果多次调用该接口，仅最后一次调用生效。 + +**参数：** + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

SensorType

+

是

+

要订阅的环境温度传感器类型为SENSOR_TYPE_ID_AMBIENT_TEMPERATURE。

+

callback

+

AsyncCallback<AmbientTemperatureResponse>

+

是

+

注册环境温度传感器的回调函数，上报的数据类型为AmbientTemperatureResponse。

+

Options

+

options

+

否

+

可选参数列表，设置上报频率，默认值为200000000ns。

+
+ +**示例：** + +``` +sensor.on(sensor.SensorType.SENSOR_TYPE_ID_AMBIENT_TEMPERATURE, function(error, data) { + if (error) { + console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); + return; + } + //打印data的温度值 + console.info('Temperature: ' + data.temperature); + } + {interval: 10000000} +); +``` + +## sensor.on + +on\(type: SensorType.SENSOR\_TYPE\_ID\_MAGNETIC\_FIELD, callback: AsyncCallback,options?: Options\): void + +监听磁场传感器的数据变化。如果多次调用该接口，仅最后一次调用生效。 + +**参数：** + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

SensorType

+

是

+

要订阅的磁场传感器类型为SENSOR_TYPE_ID_MAGNETIC_FIELD。

+

callback

+

AsyncCallback<MagneticFieldResponse>

+

是

+

注册磁场传感器的回调函数，上报的数据类型为MagneticFieldResponse。

+

Options

+

options

+

否

+

可选参数列表，设置上报频率，默认值为200000000ns。

+
+ +**示例：** + +``` +sensor.on(sensor.SensorType.SENSOR_TYPE_ID_MAGNETIC_FIELD, function(error, data) { + if (error) { + console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); + return; + } + //打印data的x,y,z轴坐标的分量 + console.info('X-coordinate component: ' + data.x); + console.info('Y-coordinate component: ' + data.y); + console.info('Z-coordinate component: ' + data.z); + } + {interval: 10000000} +); +``` + +## sensor.on + +on\(type:SensorType.SENSOR\_TYPE\_ID\_MAGNETIC\_FIELD\_UNCALIBRATED,callback:AsyncCallback, options: Options\): void + +监听未校准磁场传感器的数据变化。如果多次调用该接口，仅最后一次调用生效。 + +**参数：** + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

SensorType

+

是

+

要订阅的未校准磁场传感器类型为SENSOR_TYPE_ID_MAGNETIC_FIELD_UNCALIBRATED。

+

callback

+

AsyncCallback<MagneticFieldUncalibratedResponse>

+

是

+

注册未校准磁场传感器的回调函数，上报的数据类型为MagneticFieldUncalibratedResponse。

+

Options

+

options

+

否

+

可选参数列表，设置上报频率，默认值为200000000ns。

+
+ +**示例：** + +``` +sensor.on(sensor.SensorType.SENSOR_TYPE_ID_MAGNETIC_FIELD_UNCALIBRATED, function(error, data) { + if (error) { + console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); + return; + } + //打印data的x,y,z轴坐标的分量 + console.info('X-coordinate component: ' + data.x); + console.info('Y-coordinate component: ' + data.y); + console.info('Z-coordinate component: ' + data.z); + //打印data的x,y,z轴坐标的偏移量 + console.info('X-coordinate bias: ' + data.biasX); + console.info('Y-coordinate bias: ' + data.biasY); + console.info('Z-coordinate bias: ' + data.biasZ); + } + {interval: 10000000} //设置数据的上报频率。 +); +``` + +## sensor.on + +on\(type: SensorType.SENSOR\_TYPE\_ID\_PROXIMITY, callback: AsyncCallback,options?: Options\): void + +监听接近光传感器的数据变化。如果多次调用该接口，仅最后一次调用生效。 + +**参数：** + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

SensorType

+

是

+

要订阅的接近光传感器类型为SENSOR_TYPE_ID_PROXIMITY。

+

callback

+

AsyncCallback<ProximityResponse>

+

是

+

注册接近光传感器的回调函数，上报的数据类型为ProximityResponse。

+

Options

+

options

+

否

+

可选参数列表，设置上报频率，默认值为200000000ns。

+
+ +**示例：** + +``` +sensor.on(sensor.SensorType.SENSOR_TYPE_ID_PROXIMITY, function(error, data) { + if (error) { + console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); + return; + } + //打印data的距离值 + console.info('Distance: ' + data.distance); + } + {interval: 10000000} +); +``` + +## sensor.on + +on\(type: SensorType.SENSOR\_TYPE\_ID\_HUMIDITY, callback: AsyncCallback,options?: Options\): void + +监听湿度传感器的数据变化。如果多次调用该接口，仅最后一次调用生效。 + +**参数：** + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

SensorType

+

是

+

要订阅的湿度传感器类型为SENSOR_TYPE_ID_HUMIDITY。

+

callback

+

AsyncCallback<HumidityResponse>

+

是

+

注册湿度传感器的回调函数，上报的数据类型为HumidityResponse。

+

Options

+

options

+

否

+

可选参数列表，设置上报频率，默认值为200000000ns。

+
+ +**示例：** + +``` +sensor.on(sensor.SensorType.SENSOR_TYPE_ID_HUMIDITY, function(error, data) { + if (error) { + console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); + return; + } + //打印data的湿度值 + console.info('Humidity: ' + data.humidity); + } + {interval: 10000000} +); +``` + +## sensor.on + +on\(type: SensorType.SENSOR\_TYPE\_ID\_BAROMETER, callback: AsyncCallback,options?: Options\): void + +监听气压计传感器的数据变化。如果多次调用该接口，仅最后一次调用生效。 + +**参数：** + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

SensorType

+

是

+

要订阅的气压计传感器类型为SENSOR_TYPE_ID_BAROMETER。

+

callback

+

AsyncCallback<BarometerResponse>

+

是

+

注册气压计传感器的回调函数，上报的数据类型为BarometerResponse。

+

Options

+

options

+

否

+

可选参数列表，设置上报频率，默认值为200000000ns。

+
+ +**示例：** + +``` +sensor.on(sensor.SensorType.SENSOR_TYPE_ID_BAROMETER, function(error, data) { + if (error) { + console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); + return; + } + //打印data的压强值 + console.info('Atmospheric pressure: ' + data.pressure); + } + {interval: 10000000} +); +``` + +## sensor.on + +on\(type: SensorType.SENSOR\_TYPE\_ID\_HALL, callback: AsyncCallback, options?: Options\): void + +监听霍尔传感器的数据变化。如果多次调用该接口，仅最后一次调用生效。 + +**参数：** + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

SensorType

+

是

+

要订阅的霍尔传感器类型为SENSOR_TYPE_ID_HALL。

+

callback

+

AsyncCallback<HallResponse>

+

是

+

注册霍尔传感器的回调函数，上报的数据类型为 HallResponse。

+

Options

+

options

+

否

+

可选参数列表，设置上报频率，默认值为200000000ns。

+
+ +**示例：** + +``` +sensor.on(sensor.SensorType.SENSOR_TYPE_ID_HALL, function(error, data) { + if (error) { + console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); + return; + } + //打印data的状态值 + console.info('Status: ' + data.status); + } + {interval: 10000000} +); +``` + +## sensor.on + +on\(type: SensorType.SENSOR\_TYPE\_ID\_AMBIENT\_LIGHT, callback: AsyncCallback, options?: Options\): void + +监听环境光传感器的数据变化。如果多次调用该接口，仅最后一次调用生效。 + +**参数：** + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

SensorType

+

是

+

要订阅的环境光传感器类型为SENSOR_TYPE_ID_AMBIENT_LIGHT。

+

callback

+

AsyncCallback<LightResponse>

+

是

+

注册环境光传感器的回调函数，上报的数据类型为LightResponse。

+

Options

+

options

+

否

+

可选参数列表，设置上报频率，默认值为200000000ns。

+
+ +**示例：** + +``` +sensor.on(sensor.SensorType.SENSOR_TYPE_ID_AMBIENT_LIGHT, function(error, data) { + if (error) { + console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); + return; + } + //打印data的光强值 + console.info(''Illumination: ' + data.intensity); + } + {interval: 10000000} +); +``` + +## sensor.on + +on\(type: SensorType.SENSOR\_TYPE\_ID\_ORIENTATION, callback: AsyncCallback, options?: Options\): void + +监听方向传感器的数据变化。如果多次调用该接口，仅最后一次调用生效。 + +**参数：** + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

SensorType

+

是

+

要订阅的方向传感器类型为SENSOR_TYPE_ID_ORIENTATION

+

callback

+

AsyncCallback<OrientationResponse>

+

是

+

注册方向传感器的回调函数，上报的数据类型为OrientationResponse。

+

Options

+

options

+

否

+

可选参数列表，设置上报频率，默认值为200000000ns。

+
+ +**示例：** + +``` +sensor.on(sensor.SensorType.SENSOR_TYPE_ID_ORIENTATION, function(error, data) { + if (error) { + console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); + return; + } + //打印data的x,y,z轴坐标的分量 + console.info('X-coordinate component: ' + data.x); + console.info('Y-coordinate component: ' + data.y); + console.info('Z-coordinate component: ' + data.z); + } + {interval: 10000000} +); +``` + +## sensor.on + +on\(type:SensorType.SENSOR\_TYPE\_ID\_ROTATION\_VECTOR,callback:AsyncCallback,options?: Options\): void + +监听旋转矢量传感器的数据变化。如果多次调用该接口，仅最后一次调用生效。 + +**参数：** + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

SensorType

+

是

+

要订阅的旋转矢量传感器类型为SENSOR_TYPE_ID_ROTATION_VECTOR。

+

callback

+

AsyncCallback<RotationVectorResponse>

+

是

+

注册旋转矢量传感器的回调函数，上报的数据类型为RotationVectorResponse。

+

Options

+

options

+

否

+

可选参数列表，设置上报频率，默认值为200000000ns。

+
+ +**示例：** + +``` +sensor.on(sensor.SensorType.SENSOR_TYPE_ID_ROTATION_VECTOR, function(error, data) { + if (error) { + console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); + return; + } + //打印data的x,y,z轴坐标的分量 + console.info('X-coordinate component: ' + data.x); + console.info('Y-coordinate component: ' + data.y); + console.info('Z-coordinate component: ' + data.z); + } + {interval: 10000000} +); +``` + +## sensor.on + +on\(type: SensorType.SENSOR\_TYPE\_ID\_WEAR\_DETECTION, callback: AsyncCallback,options?: Options\): void + +监听佩戴检测传感器的数据变化。如果多次调用该接口，仅最后一次调用生效。 + +**参数：** + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

SensorType

+

是

+

要订阅的佩戴检测传感器类型为SENSOR_TYPE_ID_WEAR_DETECTION。

+

callback

+

AsyncCallback<WearDetectionResponse>

+

是

+

注册佩戴检测传感器的回调函数，上报的数据类型为WearDetectionResponse。

+

Options

+

options

+

否

+

可选参数列表，设置上报频率，默认值为200000000ns。

+
+ +**示例：** + +``` +sensor.on(sensor.SensorType.SENSOR_TYPE_ID_WEAR_DETECTION, function(error, data) { + if (error) { + console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); + return; + } + //打印data的佩戴状态 + console.info('Wear status: ' + data.value); + } + {interval: 10000000} +); +``` + +## sensor.once + +once\(type: SensorType.SENSOR\_TYPE\_ID\_ACCELEROMETER, callback: AsyncCallback\): void + +监听加速度传感器的数据变化一次。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

SensorType

+

是

+

加速度传感器类型为SENSOR_TYPE_ID_ACCELEROMETER。

+

callback

+

AsyncCallback<AccelerometerResponse>

+

是

+

注册一次加速度传感器的回调函数，上报的数据类型为AccelerometerResponse。

+
+ +**示例：** + +``` +sensor.once(sensor.SensorType.SENSOR_TYPE_ID_ACCELEROMETER, function(error, data) { + if (error) { + console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); + return; + } + //打印data的x,y,z轴坐标的分量 + console.info('X-coordinate component: ' + data.x); + console.info('Y-coordinate component: ' + data.y); + console.info('Z-coordinate component: ' + data.z); + } +); +``` + +## sensor.once + +once\(type:SensorType.SENSOR\_TYPE\_ID\_LINEAR\_ACCELERATION,callback:AsyncCallback\): void + +监听线性加速度传感器数据变化一次。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

SensorType

+

是

+

线性加速度传感器类型为SENSOR_TYPE_ID_LINEAR_ACCELERATION。

+

callback

+

AsyncCallback<LinearAccelerometerResponse>

+

是

+

注册一次线性加速度传感器的回调函数，上报的数据类型为LinearAccelerometerResponse。

+
+ +**示例：** + +``` +sensor.once(sensor.SensorType.SENSOR_TYPE_ID_LINEAR_ACCELERATION, function(error, data) { + if (error) { + console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); + return; + } + //打印data的x,y,z轴坐标的分量 + console.info('X-coordinate component: ' + data.x); + console.info('Y-coordinate component: ' + data.y); + console.info('Z-coordinate component: ' + data.z); + } +); +``` + +## sensor.once + +once\(type:SensorType.SENSOR\_TYPE\_ID\_ACCELEROMETER\_UNCALIBRATED,callback:AsyncCallback\): void + +监听未校准加速度传感器的数据变化一次。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

SensorType

+

是

+

未校准加速度传感器类型为SENSOR_TYPE_ID_ACCELEROMETER_UNCALIBRATED。

+

callback

+

AsyncCallback<AccelerometerUncalibratedResponse>

+

是

+

注册一次未校准加速度传感器的回调函数，上报的数据类型为AccelerometerUncalibratedResponse。

+
+ +**示例：** + +``` +sensor.once(sensor.SensorType.SENSOR_TYPE_ID_ACCELEROMETER_UNCALIBRATED, function(error, data) { + if (error) { + console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); + return; + } + //打印data的x,y,z轴坐标的分量 + console.info('X-coordinate component: ' + data.x); + console.info('Y-coordinate component: ' + data.y); + console.info('Z-coordinate component: ' + data.z); + //打印data的x,y,z轴坐标的偏移量 + console.info('X-coordinate bias: ' + data.biasX); + console.info('Y-coordinate bias: ' + data.biasY); + console.info('Z-coordinate bias: ' + data.biasZ); + } +); +``` + +## sensor.once + +once\(type: SensorType.SENSOR\_TYPE\_ID\_GRAVITY, callback: AsyncCallback\): void + +监听重力传感器的数据变化一次。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

SensorType

+

是

+

重力传感器类型为SENSOR_TYPE_ID_GRAVITY。

+

callback

+

AsyncCallback<GravityResponse>

+

是

+

注册一次重力传感器的回调函数，上报的数据类型为GravityResponse。

+
+ +**示例：** + +``` +sensor.once(sensor.SensorType.SENSOR_TYPE_ID_GRAVITY, function(error, data) { + if (error) { + console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); + return; + } + //打印data的x,y,z轴坐标的分量 + console.info('X-coordinate component: ' + data.x); + console.info('Y-coordinate component: ' + data.y); + console.info('Z-coordinate component: ' + data.z); + } +); +``` + +## sensor.once + +once\(type: SensorType.SENSOR\_TYPE\_ID\_GYROSCOPE, callback: AsyncCallback\): void + +监听陀螺仪传感器的数据变化一次。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

SensorType

+

是

+

陀螺仪传感器类型为SENSOR_TYPE_ID_GYROSCOPE。

+

callback

+

AsyncCallback<GyroscopeResponse>

+

是

+

注册一次陀螺仪传感器的回调函数，上报的数据类型为GyroscopeResponse。

+
+ +**示例：** + +``` +sensor.once(sensor.SensorType.SENSOR_TYPE_ID_GYROSCOPE, function(error, data) { + if (error) { + console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); + return; + } + //打印data的x,y,z轴坐标的分量 + console.info('X-coordinate component: ' + data.x); + console.info('Y-coordinate component: ' + data.y); + console.info('Z-coordinate component: ' + data.z); + } +); +``` + +## sensor.once + +once\(type:SensorType.SENSOR\_TYPE\_ID\_GYROSCOPE\_UNCALIBRATED,callback:AsyncCallback\): void + +监听未校准陀螺仪传感器的数据变化一次。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

SensorType

+

是

+

未校准陀螺仪传感器类型为SENSOR_TYPE_ID_GYROSCOPE_UNCALIBRATED。

+

callback

+

AsyncCallback<GyroscopeUncalibratedResponse>

+

是

+

注册一次未校准陀螺仪传感器的回调函数，上报的数据类型为GyroscopeUncalibratedResponse。

+
+ +**示例：** + +``` +sensor.once(sensor.SensorType.SENSOR_TYPE_ID_GYROSCOPE_UNCALIBRATED, function(error, data) { + if (error) { + console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); + return; + } + //打印data的x,y,z轴坐标的分量 + console.info('X-coordinate component: ' + data.x); + console.info('Y-coordinate component: ' + data.y); + console.info('Z-coordinate component: ' + data.z); + //打印data的x,y,z轴坐标的偏移量 + console.info('X-coordinate bias: ' + data.biasX); + console.info('Y-coordinate bias: ' + data.biasY); + console.info('Z-coordinate bias: ' + data.biasZ); + } +); +``` + +## sensor.once + +once\(type: SensorType.SENSOR\_TYPE\_ID\_SIGNIFICANT\_MOTION,callback:AsyncCallback\): void + +监听有效运动传感器的数据变化一次。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

SensorType

+

是

+

有效运动传感器类型为SENSOR_TYPE_ID_SIGNIFICANT_MOTION。

+

callback

+

AsyncCallback<SignificantMotionResponse>

+

是

+

注册一次有效运动传感器的回调函数，上报的数据类型为SignificantMotionResponse。

+
+ +**示例：** + +``` +sensor.once(sensor.SensorType.SENSOR_TYPE_ID_SIGNIFICANT_MOTION, function(error, data) { + if (error) { + console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); + return; + } + console.info('Scalar data: ' + data.scalar); + } +); +``` + +## sensor.once + +once\(type:SensorType.SENSOR\_TYPE\_ID\_PEDOMETER\_DETECTION,callback:AsyncCallback\): void + +监听计步检测传感器数据变化一次。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

SensorType

+

是

+

计步检测传感器类型为SENSOR_TYPE_ID_PEDOMETER_DETECTION。

+

callback

+

AsyncCallback<PedometerDetectResponse>

+

是

+

注册一次计步检测传感器的回调函数，上报的数据类型为PedometerDetectResponse。

+
+ +**示例：** + +``` +sensor.once(sensor.SensorType.SENSOR_TYPE_ID_PEDOMETER_DETECTION, function(error, data) { + if (error) { + console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); + return; + } + console.info('Scalar data: ' + data.scalar); + } +); +``` + +## sensor.once + +once\(type: SensorType.SENSOR\_TYPE\_ID\_PEDOMETER, callback: AsyncCallback\): void + +监听计步器传感器数据变化一次。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

SensorType

+

是

+

计步传感器类型为SENSOR_TYPE_ID_PEDOMETER。

+

callback

+

AsyncCallback<PedometerResponse>

+

是

+

注册一次计步传感器的回调函数，上报的数据类型为PedometerResponse。

+
+ +**示例：** + +``` +sensor.once(sensor.SensorType.SENSOR_TYPE_ID_PEDOMETER, function(error, data) { + if (error) { + console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); + return; + } + //打印data的步数 + console.info('Steps: ' + data.steps); + } +); +``` + +## sensor.once + +once\(type:SensorType.SENSOR\_TYPE\_ID\_AMBIENT\_TEMPERATURE,callback:AsyncCallback\): void + +监听环境温度传感器数据变化一次。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

SensorType

+

是

+

环境温度传感器类型为SENSOR_TYPE_ID_AMBIENT_TEMPERATURE。

+

callback

+

AsyncCallback<AmbientTemperatureResponse>

+

是

+

注册一次环境温度传感器的回调函数，上报的数据类型为AmbientTemperatureResponse。

+
+ +**示例：** + +``` +sensor.once(sensor.SensorType.SENSOR_TYPE_ID_AMBIENT_TEMPERATURE, function(error, data) { + if (error) { + console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); + return; + } + //打印data的温度值 + console.info('Temperature: ' + data.temperature); + } +); +``` + +## sensor.once + +once\(type: SensorType.SENSOR\_TYPE\_ID\_MAGNETIC\_FIELD, callback: AsyncCallback\): void + +监听磁场传感器数据变化一次。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

SensorType

+

是

+

磁场传感器类型为SENSOR_TYPE_ID_MAGNETIC_FIELD。

+

callback

+

AsyncCallback<MagneticFieldResponse>

+

是

+

注册一次磁场传感器的回调函数，上报的数据类型为MagneticFieldResponse。

+
+ +**示例：** + +``` +sensor.once(sensor.SensorType.SENSOR_TYPE_ID_MAGNETIC_FIELD, function(error, data) { + if (error) { + console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); + return; + } + //打印data的x,y,z轴坐标的分量 + console.info('X-coordinate component: ' + data.x); + console.info('Y-coordinate component: ' + data.y); + console.info('Z-coordinate component: ' + data.z); + } +); +``` + +## sensor.once + +once\(type:SensorType.SENSOR\_TYPE\_ID\_MAGNETIC\_FIELD\_UNCALIBRATED,callback:AsyncCallback\): void + +监听未校准磁场传感器数据变化一次。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

SensorType

+

是

+

未校准磁场传感器类型为SENSOR_TYPE_ID_MAGNETIC_FIELD_UNCALIBRATED。

+

callback

+

AsyncCallback<MagneticFieldUncalibratedResponse>

+

是

+

注册一次未校准磁场传感器的回调函数，上报的数据类型为MagneticFieldUncalibratedResponse。

+
+ +**示例：** + +``` +sensor.once(sensor.SensorType.SENSOR_TYPE_ID_MAGNETIC_FIELD_UNCALIBRATED, function(error, data) { + if (error) { + console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); + return; + } + //打印data的x,y,z轴坐标的分量 + console.info('X-coordinate component: ' + data.x); + console.info('Y-coordinate component: ' + data.y); + console.info('Z-coordinate component: ' + data.z); + //打印data的x,y,z轴坐标的偏移量 + console.info('X-coordinate bias: ' + data.biasX); + console.info('Y-coordinate bias: ' + data.biasY); + console.info('Z-coordinate bias: ' + data.biasZ); + } +); +``` + +## sensor.once + +once\(type: SensorType.SENSOR\_TYPE\_ID\_PROXIMITY, callback: AsyncCallback\): void + +监听接近光传感器数据变化一次。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

SensorType

+

是

+

接近光传感器类型为SENSOR_TYPE_ID_PROXIMITY。

+

callback

+

AsyncCallback<ProximityResponse>

+

是

+

注册一次接近光传感器的回调函数，上报的数据类型为ProximityResponse。

+
+ +**示例：** + +``` +sensor.once(sensor.SensorType.SENSOR_TYPE_ID_PROXIMITY, function(error, data) { + if (error) { + console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); + return; + } + //打印data的距离值 + console.info('Distance: ' + data.distance); + } +); +``` + +## senor.once + +once\(type: SensorType.SENSOR\_TYPE\_ID\_HUMIDITY, callback: AsyncCallback\): void + +监听湿度传感器数据变化一次。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

SensorType

+

是

+

湿度传感器类型为SENSOR_TYPE_ID_HUMIDITY。

+

callback

+

AsyncCallback<HumidityResponse>

+

是

+

注册一次湿度传感器的回调函数，上报的数据类型为HumidityResponse。

+
+ +**示例：** + +``` +sensor.once(sensor.SensorType.SENSOR_TYPE_ID_HUMIDITY, function(error, data) { + if (error) { + console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); + return; + } + //打印data的湿度值 + console.info('Humidity: ' + data.humidity); + } +); +``` + +## sensor.once + +once\(type: SensorType.SENSOR\_TYPE\_ID\_BAROMETER, callback: AsyncCallback\): void + +监听气压计传感器数据变化一次。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

SensorType

+

是

+

气压计传感器类型为SENSOR_TYPE_ID_BAROMETER。

+

callback

+

AsyncCallback<BarometerResponse>

+

是

+

注册一次气压计传感器的回调函数，上报的数据类型为BarometerResponse。

+
+ +**示例：** + +``` +sensor.once(sensor.SensorType.SENSOR_TYPE_ID_BAROMETER, function(error, data) { + if (error) { + console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); + return; + } + //打印data的压强值 + console.info('Atmospheric pressure: ' + data.pressure); + } +); +``` + +## sensor.once + +once\(type: SensorType.SENSOR\_TYPE\_ID\_HALL, callback: AsyncCallback\): void + +监听霍尔传感器数据变化一次。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

SensorType

+

是

+

霍尔传感器类型为SENSOR_TYPE_ID_HALL。

+

callback

+

AsyncCallback<HallResponse>

+

是

+

注册一次霍尔传感器的回调函数，上报的数据类型为HallResponse。

+
+ +**示例：** + +``` +sensor.once(sensor.SensorType.SENSOR_TYPE_ID_HALL, function(error, data) { + if (error) { + console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); + return; + } + //打印data的状态值 + console.info('Status: ' + data.status); + } +); +``` + +## sensor.once + +once\(type: SensorType.SENSOR\_TYPE\_ID\_AMBIENT\_LIGHT, callback: AsyncCallback\): void + +监听环境光传感器数据变化一次。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

SensorType

+

是

+

环境光传感器类型为SENSOR_TYPE_ID_AMBIENT_LIGHT。

+

callback

+

AsyncCallback<LightResponse>

+

是

+

注册一次环境光传感器的回调函数，上报的数据类型为LightResponse。

+
+ +**示例：** + +``` +sensor.once(sensor.SensorType.SENSOR_TYPE_ID_AMBIENT_LIGHT, function(error, data) { + if (error) { + console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); + return; + } + //打印data的光强值 + console.info(''Illumination: ' + data.intensity); + } +); +``` + +## sensor.once + +once\(type: SensorType.SENSOR\_TYPE\_ID\_ORIENTATION, callback: AsyncCallback\): void + +监听方向传感器数据变化一次。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

SensorType

+

是

+

方向传感器类型为SENSOR_TYPE_ID_ORIENTATION。

+

callback

+

AsyncCallback<OrientationResponse>

+

是

+

注册一次方向传感器的回调函数，上报的数据类型为OrientationResponse。

+
+ +**示例：** + +``` +sensor.once(sensor.SensorType.SENSOR_TYPE_ID_ORIENTATION, function(error, data) { + if (error) { + console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); + return; + } + //打印data的x,y,z轴坐标的分量 + console.info('X-coordinate component: ' + data.x); + console.info('Y-coordinate component: ' + data.y); + console.info('Z-coordinate component: ' + data.z); + } +); +``` + +## sensor.once + +once\(type: SensorType.SENSOR\_TYPE\_ID\_ROTATION\_VECTOR, callback: AsyncCallback\): void + +监听旋转矢量传感器数据变化一次。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

SensorType

+

是

+

旋转矢量传感器类型为SENSOR_TYPE_ID_ROTATION_VECTOR。

+

callback

+

AsyncCallback<RotationVectorResponse>

+

是

+

注册一次旋转矢量传感器的回调函数，上报的数据类型为RotationVectorResponse。

+
+ +**示例：** + +``` +sensor.once(sensor.SensorType.SENSOR_TYPE_ID_ROTATION_VECTOR, function(error, data) { + if (error) { + console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); + return; + } + //打印data的x,y,z轴坐标的分量 + console.info('X-coordinate component: ' + data.x); + console.info('Y-coordinate component: ' + data.y); + console.info('Z-coordinate component: ' + data.z); + } +); +``` + +## sensor.once + +once\(type: SensorType.SENSOR\_TYPE\_ID\_HEART\_RATE, callback: AsyncCallback\): void + +监听心率传感器数据变化一次。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

SensorType

+

是

+

心率传感器类型为SENSOR_TYPE_ID_HEART_RATE。

+

callback

+

AsyncCallback<HeartRateResponse>

+

是

+

注册一次心率传感器的回调函数，上报的数据类型为HeartRateResponse。

+
+ +**示例：** + +``` +sensor.once(sensor.SensorType.SENSOR_TYPE_ID_HEART_RATE, function(error, data) { + if (error) { + console.error("Subscription failed. Error code: " + error.code + "; message: " + error.message); + return; + } + //打印data的心率值 + console.info("Heart rate: " + data.heartRate); + } +); +``` + +## sensor.once + +once\(type: SensorType.SENSOR\_TYPE\_ID\_WEAR\_DETECTION, callback: AsyncCallback\): void + +监听佩戴检测传感器数据变化一次。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

SensorType

+

是

+

佩戴检测传感器类型为SENSOR_TYPE_ID_WEAR_DETECTION。

+

callback

+

AsyncCallback<WearDetectionResponse>

+

是

+

注册一次穿戴检测传感器的回调函数，上报的数据类型为WearDetectionResponse。

+
+ +**示例：** + +``` +sensor.once(sensor.SensorType.SENSOR_TYPE_ID_WEAR_DETECTION, function(error, data) { + if (error) { + console.error("Failed to register data, error code is" + error.code + ", message: " + error.message); + return; + } + //打印data的佩戴状态 + console.info("Wear status: "+ data.value); + } +); +``` + +## sensor.off + +off\(type: SensorType, callback?: AsyncCallback\): void + +取消订阅传感器数据。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

SensorType

+

是

+

要取消订阅的传感器类型。

+

callback

+

AsyncCallback<void>

+

是

+

取消订阅的传感器的回调函数，表示接口调用是否成功。

+
+ +**示例：** + +``` +sensor.off(sensor.SensorType.SENSOR_TYPE_ID_ACCELEROMETER, function(error) { + if (error) { + console.error("Failed to unsubscribe from acceleration sensor data. Error code: " + error.code + "; message: " + error.message); + return; + } + console.info("Succeeded in unsubscribing from acceleration sensor data."); + } +); + +``` + +## SensorType + +表示要订阅或取消订阅的传感器类型。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

默认值

+

说明

+

SENSOR_TYPE_ID_ACCELEROMETER

+

1

+

加速度传感器。

+

SENSOR_TYPE_ID_GYROSCOPE

+

2

+

陀螺仪传感器。

+

SENSOR_TYPE_ID_AMBIENT_LIGHT

+

5

+

环境光传感器。

+

SENSOR_TYPE_ID_MAGNETIC_FIELD

+

6

+

磁场传感器。

+

SENSOR_TYPE_ID_BAROMETER

+

8

+

气压计传感器。

+

SENSOR_TYPE_ID_HALL

+

10

+

霍尔传感器。

+

SENSOR_TYPE_ID_PROXIMITY

+

12

+

接近光传感器。

+

SENSOR_TYPE_ID_HUMIDITY

+

13

+

湿度传感器。

+

SENSOR_TYPE_ID_ORIENTATION

+

256

+

方向传感器。

+

SENSOR_TYPE_ID_GRAVITY

+

257

+

重力传感器。

+

SENSOR_TYPE_ID_LINEAR_ACCELERATION

+

258

+

线性加速度传感器。

+

SENSOR_TYPE_ID_ROTATION_VECTOR

+

259

+

旋转矢量传感器。

+

SENSOR_TYPE_ID_AMBIENT_TEMPERATURE

+

260

+

环境温度传感器。

+

SENSOR_TYPE_ID_MAGNETIC_FIELD_UNCALIBRATED

+

261

+

未校准磁场传感器。

+

SENSOR_TYPE_ID_GYROSCOPE_UNCALIBRATED

+

263

+

未校准陀螺仪传感器。

+

SENSOR_TYPE_ID_SIGNIFICANT_MOTION

+

264

+

有效运动传感器。

+

SENSOR_TYPE_ID_PEDOMETER_DETECTION

+

265

+

计步检测传感器。

+

SENSOR_TYPE_ID_PEDOMETER

+

266

+

计步传感器。

+

SENSOR_TYPE_ID_HEART_RATE

+

278

+

心率传感器。

+

SENSOR_TYPE_ID_WEAR_DETECTION

+

280

+

佩戴检测传感器。

+

SENSOR_TYPE_ID_ACCELEROMETER_UNCALIBRATED

+

281

+

未校准加速度计传感器。

+
+ +## AccelerometerResponse + +加速度传感器数据。 + +### 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

x

+

number

+

是

+

是

+

x轴坐标分量。

+

y

+

number

+

是

+

是

+

y轴坐标分量。

+

z

+

number

+

是

+

是

+

z轴坐标分量。

+
+ +## LinearAccelerometerResponse + +线性加速度传感器数据。 + +### 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

x

+

number

+

是

+

是

+

x轴坐标分量。

+

y

+

number

+

是

+

是

+

y轴坐标分量。

+

z

+

number

+

是

+

是

+

z轴坐标分量。

+
+ +## AccelerometerUncalibratedResponse + +未校准加速度计传感器数据。 + +### 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

x

+

number

+

是

+

是

+

x轴坐标分量。

+

y

+

number

+

是

+

是

+

y轴坐标分量。

+

z

+

number

+

是

+

是

+

z轴坐标分量。

+

biasX

+

number

+

是

+

是

+

x轴坐标偏移量。

+

biasY

+

number

+

是

+

是

+

y轴坐标偏移量。

+

biasZ

+

number

+

是

+

是

+

z轴坐标偏移量。

+
+ +## GravityResponse + +重力传感器数据。 + +### 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

x

+

number

+

是

+

是

+

x轴坐标分量。

+

y

+

number

+

是

+

是

+

y轴坐标分量。

+

z

+

number

+

是

+

是

+

z轴坐标分量。

+
+ +## OrientationResponse + +方向传感器数据。 + +### 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

x

+

number

+

是

+

是

+

x轴坐标分量。

+

y

+

number

+

是

+

是

+

y轴坐标分量。

+

z

+

number

+

是

+

是

+

z轴坐标分量。

+
+ +## RotationVectorResponse + +旋转矢量传感器数据。 + +### 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

x

+

number

+

是

+

是

+

x轴坐标分量。

+

y

+

number

+

是

+

是

+

y轴坐标分量。

+

z

+

number

+

是

+

是

+

z轴坐标分量。

+
+ +## GyroscopeResponse + +陀螺仪传感器数据。 + +### 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

x

+

number

+

是

+

是

+

x轴坐标分量。

+

y

+

number

+

是

+

是

+

y轴坐标分量。

+

z

+

number

+

是

+

是

+

z轴坐标分量。

+
+ +## GyroscopeUncalibratedResponse + +未校准陀螺仪传感器数据。 + +### 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

x

+

number

+

是

+

是

+

x轴坐标分量。

+

y

+

number

+

是

+

是

+

y轴坐标分量。

+

z

+

number

+

是

+

是

+

z轴坐标分量。

+

biasX

+

number

+

是

+

是

+

x轴坐标偏移量。

+

biasY

+

number

+

是

+

是

+

y轴坐标偏移量。

+

biasZ

+

number

+

是

+

是

+

z轴坐标偏移量。

+
+ +## SignificantMotionResponse + +有效运动传感器数据。 + +### 属性 + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

scalar

+

number

+

是

+

是

+

表示剧烈运动程度。测量三个物理轴（x、y 和 z）上，设备是否存在大幅度运动；如果取值为1则代表存在大幅度运动，取值为0则代表没有大幅度运动。

+
+ +## ProximityResponse + +接近光传感器数据。 + +### 属性 + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

distance

+

number

+

是

+

是

+

可见物体与设备显示器的接近程度。0表示接近，1表示远离。

+
+ +## LightResponse + +环境光传感器数据。 + +### 属性 + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

intensity

+

number

+

是

+

是

+

光强（单位：勒克斯）。

+
+ +## HallResponse + +霍尔传感器数据。 + +### 属性 + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

status

+

number

+

是

+

是

+

显示霍尔状态。测量设备周围是否存在磁力吸引，0表示有，1表示没有。

+
+ +## MagneticFieldResponse + +磁场传感器数据。 + +### 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

x

+

number

+

是

+

是

+

x轴坐标分量。

+

y

+

number

+

是

+

是

+

y轴坐标分量。

+

z

+

number

+

是

+

是

+

z轴坐标分量。

+
+ +## MagneticFieldUncalibratedResponse + +未校准磁场传感器数据。 + +### 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

x

+

number

+

是

+

是

+

x轴坐标分量。

+

y

+

number

+

是

+

是

+

y轴坐标分量。

+

z

+

number

+

是

+

是

+

z轴坐标分量。

+

biasX

+

number

+

是

+

是

+

x轴坐标偏移量。

+

biasY

+

number

+

是

+

是

+

y轴坐标偏移量。

+

biasZ

+

number

+

是

+

是

+

z轴坐标偏移量。

+
+ +## PedometerResponse + +计步传感器数据。 + +### 属性 + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

steps

+

number

+

是

+

是

+

计数的步骤数。每次设备重新启动时，该值将从0重新计算。

+
+ +## HumidityResponse + +湿度传感器数据。 + +### 属性 + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

humidity

+

number

+

是

+

是

+

湿度值。测量环境的相对湿度，以百分比 (%) 表示。

+
+ +## PedometerDetectResponse + +计步检测传感器数据。 + +### 属性 + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

scalar

+

number

+

是

+

是

+

计步器检测。检测用户的计步动作，如果取值为1则代表用户产生了计步行走的动作，取值为0则代表用户没有发生运动。

+
+ +## AmbientTemperatureResponse + +温度传感器数据。 + +### 属性 + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

temperature

+

number

+

是

+

是

+

环境温度（单位：摄氏度）。

+
+ +## BarometerResponse + +气压计传感器数据。 + +### 属性 + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

pressure

+

number

+

是

+

是

+

压力值（单位：帕斯卡）。

+
+ +## HeartRateResponse + +心率传感器数据。 + +### 属性 + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

heartRate

+

number

+

是

+

是

+

心率值。测量用户的心率数值，单位是次/分。

+
+ +## WearDetectionResponse + +佩戴检测传感器数据。 + +### 属性 + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

value

+

boolean

+

是

+

是

+

表示设备是否被穿戴（true 表示已穿戴，false表示未穿戴）。

+
+ diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-system-app.md b/zh-cn/application-dev/js-reference/apis/js-apis-system-app.md new file mode 100644 index 0000000000000000000000000000000000000000..957202257b731b011d4cc6854d56949f19f102f4 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-system-app.md @@ -0,0 +1,87 @@ +# 应用上下文 + +- [导入模块](#zh-cn_topic_0000001173324607_s1959b1529f574b74861e62008289bb21) +- [权限列表](#zh-cn_topic_0000001173324607_section11257113618419) +- [app.getInfo](#zh-cn_topic_0000001173324607_s0e8ff40704e442bc87a848afa47bdfbb) +- [app.terminate](#zh-cn_topic_0000001173324607_section974325124119) + +## 导入模块 + +``` +import app from '@system.app'; +``` + +## 权限列表 + +无 + +## app.getInfo + +getInfo\(\): <[AppResponse](#zh-cn_topic_0000001173324607_t3e93239d9b134b80957bcdd4acb05291)\> + +获取当前应用配置文件中声明的信息。 + +- 返回值 + + **表 1** AppResponse + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

说明

+

appID6+

+

string

+

表示应用的包名，用于标识应用的唯一性。

+

appName

+

string

+

表示应用的名称。

+

versionName

+

string

+

表示应用的版本名称。

+

versionCode

+

number

+

表示应用的版本号。

+
+ +- 示例 + + ``` + var info = app.getInfo(); + console.log(JSON.stringify(info)); + ``` + + +## app.terminate + +terminate\(\): void + +退出当前Ability + +- 示例 + + ``` + app.terminate(); + ``` + + diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-system-configuration.md b/zh-cn/application-dev/js-reference/apis/js-apis-system-configuration.md new file mode 100644 index 0000000000000000000000000000000000000000..aa842fb629b0c5045a7c96c2aaea6d85e27a5974 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-system-configuration.md @@ -0,0 +1,76 @@ +# 应用配置 + +- [导入模块](#zh-cn_topic_0000001173324675_section15536249155915) +- [权限列表](#zh-cn_topic_0000001173324675_section8152081004) +- [configuration.getLocale](#zh-cn_topic_0000001173324675_section8389829903) + +## 导入模块 + +``` +import configuration from '@system.configuration'; +``` + +## 权限列表 + +无 + +## configuration.getLocale + +getLocale\(\): <[LocaleResponse](#zh-cn_topic_0000001173324675_table1544853546)\> + +获取应用当前的语言和地区。默认与系统的语言和地区同步。 + +- 返回值 + + **表 1** LocaleResponse + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

说明

+

language

+

string

+

语言。例如：zh。

+

countryOrRegion

+

string

+

国家或地区。例如：CN。

+

dir

+

string

+

文字布局方向。取值范围：

+
  • ltr：从左到右；
  • rtl：从右到左。
+

unicodeSetting5+

+

string

+

语言环境定义的Unicode语言环境键集，如果此语言环境没有特定键集，则返回空集。

+

例如：{"nu":"arab"}，表示当前环境下的数字采用阿拉伯语的数字。

+
+ +- 示例 + + ``` + const localeInfo = configuration.getLocale(); + console.info(localeInfo.language); + ``` + + diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-system-prompt.md b/zh-cn/application-dev/js-reference/apis/js-apis-system-prompt.md new file mode 100644 index 0000000000000000000000000000000000000000..4635839395b2da773e9cfb5511a81e8c11c8620c --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-system-prompt.md @@ -0,0 +1,313 @@ +# 弹窗 + +- [导入模块](#zh-cn_topic_0000001127125010_s1fada83813e64efcbc67e970ced86588) +- [权限列表](#zh-cn_topic_0000001127125010_section11257113618419) +- [prompt.showToast](#zh-cn_topic_0000001127125010_sc34d255befcf467dab069802dc9e54d8) +- [prompt.showDialog](#zh-cn_topic_0000001127125010_sc6babedb391e4de9af1189ebc9ff5e69) +- [prompt.showActionMenu6+](#zh-cn_topic_0000001127125010_section151752203513) + +## 导入模块 + +``` +import prompt from '@system.prompt'; +``` + +## 权限列表 + +无 + +## prompt.showToast + +showToast\(Object\): void + +显示文本弹窗。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

message

+

string

+

是

+

显示的文本信息。

+

duration

+

number

+

否

+

默认值1500ms，建议区间：1500ms-10000ms。

+
说明：

若小于1500ms则取默认值，最大取值为10000ms。

+
+

[bottom]5+

+

<length>

+

否

+

设置弹窗边框距离屏幕底部的位置。

+
说明：

仅手机和平板设备支持。

+
+
+ +- 示例 + + ``` + prompt.showToast({ + message: 'Message Info', + duration: 2000, + }); + ``` + + +## prompt.showDialog + +showDialog\(\): void + +在页面内显示对话框。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

title

+

string

+

否

+

标题文本。

+

message

+

string

+

否

+

内容文本。

+

buttons

+

Array

+

否

+

对话框中按钮的数组，结构为：{text:'button', color: '#666666'}，支持1-3个按钮。其中第一个为positiveButton；第二个为negativeButton；第三个为neutralButton。

+

success

+

Function

+

否

+

接口调用成功的回调函数，返回值如success返回值所示。

+

cancel

+

Function

+

否

+

取消调用此接口的回调函数。

+

complete

+

Function

+

否

+

弹框退出时的回调函数。

+
+ + success返回值： + + + + + + + + + + + + +

参数名

+

类型

+

说明

+

index

+

number

+

选中按钮在buttons数组中的索引。

+
+ +- 示例 + + ``` + prompt.showDialog({ + title: 'Title Info', + message: 'Message Info', + buttons: [ + { + text: 'button', + color: '#666666', + }, + ], + success: function(data) { + console.log('dialog success callback，click button : ' + data.index); + }, + cancel: function() { + console.log('dialog cancel callback'); + }, + }); + ``` + + +## prompt.showActionMenu6+ + +showActionMenu\(Object\): void + +显示操作菜单。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

title

+

string

+

否

+

标题文本。

+

buttons

+

Array

+

是

+

对话框中按钮的数组，结构为：{text:'button', color: '#666666'}，支持1-6个按钮。大于6个按钮时弹窗不显示。

+

success

+

(data: TapIndex) => void

+

否

+

接口调用成功的回调函数。

+

cancel

+

() => void

+

否

+

接口调用失败的回调函数。

+

complete

+

() => void

+

否

+

接口调用结束的回调函数。

+
+ + **表 1** TapIndex + + + + + + + + + + + + +

参数名

+

类型

+

说明

+

tapIndex

+

number

+

选中按钮在buttons数组中的索引，从0开始。

+
+ +- 示例 + + ``` + prompt.showActionMenu({ + title: 'Title Info', + buttons: [ + { + text: 'item1', + color: '#666666', + }, + { + text: 'item2', + color: '#000000', + }, + ], + success: function(data) { + console.log('dialog success callback，click button : ' + data.tapIndex); + }, + fail: function(data) { + console.log('dialog fail callback' + data.errMsg); + }, + }); + ``` + + diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-system-router.md b/zh-cn/application-dev/js-reference/apis/js-apis-system-router.md new file mode 100644 index 0000000000000000000000000000000000000000..f6f26dc6f381a4852c30d905bd33f083635be4f2 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-system-router.md @@ -0,0 +1,463 @@ +# 页面路由 + +- [导入模块](#zh-cn_topic_0000001127125008_s0e7b1e85a4274f58a8206e0b065bd80c) +- [权限列表](#zh-cn_topic_0000001127125008_section11257113618419) +- [router.push](#zh-cn_topic_0000001127125008_s938bf8d664f9475485e83d445c0eeeae) +- [router.replace](#zh-cn_topic_0000001127125008_s6d485e6ae3064996a4de2f407bc4287d) +- [router.back](#zh-cn_topic_0000001127125008_s3f958a02dde141e69b7f02f22fb2e401) +- [router.clear](#zh-cn_topic_0000001127125008_sa5c3dfd1bb0d4b43906c3d770d6ab2d9) +- [router.getLength](#zh-cn_topic_0000001127125008_s3f121f4005934fda9a1830a909c92c25) +- [router.getState](#zh-cn_topic_0000001127125008_s8843a443a12048e68e33f586aee8dc34) +- [router.enableAlertBeforeBackPage6+](#zh-cn_topic_0000001127125008_section54535465226) +- [router.disableAlertBeforeBackPage6+](#zh-cn_topic_0000001127125008_section08671236103317) + +>![](../../public_sys-resources/icon-notice.gif) **须知：** +>页面路由需要在页面渲染完成之后才能调用，在onInit和onReady生命周期中页面还处于渲染阶段，禁止调用页面路由方法。 + +## 导入模块 + +``` +import router from '@system.router'; +``` + +## 权限列表 + +无 + +## router.push + +push\(Object\): void + +跳转到应用内的指定页面。 + +- 参数 + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

uri

+

string

+

是

+

表示目标页面的uri，可以用以下两种格式：

+
  • 页面绝对路径，由配置文件中pages列表提供，例如：
    • pages/index/index
    • pages/detail/detail
    +
  • 特殊值，如果uri的值是"/"，则跳转到首页。
+

params

+

Object

+

否

+

跳转时要同时传递到目标页面的数据，跳转到目标页面后，参数可以在页面中直接使用，如this.data1(data1为跳转时params参数中的key值)。如果目标页面中已有该字段，则其值会被传入的字段值覆盖。

+
+ +- 示例 + + ``` + // 在当前页面中 + export default { + pushPage() { + router.push({ + uri: 'pages/routerpage2/routerpage2', + params: { + data1: 'message', + data2: { + data3: [123, 456, 789] + }, + }, + }); + } + } + // 在routerpage2页面中 + export default { + data: { + data1: 'default', + data2: { + data3: [1, 2, 3] + } + }, + onInit() { + console.info('showData1:' + this.data1); + console.info('showData3:' + this.data2.data3); + } + } + ``` + + >![](../../public_sys-resources/icon-note.gif) **说明：** + >页面路由栈支持的最大Page数量为32。 + + +## router.replace + +replace\(Object\): void + +用应用内的某个页面替换当前页面，并销毁被替换的页面。 + +- 参数 + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

uri

+

string

+

是

+

目标页面的uri，可以是以下的两种格式：

+
  • 页面绝对路径，由配置文件中pages列表提供，例如：
    • pages/index/index
    • pages/detail/detail
    +
  • 特殊值，如果uri的值是"/"，则跳转到首页。
+

params

+

Object

+

否

+

跳转时要同时传递到目标页面的数据，跳转到目标页面后，参数可以在页面中直接使用，如this.data1(data1为跳转时params参数中的key值)。如果目标页面中已有该字段，则其值会被传入的字段值覆盖。

+
+ +- 示例 + + ``` + // 在当前页面中 + export default { + replacePage() { + router.replace({ + uri: 'pages/detail/detail', + params: { + data1: 'message', + }, + }); + } + } + // 在detail页面中 + export default { + data: { + data1: 'default' + }, + onInit() { + console.info('showData1:' + this.data1) + } + } + ``` + + +## router.back + +back\(Object\): void + +返回上一页面或指定的页面。 + +- 参数 + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

uri

+

string

+

否

+

返回到指定uri的界面，如果页面栈上没有uri页面，则不响应该情况。如果uri未设置，则返回上一页。

+
+ +- 示例 + + ``` + // index页面 + router.push({ + uri: 'pages/detail/detail', + }); + + // detail页面 + router.push({ + uri: 'pages/mall/mall', + }); + + // mall页面通过back，将返回detail页面 + router.back(); + // detail页面通过back，将返回index页面 + router.back(); + // 通过back，返回到detail页面 + router.back({uri:'pages/detail/detail'}); + ``` + + >![](../../public_sys-resources/icon-note.gif) **说明：** + >示例中的uri字段是页面路由，由配置文件中的pages列表指定。 + + +## router.clear + +clear\(\): void + +清空页面栈中的所有历史页面，仅保留当前页面作为栈顶页面。 + +- 示例 + + ``` + router.clear(); + ``` + + +## router.getLength + +getLength\(\): string + +获取当前在页面栈内的页面数量。 + +- 返回值 + + + + + + + + + + +

类型

+

说明

+

string

+

页面数量，页面栈支持最大数值是32。

+
+ +- 示例 + + ``` + var size = router.getLength(); + console.log('pages stack size = ' + size); + ``` + + +## router.getState + +getState\(\): <[RouterState](#zh-cn_topic_0000001127125008_tf9e3eb9ef0aa4d9880f996fe6afa6d1b)\> + +获取当前页面的状态信息。 + +- 返回值 + + **表 1** RouterState + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

说明

+

index

+

number

+

表示当前页面在页面栈中的索引。

+
说明：

从栈底到栈顶，index从1开始递增。

+
+

name

+

string

+

表示当前页面的名称，即对应文件名。

+

path

+

string

+

表示当前页面的路径。

+
+ +- 示例 + + ``` + var page = router.getState(); + console.log('current index = ' + page.index); + console.log('current name = ' + page.name); + console.log('current path = ' + page.path); + ``` + + +## router.enableAlertBeforeBackPage6+ + +enableAlertBeforeBackPage\(Object\): void + +开启页面返回询问对话框。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

message

+

string

+

是

+

询问对话框内容。

+

success

+

() => void

+

否

+

接口调用成功的回调函数。

+

fail

+

() => void

+

否

+

接口调用失败的回调函数。

+

complete

+

() => void

+

否

+

接口调用结束的回调函数。

+
+ +- 示例 + + ``` + router.enableAlertBeforeBackPage({ + message: 'Message Info', + success: function() { + console.log('success'); + }, + fail: function() { + console.log('fail'); + }, + }); + ``` + + +## router.disableAlertBeforeBackPage6+ + +disableAlertBeforeBackPage\(Object\): void + +禁用页面返回询问对话框。 + +- 参数： + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

success

+

() => void

+

否

+

接口调用成功的回调函数。

+

fail

+

() => void

+

否

+

接口调用失败的回调函数。

+

complete

+

() => void

+

否

+

接口调用结束的回调函数。

+
+ +- 示例 + + ``` + router.disableAlertBeforeBackPage({ + success: function() { + console.log('success'); + }, + fail: function() { + console.log('fail'); + }, + }); + ``` + + diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-system-timer.md b/zh-cn/application-dev/js-reference/apis/js-apis-system-timer.md new file mode 100644 index 0000000000000000000000000000000000000000..dac6e52dbce810ac253b9d050644bdb18e3d942e --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-system-timer.md @@ -0,0 +1,251 @@ +# 定时器 + +- [导入模块](#zh-cn_topic_0000001173324687_section7480141454919) +- [权限列表](#zh-cn_topic_0000001173324687_section11257113618419) +- [setTimeout](#zh-cn_topic_0000001173324687_section691616559215) +- [clearTimeout](#zh-cn_topic_0000001173324687_section591824471012) +- [setInterval](#zh-cn_topic_0000001173324687_section3644185910144) +- [clearInterval](#zh-cn_topic_0000001173324687_section16451595149) + +## 导入模块 + +无需导入。 + +## 权限列表 + +无 + +## setTimeout + +setTimeout\(handler\[,delay\[,…args\]\]\): number + +设置一个定时器，该定时器在定时器到期后执行一个函数。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

handler

+

Function

+

是

+

定时器到期后执行函数。

+

delay

+

number

+

否

+

延迟的毫秒数，函数的调用会在该延迟之后发生。如果省略该参数，delay取默认值0，意味着“马上”执行，或尽快执行。

+

...args

+

Array<any>

+

否

+

附加参数，一旦定时器到期，它们会作为参数传递给handler。

+
+ +- 返回值 + + + + + + + + + + +

类型

+

说明

+

number

+

timeout定时器的ID。

+
+ +- 示例 + + ``` + var timeoutID = setTimeout(function() { + console.log('delay 1s'); + }, 1000); + ``` + + +## clearTimeout + +clearTimeout\(timeoutID: number\): void + +取消了先前通过调用setTimeout\(\)建立的定时器。 + +- 参数 + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

timeoutID

+

number

+

是

+

要取消定时器的ID， 是由setTimeout()返回的。

+
+ +- 示例 + + ``` + var timeoutID = setTimeout(function() { + console.log('do after 1s delay.'); + }, 1000); + + clearTimeout(timeoutID); + ``` + + +## setInterval + +setInterval\(handler\[, delay\[, ...args\]\]\): number + +重复调用一个函数，在每次调用之间具有固定的时间延迟。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

handler

+

Function

+

是

+

要重复调用的函数。

+

delay

+

number

+

否

+

延迟的毫秒数（一秒等于1000毫秒），函数的调用会在该延迟之后发生。

+

...args

+

Array<any>

+

否

+

附加参数，一旦定时器到期，他们会作为参数传递给handler。

+
+ +- 返回值 + + + + + + + + + + +

类型

+

说明

+

number

+

intervallID重复定时器的ID。

+
+ +- 示例 + + ``` + var intervalID = setInterval(function() { + console.log('do very 1s.'); + }, 1000); + ``` + + +## clearInterval + +clearInterval\(intervalID: number\): void + +可取消先前通过 setInterval\(\) 设置的重复定时任务。 + +- 参数 + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

intervalID

+

number

+

是

+

要取消的重复定时器的ID，是由 setInterval() 返回的。

+
+ +- 示例 + + ``` + var intervalID = setInterval(function() { + console.log('do very 1s.'); + }, 1000); + + clearInterval(intervalID); + ``` + + diff --git "a/zh-cn/application-dev/js-reference/\347\263\273\347\273\237\345\261\236\346\200\247.md" b/zh-cn/application-dev/js-reference/apis/js-apis-systemparameter.md similarity index 99% rename from "zh-cn/application-dev/js-reference/\347\263\273\347\273\237\345\261\236\346\200\247.md" rename to zh-cn/application-dev/js-reference/apis/js-apis-systemparameter.md index efcaee5ff188786e25613bc18595341c9c30ad69..d8ec894d26895c6612fd28fcc59ec00d16df2805 100644 --- "a/zh-cn/application-dev/js-reference/\347\263\273\347\273\237\345\261\236\346\200\247.md" +++ b/zh-cn/application-dev/js-reference/apis/js-apis-systemparameter.md @@ -1,4 +1,4 @@ -# 系统属性 +# 系统属性 - [导入模块](#zh-cn_topic_0000001094819718_section370mcpsimp) - [权限列表](#zh-cn_topic_0000001094819718_section373mcpsimp) @@ -14,7 +14,7 @@ ## 导入模块 ``` -import parameter from '@ohos.systemparameter' +import parameter from '@ohos.systemParameter' ``` ## 权限列表 diff --git "a/zh-cn/application-dev/js-reference/\346\227\266\351\227\264\350\256\276\347\275\256.md" b/zh-cn/application-dev/js-reference/apis/js-apis-systemtime.md similarity index 99% rename from "zh-cn/application-dev/js-reference/\346\227\266\351\227\264\350\256\276\347\275\256.md" rename to zh-cn/application-dev/js-reference/apis/js-apis-systemtime.md index e331215d6c4947573a2a41cefa5d7225e50a7320..df99227d6af2b2787d06a4a1be155560003b6499 100644 --- "a/zh-cn/application-dev/js-reference/\346\227\266\351\227\264\350\256\276\347\275\256.md" +++ b/zh-cn/application-dev/js-reference/apis/js-apis-systemtime.md @@ -1,4 +1,4 @@ -# 时间设置 +# 时间设置 - [导入模块](#zh-cn_topic_0000001162403059_s56d19203690d4782bfc74069abb6bd71) - [权限列表](#zh-cn_topic_0000001162403059_section11257113618419) diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-update.md b/zh-cn/application-dev/js-reference/apis/js-apis-update.md new file mode 100644 index 0000000000000000000000000000000000000000..65e4dd111d0bbf6d3dc0a80ec0010057644e4ce6 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-update.md @@ -0,0 +1,241 @@ +# 系统恢复 + +- [导入模块](#zh-cn_topic_0000001163565327_section370mcpsimp) +- [权限列表](#zh-cn_topic_0000001163565327_section373mcpsimp) +- [方法](#zh-cn_topic_0000001163565327_section1319529172015) +- [verifyUpdatePackage\(upgradeFile: string, certsFile: string\): void](#zh-cn_topic_0000001163565327_section16874643181519) +- [rebootAndCleanUserData\(\): Promise](#zh-cn_topic_0000001163565327_section3242122116516) +- [rebootAndCleanUserData\(callback: AsyncCallback\): void](#zh-cn_topic_0000001163565327_section15242102114516) +- [applyNewVersion\(\): Promise](#zh-cn_topic_0000001163565327_section129661811195815) +- [applyNewVersion\(callback: AsyncCallback\): void](#zh-cn_topic_0000001163565327_section3381192816421) + +## 导入模块 + +``` +import update from '@ohos.update' +``` + +## 权限列表 + +无 + +## 方法 + +## verifyUpdatePackage\(upgradeFile: string, certsFile: string\): void + +升级前检查升级包是否有效。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

upgradeFile

+

string

+

是

+

待校验的升级包路径

+

certsFile

+

string

+

是

+

证书路径

+
+ +**返回值：** + +无 + +**示例：** + +``` +var getVar = update.getUpdater(); +getVar.on("verifyProgress", function (callback){ + console.info('on verifyProgress ' + callback.percent); +}); +getVar.verifyUpdatePackage("XXX", "XXX"); +getVar.off("verifyProgress"); +``` + +## rebootAndCleanUserData\(\): Promise + +重启设备并清除用户分区数据。 + +**参数：** + +无 + +**返回值：** + + + + + + + + + + +

类型

+

说明

+

Promise<number>

+

Promise示例，用于异步获取结果。

+
+ +**示例：** + +``` +var getVar = update.getUpdater(); +p = getVar.rebootAndCleanUserData(); +p.then(function (value) { + console.info("rebootAndCleanUserData promise success: " + value); +}).catch(function (err) { + console.info("rebootAndCleanUserData promise error: " + err.code); +}); +``` + +## rebootAndCleanUserData\(callback: AsyncCallback\): void + +重启设备并清除用户分区数据。 + +**参数：** + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

callback

+

Function

+

是

+

AsyncCallback<number>

+
+ +**返回值：** + +无 + +**示例：** + +``` +var getVar = update.getUpdater(); +getVar.rebootAndCleanUserData(function (err, data) { + if (err.code == 0) { + console.info("rebootAndCleanUserData callback success:" + data) + } else { + console.info("rebootAndCleanUserData callback err:" + err.code) + } +}); +``` + +## applyNewVersion\(\): Promise + +重启设备后安装升级包。 + +**参数：** + +无 + +**返回值：** + + + + + + + + + + +

类型

+

说明

+

Promise<number>

+

Promise示例，用于异步获取结果。

+
+ +**示例：** + +``` +var getVar = update.getUpdater(); +p.then(function (value) { + console.info("applyNewVersion promise success: " + value); +}).catch(function (err) { + console.info("applyNewVersion promise error: " + err.code); +}); +``` + +## applyNewVersion\(callback: AsyncCallback\): void + +重启设备后安装升级包。 + +**参数：** + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

callback

+

Function

+

是

+

AsyncCallback<number>

+
+ +**返回值：** + +无 + +**示例：** + +``` +var getVar = update.getUpdater(); +getVar.applyNewVersion(function (err, data) { + if (err.code == 0) { + console.info("applyNewVersion callback success:" + data) + } else { + console.info("applyNewVersion callback err:" + err.code) + } +}); +``` + diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-url.md b/zh-cn/application-dev/js-reference/apis/js-apis-url.md new file mode 100644 index 0000000000000000000000000000000000000000..9e915247b320b7ef1b53b514158d03db533a6135 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-url.md @@ -0,0 +1,950 @@ +# URL字符串解析 + +- [导入模块](#zh-cn_topic_0000001164966152_section2080512344162) +- [权限](#zh-cn_topic_0000001164966152_section11257113618419) +- [URLSearchParams](#zh-cn_topic_0000001164966152_section143808167355) + - [constructor](#zh-cn_topic_0000001164966152_section694710593283) + - [append](#zh-cn_topic_0000001164966152_section31006818349) + - [delete](#zh-cn_topic_0000001164966152_section25256353342) + - [getAll](#zh-cn_topic_0000001164966152_section2178125553415) + - [entries](#zh-cn_topic_0000001164966152_section139696402356) + - [forEach](#zh-cn_topic_0000001164966152_section299942113617) + - [get](#zh-cn_topic_0000001164966152_section1229318155373) + - [has](#zh-cn_topic_0000001164966152_section1385211103813) + - [set](#zh-cn_topic_0000001164966152_section186091516203910) + - [sort](#zh-cn_topic_0000001164966152_section102851552183915) + - [keys](#zh-cn_topic_0000001164966152_section816918183413) + - [values](#zh-cn_topic_0000001164966152_section0542174314413) + - [\[Symbol.iterator\]](#zh-cn_topic_0000001164966152_section1152151784210) + - [tostring](#zh-cn_topic_0000001164966152_section228585911428) + +- [URL](#zh-cn_topic_0000001164966152_section148871646203714) + - [属性](#zh-cn_topic_0000001164966152_section18482944113517) + - [constructor](#zh-cn_topic_0000001164966152_section712011584410) + - [tostring](#zh-cn_topic_0000001164966152_section2849448104520) + - [toJSON](#zh-cn_topic_0000001164966152_section3488111554611) + + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从 API Version 7 开始支持。 + +## 导入模块 + +``` +import Url from '@ohos.url' +``` + +## 权限 + +无 + +## URLSearchParams + +### constructor + +constructor\(init?: string\[\]\[\] | Record | string | URLSearchParams\) + +URLSearchParams的构造函数。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

init

+

string[][] | Record<string, string> | string | URLSearchParams

+

否

+

入参对象。

+
  • string[][]：字符串二维数组
  • Record<string, string>：对象列表
  • string：字符串
  • URLSearchParams：对象
+
+ +- 示例： + + ``` + var objectParams = new URLSearchParams([ ['user1', 'abc1'], ['query2', 'first2'], ['query3', 'second3'] ]); + var objectParams1 = new URLSearchParams({"fod" : 1 , "bard" : 2}); + var objectParams2 = new URLSearchParams('?fod=1&bard=2'); + var urlObject = new URL('https://developer.mozilla.org/?fod=1&bard=2'); + var params = new URLSearchParams(urlObject .search); + ``` + + +### append + +append\(name: string, value: string\): void + +将新的键值对插入到查询字符串。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

name

+

string

+

是

+

需要插入搜索参数的键名。

+

value

+

string

+

是

+

需要插入搜索参数的值。

+
+ +- 示例： + + ``` + let urlObject = new URL('https://developer.exampleUrl/?fod=1&bard=2'); + let paramsObject = new URLSearchParams(urlObject.search.slice(1)); + paramsObject.append('fod', 3); + ``` + + +### delete + +delete\(name: string\): void + +删除指定名称的键值对。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

name

+

string

+

是

+

需要删除的键值名称。

+
+ + +- 示例： + + ``` + let urlObject = new URL('https://developer.exampleUrl/?fod=1&bard=2'); + let paramsobject = new URLSearchParams(urlObject.search.slice(1)); + paramsobject.delete('foo'); + ``` + + +### getAll + +getAll\(name: string\): string\[\] + +获取指定名称的所有键值对。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

name

+

string

+

是

+

指定的键值名称。

+
+ + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

string[]

+

返回指定名称的所有键值对。

+
+ + +- 示例： + + ``` + let urlObject = new URL('https://developer.exampleUrl/?fod=1&bard=2'); + let paramsObject = new URLSearchParams(urlObject.search.slice(1)); + paramsObject.append('fod', 3); // Add a second value for the foo parameter. + console.log(params.getAll('fod')) // Output ["1","3"]. + ``` + + +### entries + +entries\(\): IterableIterator<\[string, string\]\> + +返回一个ES6的迭代器，迭代器的每一项都是一个 JavaScript Array。Array的第一项是name，Array的第二项是value。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

IterableIterator<[string, string]>

+

返回一个ES6的迭代器。

+
+ + +- 示例： + + ``` + var searchParamsObject = new URLSearchParams("keyName1=valueName1&keyName2=valueName2"); + for (var pair of searchParamsObject .entries()) { // Show keyName/valueName pairs + console.log(pair[0]+ ', '+ pair[1]); + } + ``` + + +### forEach + +forEach\(callbackfn: \(value: string, key: string, parent: this\) =\> void\): void + +通过回调函数来遍历URLSearchParams实例对象上的键值对。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

callbackfn

+

function

+

是

+

回调函数。

+
+ + **表 1** callbackfn的参数说明 + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

value

+

string

+

是

+

当前遍历到的键值。

+

key

+

string

+

是

+

当前遍历到的键名。

+

searchParams

+

Object

+

是

+

当前调用forEach方法的实例对象。

+
+ +- 示例： + + ``` + const myURLObject = new URL('https://developer.exampleUrl/?fod=1&bard=2'); + myURLObject.searchParams.forEach((value, name, searchParams) => { + console.log(name, value, myURLObject.searchParams === searchParams); + }); + ``` + + +### get + +get\(name: string\): string | null + +获取指定名称对应的第一个值。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

name

+

string

+

是

+

指定键值对的名称。

+
+ +- 返回值： + + + + + + + + + + + + + +

类型

+

说明

+

string

+

返回第一个值。

+

null

+

如果没找到，返回 null。

+
+ +- 示例： + + ``` + var paramsOject = new URLSearchParams(document.location.search.substring(1)); + var name = paramsOject.get("name"); // is the string "Jonathan" + var age = parseInt(paramsOject.get("age"), 10); // is the number 18 + var address = paramsOject.get("address"); // null + ``` + + +### has + +has\(name: string\): boolean + +判断一个指定的键名对应的值是否存在。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

name

+

string

+

是

+

要查找的参数的键名。

+
+ +- 返回值： + + + + + + + + + + +

类型

+

说明

+

boolean

+

是否存在相对应的key值，存在返回true，否则返回false。

+
+ +- 示例： + + ``` + let urlObject = new URL('https://developer.exampleUrl/?fod=1&bard=2'); + let paramsObject = new URLSearchParams(urlObject.search.slice(1)); + paramsObject.has('bard') === true; + ``` + + +### set + +set\(name: string, value: string\): void + +将与name关联的URLSearchParams对象中的值设置为value。如果存在名称为name的键值对，请将第一个键值对的值设置为value并删除所有其他值。如果不是，则将键值对附加到查询字符串。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

name

+

string

+

是

+

将要设置的参数的键值名。

+

value

+

string

+

是

+

所要设置的参数值。

+
+ + +- 示例： + + ``` + let urlObject = new URL('https://developer.exampleUrl/?fod=1&bard=2'); + let paramsObject = new URLSearchParams(urlObject.search.slice(1)); + paramsObject.set('baz', 3); // Add a third parameter. + ``` + + +### sort + +sort\(\): void + +对包含在此对象中的所有键值对进行排序，并返回undefined。排序顺序是根据键的Unicode代码点。该方法使用稳定的排序算法 （即，将保留具有相等键的键值对之间的相对顺序）。 + +- 示例： + + ``` + var searchParamsObject = new URLSearchParams("c=3&a=9&b=4&d=2"); // Create a test URLSearchParams object + searchParamsObject.sort(); // Sort the key/value pairs + console.log(searchParamsObject.toString()); // Display the sorted query string // Output a=9&b=2&c=3&d=4 + ``` + + +### keys + +keys\(\): IterableIterator + +返回一个所有键值对的name的ES6迭代器。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

IterableIterator<string>

+

返回一个所有键值对的name的ES6迭代器。

+
+ + +- 示例： + + ``` + var searchParamsObject = new URLSearchParams("key1=value1&key2=value2"); // Create a URLSearchParamsObject object for testing + for (var key of searchParamsObject .keys()) { // Output key-value pairs + console.log(key); + } + ``` + + +### values + +values\(\): IterableIterator + +返回一个所有键值对的value的ES6迭代器。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

IterableIterator<string>

+

返回一个所有键值对的value的ES6迭代器。

+
+ + +- 示例 + + ``` + var searchParams = new URLSearchParams("key1=value1&key2=value2"); // Create a URLSearchParamsObject object for testing + for (var value of searchParams.values()) { + console.log(value); + } + ``` + + +### \[Symbol.iterator\] + +\[Symbol.iterator\]\(\): IterableIterator<\[string, string\]\> + +返回一个ES6的迭代器，迭代器的每一项都是一个 JavaScript Array。Array的第一项是name，Array的第二项是value。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

IterableIterator<[string, string]>

+

返回一个ES6的迭代器。

+
+ + +- 示例： + + ``` + const paramsObject = new URLSearchParams('fod=bay&edg=bap'); + for (const [name, value] of paramsObject) { + console.log(name, value); + } + ``` + + +### tostring + +toString\(\): string + +返回序列化为字符串的搜索参数，必要时对字符进行百分比编码。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

string

+

返回序列化为字符串的搜索参数，必要时对字符进行百分比编码。

+
+ + +- 示例： + + ``` + let url = new URL('https://developer.exampleUrl/?fod=1&bard=2'); + let params = new URLSearchParams(url.search.slice(1)); + params.append('fod', 3); + console.log(params.toString()); + ``` + + +## URL + +### 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

hash

+

string

+

是

+

是

+

获取和设置URL的片段部分。

+

host

+

string

+

是

+

是

+

获取和设置URL的主机部分。

+

hostname

+

string

+

是

+

是

+

获取和设置URL的主机名部分，不带端口。

+

href

+

string

+

是

+

是

+

获取和设置序列化的URL。

+

origin

+

string

+

是

+

否

+

获取URL源的只读序列化。

+

password

+

string

+

是

+

是

+

获取和设置URL的密码部分。

+

pathname

+

string

+

是

+

是

+

获取和设置URL的路径部分。

+

port

+

string

+

是

+

是

+

获取和设置URL的端口部分。

+

protocol

+

string

+

是

+

是

+

获取和设置URL的协议部分。

+

search

+

string

+

是

+

是

+

获取和设置URL的序列化查询部分。

+

searchParams

+

URLsearchParams

+

是

+

否

+

获取URLSearchParams表示URL查询参数的对象。

+

username

+

string

+

是

+

是

+

获取和设置URL的用户名部分。

+
+ +### constructor + +constructor\(url: string, base?: string | URL\) + +URL的构造函数。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

url

+

string

+

是

+

入参对象。

+

base

+

string | URL

+

否

+

入参字符串或者对象。

+
  • string：字符串
  • URL：字符串或对象
+
+ + +- 示例： + + ``` + var mm = 'http://username:password@host:8080'; + var a = new URL("/", mm); // Output 'http://username:password@host:8080/'; + var b = new URL(mm); // Output 'http://username:password@host:8080/'; + new URL('path/path1', b); // Output 'http://username:password@host:8080/path/path1'; + var c = new URL('/path/path1', b); // Output 'http://username:password@host:8080/path/path1'; + new URL('/path/path1', c); // Output 'http://username:password@host:8080/path/path1'; + new URL('/path/path1', a); // Output 'http://username:password@host:8080/path/path1'; + new URL('/path/path1', "https://www.exampleUrl/fr-FR/toto"); // Output https://www.exampleUrl/path/path1 + new URL('/path/path1', ''); // Raises a TypeError exception as '' is not a valid URL + new URL('/path/path1'); // Raises a TypeError exception as '/path/path1' is not a valid URL + new URL('http://www.shanxi.com', ); // Output http://www.shanxi.com/ + new URL('http://www.shanxi.com', b); // Output http://www.shanxi.com/ + ``` + + +### tostring + +toString\(\): string + +将解析过后的URL转化为字符串。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

string

+

用于返回网址的字符串序列化。

+
+ + +- 示例： + + ``` + const url = new URL('http://username:password@host:8080/directory/file?query=pppppp#qwer=da'); + url.toString() + ``` + + +### toJSON + +toJSON\(\): string + +将解析过后的URL转化为JSON字符串。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

string

+

用于返回网址的字符串序列化。

+
+ + +- 示例： + + ``` + const url = new URL('http://username:password@host:8080/directory/file?query=pppppp#qwer=da'); + url.toString() + ``` + + diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-util.md b/zh-cn/application-dev/js-reference/apis/js-apis-util.md new file mode 100644 index 0000000000000000000000000000000000000000..616fec05c2a655cfaae4efc1f1b9f83d3de62b11 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-util.md @@ -0,0 +1,686 @@ +# 字符串编解码 + +- [导入模块](#zh-cn_topic_0000001210206021_s56d19203690d4782bfc74069abb6bd71) +- [权限](#zh-cn_topic_0000001210206021_section11257113618419) +- [util.printf](#zh-cn_topic_0000001210206021_section192192415554) +- [util.getErrorString](#zh-cn_topic_0000001210206021_section858912895313) +- [util.callbackWrapper](#zh-cn_topic_0000001210206021_section15594104112592) +- [util.promiseWrapper](#zh-cn_topic_0000001210206021_section172381917987) +- [TextDecoder](#zh-cn_topic_0000001210206021_section143808167355) + - [属性](#zh-cn_topic_0000001210206021_section18482944113517) + - [constructor](#zh-cn_topic_0000001210206021_section6179915133611) + - [decode](#zh-cn_topic_0000001210206021_section9594134194318) + +- [TextEncoder](#zh-cn_topic_0000001210206021_section7299123218370) + - [属性](#zh-cn_topic_0000001210206021_section46449515265) + - [constructor](#zh-cn_topic_0000001210206021_section19850195154719) + - [encode](#zh-cn_topic_0000001210206021_section16144104844716) + - [encodeInto](#zh-cn_topic_0000001210206021_section106591864813) + + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从 API Version 7 开始支持。 + +## 导入模块 + +``` +import util from '@ohos.util' +``` + +## 权限 + +无 + +## util.printf + +printf\(format: string, ...args: Object\[\]\): string + +通过式样化字符串对输入的内容按特定格式输出。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

format

+

string

+

是

+

式样化字符串。

+

...args

+

Object[]

+

否

+

待式样化数据。

+
+ +- 返回值： + + + + + + + + + + +

类型

+

说明

+

string

+

按特定格式式样化后的字符串。

+
+ +- 示例： + + ``` + var res = util.printf("%s", "hello world!"); + console.log(res); + ``` + + +## util.getErrorString + +getErrorString\(errno: number\): string + +获取系统错误码对应的详细信息。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

errno

+

number

+

是

+

系统发生错误产生的错误码。

+
+ +- 返回值： + + + + + + + + + + +

类型

+

说明

+

string

+

错误码对应的详细信息。

+
+ +- 示例： + + ``` + var errnum = 10; // 10：a system error number + var result = util.getErrorString(errnum); + console.log("result = " + result); + ``` + + +## util.callbackWrapper + +callbackWrapper\(original: Function\): \(err: Object, value: Object\)=\>void + +对异步函数进行回调化处理，回调中第一个参数将是拒绝原因（如果 Promise 已解决，则为 null），第二个参数将是已解决的值。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

original

+

Function

+

是

+

异步函数。

+
+ +- 返回值： + + + + + + + + + + +

类型

+

说明

+

Function

+

返回一个第一个参数是拒绝原因（如果 Promise 已解决，则为 null），第二个参数是已解决的回调函数。

+
+ +- 示例： + + ``` + async function promiseFn() { + return Promise.reject('value'); + } + var cb = util.callbackWrapper(promiseFn); + cb((err, ret) => { + expect(err).strictEqual('value'); + expect(ret).strictEqual(undefined); + }) + ``` + + +## util.promiseWrapper + +promiseWrapper\(original: \(err: Object, value: Object\) =\> void\): Object + +对异步函数处理并返回一个promise的版本。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

original

+

Function

+

是

+

异步函数。

+
+ +- 返回值： + + + + + + + + + + +

类型

+

说明

+

Function

+

采用遵循常见的错误优先的回调风格的函数（也就是将 (err, value) => ... 回调作为最后一个参数），并返回一个返回 promise 的版本。

+
+ +- 示例： + + ``` + function aysnFun(str1, str2, callback) { + if (typeof str1 === 'string' && typeof str1 === 'string') { + callback(null, str1 + str2); + } else { + callback('type err'); + } + } + let newPromiseObj = util.promiseWrapper(aysnFun)("Hello", 'World'); + newPromiseObj.then(res => { + expect(res).strictEqual('HelloWorld'); + }) + ``` + + +## TextDecoder + +### 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

encoding

+

string

+

是

+

否

+

编码格式。

+

fatal

+

boolean

+

是

+

否

+

是否显示致命错误。

+

ignoreBOM

+

boolean

+

是

+

否

+

是否忽略BOM（byte order marker）标记，默认值是false。

+
+ +### constructor + +constructor\(encoding?: string, options?: \{ fatal?: boolean; ignoreBOM?: boolean \},\) + +TextDecoder的构造函数。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

encoding

+

string

+

否

+

编码格式。

+

options

+

Object

+

否

+

编码相关选项参数，存在两个属性fatal和ignoreBOM。

+
+ + **表 1** options + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

必填

+

说明

+

fatal

+

boolean

+

否

+

是否显示致命错误。

+

ignoreBOM

+

boolean

+

否

+

是否忽略BOM标记。

+
+ +- 示例： + + ``` + var textDecoder = util.TextDecoder("utf-8",{ignoreBOM:true}) + ``` + + +### decode + +decode\(input: Uint8Array, options?:\{stream?:false\}\): string + +通过输入参数解码后输出对应文本。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

input

+

Uint8Array

+

是

+

数字。

+

options

+

Object

+

否

+

解码相关选项参数。

+
+ + **表 2** options + + + + + + + + + + + + + + +

名称

+

参数类型

+

必填

+

说明

+

stream

+

boolean

+

否

+

在随后的decode()调用中是否跟随附加数据。如果以块的形式处理数据，则设置为true；如果处理最后的块或数据未分块，则设置为false。默认为false。

+
+ +- 返回值： + + + + + + + + + + +

类型

+

说明

+

string

+

解码后的数据。

+
+ +- 示例： + + ``` + var textDecoder = util.TextDecoder("utf-8",{ignoreBOM:true}); + var result = new Uint8Array(6); + result[0] = 0xEF; + result[1] = 0xBB; + result[2] = 0xBF; + result[3] = 0x61; + result[4] = 0x62; + result[5] = 0x63; + console.log("input num:"); + for(var j= 0; j < 6; j++) { + console.log(result[j]); + } + var retStr = textDecoder.decode( result , {stream:false}); + console.log("retStr = " + retStr); + ``` + + +## TextEncoder + +### 属性 + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

encoding

+

string

+

是

+

否

+

编码格式，默认值是utf-8。

+
+ +### constructor + +constructor\(\) + +TextEncoder的构造函数。 + +- 示例： + + ``` + var textEncoder = new util.TextEncoder() + ``` + + +### encode + +encode\(input?: string\): Uint8Array + +通过输入参数编码后输出对应文本。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

input

+

string

+

是

+

需要编码的格式。

+
+ +- 返回值： + + + + + + + + + + +

类型

+

说明

+

Uint8Array

+

返回编码后的文本。

+
+ +- 示例： + + ``` + var textEncoder = new util.TextEncoder() + var result = new Uint8Array(buffer); + result = textEncoder.encode("\uD800¥¥"); + ``` + + +### encodeInto + +encodeInto\(input: string, dest: Uint8Array,\):\{ read: number; written: number \} + +放置生成的UTF-8编码文本。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

input

+

string

+

是

+

需要编码的格式。

+

dest

+

Uint8Array

+

是

+

Uint8Array对象实例，用于将生成的UTF-8编码文本放入其中

+
+ +- 返回值： + + + + + + + + + + +

类型

+

说明

+

Uint8Array

+

返回编码后的文本。

+
+ +- 示例： + + ``` + var that = new util.TextEncoder() + var buffer = new ArrayBuffer(4) + this.dest = new Uint8Array(buffer) + var result = that.encodeInto("abcd", this.dest) + ``` + + diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-vibrate.md b/zh-cn/application-dev/js-reference/apis/js-apis-vibrate.md new file mode 100644 index 0000000000000000000000000000000000000000..3f317c94031f1c5f52f2032487eaa66e5c541b86 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-vibrate.md @@ -0,0 +1,409 @@ +# 振动 + +- [导入模块](#zh-cn_topic_0000001144895807_s56d19203690d4782bfc74069abb6bd71) +- [权限列表](#zh-cn_topic_0000001144895807_section11257113618419) +- [vibrate.vibrate](#zh-cn_topic_0000001144895807_section94955414221) +- [vibrate.vibrate](#zh-cn_topic_0000001144895807_section476323710376) +- [vibrate.vibrate](#zh-cn_topic_0000001144895807_section181541055163712) +- [vibrate.vibrate](#zh-cn_topic_0000001144895807_section5358162183810) +- [vibrate.stop](#zh-cn_topic_0000001144895807_section1717861810386) +- [vibrate.stop](#zh-cn_topic_0000001144895807_section237813213385) +- [EffectId](#zh-cn_topic_0000001144895807_section153834312418) +- [VibratorStopMode](#zh-cn_topic_0000001144895807_section156137011615) + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7 开始支持。 + +## 导入模块 + +``` +import vibrate from '@ohos.vibrator'; +``` + +## 权限列表 + +ohos.permission.VIBRATE + +## vibrate.vibrate + +vibrate\(duration: number\): Promise + +按照指定持续时间触发马达振动。 + +**参数：** + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

duration

+

number

+

是

+

指示马达振动的持续时间。

+
+ +**返回值：** + + + + + + + + + + +

类型

+

说明

+

Promise<void>

+

指示触发振动是否成功。

+
+ +**示例：** + +``` +vibrate.vibrate(100).then(()=> + console.log('Promise returned to indicate a successful vibration.') +).catch((error) => { + console.error('Failed to trigger vibration.'); +}); +``` + +## vibrate.vibrate + +vibrate\(duration: number, callback?: AsyncCallback\): void + +按照指定持续时间触发马达振动。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

duration

+

number

+

是

+

指示马达振动的持续时间。

+

callback

+

AsyncCallback<void>

+

否

+

马达执行振动的回调函数，指示触发振动是否成功。

+
+ +**示例：** + +``` +vibrate.vibrate(100, function(error) { + if (error) { + console.error("Failed to trigger vibration. Error code: " + error.code + ", message: " + error.message); + return; + } + console.info("Succeeded in triggering vibration."); +}); +``` + +## vibrate.vibrate + +vibrate\(effectId: EffectId\): Promise + +按照指定振动效果触发马达振动。 + +**参数：** + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

effectId

+

EffectId

+

是

+

指示马达振动效果的字符串。

+
+ +**返回值：** + + + + + + + + + + +

类型

+

说明

+

Promise<void>

+

指示触发振动是否成功。

+
+ +**示例：** + +``` +vibrate.vibrate(vibrate.EffectId.EFFECT_CLOCK_TIMER).then(()=> + console.log('Promise returned to indicate a successful vibration.') +).catch((error) => { + console.error('Failed to trigger vibration.'); +}); +``` + +## vibrate.vibrate + +vibrate\(effectId: EffectId, callback?: AsyncCallback\): void + +按照指定振动效果触发马达振动。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

effectId

+

EffectId

+

是

+

指示马达振动效果的字符串。

+

callback

+

AsyncCallback<void>

+

否

+

马达执行振动的回调函数，指示触发振动是否成功。

+
+ +**示例：** + +``` +vibrate.vibrate(vibrate.EffectId.EFFECT_CLOCK_TIMER, function(error) { + if (error) { + console.error("Failed to trigger vibration. Error code: " + error.code + ", message: " + error.message); + return; + } + console.info("Succeeded in triggering vibration."); +}); +``` + +## vibrate.stop + +stop\(stopMode: VibratorStopMode\): Promise + +按照要停止指定的振动模式来停止马达的振动。如果要停止的振动模式与触发马达振动时的模式不相同，则调用本接口会失败。 + +**参数：** + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

stopMode

+

VibratorStopMode

+

是

+

指示马达要停止指定的振动模式。

+
+ +**返回值：** + + + + + + + + + + +

类型

+

说明

+

Promise<void>

+

指示停止振动是否成功。

+
+ +**示例：** + +``` +vibrate.stop(vibrate.VibratorStopMode.VIBRATOR_STOP_MODE_TIME).then(()=> + console.log('Promise returned to indicate a successful vibration stop.') +).catch((error) => { + console.error('Failed to stop vibration.'); +}); +``` + +## vibrate.stop + +stop\(stopMode: VibratorStopMode, callback?: AsyncCallback\): void; + +按照要停止指定的振动模式来停止马达的振动。如果要停止的振动模式与触发马达振动时的模式不相同，则调用本接口会失败。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

stopMode

+

VibratorStopMode

+

是

+

指示马达要停止指定的振动模式。

+

callback

+

AsyncCallback<void>

+

否

+

马达停止振动的回调函数，指示停止振动是否成功。

+
+ +**示例：** + +``` +vibrate.stop(vibrate.VibratorStopMode.VIBRATOR_STOP_MODE_TIME, function(error) { + if (error) { + console.error("Failed to stop vibration. Error code: " + error.code + ", message: " + error.message); + return; + } + console.info("Vibration stopped."); +}); +``` + +## EffectId + +表示马达振动效果的字符串。 + + + + + + + + + + + + +

名称

+

默认值

+

说明

+

EFFECT_CLOCK_TIMER

+

"haptic.clock.timer"

+

调整定时器时振动器的振动效果。

+
+ +## VibratorStopMode + +表示马达要停止指定的振动模式。 + + + + + + + + + + + + + + + + +

名称

+

默认值

+

说明

+

VIBRATOR_STOP_MODE_TIME

+

"time"

+

停止模式为duration模式的振动。即触发振动时参数类型为number，参数本身为指示振动持续时间的触发方式。

+

VIBRATOR_STOP_MODE_PRESET

+

"preset"

+

停止模式为预置EffectId的振动。即触发振动时参数类型为EffectId，参数本身为指示马达振动效果的字符串的触发方式。

+
+ diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-worker.md b/zh-cn/application-dev/js-reference/apis/js-apis-worker.md new file mode 100644 index 0000000000000000000000000000000000000000..c5da18f8dbe956aa312c02c7297ba1e8f7d25ddd --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-worker.md @@ -0,0 +1,1268 @@ +# 启动一个worker + +- [导入模块](#zh-cn_topic_0000001210206047_s56d19203690d4782bfc74069abb6bd71) +- [权限](#zh-cn_topic_0000001210206047_section11257113618419) +- [属性](#zh-cn_topic_0000001210206047_section1578718135716) +- [WorkerOptions](#zh-cn_topic_0000001210206047_section189341937163212) +- [constructor](#zh-cn_topic_0000001210206047_section192192415554) +- [Worker](#zh-cn_topic_0000001210206047_section182179935414) + - [postMessage](#zh-cn_topic_0000001210206047_section1410593619146) + - [on](#zh-cn_topic_0000001210206047_section1201327272) + - [once](#zh-cn_topic_0000001210206047_section74391240133513) + - [off](#zh-cn_topic_0000001210206047_section8902182918363) + - [terminate](#zh-cn_topic_0000001210206047_section17586211104214) + - [onexit](#zh-cn_topic_0000001210206047_section1478913292320) + - [onerror](#zh-cn_topic_0000001210206047_section89811422210) + - [onmessage](#zh-cn_topic_0000001210206047_section516520044515) + - [onmessageerror](#zh-cn_topic_0000001210206047_section85981145102714) + +- [EventTarget](#zh-cn_topic_0000001210206047_section3283104561014) + - [addEventListener](#zh-cn_topic_0000001210206047_section16405103834511) + - [removeEventListener](#zh-cn_topic_0000001210206047_section1437219413469) + - [dispatchEvent](#zh-cn_topic_0000001210206047_section1593912134916) + - [removeAllListener](#zh-cn_topic_0000001210206047_section1795215505533) + +- [DedicatedWorkerGlobalScope](#zh-cn_topic_0000001210206047_section36872023123912) + - [postMessage](#zh-cn_topic_0000001210206047_section1570345794013) + - [close](#zh-cn_topic_0000001210206047_section849610376427) + - [onmessage](#zh-cn_topic_0000001210206047_section1371121184815) + - [onmessageerror](#zh-cn_topic_0000001210206047_section16116749135015) + +- [PostMessageOptions](#zh-cn_topic_0000001210206047_section176401093245) +- [Event](#zh-cn_topic_0000001210206047_section1674694018507) +- [EventListener](#zh-cn_topic_0000001210206047_section53411747134914) + - [\(evt: Event\): void | Promise](#zh-cn_topic_0000001210206047_section1915072122913) + +- [ErrorEvent](#zh-cn_topic_0000001210206047_section11241623172418) +- [MessageEvent](#zh-cn_topic_0000001210206047_section191271455124710) +- [WorkerGlobalScope](#zh-cn_topic_0000001210206047_section12882825611) + - [属性](#zh-cn_topic_0000001210206047_section3626134611546) + - [onerror](#zh-cn_topic_0000001210206047_section1234812184551) + + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从 API Version 7 开始支持。 + +## 导入模块 + +``` +import worker from '@ohos.worker'; +``` + +## 权限 + +无 + +## 属性 + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

parentPort

+

DedicatedWorkerGlobalScope

+

是

+

是

+

worker线程用于与宿主线程通信的对象

+
+ +## WorkerOptions + +worker构造函数函数的选项信息，用于为worker添加其他信息。 + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

type

+

"classic"

+

是

+

是

+

按照指定方式执行脚本。

+

name

+

string

+

是

+

是

+

worker的名称。

+
+ +## constructor + +constructor\(scriptURL: string, options?: WorkerOptions\) + +worker构造函数。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

scriptURL

+

string

+

是

+

worker执行脚本的url，路径规范：若DevEco新建工程在pages同级下没有workers目录，需要新建workers目录，将脚本文件放入workers目录。

+

options

+

WorkerOptions

+

否

+

worker构造的选项。

+
+ +- 返回值： + + + + + + + + + + +

参数名

+

说明

+

worker

+

执行Worker构造函数生成的Worker对象，失败则返回undefined。

+
+ +- 示例： + + ``` + import worker from '@ohos.worker'; + const worker = new worker.Worker("workers/worker.js", {name:"first worker"} + ``` + + +## Worker + +使用以下方法前，均需先构造worker实例，Worker类继承[EventTarget](#zh-cn_topic_0000001210206047_section3283104561014)。 + +### postMessage + +postMessage\(message: Object, options?: PostMessageOptions\): void + +向worker线程发送消息，数据的传输采用结构化克隆算法。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

message

+

Object

+

是

+

发送至worker的数据。

+

options

+

PostMessageOptions

+

否

+

可转移对象是 ArrayBuffer 的实例对象。transferList数组中不可传入null。

+
+ +- 示例： + + ``` + import worker from '@ohos.worker'; + const worker = new worker.Worker("workers/worker.js") + worker.postMessage("hello world") + + const worker = new worker.Worker("workers/worker.js") + var buffer = new ArrayBuffer(8); + worker.postMessage(buffer, [buffer]); + ``` + + +### on + +on\(type: string, listener: EventListener\): void + +向worker添加一个事件监听。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

string

+

是

+

监听事件的type。

+

listener

+

EventListener

+

是

+

回调的事件。

+
+ +- 示例： + + ``` + import worker from '@ohos.worker'; + const worker = new worker.Worker("workers/worker.js") + worker.on("alert", (e)=>{ + console.log("alert listener callback); + }) + ``` + + +### once + +once\(type: string, listener: EventListener\): void + +向worker添加一个事件监听，事件监听只执行一次便自动删除。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

string

+

是

+

监听事件的type。

+

listener

+

EventListener

+

是

+

回调的事件。

+
+ +- 示例： + + ``` + import worker from '@ohos.worker'; + const worker = new worker.Worker("workers/worker.js") + worker.once("alert", (e)=>{ + console.log("alert listener callback); + }) + ``` + + +### off + +off\(type: string, listener?: EventListener\): void + +删除worker的事件监听。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

string

+

是

+

需要删除事件的type。

+

listener

+

EventListener

+

否

+

需要删除的回调的事件。

+
+ +- 示例： + + ``` + import worker from '@ohos.worker'; + const worker = new worker.Worker("workers/worker.js") + worker.off("alert") + ``` + + +### terminate + +terminate\(\): void + +关闭worker线程，终止worker接收消息。 + +- 示例： + + ``` + import worker from '@ohos.worker'; + const worker = new worker.Worker("workers/worker.js") + worker.terminate() + ``` + + +### onexit + +onexit?: \(code: number\) =\> void + +Worker对象的onexit属性表示worker退出时被调用的事件处理程序，处理程序在宿主线程中执行。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

code

+

number

+

否

+

worker退出的code。

+
+ +- 示例： + + ``` + import worker from '@ohos.worker'; + const worker = new worker.Worker("workers/worker.js") + worker.onexit = function(e) { + console.log("onexit") + } + ``` + + +### onerror + +onerror?: \(err: ErrorEvent\) =\> void + +Worker对象的onerror属性表示worker在执行过程中发生异常被调用的事件处理程序，处理程序在宿主线程中执行。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

err

+

ErrorEvent

+

否

+

异常数据。

+
+ +- 示例： + + ``` + import worker from '@ohos.worker'; + const worker = new worker.Worker("workers/worker.js") + worker.onerror = function(e) { + console.log("onerror") + } + ``` + + +### onmessage + +onmessage?: \(event: MessageEvent\) =\> void + +Worker对象的onmessage属性表示宿主线程接收到来自其创建的worker通过parentPort.postMessage接口发送的消息时被调用的事件处理程序，处理程序在宿主线程中执行。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

event

+

MessageEvent

+

否

+

收到的worker消息数据。

+
+ +- 示例： + + ``` + import worker from '@ohos.worker'; + const worker = new worker.Worker("workers/worker.js") + worker.onmessage = function(e) { + console.log("onerror") + } + ``` + + +### onmessageerror + +onmessageerror?: \(event: MessageEvent\) =\> void + +Worker对象的onmessageerror属性表示当 Worker 对象接收到一条无法被序列化的消息时被调用的事件处理程序，处理程序在宿主线程中执行。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

event

+

MessageEvent

+

否

+

异常数据。

+
+ +- 示例： + + ``` + import worker from '@ohos.worker'; + const worker = new worker.Worker("workers/worker.js") + worker.onmessageerror= function(e) { + console.log("onmessageerror") + } + ``` + + +## EventTarget + +### addEventListener + +addEventListener\(type: string, listener: EventListener\): void + +向worker添加一个事件监听。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

string

+

是

+

监听事件的type。

+

listener

+

EventListener

+

是

+

回调的事件。

+
+ +- 示例： + + ``` + import worker from '@ohos.worker'; + const worker = new worker.Worker("workers/worker.js") + worker.addEventListener("alert", (e)=>{ + console.log("alert listener callback); + }) + ``` + + +### removeEventListener + +removeEventListener\(type: string, callback?: EventListener\): void + +删除worker的事件监听。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

string

+

是

+

需要删除事件的type。

+

callback

+

EventListener

+

否

+

需要删除的回调的事件。

+
+ +- 示例： + + ``` + import worker from '@ohos.worker'; + const worker = new worker.Worker("workers/worker.js") + worker.removeEventListener("alert") + ``` + + +### dispatchEvent + +dispatchEvent\(event: Event\): boolean + +分发定义在worker的事件。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

event

+

Event

+

是

+

需要分发的事件。

+
+ +- 返回值： + + + + + + + + + + +

参数名

+

说明

+

boolean

+

分发的结果，false表示分发失败。

+
+ +- 示例： + + ``` + import worker from '@ohos.worker'; + const worker = new worker.Worker("workers/worker.js") + worker.dispatchEvent({type:"alert"}) + ``` + + +### removeAllListener + +removeAllListener\(\): void + +删除worker的所有事件监听。 + +- 示例： + + ``` + import worker from '@ohos.worker'; + const worker = new worker.Worker("workers/worker.js") + worker.removeAllListener({type:"alert"}) + ``` + + +## DedicatedWorkerGlobalScope + +worker线程用于与宿主线程通信的类，通过postMessage接口发送消息给宿主线程、close接口关闭worker线程，DedicatedWorkerGlobalScope类继承[WorkerGlobalScope](#zh-cn_topic_0000001210206047_section12882825611)。 + +### postMessage + +postMessage\(message: Object, options?: PostMessageOptions\): void + +worker向宿主线程发送消息。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

message

+

Object

+

是

+

发送至worker的数据。

+

options

+

PostMessageOptions

+

否

+

可转移对象是ArrayBuffer的实例对象。transferList数组中不可传入null。

+
+ +- 示例： + + ``` + main.js + import worker from '@ohos.worker'; + const worker = new worker.Worker("workers/worker.js") + worker.postMessage("hello world") + worker.onmessage = function(e) { + console.log("receive data from worker.js") + } + + worker.js + import worker from "@ohos.worker"; + const parentPort = worker.parentPort; + parentPort.onmessage = function(e){ + parentPort.postMessage("receive data from main.js") + } + ``` + + +### close + +close\(\): void + +关闭worker线程，终止worker接收消息。 + +- 示例： + + ``` + main.js + import worker from '@ohos.worker'; + const worker = new worker.Worker("workers/worker.js") + + worker.js + import worker from "@ohos.worker"; + const parentPort = worker.parentPort; + parentPort.onmessage = function(e) { + parentPort.close() + } + ``` + + +### onmessage + +onmessage?: \(event: MessageEvent\) =\> void + +DedicatedWorkerGlobalScope的onmessage属性表示worker线程收到来自其宿主线程通过worker.postMessage接口发送的消息时被调用的事件处理程序，处理程序在worker线程中执行。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

event

+

MessageEvent

+

否

+

收到的worker消息数据。

+
+ +- 示例： + + ``` + main.js + import worker from '@ohos.worker'; + const worker = new worker.Worker("workers/worker.js") + worker.postMessage("hello world") + + worker.js + import worker from "@ohos.worker"; + const parentPort = worker.parentPort; + parentPort.onmessage = function(e) { + console.log("receive main.js message") + } + ``` + + +### onmessageerror + +onmessageerror?: \(event: MessageEvent\) =\> void + +DedicatedWorkerGlobalScope的onmessageerror属性表示当 Worker 对象接收到一条无法被反序列化的消息时被调用的事件处理程序，处理程序在worker线程中执行。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

event

+

MessageEvent

+

否

+

异常数据。

+
+ +- 示例： + + ``` + main.js + import worker from '@ohos.worker'; + const worker = new worker.Worker("workers/worker.js") + + worker.js + import worker from "@ohos.worker"; + const parentPort = worker.parentPort; + parentPort.onmessageerror= function(e) { + console.log("worker.js onmessageerror") + } + ``` + + +## PostMessageOptions + +明确数据传递过程中需要转移所有权对象的类，传递所有权的对象必须是ArrayBuffer。 + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

transfer

+

Object[]

+

是

+

是

+

ArrayBuffer数组，用于传递所有权。

+
+ +## Event + +事件类。 + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

type

+

string

+

是

+

否

+

指定事件的type。

+

timeStamp

+

number

+

是

+

否

+

事件创建时的时间戳（精度为毫秒）。

+
+ +## EventListener + +事件监听类。 + +### \(evt: Event\): void | Promise + +执行的回调函数。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

evt

+

Event

+

是

+

回调的事件类。

+
+ +- 返回值 + + + + + + + + + + +

参数名

+

说明

+

void | Promise<void>

+

无返回值或者以Promise形式返回。

+
+ +- 示例： + + ``` + import worker from '@ohos.worker'; + const worker = new worker.Worker("workers/worker.js") + worker.addEventListener("alert", (e)=>{ + console.log("alert listener callback); + }) + ``` + + +## ErrorEvent + +错误事件类，用于表示worker执行过程中出现异常的详细信息，ErrorEvent类继承[Event](#zh-cn_topic_0000001210206047_section1674694018507)。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

message

+

string

+

是

+

否

+

异常发生的错误信息。

+

filename

+

string

+

是

+

否

+

出现异常所在的文件。

+

lineno

+

number

+

是

+

否

+

异常所在的行数。

+

colno

+

number

+

是

+

否

+

异常所在的列数。

+

error

+

Object

+

是

+

否

+

异常类型。

+
+ +## MessageEvent + +消息类，持有worker线程间传递的数据。 + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

data

+

T

+

是

+

否

+

线程间传递的数据。

+
+ +## WorkerGlobalScope + +worker线程自身的运行环境，WorkerGlobalScope类继承[EventTarget](#zh-cn_topic_0000001210206047_section3283104561014)。 + +### 属性 + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

name

+

string

+

是

+

否

+

worker的名字，有new Worker时指定。

+

self

+

WorkerGlobalScope & typeof globalThis

+

是

+

否

+

WorkerGlobalScope本身。

+
+ +### onerror + +onerror?: \(ev: ErrorEvent\) =\> void + +WorkerGlobalScope的onerror属性表示worker在执行过程中发生异常被调用的事件处理程序，处理程序在worker线程中执行。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

ev

+

ErrorEvent

+

否

+

异常数据。

+
+ +- 示例： + + ``` + main.js + import worker from '@ohos.worker'; + const worker = new worker.Worker("workers/worker.js") + + worker.js + import worker from "@ohos.worker"; + const parentPort = worker.parentPort + parentPort.onerror = function(e){ + console.log("worker.js onerror") + } + ``` + + diff --git a/zh-cn/application-dev/js-reference/app-js.md b/zh-cn/application-dev/js-reference/app-js.md deleted file mode 100755 index b9354823eab42470903557a9bccd9b0bd1015422..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/app-js.md +++ /dev/null @@ -1,21 +0,0 @@ -# app.js - -每个应用可以在app.js自定义应用级生命周期的实现逻辑，包括： - -- onCreate：在应用生成时被调用的生命周期函数。 -- onDestory：在应用销毁时被调用的生命周期函数。 - -以下示例仅在生命周期函数中打印对应日志： - -``` -// app.js -export default { - onCreate() { - console.info('Application onCreate'); - }, - onDestroy() { - console.info('Application onDestroy'); - }, -} -``` - diff --git a/zh-cn/application-dev/js-reference/badge.md b/zh-cn/application-dev/js-reference/badge.md deleted file mode 100644 index f1ad7c22eddead233e90dd03da91e46e1f21db39..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/badge.md +++ /dev/null @@ -1,765 +0,0 @@ -# badge - -- [权限列表](#zh-cn_topic_0000001060267851_section11257113618419) -- [子组件](#zh-cn_topic_0000001060267851_section9288143101012) -- [属性](#zh-cn_topic_0000001060267851_section1355418214459) -- [样式](#zh-cn_topic_0000001060267851_section5775351116) -- [事件](#zh-cn_topic_0000001060267851_section43461940193518) -- [示例](#zh-cn_topic_0000001060267851_section3510104413431) - -应用中如果有需用户关注的新事件提醒，可以采用新事件标记来标识。 - ->![](public_sys-resources/icon-note.gif) **说明：** ->从API Version 5 开始支持。 - -## 权限列表 - -无 - -## 子组件 - -支持单个子组件。 - ->![](public_sys-resources/icon-note.gif) **说明：** ->仅支持单子组件节点，如果使用多子组件节点，默认使用第一个子组件节点。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

placement

-

string

-

rightTop

-

否

-

事件提醒的数字标记或者圆点标记的位置，可选值为：

-
  • right：位于组件右边框；
  • rightTop：位于组件边框右上角；
  • left：位于组件左边框；
-

count

-

number

-

0

-

否

-

设置提醒的消息数，默认为0。当设置相应的提醒消息数大于0时，消息提醒会变成数字标记类型，未设置消息数或者消息数不大于0时，消息提醒将采用圆点标记。

-
说明：

当数字设置为大于maxcount时，将使用maxcount显示。

-
-

visible

-

boolean

-

false

-

否

-

是否显示消息提醒，当收到新信息提醒时可以设置该属性为true，显示相应的消息提醒，如果需要使用数字标记类型，同时需要设置相应的count属性。

-

maxcount

-

number

-

99

-

否

-

最大消息数限制，当收到新信息提醒大于该限制时，标识数字会进行省略，仅显示maxcount+。

-

config

-

BadgeConfig

-

-

-

否

-

设置新事件标记相关配置属性。

-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

disabled

-

boolean

-

false

-

否

-

当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-
- -**表 1** BadgeConfig - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

badgeColor

-

<color>

-

#fa2a2d

-

否

-

新事件标记背景色。

-

textColor

-

<color>

-

#ffffff

-

否

-

数字标记的数字文本颜色。

-

textSize

-

<length>

-

10px

-

否

-

数字标记的数字文本大小。

-

badgeSize

-

<length>

-

6px

-

否

-

圆点标记的默认大小

-
- -## 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

width

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的宽度。

-

缺省时使用元素自身内容需要的宽度。

-

height

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的高度。

-

缺省时使用元素自身内容需要的高度。

-

padding

-

<length>

-

0

-

否

-
该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    -

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    -

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    -

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

    -
-
-

padding-[left|top|right|bottom]

-

<length>

-

0

-

否

-

设置左、上、右、下内边距属性。

-

padding-[start|end]

-

<length>

-

0

-

否

-

设置起始和末端内边距属性。

-

margin

-

<length>

-

0

-

否

-

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

-

  • 只有一个值时，这个值会被指定给全部的四个边。

    -

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    -

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    -

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    -
-

margin-[left|top|right|bottom]

-

<length>

-

0

-

否

-

设置左、上、右、下外边距属性。

-

margin-[start|end]

-

<length>

-

0

-

否

-

设置起始和末端外边距属性。

-

border

-

-

-

0

-

否

-

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

-

border-style

-

string

-

solid

-

否

-

使用简写属性设置所有边框的样式，可选值为：

-
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
-
  • solid：显示为一条实线。
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

否

-

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

-

border-[left|top|right|bottom]

-

-

-

-

-

否

-

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

-

border-width

-

<length>

-

0

-

否

-

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

否

-

分别设置左、上、右、下四个边框的宽度。

-

border-color

-

<color>

-

black

-

否

-

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

否

-

分别设置左、上、右、下四个边框的颜色。

-

border-radius

-

<length>

-

-

-

否

-

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，如果要设置color和width，需要将四个方向一起设置（border-width、border-color）。

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

否

-

分别设置左上，右上，右下和左下四个角的圆角半径。

-

background

-

<linear-gradient>

-

-

-

否

-

仅支持设置渐变样式，与background-color、background-image不兼容。

-

background-color

-

<color>

-

-

-

否

-

设置背景颜色。

-

background-image

-

string

-

-

-

否

-

设置背景图片。与background-color、background不兼容；支持本地图片资源地址。

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

否

-

设置背景图片的大小。

-
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    -
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
-

background-repeat

-

string

-

repeat

-

否

-

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

-
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

否

-
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    -
-
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>
-

opacity

-

number

-

1

-

否

-

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

-

display

-

string

-

-

flex

-

否

-

确定一个元素所产生的框的类型，可选值为：

-
  • flex：弹性布局。
  • none：不渲染此元素。
-

visibility

-

string

-

-

visible

-

否

-

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

-
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
-
说明：

visibility和display样式都设置时，仅display生效

-
-

flex

-

number

-

-

-

否

-

规定当前组件如何适应父组件中的可用空间。它作为一个简写属性，用来设置组件的flex-grow。

-
说明：

仅父容器为<div>、<list-item>、<tabs>时生效。

-
-

flex-grow

-

number

-

0

-

否

-

设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。

-
说明：

仅父容器为<div>、<list-item>、<tabs>时生效。

-
-

flex-shrink

-

number

-

1

-

否

-

设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。

-
说明：

仅父容器为<div>、<list-item>、<tabs>时生效。

-
-

flex-basis

-

<length>

-

-

-

-

否

-

设置组件在主轴方向上的初始大小。

-
说明：

仅父容器为<div>、<list-item>、<tabs>时生效。

-
-

position

-

string

-

relative

-

否

-

设置元素的定位类型，不支持动态变更。

-
  • fixed：相对与整个界面进行定位。
  • absolute：相对于父元素进行定位。
  • relative：相对于其正常位置进行定位。
-
说明：

absolute属性仅在父容器为<div>、<stack>时生效。

-
-

[left|top|right|bottom]

-

<length>

-

-

-

否

-

left|top|right|bottom需要配合position样式使用，来确定元素的偏移位置。

-
  • left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  • top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  • right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
  • bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
-
- ->![](public_sys-resources/icon-note.gif) **说明：** ->badge组件的子组件大小不能超过badge组件本身的大小，否则子组件不会绘制。 - -## 事件 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

touchstart

-

TouchEvent

-

手指刚触摸屏幕时触发该事件。

-

touchmove

-

TouchEvent

-

手指触摸屏幕后移动时触发该事件。

-

touchcancel

-

TouchEvent

-

手指触摸屏幕中动作被打断时触发该事件。

-

touchend

-

TouchEvent

-

手指触摸结束离开屏幕时触发该事件。

-

click

-

-

-

点击动作触发该事件。

-

longpress

-

-

-

长按动作触发该事件。

-

swipe5+

-

SwipeEvent

-

组件上快速滑动后触发。

-
- -## 示例 - -``` - -
- - huawei - - - huawei - -
-``` - -``` -/* xxx.css */ -.container { - flex-direction: column; - width: 100%; - align-items: center; -} -.badge { - width: 50%; - margin-top: 100px; -} -.text1 { - background-color: #f9a01e; - font-size: 50px; -} -.text2 { - background-color: #46b1e3; - font-size: 50px; -} -``` - -``` -// xxx.js -export default { - data:{ - badgeconfig:{ - badgeColor:"#0a59f7", - textColor:"#ffffff", - } - } -} -``` - -![](figures/zh-cn_image_0000001083086542.png) - diff --git a/zh-cn/application-dev/js-reference/button.md b/zh-cn/application-dev/js-reference/button.md deleted file mode 100755 index f41761b998fa78ece11a21f1d70ec4734dec1322..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/button.md +++ /dev/null @@ -1,811 +0,0 @@ -# button - -- [子组件](#zh-cn_topic_0000001058670746_section9288143101012) -- [属性](#zh-cn_topic_0000001058670746_section2907183951110) -- [事件](#zh-cn_topic_0000001058670746_section1379202884114) -- [样式](#zh-cn_topic_0000001058670746_section5775351116) -- [示例](#zh-cn_topic_0000001058670746_section16867208402) - -提供按钮组件，包括胶囊按钮、圆形按钮、文本按钮。 - -## 子组件 - -不支持。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

type

-

string

-

-

-

否

-

不支持动态修改。如果该属性缺省，展示类胶囊型按钮，不同于胶囊类型，四边圆角可以通过border-radius分别指定，如果需要设置该属性，则可选值包括如下：

-
  • capsule：胶囊型按钮，带圆角按钮，有背景色和文本；
  • circle：圆形按钮，支持放置图标；
  • text：文本按钮，仅包含文本显示；
-

value

-

string

-

-

-

否

-

button的文本值，circle类型不生效。

-

icon

-

string

-

-

-

否

-

button的图标路径，仅circle类型生效，图标格式为jpg，png和svg。

-

placement5+

-

string

-

end

-

否

-

仅在type属性为缺省时生效，设置图标位于文本的位置，可选值为：

-
  • start：图标位于文本起始处；
  • end：图标位于文本结束处；
  • top：图标位于文本上方；
  • bottom：图标位于文本下方。
-

waiting

-

boolean

-

false

-

否

-

waiting状态，waiting为true时展现等待中转圈效果，位于文本左侧。类型为download时不生效。

-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

disabled

-

boolean

-

false

-

否

-

当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-
- -## 事件 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

touchstart

-

TouchEvent

-

手指刚触摸屏幕时触发该事件。

-

touchmove

-

TouchEvent

-

手指触摸屏幕后移动时触发该事件。

-

touchcancel

-

TouchEvent

-

手指触摸屏幕中动作被打断时触发该事件。

-

touchend

-

TouchEvent

-

手指触摸结束离开屏幕时触发该事件。

-

click

-

-

-

点击动作触发该事件。

-

longpress

-

-

-

长按动作触发该事件。

-

swipe5+

-

SwipeEvent

-

组件上快速滑动后触发。

-
- -## 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

text-color

-

<color>

-

#ff007dff

-

否

-

按钮的文本颜色。

-

font-size

-

<length>

-

16px

-

否

-

按钮的文本尺寸。

-

allow-scale

-

boolean

-

true

-

否

-

按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

-
说明：

如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。

-
-

font-style

-

string

-

normal

-

否

-

按钮的字体样式。

-

font-weight

-

number | string

-

normal

-

否

-

按钮的字体粗细。见text组件font-weight的样式属性。

-

font-family

-

<string>

-

sans-serif

-

否

-

按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

-

icon-width

-

<length>

-

-

-

否

-

设置圆形按钮内部图标的宽，默认填满整个圆形按钮。

-
说明：

icon使用svg图源时必须设置该样式。

-
-

icon-height

-

<length>

-

-

-

否

-

设置圆形按钮内部图标的高，默认填满整个圆形按钮。

-
说明：

icon使用svg图源时必须设置该样式。

-
-

radius

-

<length>

-

-

-

否

-

圆形按钮半径或者胶囊按钮圆角半径。在圆形按钮类型下该样式优先于通用样式的width和height样式。

-

width

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的宽度。

-

缺省时使用元素自身内容需要的宽度。

-

height

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的高度。

-

缺省时使用元素自身内容需要的高度。

-

padding

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的内边距属性。

-
该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    -

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    -

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    -

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下内边距属性。

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端内边距属性。

-

margin

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

-

  • 只有一个值时，这个值会被指定给全部的四个边。

    -

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    -

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    -

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下外边距属性。

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端外边距属性。

-

border

-

-

-

0

-

否

-

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

-

border-style

-

string

-

solid

-

否

-

使用简写属性设置所有边框的样式，可选值为：

-
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
-
  • solid：显示为一条实线。
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

否

-

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

-

border-[left|top|right|bottom]

-

-

-

-

-

否

-

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

-

border-width

-

<length>

-

0

-

否

-

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

否

-

分别设置左、上、右、下四个边框的宽度。

-

border-color

-

<color>

-

black

-

否

-

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

否

-

分别设置左、上、右、下四个边框的颜色。

-

border-radius

-

<length>

-

-

-

否

-

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，border-[left|top|right|bottom]-style，如果要设置color、width和style，需要将四个方向一起设置（border-width、border-color、border-style）。

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

否

-

分别设置左上，右上，右下和左下四个角的圆角半径。

-

background

-

<linear-gradient>

-

-

-

否

-

仅支持设置渐变样式，与background-color、background-image不兼容。

-

background-color

-

<color>

-

-

-

否

-

设置背景颜色。

-

background-image

-

string

-

-

-

否

-

设置背景图片。与background-color、background不兼容；支持本地图片资源地址。

-

示例：

-
  • background-image: url("/common/background.png")
-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

否

-

设置背景图片的大小。

-
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    -
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
-

background-repeat

-

string

-

repeat

-

否

-

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

-
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

否

-
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    -
-
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>
-

opacity

-

number

-

1

-

否

-

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

-

display

-

string

-

-

flex

-

否

-

确定一个元素所产生的框的类型，可选值为：

-
  • flex：弹性布局。
  • none：不渲染此元素。
-

visibility

-

string

-

-

visible

-

否

-

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

-
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
-
说明：

visibility和display样式都设置时，仅display生效

-
-

flex

-

-

-

-

-

否

-

规定当前组件如何适应父组件中的可用空间。

-

flex可以指定1个，2个5+或3个5+值。

-

单值语法：

-
  • 一个无单位数：用来设置组件的flex-grow
  • 一个有效的宽度值5+：用来设置组件的flex-basis
-

双值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow。第二个值是以下之一：

-
  • 一个无单位数：用来设置组件的flex-shrink
  • 一个有效的宽度值：用来设置组件的flex-basis
-

三值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow；第二个值必须是无单位数，用来设置组件的flex-shrink；第三个值必须是一个有效的宽度值，用来设置组件的flex-basis。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-grow

-

number

-

0

-

否

-

设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-shrink

-

number

-

1

-

否

-

设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-basis

-

<length>

-

-

-

-

否

-

设置组件在主轴方向上的初始大小。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

position

-

string

-

relative

-

否

-

设置元素的定位类型，不支持动态变更。

-
  • fixed：相对与整个界面进行定位。
  • absolute：相对于父元素进行定位。
  • relative：相对于其正常位置进行定位。
-
说明：

absolute属性仅在父容器为<div>、<stack>时生效。

-
-

[left|top|right|bottom]

-

<length>

-

-

-

否

-

left|top|right|bottom需要配合position样式使用，来确定元素的偏移位置。

-
  • left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  • top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  • right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
  • bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
-
- ->![](public_sys-resources/icon-note.gif) **说明：** ->胶囊按钮（type=capsule）时，不支持border相关样式； ->圆形按钮（type=circle）时，不支持文本相关样式； ->文本按钮（type=text）时，自适应文本大小，不支持尺寸设置（radius，width，height），背景透明不支持background-color样式。 - -## 示例 - -``` - -
- - - - -
-``` - -``` -/* xxx.css */ -.div-button { - flex-direction: column; - align-items: center; -} -.button { - margin-top: 15px; -} -.button:waiting { - width: 280px; -} -.circle { - background-color: #007dff; - radius: 72px; - icon-width: 72px; - icon-height: 72px; -} -.text { - text-color: red; - font-size: 40px; - font-weight: 900; - font-family: sans-serif; - font-style: normal; -} -``` - -``` -// xxx.js -export default { - data: { - progress: 5, - downloadText: "Download" - }, -} -``` - -![](figures/zh-cn_image_0000001058670800.png) - diff --git "a/zh-cn/application-dev/js-reference/canvas\347\273\204\344\273\266.md" "b/zh-cn/application-dev/js-reference/canvas\347\273\204\344\273\266.md" deleted file mode 100755 index 69a1e574d16a8808b95a17cb3f816f817419ade0..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/js-reference/canvas\347\273\204\344\273\266.md" +++ /dev/null @@ -1,620 +0,0 @@ -# canvas组件 - -- [权限列表](#zh-cn_topic_0000001058670845_section11257113618419) -- [子组件](#zh-cn_topic_0000001058670845_section9288143101012) -- [属性](#zh-cn_topic_0000001058670845_section2907183951110) -- [事件](#zh-cn_topic_0000001058670845_section113421410102110) -- [样式](#zh-cn_topic_0000001058670845_section5775351116) -- [方法](#zh-cn_topic_0000001058670845_section47669296127) - -提供画布组件。用于自定义绘制图形。 - -## 权限列表 - -无 - -## 子组件 - -不支持。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

disabled

-

boolean

-

false

-

否

-

当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-
- -## 事件 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

touchstart

-

TouchEvent

-

手指刚触摸屏幕时触发该事件。

-

touchmove

-

TouchEvent

-

手指触摸屏幕后移动时触发该事件。

-

touchcancel

-

TouchEvent

-

手指触摸屏幕中动作被打断时触发该事件。

-

touchend

-

TouchEvent

-

手指触摸结束离开屏幕时触发该事件。

-

click

-

-

-

点击动作触发该事件。

-

longpress

-

-

-

长按动作触发该事件。

-

swipe5+

-

SwipeEvent

-

组件上快速滑动后触发。

-
- -## 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

width

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的宽度。

-

缺省时使用元素自身内容需要的宽度。

-

height

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的高度。

-

缺省时使用元素自身内容需要的高度。

-

padding

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的内边距属性。

-
该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    -

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    -

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    -

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下内边距属性。

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端内边距属性。

-

margin

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

-

  • 只有一个值时，这个值会被指定给全部的四个边。

    -

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    -

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    -

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下外边距属性。

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端外边距属性。

-

border

-

-

-

0

-

否

-

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

-

border-style

-

string

-

solid

-

否

-

使用简写属性设置所有边框的样式，可选值为：

-
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
-
  • solid：显示为一条实线。
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

否

-

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

-

border-[left|top|right|bottom]

-

-

-

-

-

否

-

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

-

border-width

-

<length>

-

0

-

否

-

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

否

-

分别设置左、上、右、下四个边框的宽度。

-

border-color

-

<color>

-

black

-

否

-

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

否

-

分别设置左、上、右、下四个边框的颜色。

-

border-radius

-

<length>

-

-

-

否

-

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，border-[left|top|right|bottom]-style，如果要设置color、width和style，需要将四个方向一起设置（border-width、border-color、border-style）。

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

否

-

分别设置左上，右上，右下和左下四个角的圆角半径。

-

background

-

<linear-gradient>

-

-

-

否

-

仅支持设置渐变样式，与background-color、background-image不兼容。

-

background-color

-

<color>

-

-

-

否

-

设置背景颜色。

-

background-image

-

string

-

-

-

否

-

设置背景图片。与background-color、background不兼容；支持本地图片资源地址。

-

示例：

-
  • background-image: url("/common/background.png")
-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

否

-

设置背景图片的大小。

-
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    -
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
-

background-repeat

-

string

-

repeat

-

否

-

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

-
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

否

-
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    -
-
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>
-

opacity

-

number

-

1

-

否

-

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

-

display

-

string

-

-

flex

-

否

-

确定一个元素所产生的框的类型，可选值为：

-
  • flex：弹性布局。
  • none：不渲染此元素。
-

visibility

-

string

-

-

visible

-

否

-

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

-
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
-
说明：

visibility和display样式都设置时，仅display生效

-
-

flex

-

-

-

-

-

否

-

规定当前组件如何适应父组件中的可用空间。

-

flex可以指定1个，2个5+或3个5+值。

-

单值语法：

-
  • 一个无单位数：用来设置组件的flex-grow
  • 一个有效的宽度值5+：用来设置组件的flex-basis
-

双值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow。第二个值是以下之一：

-
  • 一个无单位数：用来设置组件的flex-shrink
  • 一个有效的宽度值：用来设置组件的flex-basis
-

三值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow；第二个值必须是无单位数，用来设置组件的flex-shrink；第三个值必须是一个有效的宽度值，用来设置组件的flex-basis。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-grow

-

number

-

0

-

否

-

设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-shrink

-

number

-

1

-

否

-

设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-basis

-

<length>

-

-

-

-

否

-

设置组件在主轴方向上的初始大小。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

position

-

string

-

relative

-

否

-

设置元素的定位类型，不支持动态变更。

-
  • fixed：相对与整个界面进行定位。
  • absolute：相对于父元素进行定位。
  • relative：相对于其正常位置进行定位。
-
说明：

absolute属性仅在父容器为<div>、<stack>时生效。

-
-

[left|top|right|bottom]

-

<length>

-

-

-

否

-

left|top|right|bottom需要配合position样式使用，来确定元素的偏移位置。

-
  • left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  • top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  • right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
  • bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
-
- -## 方法 - - - - - - - - - - - - -

名称

-

参数

-

描述

-

getContext

-

string

-

获取canvas绘图上下文，参数仅支持“2d”，返回值为2D绘制对象，该对象提供具体的2D绘制操作。详见CanvasRenderingContext2D对象章节。

-

不支持在onInit和onReady中进行调用。

-
- diff --git a/zh-cn/application-dev/js-reference/chart.md b/zh-cn/application-dev/js-reference/chart.md deleted file mode 100755 index f4094172e1b96a98eabed47dea450b13c9ca06ac..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/chart.md +++ /dev/null @@ -1,1673 +0,0 @@ -# chart - -- [权限列表](#zh-cn_topic_0000001059148552_section11257113618419) -- [子组件](#zh-cn_topic_0000001059148552_section9288143101012) -- [属性](#zh-cn_topic_0000001059148552_section2907183951110) -- [方法](#zh-cn_topic_0000001059148552_section5955645132417) -- [事件](#zh-cn_topic_0000001059148552_section749131815264) -- [样式](#zh-cn_topic_0000001059148552_section5775351116) -- [示例](#zh-cn_topic_0000001059148552_section164885329456) - -图表组件，用于呈现线形图、柱状图、量规图界面。 - -## 权限列表 - -无 - -## 子组件 - -不支持。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

type

-

string

-

line

-

否

-

设置图表类型（不支持动态修改），可选项有：

-
  • bar：柱状图。
  • line：线形图。
  • gauge：量规图。
  • progress5+：进度类圆形图表。
  • loading5+：加载类圆形图表。
  • rainbow5+：占比类圆形图表。
-

options

-

ChartOptions

-

-

-

否

-

图表参数设置，柱状图和线形图必须设置参数设置，量规图不生效。可以设置x轴、y轴的最小值、最大值、刻度数、是否显示，线条宽度、是否平滑等。（不支持动态修改）

-

datasets

-

Array<ChartDataset>

-

-

-

否

-

数据集合，柱状图和线形图必须设置数据集合，量规图不生效。可以设置多条数据集及其背景色。

-

segments5+

-

DataSegment | Array<DataSegment>

-

-

-

否

-

进度类、加载类和占比类圆形图表使用的数据结构。

-

DataSegment针对进度类和加载类圆形图表使用，

-

Array<DataSegment>针对占比类图标使用，DataSegment最多9个。

-

effects5+

-

boolean

-

true

-

否

-

是否开启占比类、进度类圆形图表特效。

-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

disabled

-

boolean

-

false

-

否

-

当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-
- -**表 1** ChartOptions - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

xAxis

-

ChartAxis

-

-

-

是

-

x轴参数设置。可以设置x轴最小值、最大值、刻度数以及是否显示。

-

yAxis

-

ChartAxis

-

-

-

是

-

y轴参数设置。可以设置y轴最小值、最大值、刻度数以及是否显示。

-

series

-

ChartSeries

-

-

-

否

-

数据序列参数设置。可以设置1）线的样式，如线宽、是否平滑；2）设置线最前端位置白点的样式和大小。

-
说明：

仅线形图支持。

-
-
- -**表 2** ChartDataset - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

strokeColor

-

<color>

-

#ff6384

-

否

-

线条颜色。

-
说明：

仅线形图支持。

-
-

fillColor

-

<color>

-

#ff6384

-

否

-

填充颜色。线形图表示填充的渐变颜色。

-

data

-

Array<number> | Array<Point>5+

-

-

-

是

-

设置绘制线或柱中的点集。

-

gradient

-

boolean

-

false

-

否

-

设置是否显示填充渐变颜色。

-
说明：

仅线形图支持。

-
-
- -**表 3** ChartAxis - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

min

-

number

-

0

-

否

-

轴的最小值。

-
说明：

不支持负数。仅线形图支持。

-
-

max

-

number

-

100

-

否

-

轴的最大值。

-
说明：

不支持负数。仅线形图支持。

-
-

axisTick

-

number

-

10

-

否

-

轴显示的刻度数量。

-
说明：

仅支持1~20，且具体显示的效果与如下计算值有关（图的宽度所占的像素/（max-min））。

-

在柱状图中，每组数据显示的柱子数量与刻度数量一致，且柱子显示在刻度处。

-
-

display

-

boolean

-

false

-

否

-

是否显示轴。

-

color

-

<color>

-

#c0c0c0

-

否

-

轴颜色。

-
- -**表 4** ChartSeries - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

lineStyle

-

ChartLineStyle

-

-

-

否

-

线样式设置，如线宽、是否平滑。

-

headPoint

-

PointStyle

-

-

-

否

-

线最前端位置白点的样式和大小。

-

topPoint

-

PointStyle

-

-

-

否

-

最高点的样式和大小。

-

bottomPoint

-

PointStyle

-

-

-

否

-

最低点的样式和大小。

-

loop

-

ChartLoop

-

-

-

否

-

设置屏幕显示满时，是否需要重头开始绘制。

-
- -**表 5** ChartLineStyle - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

width

-

<length>

-

1px

-

否

-

线宽设置。

-

smooth

-

boolean

-

false

-

否

-

是否平滑。

-
- -**表 6** PointStyle - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

shape

-

string

-

circle

-

否

-

高亮点的形状。可选值为：

-
  • circle：圆形。
  • square：方形。
  • triangle：三角形。
-

size

-

<length>

-

5px

-

否

-

高亮点的大小。

-

strokeWidth

-

<length>

-

1px

-

否

-

边框宽度

-

strokeColor

-

<color>

-

#ff0000

-

否

-

边框颜色。

-

fillColor

-

<color>

-

#ff0000

-

否

-

填充颜色。

-
- -**表 7** ChartLoop - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

margin

-

<length>

-

1

-

否

-

擦除点的个数（最新绘制的点与最老的点之间的横向距离）。注意：轻量设备margin和topPoint/bottomPoint/headPoint同时使用时，有概率出现point正好位于擦除区域的情况，导致point不可见，因此不建议同时使用。

-

gradient

-

boolean

-

否

-

否

-

是否需要渐变擦除。

-
- -**表 8** Point5+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

value

-

number

-

0

-

是

-

表示绘制点的Y轴坐标。

-

pointStyle

-

PointStyle

-

否

-

否

-

表示当前数据点的绘制样式。

-

description

-

string

-

否

-

否

-

表示当前点的注释内容。

-

textLocation

-

string

-

否

-

否

-

可选值为top，bottom，none。分别表示注释的绘制位置位于点的上方，下方，以及不绘制。

-

textColor

-

<color>

-

#000000

-

否

-

表示注释文字的颜色。

-

lineDash

-

string

-

solid

-

否

-

表示绘制当前线段虚线的样式。“dashed， 5， 5”表示纯虚线，绘制5px的实线后留5px的空白。“solid”表示绘制实线。

-

lineColor

-

<color>

-

#000000

-

否

-

表示绘制当前线段的颜色。此颜色不设置会默认使用整体的strokeColor。

-
- -**表 9** DataSegment5+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

startColor

-

Color

-

-

-

否

-

起始位置的颜色，设置startColor必须设置endColor。不设置startColor时，会使用系统默认预置的颜色数组，具体颜色值见下表。

-

endColor

-

Color

-

-

-

否

-

终止位置的颜色，设置endColor必须设置startColor。

-

不设置startColor时，会使用系统默认预置的颜色数组。

-

value

-

double

-

0

-

是

-

占比数据的所占份额，最大100。

-

name

-

string

-

-

-

否

-

此类数据的名称。

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

数据组

-

浅色主题

-

深色主题

-

0

-

起始颜色：#f7ce00，结束颜色：#f99b11

-

起始颜色：#d1a738，结束颜色：#eb933d

-

1

-

起始颜色：#f76223，结束颜色：#f2400a

-

起始颜色：#e67d50，结束颜色：#d9542b

-

2

-

起始颜色：#f772ac，结束颜色：#e65392

-

起始颜色：#d5749e，结束颜色：#d6568d

-

3

-

起始颜色：#a575eb，结束颜色：#a12df7

-

起始颜色：#9973d1，结束颜色：#5552d9

-

4

-

起始颜色：#7b79f7，结束颜色：#4b48f7

-

起始颜色：#7977d9，结束颜色：#f99b11

-

5

-

起始颜色：#4b8af3，结束颜色：#007dff

-

起始颜色：#4c81d9，结束颜色：#217bd9

-

6

-

起始颜色：#73c1e6，结束颜色：#4fb4e3

-

起始颜色：#5ea6d1，结束颜色：#4895c2

-

7

-

起始颜色：#a5d61d，结束颜色：#69d14f

-

起始颜色：#91c23a，结束颜色：#70ba5d

-

8

-

起始颜色：#a2a2b0，结束颜色：#8e8e93

-

起始颜色：#8c8c99，结束颜色：#6b6b76

-
- -当类型为量规图时，还支持如下属性： - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

percent

-

number

-

0

-

否

-

当前值占整体的百分比，取值范围为0-100。

-
- -## 方法 - - - - - - - - - - - - -

方法

-

参数

-

描述

-

append

-

{

-

serial: number, // 设置要更新的线形图数据下标

-

data: Array<number>, // 设置新增的数据

-

}

-

往已有的数据序列中动态添加数据，根据serial指定目标序列，serial为datasets数组的下标，从0开始。注意：不会更新datasets[index].data。仅线形图支持，按横坐标加1递增（与xAxis min/max设置相关）。

-
- -## 事件 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

touchstart

-

TouchEvent

-

手指刚触摸屏幕时触发该事件。

-

touchmove

-

TouchEvent

-

手指触摸屏幕后移动时触发该事件。

-

touchcancel

-

TouchEvent

-

手指触摸屏幕中动作被打断时触发该事件。

-

touchend

-

TouchEvent

-

手指触摸结束离开屏幕时触发该事件。

-

click

-

-

-

点击动作触发该事件。

-

longpress

-

-

-

长按动作触发该事件。

-

swipe5+

-

SwipeEvent

-

组件上快速滑动后触发。

-
- -## 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

stroke-width

-

<length>

-

32px（量规）

-

24px（占比类圆形图表）

-

否

-

量规、占比类圆形图表组件刻度条的宽度。

-

start-angle

-

<deg>

-

240（量规）

-

0（占比类圆形图表）

-

否

-

量规、占比类圆形图表组件刻度条起始角度，以时钟0点为基线。范围为0到360。

-

total-angle

-

<deg>

-

240（量规）

-

360（占比类圆形图表）

-

否

-

量规、占比类圆形图表组件刻度条总长度，范围为-360到360，负数标识起点到终点为逆时针。

-

center-x

-

<length>

-

-

-

否

-

量规组件刻度条中心位置，该样式优先于通用样式的position样式。该样式需要和center-y和radius一起配置才能生效。（仅量规图支持）

-

center-y

-

<length>

-

-

-

否

-

量规组件刻度条中心位置，该样式优先于通用样式的position样式。该样式需要和center-x和radius一起配置才能生效。（仅量规图支持）

-

radius

-

<length>

-

-

-

否

-

量规组件刻度条半径，该样式优先于通用样式的width和height样式。该样式需要和center-x和center-y一起配置才能生效。（仅量规图支持）

-

colors

-

Array

-

-

-

否

-

量规组件刻度条每一个区段的颜色。

-

如：colors: #ff0000, #00ff00。（仅量规图支持）

-

weights

-

Array

-

-

-

否

-

量规组件刻度条每一个区段的权重。

-

如：weights: 2, 2。（仅量规图支持）

-

font-family5+

-

Array

-

-

-

否

-

表示绘制注释的字体样式，支持自定义字体。

-

font-size5+

-

<length>

-

-

-

否

-

表示绘制注释的字体的大小。

-

width

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的宽度。

-

缺省时使用元素自身内容需要的宽度。

-

height

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的高度。

-

缺省时使用元素自身内容需要的高度。

-

padding

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的内边距属性。

-
该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    -

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    -

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    -

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下内边距属性。

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端内边距属性。

-

margin

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

-

  • 只有一个值时，这个值会被指定给全部的四个边。

    -

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    -

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    -

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下外边距属性。

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端外边距属性。

-

border

-

-

-

0

-

否

-

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

-

border-style

-

string

-

solid

-

否

-

使用简写属性设置所有边框的样式，可选值为：

-
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
-
  • solid：显示为一条实线。
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

否

-

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

-

border-[left|top|right|bottom]

-

-

-

-

-

否

-

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

-

border-width

-

<length>

-

0

-

否

-

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

否

-

分别设置左、上、右、下四个边框的宽度。

-

border-color

-

<color>

-

black

-

否

-

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

否

-

分别设置左、上、右、下四个边框的颜色。

-

border-radius

-

<length>

-

-

-

否

-

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，border-[left|top|right|bottom]-style，如果要设置color、width和style，需要将四个方向一起设置（border-width、border-color、border-style）。

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

否

-

分别设置左上，右上，右下和左下四个角的圆角半径。

-

background

-

<linear-gradient>

-

-

-

否

-

仅支持设置渐变样式，与background-color、background-image不兼容。

-

background-color

-

<color>

-

-

-

否

-

设置背景颜色。

-

background-image

-

string

-

-

-

否

-

设置背景图片。与background-color、background不兼容；支持本地图片资源地址。

-

示例：

-
  • background-image: url("/common/background.png")
-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

否

-

设置背景图片的大小。

-
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    -
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
-

background-repeat

-

string

-

repeat

-

否

-

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

-
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

否

-
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    -
-
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>
-

opacity

-

number

-

1

-

否

-

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

-

display

-

string

-

-

flex

-

否

-

确定一个元素所产生的框的类型，可选值为：

-
  • flex：弹性布局。
  • none：不渲染此元素。
-

visibility

-

string

-

-

visible

-

否

-

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

-
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
-
说明：

visibility和display样式都设置时，仅display生效

-
-

flex

-

-

-

-

-

否

-

规定当前组件如何适应父组件中的可用空间。

-

flex可以指定1个，2个5+或3个5+值。

-

单值语法：

-
  • 一个无单位数：用来设置组件的flex-grow
  • 一个有效的宽度值5+：用来设置组件的flex-basis
-

双值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow。第二个值是以下之一：

-
  • 一个无单位数：用来设置组件的flex-shrink
  • 一个有效的宽度值：用来设置组件的flex-basis
-

三值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow；第二个值必须是无单位数，用来设置组件的flex-shrink；第三个值必须是一个有效的宽度值，用来设置组件的flex-basis。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-grow

-

number

-

0

-

否

-

设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-shrink

-

number

-

1

-

否

-

设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-basis

-

<length>

-

-

-

-

否

-

设置组件在主轴方向上的初始大小。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

position

-

string

-

relative

-

否

-

设置元素的定位类型，不支持动态变更。

-
  • fixed：相对与整个界面进行定位。
  • absolute：相对于父元素进行定位。
  • relative：相对于其正常位置进行定位。
-
说明：

absolute属性仅在父容器为<div>、<stack>时生效。

-
-

[left|top|right|bottom]

-

<length>

-

-

-

否

-

left|top|right|bottom需要配合position样式使用，来确定元素的偏移位置。

-
  • left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  • top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  • right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
  • bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
-
- -## 示例 - -1. 线形图 - - ``` - -
- - - - - -
- ``` - - ``` - /* xxx.css */ - .container { - flex-direction: column; - justify-content: center; - align-items: center; - } - .chart-region { - height: 400px; - width: 700px; - } - .chart-background { - object-fit: fill; - } - .chart-data { - width: 700px; - height: 600px; - } - ``` - - ``` - // xxx.js - export default { - data: { - lineData: [ - { - strokeColor: '#0081ff', - fillColor: '#cce5ff', - data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716], - gradient: true, - } - ], - lineOps: { - xAxis: { - min: 0, - max: 20, - display: false, - }, - yAxis: { - min: 0, - max: 1000, - display: false, - }, - series: { - lineStyle: { - width: "5px", - smooth: true, - }, - headPoint: { - shape: "circle", - size: 20, - strokeWidth: 5, - fillColor: '#ffffff', - strokeColor: '#007aff', - display: true, - }, - loop: { - margin: 2, - gradient: true, - } - } - }, - }, - addData() { - this.$refs.linechart.append({ - serial: 0, - data: [Math.floor(Math.random() * 400) + 400] - }) - } - } - ``` - - ![](figures/zh-cn_image_0000001059148590.png) - -2. 柱状图 - - ``` - -
- - - - -
- ``` - - ``` - /* xxx.css */ - .container { - flex-direction: column; - justify-content: center; - align-items: center; - } - .data-region { - height: 400px; - width: 700px; - } - .data-background { - object-fit: fill; - } - .data-bar { - width: 700px; - height: 400px; - } - ``` - - ``` - // xxx.js - export default { - data: { - barData: [ - { - fillColor: '#f07826', - data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628], - }, - { - fillColor: '#cce5ff', - data: [535, 776, 615, 444, 694, 785, 677, 609, 562, 410], - }, - { - fillColor: '#ff88bb', - data: [673, 500, 574, 483, 702, 583, 437, 506, 693, 657], - }, - ], - barOps: { - xAxis: { - min: 0, - max: 20, - display: false, - axisTick: 10, - }, - yAxis: { - min: 0, - max: 1000, - display: false, - }, - }, - } - } - ``` - - ![](figures/barchart.png) - -3. 量规图 - - ``` - -
-
- -
-
- ``` - - ``` - /* xxx.css */ - .container { - flex-direction: column; - justify-content: center; - align-items: center; - } - .gauge-region { - height: 400px; - width: 400px; - } - .data-gauge { - colors: #83f115, #fd3636, #3bf8ff; - weights: 4, 2, 1; - } - ``` - - ![](figures/gauge.png) - - diff --git a/zh-cn/application-dev/js-reference/component/Readme-CN.md b/zh-cn/application-dev/js-reference/component/Readme-CN.md new file mode 100644 index 0000000000000000000000000000000000000000..303e5ae59ab62b0085f4187d38cac47c50208c0e --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/Readme-CN.md @@ -0,0 +1,109 @@ +# 组件 + +- [通用](js-components-common.md) + - [通用属性](js-components-common-attributes.md) + - [通用样式](js-components-common-styles.md) + - [通用事件](js-components-common-events.md) + - [通用方法](js-components-common-methods.md) + - [动画样式](js-components-common-animation.md) + - [渐变样式](js-components-common-gradient.md) + - [转场样式](js-components-common-transition.md) + - [媒体查询](js-components-common-mediaquery.md) + - [自定义字体样式](js-components-common-customizing-font.md) + - [原子布局](js-components-common-atomic-layout.md) + +- [容器组件](js-components-container.md) + - [badge](js-components-container-badge.md) + - [dialog](js-components-container-dialog.md) + - [div](js-components-container-div.md) + - [form](js-components-container-form.md) + - [list](js-components-container-list.md) + - [list-item](js-components-container-list-item.md) + - [list-item-group](js-components-container-list-item-group.md) + - [panel](js-components-container-panel.md) + - [popup](js-components-container-popup.md) + - [refresh](js-components-container-refresh.md) + - [stack](js-components-container-stack.md) + - [stepper](js-components-container-stepper.md) + - [stepper-item](js-components-container-stepper-item.md) + - [swiper](js-components-container-swiper.md) + - [tabs](js-components-container-tabs.md) + - [tab-bar](js-components-container-tab-bar.md) + - [tab-content](js-components-container-tab-content.md) + +- [基础组件](js-components-basic.md) + - [button](js-components-basic-button.md) + - [chart](js-components-basic-chart.md) + - [divider](js-components-basic-divider.md) + - [image](js-components-basic-image.md) + - [image-animator](js-components-basic-image-animator.md) + - [input](js-components-basic-input.md) + - [label](js-components-basic-label.md) + - [marquee](js-components-basic-marquee.md) + - [menu](js-components-basic-menu.md) + - [option](js-components-basic-option.md) + - [picker](js-components-basic-picker.md) + - [picker-view](js-components-basic-picker-view.md) + - [piece](js-components-basic-piece.md) + - [progress](js-components-basic-progress.md) + - [qrcode](js-components-basic-qrcode.md) + - [rating](js-components-basic-rating.md) + - [richtext](js-components-basic-richtext.md) + - [search](js-components-basic-search.md) + - [select](js-components-basic-select.md) + - [slider](js-components-basic-slider.md) + - [span](js-components-basic-span.md) + - [switch](js-components-basic-switch.md) + - [text](js-components-basic-text.md) + - [textarea](js-components-basic-textarea.md) + - [toolbar](js-components-basic-toolbar.md) + - [toolbar-item](js-components-basic-toolbar-item.md) + - [toggle](js-components-basic-toggle.md) + +- [媒体组件](js-components-media.md) + - [video](js-components-media-video.md) + +- [画布组件](js-components-canvas.md) + - [canvas组件](js-components-canvas-canvas.md) + - [CanvasRenderingContext2D对象](js-components-canvas-canvasrenderingcontext2d.md) + - [Image对象](js-components-canvas-image.md) + - [CanvasGradient对象](js-components-canvas-canvasgradient.md) + - [ImageData对象](js-components-canvas-imagedata.md) + - [Path2D对象](js-components-canvas-path2d.md) + - [ImageBitmap对象](js-components-canvas-imagebitmap.md) + - [OffscreenCanvas对象](js-components-canvas-offscreencanvas.md) + - [OffscreenCanvasRenderingContext2D对象](js-components-canvas-offscreencanvasrenderingcontext2d.md) + +- [栅格组件](js-components-grid.md) + - [基本概念](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组件](js-components-svg.md) + - [通用属性](js-components-svg-common-attributes.md) + - [svg](js-components-svg-0.md) + - [rect](js-components-svg-rect.md) + - [circle](js-components-svg-circle.md) + - [ellipse](js-components-svg-ellipse.md) + - [path](js-components-svg-path.md) + - [line](js-components-svg-line.md) + - [polyline](js-components-svg-polyline.md) + - [polygon](js-components-svg-polygon.md) + - [text](js-components-svg-text.md) + - [tspan](js-components-svg-tspan.md) + - [textPath](js-components-svg-textpath.md) + - [animate](js-components-svg-animate.md) + - [animateMotion](js-components-svg-animate-motion.md) + - [animateTransform](js-components-svg-animate-transform.md) + +- [自定义组件](js-components-custom.md) + - [基本用法](js-components-custom-basic-usage.md) + - [自定义事件](js-components-custom-events.md) + - [Props](js-components-custom-props.md) + - [事件参数](js-components-custom-event-parameter.md) + - [slot插槽](js-components-custom-slot.md) + - [生命周期定义](js-components-custom-lifecycle.md) + + + diff --git a/zh-cn/application-dev/js-reference/figures/000000.jpg b/zh-cn/application-dev/js-reference/component/figures/000000.jpg similarity index 100% rename from zh-cn/application-dev/js-reference/figures/000000.jpg rename to zh-cn/application-dev/js-reference/component/figures/000000.jpg diff --git a/zh-cn/application-dev/js-reference/figures/1.jpg b/zh-cn/application-dev/js-reference/component/figures/1.jpg similarity index 100% rename from zh-cn/application-dev/js-reference/figures/1.jpg rename to zh-cn/application-dev/js-reference/component/figures/1.jpg diff --git "a/zh-cn/application-dev/js-reference/figures/45\345\272\246\345\244\271\350\247\222\346\270\220\345\217\230.png" "b/zh-cn/application-dev/js-reference/component/figures/45\345\272\246\345\244\271\350\247\222\346\270\220\345\217\230.png" old mode 100755 new mode 100644 similarity index 100% rename from "zh-cn/application-dev/js-reference/figures/45\345\272\246\345\244\271\350\247\222\346\270\220\345\217\230.png" rename to "zh-cn/application-dev/js-reference/component/figures/45\345\272\246\345\244\271\350\247\222\346\270\220\345\217\230.png" diff --git "a/zh-cn/application-dev/js-reference/figures/AnimationAPI\350\243\201\345\211\252.gif" "b/zh-cn/application-dev/js-reference/component/figures/AnimationAPI\350\243\201\345\211\252.gif" similarity index 100% rename from "zh-cn/application-dev/js-reference/figures/AnimationAPI\350\243\201\345\211\252.gif" rename to "zh-cn/application-dev/js-reference/component/figures/AnimationAPI\350\243\201\345\211\252.gif" diff --git a/zh-cn/application-dev/js-reference/component/figures/GIF.gif b/zh-cn/application-dev/js-reference/component/figures/GIF.gif new file mode 100644 index 0000000000000000000000000000000000000000..fa77bb91654623c2de68a19e7f9f95bbd1d029bc Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/GIF.gif differ diff --git a/zh-cn/application-dev/js-reference/figures/GIF6.gif b/zh-cn/application-dev/js-reference/component/figures/GIF6.gif old mode 100755 new mode 100644 similarity index 100% rename from zh-cn/application-dev/js-reference/figures/GIF6.gif rename to zh-cn/application-dev/js-reference/component/figures/GIF6.gif diff --git a/zh-cn/application-dev/js-reference/figures/SVID_20210301_193525_1.gif b/zh-cn/application-dev/js-reference/component/figures/SVID_20210301_193525_1.gif similarity index 100% rename from zh-cn/application-dev/js-reference/figures/SVID_20210301_193525_1.gif rename to zh-cn/application-dev/js-reference/component/figures/SVID_20210301_193525_1.gif diff --git a/zh-cn/application-dev/js-reference/figures/Video_2021-03-26_154549.gif b/zh-cn/application-dev/js-reference/component/figures/Video_2021-03-26_154549.gif similarity index 100% rename from zh-cn/application-dev/js-reference/figures/Video_2021-03-26_154549.gif rename to zh-cn/application-dev/js-reference/component/figures/Video_2021-03-26_154549.gif diff --git a/zh-cn/application-dev/js-reference/component/figures/animate-transform.gif b/zh-cn/application-dev/js-reference/component/figures/animate-transform.gif new file mode 100644 index 0000000000000000000000000000000000000000..e83e2ce11234a97242e1f57204b96568ad248d3d Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/animate-transform.gif differ diff --git a/zh-cn/application-dev/js-reference/component/figures/animate-transform2.gif b/zh-cn/application-dev/js-reference/component/figures/animate-transform2.gif new file mode 100644 index 0000000000000000000000000000000000000000..3c65871bb208133129e46956ecee119276a390a5 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/animate-transform2.gif differ diff --git a/zh-cn/application-dev/js-reference/component/figures/animate-transform3.gif b/zh-cn/application-dev/js-reference/component/figures/animate-transform3.gif new file mode 100644 index 0000000000000000000000000000000000000000..b29849bb066b5b5cd870c2b0b0dd1e50b9f90494 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/animate-transform3.gif differ diff --git a/zh-cn/application-dev/js-reference/figures/barchart.png b/zh-cn/application-dev/js-reference/component/figures/barchart.png old mode 100755 new mode 100644 similarity index 100% rename from zh-cn/application-dev/js-reference/figures/barchart.png rename to zh-cn/application-dev/js-reference/component/figures/barchart.png diff --git a/zh-cn/application-dev/js-reference/component/figures/date33.png b/zh-cn/application-dev/js-reference/component/figures/date33.png new file mode 100644 index 0000000000000000000000000000000000000000..cbe406b48fd77d39b575f506fd6fe48c830e43fa Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/date33.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/datetime.png b/zh-cn/application-dev/js-reference/component/figures/datetime.png new file mode 100644 index 0000000000000000000000000000000000000000..50c2d2d700960d22c332e33d9fba1b27690e63a4 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/datetime.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/ellipse.png b/zh-cn/application-dev/js-reference/component/figures/ellipse.png new file mode 100644 index 0000000000000000000000000000000000000000..d0379dfc66b4d2151dae49beeb8af38c774381aa Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/ellipse.png differ diff --git a/zh-cn/application-dev/js-reference/figures/gauge.png b/zh-cn/application-dev/js-reference/component/figures/gauge.png old mode 100755 new mode 100644 similarity index 100% rename from zh-cn/application-dev/js-reference/figures/gauge.png rename to zh-cn/application-dev/js-reference/component/figures/gauge.png diff --git a/zh-cn/application-dev/js-reference/figures/image-animator.gif b/zh-cn/application-dev/js-reference/component/figures/image-animator.gif old mode 100755 new mode 100644 similarity index 100% rename from zh-cn/application-dev/js-reference/figures/image-animator.gif rename to zh-cn/application-dev/js-reference/component/figures/image-animator.gif diff --git a/zh-cn/application-dev/js-reference/figures/list6.gif b/zh-cn/application-dev/js-reference/component/figures/list6.gif similarity index 100% rename from zh-cn/application-dev/js-reference/figures/list6.gif rename to zh-cn/application-dev/js-reference/component/figures/list6.gif diff --git a/zh-cn/application-dev/js-reference/component/figures/menu13.gif b/zh-cn/application-dev/js-reference/component/figures/menu13.gif new file mode 100644 index 0000000000000000000000000000000000000000..413b6584d5939509e2052d5cf7c35ec307ff759c Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/menu13.gif differ diff --git a/zh-cn/application-dev/js-reference/component/figures/multitext.png b/zh-cn/application-dev/js-reference/component/figures/multitext.png new file mode 100644 index 0000000000000000000000000000000000000000..fba75110896e178bbfbd9cc309b260b49c83b06d Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/multitext.png differ diff --git a/zh-cn/application-dev/js-reference/figures/panel6.gif b/zh-cn/application-dev/js-reference/component/figures/panel6.gif similarity index 100% rename from zh-cn/application-dev/js-reference/figures/panel6.gif rename to zh-cn/application-dev/js-reference/component/figures/panel6.gif diff --git a/zh-cn/application-dev/js-reference/figures/progress.png b/zh-cn/application-dev/js-reference/component/figures/progress.png old mode 100755 new mode 100644 similarity index 100% rename from zh-cn/application-dev/js-reference/figures/progress.png rename to zh-cn/application-dev/js-reference/component/figures/progress.png diff --git a/zh-cn/application-dev/js-reference/figures/sample1.gif b/zh-cn/application-dev/js-reference/component/figures/sample1.gif old mode 100755 new mode 100644 similarity index 100% rename from zh-cn/application-dev/js-reference/figures/sample1.gif rename to zh-cn/application-dev/js-reference/component/figures/sample1.gif diff --git a/zh-cn/application-dev/js-reference/figures/screenshot.png b/zh-cn/application-dev/js-reference/component/figures/screenshot.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/screenshot.png rename to zh-cn/application-dev/js-reference/component/figures/screenshot.png diff --git a/zh-cn/application-dev/js-reference/figures/slider.png b/zh-cn/application-dev/js-reference/component/figures/slider.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/slider.png rename to zh-cn/application-dev/js-reference/component/figures/slider.png diff --git a/zh-cn/application-dev/js-reference/component/figures/smoothOff.png b/zh-cn/application-dev/js-reference/component/figures/smoothOff.png new file mode 100644 index 0000000000000000000000000000000000000000..c699e78774fadbd8da8c0cc290e88294d445aa6f Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/smoothOff.png differ diff --git a/zh-cn/application-dev/js-reference/figures/sssssss.png b/zh-cn/application-dev/js-reference/component/figures/sssssss.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/sssssss.png rename to zh-cn/application-dev/js-reference/component/figures/sssssss.png diff --git a/zh-cn/application-dev/js-reference/figures/tab.gif b/zh-cn/application-dev/js-reference/component/figures/tab.gif old mode 100755 new mode 100644 similarity index 100% rename from zh-cn/application-dev/js-reference/figures/tab.gif rename to zh-cn/application-dev/js-reference/component/figures/tab.gif diff --git a/zh-cn/application-dev/js-reference/component/figures/text.png b/zh-cn/application-dev/js-reference/component/figures/text.png new file mode 100644 index 0000000000000000000000000000000000000000..4a5cbc0c72ee404eb9c8afe605cd862042e98ee3 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/text.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/textpath-animate1.gif b/zh-cn/application-dev/js-reference/component/figures/textpath-animate1.gif new file mode 100644 index 0000000000000000000000000000000000000000..64c013cdb72cacb96a429a4a9cf7cdeac38e783e Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/textpath-animate1.gif differ diff --git a/zh-cn/application-dev/js-reference/component/figures/textpath-animate2.gif b/zh-cn/application-dev/js-reference/component/figures/textpath-animate2.gif new file mode 100644 index 0000000000000000000000000000000000000000..640fae7689352208a0680ae4e12635f6e345cbda Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/textpath-animate2.gif differ diff --git a/zh-cn/application-dev/js-reference/component/figures/textpath-animate3.gif b/zh-cn/application-dev/js-reference/component/figures/textpath-animate3.gif new file mode 100644 index 0000000000000000000000000000000000000000..044f442002cf25b56b89849a4255ec7583cbfc2a Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/textpath-animate3.gif differ diff --git a/zh-cn/application-dev/js-reference/component/figures/textpath-animate4.gif b/zh-cn/application-dev/js-reference/component/figures/textpath-animate4.gif new file mode 100644 index 0000000000000000000000000000000000000000..4da6410ea036e3f7c4eb725ec9ccd220349799d1 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/textpath-animate4.gif differ diff --git a/zh-cn/application-dev/js-reference/component/figures/time.png b/zh-cn/application-dev/js-reference/component/figures/time.png new file mode 100644 index 0000000000000000000000000000000000000000..484a77f31b70679cb01d8678c93439d4b55c4bcd Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/time.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125122.gif b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125122.gif new file mode 100644 index 0000000000000000000000000000000000000000..addf2ea9fc2a9b83b8650382f9b6dc1901f4a229 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125122.gif differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125124.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125124.png new file mode 100644 index 0000000000000000000000000000000000000000..0bdeb353cc2ec200b106de975f1478597e863c49 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125124.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125126.gif b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125126.gif new file mode 100644 index 0000000000000000000000000000000000000000..1b0d4fd3ea6759b909f1714cdb9b0f6794153d76 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125126.gif differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125128.gif b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125128.gif new file mode 100644 index 0000000000000000000000000000000000000000..a6ce56691c8efaae822e72ebf987a45c122c1839 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125128.gif differ diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058340537.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125130.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058340537.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125130.png diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058670800.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125132.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058670800.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125132.png diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001059340532.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125134.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001059340532.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125134.png diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001079072496.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125136.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001079072496.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125136.png diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058340533.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125140.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058340533.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125140.png diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058830831.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125144.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058830831.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125144.png diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058830774.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125146.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058830774.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125146.png diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058670782.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125148.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058670782.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125148.png diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058988976.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125152.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058988976.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125152.png diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058830772.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125154.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058830772.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125154.png diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058340529.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125156.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058340529.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125156.png diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058988984.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125158.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058988984.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125158.png diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001089583647.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125160.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001089583647.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125160.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125162.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125162.png new file mode 100644 index 0000000000000000000000000000000000000000..dfee4f8cddcddd2ada89cb6d7e812fd0739d9cb8 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125162.png differ diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058340531.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125164.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058340531.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125164.png diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001059308560.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125166.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001059308560.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125166.png diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001059148586.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125168.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001059148586.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125168.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125196.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125196.png new file mode 100644 index 0000000000000000000000000000000000000000..245c704bb52935d5683a8d6b2c1e23a5389e4bc5 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125196.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125198.gif b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125198.gif new file mode 100644 index 0000000000000000000000000000000000000000..e72fb4ff01bbdf45951799fb20fc7a3ca85dead0 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125198.gif differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125200.gif b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125200.gif new file mode 100644 index 0000000000000000000000000000000000000000..da89f35c1163f16e9eebac8a11c59290d4e2feda Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125200.gif differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125202.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125202.png new file mode 100644 index 0000000000000000000000000000000000000000..6fed31434380106e80629feafdb374c7ba68ee51 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125202.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125204.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125204.png new file mode 100644 index 0000000000000000000000000000000000000000..95770e0a80cd7581b8739c852239dff75b60f655 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125204.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125208.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125208.png new file mode 100644 index 0000000000000000000000000000000000000000..d7d5ebbd57bcdd5e5f77001aa6770ff433654be9 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125208.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125212.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125212.png new file mode 100644 index 0000000000000000000000000000000000000000..bc43e2bfefbb6cc9fb09bc92ff0740a514dd2ff5 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125212.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125220.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125220.png new file mode 100644 index 0000000000000000000000000000000000000000..362c486fa6a7545fd3eaca6cf9da6c3ab56b3136 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125220.png differ diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058988992.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125266.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058988992.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125266.png diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058670863.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125268.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058670863.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125268.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284930.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284930.png new file mode 100644 index 0000000000000000000000000000000000000000..2a325881b033c685328eb51e9fedcd7e135cbf77 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284930.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284938.gif b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284938.gif new file mode 100644 index 0000000000000000000000000000000000000000..86f15fb83d5be7e8ed145d69ed8b869be40c4e45 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284938.gif differ diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058988982.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284940.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058988982.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284940.png diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058562863.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284942.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058562863.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284942.png diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001059148588.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284944.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001059148588.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284944.png diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058830768.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284950.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058830768.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284950.png diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001059340546.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284952.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001059340546.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284952.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284954.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284954.png new file mode 100644 index 0000000000000000000000000000000000000000..1fa94a7479a1c1ac1294575a7bd0658e5b21fac9 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284954.png differ diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001059308568.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284956.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001059308568.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284956.png diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001074522727.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284958.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001074522727.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284958.png diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058988974.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284960.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058988974.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284960.png diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058562869.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284966.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058562869.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284966.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284984.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284984.png new file mode 100644 index 0000000000000000000000000000000000000000..4cef59797fd8b9650c398562ac0b473485a9274b Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284984.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284986.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284986.png new file mode 100644 index 0000000000000000000000000000000000000000..4cb2c24831d622942c9b591fc8e9df8a9d87e7c6 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284986.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127285008.gif b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127285008.gif new file mode 100644 index 0000000000000000000000000000000000000000..a5db977af7a1a2ec2096aa76b5f82a245b832429 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127285008.gif differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127285024.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127285024.png new file mode 100644 index 0000000000000000000000000000000000000000..fffc6016e519844a25a096547bc7824f7a3450b0 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127285024.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127285034.gif b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127285034.gif new file mode 100644 index 0000000000000000000000000000000000000000..17f4ea3f2983fc9a0ad21238b9345e11aa0318c3 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127285034.gif differ diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001061550803.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127285076.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001061550803.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127285076.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001135171488.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001135171488.png new file mode 100644 index 0000000000000000000000000000000000000000..c7311ac9226ca3c0a04cef9a51961424daf8a47a Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001135171488.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001150368628.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001150368628.png new file mode 100644 index 0000000000000000000000000000000000000000..80ea0c9b9a321e061224884976545e6a9fe04196 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001150368628.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001150719520.gif b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001150719520.gif new file mode 100644 index 0000000000000000000000000000000000000000..3658d687cad3bdb3f0b06b5ace29d75948e0a613 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001150719520.gif differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152588538.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152588538.png new file mode 100644 index 0000000000000000000000000000000000000000..dc8f8a0cbb105c4d791bb867771bb9bc1bfbb468 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152588538.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152588626.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152588626.png new file mode 100644 index 0000000000000000000000000000000000000000..ec8094c23fc3f601f4899bac7b148b8309f600d9 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152588626.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152610806.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152610806.png new file mode 100644 index 0000000000000000000000000000000000000000..b3a47a84d8086ca0806bc958f745f29821c47cc2 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152610806.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152610854.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152610854.png new file mode 100644 index 0000000000000000000000000000000000000000..01f53998ba343eb77fbd7b78414e47e1fb68819e Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152610854.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152748606.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152748606.png new file mode 100644 index 0000000000000000000000000000000000000000..0ae3a6bd3ae1e298cbc909952b29b3762313a91c Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152748606.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152770830.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152770830.png new file mode 100644 index 0000000000000000000000000000000000000000..d957a62a03d1429504d89d3e7ee649d4b54a24ba Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152770830.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152770952.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152770952.png new file mode 100644 index 0000000000000000000000000000000000000000..625b158772a6198abe3a81719cfc2bd2598bed91 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152770952.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152773860.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152773860.png new file mode 100644 index 0000000000000000000000000000000000000000..e4daaa2ddaeec216adbcd71331494dd38bc67892 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152773860.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152833768.gif b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152833768.gif new file mode 100644 index 0000000000000000000000000000000000000000..4c7a300f18ca0f9671cacbc68590834f00ee23a1 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152833768.gif differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152834002.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152834002.png new file mode 100644 index 0000000000000000000000000000000000000000..27ee8b6da1ca2a0bd728157bbd750a9cf4b228f7 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152834002.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152862510.gif b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152862510.gif new file mode 100644 index 0000000000000000000000000000000000000000..601f4cc2f4871e29eee74beae214d4b82f4a47df Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152862510.gif differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001153427082.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001153427082.png new file mode 100644 index 0000000000000000000000000000000000000000..1144db651b011598fc9192a4f8b4e67efa63e1a1 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001153427082.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164775.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164775.png new file mode 100644 index 0000000000000000000000000000000000000000..79406f279f47e28a360437878959ce07d607b3ff Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164775.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164783.gif b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164783.gif new file mode 100644 index 0000000000000000000000000000000000000000..6107d0c5a64f409759d4c1ba44682996f181c5f2 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164783.gif differ diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001082299162.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164787.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001082299162.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164787.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164789.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164789.png new file mode 100644 index 0000000000000000000000000000000000000000..6829d2d87db5a5e28ad1ade1ca45eada97945bec Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164789.png differ diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001059340544.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164791.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001059340544.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164791.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164793.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164793.png new file mode 100644 index 0000000000000000000000000000000000000000..3e4169c4139b0204e7b97dc7b6deeb2389610de2 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164793.png differ diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058830770.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164795.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058830770.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164795.png diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058830837.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164805.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058830837.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164805.png diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058830835.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164807.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058830835.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164807.png diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058460543.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164809.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058460543.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164809.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164813.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164813.png new file mode 100644 index 0000000000000000000000000000000000000000..67959174e9b810b9278a7940bc097ac0c0738c7e Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164813.png differ diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058670865.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164817.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058670865.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164817.png diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058948949.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164819.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058948949.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164819.png diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058830776.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164821.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058830776.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164821.png diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058670879.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164825.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058670879.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164825.png diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001144077163.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164827.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001144077163.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164827.png diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001059148582.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164829.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001059148582.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164829.png diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001059308558.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164831.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001059308558.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164831.png diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058948947.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164833.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058948947.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164833.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164845.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164845.png new file mode 100644 index 0000000000000000000000000000000000000000..b64c5df26d8c2fb403e08feb72f8979af95ea44f Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164845.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164853.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164853.png new file mode 100644 index 0000000000000000000000000000000000000000..8a8562ea95b31781a67259225366d4bf9b86506a Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164853.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164863.gif b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164863.gif new file mode 100644 index 0000000000000000000000000000000000000000..871a368ff3e43f32bdfec427a35024a84e6cb441 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164863.gif differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164867.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164867.png new file mode 100644 index 0000000000000000000000000000000000000000..094d157e55693d0697e407f5f7299c6e2da24f56 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164867.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164869.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164869.png new file mode 100644 index 0000000000000000000000000000000000000000..3866e5677395048de391ed6159a0fe5572f6d91e Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164869.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164871.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164871.png new file mode 100644 index 0000000000000000000000000000000000000000..787fe9541b386b83b07e478651637f0f450e99f2 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164871.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164873.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164873.png new file mode 100644 index 0000000000000000000000000000000000000000..d31b9766cc593c0be44ae1abdba2f9f45eaa024e Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164873.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164891.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164891.png new file mode 100644 index 0000000000000000000000000000000000000000..38a3de061a3816a2eac62ae3d43284789c0ca31f Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164891.png differ diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001061872693.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164931.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001061872693.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164931.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324689.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324689.png new file mode 100644 index 0000000000000000000000000000000000000000..889ef6e963acef24e01d14d363ac52a444298145 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324689.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324691.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324691.png new file mode 100644 index 0000000000000000000000000000000000000000..f4823452cce3c085af33ebf1675c8517974709b0 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324691.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324697.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324697.png new file mode 100644 index 0000000000000000000000000000000000000000..c2ec8cd839cb27361a863f4c770de8053eb32755 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324697.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324699.gif b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324699.gif new file mode 100644 index 0000000000000000000000000000000000000000..4731d53600aa7dced61e10ce21505a5086280edd Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324699.gif differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324703.gif b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324703.gif new file mode 100644 index 0000000000000000000000000000000000000000..6c85de05a6145492a24a9ded5d2b399776489ecc Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324703.gif differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324705.gif b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324705.gif new file mode 100644 index 0000000000000000000000000000000000000000..02f47f31b344eb15cf9cd145f5fa8cbf6f90d233 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324705.gif differ diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001059308562.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324711.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001059308562.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324711.png diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058460539.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324713.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058460539.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324713.png diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058948959.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324717.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058948959.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324717.png diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058670867.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324719.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058670867.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324719.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324721.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324721.png new file mode 100644 index 0000000000000000000000000000000000000000..02fe52a90168d22959c9a703951730c9e7813e8a Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324721.png differ diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001059308566.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324723.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001059308566.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324723.png diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001059308564.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324725.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001059308564.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324725.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324749.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324749.png new file mode 100644 index 0000000000000000000000000000000000000000..3dccd46b21e76a7bbbaabc1ab77a29bd72ae850d Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324749.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324751.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324751.png new file mode 100644 index 0000000000000000000000000000000000000000..f9db5c31c8eae66244cd3f6e11336f72284bb2a6 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324751.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324783.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324783.png new file mode 100644 index 0000000000000000000000000000000000000000..e05df70223233ed7162d57f021a167eec9d9686a Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324783.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324787.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324787.png new file mode 100644 index 0000000000000000000000000000000000000000..06f1abd77c6c0036539e710f09617c3ef2ce0648 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324787.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324797.gif b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324797.gif new file mode 100644 index 0000000000000000000000000000000000000000..0b1bc728e1dd3c79f4a24bb1516ed752e32c74cd Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324797.gif differ diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001059148590.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324843.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001059148590.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324843.png diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058830762.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324847.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001058830762.png rename to zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324847.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001178886129.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001178886129.png new file mode 100644 index 0000000000000000000000000000000000000000..584a2841e6dbd6db9070438c0a56e717a34b133f Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001178886129.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001181449919.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001181449919.png new file mode 100644 index 0000000000000000000000000000000000000000..7469c1e329fc86f0ca7eec9374be7c2c03ae2d6b Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001181449919.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001181458721.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001181458721.png new file mode 100644 index 0000000000000000000000000000000000000000..c085790c6651bf041b772f58f5665d442caf6f4a Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001181458721.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001196052269.gif b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001196052269.gif new file mode 100644 index 0000000000000000000000000000000000000000..4f5e166b9316ea08114fd53fa2b193c65fd43445 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001196052269.gif differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001198530395.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001198530395.png new file mode 100644 index 0000000000000000000000000000000000000000..7a4dbacacb6b1b543a04268afd81a8b8c2f56974 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001198530395.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001198530737.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001198530737.png new file mode 100644 index 0000000000000000000000000000000000000000..cbf23e9e6897ac272a1c486edebd80d12dd44132 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001198530737.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001198530815.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001198530815.png new file mode 100644 index 0000000000000000000000000000000000000000..904fdcf258a2dc8350ace79f0abea18aadc721e0 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001198530815.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001198670487.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001198670487.png new file mode 100644 index 0000000000000000000000000000000000000000..5ecd604af13a7917485488f641b525d15e654eee Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001198670487.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001198690237.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001198690237.png new file mode 100644 index 0000000000000000000000000000000000000000..24d65ef9913f6b82a6f70ac2a4e415745112b108 Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001198690237.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001198898293.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001198898293.png new file mode 100644 index 0000000000000000000000000000000000000000..3db4286a873ef0bd14e7adeb085239a9941f918b Binary files /dev/null and b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001198898293.png differ diff --git "a/zh-cn/application-dev/js-reference/figures/\344\273\216\345\267\246\345\220\221\345\217\263\346\270\220\345\217\230-\351\207\215\345\244\215\346\270\220\345\217\230.png" "b/zh-cn/application-dev/js-reference/component/figures/\344\273\216\345\267\246\345\220\221\345\217\263\346\270\220\345\217\230-\351\207\215\345\244\215\346\270\220\345\217\230.png" old mode 100755 new mode 100644 similarity index 100% rename from "zh-cn/application-dev/js-reference/figures/\344\273\216\345\267\246\345\220\221\345\217\263\346\270\220\345\217\230-\351\207\215\345\244\215\346\270\220\345\217\230.png" rename to "zh-cn/application-dev/js-reference/component/figures/\344\273\216\345\267\246\345\220\221\345\217\263\346\270\220\345\217\230-\351\207\215\345\244\215\346\270\220\345\217\230.png" diff --git "a/zh-cn/application-dev/js-reference/figures/\345\205\261\344\272\253\345\205\203\347\264\240\350\275\254\345\234\272\351\273\230\350\256\244\346\225\210\346\236\234.png" "b/zh-cn/application-dev/js-reference/component/figures/\345\205\261\344\272\253\345\205\203\347\264\240\350\275\254\345\234\272\351\273\230\350\256\244\346\225\210\346\236\234.png" old mode 100755 new mode 100644 similarity index 100% rename from "zh-cn/application-dev/js-reference/figures/\345\205\261\344\272\253\345\205\203\347\264\240\350\275\254\345\234\272\351\273\230\350\256\244\346\225\210\346\236\234.png" rename to "zh-cn/application-dev/js-reference/component/figures/\345\205\261\344\272\253\345\205\203\347\264\240\350\275\254\345\234\272\351\273\230\350\256\244\346\225\210\346\236\234.png" diff --git "a/zh-cn/application-dev/js-reference/figures/\345\215\241\347\211\207\350\275\254\345\234\272.gif" "b/zh-cn/application-dev/js-reference/component/figures/\345\215\241\347\211\207\350\275\254\345\234\272.gif" similarity index 100% rename from "zh-cn/application-dev/js-reference/figures/\345\215\241\347\211\207\350\275\254\345\234\272.gif" rename to "zh-cn/application-dev/js-reference/component/figures/\345\215\241\347\211\207\350\275\254\345\234\272.gif" diff --git "a/zh-cn/application-dev/js-reference/figures/\350\256\276\347\275\256\346\226\271\345\220\221\344\270\272to-right\344\270\272\344\273\216\345\267\246\345\220\221\345\217\263\346\270\220\345\217\230.png" "b/zh-cn/application-dev/js-reference/component/figures/\350\256\276\347\275\256\346\226\271\345\220\221\344\270\272to-right\344\270\272\344\273\216\345\267\246\345\220\221\345\217\263\346\270\220\345\217\230.png" old mode 100755 new mode 100644 similarity index 100% rename from "zh-cn/application-dev/js-reference/figures/\350\256\276\347\275\256\346\226\271\345\220\221\344\270\272to-right\344\270\272\344\273\216\345\267\246\345\220\221\345\217\263\346\270\220\345\217\230.png" rename to "zh-cn/application-dev/js-reference/component/figures/\350\256\276\347\275\256\346\226\271\345\220\221\344\270\272to-right\344\270\272\344\273\216\345\267\246\345\220\221\345\217\263\346\270\220\345\217\230.png" diff --git "a/zh-cn/application-dev/js-reference/figures/\351\273\230\350\256\244\346\270\220\345\217\230\346\226\271\345\220\221\344\270\272\344\273\216\344\270\212\345\220\221\344\270\213\346\270\220\345\217\230.png" "b/zh-cn/application-dev/js-reference/component/figures/\351\273\230\350\256\244\346\270\220\345\217\230\346\226\271\345\220\221\344\270\272\344\273\216\344\270\212\345\220\221\344\270\213\346\270\220\345\217\230.png" old mode 100755 new mode 100644 similarity index 100% rename from "zh-cn/application-dev/js-reference/figures/\351\273\230\350\256\244\346\270\220\345\217\230\346\226\271\345\220\221\344\270\272\344\273\216\344\270\212\345\220\221\344\270\213\346\270\220\345\217\230.png" rename to "zh-cn/application-dev/js-reference/component/figures/\351\273\230\350\256\244\346\270\220\345\217\230\346\226\271\345\220\221\344\270\272\344\273\216\344\270\212\345\220\221\344\270\213\346\270\220\345\217\230.png" diff --git a/zh-cn/application-dev/js-reference/component/js-components-basic-button.md b/zh-cn/application-dev/js-reference/component/js-components-basic-button.md new file mode 100644 index 0000000000000000000000000000000000000000..9cf551cd2e746b91abce80ad54a2b7357051c47f --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-basic-button.md @@ -0,0 +1,418 @@ +# button + +- [子组件](#zh-cn_topic_0000001173324623_section9288143101012) +- [属性](#zh-cn_topic_0000001173324623_section2907183951110) +- [样式](#zh-cn_topic_0000001173324623_section5775351116) +- [事件](#zh-cn_topic_0000001173324623_section71081937192815) +- [方法](#zh-cn_topic_0000001173324623_section47669296127) +- [示例](#zh-cn_topic_0000001173324623_section16867208402) + +提供按钮组件，包括胶囊按钮、圆形按钮、文本按钮、弧形按钮、下载按钮。 + +## 子组件 + +不支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

type

+

string

+

-

+

否

+

不支持动态修改。如果该属性缺省，展示类胶囊型按钮，不同于胶囊类型，四边圆角可以通过border-radius分别指定，如果需要设置该属性，则可选值包括如下：

+
  • capsule：胶囊型按钮，带圆角按钮，有背景色和文本；
  • circle：圆形按钮，支持放置图标；
  • text：文本按钮，仅包含文本显示；
  • arc：弧形按钮，仅支持智能穿戴；
  • download：下载按钮，额外增加下载进度条功能，仅支持手机和智慧屏。
+

value

+

string

+

-

+

否

+

button的文本值，circle类型不生效。

+

icon

+

string

+

-

+

否

+

button的图标路径，图标格式为jpg，png和svg。

+

placement5+

+

string

+

end

+

否

+

仅在type属性为缺省时生效，设置图标位于文本的位置，可选值为：

+
  • start：图标位于文本起始处；
  • end：图标位于文本结束处；
  • top：图标位于文本上方；
  • bottom：图标位于文本下方。
+

waiting

+

boolean

+

false

+

否

+

waiting状态，waiting为true时展现等待中转圈效果，位于文本左侧。类型为download时不生效，不支持智能穿戴。

+
+ +## 样式 + +**type设置为非arc时：** + +除支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

text-color

+

<color>

+

#ff007dff

+

否

+

按钮的文本颜色。

+

font-size

+

<length>

+

16px

+

否

+

按钮的文本尺寸。

+

allow-scale

+

boolean

+

true

+

否

+

按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

+
说明：

如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。

+
+

font-style

+

string

+

normal

+

否

+

按钮的字体样式。

+

font-weight

+

number | string

+

normal

+

否

+

按钮的字体粗细。见text组件font-weight的样式属性。

+

font-family

+

<string>

+

sans-serif

+

否

+

按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

+

icon-width

+

<length>

+

-

+

否

+

设置圆形按钮内部图标的宽，默认填满整个圆形按钮。

+
说明：

icon使用svg图源时必须设置该样式。

+
+

icon-height

+

<length>

+

-

+

否

+

设置圆形按钮内部图标的高，默认填满整个圆形按钮。

+
说明：

icon使用svg图源时必须设置该样式。

+
+

radius

+

<length>

+

-

+

否

+

圆形按钮半径或者胶囊按钮圆角半径。在圆形按钮类型下该样式优先于通用样式的width和height样式。

+
+ +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- 胶囊按钮（type=capsule）时，不支持border相关样式； +>- 圆形按钮（type=circle）时，不支持文本相关样式； +>- 文本按钮（type=text）时，自适应文本大小，不支持尺寸设置（radius，width，height），背景透明不支持background-color样式。 + +**type设置为arc时：** + +除支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)中background-color、opacity、display、visibility、position、\[left|top|right|bottom外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

text-color

+

<color>

+

#de0000

+

否

+

弧形按钮的文本颜色。

+

font-size

+

<length>

+

37.5px

+

否

+

弧形按钮的文本尺寸。

+

allow-scale

+

boolean

+

true

+

否

+

弧形按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

+

font-style

+

string

+

normal

+

否

+

弧形按钮的字体样式。

+

font-weight

+

number | string

+

normal

+

否

+

弧形按钮的字体粗细。见text组件font-weight的样式属性。

+

font-family

+

<string>

+

sans-serif

+

否

+

按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

+
+ +## 事件 + +支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)。 + +## 方法 + +支持[通用方法](js-components-common-methods.md#ZH-CN_TOPIC_0000001209252157)。 + +类型为download时，支持如下方法： + + + + + + + + + + + + +

名称

+

参数

+

描述

+

setProgress

+

{ progress:percent }

+

设定下载按钮进度条进度，取值位于0-100区间内，当设置的值大于0时，下载按钮展现进度条。当设置的值大于等于100时，取消进度条显示。

+
说明：

浮在进度条上的文字通过value值进行变更。

+
+
+ +## 示例 + +``` + +
+ + + + + +
+``` + +``` +/* xxx.css */ +.div-button { + flex-direction: column; + align-items: center; +} +.first{ + background-color: #F2F2F2; + text-color: #0D81F2; +} +.button { + margin-top: 15px; +} +.last{ + background-color: #F2F2F2; + text-color: #969696; + margin-top: 15px; + width: 280px; + height:72px; +} +.button:waiting { + width: 280px; +} +.circle { + background-color: #007dff; + radius: 72px; + icon-width: 72px; + icon-height: 72px; +} +.text { + text-color: red; + font-size: 40px; + font-weight: 900; + font-family: sans-serif; + font-style: normal; +} +.download { + width: 280px; + text-color: white; + background-color: #007dff; +} +``` + +``` +// xxx.js +export default { + data: { + progress: 5, + downloadText: "Download" + }, + progress(e) { + this.progress += 10; + this.downloadText = this.progress + "%"; + this.$element('download-btn').setProgress({ progress: this.progress }); + if (this.progress >= 100) { + this.downloadText = "Done"; + } + } +} +``` + +![](figures/zh-cn_image_0000001127125132.png) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-basic-chart.md b/zh-cn/application-dev/js-reference/component/js-components-basic-chart.md new file mode 100644 index 0000000000000000000000000000000000000000..6af8f55d884deba57a84399707bfa0e4da29326f --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-basic-chart.md @@ -0,0 +1,1163 @@ +# chart + +- [权限列表](#zh-cn_topic_0000001127125088_section11257113618419) +- [子组件](#zh-cn_topic_0000001127125088_section9288143101012) +- [属性](#zh-cn_topic_0000001127125088_section2907183951110) +- [样式](#zh-cn_topic_0000001127125088_section5775351116) +- [事件](#zh-cn_topic_0000001127125088_section749131815264) +- [方法](#zh-cn_topic_0000001127125088_section4480852195018) +- [示例](#zh-cn_topic_0000001127125088_section164885329456) + +图表组件，用于呈现线形图、柱状图、量规图界面。 + +## 权限列表 + +无 + +## 子组件 + +不支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

type

+

string

+

line

+

否

+

设置图表类型（不支持动态修改），可选项有：

+
  • bar：柱状图。
  • line：线形图。
  • gauge：量规图。
  • progress5+：进度类圆形图表。
  • loading5+：加载类圆形图表。
  • rainbow5+：占比类圆形图表。
+

options

+

ChartOptions

+

-

+

否

+

图表参数设置，柱状图和线形图必须设置参数设置，量规图不生效。可以设置x轴、y轴的最小值、最大值、刻度数、是否显示，线条宽度、是否平滑等。（不支持动态修改）

+

datasets

+

Array<ChartDataset>

+

-

+

否

+

数据集合，柱状图和线形图必须设置数据集合，量规图不生效。可以设置多条数据集及其背景色。

+

segments5+

+

DataSegment | Array<DataSegment>

+

-

+

否

+

进度类、加载类和占比类圆形图表使用的数据结构。

+

DataSegment针对进度类和加载类圆形图表使用，

+

Array<DataSegment>针对占比类图标使用，DataSegment最多9个。

+
说明：

仅手机和平板设备支持。

+
+

effects5+

+

boolean

+

true

+

否

+

是否开启占比类、进度类圆形图表特效。

+
说明：

仅手机和平板设备支持。

+
+

animationduration6+

+

number

+

3000

+

否

+

设置占比类圆形图表展开动画时长，单位为ms。

+
说明：

仅手机和平板设备支持。

+
+
+ +**表 1** ChartOptions + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

xAxis

+

ChartAxis

+

-

+

是

+

x轴参数设置。可以设置x轴最小值、最大值、刻度数以及是否显示。

+

yAxis

+

ChartAxis

+

-

+

是

+

y轴参数设置。可以设置y轴最小值、最大值、刻度数以及是否显示。

+

series

+

ChartSeries

+

-

+

否

+

数据序列参数设置。可以设置1）线的样式，如线宽、是否平滑；2）设置线最前端位置白点的样式和大小。

+
说明：

仅线形图支持。

+
+
+ +**表 2** ChartDataset + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

strokeColor

+

<color>

+

#ff6384

+

否

+

线条颜色。

+
说明：

仅线形图支持。

+
+

fillColor

+

<color>

+

#ff6384

+

否

+

填充颜色。线形图表示填充的渐变颜色。

+

data

+

Array<number> | Array<Point>5+

+

-

+

是

+

设置绘制线或柱中的点集。

+

gradient

+

boolean

+

false

+

否

+

设置是否显示填充渐变颜色。

+
说明：

仅线形图支持。

+
+
+ +**表 3** ChartAxis + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

min

+

number

+

0

+

否

+

轴的最小值。

+
说明：

仅线形图支持负数。

+
+

max

+

number

+

100

+

否

+

轴的最大值。

+
说明：

仅线形图支持负数。

+
+

axisTick

+

number

+

10

+

否

+

轴显示的刻度数量。

+
说明：

仅支持1~20，且具体显示的效果与如下计算值有关（图的宽度所占的像素/（max-min））。

+

在柱状图中，每组数据显示的柱子数量与刻度数量一致，且柱子显示在刻度处。

+
+

display

+

boolean

+

false

+

否

+

是否显示轴。

+

color

+

<color>

+

#c0c0c0

+

否

+

轴颜色。

+
+ +**表 4** ChartSeries + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

lineStyle

+

ChartLineStyle

+

-

+

否

+

线样式设置，如线宽、是否平滑。

+

headPoint

+

PointStyle

+

-

+

否

+

线最前端位置白点的样式和大小。

+

topPoint

+

PointStyle

+

-

+

否

+

最高点的样式和大小。

+

bottomPoint

+

PointStyle

+

-

+

否

+

最低点的样式和大小。

+

loop

+

ChartLoop

+

-

+

否

+

设置屏幕显示满时，是否需要重头开始绘制。

+
+ +**表 5** ChartLineStyle + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

width

+

<length>

+

1px

+

否

+

线宽设置。

+

smooth

+

boolean

+

false

+

否

+

是否平滑。

+
+ +**表 6** PointStyle + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

shape

+

string

+

circle

+

否

+

高亮点的形状。可选值为：

+
  • circle：圆形。
  • square：方形。
  • triangle：三角形。
+

size

+

<length>

+

5px

+

否

+

高亮点的大小。

+

strokeWidth

+

<length>

+

1px

+

否

+

边框宽度

+

strokeColor

+

<color>

+

#ff0000

+

否

+

边框颜色。

+

fillColor

+

<color>

+

#ff0000

+

否

+

填充颜色。

+
+ +**表 7** ChartLoop + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

margin

+

<length>

+

1

+

否

+

擦除点的个数（最新绘制的点与最老的点之间的横向距离）。注意：轻量设备margin和topPoint/bottomPoint/headPoint同时使用时，有概率出现point正好位于擦除区域的情况，导致point不可见，因此不建议同时使用。

+

gradient

+

boolean

+

false

+

否

+

是否需要渐变擦除。

+
+ +**表 8** Point5+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

value

+

number

+

0

+

是

+

表示绘制点的Y轴坐标。

+

pointStyle

+

PointStyle

+

-

+

否

+

表示当前数据点的绘制样式。

+

description

+

string

+

-

+

否

+

表示当前点的注释内容。

+

textLocation

+

string

+

-

+

否

+

可选值为top，bottom，none。分别表示注释的绘制位置位于点的上方，下方，以及不绘制。

+

textColor

+

<color>

+

#000000

+

否

+

表示注释文字的颜色。

+

lineDash

+

string

+

solid

+

否

+

表示绘制当前线段虚线的样式。“dashed， 5， 5”表示纯虚线，绘制5px的实线后留5px的空白。“solid”表示绘制实线。

+

lineColor

+

<color>

+

#000000

+

否

+

表示绘制当前线段的颜色。此颜色不设置会默认使用整体的strokeColor。

+
+ +**表 9** DataSegment5+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

startColor

+

Color

+

-

+

否

+

起始位置的颜色，设置startColor必须设置endColor。不设置startColor时，会使用系统默认预置的颜色数组，具体颜色值见下表。

+

endColor

+

Color

+

-

+

否

+

终止位置的颜色，设置endColor必须设置startColor。

+

不设置startColor时，会使用系统默认预置的颜色数组。

+

value

+

number

+

0

+

是

+

占比数据的所占份额，最大100。

+

name

+

string

+

-

+

否

+

此类数据的名称。

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

数据组

+

浅色主题

+

深色主题

+

0

+

起始颜色：#f7ce00，结束颜色：#f99b11

+

起始颜色：#d1a738，结束颜色：#eb933d

+

1

+

起始颜色：#f76223，结束颜色：#f2400a

+

起始颜色：#e67d50，结束颜色：#d9542b

+

2

+

起始颜色：#f772ac，结束颜色：#e65392

+

起始颜色：#d5749e，结束颜色：#d6568d

+

3

+

起始颜色：#a575eb，结束颜色：#a12df7

+

起始颜色：#9973d1，结束颜色：#5552d9

+

4

+

起始颜色：#7b79f7，结束颜色：#4b48f7

+

起始颜色：#7977d9，结束颜色：#f99b11

+

5

+

起始颜色：#4b8af3，结束颜色：#007dff

+

起始颜色：#4c81d9，结束颜色：#217bd9

+

6

+

起始颜色：#73c1e6，结束颜色：#4fb4e3

+

起始颜色：#5ea6d1，结束颜色：#4895c2

+

7

+

起始颜色：#a5d61d，结束颜色：#69d14f

+

起始颜色：#91c23a，结束颜色：#70ba5d

+

8

+

起始颜色：#a2a2b0，结束颜色：#8e8e93

+

起始颜色：#8c8c99，结束颜色：#6b6b76

+
+ +当类型为量规图时，还支持如下属性： + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

percent

+

number

+

0

+

否

+

当前值占整体的百分比，取值范围为0-100。

+
+ +## 样式 + +除支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

stroke-width

+

<length>

+

32px（量规）

+

24px（占比类圆形图表）

+

否

+

量规、占比类圆形图表组件刻度条的宽度。

+

start-angle

+

<deg>

+

240（量规）

+

0（占比类圆形图表）

+

否

+

量规、占比类圆形图表组件刻度条起始角度，以时钟0点为基线。范围为0到360。

+

total-angle

+

<deg>

+

240（量规）

+

360（占比类圆形图表）

+

否

+

量规、占比类圆形图表组件刻度条总长度，范围为-360到360，负数标识起点到终点为逆时针。

+

center-x

+

<length>

+

-

+

否

+

量规组件刻度条中心位置，该样式优先于通用样式的position样式。该样式需要和center-y和radius一起配置才能生效。（仅量规图支持）

+

center-y

+

<length>

+

-

+

否

+

量规组件刻度条中心位置，该样式优先于通用样式的position样式。该样式需要和center-x和radius一起配置才能生效。（仅量规图支持）

+

radius

+

<length>

+

-

+

否

+

量规组件刻度条半径，该样式优先于通用样式的width和height样式。该样式需要和center-x和center-y一起配置才能生效。（仅量规图支持）

+

colors

+

Array

+

-

+

否

+

量规组件刻度条每一个区段的颜色。

+

如：colors: #ff0000, #00ff00。（仅量规图支持）

+

weights

+

Array

+

-

+

否

+

量规组件刻度条每一个区段的权重。

+

如：weights: 2, 2。（仅量规图支持）

+

font-family5+

+

Array

+

-

+

否

+

表示绘制注释的字体样式，支持自定义字体。

+

font-size5+

+

<length>

+

-

+

否

+

表示绘制注释的字体的大小。

+
+ +## 事件 + +支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)。 + +## 方法 + +除支持[通用方法](js-components-common-methods.md#ZH-CN_TOPIC_0000001209252157)外，还支持如下方法： + + + + + + + + + + + + +

方法

+

参数

+

描述

+

append

+

{

+

serial: number, // 设置要更新的线形图数据下标

+

data: Array<number>, // 设置新增的数据

+

}

+

往已有的数据序列中动态添加数据，根据serial指定目标序列，serial为datasets数组的下标，从0开始。注意：不会更新datasets[index].data。仅线形图支持，按横坐标加1递增（与xAxis min/max设置相关）。

+
+ +## 示例 + +1. 线形图 + + ``` + +
+ + + + + +
+ ``` + + ``` + /* xxx.css */ + .container { + flex-direction: column; + justify-content: center; + align-items: center; + } + .chart-region { + height: 400px; + width: 700px; + } + .chart-background { + object-fit: fill; + } + .chart-data { + width: 700px; + height: 600px; + } + button { + width: 100%; + height: 50px; + background-color: #F4F2F1; + text-color: #0C81F3; + } + ``` + + ``` + // xxx.js + export default { + data: { + lineData: [ + { + strokeColor: '#0081ff', + fillColor: '#cce5ff', + data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716], + gradient: true, + } + ], + lineOps: { + xAxis: { + min: 0, + max: 20, + display: false, + }, + yAxis: { + min: 0, + max: 1000, + display: false, + }, + series: { + lineStyle: { + width: "5px", + smooth: true, + }, + headPoint: { + shape: "circle", + size: 20, + strokeWidth: 5, + fillColor: '#ffffff', + strokeColor: '#007aff', + display: true, + }, + loop: { + margin: 2, + gradient: true, + } + } + }, + }, + addData() { + this.$refs.linechart.append({ + serial: 0, + data: [Math.floor(Math.random() * 400) + 400] + }) + } + } + ``` + + ![](figures/zh-cn_image_0000001173324843.png) + +2. 柱状图 + + ``` + +
+ + + + +
+ ``` + + ``` + /* xxx.css */ + .container { + flex-direction: column; + justify-content: center; + align-items: center; + } + .data-region { + height: 400px; + width: 700px; + } + .data-background { + object-fit: fill; + } + .data-bar { + width: 700px; + height: 400px; + } + ``` + + ``` + // xxx.js + export default { + data: { + barData: [ + { + fillColor: '#f07826', + data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628], + }, + { + fillColor: '#cce5ff', + data: [535, 776, 615, 444, 694, 785, 677, 609, 562, 410], + }, + { + fillColor: '#ff88bb', + data: [673, 500, 574, 483, 702, 583, 437, 506, 693, 657], + }, + ], + barOps: { + xAxis: { + min: 0, + max: 20, + display: false, + axisTick: 10, + }, + yAxis: { + min: 0, + max: 1000, + display: false, + }, + }, + } + } + ``` + + ![](figures/barchart.png) + +3. 量规图 + + ``` + +
+
+ +
+
+ ``` + + ``` + /* xxx.css */ + .container { + flex-direction: column; + justify-content: center; + align-items: center; + } + .gauge-region { + height: 400px; + width: 400px; + } + .data-gauge { + colors: #83f115, #fd3636, #3bf8ff; + weights: 4, 2, 1; + } + ``` + + ![](figures/gauge.png) + + diff --git a/zh-cn/application-dev/js-reference/component/js-components-basic-divider.md b/zh-cn/application-dev/js-reference/component/js-components-basic-divider.md new file mode 100644 index 0000000000000000000000000000000000000000..c8c4c89ec8a4a7f447b1127e58e0745cf9979422 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-basic-divider.md @@ -0,0 +1,254 @@ +# divider + +- [权限列表](#zh-cn_topic_0000001127125060_section11257113618419) +- [子组件](#zh-cn_topic_0000001127125060_section9288143101012) +- [属性](#zh-cn_topic_0000001127125060_section2907183951110) +- [样式](#zh-cn_topic_0000001127125060_section5775351116) +- [事件](#zh-cn_topic_0000001127125060_section1944813319536) +- [方法](#zh-cn_topic_0000001127125060_section163401342195315) +- [示例](#zh-cn_topic_0000001127125060_section230641814493) + +提供分隔器组件，分隔不同内容块/内容元素。可用于列表或界面布局。 + +## 权限列表 + +无 + +## 子组件 + +不支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)外，还支持如下属性： + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

vertical

+

boolean

+

false

+

否

+

使用水平分割线还是垂直分割线，默认水平。

+
+ +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- 不支持focusable、disabled属性。 + +## 样式 + +仅支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

margin

+

<length>

+

0

+

否

+

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

+

margin-[left|top|right|bottom]

+

<length>

+

0

+

否

+

使用简写属性设置左、上、右、下外边距属性，类型length，单位px，默认值0。

+

color

+

<color>

+

#08000000

+

否

+

设置分割线颜色。

+

stroke-width

+

<length>

+

1

+

否

+

设置分割线宽度。

+

display

+

string

+

flex

+

否

+

确定分割线所产生的框的类型。值flex/none，默认值flex。

+

visibility

+

string

+

visible

+

否

+

是否显示分割线。不可见的框会占用布局。visible代表显示元素，hidden代表不显示元素。

+

line-cap

+

string

+

butt

+

否

+

设置分割线条的端点样式，默认为butt，可选值为：

+
  • butt：分割线两端为平行线；
  • round：分割线两端额外添加半圆；
  • square：分割线两端额外添加半方形；
+
说明：

round和square会额外增加一个线宽的分割线长度。

+
+

flex

+

number

+

-

+

否

+

规定了分割线如何适应父组件中的可用空间。它作为一个简写属性，用来设置组件的flex-grow。

+
说明：

仅父容器为<div>、<list-item>、<tabs>时生效。

+
+

flex-grow

+

number

+

0

+

否

+

设置分割线的伸展因子，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex项加起来的大小）的分配系数。0为不伸展。

+
说明：

仅父容器为<div>、<list-item>、<tabs>时生效。

+
+

+

flex-shrink

+

number

+

1

+

否

+

设置分割线的收缩因子，flex元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。

+
说明：

仅父容器为<div>、<list-item>、<tabs>时生效。

+
+

flex-basis

+

<length>

+

+

-

+

否

+

设置分割线在主轴方向上的初始大小。

+
说明：

仅父容器为<div>、<list-item>、<tabs>时生效。

+
+
+ +## 事件 + +不支持。 + +## 方法 + +不支持。 + +## 示例 + +``` + +
+
+ +
+
+``` + +``` +/* xxx.css */ +.container { + margin: 20px; + flex-direction:column; + width:100%; + height:100%; + align-items:center; +} +.content{ + width:80%; + height:40%; + border:1px solid #000000; + align-items: center; + justify-content: center; + flex-direction:column; +} +.divider { + margin: 10px; + color: #ff0000ff; + stroke-width: 3px; + line-cap: round; +} +``` + +![](figures/1.jpg) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-basic-image-animator.md b/zh-cn/application-dev/js-reference/component/js-components-basic-image-animator.md new file mode 100644 index 0000000000000000000000000000000000000000..1b3bff40f3b88f8f1871e64e4cbbc840da60e2df --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-basic-image-animator.md @@ -0,0 +1,425 @@ +# image-animator + +- [子组件](#zh-cn_topic_0000001173324625_section393521619565) +- [属性](#zh-cn_topic_0000001173324625_section1342212415618) +- [样式](#zh-cn_topic_0000001173324625_section1774719169253) +- [事件](#zh-cn_topic_0000001173324625_section17969351566) +- [方法](#zh-cn_topic_0000001173324625_section1428810433566) +- [示例](#zh-cn_topic_0000001173324625_section118221913375) + +图片帧动画播放器。 + +## 子组件 + +不支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

images

+

Array<ImageFrame>

+

-

+

是

+

设置图片帧信息集合。每一帧的帧信息包含图片路径、图片大小和图片位置信息。目前支持以下图片格式：png、jpg。ImageFrame的详细说明请见表1。

+
说明：

使用时需要使用数据绑定的方式，如images = {{images}}，js中声明相应变量：images: [{src: "/common/heart-rate01.png"}, {src: "/common/heart-rate02.png"}]。

+

js中声明相应变量：images: [{src: "/common/heart-rate01.png", duration: "100"}, {src: "/common/heart-rate02.png", duration: "200"}]。支持配置每一帧图片的时长，单位毫秒。6+

+
+

predecode6+

+

number

+

0

+

否

+

是否启用预解码，默认值为0，即不启用预解码，如该值设为2，则播放当前页时会提前加载后面两张图片至缓存以提升性能。

+

iteration

+

number | string

+

infinite

+

否

+

设置帧动画播放次数。number表示固定次数，infinite枚举表示无限次数播放。

+

reverse

+

boolean

+

false

+

否

+

设置播放顺序。false表示从第1张图片播放到最后1张图片； true表示从最后1张图片播放到第1张图片。

+

fixedsize

+

boolean

+

true

+

否

+

设置图片大小是否固定为组件大小。 true表示图片大小与组件大小一致，此时设置图片的width 、height 、top 和left属性是无效的。false表示每一张图片的 width 、height 、top和left属性都要单独设置。

+

duration

+

string

+

-

+

是

+

设置单次播放时长。单位支持[s(秒)|ms(毫秒)]，默认单位为ms。 duration为0时，不播放图片。 值改变只会在下一次循环开始时生效，当images中设置了单独的duration后，该属性设置无效。

+

fillmode5+

+

string

+

forwards

+

否

+

指定帧动画执行结束后的状态。可选项有：

+
  • none：恢复初始状态。
  • forwards：保持帧动画结束时的状态（在最后一个关键帧中定义）。
+
+ +**表 1** ImageFrame说明 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

src

+

<uri>

+

-

+

是

+

图片路径，图片格式为svg，png和jpg。

+

width

+

<length>

+

0

+

否

+

图片宽度。

+

height

+

<length>

+

0

+

否

+

图片高度。

+

top

+

<length>

+

0

+

否

+

图片相对于组件左上角的纵向坐标。

+

left

+

<length>

+

0

+

否

+

图片相对于组件左上角的横向坐标。

+

duration6+

+

number

+

-

+

否

+

每一帧图片的播放时长，单位毫秒。

+
+ +## 样式 + +支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)。 + +## 事件 + +除支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)外，还支持如下事件： + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

start

+

-

+

帧动画启动时触发。

+

pause

+

-

+

帧动画暂停时触发。

+

stop

+

-

+

帧动画结束时触发。

+

resume

+

-

+

帧动画恢复时触发。

+
+ +## 方法 + +支持[通用方法](js-components-common-methods.md#ZH-CN_TOPIC_0000001209252157)外，还支持如下方法： + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

start

+

-

+

开始播放图片帧动画。再次调用，重新从第1帧开始播放。

+

pause

+

-

+

暂停播放图片帧动画。

+

stop

+

-

+

停止播放图片帧动画。

+

resume

+

-

+

继续播放图片帧。

+

getState

+

-

+

获取播放状态。可能值有：

+
  • playing：播放中
  • paused：已暂停
  • stopped：已停止。
+
+ +## 示例 + +``` + +
+ +
+ + + + +
+
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; + left: 0px; + top: 0px; + width: 454px; + height: 454px; +} +.animator { + width: 70px; + height: 70px; +} +.btn-box { + width: 264px; + height: 120px; + flex-wrap: wrap; + justify-content: space-around; + align-items: center; +} +.btn { + border-radius: 8px; + width: 120px; + margin-top: 8px; +} +``` + +``` +//xxx.js +export default { + data: { + frames: [ + { + src: "/common/asserts/heart78.png", + }, + { + src: "/common/asserts/heart79.png", + }, + { + src: "/common/asserts/heart80.png", + }, + { + src: "/common/asserts/heart81.png", + }, + { + src: "/common/asserts/heart82.png", + }, + { + src: "/common/asserts/heart83.png", + }, + { + src: "/common/asserts/heart84.png", + }, + { + src: "/common/asserts/heart85.png", + }, + { + src: "/common/asserts/heart86.png", + }, + { + src: "/common/asserts/heart87.png", + }, + { + src: "/common/asserts/heart88.png", + }, + { + src: "/common/asserts/heart89.png", + }, + { + src: "/common/asserts/heart90.png", + }, + { + src: "/common/asserts/heart91.png", + }, + { + src: "/common/asserts/heart92.png", + }, + { + src: "/common/asserts/heart93.png", + }, + { + src: "/common/asserts/heart94.png", + }, + { + src: "/common/asserts/heart95.png", + }, + { + src: "/common/asserts/heart96.png", + }, + ], + }, + handleStart() { + this.$refs.animator.start(); + }, + handlePause() { + this.$refs.animator.pause(); + }, + handleResume() { + this.$refs.animator.resume(); + }, + handleStop() { + this.$refs.animator.stop(); + }, +}; +``` + +![](figures/image-animator.gif) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-basic-image.md b/zh-cn/application-dev/js-reference/component/js-components-basic-image.md new file mode 100644 index 0000000000000000000000000000000000000000..bf7117131b21e4d83c871bbabf3214b52c7df1e0 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-basic-image.md @@ -0,0 +1,250 @@ +# image + +- [子组件](#zh-cn_topic_0000001173164699_section9288143101012) +- [属性](#zh-cn_topic_0000001173164699_section2907183951110) +- [样式](#zh-cn_topic_0000001173164699_section45171131134215) +- [事件](#zh-cn_topic_0000001173164699_section3892191911214) +- [方法](#zh-cn_topic_0000001173164699_section2279124532420) +- [示例](#zh-cn_topic_0000001173164699_section321147145519) + +图片组件，用来渲染展示图片。 + +## 子组件 + +不支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

src

+

string

+

-

+

否

+

图片的路径，支持本地路径，图片格式包括png、jpg、bmp、svg和gif。

+

支持Base64字符串6+。格式为data:image/[png | jpeg | bmp | webp];base64, [base64 data], 其中[base64 data]为Base64字符串数据。

+

支持dataability://的路径前缀，用于访问通过data ability提供的图片路径6+。

+

alt

+

string

+

-

+

否

+

占位图，当指定图片在加载中时显示。

+
+ +## 样式 + +除支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

object-fit

+

string

+

cover

+

否

+

设置图片的缩放类型。可选值类型说明请见object-fit 类型说明。（不支持svg格式）

+

match-text-direction

+

boolean

+

false

+

否

+

图片是否跟随文字方向。（不支持svg格式）

+

fit-original-size

+

boolean

+

false

+

否

+

image组件在未设置宽高的情况下是否适应图源尺寸（该属性为true时object-fit属性不生效），svg类型图源不支持该属性。

+

object-position7+

+

string

+

0px 0px

+

否

+

设置图片在组价内展示的位置。

+

设置类型有两种：

+

1. 像素，单位px，示例 15px 15px 代表X轴或者Y轴移动的位置

+

2. 字符，可选值：

+
  • left 图片显示在组件左侧；
  • top 图片显示在组件顶部位置；
  • right 图片显示在组件右侧位置；
  • bottom图片显示在组件底部位置。
+
+ +**表 1** object-fit 类型说明 + + + + + + + + + + + + + + + + + + + + + + +

类型

+

描述

+

cover

+

保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界，居中显示。

+

contain

+

保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内，居中显示。

+

fill

+

不保持宽高比进行放大缩小，使得图片填充满显示边界。

+

none

+

保持原有尺寸进行居中显示。

+

scale-down

+

保持宽高比居中显示，图片缩小或者保持不变。

+
+ +>![](../../public_sys-resources/icon-note.gif) **说明：** +>使用svg图片资源时： +>- 建议设置image组件的长宽，否则在父组件的长或宽为无穷大的场景下，svg资源将不会绘制； +>- 如果svg描述中未指定相应的长宽，则svg将会填满image组件区域； +>- 如果svg描述中指定了相应的长宽，和image组件本身的长宽效果如下： +>1. 如果image组件本身的长宽小于svg中的长宽，svg会被裁切，仅显示左上角部分； +>2. 如果image组件本身的长宽大于svg中的长宽，svg会被放置在image组件的左上角，image组件其他部分显示空白。 + +## 事件 + +除支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)外，还支持如下事件： + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

complete(Rich)

+

{ width：width， height：height }

+

图片成功加载时触发该回调，返回成功加载的图源尺寸。

+

error(Rich)

+

{ width：width， height：height }

+

图片加载出现异常时触发该回调，异常时长宽为零。

+
+ +## 方法 + +支持[通用方法](js-components-common-methods.md#ZH-CN_TOPIC_0000001209252157)。 + +## 示例 + +``` + +
+ + + + +
+``` + +``` +/* xxx.css */ +.container { + justify-content: center; + align-items: center; + flex-direction: column; +} +.selects{ + margin-top: 20px; + width:300px; + border:1px solid #808080; + border-radius: 10px; +} +``` + +``` +// xxx.js +export default { + data: { + fit:"cover", + fits: ["cover", "contain", "fill", "none", "scale-down"], + }, + change_fit(e) { + this.fit = e.newValue; + }, +} +``` + +![](figures/GIF.gif) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-basic-input.md b/zh-cn/application-dev/js-reference/component/js-components-basic-input.md new file mode 100644 index 0000000000000000000000000000000000000000..ec56778aa963c74abb32404abbb8ffce50ab838f --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-basic-input.md @@ -0,0 +1,614 @@ +# input + +- [权限列表](#zh-cn_topic_0000001173324647_section11257113618419) +- [子组件](#zh-cn_topic_0000001173324647_section9288143101012) +- [属性](#zh-cn_topic_0000001173324647_section2907183951110) +- [样式](#zh-cn_topic_0000001173324647_section066012492913) +- [事件](#zh-cn_topic_0000001173324647_section1721512551218) +- [方法](#zh-cn_topic_0000001173324647_section47669296127) +- [示例](#zh-cn_topic_0000001173324647_section106355275448) + +交互式组件，包括单选框，多选框，按钮和单行文本输入框。 + +## 权限列表 + +无 + +## 子组件 + +不支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

type

+

string

+

text

+

否

+

input组件类型，可选值为text，email，date，time，number，password，button，checkbox，radio。

+

其中text，email，date，time，number，password这六种类型之间支持动态切换修改。

+

button，checkbox，radio不支持动态修改。可选值定义如下：

+
  • button：定义可点击的按钮；
  • checkbox：定义多选框；
  • radio：定义单选按钮，允许在多个拥有相同name值的选项中选中其中一个；
  • text：定义一个单行的文本字段
  • email：定义用于e-mail地址的字段；
  • date：定义 date 控件（包括年、月、日，不包括时间）；
  • time：定义用于输入时间的控件（不带时区）；
  • number：定义用于输入数字的字段；
  • password：定义密码字段（字段中的字符会被遮蔽）。
    说明：

    智能穿戴仅支持button、radio、checkbox类型。

    +
    +
+

checked

+

boolean

+

false

+

否

+

当前组件是否选中，仅type为checkbox和radio生效。

+

name

+

string

+

-

+

否

+

input组件的名称。

+

value

+

string

+

-

+

否

+

input组件的value值，当类型为radio时必填且相同name值的选项该值唯一。

+

placeholder

+

string

+

-

+

否

+

设置提示文本的内容，仅在type为text|email|date|time|number|password时生效。

+

maxlength

+

number

+

-

+

否

+

输入框可输入的最多字符数量，不填表示不限制输入框中字符数量。

+

enterkeytype

+

string

+

default

+

否

+

不支持动态修改。

+

设置软键盘Enter按钮的类型，可选值为：

+
  • default：默认
  • next：下一项
  • go：前往
  • done：完成
  • send：发送
  • search：搜索
+
说明：

除“next”外，点击后会自动收起软键盘。

+
+

headericon

+

string

+

-

+

否

+

在文本输入前的图标资源路径，该图标不支持点击事件（button，checkbox和radio不生效），图标格式为jpg，png和svg。

+

showcounter5+

+

boolean

+

false

+

否

+

文本输入框是否显示计数下标，需要配合maxlength一起使用。

+

menuoptions5+

+

Array<MenuOption>

+

-

+

否

+

设置文本选择弹框点击更多按钮之后显示的菜单项。

+

autofocus6+

+

boolean

+

false

+

否

+

是否自动获焦。

+
说明：

应用首页中设置不生效，可在onActive中延迟（100-500ms左右）调用focus方法实现输入框在首页中自动获焦。

+
+

selectedstart6+

+

number

+

-1

+

否

+

开始选择文本时初始选择位置。

+

selectedend6+

+

number

+

-1

+

否

+

开始选择文本时结尾选择位置。

+

softkeyboardenabled6+

+

boolean

+

true

+

否

+

编辑时是否弹出系统软键盘。

+

showpasswordicon6+

+

boolean

+

true

+

否

+

是否显示密码框末尾的图标（仅type为password时生效）。

+
+ +**表 1** MenuOption5+ + + + + + + + + + + + + + + + + +

名称

+

类型

+

描述

+

icon

+

string

+

菜单选项中的图标路径。

+

content

+

string

+

菜单选项中的文本内容。

+
+ +## 样式 + +除支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

color

+

<color>

+

#e6000000

+

否

+

单行输入框或者按钮的文本颜色。

+

font-size

+

<length>

+

16px

+

否

+

单行输入框或者按钮的文本尺寸。

+

allow-scale

+

boolean

+

true

+

否

+

单行输入框或者按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

+
说明：

如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。

+
+

placeholder-color

+

<color>

+

#99000000

+

否

+

单行输入框的提示文本的颜色，type为text|email|date|time|number|password时生效。

+

font-weight

+

number | string

+

normal

+

否

+

单行输入框或者按钮的字体粗细，见text组件font-weight的样式属性。

+

caret-color6+

+

<color>

+

-

+

否

+

设置输入光标的颜色。

+
+ +## 事件 + +除支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)外，还支持如下事件： + +- 当input类型为text、email、date、time、number、password时，支持如下事件： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

change

+

{ value:inputValue }

+

输入框输入内容发生变化时触发该事件，返回用户当前输入值。

+
说明：

改变value属性值不会触发该回调。

+
+

enterkeyclick

+

{ value:enterKey }

+

软键盘enter键点击后触发该事件，返回enter按钮的类型，enterKey类型为number，可选值为：

+
  • 2：设置enterkeytype属性为go时生效。
  • 3：设置enterkeytype属性为search时生效。
  • 4：设置enterkeytype属性为send时生效。
  • 5：设置enterkeytype属性为next时生效。
  • 6：不设置enterkeytype或者设置enterkeytype属性为default、done时生效。
+

translate5+

+

{ value: selectedText }

+

设置此事件后，进行文本选择操作后文本选择弹窗会出现翻译按钮，点击翻译按钮之后，触发该回调，返回选中的文本内容。

+

share5+

+

{ value: selectedText }

+

设置此事件后，进行文本选择操作后文本选择弹窗会出现分享按钮，点击分享按钮之后，触发该回调，返回选中的文本内容。

+

search5+

+

{ value: selectedText }

+

设置此事件后，进行文本选择操作后文本选择弹窗会出现搜索按钮，点击搜索按钮之后，触发该回调，返回选中的文本内容。

+

optionselect5+

+

{ index:optionIndex, value: selectedText }

+

文本选择弹窗中设置menuoptions属性后，用户在文本选择操作后，点击菜单项后触发该回调，返回点击的菜单项序号和选中的文本内容。

+

selectchange6+

+

{ start: number，end: number }

+

文本选择变化时触发事件。

+
+ +- 当input类型为checkbox、radio时，支持如下事件： + + + + + + + + + + + + +

名称

+

参数

+

描述

+

change

+

{ checked:true | false }

+

checkbox多选框或radio单选框的checked状态发生变化时触发该事件。

+
+ + +## 方法 + +除支持[通用方法](js-components-common-methods.md#ZH-CN_TOPIC_0000001209252157)外，还支持如下方法： + + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

focus

+

{ focus: true|false }，focus不传默认为true。

+

使组件获得或者失去焦点，type为text|email|date|time|number|password时，可弹出或收起输入法。

+

showError

+

{ error: string }

+

展示输入错误提示，type为text|email|date|time|number|password时生效。

+

delete6+

+

-

+

type为text|email|date|time|number|password时，根据当前光标位置删除文本内容，如果当前输入组件没有光标，默认删除最后一个字符并展示光标。

+
+ +## 示例 + +1. type为text + + ``` + +
+ + + +
+ ``` + + ``` + /* xxx.css */ + .content { + width: 60%; + flex-direction: column; + align-items: center; + } + .input { + placeholder-color: gray; + } + .button { + background-color: gray; + margin-top: 20px; + } + ``` + + ``` + // xxx.js + import prompt from '@system.prompt' + export default { + change(e){ + prompt.showToast({ + message: "value: " + e.value, + duration: 3000, + }); + }, + enterkeyClick(e){ + prompt.showToast({ + message: "enterkey clicked", + duration: 3000, + }); + }, + buttonClick(e){ + this.$element("input").showError({ + error: 'error text' + }); + }, + } + ``` + + ![](figures/zh-cn_image_0000001127284984.png) + +2. type为button + + ``` + +
+ +
+ ``` + + ``` + /* xxx.css */ + .div-button { + flex-direction: column; + align-items: center; + } + .button { + margin-top: 30px; + width: 280px; + } + ``` + + ![](figures/zh-cn_image_0000001198898293.png) + +3. type为checkbox + + ``` + +
+ +
+ ``` + + ``` + /* xxx.css */ + .content{ + width: 100%; + height: 200px; + align-items: center; + justify-content: center; + } + ``` + + ``` + // xxx.js + import prompt from '@system.prompt' + export default { + checkboxOnChange(e) { + prompt.showToast({ + message:'checked: ' + e.checked, + duration: 3000, + }); + } + } + ``` + + ![](figures/zh-cn_image_0000001173324749.png) + +4. type为radio + + ``` + +
+ + + +
+ ``` + + ``` + /* xxx.css */ + .content{ + width: 100%; + height: 200px; + justify-content: center; + align-items: center; + } + ``` + + ``` + // xxx.js + import prompt from '@system.prompt' + export default { + onRadioChange(inputValue, e) { + if (inputValue === e.value) { + prompt.showToast({ + message: 'The chosen radio is ' + e.value, + duration: 3000, + }); + } + } + } + ``` + + ![](figures/zh-cn_image_0000001173324751.png) + + diff --git a/zh-cn/application-dev/js-reference/component/js-components-basic-label.md b/zh-cn/application-dev/js-reference/component/js-components-basic-label.md new file mode 100644 index 0000000000000000000000000000000000000000..4c9e5a13b3f0a9e5f8df959d67533634c0100e58 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-basic-label.md @@ -0,0 +1,308 @@ +# label + +- [权限列表](#zh-cn_topic_0000001127284880_section11257113618419) +- [子组件](#zh-cn_topic_0000001127284880_s0cb8fdf50d8a4f78a86bb76deec468fc) +- [属性](#zh-cn_topic_0000001127284880_s6c8b111b1d2e40b3b356f03389dad9cf) +- [样式](#zh-cn_topic_0000001127284880_s5ed16ca4a52b4f8eb4c1a1e04ea9c2c4) +- [事件](#zh-cn_topic_0000001127284880_section57301035448) +- [方法](#zh-cn_topic_0000001127284880_section340215162812) +- [示例](#zh-cn_topic_0000001127284880_section1018514431132) + +为input、button、textarea组件定义相应的标注，点击该标注时会触发绑定组件的点击效果。 + +## 权限列表 + +无 + +## 子组件 + +不支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)外，还支持如下属性： + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

target

+

string

+

-

+

否

+

目标组件的属性id值。

+
+ +## 样式 + +除支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

color

+

<color>

+

#e5000000

+

否

+

设置文本的颜色。

+

font-size

+

<length>

+

30px

+

否

+

设置文本的尺寸。

+

allow-scale

+

boolean

+

true

+

否

+

文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

+
说明：

如果需要支持动态生效，请参看config描述文件中config-changes标签。

+
+

letter-spacing

+

<length>

+

0px

+

否

+

设置文本的字符间距。

+

font-style

+

string

+

normal

+

否

+

设置文本的字体样式，可选值为：

+
  • normal：标准的字体样式；
  • italic：斜体的字体样式。
+

font-weight

+

number | string

+

normal

+

否

+

设置文本的字体粗细，number类型取值[100, 900]，默认为400，取值越大，字体越粗。

+
说明：

number取值必须为100的整数倍。

+
+

string类型取值支持如下四个值：lighter、normal、bold、bolder。

+

text-decoration

+

string

+

none

+

否

+

设置文本的文本修饰，可选值为：

+
  • underline：文字下划线修饰；
  • line-through：穿过文本的修饰线n
  • none：标准文本。
+

text-align

+

string

+

start

+

否

+

设置文本的文本对齐方式，可选值为：

+
  • left：文本左对齐；
  • center：文本居中对齐；
  • right：文本右对齐；
  • start：根据文字书写相同的方向对齐；
  • end：根据文字书写相反的方向对齐。
+
说明：

如文本宽度未指定大小，文本的宽度和父容器的宽度大小相等的情况下，对齐效果可能会不明显。

+
+

line-height

+

<length>

+

0px

+

否

+

设置文本的文本行高，设置为0px时，不限制文本行高，自适应字体大小。

+

text-overflow

+

string

+

clip

+

否

+

在设置了最大行数的情况下生效，可选值为：

+
  • clip：将文本根据父容器大小进行裁剪显示；
  • ellipsis：根据父容器大小显示，显示不下的文本用省略号代替。需配合max-lines使用。
+

font-family

+

string

+

sans-serif

+

否

+

设置文本的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

+

max-lines

+

number

+

-

+

否

+

设置文本的最大行数。

+

min-font-size

+

<length>

+

-

+

否

+

文本最小字号，需要和文本最大字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。

+

max-font-size

+

<length>

+

-

+

否

+

文本最大字号，需要和文本最小字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。

+

font-size-step

+

<length>

+

1px

+

否

+

文本动态调整字号时的步长，需要设置最小，最大字号样式生效。

+

prefer-font-sizes

+

<array>

+

-

+

否

+

预设的字号集合，在动态尺寸调整时，优先使用预设字号集合中的字号匹配设置的最大行数，如果预设字号集合未设置，则使用最大最小和步长调整字号。针对仍然无法满足最大行数要求的情况，使用text-overflow设置项进行截断，设置预设尺寸集后，font-size、max-font-size、min-font-size和font-size-step不生效。

+

如：prefer-font-sizes: 12px,14px,16px

+
+ +## 事件 + +不支持。 + +## 方法 + +不支持。 + +## 示例 + +``` + +
+
+ + +
+
+ + +
+
+ + +
+
+``` + +``` +/*xxx.css */ +.container { + flex-direction: column; + align-items: center; +} +.row { + flex-direction: row; +} +.label { + width: 200px; + margin-top: 50px; +} +.input { + margin-left: 100px; + margin-top: 50px; +} +``` + +![](figures/zh-cn_image_0000001152834002.png) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-basic-marquee.md b/zh-cn/application-dev/js-reference/component/js-components-basic-marquee.md new file mode 100644 index 0000000000000000000000000000000000000000..6edd9cb1cfaecc23de7ca90d96521e12c05ebf09 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-basic-marquee.md @@ -0,0 +1,290 @@ +# marquee + +- [权限列表](#zh-cn_topic_0000001173324593_section11257113618419) +- [子组件](#zh-cn_topic_0000001173324593_section9288143101012) +- [属性](#zh-cn_topic_0000001173324593_section2907183951110) +- [样式](#zh-cn_topic_0000001173324593_section14898114221220) +- [事件](#zh-cn_topic_0000001173324593_section3892191911214) +- [方法](#zh-cn_topic_0000001173324593_section47669296127) +- [示例](#zh-cn_topic_0000001173324593_section198211501414) + +跑马灯组件，用于展示一段单行滚动的文字。 + +## 权限列表 + +无 + +## 子组件 + +不支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

scrollamount

+

number

+

6

+

否

+

跑马灯每次滚动时移动的最大长度。

+

loop

+

number

+

-1

+

否

+

跑马灯滚动的次数。如果未指定，则默认值为-1，当该值小于等于零时表示marquee将连续滚动。

+

direction

+

string

+

left

+

否

+

设置跑马灯的文字滚动方向，可选值为left和right。

+
+ +## 样式 + +除支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

color

+

<color>

+

#e5000000

+

否

+

设置跑马灯中文字的文本颜色。

+

font-size

+

<length>

+

37.5

+

否

+

设置跑马灯中文字的文本尺寸。

+

allow-scale

+

boolean

+

true

+

否

+

设置跑马灯中文字的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

+
说明：

如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。

+
+

font-weight

+

number | string

+

normal

+

否

+

设置跑马灯中文字的字体的粗细，见text组件font-weight的样式属性。

+

font-family

+

string

+

sans-serif

+

否

+

设置跑马灯中文字的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

+
+ +## 事件 + +除支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)外，还支持如下事件： + + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

bounce(Rich)

+

-

+

当文本滚动到末尾时触发该事件。

+

finish(Rich)

+

-

+

当完成滚动次数时触发该事件。需要在 loop 属性值大于 0 时触发。

+

start(Rich)

+

-

+

当文本滚动开始时触发该事件。

+
+ +## 方法 + +除支持[通用方法](js-components-common-methods.md#ZH-CN_TOPIC_0000001209252157)外，还支持如下方法： + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

start

+

-

+

开始滚动。

+

stop

+

-

+

停止滚动。

+
+ +## 示例 + +``` + +
+ {{marqueeCustomData}} +
+ + +
+
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #ffffff; +} +.customMarquee { + width: 100%; + height: 80px; + padding: 10px; + margin: 20px; + border: 4px solid #ff8888; + border-radius: 20px; + font-size: 40px; + color: #ff8888; + font-weight: bolder; + font-family: serif; + background-color: #ffdddd; +} +.content { + flex-direction: row; +} +.controlButton { + flex-grow: 1; + background-color: #F2F2F2; + text-color: #0D81F2; +} +``` + +``` +// xxx.js +export default { + data: { + scrollAmount: 30, + loop: 3, + marqueeDir: 'left', + marqueeCustomData: 'Custom marquee', + }, + onMarqueeBounce: function() { + console.log("onMarqueeBounce"); + }, + onMarqueeStart: function() { + console.log("onMarqueeStart"); + }, + onMarqueeFinish: function() { + console.log("onMarqueeFinish"); + }, + onStartClick (evt) { + this.$element('customMarquee').start(); + }, + onStopClick (evt) { + this.$element('customMarquee').stop(); + } +} +``` + +![](figures/sample1.gif) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-basic-menu.md b/zh-cn/application-dev/js-reference/component/js-components-basic-menu.md new file mode 100644 index 0000000000000000000000000000000000000000..1b1699e5db364a57cfcd6e7e854cd0a113b16750 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-basic-menu.md @@ -0,0 +1,272 @@ +# menu + +- [权限列表](#zh-cn_topic_0000001173164715_section11257113618419) +- [子组件](#zh-cn_topic_0000001173164715_section9288143101012) +- [属性](#zh-cn_topic_0000001173164715_section2907183951110) +- [样式](#zh-cn_topic_0000001173164715_section1382826121311) +- [事件](#zh-cn_topic_0000001173164715_section5624519222) +- [方法](#zh-cn_topic_0000001173164715_section47669296127) +- [示例](#zh-cn_topic_0000001173164715_section54636714136) + +提供菜单组件，作为临时性弹出窗口，用于展示用户可执行的操作。 + +## 权限列表 + +无 + +## 子组件 + +<[option](js-components-basic-option.md#ZH-CN_TOPIC_0000001209252169)\>子组件。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)外，还支持如下属性：↵ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

target

+

string

+

-

+

否

+

目标元素选择器。当使用目标元素选择器后，点击目标元素会自动弹出menu菜单。弹出菜单位置优先为目标元素右下角，当右边可视空间不足时会适当左移，当下方空间不足时会适当上移。

+

type

+

string

+

click

+

否

+

目标元素触发弹窗的方式，可选值有：

+
  • click：点击弹窗。
  • longpress：长按弹窗。
+

title

+

string

+

-

+

否

+

菜单标题内容。

+
+ +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- 不支持focusable、disabled属性。 + +## 样式 + +仅支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

text-color

+

<color>

+

-

+

否

+

设置菜单的文本颜色。

+

font-size

+

<length>

+

30px

+

否

+

设置菜单的文本尺寸。

+

allow-scale

+

boolean

+

true

+

否

+

设置菜单的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

+
说明：

如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。

+
+

letter-spacing

+

<length>

+

0

+

否

+

设置菜单的字符间距。

+

font-style

+

string

+

normal

+

否

+

设置菜单的字体样式。见text组件font-style的样式属性。

+

font-weight

+

number | string

+

normal

+

否

+

设置菜单的字体粗细。见text组件font-weight的样式属性。

+

font-family

+

string

+

sans-serif

+

否

+

设置菜单的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

+
+ +## 事件 + +仅支持如下事件： + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

selected

+

{ value:value }

+

菜单中某个值被点击选中时触发，返回的value值为option组件的value属性。

+

cancel

+

-

+

用户取消。

+
+ +## 方法 + +仅支持如下方法。 + + + + + + + + + + + + +

名称

+

参数

+

描述

+

show

+

{ x:x, y:y }

+

显示menu菜单。(x, y)指定菜单弹窗位置。其中x表示距离可见区域左边沿的 X 轴坐标，不包含任何滚动偏移，y表示距离可见区域上边沿的 Y 轴坐标，不包含任何滚动偏移以及状态栏。菜单优先显示在弹窗位置右下角，当右边可视空间不足时会适当左移，当下方空间不足时会适当上移。

+
+ +## 示例 + +``` + +
+ Show popup menu. + + + + + +
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + align-items: flex-start; + justify-content: center; +} +.title-text { + margin: 20px; +} +``` + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + onMenuSelected(e) { + prompt.showToast({ + message: e.value + }) + }, + onTextClick() { + this.$element("apiMenu").show({x:280,y:120}); + } +} +``` + +![](figures/menu13.gif) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-basic-option.md b/zh-cn/application-dev/js-reference/component/js-components-basic-option.md new file mode 100644 index 0000000000000000000000000000000000000000..d73f5c89444f7c73ae988aeb2e238aec029969b2 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-basic-option.md @@ -0,0 +1,177 @@ +# option + +- [权限列表](#zh-cn_topic_0000001127125028_section11257113618419) +- [子组件](#zh-cn_topic_0000001127125028_section9288143101012) +- [属性](#zh-cn_topic_0000001127125028_section2907183951110) +- [样式](#zh-cn_topic_0000001127125028_section5775351116) +- [事件](#zh-cn_topic_0000001127125028_section1013173520328) +- [方法](#zh-cn_topic_0000001127125028_section45101363326) +- [示例](#zh-cn_topic_0000001127125028_section7566164416325) + +当作为<[select](js-components-basic-select.md#ZH-CN_TOPIC_0000001164130768)\>的子组件时用来展示下拉选择的具体项目。 + +当作为<[menu](js-components-basic-menu.md#ZH-CN_TOPIC_0000001163812218)\>的子组件时用来展示弹出菜单的具体项目。 + +## 权限列表 + +无 + +## 子组件 + +不支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)外，还支持如下属性：↵ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

selected

+

boolean

+

-

+

否

+

选择项是否为下拉列表的默认项，仅在父组件是select时生效。

+

value

+

string

+

-

+

是

+

选择项的值，作为select、menu父组件的selected事件中的返回值。

+
说明：

option选项的UI展示值需要放在标签内，如<option value="10">十月</option>

+
+

icon

+

string

+

-

+

否

+

图标资源路径，该图标展示在选项文本前，图标格式为jpg，png和svg。

+
+ +## 样式 + +支持如下样式。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

color

+

<color>

+

#e6000000

+

否

+

选择项的文本颜色。

+

font-size

+

<length>

+

16px

+

否

+

选择项的文本尺寸。

+

allow-scale

+

boolean

+

true

+

否

+

选择项的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

+
说明：

如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。

+
+

font-weight

+

number | string

+

normal

+

否

+

选择项的字体粗细，见text组件font-weight的样式属性。

+

text-decoration

+

string

+

none

+

否

+

选择项的文本修饰，见text组件text-decoration的样式属性。

+

font-family

+

string

+

sans-serif

+

否

+

选择项的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

+
+ +## 事件 + +不支持。 + +## 方法 + +不支持。 + +## 示例 + +详见[menu示例](js-components-basic-menu.md#zh-cn_topic_0000001173164715_section54636714136)。 + diff --git a/zh-cn/application-dev/js-reference/component/js-components-basic-picker-view.md b/zh-cn/application-dev/js-reference/component/js-components-basic-picker-view.md new file mode 100644 index 0000000000000000000000000000000000000000..a91181aadc3e2b5dd93a7a4f8e7c84c38008080f --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-basic-picker-view.md @@ -0,0 +1,644 @@ +# picker-view + +- [子组件](#zh-cn_topic_0000001127125108_section54292411343) +- [属性](#zh-cn_topic_0000001127125108_section121957126347) +- [样式](#zh-cn_topic_0000001127125108_section198061172344) +- [事件](#zh-cn_topic_0000001127125108_section103398253399) +- [方法](#zh-cn_topic_0000001127125108_section718304515396) +- [示例](#zh-cn_topic_0000001127125108_section738534695417) + +嵌入页面的滑动选择器。 + +## 子组件 + +不支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)外，还支持如下属性： + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

type

+

string

+

text

+

否

+

设置滑动选择器的类型，该属性不支持动态修改，可选项有：

+
  • text：文本选择器。
  • time：时间选择器。
  • date：日期选择器。
  • datetime：日期时间选择器。
  • multi-text：多列文本选择器。
+
+ +文本选择器：type=text + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

range

+

Array

+

-

+

否

+

设置文本选择器的取值范围。

+
说明：

使用时需要使用数据绑定的方式，如range = {{data}}，js中声明相应变量：data：["15", "20", "25"]。

+
+

selected

+

string

+

0

+

否

+

设置文本选择器的默认选择值，该值需要为range的索引。

+

indicatorprefix

+

string

+

-

+

否

+

文本选择器选定值增加的前缀字段。

+

indicatorsuffix

+

string

+

-

+

否

+

文本选择器选定值增加的后缀字段。

+
+ +时间选择器：type=time + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

containsecond

+

boolean

+

false

+

否

+

时间选择器是否包含秒。

+

selected

+

string

+

当前时间

+

否

+

设置时间选择器的默认取值，格式为 HH:mm；

+

当包含秒时，格式为HH:mm:ss。

+

hours

+

number

+

241-4

+

-5+

+

否

+

设置时间选择器采用的时间格式，可选值：

+
  • 12：按照12小时制显示，用上午和下午进行区分；
  • 24：按照24小时制显示。
    说明：

    默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。5+

    +
    +
+
+ +日期选择器：type=date + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

start

+

<time>

+

1970-1-1

+

否

+

设置日期选择器的起始时间，格式为 YYYY-MM-DD。

+

end

+

<time>

+

2100-12-31

+

否

+

设置日期选择器的结束时间，格式为 YYYY-MM-DD。

+

selected

+

string

+

当前日期

+

否

+

设置日期选择器的默认选择值，格式为 YYYY-MM-DD。

+

lunar5+

+

boolean

+

false

+

否

+

设置日期选择器弹窗界面是否为农历展示。

+

lunarswitch

+

boolean

+

false

+

否

+

设置日期选择器是否显示农历开关，显示农历开关时，可以在弹窗界面展现农历的开关由于公历和农历切换。在设置显示农历时，开关状态为开，当设置不显示农历时，开关状态为关。手机生效。

+
说明：

仅手机和平板设备支持。

+
+
+ +日期时间选择器：type=datetime，日期的选择范围为本年的日月。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

selected

+

string

+

当前日期时间

+

否

+

设置日期时间选择器的默认取值，格式有两种，为月日时分MM-DD-HH-mm或者年月日时分YYYY-MM-DD-HH-mm，不设置年时，默认使用当前年，该取值表示选择器弹窗时弹窗界面的默认选择值。

+

hours

+

number

+

241-4

+

-5+

+

否

+

设置日期时间选择器采用的时间格式，可选值：

+
  • 12：按照12小时制显示，用上午和下午进行区分；
  • 24：按照24小时制显示。
    说明：

    默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。5+

    +
    +
+

lunar5+

+

boolean

+

false

+

否

+

设置日期时间选择器弹窗界面是否为农历展示。

+

lunarswitch

+

boolean

+

false

+

否

+

设置日期时间选择器是否显示农历开关，显示农历开关时，可以在弹窗界面展现农历的开关由于公历和农历切换。在设置显示农历时，开关状态为开，当设置不显示农历时，开关状态为关。手机生效。

+
说明：

仅手机和平板设备支持。

+
+
+ +多列文本选择器：type=multi-text + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

columns

+

number

+

-

+

是

+

设置多列文本选择器的列数。

+

range

+

二维Array

+

-

+

否

+

设置多列文本选择器的选择值，该值为二维数组。长度表示多少列，数组的每项表示每列的数据，如 [["a","b"], ["c","d"]]。

+
说明：

使用时需要使用数据绑定的方式，如range = {{data}}，js中声明相应变量：data：[["a","b"], ["c","d"]]。

+
+

selected

+

Array

+

[0,0,0,…]

+

否

+

设置多列文本选择器的默认值，每一列被选中项对应的索引构成的数组，该取值表示选择器弹窗时弹窗界面的默认选择值。

+
+ +## 样式 + +除支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

color

+

<color>

+

#ffffff

+

否

+

候选项字体颜色。

+

font-size

+

<length>

+

16px

+

否

+

候选项字体尺寸，类型length，单位px。

+

selected-color

+

<color>

+

#ff0a69f7

+

否

+

选中项字体颜色。

+

selected-font-size

+

<length>

+

20px

+

否

+

选中项字体尺寸，类型length，单位px。

+

disappear-color5+

+

<color>

+

#ffffff

+

否

+

渐变消失项的字体颜色。消失项是在一列中有五个选项场景下最上和最下的两个选项。

+
说明：

仅手机和平板设备支持。

+
+

disappear-font-size5+

+

<length>

+

14px

+

否

+

渐变消失项的字体尺寸。消失项是在一列中有五个选项场景下最上和最下的两个选项。

+
说明：

仅手机和平板设备支持。

+
+

font-family

+

string

+

sans-serif

+

否

+

选项字体类型。字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

+
+ +## 事件 + +仅支持如下事件： + +type=text： + + + + + + + + + + + + +

名称

+

参数

+

描述

+

change

+

{ newValue: newValue, newSelected: newSelected }

+

文本选择器选定值后触发该事件。

+
+ +type=time： + + + + + + + + + + + + +

名称

+

参数

+

描述

+

change

+

{ hour: hour, minute: minute, [second:second] }

+

时间选择器选定值后触发该事件。

+

包含秒时，返回时分秒。

+
+ +type=date： + + + + + + + + + + + + +

名称

+

参数

+

描述

+

change

+

{ year:year, month:month, day:day }

+

日期选择器选择值后触发该事件。

+
+ +type=datetime： + + + + + + + + + + + + +

名称

+

参数

+

描述

+

change

+

{ year:year, month:month, day:day, hour:hour, minute:minute }

+

日期时间选择器选择值后触发该事件。

+
+ +type=multi-text： + + + + + + + + + + + + +

名称

+

参数

+

描述

+

columnchange

+

{ column:column, newValue:newValue, newSelected:newSelected }

+

多列文本选择器某一列的值改变时触发该事件，column：第几列修改，newValue：选中的值，newSelected：选中值对应的索引。

+
+ +## 方法 + +不支持。 + +## 示例 + +``` + +
+ + Selected：{{time}} + + +
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; + left: 0px; + top: 0px; + width: 454px; + height: 454px; +} +.title { + font-size: 30px; + text-align: center; +} +.time-picker { + width: 500px; + height: 400px; + margin-top: 20px; +} +``` + +``` +/* xxx.js */ +export default { + data: { + defaultTime: "", + time: "", + }, + onInit() { + this.defaultTime = this.now(); + }, + handleChange(data) { + this.time = this.concat(data.hour, data.minute); + }, + now() { + const date = new Date(); + const hours = date.getHours(); + const minutes = date.getMinutes(); + return this.concat(hours, minutes); + }, + + fill(value) { + return (value > 9 ? "" : "0") + value; + }, + + concat(hours, minutes) { + return `${this.fill(hours)}:${this.fill(minutes)}`; + }, +} +``` + +![](figures/sssssss.png) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-basic-picker.md b/zh-cn/application-dev/js-reference/component/js-components-basic-picker.md new file mode 100644 index 0000000000000000000000000000000000000000..8963b36ee90767652a37e66d7813010fb3635efd --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-basic-picker.md @@ -0,0 +1,845 @@ +# picker + +- [权限列表](#zh-cn_topic_0000001173324637_section11257113618419) +- [子组件](#zh-cn_topic_0000001173324637_section9288143101012) +- [属性](#zh-cn_topic_0000001173324637_section2907183951110) +- [样式](#zh-cn_topic_0000001173324637_section1299175511712) +- [事件](#zh-cn_topic_0000001173324637_section1724215114357) +- [方法](#zh-cn_topic_0000001173324637_section47669296127) +- [示例](#zh-cn_topic_0000001173324637_section11956342165513) + +滑动选择器组件，类型支持普通选择器、日期选择器、时间选择器、时间日期选择器和多列文本选择器。 + +## 权限列表 + +无 + +## 子组件 + +不支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)外，还支持如下属性：↵ + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

type

+

string

+

-

+

否

+

该属性值不支持动态修改。可选择项有：

+
  • text：文本选择器。
  • date：日期选择器。
  • time：时间选择器。
  • datetime：日期时间选择器。
  • multi-text：多列文本选择器。
+
+ +普通选择器：type=text + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

range

+

Array

+

-

+

否

+

设置普通选择器的取值范围，如["15", "20", "25"]。

+
说明：

使用时需要使用数据绑定的方式，如range = {{data}}，js中声明相应变量：data：["15", "20", "25"]。

+
+

selected

+

string

+

0

+

否

+

设置普通选择器弹窗的默认取值，取值需要是 range 的索引值，该取值表示选择器弹窗时弹窗界面的默认选择值。

+

value

+

string

+

-

+

否

+

设置普通选择器的值。

+
+ +日期选择器：type=date + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

start

+

<time>

+

1970-1-1

+

否

+

设置日期选择器的起始时间，格式为 YYYY-MM-DD。

+

end

+

<time>

+

2100-12-31

+

否

+

设置日期选择器的结束时间，格式为 YYYY-MM-DD。

+

selected

+

string

+

当前日期

+

否

+

设置日期选择器弹窗的默认取值，格式为 YYYY-MM-DD，该取值表示选择器弹窗时弹窗界面的默认选择值。

+

value

+

string

+

-

+

是

+

设置日期选择器的值。

+

lunar5+

+

boolean

+

false

+

否

+

设置日期选择器弹窗界面是否为农历展示。

+

lunarswitch

+

boolean

+

false

+

否

+

设置日期选择器是否显示农历开关。当值为true时，显示农历开关，点击农历开关可切换公历和农历。当值为false时，不显示农历开关。

+
说明：

仅手机和平板设备支持。 当lunarswitch=true且lunar=true时，开关按钮处于被选中状态。

+
+
+ +时间选择器：type=time + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

containsecond

+

boolean

+

false

+

否

+

设置时间选择器是否包含秒。

+

selected

+

string

+

当前时间

+

否

+

设置时间选择器弹窗的默认取值，格式为 HH:mm；当包含秒时，格式为HH:mm:ss，

+

该取值表示选择器弹窗时弹窗界面的默认选择值。

+

value

+

string

+

-

+

否

+

设置时间选择器的值。

+

hours

+

number

+

241-4

+

-5+

+

否

+

设置时间选择器采用的时间格式，可选值：

+
  • 12：按照12小时制显示，用上午和下午进行区分；
  • 24：按照24小时制显示。
    说明：

    默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。5+

    +
    +
+
+ +日期时间选择器：type=datetime，日期的选择范围为本年的日月。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

selected

+

string

+

当前日期时间

+

否

+

设置日期时间选择器弹窗的默认取值，格式有两种，为月日时分MM-DD-HH-mm或者年月日时分YYYY-MM-DD-HH-mm，不设置年时，默认使用当前年，该取值表示选择器弹窗时弹窗界面的默认选择值。

+

value

+

string

+

-

+

是

+

设置日期时间选择器的值。

+

hours

+

number

+

241-4

+

-5+

+

否

+

设置日期时间选择器采用的时间格式，可选值：

+
  • 12：按照12小时制显示，用上午和下午进行区分；
  • 24：按照24小时制显示。
    说明：

    默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。5+

    +
    +
+

lunar5+

+

boolean

+

false

+

否

+

设置日期时间选择器弹窗界面是否为农历展示。

+

lunarswitch

+

boolean

+

false

+

否

+

设置日期选择器是否显示农历开关。当值为true时，显示农历开关，点击农历开关可切换公历和农历。当值为false时，不显示农历开关。

+
说明：

仅手机和平板设备支持。 当lunarswitch=true且lunar=true时，开关按钮处于被选中状态。

+
+
+ +多列文本选择器：type=multi-text + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

columns

+

number

+

-

+

是

+

设置多列文本选择器的列数。

+

range

+

二维Array

+

-

+

否

+

设置多列文本选择器的选择项，其中range 为二维数组。长度表示多少列，数组的每项表示每列的数据，如 [["a","b"], ["c","d"]]。

+
说明：

使用时需要使用数据绑定的方式，如range = {{data}}，js中声明相应变量：data：[["a","b"], ["c","d"]]。

+
+

selected

+

Array

+

[0,0,0,…]

+

否

+

设置多列文本选择器弹窗的默认值，每一列被选中项对应的索引构成的数组，该取值表示选择器弹窗时弹窗界面的默认选择值。

+

value

+

Array

+

-

+

否

+

设置多列文本选择器的值，每一列被选中项对应的值构成的数组。

+
+ +## 样式 + +除支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

text-color

+

<color>

+

-

+

否

+

选择器的文本颜色。

+

font-size

+

<length>

+

-

+

否

+

选择器的文本尺寸。

+

allow-scale

+

boolean

+

true

+

否

+

选择器的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

+
说明：

如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。

+
+

letter-spacing

+

<length>

+

0

+

否

+

选择器的字符间距。见text组件的letter-spacing样式属性。

+

text-decoration

+

string

+

-

+

否

+

选择器的文本修饰。见text组件的text-decoration样式属性。

+

font-style

+

string

+

normal

+

否

+

选择器的字体样式。见text组件的font-style样式属性。

+

font-weight

+

number | string

+

normal

+

否

+

选择器的字体粗细。见text组件的font-weight样式属性。

+

font-family

+

string

+

sans-serif

+

否

+

选择器的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

+

line-height

+

<length>

+

0px

+

否

+

选择器的文本行高。

+

column-height5+

+

<length>

+

-

+

否

+

选择器的选择项列表高度。

+
说明：

仅手机和平板设备支持。

+
+
+ +## 事件 + +除支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)外，还支持如下事件： + +普通选择器： + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

change

+

{ newValue:newValue, newSelected:newSelected }

+

普通选择器选择值后点击弹窗中的确定按钮时触发该事件（newSelected为索引）。

+

cancel

+

-

+

用户点击弹窗中的取消按钮时触发该事件。

+
+ +日期选择器： + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

change

+

{ year:year, month:month, day:day }

+

日期选择器选择值后点击弹窗中的确认按钮时触发该事件。

+
说明：

month值范围为： 0（1月）~11（12月）。5+

+
+

cancel

+

-

+

用户点击弹窗中的取消按钮时触发该事件。

+
+ +日期时间选择器： + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

change

+

{ year:year, month:month, day:day, hour:hour, minute:minute}

+

日期时间选择器选择值后点击弹窗中的确认按钮时触发该事件。

+

cancel

+

-

+

用户点击弹窗中的取消按钮时触发该事件。

+
+ +时间选择器： + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

change

+

{ hour:hour, minute:minute,

+

[second:second] }

+

时间选择器选择值后点击弹窗中的确认按钮时触发该事件，当使用时分秒时，还包含秒数据。

+

cancel

+

-

+

用户点击弹窗中的取消按钮时触发该事件。

+
+ +多列文本选择器： + + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

change

+

{ newValue:[newValue1, newValue2, newValue3, …], newSelected:[newSelected1, newSelected2, newSelected3, …] }

+

多列文本选择器选择值后点击弹窗中的确认按钮时触发该事件，其中：

+
  • newValue：被选中项对应的值构成的数组。
  • newSelected：被选中项对应的索引构成的数组，两者的长度和range的长度一致。
+

columnchange

+

{ column:column, newValue:newValue, newSelected:newSelected }

+

多列文本选择器中某一列的值改变时触发该事件，其中：

+
  • column：第几列修改。
  • newValue：选中的值。
  • newSelected：选中值对应的索引。
+

cancel

+

-

+

用户点击弹窗中的取消按钮时触发该事件。

+
+ +## 方法 + +除支持[通用方法](js-components-common-methods.md#ZH-CN_TOPIC_0000001209252157)外，支持如下方法： + + + + + + + + + + + + +

名称

+

参数

+

描述

+

show

+

-

+

显示 picker。

+
+ +## 示例 + +``` + +
+ + + + + + + + + +
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; +} +.pickertext{ + background-color: red; + width: 300; + height: 400; +} +.pickerdate{ + background-color: #BEFF5B; + width: 200; + height: 200; +} +.pickertime{ + background-color: #B764FF; + width: 500; + height: 200; +} +.pickerdatetime{ + background-color: #FF6387; + width: 100%; + height: 300; +} +.pickermuitl{ + background-color: #71FF31; +} +``` + +``` +// xxx.js +import router from '@system.router'; +import prompt from '@system.prompt'; +export default { + data: { + rangetext:['15', "20", "25"], + multitext:[["a", "b", "c"], ["e", "f", "g"], ["h", "i"], ["k", "l", "m"]], + textvalue:'default textvalue', + datevalue:'default datevalue', + timevalue:'default timevalue', + datetimevalue:'default datetimevalue', + multitextvalue:'default multitextvalue', + containsecond:true, + multitextselect:[1,2,0], + datetimeselect:'2012-5-6-11-25', + timeselect:'11:22:30', + dateselect:'2021-3-2', + textselect:'2' + }, + textonchange(e) { + this.textvalue = e.newValue; + prompt.showToast({ message:"text:"+e.newValue+",newSelected:"+e.newSelected }) + }, + textoncancel(e) { + prompt.showToast({ message:"text: textoncancel" }) + }, + dateonchange(e) { + this.datevalue = e.year + "-" + e.month + "-" + e.day; + prompt.showToast({ message:"date:"+e.year+"-"+e.month+"-"+e.day }) + }, + dateoncancel() { + prompt.showToast({ message:"date: dateoncancel" }) + }, + timeonchange(e) { + if(this.containsecond){ + this.timevalue=e.hour+":"+e.minute+":"+e.second; + prompt.showToast({ message:"时间:" + e.hour + ":" + e.minute + ":" + e.second }) + } else { + this.timevalue=e.hour+":"+e.minute; + prompt.showToast({ message:"时间:" + e.hour + ":" + e.minute }) + }}, + timeoncancel() { + prompt.showToast({ message:"timeoncancel" }) + }, + datetimeonchange(e) { + this.datetimevalue=e.year+"-"+e.month+"-"+e.day+" "+e.hour+":"+e.minute; + prompt.showToast({ message:"时间:"+e.month+"-"+e.day+" "+e.hour+":"+e.minute }) + }, + datetimeoncancel() { + prompt.showToast({ message:"datetimeoncancel" }) + }, + multitextonchange(e) { + this.multitextvalue=e.newValue; + prompt.showToast({ message:"多列文本更改" + e.newValue }) + }, + multitextoncancel() { + prompt.showToast({ message:"multitextoncancel" }) + }, + popup_picker() { + this.$element("picker_text").show(); + }, +} +``` + +**图 1** text +![](figures/text.png "text") + +**图 2** date + + +![](figures/date33.png) + +**图 3** time +![](figures/time.png "time") + +**图 4** datetime +![](figures/datetime.png "datetime") + +**图 5** multitext +![](figures/multitext.png "multitext") + diff --git a/zh-cn/application-dev/js-reference/component/js-components-basic-piece.md b/zh-cn/application-dev/js-reference/component/js-components-basic-piece.md new file mode 100644 index 0000000000000000000000000000000000000000..300e7f442a9332f4972515e787ab866ec5e35719 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-basic-piece.md @@ -0,0 +1,130 @@ +# piece + +- [子组件](#zh-cn_topic_0000001173164767_section9288143101012) +- [属性](#zh-cn_topic_0000001173164767_section2907183951110) +- [样式](#zh-cn_topic_0000001173164767_section17756476592) +- [事件](#zh-cn_topic_0000001173164767_section19137152119) +- [方法](#zh-cn_topic_0000001173164767_section2279124532420) +- [示例](#zh-cn_topic_0000001173164767_section118886119320) + +一种块状的入口，可包含图片和文本。常用于展示收件人，例如：邮件收件人或信息收件人。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 5 开始支持。 + +## 子组件 + +无 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

content

+

string

+

-

+

是

+

操作块文本内容。

+

closable

+

boolean

+

false

+

否

+

设置当前操作块是否显示删除图标，当显示删除图标时，点击删除图标会触发close事件。

+

icon

+

string

+

-

+

否

+

操作块删除图标的url，支持本地。

+
+ +## 样式 + +支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>文本和图片默认在整个piece组件中居中。 + +## 事件 + +除支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)外，还支持如下事件： + + + + + + + + + + + + +

名称

+

参数

+

描述

+

close

+

-

+

当piece组件点击删除图标触发，此时可以通过渲染属性if删除该组件。

+
+ +## 方法 + +支持[通用方法](js-components-common-methods.md#ZH-CN_TOPIC_0000001209252157)。 + +## 示例 + +``` + +
+ + +
+``` + +``` +// xxx.js +export default { + data: { + first: true, + second: true + }, + closeSecond(e) { + this.second = false; + } +} +``` + +![](figures/SVID_20210301_193525_1.gif) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-basic-progress.md b/zh-cn/application-dev/js-reference/component/js-components-basic-progress.md new file mode 100644 index 0000000000000000000000000000000000000000..f4b677f5dd002194ba8a387aa8deed847e5afd5b --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-basic-progress.md @@ -0,0 +1,521 @@ +# progress + +- [权限列表](#zh-cn_topic_0000001173324665_section11257113618419) +- [子组件](#zh-cn_topic_0000001173324665_section9288143101012) +- [属性](#zh-cn_topic_0000001173324665_section2907183951110) +- [样式](#zh-cn_topic_0000001173324665_section5775351116) +- [事件](#zh-cn_topic_0000001173324665_section16580153964314) +- [方法](#zh-cn_topic_0000001173324665_section2279124532420) +- [示例](#zh-cn_topic_0000001173324665_section493033510346) + +进度条，用于显示内容加载或操作处理进度。 + +## 权限列表 + +无 + +## 子组件 + +不支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)外，还支持如下属性： + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

type

+

string

+

horizontal

+

否

+

设置进度条的类型，该属性不支持动态修改，可选值为：

+
  • horizontal：线性进度条；
  • circular：loading样式进度条；
  • ring：圆环形进度条；
  • scale-ring：带刻度圆环形进度条
  • arc：弧形进度条。
  • eclipse5+：圆形进度条，展现类似月圆月缺的进度展示效果。
+
+ +不同类型的进度条还支持不同的属性： + +- 类型为horizontal、ring、scale-ring时，支持如下属性： + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

percent

+

number

+

0

+

否

+

当前进度。取值范围为0-100。

+

secondarypercent

+

number

+

0

+

否

+

次级进度。取值范围为0-100。

+
+ +- 类型为ring、scale-ring时，支持如下属性： + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

clockwise

+

boolean

+

true

+

否

+

圆环形进度条是否采用顺时针。

+
+ +- 类型为arc、eclipse5+时，支持如下属性： + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

percent

+

number

+

0

+

否

+

当前进度。取值范围为0-100。

+
+ + +## 样式 + +除支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)外，还支持如下样式： + +type=horizontal + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

color

+

<color>

+

#ff007dff

+

否

+

设置进度条的颜色。

+

stroke-width

+

<length>

+

4px

+

+

否

+

设置进度条的宽度。

+

background-color

+

<color>

+

-

+

否

+

设置进度条的背景色。

+

secondary-color

+

<color>

+

-

+

否

+

设置次级进度条的颜色。

+
+ +type=circular + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

color

+

<color>

+

-

+

否

+

loading进度条上的圆点颜色。

+
+ +type=ring, scale-ring + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

color

+

<color> | <linear-gradient>

+

-

+

否

+

环形进度条的颜色，ring类型支持线性渐变色设置。

+
说明：

线性渐变色仅支持两个颜色参数设置格式，如color = linear-gradient(#ff0000, #00ff00)。

+
+

background-color

+

<color>

+

-

+

否

+

环形进度条的背景色。

+

secondary-color

+

<color>

+

-

+

否

+

环形次级进度条的颜色。

+

stroke-width

+

<length>

+

10px

+

否

+

环形进度条的宽度。

+

scale-width

+

<length>

+

-

+

否

+

带刻度的环形进度条的刻度粗细，类型为scale-ring生效。

+

scale-number

+

number

+

120

+

否

+

带刻度的环形进度条的刻度数量，类型为scale-ring生效。

+
+ +type=arc + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

color

+

<color>

+

-

+

+

否

+

弧形进度条的颜色。

+

background-color

+

<color>

+

-

+

+

否

+

弧形进度条的背景色。

+

stroke-width

+

<length>

+

4px

+

否

+

弧形进度条的宽度。

+
说明：

进度条宽度越大，进度条越靠近圆心，进度条始终在半径区域内。

+
+

start-angle

+

<deg>

+

240

+

否

+

弧形进度条起始角度，以时钟0点为基线，取值范围为0到360（顺时针）。

+

total-angle

+

<deg>

+

240

+

否

+

弧形进度条总长度，范围为-360到360，负数标识起点到终点为逆时针。

+

center-x

+

<length>

+

弧形进度条宽度的一半

+

否

+

弧形进度条中心位置，（坐标原点为组件左上角顶点）。该样式需要和center-y和radius一起使用。

+

center-y

+

<length>

+

弧形进度条高度的一半

+

否

+

弧形进度条中心位置，（坐标原点为组件左上角顶点）。该样式需要和center-x和radius一起使用。

+

radius

+

<length>

+

弧形进度条宽高最小值的一半

+

否

+

弧形进度条半径，该样式需要和center-x和center-y一起使用。

+
+ +type=eclipse5+ + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

color

+

<color>

+

-

+

否

+

圆形进度条的颜色。

+

background-color

+

<color>

+

-

+

否

+

弧形进度条的背景色。

+
+ +## 事件 + +支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)。 + +## 方法 + +支持[通用方法](js-components-common-methods.md#ZH-CN_TOPIC_0000001209252157)。 + +## 示例 + +``` + +
+ + + + +
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + height: 100%; + width: 100%; + align-items: center; +} +.min-progress { + width: 300px; + height: 300px; +} +``` + +![](figures/progress.png) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-basic-qrcode.md b/zh-cn/application-dev/js-reference/component/js-components-basic-qrcode.md new file mode 100644 index 0000000000000000000000000000000000000000..62b0c99b314ebccdd48af96266901515d5c51ea2 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-basic-qrcode.md @@ -0,0 +1,126 @@ +# qrcode + +- [权限列表](#zh-cn_topic_0000001127284846_section11257113618419) +- [子组件](#zh-cn_topic_0000001127284846_section352513155564) +- [属性](#zh-cn_topic_0000001127284846_section5347151165210) +- [样式](#zh-cn_topic_0000001127284846_section439317598552) +- [事件](#zh-cn_topic_0000001127284846_section1948820711216) +- [方法](#zh-cn_topic_0000001127284846_section2279124532420) +- [示例](#zh-cn_topic_0000001127284846_section81001951259) + +生成并显示二维码。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 5 开始支持。 + +## 权限列表 + +无 + +## 子组件 + +不支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

value

+

string

+

-

+

是

+

用来生成二维码的内容。

+

type

+

string

+

rect

+

否

+

二维码类型。可能选项有：

+
  • rect：矩形二维码。
  • circle：圆形二维码。
+
+ +## 样式 + +除支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

color

+

<color>

+

#000000

+

否

+

二维码颜色。

+

background-color

+

<color>

+

#ffffff

+

否

+

二维码背景颜色。

+
+ +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- width和height不一致时，取二者较小值作为二维码的边长。且最终生成的二维码居中显示。 +>- width和height只设置一个时，取设置的值作为二维码的边长。都不设置时，使用200px作为默认边长。 + +## 事件 + +支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)。 + +## 方法 + +支持[通用方法](js-components-common-methods.md#ZH-CN_TOPIC_0000001209252157)。 + +## 示例 + +``` + +``` + diff --git a/zh-cn/application-dev/js-reference/component/js-components-basic-rating.md b/zh-cn/application-dev/js-reference/component/js-components-basic-rating.md new file mode 100644 index 0000000000000000000000000000000000000000..497c2617130f6ef5f538d18e02fac924b6cb3cef --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-basic-rating.md @@ -0,0 +1,240 @@ +# rating + +- [权限列表](#zh-cn_topic_0000001173324645_section11257113618419) +- [子组件](#zh-cn_topic_0000001173324645_section9288143101012) +- [属性](#zh-cn_topic_0000001173324645_section2907183951110) +- [样式](#zh-cn_topic_0000001173324645_section5775351116) +- [事件](#zh-cn_topic_0000001173324645_section124498406719) +- [方法](#zh-cn_topic_0000001173324645_section2279124532420) +- [示例](#zh-cn_topic_0000001173324645_section1715414253487) + +评分条，表示用户使用感受的衡量标准条。 + +## 权限列表 + +无 + +## 子组件 + +不支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

numstars

+

number

+

5

+

否

+

设置评分条的星级总数。

+

rating

+

number

+

0

+

否

+

设置评分条当前评星数。

+

stepsize

+

number

+

0.5

+

否

+

设置评分条的评星步长。

+
说明：

仅手机和平板设备支持

+
+

indicator

+

boolean

+

false

+

否

+

设置评分条是否作为一个指示器，此时用户不可操作。

+
+ +## 样式 + +除支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

star-background

+

string

+

-

+

否

+

设置单个星级未选中的背景图片，只支持本地路径图片，图片格式为png和jpg。

+

star-foreground

+

string

+

-

+

否

+

设置单个星级选中的前景图片，只支持本地路径图片，图片格式为png和jpg。

+

star-secondary

+

string

+

-

+

否

+

设置单个星级部分选中的次级背景图片，该图片会覆盖背景图片，只支持本地路径图片，图片格式为png和jpg。

+

width

+

<length>|<percentage>

+

120px

+

60px（不可操作）

+

否

+

默认值是在未设置自定义资源和评分星数时，使用5个星和默认资源下的宽度值。

+

height

+

<length>|<percentage>

+

24px

+

12px（不可操作）

+

否

+

默认值是在未设置自定义资源和评分星数时，使用5个星和默认资源下的高度值。

+

rtl-flip

+

boolean

+

true

+

否

+

在RTL文字方向下是否自动翻转图源。

+
+ +>![](../../public_sys-resources/icon-note.gif) **说明：** +>star-background，star-secondary，star-foreground三个星级图源必须全部设置，否则默认的星级颜色为灰色，以此提示图源设置错误。 + +## 事件 + +除支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)外，还支持如下事件： + + + + + + + + + + + + +

名称

+

参数

+

描述

+

change

+

{ rating: number }

+

评分条的评星发生改变时触发该回调。

+
+ +## 方法 + +支持[通用方法](js-components-common-methods.md#ZH-CN_TOPIC_0000001209252157)。 + +## 示例 + +``` + +
+ + +
+``` + +``` +/* xxx.css */ +.container { + display: flex; + justify-content: center; + align-items: center; +} +rating { + width: 200px; +} +``` + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + changeRating(e){ + prompt.showToast({ + message: e.rating + }); + } +} +``` + +![](figures/zh-cn_image_0000001198670487.png) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-basic-richtext.md b/zh-cn/application-dev/js-reference/component/js-components-basic-richtext.md new file mode 100644 index 0000000000000000000000000000000000000000..e046586e33ee29b2d6ec9d79de2dbcafb6d08350 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-basic-richtext.md @@ -0,0 +1,99 @@ +# richtext + +- [权限列表](#zh-cn_topic_0000001173164701_section11257113618419) +- [属性](#zh-cn_topic_0000001173164701_section2907183951110) +- [样式](#zh-cn_topic_0000001173164701_section5775351116) +- [事件](#zh-cn_topic_0000001173164701_section17878123517511) +- [方法](#zh-cn_topic_0000001173164701_section14703165113610) +- [示例](#zh-cn_topic_0000001173164701_section581819591666) + +富文本组件，用于展示富文本信息。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- 从 API Version 6 开始支持。 +>- 富文本内容需要写在元素标签内。 + +## 权限列表 + +无 + +## 属性 + +仅支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)中的id、style和class属性。 + +## 样式 + +仅支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)中的display和visibility样式。 + +## 事件 + +除支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)外，还支持如下事件： + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

start

+

-

+

开始加载时触发。

+

complete

+

-

+

加载完成时触发。

+
+ +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- 不支持focus、blur、key事件。 +>- 不支持无障碍事件。 +>- 包含richtext的页面返回时richtext显示区域不会跟随页面的转场动效。 +>- richtext内容不建议超过一个屏幕高度，超出部分不会显示。 + +## 方法 + +不支持。 + +## 示例 + +``` + +
+ {{content}} +
+``` + +``` +// xxx.js +export default { + data: { + content: ` +
+ +

h1

+

文本测试(h1测试)

+

h2

+

文本测试(h2测试)

+
+ `, + }, + onLoadStart() { + console.error("start load rich text:" + JSON.stringify()) + }, + onLoadEnd() { + console.error("end load rich text:" + JSON.stringify()) + } +} +``` + diff --git a/zh-cn/application-dev/js-reference/component/js-components-basic-search.md b/zh-cn/application-dev/js-reference/component/js-components-basic-search.md new file mode 100644 index 0000000000000000000000000000000000000000..98dbe2c4858c7afa68c137c70d4b9deef2a5e906 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-basic-search.md @@ -0,0 +1,302 @@ +# search + +- [子组件](#zh-cn_topic_0000001173164773_section9288143101012) +- [属性](#zh-cn_topic_0000001173164773_section2907183951110) +- [样式](#zh-cn_topic_0000001173164773_section5775351116) +- [事件](#zh-cn_topic_0000001173164773_section17878123517511) +- [方法](#zh-cn_topic_0000001173164773_section2279124532420) +- [示例](#zh-cn_topic_0000001173164773_section586520905216) + +提供搜索框组件，用于提供用户搜索内容的输入区域。 + +## 子组件 + +不支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

icon

+

string

+

-

+

否

+

搜索图标，默认使用系统搜索图标，图标格式为svg，jpg和png。

+

hint

+

string

+

-

+

否

+

搜索提示文字。

+

value

+

string

+

-

+

否

+

搜索框搜索文本值。

+

searchbutton5+

+

string

+

-

+

否

+

搜索框末尾搜索按钮文本值。

+

menuoptions5+

+

Array<MenuOption>

+

-

+

否

+

设置文本选择弹框点击更多按钮之后显示的菜单项。

+
+ +**表 1** MenuOption5+ + + + + + + + + + + + + + + + + +

名称

+

类型

+

描述

+

icon

+

string

+

菜单选项中的图标路径。

+

content

+

string

+

菜单选项中的文本内容。

+
+ +## 样式 + +除支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

color

+

<color>

+

#e6000000

+

否

+

搜索框的文本颜色。

+

font-size

+

<length>

+

16px

+

否

+

搜索框的文本尺寸。

+

allow-scale

+

boolean

+

true

+

否

+

搜索框的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

+
说明：

如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。

+
+

placeholder-color

+

<color>

+

#99000000

+

否

+

搜索框的提示文本颜色。

+

font-weight

+

number | string

+

normal

+

否

+

搜索框的字体粗细，见text组件font-weight的样式属性。

+

font-family

+

string

+

sans-serif

+

否

+

搜索框的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

+

caret-color6+

+

<color>

+

-

+

否

+

设置输入光标的颜色。

+
+ +## 事件 + +除支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)外，还支持如下事件： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

change

+

{ text:newText }

+

输入内容发生变化时触发。

+
说明：

改变value属性值不会触发该回调。

+
+

submit

+

{ text:submitText }

+

点击搜索图标、搜索按钮5+或者按下软键盘搜索按钮时触发。

+

translate5+

+

{ value: selectedText }

+

设置此事件后，进行文本选择操作后文本选择弹窗会出现翻译按钮，点击翻译按钮之后，触发该回调，返回选中的文本内容。

+

share5+

+

{ value: selectedText }

+

设置此事件后，进行文本选择操作后文本选择弹窗会出现分享按钮，点击分享按钮之后，触发该回调，返回选中的文本内容。

+

search5+

+

{ value: selectedText }

+

设置此事件后，进行文本选择操作后文本选择弹窗会出现搜索按钮，点击搜索按钮之后，触发该回调，返回选中的文本内容。

+

optionselect5+

+

{ index:optionIndex, value: selectedText }

+

文本选择弹窗中设置menuoptions属性后，用户在文本选择操作后，点击菜单项后触发该回调，返回点击的菜单项序号和选中的文本内容。

+
+ +## 方法 + +支持[通用方法](js-components-common-methods.md#ZH-CN_TOPIC_0000001209252157)。 + +## 示例 + +``` + +
+ + +
+``` + +``` +/* xxx.css */ +.container { + display: flex; + justify-content: center; + align-items: center; +} +``` + +![](figures/zh-cn_image_0000001153427082.png) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-basic-select.md b/zh-cn/application-dev/js-reference/component/js-components-basic-select.md new file mode 100644 index 0000000000000000000000000000000000000000..1d7dc10adf15d418cab9d59c802d55a721c7395e --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-basic-select.md @@ -0,0 +1,115 @@ +# select + +- [权限列表](#zh-cn_topic_0000001173164719_section11257113618419) +- [子组件](#zh-cn_topic_0000001173164719_section9288143101012) +- [属性](#zh-cn_topic_0000001173164719_section2907183951110) +- [样式](#zh-cn_topic_0000001173164719_section648514244510) +- [事件](#zh-cn_topic_0000001173164719_section3892191911214) +- [方法](#zh-cn_topic_0000001173164719_section2279124532420) +- [示例](#zh-cn_topic_0000001173164719_section18261242145416) + +下拉选择按钮，可让用户在多个选项之间选择。 + +## 权限列表 + +无 + +## 子组件 + +支持<[option](js-components-basic-option.md#ZH-CN_TOPIC_0000001209252169)\>。 + +## 属性 + +支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)。 + +## 样式 + +除支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)外，还支持如下样式： + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

font-family

+

string

+

sans-serif

+

否

+

字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

+
+ +## 事件 + +除支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)外，还支持如下事件： + + + + + + + + + + + + +

名称

+

参数

+

描述

+

change

+

{newValue: newValue}

+

下拉选择新值后触发该事件，newValue的值为子组件option的value属性值。

+
+ +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- select组件不支持click事件。 + +## 方法 + +支持[通用方法](js-components-common-methods.md#ZH-CN_TOPIC_0000001209252157)。 + +## 示例 + +``` + +
+ +
+``` + +``` +/* xxx.css */ +.container { + display: flex; + justify-content: center; + align-items: center; +} +``` + +![](figures/zh-cn_image_0000001152588538.png) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-basic-slider.md b/zh-cn/application-dev/js-reference/component/js-components-basic-slider.md new file mode 100644 index 0000000000000000000000000000000000000000..1c99689ec04712d4a0ad8971960c2d83c1e111d7 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-basic-slider.md @@ -0,0 +1,287 @@ +# slider + +- [子组件](#zh-cn_topic_0000001127125056_section9288143101012) +- [属性](#zh-cn_topic_0000001127125056_section2907183951110) +- [样式](#zh-cn_topic_0000001127125056_section5775351116) +- [事件](#zh-cn_topic_0000001127125056_section412849105010) +- [示例](#zh-cn_topic_0000001127125056_section166243517816) + +滑动条组件，用来快速调节设置值，如音量、亮度等。 + +## 子组件 + +不支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

min

+

number

+

0

+

否

+

滑动选择器的最小值。

+

max

+

number

+

100

+

否

+

滑动选择器的最大值。

+

step

+

number

+

1

+

否

+

每次滑动的步长。

+

value

+

number

+

0

+

否

+

滑动选择器的初始值。

+

mode5+

+

string

+

outset

+

否

+

滑动条样式：

+
  • outset：滑块在滑杆上；
  • inset：滑块在滑杆内。
    说明：

    仅手机和平板设备支持。

    +
    +
+

showsteps5+

+

boolean

+

false

+

否

+

是否显示步长标识；

+
说明：

仅手机和平板设备支持。

+
+

showtips5+

+

boolean

+

false

+

否

+

滑动时是否有气泡提示百分比；

+
说明：

仅手机和平板设备支持。

+
+
+ +## 样式 + +除支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

color

+

<color>

+

#19000000

+

否

+

滑动条的背景颜色。

+

selected-color

+

<color>

+

#ff007dff

+

否

+

滑动条的已选择颜色。

+

block-color

+

<color>

+

#ffffff

+

否

+

滑动条的滑块颜色。

+
说明：

仅手机、平板和智慧屏设备支持。

+
+
+ +## 事件 + +除支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)外，还支持如下事件： + + + + + + + + + + + + +

名称

+

参数

+

描述

+

change

+

ChangeEvent

+

选择值发生变化时触发该事件。

+
+ +**表 1** ChangeEvent + + + + + + + + + + + + + + + + + + + + + + + + +

属性

+

类型

+

说明

+

progress(deprecated5+)

+

string

+

当前slider的进度值。

+

isEnd(deprecated5+)

+

string

+

当前slider是否拖拽结束，可选值为：

+
  • true：slider拖拽结束。
  • false：slider拖拽中。
+

value5+

+

number

+

当前slider的进度值。

+

mode5+

+

string

+

当前change事件的类型，可选值为：

+
  • start：slider的值开始改变。
  • move：slider的值跟随手指拖动中。
  • end：slider的值结束改变。
+
+ +## 示例 + +``` + +
+ slider start value is {{startValue}} + slider current value is {{currentValue}} + slider end value is {{endValue}} + +
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; +} +``` + +``` +// xxx.js +export default { + data: { + value: 0, + startValue: 0, + currentValue: 0, + endValue: 0, + }, + setvalue(e) { + if (e.mode == "start") { + this.value = e.value; + this.startValue = e.value; + } else if (e.mode == "move") { + this.value = e.value; + this.currentValue = e.value; + } else if (e.mode == "end") { + this.value = e.value; + this.endValue = e.value; + } + } +} +``` + +![](figures/slider.png) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-basic-span.md b/zh-cn/application-dev/js-reference/component/js-components-basic-span.md new file mode 100644 index 0000000000000000000000000000000000000000..c7b5aa6693fa86182dab60a077326ab2dc452a05 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-basic-span.md @@ -0,0 +1,166 @@ +# span + +- [权限列表](#zh-cn_topic_0000001127284860_section11257113618419) +- [子组件](#zh-cn_topic_0000001127284860_section9288143101012) +- [属性](#zh-cn_topic_0000001127284860_section2907183951110) +- [样式](#zh-cn_topic_0000001127284860_section5775351116) +- [事件](#zh-cn_topic_0000001127284860_section1319514265813) +- [方法](#zh-cn_topic_0000001127284860_section2291124515582) +- [示例](#zh-cn_topic_0000001127284860_section1841815550582) + +作为<[text](js-components-basic-text.md#ZH-CN_TOPIC_0000001163812222)\>子组件提供文本修饰能力。 + +## 权限列表 + +无 + +## 子组件 + +支持子组件。 + +## 属性 + +支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- 不支持focusable和disabled属性。 + +## 样式 + +仅支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

color

+

<color>

+

-

+

否

+

设置文本段落的文本颜色。

+

font-size

+

<length>

+

30px

+

否

+

设置文本段落的文本尺寸。

+

allow-scale

+

boolean

+

true

+

否

+

设置文本段落的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

+
说明：

如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。

+
+

font-style

+

string

+

normal

+

否

+

设置文本段落的字体样式，见text组件font-style的样式属性。

+

font-weight

+

number | string

+

normal

+

否

+

设置文本段落的字体粗细，见text组件font-weight的样式属性。

+

text-decoration

+

string

+

none

+

否

+

设置文本段落的文本修饰，见text组件text-decoration样式属性。

+

font-family

+

string

+

sans-serif

+

否

+

设置文本段落的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

+
+ +## 事件 + +仅支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)中的click事件。 + +## 方法 + +不支持。 + +## 示例 + +``` + +
+ + span + +
+``` + +``` +/* xxx.css */ +.container { + display: flex; + justify-content: center; + align-items: center; +} +.title { + font-size: 30px; + text-align: center; + width: 100%; + height: 100px; +} +.spanTxt{ + color: chartreuse; + font-size: 100px; +} +``` + +![](figures/zh-cn_image_0000001152588626.png) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-basic-switch.md b/zh-cn/application-dev/js-reference/component/js-components-basic-switch.md new file mode 100644 index 0000000000000000000000000000000000000000..f8109167b02b4ae4a8050330bda5534ce08379b1 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-basic-switch.md @@ -0,0 +1,269 @@ +# switch + +- [权限列表](#zh-cn_topic_0000001127125072_section11257113618419) +- [子组件](#zh-cn_topic_0000001127125072_section9288143101012) +- [属性](#zh-cn_topic_0000001127125072_section2907183951110) +- [样式](#zh-cn_topic_0000001127125072_section5775351116) +- [事件](#zh-cn_topic_0000001127125072_section1042893411015) +- [方法](#zh-cn_topic_0000001127125072_section2279124532420) +- [示例](#zh-cn_topic_0000001127125072_section1149419101412) + +开关选择器，通过开关，开启或关闭某个功能。 + +## 权限列表 + +无 + +## 子组件 + +不支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

checked

+

boolean

+

false

+

否

+

是否选中。

+

showtext

+

boolean

+

false

+

否

+

是否显示文本。

+

texton

+

string

+

"On"

+

否

+

选中时显示的文本。

+

textoff

+

string

+

"Off"

+

否

+

未选中时显示的文本。

+
+ +## 样式 + +除支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

texton-color(Rich)

+

<color>

+

#000000

+

否

+

选中时显示的文本颜色。

+

textoff-color(Rich)

+

<color>

+

#000000

+

否

+

未选中时显示的文本颜色。

+

text-padding(Rich)

+

number

+

0px

+

否

+

texton/textoff中最长文本两侧距离滑块边界的距离。

+

font-size(Rich)

+

<length>

+

-

+

否

+

文本尺寸，仅设置texton和textoff生效。

+

allow-scale(Rich)

+

boolean

+

true

+

否

+

文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

+
说明：

如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。

+
+

font-style(Rich)

+

string

+

normal

+

否

+

字体样式，仅设置texton和textoff生效。见text组件font-style的样式属性。

+

font-weight(Rich)

+

number | string

+

normal

+

否

+

字体粗细，仅设置texton和textoff生效。见text组件的font-weight的样式属性。

+

font-family(Rich)

+

string

+

sans-serif

+

否

+

字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。仅设置texton和textoff生效。

+
+ +## 事件 + +除支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)外，还支持如下事件： + + + + + + + + + + + + +

名称

+

参数

+

描述

+

change

+

{ checked: checkedValue }

+

选中状态改变时触发该事件。

+
+ +## 方法 + +支持[通用方法](js-components-common-methods.md#ZH-CN_TOPIC_0000001209252157)。 + +## 示例 + +``` + +
+ + +
+``` + +``` +/* xxx.css */ +.container { + display: flex; + justify-content: center; + align-items: center; +} +switch{ + texton-color:#002aff; + textoff-color:silver; + text-padding:20px; +} +``` + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + data: { + title: 'World' + }, + switchChange(e){ + console.log(e.checked); + if(e.checked){ + prompt.showToast({ + message: "打开开关" + }); + }else{ + prompt.showToast({ + message: "关闭开关" + }); + } + } +} +``` + +![](figures/zh-cn_image_0000001152862510.gif) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-basic-text.md b/zh-cn/application-dev/js-reference/component/js-components-basic-text.md new file mode 100644 index 0000000000000000000000000000000000000000..07a83eb1d1aee2123f254eb276500c502c9ab8e9 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-basic-text.md @@ -0,0 +1,363 @@ +# text + +- [权限列表](#zh-cn_topic_0000001127125018_section11257113618419) +- [子组件](#zh-cn_topic_0000001127125018_section9288143101012) +- [属性](#zh-cn_topic_0000001127125018_section2907183951110) +- [样式](#zh-cn_topic_0000001127125018_section5775351116) +- [事件](#zh-cn_topic_0000001127125018_section1948820711216) +- [方法](#zh-cn_topic_0000001127125018_section2279124532420) +- [示例](#zh-cn_topic_0000001127125018_section13294026042) + +文本，用于呈现一段信息。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>文本的展示内容需要写在元素标签内。 + +## 权限列表 + +无 + +## 子组件 + +支持<[span](js-components-basic-span.md#ZH-CN_TOPIC_0000001209210711)\>。 + +## 属性 + +支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)。 + +## 样式 + +除支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

color

+

<color>

+

#e5000000

+

否

+

设置文本的颜色。

+

font-size

+

<length>

+

30px

+

否

+

设置文本的尺寸。

+

allow-scale

+

boolean

+

true

+

否

+

文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

+
说明：

如果需要支持动态生效，请参看config描述文件中config-changes标签。

+
+

letter-spacing

+

<length>

+

0px

+

否

+

设置文本的字符间距。

+

word-spacing7+

+

<length> | <percentage> | string

+

normal

+

否

+

设置文本之间的间距，string可选值为：

+

normal：默认的字间距。

+

font-style

+

string

+

normal

+

否

+

设置文本的字体样式，可选值为：

+
  • normal：标准的字体样式；
  • italic：斜体的字体样式。
+

font-weight

+

number | string

+

normal

+

否

+

设置文本的字体粗细，number类型取值[100, 900]，默认为400，取值越大，字体越粗。

+
说明：

number取值必须为100的整数倍。

+
+

string类型取值支持如下四个值：lighter、normal、bold、bolder。

+

text-decoration

+

string

+

none

+

否

+

设置文本的文本修饰，可选值为：

+
  • underline：文字下划线修饰；
  • line-through：穿过文本的修饰线n
  • none：标准文本。
+

text-decoration-color7+

+

<color>

+

-

+

否

+

设置文本修饰线的颜色。

+

text-align

+

string

+

start

+

否

+

设置文本的文本对齐方式，可选值为：

+
  • left：文本左对齐；
  • center：文本居中对齐；
  • right：文本右对齐；
  • start：根据文字书写相同的方向对齐；
  • end：根据文字书写相反的方向对齐。
+
说明：

如文本宽度未指定大小，文本的宽度和父容器的宽度大小相等的情况下，对齐效果可能会不明显。

+
+

line-height

+

<length> | <percentage>7+ | string7+

+

0px1-6

+

normal7+

+

否

+

设置文本的文本行高，设置为0px时，不限制文本行高，自适应字体大小。string可选值为：

+

normal7+：默认的行高。

+

text-overflow

+

string

+

clip

+

否

+

在设置了最大行数的情况下生效，可选值为：

+
  • clip：将文本根据父容器大小进行裁剪显示；
  • ellipsis：根据父容器大小显示，显示不下的文本用省略号代替。需配合max-lines使用。
+

font-family

+

string

+

sans-serif

+

否

+

设置文本的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

+

max-lines

+

number | string7+

+

-

+

否

+

设置文本的最大行数，string类型可选值为：

+
  • auto7+：文本行数自适应容器高度。
+

min-font-size

+

<length>

+

-

+

否

+

文本最小字号，需要和文本最大字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。

+

max-font-size

+

<length>

+

-

+

否

+

文本最大字号，需要和文本最小字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。

+

font-size-step

+

<length>

+

1px

+

否

+

文本动态调整字号时的步长，需要设置最小，最大字号样式生效。

+

prefer-font-sizes

+

<array>

+

-

+

否

+

预设的字号集合，在动态尺寸调整时，优先使用预设字号集合中的字号匹配设置的最大行数，如果预设字号集合未设置，则使用最大最小和步长调整字号。针对仍然无法满足最大行数要求的情况，使用text-overflow设置项进行截断，设置预设尺寸集后，font-size、max-font-size、min-font-size和font-size-step不生效。

+

如：prefer-font-sizes: 12px,14px,16px

+

word-break6+

+

string

+

normal

+

否

+

设置文本折行模式，可选值为：

+
  • normal：默认换行规则，依据各自语言的规则，允许在字间发生换行。
  • break-all：对于非中文/日文/韩文的文本，可在任意字符间断行。
  • break-word：与break-all相同，不同的地方在于它要求一个没有断行破发点的词必须保持为一个整体单位。
+

text-indent7+

+

<length>

+

-

+

否

+

设置首行缩进量。

+

white-space7+

+

string

+

pre

+

否

+

设置处理元素中空白的模式，可选值为：

+
  • normal：所有空格、回车、制表符都合并成一个空格，文本自动换行；
  • nowrap：所有空格、回车、制表符都合并成一个空格，文本不换行；
  • pre：所有东西原样输出，文本不换行；
  • pre-wrap：所有东西原样输出，文本换行；
  • pre-line：所有空格、制表符合并成一个空格，回车不变，文本换行。
+

adapt-height7+

+

boolean

+

false

+

否

+

文本大小是否自适应容器高度。

+
说明：

设置字体大小自适应相关样式后生效。

+
+
+ +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- 字体动态缩放：预设尺寸集合和最小最大字号调节基于是否满足最大行数要求，预设尺寸集合会按照从左到右顺序查看是否满足最大行数要求，最小最大字号调节则基于从大到小顺序查看是否满足最大行数要求。 +>- 文本换行：文本可以通过转义字符\\r\\n进行换行。 +>- 文本标签内支持以下转义字符：\\a，\\b，\\f，\\n，\\r，\\t，\\v，\\'，\\"，\\0。 +>- 当使用子组件span组成文本段落时，如果span属性样式异常，将导致text段落无法显示。 +>- letter-spacing、text-align、line-height、text-overflow和max-lines样式作用于text及其子组件（span）组成的文本内容。 +>- text组件说明：不支持text内同时存在文本内容和span子组件。（如果同时存在，只显示span内的内容\) + +## 事件 + +支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)。 + +## 方法 + +支持[通用方法](js-components-common-methods.md#ZH-CN_TOPIC_0000001209252157)。 + +## 示例 + +``` + +
+ + Hello {{ title }} + +
+``` + +``` +/* xxx.css */ +.container { + display: flex; + justify-content: center; + align-items: center; +} + +.title { + font-size: 60px; + text-align: center; + width: 200px; + height: 200px; +} +``` + +``` +// xxx.js +export default { + data: { + title: 'World' + } +} +``` + +![](figures/zh-cn_image_0000001152748606.png) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-basic-textarea.md b/zh-cn/application-dev/js-reference/component/js-components-basic-textarea.md new file mode 100644 index 0000000000000000000000000000000000000000..63fb44b4cfa2b0646142125bdfd9a9bfe0f58de3 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-basic-textarea.md @@ -0,0 +1,381 @@ +# textarea + +- [权限列表](#zh-cn_topic_0000001173324595_section11257113618419) +- [子组件](#zh-cn_topic_0000001173324595_section9288143101012) +- [属性](#zh-cn_topic_0000001173324595_section2907183951110) +- [样式](#zh-cn_topic_0000001173324595_section182794053) +- [事件](#zh-cn_topic_0000001173324595_section3892191911214) +- [方法](#zh-cn_topic_0000001173324595_section47669296127) +- [示例](#zh-cn_topic_0000001173324595_section1224516501541) + +多行文本输入的文本框。 + +## 权限列表 + +无 + +## 子组件 + +不支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

placeholder

+

string

+

-

+

否

+

多行文本框的提示文本内容。

+

maxlength

+

number

+

-

+

否

+

多行文本框可输入的最多字符数量。

+

headericon

+

string

+

-

+

否

+

在文本输入前的图标展示，该图标不支持点击事件，图标格式为jpg，png和svg。

+

extend

+

boolean

+

false

+

否

+

文本框是否支持可扩展，设置可扩展属性后文本框高度可以跟随文字自适应。

+

value5+

+

string

+

-

+

否

+

多行文本框的内容。

+

showcounter5+

+

boolean

+

false

+

否

+

文本框是否需要开启计数下标功能，需要配合maxlength一起使用。

+

menuoptions5+

+

Array<MenuOption>

+

-

+

否

+

设置文本选择弹框点击更多按钮之后显示的菜单项。

+

autofocus6+

+

boolean

+

false

+

否

+

是否自动获焦。

+

selectedstart6+

+

number

+

-1

+

否

+

开始选择文本时初始选择位置。

+

selectedend6+

+

number

+

-1

+

否

+

开始选择文本时结尾选择位置。

+

softkeyboardenabled6+

+

boolean

+

true

+

否

+

编辑时是否弹出系统软键盘。

+
+ +**表 1** MenuOption5+ + + + + + + + + + + + + + + + + +

名称

+

类型

+

描述

+

icon

+

string

+

菜单选项中的图标路径。

+

content

+

string

+

菜单选项中的文本内容。

+
+ +## 样式 + +除支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

color

+

<color>

+

#e6000000

+

否

+

多行文本框的文本颜色。

+

font-size

+

<length>

+

16px

+

否

+

多行文本框的文本尺寸。

+

allow-scale

+

boolean

+

true

+

否

+

多行文本框的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

+
说明：

如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。

+
+

placeholder-color

+

<color>

+

#99000000

+

否

+

多行文本框的提示文本颜色，type为text|email|date|time|number|password时生效。

+

font-weight

+

number | string

+

normal

+

否

+

多行文本框的字体粗细，见text组件font-weight的样式属性。

+

font-family

+

string

+

sans-serif

+

否

+

多行文本框的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

+

caret-color6+

+

<color>

+

-

+

否

+

设置输入光标的颜色。

+
+ +## 事件 + +除支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)外，还支持如下事件： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

change

+

{ text: newText, lines: textLines, height: textHeight }

+

输入内容发生变化时触发该事件，通过参数获取输入内容、行数和行高。

+
说明：

改变value属性值不会触发该回调。5+

+
+

translate5+

+

{ value: selectedText }

+

设置此事件后，进行文本选择操作后文本选择弹窗会出现翻译按钮，点击翻译按钮之后，触发该回调，返回选中的文本内容。

+

share5+

+

{ value: selectedText }

+

设置此事件后，进行文本选择操作后文本选择弹窗会出现分享按钮，点击分享按钮之后，触发该回调，返回选中的文本内容。

+

search5+

+

{ value: selectedText }

+

设置此事件后，进行文本选择操作后文本选择弹窗会出现搜索按钮，点击搜索按钮之后，触发该回调，返回选中的文本内容。

+

optionselect5+

+

{ index:optionIndex, value: selectedText }

+

文本选择弹窗中设置menuoptions属性后，用户在文本选择操作后，点击菜单项后触发该回调，返回点击的菜单项序号和选中的文本内容。

+

selectchange6+

+

{ start: number，end: number }

+

文本选择变化时触发事件。

+
+ +## 方法 + +支持[通用方法](js-components-common-methods.md#ZH-CN_TOPIC_0000001209252157)。 + +## 示例 + +``` + + +``` + +``` +/* xxx.css */ +.textarea { + placeholder-color: gray; +} +``` + +``` +// xxx.js +change(e){ + prompt.showToast({ + message: 'value: ' + e.text + ', lines: ' + e.lines + ', height: ' + e.height, + duration: 3000, + }); +} +``` + +![](figures/zh-cn_image_0000001127125124.png) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-basic-toggle.md b/zh-cn/application-dev/js-reference/component/js-components-basic-toggle.md new file mode 100644 index 0000000000000000000000000000000000000000..e6c176b606a0da7ba84fc03c59add54b5c99b303 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-basic-toggle.md @@ -0,0 +1,240 @@ +# toggle + +- [权限列表](#zh-cn_topic_0000001127125082_section11257113618419) +- [子组件](#zh-cn_topic_0000001127125082_section9288143101012) +- [属性](#zh-cn_topic_0000001127125082_section2598341175212) +- [样式](#zh-cn_topic_0000001127125082_section3655917541) +- [事件](#zh-cn_topic_0000001127125082_section3892191911214) +- [方法](#zh-cn_topic_0000001127125082_section2279124532420) +- [示例](#zh-cn_topic_0000001127125082_section520313404174) + +状态按钮用于从一组选项中进行选择，并可能在界面上实时显示选择后的结果。通常这一组选项都是由状态按钮构成。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从 API Version 5 开始支持。 + +## 权限列表 + +无 + +## 子组件 + +不支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

value

+

string

+

-

+

是

+

状态按钮的文本值。

+

checked

+

boolean

+

false

+

否

+

状态按钮是否被选中。

+
+ +## 样式 + +除支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

color

+

<color>

+

#E5000000

+

否

+

状态按钮的文本颜色。

+

font-size

+

<length>

+

16px

+

否

+

状态按钮的文本尺寸。

+

allow-scale

+

boolean

+

true

+

否

+

状态按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

+
说明：

如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。

+
+

font-style

+

string

+

normal

+

否

+

状态按钮的字体样式。

+

font-weight

+

number | string

+

normal

+

否

+

状态按钮的字体粗细。见text组件font-weight的样式属性。

+

font-family

+

<string>

+

sans-serif

+

否

+

状态按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

+
+ +## 事件 + +除支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)外，还支持如下事件： + + + + + + + + + + + + +

名称

+

参数

+

描述

+

change

+

{ checked：isChecked }

+

组件选中状态发生变化时触发。

+
+ +## 方法 + +支持[通用方法](js-components-common-methods.md#ZH-CN_TOPIC_0000001209252157)。 + +## 示例 + +``` + +
+ 1. Multiple choice example +
+ {{$item}} +
+ 2. Single choice example +
+ +
+
+``` + +``` +/* xxx.css */ +.margin { + margin: 7px; +} +``` + +``` +// xxx.js +export default { + data: { + toggle_list: [ + { "id":"1001", "name":"Living room", "checked":true }, + { "id":"1002", "name":"Bedroom", "checked":false }, + { "id":"1003", "name":"Second bedroom", "checked":false }, + { "id":"1004", "name":"Kitchen", "checked":false }, + { "id":"1005", "name":"Study", "checked":false }, + { "id":"1006", "name":"Garden", "checked":false }, + { "id":"1007", "name":"Bathroom", "checked":false }, + { "id":"1008", "name":"Balcony", "checked":false }, + ], + toggles: ["Living room","Bedroom","Kitchen","Study"], + idx: "" + }, + allclick(arg) { + this.idx = arg + }, + allchange(e) { + if (e.checked === true) { + for (var i = 0; i < this.toggle_list.length; i++) { + if (this.toggle_list[i].id === this.idx) { + this.toggle_list[i].checked = true + } else { + this.toggle_list[i].checked = false + } + } + } + } +} +``` + +![](figures/screenshot.png) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-basic-toolbar-item.md b/zh-cn/application-dev/js-reference/component/js-components-basic-toolbar-item.md new file mode 100644 index 0000000000000000000000000000000000000000..8b026fc43593b7aaedf341f93b51489d879925e9 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-basic-toolbar-item.md @@ -0,0 +1,294 @@ +# toolbar-item + +- [子组件](#zh-cn_topic_0000001127125080_section9288143101012) +- [属性](#zh-cn_topic_0000001127125080_section19217161499) +- [样式](#zh-cn_topic_0000001127125080_section184493015533) +- [事件](#zh-cn_topic_0000001127125080_section571865310552) +- [方法](#zh-cn_topic_0000001127125080_section568225514199) +- [示例](#zh-cn_topic_0000001127125080_section1240714821316) + +工具栏子组件。作为工具栏组件的子组件，用于展示工具栏上的一个操作选项。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 5 开始支持。 + +## 子组件 + +无 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

value

+

string

+

-

+

是

+

该操作项文本内容。

+

icon

+

string

+

-

+

是

+

该操作项图标资源路径，该图标展示在选项文本上，支持本地路径，格式为png，jpg和svg。

+
+ +## 样式 + +仅支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

color

+

<color>

+

#e6000000

+

否

+

文本颜色。

+

font-size

+

<length>

+

16px

+

否

+

文本大小。

+

allow-scale

+

boolean

+

true

+

否

+

文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

+

font-style

+

string

+

normal

+

否

+

文本字体样式，可选值为：

+
  1. normal: 标准的字体样式；
  2. italic: 斜体的字体样式。
+

font-weight

+

number|string

+

normal

+

否

+

文本字体粗细，number类型取值[100, 900]的整数（被100整除），默认为400，取值越大，字体越粗。string类型取值为：lighter、normal、bold、bolder。

+

text-decoration

+

string

+

none

+

否

+

文本修饰，可选值为：

+
  1. underline: 文本下划线修饰；
  2. line-through: 穿过文本的修饰线；
  3. none: 标准文本。
+

font-family

+

string

+

sans-serif

+

否

+

字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

+

background

+

<linear-gradient>

+

-

+

否

+

仅支持设置渐变样式，与background-color、background-image不兼容。

+

background-color

+

<color>

+

-

+

否

+

设置背景颜色。

+

background-image

+

string

+

-

+

否

+

设置背景图片。与background-color、background不兼容；支持网络图片资源和本地图片资源地址。

+

background-size

+
  • string
  • <length> <length>
  • <percentage> <percentage>
+

auto

+

否

+

设置背景图片的大小。

+
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    +
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    +
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    +
+

background-repeat

+

string

+

repeat

+

否

+

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

+
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
+

background-position

+
  • string string
  • <length> <length>
  • <percentage> <percentage>
+

0px 0px

+

否

+
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    +
+
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>。
+

opacity

+

number

+

1

+

否

+

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

+

display

+

string

+

+

flex

+

否

+

确定一个元素所产生的框的类型，可选值为：

+
  • flex：弹性布局。
  • none：不渲染此元素。
+

visibility

+

string

+

+

visible

+

否

+

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

+
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
+
说明：

visibility和display样式都设置时，仅display生效。

+
+
+ +## 事件 + +支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)。 + +## 方法 + +不支持。 + +## 示例 + +``` + + + + + + + + +``` + +![](figures/000000.jpg) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-basic-toolbar.md b/zh-cn/application-dev/js-reference/component/js-components-basic-toolbar.md new file mode 100644 index 0000000000000000000000000000000000000000..b2f4d1c6820f89be5f2824d704614bf5657bb3e8 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-basic-toolbar.md @@ -0,0 +1,49 @@ +# toolbar + +- [权限列表](#zh-cn_topic_0000001173324631_section11257113618419) +- [子组件](#zh-cn_topic_0000001173324631_section172027510456) +- [属性](#zh-cn_topic_0000001173324631_section153601034618) +- [样式](#zh-cn_topic_0000001173324631_section1889052254711) +- [事件](#zh-cn_topic_0000001173324631_section104349151916) +- [方法](#zh-cn_topic_0000001173324631_section568225514199) +- [示例](#zh-cn_topic_0000001173324631_section1597982719103) + +工具栏。放在界面底部，用于展示针对当前界面的操作选项。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 5 开始支持。 + +## 权限列表 + +无 + +## 子组件 + +支持子组件。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>工具栏最多可以展示5个toolbar-item子组件，如果存在6个及以上toolbar-item子组件，则保留前面4个子组件，后续的子组件收纳到工具栏上的更多项中，通过点击更多项弹窗展示剩下的子组件，更多项展示的组件样式采用系统默认样式，toolbar-item上设置的自定义样式不生效。 + +## 属性 + +支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)。 + +## 样式 + +支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- 不支持height样式，高度固定为56px。 + +## 事件 + +不支持。 + +## 方法 + +不支持。 + +## 示例 + +详见[toolbar-item示例](js-components-basic-toolbar-item.md#ZH-CN_TOPIC_0000001209252173)。 + diff --git a/zh-cn/application-dev/js-reference/component/js-components-basic.md b/zh-cn/application-dev/js-reference/component/js-components-basic.md new file mode 100644 index 0000000000000000000000000000000000000000..c427e1ab658ff0a5ef91c3c290144313c07a0d84 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-basic.md @@ -0,0 +1,57 @@ +# 基础组件 + +- **[button](js-components-basic-button.md)** + +- **[chart](js-components-basic-chart.md)** + +- **[divider](js-components-basic-divider.md)** + +- **[image](js-components-basic-image.md)** + +- **[image-animator](js-components-basic-image-animator.md)** + +- **[input](js-components-basic-input.md)** + +- **[label](js-components-basic-label.md)** + +- **[marquee](js-components-basic-marquee.md)** + +- **[menu](js-components-basic-menu.md)** + +- **[option](js-components-basic-option.md)** + +- **[picker](js-components-basic-picker.md)** + +- **[picker-view](js-components-basic-picker-view.md)** + +- **[piece](js-components-basic-piece.md)** + +- **[progress](js-components-basic-progress.md)** + +- **[qrcode](js-components-basic-qrcode.md)** + +- **[rating](js-components-basic-rating.md)** + +- **[richtext](js-components-basic-richtext.md)** + +- **[search](js-components-basic-search.md)** + +- **[select](js-components-basic-select.md)** + +- **[slider](js-components-basic-slider.md)** + +- **[span](js-components-basic-span.md)** + +- **[switch](js-components-basic-switch.md)** + +- **[text](js-components-basic-text.md)** + +- **[textarea](js-components-basic-textarea.md)** + +- **[toolbar](js-components-basic-toolbar.md)** + +- **[toolbar-item](js-components-basic-toolbar-item.md)** + +- **[toggle](js-components-basic-toggle.md)** + + diff --git a/zh-cn/application-dev/js-reference/component/js-components-canvas-canvas.md b/zh-cn/application-dev/js-reference/component/js-components-canvas-canvas.md new file mode 100644 index 0000000000000000000000000000000000000000..32ecd5ccae30cc712e9bfab917996804dfd35dd7 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-canvas-canvas.md @@ -0,0 +1,90 @@ +# canvas组件 + +- [权限列表](#zh-cn_topic_0000001127284886_section11257113618419) +- [子组件](#zh-cn_topic_0000001127284886_section9288143101012) +- [属性](#zh-cn_topic_0000001127284886_section2907183951110) +- [样式](#zh-cn_topic_0000001127284886_section5775351116) +- [事件](#zh-cn_topic_0000001127284886_section1729055142211) +- [方法](#zh-cn_topic_0000001127284886_section47669296127) +- [示例](#zh-cn_topic_0000001127284886_section42931433142318) + +提供画布组件。用于自定义绘制图形。 + +## 权限列表 + +无 + +## 子组件 + +不支持。 + +## 属性 + +支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)。 + +## 样式 + +支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)。 + +## 事件 + +支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)。 + +## 方法 + +除支持[通用方法](js-components-common-methods.md#ZH-CN_TOPIC_0000001209252157)外，还支持如下方法： + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

getContext

+

getContext ( type: '2d', attributes6+: { antialias: boolean } ) => CanvasRendering2dContext

+

调用方法如下两种6+：

+

var ctx = canvas.getContext(contextType);

+

var ctx = canvas.getContext(contextType, contextAttributes);

+

其中contextType为必填项，当前仅支持"2d"，contextAttributes为可选参数，当前仅支持配置是否开启抗锯齿功能，默认为关闭。

+

获取canvas绘图上下文，参数仅支持“2d”，返回值为2D绘制对象，该对象提供具体的2D绘制操作。详见CanvasRenderingContext2D对象章节。

+

不支持在onInit和onReady中进行调用。

+

toDataURL6+

+

string type, number encoderOptions

+

生成一个包含图片展示的URL。

+
  • type：可选参数，用于指定图像格式，默认格式为image/png。
  • encoderOptions：在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。
+
+ +## 示例 + +``` + +
+ + +
+``` + +``` +// xxx.js +export default { + handleClick() { + const el = this.$refs.canvas1; + var dataURL = el.toDataURL(); + console.log(dataURL); + // "data:image/png;base64,xxxxxxxx..." + } +} +``` + diff --git "a/zh-cn/application-dev/js-reference/CanvasGradient\345\257\271\350\261\241.md" b/zh-cn/application-dev/js-reference/component/js-components-canvas-canvasgradient.md old mode 100755 new mode 100644 similarity index 32% rename from "zh-cn/application-dev/js-reference/CanvasGradient\345\257\271\350\261\241.md" rename to zh-cn/application-dev/js-reference/component/js-components-canvas-canvasgradient.md index 813eb36f1f42c545343da24b95cc84b345fe983a..0b12b625b2e2faaee6fd315f0ec630eac87b0a6b --- "a/zh-cn/application-dev/js-reference/CanvasGradient\345\257\271\350\261\241.md" +++ b/zh-cn/application-dev/js-reference/component/js-components-canvas-canvasgradient.md @@ -1,36 +1,36 @@ -# CanvasGradient对象 +# CanvasGradient对象 -- [addColorStop\(\)](#zh-cn_topic_0000001058460513_section12691015917) +- [addColorStop\(\)](#zh-cn_topic_0000001173164733_section12691015917) 渐变对象。 -## addColorStop\(\) +## addColorStop\(\) 设置渐变断点值，包括偏移和颜色。 - 参数 - -

参数

+ + - - - - - - - - @@ -48,4 +48,6 @@ gradient.addColorStop(1,'#ffff00'); ``` + ![](figures/zh-cn_image_0000001152610806.png) + diff --git "a/zh-cn/application-dev/js-reference/CanvasRenderingContext2D\345\257\271\350\261\241.md" b/zh-cn/application-dev/js-reference/component/js-components-canvas-canvasrenderingcontext2d.md old mode 100755 new mode 100644 similarity index 32% rename from "zh-cn/application-dev/js-reference/CanvasRenderingContext2D\345\257\271\350\261\241.md" rename to zh-cn/application-dev/js-reference/component/js-components-canvas-canvasrenderingcontext2d.md index 63cfe7c51b06a0036d5e6928b927ee396eb1ea42..f92ded8931135d26bd3fa4961eeb9f47f47eca45 --- "a/zh-cn/application-dev/js-reference/CanvasRenderingContext2D\345\257\271\350\261\241.md" +++ b/zh-cn/application-dev/js-reference/component/js-components-canvas-canvasrenderingcontext2d.md @@ -1,54 +1,59 @@ -# CanvasRenderingContext2D对象 - -- [fillRect\(\)](#zh-cn_topic_0000001058830807_section16678142165920) -- [fillStyle](#zh-cn_topic_0000001058830807_section159395553313) -- [clearRect\(\)](#zh-cn_topic_0000001058830807_section205940367194) -- [strokeRect\(\)](#zh-cn_topic_0000001058830807_section18427819195711) -- [fillText\(\)](#zh-cn_topic_0000001058830807_section114524106587) -- [strokeText\(\)](#zh-cn_topic_0000001058830807_section4144191355810) -- [measureText\(\)](#zh-cn_topic_0000001058830807_section378313153588) -- [lineWidth](#zh-cn_topic_0000001058830807_section652391716583) -- [strokeStyle](#zh-cn_topic_0000001058830807_section1191517562337) -- [stroke\(\)](#zh-cn_topic_0000001058830807_section1071523411019) -- [beginPath\(\)](#zh-cn_topic_0000001058830807_section12670134392) -- [moveTo\(\)](#zh-cn_topic_0000001058830807_section16813157310) -- [lineTo\(\)](#zh-cn_topic_0000001058830807_section4767915838) -- [closePath\(\)](#zh-cn_topic_0000001058830807_section86825473917) -- [lineCap](#zh-cn_topic_0000001058830807_section6852133718410) -- [lineJoin](#zh-cn_topic_0000001058830807_section395812401442) -- [miterLimit](#zh-cn_topic_0000001058830807_section429711421945) -- [font](#zh-cn_topic_0000001058830807_section17597332121110) -- [textAlign](#zh-cn_topic_0000001058830807_section15681153321114) -- [textBaseline](#zh-cn_topic_0000001058830807_section77981136141111) -- [createPattern\(\)](#zh-cn_topic_0000001058830807_section1034582183919) -- [bezierCurveTo\(\)](#zh-cn_topic_0000001058830807_section450521614318) -- [quadraticCurveTo\(\)](#zh-cn_topic_0000001058830807_section12938183173) -- [arc\(\)](#zh-cn_topic_0000001058830807_section102329511716) -- [arcTo\(\)](#zh-cn_topic_0000001058830807_section3172156571) -- [rect\(\)](#zh-cn_topic_0000001058830807_section1351519304107) -- [fill\(\)](#zh-cn_topic_0000001058830807_section14842031151015) -- [clip\(\)](#zh-cn_topic_0000001058830807_section1355171921416) -- [rotate\(\)](#zh-cn_topic_0000001058830807_section7682182091419) -- [scale\(\)](#zh-cn_topic_0000001058830807_section157714218144) -- [transform\(\)](#zh-cn_topic_0000001058830807_section1675964717570) -- [setTransform\(\)](#zh-cn_topic_0000001058830807_section1439382216440) -- [translate\(\)](#zh-cn_topic_0000001058830807_section931011253449) -- [globalAlpha](#zh-cn_topic_0000001058830807_section188252174810) -- [drawImage\(\)](#zh-cn_topic_0000001058830807_section1953117410488) -- [restore\(\)](#zh-cn_topic_0000001058830807_section64027684817) -- [save\(\)](#zh-cn_topic_0000001058830807_section410672635214) -- [createLinearGradient\(\)6+](#zh-cn_topic_0000001058830807_section1696310905) -- [createImageData\(\)](#zh-cn_topic_0000001058830807_section2021142714524) -- [getImageData\(\)](#zh-cn_topic_0000001058830807_section92731528205217) -- [putImageData\(\)](#zh-cn_topic_0000001058830807_section15774154925515) -- [setLineDash\(\)](#zh-cn_topic_0000001058830807_section1934985155516) -- [getLineDash\(\)](#zh-cn_topic_0000001058830807_section522105285519) -- [lineDashOffset](#zh-cn_topic_0000001058830807_section8283548889) -- [globalCompositeOperation](#zh-cn_topic_0000001058830807_section123871750284) -- [shadowBlur](#zh-cn_topic_0000001058830807_section6207051888) -- [shadowColor](#zh-cn_topic_0000001058830807_section42724396120) -- [shadowOffsetX](#zh-cn_topic_0000001058830807_section1616174021219) -- [shadowOffsetY](#zh-cn_topic_0000001058830807_section272013417128) +# CanvasRenderingContext2D对象 + +- [fillRect\(\)](#zh-cn_topic_0000001173164707_section16678142165920) +- [fillStyle](#zh-cn_topic_0000001173164707_section159395553313) +- [clearRect\(\)](#zh-cn_topic_0000001173164707_section205940367194) +- [strokeRect\(\)](#zh-cn_topic_0000001173164707_section18427819195711) +- [fillText\(\)](#zh-cn_topic_0000001173164707_section114524106587) +- [strokeText\(\)](#zh-cn_topic_0000001173164707_section4144191355810) +- [measureText\(\)](#zh-cn_topic_0000001173164707_section378313153588) +- [lineWidth](#zh-cn_topic_0000001173164707_section652391716583) +- [strokeStyle](#zh-cn_topic_0000001173164707_section1191517562337) +- [stroke\(\)](#zh-cn_topic_0000001173164707_section1071523411019) +- [beginPath\(\)](#zh-cn_topic_0000001173164707_section12670134392) +- [moveTo\(\)](#zh-cn_topic_0000001173164707_section16813157310) +- [lineTo\(\)](#zh-cn_topic_0000001173164707_section4767915838) +- [closePath\(\)](#zh-cn_topic_0000001173164707_section86825473917) +- [lineCap](#zh-cn_topic_0000001173164707_section6852133718410) +- [lineJoin](#zh-cn_topic_0000001173164707_section395812401442) +- [miterLimit](#zh-cn_topic_0000001173164707_section429711421945) +- [font](#zh-cn_topic_0000001173164707_section17597332121110) +- [textAlign](#zh-cn_topic_0000001173164707_section15681153321114) +- [textBaseline](#zh-cn_topic_0000001173164707_section77981136141111) +- [createPattern\(\)](#zh-cn_topic_0000001173164707_section1034582183919) +- [bezierCurveTo\(\)](#zh-cn_topic_0000001173164707_section450521614318) +- [quadraticCurveTo\(\)](#zh-cn_topic_0000001173164707_section12938183173) +- [arc\(\)](#zh-cn_topic_0000001173164707_section102329511716) +- [arcTo\(\)](#zh-cn_topic_0000001173164707_section3172156571) +- [ellipse\(\)6+](#zh-cn_topic_0000001173164707_section918313239192) +- [rect\(\)](#zh-cn_topic_0000001173164707_section1351519304107) +- [fill\(\)](#zh-cn_topic_0000001173164707_section14842031151015) +- [clip\(\)](#zh-cn_topic_0000001173164707_section1355171921416) +- [rotate\(\)](#zh-cn_topic_0000001173164707_section7682182091419) +- [scale\(\)](#zh-cn_topic_0000001173164707_section157714218144) +- [transform\(\)](#zh-cn_topic_0000001173164707_section1675964717570) +- [setTransform\(\)](#zh-cn_topic_0000001173164707_section1439382216440) +- [translate\(\)](#zh-cn_topic_0000001173164707_section931011253449) +- [createPath2D\(\)6+](#zh-cn_topic_0000001173164707_section6654994314) +- [globalAlpha](#zh-cn_topic_0000001173164707_section188252174810) +- [drawImage\(\)](#zh-cn_topic_0000001173164707_section1953117410488) +- [restore\(\)](#zh-cn_topic_0000001173164707_section64027684817) +- [save\(\)](#zh-cn_topic_0000001173164707_section410672635214) +- [createLinearGradient\(\)6+](#zh-cn_topic_0000001173164707_section1696310905) +- [createRadialGradient\(\)6+](#zh-cn_topic_0000001173164707_section121861417143711) +- [createImageData\(\)](#zh-cn_topic_0000001173164707_section2021142714524) +- [getImageData\(\)](#zh-cn_topic_0000001173164707_section92731528205217) +- [putImageData\(\)](#zh-cn_topic_0000001173164707_section15774154925515) +- [setLineDash\(\)](#zh-cn_topic_0000001173164707_section1934985155516) +- [getLineDash\(\)](#zh-cn_topic_0000001173164707_section522105285519) +- [lineDashOffset](#zh-cn_topic_0000001173164707_section8283548889) +- [globalCompositeOperation](#zh-cn_topic_0000001173164707_section123871750284) +- [shadowBlur](#zh-cn_topic_0000001173164707_section6207051888) +- [shadowColor](#zh-cn_topic_0000001173164707_section42724396120) +- [shadowOffsetX](#zh-cn_topic_0000001173164707_section1616174021219) +- [shadowOffsetY](#zh-cn_topic_0000001173164707_section272013417128) +- [imageSmoothingEnabled6+](#zh-cn_topic_0000001173164707_section770341132716) +- [transferFromImageBitmap\(\)7+](#zh-cn_topic_0000001173164707_section9849145418469) 使用CanvasRenderingContext2D在canvas画布组件上进行绘制，绘制对象可以是矩形、文本、图片等。 @@ -56,8 +61,11 @@ ``` - - +
+ + + +
``` ``` @@ -70,54 +78,67 @@ ctx.arc(100, 75, 50, 0, 6.28); ctx.stroke(); }, + antialias() { + const el = this.$refs.canvas1; + const ctx = el.getContext('2d', { antialias: true }); + ctx.beginPath(); + ctx.arc(100, 75, 50, 0, 6.28); + ctx.stroke(); + } } ``` -- ![](figures/zh-cn_image_0000001089583647.png) +- 示意图（关闭抗锯齿） + + ![](figures/zh-cn_image_0000001127125160.png) + +- 示意图（开启抗锯齿） + ![](figures/zh-cn_image_0000001127125162.png) -## fillRect\(\) + +## fillRect\(\) 填充一个矩形。 - 参数 - -

参数

类型

+

类型

描述

+

描述

offset

+

offset

number

+

number

设置渐变点距离起点的位置占总体长度的比例，范围为0到1。

+

设置渐变点距离起点的位置占总体长度的比例，范围为0到1。

color

+

color

string

+

string

设置渐变的颜色。

+

设置渐变的颜色。

参数

+ + - - - - - - - - - - - - - - @@ -129,47 +150,47 @@ - 示例 - ![](figures/zh-cn_image_0000001059340532.png) - ``` ctx.fillRect(20, 20, 200, 150); ``` + ![](figures/zh-cn_image_0000001127125134.png) -## fillStyle + +## fillStyle 指定绘制的填充色。 - 参数 - -

参数

类型

+

类型

描述

+

描述

x

+

x

number

+

number

指定矩形左上角点的x坐标。

+

指定矩形左上角点的x坐标。

y

+

y

number

+

number

指定矩形左上角点的y坐标。

+

指定矩形左上角点的y坐标。

width

+

width

number

+

number

指定矩形的宽度。

+

指定矩形的宽度。

height

+

height

number

+

number

指定矩形的高度。

+

指定矩形的高度。

参数

+ + - - - - - - - - - - - @@ -181,55 +202,55 @@ - 示例 - ![](figures/zh-cn_image_0000001058562863.png) - ``` ctx.fillStyle = '#0000ff'; ctx.fillRect(20, 20, 150, 100); ``` + ![](figures/zh-cn_image_0000001127284942.png) + -## clearRect\(\) +## clearRect\(\) 删除指定区域内的绘制内容。 - 参数 - -

参数

类型

+

类型

描述

+

描述

color

+

color

<color>

+

<color>

设置填充区域的颜色。

+

设置填充区域的颜色。

gradient

+

gradient

CanvasGradient

+

CanvasGradient

渐变对象，使用 createLinearGradient()方法创建。

+

渐变对象，使用 createLinearGradient()方法创建。

pattern

+

pattern

CanvasPattern

+

CanvasPattern

使用 createPattern()方法创建。

+

使用 createPattern()方法创建。

参数

+ + - - - - - - - - - - - - - - @@ -241,56 +262,56 @@ - 示例 - ![](figures/zh-cn_image_0000001059308558.png) - ``` ctx.fillStyle = 'rgb(0,0,255)'; ctx.fillRect(0, 0, 400, 200); ctx.clearRect(20, 20, 150, 100); ``` + ![](figures/zh-cn_image_0000001173164831.png) + -## strokeRect\(\) +## strokeRect\(\) 绘制具有边框的矩形，矩形内部不填充。 - 参数 - -

参数

类型

+

类型

描述

+

描述

x

+

x

number

+

number

指定矩形上的左上角x坐标。

+

指定矩形上的左上角x坐标。

y

+

y

number

+

number

指定矩形上的左上角y坐标。

+

指定矩形上的左上角y坐标。

width

+

width

number

+

number

指定矩形的宽度。

+

指定矩形的宽度。

height

+

height

number

+

number

指定矩形的高度。

+

指定矩形的高度。

参数

+ + - - - - - - - - - - - - - - @@ -302,47 +323,47 @@ - 示例 - ![](figures/zh-cn_image_0000001058670865.png) - ``` ctx.strokeRect(30, 30, 200, 150); ``` + ![](figures/zh-cn_image_0000001173164817.png) + -## fillText\(\) +## fillText\(\) 绘制填充类文本。 - 参数 - -

参数

类型

+

类型

描述

+

描述

x

+

x

number

+

number

指定矩形的左上角x坐标。

+

指定矩形的左上角x坐标。

y

+

y

number

+

number

指定矩形的左上角y坐标。

+

指定矩形的左上角y坐标。

width

+

width

number

+

number

指定矩形的宽度。

+

指定矩形的宽度。

height

+

height

number

+

number

指定矩形的高度。

+

指定矩形的高度。

参数

+ + - - - - - - - - - - - @@ -354,48 +375,48 @@ - 示例 - ![](figures/zh-cn_image_0000001058948947.png) - ``` ctx.font = '35px sans-serif'; ctx.fillText("Hello World!", 20, 60); ``` + ![](figures/zh-cn_image_0000001173164833.png) -## strokeText\(\) + +## strokeText\(\) 绘制描边类文本。 - 参数 - -

参数

类型

+

类型

描述

+

描述

text

+

text

string

+

string

需要绘制的文本内容。

+

需要绘制的文本内容。

x

+

x

number

+

number

需要绘制的文本的左下角x坐标。

+

需要绘制的文本的左下角x坐标。

y

+

y

number

+

number

需要绘制的文本的左下角y坐标。

+

需要绘制的文本的左下角y坐标。

参数

+ + - - - - - - - - - - - @@ -407,34 +428,34 @@ - 示例 - ![](figures/zh-cn_image_0000001058340529.png) - ``` ctx.font = '25px sans-serif'; ctx.strokeText("Hello World!", 20, 60); ``` + ![](figures/zh-cn_image_0000001127125156.png) -## measureText\(\) + +## measureText\(\) 该方法返回一个文本测算的对象，通过该对象可以获取指定文本的宽度值。 - 参数 - -

参数

类型

+

类型

描述

+

描述

text

+

text

string

+

string

需要绘制的文本内容。

+

需要绘制的文本内容。

x

+

x

number

+

number

需要绘制的文本的左下角x坐标。

+

需要绘制的文本的左下角x坐标。

y

+

y

number

+

number

需要绘制的文本的左下角y坐标。

+

需要绘制的文本的左下角y坐标。

参数

+ + - - - - - @@ -442,16 +463,16 @@ - 返回值 - -

参数

类型

+

类型

描述

+

描述

text

+

text

string

+

string

需要进行测量的文本。

+

需要进行测量的文本。

类型

+ + - - - @@ -459,8 +480,6 @@ - 示例 - ![](figures/zh-cn_image_0000001058988974.png) - ``` ctx.font = '25px sans-serif'; var txt = 'Hello World'; @@ -468,27 +487,29 @@ ctx.fillText(txt, 20, 110); ``` + ![](figures/zh-cn_image_0000001127284960.png) + -## lineWidth +## lineWidth 指定绘制线条的宽度值。 - 参数 - -

类型

说明

+

说明

TextMetrics

+

TextMetrics

包含指定字体的宽度，该宽度可以通过TextMetrics.width来获取。

+

包含指定字体的宽度，该宽度可以通过TextMetrics.width来获取。

参数

+ + - - - - - @@ -500,48 +521,48 @@ - 示例 - ![](figures/zh-cn_image_0000001059308560.png) - ``` ctx.lineWidth = 5; ctx.strokeRect(25, 25, 85, 105); ``` + ![](figures/zh-cn_image_0000001127125166.png) + -## strokeStyle +## strokeStyle 设置描边的颜色。 - 参数 - -

参数

类型

+

类型

描述

+

描述

lineWidth

+

lineWidth

number

+

number

设置绘制线条的宽度。

+

设置绘制线条的宽度。

参数

+ + - - - - - - - - - - - @@ -553,16 +574,16 @@ - 示例 - ![](figures/zh-cn_image_0000001058670867.png) - ``` ctx.lineWidth = 10; ctx.strokeStyle = '#0000ff'; ctx.strokeRect(25, 25, 155, 105); ``` + ![](figures/zh-cn_image_0000001173324719.png) + -## stroke\(\) +## stroke\(\) 进行边框绘制操作。 @@ -576,8 +597,6 @@ - 示例 - ![](figures/zh-cn_image_0000001058948949.png) - ``` ctx.moveTo(25, 25); ctx.lineTo(25, 105); @@ -585,8 +604,10 @@ ctx.stroke(); ``` + ![](figures/zh-cn_image_0000001173164819.png) -## beginPath\(\) + +## beginPath\(\) 创建一个新的绘制路径。 @@ -600,8 +621,6 @@ - 示例 - ![](figures/zh-cn_image_0000001058340531.png) - ``` ctx.beginPath(); ctx.lineWidth = '6'; @@ -611,34 +630,36 @@ ctx.stroke(); ``` + ![](figures/zh-cn_image_0000001127125164.png) -## moveTo\(\) + +## moveTo\(\) 路径从当前点移动到指定点。 - 参数 - -

参数

类型

+

类型

描述

+

描述

color

+

color

<color>

+

<color>

指定描边使用的颜色

+

指定描边使用的颜色。

gradient

+

gradient

CanvasGradient

+

CanvasGradient

通过createLinearGradient()方法创建。

+

通过createLinearGradient()方法创建。

pattern

+

pattern

CanvasPattern

+

CanvasPattern

通过createPattern()方法创建。

+

通过createPattern()方法创建。

参数

+ + - - - - - - - - @@ -650,8 +671,6 @@ - 示例 - ![](figures/zh-cn_image_0000001058988976.png) - ``` ctx.beginPath(); ctx.moveTo(10, 10); @@ -659,34 +678,36 @@ ctx.stroke(); ``` + ![](figures/zh-cn_image_0000001127125152.png) + -## lineTo\(\) +## lineTo\(\) 从当前点到指定点进行路径连接。 - 参数 - -

参数

类型

+

类型

描述

+

描述

x

+

x

number

+

number

指定位置的x坐标。

+

指定位置的x坐标。

y

+

y

number

+

number

指定位置的y坐标。

+

指定位置的y坐标。

参数

+ + - - - - - - - - @@ -698,8 +719,6 @@ - 示例 - ![](figures/zh-cn_image_0000001059308562.png) - ``` ctx.beginPath(); ctx.moveTo(10, 10); @@ -707,8 +726,10 @@ ctx.stroke(); ``` + ![](figures/zh-cn_image_0000001173324711.png) + -## closePath\(\) +## closePath\(\) 结束当前路径形成一个封闭路径。 @@ -722,8 +743,6 @@ - 示例 - ![](figures/zh-cn_image_0000001058830768.png) - ``` ctx.beginPath(); ctx.moveTo(30, 30); @@ -733,28 +752,30 @@ ctx.stroke(); ``` + ![](figures/zh-cn_image_0000001127284950.png) + -## lineCap +## lineCap 指定线端点的样式。 - 参数 - -

参数

类型

+

类型

描述

+

描述

x

+

x

number

+

number

指定位置的x坐标。

+

指定位置的x坐标。

y

+

y

number

+

number

指定位置的y坐标。

+

指定位置的y坐标。

参数

+ + - - - - - @@ -766,8 +787,6 @@ - 示例 - ![](figures/zh-cn_image_0000001058830831.png) - ``` ctx.lineWidth = 8; ctx.beginPath(); @@ -777,28 +796,30 @@ ctx.stroke(); ``` + ![](figures/zh-cn_image_0000001127125144.png) -## lineJoin + +## lineJoin 指定线段间相交的交点样式。 - 参数 - -

参数

类型

+

类型

描述

+

描述

lineCap

+

lineCap

string

+

string

线条的端点样式，可选值为：

-
  • butt（默认）：线端点以方形结束；
  • round：线端点以圆形结束；
  • square：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。
+

线条的端点样式，可选值为：

+
  • butt（默认）：线端点以方形结束。
  • round：线端点以圆形结束。
  • square：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。

参数

+ + - - - - - @@ -810,8 +831,6 @@ - 示例 - ![](figures/zh-cn_image_0000001058340533.png) - ``` ctx.beginPath(); ctx.lineWidth = 8; @@ -822,27 +841,29 @@ ctx.stroke(); ``` + ![](figures/zh-cn_image_0000001127125140.png) -## miterLimit + +## miterLimit 设置斜接面限制值，该值指定了线条相交处内角和外角的距离。 - 参数 - -

参数

类型

+

类型

描述

+

描述

lineJoin

+

lineJoin

string

+

string

线条的交点样式，可选值为：

-
  • round：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。
  • bevel：在线段相连处使用三角形为底填充， 每个部分矩形拐角独立。
  • miter（默认）：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。
+

线条的交点样式，可选值为：

+
  • round：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。
  • bevel：在线段相连处使用三角形为底填充， 每个部分矩形拐角独立。
  • miter（默认）：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。

参数

+ + - - - - - @@ -854,8 +875,6 @@ - 示例 - ![](figures/zh-cn_image_0000001058562869.png) - ``` ctx.lineWidth = 8; ctx.lineJoin = 'miter'; @@ -866,30 +885,32 @@ ctx.stroke(); ``` + ![](figures/zh-cn_image_0000001127284966.png) + -## font +## font 设置文本绘制中的字体样式。 - 参数 - -

参数

类型

+

类型

描述

+

描述

miterLimit

+

miterLimit

number

+

number

斜接面限制值，该属性默认值为10。

+

斜接面限制值，该属性默认值为10。

参数

+ + - - - - - @@ -901,36 +922,36 @@ - 示例 - ![](figures/zh-cn_image_0000001059308564.png) - ``` ctx.font = '30px sans-serif'; ctx.fillText("Hello World", 20, 60); ``` + ![](figures/zh-cn_image_0000001173324725.png) + -## textAlign +## textAlign 设置文本绘制中的文本对齐方式。 - 参数 - -

参数

类型

+

类型

描述

+

描述

value

+

value

string

+

string

字体样式支持：sans-serif, serif, monospace，该属性默认值为14px sans-serif。

-

语法：ctx.font="font-style font-weight font-size font-family"5+

-

默认值："normal normal 14px sans-serif"

-
  • font-style(可选)，用于指定字体样式，支持如下几种样式：normal, italic
  • font-weight(可选)，用于指定字体的粗细，支持如下几种类型：normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900
  • font-size(可选)，指定字号和行高，单位只支持px，默认值14px。
  • font-family(可选)，指定字体系列，支持如下几种类型：sans-serif, serif, monospace
+

字体样式支持：sans-serif, serif, monospace，该属性默认值为14px sans-serif。

+

语法：ctx.font="font-style font-weight font-size font-family"5+

+

默认值："normal normal 14px sans-serif"

+
  • font-style(可选)，用于指定字体样式，支持如下几种样式：normal, italic。
  • font-weight(可选)，用于指定字体的粗细，支持如下几种类型：normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900。
  • font-size(可选)，指定字号和行高，单位只支持px，默认值14px。
  • font-family(可选)，指定字体系列，支持如下几种类型：sans-serif, serif, monospace。

参数

+ + - - - - - @@ -943,8 +964,6 @@ - 示例 - ![](figures/zh-cn_image_0000001058830770.png) - ``` ctx.strokeStyle = '#0000ff'; ctx.moveTo(140, 10); @@ -966,28 +985,30 @@ ctx.fillText('textAlign=right',140, 140); ``` + ![](figures/zh-cn_image_0000001173164795.png) + -## textBaseline +## textBaseline 设置文本绘制中的水平对齐方式。 - 参数 - -

参数

类型

+

类型

描述

+

描述

align

+

align

string

+

string

可选值为：

-
  • left（默认）：文本左对齐；
  • right：文本右对齐；
  • center：文本居中对齐；
  • start：文本对齐界线开始的地方；
  • end：文本对齐接线结束的地方。
-
说明：

ltr布局模式下start和left一致，rtl布局模式下start和right一致·。

+

可选值为：

+
  • left（默认）：文本左对齐。
  • right：文本右对齐。
  • center：文本居中对齐。
  • start：文本对齐界线开始的地方。
  • end：文本对齐接线结束的地方。
+
说明：

ltr布局模式下start和left一致，rtl布局模式下start和right一致·。

参数

+ + - - - - - @@ -999,8 +1020,6 @@ - 示例 - ![](figures/zh-cn_image_0000001058460539.png) - ``` ctx.strokeStyle = '#0000ff'; ctx.moveTo(0, 120); @@ -1018,37 +1037,39 @@ ctx.textBaseline = 'alphabetic'; ctx.fillText('Alphabetic', 195, 120); ctx.textBaseline = 'hanging'; - ctx.fillText('Hanging', 295, 120); + ctx.fillText('Hanging', 295, 120); ``` + ![](figures/zh-cn_image_0000001173324713.png) -## createPattern\(\) + +## createPattern\(\) 通过指定图像和重复方式创建图片填充的模板。 - 参数 - -

参数

类型

+

类型

描述

+

描述

textBaseline

+

textBaseline

string

+

string

可选值为：

-
  • alphabetic（默认）：文本基线是标准的字母基线；
  • top：文本基线在文本块的顶部；
  • hanging：文本基线是悬挂基线；
  • middle：文本基线在文本块的中间；
  • ideographic：文字基线是表意字基线；如果字符本身超出了alphabetic 基线，那么ideograhpic基线位置在字符本身的底部；
  • bottom：文本基线在文本块的底部。 与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母。
+

可选值为：

+
  • alphabetic（默认）：文本基线是标准的字母基线。
  • top：文本基线在文本块的顶部。
  • hanging：文本基线是悬挂基线。
  • middle：文本基线在文本块的中间。
  • ideographic：文字基线是表意字基线；如果字符本身超出了alphabetic 基线，那么ideograhpic基线位置在字符本身的底部。
  • bottom：文本基线在文本块的底部。 与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母。

参数

+ + - - - - - - - - @@ -1056,16 +1077,16 @@ - 返回值 - -

参数

类型

+

类型

描述

+

描述

image

+

image

Image

+

Image

图源对象，具体参考Image对象。

+

图源对象，具体参考Image对象。

repetition

+

repetition

string

+

string

设置图像重复的方式，取值为：'repeat'、'repeat-x'、 'repeat-y'、'no-repeat'。

+

设置图像重复的方式，取值为：'repeat'、'repeat-x'、 'repeat-y'、'no-repeat'。

类型

+ + - - - @@ -1073,70 +1094,70 @@ - 示例 - ![](figures/zh-cn_image_0000001059148582.png) - ``` var pat = ctx.createPattern(img, 'repeat'); ctx.fillStyle = pat; ctx.fillRect(0, 0, 20, 20); ``` + ![](figures/zh-cn_image_0000001173164829.png) -## bezierCurveTo\(\) + +## bezierCurveTo\(\) 创建三次贝赛尔曲线的路径。 - 参数 - -

类型

说明

+

说明

Object

+

Object

指定图像填充的Pattern对象。

+

指定图像填充的Pattern对象。

参数

+ + - - - - - - - - - - - - - - - - - - - - @@ -1155,48 +1176,50 @@ ctx.stroke(); ``` + ![](figures/zh-cn_image_0000001152610854.png) + -## quadraticCurveTo\(\) +## quadraticCurveTo\(\) 创建二次贝赛尔曲线的路径。 - 参数 - -

参数

类型

+

类型

描述

+

描述

cp1x

+

cp1x

number

+

number

第一个贝塞尔参数的x坐标值。

+

第一个贝塞尔参数的x坐标值。

cp1y

+

cp1y

number

+

number

第一个贝塞尔参数的y坐标值。

+

第一个贝塞尔参数的y坐标值。

cp2x

+

cp2x

number

+

number

第二个贝塞尔参数的x坐标值。

+

第二个贝塞尔参数的x坐标值。

cp2y

+

cp2y

number

+

number

第二个贝塞尔参数的y坐标值。

+

第二个贝塞尔参数的y坐标值。

x

+

x

number

+

number

路径结束时的x坐标值。

+

路径结束时的x坐标值。

y

+

y

number

+

number

路径结束时的y坐标值。

+

路径结束时的y坐标值。

参数

+ + - - - - - - - - - - - - - - @@ -1208,8 +1231,6 @@ - 示例 - ![](figures/zh-cn_image_0000001059308566.png) - ``` ctx.beginPath(); ctx.moveTo(20, 20); @@ -1217,62 +1238,64 @@ ctx.stroke(); ``` + ![](figures/zh-cn_image_0000001173324723.png) -## arc\(\) + +## arc\(\) 绘制弧线路径。 - 参数 - -

参数

类型

+

类型

描述

+

描述

cpx

+

cpx

number

+

number

贝塞尔参数的x坐标值。

+

贝塞尔参数的x坐标值。

cpy

+

cpy

number

+

number

贝塞尔参数的y坐标值。

+

贝塞尔参数的y坐标值。

x

+

x

number

+

number

路径结束时的x坐标值。

+

路径结束时的x坐标值。

y

+

y

number

+

number

路径结束时的y坐标值。

+

路径结束时的y坐标值。

参数

+ + - - - - - - - - - - - - - - - - - - - - @@ -1284,63 +1307,63 @@ - 示例 - ![](figures/zh-cn_image_0000001058830772.png) - ``` ctx.beginPath(); ctx.arc(100, 75, 50, 0, 6.28); ctx.stroke(); ``` + ![](figures/zh-cn_image_0000001127125154.png) -## arcTo\(\) + +## arcTo\(\) 依据圆弧经过的点和圆弧半径创建圆弧路径。 - 参数 - -

参数

类型

+

类型

描述

+

描述

x

+

x

number

+

number

弧线圆心的x坐标值。

+

弧线圆心的x坐标值。

y

+

y

number

+

number

弧线圆心的y坐标值。

+

弧线圆心的y坐标值。

radius

+

radius

number

+

number

弧线的圆半径。

+

弧线的圆半径。

startAngle

+

startAngle

number

+

number

弧线的起始弧度。

+

弧线的起始弧度。

endAngle

+

endAngle

number

+

number

弧线的终止弧度。

+

弧线的终止弧度。

anticlockwise

+

anticlockwise

boolean

+

boolean

是否逆时针绘制圆弧。

+

是否逆时针绘制圆弧。

参数

+ + - - - - - - - - - - - - - - - - - @@ -1352,56 +1375,84 @@ - 示例 - ![](figures/zh-cn_image_0000001058830835.png) - ``` ctx.moveTo(100, 20); ctx.arcTo(150, 20, 150, 70, 50); // Create an arc ctx.stroke(); ``` + ![](figures/zh-cn_image_0000001173164807.png) -## rect\(\) -创建矩形路径。 +## ellipse\(\)6+ + +在规定的矩形区域绘制一个椭圆。 - 参数 - -

参数

类型

+

类型

描述

+

描述

x1

+

x1

number

+

number

圆弧经过的第一个点的x坐标值。

+

圆弧经过的第一个点的x坐标值。

y1

+

y1

number

+

number

圆弧经过的第一个点的y坐标值。

+

圆弧经过的第一个点的y坐标值。

x2

+

x2

number

+

number

圆弧经过的第二个点的x坐标值。

+

圆弧经过的第二个点的x坐标值。

y2

+

y2

number

+

number

圆弧经过的第二个点的y坐标值。

+

圆弧经过的第二个点的y坐标值。

radius

+

radius

number

+

number

圆弧的圆半径值。

+

圆弧的圆半径值。

参数

+ + - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + @@ -1413,15 +1464,76 @@ - 示例 - ![](figures/zh-cn_image_0000001058340537.png) + ``` + ctx.beginPath(); + ctx.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1); + ctx.stroke(); + ``` + + ![](figures/ellipse.png) + + +## rect\(\) + +创建矩形路径。 + +- 参数 + + +

参数

类型

+

类型

描述

+

描述

x

+

x

number

+

number

指定矩形的左上角x坐标值。

+

椭圆圆心的x轴坐标。

y

+

y

number

+

number

指定矩形的左上角y坐标值。

+

椭圆圆心的y轴坐标。

width

+

radiusX

number

+

number

指定矩形的宽度。

+

椭圆x轴的半径长度。

height

+

radiusY

number

+

number

指定矩形的高度。

+

椭圆y轴的半径长度。

+

rotation

+

number

+

椭圆的旋转角度，单位为弧度。

+

startAngle

+

number

+

椭圆绘制的起始点角度，以弧度表示。

+

endAngle

+

number

+

椭圆绘制的结束点角度，以弧度表示。

+

anticlockwise

+

number

+

是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。(可选参数，默认为0)
+ + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

x

+

number

+

指定矩形的左上角x坐标值。

+

y

+

number

+

指定矩形的左上角y坐标值。

+

width

+

number

+

指定矩形的宽度。

+

height

+

number

+

指定矩形的高度。

+
+ +- 返回值 + + 无 + +- 示例 ``` ctx.rect(20, 20, 100, 100); // Create a 100*100 rectangle at (20, 20) ctx.stroke(); // Draw it ``` + ![](figures/zh-cn_image_0000001127125130.png) + -## fill\(\) +## fill\(\) 对封闭路径进行填充。 @@ -1435,15 +1547,15 @@ - 示例 - ![](figures/zh-cn_image_0000001058988982.png) - ``` ctx.rect(20, 20, 100, 100); // Create a 100*100 rectangle at (20, 20) ctx.fill(); // Draw it in default setting ``` + ![](figures/zh-cn_image_0000001127284940.png) + -## clip\(\) +## clip\(\) 设置当前路径为剪切路径。 @@ -1457,8 +1569,6 @@ - 示例 - ![](figures/zh-cn_image_0000001059308568.png) - ``` ctx.rect(0, 0, 200, 200); ctx.stroke(); @@ -1468,27 +1578,29 @@ ctx.fillRect(0, 0, 150, 150); ``` + ![](figures/zh-cn_image_0000001127284956.png) + -## rotate\(\) +## rotate\(\) 针对当前坐标轴进行顺时针旋转。 - 参数 - -

参数

+ + - - - - - @@ -1500,41 +1612,41 @@ - 示例 - ![](figures/zh-cn_image_0000001058830774.png) - ``` ctx.rotate(45 * Math.PI / 180); // Rotate the rectangle 45 degrees ctx.fillRect(70, 20, 50, 50); ``` + ![](figures/zh-cn_image_0000001127125146.png) -## scale\(\) + +## scale\(\) 设置canvas画布的缩放变换属性，后续的绘制操作将按照缩放比例进行缩放。 - 参数 - -

参数

类型

+

类型

描述

+

描述

rotate

+

rotate

number

+

number

设置顺时针旋转的弧度值，可以通过Math.PI / 180将角度转换为弧度值。

+

设置顺时针旋转的弧度值，可以通过Math.PI / 180将角度转换为弧度值。

参数

+ + - - - - - - - - @@ -1546,75 +1658,75 @@ - 示例 - ![](figures/zh-cn_image_0000001058830837.png) - ``` ctx.strokeRect(10, 10, 25, 25); ctx.scale(2, 2);// Scale to 200% ctx.strokeRect(10, 10, 25, 25); ``` + ![](figures/zh-cn_image_0000001173164805.png) -## transform\(\) + +## transform\(\) transform\(\)方法对应一个变换矩阵，想对一个图形进行变化的时候，只要设置此变换矩阵相应的参数，对图形的各个定点的坐标分别乘以这个矩阵，就能得到新的定点的坐标。矩阵变换效果可叠加。 ->![](public_sys-resources/icon-note.gif) **说明：** +>![](../../public_sys-resources/icon-note.gif) **说明：** >变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标）： >- x' = scaleX \* x + skewY \* y + translateX >- y' = skewX \* x + scaleY \* y + translateY - 参数 - -

参数

类型

+

类型

描述

+

描述

x

+

x

number

+

number

设置水平方向的缩放值。。

+

设置水平方向的缩放值。

y

+

y

number

+

number

设置垂直方向的缩放值。

+

设置垂直方向的缩放值。

参数

+ + - - - - - - - - - - - - - - - - - - - - @@ -1626,8 +1738,6 @@ transform\(\)方法对应一个变换矩阵，想对一个图形进行变化的 - 示例 - ![](figures/zh-cn_image_0000001058460543.png) - ``` ctx.fillStyle = 'rgb(0,0,0)'; ctx.fillRect(0, 0, 100, 100) @@ -1639,62 +1749,64 @@ transform\(\)方法对应一个变换矩阵，想对一个图形进行变化的 ctx.fillRect(0, 0, 100, 100); ``` + ![](figures/zh-cn_image_0000001173164809.png) + -## setTransform\(\) +## setTransform\(\) setTransfrom\(\)方法使用的参数和transform\(\)方法相同，但setTransform\(\)方法会重置现有的变换矩阵并创建新的变换矩阵。 - 参数 - -

参数

类型

+

类型

描述

+

描述

scaleX

+

scaleX

number

+

number

指定水平缩放值。

+

指定水平缩放值。

skewX

+

skewX

number

+

number

指定水平倾斜值。

+

指定水平倾斜值。

skewY

+

skewY

number

+

number

指定垂直倾斜值。

+

指定垂直倾斜值。

scaleY

+

scaleY

number

+

number

指定垂直缩放值。

+

指定垂直缩放值。

translateX

+

translateX

number

+

number

指定水平移动值。

+

指定水平移动值。

translateY

+

translateY

number

+

number

指定垂直移动值。

+

指定垂直移动值。

参数

+ + - - - - - - - - - - - - - - - - - - - - @@ -1706,8 +1818,6 @@ setTransfrom\(\)方法使用的参数和transform\(\)方法相同，但setTransf - 示例 - ![](figures/zh-cn_image_0000001059340544.png) - ``` ctx.fillStyle = 'rgb(255,0,0)'; ctx.fillRect(0, 0, 100, 100) @@ -1716,34 +1826,36 @@ setTransfrom\(\)方法使用的参数和transform\(\)方法相同，但setTransf ctx.fillRect(0, 0, 100, 100); ``` + ![](figures/zh-cn_image_0000001173164791.png) + -## translate\(\) +## translate\(\) 移动当前坐标系的原点。 - 参数 - -

参数

类型

+

类型

描述

+

描述

scaleX

+

scaleX

number

+

number

指定水平缩放值。

+

指定水平缩放值。

skewX

+

skewX

number

+

number

指定水平倾斜值。

+

指定水平倾斜值。

skewY

+

skewY

number

+

number

指定垂直倾斜值。

+

指定垂直倾斜值。

scaleY

+

scaleY

number

+

number

指定垂直缩放值。

+

指定垂直缩放值。

translateX

+

translateX

number

+

number

指定水平移动值。

+

指定水平移动值。

translateY

+

translateY

number

+

number

指定垂直移动值。

+

指定垂直移动值。

参数

+ + - - - - - - - - @@ -1755,35 +1867,89 @@ setTransfrom\(\)方法使用的参数和transform\(\)方法相同，但setTransf - 示例 - ![](figures/zh-cn_image_0000001058988984.png) - ``` ctx.fillRect(10, 10, 50, 50); ctx.translate(70, 70); ctx.fillRect(10, 10, 50, 50); ``` + ![](figures/zh-cn_image_0000001127125158.png) + + +## createPath2D\(\)6+ + +创建一个Path2D对象。 + +- 参数 + + +

参数

类型

+

类型

描述

+

描述

x

+

x

number

+

number

设置水平平移量。

+

设置水平平移量。

y

+

y

number

+

number

设置竖直平移量。

+

设置竖直平移量。
+ + + + + + + + + + + + + +

参数

+

类型

+

描述

+

path

+

Path2D

+

Path2D对象。

+

cmds

+

string

+

SVG的Path描述字符串。

+
+ +- 返回值 + + Path2D对象 + +- 示例 + + ``` + var path1 = ctx.createPath2D(); + path1.moveTo(100, 100); + path1.lineTo(200, 100); + path1.lineTo(100, 200); + path1.closePath(); + ctx.stroke(path1); + var path2 = ctx.createPath2D("M150 150 L50 250 L250 250 Z"); + ctx.stroke(path2); + var path3 = ctx.createPath2D(path2); + ctx.stroke(path3); + ``` + + ![](figures/zh-cn_image_0000001152770830.png) + -## globalAlpha +## globalAlpha 设置透明度。 - 参数 - -

参数

+ + - - - - - @@ -1795,8 +1961,6 @@ setTransfrom\(\)方法使用的参数和transform\(\)方法相同，但setTransf - 示例 - ![](figures/zh-cn_image_0000001059148586.png) - ``` ctx.fillStyle = 'rgb(255,0,0)'; ctx.fillRect(0, 0, 50, 50); @@ -1805,83 +1969,85 @@ setTransfrom\(\)方法使用的参数和transform\(\)方法相同，但setTransf ctx.fillRect(50, 50, 50, 50); ``` + ![](figures/zh-cn_image_0000001127125168.png) + -## drawImage\(\) +## drawImage\(\) 进行图像绘制。 - 参数 - -

参数

类型

+

类型

描述

+

描述

value

+

value

number

+

number

0.0为完全透明，1.0为完全不透明。

+

0.0为完全透明，1.0为完全不透明。

参数

+ + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -1893,8 +2059,6 @@ setTransfrom\(\)方法使用的参数和transform\(\)方法相同，但setTransf - 示例 - ![](figures/zh-cn_image_0000001058830776.png) - ``` var test = this.$element('drawImage'); var ctx = test.getContext('2d'); @@ -1903,8 +2067,10 @@ setTransfrom\(\)方法使用的参数和transform\(\)方法相同，但setTransf ctx.drawImage(img, 50, 80, 80, 80); ``` + ![](figures/zh-cn_image_0000001173164821.png) + -## restore\(\) +## restore\(\) 对保存的绘图上下文进行恢复。 @@ -1923,7 +2089,7 @@ setTransfrom\(\)方法使用的参数和transform\(\)方法相同，但setTransf ``` -## save\(\) +## save\(\) 对当前的绘图上下文进行保存。 @@ -1942,47 +2108,47 @@ setTransfrom\(\)方法使用的参数和transform\(\)方法相同，但setTransf ``` -## createLinearGradient\(\)6+ +## createLinearGradient\(\)6+ -创建一个线性渐变色，返回CanvasGradient对象，请参考[CanvasGradient对象](CanvasGradient对象.md#ZH-CN_TOPIC_0000001162494623)。 +创建一个线性渐变色，返回CanvasGradient对象，请参考[CanvasGradient对象](js-components-canvas-canvasgradient.md#ZH-CN_TOPIC_0000001209210715)。 - 参数 - -

参数

类型

+

类型

描述

+

描述

image

+

image

Image

+

Image

图片资源，请参考Image对象。

+

图片资源，请参考Image对象。

sx

+

sx

number

+

number

裁切源图像时距离源图像左上角的x坐标值。

+

裁切源图像时距离源图像左上角的x坐标值。

sy

+

sy

number

+

number

裁切源图像时距离源图像左上角的y坐标值。

+

裁切源图像时距离源图像左上角的y坐标值。

sWidth

+

sWidth

number

+

number

裁切源图像时需要裁切的宽度。

+

裁切源图像时需要裁切的宽度。

sHeight

+

sHeight

number

+

number

裁切源图像时需要裁切的高度。

+

裁切源图像时需要裁切的高度。

dx

+

dx

number

+

number

绘制区域左上角在x轴的位置。

+

绘制区域左上角在x轴的位置。

dy

+

dy

number

+

number

绘制区域左上角在y 轴的位置。

+

绘制区域左上角在y 轴的位置。

dWidth

+

dWidth

number

+

number

绘制区域的宽度。

+

绘制区域的宽度。

dHeight

+

dHeight

number

+

number

绘制区域的高度。

+

绘制区域的高度。

参数

+ + - - - - - - - - - - - - - - @@ -1990,16 +2156,16 @@ setTransfrom\(\)方法使用的参数和transform\(\)方法相同，但setTransf - 返回值 - -

参数

类型

+

类型

描述

+

描述

x0

+

x0

number

+

number

起点的x轴坐标。

+

起点的x轴坐标。

y0

+

y0

number

+

number

起点的y轴坐标。

+

起点的y轴坐标。

x1

+

x1

number

+

number

终点的x轴坐标。

+

终点的x轴坐标。

y1

+

y1

number

+

number

终点的y轴坐标。

+

终点的y轴坐标。

类型

+ + - - - @@ -2007,8 +2173,6 @@ setTransfrom\(\)方法使用的参数和transform\(\)方法相同，但setTransf - 示例 - ![](figures/zh-cn_image_0000001144077163.png) - ``` @@ -2034,41 +2198,150 @@ setTransfrom\(\)方法使用的参数和transform\(\)方法相同，但setTransf } ``` + ![](figures/zh-cn_image_0000001173164827.png) + + +## createRadialGradient\(\)6+ + +创建一个径向渐变色，返回CanvasGradient对象，请参考CanvasGradient + +- 参数 + + +

类型

说明

+

说明

Object

+

Object

返回创建的CanvasGradient对象。

+

返回创建的CanvasGradient对象。
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

x0

+

number

+

起始圆的x轴坐标。

+

y0

+

number

+

起始圆的y轴坐标。

+

r0

+

number

+

起始圆的半径。必须是非负且有限的。

+

x1

+

number

+

终点圆的x轴坐标。

+

y1

+

number

+

终点圆的y轴坐标。

+

r1

+

number

+

终点圆的半径。必须为非负且有限的。

+
+ +- 返回值 + + + + + + + + + + +

类型

+

说明

+

Object

+

返回创建的CanvasGradient对象。

+
+ +- 示例 + + ``` + + + + ``` + + ``` + // xxx.js + export default { + handleClick() { + const el = this.$refs.canvas; + const ctx = el.getContext('2d'); + // Radial gradient: inner circle(200,200,r:50) outer circle(200,200,r:200) + var gradient = ctx.createRadialGradient(200,200,50, 200,200,200); + // Add three color stops + gradient.addColorStop(0.0, 'red'); + gradient.addColorStop(0.5, 'white'); + gradient.addColorStop(1.0, 'green'); + // Set the fill style and draw a rectangle + ctx.fillStyle = gradient; + ctx.fillRect(0, 0, 500, 500); + } + } + ``` + + ![](figures/zh-cn_image_0000001173164813.png) + -## createImageData\(\) +## createImageData\(\) -创建新的ImageData 对象，请参考[ImageData对象](ImageData对象.md#ZH-CN_TOPIC_0000001115814838)。 +创建新的ImageData 对象，请参考[ImageData对象](js-components-canvas-imagedata.md#ZH-CN_TOPIC_0000001209570711)。 - 参数 - -

参数

+ + - - - - - - - - - - - @@ -2076,16 +2349,16 @@ setTransfrom\(\)方法使用的参数和transform\(\)方法相同，但setTransf - 返回值 - -

参数

类型

+

类型

描述

+

描述

width

+

width

number

+

number

ImageData的宽度。

+

ImageData的宽度。

height

+

height

number

+

number

ImageData的高度。

+

ImageData的高度。

imagedata

+

imagedata

Object

+

Object

复制现有的ImageData对象。

+

复制现有的ImageData对象。

类型

+ + - - - @@ -2099,47 +2372,47 @@ setTransfrom\(\)方法使用的参数和transform\(\)方法相同，但setTransf ``` -## getImageData\(\) +## getImageData\(\) 以当前canvas指定区域内的像素创建ImageData对象。 - 参数 - -

类型

说明

+

说明

Object

+

Object

返回创建的ImageData对象。

+

返回创建的ImageData对象。

参数

+ + - - - - - - - - - - - - - - @@ -2147,16 +2420,16 @@ setTransfrom\(\)方法使用的参数和transform\(\)方法相同，但setTransf - 返回值 - -

参数

类型

+

类型

描述

+

描述

sx

+

sx

number

+

number

需要输出的区域的左上角x坐标。

+

需要输出的区域的左上角x坐标。

sy

+

sy

number

+

number

需要输出的区域的左上角y坐标。

+

需要输出的区域的左上角y坐标。

sw

+

sw

number

+

number

需要输出的区域的宽度。

+

需要输出的区域的宽度。

sh

+

sh

number

+

number

需要输出的区域的高度。

+

需要输出的区域的高度。

类型

+ + - - - @@ -2171,68 +2444,68 @@ setTransfrom\(\)方法使用的参数和transform\(\)方法相同，但setTransf ``` -## putImageData\(\) +## putImageData\(\) 使用ImageData数据填充新的矩形区域。 - 参数 - -

类型

说明

+

说明

Object

+

Object

返回包含指定区域像素的ImageData对象。

+

返回包含指定区域像素的ImageData对象。

参数

+ + - - - - - - - - - - - - - - - - - - - - - - - @@ -2257,27 +2530,29 @@ setTransfrom\(\)方法使用的参数和transform\(\)方法相同，但setTransf ctx.putImageData(imgData, 10, 10); ``` + ![](figures/zh-cn_image_0000001198530737.png) -## setLineDash\(\) + +## setLineDash\(\) 设置画布的虚线样式。 - 参数 - -

参数

类型

+

类型

描述

+

描述

imagedata

+

imagedata

Object

+

Object

包含像素值的ImageData对象。

+

包含像素值的ImageData对象。

dx

+

dx

number

+

number

填充区域在x轴方向的偏移量。

+

填充区域在x轴方向的偏移量。

dy

+

dy

number

+

number

填充区域在y轴方向的偏移量。

+

填充区域在y轴方向的偏移量。

dirtyX

+

dirtyX

number

+

number

源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。

+

源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。

dirtyY

+

dirtyY

number

+

number

源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。

+

源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。

dirtyWidth

+

dirtyWidth

number

+

number

源图像数据矩形裁切范围的宽度。

+

源图像数据矩形裁切范围的宽度。

dirtyHeight

+

dirtyHeight

number

+

number

源图像数据矩形裁切范围的高度。

+

源图像数据矩形裁切范围的高度。

参数

+ + - - - - - @@ -2290,11 +2565,15 @@ setTransfrom\(\)方法使用的参数和transform\(\)方法相同，但setTransf - 示例 ``` + ctx.arc(100, 75, 50, 0, 6.28); ctx.setLineDash([10,20]); + ctx.stroke(); ``` + ![](figures/zh-cn_image_0000001152770952.png) -## getLineDash\(\) + +## getLineDash\(\) 获得当前画布的虚线样式。 @@ -2304,16 +2583,16 @@ setTransfrom\(\)方法使用的参数和transform\(\)方法相同，但setTransf - 返回值 - -

参数

类型

+

类型

描述

+

描述

segments

+

segments

Array

+

Array

作为数组用来描述线段如何交替和间距长度。

+

作为数组用来描述线段如何交替和间距长度。

类型

+ + - - - @@ -2326,26 +2605,26 @@ setTransfrom\(\)方法使用的参数和transform\(\)方法相同，但setTransf ``` -## lineDashOffset +## lineDashOffset 设置画布的虚线偏移量。 - 参数 - -

类型

说明

+

说明

Array

+

Array

返回数组，该数组用来描述线段如何交替和间距长度。。

+

返回数组，该数组用来描述线段如何交替和间距长度。。

参数

+ + - - - - - @@ -2358,30 +2637,35 @@ setTransfrom\(\)方法使用的参数和transform\(\)方法相同，但setTransf - 示例 ``` - ctx.lineDashOffset = 1.0; + ctx.arc(100, 75, 50, 0, 6.28); + ctx.setLineDash([10,20]); + ctx.lineDashOffset = 10.0; + ctx.stroke(); ``` + ![](figures/zh-cn_image_0000001198530815.png) + -## globalCompositeOperation +## globalCompositeOperation 设置合成操作的方式。 - 参数 - -

参数

类型

+

类型

描述

+

描述

value

+

value

number

+

number

精度为float，默认为0.0。

+

精度为float，默认为0.0。

参数

+ + - - - - - @@ -2389,66 +2673,66 @@ setTransfrom\(\)方法使用的参数和transform\(\)方法相同，但setTransf 属性值： - -

参数

类型

+

类型

描述

+

描述

type

+

type

string

+

string

合成操作的类型字段。可选值有source-over(默认值)，source-atop，source-in，source-out，destination-over，destination-atop，destination-in，destination-out，lighter，copy，xor。

+

合成操作的类型字段。可选值有source-over(默认值)，source-atop，source-in，source-out，destination-over，destination-atop，destination-in，destination-out，lighter，copy，xor。

值

+ + - - - - - - - - - - - - - - - - - - - - - - - @@ -2460,8 +2744,6 @@ setTransfrom\(\)方法使用的参数和transform\(\)方法相同，但setTransf - 示例 - ![](figures/zh-cn_image_0000001058948959.png) - ``` ctx.fillStyle = 'rgb(255,0,0)'; ctx.fillRect(20, 20, 50, 50); @@ -2476,29 +2758,31 @@ setTransfrom\(\)方法使用的参数和transform\(\)方法相同，但setTransf ctx.fillRect(150, 50, 50, 50); ``` + ![](figures/zh-cn_image_0000001173324717.png) + 示例中，新绘制内容是蓝色矩形，现有绘制内容是红色矩形。 -## shadowBlur +## shadowBlur -设置绘制阴影时的模糊级别，默认值为0。 +设置绘制阴影时的模糊级别，默认值为0.0。 - 参数 - -

值

描述

+

描述

source-over

+

source-over

在现有绘制内容上显示新绘制内容，属于默认值。

+

在现有绘制内容上显示新绘制内容，属于默认值。

source-atop

+

source-atop

在现有绘制内容顶部显示新绘制内容。

+

在现有绘制内容顶部显示新绘制内容。

source-in

+

source-in

在现有绘制内容中显示新绘制内容。

+

在现有绘制内容中显示新绘制内容。

source-out

+

source-out

在现有绘制内容之外显示新绘制内容。

+

在现有绘制内容之外显示新绘制内容。

destination-over

+

destination-over

在新绘制内容上方显示现有绘制内容。

+

在新绘制内容上方显示现有绘制内容。

destination-atop

+

destination-atop

在新绘制内容顶部显示现有绘制内容。

+

在新绘制内容顶部显示现有绘制内容。

destination-in

+

destination-in

在新绘制内容中显示现有绘制内容。

+

在新绘制内容中显示现有绘制内容。

destination-out

+

destination-out

在新绘制内容外显示现有绘制内容。

+

在新绘制内容外显示现有绘制内容。

lighter

+

lighter

显示新绘制内容和现有绘制内容。

+

显示新绘制内容和现有绘制内容。

copy

+

copy

显示新绘制内容而忽略现有绘制内容。

+

显示新绘制内容而忽略现有绘制内容。

xor

+

xor

使用异或操作对新绘制内容与现有绘制内容进行融合。

+

使用异或操作对新绘制内容与现有绘制内容进行融合。

参数

+ + - - - - - @@ -2510,8 +2794,6 @@ setTransfrom\(\)方法使用的参数和transform\(\)方法相同，但setTransf - 示例 - ![](figures/zh-cn_image_0000001059340546.png) - ``` ctx.shadowBlur = 30; ctx.shadowColor = 'rgb(0,0,0)'; @@ -2519,27 +2801,29 @@ setTransfrom\(\)方法使用的参数和transform\(\)方法相同，但setTransf ctx.fillRect(20, 20, 100, 80); ``` + ![](figures/zh-cn_image_0000001127284952.png) + -## shadowColor +## shadowColor 设置绘制阴影时的阴影颜色。 - 参数 - -

参数

类型

+

类型

描述

+

描述

blur

+

blur

number

+

number

设置模糊效果的程度值，值越大越模糊，精度为float 。

+

设置模糊效果的程度值，值越大越模糊，精度为float 。

参数

+ + - - - - - @@ -2551,8 +2835,6 @@ setTransfrom\(\)方法使用的参数和transform\(\)方法相同，但setTransf - 示例 - ![](figures/zh-cn_image_0000001059148588.png) - ``` ctx.shadowBlur = 30; ctx.shadowColor = 'rgb(0,0,255)'; @@ -2560,27 +2842,29 @@ setTransfrom\(\)方法使用的参数和transform\(\)方法相同，但setTransf ctx.fillRect(30, 30, 100, 100); ``` + ![](figures/zh-cn_image_0000001127284944.png) -## shadowOffsetX + +## shadowOffsetX 设置绘制阴影时和原有对象的水平偏移值。 - 参数 - -

参数

类型

+

类型

描述

+

描述

color

+

color

<color>

+

<color>

阴影的颜色值。

+

阴影的颜色值。

参数

+ + - - - - - @@ -2592,8 +2876,6 @@ setTransfrom\(\)方法使用的参数和transform\(\)方法相同，但setTransf - 示例 - ![](figures/zh-cn_image_0000001058670782.png) - ``` ctx.shadowBlur = 10; ctx.shadowOffsetX = 20; @@ -2602,27 +2884,29 @@ setTransfrom\(\)方法使用的参数和transform\(\)方法相同，但setTransf ctx.fillRect(20, 20, 100, 80); ``` + ![](figures/zh-cn_image_0000001127125148.png) -## shadowOffsetY + +## shadowOffsetY 设置绘制阴影时和原有对象的垂直偏移值。 - 参数 - -

参数

类型

+

类型

描述

+

描述

offsetX

+

offsetX

number

+

number

阴影距离原有对象的x轴方向偏移值。

+

阴影距离原有对象的x轴方向偏移值。

参数

+ + - - - - - @@ -2634,8 +2918,6 @@ setTransfrom\(\)方法使用的参数和transform\(\)方法相同，但setTransf - 示例 - ![](figures/zh-cn_image_0000001058670879.png) - ``` ctx.shadowBlur = 10; ctx.shadowOffsetY = 20; @@ -2644,4 +2926,93 @@ setTransfrom\(\)方法使用的参数和transform\(\)方法相同，但setTransf ctx.fillRect(30, 30, 100, 100); ``` + ![](figures/zh-cn_image_0000001173164825.png) + + +## imageSmoothingEnabled6+ + +用于设置绘制图片时是否进行图像平滑度调整。 + +- 参数 + + +

参数

类型

+

类型

描述

+

描述

offsetY

+

offsetY

number

+

number

阴影距离原有对象的y轴方向偏移值。

+

阴影距离原有对象的y轴方向偏移值。
+ + + + + + + + + +

参数

+

类型

+

描述

+

enabled

+

boolean

+

是否进行图像平滑度调整，默认值为true，即启用。

+
+ +- 返回值 + + 无 + +- 示例 + + ``` + var img = new Image(); + img.src = 'common/image/huawei.jpg'; + img.onload = function() { + ctx.imageSmoothingEnabled = false; + ctx.drawImage(img, 0, 0, 400, 200); + }; + ``` + + ![](figures/smoothOff.png) + + +## transferFromImageBitmap\(\)7+ + +显示给定的ImageBitmap对象。 + +- 参数 + + + + + + + + + + + + +

参数

+

类型

+

描述

+

bitmap

+

ImageBitmap

+

待显示的ImageBitmap对象。

+
+ +- 返回值 + + 无 + +- 示例 + + ``` + var canvas = this.$refs.canvasId.getContext('2d'); + var offscreen = new OffscreenCanvas(500,500); + var offscreenCanvasCtx = offscreen.getContext("2d"); + offscreenCanvasCtx.fillRect(0, 0, 200, 200); + + var bitmap = offscreen.transferToImageBitmap(); + canvas.transferFromImageBitmap(bitmap); + ``` + + ![](figures/zh-cn_image_0000001198690237.png) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-canvas-image.md b/zh-cn/application-dev/js-reference/component/js-components-canvas-image.md new file mode 100644 index 0000000000000000000000000000000000000000..fcf634df4393168ff7c71993b04f9b4e7ee6ed18 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-canvas-image.md @@ -0,0 +1,97 @@ +# Image对象 + +- [属性](#zh-cn_topic_0000001173164737_section1968021961113) +- [示例](#zh-cn_topic_0000001173164737_section13457717134912) + +图片对象。 + +## 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

属性

+

类型

+

默认值

+

必填

+

描述

+

src

+

string

+

-

+

是

+

图片资源的路径。。

+

width

+

<length>

+

0px

+

否

+

图片的宽度。

+

height

+

<length>

+

0px

+

否

+

图片的高度。

+

onload

+

Function

+

-

+

否

+

图片加载成功后触发该事件，无参数。

+

onerror

+

Function

+

-

+

否

+

图片加载失败后触发该事件，无参数。

+
+ +## 示例 + +``` +var ctx = this.$element('drawImage').getContext('2d'); +var img = new Image(); +img.src = 'common/images/huawei.jpg'; +img.onload = function() { + console.log('Image load success'); + ctx.drawImage(img, 0, 0, 360, 250); +}; +img.onerror = function() { + console.log('Image load fail'); +}; +``` + +![](figures/zh-cn_image_0000001198530395.png) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-canvas-imagebitmap.md b/zh-cn/application-dev/js-reference/component/js-components-canvas-imagebitmap.md new file mode 100644 index 0000000000000000000000000000000000000000..990ba799a97337aa475366789e864884893a973d --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-canvas-imagebitmap.md @@ -0,0 +1,37 @@ +# ImageBitmap对象 + +- [属性](#zh-cn_topic_0000001181948861_section661391987) + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7 开始支持。 + +ImageBitmap对象由OffscreenCanvas对象的transferToImageBitmap\(\)方法生成，存储了offscreen canvas渲染的像素数据。 + +## 属性 + + + + + + + + + + + + + + + + +

属性

+

类型

+

描述

+

width

+

number

+

ImageBitmap的像素宽度。

+

height

+

number

+

ImageBitmap的像素高度。

+
+ diff --git "a/zh-cn/application-dev/js-reference/ImageData\345\257\271\350\261\241.md" b/zh-cn/application-dev/js-reference/component/js-components-canvas-imagedata.md old mode 100755 new mode 100644 similarity index 32% rename from "zh-cn/application-dev/js-reference/ImageData\345\257\271\350\261\241.md" rename to zh-cn/application-dev/js-reference/component/js-components-canvas-imagedata.md index 95f1382d22a711af754b0ba7cd8983c8fefb894a..843b330bd17496622e206c8d9122b05756b9b5e2 --- "a/zh-cn/application-dev/js-reference/ImageData\345\257\271\350\261\241.md" +++ b/zh-cn/application-dev/js-reference/component/js-components-canvas-imagedata.md @@ -1,39 +1,39 @@ -# ImageData对象 +# ImageData对象 -- [属性](#zh-cn_topic_0000001058340509_section661391987) +- [属性](#zh-cn_topic_0000001127125022_section661391987) ImageData对象可以存储canvas渲染的像素数据。 -## 属性 +## 属性 - -

属性

+ + - - - - - - - - - - - diff --git a/zh-cn/application-dev/js-reference/component/js-components-canvas-offscreencanvas.md b/zh-cn/application-dev/js-reference/component/js-components-canvas-offscreencanvas.md new file mode 100644 index 0000000000000000000000000000000000000000..3fcda63304f82ef206ae6f08fa1a1bf7d696cea8 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-canvas-offscreencanvas.md @@ -0,0 +1,95 @@ +# OffscreenCanvas对象 + +- [属性](#zh-cn_topic_0000001180744579_section661391987) +- [方法](#zh-cn_topic_0000001180744579_section47669296127) +- [示例](#zh-cn_topic_0000001180744579_section13457717134912) + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7 开始支持。 + +可以离屏渲染的canvas对象。 + +## 属性 + + +

属性

类型

+

类型

描述

+

描述

width

+

width

number

+

number

矩形区域实际像素宽度。

+

矩形区域实际像素宽度。

height

+

height

number

+

number

矩形区域实际像素高度。

+

矩形区域实际像素高度。

data

+

data

<Uint8ClampedArray>

+

<Uint8ClampedArray>

一维数组，保存了相应的颜色数据，数据值范围为0到255。

+

一维数组，保存了相应的颜色数据，数据值范围为0到255。
+ + + + + + + + + + + + + +

属性

+

类型

+

描述

+

width

+

number

+

offscreen canvas对象的宽度。

+

height

+

number

+

offscreen canvas对象的高度。

+
+ +## 方法 + + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

getContext

+

contextId: "2d", options?: CanvasRenderingContext2DSettings

+

调用方法如下两种：

+

var ctx = canvas.getContext(contextId);

+

var ctx = canvas.getContext(contextId, options);

+

其中contextId为必填项，当前仅支持"2d"，options为可选项，暂时不支持。

+

获取offscreen canvas绘图上下文，参数仅支持“2d”，返回值为2D绘制对象，该对象提供具体的2D绘制操作。详见OffscreenCanvasRenderingContext2D对象章节。

+

toDataURL

+

type?: string, quality?: number

+

生成一个包含图片展示的URL。

+
  • type：可选参数，用于指定图像格式，默认格式为image/png。
  • quality：在指定图片格式为image/jpeg或image/webp的情况下，可以从0到1的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。
+

transferToImageBitmap

+

无

+

从OffscreenCanvas最近渲染的图像创建一个 ImageBitmap 对象

+
+ +## 示例 + +``` +var canvas = this.$refs.canvasId.getContext('2d'); +var offscreen = new OffscreenCanvas(500,500); +var offscreenCanvasCtx = offscreen.getContext("2d"); + +// ... some drawing for the canvas using the offscreenCanvasCtx ... + +var dataURL = offscreen.toDataURL(); +console.log(dataURL); //data:image/png;base64,xxxxxx + +var bitmap = offscreen.transferToImageBitmap(); +canvas.transferFromImageBitmap(bitmap); +``` + diff --git a/zh-cn/application-dev/js-reference/component/js-components-canvas-offscreencanvasrenderingcontext2d.md b/zh-cn/application-dev/js-reference/component/js-components-canvas-offscreencanvasrenderingcontext2d.md new file mode 100644 index 0000000000000000000000000000000000000000..1ffa1152074672ac7d06e90ca1ff89d77343c0f1 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-canvas-offscreencanvasrenderingcontext2d.md @@ -0,0 +1,213 @@ +# OffscreenCanvasRenderingContext2D对象 + +- [属性](#zh-cn_topic_0000001180864495_section661391987) +- [方法](#zh-cn_topic_0000001180864495_section47669296127) + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7 开始支持。 + +使用OffscreenCanvasRenderingContext2D在offscreen canvas上进行绘制，绘制对象可以是矩形、文本、图片等 + +## 属性 + +除支持与CanvasRenderingContext2D对象相同的属性外，还支持如下属性： + + + + + + + + + + + + +

属性

+

类型

+

描述

+

filter

+

string

+

设置图像的滤镜。

+

支持的滤镜效果如下：

+
  • blur：给图像设置高斯模糊
  • brightness：给图片应用一种线性乘法，使其看起来更亮或更暗
  • contrast：调整图像的对比度
  • drop-shadow：给图像设置一个阴影效果
  • grayscale：将图像转换为灰度图像
  • hue-rotate：给图像应用色相旋转
  • invert：反转输入图像
  • opacity：转化图像的透明程度
  • saturate：转换图像饱和度
  • sepia：将图像转换为深褐色
+
+ +- 示例 + +``` +var ctx = this.$refs.canvasid.getContext('2d'); +var offscreen = new OffscreenCanvas(360, 500); +var offCanvas2 = offscreen.getContext("2d"); +var img = new Image(); +img.src = 'common/images/flower.jpg'; +offCanvas2.drawImage(img, 0, 0, 100, 100); +offCanvas2.filter = 'blur(5px)'; +offCanvas2.drawImage(img, 100, 0, 100, 100); + +offCanvas2.filter = 'grayscale(50%)'; +offCanvas2.drawImage(img, 200, 0, 100, 100); + +offCanvas2.filter = 'hue-rotate(90deg)'; +offCanvas2.drawImage(img, 0, 100, 100, 100); + +offCanvas2.filter = 'invert(100%)'; +offCanvas2.drawImage(img, 100, 100, 100, 100); + +offCanvas2.filter = 'drop-shadow(8px 8px 10px green)'; +offCanvas2.drawImage(img, 200, 100, 100, 100); + +offCanvas2.filter = 'brightness(0.4)'; +offCanvas2.drawImage(img, 0, 200, 100, 100); + +offCanvas2.filter = 'opacity(25%)'; +offCanvas2.drawImage(img, 100, 200, 100, 100); + +offCanvas2.filter = 'saturate(30%)'; +offCanvas2.drawImage(img, 200, 200, 100, 100); + +offCanvas2.filter = 'sepia(60%)'; +offCanvas2.drawImage(img, 0, 300, 100, 100); + +offCanvas2.filter = 'contrast(200%)'; +offCanvas2.drawImage(img, 100, 300, 100, 100); +var bitmap = offscreen.transferToImageBitmap(); +ctx.transferFromImageBitmap(bitmap); +``` + +![](figures/zh-cn_image_0000001152773860.png) + +## 方法 + +除支持与CanvasRenderingContext2D对象相同的方法外，还支持如下方法： + + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

isPointInPath

+

+

path?: Path2D, x: number, y: number

+

判断指定点是否在路径的区域内。

+

path：可选对象，指定用来判断的路径。若没有设置，则使用当前路径

+

x：待判断点的x轴坐标

+

y：待判断点的y轴坐标

+

isPointInStroke

+

path?: Path2D, x: number, y: number

+

判断指定点是否在路径的边缘线上。

+

path：可选对象，指定用来判断的路径。若没有设置，则使用当前路径

+

x：待判断点的x轴坐标

+

y：待判断点的y轴坐标

+

resetTransform

+

无

+

将当前变换重置为单位矩阵。

+
+ +- isPointInPath示例 + +![](figures/zh-cn_image_0000001181449919.png) + +``` + +
+ In path:{{textValue}} +
+ +``` + +``` +// xxx.js +export default { + data: { + textValue: 0 + }, + onShow(){ + var canvas = this.$refs.canvas.getContext('2d'); + var offscreen = new OffscreenCanvas(500,500); + var offscreenCanvasCtx = offscreen.getContext("2d"); + + offscreenCanvasCtx.rect(10, 10, 100, 100); + offscreenCanvasCtx.fill(); + this.textValue = offscreenCanvasCtx.isPointInPath(30, 70); + + var bitmap = offscreen.transferToImageBitmap(); + canvas.transferFromImageBitmap(bitmap); + } +} +``` + +- isPointInStroke示例 + +![](figures/zh-cn_image_0000001181458721.png) + +``` + +
+ In path:{{textValue}} +
+ +``` + +``` +// xxx.js +export default { + data: { + textValue: 0 + }, + onShow(){ + var canvas = this.$refs.canvas.getContext('2d'); + var offscreen = new OffscreenCanvas(500,500); + var offscreenCanvasCtx = offscreen.getContext("2d"); + + offscreenCanvasCtx.rect(10, 10, 100, 100); + offscreenCanvasCtx.stroke(); + this.textValue = offscreenCanvasCtx.isPointInStroke(50, 10); + + var bitmap = offscreen.transferToImageBitmap(); + canvas.transferFromImageBitmap(bitmap); + } +} +``` + +- resetTransform示例 + +![](figures/zh-cn_image_0000001135171488.png) + +``` +var canvas = this.$refs.canvas.getContext('2d'); +var offscreen = new OffscreenCanvas(500,500); +var offscreenCanvasCtx = offscreen.getContext("2d"); + +offscreenCanvasCtx.transform(1, 0, 1.7, 1, 0, 0); +offscreenCanvasCtx.fillStyle = 'gray'; +offscreenCanvasCtx.fillRect(40, 40, 50, 20); +offscreenCanvasCtx.fillRect(40, 90, 50, 20); + +// Non-skewed rectangles +offscreenCanvasCtx.resetTransform(); +offscreenCanvasCtx.fillStyle = 'red'; +offscreenCanvasCtx.fillRect(40, 40, 50, 20); +offscreenCanvasCtx.fillRect(40, 90, 50, 20); + +var bitmap = offscreen.transferToImageBitmap(); +canvas.transferFromImageBitmap(bitmap); +``` + diff --git a/zh-cn/application-dev/js-reference/component/js-components-canvas-path2d.md b/zh-cn/application-dev/js-reference/component/js-components-canvas-path2d.md new file mode 100644 index 0000000000000000000000000000000000000000..6f26d1a670de80c5b371d544e632945b2379fd09 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-canvas-path2d.md @@ -0,0 +1,704 @@ +# Path2D对象 + +- [addPath\(\)](#zh-cn_topic_0000001173164751_section12484748163816) +- [setTransform\(\)](#zh-cn_topic_0000001173164751_section68262045132013) +- [closePath\(\)](#zh-cn_topic_0000001173164751_section653891424217) +- [moveTo\(\)](#zh-cn_topic_0000001173164751_section384917162456) +- [lineTo\(\)](#zh-cn_topic_0000001173164751_section1374011322484) +- [bezierCurveTo\(\)](#zh-cn_topic_0000001173164751_section122413525494) +- [quadraticCurveTo\(\)](#zh-cn_topic_0000001173164751_section16154556165015) +- [arc\(\)](#zh-cn_topic_0000001173164751_section950116919527) +- [arcTo\(\)](#zh-cn_topic_0000001173164751_section98421358175219) +- [ellipse\(\)](#zh-cn_topic_0000001173164751_section8146160205420) +- [rect\(\)](#zh-cn_topic_0000001173164751_section18565225124518) + +路径对象，支持通过对象的接口进行路径的描述，并通过Canvas的stroke接口进行绘制。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从 API Version 6 开始支持。 + +## addPath\(\) + +将另一个路径添加到当前的路径对象中。 + +- 参数 + + + + + + + + + + + + +

参数

+

类型

+

描述

+

path

+

object

+

需要添加到当前路径的路径对象

+
+ +- 返回值 + + 无 + +- 示例 + + ![](figures/zh-cn_image_0000001173164873.png) + + ``` + const ctx = canvas.getContext('2d'); + var path1 = ctx.createPath2D("M250 150 L150 350 L350 350 Z"); + var path2 = ctx.createPath2D(); + path2.addPath(path1); + ctx.stroke(path2); + ``` + + +## setTransform\(\) + +依据圆弧经过的点和圆弧半径创建圆弧路径。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

scaleX

+

number

+

x轴的缩放比例

+

skewX

+

number

+

x轴的倾斜角度

+

skewY

+

number

+

y轴的倾斜角度

+

scaleY

+

number

+

y轴的缩放比例

+

translateX

+

number

+

x轴的平移距离

+

translateY

+

number

+

y轴的平移距离

+
+ +- 返回值 + + 无 + +- 示例 + + ![](figures/zh-cn_image_0000001127125208.png) + + ``` + const ctx = canvas.getContext('2d'); + var path = ctx.createPath2D("M250 150 L150 350 L350 350 Z"); + path.setTransform(0.8, 0, 0, 0.4, 0, 0); + ctx.stroke(path); + ``` + + +## closePath\(\) + +将路径的当前点移回到路径的起点，当前点到起点间画一条直线。如果形状已经闭合或只有一个点，则此功能不执行任何操作。 + +- 参数 + + 无 + +- 返回值 + + 无 + +- 示例 + + ![](figures/zh-cn_image_0000001127125202.png) + + ``` + const ctx = canvas.getContext('2d'); + var path = ctx.createPath2D(); + path.moveTo(200, 100); + path.lineTo(300, 100); + path.lineTo(200, 200); + path.closePath(); + ctx.stroke(path); + ``` + + +## moveTo\(\) + +将路径的当前坐标点移动到目标点，移动过程中不绘制线条。 + +- 参数 + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

x

+

number

+

目标点X轴坐标

+

y

+

number

+

目标点Y轴坐标

+
+ +- 返回值 + + 无 + +- 示例 + + ![](figures/zh-cn_image_0000001173164869.png) + + ``` + const ctx = canvas.getContext('2d'); + var path = ctx.createPath2D(); + path.moveTo(50, 100); + path.lineTo(250, 100); + path.lineTo(150, 200); + path.closePath(); + ctx.stroke(path); + ``` + + +## lineTo\(\) + +动当前点绘制一天直线到目标点。 + +- 参数 + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

x

+

number

+

目标点X轴坐标

+

y

+

number

+

目标点Y轴坐标

+
+ +- 返回值 + + 无 + +- 示例 + + ![](figures/zh-cn_image_0000001127285024.png) + + ``` + const ctx = canvas.getContext('2d'); + var path = ctx.createPath2D(); + path.moveTo(100, 100); + path.lineTo(100, 200); + path.lineTo(200, 200); + path.lineTo(200, 100); + path.closePath(); + ctx.stroke(path); + ``` + + +## bezierCurveTo\(\) + +创建三次贝赛尔曲线的路径。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

cp1x

+

number

+

第一个贝塞尔参数的x坐标值。

+

cp1y

+

number

+

第一个贝塞尔参数的y坐标值。

+

cp2x

+

number

+

第二个贝塞尔参数的x坐标值。

+

cp2y

+

number

+

第二个贝塞尔参数的y坐标值。

+

x

+

number

+

路径结束时的x坐标值。

+

y

+

number

+

路径结束时的y坐标值。

+
+ +- 返回值 + + 无 + +- 示例 + + ![](figures/zh-cn_image_0000001173324783.png) + + ``` + const ctx = canvas.getContext('2d'); + var path = ctx.createPath2D(); + path.moveTo(10, 10); + path.bezierCurveTo(20, 100, 200, 100, 200, 20); + ctx.stroke(path); + ``` + + +## quadraticCurveTo\(\) + +创建二次贝赛尔曲线的路径。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

cpx

+

number

+

贝塞尔参数的x坐标值。

+

cpy

+

number

+

贝塞尔参数的y坐标值。

+

x

+

number

+

路径结束时的x坐标值。

+

y

+

number

+

路径结束时的y坐标值。

+
+ +- 返回值 + + 无 + +- 示例 + + ![](figures/zh-cn_image_0000001173164871.png) + + ``` + const ctx = canvas.getContext('2d'); + var path = ctx.createPath2D(); + path.moveTo(10, 10); + path.quadraticCurveTo(100, 100, 200, 20); + ctx.stroke(path); + ``` + + +## arc\(\) + +绘制弧线路径。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

x

+

number

+

弧线圆心的x坐标值。

+

y

+

number

+

弧线圆心的y坐标值。

+

radius

+

number

+

弧线的圆半径。

+

startAngle

+

number

+

弧线的起始弧度。

+

endAngle

+

number

+

弧线的终止弧度。

+

anticlockwise

+

boolean

+

是否逆时针绘制圆弧。

+
+ +- 返回值 + + 无 + +- 示例 + + ![](figures/zh-cn_image_0000001173164867.png) + + ``` + const ctx = canvas.getContext('2d'); + var path = ctx.createPath2D(); + path.arc(100, 75, 50, 0, 6.28); + ctx.stroke(path); + ``` + + +## arcTo\(\) + +依据圆弧经过的点和圆弧半径创建圆弧路径。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

x1

+

number

+

圆弧经过的第一个点的x坐标值。

+

y1

+

number

+

圆弧经过的第一个点的y坐标值。

+

x2

+

number

+

圆弧经过的第二个点的x坐标值。

+

y2

+

number

+

圆弧经过的第二个点的y坐标值。

+

radius

+

number

+

圆弧的圆半径值。

+
+ +- 返回值 + + 无 + +- 示例 + + ![](figures/zh-cn_image_0000001127125204.png) + + ``` + const ctx = canvas.getContext('2d'); + var path = ctx.createPath2D(); + path.arcTo(150, 20, 150, 70, 50); + ctx.stroke(path); + ``` + + +## ellipse\(\) + +在规定的矩形区域绘制一个椭圆。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

x

+

number

+

椭圆圆心的x轴坐标。

+

y

+

number

+

椭圆圆心的y轴坐标。

+

radiusX

+

number

+

椭圆x轴的半径长度。

+

radiusY

+

number

+

椭圆y轴的半径长度。

+

rotation

+

number

+

椭圆的旋转角度，单位为弧度。

+

startAngle

+

number

+

椭圆绘制的起始点角度，以弧度表示。

+

endAngle

+

number

+

椭圆绘制的结束点角度，以弧度表示。

+

anticlockwise

+

number

+

是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。(可选参数，默认为0)

+
+ +- 返回值 + + 无 + +- 示例 + + ![](figures/zh-cn_image_0000001173324787.png) + + ``` + const ctx = canvas.getContext('2d'); + var path = ctx.createPath2D(); + path.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1); + ctx.stroke(path); + ``` + + +## rect\(\) + +创建矩形路径。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

x

+

number

+

指定矩形的左上角x坐标值。

+

y

+

number

+

指定矩形的左上角y坐标值。

+

width

+

number

+

指定矩形的宽度。

+

height

+

number

+

指定矩形的高度。

+
+ +- 返回值 + + 无 + +- 示例 + + ![](figures/zh-cn_image_0000001127125212.png) + + ``` + const ctx = canvas.getContext('2d'); + var path = ctx.createPath2D(); + path.rect(20, 20, 100, 100); + ctx.stroke(path); + ``` + + diff --git a/zh-cn/application-dev/js-reference/component/js-components-canvas.md b/zh-cn/application-dev/js-reference/component/js-components-canvas.md new file mode 100644 index 0000000000000000000000000000000000000000..441a497e85eb99677957259295dbd4cb743f4726 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-canvas.md @@ -0,0 +1,21 @@ +# 画布组件 + +- **[canvas组件](js-components-canvas-canvas.md)** + +- **[CanvasRenderingContext2D对象](js-components-canvas-canvasrenderingcontext2d.md)** + +- **[Image对象](js-components-canvas-image.md)** + +- **[CanvasGradient对象](js-components-canvas-canvasgradient.md)** + +- **[ImageData对象](js-components-canvas-imagedata.md)** + +- **[Path2D对象](js-components-canvas-path2d.md)** + +- **[ImageBitmap对象](js-components-canvas-imagebitmap.md)** + +- **[OffscreenCanvas对象](js-components-canvas-offscreencanvas.md)** + +- **[OffscreenCanvasRenderingContext2D对象](js-components-canvas-offscreencanvasrenderingcontext2d.md)** + + diff --git a/zh-cn/application-dev/js-reference/component/js-components-common-animation.md b/zh-cn/application-dev/js-reference/component/js-components-common-animation.md new file mode 100644 index 0000000000000000000000000000000000000000..c430da83722e8c682c91e9fb4cef2b56b5bda859 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-common-animation.md @@ -0,0 +1,531 @@ +# 动画样式 + +组件支持动态的旋转、平移、缩放效果，可在style或css中设置。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

描述

+

transform-origin

+

string6+ | <percentage> | <length> string6+ | <percentage> | <length>

+

center center

+

变换对象的原点位置，支持px和百分比(相对于动画目标组件)，如果仅设置一个值，另一个值为50%，第一个string的可选值为：left | center | right ，第二个string的可选值为：top | center | bottom。

+

示例：

+

transform-origin: 200px 30%。

+

transform-origin: 100px top。

+

transform-origin: center center。

+

transform

+

string

+

-

+

支持同时设置平移/旋转/缩放的属性。

+

详见表1。

+

animation6+

+

string

+

0s ease 0s 1 normal none running none

+

格式：duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name，每个字段不区分先后，但是 duration / delay 按照出现的先后顺序解析。

+

animation-name

+

string

+

-

+

指定@keyframes，详见表2。

+

animation-delay

+

<time>

+

0

+

定义动画播放的延迟时间。支持的单位为[s(秒)|ms(毫秒) ]，默认单位为ms，格式为：1000ms或1s。

+

animation-duration

+

<time>

+

0

+

定义一个动画周期。支持的单位为[s(秒)|ms(毫秒) ]，默认单位为ms，格式为：1000ms或1s。

+
说明：

animation-duration 样式必须设置，否则时长为 0，则不会播放动画。

+
+

animation-iteration-count

+

number | infinite

+

1

+

定义动画播放的次数，默认播放一次，可通过设置为infinite无限次播放。

+

animation-timing-function

+

string

+

ease

+

描述动画执行的速度曲线，用于使动画更为平滑。

+

可选项有：

+
  • linear：表示动画从头到尾的速度都是相同的。
  • ease：表示动画以低速开始，然后加快，在结束前变慢，cubic-bezier(0.25, 0.1, 0.25, 1.0)。
  • ease-in：表示动画以低速开始，cubic-bezier(0.42, 0.0, 1.0, 1.0)。
  • ease-out：表示动画以低速结束，cubic-bezier(0.0, 0.0, 0.58, 1.0)。
  • ease-in-out：表示动画以低速开始和结束，cubic-bezier(0.42, 0.0, 0.58, 1.0)。
  • friction：阻尼曲线，cubic-bezier(0.2, 0.0, 0.2, 1.0)。
  • extreme-deceleration：急缓曲线，cubic-bezier(0.0, 0.0, 0.0, 1.0)。
  • sharp：锐利曲线，cubic-bezier(0.33, 0.0, 0.67, 1.0)。
  • rhythm：节奏曲线，cubic-bezier(0.7, 0.0, 0.2, 1.0)。
  • smooth：平滑曲线，cubic-bezier(0.4, 0.0, 0.4, 1.0)。
  • cubic-bezier：在三次贝塞尔函数中定义动画变化过程，入参的x和y值必须处于0-1之间。
  • steps: 阶梯曲线6+。语法：steps(number[, end|start])；number必须设置，支持的类型为正整数。第二个参数可选，表示在每个间隔的起点或是终点发生阶跃变化，支持设置end或start，默认值为end。
+

animation-direction6+

+

string

+

normal

+

指定动画的播放模式：

+
  • normal： 动画正向循环播放。
  • reverse： 动画反向循环播放。
  • alternate：动画交替循环播放，奇数次正向播放，偶数次反向播放。
  • alternate-reverse：动画反向交替循环播放，奇数次反向播放，偶数次正向播放。
+

animation-fill-mode

+

string

+

none

+

指定动画开始和结束的状态：

+
  • none：在动画执行之前和之后都不会应用任何样式到目标上。
  • forwards：在动画结束后，目标将保留动画结束时的状态（在最后一个关键帧中定义）。
  • backwards6+：动画将在animation-delay期间应用第一个关键帧中定义的值。当animation-direction为"normal"或"alternate"时应用from关键帧中的值，当animation-direction为"reverse"或"alternate-reverse"时应用to关键帧中的值。
  • both6+：动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。
+

animation-play-state6+

+

string

+

running

+

指定动画的当前状态：

+
  • paused：动画状态为暂停。
  • running：动画状态为播放。
+

transition6+

+

string

+

all 0 ease 0

+

指定组件状态切换时的过渡效果，可以通过transition属性设置如下四个属性：

+
  • transition-property：规定设置过渡效果的 CSS 属性的名称，目前支持宽、高、背景色。
  • transition-duration：规定完成过渡效果需要的时间，单位秒。
  • transition-timing-function：规定过渡效果的时间曲线，支持样式动画提供的曲线。
  • transition-delay：规定过渡效果延时启动时间，单位秒。
+
+ +**表 1** transform操作说明 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

描述

+

none6+

+

-

+

不进行任何转换。

+

matrix6+

+

<number>

+

入参为六个值的矩阵，6个值分别代表：scaleX, skewY, skewX, scaleY, translateX, translateY。

+

matrix3d6+

+

<number>

+

入参为十六个值的4X4矩阵。

+

translate

+

<length>| <percent>

+

平移动画属性，支持设置x轴和y轴两个维度的平移参数。

+

translate3d6+

+

<length>| <percent>

+

三个入参，分别代表X轴、Y轴、Z轴的平移距离。

+

translateX

+

<length>| <percent>

+

X轴方向平移动画属性。

+

translateY

+

<length>| <percent>

+

Y轴方向平移动画属性。

+

translateZ6+

+

<length>| <percent>

+

Z轴的平移距离。

+

scale

+

<number>

+

缩放动画属性，支持设置x轴和y轴两个维度的缩放参数。

+

scale3d6+

+

<number>

+

三个入参，分别代表X轴、Y轴、Z轴的缩放参数。

+

scaleX

+

<number>

+

X轴方向缩放动画属性。

+

scaleY

+

<number>

+

Y轴方向缩放动画属性。

+

scaleZ6+

+

<number>

+

Z轴的缩放参数。

+

rotate

+

<deg> | <rad> | <grad>6+ | <turn>6+

+

旋转动画属性，支持设置x轴和y轴两个维度的选中参数。

+

rotate3d6+

+

<deg> | <rad> | <grad> | <turn>

+

四个入参，前三个分别为X轴、Y轴、Z轴的旋转向量，第四个是旋转角度。

+

rotateX

+

<deg> | <rad> | <grad>6+ | <turn>6+

+

X轴方向旋转动画属性。

+

rotateY

+

<deg> | <rad> | <grad>6+ | <turn>6+

+

Y轴方向旋转动画属性。

+

rotateZ6+

+

<deg> | <rad> | <grad> | <turn>

+

Z轴方向的旋转角度。

+

skew6+

+

<deg> | <rad> | <grad> | <turn>

+

两个入参，分别为X轴和Y轴的2D倾斜角度。

+

skewX6+

+

<deg> | <rad> | <grad> | <turn>

+

X轴的2D倾斜角度。

+

skewY6+

+

<deg> | <rad> | <grad> | <turn>

+

Y轴的2D倾斜角度。

+

perspective6+

+

<number>

+

3D透视场景下镜头距离元素表面的距离。

+
+ +**表 2** @keyframes属性说明 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

描述

+

background-color

+

<color>

+

-

+

动画执行后应用到组件上的背景颜色。

+

opacity

+

number

+

1

+

动画执行后应用到组件上的不透明度值，为介于0到1间的数值，默认为1。

+

width

+

<length>

+

-

+

动画执行后应用到组件上的宽度值。

+

height

+

<length>

+

-

+

动画执行后应用到组件上的高度值。

+

transform

+

string

+

-

+

定义应用在组件上的变换类型，见表1。

+

background-position6+

+

string | <percentage> | <length> string | <percentage> | <length>

+

50% 50%

+

背景图位置。单位支持百分比和px，第一个值是水平位置，第二个值是垂直位置。如果仅设置一个值，另一个值为50%。第一个string的可选值为：left | center | right ，第二个string的可选值为：top | center | bottom。

+

示例：

+
  • background-position: 200px 30%
  • background-position: 100px top
  • background-position: center center
+
+ +对于不支持起始值或终止值缺省的情况，可以通过from和to显示指定起始和结束。可以通过百分比指定动画运行的中间状态6+。示例： + +``` +
+
+
+
+``` + +``` +.container { + display: flex; + justify-content: center; + align-items: center; +} +.rect{ + width: 200px; + height: 200px; + background-color: #f76160; + animation: Go 3s infinite; +} +@keyframes Go +{ + from { + background-color: #f76160; + transform:translate(100px) rotate(0deg) scale(1.0); + } + /* 可以通过百分比指定动画运行的中间状态6+ */ + 50% { + background-color: #f76160; + transform:translate(100px) rotate(60deg) scale(1.3); + } + to { + background-color: #09ba07; + transform:translate(100px) rotate(180deg) scale(2.0); + } +} +``` + +![](figures/zh-cn_image_0000001173324797.gif) + +``` + +
+
+ animation-play-state: {{playState}} +
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; +} +.simpleSize { + background-color: blue; + width: 100px; + height: 100px; +} +.simpleAnimation { + animation: simpleFrames 9s; +} +@keyframes simpleFrames { + from { transform: translateX(0px); } + to { transform: translateX(100px); } +} +``` + +``` +// xxx.js +export default { + data: { + title: "", + playState: "running" + }, + toggleState() { + if (this.playState === "running") { + this.playState = "paused"; + } else { + this.playState = "running"; + } + } +} +``` + +![](figures/zh-cn_image_0000001127285034.gif) + +``` + +
+``` + +``` +/* xxx.css */ +.img { + width: 294px; + height: 233px; + background-image: url('common/heartBeat.jpg'); + background-repeat: no-repeat; + background-position: 0% 0%; + background-size: 900%; + animation-name: heartBeating; + animation-duration: 1s; + animation-delay: 0s; + animation-fill-mode: forwards; + animation-iteration-count: -1; + animation-timing-function: steps(8, end); +} + +@keyframes heartBeating { + from { background-position: 0% 0%;} + to { background-position: 100% 0%;} +} +``` + +``` + +
+
+
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; +} +.content { /* 组件状态1 */ + height: 200px; + width: 200px; + background-color: red; + transition: all 5s ease 0s; +} +.content:active { /* 组件状态2 */ + height: 400px; + width: 400px; + background-color: blue; + transition: all 5s linear 0s; +} +``` + +![](figures/zh-cn_image_0000001152833768.gif) + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>@keyframes的from/to不支持动态绑定。 +>steps函数的end和start含义如下图所示。 +>![](figures/zh-cn_image_0000001127125220.png) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-common-atomic-layout.md b/zh-cn/application-dev/js-reference/component/js-components-common-atomic-layout.md new file mode 100644 index 0000000000000000000000000000000000000000..6da16f6a4912fdd79708000eb5087c88fd25d86a --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-common-atomic-layout.md @@ -0,0 +1,94 @@ +# 原子布局 + +- [隐藏能力](#zh-cn_topic_0000001127125020_section0441154013284) +- [占比能力](#zh-cn_topic_0000001127125020_section13725752194418) +- [固定比例](#zh-cn_topic_0000001127125020_section922215811557) + +在屏幕形态和规格不同等情况下，布局效果需要实现自适应，因此系统提供了面向不同屏幕尺寸界面自适应适配的布局能力，称为原子布局。设计师可以考虑使用原子能力，定义元素在不同形态的尺寸界面上体现的自适应规则。开发者可以使用原子布局能力，快速实现让应用在多形态屏幕上有与设计效果相匹配的自适应效果。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 5 开始支持。 + +## 隐藏能力 + +在非折行flex布局基础上，增加了显示优先级标记，可以调整组件内元素水平/垂直方向的显示优先级，根据当前组件容器的可用空间来显示内容。 + + + + + + + + + + + + + + +

样式

+

类型

+

默认值

+

说明

+

display-index

+

number

+

0

+

适用于div等支持flex布局的容器组件中的子组件上，当容器组件在flex主轴上尺寸不足以显示全部内容时，按照display-index值从小到大的顺序进行隐藏，具有相同display-index值的组件同时隐藏，默认值为0，表示隐藏。

+
+ +## 占比能力 + +在非折行的flex布局中，定义了占比能力的组件，保证指定元素始终在容器的某一个比例空间中进行布局。 + + + + + + + + + + + + + + +

样式

+

类型

+

默认值

+

说明

+

flex-weight

+

number

+

-

+

指明当前元素在flex主轴方向上尺寸权值，当且仅当容器组件中所有节点均设置此属性时生效，当前元素尺寸为： 容器主轴尺寸 * 当前权值 / 所有子元素权值和。

+
+ +## 固定比例 + +定义了组件固定比例调整尺寸的能力。 + + + + + + + + + + + + + + +

样式

+

类型

+

默认值

+

说明

+

aspect-ratio

+

number

+

-

+

1. 接受任意大于0的浮点值，定义为该节点的宽度与高度比，设置该属性后，该元素尺寸宽高比按照此属性值进行调整。

+

2. 遵守最大值与最小值的限制。

+

3. 在flex布局中，主轴尺寸先进行调整，后根据该尺寸调整交叉轴。

+
+ diff --git a/zh-cn/application-dev/js-reference/component/js-components-common-attributes.md b/zh-cn/application-dev/js-reference/component/js-components-common-attributes.md new file mode 100644 index 0000000000000000000000000000000000000000..180b8a5dbdb8979ff364bf1415b296a730d78ec3 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-common-attributes.md @@ -0,0 +1,175 @@ +# 通用属性 + +- [常规属性](#zh-cn_topic_0000001173324641_section861395713012) +- [渲染属性](#zh-cn_topic_0000001173324641_section1894362211119) + +## 常规属性 + +常规属性指的是组件普遍支持的用来设置组件基本标识和外观显示特征的属性。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

id

+

string

+

-

+

否

+

组件的唯一标识。

+

style

+

string

+

-

+

否

+

组件的样式声明。

+

class

+

string

+

-

+

否

+

组件的样式类，用于引用样式表。

+

ref

+

string

+

-

+

否

+

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

+

disabled

+

boolean

+

false

+

否

+

当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。

+

focusable

+

boolean

+

false

+

否

+

当前组件是否可以获取焦点。 当focusable设置为true时，组件可以响应焦点事件和按键事件。当组件额外设置了按键事件或者点击事件时，框架会设置该属性为true。

+

data-*6+

+

string

+

-

+

否

+

给当前组件设置data-*属性，进行相应的数据存储和读取。大小写不敏感，如data-A和data-a默认相同。JS文件中：

+
  • 在事件回调中使用 e.target.dataSet.a读取数据，e为事件回调函数入参。
  • 使用$element或者$refs获取DOM元素后，通过dataSet.a进行访问。
+

click-effect5+

+

string

+

-

+

否

+

通过这个属性可以设置组件的弹性点击效果，当前支持如下三种效果：

+
  • spring-small：建议小面积组件设置，缩放(90%)。
  • spring-medium：建议中面积组件设置，缩放(95%)。
  • spring-large：建议大面积组件设置，缩放(95%)。
+

dir6+

+

string

+

auto

+

否

+

设置元素布局模式，支持设置rtl、ltr和auto三种属性值：

+
  • rtl：使用从右往左布局模式。
  • ltr：使用从左往右布局模式。
  • auto：跟随系统语言环境。
+
+ +## 渲染属性 + +组件普遍支持的用来设置组件是否渲染的属性。 + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

描述

+

for

+

Array

+

-

+

根据设置的数据列表，展开当前元素。

+

if

+

boolean

+

-

+

根据设置的boolean值，添加或移除当前元素。

+

show

+

boolean

+

-

+

根据设置的boolean值，显示或隐藏当前元素。

+
+ +>![](../../public_sys-resources/icon-note.gif) **说明：** +>属性和样式不能混用，不能在属性字段中进行样式设置。 + diff --git "a/zh-cn/application-dev/js-reference/\350\207\252\345\256\232\344\271\211\345\255\227\344\275\223\346\240\267\345\274\217.md" b/zh-cn/application-dev/js-reference/component/js-components-common-customizing-font.md old mode 100755 new mode 100644 similarity index 69% rename from "zh-cn/application-dev/js-reference/\350\207\252\345\256\232\344\271\211\345\255\227\344\275\223\346\240\267\345\274\217.md" rename to zh-cn/application-dev/js-reference/component/js-components-common-customizing-font.md index dc49f4d2dc51384f1408bba7db6b5f77c058ba86..faaf4df6667d910a3170998a0a3dc9199b54edfa --- "a/zh-cn/application-dev/js-reference/\350\207\252\345\256\232\344\271\211\345\255\227\344\275\223\346\240\267\345\274\217.md" +++ b/zh-cn/application-dev/js-reference/component/js-components-common-customizing-font.md @@ -1,16 +1,16 @@ -# 自定义字体样式 +# 自定义字体样式 -- [定义font-face](#zh-cn_topic_0000001059340506_section185107316712) -- [使用font-face](#zh-cn_topic_0000001059340506_section713052011710) +- [定义font-face](#zh-cn_topic_0000001173324599_section185107316712) +- [使用font-face](#zh-cn_topic_0000001173324599_section713052011710) font-face用于定义字体样式。应用可以在style中定义font-face来指定相应的字体名和字体资源，然后在font-family样式中引用该字体。 自定义字体可以是从项目中的字体文件中加载的字体。 ->![](public_sys-resources/icon-note.gif) **说明：** +>![](../../public_sys-resources/icon-note.gif) **说明：** >字体格式支持ttf和otf。 -## 定义font-face +## 定义font-face ``` @font-face { @@ -27,11 +27,11 @@ font-face用于定义字体样式。应用可以在style中定义font-face来指 自定义字体的来源，支持如下类别： -- 项目中的字体文件：通过url指定项目中的字体文件路径\(只支持绝对路径，详见[资源和文件访问规则](文件组织.md#zh-cn_topic_0000001058830797_section6620355202117)章节\)。 +- 项目中的字体文件：通过url指定项目中的字体文件路径\(只支持绝对路径，详见[资源和文件访问规则](../js-framework-file.md#zh-cn_topic_0000001127125012_section6620355202117)章节\)。 - 不支持设置多个src。 -## 使用font-face +## 使用font-face 可以在style中定义font-face，然后在font-family样式中指定该font-face的名称，从而应用font-face定义的字体。 diff --git a/zh-cn/application-dev/js-reference/component/js-components-common-events.md b/zh-cn/application-dev/js-reference/component/js-components-common-events.md new file mode 100644 index 0000000000000000000000000000000000000000..09987575f9b19bb8c33ba2c0dd0b1e891a77f193 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-common-events.md @@ -0,0 +1,481 @@ +# 通用事件 + +- [事件说明](#zh-cn_topic_0000001173324611_section05041657172410) +- [事件对象](#zh-cn_topic_0000001173324611_section18787165861818) + +## 事件说明 + +- 事件绑定在组件上，当组件达到事件触发条件时，会执行JS中对应的事件回调函数，实现页面UI视图和页面JS逻辑层的交互； +- 事件回调函数中通过参数可以携带额外的信息，如组件上的数据对象dataset，事件特有的回调参数。 + +相对于私有事件，大部分组件都可以绑定如下事件。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

是否支持冒泡

+

touchstart

+

TouchEvent

+

手指刚触摸屏幕时触发该事件。

+

是5+

+

touchmove

+

TouchEvent

+

手指触摸屏幕后移动时触发该事件。

+

是5+

+

touchcancel

+

TouchEvent

+

手指触摸屏幕中动作被打断时触发该事件。

+

是5+

+

touchend

+

TouchEvent

+

手指触摸结束离开屏幕时触发该事件。

+

是5+

+

click

+

-

+

点击动作触发该事件。

+

是6+

+

doubleclick7+

+		  

双击动作触发该事件

+

否

+

longpress

+

-

+

长按动作触发该事件。

+

否

+

swipe5+

+

SwipeEvent

+

组件上快速滑动后触发该事件。

+

否

+

attached6+

+

-

+

当前组件节点挂载在渲染树后触发。

+

否

+

detached6+

+

-

+

当前组件节点从渲染树中移除后触发。

+

否

+

pinchstart7+

+

PinchEvent

+

手指开始执行捏合操作时触发该事件。

+

否

+

pinchupdate7+

+

PinchEvent

+

手指执行捏合操作过程中触发该事件。

+

否

+

pinchend7+

+

PinchEvent

+

手指捏合操作结束离开屏幕时触发该事件。

+

否

+

pinchcancel7+

+

PinchEvent

+

手指捏合操作被打断时触发该事件。

+

否

+

dragstart7+

+

DragEvent

+

用户开始拖拽时触发该事件。

+

否

+

drag7+

+

DragEvent

+

拖拽过程中触发该事件。

+

否

+

dragend7+

+

DragEvent

+

用户拖拽完成后触发。

+

否

+

dragenter7+

+

DragEvent

+

进入释放目标时触发该事件。

+

否

+

dragover7+

+

DragEvent

+

在释放目标内拖动时触发。

+

否

+

dragleave7+

+

DragEvent

+

离开释放目标区域时触发。

+

否

+

drop7+

+

DragEvent

+

在可释放目标区域内释放时触发。

+

否

+
+ +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- 除上述事件外，其他事件均为非冒泡事件，如[input的change事件](js-components-basic-input.md#zh-cn_topic_0000001173324647_section1721512551218)，详见各个组件。 + +**表 1** BaseEvent对象属性列表 + + + + + + + + + + + + + + + + +

属性

+

类型

+

说明

+

type

+

string

+

当前事件的类型，比如click、longpress等。

+

timestamp

+

number

+

该事件触发时的时间戳。

+
+ +**表 2** TouchEvent对象属性列表\(继承BaseEvent\) + + + + + + + + + + + + + + + + +

属性

+

类型

+

说明

+

touches

+

Array<TouchInfo>

+

触摸事件时的属性集合，包含屏幕触摸点的信息数组。

+

changedTouches

+

Array<TouchInfo>

+

触摸事件时的属性集合，包括产生变化的屏幕触摸点的信息数组。数据格式和touches一样。该属性表示有变化的触摸点，如从无变有，位置变化，从有变无。例如用户手指刚接触屏幕时，touches数组中有数据，但changedTouches无数据。

+
+ +**表 3** TouchInfo + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

属性

+

类型

+

说明

+

globalX

+

number

+

距离屏幕左上角（不包括状态栏）横向距离。屏幕的左上角为原点。

+

globalY

+

number

+

距离屏幕左上角（不包括状态栏）纵向距离。屏幕的左上角为原点。

+

localX

+

number

+

距离被触摸组件左上角横向距离。组件的左上角为原点。

+

localY

+

number

+

距离被触摸组件左上角纵向距离。组件的左上角为原点。

+

size

+

number

+

触摸接触面积。

+

force6+

+

number

+

接触力信息。

+
+ +**表 4** SwipeEvent 基础事件对象属性列表（继承BaseEvent） + + + + + + + + + + + + + + + + +

属性

+

类型

+

说明

+

direction

+

string

+

滑动方向，可能值有：

+
  1. left：向左滑动；
  2. right：向右滑动；
  3. up：向上滑动；
  4. down：向下滑动。
+

distance6+

+

number

+

在滑动方向上的滑动距离。

+
+ +**表 5** PinchEvent 对象属性列表7+ + + + + + + + + + + + + + + + + + + + + +

属性

+

类型

+

说明

+

scale

+

number

+

缩放比例

+

pinchCenterX

+

number

+

捏合中心点X轴坐标，单位px

+

pinchCenterY

+

number

+

捏合中心点Y轴坐标，单位px

+
+ +**表 6** DragEvent对象属性列表\(继承BaseEvent\)7+\(Rich\) + + + + + + + + + + + + + + + + + + + + + + + + +

属性

+

类型

+

说明

+

type

+

string

+

事件名称。

+

globalX

+

number

+

距离屏幕左上角坐标原点横向距离。

+

globalY

+

number

+

距离屏幕左上角坐标原点纵向距离。

+

timestamp

+

number

+

时间戳。

+
+ +## 事件对象 + +当组件触发事件后，事件回调函数默认会收到一个事件对象，通过该事件对象可以获取相应的信息。 + +**target对象：** + + + + + + + + + + + + +

属性

+

类型

+

说明

+

dataSet6+

+

Object

+

组件上通过通用属性设置的data-*的自定义属性组成的集合。

+
+ +**示例：** + +``` + +
+
+
+``` + +``` +// xxx.js +export default { + touchstartfunc(msg) { + console.info(`on touch start, point is: ${msg.touches[0].globalX}`); + console.info(`on touch start, data is: ${msg.target.dataSet.a}`); + } +} +``` + diff --git "a/zh-cn/application-dev/js-reference/\346\270\220\345\217\230\346\240\267\345\274\217.md" b/zh-cn/application-dev/js-reference/component/js-components-common-gradient.md old mode 100755 new mode 100644 similarity index 40% rename from "zh-cn/application-dev/js-reference/\346\270\220\345\217\230\346\240\267\345\274\217.md" rename to zh-cn/application-dev/js-reference/component/js-components-common-gradient.md index 6fdaa050c2c2d9cc7996c19164a3d6672e1b15b3..ef5126ad17c9871c488cb540969f5e4e2488a7ba --- "a/zh-cn/application-dev/js-reference/\346\270\220\345\217\230\346\240\267\345\274\217.md" +++ b/zh-cn/application-dev/js-reference/component/js-components-common-gradient.md @@ -1,19 +1,19 @@ -# 渐变样式 +# 渐变样式 -- [线性渐变/重复线性渐变](#zh-cn_topic_0000001058948919_s9fb0b2412d2843e4b06e05acc39dc394) +- [线性渐变/重复线性渐变](#zh-cn_topic_0000001127284866_s9fb0b2412d2843e4b06e05acc39dc394) 组件普遍支持的在style或css中设置的 可以平稳过渡两个或多个指定的颜色。 开发框架支持线性渐变 \(linear-gradient\)和重复线性渐变 \(repeating-linear-gradient\)两种渐变效果。 -## 线性渐变/重复线性渐变 +## 线性渐变/重复线性渐变 使用渐变样式，需要定义过渡方向和过渡颜色。 1. 过渡方向：通过direction或者angle指定： - - direction：进行方向渐变 - - angle：进行角度渐变 + - direction：进行方向渐变。 + - angle：进行角度渐变。 ``` background: linear-gradient(direction/angle, color, color, ...); @@ -24,51 +24,51 @@ - 参数 - -

名称

+ + - - - - - - - - - - - - - - - - - - - @@ -83,31 +83,31 @@ } ``` - **图 1** 默认渐变方向为从上向下渐变 + **图 1** 默认渐变方向为从上向下渐变 ![](figures/默认渐变方向为从上向下渐变.png "默认渐变方向为从上向下渐变") ``` - /* 从顶部开始向底部由红色向绿色渐变。 */ + /* 从顶部开始向底部由红色向绿色渐变 */ background: linear-gradient(red, #00ff00); ``` - **图 2** 45度夹角渐变 + **图 2** 45度夹角渐变 ![](figures/45度夹角渐变.png "45度夹角渐变") ``` - /* 45度夹角，从红色渐变到绿色 */ + /* 45度夹角，从红色渐变到绿色 */ background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); ``` - **图 3** 设置方向为to right为从左向右渐变 + **图 3** 设置方向为to right为从左向右渐变 ![](figures/设置方向为to-right为从左向右渐变.png "设置方向为to-right为从左向右渐变") ``` - /* 从左向右渐变，在距离左边90px和距离左边360px (600*0.6) 之间270px宽度形成渐变*/ - background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 0, 255) 60%); + /* 从左向右渐变，在距离左边90px和距离左边360px (600*0.6) 之间270px宽度形成渐变 */ + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); ``` - **图 4** 从左向右渐变，重复渐变 + **图 4** 从左向右渐变，重复渐变 ![](figures/从左向右渐变-重复渐变.png "从左向右渐变-重复渐变") ``` diff --git a/zh-cn/application-dev/js-reference/component/js-components-common-mediaquery.md b/zh-cn/application-dev/js-reference/component/js-components-common-mediaquery.md new file mode 100644 index 0000000000000000000000000000000000000000..206095f81ccd43bcce7287ccb0f2ecc5c8ce676a --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-common-mediaquery.md @@ -0,0 +1,310 @@ +# 媒体查询 + +- [CSS语法规则](#zh-cn_topic_0000001173164721_section168919480313) +- [页面中引用资源](#zh-cn_topic_0000001173164721_section1993557745) +- [媒体类型](#zh-cn_topic_0000001173164721_section17366633144) +- [媒体逻辑操作](#zh-cn_topic_0000001173164721_section9949248948) +- [媒体特征](#zh-cn_topic_0000001173164721_section192341841653) +- [示例代码](#zh-cn_topic_0000001173164721_section1018513818615) + +媒体查询（Media Query）在移动设备上应用十分广泛，开发者经常需要根据设备的大致类型或者特定的特征和设备参数（例如屏幕分辨率）来修改应用的样式。为此媒体查询提供了如下功能： + +1. 针对设备和应用的属性信息，可以设计出相匹配的布局样式。 +2. 当屏幕发生动态改变时（比如分屏、横竖屏切换），应用页面布局同步更新。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>media属性值默认为设备的真实尺寸大小、物理像素和真实的屏幕分辨率。请勿与以720px为基准的项目配置宽度px混淆。 + +## CSS语法规则 + +使用@media来引入查询语句，具体规则如下： + +``` +@media [media-type] [and|not|only] [(media-feature)] { + CSS-Code; +} +``` + +例子： + +@media screen and \(round-screen: true\) \{ … \} // 当设备屏幕是圆形时条件成立 + +@media \(max-height: 800\) \{ … \} // 范围查询，CSS level 3 写法 + +@media \(height <= 800\) \{ … \} // 范围查询，CSS level 4 写法，与CSS level3写法等价 + +@media screen and \(device-type: tv\) or \(resolution < 2\) \{ … \} // 同时包含媒体类型和多个媒体特征的多条件复杂语句查询 + +## 页面中引用资源 + +通过@import方式引入媒体查询，具体使用方法如下： + +``` +@import url [media-type] [and|not|only] [(media-feature)]; +``` + +例如： + +``` +@import '../common/style.css' screen and (min-width: 600) and (max-width: 1200); +``` + +## 媒体类型 + + +

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

direction

+

direction

to <side-or-corner> <side-or-corner> = [left | right] || [top | bottom]

+

to <side-or-corner> <side-or-corner> = [left | right] || [top | bottom]

to bottom (由上到下渐变)

+

to bottom (由上到下渐变)

否

+

否

指定过渡方向，如：to left (从右向左渐变) ；或者

-

to bottom right (从左上角到右下角)。

+

指定过渡方向，如：to left (从右向左渐变) ；或者

+

to bottom right (从左上角到右下角)。

angle

+

angle

<deg>

+

<deg>

180deg

+

180deg

否

+

否

指定过渡方向，以元素几何中心为坐标原点，水平方向为X轴，angle指定了渐变线与Y轴的夹角(顺时针方向)。

+

指定过渡方向，以元素几何中心为坐标原点，水平方向为X轴，angle指定了渐变线与Y轴的夹角(顺时针方向)。

color

+

color

<color> [<length>|<percentage>]

+

<color> [<length>|<percentage>]

-

+

-

是

+

是

定义使用渐变样式区域内颜色的渐变效果。

+

定义使用渐变样式区域内颜色的渐变效果。
+ + + + + + + +

类型

+

说明

+

screen

+

按屏幕相关参数进行媒体查询。

+
+ +## 媒体逻辑操作 + +媒体逻辑操作符：and、or、not、only用于构成复杂媒体查询，也可以通过comma（,）将其组合起来，详细解释说明如下表。 + +**表 1** 媒体逻辑操作符 + + + + + + + + + + + + + + + + + + + + + + +

类型

+

说明

+

and

+

将多个媒体特征（Media Feature）以“与”的方式连接成一个媒体查询，只有当所有媒体特征都为true，查询条件成立。另外，它还可以将媒体类型和媒体功能结合起来。

+

例如：screen and (device-type: wearable) and (max-height: 600) 表示当设备类型是智能穿戴同时应用的最大高度小于等于600个像素单位时成立。

+

not

+

取反媒体查询结果，媒体查询结果不成立时返回true，否则返回false。在媒体查询列表中应用not，则not仅取反应用它的媒体查询。

+

例如：not screen and (min-height: 50) and (max-height: 600) 表示当应用高度小于50个像素单位或者大于600个像素单位时成立。

+
说明：

使用not运算符时必须指定媒体类型。

+
+

only

+

当整个表达式都匹配时，才会应用选择的样式，可以应用在防止某些较早的版本的浏览器上产生歧义的场景。一些较早版本的浏览器对于同时包含了媒体类型和媒体特征的语句会产生歧义，比如：

+

screen and (min-height: 50)

+

老版本浏览器会将这句话理解成screen，从而导致仅仅匹配到媒体类型（screen），就应用了指定样式，使用only可以很好地规避这种情况。

+
说明：

使用only时必须指定媒体类型。

+
+

,(comma)

+

将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。其效果等同于or运算符。

+

例如：screen and (min-height: 1000), （round-screen：true） 表示当应用高度大于等于1000个像素单位或者设备屏幕是圆形时，条件成立。

+

or

+

将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。

+

例如：screen and (max-height: 1000) or （round-screen：true）表示当应用高度小于等于1000个像素单位或者设备屏幕是圆形时，条件成立。

+
+ +在MediaQuery Level 4中引入了范围查询，使其能够使用max-，min-的同时，也支持了<=，\>=，<，\>操作符。 + +**表 2** 媒体逻辑范围操作符 + + + + + + + + + + + + + + + + + + + +

类型

+

说明

+

<=

+

小于等于，例如：screen and (50 <= height)。

+

>=

+

大于等于，例如：screen and (600 >= height)。

+

<

+

小于，例如：screen and (50 < height)。

+

>

+

大于，例如：screen and (600 > height)。

+
+ +## 媒体特征 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

类型

+

说明

+

height

+

应用页面显示区域的高度。

+

min-height

+

应用页面显示区域的最小高度。

+

max-height

+

应用页面显示区域的最大高度。

+

width

+

应用页面显示区域的宽度。

+

min-width

+

应用页面显示区域的最小宽度。

+

max-width

+

应用页面显示区域的最大宽度。

+

resolution

+

设备的分辨率，支持dpi，dppx和dpcm单位。其中：

+
  • dpi表示每英寸中物理像素个数，1dpi≈0.39dpcm；
  • dpcm表示每厘米上的物理像素个数，1dpcm ≈ 2.54dpi；
  • dppx表示每个px中的物理像素数（此单位按96px=1英寸为基准，与页面中的px单位计算方式不同），1dppx = 96dpi。
+

min-resolution

+

设备的最小分辨率。

+

max-resolution

+

设备的最大分辨率。

+

orientation

+

屏幕的方向。

+

可选值：

+
  • orientation: portrait（设备竖屏）
  • orientation: landscape（设备横屏）
+

aspect-ratio

+

应用页面显示区域的宽度与高度的比值。

+

例如：aspect-ratio:1/2

+

min-aspect-ratio

+

应用页面显示区域的宽度与高度的最小比值。

+

max-aspect-ratio

+

应用页面显示区域的宽度与高度的最大比值。

+

device-height

+

设备的高度。

+

min-device-height

+

设备的最小高度。

+

max-device-height

+

设备的最大高度。

+

device-width

+

设备的宽度。

+

min-device-width

+

设备的最小宽度。

+

max-device-width

+

设备的最大宽度。

+

round-screen

+

屏幕类型，圆形屏幕为true， 非圆形屏幕为 false。

+

dark-mode6+

+

系统为深色模式时为true，否则为false。

+
+ +## 示例代码 + +- 通用媒体特征示例代码： + +``` + +
+
+ Hello World +
+
+``` + +``` +/* xxx.css */ +.container { + width: 300px; + height: 600px; + background-color: #008000; +} +@media (device-type: tv) { + .container { + width: 500px; + height: 500px; + background-color: #fa8072; + } +} +@media (device-type: wearable) { + .container { + width: 300px; + height: 300px; + background-color: #008b8b; + } +} +``` + diff --git a/zh-cn/application-dev/js-reference/component/js-components-common-methods.md b/zh-cn/application-dev/js-reference/component/js-components-common-methods.md new file mode 100644 index 0000000000000000000000000000000000000000..4322b1192dab6a1e5f2af08dd64f0b4d71e78091 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-common-methods.md @@ -0,0 +1,670 @@ +# 通用方法 + +- [this.$element\('id'\).animate\(Object, Object\)](#zh-cn_topic_0000001127284884_section844805134319) +- [this.$element\('id'\).getBoundingClientRect\(\)6+](#zh-cn_topic_0000001127284884_section8611320155314) +- [this.$element\('id'\).createIntersectionObserver\(\)6+](#zh-cn_topic_0000001127284884_section137899052719) + +当组件通过id属性标识后，可以使用该id获取组件对象并调用相关组件方法。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

必填

+

返回值

+

描述

+

animate

+

+

keyframes: Keyframes, options: Options

+

是

+

-

+

在组件上创建和运行动画的快捷方式。输入动画所需的keyframes和options，返回animation对象实例。

+

getBoundingClientRect6+

+

-

+

-

+

Rect

+

获取元素的大小及其相对于窗口的位置。

+

createIntersectionObserver6+

+

ObserverParam

+		  

Observer

+

返回Observer对象，用于监听组件在当前页面的变化。

+
+ +**表 1** Rect对象说明6+ + + + + + + + + + + + + + + + + + + + + + + + + +

属性

+

类型

+

描述

+

width

+

number

+

该元素的宽度。

+

height

+

number

+

该元素的高度。

+

left

+

number

+

该元素左边界距离窗口的偏移。

+

top

+

number

+

该元素上边界距离窗口的偏移。

+
+ +**表 2** ObserverParam对象说明6+ + + + + + + + + + + + + +

属性

+

类型

+

描述

+

ratios

+

Array<number>

+

组件超出或小于范围时触发observer的回调。

+
+ +**表 3** Observer对象支持的方法6+ + + + + + + + + + + + + + + + + +

方法

+

参数

+

描述

+

observe

+

callback: function

+

开启observer的订阅方法。超出或小于阈值时触发callback。

+

unobserve

+		  

取消observer的订阅方法。

+
+ +## this.$element\('_id_'\).animate\(Object, Object\) + +通过animate\(keyframes: Keyframes, options: Options\)方法获得animation对象。该对象支持动画属性，动画方法和动画事件。重复多次调用animate方法时，采用replace策略，最后一次调用时传入的参数生效。 + +**表 4** Keyframes + + + + + + + + + + + + +

参数

+

类型

+

说明

+

frames

+

Array<Style>

+

用于设置动画样式属性的对象列表。Style类型说明请见表1 Style类型说明。

+
+ +**表 5** Style类型说明 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

默认值

+

说明

+

width

+

number

+

-

+

动画执行过程中设置到组件上的宽度值。

+

height

+

number

+

-

+

动画执行过程中设置到组件上的高度值。

+

backgroundColor

+

<color>

+

none

+

动画执行过程中设置到组件上的背景颜色。

+

opacity

+

number

+

1

+

设置到组件上的透明度（介于0到1之间）。

+

backgroundPosition

+

string

+

-

+

格式为"x y"，单位为百分号或者px。

+

第一个值是水平位置，第二个值是垂直位置。

+

如果仅规定了一个值，另一个值为 50%。

+

transformOrigin

+

string

+

'center center'

+

变换对象的中心点。

+

第一个参数表示x轴的值，可以设置为left、center、right、长度值或百分比值。

+

第二个参数表示y轴的值，可以设置为top、center、bottom、长度值或百分比值。

+

transform

+

Transform

+

-

+

设置到变换对象上的类型。

+

offset

+

number

+

-

+
  • offset值（如果提供）必须在0.0到1.0（含）之间，并以升序排列。
  • 若只有两帧，可以不填offset。
  • 若超过两帧，offset必填。
+
+ +**表 6** Options + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

默认值

+

说明

+

duration

+

number

+

0

+

指定当前动画的运行时长（单位毫秒）。

+

easing

+

string

+

linear

+

描述动画的时间曲线，支持类型见表3 easing有效值说明。

+

delay

+

number

+

0

+

设置动画执行的延迟时间（默认值表示无延迟）。

+

iterations

+

number | string

+

1

+

设置动画执行的次数。number表示固定次数，Infinity枚举表示无限次数播放。

+

direction6+

+

string

+

normal

+

指定动画的播放模式：

+

normal： 动画正向循环播放；

+

reverse： 动画反向循环播放；

+

alternate：动画交替循环播放，奇数次正向播放，偶数次反向播放；

+

alternate-reverse：动画反向交替循环播放，奇数次反向播放，偶数次正向播放。

+

fill

+

string

+

none

+

指定动画开始和结束的状态：

+

none：在动画执行之前和之后都不会应用任何样式到目标上。

+

forwards：在动画结束后，目标将保留动画结束时的状态（在最后一个关键帧中定义）。

+

backwards6+：动画将在animation-delay期间应用第一个关键帧中定义的值。当animation-direction为"normal"或"alternate"时应用from关键帧中的值，当animation-direction为"reverse"或"alternate-reverse"时应用to关键帧中的值。

+

both6+：动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。

+
+ +**表 7** easing有效值说明 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

值

+

描述

+

linear

+

动画线性变化。

+

ease-in

+

动画速度先慢后快，cubic-bezier(0.42, 0.0, 1.0, 1.0)。

+

ease-out

+

动画速度先快后慢，cubic-bezier(0.0, 0.0, 0.58, 1.0)。

+

ease-in-out

+

动画先加速后减速，cubic-bezier(0.42, 0.0, 0.58, 1.0)。

+

friction

+

阻尼曲线，cubic-bezier(0.2, 0.0, 0.2, 1.0)。

+

extreme-deceleration

+

急缓曲线，cubic-bezier(0.0, 0.0, 0.0, 1.0)。

+

sharp

+

锐利曲线，cubic-bezier(0.33, 0.0, 0.67, 1.0)。

+

rhythm

+

节奏曲线，cubic-bezier(0.7, 0.0, 0.2, 1.0)。

+

smooth

+

平滑曲线，cubic-bezier(0.4, 0.0, 0.4, 1.0)。

+

cubic-bezier(x1, y1, x2, y2)

+

在三次贝塞尔函数中定义动画变化过程，入参的x和y值必须处于0-1之间。

+

steps(number, step-position)6+

+

Step曲线。

+

number必须设置，支持的类型为int。

+

step-position参数可选，支持设置start或end，默认值为end。

+
+ +- 返回值说明 + + animation对象支持的属性： + + + + + + + + + + + + + + + + + + + + + + + + +

属性

+

类型

+

说明

+

finished

+

boolean

+

只读，用于表示当前动画是否已播放完成。

+

pending

+

boolean

+

只读，用于表示当前动画是否处于等待其他异步操作完成的等待状态（例如启动一个延时播放的动画）。

+

playState

+

string

+

可读可写，动画的执行状态：

+
  • idle：未执行状态，包括已结束或未开始。
  • running：动画正在运行。
  • paused：动画暂停。
  • finished：动画播放完成。
+

startTime

+

number

+

可读可写，动画播放开始的预定时间，用途类似于options参数中的delay。

+
+ + animation对象支持的方法： + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

方法

+

参数

+

说明

+

play

+

-

+

组件播放动画。

+

finish

+

-

+

组件完成动画。

+

pause

+

-

+

组件暂停动画。

+

cancel

+

-

+

组件取消动画。

+

reverse

+

-

+

组件倒播动画。

+
+ + animation对象支持的事件： + + + + + + + + + + + + + + + + + + + +

事件

+

说明

+

start6+

+

动画开始事件。

+

cancel

+

动画被强制取消。

+

finish

+

动画播放完成。

+

repeat

+

动画重播事件。

+
+ + +- 示例代码： + + ``` + +
+
+
+ + +
+
+ ``` + + ``` + /* xxx.css */ + .container { + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + } + .box{ + width: 200px; + height: 200px; + background-color: #ff0000; + margin-top: 30px; + } + .buttonBox{ + margin-top: 30px; + width: 250px; + justify-content: space-between; + } + button{ + background-color: #8e8b89; + color: white; + width: 100px; + height: 40px; + font-size: 24px; + } + ``` + + ``` + // xxx.js + import prompt from '@system.prompt'; + export default{ + data:{ + animation:'', + }, + onInit(){ + }, + onShow(){ + var options = { + duration: 1500, + easing: 'friction', + delay: 500, + fill: 'forwards', + iterations: 2, + direction: 'normal', + }; + var frames = [ + {transform: {translate: '-120px -0px'}, opacity: 0.1, offset: 0.0}, + {transform: {translate: '120px 0px'}, opacity: 1.0, offset: 1.0} + ]; + this.animation = this.$element('idName').animate(frames, options); + // handle finish event + this.animation.onfinish = function(){ + prompt.showToast({ + message: "The animation is finished." + }); + }; + // handle cancel event + this.animation.oncancel = function(){ + prompt.showToast({ + message: "The animation is canceled." + }); + }; + // handle repeat event + this.animation.onrepeat = function(){ + prompt.showToast({ + message: "The animation is repeated." + }); + }; + }, + start(){ + this.animation.play(); + }, + cancel(){ + this.animation.cancel(); + } + } + ``` + + ![](figures/AnimationAPI裁剪.gif) + + +## this.$element\('_id_'\).getBoundingClientRect\(\)6+ + +获取元素的大小及其相对于窗口的位置。 + +- 示例 + + ``` + // xxx.js + var rect = this.$element('id').getBoundingClientRect(); + console.info(`current element position is ${rect.left}, ${rect.top}`); + ``` + + +## this.$element\('_id_'\).createIntersectionObserver\(\)6+ + +监听元素在当前页面的可见范围。 + +- 示例 + + ``` + // xxx.js + let observer = this.$element('broad').createIntersectionObserver({ + ratios: [0.2, 0.5], // number + }); + + observer.observe((isVisible, ratio)=> { + console.info('this element is ' + isVisible + 'ratio is ' + ratio) + }) + + observer.unobserve() + ``` + + diff --git a/zh-cn/application-dev/js-reference/component/js-components-common-styles.md b/zh-cn/application-dev/js-reference/component/js-components-common-styles.md new file mode 100644 index 0000000000000000000000000000000000000000..33bb249e8987e8f6caaafa9c1e724c1aab31b313 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-common-styles.md @@ -0,0 +1,628 @@ +# 通用样式 + +组件普遍支持的可以在style或css中设置组件外观样式。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

描述

+

width

+

<length> | <percentage>

+

-

+

设置组件自身的宽度。

+

缺省时使用元素自身内容需要的宽度。

+

height

+

<length> | <percentage>

+

-

+

设置组件自身的高度。

+

缺省时使用元素自身内容需要的高度。

+

min-width5+

+

<length> | <percentage>6+

+

0

+

设置元素的最小宽度。

+

min-height5+

+

<length> | <percentage>6+

+

0

+

设置元素的最小高度。

+

max-width5+

+

<length> | <percentage>6+

+

-

+

设置元素的最大宽度。默认无限制。

+

max-height5+

+

<length> | <percentage>6+

+

-

+

设置元素的最大高度。默认无限制。

+

padding

+

<length> | <percentage>5+

+

0

+

使用简写属性设置所有的内边距属性。

+
该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    +

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    +

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    +

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

    +
+
+

padding-[left|top|right|bottom]

+

<length> | <percentage>5+

+

0

+

设置左、上、右、下内边距属性。

+

padding-[start|end]

+

<length> | <percentage>5+

+

0

+

设置起始和末端内边距属性。

+

margin

+

<length> | <percentage>5+

+

0

+

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

+

  • 只有一个值时，这个值会被指定给全部的四个边。

    +

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    +

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    +

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    +
+

margin-[left|top|right|bottom]

+

<length> | <percentage>5+

+

0

+

设置左、上、右、下外边距属性。

+

margin-[start|end]

+

<length> | <percentage>5+

+

0

+

设置起始和末端外边距属性。

+

border

+

-

+

0

+

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

+

border-style

+

string

+

solid

+

使用简写属性设置所有边框的样式，可选值为：

+
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
+
  • solid：显示为一条实线。
+

border-[left|top|right|bottom]-style

+

string

+

solid

+

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

+

border-[left|top|right|bottom]

+

-

+

-

+

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

+

border-width

+

<length>

+

0

+

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

+

border-[left|top|right|bottom]-width

+

<length>

+

0

+

分别设置左、上、右、下四个边框的宽度。

+

border-color

+

<color>

+

black

+

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

+

border-[left|top|right|bottom]-color

+

<color>

+

black

+

分别设置左、上、右、下四个边框的颜色。

+

border-radius

+

<length>

+

-

+

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，border-[left|top|right|bottom]-style，如果要设置color、width和style，需要将四个方向一起设置（border-width、border-color、border-style）。

+

border-[top|bottom]-[left|right]-radius

+

<length>

+

-

+

分别设置左上，右上，右下和左下四个角的圆角半径。

+

background

+

<linear-gradient>

+

-

+

仅支持设置渐变样式，与background-color、background-image不兼容。

+

background-color

+

<color>

+

-

+

设置背景颜色。

+

background-image

+

string

+

-

+

设置背景图片。与background-color、background不兼容，支持网络图片资源和本地图片资源地址。

+

示例：

+
  • background-image: url("/common/background.png")
+

background-size

+
  • string
  • <length> <length>
  • <percentage> <percentage>
+

auto

+

设置背景图片的大小。

+
  • string可选值：
    • contain：把图片扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图片扩展至足够大，以使背景图片完全覆盖背景区域；背景图片的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    +
  • length值参数方式：

    设置背景图片的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    +
  • 百分比参数方式：

    以父元素的百分比来设置背景图片的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    +
+

background-repeat

+

string

+

repeat

+

针对重复背景图片样式进行设置，背景图片默认在水平和垂直方向上重复。

+
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
+

background-position

+
  • string string
  • <length> <length>
  • <percentage> <percentage>
+

0px 0px

+
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    +
+
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>。
+

box-shadow5+

+

string

+

0

+

语法：box-shadow: h-shadow v-shadow blur spread color

+

通过这个样式可以设置当前组件的阴影样式，包括水平位置(必填)、垂直位置(必填)、模糊半径(可选，默认值为0)、阴影延展距离(可选，默认值为0)、阴影颜色(可选，默认值为黑色)。

+

示例：

+
  • box-shadow :10px 20px 5px 10px #888888
  • box-shadow :100px 100px 30px red
  • box-shadow :-100px -100px 0px 40px
+

filter5+

+

string

+

-

+

语法：filter: blur(px)

+

通过这个样式可以设置当前组件布局范围的内容模糊，参数用于指定模糊半径，如果没有设置值，则默认是0(不模糊)，不支持百分比。

+

示例：

+
  • filter: blur(10px)
+

backdrop-filter5+

+

string

+

-

+

语法：backdrop-filter: blur(px)

+

通过这个样式可以设置当前组件布局范围的背景模糊，参数用于指定模糊半径，如果没有设置值，则默认是0(不模糊)，不支持百分比。

+

示例：

+
  • backdrop-filter: blur(10px)
+

window-filter5+

+

string

+

-

+

语法：window-filter: blur(percent), style5+

+

通过这个样式可以设置当前组件布局范围的窗口模糊程度和模糊样式，如果没有设置值，则默认是0%(不模糊)，多块模糊区域时不支持设置不同的模糊值和模糊样式。style可选值：small_light(默认值), medium_light, large_light, xlarge_light, small_dark, medium_dark, large_dark, xlarge_dark。

+

示例：

+
  • window-filter: blur(50%)
  • window-filter: blur(10%), large_light
+
说明：

仅手机和平板设备支持。

+
+

opacity

+

number

+

1

+

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

+

display

+

string

+

+

flex

+

确定一个元素所产生的框的类型，可选值为：

+
  • flex：弹性布局。
  • none：不渲染此元素。
+

visibility

+

string

+

+

visible

+

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

+
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
+
说明：

visibility和display样式都设置时，仅display生效。

+
+

flex

+

number | string

+

-

+

规定当前组件如何适应父组件中的可用空间。

+

flex可以指定1个、2个5+或3个5+值。

+

单值语法：

+
  • 一个无单位数：用来设置组件的flex-grow。
  • 一个有效的宽度值5+：用来设置组件的flex-basis。
+

双值语法5+：

+

第一个值必须是无单位数，用来设置组件的flex-grow。第二个值是以下之一：

+
  • 一个无单位数：用来设置组件的flex-shrink。
  • 一个有效的宽度值：用来设置组件的flex-basis。
+

三值语法5+：

+

第一个值必须是无单位数，用来设置组件的flex-grow；第二个值必须是无单位数，用来设置组件的flex-shrink；第三个值必须是一个有效的宽度值，用来设置组件的flex-basis。

+
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

+
+

flex-grow

+

number

+

0

+

设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。

+
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

+
+

flex-shrink

+

number

+

1

+

设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。

+
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

+
+

flex-basis

+

<length>

+

+

-

+

设置组件在主轴方向上的初始大小。

+
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

+
+

align-self6+

+

string

+

-

+

设置自身在父元素交叉轴上的对齐方式，该样式会覆盖父元素的align-items样式，仅在父容器为div、list。可选值为：

+
  • stretch 弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。
  • flex-start 元素向交叉轴起点对齐。
  • flex-end 元素向交叉轴终点对齐。
  • center 元素在交叉轴居中。
  • baseline 元素在交叉轴基线对齐。
+

position

+

string

+

relative

+

设置元素的定位类型，不支持动态变更。

+
  • fixed：相对与整个界面进行定位。
  • absolute：相对于父元素进行定位。
  • relative：相对于其正常位置进行定位。
+
说明：

absolute属性仅在父容器为<div>、<stack>时生效。

+
+

[left|top|right|bottom]

+

<length> | <percentage>6+

+

-

+

left|top|right|bottom需要配合position样式使用，来确定元素的偏移位置。

+
  • left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  • top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  • right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
  • bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
+

[start | end]6+

+

<length> | <percentage>

+

-

+

start | end需要配合position样式使用，来确定元素的偏移位置。

+
  • start属性规定元素的起始边缘。该属性定义了定位元素起始外边距边界与其包含块起始边界之间的偏移。
  • end属性规定元素的结尾边缘。该属性定义了一个定位元素的结尾边距边界与其包含块结尾边界之间的偏移。
+

z-index6+

+

number

+

-

+

表示对于同一父节点其子节点的渲染顺序。数值越大，渲染数据越靠后。

+
说明：

z-index不支持auto，并且opacity等其他样式不会影响z-index的渲染顺序。

+
+

image-fill6+

+

<color>

+

-

+

为svg图片填充颜色，支持组件范围（与设置图片资源的属性）：button（icon属性）、piece（icon属性）、search（icon属性）、input（headericon属性）、textarea（headericon属性）、image（src属性）、toolbar-item(icon属性)。

+

svg图片文件内的fill属性颜色值在渲染时将被替换为image-fill所配的颜色值，且仅对svg图片内显示声明的fill属性生效。

+

clip-path6+

+

[ <geometry-box> || <basic-shape> ] | none

+

-

+

设置组件的裁剪区域。区域内的部分显示，区域外的不显示。

+

<geometry-box>：表示裁剪区域的作用范围，默认为border-box。可选值为：

+
  • margin-box：margin计算入长宽尺寸内。
  • border-box：border计算入长宽尺寸内。
  • padding-box：padding计算入长宽尺寸内。
  • content-box：margin/border/padding不计算入长宽尺寸内。
+

<basic-shape>：表示裁剪的形状。包含以下类型：

+
  • inset，格式为：inset( <percentage>{1,4} [ round <'border-radius'> ]? )。
  • circle，格式为：circle( [ <percentage> ]? [ at <percentage> <percentage> ]? )。
  • ellipse，格式为：ellipse( [ <percentage>{2} ]? [ at <percentage> <percentage> ]? )。
  • polygon，格式为：polygon( [ <percentage> <percentage> ]# )
  • path，格式为：path( <string> )。
+

mask-image6+

+
  • <linear-gradient>
  • string
+

-

+

设置渐变色遮罩或本地图片设置。

+

设置渐变色遮罩，示例：

+

linear-gradient(to left, black, white)

+

设置纯色遮罩，示例：

+

linear-gradient(to right, grey , grey)

+

设置本地svg图片为遮罩，示例：url(common/mask.svg)

+

mask-size6+

+
  • string
  • <length><length>
  • <percentage> <percentage>
+

auto

+

设置遮罩图片显示大小，仅当mask-image为图片资源时有效。

+

string可选值：

+
  • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
  • cover：把图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
  • auto：保持原图的比例不变。
+

length值参数方式：设置图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

+

百分比参数方式：以原图宽高的百分比来设置图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

+

mask-position6+

+
  • string string
  • <length> <length>
  • <percentage> <percentage>
+

0px 0px

+

设置遮罩图片显示位置，仅当mask-image为图片资源时有效。关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。

+

string可选值：

+
  • left：水平方向上最左侧。
  • right：水平方向上最右侧。
  • top：竖直方向上最顶部。
  • bottom：竖直方向上最底部。
  • center：水平方向或竖直方向上中间位置。
+

length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。

+

百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。

+

可以混合使用<percentage>和<length>。

+

border-image-source7+

+

string

+

-

+

指定元素的边框图片。

+

示例：

+

border-image-source: url("/common/images/border.png")

+

border-image-slice7+

+

<length> | <percentage>

+

0

+

指定图片的边界内向偏移。

+

该属性可以有1到4个值：

+

指定一个值时，该值指定四个边的内偏移。

+

指定两个值时，第一个值指定上下两边的内偏移，第二个指定左右两边的内偏移。

+

指定三个值时，第一个指定上边的内偏移，第二个指定左右两边的内偏移，第三个指定下边的内偏移。

+

指定四个值时分别为上、右、下、左边的内偏移（顺时针顺序）。

+

border-image-width7+

+

<length> | <percentage>

+

0

+

指定图片边界的宽度。

+

指定一个值时，该值指定四个边的宽度。

+

指定两个值时，第一个值指定上下两边的宽度 ，第二个指定左右两边的宽度。

+

指定三个值时，第一个指定上边的宽度 ，第二个指定左右两边的宽度 ，第三个指定下边的宽度。

+

指定四个值时分别为上、右、下、左边的宽度 （顺时针顺序）。

+

border-image-outset7+

+

<length> | <percentage>

+

0

+

指定边框图像可超出边框的大小。

+

指定一个值时，边框图像在四个方向超出边框的距离。

+

指定两个值时，第一个值指定上下两边的边框图像超出边框的距离，第二个指定左右两边的 。

+

指定三个值时，第一个指定上边的边框图像超出边框的距离 ，第二个指定左右两边的边框图像超出边框的距离 ，第三个指定下边的边框图像超出边框的距离 。

+

指定四个值时分别为上、右、下、左边的边框图像超出边框的距离 （顺时针顺序）。

+

border-image-repeat7+

+

string

+

stretch

+

定义图片如何填充边框。

+

stretch: 拉伸图片以填充边框。

+

repeat：平铺图片以填充边框。

+

round：平铺图像。当不能整数次平铺时，根据情况放大或缩小图像。

+

space：平铺图像。当不能整数次平铺时，会用空白间隙填充在图像周围（不会放大或缩小图片）。

+

border-image7+

+

string

+

-

+

简写属性，可以选择以下两种设置方式：

+ +
  • 渐变色边框

    示例:

    +

    border-image: linear-gradient(red, yellow) 10px

    +
+
+ +>![](../../public_sys-resources/icon-note.gif) **说明：** +>通用样式都不是必填项。 + diff --git "a/zh-cn/application-dev/js-reference/\350\275\254\345\234\272\346\240\267\345\274\217.md" b/zh-cn/application-dev/js-reference/component/js-components-common-transition.md old mode 100755 new mode 100644 similarity index 44% rename from "zh-cn/application-dev/js-reference/\350\275\254\345\234\272\346\240\267\345\274\217.md" rename to zh-cn/application-dev/js-reference/component/js-components-common-transition.md index 3a0fec6a043ed662a7fa2d7c0653485001d5d8cc..403606a58f53fac5c1373fcd0c29e00b6187c498 --- "a/zh-cn/application-dev/js-reference/\350\275\254\345\234\272\346\240\267\345\274\217.md" +++ b/zh-cn/application-dev/js-reference/component/js-components-common-transition.md @@ -1,35 +1,35 @@ -# 转场样式 +# 转场样式 -- [共享元素转场](#zh-cn_topic_0000001058460505_section1884520391817) -- [共享元素注意事项](#zh-cn_topic_0000001058460505_section91806261439) -- [共享元素示例代码](#zh-cn_topic_0000001058460505_section1568117161452) -- [卡片转场样式](#zh-cn_topic_0000001058460505_section765051220203) -- [示例](#zh-cn_topic_0000001058460505_section814213323271) -- [页面转场样式](#zh-cn_topic_0000001058460505_section0565021620) -- [页面转场注意事项](#zh-cn_topic_0000001058460505_section99079442062) +- [共享元素转场](#zh-cn_topic_0000001127125110_section1884520391817) +- [共享元素注意事项](#zh-cn_topic_0000001127125110_section91806261439) +- [共享元素示例代码](#zh-cn_topic_0000001127125110_section1568117161452) +- [卡片转场样式](#zh-cn_topic_0000001127125110_section765051220203) +- [示例](#zh-cn_topic_0000001127125110_section814213323271) +- [页面转场样式](#zh-cn_topic_0000001127125110_section0565021620) +- [页面转场注意事项](#zh-cn_topic_0000001127125110_section99079442062) -## 共享元素转场 +## 共享元素转场 **表 1** 共享元素转场属性 - -

名称

+ + - - - - - - - @@ -37,57 +37,57 @@ **表 2** 共享元素转场样式 - -

名称

类型

+

类型

默认值

+

默认值

描述

+

描述

shareid

+

shareid

string

+

string

无

+

无

进行共享元素转场时使用，若不配置，则转场样式不生效。共享元素转场当前支持的组件：list-item, image, text, button, label。

+

进行共享元素转场时使用，若不配置，则转场样式不生效。共享元素转场当前支持的组件：list-item、image、text、button、label。

名称

+ + - - - - - - - - - - - - - - -

名称

类型

+

类型

默认值

+

默认值

描述

+

描述

shared-transition-effect

+

shared-transition-effect

string

+

string

exchange

+

exchange

配置共享元素转场时的入场样式。

-

当前支持：exchange或static，默认为exchange。

-

转场时，目的页配置的样式优先生效。

-
  • exchange表示源页面元素移动到目的页元素位置，并进行适当缩放。
  • static表示目的页元素位置不变，用户可配置透明度动画。当前仅跳转目标页配置的static效果生效。
+

配置共享元素转场时的入场样式。

+

当前支持：exchange或static，默认为exchange。

+

转场时，目的页配置的样式优先生效。

+
  • exchange表示源页面元素移动到目的页元素位置，并进行适当缩放。
  • static表示目的页元素位置不变，用户可配置透明度动画。当前仅跳转目标页配置的static效果生效。

shared-transition-name

+

shared-transition-name

string

+

string

-

+

-

转场时，目的页配置的样式优先生效。该样式用于配置共享元素的动画效果，一个由@keyframes定义的动画序列，支持transform和透明度动画。若共享元素效果与自定义的动画冲突，以自定义动画为准。

+

转场时，目的页配置的样式优先生效。该样式用于配置共享元素的动画效果，一个由@keyframes定义的动画序列，支持transform和透明度动画。若共享元素效果与自定义的动画冲突，以自定义动画为准。

shared-transition-timing-function

+

shared-transition-timing-function

string

+

string

friction

+

friction

转场时，目的页配置的样式优先生效。该属性定义了共享元素转场时的差值曲线。若不配置，默认使用friction曲线。

+

转场时，目的页配置的样式优先生效。该属性定义了共享元素转场时的差值曲线。若不配置，默认使用friction曲线。
-## 共享元素注意事项 +## 共享元素注意事项 1. 若同时配置了共享元素转场和自定义页面转场样式，页面转场效果以自定义效果为准； 2. 共享元素的exchange效果类似下图： -**图 1** 共享元素转场默认效果 +**图 1** 共享元素转场默认效果 ![](figures/共享元素转场默认效果.png "共享元素转场默认效果") 3. 共享元素动画对元素的边框、背景色不生效。 @@ -96,7 +96,7 @@ 5. 动态修改shareid：组件A的shareid被组件B的shareid覆盖，则组件A的共享元素效果失效，即使组件B的shareid被修改，此时组件A的共享元素效果也不会恢复。5+ -## 共享元素示例代码 +## 共享元素示例代码 PageA跳转到PageB，跳转的共享元素为image， shareid为“shareImage”。 @@ -167,38 +167,36 @@ export default { } ``` -## 卡片转场样式 +## 卡片转场样式 -**表 3** 卡片转场样式 - - -

名称

+ + - - - - - - -

名称

类型

+

类型

默认值

+

默认值

描述

+

描述

transition-effect

+

transition-effect

string

+

string

-

+

-

用于配置当前页面中的某个组件在卡片转场过程中是否进行转场动效，当前支持如下配置：

-
  • unfold：配置这个属性的组件，如在卡片的上方，则向上移动一个卡片的高度，如在卡片的下方，则向下移动一个卡片的高度。
  • none：转场过程中没有动效。
+

用于配置当前页面中的某个组件在卡片转场过程中是否进行转场动效，当前支持如下配置：

+
  • unfold：配置这个属性的组件，如在卡片的上方，则向上移动一个卡片的高度，如在卡片的下方，则向下移动一个卡片的高度。
  • none：转场过程中没有动效。
->![](public_sys-resources/icon-note.gif) **说明：** +>![](../../public_sys-resources/icon-note.gif) **说明：** >卡片转场无法和其他转场\(包括共享元素转场和自定义转场\)共同使用。 -## 示例 +## 示例 source\_page包含顶部内容以及卡片列表，点击卡片可以跳转到target\_page。 @@ -284,61 +282,61 @@ export default { ![](figures/卡片转场.gif) -## 页面转场样式 +## 页面转场样式 -**表 4** 页面转场样式 +**表 3** 页面转场样式 - -

名称

+ + - - - - - - - - - - - - - - - - - - -

名称

类型

+

类型

默认值

+

默认值

描述

+

描述

transition-enter

+

transition-enter

string

+

string

-

+

-

与@keyframes相呼应，支持transform和透明度动画，详见表2。

+

与@keyframes配套使用，支持transform和透明度动画，详见表2。

transition-exit

+

transition-exit

string

+

string

-

+

-

与@keyframes相呼应，支持transform和透明度动画，详见表2。

+

与@keyframes配套使用，支持transform和透明度动画，详见表2。

transition-duration

+

transition-duration

string

+

string

跟随设备默认的页面转场时间

+

跟随设备默认的页面转场时间

支持的单位为[s(秒)|ms(毫秒) ]，默认单位为ms。

+

支持的单位为[s(秒)|ms(毫秒) ]，默认单位为ms。

transition-timing-function

+

transition-timing-function

string

+

string

friction

+

friction

描述转场动画执行的速度曲线，用于使转场更为平滑。详细参数见动画样式中“animation-timing-function”有效值说明。

+

描述转场动画执行的速度曲线，用于使转场更为平滑。详细参数见动画样式中“animation-timing-function”有效值说明。
-## 页面转场注意事项 +## 页面转场注意事项 1. 配置自定义转场时，建议配置页面背景色为不透明颜色，否则在转场过程中可能会出现衔接不自然的现象。 2. transition-enter和transition-exit可单独配置，没有配置时使用系统默认的参数； @@ -346,11 +344,11 @@ export default { 4. transition-enter/transition-exit说明如下： 1. push场景下：进入页面栈的Page2.js应用transition-enter描述的动画配置；进入页面栈第二位置的Page1.js应用transition-exit描述的动画配置； - ![](figures/zh-cn_image_0000001058830762.png) + ![](figures/zh-cn_image_0000001173324847.png) 2. back场景下：退出页面栈的Page2.js应用transition-enter描述的动画配置，并进行倒播；从页面栈第二位置进入栈顶位置的Page1.js应用transition-exit描述的动画配置，并进行倒播。 - ![](figures/zh-cn_image_0000001058670863.png) + ![](figures/zh-cn_image_0000001127125268.png) diff --git a/zh-cn/application-dev/js-reference/component/js-components-common.md b/zh-cn/application-dev/js-reference/component/js-components-common.md new file mode 100644 index 0000000000000000000000000000000000000000..f60e2960f370e548b520ab2c192ef728342fa677 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-common.md @@ -0,0 +1,23 @@ +# 通用 + +- **[通用属性](js-components-common-attributes.md)** + +- **[通用样式](js-components-common-styles.md)** + +- **[通用事件](js-components-common-events.md)** + +- **[通用方法](js-components-common-methods.md)** + +- **[动画样式](js-components-common-animation.md)** + +- **[渐变样式](js-components-common-gradient.md)** + +- **[转场样式](js-components-common-transition.md)** + +- **[媒体查询](js-components-common-mediaquery.md)** + +- **[自定义字体样式](js-components-common-customizing-font.md)** + +- **[原子布局](js-components-common-atomic-layout.md)** + + diff --git a/zh-cn/application-dev/js-reference/component/js-components-container-badge.md b/zh-cn/application-dev/js-reference/component/js-components-container-badge.md new file mode 100644 index 0000000000000000000000000000000000000000..e028c0959cf77ae3a4de8e23d53babe69c0af66a --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-container-badge.md @@ -0,0 +1,246 @@ +# badge + +- [权限列表](#zh-cn_topic_0000001173324629_section11257113618419) +- [子组件](#zh-cn_topic_0000001173324629_section9288143101012) +- [属性](#zh-cn_topic_0000001173324629_section1355418214459) +- [样式](#zh-cn_topic_0000001173324629_section5775351116) +- [事件](#zh-cn_topic_0000001173324629_section43461940193518) +- [方法](#zh-cn_topic_0000001173324629_section2279124532420) +- [示例](#zh-cn_topic_0000001173324629_section3510104413431) + +应用中如果有需用户关注的新事件提醒，可以采用新事件标记来标识。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 5 开始支持。 + +## 权限列表 + +无 + +## 子组件 + +支持单个子组件。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>仅支持单子组件节点，如果使用多子组件节点，默认使用第一个子组件节点。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

placement

+

string

+

rightTop

+

否

+

事件提醒的数字标记或者圆点标记的位置，可选值为：

+
  • right：位于组件右边框。
  • rightTop：位于组件边框右上角。
  • left：位于组件左边框。
+

count

+

number

+

0

+

否

+

设置提醒的消息数，默认为0。当设置相应的提醒消息数大于0时，消息提醒会变成数字标记类型，未设置消息数或者消息数不大于0时，消息提醒将采用圆点标记。

+
说明：

当数字设置为大于maxcount时，将使用maxcount显示。

+

count属性最大支持整数值为2147483647。

+
+

visible

+

boolean

+

false

+

否

+

是否显示消息提醒，当收到新信息提醒时可以设置该属性为true，显示相应的消息提醒，如果需要使用数字标记类型，同时需要设置相应的count属性。

+

maxcount

+

number

+

99

+

否

+

最大消息数限制，当收到新信息提醒大于该限制时，标识数字会进行省略，仅显示maxcount+。

+
说明：

maxcount属性最大支持整数值为2147483647。

+
+

config

+

BadgeConfig

+

-

+

否

+

设置新事件标记相关配置属性。

+

label6+

+

string

+

-

+

否

+

设置新事件提醒的文本值。

+
说明：

使用该属性时，count和maxcount属性不生效。

+
+
+ +**表 1** BadgeConfig + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

badgeColor

+

<color>

+

#fa2a2d

+

否

+

新事件标记背景色。

+

textColor

+

<color>

+

#ffffff

+

否

+

数字标记的数字文本颜色。

+

textSize

+

<length>

+

10px

+

否

+

数字标记的数字文本大小。

+

badgeSize

+

<length>

+

6px

+

否

+

圆点标记的默认大小

+
+ +## 样式 + +支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>badge组件的子组件大小不能超过badge组件本身的大小，否则子组件不会绘制。 + +## 事件 + +支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)。 + +## 方法 + +支持[通用方法](js-components-common-methods.md#ZH-CN_TOPIC_0000001209252157)。 + +## 示例 + +``` + +
+ + huawei + + + huawei + +
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + width: 100%; + align-items: center; +} +.badge { + width: 50%; + margin-top: 100px; +} +.text1 { + background-color: #f9a01e; + font-size: 50px; +} +.text2 { + background-color: #46b1e3; + font-size: 50px; +} +``` + +``` +// xxx.js +export default { + data:{ + badgeconfig:{ + badgeColor:"#0a59f7", + textColor:"#ffffff", + } + } +} +``` + +![](figures/zh-cn_image_0000001150368628.png) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-container-dialog.md b/zh-cn/application-dev/js-reference/component/js-components-container-dialog.md new file mode 100644 index 0000000000000000000000000000000000000000..de78114e5b80af5001c14d838e82f5b5563acf15 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-container-dialog.md @@ -0,0 +1,229 @@ +# dialog + +- [权限列表](#zh-cn_topic_0000001173324657_section11257113618419) +- [子组件](#zh-cn_topic_0000001173324657_section9288143101012) +- [属性](#zh-cn_topic_0000001173324657_section2907183951110) +- [样式](#zh-cn_topic_0000001173324657_section5775351116) +- [事件](#zh-cn_topic_0000001173324657_section8562129182916) +- [方法](#zh-cn_topic_0000001173324657_section11753103216253) +- [示例](#zh-cn_topic_0000001173324657_section6663311114620) + +自定义弹窗容器。 + +## 权限列表 + +无 + +## 子组件 + +支持单个子组件。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)外，支持如下属性： + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

dragable7+

+

boolean

+

false

+

否

+

设置对话框是否支持拖拽。

+
+ +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- 弹窗类组件不支持focusable、click-effect属性。 + +## 样式 + +仅支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)中的width、height、margin、margin-\[left|top|right|bottom\]、margin-\[start|end\]样式。 + +## 事件 + +不支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)，仅支持如下事件： + + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

cancel

+

-

+

用户点击非dialog区域触发取消弹窗时触发的事件。

+

show7+

+

-

+

对话框弹出时触发该事件。

+

close7+

+

-

+

对话框关闭时触发该事件。

+
+ +## 方法 + +不支持[通用方法](js-components-common-methods.md#ZH-CN_TOPIC_0000001209252157)，仅支持如下方法。 + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

show

+

-

+

弹出对话框。

+

close

+

-

+

关闭对话框。

+
+ +>![](../../public_sys-resources/icon-note.gif) **说明：** +>dialog属性、样式均不支持动态更新。 + +## 示例 + +``` + +
+
+ +
+ +
+
+ Simple dialog +
+
+ + +
+
+ +
+``` + +``` +/* xxx.css */ +.doc-page { + flex-direction: column; + justify-content: center; + align-items: center; +} +.btn-div { + width: 100%; + height: 200px; + flex-direction: column; + align-items: center; + justify-content: center; +} +.btn { + background-color: #F2F2F2; + text-color: #0D81F2; +} +.txt { + color: #000000; + font-weight: bold; + font-size: 39px; +} +.dialog-main { + width: 500px; +} +.dialog-div { + flex-direction: column; + align-items: center; +} +.inner-txt { + width: 400px; + height: 160px; + flex-direction: column; + align-items: center; + justify-content: space-around; +} +.inner-btn { + width: 400px; + height: 120px; + justify-content: space-around; + align-items: center; +} +.btn-txt { + background-color: #F2F2F2; + text-color: #0D81F2; +} +``` + +``` +// xxx.js +import prompt from '@system.prompt'; + +export default { + showDialog(e) { + this.$element('simpledialog').show() + }, + cancelDialog(e) { + prompt.showToast({ + message: 'Dialog cancelled' + }) + }, + cancelSchedule(e) { + this.$element('simpledialog').close() + prompt.showToast({ + message: 'Successfully cancelled' + }) + }, + setSchedule(e) { + this.$element('simpledialog').close() + prompt.showToast({ + message: 'Successfully confirmed' + }) + } +} +``` + +![](figures/GIF6.gif) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-container-div.md b/zh-cn/application-dev/js-reference/component/js-components-container-div.md new file mode 100644 index 0000000000000000000000000000000000000000..c88b548e2c9118b36b5cb6a331d765e757cb5c9e --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-container-div.md @@ -0,0 +1,545 @@ +# div + +- [权限列表](#zh-cn_topic_0000001127125106_section11257113618419) +- [子组件](#zh-cn_topic_0000001127125106_section9288143101012) +- [属性](#zh-cn_topic_0000001127125106_section2907183951110) +- [样式](#zh-cn_topic_0000001127125106_section10683162023215) +- [事件](#zh-cn_topic_0000001127125106_section77341431152917) +- [方法](#zh-cn_topic_0000001127125106_section2279124532420) +- [示例](#zh-cn_topic_0000001127125106_section1241545010391) + +基础容器，用作页面结构的根节点或将内容进行分组。 + +## 权限列表 + +无 + +## 子组件 + +支持。 + +## 属性 + +支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)。 + +## 样式 + +除支持[组件通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

flex-direction

+

string

+

row

+

否

+

flex容器主轴方向。可选项有：

+
  • column：垂直方向从上到下。
  • row：水平方向从左到右。
+

flex-wrap

+

string

+

nowrap

+

否

+

flex容器是单行还是多行显示，该值暂不支持动态修改。可选项有：

+
  • nowrap：不换行，单行显示。
  • wrap：换行，多行显示。
+

justify-content

+

string

+

flex-start

+

否

+

flex容器当前行的主轴对齐格式。可选项有：

+
  • flex-start：项目位于容器的开头。
  • flex-end：项目位于容器的结尾。
  • center：项目位于容器的中心。
  • space-between：项目位于各行之间留有空白的容器内。
  • space-around：项目位于各行之前、之间、之后都留有空白的容器内。
  • space-evenly5+: 均匀排列每个元素，每个元素之间的间隔相等。
+

align-items

+

string

+

stretch

+

否

+

flex容器当前行的交叉轴对齐格式，可选值为：

+
  • stretch：弹性元素在交叉轴方向被拉伸到与容器相同的高度或宽度。
  • flex-start：元素向交叉轴起点对齐。
  • flex-end：元素向交叉轴终点对齐。
  • center：元素在交叉轴居中。
+

align-content

+

string

+

flex-start

+

否

+

交叉轴中有额外的空间时，多行内容对齐格式，可选值为：

+
  • flex-start：所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。
  • flex-end：所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。
  • center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。
  • space-between：所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。
  • space-around：所有行在容器中平均分布，相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。
+

display

+

string

+

flex

+

否

+

确定该元素视图框的类型，该值暂不支持动态修改。可选值为：

+
  • flex：弹性布局
  • grid：网格布局
  • none：不渲染此元素
+

grid-template-[columns|rows]

+

string

+

1行1列

+

否

+

用于设置当前网格布局行和列的数量，不设置时默认1行1列，仅当display为grid时生效。

+

示例：如设置grid-template-columns为：

+
  • 50px 100px 60px：分三列，第一列50px，第二列100px，第三列60px；
  • 1fr 1fr 2fr：分三列，将父组件允许的宽分为4等份，第一列占1份，第二列占一份，第三列占2份；
  • 30% 20% 50%：分三列，将父组件允许的宽为基准，第一列占30%，第二列占20%，第三列占50%；
  • repeat(2,100px)：分两列，第一列100px，第二列100px；
  • repeat(auto-fill,100px)5+：按照每列100px的大小和交叉轴大小计算最大正整数重复次数，按照该重复次数布满交叉轴；
  • auto 1fr 1fr：分三列，第一列自适应内部子组件所需宽度，剩余空间分为两等份，第二列占一份，第三列占一份。
+

grid-[columns|rows]-gap

+

<length>

+

0

+

否

+

用于设置行与行的间距或者列与列的间距，也可以支持通过grid-gap设置相同的行列间距，仅当display为grid时生效。

+

grid-row-[start|end]

+

number

+

-

+

否

+

用于设置当前元素在网格布局中的起止行号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。

+

grid-column-[start|end]

+

number

+

-

+

否

+

用于设置当前元素在网格布局中的起止列号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。

+

grid-auto-flow5+

+

string

+

-

+

否

+

使用框架自动布局算法进行网格的布局，可选值为：

+
  • row：逐行填充元素，如果行空间不够，则新增行；
  • column：逐列填充元素，如果列空间不够，则新增列。
+

overflow6+

+

string

+

visible

+

否

+

设置元素内容区超过元素本身大小时的表现形式。

+
  • visible：多个子元素内容超过元素大小时，显示在元素外面；
  • hidden：元素内容超过元素大小时，进行裁切显示；
  • scroll：元素内容超过元素大小时，进行滚动显示并展示滚动条（当前只支持纵向）。
+
说明：
  • overflow: scroll样式需要元素设置固定的大小。
+
+

align-items6+

+

string

+

-

+

否

+

设置容器中元素交叉轴上的对齐方式：

+
  • stretch：Flex容器内容在交叉轴方向被拉伸到与容器相同的高度或宽度；
  • flex-start：Flex布局容器内元素向交叉轴起点对齐；
  • flex-end：Flex布局容器内元素向交叉轴终点对齐；
  • center：Flex布局容器内元素在交叉轴居中对齐；
  • baseline：如Flex布局纵向排列，则该值与'flex-start'等效。横向布局时，内容元素存在文本时按照文本基线对齐，否则底部对齐。
+

scrollbar-color6+

+

<color>

+

-

+

否

+

设置滚动条的颜色。

+

scrollbar-width6+

+

<length>

+

-

+

否

+

设置滚动条的宽度。

+

overscroll-effect6+

+

string

+

-

+

否

+

设置滚动边缘效果，可选值为：

+
  • spring：弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹；
  • fade：渐隐物理动效，滑动到边缘后展示一个波浪形的渐隐，根据速度和滑动距离的变化渐隐也会发送一定的变化；
  • none：滑动到边缘后无效果
+
+ +## 事件 + +除支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)外，还支持如下事件： + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

reachstart6+

+

-

+

当页面滑动到最开始的点时触发的事件回调，当flex-direction: row时才会触发。

+

reachend6+

+

-

+

当页面滑动到最末尾的点时触发的事件回调，当flex-direction: row时才会触发。

+

reachtop6+

+

-

+

当页面滑动到最上部的点时触发的事件回调，当flex-direction: column时才会触发。

+

reachbottom6+

+

-

+

当页面滑动到最下部的点时触发的事件回调，当flex-direction: column时才会触发。

+
+ +## 方法 + +除支持[通用方法](js-components-common-methods.md#ZH-CN_TOPIC_0000001209252157)外，还支持如下方法： + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

返回值

+

描述

+

getScrollOffset6+

+

-

+

ScrollOffset

+

获取元素内容的滚动偏移。

+
说明：
  • 需要设置overflow样式为scroll。
+
+

scrollBy6+

+

ScrollParam

+

-

+

指定元素内容的滚动偏移。

+
说明：
  • 需要设置overflow样式为scroll。
+
+
+ +**表 1** ScrollOffset6+ + + + + + + + + + + + + + + + + +

名称

+

类型

+

描述

+

x

+

number

+

在x轴方向的偏移，单位为px。

+

y

+

number

+

在y轴方向的偏移，单位为px。

+
+ +**表 2** ScrollParam6+ + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

描述

+

dx

+

number

+

水平方向滑动的偏移量，单位px。

+

dy

+

number

+

垂直方向滑动的偏移量，单位px。

+

smooth

+

boolean

+

是否平滑处理。

+
+ +## 示例 + +1. Flex样式 + + ``` + +
+
+
+
+
+
+
+ ``` + + ``` + /* xxx.css */ + .container { + flex-direction: column; + justify-content: center; + align-items: center; + width: 454px; + height: 454px; + } + .flex-box { + justify-content: space-around; + align-items: center; + width: 400px; + height: 140px; + background-color: #ffffff; + } + .flex-item { + width: 120px; + height: 120px; + border-radius: 16px; + } + .color-primary { + background-color: #007dff; + } + .color-warning { + background-color: #ff7500; + } + .color-success { + background-color: #41ba41; + } + ``` + + ![](figures/zh-cn_image_0000001127285076.png) + +2. Flex Wrap样式 + + ``` + +
+
+
+
+
+
+
+ ``` + + ``` + /* xxx.css */ + .container { + flex-direction: column; + justify-content: center; + align-items: center; + width: 454px; + height: 454px; + } + .flex-box { + justify-content: space-around; + align-items: center; + flex-wrap: wrap; + width: 300px; + height: 250px; + background-color: #ffffff; + } + .flex-item { + width: 120px; + height: 120px; + border-radius: 16px; + } + .color-primary { + background-color: #007dff; + } + .color-warning { + background-color: #ff7500; + } + .color-success { + background-color: #41ba41; + } + ``` + + ![](figures/zh-cn_image_0000001173164931.png) + +3. Grid样式 + + ``` + +
+
+
+
+
+
+ ``` + + ``` + /* xxx.css */ + .common { + width: 400px; + height: 400px; + background-color: #ffffff; + align-items: center; + justify-content: center; + margin: 24px; + } + .grid-parent { + display: grid; + grid-template-columns: 35% 35%; + grid-columns-gap: 24px; + grid-rows-gap: 24px; + grid-template-rows: 35% 35%; + } + .grid-child { + width: 100%; + height: 100%; + border-radius: 8px; + } + .grid-left-top { + grid-row-start: 0; + grid-column-start: 0; + grid-row-end: 0; + grid-column-end: 0; + background-color: #3f56ea; + } + .grid-left-bottom { + grid-row-start: 1; + grid-column-start: 0; + grid-row-end: 1; + grid-column-end: 0; + background-color: #00aaee; + } + .grid-right-top { + grid-row-start: 0; + grid-column-start: 1; + grid-row-end: 0; + grid-column-end: 1; + background-color: #00bfc9; + } + .grid-right-bottom { + grid-row-start: 1; + grid-column-start: 1; + grid-row-end: 1; + grid-column-end: 1; + background-color: #47cc47; + } + ``` + + ![](figures/zh-cn_image_0000001127125266.png) + + diff --git a/zh-cn/application-dev/js-reference/component/js-components-container-form.md b/zh-cn/application-dev/js-reference/component/js-components-container-form.md new file mode 100644 index 0000000000000000000000000000000000000000..1d3229859c8e6d3a0b1761fa7499a7118989662a --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-container-form.md @@ -0,0 +1,115 @@ +# form + +- [权限列表](#zh-cn_topic_0000001127284848_section11257113618419) +- [子组件](#zh-cn_topic_0000001127284848_section9288143101012) +- [属性](#zh-cn_topic_0000001127284848_section2907183951110) +- [样式](#zh-cn_topic_0000001127284848_section10683162023215) +- [事件](#zh-cn_topic_0000001127284848_section77341431152917) +- [方法](#zh-cn_topic_0000001127284848_section2279124532420) +- [示例](#zh-cn_topic_0000001127284848_section1241545010391) + +表单容器，支持容器内input元素的内容提交和重置。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从 API Version 6 开始支持。 + +## 权限列表 + +无 + +## 子组件 + +支持。 + +## 属性 + +支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)。 + +## 样式 + +支持[组件通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)。 + +## 事件 + +处支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)外，还支持如下事件： + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

submit

+

FormResult

+

点击提交按钮，进行表单提交时，触发该事件。

+

reset

+

-

+

点击重置按钮后，触发该事件。

+
+ +**表 1** FormResult + + + + + + + + + + + + +

名称

+

类型

+

描述

+

value

+

Object

+

input元素的name和value的值。

+
+ +## 方法 + +支持[通用方法](js-components-common-methods.md#ZH-CN_TOPIC_0000001209252157)。 + +## 示例 + +``` + +
+ + + + + 输入文本 + + Submit + Reset +
+``` + +``` +// xxx.js +export default{ + onSubmit(result) { + console.log(result.value.radioGroup) // radio1 or radio2 + console.log(result.value.user) // text input value + }, + onReset() { + console.log('reset all value') + } +} +``` + diff --git a/zh-cn/application-dev/js-reference/component/js-components-container-list-item-group.md b/zh-cn/application-dev/js-reference/component/js-components-container-list-item-group.md new file mode 100644 index 0000000000000000000000000000000000000000..fdb075c1fb0e54339d6229907404f22123ed4cbe --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-container-list-item-group.md @@ -0,0 +1,265 @@ +# list-item-group + +- [权限列表](#zh-cn_topic_0000001127284878_section11257113618419) +- [子组件](#zh-cn_topic_0000001127284878_section9288143101012) +- [属性](#zh-cn_topic_0000001127284878_section2907183951110) +- [样式](#zh-cn_topic_0000001127284878_section16337145611017) +- [事件](#zh-cn_topic_0000001127284878_section1052914819116) +- [方法](#zh-cn_topic_0000001127284878_section2279124532420) +- [示例](#zh-cn_topic_0000001127284878_section1159816598218) + +<[list](js-components-container-list.md#ZH-CN_TOPIC_0000001163932194)\>的子组件，用来展示分组，宽度默认充满list组件。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- 使用该组件时父元素list组件的样式columns必须为1，否则功能异常。 +>- 由于父元素list组件的align-items默认样式为stretch，该组件宽度默认充满list组件。设置父元素list组件的align-items样式为非stretch来生效自定义宽度。 + +## 权限列表 + +无 + +## 子组件 + +仅支持<[list-item](js-components-container-list-item.md#ZH-CN_TOPIC_0000001209412123)\>。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)外，还支持如下属性： + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

type

+

string

+

default

+

否

+

list-item-group类型，同一list支持多种type的list-item-group，相同type的list-item-group需要确保渲染后的视图布局也完全相同，当type固定时，使用show属性代替if属性，确保视图布局不变。

+
+ +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- 通用属性中的id用来标识一个group。list中相关的函数的入参以及事件的信息皆以此标识一个唯一的group。 + +## 样式 + +除支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

flex-direction

+

string

+

row

+

否

+

flex容器主轴方向。可选项有：

+
  • column：垂直方向从上到下
  • row：水平方向从左到右
+

justify-content

+

string

+

flex-start

+

否

+

flex容器当前行的主轴对齐格式。可选项有：

+
  • flex-start：项目位于容器的开头。
  • flex-end：项目位于容器的结尾。
  • center：项目位于容器的中心。
  • space-between：项目位于各行之间留有空白的容器内。
  • space-around：项目位于各行之前、之间、之后都留有空白的容器内。
  • space-evenly5+: 均匀排列每个元素，每个元素之间的间隔相等。
+
+ +## 事件 + +除支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)外，还支持如下事件： + + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

groupclick

+

{ groupid: string }

+

group点击事件。

+

groupid：被点击的group的id。

+

groupcollapse

+

{ groupid: string }

+

group收拢事件。

+

groupid：收拢的group的id。

+

当不输入参数或者groupid为空时收拢所有分组。

+

groupexpand

+

{ groupid: string }

+

group展开事件。

+

groupid：展开的group的id。

+

当不输入参数或者groupid为空时展开所有分组。

+
+ +## 方法 + +支持[通用方法](js-components-common-methods.md#ZH-CN_TOPIC_0000001209252157)。 + +## 示例 + +``` + +
+ + +
+
+ + +
+
+ + +
+
+ + + + +
+ One---{{listgroup.value}} +
+ + +
+ Primary---{{listgroup.value}} +
+ + + +
+``` + +``` +/* xxx.css */ +.doc-page { + flex-direction: column; +} + +.top-list-item { + width:100%; + background-color:#D4F2E7; +} + +.item-div { + flex-direction:column; + align-items:center; + justify-content:space-around; + height:240px; +} + +.item-child { + width:100%; + height:60px; + justify-content:space-around; + align-items:center; +} + +.item-group-child { + justify-content: center; + align-items: center; + width:100%; +} +``` + +``` +// xxx.js +import prompt from '@system.prompt'; + +export default { + data: { + direction: 'column', + list: [] + }, + onInit() { + this.list = [] + this.listAdd = [] + for (var i = 1; i <= 3; i++) { + var dataItem = { + value: 'GROUP' + i, + }; + this.list.push(dataItem); + } + }, + collapseOne(e) { + this.$element('mylist').collapseGroup({ + groupid: 'GROUP1' + }) + }, + expandOne(e) { + this.$element('mylist').expandGroup({ + groupid: 'GROUP1' + }) + }, + collapseAll(e) { + this.$element('mylist').collapseGroup() + }, + expandAll(e) { + this.$element('mylist').expandGroup() + }, + collapse(e) { + prompt.showToast({ + message: 'Close ' + e.groupid + }) + }, + expand(e) { + prompt.showToast({ + message: 'Open ' + e.groupid + }) + } +} +``` + +![](figures/list6.gif) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-container-list-item.md b/zh-cn/application-dev/js-reference/component/js-components-container-list-item.md new file mode 100644 index 0000000000000000000000000000000000000000..3449a40064ec452392f4da21ccd745b64ecd17ec --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-container-list-item.md @@ -0,0 +1,176 @@ +# list-item + +- [权限列表](#zh-cn_topic_0000001127125046_section11257113618419) +- [子组件](#zh-cn_topic_0000001127125046_section9288143101012) +- [属性](#zh-cn_topic_0000001127125046_section2907183951110) +- [样式](#zh-cn_topic_0000001127125046_section5775351116) +- [事件](#zh-cn_topic_0000001127125046_section1948820711216) +- [方法](#zh-cn_topic_0000001127125046_section2279124532420) +- [示例](#zh-cn_topic_0000001127125046_section634316188515) + +<[list](js-components-container-list.md#ZH-CN_TOPIC_0000001163932194)\>的子组件，用来展示列表具体item。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>由于父元素list组件的align-items默认样式为stretch，该组件宽度默认充满list组件。设置父元素list组件的align-items样式为非stretch来生效自定义宽度。 + +## 权限列表 + +无 + +## 子组件 + +支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

type

+

string

+

default

+

否

+

list-item类型，默认值为default，同一list中可以包含多种type的list-item，相同type的list-item需要确保渲染后的视图布局也相同，如果type固定，则使用show属性代替if属性，确保视图布局不变。

+

primary

+

boolean

+

false

+

否

+

设置为true表示该item是group中的主item，即收拢时显示的item。如果有多个primary，以第一个为准。如果没有标记为primary的item，则以第一个item为主item。

+

section

+

string

+

-

+

否

+

当前item的匹配字符串，如不设置则为空。不支持动态修改。group内只有主item设置有效。

+

sticky

+

string

+

none

+

否

+

设置当前item是否为吸顶item以及其吸顶消失的效果，当前仅支持纵向list，group内部的item不可吸顶，设置该属性无效。

+
  • none：当前item不吸顶。
  • normal：当前item吸顶，消失效果滑动消失。
  • opacity：当前item吸顶，消失效果渐隐消失，仅在智能穿戴上支持。
+

stickyradius

+

<length>

+

1000px

+

否

+

设置智能穿戴上吸顶item的圆弧效果半径，未设置时使用默认半径。sticky属性为none时，设置该属性无效。

+

clickeffect5+

+

boolean

+

true

+

否

+

设置当前item是否有点击动效。

+
  • false：item点击时无点击动效。
  • true：item点击时有点击动效。
+
+ +## 样式 + +除支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)外，还支持如下样式： + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

column-span

+

<number>

+

1

+

否

+

当前的list-item需要在list中占据的列的数量，默认占一列，仅在list为多列时生效。

+
+ +## 事件 + +除支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)外，还支持如下事件： + + + + + + + + + + + + +

名称

+

参数

+

描述

+

sticky

+

{ state: boolean }

+

吸顶组件回调事件。

+

value: false表示当前item处于非吸顶状态；

+

value: true表示当前item处于吸顶状态；

+

说明：仅当item设置sticky属性时支持注册此事件。

+
+ +## 方法 + +支持[通用方法](js-components-common-methods.md#ZH-CN_TOPIC_0000001209252157)。 + +## 示例 + +详见[List示例](js-components-container-list.md#zh-cn_topic_0000001127284836_section24931424488)。 + diff --git a/zh-cn/application-dev/js-reference/component/js-components-container-list.md b/zh-cn/application-dev/js-reference/component/js-components-container-list.md new file mode 100644 index 0000000000000000000000000000000000000000..0546146044268f964c1e8770133700ad05628266 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-container-list.md @@ -0,0 +1,724 @@ +# list + +- [权限列表](#zh-cn_topic_0000001127284836_section11257113618419) +- [子组件](#zh-cn_topic_0000001127284836_section9288143101012) +- [属性](#zh-cn_topic_0000001127284836_section2907183951110) +- [样式](#zh-cn_topic_0000001127284836_section5775351116) +- [事件](#zh-cn_topic_0000001127284836_section471854810515) +- [方法](#zh-cn_topic_0000001127284836_section47669296127) +- [示例](#zh-cn_topic_0000001127284836_section24931424488) + +列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。 + +## 权限列表 + +无 + +## 子组件 + +仅支持<[list-item-group](js-components-container-list-item-group.md#ZH-CN_TOPIC_0000001209252161)\>和<[list-item](js-components-container-list-item.md#ZH-CN_TOPIC_0000001209412123)\>。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

scrollpage

+

boolean

+

false

+

否

+

设置为true时，将 list 顶部页面中非 list 部分随 list 一起滑出可视区域，当list方向为row时，不支持此属性。

+

cachedcount

+

number

+

0

+

否

+

长列表延迟加载时list-item最少缓存数量。

+

可视区域外缓存的list-item数量少于该值时，会触发requestitem事件。

+

scrollbar

+

string

+

off

+

否

+

侧边滑动栏的显示模式（当前只支持纵向）：

+
  • off：不显示。
  • auto：按需显示(触摸时显示，2s后消失)。
  • on：常驻显示。
+

scrolleffect

+

string

+

spring

+

否

+

滑动效果，目前支持如下滑动效果：

+
  • spring：弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹。
  • fade：渐隐物理动效，滑动到边缘后展示一个波浪形的渐隐，根据速度和滑动距离的变化渐隐也会发送一定的变化。
  • no：滑动到边缘后无效果。
+

indexer

+

boolean | Array<string>

+

false

+

否

+

是否展示侧边栏快速字母索引栏。设置为true或者自定义索引时，索引栏会显示在列表右边界处。示例：

+

"indexer" : "true"表示使用默认字母索引表。

+

"indexer" : "false"表示无索引。

+

"indexer" : ['#',‘1’,'2',‘3’,'4',‘5’,'6',‘7’,'8']表示自定义索引表。自定义时"#"必须要存在。

+
说明：
  • indexer属性生效需要flex-direction属性配合设置为column，且columns属性设置为1。
  • 点击索引条进行列表项索引需要list-item子组件配合设置相应的section属性。
+
+

indexercircle5+

+

boolean

+

-

+

否

+

是否为环形索引。

+

穿戴设备默认为true，其他为false。indexer为false时不生效。

+

indexermulti5+

+

boolean

+

false

+

否

+

是否开启索引条多语言功能。

+

indexer为false时不生效。

+

indexerbubble5+

+

boolean

+

true

+

否

+

是否开启索引切换的气泡提示。

+

indexer为false时不生效。

+

divider5+

+

boolean

+

false

+

否

+

item是否自带分隔线。

+

其样式参考样式列表的divider-color、divider-height、divider-length、divider-origin。

+

shapemode

+

string

+

default

+

否

+

侧边滑动栏的形状类型。

+
  • default：不指定，跟随主题；
  • rect：矩形；
  • round：圆形。
+

itemscale

+

boolean

+

true

+

否

+

焦点处理时，可以通过这个属性取消焦点进出的放大缩小效果。该效果仅在智能穿戴和智慧屏上生效。

+
说明：

仅在columns样式为1的时候生效。

+
+

itemcenter

+

boolean

+

false

+

否

+

初始化页面和滑动后页面总是有一个item处于视口交叉轴的中心位置。该效果仅在智能穿戴上生效。

+

updateeffect

+

boolean

+

false

+

否

+

用于设置当list内部的item发生删除或新增时是否支持动效。

+
  • false：新增删除item时无过渡动效。
  • true：新增删除item时播放过程动效。
+

chainanimation5+

+

boolean

+

false

+

否

+

用于设置当前list是否启用链式联动动效，开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果：list内的list-item间隔一定距离，在基本的滑动交互行为下，主动对象驱动从动对象进行联动，驱动效果遵循弹簧物理动效。

+
  • false：不启用链式联动
  • true：启用链式联动
    说明：
    • 不支持动态修改。
    • 如同时配置了indexer，链式动效不生效。
    • 如配置了链式动效，list-item的sticky不生效。
    +
    +
+

scrollvibrate

+

boolean

+

true

+

否

+

用于设置当list滑动时是否有振动效果，仅在智能穿戴场景生效，其他场景滑动无振动效果。

+
  • true：列表滑动时有振动效果。
  • false：列表滑动时无振动效果。
+

initialindex

+

number

+

0

+

否

+

用于设置当前List初次加载时视口起始位置显示的item，默认为0，即显示第一个item，如设置的序号超过了最后一个item的序号，则设置不生效，当同时设置了initialoffset属性时，当前属性不生效。当indexer为true或者scrollpage为true时，不生效。

+

initialoffset

+

<length>

+

0

+

否

+

用于设置当前List初次加载时视口的起始偏移量，偏移量无法超过当前List可滑动的范围，如果超过会被截断为可滑动范围的极限值。当indexer为true或者scrollpage为true时，不生效。

+

selected5+

+

string

+

-

+

否

+

指定当前列表中被选中激活的项，可选值为list-item的section属性值。

+
+ +## 样式 + +除支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

divider-color5+

+

<color>

+

transparent

+

否

+

item分隔线颜色，仅当list的divider属性为true时生效。

+

divider-height5+

+

<length>

+

1

+

否

+

item分隔线高度，仅当list的divider属性为true时生效。

+

divider-length5+

+

<length>

+

主轴宽度

+

否

+

item分隔线长度，不设置时最大长度为主轴宽度，具体长度取决于divider-origin，仅当list的divider属性为true时生效。

+

divider-origin5+

+

<length>

+

0

+

否

+

item分隔线相对于item主轴起点位置的偏移量，仅当list的divider属性为true时生效。

+

flex-direction

+

string

+

+

column

+

否

+

设置flex容器主轴的方向，指定flex项如何放置在flex容器中，可选值为：

+
  • column：主轴为纵向。
  • row：主轴为横向。
+

其他组件默认值为row，在list组件中默认值为column。

+

columns

+

number

+

1

+

否

+

list交叉轴方向的显示列数，默认为1列。

+
说明：

设置多列时，在list交叉轴上进行均分，每一列大小相同。

+
+

align-items

+

string

+

stretch

+

否

+

list每一列交叉轴上的对齐格式，可选值为：

+
  • stretch：弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。
  • flex-start：元素向交叉轴起点对齐。
  • flex-end：元素向交叉轴终点对齐。
  • center：元素在交叉轴居中。
    说明：

    align-items样式作用在每一列的子元素上，列与列之间采用均分方式布局。

    +
    +
+

item-extent

+

<length> | <percentage>

+

-

+

否

+

设置内部item为固定大小，设置为百分比格式时，指相对于list的视口主轴方向长度的百分比。

+

fade-color

+

<color>

+

grey

+

否

+

设置渐隐物理动效的颜色。当滑动效果设置为渐隐物理动效时生效。

+

scrollbar-color6+

+

<color>

+

-

+

否

+

设置滚动条的颜色。

+

scrollbar-width6+

+

<length>

+

-

+

否

+

设置滚动条的宽度。

+

scrollbar-offset6+

+

<length>

+

0

+

否

+

设置滚动条距离List默认位置的偏移量，只支持正数，默认位置在List右边缘，可以通过这个偏移量调整滚动条的水平位置，如果滚动条绘制在list外部，而list父组件有裁剪，会导致滚动条被裁剪。

+
+ +## 事件 + +除支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)外，还支持如下事件： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

indexerchange5+

+

{ local: booleanValue }

+

多语言索引条切换事件，仅当indexer属性为true，indexermulti为true时生效。booleanValue可能值为true或者false：

+
  • true: 当前展示本地索引。
  • false: 当前展示字母索引。
+

scroll

+

{ scrollX: scrollXValue, scrollY: scrollYValue, scrollState: stateValue }

+

列表滑动的偏移量和状态回调。

+

stateValue: 0表示列表滑动已经停止。

+

stateValue: 1表示列表正在用户触摸状态下滑动。

+

stateValue: 2表示列表正在用户松手状态下滑动。

+

scrollbottom

+

-

+

当前列表已滑动到底部位置。

+

scrolltop

+

-

+

当前列表已滑动到顶部位置。

+

scrollend

+

-

+

列表滑动已经结束。

+

scrolltouchup

+

-

+

手指已经抬起且列表仍在惯性滑动。

+

requestitem

+

-

+

请求创建新的list-item。

+

长列表延迟加载时，可视区域外缓存的list-item数量少于cachedcount时，会触发该事件。

+

rotation7+

+

{ rotateValue: number }

+

返回表冠旋转角度增量值，仅智能穿戴支持。

+
+ +## 方法 + +支持[通用方法](js-components-common-methods.md#ZH-CN_TOPIC_0000001209252157)外，还支持如下方法： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

scrollTo

+

{ index: number(指定位置) }

+

list滑动到指定index的item位置。

+

scrollBy

+

ScrollParam

+

触发list滑动一段距离。

+

智慧屏特有方法。

+

scrollTop

+

{ smooth: boolean }

+

smooth缺省为false，表示直接滚动到顶部。

+

smooth为true，表示平滑滚动到顶部。

+

scrollBottom

+

{ smooth: boolean }

+

smooth缺省为false，表示直接滚动到底部。

+

smooth为true，表示平滑滚动到底部。

+

scrollPage

+

{ reverse: boolean, smooth: boolean }

+

reverse缺省值为false，表示下一页，无完整页则滚动到底部。

+

reverse为true，表示上一页，无完整页则滚动到顶部。

+

smooth缺省值为false，表示直接滚动一页。

+

smooth为true，表示平滑滚动一页。

+

scrollArrow

+

{ reverse: boolean, smooth: boolean }

+

reverse缺省值为false，表示向底部方向滑动一段距离，无足够距离则滚动到底部。

+

reverse为true，表示向顶部方向滑动一段距离，无足够距离则滚动到顶部。

+

smooth缺省值为false，表示直接滚动。

+

smooth为true，表示平滑滚动。

+

collapseGroup

+

{ groupid: string }

+

收拢指定的group。

+

groupid：需要收拢的group的id。

+

当groupid未指定时收拢所有的group。

+

expandGroup

+

{ groupid: string }

+

展开指定的group。

+

groupid：需要展开的group的id。

+

当groupid未指定时展开所有的group。

+

currentOffset

+

-

+

返回当前滑动的偏移量。返回值类型是Object，返回值说明请见表2。

+
+ +**表 1** ScrollParam + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

是否必选

+

默认值

+

备注

+

dx

+

number

+

否

+

0

+

水平方向滑动的偏移量，单位为px。

+

dy

+

number

+

否

+

0

+

垂直方向滑动的偏移量，单位为px。

+

smooth

+

boolean

+

否

+

true

+

列表位置跳转时是否有滑动动画。

+
+ +**表 2** currentOffset返回对象属性说明 + + + + + + + + + + + + + + + + +

名称

+

类型

+

备注

+

x

+

number

+

当前x轴滑动偏移量，单位为px。

+

y

+

number

+

当前y轴滑动偏移量，单位为px。

+
+ +## 示例 + +``` + +
+ + + {{$item.title}} + {{$item.date}} + + +
+``` + +``` +// index.js +export default { + data: { + todolist: [{ + title: '刷题', + date: '2021-12-31 10:00:00', + }, { + title: '看电影', + date: '2021-12-31 20:00:00', + }], + }, +} +``` + +``` +/* index.css */ +.container { + display: flex; + justify-content: center; + align-items: center; + left: 0px; + top: 0px; + width: 454px; + height: 454px; +} +.todo-wrapper { + width: 454px; + height: 300px; +} +.todo-item { + width: 454px; + height: 80px; + flex-direction: column; +} +.todo-title { + width: 454px; + height: 40px; + text-align: center; +} +``` + +![](figures/zh-cn_image_0000001173164787.png) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-container-panel.md b/zh-cn/application-dev/js-reference/component/js-components-container-panel.md new file mode 100644 index 0000000000000000000000000000000000000000..8498a4fc3ca46fb2ca7519355237cf06edbd780f --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-container-panel.md @@ -0,0 +1,547 @@ +# panel + +- [子组件](#zh-cn_topic_0000001127284828_section19368335134016) +- [属性](#zh-cn_topic_0000001127284828_section1100152194018) +- [样式](#zh-cn_topic_0000001127284828_section1137118175437) +- [事件](#zh-cn_topic_0000001127284828_section1614413538447) +- [方法](#zh-cn_topic_0000001127284828_section165301745164719) +- [示例](#zh-cn_topic_0000001127284828_section36743614499) + +可滑动面板。提供一种轻量的内容展示的窗口，可方便的在不同尺寸中切换。属于弹出式组件。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 5 开始支持。 + +## 子组件 + +支持 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

type

+

string

+

foldable

+

是

+

设置可滑动面板类型，不可动态变更，可选值有：

+

  • minibar：提供minibar和类全屏展示切换效果。

    +

  • foldable：内容永久展示类，提供大（类全屏）、中（类半屏）、小三种尺寸展示切换效果。

    +

  • temporary：内容临时展示区，提供大（类全屏）、中（类半屏）两种尺寸展示切换效果。

    +
+

mode

+

string

+

full

+

否

+

设置初始状态，mode参数可选值为：

+

  1. mini：类型为minibar和foldable时，为最小状态；类型为temporary，则不生效。

    +

  2. half: 类型为foldable和temporary时，为类半屏状态；类型为minibar，则不生效。

    +

  3. full: 类全屏状态。

    +
+

dragbar

+

boolean

+

true

+

否

+

设置是否存在dragbar，true表示存在，false表示不存在。

+

fullheight

+

<length>

+

-

+

否

+

指定full状态下的高度，默认为屏幕尺寸 - 8px。

+

halfheight

+

<length>

+

-

+

否

+

指定half状态下的高度，默认为屏幕尺寸的一半。

+

miniheight

+

<length>

+

-

+

否

+

指定mini状态下的高度，默认为48px。

+
+ +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- 不支持渲染属性，包括for、if和show。 +>- 不支持focusable和disabled属性。 + +## 样式 + +仅支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

padding

+

<length>

+

0

+

否

+
该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    +

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    +

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    +

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

    +
+
+

padding-[left|top|right|bottom]

+

<length>

+

0

+

否

+

设置左、上、右、下内边距属性。

+

padding-[start|end]

+

<length>

+

0

+

否

+

设置起始和末端内边距属性。

+

margin

+

<length>

+

0

+

否

+

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

+

  • 只有一个值时，这个值会被指定给全部的四个边。

    +

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    +

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    +

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    +
+

margin-[left|top|right|bottom]

+

<length>

+

0

+

否

+

设置左、上、右、下外边距属性。

+

margin-[start|end]

+

<length>

+

0

+

否

+

设置起始和末端外边距属性。

+

border

+

-

+

0

+

否

+

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

+

border-style

+

string

+

solid

+

否

+

使用简写属性设置所有边框的样式，可选值为：

+
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
+
  • solid：显示为一条实线。
+

border-[left|top|right|bottom]-style

+

string

+

solid

+

否

+

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

+

border-[left|top|right|bottom]

+

-

+

-

+

否

+

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

+

border-width

+

<length>

+

0

+

否

+

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

+

border-[left|top|right|bottom]-width

+

<length>

+

0

+

否

+

分别设置左、上、右、下四个边框的宽度。

+

border-color

+

<color>

+

black

+

否

+

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

+

border-[left|top|right|bottom]-color

+

<color>

+

black

+

否

+

分别设置左、上、右、下四个边框的颜色。

+

border-radius

+

<length>

+

-

+

否

+

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，如果要设置color和width，需要将四个方向一起设置（border-width、border-color）。

+

border-[top|bottom]-[left|right]-radius

+

<length>

+

-

+

否

+

分别设置左上，右上，右下和左下四个角的圆角半径。

+

background

+

<linear-gradient>

+

-

+

否

+

仅支持设置渐变样式，与background-color、background-image不兼容。

+

background-color

+

<color>

+

-

+

否

+

设置背景颜色。

+

background-image

+

string

+

-

+

否

+

设置背景图片。与background-color、background不兼容；支持本地图片资源地址。

+

background-size

+
  • string
  • <length> <length>
  • <percentage> <percentage>
+

auto

+

否

+

设置背景图片的大小。

+
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    +
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    +
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    +
+

background-repeat

+

string

+

repeat

+

否

+

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

+
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
+

background-position

+
  • string string
  • <length> <length>
  • <percentage> <percentage>
+

0px 0px

+

否

+
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    +
+
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>
+

opacity

+

number

+

1

+

否

+

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

+
+ +## 事件 + +仅支持如下事件： + + + + + + + + + + + + +

名称

+

参数

+

描述

+

sizechange

+

{ size: { height: heightLength, width: widthLength }, mode: modeStr }

+

当可滑动面板发生状态变化时触发，mode参数可选值为：

+

  1. mini：类型为minibar和foldable时，处于最小状态；

    +

  2. half: 类型为foldable时，处于类半屏状态；

    +

  3. full: 类全屏状态。

    +
    说明：

    返回的height值为内容区高度值，当dragbar属性为true时，panel本身的高度值为dragbar高度加上内容区高度。

    +
    +
+
+ +## 方法 + +仅支持如下方法： + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

show

+

-

+

弹出panel可滑动面板。

+

close

+

-

+

关闭panel可滑动面板。

+
+ +## 示例 + +``` + +
+
+ +
+ +
+
+ Simple panel in {{modeFlag}} mode +
+
+ +
+
+ +
+``` + +``` +/* xxx.css */ +.doc-page { + flex-direction: column; + justify-content: center; + align-items: center; +} +.btn-div { + width: 100%; + height: 200px; + flex-direction: column; + align-items: center; + justify-content: center; +} +.txt { + color: #000000; + font-weight: bold; + font-size: 39px; +} +.panel-div { + width: 100%; + flex-direction: column; + align-items: center; +} +.inner-txt { + width: 100%; + height: 160px; + flex-direction: column; + align-items: center; + justify-content: center; +} +.inner-btn { + width: 100%; + height: 120px; + justify-content: center; + align-items: center; +} +``` + +``` +// xxx.js +export default { + data: { + modeFlag: "half" + }, + showPanel() { + this.$element('simplepanel').show() + }, + closePanel() { + this.$element('simplepanel').close() + }, + changeMode(e) { + this.modeFlag = e.mode + } +} +``` + +![](figures/panel6.gif) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-container-popup.md b/zh-cn/application-dev/js-reference/component/js-components-container-popup.md new file mode 100644 index 0000000000000000000000000000000000000000..97080d5272f4e6514df8b25de1bd78f1d434dd28 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-container-popup.md @@ -0,0 +1,247 @@ +# popup + +- [权限列表](#zh-cn_topic_0000001127284822_section11257113618419) +- [子组件](#zh-cn_topic_0000001127284822_s726c642d8f514b0cb5ef8854fe6ac02c) +- [属性](#zh-cn_topic_0000001127284822_s7ff9da9346504b11aca7015dc689dc67) +- [样式](#zh-cn_topic_0000001127284822_s472a5052130e49bca059adfe7bb6b96d) +- [事件](#zh-cn_topic_0000001127284822_section1295913853210) +- [方法](#zh-cn_topic_0000001127284822_section1970516568131) +- [示例](#zh-cn_topic_0000001127284822_section29231018162418) + +气泡指示。在点击绑定的控件后会弹出相应的气泡提示来引导用户进行操作。 + +## 权限列表 + +无 + +## 子组件 + +支持单个子组件节点5+。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)外，还支持如下属性：↵ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

target

+

string

+

-

+

是

+

目标元素的id属性值，不支持动态切换。

+

placement

+

string

+

bottom

+

否

+

弹出窗口位置。可选值为：

+
  • left：位于目标元素左边；
  • right：位于目标元素右边；
  • top：位于目标元素上边；
  • bottom：位于目标元素下边；
  • topLeft：位于目标元素左上角；
  • topRight：位于目标元素右上角；
  • bottomLeft：位于目标元素左下角；
  • bottomRight：位于目标元素右下角。
+

keepalive5+

+

boolean

+

false

+

否

+

设置当前popup是否需要保留。设置为true时，点击屏幕区域或者页面切换气泡不会消失，需调用气泡组件的hide方法才可让气泡消失；设置为false时，点击屏幕区域或者页面切换气泡会自动消失。

+

clickable5+

+

boolean

+

true

+

否

+

popup是否使用点击弹窗，当设置为false时，只支持方法调用显示。

+

arrowoffset5+

+

<length>

+

0

+

否

+

popup箭头在弹窗处的偏移，默认居中，正值按照语言方向进行偏移，负值相反。

+
+ +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- 不支持focusable属性。 + +## 样式 + +除支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)外，还支持如下样式： + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

mask-color

+

<color>

+

-

+

否

+

遮罩层的颜色，默认值为全透明。

+
+ +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- 不支持position相关样式。 + +## 事件 + +除支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)外，还支持如下事件： + + + + + + + + + + + + +

名称

+

参数

+

描述

+

visibilitychange

+

{ visibility: boolean }

+

当气泡弹出和消失时会触发该回调函数。

+
+ +## 方法 + +仅支持如下方法： + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

show5+

+

-

+

弹出气泡提示。

+

hide5+

+

-

+

取消气泡提示。

+
+ +>![](../../public_sys-resources/icon-note.gif) **说明：** +>1. popup气泡弹窗属性、样式均不支持动态更新。 +>2. popup气泡弹窗的margin样式是相对于target元素进行生效的，如popup在target元素下方，此时只生效margin-top样式，popup在target元素左上方，此时只生效margin-bottom和margin-right样式。 +>3. popup的border四边样式需一致，若四边设置不一致且圆角为零，则按左、上、右、下的顺序取第一个被设置的样式，否则border不生效。 +>4. popup的target组件的click事件不生效。 + +## 示例 + +``` + +
+ Click to show the pop-up + + + Text content of the pop-up + + +
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + align-items: center; + padding-top: 200px; +} +.popup { + mask-color: gray; +} +.text { + color: white; +} +.button { + width: 220px; + height: 70px; + margin-top: 50px; +} +``` + +``` +// xxx.js +import prompt from '@system.prompt' +export default { + visibilitychange(e) { + prompt.showToast({ + message: 'visibility change visibility: ' + e.visibility, + duration: 3000, + }); + }, + showpopup() { + this.$element("popup").show(); + }, + hidepopup() { + this.$element("popup").hide(); + }, +} +``` + +![](figures/zh-cn_image_0000001178886129.png) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-container-refresh.md b/zh-cn/application-dev/js-reference/component/js-components-container-refresh.md new file mode 100644 index 0000000000000000000000000000000000000000..139467290d3b3937f6762f58bb58930eaa79f1a2 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-container-refresh.md @@ -0,0 +1,272 @@ +# refresh + +- [权限列表](#zh-cn_topic_0000001173164669_section11257113618419) +- [子组件](#zh-cn_topic_0000001173164669_section9288143101012) +- [属性](#zh-cn_topic_0000001173164669_section2907183951110) +- [样式](#zh-cn_topic_0000001173164669_section1893981522413) +- [事件](#zh-cn_topic_0000001173164669_section3892191911214) +- [方法](#zh-cn_topic_0000001173164669_section2279124532420) +- [示例](#zh-cn_topic_0000001173164669_section1050103282219) + +下拉刷新容器。 + +## 权限列表 + +无 + +## 子组件 + +支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

offset

+

<length>

+

-

+

否

+

刷新组件静止时距离父组件顶部的距离。

+

refreshing

+

boolean

+

false

+

否

+

用于标识刷新组件当前是否正在刷新。

+

type

+

string

+

auto

+

否

+

设置组件刷新时的动效。两个可选值，不支持动态修改。

+
  • auto: 默认效果，列表界面拉到顶后，列表不移动，下拉后有转圈弹出。
  • pulldown: 列表界面拉到顶后，可以继续往下滑动一段距离触发刷新，刷新完成后有回弹效果（如果子组件含有list，防止下拉效果冲突，需将list的scrolleffect设置为no）。
+

lasttime

+

boolean

+

false

+

否

+

是否显示上次更新时间，字符串格式为：“上次更新时间：XXXX ”，XXXX 按照时间日期显示规范显示，不可动态修改（建议type为pulldown时使用，固定距离位于内容下拉区域底部，使用时注意offset属性设置，防止出现重叠）。

+

timeoffset6+

+

<length>

+

-

+

否

+

设置更新时间距离父组件顶部的距离。

+

friction

+

number

+

42

+

否

+

下拉摩擦系数，取值范围：0-100，数值越大refresh组件跟手性高，数值越小refresh跟手性低。

+
说明：

仅手机、平板和智能穿戴设备支持。

+
+
+ +## 样式 + +除支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

background-color

+

<color>

+

white

+

否

+

用于设置刷新组件的背景颜色。

+

progress-color

+

<color>

+

black

+

否

+

用于设置刷新组件的loading颜色。

+
+ +## 事件 + +仅支持如下事件： + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

refresh

+

{ refreshing: refreshingValue }

+

下拉刷新状态变化时触发。可能值：

+
  • false：当前处于下拉刷新过程中。
  • true：当前未处于下拉刷新过程中。
+

pulldown

+

{ state: string }

+

下拉开始和松手时触发。可能值：

+
  • start：表示开始下拉。
  • end：表示结束下拉。
+
+ +## 方法 + +不支持[通用方法](js-components-common-methods.md#ZH-CN_TOPIC_0000001209252157)。 + +## 示例 + +``` + +
+ + + +
+ {{$item}} +
+ + + +
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + align-items: center; + width: 100%; + height: 100%; +} + +.list { + width: 100%; + height: 100%; +} + +.listitem { + width: 100%; + height: 150px; +} + +.content { + width: 100%; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.text { + font-size: 35px; + font-weight: bold; +} +``` + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + data: { + list:[], + fresh:false + }, + onInit() { + this.list = []; + for (var i = 0; i <= 3; i++) { + var item = '列表元素' + i; + this.list.push(item); + } + }, + refresh: function (e) { + prompt.showToast({ + message: '刷新中...' + }) + var that = this; + that.fresh = e.refreshing; + setTimeout(function () { + that.fresh = false; + var addItem = '更新元素'; + that.list.unshift(addItem); + prompt.showToast({ + message: '刷新完成!' + }) + }, 2000) + } +} +``` + +![](figures/zh-cn_image_0000001150719520.gif) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-container-stack.md b/zh-cn/application-dev/js-reference/component/js-components-container-stack.md new file mode 100644 index 0000000000000000000000000000000000000000..e7d3365a446a1f133a87b7b3d6959ac144e53ccc --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-container-stack.md @@ -0,0 +1,80 @@ +# stack + +- [权限列表](#zh-cn_topic_0000001127125064_section11257113618419) +- [子组件](#zh-cn_topic_0000001127125064_s2936fc34a22b44aa8389d1ec3de8fa61) +- [属性](#zh-cn_topic_0000001127125064_s7207d4d586504fa3be62558273017fbe) +- [样式](#zh-cn_topic_0000001127125064_section1774719169253) +- [事件](#zh-cn_topic_0000001127125064_section1948143416285) +- [方法](#zh-cn_topic_0000001127125064_section2279124532420) +- [示例](#zh-cn_topic_0000001127125064_section18137649112711) + +堆叠容器，子组件按照顺序依次入栈，后一个子组件覆盖前一个子组件。 + +## 权限列表 + +无 + +## 子组件 + +支持。 + +## 属性 + +支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)。 + +## 样式 + +支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)。 + +## 事件 + +支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)。 + +## 方法 + +支持[通用方法](js-components-common-methods.md#ZH-CN_TOPIC_0000001209252157)。 + +## 示例 + +``` + + +
+
+
+ +``` + +``` +/* xxx.css */ +.stack-parent { + width: 400px; + height: 400px; + background-color: #ffffff; + border-width: 1px; + border-style: solid; +} +.back-child { + width: 300px; + height: 300px; + background-color: #3f56ea; +} +.front-child { + width: 100px; + height: 100px; + background-color: #00bfc9; +} +.positioned-child { + width: 100px; + height: 100px; + left: 50px; + top: 50px; + background-color: #47cc47; +} +.bd-radius { + border-radius: 16px; +} +``` + +![](figures/zh-cn_image_0000001127284958.png) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-container-stepper-item.md b/zh-cn/application-dev/js-reference/component/js-components-container-stepper-item.md new file mode 100644 index 0000000000000000000000000000000000000000..f44dfa713f8048e9a4fcfc57105fdc6293ee1fe8 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-container-stepper-item.md @@ -0,0 +1,241 @@ +# stepper-item + +- [权限列表](#zh-cn_topic_0000001127125034_section11257113618419) +- [子组件](#zh-cn_topic_0000001127125034_section9288143101012) +- [属性](#zh-cn_topic_0000001127125034_section2907183951110) +- [样式](#zh-cn_topic_0000001127125034_section1326042123512) +- [事件](#zh-cn_topic_0000001127125034_section121081858163714) +- [方法](#zh-cn_topic_0000001127125034_section2279124532420) +- [示例](#zh-cn_topic_0000001127125034_section10326712123215) + +步骤导航器子组件，作为步骤导航器某一个步骤的内容展示组件。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 5 开始支持。 + +## 权限列表 + +无 + +## 子组件 + +支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)外，还支持如下属性： + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

label

+

Label

+

-

+

否

+

自定义步骤导航器底部步骤提示文本按钮属性，不支持动态修改。如果没有定义该属性，步骤导航器在中文语言环境下，使用“返回”和“下一步”文本按钮，在非中文语言环境下，使用“BACK”和“NEXT”文本按钮。针对第一个步骤，没有回退文本按钮，针对最后一个步骤，下一步文本按钮文本使用“开始”（中文语言）或者“START”（非中文语言）。

+
+ +**表 1** Label对象定义 + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

描述

+

prevLabel

+

string

+

-

+

步骤导航器底部回退文本按钮的描述文本。

+

nextLabel

+

string

+

-

+

步骤导航器底部下一步文本按钮的描述文本。

+

status

+

string

+

normal

+

步骤导航器当前步骤的初始状态，可选值为：

+
  • normal：正常状态，右侧文本按钮正常显示，可点击进入下一个步骤。
+
  • disabled：不可用状态，右侧文本按钮灰度显示，不可点击进入下一个步骤。
+
  • waiting：等待状态，右侧文本按钮不显示，使用等待进度条，不可点击进入下一个步骤。
+
+ +## 样式 + +除支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

color

+

<color>

+

-

+

否

+

文本颜色。

+

font-size

+

<length>

+

-

+

否

+

文本大小。

+

allow-scale

+

boolean

+

true

+

否

+

文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

+

font-style

+

string

+

normal

+

否

+

文本字体样式，可选值为：

+
  • normal: 标准的字体样式；
  • italic: 斜体的字体样式。
+

font-weight

+

number|string

+

normal

+

否

+

文本字体粗细，number类型取值[100, 900]的整数（被100整除），默认为400，取值越大，字体越粗。string类型取值为：lighter、normal、bold、bolder。

+

text-decoration

+

string

+

none

+

否

+

文本修饰，可选值为：

+
  • underline: 文本下划线修饰。
  • line-through: 穿过文本的修饰线。
  • none: 标准文本。
+

font-family

+

string

+

sans-serif

+

否

+

字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

+
+ +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- 不支持长宽样式，宽和父容器stepper一样，高是父容器stepper减去底部导航按钮的高度。 +>- 不支持posit样式。 + +## 事件 + +除支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)外，还支持如下事件： + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

appear

+

-

+

当该步骤出现时触发。

+

disappear

+

-

+

当该步骤消失时触发。

+
+ +## 方法 + +不支持[通用方法](js-components-common-methods.md#ZH-CN_TOPIC_0000001209252157)。 + +## 示例 + +详见[stepper示例](js-components-container-stepper.md#ZH-CN_TOPIC_0000001163812214)。 + diff --git a/zh-cn/application-dev/js-reference/component/js-components-container-stepper.md b/zh-cn/application-dev/js-reference/component/js-components-container-stepper.md new file mode 100644 index 0000000000000000000000000000000000000000..edd8c0787548b4459602888e0ba5a53f1a00a135 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-container-stepper.md @@ -0,0 +1,230 @@ +# stepper + +- [权限列表](#zh-cn_topic_0000001173324583_section11257113618419) +- [子组件](#zh-cn_topic_0000001173324583_section9288143101012) +- [属性](#zh-cn_topic_0000001173324583_section191521418142311) +- [样式](#zh-cn_topic_0000001173324583_section72591594253) +- [事件](#zh-cn_topic_0000001173324583_section69611614182911) +- [方法](#zh-cn_topic_0000001173324583_section1954212182148) +- [示例](#zh-cn_topic_0000001173324583_section15374183712313) + +步骤导航器。当完成一个任务需要多个步骤时，可以使用步骤导航器展示当前进展。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 5 开始支持。 + +## 权限列表 + +无 + +## 子组件 + +仅支持子组件。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>步骤导航器内的步骤顺序按照子组件的顺序进行排序。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)外，还支持如下属性： + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

描述

+

index

+

number

+

-

+

设置步骤导航器步骤显示第几个stepper-item子组件。

+
+ +## 样式 + +支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>stepper组件默认占满父容器大小，建议父组件使用应用窗口大小（或者父组件为根节点）来优化体验。 + +## 事件 + +除支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)外，还支持如下事件： + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

finish

+

无

+

当步骤导航器最后一个步骤完成时触发该事件。

+

skip

+

无

+

当通过setNextButtonStatus方法设置当前步骤导航器可跳过时，点击右侧跳过按钮触发该事件。

+

change

+

{ prevIndex：prevIndex, index: index}

+

当步骤导航器点击左边或者右边文本按钮进行步骤切换时触发该事件，prevIndex表示老步骤的序号，index表示新步骤的序号。

+

next

+

{ index：index, pendingIndex: pendingIndex }

+

当用户点击下一步按钮时触发该事件，index表示当前步骤序号，pendingIndex表示将于跳转的序号，该事件有返回值，返回值格式为：{ pendingIndex：pendingIndex }，可以通过指定pendingIndex来修改下一个步骤使用哪个stepper-item子组件。

+

back

+

{ index：index, pendingIndex: pendingIndex }

+

当用户点击上一步按钮时触发该事件，index表示当前步骤序号，pendingIndex表示将于跳转的序号，该事件有返回值，返回值格式为Object：{ pendingIndex：pendingIndex }，可以通过指定pendingIndex来修改上一个步骤使用哪个stepper-item子组件。

+
+ +## 方法 + +除支持[通用方法](js-components-common-methods.md#ZH-CN_TOPIC_0000001209252157)外，支持如下方法： + + + + + + + + + + + + +

名称

+

参数

+

描述

+

setNextButtonStatus

+

{ status: string, label: label }

+

设置当前步骤导航器下一步文本按钮的状态，参数中status类型为string，可选值为：

+
  1. normal：正常状态，下一步文本按钮正常显示，可点击进入下一个步骤；
  2. disabled：不可用状态，下一步文本按钮灰度显示，不可点击进入下一个步骤；
  3. waiting：等待状态，下一步文本按钮不显示，使用等待进度条，不可点击进入下一个步骤。
  4. skip：跳过状态，下一步文本按钮显示跳过按钮，点击时会跳过剩下步骤。
+
+ +## 示例 + +``` + +
+ + +
+ First screen +
+ + + +
+ Second screen +
+ + + +
+ Third screen +
+ + + +
+``` + +``` +/* xxx.css */ +.container { + margin-top: 20px; + flex-direction: column; + align-items: center; + height: 300px; +} +.stepperItem { + flex-direction: column; + align-items: center; +} +.stepperItemContent { + color: #0000ff; + font-size: 50px; + justify-content: center; +} +.button { + width: 60%; + margin-top: 30px; + justify-content: center; +} +``` + +``` +// xxx.js +export default { + data: { + label_1: + { + prevLabel: 'BACK', + nextLabel: 'NEXT', + status: 'normal' + }, + label_2: + { + prevLabel: 'BACK', + nextLabel: 'NEXT', + status: 'normal' + }, + label_3: + { + prevLabel: 'BACK', + nextLabel: 'NEXT', + status: 'normal' + }, + }, + setRightButton(e) { + this.$element('mystepper').setNextButtonStatus({status: 'skip', label: 'SKIP'}); + }, + nextclick(e) { + var index = { + pendingIndex: e.pendingIndex + } + return index; + }, + backclick(e) { + var index = { + pendingIndex: e.pendingIndex + } + return index; + }, +} +``` + +![](figures/Video_2021-03-26_154549.gif) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-container-swiper.md b/zh-cn/application-dev/js-reference/component/js-components-container-swiper.md new file mode 100644 index 0000000000000000000000000000000000000000..72afbea3b490845a2aff1e9099c4a6b96f3a65ea --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-container-swiper.md @@ -0,0 +1,388 @@ +# swiper + +- [权限列表](#zh-cn_topic_0000001173164745_section11257113618419) +- [子组件](#zh-cn_topic_0000001173164745_section9288143101012) +- [属性](#zh-cn_topic_0000001173164745_section2907183951110) +- [样式](#zh-cn_topic_0000001173164745_section08721578337) +- [事件](#zh-cn_topic_0000001173164745_section5891352194417) +- [方法](#zh-cn_topic_0000001173164745_section47669296127) +- [示例](#zh-cn_topic_0000001173164745_section1933534232313) + +滑动容器，提供切换子组件显示的能力。 + +## 权限列表 + +无 + +## 子组件 + +支持除之外的子组件。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

index

+

number

+

0

+

否

+

当前在容器中显示的子组件的索引值。

+

autoplay

+

boolean

+

false

+

否

+

子组件是否自动播放，自动播放状态下，导航点不可操作5+。

+

interval

+

number

+

3000

+

否

+

使用自动播放时播放的时间间隔，单位为ms。

+

indicator

+

boolean

+

true

+

否

+

是否启用导航点指示器，默认true。

+

digital5+

+

boolean

+

false

+

否

+

是否启用数字导航点，默认为false。

+
说明：

必须设置indicator时才能生效数字导航点。

+
+

indicatormask

+

boolean

+

false

+

否

+

是否采用指示器蒙版，设置为true时，指示器会有渐变蒙版出现。

+
说明：

手机上不生效5+。

+
+

indicatordisabled5+

+

boolean

+

false

+

否

+

指示器是否禁止用户手势操作，设置为true时，指示器不会响应用户的点击拖拽。

+

loop

+

boolean

+

true

+

否

+

是否开启循环滑动。

+

duration

+

number

+

-

+

否

+

子组件切换的动画时长。

+

vertical

+

boolean

+

false

+

否

+

是否为纵向滑动，纵向滑动时采用纵向的指示器。

+

cachedsize7+

+

number

+

-1

+

否

+

swiper延迟加载时item最少缓存数量。-1表示全部缓存。

+

scrolleffect7+

+

string

+

spring

+

否

+

滑动效果。目前支持如下：

+
  • spring：弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹。
  • fade：渐隐物理动效，滑动到边缘后展示一个波浪形的渐隐，根据速度和滑动距离的变化渐隐也会发送一定的变化
  • none：滑动到边缘后无效果。
+
+ +## 样式 + +除支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

indicator-color

+

<color>

+

-

+

否

+

导航点指示器的填充颜色。

+

indicator-selected-color

+

<color>

+

#ff007dff

+

否

+

导航点指示器选中的颜色。

+

indicator-size

+

<length>

+

4px

+

否

+

导航点指示器的直径大小。

+

indicator-top|left|right|bottom

+

<length> | <percentage>

+

-

+

否

+

导航点指示器在swiper中的相对位置。

+
+ +## 事件 + +除支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)外，还支持如下事件： + + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

change

+

{ index: currentIndex }

+

当前显示的组件索引变化时触发该事件。

+

rotation

+

{ value: rotationValue }

+

智能穿戴表冠旋转事件触发时的回调。

+

animationfinish7+

+

-

+

动画结束时触发该事件。

+
+ +## 方法 + +除支持[通用方法](js-components-common-methods.md#ZH-CN_TOPIC_0000001209252157)外，还支持如下方法： + + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

swipeTo

+

{ index: number(指定位置) }

+

切换到index位置的子组件。

+

showNext

+

无

+

显示下一个子组件。

+

showPrevious

+

无

+

显示上一个子组件。

+
+ +## 示例 + +``` + +
+ +
+ First screen +
+
+ Second screen +
+
+ Third screen +
+ + + + +
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + width: 100%; + height: 100%; + align-items: center; +} +.swiper { + flex-direction: column; + align-content: center; + align-items: center; + width: 70%; + height: 130px; + border: 1px solid #000000; + indicator-color: #cf2411; + indicator-size: 14px; + indicator-bottom: 20px; + indicator-right: 30px; + margin-top: 100px; +} +.swiperContent { + height: 100%; + justify-content: center; +} +.button { + width: 70%; + margin: 10px; +} +.text { + font-size: 40px; +} +``` + +``` +// xxx.js +export default { + swipeTo() { + this.$element('swiper').swipeTo({index: 2}); + }, + showNext() { + this.$element('swiper').showNext(); + }, + showPrevious() { + this.$element('swiper').showPrevious(); + } +} +``` + +![](figures/zh-cn_image_0000001196052269.gif) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-container-tab-bar.md b/zh-cn/application-dev/js-reference/component/js-components-container-tab-bar.md new file mode 100644 index 0000000000000000000000000000000000000000..45e8ec91120f96d665127ada84032f0af4b0b612 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-container-tab-bar.md @@ -0,0 +1,68 @@ +# tab-bar + +- [权限列表](#zh-cn_topic_0000001173324603_section11257113618419) +- [子组件](#zh-cn_topic_0000001173324603_sfddaafa400fa4802a6c4344a0cc0f9ed) +- [属性](#zh-cn_topic_0000001173324603_s45d9533b71b049aba681c57db73d9f7b) +- [样式](#zh-cn_topic_0000001173324603_section193239416388) +- [事件](#zh-cn_topic_0000001173324603_section71081937192815) +- [方法](#zh-cn_topic_0000001173324603_section2279124532420) +- [示例](#zh-cn_topic_0000001173324603_section10605165263911) + +<[tabs](js-components-container-tabs.md#ZH-CN_TOPIC_0000001209252163)\>的子组件，用来展示tab的标签区，子组件排列方式为横向排列。 + +## 权限列表 + +无 + +## 子组件 + +支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)外，还支持如下属性： + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

mode

+

string

+

scrollable

+

否

+

设置组件宽度的可延展性。可选值为：

+
  • scrollable：子组件宽度为实际设置的宽度，当宽度之和（包括margin边距）大于tab-bar的宽度时，子组件可以横向滑动。
  • fixed：子组件宽度均分tab-bar的宽度。
+
+ +## 样式 + +支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)。 + +## 事件 + +支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)。 + +## 方法 + +支持[通用方法](js-components-common-methods.md#ZH-CN_TOPIC_0000001209252157)。 + +## 示例 + +详见[tabs示例](js-components-container-tabs.md#zh-cn_topic_0000001173324585_section14993155318710)。 + diff --git a/zh-cn/application-dev/js-reference/component/js-components-container-tab-content.md b/zh-cn/application-dev/js-reference/component/js-components-container-tab-content.md new file mode 100644 index 0000000000000000000000000000000000000000..08d29ba62823a254345ff628d997b7e471d147ec --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-container-tab-content.md @@ -0,0 +1,62 @@ +# tab-content + +- [权限列表](#zh-cn_topic_0000001173164727_section11257113618419) +- [子组件](#zh-cn_topic_0000001173164727_s6831289f2fac48a892746bd57f336c26) +- [属性](#zh-cn_topic_0000001173164727_s623ab9c704b24c329d0e91e85a30263e) +- [样式](#zh-cn_topic_0000001173164727_section15751323144115) +- [事件](#zh-cn_topic_0000001173164727_s0c39d3f35b9d4af69a19456ae743c675) +- [示例](#zh-cn_topic_0000001173164727_section11929165914411) + +<[tabs](js-components-container-tabs.md#ZH-CN_TOPIC_0000001209252163)\>的子组件，用来展示tab的内容区，高度默认充满tabs剩余空间，子组件排列方式为横向排列，当作为容器组件的子元素时在主轴方向需要设置tab-content的确定长度，否则无法显示。 + +## 权限列表 + +无 + +## 子组件 + +支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)外，还支持如下属性： + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

scrollable

+

boolean

+

true

+

否

+

是否可以通过左右滑动进行页面切换。默认为true，设置为false后，页面的切换只能通过tab-bar的点击实现。

+
+ +## 样式 + +支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)。 + +## 事件 + +支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)。 + +## 示例 + +详见[tabs示例](js-components-container-tabs.md#zh-cn_topic_0000001173324585_section14993155318710)。 + diff --git a/zh-cn/application-dev/js-reference/component/js-components-container-tabs.md b/zh-cn/application-dev/js-reference/component/js-components-container-tabs.md new file mode 100644 index 0000000000000000000000000000000000000000..e9c3d7f04e8e47ed4da0dfaa1a427bc75f308377 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-container-tabs.md @@ -0,0 +1,162 @@ +# tabs + +- [权限列表](#zh-cn_topic_0000001173324585_section11257113618419) +- [子组件](#zh-cn_topic_0000001173324585_section9288143101012) +- [属性](#zh-cn_topic_0000001173324585_section2907183951110) +- [样式](#zh-cn_topic_0000001173324585_section169548171376) +- [事件](#zh-cn_topic_0000001173324585_section3892191911214) +- [示例](#zh-cn_topic_0000001173324585_section14993155318710) + +tab页签容器。 + +## 权限列表 + +无 + +## 子组件 + +仅支持最多一个<[tab-bar](js-components-container-tab-bar.md#ZH-CN_TOPIC_0000001164130760)\>和最多一个<[tab-content](js-components-container-tab-content.md#ZH-CN_TOPIC_0000001164290710)\>。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

index

+

number

+

0

+

否

+

当前处于激活态的tab索引。

+

vertical

+

boolean

+

false

+

否

+

是否为纵向的tab，默认为false，可选值为：

+
  • false：tabbar和tabcontent上下排列。
  • true：tabbar和tabcontent左右排列。
+
+ +## 样式 + +支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)。 + +## 事件 + +除支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)外，还支持如下事件： + + + + + + + + + + + + +

名称

+

参数

+

描述

+

change

+

{ index: indexValue }

+

tab页签切换后触发。

+
说明：

动态修改index值不会触发该回调。

+
+
+ +## 示例 + +``` + +
+ + + Home + Index + Detail + + +
+ First screen +
+
+ Second screen +
+
+ Third screen +
+ + +
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: flex-start; + align-items: center; +} +.tabs { + width: 100%; +} +.tabcontent { + width: 100%; + height: 80%; + justify-content: center; +} +.item-content { + height: 100%; + justify-content: center; +} +.item-title { + font-size: 60px; +} +.tab-bar { + margin: 10px; + height: 60px; + border-color: #007dff; + border-width: 1px; +} +.tab-text { + width: 300px; + text-align: center; +} +``` + +``` +// xxx.js +export default { + change: function(e) { + console.log("Tab index: " + e.index); + }, +} +``` + +![](figures/tab.gif) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-container.md b/zh-cn/application-dev/js-reference/component/js-components-container.md new file mode 100644 index 0000000000000000000000000000000000000000..7d8b93a558741d70e285704ad8770a2f5aa92cfc --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-container.md @@ -0,0 +1,37 @@ +# 容器组件 + +- **[badge](js-components-container-badge.md)** + +- **[dialog](js-components-container-dialog.md)** + +- **[div](js-components-container-div.md)** + +- **[form](js-components-container-form.md)** + +- **[list](js-components-container-list.md)** + +- **[list-item](js-components-container-list-item.md)** + +- **[list-item-group](js-components-container-list-item-group.md)** + +- **[panel](js-components-container-panel.md)** + +- **[popup](js-components-container-popup.md)** + +- **[refresh](js-components-container-refresh.md)** + +- **[stack](js-components-container-stack.md)** + +- **[stepper](js-components-container-stepper.md)** + +- **[stepper-item](js-components-container-stepper-item.md)** + +- **[swiper](js-components-container-swiper.md)** + +- **[tabs](js-components-container-tabs.md)** + +- **[tab-bar](js-components-container-tab-bar.md)** + +- **[tab-content](js-components-container-tab-content.md)** + + diff --git "a/zh-cn/application-dev/js-reference/\345\237\272\346\234\254\347\224\250\346\263\225.md" b/zh-cn/application-dev/js-reference/component/js-components-custom-basic-usage.md old mode 100755 new mode 100644 similarity index 43% rename from "zh-cn/application-dev/js-reference/\345\237\272\346\234\254\347\224\250\346\263\225.md" rename to zh-cn/application-dev/js-reference/component/js-components-custom-basic-usage.md index 31d055a63cb135098b36693265e4b7f69a3dfdec..baafe60345b3be4cca738be8de2a24e098c374d5 --- "a/zh-cn/application-dev/js-reference/\345\237\272\346\234\254\347\224\250\346\263\225.md" +++ b/zh-cn/application-dev/js-reference/component/js-components-custom-basic-usage.md @@ -1,8 +1,8 @@ -# 基本用法 +# 基本用法 -- [对象](#zh-cn_topic_0000001058988954_section7681164881014) +- [对象](#zh-cn_topic_0000001127284892_section7681164881014) -自定义组件是用户根据业务需求，将已有的组件组合，封装成的新组件，可以在工程中多次调用，提高代码的可读性。自定义组件通过element引入到宿主页面，使用方法： +自定义组件是用户根据业务需求，将已有的组件组合，封装成的新组件，可以在工程中多次调用，从而提高代码的可读性。自定义组件通过element引入到宿主页面，使用方法如下： ``` @@ -11,44 +11,55 @@ ``` +结合if-else使用自定义组件的示例： + +``` + + +
+ + +
+``` + - name属性指自定义组件名称\(非必填\)，组件名称对大小写不敏感，默认使用小写。src属性指自定义组件hml文件路径\(必填\)，若没有设置name属性，则默认使用hml文件名作为组件名。 - 事件绑定：自定义组件中绑定子组件事件使用\(on|@\)child1语法，子组件中通过this.$emit\('child1', \{ params: '传递参数' \}\)触发事件并进行传值，父组件执行bindParentVmMethod方法并接收子组件传递的参数。 - >![](public_sys-resources/icon-note.gif) **说明：** + >![](../../public_sys-resources/icon-note.gif) **说明：** >子组件中使用驼峰命名法命名的事件，在父组件中绑定时需要使用短横线分隔命名形式，例如：@children-event表示绑定子组件的childrenEvent事件，如 @children-event="bindParentVmMethod"。 -## 对象 +## 对象 - -

属性

+ + - - - - - - - - - - - diff --git "a/zh-cn/application-dev/js-reference/\344\272\213\344\273\266\345\217\202\346\225\260.md" b/zh-cn/application-dev/js-reference/component/js-components-custom-event-parameter.md old mode 100755 new mode 100644 similarity index 93% rename from "zh-cn/application-dev/js-reference/\344\272\213\344\273\266\345\217\202\346\225\260.md" rename to zh-cn/application-dev/js-reference/component/js-components-custom-event-parameter.md index 1e6c677f0ff6cabba78e89ca756301e88f560adf..d12ab7154e5ae3e3c510bc65615a094cb10e916a --- "a/zh-cn/application-dev/js-reference/\344\272\213\344\273\266\345\217\202\346\225\260.md" +++ b/zh-cn/application-dev/js-reference/component/js-components-custom-event-parameter.md @@ -1,4 +1,4 @@ -# 事件参数 +# 事件参数 子组件也可以通过绑定的事件向上传递参数，在自定义事件上添加传递参数的示例如下： diff --git "a/zh-cn/application-dev/js-reference/\350\207\252\345\256\232\344\271\211\344\272\213\344\273\266.md" b/zh-cn/application-dev/js-reference/component/js-components-custom-events.md old mode 100755 new mode 100644 similarity index 94% rename from "zh-cn/application-dev/js-reference/\350\207\252\345\256\232\344\271\211\344\272\213\344\273\266.md" rename to zh-cn/application-dev/js-reference/component/js-components-custom-events.md index 60b7b287ad73361685183ee2e5a92d8567313da7..31b84378bcaac2f83bde2f670f14d9b71901bad5 --- "a/zh-cn/application-dev/js-reference/\350\207\252\345\256\232\344\271\211\344\272\213\344\273\266.md" +++ b/zh-cn/application-dev/js-reference/component/js-components-custom-events.md @@ -1,4 +1,4 @@ -# 自定义事件 +# 自定义事件 子组件comp定义如下： diff --git a/zh-cn/application-dev/js-reference/component/js-components-custom-lifecycle.md b/zh-cn/application-dev/js-reference/component/js-components-custom-lifecycle.md new file mode 100644 index 0000000000000000000000000000000000000000..819586df671fa077ba41dd33cb91e16d645598d2 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-custom-lifecycle.md @@ -0,0 +1,119 @@ +# 生命周期定义 + +- [示例](#zh-cn_topic_0000001127125084_section14938111864313) + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 5 开始支持。 + +我们为自定义组件提供了一系列生命周期回调方法，便于开发者管理自定义组件的内部逻辑。生命周期主要包括：onInit，onAttached，onDetached，onLayoutReady，onDestroy，onPageShow和onPageHide。下面我们依次介绍一下各个生命周期回调的时机。 + + +

属性

类型

+

类型

描述

+

描述

data

+

data

Object/Function

+

Object/Function

页面的数据模型，类型是对象或者函数，如果类型是函数，返回值必须是对象。属性名不能以$或_开头，不要使用保留字for, if, show, tid。

-

data与private和public不能重合使用。

+

页面的数据模型，类型是对象或者函数，如果类型是函数，返回值必须是对象。属性名不能以$或_开头，不要使用保留字for, if, show, tid。

+

data与private和public不能重合使用。

props

+

props

Array/Object

+

Array/Object

props用于组件之间的通信，可以通过<tag xxxx='value'>方式传递给组件；props名称必须用小写，不能以$或_开头，不要使用保留字for, if, show, tid。目前props的数据类型不支持Function。

+

props用于组件之间的通信，可以通过<tag xxxx='value'>方式传递给组件；props名称必须用小写，不能以$或_开头，不要使用保留字for, if, show, tid。目前props的数据类型不支持Function。

computed

+

computed

Object

+

Object

用于在读取或设置进行预先处理，计算属性的结果会被缓存。计算属性名不能以$或_开头，不要使用保留字。

+

用于在读取或设置进行预先处理，计算属性的结果会被缓存。计算属性名不能以$或_开头，不要使用保留字。
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

属性

+

类型

+

描述

+

触发时机

+

onInit

+

Function

+

初始化自定义组件

+

自定义组件初始化生命周期回调，当自定义组件创建时，触发该回调，主要用于自定义组件中必须使用的数据初始化，该回调只会触发一次调用。

+

onAttached

+

Function

+

自定义组件装载

+

自定义组件被创建后，加入到Page组件树时，触发该回调，该回调触发时，表示组件将被进行显示，该声明周期可用于初始化显示相关数据，通常用于加载图片资源、开始执行动画等场景。。

+

onLayoutReady

+

Function

+

自定义组件布局完成

+

自定义组件插入Page组件树后，将会对自定义组件进行布局计算，调整其内容元素尺寸与位置，当布局计算结束后触发该回调。

+

onDetached

+

Function

+

自定义组件摘除

+

自定义组件摘除时，触发该回调，常用于停止动画或异步逻辑停止执行的场景。

+

onDestroy

+

Function

+

自定义组件销毁

+

自定义组件销毁时，触发该回调，常用于资源释放。

+

onPageShow

+

Function

+

自定义组件Page显示

+

自定义组件所在Page显示后，触发该回调。

+

onPageHide

+

Function

+

自定义组件Page隐藏

+

自定义组件所在Page隐藏后，触发该回调。

+
+ +## 示例 + +``` + +
+ {{value}} +
+``` + +``` +//comp.js +export default { + data: { + value: "组件创建" + }, + onInit() { + console.log("组件创建") + }, + onAttached() { + this.value = "组件挂载" + }, + onDetached() { + this.value = "" + }, + onPageShow() { + console.log("Page显示") + }, + onPageHide() { + console.log("Page隐藏") + } +} +``` + diff --git a/zh-cn/application-dev/js-reference/Props.md b/zh-cn/application-dev/js-reference/component/js-components-custom-props.md old mode 100755 new mode 100644 similarity index 72% rename from zh-cn/application-dev/js-reference/Props.md rename to zh-cn/application-dev/js-reference/component/js-components-custom-props.md index 429607e7bc6624ef5e82a9f4d6aadbe47dfba96e..9a6d7a1f8b290eec0522159c2e572ad7b4235e1a --- a/zh-cn/application-dev/js-reference/Props.md +++ b/zh-cn/application-dev/js-reference/component/js-components-custom-props.md @@ -1,11 +1,11 @@ -# Props +# Props -- [添加默认值](#zh-cn_topic_0000001059148556_section448655843113) -- [数据单向性](#zh-cn_topic_0000001059148556_section9681151218247) -- [$watch 监控数据改变](#zh-cn_topic_0000001059148556_section205821113182114) -- [computed 计算属性](#zh-cn_topic_0000001059148556_section1088954011234) +- [添加默认值](#zh-cn_topic_0000001173164675_section448655843113) +- [数据单向性](#zh-cn_topic_0000001173164675_section9681151218247) +- [$watch 感知数据改变](#zh-cn_topic_0000001173164675_section205821113182114) +- [computed 计算属性](#zh-cn_topic_0000001173164675_section1088954011234) -自定义组件可以通过props声明属性，父组件通过设置属性向子组件传递参数。camelCase \(驼峰命名法\) 的 prop 名，在外部父组件传递参数时需要使用 kebab-case \(短横线分隔命名\) 形式，即当属性compProp在父组件引用时需要转换为comp-prop。给自定义组件添加props，通过父组件向下传递参数的示例如下： +自定义组件可以通过props声明属性，父组件通过设置属性向子组件传递参数，props支持类型包括：String，Number，Boolean，Array，Object，Function。camelCase \(驼峰命名法\) 的 prop 名，在外部父组件传递参数时需要使用 kebab-case \(短横线分隔命名\) 形式，即当属性compProp在父组件引用时需要转换为comp-prop。给自定义组件添加props，通过父组件向下传递参数的示例如下： ``` @@ -29,7 +29,10 @@ export default { ``` -## 添加默认值 +>![](../../public_sys-resources/icon-note.gif) **说明：** +>自定义属性命名时禁止以on、@、on:、grab: 等保留关键字为开头。 + +## 添加默认值 子组件可以通过固定值default设置默认值，当父组件没有设置该属性时，将使用其默认值。此情况下props属性必须为对象形式，不能用数组形式，示例如下： @@ -61,7 +64,7 @@ export default { ``` -## 数据单向性 +## 数据单向性 父子组件之间数据的传递是单向的，只能从父组件传递给子组件，子组件不能直接修改父组件传递下来的值，可以将props传入的值用data接收后作为默认值，再对data的值进行修改。 @@ -80,7 +83,7 @@ export default { } ``` -## $watch 监控数据改变 +## $watch 感知数据改变 如果需要观察组件中属性变化，可以通过$watch方法增加属性变化回调。使用方法如下： @@ -97,7 +100,7 @@ export default { } ``` -## computed 计算属性 +## computed 计算属性 自定义组件中经常需要在读取或设置某个属性时进行预先处理，提高开发效率，此种情况就需要使用computed字段。computed字段中可通过设置属性的getter和setter方法在属性读写的时候进行触发，使用方式如下： diff --git a/zh-cn/application-dev/js-reference/component/js-components-custom-slot.md b/zh-cn/application-dev/js-reference/component/js-components-custom-slot.md new file mode 100644 index 0000000000000000000000000000000000000000..2737e862f5b195755c71a2db1dcfd4da8a8f3ebb --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-custom-slot.md @@ -0,0 +1,61 @@ +# slot插槽 + +- [默认插槽](#zh-cn_topic_0000001127284840_section68133181214) +- [具名插槽](#zh-cn_topic_0000001127284840_section18337143291211) + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7 开始支持。 + +## 默认插槽 + +自定义组件中通过slot标签来承载父组件中定义的内容，使用slot标签可以更加灵活的控制自定义组件的内容元素，使用方式如下： + +``` + +
+ 下面使用父组件定义的内容 + +
+``` + +引用该自定义组件方式如下： + +``` + + +
+ + 父组件中定义的内容 + +
+``` + +## 具名插槽 + +当自定义组件中需要使用多个插槽时，可通过对插槽命名的方式进行区分，当填充插槽内容时，通过声明插槽名称，将内容加到对应的插槽中。 + +``` + +
+ 下面使用父组件定义的内容 + + +
+``` + +引用该自定义组件方式如下： + +``` + + +
+ + 插入第二个插槽中 + 插入第一个插槽中 + +
+``` + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>name 和 slot 属性不支持绑定动态数据。 + diff --git a/zh-cn/application-dev/js-reference/component/js-components-custom.md b/zh-cn/application-dev/js-reference/component/js-components-custom.md new file mode 100644 index 0000000000000000000000000000000000000000..b0af690a9d122cecefefac47f9c6f81d9eb956e9 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-custom.md @@ -0,0 +1,15 @@ +# 自定义组件 + +- **[基本用法](js-components-custom-basic-usage.md)** + +- **[自定义事件](js-components-custom-events.md)** + +- **[Props](js-components-custom-props.md)** + +- **[事件参数](js-components-custom-event-parameter.md)** + +- **[slot插槽](js-components-custom-slot.md)** + +- **[生命周期定义](js-components-custom-lifecycle.md)** + + diff --git "a/zh-cn/application-dev/js-reference/\345\237\272\346\234\254\346\246\202\345\277\265.md" b/zh-cn/application-dev/js-reference/component/js-components-grid-basic-concepts.md similarity index 84% rename from "zh-cn/application-dev/js-reference/\345\237\272\346\234\254\346\246\202\345\277\265.md" rename to zh-cn/application-dev/js-reference/component/js-components-grid-basic-concepts.md index 7d8b754fc998fc94907e604313e0553f14b3d38d..9496288e8b37d29c60132f310912c665552d9c2f 100644 --- "a/zh-cn/application-dev/js-reference/\345\237\272\346\234\254\346\246\202\345\277\265.md" +++ b/zh-cn/application-dev/js-reference/component/js-components-grid-basic-concepts.md @@ -1,6 +1,6 @@ -# 基本概念 +# 基本概念 -- [栅格系统的概念](#zh-cn_topic_0000001124631123_section1429110563714) +- [栅格系统的概念](#zh-cn_topic_0000001127284864_section1429110563714) 提供栅格布局效果，通过栅格系统进行元素布局，主要提供栅格容器组件。 @@ -13,12 +13,12 @@ 3. 给应用提供一种灵活的间距调整方法，满足特殊场景布局调整的可能性。 ->![](public_sys-resources/icon-note.gif) **说明：** +>![](../../public_sys-resources/icon-note.gif) **说明：** >从API Version 5 开始支持。 -## 栅格系统的概念 +## 栅格系统的概念 -栅格系统有Margins，Gutters，Columns三个属性。 +栅格系统有Margins、Gutters、Columns三个属性。 1. Margins： @@ -30,7 +30,7 @@ 3. Columns： - 是用来辅助布局的主要定位工具，不同的屏幕尺寸匹配不同的Columns数量来辅助布局定位。Columns的宽度在保证Margins和Gutters符合规范的情况下，根据实际设备的宽度和Columns数量自动计算每一个Columns的宽度。![](figures/zh-cn_image_0000001079072496.png) + 是用来辅助布局的主要定位工具，不同的屏幕尺寸匹配不同的Columns数量来辅助布局定位。Columns的宽度在保证Margins和Gutters符合规范的情况下，根据实际设备的宽度和Columns数量自动计算每一个Columns的宽度。![](figures/zh-cn_image_0000001127125136.png) **栅格断点系统** diff --git a/zh-cn/application-dev/js-reference/component/js-components-grid-col.md b/zh-cn/application-dev/js-reference/component/js-components-grid-col.md new file mode 100644 index 0000000000000000000000000000000000000000..5245085b6e8466d5c1d6ecc9fb63b3f2a8b56b22 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-grid-col.md @@ -0,0 +1,312 @@ +# grid-col + +- [权限列表](#zh-cn_topic_0000001173164763_section11257113618419) +- [子组件](#zh-cn_topic_0000001173164763_section9288143101012) +- [属性](#zh-cn_topic_0000001173164763_section1976213199113) +- [样式](#zh-cn_topic_0000001173164763_section1948816404128) +- [事件](#zh-cn_topic_0000001173164763_section94351031102113) +- [方法](#zh-cn_topic_0000001173164763_section2279124532420) +- [示例](#zh-cn_topic_0000001173164763_section2021865273710) + +grid-col是栅格布局容器grid-row的子容器组件。 + +## 权限列表 + +无 + +## 子组件 + +支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

xs

+

number|object

+

-

+

否

+

在分辨率为xs模式下，设置该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数，如{"span": 1, "offset": 0}

+

sm

+

number|object

+

-

+

否

+

在分辨率为sm模式下，该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数，如{"span": 1, "offset": 0}

+

md

+

number|object

+

-

+

否

+

在分辨率为md模式下，该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数，如{"span": 1, "offset": 0}

+

lg

+

number|object

+

-

+

否

+

在分辨率为lg模式下，该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数，如{"span": 1, "offset": 0}

+

span

+

number

+

1

+

否

+

在未设置明确断点时，默认占用列数

+

offset

+

number

+

0

+

否

+

未设置具体分辨率模式下偏移时，当前元素延容器布局方向，默认偏移的列数

+
+ +## 样式 + +除支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

flex-direction

+

string

+

row

+

否

+

flex容器主轴方向。可选项有：

+
  • column：垂直方向从上到下
  • row：水平方向从左到右
+

flex-wrap

+

string

+

nowrap

+

否

+

flex容器是单行还是多行显示，该值暂不支持动态修改。可选项有：

+
  • nowrap：不换行，单行显示。
  • wrap：换行，多行显示。
+

justify-content

+

string

+

flex-start

+

否

+

flex容器当前行的主轴对齐格式。可选项有：

+
  • flex-start：项目位于容器的开头。
  • flex-end：项目位于容器的结尾。
  • center：项目位于容器的中心。
  • space-between：项目位于各行之间留有空白的容器内。
  • space-around：项目位于各行之前、之间、之后都留有空白的容器内。
+

align-items

+

string

+

stretch

+

否

+

flex容器当前行的交叉轴对齐格式，可选值为：

+
  • stretch：弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。
  • flex-start：元素向交叉轴起点对齐。
  • flex-end：元素向交叉轴终点对齐。
  • center：元素在交叉轴居中。
+

align-content

+

string

+

flex-start

+

否

+

交叉轴中有额外的空间时，多行内容对齐格式，可选值为：

+
  • flex-start：所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。
  • flex-end：所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。
  • center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。
  • space-between：所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。
  • space-around：所有行在容器中平均分布，相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。
+

display

+

string

+

flex

+

否

+

确定该元素视图框的类型，该值暂不支持动态修改。可选值为：

+
  • flex：弹性布局
  • grid：网格布局
  • none：不渲染此元素
+

grid-template-[columns|rows]

+

string

+

1行1列

+

否

+

用于设置当前网格布局行和列的数量，不设置时默认1行1列，仅当display为grid时生效。

+

示例：如设置grid-template-columns为：

+

(1) 50px 100px 60px：分三列，第一列50px，第二列100px，第三列60px；

+

(2) 1fr 1fr 2fr：分三列，将父组件允许的宽分为4等份，第一列占1份，第二列占一份，第三列占2份；

+

(3) 30% 20% 50%：分三列，将父组件允许的宽为基准，第一列占30%，第二列占20%，第三列占50%；

+

(4) repeat(2,100px)：分两列，第一列100px，第二列100px；

+

(5) auto 1fr 1fr：分三列，第一列自适应内部子组件所需宽度，剩余空间分为两等份，第二列占一份，第三列占一份。

+

grid-[columns|rows]-gap

+

<length>

+

0

+

否

+

用于设置行与行的间距或者列与列的间距，也可以支持通过grid-gap设置相同的行列间距，仅当display为grid时生效。

+

grid-row-[start|end]

+

number

+

-

+

否

+

用于设置当前元素在网格布局中的起止行号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。

+

grid-column-[start|end]

+

number

+

-

+

否

+

用于设置当前元素在网格布局中的起止列号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。

+
+ +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- 不支持宽度相关样式。 + +## 事件 + +支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)。 + +## 方法 + +支持[通用方法](js-components-common-methods.md#ZH-CN_TOPIC_0000001209252157)。 + +## 示例 + +``` + +
+ + + +
+ 內容元素 +
+ + +
+ 內容元素 +
+ + + +
+``` + +``` +/* index.css */ +.container { + flex-direction: column; + padding-top: 80px; +} +``` + +``` +// index.js +import prompt from '@system.prompt'; +export default { + getCol(e) { + this.$element('mygrid').getColumns(function (result) { + prompt.showToast({ + message: e.target.id + ' result = ' + result, + duration: 3000, + }); + }) + }, + getColWidth(e) { + this.$element('mygrid').getColumnWidth(function (result) { + prompt.showToast({ + message: e.target.id + ' result = ' + result, + duration: 3000, + }); + }) + } +} +``` + diff --git a/zh-cn/application-dev/js-reference/component/js-components-grid-container.md b/zh-cn/application-dev/js-reference/component/js-components-grid-container.md new file mode 100644 index 0000000000000000000000000000000000000000..945d76ae9c596af0c0f087afec5d27d6ddea6a61 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-grid-container.md @@ -0,0 +1,286 @@ +# grid-container + +- [权限列表](#zh-cn_topic_0000001173324617_section11257113618419) +- [子组件](#zh-cn_topic_0000001173324617_section9288143101012) +- [属性](#zh-cn_topic_0000001173324617_section5248929161316) +- [样式](#zh-cn_topic_0000001173324617_section16690243163414) +- [事件](#zh-cn_topic_0000001173324617_section291933813509) +- [方法](#zh-cn_topic_0000001173324617_section13156101584913) +- [示例](#zh-cn_topic_0000001173324617_section132671420142616) + +栅格布局容器根节点，使用grid-row与gird-col进行栅格布局。 + +## 权限列表 + +无 + +## 子组件 + +仅支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

columns

+

string | number

+

auto

+

否

+

设置当前布局总列数，使用string类型时仅支持auto，配置为auto时按照当前的sizetype决定总列数：

+
  • xs：2列
  • sm：4列
  • md：8列
  • lg：12列
+

sizetype

+

string

+

auto

+

否

+

设置当前栅格使用的响应尺寸类型，支持xs, sm, md, lg类型，使用auto时按照当前容器大小自动选择xs, sm, md, lg类型。

+

gutter

+

<length>

+

24px

+

否

+

设置Gutter宽度

+

gridtemplate6+

+

string

+

default

+

否

+

当设置了columns和sizetype属性为auto时，可以设置栅格容器的布局模板，通过布局模块设置不同响应尺寸下的Columns、Gutters和Margins，详见可选值说明。

+
+ +**表 1** gridtemplate可选值说明6+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
  

模板值

+

可响应的栅格断点系统

+

Columns

+

Margins(px)

+

Gutters(px)

+

默认栅格

+

default

+

xs

+

2

+

12

+

12

+

sm

+

4

+

24

+

24

+

md

+

8

+

32

+

24

+

lg

+

12

+

48

+

24

+

宫格布局栅格

+

grid

+

sm(0<设备水平分辨率<600px)

+

4

+

24

+

12

+

md

+

8

+

32

+

12

+

lg

+

12

+

48

+

12

+
+ +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- 本章中px单位是在js标签中配置了autoDesignWidth为true。6+ + +## 样式 + +除支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

justify-content

+

string

+

flex-start

+

否

+

flex容器当前行的主轴对齐格式。可选项有：

+
  • flex-start：项目位于容器的开头。
  • flex-end：项目位于容器的结尾。
  • center：项目位于容器的中心。
  • space-between：项目位于各行之间留有空白的容器内。
  • space-around：项目位于各行之前、之间、之后都留有空白的容器内。
+

align-items

+

string

+

stretch

+

否

+

flex容器当前行的交叉轴对齐格式，可选值为：

+
  • stretch：弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。
  • flex-start：元素向交叉轴起点对齐。
  • flex-end：元素向交叉轴终点对齐。
  • center：元素在交叉轴居中。
+

align-content

+

string

+

flex-start

+

否

+

交叉轴中有额外的空间时，多行内容对齐格式，可选值为：

+
  • flex-start：所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。
  • flex-end：所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。
  • center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。
  • space-between：所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。
  • space-around：所有行在容器中平均分布，相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。
+
+ +## 事件 + +支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)。 + +## 方法 + +除支持[通用方法](js-components-common-methods.md#ZH-CN_TOPIC_0000001209252157)外，还支持如下方法： + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

getColumns

+

-

+

返回栅格容器列数

+

getColumnWidth

+

-

+

返回栅格容器column宽度

+

getGutterWidth

+

-

+

返回栅格容器gutter宽度

+

getSizeType

+

-

+

返回当前容器响应尺寸类型（xs|sm|md|lg）

+
+ +## 示例 + +详见[grid-col示例](js-components-grid-col.md#zh-cn_topic_0000001173164763_section2021865273710)。 + diff --git a/zh-cn/application-dev/js-reference/component/js-components-grid-row.md b/zh-cn/application-dev/js-reference/component/js-components-grid-row.md new file mode 100644 index 0000000000000000000000000000000000000000..c816b9c50346bd703dd7e8e730cd2952ea297259 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-grid-row.md @@ -0,0 +1,107 @@ +# grid-row + +- [权限列表](#zh-cn_topic_0000001173324663_section11257113618419) +- [子组件](#zh-cn_topic_0000001173324663_section9288143101012) +- [属性](#zh-cn_topic_0000001173324663_section631751545214) +- [样式](#zh-cn_topic_0000001173324663_section9475356165220) +- [事件](#zh-cn_topic_0000001173324663_section1417950207) +- [方法](#zh-cn_topic_0000001173324663_section2279124532420) +- [示例](#zh-cn_topic_0000001173324663_section634316188515) + +grid-row是栅格布局容器grid-container的子容器组件，使用flex横向布局，排列每个grid-col容器，justify-content与align-items默认为flex-start，支持折行显示。 + +## 权限列表 + +无 + +## 子组件 + +仅支持。 + +## 属性 + +支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)。 + +## 样式 + +除支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

flex-wrap

+

string

+

nowrap

+

否

+

flex容器是单行还是多行显示，该值暂不支持动态修改。可选项有：

+
  • nowrap：不换行，单行显示。
  • wrap：换行，多行显示。
+

justify-content

+

string

+

flex-start

+

否

+

flex容器当前行的主轴对齐格式。可选项有：

+
  • flex-start：项目位于容器的开头。
  • flex-end：项目位于容器的结尾。
  • center：项目位于容器的中心。
  • space-between：项目位于各行之间留有空白的容器内。
  • space-around：项目位于各行之前、之间、之后都留有空白的容器内。
+

align-items

+

string

+

flex-start

+

否

+

flex容器当前行的交叉轴对齐格式，可选值为：

+
  • stretch：弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。
  • flex-start：元素向交叉轴起点对齐。
  • flex-end：元素向交叉轴终点对齐。
  • center：元素在交叉轴居中。
+

align-content

+

string

+

flex-start

+

否

+

交叉轴中有额外的空间时，多行内容对齐格式，可选值为：

+
  • flex-start：所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。
  • flex-end：所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。
  • center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。
  • space-between：所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。
  • space-around：所有行在容器中平均分布，相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。
+
+ +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- 不支持宽度相关样式。 + +## 事件 + +支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)。 + +## 方法 + +支持[通用方法](js-components-common-methods.md#ZH-CN_TOPIC_0000001209252157)。 + +## 示例 + +详见[grid-col示例](js-components-grid-col.md#zh-cn_topic_0000001173164763_section2021865273710)。 + diff --git a/zh-cn/application-dev/js-reference/component/js-components-grid.md b/zh-cn/application-dev/js-reference/component/js-components-grid.md new file mode 100644 index 0000000000000000000000000000000000000000..9b34b04dbb30c7ced82e45b3023cceb2fdc48af9 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-grid.md @@ -0,0 +1,11 @@ +# 栅格组件 + +- **[基本概念](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)** + + diff --git a/zh-cn/application-dev/js-reference/component/js-components-media-video.md b/zh-cn/application-dev/js-reference/component/js-components-media-video.md new file mode 100644 index 0000000000000000000000000000000000000000..648007de04c348e39ba9e24d16ddfb5e0800b97d --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-media-video.md @@ -0,0 +1,238 @@ +# video + +- [权限列表](#zh-cn_topic_0000001173164749_section11257113618419) +- [子组件](#zh-cn_topic_0000001173164749_sc18e8342b29747dbbd70887cc3c0a22d) +- [属性](#zh-cn_topic_0000001173164749_s50d82bce96774b86846ab2739d7ce18d) +- [样式](#zh-cn_topic_0000001173164749_sfbde25405aca4513a9c938f2f339b770) +- [事件](#zh-cn_topic_0000001173164749_section4181420161817) +- [方法](#zh-cn_topic_0000001173164749_s557cc2f457ff42a193807500adae2f91) + +视频播放组件。 + +## 权限列表 + +## 子组件 + +不支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

muted

+

boolean

+

false

+

否

+

视频是否静音播放。

+

src

+

string

+

-

+

否

+

播放视频内容的路径。

+

autoplay

+

boolean

+

false

+

否

+

视频是否自动播放。

+

controls

+

boolean

+

true

+

否

+

控制视频播放的控制栏是否显示，如果设置为false，则不显示控制栏。默认为true，由系统决定显示或隐藏控制栏。

+
+ +## 样式 + +除支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)外，还支持如下样式： + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

object-fit

+

string

+

contain

+

否

+

视频源的缩放类型，如果poster设置了值，那么此配置还会影响视频海报的缩放类型，可选值参考表1。

+
+ +**表 1** object-fit 类型说明 + + + + + + + + + + +

类型

+

描述

+

fill

+

不保持宽高比进行放大缩小，使得图片填充满显示边界。

+
+ +## 事件 + +除支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)外，还支持如下事件： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

prepared

+

{ duration: value }5+

+

视频准备完成时触发该事件，通过duration可以获取视频时长，单位为s。

+

start

+

-

+

播放时触发该事件。

+

pause

+

-

+

暂停时触发该事件。

+

finish

+

-

+

播放结束时触发该事件。

+

error

+

-

+

播放失败时触发该事件。

+

seeking

+

{ currenttime: value }

+

操作进度条过程时上报时间信息，单位为s。

+

seeked

+

{ currenttime: value }

+

操作进度条完成后，上报播放时间信息，单位为s。

+

timeupdate

+

{ currenttime: value }

+

播放进度变化时触发该事件，单位为s，更新时间间隔为250ms。

+
+ +## 方法 + +除支持[通用方法](js-components-common-methods.md#ZH-CN_TOPIC_0000001209252157)外，还支持如下方法： + + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

start

+

-

+

请求播放视频。

+

pause

+

-

+

请求暂停播放视频。

+

setCurrentTime

+

{ currenttime: value }

+

指定视频播放的进度位置，单位为s。

+
+ diff --git a/zh-cn/application-dev/js-reference/component/js-components-media.md b/zh-cn/application-dev/js-reference/component/js-components-media.md new file mode 100644 index 0000000000000000000000000000000000000000..3861d7f6b975640145f1aad87db7a479042a10eb --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-media.md @@ -0,0 +1,5 @@ +# 媒体组件 + +- **[video](js-components-media-video.md)** + + diff --git a/zh-cn/application-dev/js-reference/component/js-components-svg-0.md b/zh-cn/application-dev/js-reference/component/js-components-svg-0.md new file mode 100644 index 0000000000000000000000000000000000000000..f80eadf13c5187a7c5e72b1a90545537fc4bf6bd --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-svg-0.md @@ -0,0 +1,128 @@ +# svg + +- [权限列表](#zh-cn_topic_0000001173164705_section11257113618419) +- [子组件](#zh-cn_topic_0000001173164705_section9288143101012) +- [属性](#zh-cn_topic_0000001173164705_section2907183951110) +- [示例](#zh-cn_topic_0000001173164705_section360556124815) + +基础容器，主要作为svg的根节点使用，也可以在svg中嵌套使用。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7 开始支持。 +>约束条件：svg父组件或者svg组件需要定义宽高值，否则不进行绘制。 + +## 权限列表 + +无 + +## 子组件 + +支持svg、rect、circle、ellipse、path、line、polygon、polyline、text、animate、animateTransform。 + +## 属性 + +支持所列的Svg组件通用属性和以下表格的属性，设置的通用属性会传递给子组件。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

id

+

string

+

-

+

否

+

组件的唯一标识。

+

width

+

<length>|<percentage>

+

-

+

否

+

设置组件的宽度

+

height

+

<length>|<percentage>

+

-

+

否

+

设置组件的高度

+

x

+

<length>|<percentage>

+

-

+

否

+

设置当前svg的x轴坐标，根svg节点无效

+

y

+

<length>|<percentage>

+		  

否

+

设置当前svg的y轴坐标，根svg节点无效

+

viewBox

+

string

+

-

+

否

+

设置当前svg的视口。支持的格式为<number number number number>，4个参数分别表示min-x, min-y, width and height，viewBox的宽高和svg的宽高不一致，会以中心对齐进行缩放。

+
+ +## 示例 + +``` + +
+ + + + + + + + + + + + +
+``` + +![](figures/zh-cn_image_0000001173164789.png) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-svg-animate-motion.md b/zh-cn/application-dev/js-reference/component/js-components-svg-animate-motion.md new file mode 100644 index 0000000000000000000000000000000000000000..fc47b8c276348e102c5f2aa50c5b79d583d63898 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-svg-animate-motion.md @@ -0,0 +1,101 @@ +# animateMotion + +- [权限列表](#zh-cn_topic_0000001173324621_section11257113618419) +- [子组件](#zh-cn_topic_0000001173324621_section9288143101012) +- [属性](#zh-cn_topic_0000001173324621_section2907183951110) +- [示例](#zh-cn_topic_0000001173324621_section360556124815) + +路径动效。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7 开始支持。 + +## 权限列表 + +无 + +## 子组件 + +不支持。 + +## 属性 + +支持animate属性\(values不生效\)和以下表格中的属性。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

keyPoints

+

string

+

-

+

是

+

一组关键帧的点位置，每帧的值为对象沿路径的距离比例。功能与animate属性中的values相同。

+

path

+

string

+

-

+

是

+

定义运动的路径，使用与path组件d属性相同的语法。

+

rotate

+

[auto | auto-reverse | <number>]

+

auto

+

-

+

设置动画对象的旋转方向

+
+ +## 示例 + +``` + +
+ + + + + + + + + + + + + + +
+``` + +**图 1** +![](figures/zh-cn_image_0000001173324705.gif "zh-cn_image_0000001173324705") + diff --git a/zh-cn/application-dev/js-reference/component/js-components-svg-animate-transform.md b/zh-cn/application-dev/js-reference/component/js-components-svg-animate-transform.md new file mode 100644 index 0000000000000000000000000000000000000000..334cb51e05f9a58a6c815ca38637f910e9cc9b78 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-svg-animate-transform.md @@ -0,0 +1,251 @@ +# animateTransform + +- [权限列表](#zh-cn_topic_0000001173324667_section11257113618419) +- [子组件](#zh-cn_topic_0000001173324667_section9288143101012) +- [属性](#zh-cn_topic_0000001173324667_section2907183951110) +- [示例](#zh-cn_topic_0000001173324667_section360556124815) + +transform动效，支持的组件范围： + +, , , , , , , + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7 开始支持。 + +## 权限列表 + +无 + +## 子组件 + +不支持。 + +## 属性 + +支持animate属性和以下表格中的属性。 + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

type

+

[translate | scale | rotate | skewX | skewY]

+

-

+

是

+

设置transform动画的类型

+
+ +## 示例 + +``` + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + background-color: #f8f8ff; +} + +.back_container { + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + height: 1000px; + width: 1080px; +} +``` + +![](figures/animate-transform.gif) + +动画叠加 + +``` + +
+
+ + + + + + + + + + + + + + + + + + +
+
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + background-color: #f8f8ff; +} + +.back_container { + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + height: 1000px; + width: 1080px; +} +``` + +![](figures/animate-transform2.gif) + +涉及组件示例 + +``` + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + background-color: #f8f8ff; +} + +.back_container { + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + height: 1000px; + width: 1080px; +} +``` + +![](figures/animate-transform3.gif) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-svg-animate.md b/zh-cn/application-dev/js-reference/component/js-components-svg-animate.md new file mode 100644 index 0000000000000000000000000000000000000000..5232bc09303ff01db4ad556b0b87aafe8585bca5 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-svg-animate.md @@ -0,0 +1,281 @@ +# animate + +- [权限列表](#zh-cn_topic_0000001127125042_section11257113618419) +- [子组件](#zh-cn_topic_0000001127125042_section9288143101012) +- [属性](#zh-cn_topic_0000001127125042_section2907183951110) +- [示例](#zh-cn_topic_0000001127125042_section360556124815) + +设置svg组件的属性动画。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7 开始支持。 + +## 权限列表 + +无 + +## 子组件 + +不支持。 + +## 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

id

+

string

+

-

+

否

+

组件的唯一标识。

+

attributeName

+

string

+

-

+

否

+

设置需要进行动效的属性名。

+

begin

+

<time>

+

0

+

否

+

设置动效的延迟时间。

+

支持输入ms(毫秒)、s（秒）、m（分），默认为s(秒)，其他格式不支持

+

dur

+

<time>

+

0

+

否

+

设置动效持续时间，如果dur没设置，按照end-begin的结果作为持续时间，小于等于0时，动效不触发。

+

支持输入ms(毫秒)、s（秒）、m（分），默认为s(秒)，其他格式不支持

+

end

+

<time>

+

0

+

否

+

设置动效多久时间后结束。支持输入ms(毫秒)、s（秒）、m（分），默认为s(秒)，其他格式不支持

+

repeatCount

+

<number | indefinite>

+

1

+

否

+

设置动画播放的次数，默认无限次播放(indefinite)，可通过设置为数值1仅播放一次。

+

fill

+

<freeze | remove>

+

remove

+

否

+

设置动画结束时的状态。

+

calcMode

+

<discrete | linear | paced | spline>

+

linear

+

否

+

设置动画的插值模式。

+

discrete：阶跃，from值直接跳转到to的值；

+

linear：线性；

+

paced：线性，设置此项后keyTimes和keyPoints值无效

+

spline：自定义贝塞尔曲线，spline点定义在keyTimes属性中，每个时间间隔控制点由keySplines定义

+

keyTimes

+

string

+

-

+

否

+

设置关键帧动画的开始时间，值为0~1之间的数值用分号隔开，比如0;0.3;0.8;1。keyTimes、keySplines、values组合设置关键帧动画。keyTimes和values的个数保持一致。keySplines个数为keyTimes个数减一

+

keySplines

+

string

+

-

+

否

+

与keyTimes相关联的一组贝塞尔控制点。定义每个关键帧的贝塞尔曲线，曲线之间用分号隔开。曲线内的两个控制掉格式为x1 y1 x2 y2。比如0.5 0 0.5 1; 0.5 0 0.5 1;0.5 0 0.5 1

+

by

+

number

+

-

+

否

+

在动画中对某一指定属性，添加相对偏移值，from默认为原属性值。

+

from

+

string

+

-

+

否

+

设置需要进行动画的属性的开始值。

+

如果已经设置了values属性，则from失效。

+

to

+

string

+

-

+

否

+

设置需要进行动画的属性的结束值。

+

如果已经设置了values属性，则to都失效。

+

values

+

string

+

-

+

否

+

设置一组动画的变化值。格式为value1;value2;value3。

+
+ +## 示例 + +``` + +
+ + + + + + +
+``` + +**图 1** +![](figures/zh-cn_image_0000001173324703.gif "zh-cn_image_0000001173324703") + +``` + +
+ + + + + + +
+``` + +**图 2** +![](figures/zh-cn_image_0000001127125128.gif "zh-cn_image_0000001127125128") + +``` + +
+ + + + + +
+ +``` + +**图 3** +![](figures/zh-cn_image_0000001127284938.gif "zh-cn_image_0000001127284938") + +``` + +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+``` + +**图 4** +![](figures/zh-cn_image_0000001127125126.gif "zh-cn_image_0000001127125126") + diff --git a/zh-cn/application-dev/js-reference/component/js-components-svg-circle.md b/zh-cn/application-dev/js-reference/component/js-components-svg-circle.md new file mode 100644 index 0000000000000000000000000000000000000000..1d12664063e187558e128b075e0a1f309c782d0d --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-svg-circle.md @@ -0,0 +1,98 @@ +# circle + +- [权限列表](#zh-cn_topic_0000001127284906_section11257113618419) +- [子组件](#zh-cn_topic_0000001127284906_section9288143101012) +- [属性](#zh-cn_topic_0000001127284906_section2907183951110) +- [示例](#zh-cn_topic_0000001127284906_section360556124815) + +圆形形状。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7 开始支持。 + +## 权限列表 + +无 + +## 子组件 + +支持animate、animateMotion、animateTransform。 + +## 属性 + +支持所列的Svg组件通用属性和以下表格的属性。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

id

+

string

+

-

+

否

+

组件的唯一标识。

+

cx

+

<length>|<percentage>

+

0

+

否

+

设置圆心的x轴坐标。支持属性动画

+

cy

+

<length>|<percentage>

+

0

+

否

+

设置圆心的y轴坐标。支持属性动画

+

r

+

<length>|<percentage>

+

0

+

否

+

设置圆的半径。支持属性动画

+
+ +## 示例 + +``` + +
+ + + + +
+``` + +![](figures/zh-cn_image_0000001173164853.png) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-svg-common-attributes.md b/zh-cn/application-dev/js-reference/component/js-components-svg-common-attributes.md new file mode 100644 index 0000000000000000000000000000000000000000..24a175ff58454a2cf4be19894dd5d5192ffa2885 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-svg-common-attributes.md @@ -0,0 +1,173 @@ +# 通用属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

fill

+

<color>

+

black

+

否

+

使用简写属性设置元素的填充色。支持属性动画。

+

fill-opacity

+

number

+

1

+

否

+

填充色的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。

+

fill-rule

+

nonzero | evenodd

+

nonzero

+

否

+

nonzero:非零规则; evenodd:奇偶规则

+

opacity

+

number

+

1

+

否

+

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。

+

stroke

+

<color>

+

-

+

否

+

设置形状轮廓的颜色。支持属性动画。

+

stroke-dasharray

+

<string>

+

-

+

否

+

指定短划线和缺口的长度。格式为[length length length length]，短划线和缺口的长度中间空格隔开成对出现。

+

stroke-dashoffset

+

<length>

+

0

+

否

+

设置关联虚线数组渲染时的偏移量。支持属性动画

+

stroke-linejoin

+

[bevel | miter | round]

+

miter

+

否

+

进行描边时在路径的拐角处使用的形状。

+

bevel：使用斜角连接路径段；

+

miter：使用尖角连接路径段；

+

round：使用圆角连接路径段。

+

stroke-linecap

+

[butt | round | square]

+

butt

+

否

+

路径描边时在它们的结尾处使用的形状。

+

butt：不在路径两端扩展；

+

round：在路径的末端延伸半个圆，直径等于线度。

+

square：在路径的末端延伸半个圆，宽度等于线宽的一半，高度等于线宽。

+

stroke-miterlimit

+

number

+

4

+

否

+

设置将锐角绘制成斜角的极限值。支持属性动画

+

stroke-opacity

+

number

+

1

+

否

+

轮廓线条的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画

+

stroke-width

+

<length>

+

1px

+

否

+

设置轮廓线条的宽度。支持属性动画

+

transform

+

<string>

+

-

+

否

+

设置组件以及子组件的坐标变换参数。

+

支持以下格式：

+

translate(<x> [<y>]) ：沿x[y]轴方向平移

+

scale(<x> [<y>]) ：沿x[y]轴缩放

+

rotate(<a> [<x> <y>]) ：以(x,y)点进行旋转a度角

+

skewX(<a>) ：沿x轴倾斜a度角的变换

+

skewY(<a>) ：沿y轴倾斜a度角的变换

+
+ diff --git a/zh-cn/application-dev/js-reference/component/js-components-svg-ellipse.md b/zh-cn/application-dev/js-reference/component/js-components-svg-ellipse.md new file mode 100644 index 0000000000000000000000000000000000000000..ebcbdcc3819b6dd16781a6fee717bf5fc206f0de --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-svg-ellipse.md @@ -0,0 +1,109 @@ +# ellipse + +- [权限列表](#zh-cn_topic_0000001127125054_section11257113618419) +- [子组件](#zh-cn_topic_0000001127125054_section9288143101012) +- [属性](#zh-cn_topic_0000001127125054_section2907183951110) +- [示例](#zh-cn_topic_0000001127125054_section360556124815) + +椭圆形状。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7 开始支持。 + +## 权限列表 + +无 + +## 子组件 + +支持animate、animateMotion、animateTransform。 + +## 属性 + +支持所列的Svg组件通用属性和以下表格的属性。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

id

+

string

+

-

+

否

+

组件的唯一标识。

+

cx

+

<length>|<percentage>

+

0

+

否

+

设置椭圆的x轴坐标。支持属性动画

+

cy

+

<length>|<percentage>

+

0

+

否

+

设置椭圆的y轴坐标。支持属性动画

+

rx

+

<length>|<percentage>

+

0

+

否

+

设置椭圆x轴的半径。支持属性动画

+

ry

+

<length>|<percentage>

+

0

+

否

+

设置椭圆y轴的半径。支持属性动画

+
+ +## 示例 + +``` + +
+ + + + +
+``` + +![](figures/zh-cn_image_0000001173164793.png) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-svg-line.md b/zh-cn/application-dev/js-reference/component/js-components-svg-line.md new file mode 100644 index 0000000000000000000000000000000000000000..d81fd2b8b7c7d8659e787afb6ff159bb5327598d --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-svg-line.md @@ -0,0 +1,113 @@ +# line + +- [权限列表](#zh-cn_topic_0000001127125062_section11257113618419) +- [子组件](#zh-cn_topic_0000001127125062_section9288143101012) +- [属性](#zh-cn_topic_0000001127125062_section2907183951110) +- [示例](#zh-cn_topic_0000001127125062_section360556124815) + +绘制线条。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7 开始支持。 + +## 权限列表 + +无 + +## 子组件 + +支持animate、animateMotion、animateTransform。 + +## 属性 + +支持所列的Svg组件通用属性和以下表格的属性。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

id

+

string

+

-

+

否

+

组件的唯一标识。

+

x1

+

<length>|<percentage>

+

-

+

否

+

设置线条起点的x轴坐标。支持属性动画

+

y1

+

<length>|<percentage>

+

-

+

否

+

设置线条起点的y轴坐标。支持属性动画

+

x2

+

<length>|<percentage>

+

-

+

否

+

设置线条终点的x轴坐标。支持属性动画

+

y2

+

<length>|<percentage>

+

-

+

否

+

设置线条终点的y轴坐标。支持属性动画

+
+ +## 示例 + +``` + +
+ + + + + + + + +
+``` + +![](figures/zh-cn_image_0000001127284954.png) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-svg-path.md b/zh-cn/application-dev/js-reference/component/js-components-svg-path.md new file mode 100644 index 0000000000000000000000000000000000000000..2ef9bd47c2ab25d030524f4042c13b745fc9b174 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-svg-path.md @@ -0,0 +1,79 @@ +# path + +- [权限列表](#zh-cn_topic_0000001173164771_section11257113618419) +- [子组件](#zh-cn_topic_0000001173164771_section9288143101012) +- [属性](#zh-cn_topic_0000001173164771_section2907183951110) +- [示例](#zh-cn_topic_0000001173164771_section360556124815) + +绘制路径。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7 开始支持。 + +## 权限列表 + +无 + +## 子组件 + +支持animate、animateMotion、animateTransform。 + +## 属性 + +支持所列的Svg组件通用属性和以下表格的属性，设置的通用属性会传递给子组件。 + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

id

+

string

+

-

+

否

+

组件的唯一标识。

+

d

+

string

+

-

+

否

+

设置路径的形状。包含一组字符指令，大写字母为绝对路径，小写字符为相对路径。

+

字母指令表示的意义如下：

+
  • M/m = moveto
  • L/l = lineto
  • H/h = horizontal lineto
  • V/v = vertical lineto
  • C/c = curveto
  • S/s = smooth curveto
  • Q/q = quadratic Belzier curve
  • T/t = smooth quadratic Belzier curveto
  • A/a = elliptical Arc
  • Z/z = closepath
+
+ +## 示例 + +``` + +
+ + + + +
+``` + +![](figures/zh-cn_image_0000001173164891.png) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-svg-polygon.md b/zh-cn/application-dev/js-reference/component/js-components-svg-polygon.md new file mode 100644 index 0000000000000000000000000000000000000000..d0c8e893aaaa7141f2bc5847550e9030307c8fac --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-svg-polygon.md @@ -0,0 +1,78 @@ +# polygon + +- [权限列表](#zh-cn_topic_0000001127284872_section11257113618419) +- [子组件](#zh-cn_topic_0000001127284872_section9288143101012) +- [属性](#zh-cn_topic_0000001127284872_section2907183951110) +- [示例](#zh-cn_topic_0000001127284872_section360556124815) + +绘制多边形。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7 开始支持。 + +## 权限列表 + +无 + +## 子组件 + +支持animate、animateMotion、animateTransform。 + +## 属性 + +支持所列的Svg组件通用属性和以下表格的属性。 + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

id

+

string

+

-

+

否

+

组件的唯一标识。

+

points

+

string

+

-

+

否

+

设置多边形的多个坐标点

+

格式为[x1,y1 x2,y2 x3,y3]。

+

支持属性动画，如果属性动画里设置的动效变化值的坐标个数与原始points的格式不一样，则无效

+
+ +## 示例 + +``` + +
+ + + + +
+``` + +![](figures/zh-cn_image_0000001173324721.png) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-svg-polyline.md b/zh-cn/application-dev/js-reference/component/js-components-svg-polyline.md new file mode 100644 index 0000000000000000000000000000000000000000..3716fb3c985867bf925887f09a75bad0c0494963 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-svg-polyline.md @@ -0,0 +1,78 @@ +# polyline + +- [权限列表](#zh-cn_topic_0000001173164717_section11257113618419) +- [子组件](#zh-cn_topic_0000001173164717_section9288143101012) +- [属性](#zh-cn_topic_0000001173164717_section2907183951110) +- [示例](#zh-cn_topic_0000001173164717_section360556124815) + +绘制折线。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7 开始支持。 + +## 权限列表 + +无 + +## 子组件 + +支持animate、animateMotion、animateTransform。 + +## 属性 + +支持所列的Svg组件通用属性和以下表格的属性。 + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

id

+

string

+

-

+

否

+

组件的唯一标识。

+

points

+

string

+

-

+

否

+

设置折线的多个坐标点

+

格式为[x1,y1 x2,y2 x3,y3]。

+

支持属性动画，如果属性动画里设置的动效变化值的坐标个数与原始points的格式不一样，则无效

+
+ +## 示例 + +``` + +
+ + + + +
+``` + +![](figures/zh-cn_image_0000001173164845.png) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-svg-rect.md b/zh-cn/application-dev/js-reference/component/js-components-svg-rect.md new file mode 100644 index 0000000000000000000000000000000000000000..76144f3a2eadebbf0fcdb22805e4afda276447f9 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-svg-rect.md @@ -0,0 +1,133 @@ +# rect + +- [权限列表](#zh-cn_topic_0000001127284882_section11257113618419) +- [子组件](#zh-cn_topic_0000001127284882_section9288143101012) +- [属性](#zh-cn_topic_0000001127284882_section2907183951110) +- [示例](#zh-cn_topic_0000001127284882_section360556124815) + +用于绘制矩形、圆角矩形。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7 开始支持。 + +## 权限列表 + +无 + +## 子组件 + +支持animate、animateMotion、animateTransform。 + +## 属性 + +支持所列的Svg组件通用属性和以下表格的属性。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

id

+

string

+

-

+

否

+

组件的唯一标识。

+

width

+

<length>|<percentage>

+

0

+

否

+

设置矩形的宽度。支持属性动画

+

height

+

<length>|<percentage>

+

0

+

否

+

设置矩形的高度。支持属性动画

+

x

+

<length>|<percentage>

+

0

+

否

+

设置矩形左上角x轴坐标。支持属性动画

+

y

+

<length>|<percentage>

+

0

+

否

+

设置矩形左上角y轴坐标。支持属性动画

+

rx

+

<length>|<percentage>

+

0

+

否

+

设置矩形圆角x方向半径。支持属性动画

+

ry

+

<length>|<percentage>

+

0

+

否

+

设置矩形圆角y方向半径。支持属性动画

+
+ +## 示例 + +``` + +
+ + + + + + +
+``` + +![](figures/zh-cn_image_0000001127284986.png) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-svg-text.md b/zh-cn/application-dev/js-reference/component/js-components-svg-text.md new file mode 100644 index 0000000000000000000000000000000000000000..3cea3bd2f5dd1302d9463372ad9eacc7e37fe746 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-svg-text.md @@ -0,0 +1,285 @@ +# text + +- [权限列表](#zh-cn_topic_0000001173164689_section11257113618419) +- [子组件](#zh-cn_topic_0000001173164689_section9288143101012) +- [属性](#zh-cn_topic_0000001173164689_section2907183951110) +- [示例](#zh-cn_topic_0000001173164689_section360556124815) + +文本，用于呈现一段信息。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- 从API Version 7 开始支持。 +>- 文本的展示内容需要写在元素标签内，可嵌套tspan子元素标签分段，可嵌套textPath子元素标签按指定路径绘制。 +>- 只支持被父元素标签svg嵌套。 +>- 只支持默认字体sans-serif + +## 权限列表 + +无 + +## 子组件 + +支持tspan、textpath、animate、animateTransform。 + +## 属性 + +支持以下表格中的属性。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

id

+

string

+

-

+

否

+

组件的唯一标识。

+

x

+

<length>|<percentage>

+

0

+

否

+

设置组件左上角x轴坐标

+

y

+

<length>|<percentage>

+

0

+

否

+

设置组件左上角y轴坐标

+

dx

+

<length>|<percentage>

+

0

+

否

+

设置文本x轴偏移

+

dy

+

<length>|<percentage>

+

0

+

否

+

设置文本y轴偏移

+

rotate

+

number

+

0

+

否

+

字体以左下角为圆心旋转角度，正数顺时针，负数逆时针

+

font-size

+

<length>

+

30px

+

否

+

设置文本的尺寸。

+

fill

+

<color>

+

black

+

否

+

字体填充颜色

+

fill-opacity

+

number

+

1.0

+

否

+

字体填充透明度

+

opacity

+

number

+

1

+

否

+

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。

+

stroke

+

<color>

+

black

+

否

+

绘制字体边框并指定颜色

+

stroke-width

+

number

+

1px

+

否

+

字体边框宽度

+

stroke-opacity

+

number

+

1.0

+

否

+

字体边框透明度

+
+ +## 示例 + +``` + +.container { + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + height: 1000px; + width: 1080px; +} +``` + +``` + +
+ + test x|y + test x|y + test opacity + test dx|dy|fill|font-size + test fill-opacity + test 0123456789 + test 中文 + test rotate + test stroke + test stroke-opacity + +
+``` + +**图 1** +![](figures/zh-cn_image_0000001173324697.png "zh-cn_image_0000001173324697") + +属性动画示例 + +``` + +.container { + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + height: 3000px; + width: 1080px; +} +``` + +``` + +
+ + + text attribute x|opacity|rotate + + + + + +
+``` + +**图 2** +![](figures/zh-cn_image_0000001173324699.gif "zh-cn_image_0000001173324699") + +``` + +
+ + + text attribute font-size + + + +
+``` + +**图 3** +![](figures/zh-cn_image_0000001173164783.gif "zh-cn_image_0000001173164783") + +``` + +
+ + + text attribute stroke + + + + text attribute stroke-width-opacity + + + + +
+``` + +**图 4** +![](figures/zh-cn_image_0000001127125122.gif "zh-cn_image_0000001127125122") + diff --git a/zh-cn/application-dev/js-reference/component/js-components-svg-textpath.md b/zh-cn/application-dev/js-reference/component/js-components-svg-textpath.md new file mode 100644 index 0000000000000000000000000000000000000000..9766a561fa5c02f6a0627e0900e9a38e278f2f74 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-svg-textpath.md @@ -0,0 +1,383 @@ +# textPath + +- [权限列表](#zh-cn_topic_0000001127284818_section11257113618419) +- [子组件](#zh-cn_topic_0000001127284818_section9288143101012) +- [属性](#zh-cn_topic_0000001127284818_section2907183951110) +- [示例](#zh-cn_topic_0000001127284818_section360556124815) + +沿路径绘制文本。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- 从API Version 7 开始支持。 +>- 按指定的路径绘制文本，可嵌套子标签tspan分段。 +>- 只支持被父元素标签text嵌套。 + +## 权限列表 + +无 + +## 子组件 + +tspan。 + +## 属性 + +支持以下表格中的属性。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

id

+

string

+

-

+

否

+

组件的唯一标识。

+

path

+

string

+

0

+

是

+

设置路径的形状。

+

字母指令表示的意义如下：

+
  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Belzier curve
  • T = smooth quadratic Belzier curveto
  • A = elliptical Arc
  • Z = closepath
+

startOffset

+

<length>|<percentage>

+

0

+

否

+

设置文本沿path绘制的起始偏移。

+

font-size

+

<length>

+

30px

+

否

+

设置文本的尺寸。

+

fill

+

<color>

+

black

+

否

+

字体填充颜色

+

opacity

+

number

+

1

+

否

+

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。

+

fill-opacity

+

number

+

1.0

+

否

+

字体填充透明度

+

stroke

+

<color>

+

black

+

否

+

绘制字体边框并指定颜色

+

stroke-width

+

number

+

1px

+

否

+

字体边框宽度

+

stroke-opacity

+

number

+

1.0

+

否

+

字体边框透明度

+
+ +## 示例 + +textspan属性示例，textpath文本内容沿着属性path中的路径绘制文本，起点偏移20%的path长度。（绘制的元素曲线仅做参照）。 + +``` + +.container { + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + height: 1200px; + width: 600px; +} +``` + +``` + +
+ + + + + This is textpath test. + + + +
+``` + +**图 1** +![](figures/zh-cn_image_0000001173164775.png "zh-cn_image_0000001173164775") + +textpath与tspan组合示例与效果图 + +``` + +
+ + + + + This is tspan onTextPath. + Let's play. + 12345678912354567891234567891234567891234567891234567890 + + + +
+``` + +**图 2** +![](figures/zh-cn_image_0000001173324691.png "zh-cn_image_0000001173324691") + +``` + +
+ + + + + This is TextPath. + This is tspan onTextPath. + Let's play. + 12345678912354567891234567891234567891234567891234567890 + + + +
+``` + +**图 3** +![](figures/zh-cn_image_0000001173324689.png "zh-cn_image_0000001173324689") + +``` + +
+ + + + + + This is TextPath. + This is first tspan. + This is second tspan. + 12345678912354567891234567891234567891234567891234567890 + + + +
+``` + +**图 4** +![](figures/zh-cn_image_0000001127284930.png "zh-cn_image_0000001127284930") + +startOffset属性动画，文本绘制时起点偏移从10%运动到40%，不绘制超出path长度范围的文本。 + +``` + +.container { + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + height: 3000px; + width: 1080px; +} +``` + +``` + +
+ + + + + This is tspan onTextPath. + Let's play. + 12345678912354567891234567891234567891234567891234567890 + + + + +
+``` + +![](figures/textpath-animate1.gif) + +textpath与tspan组合属性动画与效果图 + +``` + +
+ + + + + This is TextPath. + + tspan attribute x|rotate + + + + tspan static. + + tspan attribute dx|opacity + + + + tspan move + + + +
+``` + +![](figures/textpath-animate2.gif) + +\(1\) "tspan attribute x|rotate" 文本绘制起点偏移从50px运动到100px，顺时针旋转0度到360度。 + +\(2\) "tspan attribute dx|opacity" 在 "tspan static." 绘制结束后再开始绘制，向后偏移量从0%运动到30%，透明度从浅到深变化。 + +\(3\) "tspan move" 在上一段tspan绘制完成后，向后偏移5%的距离进行绘制，呈现跟随前一段tspan运动的效果。 + +textpath与tspan组合属性动画与效果图 + +``` + +
+ + + + + This is TextPath. + + tspan attribute fill|fill-opacity + + + + + tspan attribute font-size + + + + Single tspan + + +
+``` + +![](figures/textpath-animate3.gif) + +\(1\) "This is TextPath." 在path上无偏移绘制第一段文本内容，大小30px，颜色"\#D2691E"。 + +\(2\) "tspan attribute fill|fill-opacity" 相对上一段文本结束后偏移20px，颜色从蓝到红，透明度从浅到深。 + +\(3\) "tspan attribute font-size" 绘制起点相对上一段结束后偏移20px，起点静止，字体大小从10px到50px，整体长度持续拉长。 + +\(4\) "Single tspan" 在上一段的尾部做水平绘制，呈现跟随上一段运动的效果。 + +textpath与tspan组合属性动画与效果图 + +``` + +
+ + + + + This is TextPath. + + tspan attribute stroke + + + + tspan attribute stroke-width-opacity + + + + + + +
+``` + +![](figures/textpath-animate4.gif) + +\(1\) "tspan attribute stroke" 轮廓颜色从红色逐渐转变成绿色。 + +\(2\) "tspan attribute stroke-width-opacity" 轮廓宽度从细1px转变粗5px，透明度从浅到深。 + diff --git a/zh-cn/application-dev/js-reference/component/js-components-svg-tspan.md b/zh-cn/application-dev/js-reference/component/js-components-svg-tspan.md new file mode 100644 index 0000000000000000000000000000000000000000..dfe40e2ac56144cac591bfaf7edc4826bb81c500 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-svg-tspan.md @@ -0,0 +1,313 @@ +# tspan + +- [权限列表](#zh-cn_topic_0000001173324671_section11257113618419) +- [子组件](#zh-cn_topic_0000001173324671_section9288143101012) +- [示例](#zh-cn_topic_0000001173324671_section360556124815) + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- 从API Version 7 开始支持。 +>- 文本的展示内容需要写在元素标签内，可嵌套子元素标签tspan分段。 +>- 文本分段，只支持被父元素标签svg嵌套。 + +## 权限列表 + +无 + +## 子组件 + +支持tspan。 + +支持以下表格中的属性。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

id

+

string

+

-

+

否

+

组件的唯一标识。

+

x

+

<length>|<percentage>

+

0

+

否

+

设置组件左上角x轴坐标

+

y

+

<length>|<percentage>

+

0

+

否

+

设置组件左上角y轴坐标。作为textpath子组件时失效。

+

dx

+

<length>|<percentage>

+

0

+

否

+

设置文本x轴偏移

+

dy

+

<length>|<percentage>

+

0

+

否

+

设置文本y轴偏移。作为textpath子组件时失效。

+

rotate

+

number

+

0

+

否

+

字体以左下角为圆心旋转角度，正数顺时针，负数逆时针

+

font-size

+

<length>

+

30px

+

否

+

设置文本的尺寸。

+

fill

+

<color>

+

black

+

否

+

字体填充颜色

+

opacity

+

number

+

1

+

否

+

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。支持属性动画。

+

fill-opacity

+

number

+

1.0

+

否

+

字体填充透明度

+

stroke

+

<color>

+

black

+

否

+

绘制字体边框并指定颜色

+

stroke-width

+

number

+

1px

+

否

+

字体边框宽度

+

stroke-opacity

+

number

+

1.0

+

否

+

字体边框透明度

+
+ +## 示例 + +``` + +.container { + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + height: 1000px; + width: 1080px; +} +``` + +``` + +
+ + + zero text. + first span. + second span. + third span. + + + first span. + second span. + third span. + forth span. + + +
+``` + +**图 1** +![](figures/zh-cn_image_0000001127125196.png "zh-cn_image_0000001127125196") + +属性动画示例 + +``` + +.container { + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + height: 3000px; + width: 1080px; +} +``` + +``` + +
+ + + + tspan attribute x|opacity|rotate + + + + + + + + tspan attribute dx + + + + +
+``` + +**图 2** +![](figures/zh-cn_image_0000001127285008.gif "zh-cn_image_0000001127285008") + +``` + +
+ + + + tspan attribute fill|fill-opacity + + + + + +
+``` + +**图 3** +![](figures/zh-cn_image_0000001127125198.gif "zh-cn_image_0000001127125198") + +``` + +
+ + + + tspan attribute font-size + + + + +
+``` + +**图 4** +![](figures/zh-cn_image_0000001173164863.gif "zh-cn_image_0000001173164863") + +``` + +
+ + + + tspan attribute stroke + + + + + + tspan attribute stroke-width-opacity + + + + + +
+``` + +**图 5** +![](figures/zh-cn_image_0000001127125200.gif "zh-cn_image_0000001127125200") + diff --git a/zh-cn/application-dev/js-reference/component/js-components-svg.md b/zh-cn/application-dev/js-reference/component/js-components-svg.md new file mode 100644 index 0000000000000000000000000000000000000000..301c0c79800d7522ab111b2b496a9c99e383ed55 --- /dev/null +++ b/zh-cn/application-dev/js-reference/component/js-components-svg.md @@ -0,0 +1,33 @@ +# svg组件 + +- **[通用属性](js-components-svg-common-attributes.md)** + +- **[svg](js-components-svg-0.md)** + +- **[rect](js-components-svg-rect.md)** + +- **[circle](js-components-svg-circle.md)** + +- **[ellipse](js-components-svg-ellipse.md)** + +- **[path](js-components-svg-path.md)** + +- **[line](js-components-svg-line.md)** + +- **[polyline](js-components-svg-polyline.md)** + +- **[polygon](js-components-svg-polygon.md)** + +- **[text](js-components-svg-text.md)** + +- **[tspan](js-components-svg-tspan.md)** + +- **[textPath](js-components-svg-textpath.md)** + +- **[animate](js-components-svg-animate.md)** + +- **[animateMotion](js-components-svg-animate-motion.md)** + +- **[animateTransform](js-components-svg-animate-transform.md)** + + diff --git a/zh-cn/application-dev/js-reference/dataAbilityHelper.md b/zh-cn/application-dev/js-reference/dataAbilityHelper.md deleted file mode 100644 index 1caf702a800157e236d5131b56f785525b6dc216..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/dataAbilityHelper.md +++ /dev/null @@ -1,837 +0,0 @@ -### DataAbilityHelper模块(JS端SDK接口) - -#### 支持设备 - -| API | 手机 | 平板 | 智慧屏 | 智能穿戴 | 轻量级智能穿戴 | 智慧视觉设备 | -| ------------------------------------------------------------ | ---- | ---- | ------ | -------- | -------------- | ------------ | -| DataAbilityHelper.openFile(uri: string, mode: string, callback: AsyncCallback\) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| DataAbilityHelper.openFile(uri: string, mode: string) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| DataAbilityHelper.on(type: 'dataChange', uri: string, callback: AsyncCallback\) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| DataAbilityHelper.off(type: 'dataChange', uri: string, callback?: AsyncCallback\) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| DataAbilityHelper.getFileTypes(uri: string, mimeTypeFilter: string, callback: AsyncCallback>) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| DataAbilityHelper.getFileTypes(uri: string, mimeTypeFilter: string) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| DataAbilityHelper.getType(uri: string, callback: AsyncCallback\) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| DataAbilityHelper.getType(uri: string) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| DataAbilityHelper.normalizeUri(uri: string, callback: AsyncCallback\) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| DataAbilityHelper.normalizeUri(uri: string) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| DataAbilityHelper.denormalizeUri(uri: string, callback: AsyncCallback\) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| DataAbilityHelper.denormalizeUri(uri: string) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| DataAbilityHelper.notifyChange(uri: string, callback: AsyncCallback\) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| DataAbilityHelper.notifyChange(uri: string) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| DataAbilityHelper.insert(uri: string, valuesBucket: rdb.ValuesBucket, callback: AsyncCallback\) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| DataAbilityHelper.insert(uri: string, valuesBucket: rdb.ValuesBucket) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| DataAbilityHelper.batchInsert(uri: string, valuesBuckets: Array, callback: AsyncCallback\) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| DataAbilityHelper.batchInsert(uri: string, valuesBuckets: Array) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| DataAbilityHelper.delete(uri: string, predicates: dataAbility.DataAbilityPredicates, callback: AsyncCallback\) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| DataAbilityHelper.delete(uri: string, predicates: dataAbility.DataAbilityPredicates) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| DataAbilityHelper.update(uri: string, valuesBucket: rdb.ValuesBucket, predicates: dataAbility.DataAbilityPredicates, callback: AsyncCallback\) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| DataAbilityHelper.update(uri: string, valuesBucket: rdb.ValuesBucket, predicates: dataAbility.DataAbilityPredicates) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| DataAbilityHelper.query(uri: string, columns: Array\, predicates: dataAbility.DataAbilityPredicates, callback: AsyncCallback\) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | -| DataAbilityHelper.query(uri: string, columns: Array\, predicates: dataAbility.DataAbilityPredicates) | 支持 | 支持 | 支持 | 支持 | 不支持 | 不支持 | - -#### 权限列表 - -ohos.permission.RUNNING_LOCK permission - -#### 导入模块 - -``` -import featureAbility from '@ohos.ability.featureAbility' -import ohos_data_ability from '@ohos.data.dataability' -import ohos_data_rdb from '@ohos.data.rdb' -``` - -#### DataAbilityHelper.openFile(uri: string, mode: string, callback: AsyncCallback\) - -- 接口说明 - - 在指定的远程路径中打开文件(callback形式) - - -* 参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | -------- | -------- | -------------------- | ---- | ------------------------ | - | uri | 只读 | string | 是 | 指示要打开的文件的路径。 | - | mode | 只读 | string | 是 | 指示文件打开模式‘rwt’。 | - | callback | 只读 | AsyncCallback\ | 是 | 被指定的回调方法 | - -* 返回值 - - 返回文件描述符。 - -* 示例 - -```javascript -import featureAbility from '@ohos.ability.featureAbility' -var DAHelper = await featureAbility.getDataAbilityHelper( - "dataability:///com.example.DataAbility" -); -var mode = "rwt"; -DAHelper.openFile( - "dataability:///com.example.DataAbility", - mode, -) -``` - -#### DataAbilityHelper.openFile(uri: string, mode: string) - -- 接口说明 - - 在指定的远程路径中打开文件(Promise形式) - -* 参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ---- | -------- | ------ | ---- | ------------------------ | - | uri | 只读 | string | 是 | 指示要打开的文件的路径。 | - | mode | 只读 | string | 是 | 指示文件打开模式‘rwt’。 | - -* 返回值 - - 返回文件描述符。 - -* 示例 - -```javascript -import featureAbility from '@ohos.ability.featureAbility' -var DAHelper = await featureAbility.getDataAbilityHelper( - "dataability:///com.example.DataAbility" -); -var mode = "rwt"; -DAHelper.openFile( - "dataability:///com.example.DataAbility"， - mode).then((void) => { - console.info("==========================>openFileCallback=======================>"); -}); -``` - -#### DataAbilityHelper.on(type: 'dataChange', uri: string, callback: AsyncCallback\) - -- 接口说明 - - 注册观察者以观察给定uri指定的数据(callback形式) - -- 参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | -------- | -------- | -------------------- | ---- | ------------------------ | - | type | 只读 | string | 是 | 数据更改。 | - | uri | 只读 | string | 是 | 指示要操作的数据的路径。 | - | callback | 只读 | AsyncCallback\ | 是 | 指示数据更改时的回调。 | - -- 返回值 - - void - -- 示例 - -```js -import featureAbility from '@ohos.ability.featureAbility' -var helper = await featureAbility.getDataAbilityHelper( - "dataability:///com.example.DataAbility" -); -helper.on( - "dataChange", - "dataability:///com.example.DataAbility", -) -``` - -#### DataAbilityHelper.off(type: 'dataChange', uri: string, callback?: AsyncCallback\) - -- 接口说明 - - 注册观察者以观察给定uri指定的数据(callback形式) - -- 参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | -------- | -------- | -------------------- | ---- | ------------------------ | - | type | 只读 | string | 是 | 数据更改。 | - | uri | 只读 | string | 是 | 指示要操作的数据的路径。 | - | callback | 只读 | AsyncCallback\ | 否 | 指示已注册的回调。 | - -- 返回值 - - void - -- 示例 - -```js -import featureAbility from '@ohos.ability.featureAbility' -var helper = await featureAbility.getDataAbilityHelper( - "dataability:///com.example.DataAbility" -); -helper.off( - "dataChange", - "dataability:///com.example.DataAbility", -) -``` - -#### DataAbilityHelper.getType(uri: string, callback: AsyncCallback\) - -- 接口说明 - - 获取给定URI指定的日期的MIME类型(callback形式) - -- 参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | -------- | -------- | ---------------------- | ---- | ------------------------ | - | uri | 只读 | string | 是 | 指示要操作的数据的路径。 | - | callback | 只读 | AsyncCallback\ | 是 | 回调方法 | - -- 返回值 - - 返回与uri指定的数据匹配的MIME类型。 - -- 示例 - -```js -import featureAbility from '@ohos.ability.featureAbility' -var DAHelper = await featureAbility.getDataAbilityHelper( - "dataability:///com.example.DataAbility" -); -DAHelper.getType( - "dataability:///com.example.DataAbility" -) -``` - -#### DataAbilityHelper.getType(uri: string) - -- 接口说明 - - 获取给定URI指定的日期的MIME类型(Promise形式) - -- 参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ---- | -------- | ------ | ---- | ------------------------ | - | uri | 只读 | string | 是 | 指示要操作的数据的路径。 | - -- 返回值 - - 返回与uri指定的数据匹配的MIME类型。 - -- 示例 - -```js -import featureAbility from '@ohos.ability.featureAbility' -var DAHelper = await featureAbility.getDataAbilityHelper( - "dataability:///com.example.DataAbility" -); -DAHelper.getType( - "dataability:///com.example.DataAbility" - ).then((void) => { - console.info("==========================>getTypeCallback=======================>"); -}); -``` - -#### DataAbilityHelper.getFileTypes(uri: string, mimeTypeFilter: string, callback: AsyncCallback>) - -- 接口说明 - - 获取支持的文件的MIME类型(callback形式) - -- 参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | -------------- | -------- | ---------------------- | ---- | ---------------------------- | - | uri | 只读 | string | 是 | 指示要获取的文件的路径。 | - | mimeTypeFilter | 只读 | string | 是 | 指示要获取的文件的MIME类型。 | - | callback | 只读 | AsyncCallback\ | 是 | 回调方法 | - -- 返回值 - - 返回匹配的MIME类型数组。 - -- 示例 - -```js -import featureAbility from '@ohos.ability.featureAbility' -var DAHelper = await featureAbility.getDataAbilityHelper( - "dataability:///com.example.DataAbility" -); -DAHelper.getFileTypes( - "dataability:///com.example.DataAbility", - "image/*" -) -``` - -#### DataAbilityHelper.getFileTypes(uri: string, mimeTypeFilter: string) - -- 接口说明 - - 获取支持的文件的MIME类型(Promise形式) - -- 参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | -------------- | -------- | ------ | ---- | ---------------------------- | - | uri | 只读 | string | 是 | 指示要获取的文件的路径。 | - | mimeTypeFilter | 只读 | string | 是 | 指示要获取的文件的MIME类型。 | - -- 返回值 - - 返回匹配的MIME类型数组。 - -- 示例 - -```js -import featureAbility from '@ohos.ability.featureAbility' -var DAHelper = await featureAbility.getDataAbilityHelper( - "dataability:///com.example.DataAbility" -); -DAHelper.getFileTypes( - "dataability:///com.example.DataAbility", - "image/*" - ).then((void) => { - console.info("==========================>getFileTypesCallback=======================>"); -}); -``` - -#### DataAbilityHelper.normalizeUri(uri: string, callback: AsyncCallback\) - -- 接口说明 - - 将引用数据功能的给定uri转换为规范化uri(callback形式) - -- 参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | -------- | -------- | ---------------------- | ---- | ----------------------- | - | uri | 只读 | string | 是 | 指示要规范化的uri对象。 | - | callback | 只读 | AsyncCallback\ | 是 | 回调方法 | - -- 返回值 - - 如果数据功能支持uri规范化或null，则返回规范化uri对象。 - -- 示例 - -```js -import featureAbility from '@ohos.ability.featureAbility' -var DAHelper = await featureAbility.getDataAbilityHelper( - "dataability:///com.example.DataAbility" -); -DAHelper.normalizeUri( - "dataability:///com.example.DataAbility", -) -``` - -#### DataAbilityHelper.normalizeUri(uri: string) - -- 接口说明 - - 将引用数据功能的给定uri转换为规范化uri(Promise形式) - -- 参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ---- | -------- | ------ | ---- | ----------------------- | - | uri | 只读 | string | 是 | 指示要规范化的uri对象。 | - -- 返回值 - - 如果数据功能支持uri规范化或null，则返回规范化uri对象。 - -- 示例 - -```js -import featureAbility from '@ohos.ability.featureAbility' -var DAHelper = await featureAbility.getDataAbilityHelper( - "dataability:///com.example.DataAbility" -); -DAHelper.normalizeUri( - "dataability:///com.example.DataAbility", - ).then((void) => { - console.info("==========================>normalizeUriCallback=======================>"); -}); -``` - -#### DataAbilityHelper.denormalizeUri(uri: string, callback: AsyncCallback\) - -- 接口说明 - - 将由normalizeUri（uri）生成的给定规范化uri转换为非规范化uri(callback形式) - -- 参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | -------- | -------- | ---------------------- | ---- | ----------------------- | - | uri | 只读 | string | 是 | 指示要规范化的uri对象。 | - | callback | 只读 | AsyncCallback\ | 是 | 回调方法 | - -- 返回值 - - 如果反规范化成功，则返回反规范化uri对象。 - -- 示例 - -```js -import featureAbility from '@ohos.ability.featureAbility' -var DAHelper = await featureAbility.getDataAbilityHelper( - "dataability:///com.example.DataAbility" -); -DAHelper.denormalizeUri( - "dataability:///com.example.DataAbility", -) -``` - -#### DataAbilityHelper.denormalizeUri(uri: string) - -- 接口说明 - - 将由normalizeUri（uri）生成的给定规范化uri转换为非规范化uri(Promise形式) - -- 参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ---- | -------- | ------ | ---- | ----------------------- | - | uri | 只读 | string | 是 | 指示要规范化的uri对象。 | - -- 返回值 - - 如果反规范化成功，则返回反规范化uri对象。 - -- 示例 - -```js -import featureAbility from '@ohos.ability.featureAbility' -var DAHelper = await featureAbility.getDataAbilityHelper( - "dataability:///com.example.DataAbility" -); -DAHelper.denormalizeUri( - "dataability:///com.example.DataAbility", - ).then((void) => { - console.info("==========================>denormalizeUriCallback=======================>"); -}); -``` - -#### DataAbilityHelper.notifyChange(uri: string, callback: AsyncCallback\) - -- 接口说明 - - 通知已注册的观察者uri指定的数据资源的更改(callback形式) - -- 参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | -------- | -------- | -------------------- | ---- | ------------------------ | - | uri | 只读 | string | 是 | 指示要操作的数据的路径。 | - | callback | 只读 | AsyncCallback\ | 是 | 回调方法 | - -- 返回值 - - void - -- 示例 - -```js -import featureAbility from '@ohos.ability.featureAbility' -var helper = await featureAbility.getDataAbilityHelper( - "dataability:///com.example.DataAbility" -); -helper.notifyChange( - "dataability:///com.example.DataAbility", -) -``` - -#### DataAbilityHelper.notifyChange(uri: string) - -- 接口说明 - - 通知已注册的观察者uri指定的数据资源的更改(Promise形式) - -- 参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ---- | -------- | ------ | ---- | ------------------------ | - | uri | 只读 | string | 是 | 指示要操作的数据的路径。 | - -- 返回值 - - void - -- 示例 - -```js -import featureAbility from '@ohos.ability.featureAbility' -var DAHelper = await featureAbility.getDataAbilityHelper( - "dataability:///com.example.DataAbility" -); -DAHelper.notifyChange( - "dataability:///com.example.DataAbility", - ).then((void) => { - console.info("==========================>notifyChangeCallback=======================>"); -}); -``` - -#### DataAbilityHelper.insert(uri: string, valuesBucket: rdb.ValuesBucket, callback: AsyncCallback\) - -- 接口说明 - - 将单个数据记录插入数据库(callback形式) - -- 参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ------------ | -------- | ---------------------- | ---- | ------------------------------------------------------ | - | uri | 只读 | string | 是 | 指示要插入的数据的路径。 | - | valuesBucket | 只读 | rdb.ValuesBucket | 是 | 指示要插入的数据记录。如果此参数为空，将插入一个空行。 | - | callback | 只读 | AsyncCallback\ | 是 | 回调方法 | - -- 返回值 - - 返回插入数据记录的索引。 - -- 示例 - -```js -import featureAbility from '@ohos.ability.featureAbility' -var DAHelper = await featureAbility.getDataAbilityHelper( - "dataability:///com.example.DataAbility" -); -const valueBucket = { - "name": "rose", - "age": 22, - "salary": 200.5, - "blobType": u8, -} -DAHelper.insert( - "dataability:///com.example.DataAbility", - valueBucket -) -``` - -#### DataAbilityHelper.insert(uri: string, valuesBucket: rdb.ValuesBucket) - -- 接口说明 - - 将单个数据记录插入数据库(Promise形式) - -- 参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ------------ | -------- | ---------------- | ---- | ------------------------------------------------------ | - | uri | 只读 | string | 是 | 指示要插入的数据的路径。 | - | valuesBucket | 只读 | rdb.ValuesBucket | 是 | 指示要插入的数据记录。如果此参数为空，将插入一个空行。 | - -- 返回值 - - 返回插入数据记录的索引。 - -- 示例 - -```js -import featureAbility from '@ohos.ability.featureAbility' -var DAHelper = await featureAbility.getDataAbilityHelper( - "dataability:///com.example.DataAbility" -); -const valueBucket = { - "name": "rose1", - "age": 221, - "salary": 20.5, - "blobType": u8, -} -DAHelper.insert( - "dataability:///com.example.DataAbility", - valueBucket - ).then((void) => { - console.info("==========================>insertCallback=======================>"); -}); -``` - -#### DataAbilityHelper.batchInsert(uri: string, valuesBuckets: Array, callback: AsyncCallback\) - -- 接口说明 - - 将多个数据记录插入数据库(callback形式) - -- 参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ------------ | -------- | ----------------------- | ---- | ------------------------ | - | uri | 只读 | string | 是 | 指示要插入的数据的路径。 | - | valuesBucket | 只读 | Array | 是 | 指示要插入的数据记录。 | - | callback | 只读 | AsyncCallback\ | 是 | 回调方法 | - -- 返回值 - - 返回插入的数据记录数。 - -- 示例 - -```js -import featureAbility from '@ohos.ability.featureAbility' -var DAHelper = await featureAbility.getDataAbilityHelper( - "dataability:///com.example.DataAbility" -); -var cars = new Array({"name": "roe11", "age": 21, "salary": 20.5, "blobType": u8,}, - {"name": "roe12", "age": 21, "salary": 20.5, "blobType": u8,}, - {"name": "roe13", "age": 21, "salary": 20.5, "blobType": u8,}) -DAHelper.batchInsert( - "dataability:///com.example.DataAbility", - cars -) -``` - -#### DataAbilityHelper.batchInsert(uri: string, valuesBuckets: Array) - -- 接口说明 - - 将多个数据记录插入数据库(Promise形式) - -- 参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ------------ | -------- | ----------------------- | ---- | ------------------------ | - | uri | 只读 | string | 是 | 指示要插入的数据的路径。 | - | valuesBucket | 只读 | Array | 是 | 指示要插入的数据记录。 | - -- 返回值 - - 返回插入的数据记录数。 - -- 示例 - -```js -import featureAbility from '@ohos.ability.featureAbility' -var DAHelper = await featureAbility.getDataAbilityHelper( - "dataability:///com.example.DataAbility" -); -var cars = new Array({"name": "roe11", "age": 21, "salary": 20.5, "blobType": u8,}, - {"name": "roe12", "age": 21, "salary": 20.5, "blobType": u8,}, - {"name": "roe13", "age": 21, "salary": 20.5, "blobType": u8,}) -DAHelper.batchInsert( - "dataability:///com.example.DataAbility", - cars - ).then((void) => { - console.info("==========================>batchInsertCallback=======================>"); -}); -``` - -#### DataAbilityHelper.delete(uri: string, predicates: dataAbility.DataAbilityPredicates, callback: AsyncCallback\) - -- 接口说明 - - 从数据库中删除一个或多个数据记录(callback形式) - -- 参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ------------ | -------- | --------------------------------- | ---- | ------------------------------------------------ | - | uri | 只读 | string | 是 | 指示要删除的数据的路径。 | - | valuesBucket | 只读 | dataAbility.DataAbilityPredicates | 是 | 指示筛选条件。当此参数为null时，应定义处理逻辑。 | - | callback | 只读 | AsyncCallback\ | 是 | 回调方法 | - -- 返回值 - - 返回已删除的数据记录数。 - -- 示例 - -```js -import featureAbility from '@ohos.ability.featureAbility' -import ohos_data_ability from '@ohos.data.dataability' -var DAHelper = await featureAbility.getDataAbilityHelper( - "dataability:///com.example.DataAbility" -); -let da = new ohos_data_ability.DataAbilityPredicates() -DAHelper.delete( - "dataability:///com.example.DataAbility", - da -) -``` - -#### DataAbilityHelper.delete(uri: string, predicates: dataAbility.DataAbilityPredicates) - -- 接口说明 - - 从数据库中删除一个或多个数据记录(Promise形式) - -- 参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ------------ | -------- | --------------------------------- | ---- | ------------------------------------------------ | - | uri | 只读 | string | 是 | 指示要删除的数据的路径。 | - | valuesBucket | 只读 | dataAbility.DataAbilityPredicates | 是 | 指示筛选条件。当此参数为null时，应定义处理逻辑。 | - -- 返回值 - - 返回已删除的数据记录数。 - -- 示例 - -```js -import featureAbility from '@ohos.ability.featureAbility' -var DAHelper = await featureAbility.getDataAbilityHelper( - "dataability:///com.example.DataAbility" -); -let da = new ohos_data_ability.DataAbilityPredicates() -DAHelper.delete( - "dataability:///com.example.DataAbility", - da - ).then((void) => { - console.info("==========================>deleteCallback=======================>"); -}); -``` - -#### DataAbilityHelper.update(uri: string, valuesBucket: rdb.ValuesBucket, predicates: dataAbility.DataAbilityPredicates, callback: AsyncCallback\) - -- 接口说明 - - 更新数据库中的数据记录(callback形式) - -- 参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ------------ | -------- | --------------------------------- | ---- | ------------------------------------------------ | - | uri | 只读 | string | 是 | 指示要更新的数据的路径。 | - | valuesBucket | 只读 | rdb.ValuesBucket | 是 | 指示要更新的数据。 | - | predicates | 只读 | dataAbility.DataAbilityPredicates | 是 | 指示筛选条件。当此参数为null时，应定义处理逻辑。 | - | callback | 只读 | AsyncCallback\ | 是 | 回调方法 | - -- 返回值 - - 返回更新的数据记录数。 - -- 示例 - -```js -import featureAbility from '@ohos.ability.featureAbility' -import ohos_data_ability from '@ohos.data.dataability' -var DAHelper = await featureAbility.getDataAbilityHelper( - "dataability:///com.example.DataAbility" -); -const va = { - "name": "roe1", - "age": 21, - "salary": 20.5, - "blobType": u8, -} -let da = new ohos_data_ability.DataAbilityPredicates() -DAHelper.update( - "dataability:///com.example.DataAbility", - va, - da -) -``` - -#### DataAbilityHelper.update(uri: string, valuesBucket: rdb.ValuesBucket, predicates: dataAbility.DataAbilityPredicates) - -- 接口说明 - - 更新数据库中的数据记录(Promise形式) - -- 参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ------------ | -------- | --------------------------------- | ---- | ------------------------------------------------ | - | uri | 只读 | string | 是 | 指示要更新的数据的路径。 | - | valuesBucket | 只读 | rdb.ValuesBucket | 是 | 指示要更新的数据。 | - | predicates | 只读 | dataAbility.DataAbilityPredicates | 是 | 指示筛选条件。当此参数为null时，应定义处理逻辑。 | - -- 返回值 - - 返回更新的数据记录数。 - -- 示例 - -```js -import featureAbility from '@ohos.ability.featureAbility' -import ohos_data_ability from '@ohos.data.dataability' -var DAHelper = await featureAbility.getDataAbilityHelper( - "dataability:///com.example.DataAbility" -); -const va = { - "name": "roe1", - "age": 21, - "salary": 20.5, - "blobType": u8, -} -let da = new ohos_data_ability.DataAbilityPredicates() -DAHelper.update( - "dataability:///com.example.DataAbility", - va, - da - ).then((void) => { - console.info("==========================>updateCallback=======================>"); -}); -``` - -#### DataAbilityHelper.query(uri: string, columns: Array\, predicates: dataAbility.DataAbilityPredicates, callback: AsyncCallback\) - -- 接口说明 - - 查询数据库中的数据(callback形式) - -- 参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ---------- | -------- | --------------------------------- | ---- | ------------------------------------------------ | - | uri | 只读 | string | 是 | 指示要查询的数据的路径。 | - | columns | 只读 | rdb.ValuesBucket | 是 | 指示要查询的列。如果此参数为空，则查询所有列。 | - | predicates | 只读 | dataAbility.DataAbilityPredicates | 是 | 指示筛选条件。当此参数为null时，应定义处理逻辑。 | - | callback | 只读 | AsyncCallback\ | 是 | 回调方法 | - -- 返回值 - - 返回查询结果 - -- 示例 - -```js -import featureAbility from '@ohos.ability.featureAbility' -import ohos_data_ability from '@ohos.data.dataability' -var DAHelper = await featureAbility.getDataAbilityHelper( - "dataability:///com.example.DataAbility" -); -var cars=new Array({"value1"}, {"value2"}, {"value3"}, {"value4"}); -let da = new ohos_data_ability.DataAbilityPredicates() -DAHelper.query( - "dataability:///com.example.DataAbility", - cars, - da -) -``` - - - -#### DataAbilityHelper.query(uri: string, columns: Array\, predicates: dataAbility.DataAbilityPredicates) - -- 接口说明 - - 查询数据库中的数据(Promise形式) - -- 参数描述 - - | 名称 | 读写属性 | 类型 | 必填 | 描述 | - | ---------- | -------- | --------------------------------- | ---- | ------------------------------------------------ | - | uri | 读写 | string | 是 | 指示要查询的数据的路径。 | - | columns | 读写 | rdb.ValuesBucket | 是 | 指示要查询的列。如果此参数为空，则查询所有列。 | - | predicates | 读写 | dataAbility.DataAbilityPredicates | 是 | 指示筛选条件。当此参数为null时，应定义处理逻辑。 | - -- 返回值 - - 返回查询结果 - -- 示例 - -```js -import featureAbility from '@ohos.ability.featureAbility' -import ohos_data_ability from '@ohos.data.dataability' -var DAHelper = await featureAbility.getDataAbilityHelper( - "dataability:///com.example.DataAbility" -); -var cars=new Array({"value1"}, {"value2"}, {"value3"}, {"value4"}); -let da = new ohos_data_ability.DataAbilityPredicates() -DAHelper.query( - "dataability:///com.example.DataAbility", - cars, - da - ).then((void) => { - console.info("==========================>queryCallback=======================>"); -}); -``` - diff --git a/zh-cn/application-dev/js-reference/dialog.md b/zh-cn/application-dev/js-reference/dialog.md deleted file mode 100755 index d87680e3a5228b8f9d3f5b5c8363ea997d03dd98..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/dialog.md +++ /dev/null @@ -1,333 +0,0 @@ -# dialog - -- [权限列表](#zh-cn_topic_0000001059148550_section11257113618419) -- [子组件](#zh-cn_topic_0000001059148550_section9288143101012) -- [属性](#zh-cn_topic_0000001059148550_section2907183951110) -- [事件](#zh-cn_topic_0000001059148550_section20424336163815) -- [样式](#zh-cn_topic_0000001059148550_section5775351116) -- [方法](#zh-cn_topic_0000001059148550_section11753103216253) -- [示例](#zh-cn_topic_0000001059148550_section6663311114620) - -自定义弹窗容器。 - -## 权限列表 - -无 - -## 子组件 - -支持单个子组件。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

disabled

-

boolean

-

false

-

否

-

当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-
- -## 事件 - - - - - - - - - - - - -

名称

-

参数

-

描述

-

cancel

-

-

-

用户点击非dialog区域触发取消弹窗时触发的事件。

-
- -## 样式 - -支持如下样式： - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

width

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的宽度。

-

未设置时使用弹窗默认宽度。

-

height

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的高度

-

未设置时使用弹窗默认高度。

-

margin

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

-

  • 只有一个值时，这个值会被指定给全部的四个边。

    -

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    -

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    -

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下外边距属性。

-

margin-[start|end]5+

-

<length>

-

0

-

否

-

设置起始和末端外边距属性。

-
- -## 方法 - -支持如下方法。 - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

show

-

-

-

弹出对话框

-

close

-

-

-

关闭对话框

-
- ->![](public_sys-resources/icon-note.gif) **说明：** ->dialog属性、样式均不支持动态更新。 - -## 示例 - -``` - -
-
- -
- -
-
- Simple dialog -
-
- - -
-
- -
-``` - -``` -/* xxx.css */ -.doc-page { - flex-direction: column; - justify-content: center; - align-items: center; -} -.btn-div { - width: 100%; - height: 200px; - flex-direction: column; - align-items: center; - justify-content: center; -} -.txt { - color: #000000; - font-weight: bold; - font-size: 39px; -} -.dialog-main { - width: 500px; -} -.dialog-div { - flex-direction: column; - align-items: center; -} -.inner-txt { - width: 400px; - height: 160px; - flex-direction: column; - align-items: center; - justify-content: space-around; -} -.inner-btn { - width: 400px; - height: 120px; - justify-content: space-around; - align-items: center; -} -``` - -``` -// xxx.js -import prompt from '@system.prompt'; - -export default { - showDialog(e) { - this.$element('simpledialog').show() - }, - cancelDialog(e) { - prompt.showToast({ - message: 'Dialog cancelled' - }) - }, - cancelSchedule(e) { - this.$element('simpledialog').close() - prompt.showToast({ - message: 'Successfully cancelled' - }) - }, - setSchedule(e) { - this.$element('simpledialog').close() - prompt.showToast({ - message: 'Successfully confirmed' - }) - } -} -``` - -![](figures/GIF6.gif) - diff --git a/zh-cn/application-dev/js-reference/div.md b/zh-cn/application-dev/js-reference/div.md deleted file mode 100755 index 55bc3b82900636f996d45c54f3b56b9cc0941406..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/div.md +++ /dev/null @@ -1,879 +0,0 @@ -# div - -- [权限列表](#zh-cn_topic_0000001059308532_section11257113618419) -- [子组件](#zh-cn_topic_0000001059308532_section9288143101012) -- [属性](#zh-cn_topic_0000001059308532_section2907183951110) -- [事件](#zh-cn_topic_0000001059308532_section77341431152917) -- [样式](#zh-cn_topic_0000001059308532_section5775351116) -- [示例](#zh-cn_topic_0000001059308532_section1241545010391) - -基础容器，用作页面结构的根节点或将内容进行分组。 - -## 权限列表 - -无 - -## 子组件 - -支持。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

disabled

-

boolean

-

false

-

否

-

当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-
- -## 事件 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

touchstart

-

TouchEvent

-

手指刚触摸屏幕时触发该事件。

-

touchmove

-

TouchEvent

-

手指触摸屏幕后移动时触发该事件。

-

touchcancel

-

TouchEvent

-

手指触摸屏幕中动作被打断时触发该事件。

-

touchend

-

TouchEvent

-

手指触摸结束离开屏幕时触发该事件。

-

click

-

-

-

点击动作触发该事件。

-

longpress

-

-

-

长按动作触发该事件。

-

swipe5+

-

SwipeEvent

-

组件上快速滑动后触发。

-
- -## 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

flex-direction

-

string

-

row

-

否

-

flex容器主轴方向。可选项有：

-
  • column：垂直方向从上到下
  • row：水平方向从左到右
-

flex-wrap

-

string

-

nowrap

-

否

-

flex容器是单行还是多行显示，该值暂不支持动态修改。可选项有：

-
  • nowrap：不换行，单行显示。
  • wrap：换行，多行显示。
-

justify-content

-

string

-

flex-start

-

否

-

flex容器当前行的主轴对齐格式。可选项有：

-
  • flex-start：项目位于容器的开头。
  • flex-end：项目位于容器的结尾。
  • center：项目位于容器的中心。
  • space-between：项目位于各行之间留有空白的容器内。
  • space-around：项目位于各行之前、之间、之后都留有空白的容器内。
  • space-evenly5+: 均匀排列每个元素，每个元素之间的间隔相等。
-

align-items

-

string

-

stretch

-

否

-

flex容器当前行的交叉轴对齐格式，可选值为：

-
  • stretch：弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。
  • flex-start：元素向交叉轴起点对齐。
  • flex-end：元素向交叉轴终点对齐。
  • center：元素在交叉轴居中。
-

align-content

-

string

-

flex-start

-

否

-

交叉轴中有额外的空间时，多行内容对齐格式，可选值为：

-
  • flex-start：所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。
  • flex-end：所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。
  • center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。
  • space-between：所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。
  • space-around：所有行在容器中平均分布，相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。
-

display

-

string

-

flex

-

否

-

确定该元素视图框的类型，该值暂不支持动态修改。可选值为：

-
  • flex：弹性布局
  • grid：网格布局
  • none：不渲染此元素
-

grid-template-[columns|rows]

-

string

-

1行1列

-

否

-

用于设置当前网格布局行和列的数量，不设置时默认1行1列，仅当display为grid时生效。

-

示例：如设置grid-template-columns为：

-
  • 50px 100px 60px：分三列，第一列50px，第二列100px，第三列60px；
  • 1fr 1fr 2fr：分三列，将父组件允许的宽分为4等份，第一列占1份，第二列占一份，第三列占2份；
  • 30% 20% 50%：分三列，将父组件允许的宽为基准，第一列占30%，第二列占20%，第三列占50%；
  • repeat(2,100px)：分两列，第一列100px，第二列100px；
  • repeat(auto-fill,100px)5+：按照每列100px的大小和交叉轴大小计算最大正整数重复次数，按照该重复次数布满交叉轴；
  • auto 1fr 1fr：分三列，第一列自适应内部子组件所需宽度，剩余空间分为两等份，第二列占一份，第三列占一份。
-

grid-[columns|rows]-gap

-

<length>

-

0

-

否

-

用于设置行与行的间距或者列与列的间距，也可以支持通过grid-gap设置相同的行列间距，仅当display为grid时生效。

-

grid-row-[start|end]

-

number

-

-

-

否

-

用于设置当前元素在网格布局中的起止行号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。

-

grid-column-[start|end]

-

number

-

-

-

否

-

用于设置当前元素在网格布局中的起止列号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。

-

grid-auto-flow5+

-

string

-

-

-

否

-

使用框架自动布局算法进行网格的布局，可选值为：

-
  • row：逐行填充元素，如果行空间不够，则新增行；
  • column：逐列填充元素，如果列空间不够，则新增列。
-

width

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的宽度。

-

缺省时使用元素自身内容需要的宽度。

-

height

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的高度。

-

缺省时使用元素自身内容需要的高度。

-

padding

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的内边距属性。

-
该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    -

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    -

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    -

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下内边距属性。

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端内边距属性。

-

margin

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

-

  • 只有一个值时，这个值会被指定给全部的四个边。

    -

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    -

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    -

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下外边距属性。

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端外边距属性。

-

border

-

-

-

0

-

否

-

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

-

border-style

-

string

-

solid

-

否

-

使用简写属性设置所有边框的样式，可选值为：

-
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
-
  • solid：显示为一条实线。
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

否

-

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

-

border-[left|top|right|bottom]

-

-

-

-

-

否

-

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

-

border-width

-

<length>

-

0

-

否

-

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

否

-

分别设置左、上、右、下四个边框的宽度。

-

border-color

-

<color>

-

black

-

否

-

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

否

-

分别设置左、上、右、下四个边框的颜色。

-

border-radius

-

<length>

-

-

-

否

-

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，border-[left|top|right|bottom]-style，如果要设置color、width和style，需要将四个方向一起设置（border-width、border-color、border-style）。

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

否

-

分别设置左上，右上，右下和左下四个角的圆角半径。

-

background

-

<linear-gradient>

-

-

-

否

-

仅支持设置渐变样式，与background-color、background-image不兼容。

-

background-color

-

<color>

-

-

-

否

-

设置背景颜色。

-

background-image

-

string

-

-

-

否

-

设置背景图片。与background-color、background不兼容；支持本地图片资源地址。

-

示例：

-
  • background-image: url("/common/background.png")
-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

否

-

设置背景图片的大小。

-
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    -
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
-

background-repeat

-

string

-

repeat

-

否

-

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

-
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

否

-
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    -
-
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>
-

opacity

-

number

-

1

-

否

-

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

-

visibility

-

string

-

-

visible

-

否

-

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

-
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
-
说明：

visibility和display样式都设置时，仅display生效

-
-

flex

-

-

-

-

-

否

-

规定当前组件如何适应父组件中的可用空间。

-

flex可以指定1个，2个5+或3个5+值。

-

单值语法：

-
  • 一个无单位数：用来设置组件的flex-grow
  • 一个有效的宽度值5+：用来设置组件的flex-basis
-

双值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow。第二个值是以下之一：

-
  • 一个无单位数：用来设置组件的flex-shrink
  • 一个有效的宽度值：用来设置组件的flex-basis
-

三值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow；第二个值必须是无单位数，用来设置组件的flex-shrink；第三个值必须是一个有效的宽度值，用来设置组件的flex-basis。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-grow

-

number

-

0

-

否

-

设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-shrink

-

number

-

1

-

否

-

设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-basis

-

<length>

-

-

-

-

否

-

设置组件在主轴方向上的初始大小。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

position

-

string

-

relative

-

否

-

设置元素的定位类型，不支持动态变更。

-
  • fixed：相对与整个界面进行定位。
  • absolute：相对于父元素进行定位。
  • relative：相对于其正常位置进行定位。
-
说明：

absolute属性仅在父容器为<div>、<stack>时生效。

-
-

[left|top|right|bottom]

-

<length>

-

-

-

否

-

left|top|right|bottom需要配合position样式使用，来确定元素的偏移位置。

-
  • left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  • top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  • right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
  • bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
-
- -## 示例 - -1. Flex样式 - - ``` - -
-
-
-
-
-
-
- ``` - - ``` - /* xxx.css */ - .container { - flex-direction: column; - justify-content: center; - align-items: center; - width: 454px; - height: 454px; - } - .flex-box { - justify-content: space-around; - align-items: center; - width: 400px; - height: 140px; - background-color: #ffffff; - } - .flex-item { - width: 120px; - height: 120px; - border-radius: 16px; - } - .color-primary { - background-color: #007dff; - } - .color-warning { - background-color: #ff7500; - } - .color-success { - background-color: #41ba41; - } - ``` - - ![](figures/zh-cn_image_0000001061550803.png) - -2. Flex Wrap样式 - - ``` - -
-
-
-
-
-
-
- ``` - - ``` - /* xxx.css */ - .container { - flex-direction: column; - justify-content: center; - align-items: center; - width: 454px; - height: 454px; - } - .flex-box { - justify-content: space-around; - align-items: center; - flex-wrap: wrap; - width: 300px; - height: 250px; - background-color: #ffffff; - } - .flex-item { - width: 120px; - height: 120px; - border-radius: 16px; - } - .color-primary { - background-color: #007dff; - } - .color-warning { - background-color: #ff7500; - } - .color-success { - background-color: #41ba41; - } - ``` - - ![](figures/zh-cn_image_0000001061872693.png) - -3. Grid样式 - - ``` - -
-
-
-
-
-
- ``` - - ``` - /* xxx.css */ - .common { - width: 400px; - height: 400px; - background-color: #ffffff; - align-items: center; - justify-content: center; - margin: 24px; - } - .grid-parent { - display: grid; - grid-template-columns: 50% 50%; - grid-columns-gap: 24px; - grid-rows-gap: 24px; - grid-template-rows: 50% 50%; - } - .grid-child { - width: 100%; - height: 100%; - border-radius: 8px; - } - .grid-left-top { - grid-row-start: 0; - grid-column-start: 0; - grid-row-end: 0; - grid-column-end: 0; - background-color: #3f56ea; - } - .grid-left-bottom { - grid-row-start: 1; - grid-column-start: 0; - grid-row-end: 1; - grid-column-end: 0; - background-color: #00aaee; - } - .grid-right-top { - grid-row-start: 0; - grid-column-start: 1; - grid-row-end: 0; - grid-column-end: 1; - background-color: #00bfc9; - } - .grid-right-bottom { - grid-row-start: 1; - grid-column-start: 1; - grid-row-end: 1; - grid-column-end: 1; - background-color: #47cc47; - } - ``` - - ![](figures/zh-cn_image_0000001058988992.png) - - diff --git a/zh-cn/application-dev/js-reference/divider.md b/zh-cn/application-dev/js-reference/divider.md deleted file mode 100755 index d9ee10bf2b62ec25f87b888c8905949f830ad827..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/divider.md +++ /dev/null @@ -1,297 +0,0 @@ -# divider - -- [权限列表](#zh-cn_topic_0000001059340510_section11257113618419) -- [子组件](#zh-cn_topic_0000001059340510_section9288143101012) -- [属性](#zh-cn_topic_0000001059340510_section2907183951110) -- [事件](#zh-cn_topic_0000001059340510_section1398020714187) -- [样式](#zh-cn_topic_0000001059340510_section5775351116) -- [示例](#zh-cn_topic_0000001059340510_section230641814493) - -提供分隔器组件，分隔不同内容块/内容元素。可用于列表或界面布局。 - -## 权限列表 - -无 - -## 子组件 - -不支持。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

vertical

-

boolean

-

false

-

否

-

使用水平分割线还是垂直分割线，默认水平。

-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-
- -## 事件 - -不支持。 - -## 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

margin

-

<length>

-

0

-

否

-

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

-

margin-[left|top|right|bottom]

-

<length>

-

0

-

否

-

使用简写属性设置左、上、右、下外边距属性，类型length，单位px，默认值0。

-

color

-

<color>

-

#08000000

-

否

-

设置分割线颜色。

-

stroke-width

-

<length>

-

1

-

否

-

设置分割线宽度。

-

display

-

string

-

flex

-

否

-

确定分割线所产生的框的类型。值flex/none，默认值flex。

-

visibility

-

string

-

visible

-

否

-

是否显示分割线。不可见的框会占用布局。visible代表显示元素，hidden代表不显示元素。

-

line-cap

-

string

-

butt

-

否

-

设置分割线条的端点样式，默认为butt，可选值为：

-
  • butt：分割线两端为平行线；
  • round：分割线两端额外添加半圆；
  • square：分割线两端额外添加半方形；
-
说明：

round和square会额外增加一个线宽的分割线长度。

-
-

flex

-

number

-

-

-

否

-

规定了分割线如何适应父组件中的可用空间。它作为一个简写属性，用来设置组件的flex-grow。

-
说明：

仅父容器为<div>、<list-item>、<tabs>时生效。

-
-

flex-grow

-

number

-

0

-

否

-

设置分割线的伸展因子，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex项加起来的大小）的分配系数。0为不伸展。

-
说明：

仅父容器为<div>、<list-item>、<tabs>时生效。

-
-

-

flex-shrink

-

number

-

1

-

否

-

设置分割线的收缩因子，flex元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。

-
说明：

仅父容器为<div>、<list-item>、<tabs>时生效。

-
-

flex-basis

-

<length>

-

-

-

-

否

-

设置分割线在主轴方向上的初始大小。

-
说明：

仅父容器为<div>、<list-item>、<tabs>时生效。

-
-
- -## 示例 - -``` - -
-
- -
-
-``` - -``` -/* xxx.css */ -.container { - margin: 20px; - flex-direction:column; - width:100%; - height:100%; - align-items:center; -} -.content{ - width:80%; - height:40%; - border:1px solid #000000; - align-items: center; - justify-content: center; - flex-direction:column; -} -.divider { - margin: 10px; - color: #ff0000ff; - stroke-width: 3px; - line-cap: round; -} -``` - -![](figures/1.jpg) - diff --git a/zh-cn/application-dev/js-reference/figures/000000-0.png b/zh-cn/application-dev/js-reference/figures/000000-0.png deleted file mode 100644 index 58293d5e874f2aa36ecaf7282ca9e4736318092f..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/000000-0.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/aliceblue.png b/zh-cn/application-dev/js-reference/figures/aliceblue.png deleted file mode 100755 index 378000d344e90ab4db41869a4612daf6b60d66ab..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/aliceblue.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/antiquewhite.png b/zh-cn/application-dev/js-reference/figures/antiquewhite.png deleted file mode 100755 index 8e195633945b3387c46a7d295862351d4ff1fc64..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/antiquewhite.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/aqua.png b/zh-cn/application-dev/js-reference/figures/aqua.png deleted file mode 100755 index 3e6aaacfe1c26157294e6dedfeaa1488aeed12a3..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/aqua.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/aquamarine.png b/zh-cn/application-dev/js-reference/figures/aquamarine.png deleted file mode 100755 index c25a692065d473ccf9f5b6d36254787e2497fad6..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/aquamarine.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/azure.png b/zh-cn/application-dev/js-reference/figures/azure.png deleted file mode 100755 index 2e7cec00f9d186d76ff5cb12d47811084217cc1c..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/azure.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/beige.png b/zh-cn/application-dev/js-reference/figures/beige.png deleted file mode 100755 index 21f20a4220aabf9449c707291633e7b3723fe378..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/beige.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/bisque.png b/zh-cn/application-dev/js-reference/figures/bisque.png deleted file mode 100755 index 7983d590a2c617c6cad68c90af6b12aa17518810..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/bisque.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/blanchedalmond.png b/zh-cn/application-dev/js-reference/figures/blanchedalmond.png deleted file mode 100755 index 04bcf099edface801be6074a33ff33a980c9b606..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/blanchedalmond.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/blue.png b/zh-cn/application-dev/js-reference/figures/blue.png deleted file mode 100755 index e370a44cf043fc34bd8891f57faad2cd2ca05707..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/blue.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/blueviolet.png b/zh-cn/application-dev/js-reference/figures/blueviolet.png deleted file mode 100755 index ca1edf2219980ab9c8533b9fda3219521c50533d..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/blueviolet.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/brown.png b/zh-cn/application-dev/js-reference/figures/brown.png deleted file mode 100755 index 0d22570503febc7a7dcba0d1e870f49f32fe489a..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/brown.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/burlywood.png b/zh-cn/application-dev/js-reference/figures/burlywood.png deleted file mode 100755 index 0d53a47b7eace81d5c7da88c59fee61e30c89681..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/burlywood.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/cadetblue.png b/zh-cn/application-dev/js-reference/figures/cadetblue.png deleted file mode 100755 index a59bc9cdb0f75ad79e4714d3593216021369c862..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/cadetblue.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/chartreuse.png b/zh-cn/application-dev/js-reference/figures/chartreuse.png deleted file mode 100755 index 3026d3c195598159232b4b1f08e9f198f4b4fa2c..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/chartreuse.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/chocolate.png b/zh-cn/application-dev/js-reference/figures/chocolate.png deleted file mode 100755 index 02d5f4e31b020ea9f64e36a7b7cd50299cf3d7f2..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/chocolate.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/coral.png b/zh-cn/application-dev/js-reference/figures/coral.png deleted file mode 100755 index 8442c9b2258c79ee6b6a3d5963df5b792bbb1a16..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/coral.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/cornflowerblue.png b/zh-cn/application-dev/js-reference/figures/cornflowerblue.png deleted file mode 100755 index 3621ef6876dbd1103487aed8ff190e6a0204ffde..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/cornflowerblue.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/cornsilk.png b/zh-cn/application-dev/js-reference/figures/cornsilk.png deleted file mode 100755 index bf38fe45eaf254939b88b9d2a66635408060acf7..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/cornsilk.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/crimson.png b/zh-cn/application-dev/js-reference/figures/crimson.png deleted file mode 100755 index bca655617699ef8dc1265bf692a3170c7effe15b..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/crimson.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/cyan.png b/zh-cn/application-dev/js-reference/figures/cyan.png deleted file mode 100755 index 3e6aaacfe1c26157294e6dedfeaa1488aeed12a3..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/cyan.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/darkblue.png b/zh-cn/application-dev/js-reference/figures/darkblue.png deleted file mode 100755 index b234a769d1a9f1f30c4d2127160cf067e9f71ad6..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/darkblue.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/darkcyan.png b/zh-cn/application-dev/js-reference/figures/darkcyan.png deleted file mode 100755 index b780eb08852e8916ec6ff1a401ea6946c8d727cf..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/darkcyan.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/darkgoldenrod.png b/zh-cn/application-dev/js-reference/figures/darkgoldenrod.png deleted file mode 100755 index 26f2f228b47b8acb8adcddc3abf9156d6c29364e..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/darkgoldenrod.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/darkgray.png b/zh-cn/application-dev/js-reference/figures/darkgray.png deleted file mode 100755 index f1abe2afcb7902557ac3c4f58abfdf333af03121..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/darkgray.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/darkgreen.png b/zh-cn/application-dev/js-reference/figures/darkgreen.png deleted file mode 100755 index 4c4c304b67c398f32c5fff516cdde377ca39c73d..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/darkgreen.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/darkgrey.png b/zh-cn/application-dev/js-reference/figures/darkgrey.png deleted file mode 100755 index f1abe2afcb7902557ac3c4f58abfdf333af03121..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/darkgrey.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/darkkhaki.png b/zh-cn/application-dev/js-reference/figures/darkkhaki.png deleted file mode 100755 index 12085848c0f6472d53f7e6504c1924ea6f5a44c1..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/darkkhaki.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/darkmagenta.png b/zh-cn/application-dev/js-reference/figures/darkmagenta.png deleted file mode 100755 index 9ed54c6c5c5186fb43f24dab24f7689ae0d14a12..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/darkmagenta.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/darkolivegreen.png b/zh-cn/application-dev/js-reference/figures/darkolivegreen.png deleted file mode 100755 index 53081e06f458cfc1772de30f669180333b8d783d..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/darkolivegreen.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/darkorange.png b/zh-cn/application-dev/js-reference/figures/darkorange.png deleted file mode 100755 index 6064f64867e3aca621244e1e6fdb16d3ab2ed748..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/darkorange.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/darkorchid.png b/zh-cn/application-dev/js-reference/figures/darkorchid.png deleted file mode 100755 index 6315d4654d04dd6b9b295fa1f8b37e8c550b17cf..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/darkorchid.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/darkred.png b/zh-cn/application-dev/js-reference/figures/darkred.png deleted file mode 100755 index c33d763d18f5108bf0eedba19c662d05af397ee9..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/darkred.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/darksalmon.png b/zh-cn/application-dev/js-reference/figures/darksalmon.png deleted file mode 100755 index 57594c6855d4cdf1b37cc3e5354374c9dae0823b..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/darksalmon.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/darkseagreen.png b/zh-cn/application-dev/js-reference/figures/darkseagreen.png deleted file mode 100755 index 454b1796715794d51e2a1a4649bfafa1bfde80f0..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/darkseagreen.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/darkslateblue.png b/zh-cn/application-dev/js-reference/figures/darkslateblue.png deleted file mode 100755 index 7dfc7ee8793298d19c939369ba980abd547982ff..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/darkslateblue.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/darkslategray.png b/zh-cn/application-dev/js-reference/figures/darkslategray.png deleted file mode 100755 index 5e23c304c4911dc0ef487dfeb8d7820aea5fb44b..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/darkslategray.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/darkslategrey.png b/zh-cn/application-dev/js-reference/figures/darkslategrey.png deleted file mode 100755 index 5e23c304c4911dc0ef487dfeb8d7820aea5fb44b..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/darkslategrey.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/darkturquoise.png b/zh-cn/application-dev/js-reference/figures/darkturquoise.png deleted file mode 100755 index 4e41450db5d70f6d10d6d7bf59daba33085c177e..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/darkturquoise.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/darkviolet.png b/zh-cn/application-dev/js-reference/figures/darkviolet.png deleted file mode 100755 index 6f085565bd8c64d44bf58ce0969557515ec7ab97..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/darkviolet.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/deeppink.png b/zh-cn/application-dev/js-reference/figures/deeppink.png deleted file mode 100755 index 6348bb2b6ee281976f7d58159e4c33db29f542ad..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/deeppink.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/deepskyblue.png b/zh-cn/application-dev/js-reference/figures/deepskyblue.png deleted file mode 100755 index 0ac129028e67b43fcae8e3d5c1a539cc45ba6d21..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/deepskyblue.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/dimgray.png b/zh-cn/application-dev/js-reference/figures/dimgray.png deleted file mode 100755 index 1072a50f468dda3c90c889c31424b7c290eb1a13..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/dimgray.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/dimgrey.png b/zh-cn/application-dev/js-reference/figures/dimgrey.png deleted file mode 100755 index 1072a50f468dda3c90c889c31424b7c290eb1a13..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/dimgrey.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/dodgerblue.png b/zh-cn/application-dev/js-reference/figures/dodgerblue.png deleted file mode 100755 index fe422eecde9ec9f1fcac762bd81a23b3fa3abde7..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/dodgerblue.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/firebrick.png b/zh-cn/application-dev/js-reference/figures/firebrick.png deleted file mode 100755 index af32ecea68c1cef693bcfa379af5ac28f66c1e14..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/firebrick.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/floralwhite.png b/zh-cn/application-dev/js-reference/figures/floralwhite.png deleted file mode 100755 index 5ee9f7e893611dce988b8aa7ccfe3fab4b9d912f..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/floralwhite.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/forestgreen.png b/zh-cn/application-dev/js-reference/figures/forestgreen.png deleted file mode 100755 index 7cfd4846ca697424582edbfed23ed93ef9e98138..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/forestgreen.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/fuchsia.png b/zh-cn/application-dev/js-reference/figures/fuchsia.png deleted file mode 100755 index 6823cbc9203b07abae455b4ee5c7692878c4be72..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/fuchsia.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/gainsboro.png b/zh-cn/application-dev/js-reference/figures/gainsboro.png deleted file mode 100755 index d1d37504e15eb6fccd6b1c8e985d37fcc8ba9875..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/gainsboro.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/ghostwhite.png b/zh-cn/application-dev/js-reference/figures/ghostwhite.png deleted file mode 100755 index 45467f3e6fc0866b6da0521911bdb5e7d740df29..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/ghostwhite.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/gold.png b/zh-cn/application-dev/js-reference/figures/gold.png deleted file mode 100755 index 91a276a7dffb4d98c507e9af6afa1912cca1fed2..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/gold.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/goldenrod.png b/zh-cn/application-dev/js-reference/figures/goldenrod.png deleted file mode 100755 index 04ab7decab16cb7341665c2a67e8d5655a7eed6a..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/goldenrod.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/gray.png b/zh-cn/application-dev/js-reference/figures/gray.png deleted file mode 100755 index dfcb0c5e259b3f8d7375c21712249c1e847edd67..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/gray.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/green.png b/zh-cn/application-dev/js-reference/figures/green.png deleted file mode 100755 index bc28f5056c679e189543c8ad6fba67fb56db7655..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/green.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/greenyellow.png b/zh-cn/application-dev/js-reference/figures/greenyellow.png deleted file mode 100755 index c89f746719790333bce2bde8c5b8d86102fdfc33..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/greenyellow.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/grey.png b/zh-cn/application-dev/js-reference/figures/grey.png deleted file mode 100755 index dfcb0c5e259b3f8d7375c21712249c1e847edd67..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/grey.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/honeydew.png b/zh-cn/application-dev/js-reference/figures/honeydew.png deleted file mode 100755 index 51fb00e10bb5c167506ddfae1689b58e368df340..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/honeydew.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/hotpink.png b/zh-cn/application-dev/js-reference/figures/hotpink.png deleted file mode 100755 index cbc1d312680f479e8c443476ea39eaf1e8a16e55..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/hotpink.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/indianred.png b/zh-cn/application-dev/js-reference/figures/indianred.png deleted file mode 100755 index 069f570291be858a1768b75719a4a6adbd1bdef8..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/indianred.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/indigo.png b/zh-cn/application-dev/js-reference/figures/indigo.png deleted file mode 100755 index db83d39f98583ee653ee39b0237eb55961e539c7..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/indigo.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/ivory.png b/zh-cn/application-dev/js-reference/figures/ivory.png deleted file mode 100755 index ff0aa71de78cb461a6602398ee915c677efdf3d4..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/ivory.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/khaki.png b/zh-cn/application-dev/js-reference/figures/khaki.png deleted file mode 100755 index 3fca22c329e9dc9ef73eee20757eac4ce7386842..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/khaki.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/label.png b/zh-cn/application-dev/js-reference/figures/label.png deleted file mode 100755 index c87a5329f654a6a3cb3cb6b4c10bdfcd7fefc404..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/label.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/lavender.png b/zh-cn/application-dev/js-reference/figures/lavender.png deleted file mode 100755 index 44e4d991524bd0ef88a0dd10f204e022dd9d0621..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/lavender.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/lavenderblush.png b/zh-cn/application-dev/js-reference/figures/lavenderblush.png deleted file mode 100755 index 5b22707e37ec772dc08a961e557a937862210167..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/lavenderblush.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/lawngreen.png b/zh-cn/application-dev/js-reference/figures/lawngreen.png deleted file mode 100755 index 41be1a646e14511b5d177d11a7bce10deaee5bc9..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/lawngreen.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/lemonchiffon.png b/zh-cn/application-dev/js-reference/figures/lemonchiffon.png deleted file mode 100755 index d77ed21418dc3035feb9f9c8e15815e577d71a90..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/lemonchiffon.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/lightblue.png b/zh-cn/application-dev/js-reference/figures/lightblue.png deleted file mode 100755 index 7cc96f8f6364b93923f0a88b895fe6b151080932..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/lightblue.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/lightcoral.png b/zh-cn/application-dev/js-reference/figures/lightcoral.png deleted file mode 100755 index 515185ab1b3cf9aaba1204760dae19ab3c112b42..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/lightcoral.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/lightcyan.png b/zh-cn/application-dev/js-reference/figures/lightcyan.png deleted file mode 100755 index 6f929d8ab35b708978d8053047cb56bec4fa83bc..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/lightcyan.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/lightgoldenrodyellow.png b/zh-cn/application-dev/js-reference/figures/lightgoldenrodyellow.png deleted file mode 100755 index 1b0ed50716d897398c1e9a741e08ff5f1b9fd9de..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/lightgoldenrodyellow.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/lightgray.png b/zh-cn/application-dev/js-reference/figures/lightgray.png deleted file mode 100755 index 0a5eb251a8d731dc6a9d8b1f31f904c42fd372c3..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/lightgray.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/lightgreen.png b/zh-cn/application-dev/js-reference/figures/lightgreen.png deleted file mode 100755 index f89943fc98661a6d2b78b5659c41483308a0c54b..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/lightgreen.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/lightpink.png b/zh-cn/application-dev/js-reference/figures/lightpink.png deleted file mode 100755 index 6eb2d41877c85cccfb918b042bc13c81c58ec191..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/lightpink.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/lightsalmon.png b/zh-cn/application-dev/js-reference/figures/lightsalmon.png deleted file mode 100755 index d87462d1cdc9410e91ee050a53d58e71d1c5f312..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/lightsalmon.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/lightseagreen.png b/zh-cn/application-dev/js-reference/figures/lightseagreen.png deleted file mode 100755 index e863d7a1c3b9c1ca08bd182dce43c55a4866d59b..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/lightseagreen.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/lightskyblue.png b/zh-cn/application-dev/js-reference/figures/lightskyblue.png deleted file mode 100755 index daa035cea33b810571c18de67e4ac887eeb11850..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/lightskyblue.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/lightslategray.png b/zh-cn/application-dev/js-reference/figures/lightslategray.png deleted file mode 100755 index 2dadb92ce56793e2dd693bfa7d99b0c1168130dc..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/lightslategray.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/lightslategrey.png b/zh-cn/application-dev/js-reference/figures/lightslategrey.png deleted file mode 100755 index 2dadb92ce56793e2dd693bfa7d99b0c1168130dc..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/lightslategrey.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/lightsteelblue.png b/zh-cn/application-dev/js-reference/figures/lightsteelblue.png deleted file mode 100755 index ac0521001d2513fd69e48ce61e1d1128b9d3a6dd..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/lightsteelblue.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/lightyellow.png b/zh-cn/application-dev/js-reference/figures/lightyellow.png deleted file mode 100755 index d1ca7dd07fe7812ec1f87bf748595174569a5672..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/lightyellow.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/lime.png b/zh-cn/application-dev/js-reference/figures/lime.png deleted file mode 100755 index 481c833482d38c5f564127c8f412fe3c0275fd24..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/lime.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/limegreen.png b/zh-cn/application-dev/js-reference/figures/limegreen.png deleted file mode 100755 index 63a8c6adc29d340634ed06a1006a0fb56c991a9d..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/limegreen.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/linen.png b/zh-cn/application-dev/js-reference/figures/linen.png deleted file mode 100755 index 486baf6be50982404fd1c68a5bc51db45c62046a..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/linen.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/magenta.png b/zh-cn/application-dev/js-reference/figures/magenta.png deleted file mode 100755 index 6823cbc9203b07abae455b4ee5c7692878c4be72..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/magenta.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/maroon.png b/zh-cn/application-dev/js-reference/figures/maroon.png deleted file mode 100755 index 1324b43b3f5b8dd0548cf2069c4c532c5284c445..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/maroon.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/mediumaquamarine.png b/zh-cn/application-dev/js-reference/figures/mediumaquamarine.png deleted file mode 100755 index 800bf296338fd01962f16a8863c37bfe515ce3be..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/mediumaquamarine.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/mediumblue.png b/zh-cn/application-dev/js-reference/figures/mediumblue.png deleted file mode 100755 index c0df3f4f7d99f0b8c39995133c71d944bc07ea4b..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/mediumblue.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/mediumorchid.png b/zh-cn/application-dev/js-reference/figures/mediumorchid.png deleted file mode 100755 index 664d13c38389361e61a45870899e2a6f0bfc835f..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/mediumorchid.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/mediumpurple.png b/zh-cn/application-dev/js-reference/figures/mediumpurple.png deleted file mode 100755 index 848454297b67eb73ab641424badc438433e24479..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/mediumpurple.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/mediumseagreen.png b/zh-cn/application-dev/js-reference/figures/mediumseagreen.png deleted file mode 100755 index 984e7a561e661ecefca8b60d5ac239b67f96c98c..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/mediumseagreen.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/mediumslateblue.png b/zh-cn/application-dev/js-reference/figures/mediumslateblue.png deleted file mode 100755 index 39cf9d01563cf63bee003a47cd88258e860a0757..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/mediumslateblue.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/mediumspringgreen.png b/zh-cn/application-dev/js-reference/figures/mediumspringgreen.png deleted file mode 100755 index 56db1024a714f821528656c64e12520311bae8f5..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/mediumspringgreen.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/mediumturquoise.png b/zh-cn/application-dev/js-reference/figures/mediumturquoise.png deleted file mode 100755 index b3c353b6a872d3597b767f4c216b2d16bfc2139b..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/mediumturquoise.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/mediumvioletred.png b/zh-cn/application-dev/js-reference/figures/mediumvioletred.png deleted file mode 100755 index 00767e63c899eec52c2c732e834bca8d26d348ce..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/mediumvioletred.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/menu13.gif b/zh-cn/application-dev/js-reference/figures/menu13.gif deleted file mode 100755 index 3add1f5cd2a24cea8ec677824f5a42d29d2009bc..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/menu13.gif and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/midnightblue.png b/zh-cn/application-dev/js-reference/figures/midnightblue.png deleted file mode 100755 index ac66614c0f277cd722b3d090cb10efb973152b0f..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/midnightblue.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/mintcream.png b/zh-cn/application-dev/js-reference/figures/mintcream.png deleted file mode 100755 index 64fdda07447707816e8a6238939169f58a4ce58f..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/mintcream.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/mistyrose.png b/zh-cn/application-dev/js-reference/figures/mistyrose.png deleted file mode 100755 index 6f5fe69b5a5a62b2d2b719b2be0a17a501363918..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/mistyrose.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/moccasin.png b/zh-cn/application-dev/js-reference/figures/moccasin.png deleted file mode 100755 index 115cb4c96382681743381aeba099549dc24c2ae5..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/moccasin.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/navajowhite.png b/zh-cn/application-dev/js-reference/figures/navajowhite.png deleted file mode 100755 index a68e61ab120651294310c5e3632ce22d71917a52..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/navajowhite.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/navy.png b/zh-cn/application-dev/js-reference/figures/navy.png deleted file mode 100755 index 4e41c2cd90ba17798448d70b493ccceb3ac960f0..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/navy.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/oldlace.png b/zh-cn/application-dev/js-reference/figures/oldlace.png deleted file mode 100755 index ecf361e4c749446160da1e8a07169b21d99f362a..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/oldlace.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/olive.png b/zh-cn/application-dev/js-reference/figures/olive.png deleted file mode 100755 index 0d386fef5c4fa9faf1b29c7667c7392db250f2eb..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/olive.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/olivedrab.png b/zh-cn/application-dev/js-reference/figures/olivedrab.png deleted file mode 100755 index 639f16f8aaf261176b3bc760c2eb616ad2f4aa28..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/olivedrab.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/orange.png b/zh-cn/application-dev/js-reference/figures/orange.png deleted file mode 100755 index 9c43caf5fdfd466eafc37b793f509a6bde2b885d..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/orange.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/orangered.png b/zh-cn/application-dev/js-reference/figures/orangered.png deleted file mode 100755 index e72165fdf1b24d80f0abde742ad3d848497c6ea7..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/orangered.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/orchid.png b/zh-cn/application-dev/js-reference/figures/orchid.png deleted file mode 100755 index 9114031e04fc28be59e8c9567c0fcfe81a9cc5cb..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/orchid.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/palegoldenrod.png b/zh-cn/application-dev/js-reference/figures/palegoldenrod.png deleted file mode 100755 index 131584c72c082f40e2b466e2706c86a05df375e0..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/palegoldenrod.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/palegreen.png b/zh-cn/application-dev/js-reference/figures/palegreen.png deleted file mode 100755 index 891d52276622fd51893634ce26e08bd56f62b782..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/palegreen.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/paleturquoise.png b/zh-cn/application-dev/js-reference/figures/paleturquoise.png deleted file mode 100755 index a618da21cf6c6d32066286e594921c0fc75b5dba..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/paleturquoise.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/palevioletred.png b/zh-cn/application-dev/js-reference/figures/palevioletred.png deleted file mode 100755 index c88212b6818d6d18c77ee497cfcafaf661a70d52..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/palevioletred.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/papayawhip.png b/zh-cn/application-dev/js-reference/figures/papayawhip.png deleted file mode 100755 index 4b1948de8581602c6c5879c03d68c14f06eccd00..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/papayawhip.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/peachpuff.png b/zh-cn/application-dev/js-reference/figures/peachpuff.png deleted file mode 100755 index 1821f9c40ad9d24dc10dc662ecbe7936c9e10633..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/peachpuff.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/peru.png b/zh-cn/application-dev/js-reference/figures/peru.png deleted file mode 100755 index 3ca3e045717379bb09fa8d13ea0d42019bf546f2..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/peru.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/pink.png b/zh-cn/application-dev/js-reference/figures/pink.png deleted file mode 100755 index 5c5e360f249a2002ba68ad9b94bd7f66f5d6aab1..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/pink.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/plum.png b/zh-cn/application-dev/js-reference/figures/plum.png deleted file mode 100755 index 1e0bad2b2bfed2559e53a8bc21162e6163ec8434..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/plum.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/powderblue.png b/zh-cn/application-dev/js-reference/figures/powderblue.png deleted file mode 100755 index 8b3eec4e46f6a29dc47694940ceaef1cfa1314af..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/powderblue.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/purple.png b/zh-cn/application-dev/js-reference/figures/purple.png deleted file mode 100755 index 8bc3583f82d21c8bec0c70b2da36ed05723fd9a7..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/purple.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/rebeccapurple.png b/zh-cn/application-dev/js-reference/figures/rebeccapurple.png deleted file mode 100755 index 6a64534a0a867d44cf81c8a34c9981b5fbaf5faf..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/rebeccapurple.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/red.png b/zh-cn/application-dev/js-reference/figures/red.png deleted file mode 100755 index 309d1c46f8bc396df5eaed381a5ffa2f0389d602..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/red.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/rosybrown.png b/zh-cn/application-dev/js-reference/figures/rosybrown.png deleted file mode 100755 index adca00e684afb79ff4f21313d0586025576a8be1..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/rosybrown.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/royalblue.png b/zh-cn/application-dev/js-reference/figures/royalblue.png deleted file mode 100755 index 69cb300d4bc8decee06c7fb64b03a24287865a8f..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/royalblue.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/saddlebrown.png b/zh-cn/application-dev/js-reference/figures/saddlebrown.png deleted file mode 100755 index 5d0ae86ad14ff863511a10ecc1a85b273e826dfc..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/saddlebrown.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/salmon.png b/zh-cn/application-dev/js-reference/figures/salmon.png deleted file mode 100755 index b80a6c31cdb287c35965c7841aa97711d79b371c..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/salmon.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/sandybrown.png b/zh-cn/application-dev/js-reference/figures/sandybrown.png deleted file mode 100755 index c952585d8032733700b57ce1a919d71ce9a4b58b..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/sandybrown.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/seagreen.png b/zh-cn/application-dev/js-reference/figures/seagreen.png deleted file mode 100755 index 858c4187d3a2874f651adc09dcae9a32f8407d86..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/seagreen.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/seashell.png b/zh-cn/application-dev/js-reference/figures/seashell.png deleted file mode 100755 index c0b21ed6b44c2f756458137f931873f540c16e5f..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/seashell.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/sienna.png b/zh-cn/application-dev/js-reference/figures/sienna.png deleted file mode 100755 index bdb02fdda28a155e2f622eeea2ff820144780e50..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/sienna.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/silver.png b/zh-cn/application-dev/js-reference/figures/silver.png deleted file mode 100755 index 0491d350277cd67d7774e3761164b9dd7038a117..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/silver.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/skyblue.png b/zh-cn/application-dev/js-reference/figures/skyblue.png deleted file mode 100755 index 1c4f9ae52153198f8690a1066fe66ba8c7bd1ee1..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/skyblue.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/slateblue.png b/zh-cn/application-dev/js-reference/figures/slateblue.png deleted file mode 100755 index 87915df37741dacfe9448bfebccf5a88d3ca2a76..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/slateblue.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/slategray-1.png b/zh-cn/application-dev/js-reference/figures/slategray-1.png deleted file mode 100644 index 6e4476c4791e37d4681f8e12313ae1cad0887c1b..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/slategray-1.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/slategray.png b/zh-cn/application-dev/js-reference/figures/slategray.png deleted file mode 100755 index 6e4476c4791e37d4681f8e12313ae1cad0887c1b..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/slategray.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/snow.png b/zh-cn/application-dev/js-reference/figures/snow.png deleted file mode 100755 index 283cf90b3828b36af6fb3a746e806f6715053310..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/snow.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/springgreen.png b/zh-cn/application-dev/js-reference/figures/springgreen.png deleted file mode 100755 index 93825b7fe53a0794751ee4aa3ca46300c404835e..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/springgreen.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/steelblue.png b/zh-cn/application-dev/js-reference/figures/steelblue.png deleted file mode 100755 index a9aba5f67b94427168fade014542532431e28a2e..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/steelblue.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/subsystem_architecture_zh.png b/zh-cn/application-dev/js-reference/figures/subsystem_architecture_zh.png deleted file mode 100644 index 49a5f627bb52581262718c18d90290db247c012b..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/subsystem_architecture_zh.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/swiper.gif b/zh-cn/application-dev/js-reference/figures/swiper.gif deleted file mode 100755 index cc55b1994ed10ce80ed357211caf89fd1cb34de7..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/swiper.gif and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/tan.png b/zh-cn/application-dev/js-reference/figures/tan.png deleted file mode 100755 index b162dbf0a6c890a03ea1aa0b28bdb454651b697c..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/tan.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/teal.png b/zh-cn/application-dev/js-reference/figures/teal.png deleted file mode 100755 index 93299fc38d761e5251673210c364f6825e319153..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/teal.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/thistle.png b/zh-cn/application-dev/js-reference/figures/thistle.png deleted file mode 100755 index d62fc7767f7b2e0e8d0d7fed57e30bdf6a6a332f..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/thistle.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/tomato.png b/zh-cn/application-dev/js-reference/figures/tomato.png deleted file mode 100755 index 6d795f1618b1546c94266548069eccf9e9af2e01..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/tomato.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/turquoise.png b/zh-cn/application-dev/js-reference/figures/turquoise.png deleted file mode 100755 index a33c4fce8448e2127b21e277437195ce0002766b..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/turquoise.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/violet.png b/zh-cn/application-dev/js-reference/figures/violet.png deleted file mode 100755 index e9a0799a203fdd7bd41fa5175585dc170a20156e..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/violet.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/wheat.png b/zh-cn/application-dev/js-reference/figures/wheat.png deleted file mode 100755 index 8a5c7039b580128e75299672dc5438151dcf3572..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/wheat.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/white.png b/zh-cn/application-dev/js-reference/figures/white.png deleted file mode 100755 index 56d32d4cd371c5374b133cb81c9c077aaf7b110d..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/white.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/whitesmoke.png b/zh-cn/application-dev/js-reference/figures/whitesmoke.png deleted file mode 100755 index 6dc88e656c293c2e65939e4a793684488dfc81be..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/whitesmoke.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/yellow.png b/zh-cn/application-dev/js-reference/figures/yellow.png deleted file mode 100755 index b54dbc2391d1a8f16312dd02dc3d65a35ea2626f..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/yellow.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/yellowgreen.png b/zh-cn/application-dev/js-reference/figures/yellowgreen.png deleted file mode 100755 index f89e20a55ba1e81f2cbda2bd0241edefadbe7149..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/yellowgreen.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001082052793.png b/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001082052793.png deleted file mode 100644 index c582e42ac38081410fd21a43056f03a5880e800d..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001082052793.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001083086542.png b/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001083086542.png deleted file mode 100644 index 85334a4946d270e5283251ca03dd59555db6f756..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001083086542.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001147417424.png b/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001147417424.png new file mode 100644 index 0000000000000000000000000000000000000000..66d73108f4d5721cfc46ad9062d4b77387e67796 Binary files /dev/null and b/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001147417424.png differ diff --git "a/zh-cn/application-dev/js-reference/figures/\345\212\250\347\224\273\346\240\267\345\274\217demo2.gif" "b/zh-cn/application-dev/js-reference/figures/\345\212\250\347\224\273\346\240\267\345\274\217demo2.gif" deleted file mode 100755 index c3d337edf8e35352dcc9d9b9919019e1f7ec4d96..0000000000000000000000000000000000000000 Binary files "a/zh-cn/application-dev/js-reference/figures/\345\212\250\347\224\273\346\240\267\345\274\217demo2.gif" and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/grid-col.md b/zh-cn/application-dev/js-reference/grid-col.md deleted file mode 100644 index da9b4ad508d797edd7fc2bf38dea620ef056112c..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/grid-col.md +++ /dev/null @@ -1,692 +0,0 @@ -# grid-col - -- [权限列表](#zh-cn_topic_0000001063130862_section11257113618419) -- [子组件](#zh-cn_topic_0000001063130862_section9288143101012) -- [属性](#zh-cn_topic_0000001063130862_section1976213199113) -- [样式](#zh-cn_topic_0000001063130862_section1948816404128) -- [事件](#zh-cn_topic_0000001063130862_section94351031102113) -- [示例](#zh-cn_topic_0000001063130862_section2021865273710) - -grid-col是栅格布局容器grid-row的子容器组件。 - -## 权限列表 - -无 - -## 子组件 - -支持。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

xs

-

number|object

-

-

-

否

-

在分辨率为xs模式下，设置该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数，如{"span": 1, "offset": 0}

-

sm

-

number|object

-

-

-

否

-

在分辨率为sm模式下，该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数，如{"span": 1, "offset": 0}

-

md

-

number|object

-

-

-

否

-

在分辨率为md模式下，该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数，如{"span": 1, "offset": 0}

-

lg

-

number|object

-

-

-

否

-

在分辨率为lg模式下，该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数，如{"span": 1, "offset": 0}

-

span

-

number

-

1

-

否

-

在未设置明确断点时，默认占用列数

-

offset

-

number

-

0

-

否

-

未设置具体分辨率模式下偏移时，当前元素延容器布局方向，默认偏移的列数

-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

disabled

-

boolean

-

false

-

否

-

当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-
- -## 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

flex-direction

-

string

-

row

-

否

-

flex容器主轴方向。可选项有：

-
  • column：垂直方向从上到下
  • row：水平方向从左到右
-

flex-wrap

-

string

-

nowrap

-

否

-

flex容器是单行还是多行显示，该值暂不支持动态修改。可选项有：

-
  • nowrap：不换行，单行显示。
  • wrap：换行，多行显示。
-

justify-content

-

string

-

flex-start

-

否

-

flex容器当前行的主轴对齐格式。可选项有：

-
  • flex-start：项目位于容器的开头。
  • flex-end：项目位于容器的结尾。
  • center：项目位于容器的中心。
  • space-between：项目位于各行之间留有空白的容器内。
  • space-around：项目位于各行之前、之间、之后都留有空白的容器内。
-

align-items

-

string

-

stretch

-

否

-

flex容器当前行的交叉轴对齐格式，可选值为：

-
  • stretch：弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。
  • flex-start：元素向交叉轴起点对齐。
  • flex-end：元素向交叉轴终点对齐。
  • center：元素在交叉轴居中。
-

align-content

-

string

-

flex-start

-

否

-

交叉轴中有额外的空间时，多行内容对齐格式，可选值为：

-
  • flex-start：所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。
  • flex-end：所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。
  • center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。
  • space-between：所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。
  • space-around：所有行在容器中平均分布，相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。
-

display

-

string

-

flex

-

否

-

确定该元素视图框的类型，该值暂不支持动态修改。可选值为：

-
  • flex：弹性布局
  • grid：网格布局
  • none：不渲染此元素
-

grid-template-[columns|rows]

-

string

-

1行1列

-

否

-

用于设置当前网格布局行和列的数量，不设置时默认1行1列，仅当display为grid时生效。

-

示例：如设置grid-template-columns为：

-

(1) 50px 100px 60px：分三列，第一列50px，第二列100px，第三列60px；

-

(2) 1fr 1fr 2fr：分三列，将父组件允许的宽分为4等份，第一列占1份，第二列占一份，第三列占2份；

-

(3) 30% 20% 50%：分三列，将父组件允许的宽为基准，第一列占30%，第二列占20%，第三列占50%；

-

(4) repeat(2,100px)：分两列，第一列100px，第二列100px；

-

(5) auto 1fr 1fr：分三列，第一列自适应内部子组件所需宽度，剩余空间分为两等份，第二列占一份，第三列占一份。

-

grid-[columns|rows]-gap

-

<length>

-

0

-

否

-

用于设置行与行的间距或者列与列的间距，也可以支持通过grid-gap设置相同的行列间距，仅当display为grid时生效。

-

grid-row-[start|end]

-

number

-

-

-

否

-

用于设置当前元素在网格布局中的起止行号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。

-

grid-column-[start|end]

-

number

-

-

-

否

-

用于设置当前元素在网格布局中的起止列号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。

-

height

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的高度。

-

缺省时使用元素自身内容需要的高度。

-

padding

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的内边距属性。

-
该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    -

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    -

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    -

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下内边距属性。

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端内边距属性。

-

border

-

-

-

0

-

否

-

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

-

border-style

-

string

-

solid

-

否

-

使用简写属性设置所有边框的样式，可选值为：

-
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
-
  • solid：显示为一条实线。
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

否

-

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

-

border-[left|top|right|bottom]

-

-

-

-

-

否

-

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

-

border-width

-

<length>

-

0

-

否

-

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

否

-

分别设置左、上、右、下四个边框的宽度。

-

border-color

-

<color>

-

black

-

否

-

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

否

-

分别设置左、上、右、下四个边框的颜色。

-

border-radius

-

<length>

-

-

-

否

-

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，border-[left|top|right|bottom]-style，如果要设置color、width和style，需要将四个方向一起设置（border-width、border-color、border-style）。

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

否

-

分别设置左上，右上，右下和左下四个角的圆角半径。

-

background

-

<linear-gradient>

-

-

-

否

-

仅支持设置渐变样式，与background-color、background-image不兼容。

-

background-color

-

<color>

-

-

-

否

-

设置背景颜色。

-

background-image

-

string

-

-

-

否

-

设置背景图片。与background-color、background不兼容；支持本地图片资源地址。

-

示例：

-
  • background-image: url("/common/background.png")
-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

否

-

设置背景图片的大小。

-
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    -
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
-

background-repeat

-

string

-

repeat

-

否

-

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

-
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

否

-
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    -
-
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>
-

opacity

-

number

-

1

-

否

-

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

-

visibility

-

string

-

-

visible

-

否

-

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

-
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
-
说明：

visibility和display样式都设置时，仅display生效

-
-
- -## 事件 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

touchstart

-

TouchEvent

-

手指刚触摸屏幕时触发该事件。

-

touchmove

-

TouchEvent

-

手指触摸屏幕后移动时触发该事件。

-

touchcancel

-

TouchEvent

-

手指触摸屏幕中动作被打断时触发该事件。

-

touchend

-

TouchEvent

-

手指触摸结束离开屏幕时触发该事件。

-

click

-

-

-

点击动作触发该事件。

-

longpress

-

-

-

长按动作触发该事件。

-

swipe5+

-

SwipeEvent

-

组件上快速滑动后触发。

-
- -## 示例 - -``` - -
- - - -
- 內容元素 -
- - -
- 內容元素 -
- - - -
-``` - -``` -/* index.css */ -.container { - flex-direction: column; - padding-top: 80px; -} -``` - -``` -// index.js -import prompt from '@system.prompt'; -export default { - getCol(e) { - this.$element('mygrid').getColumns(function (result) { - prompt.showToast({ - message: e.target.id + ' result = ' + result, - duration: 3000, - }); - }) - }, - getColWidth(e) { - this.$element('mygrid').getColumnWidth(function (result) { - prompt.showToast({ - message: e.target.id + ' result = ' + result, - duration: 3000, - }); - }) - } -} -``` - diff --git a/zh-cn/application-dev/js-reference/grid-container.md b/zh-cn/application-dev/js-reference/grid-container.md deleted file mode 100644 index c6696561efb20bf47bdef58d4168af6146570a24..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/grid-container.md +++ /dev/null @@ -1,680 +0,0 @@ -# grid-container - -- [权限列表](#zh-cn_topic_0000001062133103_section11257113618419) -- [子组件](#zh-cn_topic_0000001062133103_section9288143101012) -- [属性](#zh-cn_topic_0000001062133103_section5248929161316) -- [样式](#zh-cn_topic_0000001062133103_section16690243163414) -- [事件](#zh-cn_topic_0000001062133103_section291933813509) -- [方法](#zh-cn_topic_0000001062133103_section13156101584913) - -栅格布局容器根节点，使用grid-row与gird-col进行栅格布局。 - -## 权限列表 - -无 - -## 子组件 - -仅支持。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

columns

-

string | number

-

auto

-

否

-

设置当前布局总列数，使用string类型时仅支持auto，配置为auto时按照当前的sizetype决定总列数：

-
  • xs：2列
  • sm：4列
  • md：8列
  • lg：12列
-

sizetype

-

string

-

auto

-

否

-

设置当前栅格使用的响应尺寸类型，支持xs, sm, md, lg类型，使用auto时按照当前容器大小自动选择xs, sm, md, lg类型。

-

gutter

-

<length>

-

24px

-

否

-

设置Gutter宽度

-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

disabled

-

boolean

-

false

-

否

-

当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-
- -## 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

justify-content

-

string

-

flex-start

-

否

-

flex容器当前行的主轴对齐格式。可选项有：

-
  • flex-start：项目位于容器的开头。
  • flex-end：项目位于容器的结尾。
  • center：项目位于容器的中心。
  • space-between：项目位于各行之间留有空白的容器内。
  • space-around：项目位于各行之前、之间、之后都留有空白的容器内。
-

align-items

-

string

-

stretch

-

否

-

flex容器当前行的交叉轴对齐格式，可选值为：

-
  • stretch：弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。
  • flex-start：元素向交叉轴起点对齐。
  • flex-end：元素向交叉轴终点对齐。
  • center：元素在交叉轴居中。
-

align-content

-

string

-

flex-start

-

否

-

交叉轴中有额外的空间时，多行内容对齐格式，可选值为：

-
  • flex-start：所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。
  • flex-end：所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。
  • center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。
  • space-between：所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。
  • space-around：所有行在容器中平均分布，相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。
-

width

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的宽度。

-

缺省时使用元素自身内容需要的宽度。

-

height

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的高度。

-

缺省时使用元素自身内容需要的高度。

-

padding

-

<length>

-

0

-

否

-
该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    -

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    -

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    -

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

    -
-
-

margin

-

<length>

-

0

-

否

-

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

-

  • 只有一个值时，这个值会被指定给全部的四个边。

    -

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    -

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    -

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    -
-

margin-[left|top|right|bottom]

-

<length>

-

0

-

否

-

设置左、上、右、下外边距属性。

-

margin-[start|end]

-

<length>

-

0

-

否

-

设置起始和末端外边距属性。

-

border

-

-

-

0

-

否

-

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

-

border-style

-

string

-

solid

-

否

-

使用简写属性设置所有边框的样式，可选值为：

-
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
-
  • solid：显示为一条实线。
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

否

-

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

-

border-[left|top|right|bottom]

-

-

-

-

-

否

-

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

-

border-width

-

<length>

-

0

-

否

-

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

否

-

分别设置左、上、右、下四个边框的宽度。

-

border-color

-

<color>

-

black

-

否

-

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

否

-

分别设置左、上、右、下四个边框的颜色。

-

border-radius

-

<length>

-

-

-

否

-

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，如果要设置color和width，需要将四个方向一起设置（border-width、border-color）。

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

否

-

分别设置左上，右上，右下和左下四个角的圆角半径。

-

background

-

<linear-gradient>

-

-

-

否

-

仅支持设置渐变样式，与background-color、background-image不兼容。

-

background-color

-

<color>

-

-

-

否

-

设置背景颜色。

-

background-image

-

string

-

-

-

否

-

设置背景图片。与background-color、background不兼容；支持本地图片资源地址。

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

否

-

设置背景图片的大小。

-
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    -
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
-

background-repeat

-

string

-

repeat

-

否

-

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

-
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

否

-
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    -
-
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>
-

opacity

-

number

-

1

-

否

-

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

-

display

-

string

-

-

flex

-

否

-

确定一个元素所产生的框的类型，可选值为：

-
  • flex：弹性布局。
  • none：不渲染此元素。
-

visibility

-

string

-

-

visible

-

否

-

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

-
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
-
说明：

visibility和display样式都设置时，仅display生效

-
-

flex

-

number

-

-

-

否

-

规定当前组件如何适应父组件中的可用空间。它作为一个简写属性，用来设置组件的flex-grow。

-
说明：

仅父容器为<div>、<list-item>、<tabs>时生效。

-
-

flex-grow

-

number

-

0

-

否

-

设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。

-
说明：

仅父容器为<div>、<list-item>、<tabs>时生效。

-
-

flex-shrink

-

number

-

1

-

否

-

设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。

-
说明：

仅父容器为<div>、<list-item>、<tabs>时生效。

-
-

flex-basis

-

<length>

-

-

-

-

否

-

设置组件在主轴方向上的初始大小。

-
说明：

仅父容器为<div>、<list-item>、<tabs>时生效。

-
-

position

-

string

-

relative

-

否

-

设置元素的定位类型，不支持动态变更。

-
  • fixed：相对与整个界面进行定位。
  • absolute：相对于父元素进行定位。
  • relative：相对于其正常位置进行定位。
-
说明：

absolute属性仅在父容器为<div>、<stack>时生效。

-
-

[left|top|right|bottom]

-

<length>

-

-

-

否

-

left|top|right|bottom需要配合position样式使用，来确定元素的偏移位置。

-
  • left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  • top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  • right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
  • bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
-
- -## 事件 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

touchstart

-

TouchEvent

-

手指刚触摸屏幕时触发该事件。

-

touchmove

-

TouchEvent

-

手指触摸屏幕后移动时触发该事件。

-

touchcancel

-

TouchEvent

-

手指触摸屏幕中动作被打断时触发该事件。

-

touchend

-

TouchEvent

-

手指触摸结束离开屏幕时触发该事件。

-

click

-

-

-

点击动作触发该事件。

-

longpress

-

-

-

长按动作触发该事件。

-

swipe5+

-

SwipeEvent

-

组件上快速滑动后触发。

-
- -## 方法 - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

getColumns

-

-

-

返回栅格容器列数

-

getColumnWidth

-

-

-

返回栅格容器column宽度

-

getGutterWidth

-

-

-

返回栅格容器gutter宽度

-

getSizeType

-

-

-

返回当前容器响应尺寸类型（xs|sm|md|lg）

-
- diff --git a/zh-cn/application-dev/js-reference/grid-row.md b/zh-cn/application-dev/js-reference/grid-row.md deleted file mode 100644 index 7bda1a3d339ba1f8bd5aefb9b8f5b5cca8d65381..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/grid-row.md +++ /dev/null @@ -1,470 +0,0 @@ -# grid-row - -- [权限列表](#zh-cn_topic_0000001062811276_section11257113618419) -- [子组件](#zh-cn_topic_0000001062811276_section9288143101012) -- [属性](#zh-cn_topic_0000001062811276_section631751545214) -- [样式](#zh-cn_topic_0000001062811276_section9475356165220) -- [事件](#zh-cn_topic_0000001062811276_section1417950207) - -grid-row是栅格布局容器grid-container的子容器组件，使用flex横向布局，排列每个grid-col容器，justify-content与align-items默认为flex-start，支持折行显示。 - -## 权限列表 - -无 - -## 子组件 - -仅支持。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

disabled

-

boolean

-

false

-

否

-

当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-
- -## 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

flex-wrap

-

string

-

nowrap

-

否

-

flex容器是单行还是多行显示，该值暂不支持动态修改。可选项有：

-
  • nowrap：不换行，单行显示。
  • wrap：换行，多行显示。
-

justify-content

-

string

-

flex-start

-

否

-

flex容器当前行的主轴对齐格式。可选项有：

-
  • flex-start：项目位于容器的开头。
  • flex-end：项目位于容器的结尾。
  • center：项目位于容器的中心。
  • space-between：项目位于各行之间留有空白的容器内。
  • space-around：项目位于各行之前、之间、之后都留有空白的容器内。
-

align-items

-

string

-

flex-start

-

否

-

flex容器当前行的交叉轴对齐格式，可选值为：

-
  • stretch：弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。
  • flex-start：元素向交叉轴起点对齐。
  • flex-end：元素向交叉轴终点对齐。
  • center：元素在交叉轴居中。
-

align-content

-

string

-

flex-start

-

否

-

交叉轴中有额外的空间时，多行内容对齐格式，可选值为：

-
  • flex-start：所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。
  • flex-end：所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。
  • center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。
  • space-between：所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。
  • space-around：所有行在容器中平均分布，相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。
-

height

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的高度。

-

缺省时使用元素自身内容需要的高度。

-

border

-

-

-

0

-

否

-

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

-

border-style

-

string

-

solid

-

否

-

使用简写属性设置所有边框的样式，可选值为：

-
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
-
  • solid：显示为一条实线。
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

否

-

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

-

border-[left|top|right|bottom]

-

-

-

-

-

否

-

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

-

border-width

-

<length>

-

0

-

否

-

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

否

-

分别设置左、上、右、下四个边框的宽度。

-

border-color

-

<color>

-

black

-

否

-

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

否

-

分别设置左、上、右、下四个边框的颜色。

-

border-radius

-

<length>

-

-

-

否

-

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，如果要设置color和width，需要将四个方向一起设置（border-width、border-color）。

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

否

-

分别设置左上，右上，右下和左下四个角的圆角半径。

-

background

-

<linear-gradient>

-

-

-

否

-

仅支持设置渐变样式，与background-color、background-image不兼容。

-

background-color

-

<color>

-

-

-

否

-

设置背景颜色。

-

background-image

-

string

-

-

-

否

-

设置背景图片。与background-color、background不兼容；支持本地图片资源地址。

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

否

-

设置背景图片的大小。

-
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    -
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
-

background-repeat

-

string

-

repeat

-

否

-

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

-
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

否

-
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    -
-
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>
-

opacity

-

number

-

1

-

否

-

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

-

display

-

string

-

-

flex

-

否

-

确定一个元素所产生的框的类型，可选值为：

-
  • flex：弹性布局。
  • none：不渲染此元素。
-

visibility

-

string

-

-

visible

-

否

-

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

-
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
-
说明：

visibility和display样式都设置时，仅display生效

-
-
- -## 事件 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

touchstart

-

TouchEvent

-

手指刚触摸屏幕时触发该事件。

-

touchmove

-

TouchEvent

-

手指触摸屏幕后移动时触发该事件。

-

touchcancel

-

TouchEvent

-

手指触摸屏幕中动作被打断时触发该事件。

-

touchend

-

TouchEvent

-

手指触摸结束离开屏幕时触发该事件。

-

click

-

-

-

点击动作触发该事件。

-

longpress

-

-

-

长按动作触发该事件。

-

swipe5+

-

SwipeEvent

-

组件上快速滑动后触发。

-
- diff --git a/zh-cn/application-dev/js-reference/image-animator.md b/zh-cn/application-dev/js-reference/image-animator.md deleted file mode 100755 index c04a5145b0fbf2a097c9c73dc86e83b6534f6084..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/image-animator.md +++ /dev/null @@ -1,939 +0,0 @@ -# image-animator - -- [子组件](#zh-cn_topic_0000001058830740_section393521619565) -- [属性](#zh-cn_topic_0000001058830740_section1342212415618) -- [事件](#zh-cn_topic_0000001058830740_section17969351566) -- [样式](#zh-cn_topic_0000001058830740_section567195511491) -- [方法](#zh-cn_topic_0000001058830740_section1428810433566) -- [示例](#zh-cn_topic_0000001058830740_section118221913375) - -图片帧动画播放器。 - -## 子组件 - -不支持。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

images

-

Array<ImageFrame>

-

-

-

是

-

设置图片帧信息集合。每一帧的帧信息包含图片路径、图片大小和图片位置信息。目前支持以下图片格式：png、jpg。ImageFrame的详细说明请见表1。

-
说明：

使用时需要使用数据绑定的方式，如images = {{images}}，js中声明相应变量：images: [{src: "/common/heart-rate01.png"}, {src: "/common/heart-rate02.png"}]。

-
-

iteration

-

number | string

-

infinite

-

否

-

设置帧动画播放次数。number表示固定次数，infinite枚举表示无限次数播放。

-

reverse

-

boolean

-

false

-

否

-

设置播放顺序。false表示从第1张图片播放到最后1张图片； true表示从最后1张图片播放到第1张图片。

-

fixedsize

-

boolean

-

true

-

否

-

设置图片大小是否固定为组件大小。 true表示图片大小与组件大小一致，此时设置图片的width 、height 、top 和left属性是无效的。false表示每一张图片的 width 、height 、top和left属性都要单独设置。

-

duration

-

string

-

-

-

是

-

设置单次播放时长。单位支持[s(秒)|ms(毫秒)]，默认单位为ms。 duration为0时，不播放图片。 值改变只会在下一次循环开始时生效。

-

fillmode5+

-

string

-

forwards

-

否

-

指定帧动画执行结束后的状态。可选项有：

-
  • none：恢复初始状态。
  • forwards：保持帧动画结束时的状态（在最后一个关键帧中定义）。
-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

disabled

-

boolean

-

false

-

否

-

当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-
- -**表 1** ImageFrame说明 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

src

-

<uri>

-

-

-

是

-

图片路径，图片格式为svg，png和jpg。

-

width

-

<length>

-

0

-

否

-

图片宽度。

-

height

-

<length>

-

0

-

否

-

图片高度。

-

top

-

<length>

-

0

-

否

-

图片相对于组件左上角的纵向坐标。

-

left

-

<length>

-

0

-

否

-

图片相对于组件左上角的横向坐标。

-
- -## 事件 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

start

-

-

-

帧动画启动时触发。

-

pause

-

-

-

帧动画暂停时触发。

-

stop

-

-

-

帧动画结束时触发。

-

resume

-

-

-

帧动画恢复时触发。

-

touchstart

-

TouchEvent

-

手指刚触摸屏幕时触发该事件。

-

touchmove

-

TouchEvent

-

手指触摸屏幕后移动时触发该事件。

-

touchcancel

-

TouchEvent

-

手指触摸屏幕中动作被打断时触发该事件。

-

touchend

-

TouchEvent

-

手指触摸结束离开屏幕时触发该事件。

-

click

-

-

-

点击动作触发该事件。

-

longpress

-

-

-

长按动作触发该事件。

-

swipe5+

-

SwipeEvent

-

组件上快速滑动后触发。

-
- -## 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

width

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的宽度。

-

缺省时使用元素自身内容需要的宽度。

-

height

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的高度。

-

缺省时使用元素自身内容需要的高度。

-

padding

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的内边距属性。

-
该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    -

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    -

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    -

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下内边距属性。

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端内边距属性。

-

margin

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

-

  • 只有一个值时，这个值会被指定给全部的四个边。

    -

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    -

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    -

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下外边距属性。

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端外边距属性。

-

border

-

-

-

0

-

否

-

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

-

border-style

-

string

-

solid

-

否

-

使用简写属性设置所有边框的样式，可选值为：

-
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
-
  • solid：显示为一条实线。
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

否

-

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

-

border-[left|top|right|bottom]

-

-

-

-

-

否

-

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

-

border-width

-

<length>

-

0

-

否

-

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

否

-

分别设置左、上、右、下四个边框的宽度。

-

border-color

-

<color>

-

black

-

否

-

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

否

-

分别设置左、上、右、下四个边框的颜色。

-

border-radius

-

<length>

-

-

-

否

-

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，border-[left|top|right|bottom]-style，如果要设置color、width和style，需要将四个方向一起设置（border-width、border-color、border-style）。

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

否

-

分别设置左上，右上，右下和左下四个角的圆角半径。

-

background

-

<linear-gradient>

-

-

-

否

-

仅支持设置渐变样式，与background-color、background-image不兼容。

-

background-color

-

<color>

-

-

-

否

-

设置背景颜色。

-

background-image

-

string

-

-

-

否

-

设置背景图片。与background-color、background不兼容；支持本地图片资源地址。

-

示例：

-
  • background-image: url("/common/background.png")
-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

否

-

设置背景图片的大小。

-
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    -
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
-

background-repeat

-

string

-

repeat

-

否

-

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

-
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

否

-
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    -
-
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>
-

opacity

-

number

-

1

-

否

-

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

-

display

-

string

-

-

flex

-

否

-

确定一个元素所产生的框的类型，可选值为：

-
  • flex：弹性布局。
  • none：不渲染此元素。
-

visibility

-

string

-

-

visible

-

否

-

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

-
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
-
说明：

visibility和display样式都设置时，仅display生效

-
-

flex

-

-

-

-

-

否

-

规定当前组件如何适应父组件中的可用空间。

-

flex可以指定1个，2个5+或3个5+值。

-

单值语法：

-
  • 一个无单位数：用来设置组件的flex-grow
  • 一个有效的宽度值5+：用来设置组件的flex-basis
-

双值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow。第二个值是以下之一：

-
  • 一个无单位数：用来设置组件的flex-shrink
  • 一个有效的宽度值：用来设置组件的flex-basis
-

三值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow；第二个值必须是无单位数，用来设置组件的flex-shrink；第三个值必须是一个有效的宽度值，用来设置组件的flex-basis。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-grow

-

number

-

0

-

否

-

设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-shrink

-

number

-

1

-

否

-

设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-basis

-

<length>

-

-

-

-

否

-

设置组件在主轴方向上的初始大小。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

position

-

string

-

relative

-

否

-

设置元素的定位类型，不支持动态变更。

-
  • fixed：相对与整个界面进行定位。
  • absolute：相对于父元素进行定位。
  • relative：相对于其正常位置进行定位。
-
说明：

absolute属性仅在父容器为<div>、<stack>时生效。

-
-

[left|top|right|bottom]

-

<length>

-

-

-

否

-

left|top|right|bottom需要配合position样式使用，来确定元素的偏移位置。

-
  • left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  • top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  • right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
  • bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
-
- -## 方法 - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

start

-

-

-

开始播放图片帧动画。再次调用，重新从第1帧开始播放。

-

pause

-

-

-

暂停播放图片帧动画。

-

stop

-

-

-

停止播放图片帧动画。

-

resume

-

-

-

继续播放图片帧。

-

getState

-

-

-

获取播放状态。可能值有：

-
  • playing：播放中
  • paused：已暂停
  • stopped：已停止。
-
- -## 示例 - -``` - -
- -
- - - - -
-
-``` - -``` -/* xxx.css */ -.container { - flex-direction: column; - justify-content: center; - align-items: center; - left: 0px; - top: 0px; - width: 454px; - height: 454px; -} -.animator { - width: 70px; - height: 70px; -} -.btn-box { - width: 264px; - height: 120px; - flex-wrap: wrap; - justify-content: space-around; - align-items: center; -} -.btn { - border-radius: 8px; - width: 120px; - margin-top: 8px; -} -``` - -``` -//xxx.js -export default { - data: { - frames: [ - { - src: "/common/asserts/heart78.png", - }, - { - src: "/common/asserts/heart79.png", - }, - { - src: "/common/asserts/heart80.png", - }, - { - src: "/common/asserts/heart81.png", - }, - { - src: "/common/asserts/heart82.png", - }, - { - src: "/common/asserts/heart83.png", - }, - { - src: "/common/asserts/heart84.png", - }, - { - src: "/common/asserts/heart85.png", - }, - { - src: "/common/asserts/heart86.png", - }, - { - src: "/common/asserts/heart87.png", - }, - { - src: "/common/asserts/heart88.png", - }, - { - src: "/common/asserts/heart89.png", - }, - { - src: "/common/asserts/heart90.png", - }, - { - src: "/common/asserts/heart91.png", - }, - { - src: "/common/asserts/heart92.png", - }, - { - src: "/common/asserts/heart93.png", - }, - { - src: "/common/asserts/heart94.png", - }, - { - src: "/common/asserts/heart95.png", - }, - { - src: "/common/asserts/heart96.png", - }, - ], - }, - handleStart() { - this.$refs.animator.start(); - }, - handlePause() { - this.$refs.animator.pause(); - }, - handleResume() { - this.$refs.animator.resume(); - }, - handleStop() { - this.$refs.animator.stop(); - }, -}; -``` - -![](figures/image-animator.gif) - diff --git a/zh-cn/application-dev/js-reference/image.md b/zh-cn/application-dev/js-reference/image.md deleted file mode 100755 index 06cd81d70dd2570f0a3def19472b69334a8261b0..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/image.md +++ /dev/null @@ -1,706 +0,0 @@ -# image - -- [子组件](#zh-cn_topic_0000001058670744_section9288143101012) -- [属性](#zh-cn_topic_0000001058670744_section2907183951110) -- [事件](#zh-cn_topic_0000001058670744_section3892191911214) -- [样式](#zh-cn_topic_0000001058670744_section45171131134215) - -图片组件，用来渲染展示图片。 - -## 子组件 - -不支持。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

src

-

string

-

-

-

否

-

图片的路径，支持本地路径，图片格式包括png, jpg, bmp, svg和gif。

-

alt

-

string

-

-

-

否

-

占位图，当指定图片在加载中时显示。

-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

disabled

-

boolean

-

false

-

否

-

当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-
- -## 事件 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

complete

-

{ width：width， height：height }

-

图片成功加载时触发该回调，返回成功加载的图源尺寸。

-

error

-

{ width：width， height：height }

-

图片加载出现异常时触发该回调，异常时长宽为零。

-

touchstart

-

TouchEvent

-

手指刚触摸屏幕时触发该事件。

-

touchmove

-

TouchEvent

-

手指触摸屏幕后移动时触发该事件。

-

touchcancel

-

TouchEvent

-

手指触摸屏幕中动作被打断时触发该事件。

-

touchend

-

TouchEvent

-

手指触摸结束离开屏幕时触发该事件。

-

click

-

-

-

点击动作触发该事件。

-

longpress

-

-

-

长按动作触发该事件。

-

swipe5+

-

SwipeEvent

-

组件上快速滑动后触发。

-
- -## 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

object-fit

-

string

-

cover

-

否

-

设置图片的缩放类型。可选值类型说明请见object-fit 类型说明。（svg格式不支持）

-

match-text-direction

-

boolean

-

false

-

否

-

图片是否跟随文字方向。（svg格式不支持）

-

fit-original-size

-

boolean

-

false

-

否

-

image组件在未设置宽高的情况下是否适应图源尺寸（该属性为true时object-fit属性不生效），svg类型图源不支持该属性。

-

width

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的宽度。

-

缺省时使用元素自身内容需要的宽度。

-

height

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的高度。

-

缺省时使用元素自身内容需要的高度。

-

padding

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的内边距属性。

-
该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    -

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    -

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    -

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下内边距属性。

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端内边距属性。

-

margin

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

-

  • 只有一个值时，这个值会被指定给全部的四个边。

    -

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    -

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    -

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下外边距属性。

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端外边距属性。

-

border

-

-

-

0

-

否

-

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

-

border-style

-

string

-

solid

-

否

-

使用简写属性设置所有边框的样式，可选值为：

-
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
-
  • solid：显示为一条实线。
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

否

-

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

-

border-[left|top|right|bottom]

-

-

-

-

-

否

-

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

-

border-width

-

<length>

-

0

-

否

-

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

否

-

分别设置左、上、右、下四个边框的宽度。

-

border-color

-

<color>

-

black

-

否

-

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

否

-

分别设置左、上、右、下四个边框的颜色。

-

border-radius

-

<length>

-

-

-

否

-

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，border-[left|top|right|bottom]-style，如果要设置color、width和style，需要将四个方向一起设置（border-width、border-color、border-style）。

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

否

-

分别设置左上，右上，右下和左下四个角的圆角半径。

-

background

-

<linear-gradient>

-

-

-

否

-

仅支持设置渐变样式，与background-color、background-image不兼容。

-

background-color

-

<color>

-

-

-

否

-

设置背景颜色。

-

background-image

-

string

-

-

-

否

-

设置背景图片。与background-color、background不兼容；支持本地图片资源地址。

-

示例：

-
  • background-image: url("/common/background.png")
-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

否

-

设置背景图片的大小。

-
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    -
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
-

background-repeat

-

string

-

repeat

-

否

-

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

-
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

否

-
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    -
-
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>
-

opacity

-

number

-

1

-

否

-

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

-

display

-

string

-

-

flex

-

否

-

确定一个元素所产生的框的类型，可选值为：

-
  • flex：弹性布局。
  • none：不渲染此元素。
-

visibility

-

string

-

-

visible

-

否

-

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

-
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
-
说明：

visibility和display样式都设置时，仅display生效

-
-

flex

-

-

-

-

-

否

-

规定当前组件如何适应父组件中的可用空间。

-

flex可以指定1个，2个5+或3个5+值。

-

单值语法：

-
  • 一个无单位数：用来设置组件的flex-grow
  • 一个有效的宽度值5+：用来设置组件的flex-basis
-

双值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow。第二个值是以下之一：

-
  • 一个无单位数：用来设置组件的flex-shrink
  • 一个有效的宽度值：用来设置组件的flex-basis
-

三值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow；第二个值必须是无单位数，用来设置组件的flex-shrink；第三个值必须是一个有效的宽度值，用来设置组件的flex-basis。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-grow

-

number

-

0

-

否

-

设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-shrink

-

number

-

1

-

否

-

设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-basis

-

<length>

-

-

-

-

否

-

设置组件在主轴方向上的初始大小。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

position

-

string

-

relative

-

否

-

设置元素的定位类型，不支持动态变更。

-
  • fixed：相对与整个界面进行定位。
  • absolute：相对于父元素进行定位。
  • relative：相对于其正常位置进行定位。
-
说明：

absolute属性仅在父容器为<div>、<stack>时生效。

-
-

[left|top|right|bottom]

-

<length>

-

-

-

否

-

left|top|right|bottom需要配合position样式使用，来确定元素的偏移位置。

-
  • left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  • top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  • right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
  • bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
-
- -**表 1** object-fit 类型说明 - - - - - - - - - - - - - - - - - - - - - - -

类型

-

描述

-

cover

-

保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界，居中显示。

-

contain

-

保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内，居中显示。

-

fill

-

不保持宽高比进行放大缩小，使得图片填充满显示边界。

-

none

-

保持原有尺寸进行居中显示。

-

scale-down

-

保持宽高比居中显示，图片缩小或者保持不变。

-
- ->![](public_sys-resources/icon-note.gif) **说明：** ->使用svg图片资源时： ->- 建议设置image组件的长宽，否则在父组件的长或宽为无穷大的场景下，svg资源将不会绘制； ->- 如果svg描述中未指定相应的长宽，则svg将会填满image组件区域； ->- 如果svg描述中指定了相应的长宽，和image组件本身的长宽效果如下： ->1. 如果image组件本身的长宽小于svg中的长宽，svg会被裁切，仅显示左上角部分； ->2. 如果image组件本身的长宽大于svg中的长宽，svg会被放置在image组件的左上角，image组件其他部分显示空白。 - diff --git a/zh-cn/application-dev/js-reference/input.md b/zh-cn/application-dev/js-reference/input.md deleted file mode 100755 index 262ce837a1475a9b7c661473e921bbc28fcbab7c..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/input.md +++ /dev/null @@ -1,764 +0,0 @@ -# input - -- [权限列表](#zh-cn_topic_0000001059308536_section11257113618419) -- [子组件](#zh-cn_topic_0000001059308536_section9288143101012) -- [属性](#zh-cn_topic_0000001059308536_section2907183951110) -- [事件](#zh-cn_topic_0000001059308536_section3892191911214) -- [样式](#zh-cn_topic_0000001059308536_section066012492913) - -交互式组件，包括单选框，多选框，按钮。 - -## 权限列表 - -无 - -## 子组件 - -不支持。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

type

-

string

-

text

-

否

-

input组件类型，可选值为button，checkbox，radio。

-

button，checkbox，radio不支持动态修改。可选值定义如下：

-
  • button：定义可点击的按钮；
  • checkbox：定义多选框；
  • radio：定义单选按钮，允许在多个拥有相同name值的选项中选中其中一个；
-

checked

-

boolean

-

false

-

否

-

当前组件是否选中，仅type为checkbox和radio生效。

-

name

-

string

-

-

-

否

-

input组件的名称。

-

value

-

string

-

-

-

否

-

input组件的value值，当类型为radio时必填且相同name值的选项该值唯一。

-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

disabled

-

boolean

-

false

-

否

-

当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-
- -## 事件 - -- 当input类型为checkbox、radio时，支持如下事件： - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

change

-

{ checked:true | false }

-

checkbox多选框或radio单选框的checked状态发生变化时触发该事件。

-

touchstart

-

TouchEvent

-

手指刚触摸屏幕时触发该事件。

-

touchmove

-

TouchEvent

-

手指触摸屏幕后移动时触发该事件。

-

touchcancel

-

TouchEvent

-

手指触摸屏幕中动作被打断时触发该事件。

-

touchend

-

TouchEvent

-

手指触摸结束离开屏幕时触发该事件。

-

longpress

-

-

-

长按动作触发该事件。

-

swipe5+

-

SwipeEvent

-

组件上快速滑动后触发。

-
- -- 当input类型为button时，支持如下事件： - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

touchstart

-

TouchEvent

-

手指刚触摸屏幕时触发该事件。

-

touchmove

-

TouchEvent

-

手指触摸屏幕后移动时触发该事件。

-

touchcancel

-

TouchEvent

-

手指触摸屏幕中动作被打断时触发该事件。

-

touchend

-

TouchEvent

-

手指触摸结束离开屏幕时触发该事件。

-

click

-

-

-

点击动作触发该事件。

-

longpress

-

-

-

长按动作触发该事件。

-

swipe5+

-

SwipeEvent

-

组件上快速滑动后触发。

-
- - -## 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

color

-

<color>

-

#e6000000

-

否

-

按钮的文本颜色。

-

font-size

-

<length>

-

16px

-

否

-

按钮的文本尺寸。

-

allow-scale

-

boolean

-

true

-

否

-

按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

-
说明：

如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。

-
-

font-weight

-

number | string

-

normal

-

否

-

按钮的字体粗细，见text组件font-weight的样式属性。

-

width

-

<length> | <percentage>

-

-

-

否

-

type为button时，默认值为128px。

-

height

-

<length> | <percentage>

-

-

-

否

-

type为button时，默认值为70px。

-

font-family

-

string

-

sans-serif

-

否

-

按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

-

padding

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的内边距属性。

-
该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    -

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    -

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    -

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下内边距属性。

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端内边距属性。

-

margin

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

-

  • 只有一个值时，这个值会被指定给全部的四个边。

    -

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    -

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    -

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下外边距属性。

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端外边距属性。

-

border

-

-

-

0

-

否

-

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

-

border-style

-

string

-

solid

-

否

-

使用简写属性设置所有边框的样式，可选值为：

-
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
-
  • solid：显示为一条实线。
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

否

-

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

-

border-[left|top|right|bottom]

-

-

-

-

-

否

-

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

-

border-width

-

<length>

-

0

-

否

-

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

否

-

分别设置左、上、右、下四个边框的宽度。

-

border-color

-

<color>

-

black

-

否

-

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

否

-

分别设置左、上、右、下四个边框的颜色。

-

border-radius

-

<length>

-

-

-

否

-

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，border-[left|top|right|bottom]-style，如果要设置color、width和style，需要将四个方向一起设置（border-width、border-color、border-style）。

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

否

-

分别设置左上，右上，右下和左下四个角的圆角半径。

-

background

-

<linear-gradient>

-

-

-

否

-

仅支持设置渐变样式，与background-color、background-image不兼容。

-

background-color

-

<color>

-

-

-

否

-

设置背景颜色。

-

background-image

-

string

-

-

-

否

-

设置背景图片。与background-color、background不兼容；支持本地图片资源地址。

-

示例：

-
  • background-image: url("/common/background.png")
-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

否

-

设置背景图片的大小。

-
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    -
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
-

background-repeat

-

string

-

repeat

-

否

-

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

-
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

否

-
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    -
-
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>
-

opacity

-

number

-

1

-

否

-

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

-

display

-

string

-

-

flex

-

否

-

确定一个元素所产生的框的类型，可选值为：

-
  • flex：弹性布局。
  • none：不渲染此元素。
-

visibility

-

string

-

-

visible

-

否

-

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

-
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
-
说明：

visibility和display样式都设置时，仅display生效

-
-

flex

-

-

-

-

-

否

-

规定当前组件如何适应父组件中的可用空间。

-

flex可以指定1个，2个5+或3个5+值。

-

单值语法：

-
  • 一个无单位数：用来设置组件的flex-grow
  • 一个有效的宽度值5+：用来设置组件的flex-basis
-

双值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow。第二个值是以下之一：

-
  • 一个无单位数：用来设置组件的flex-shrink
  • 一个有效的宽度值：用来设置组件的flex-basis
-

三值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow；第二个值必须是无单位数，用来设置组件的flex-shrink；第三个值必须是一个有效的宽度值，用来设置组件的flex-basis。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-grow

-

number

-

0

-

否

-

设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-shrink

-

number

-

1

-

否

-

设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-basis

-

<length>

-

-

-

-

否

-

设置组件在主轴方向上的初始大小。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

position

-

string

-

relative

-

否

-

设置元素的定位类型，不支持动态变更。

-
  • fixed：相对与整个界面进行定位。
  • absolute：相对于父元素进行定位。
  • relative：相对于其正常位置进行定位。
-
说明：

absolute属性仅在父容器为<div>、<stack>时生效。

-
-

[left|top|right|bottom]

-

<length>

-

-

-

否

-

left|top|right|bottom需要配合position样式使用，来确定元素的偏移位置。

-
  • left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  • top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  • right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
  • bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
-
- diff --git "a/zh-cn/application-dev/js-reference/\346\226\207\344\273\266\347\273\204\347\273\207.md" b/zh-cn/application-dev/js-reference/js-framework-file.md old mode 100755 new mode 100644 similarity index 33% rename from "zh-cn/application-dev/js-reference/\346\226\207\344\273\266\347\273\204\347\273\207.md" rename to zh-cn/application-dev/js-reference/js-framework-file.md index 331c552e326df40460599427c62d17b9858b237a..9557f03c134d4af641922f073b24756e02b1dda1 --- "a/zh-cn/application-dev/js-reference/\346\226\207\344\273\266\347\273\204\347\273\207.md" +++ b/zh-cn/application-dev/js-reference/js-framework-file.md @@ -1,19 +1,19 @@ -# 文件组织 +# 文件组织 -- [目录结构](#zh-cn_topic_0000001058830797_section119431650182015) -- [文件访问规则](#zh-cn_topic_0000001058830797_section6620355202117) -- [媒体文件格式](#zh-cn_topic_0000001058830797_section79731562617) +- [目录结构](#zh-cn_topic_0000001127125012_section119431650182015) +- [文件访问规则](#zh-cn_topic_0000001127125012_section6620355202117) +- [媒体文件格式](#zh-cn_topic_0000001127125012_section79731562617) -## 目录结构 +## 目录结构 JS FA应用的JS模块\(entry/src/main/js/module\)的典型开发目录结构如下： -**图 1** 目录结构 +**图 1** 目录结构 ![](figures/unnaming-(1).png) -**图 2** 多实例资源共享目录结构5+ +**图 2** 多实例资源共享目录结构5+ ![](figures/多实例资源共享目录结构5+.png "多实例资源共享目录结构5+") 目录结构中文件分类如下： @@ -24,79 +24,102 @@ JS FA应用的JS模块\(entry/src/main/js/module\)的典型开发目录结构如 各个文件夹的作用： -- app.js文件用于全局JavaScript逻辑和应用生命周期管理。 +- app.js文件用于全局JavaScript逻辑和应用生命周期管理，详见[app.js](js-framework-js-file.md#ZH-CN_TOPIC_0000001209210691)说明。 - pages目录用于存放所有组件页面。 - common目录用于存放公共资源文件，比如：媒体资源，自定义组件和JS文件。 -- resources目录用于存放资源配置文件，比如：全局样式、多分辨率加载等配置文件。 +- resources目录用于存放资源配置文件，比如：多分辨率加载等配置文件，详见[资源限定与访问](js-framework-resource-restriction.md#ZH-CN_TOPIC_0000001164130752)章节。 - share目录5+用于配置多个实例共享的资源内容，比如：share中的图片和JSON文件可被default1和default2实例共享。 ->![](public_sys-resources/icon-note.gif) **说明：** ->- 如下文件夹是开发保留文件夹，不可重命名： -> - share -> - resources +>![](../public_sys-resources/icon-note.gif) **说明：** +>- i18n和resources是开发保留文件夹，不可重命名。 >- 如果share目录中的资源和实例\(default\)中的资源文件同名且目录一致时，实例中资源的优先级高于share中资源的优先级。 +>- share目录当前不支持i18n。 +>- 在使用DevEco Studio进行应用开发时，目录结构中的可选文件夹需要开发者根据实际情况自行创建。 -## 文件访问规则 +## 文件访问规则 应用资源可通过绝对路径或相对路径的方式进行访问，本开发框架中绝对路径以"/"开头，相对路径以"./"或"../"。具体访问规则如下： -- 引用代码文件，需使用相对路径，比如：../common/utils.js。 +- 引用代码文件，推荐使用相对路径，比如：../common/utils.js。 - 引用资源文件，推荐使用绝对路径。比如：/common/xxx.png。 - 公共代码文件和资源文件推荐放在common下，通过以上两条规则进行访问。 - CSS样式文件中通过url\(\)函数创建数据类型，如：url\(/common/xxx.png\)。 ->![](public_sys-resources/icon-note.gif) **说明：** +>![](../public_sys-resources/icon-note.gif) **说明：** >当代码文件A需要引用代码文件B时： >- 如果代码文件A和文件B位于同一目录，则代码文件B引用资源文件时可使用相对路径，也可使用绝对路径。 >- 如果代码文件A和文件B位于不同目录，则代码文件B引用资源文件时必须使用绝对路径。因为Webpack打包时，代码文件B的目录会发生变化。 ->在js文件中通过数据绑定的方式指定资源文件路径时，需使用绝对路径。 +>- 在js文件中通过数据绑定的方式指定资源文件路径时，必须使用绝对路径。 -## 媒体文件格式 +## 媒体文件格式 **表 1** 支持的图片格式 - -

格式

+ + - - - - - - - - - - - - - - - - - + + +

格式

支持版本

+

支持版本

支持的文件类型

+

支持的文件类型

BMP

+

BMP

API Version 3+

+

API Version 3+

.bmp

+

.bmp

GIF

+

GIF

API Version 3+

+

API Version 3+

.gif

+

.gif

JPEG

+

JPEG

API Version 3+

+

API Version 3+

.jpg

+

.jpg

PNG

+

PNG

API Version 3+

+

API Version 3+

.png

+

.png

WebP

+

WebP

API Version 3+

+

API Version 3+

.webp

+

.webp

+
+ +**表 2** 支持的视频格式 + + + + + + + + + + diff --git a/zh-cn/application-dev/js-reference/js-framework-js-file.md b/zh-cn/application-dev/js-reference/js-framework-js-file.md new file mode 100644 index 0000000000000000000000000000000000000000..55d603dc4c69b3f18c32ebb73cb21193e5c5c408 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-framework-js-file.md @@ -0,0 +1,65 @@ +# app.js + +- [应用生命周期](#zh-cn_topic_0000001173164711_section597315421776) +- [应用对象6+](#zh-cn_topic_0000001173164711_section61671730771) + +## 应用生命周期 + +每个应用可以在app.js自定义应用级[生命周期](js-framework-lifecycle.md#ZH-CN_TOPIC_0000001209252155)的实现逻辑，以下示例仅在生命周期函数中打印对应日志： + +``` +// app.js +export default { + onCreate() { + console.info('Application onCreate'); + }, + + onDestroy() { + console.info('Application onDestroy'); + }, +} +``` + +## 应用对象6+ + + +

格式

+

支持版本

+

支持的文件类型

+

H.264 AVC

+

Baseline Profile (BP)

+

API Version 3+

+

.3gp

+

.mp4
+ + + + + + + + + +

属性

+

类型

+

描述

+

getApp

+

Function

+

提供getApp()全局方法，可以在自定义js文件中获取app.js中暴露的对象。

+
+ +示例如下： + +``` +// app.js +export default { + data: { + test: "by getAPP" + }, + onCreate() { + console.info('AceApplication onCreate'); + }, + onDestroy() { + console.info('AceApplication onDestroy'); + }, +}; +``` + +``` +// test.js 自定义逻辑代码 +export var appData = getApp().data; +``` + diff --git "a/zh-cn/application-dev/js-reference/js\346\240\207\347\255\276\351\205\215\347\275\256.md" b/zh-cn/application-dev/js-reference/js-framework-js-tag.md old mode 100755 new mode 100644 similarity index 35% rename from "zh-cn/application-dev/js-reference/js\346\240\207\347\255\276\351\205\215\347\275\256.md" rename to zh-cn/application-dev/js-reference/js-framework-js-tag.md index ab0325f6178c7fe67a661f80e431c6474dc8db53..0cf141d834fc98b8e0679af136d972e83fc7c88d --- "a/zh-cn/application-dev/js-reference/js\346\240\207\347\255\276\351\205\215\347\275\256.md" +++ b/zh-cn/application-dev/js-reference/js-framework-js-tag.md @@ -1,127 +1,127 @@ -# js标签配置 +# js标签配置 -- [pages](#zh-cn_topic_0000001058948917_section3239252133513) -- [window](#zh-cn_topic_0000001058948917_section728811177376) -- [示例](#zh-cn_topic_0000001058948917_section19421142983812) +- [pages](#zh-cn_topic_0000001173324643_section3239252133513) +- [window](#zh-cn_topic_0000001173324643_section728811177376) +- [示例](#zh-cn_topic_0000001173324643_section19421142983812) js标签中包含了实例名称、页面路由和窗口样式信息。 - -

标签

+ + - - - - - - - - - - - - - - - - - - -

标签

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

name

+

name

string

+

string

default

+

default

是

+

是

标识JS实例的名字。

+

标识JS实例的名字。

pages

+

pages

Array

+

Array

-

+

-

是

+

是

路由信息，详见“pages”。

+

路由信息，详见“pages”。

window

+

window

Object

+

Object

-

+

-

否

+

否

窗口信息，详见“window”。

+

窗口信息，详见“window”。
->![](public_sys-resources/icon-note.gif) **说明：** ->name、pages和window等标签配置需在配置文件中的“js”标签中完成设置。 +>![](../public_sys-resources/icon-note.gif) **说明：** +>name、pages和window等标签配置需在配置文件（config.json)中的“js”标签中完成设置。 -## pages +## pages 定义每个页面的路由信息，每个页面由页面路径和页面名组成，页面的文件名就是页面名。比如： ``` { - ... - "pages": [ - "pages/index/index", - "pages/detail/detail" - ] - ... + ... + "pages": [ + "pages/index/index", + "pages/detail/detail" + ] + ... } ``` ->![](public_sys-resources/icon-note.gif) **说明：** +>![](../public_sys-resources/icon-note.gif) **说明：** >- pages列表中第一个页面是应用的首页，即entry入口。 >- 页面文件名不能使用组件名称，比如：text.hml、button.hml等。 -## window +## window window用于定义与显示窗口相关的配置。对于屏幕适配问题，有2种配置方法： - 指定designWidth（屏幕逻辑宽度），所有与大小相关的样式（例如width、font-size）均以designWidth和实际屏幕宽度的比例进行缩放，例如在designWidth为720时，如果设置width为100px时，在实际宽度为1440物理像素的屏幕上，width实际渲染像素为200物理像素。 - 设置autoDesignWidth为true，此时designWidth字段将会被忽略，渲染组件和布局时按屏幕密度进行缩放。屏幕逻辑宽度由设备宽度和屏幕密度自动计算得出，在不同设备上可能不同，请使用相对布局来适配多种设备。例如：在466\*466分辨率，320dpi的设备上，屏幕密度为2（以160dpi为基准），1px等于渲染出的2物理像素。 - >![](public_sys-resources/icon-note.gif) **说明：** + >![](../public_sys-resources/icon-note.gif) **说明：** >1. 组件样式中类型的默认值，按屏幕密度进行计算和绘制，如：在屏幕密度为2（以160dpi为基准）的设备上，默认为1px时，设备上实际渲染出2物理像素。 >2. autoDesignWidth、designWidth的设置不影响默认值计算方式和绘制结果。 - -

属性

+ + - - - - - - - - - - - - - - @@ -131,16 +131,16 @@ window用于定义与显示窗口相关的配置。对于屏幕适配问题， ``` { - ... - "window": { - "designWidth": 720, - "autoDesignWidth": false - } - ... + ... + "window": { + "designWidth": 720, + "autoDesignWidth": false + } + ... } ``` -## 示例 +## 示例 ``` { @@ -153,23 +153,23 @@ window用于定义与显示窗口相关的配置。对于屏幕适配问题， "vendor": "example" } "module": { - ... - "js": [ + ... + "js": [ { - "name": "default", - "pages": [ - "pages/index/index", - "pages/detail/detail" - ], - "window": { - "designWidth": 720, - "autoDesignWidth": false - } + "name": "default", + "pages": [ + "pages/index/index", + "pages/detail/detail" + ], + "window": { + "designWidth": 720, + "autoDesignWidth": false + } } - ], - "abilities": [ + ], + "abilities": [ { - ... + ... } ] } diff --git a/zh-cn/application-dev/js-reference/js-framework-lifecycle.md b/zh-cn/application-dev/js-reference/js-framework-lifecycle.md new file mode 100644 index 0000000000000000000000000000000000000000..59741fe12b20b34de8a6391d9afcb5436689ae67 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-framework-lifecycle.md @@ -0,0 +1,170 @@ +# 生命周期 + +- [应用生命周期](#zh-cn_topic_0000001173164671_section9779102014714) +- [页面生命周期](#zh-cn_topic_0000001173164671_section921934910481) + +## 应用生命周期 + +在app.js中可以定义如下应用生命周期函数： + + +

属性

类型

+

类型

必填

+

必填

默认值

+

缺省值

描述

+

描述

designWidth

+

designWidth

number

+

number

否

+

否

720

+

720

页面显示设计时的参考值，实际显示效果基于设备宽度与参考值之间的比例进行缩放。

+

页面显示设计时的参考值，实际显示效果基于设备宽度与参考值之间的比例进行缩放。

autoDesignWidth

+

autoDesignWidth

boolean

+

boolean

否

+

否

false

+

false

页面设计基准宽度是否自动计算，当设为true时，designWidth将会被忽略，设计基准宽度由设备宽度与屏幕密度计算得出。

+

页面设计基准宽度是否自动计算，当设为true时，designWidth将会被忽略，设计基准宽度由设备宽度与屏幕密度计算得出。
+ + + + + + + + + + + + + + + + + + + + + + + + + + +

属性

+

类型

+

描述

+

触发时机

+

onCreate

+

() => void

+

应用创建

+

当应用创建时调用。

+

onShow6+

+

() => void

+

应用处于前台

+

当应用处于前台时触发。

+

onHide6+

+

() => void

+

应用处于后台

+

当应用处于后台时触发。

+

onDestroy

+

() => void

+

应用销毁

+

当应用退出时触发。

+
+ +## 页面生命周期 + +在页面JS文件中可以定义如下页面生命周期函数： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

属性

+

类型

+

描述

+

触发时机

+

onInit

+

() => void

+

页面初始化

+

页面数据初始化完成时触发，只触发一次。

+

onReady

+

() => void

+

页面创建完成

+

页面创建完成时触发，只触发一次。

+

onShow

+

() => void

+

页面显示

+

页面显示时触发。

+

onHide

+

() => void

+

页面消失

+

页面消失时触发。

+

onDestroy

+

() => void

+

页面销毁

+

页面销毁时触发。

+

onBackPress

+

() => boolean

+

返回按钮动作

+

当用户点击返回按钮时触发。

+
  • 返回true表示页面自己处理返回逻辑。
  • 返回false表示使用默认的返回逻辑。
  • 不返回值会作为false处理。
+

onActive()5+

+

() => void

+

页面激活

+

页面激活时触发。

+

onInactive()5+

+

() => void

+

页面暂停

+

页面暂停时触发。

+

onNewRequest()5+

+

() => void

+

FA重新请求

+

FA已经启动时收到新的请求后触发。

+
+ +页面A的生命周期接口的调用顺序 + +- 打开页面A：onInit\(\) -\> onReady\(\) -\> onShow\(\) +- 在页面A打开页面B：onHide\(\) +- 从页面B返回页面A：onShow\(\) +- 退出页面A：onBackPress\(\) -\> onHide\(\) -\> onDestroy\(\) +- 页面隐藏到后台运行：onInactive\(\) -\> onHide\(\) +- 页面从后台运行恢复到前台：onShow\(\) -\> onActive\(\) + +![](figures/zh-cn_image_0000001147417424.png) + diff --git a/zh-cn/application-dev/js-reference/js-framework-multiple-languages.md b/zh-cn/application-dev/js-reference/js-framework-multiple-languages.md new file mode 100644 index 0000000000000000000000000000000000000000..f61245d8f021448a0bf0f3c18dbec26c748cdb2b --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-framework-multiple-languages.md @@ -0,0 +1,313 @@ +# 多语言支持 + +- [定义资源文件](#zh-cn_topic_0000001173324681_section733935013515) +- [引用资源](#zh-cn_topic_0000001173324681_section522111116527) +- [获取语言](#zh-cn_topic_0000001173324681_section2872192475310) + +基于开发框架的应用会覆盖多个国家和地区，开发框架支持多语言能力后，可以让应用开发者无需开发多个不同语言的版本，就可以同时支持多种语言的切换，为项目维护带来便利。 + +开发者仅需要通过[定义资源文件](#zh-cn_topic_0000001173324681_section733935013515)和[引用资源](#zh-cn_topic_0000001173324681_section522111116527)两个步骤，就可以使用开发框架的多语言能力；如果需要在应用中获取当前系统语言，请参考[获取语言](#zh-cn_topic_0000001173324681_section2872192475310)。 + +## 定义资源文件 + +资源文件用于存放应用在多种语言场景下的资源内容，开发框架使用JSON文件保存资源定义。在[文件组织](js-framework-file.md#ZH-CN_TOPIC_0000001164130750)中指定的i18n文件夹内放置语言资源文件，其中语言资源文件的命名是由语言、文字、国家或地区的限定词通过中划线连接组成，其中文字和国家或地区可以省略，如zh-Hant-HK（中国香港地区使用的繁体中文）、zh-CN（中国使用的简体中文）、zh（中文）。命名规则如下： + +``` +language[-script-region].json +``` + +限定词的取值需符合下表要求。 + +**表 1** 限定词取值要求 + + + + + + + + + + + + + + + + +

限定词类型

+

含义与取值说明

+

语言

+

表示设备使用的语言类型，由2~3个小写字母组成。例如：zh表示中文，en表示英语，mai表示迈蒂利语。

+

详细取值范围，请查阅ISO 639（ISO制定的语言编码标准）。

+

文字

+

表示设备使用的文字类型，由1个大写字母（首字母）和3个小写字母组成。例如：Hans表示简体中文，Hant表示繁体中文。

+

详细取值范围，请查阅ISO 15924（ISO制定的文字编码标准）。

+

国家或地区

+

表示用户所在的国家或地区，由2~3个大写字母或者3个数字组成。例如：CN表示中国，GB表示英国。

+

详细取值范围，请查阅ISO 3166-1（ISO制定的国家和地区编码标准）。

+
+ +当开发框架无法在应用中找到系统语言的资源文件时，默认使用en-US.json中的资源内容。 + +资源文件内容格式如下： + +en-US.json + +``` +{ + "strings": { + "hello": "Hello world!", + "object": "Object parameter substitution-{name}", + "array": "Array type parameter substitution-{0}", + "symbol": "@#$%^&*()_+-={}[]\\|:;\"'<>,./?" + }, + + "files": { + "image": "image/en_picture.PNG" + } +} +``` + +由于不同语言针对单复数有不同的匹配规则，在资源文件中使用“zero”“one”“two”“few”“many”“other”定义不同单复数场景下的词条内容。例如中文不区分单复数，仅存在“other”场景；英文存在“one”、“other”场景；阿拉伯语存在上述6种场景。 + +以en-US.json和ar-AE.json为例，资源文件内容格式如下： + +en-US.json + +``` +{ + "strings": { + "people": { + "one": "one person", + "other": "{count} people" + } + } +} +``` + +ar-AE.json + +``` +{ + "strings": { + "people": { + "zero": "لا أحد", + "one": "وحده", + "two": "اثنان", + "few": "ستة اشخاص", + "many": "خمسون شخص", + "other": "مائة شخص" + } + } +} +``` + +## 引用资源 + +在应用开发的页面中使用多语言的语法，包含简单格式化和单复数格式化两种，都可以在hml或js中使用。 + +- 简单格式化方法 + + 在应用中使用$t方法引用资源，$t既可以在hml中使用，也可以在js中使用。系统将根据当前语言环境和指定的资源路径（通过$t的path参数设置），显示对应语言的资源文件中的内容。 + + **表 2** 简单格式化 + + + + + + + + + + + + + + + + +

属性

+

类型

+

参数

+

必填

+

描述

+

$t

+

Function

+

请见表3

+

是

+

根据系统语言完成简单的替换：this.$t('strings.hello')

+
+ + **表 3** $t参数说明 + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

描述

+

path

+

string

+

是

+

资源路径

+

params

+

Array|Object

+

否

+

运行时用来替换占位符的实际内容，占位符分为两种：

+
  • 具名占位符，例如{name}。实际内容必须用Object类型指定，例如：$t('strings.object', { name: 'Hello world' })。
  • 数字占位符，例如{0}。实际内容必须用Array类型指定，例如：$t('strings.array', ['Hello world'])。
+
+ +- 简单格式化示例代码 + + ``` + +
+ + {{ $t('strings.hello') }} + + {{ $t('strings.object', { name: 'Hello world' }) }} + + {{ $t('strings.array', ['Hello world']) }} + + {{ hello }} + + {{ replaceObject }} + + {{ replaceArray }} + + + + + +
+ ``` + + ``` + // xxx.js + // 下面为在js文件中的使用方法。 + export default { + data: { + hello: '', + replaceObject: '', + replaceArray: '', + replaceSrc: '', + }, + onInit() { + this.hello = this.$t('strings.hello'); + this.replaceObject = this.$t('strings.object', { name: 'Hello world' }); + this.replaceArray = this.$t('strings.array', ['Hello world']); + this.replaceSrc = this.$t('files.image'); + }, + } + ``` + +- 单复数格式化方法 + + **表 4** 单复数格式化 + + + + + + + + + + + + + + + + +

属性

+

类型

+

参数

+

必填

+

描述

+

$tc

+

Function

+

请见表5

+

是

+

根据系统语言完成单复数替换：this.$tc('strings.people')

+
说明：

定义资源的内容通过json格式的key为“zero”、“one”、“two”、“few”、“many”和“other”区分。

+
+
+ + **表 5** $tc参数说明 + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

必填

+

描述

+

path

+

string

+

是

+

资源路径

+

count

+

number

+

是

+

要表达的值

+
+ +- 单复数格式化示例代码 + + ``` + +
+ + {{ $tc('strings.people', 0) }} + + {{ $tc('strings.people', 1) }} + + {{ $tc('strings.people', 2) }} + + {{ $tc('strings.people', 6) }} + + {{ $tc('strings.people', 50) }} + + {{ $tc('strings.people', 100) }} +
+ ``` + + +## 获取语言 + +获取语言功能请参考[应用配置](apis/js-apis-system-configuration.md#ZH-CN_TOPIC_0000001164130782)。 + diff --git a/zh-cn/application-dev/js-reference/js-framework-resource-restriction.md b/zh-cn/application-dev/js-reference/js-framework-resource-restriction.md new file mode 100644 index 0000000000000000000000000000000000000000..5f2be8d411a369edca91b16700819f8b92dc890b --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-framework-resource-restriction.md @@ -0,0 +1,134 @@ +# 资源限定与访问 + +- [资源限定词](#zh-cn_topic_0000001173164731_section197802036142011) +- [资源限定词的命名要求](#zh-cn_topic_0000001173164731_section550585117202) +- [限定词与设备状态的匹配规则](#zh-cn_topic_0000001173164731_section59927387241) +- [引用JS模块内resources资源](#zh-cn_topic_0000001173164731_section7516798256) +- [示例](#zh-cn_topic_0000001173164731_section9710101017318) + +>![](../public_sys-resources/icon-note.gif) **说明：** +>- 屏幕密度从API Version 4 开始支持。 +>- 其余限定词从API Version 6 开始支持。 + +## 资源限定词 + +资源限定词可以由一个或多个表征应用场景或设备特征的限定词组合而成，包括屏幕密度等维度，限定词之间通过中划线（-）连接。开发者在**resources**目录下创建限定词文件时，需要掌握限定词文件的命名要求以及与限定词文件与设备状态的匹配规则。 + +## 资源限定词的命名要求 + +- 限定词的组合顺序：屏幕密度。开发者可以根据应用的使用场景和设备特征，选择其中的一类或几类限定词组成目录名称，顺序不可颠倒。其中MCC和MNC须同时存在。 +- 限定词的连接方式：限定词之间均采用中划线（-）连接。例如：res-dark-ldpi.json 。 +- 限定词的取值范围：每类限定词的取值必须符合下表的条件，否则，将无法匹配目录中的资源文件，限定词大小写敏感。 +- 限定词前缀：**resources**资源文件的资源限定词有前缀res，例如res-ldpi.json。 +- 默认资源限定文件：**resources**资源文件的默认资源限定文件为res-defaults.json。 +- 资源限定文件中不支持使用枚举格式的颜色来设置资源。 + +**表 1** 资源限定词 + + + + + + + + + + + + + + + + + + + +

类型

+

含义与取值说明

+

MCC和MNC6+

+

移动设备国家代码 (MCC)，设备 SIM 卡中的移动设备网络代码 (MNC)，如mcc460-mnc01，mcc460-mnc02。

+

横竖屏6+

+

表示设备的屏幕方向，取值如下：

+
  • vertical：竖屏
  • horizontal：横屏
+

设备类型6+

+

表示设备的类型，取值如下：

+
  • phone：手机
  • tablet：平板
  • tv：智慧屏
  • wearable：智能穿戴
+

屏幕密度

+

表示设备的屏幕密度（单位为dpi），取值如下：

+
  • ldpi：表示低密度屏幕（~120dpi）（0.75基准密度）
  • mdpi：表示中密度屏幕（~160dpi）（基准密度）
  • hdpi：表示高密度屏幕（~240dpi）（1.5基准密度）
  • xhdpi：表示加高密度屏幕（~320dpi）（2.0基准密度）
  • xxhdpi：表示超超高密度屏幕（~480dpi）（3.0基准密度）
  • xxxhdpi：表示超超超高密度屏幕（~640dpi）（4.0基准密度）
+
+ +## 限定词与设备状态的匹配规则 + +- 在为设备匹配对应的资源文件时，限定词目录匹配的优先级从高到低依次为：MCC和MNC\> 横竖屏 \> 深色模式 \> 设备类型 \> 屏幕密度。在资源限定词目录均未匹配的情况下，则匹配默认资源限定文件。 +- 如果限定词目录中包含资源限定词，则对应限定词的取值必须与当前的设备状态完全一致，该目录才能够参与设备的资源匹配。例如：资源限定文件res-hdpi.json与当前设备密度xhdpi无法匹配。 + +## 引用JS模块内resources资源 + +在应用开发的hml和js文件中使用$r的语法，可以对JS模块内的resources目录下的json资源进行格式化，获取相应的资源内容。 + + + + + + + + + + + + +

属性

+

类型

+

描述

+

$r

+

(key: string) => string

+

获取资源限定下具体的资源内容。例如：this.$r('strings.hello')。

+

参数说明：

+
  • key：定义在资源限定文件中的键值，如strings.hello。
+

res-defaults.json示例：

+
{
+    strings: {
+        hello: 'hello world'
+    }
+}
+
+ +## 示例 + +resources/res-dark.json: + +``` +{ + "image": { + "clockFace": "common/dark_face.png" + }, + "colors": { + "background": "#000000" + } +} +``` + +resources/res-defaults.json: + +``` +{ + "image": { + "clockFace": "common/face.png" + }, + "colors": { + "background": "#ffffff" + } +} +``` + +``` + +
+ +
+``` + +>![](../public_sys-resources/icon-note.gif) **说明：** +>资源限定文件中不支持颜色枚举格式。 + diff --git "a/zh-cn/application-dev/js-reference/CSS\350\257\255\346\263\225\345\217\202\350\200\203.md" b/zh-cn/application-dev/js-reference/js-framework-syntax-css.md old mode 100755 new mode 100644 similarity index 42% rename from "zh-cn/application-dev/js-reference/CSS\350\257\255\346\263\225\345\217\202\350\200\203.md" rename to zh-cn/application-dev/js-reference/js-framework-syntax-css.md index c404acd3560cc9b99f6f500293aa6093567b78da..5240dd6f90498da0e7813e7630c09341e339fbd0 --- "a/zh-cn/application-dev/js-reference/CSS\350\257\255\346\263\225\345\217\202\350\200\203.md" +++ b/zh-cn/application-dev/js-reference/js-framework-syntax-css.md @@ -1,28 +1,29 @@ -# CSS语法参考 +# CSS语法参考 -- [尺寸单位](#zh-cn_topic_0000001058988944_section81638230913) -- [样式导入](#zh-cn_topic_0000001058988944_section890312411592) -- [声明样式](#zh-cn_topic_0000001058988944_section197695604215) -- [选择器](#zh-cn_topic_0000001058988944_section381741144310) -- [选择器优先级](#zh-cn_topic_0000001058988944_section1460102134415) -- [伪类](#zh-cn_topic_0000001058988944_section633010213458) -- [样式预编译](#zh-cn_topic_0000001058988944_section1690162216454) +- [尺寸单位](#zh-cn_topic_0000001127125112_section81638230913) +- [样式导入](#zh-cn_topic_0000001127125112_section890312411592) +- [声明样式](#zh-cn_topic_0000001127125112_section197695604215) +- [选择器](#zh-cn_topic_0000001127125112_section381741144310) +- [选择器优先级](#zh-cn_topic_0000001127125112_section1460102134415) +- [伪类](#zh-cn_topic_0000001127125112_section633010213458) +- [样式预编译](#zh-cn_topic_0000001127125112_section1690162216454) +- [CSS样式继承6+](#zh-cn_topic_0000001127125112_section11758912154910) CSS是描述HML页面结构的样式语言。所有组件均存在系统默认样式，也可在页面CSS样式文件中对组件、页面自定义不同的样式。 -## 尺寸单位 +## 尺寸单位 1. 逻辑像素px（文档中以表示）： - 1. 默认屏幕具有的逻辑宽度为720px（配置见[配置文件](js标签配置.md#ZH-CN_TOPIC_0000001162494585)中的window小节），实际显示时会将页面布局缩放至屏幕实际宽度，如100px在实际宽度为1440物理像素的屏幕上，实际渲染为200物理像素（从720px向1440物理像素，所有尺寸放大2倍）。 - 2. 额外配置autoDesignWidth为true时（配置见[配置文件](js标签配置.md#ZH-CN_TOPIC_0000001162494585)中的window小节），逻辑像素px将按照屏幕密度进行缩放，如100px在屏幕密度为3的设备上，实际渲染为300物理像素。应用需要适配多种设备时，建议采用此方法。 + 1. 默认屏幕具有的逻辑宽度为720px（配置见[配置文件](js-framework-js-tag.md#ZH-CN_TOPIC_0000001164290700)中的window小节），实际显示时会将页面布局缩放至屏幕实际宽度，如100px在实际宽度为1440物理像素的屏幕上，实际渲染为200物理像素（从720px向1440物理像素，所有尺寸放大2倍）。 + 2. 额外配置autoDesignWidth为true时（配置见[配置文件](js-framework-js-tag.md#ZH-CN_TOPIC_0000001164290700)中的window小节），逻辑像素px将按照屏幕密度进行缩放，如100px在屏幕密度为3的设备上，实际渲染为300物理像素。应用需要适配多种设备时，建议采用此方法。 2. 百分比（文档中以表示）：表示该组件占父组件尺寸的百分比，如组件的width设置为50%，代表其宽度为父组件的50%。 -## 样式导入 +## 样式导入 -为了模块化管理和代码复用，CSS样式文件支持 @import 语句，导入 CSS 文件。 +为了模块化管理和代码复用，CSS样式文件支持 @import 语句，导入css文件。 -## 声明样式 +## 声明样式 每个页面目录下存在一个与布局hml文件同名的css文件，用来描述该hml页面中组件的样式，决定组件应该如何显示。 @@ -60,52 +61,52 @@ CSS是描述HML页面结构的样式语言。所有组件均存在系统默认 ``` -## 选择器 +## 选择器 css选择器用于选择需要添加样式的元素，支持的选择器如下表所示： - -

选择器

+ + - - - - - - - - - - - - - - - - - @@ -144,7 +145,7 @@ div { /* 对class="container"的组件下的所有text设置样式 */ .container text { color: #007dff; -}; +} /* 对class="container"的组件下的直接后代text设置样式 */ .container > text { color: #fa2a2d; @@ -155,55 +156,55 @@ div { ![](figures/sample_css.png) -其中“.container text”将“标题”和“内容”设置为蓝色，而“.container \> text”直接后代选择器将“标题”设置为红色。2者优先级相同，但直接后代选择器声明顺序靠后，将前者样式覆盖（优先级计算见[选择器优先级](#zh-cn_topic_0000001058988944_section1460102134415)）。 +其中“.container text”将“标题”和“内容”设置为蓝色，而“.container \> text”直接后代选择器将“标题”设置为红色。2者优先级相同，但直接后代选择器声明顺序靠后，将前者样式覆盖（优先级计算见[选择器优先级](#zh-cn_topic_0000001127125112_section1460102134415)）。 -## 选择器优先级 +## 选择器优先级 选择器的优先级计算规则与w3c规则保持一致（只支持：内联样式，id，class，tag，后代和直接后代），其中内联样式为在元素style属性中声明的样式。 当多条选择器声明匹配到同一元素时，各类选择器优先级由高到低顺序为：内联样式 \> id \> class \> tag。 -## 伪类 +## 伪类 css伪类是选择器中的关键字，用于指定要选择元素的特殊状态。例如，:disabled状态可以用来设置元素的disabled属性变为true时的样式。 -除了单个伪类之外，还支持伪类的组合，例如，:disabled:checked状态可以用来设置元素的disabled属性和checked属性同时为true时的样式。支持的单个伪类如下表所示，按照优先级降序排列： +除了单个伪类之外，还支持伪类的组合，例如，:focus:checked状态可以用来设置元素的focus属性和checked属性同时为true时的样式。支持的单个伪类如下表所示，按照优先级降序排列： - -

选择器

样例

+

样例

样例描述

+

样例描述

.class

+

.class

.container

+

.container

用于选择class="container"的组件。

+

用于选择class="container"的组件。

#id

+

#id

#titleId

+

#titleId

用于选择id="titleId"的组件。

+

用于选择id="titleId"的组件。

tag

+

tag

text

+

text

用于选择text组件。

+

用于选择text组件。

,

+

,

.title, .content

+

.title, .content

用于选择class="title"和class="content"的组件。

+

用于选择class="title"和class="content"的组件。

#id .class tag

+

#id .class tag

#containerId .content text

+

#containerId .content text

非严格父子关系的后代选择器，选择具有id="containerId"作为祖先元素，class="content"作为次级祖先元素的所有text组件。如需使用严格的父子关系，可以使用“>”代替空格，如：#containerId>.content

+

非严格父子关系的后代选择器，选择具有id="containerId"作为祖先元素，class="content"作为次级祖先元素的所有text组件。如需使用严格的父子关系，可以使用“>”代替空格，如：#containerId>.content。
- -

名称

+ + - - - - - - - - - - - - - - @@ -225,10 +226,10 @@ css伪类是选择器中的关键字，用于指定要选择元素的特殊状 } ``` ->![](public_sys-resources/icon-note.gif) **说明：** +>![](../public_sys-resources/icon-note.gif) **说明：** >针对弹窗类组件及其子元素不支持伪类效果，包括popup、dialog、menu、option、picker -## 样式预编译 +## 样式预编译 预编译提供了利用特有语法生成css的程序，可以提供变量、运算等功能，令开发者更便捷地定义组件样式，目前支持less、sass和scss的预编译。使用样式预编译时，需要将原css文件后缀改为less、sass或scss，如index.css改为index.less、index.sass或index.scss。 @@ -263,7 +264,21 @@ css伪类是选择器中的关键字，用于指定要选择元素的特殊状 } ``` - >![](public_sys-resources/icon-note.gif) **说明：** + >![](../public_sys-resources/icon-note.gif) **说明：** >引用的预编译文件建议放在common目录进行管理。 +## CSS样式继承6+ + +css样式继承提供了子节点继承父节点样式的能力，继承下来的样式在多选择器样式匹配的场景下，优先级排最低，当前支持以下样式的继承： + +- font-family +- font-weight +- font-size +- font-style +- text-align +- line-height +- letter-spacing +- color +- visibility + diff --git "a/zh-cn/application-dev/js-reference/HML\350\257\255\346\263\225\345\217\202\350\200\203.md" b/zh-cn/application-dev/js-reference/js-framework-syntax-hml.md old mode 100755 new mode 100644 similarity index 55% rename from "zh-cn/application-dev/js-reference/HML\350\257\255\346\263\225\345\217\202\350\200\203.md" rename to zh-cn/application-dev/js-reference/js-framework-syntax-hml.md index 13ea4a4b6c580a720fe7e9985aa67d8376129238..e93119376e0d41bd6eedc4db49d12fbe78b9220e --- "a/zh-cn/application-dev/js-reference/HML\350\257\255\346\263\225\345\217\202\350\200\203.md" +++ b/zh-cn/application-dev/js-reference/js-framework-syntax-hml.md @@ -1,16 +1,18 @@ -# HML语法参考 - -- [页面结构](#zh-cn_topic_0000001059340504_section1062764791514) -- [数据绑定](#zh-cn_topic_0000001059340504_s8821c158917c48098219013e69129d1b) -- [事件绑定](#zh-cn_topic_0000001059340504_s30850b61328e4359910467ab33b3e07d) -- [列表渲染](#zh-cn_topic_0000001059340504_sb777d6d807fa43fea9be400b2600425b) -- [条件渲染](#zh-cn_topic_0000001059340504_sf7f6eab2105a4030a1f34149417d6fc5) -- [逻辑控制块](#zh-cn_topic_0000001059340504_s185169def14340fcbb12c3375cb0f0bb) -- [模板引用](#zh-cn_topic_0000001059340504_section1388145672114) +# HML语法参考 + +- [页面结构](#zh-cn_topic_0000001127284830_section1062764791514) +- [数据绑定](#zh-cn_topic_0000001127284830_s8821c158917c48098219013e69129d1b) +- [普通事件绑定](#zh-cn_topic_0000001127284830_section193010312423) +- [冒泡事件绑定5+](#zh-cn_topic_0000001127284830_section368561455815) +- [捕获事件绑定5+](#zh-cn_topic_0000001127284830_section5527539989) +- [列表渲染](#zh-cn_topic_0000001127284830_sb777d6d807fa43fea9be400b2600425b) +- [条件渲染](#zh-cn_topic_0000001127284830_sf7f6eab2105a4030a1f34149417d6fc5) +- [逻辑控制块](#zh-cn_topic_0000001127284830_s185169def14340fcbb12c3375cb0f0bb) +- [模板引用](#zh-cn_topic_0000001127284830_section1388145672114) HML（OpenHarmony Markup Language）是一套类HTML的标记语言，通过组件，事件构建出页面的内容。页面具备数据绑定、事件绑定、列表渲染、条件渲染和逻辑控制等高级能力。 -## 页面结构 +## 页面结构 ``` @@ -22,7 +24,7 @@ HML（OpenHarmony Markup Language）是一套类HTML的标记语言，通过组 ``` -## 数据绑定 +## 数据绑定 ``` @@ -43,63 +45,33 @@ export default { } ``` ->![](public_sys-resources/icon-note.gif) **说明：** +>![](../public_sys-resources/icon-note.gif) **说明：** >- 针对数组内的数据修改，请使用splice方法生效数据绑定变更。 ->- hml中的js表达式不支持ES6语法。 +>- hml文件中的js表达式不支持ES6语法。 -## 事件绑定 +## 普通事件绑定 -事件绑定的回调函数接收一个事件对象参数，可以通过访问该事件对象获取事件信息。 +事件通过'on'或者'@'绑定在组件上，当组件触发事件时会执行JS文件中对应的事件处理函数。 -``` - -
- -
- -
- -
- -
- -
- -
- -
- -
-
-``` +事件支持的写法有： -``` -// xxx.js -export default { - data: { - obj: '', - }, - clickfunc: function(e) { - this.obj = 'Hello World'; - console.log(e); - }, -} -``` +- "funcName"：funcName为事件回调函数名（在JS文件中定义相应的函数实现）。 +- "funcName\(a,b\)"：函数参数例如a，b可以是常量，或者是在JS文件中的data中定义的变量（前面不用写this.）。 -- 示例 +- **示例** ```
- {{count}} -
- - - - - - -
+ {{count}} +
+ + + + + + +
``` @@ -155,7 +127,83 @@ export default { ``` -## 列表渲染 +## 冒泡事件绑定5+ + +冒泡事件绑定包括： + +- 绑定冒泡事件：on:\{event\}.bubble。on:\{event\}等价于on:\{event\}.bubble。 +- 绑定并阻止冒泡事件向上冒泡：grab:\{event\}.bubble。grab:\{event\}等价于grab:\{event\}.bubble。 + + >![](../public_sys-resources/icon-note.gif) **说明：** + >详细冒泡事件说明参见[通用事件](component/js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)章节。 + + +- **示例** + + ``` +
+ +
+
+ +
+
+ +
+
+ +
+
+
+ ``` + + ``` + // xxx.js + export default { + clickfunc: function(e) { + console.log(e); + }, + touchstartfuc: function(e) { + console.log(e); + }, + } + ``` + + +>![](../public_sys-resources/icon-note.gif) **说明：** +>- 采用旧写法\(onclick\)的事件绑定在最小API版本6以下时采用不冒泡处理，在最小API版本为6及6以上时采用冒泡处理。 + +## 捕获事件绑定5+ + +Touch触摸类事件支持捕获，捕获阶段位于冒泡阶段之前，捕获事件先到达父组件然后达到子组件。 + +捕获事件绑定包括： + +- 绑定捕获事件：on:\{event\}.capture。 +- 绑定并阻止事件向下传递：grab:\{event\}.capture。 + +- **示例** + + ``` +
+ +
+ +
+
+ ``` + + ``` + // xxx.js + export default { + touchstartfuc: function(e) { + console.log(e); + }, + } + ``` + + +## 列表渲染 ``` @@ -201,12 +249,12 @@ tid属性主要用来加速for循环的重渲染，旨在列表中的数据有 - for="v in array"：其中v为自定义的元素变量，元素索引默认为$idx。 - for="\(i, v\) in array"：其中元素索引为i，元素变量为v，遍历数组对象array。 ->![](public_sys-resources/icon-note.gif) **说明：** +>![](../public_sys-resources/icon-note.gif) **说明：** >- 数组中的每个元素必须存在tid指定的数据属性，否则运行时可能会导致异常。 >- 数组中被tid指定的属性要保证唯一性，如果不是则会造成性能损耗。比如，示例中只有id和name可以作为tid字段，因为它们属于唯一字段。 >- tid不支持表达式。 -## 条件渲染 +## 条件渲染 条件渲染分为2种：if/elif/else和show。两种写法的区别在于：第一种写法里if为false时，组件不会在vdom中构建，也不会渲染，而第二种写法里show为false时虽然也不渲染，但会在vdom中构建；另外，当使用if/elif/else写法时，节点必须是兄弟节点，否则编译无法通过。实例如下： @@ -215,8 +263,8 @@ tid属性主要用来加速for循环的重渲染，旨在列表中的数据有
- Hello-One - Hello-Two + Hello-TV + Hello-Wearable Hello-World
``` @@ -238,11 +286,11 @@ tid属性主要用来加速for循环的重渲染，旨在列表中的数据有 // xxx.js export default { data: { - show: false, + visible: false, display: true, }, toggleShow: function() { - this.show = !this.show; + this.visible = !this.visible; }, toggleDisplay: function() { this.display = !this.display; @@ -250,7 +298,7 @@ export default { } ``` -优化渲染优化：show方法。当show为真时，节点正常渲染；当为假时，仅仅设置display样式为none。 +优化渲染优化：show方法。当show为true时，节点正常渲染；当为false时，仅仅设置display样式为none。 ``` @@ -285,10 +333,10 @@ export default { } ``` ->![](public_sys-resources/icon-note.gif) **说明：** +>![](../public_sys-resources/icon-note.gif) **说明：** >禁止在同一个元素上同时设置for和if属性。 -## 逻辑控制块 +## 逻辑控制块控制块使得循环渲染和条件渲染变得更加灵活；block在构建时不会被当作真实的节点编译。注意block标签只支持for和if属性。 @@ -320,9 +368,9 @@ export default { } ``` -## 模板引用 +## 模板引用 -HML可以通过element引用模板文件，详细介绍可参考[自定义组件](基本用法.md#ZH-CN_TOPIC_0000001162494627)章节。 +HML可以通过element引用模板文件，详细介绍可参考[自定义组件](component/js-components-custom-basic-usage.md#ZH-CN_TOPIC_0000001163932218)章节。 ``` diff --git a/zh-cn/application-dev/js-reference/js-framework-syntax-js.md b/zh-cn/application-dev/js-reference/js-framework-syntax-js.md new file mode 100644 index 0000000000000000000000000000000000000000..ad369995d2279c66b81e902e7f251b32e9c174c2 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-framework-syntax-js.md @@ -0,0 +1,528 @@ +# JS语法参考 + +- [语法](#zh-cn_topic_0000001173164729_s6ca2e99746664509961f65b82d11ab58) +- [对象](#zh-cn_topic_0000001173164729_s7493791622a248fbb2e03703149bb3b5) +- [方法](#zh-cn_topic_0000001173164729_s4e1ff24ec78e41948502d8977d24e44c) +- [获取DOM元素](#zh-cn_topic_0000001173164729_section1560185062215) +- [获取ViewModel](#zh-cn_topic_0000001173164729_section13798143717421) + +JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语言。基于JavaScript语言的动态化能力，可以使应用更加富有表现力，具备更加灵活的设计能力。下面讲述JS文件的编译和运行的支持情况。 + +## 语法 + +支持ES6语法。 + +- 模块声明 + + 使用import方法引入功能模块： + + ``` + import router from '@system.router'; + ``` + +- 代码引用 + + 使用import方法导入js代码： + + ``` + import utils from '../../common/utils.js'; + ``` + + +## 对象 + +- 应用对象 + + +

名称

支持组件

+

支持组件

描述

+

描述

:disabled

+

:disabled

支持disabled属性的组件

+

支持disabled属性的组件

表示disabled属性变为true时的元素（不支持动画样式的设置）。

+

表示disabled属性变为true时的元素（不支持动画样式的设置）。

:active

+

:active

支持click事件的组件

+

支持click事件的组件

表示被用户激活的元素，如：被用户按下的按钮、被激活的tab-bar页签（不支持动画样式的设置）。

+

表示被用户激活的元素，如：被用户按下的按钮、被激活的tab-bar页签（不支持动画样式的设置）。

:waiting

+

:waiting

button

+

button

表示waiting属性为true的元素（不支持动画样式的设置）。

+

表示waiting属性为true的元素（不支持动画样式的设置）。

:checked

+

:checked

input[type="checkbox"、type="radio"]、 switch

+

input[type="checkbox"、type="radio"]、 switch

表示checked属性为true的元素（不支持动画样式的设置）。

+

表示checked属性为true的元素（不支持动画样式的设置）。
+ + + + + + + + + +

属性

+

类型

+

描述

+

$def

+

Object

+

使用this.$app.$def获取在app.js中暴露的对象。

+
说明：

应用对象不支持数据绑定，需主动触发UI更新。

+
+
+ + 示例代码 + + ``` + // app.js + export default { + onCreate() { + console.info('AceApplication onCreate'); + }, + onDestroy() { + console.info('AceApplication onDestroy'); + }, + globalData: { + appData: 'appData', + appVersion: '2.0', + }, + globalMethod() { + console.info('This is a global method!'); + this.globalData.appVersion = '3.0'; + } + }; + ``` + + ``` + // index.js页面逻辑代码 + export default { + data: { + appData: 'localData', + appVersion:'1.0', + }, + onInit() { + this.appData = this.$app.$def.globalData.appData; + this.appVersion = this.$app.$def.globalData.appVersion; + }, + invokeGlobalMethod() { + this.$app.$def.globalMethod(); + }, + getAppVersion() { + this.appVersion = this.$app.$def.globalData.appVersion; + } + } + ``` + +- 页面对象 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

属性

+

类型

+

描述

+

data

+

Object/Function

+

页面的数据模型，类型是对象或者函数，如果类型是函数，返回值必须是对象。属性名不能以$或_开头，不要使用保留字for, if, show, tid。

+

data与private和public不能重合使用。

+

$refs

+

Object

+

持有注册过ref 属性的DOM元素或子组件实例的对象。示例见获取DOM元素。

+

private

+

Object

+

页面的数据模型，private下的数据属性只能由当前页面修改。

+

public

+

Object

+

页面的数据模型，public下的数据属性的行为与data保持一致。

+

props

+

Array/Object

+

props用于组件之间的通信，可以通过<tag xxxx='value'>方式传递给组件；props名称必须用小写，不能以$或_开头，不要使用保留字for, if, show, tid。目前props的数据类型不支持Function。示例见自定义组件。

+

computed

+

Object

+

用于在读取或设置进行预先处理，计算属性的结果会被缓存。计算属性名不能以$或_开头，不要使用保留字。示例见自定义组件。

+
+ + +## 方法 + +- 数据方法 + + + + + + + + + + + + + + + + +

方法

+

参数

+

描述

+

$set

+

key: string, value: any

+

添加新的数据属性或者修改已有数据属性。

+

用法：

+

this.$set('key',value)：添加数据属性。

+

$delete

+

key: string

+

删除数据属性。

+

用法：

+

this.$delete('key')：删除数据属性。

+
+ + 示例代码 + + ``` + export default { + data: { + keyMap: { + OS: 'OpenHarmony', + Version: '2.0', + }, + }, + getAppVersion() { + this.$set('keyMap.Version', '3.0'); + console.info("keyMap.Version = " + this.keyMap.Version); // keyMap.Version = 3.0 + + this.$delete('keyMap'); + console.info("keyMap.Version = " + this.keyMap); // log print: keyMap.Version = undefined + } + } + ``` + +- 公共方法 + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

方法

+

参数

+

描述

+

$element

+

id: string

+

获得指定id的组件对象，如果无指定id，则返回根组件对象。示例见获取DOM元素。

+

用法：

+

<div id='xxx'></div>

+
  • this.$element('xxx')：获得id为xxx的组件对象。
  • this.$element()：获得根组件对象。
+

$rootElement

+

无

+

获取根组件对象。

+

用法：this.$rootElement().scrollTo({ duration: 500, position: 300 }), 页面在500ms内滚动300px。

+

$root

+

无

+

获得顶级ViewModel实例。获取ViewModel示例。

+

$parent

+

无

+

获得父级ViewModel实例。获取ViewModel示例。

+

$child

+

id: string

+

获得指定id的子级自定义组件的ViewModel实例。获取ViewModel示例。

+

用法：

+

this.$child('xxx') ：获取id为xxx的子级自定义组件的ViewModel实例。

+
+ +- 事件方法 + + + + + + + + + + + + +

方法

+

参数

+

描述

+

$watch

+

data: string, callback: string | Function

+

观察data中的属性变化，如果属性值改变，触发绑定的事件。示例见自定义组件。

+

用法：

+

this.$watch('key', callback)

+
+ +- 页面方法 + + + + + + + + + + + + +

方法

+

参数

+

描述

+

scrollTo6+

+

scrollPageParam: ScrollPageParam

+

将页面滚动到目标位置，可以通过ID选择器指定或者滚动距离指定。

+
+ + **表 1** ScrollPageParam6+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

描述

+

position

+

number

+

-

+

指定滚动位置。

+

id

+

string

+

-

+

指定需要滚动到的元素id。

+

duration

+

number

+

300

+

指定滚动时长，单位为毫秒。

+

timingFunction

+

string

+

ease

+

指定滚动动画曲线，可选值参考

+

animation-timing-function。

+

complete

+

() => void

+

-

+

指定滚动完成后需要执行的回调函数。

+
+ + 示例： + + ``` + this.$rootElement.scrollTo({position: 0}) + this.$rootElement.scrollTo({id: 'id', duration: 200, timingFunction: 'ease-in', complete: ()=>void}) + ``` + + +## 获取DOM元素 + +1. 通过$refs获取DOM元素 + + ``` + +
+ +
+ ``` + + ``` + // index.js + export default { + data: { + images: [ + { src: '/common/frame1.png' }, + { src: '/common/frame2.png' }, + { src: '/common/frame3.png' }, + ], + }, + handleClick() { + const animator = this.$refs.animator; // 获取ref属性为animator的DOM元素 + const state = animator.getState(); + if (state === 'paused') { + animator.resume(); + } else if (state === 'stopped') { + animator.start(); + } else { + animator.pause(); + } + }, + }; + ``` + +2. 通过$element获取DOM元素 + + ``` + +
+ +
+ ``` + + ``` + // index.js + export default { + data: { + images: [ + { src: '/common/frame1.png' }, + { src: '/common/frame2.png' }, + { src: '/common/frame3.png' }, + ], + }, + handleClick() { + const animator = this.$element('animator'); // 获取id属性为animator的DOM元素 + const state = animator.getState(); + if (state === 'paused') { + animator.resume(); + } else if (state === 'stopped') { + animator.start(); + } else { + animator.pause(); + } + }, + }; + ``` + + +## 获取ViewModel + +根节点所在页面： + +``` + + +
+
+ {{text}} + +
+
+``` + +``` +// root.js +export default { + data: { + text: 'I am root!', + }, +} +``` + +自定义parent组件： + +``` + + +
+ parent component click + hello parent component! + +
+``` + +``` +// parent.js +export default { + data: { + show: false, + text: 'I am parent component!', + }, + parentClicked () { + this.show = !this.show; + console.info('parent component get parent text'); + console.info(`${this.$parent().text}`); + console.info("parent component get child function"); + console.info(`${this.$child('selfDefineChild').childClicked()}`); + }, +} +``` + +自定义child组件： + +``` + +
+ child component clicked + hello child component +
+``` + +``` +// child.js +export default { + data: { + show: false, + text: 'I am child component!', + }, + childClicked () { + this.show = !this.show; + console.info('child component get parent text'); + console.info('${this.$parent().text}'); + console.info('child component get root text'); + console.info('${this.$root().text}'); + }, +} +``` + diff --git a/zh-cn/application-dev/js-reference/js-framework-syntax.md b/zh-cn/application-dev/js-reference/js-framework-syntax.md new file mode 100644 index 0000000000000000000000000000000000000000..11a63eca728169ebfbd85fae47c12d68bce14508 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-framework-syntax.md @@ -0,0 +1,9 @@ +# 语法 + +- **[HML语法参考](js-framework-syntax-hml.md)** + +- **[CSS语法参考](js-framework-syntax-css.md)** + +- **[JS语法参考](js-framework-syntax-js.md)** + + diff --git a/zh-cn/application-dev/js-reference/js-framework.md b/zh-cn/application-dev/js-reference/js-framework.md new file mode 100644 index 0000000000000000000000000000000000000000..86e6da84724f53aacc1409d408416f9a565939b7 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-framework.md @@ -0,0 +1,17 @@ +# 框架说明 + +- **[文件组织](js-framework-file.md)** + +- **[js标签配置](js-framework-js-tag.md)** + +- **[app.js](js-framework-js-file.md)** + +- **[语法](js-framework-syntax.md)** + +- **[生命周期](js-framework-lifecycle.md)** + +- **[资源限定与访问](js-framework-resource-restriction.md)** + +- **[多语言支持](js-framework-multiple-languages.md)** + + diff --git a/zh-cn/application-dev/js-reference/label.md b/zh-cn/application-dev/js-reference/label.md deleted file mode 100755 index 031e4c539deb2a1a23b7283de959286a48ae25e3..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/label.md +++ /dev/null @@ -1,778 +0,0 @@ -# label - -- [权限列表](#zh-cn_topic_0000001058830742_section11257113618419) -- [子组件](#zh-cn_topic_0000001058830742_s0cb8fdf50d8a4f78a86bb76deec468fc) -- [属性](#zh-cn_topic_0000001058830742_s6c8b111b1d2e40b3b356f03389dad9cf) -- [事件](#zh-cn_topic_0000001058830742_section57301035448) -- [样式](#zh-cn_topic_0000001058830742_s5ed16ca4a52b4f8eb4c1a1e04ea9c2c4) -- [示例](#zh-cn_topic_0000001058830742_section1018514431132) - -为input、button、textarea组件定义相应的标注，点击该标注时会触发绑定组件的点击效果。 - -## 权限列表 - -无 - -## 子组件 - -不支持。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

target

-

string

-

-

-

否

-

目标组件的属性id值。

-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

disabled

-

boolean

-

false

-

否

-

当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-
- -## 事件 - -不支持。 - -## 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

color

-

<color>

-

#e5000000

-

否

-

设置文本的颜色。

-

font-size

-

<length>

-

30px

-

否

-

设置文本的尺寸。

-

allow-scale

-

boolean

-

true

-

否

-

文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

-
说明：

如果需要支持动态生效，请参看config描述文件中config-changes标签。

-
-

letter-spacing

-

<length>

-

0px

-

否

-

设置文本的字符间距。

-

font-style

-

string

-

normal

-

否

-

设置文本的字体样式，可选值为：

-
  • normal：标准的字体样式；
  • italic：斜体的字体样式。
-

font-weight

-

number | string

-

normal

-

否

-

设置文本的字体粗细，number类型取值[100, 900]，默认为400，取值越大，字体越粗。

-
说明：

number取值必须为100的整数倍。

-
-

string类型取值支持如下四个值：lighter、normal、bold、bolder。

-

text-decoration

-

string

-

none

-

否

-

设置文本的文本修饰，可选值为：

-
  • underline：文字下划线修饰；
  • line-through：穿过文本的修饰线n
  • none：标准文本。
-

text-align

-

string

-

start

-

否

-

设置文本的文本对齐方式，可选值为：

-
  • left：文本左对齐；
  • center：文本居中对齐；
  • right：文本右对齐；
  • start：根据文字书写相同的方向对齐；
  • end：根据文字书写相反的方向对齐。
-
说明：

如文本宽度未指定大小，文本的宽度和父容器的宽度大小相等的情况下，对齐效果可能会不明显。

-
-

line-height

-

<length>

-

0px

-

否

-

设置文本的文本行高，设置为0px时，不限制文本行高，自适应字体大小。

-

text-overflow

-

string

-

clip

-

否

-

在设置了最大行数的情况下生效，可选值为：

-
  • clip：将文本根据父容器大小进行裁剪显示；
  • ellipsis：根据父容器大小显示，显示不下的文本用省略号代替。需配合max-lines使用。
-

font-family

-

string

-

sans-serif

-

否

-

设置文本的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

-

max-lines

-

number

-

-

-

否

-

设置文本的最大行数。

-

min-font-size

-

<length>

-

-

-

否

-

文本最小字号，需要和文本最大字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。

-

max-font-size

-

<length>

-

-

-

否

-

文本最大字号，需要和文本最小字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。

-

font-size-step

-

<length>

-

1px

-

否

-

文本动态调整字号时的步长，需要设置最小，最大字号样式生效。

-

prefer-font-sizes

-

<array>

-

-

-

否

-

预设的字号集合，在动态尺寸调整时，优先使用预设字号集合中的字号匹配设置的最大行数，如果预设字号集合未设置，则使用最大最小和步长调整字号。针对仍然无法满足最大行数要求的情况，使用text-overflow设置项进行截断，设置预设尺寸集后，font-size、max-font-size、min-font-size和font-size-step不生效。

-

如：prefer-font-sizes: 12px,14px,16px

-

width

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的宽度。

-

缺省时使用元素自身内容需要的宽度。

-

height

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的高度。

-

缺省时使用元素自身内容需要的高度。

-

padding

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的内边距属性。

-
该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    -

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    -

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    -

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下内边距属性。

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端内边距属性。

-

margin

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

-

  • 只有一个值时，这个值会被指定给全部的四个边。

    -

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    -

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    -

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下外边距属性。

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端外边距属性。

-

border

-

-

-

0

-

否

-

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

-

border-style

-

string

-

solid

-

否

-

使用简写属性设置所有边框的样式，可选值为：

-
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
-
  • solid：显示为一条实线。
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

否

-

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

-

border-[left|top|right|bottom]

-

-

-

-

-

否

-

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

-

border-width

-

<length>

-

0

-

否

-

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

否

-

分别设置左、上、右、下四个边框的宽度。

-

border-color

-

<color>

-

black

-

否

-

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

否

-

分别设置左、上、右、下四个边框的颜色。

-

border-radius

-

<length>

-

-

-

否

-

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，border-[left|top|right|bottom]-style，如果要设置color、width和style，需要将四个方向一起设置（border-width、border-color、border-style）。

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

否

-

分别设置左上，右上，右下和左下四个角的圆角半径。

-

background

-

<linear-gradient>

-

-

-

否

-

仅支持设置渐变样式，与background-color、background-image不兼容。

-

background-color

-

<color>

-

-

-

否

-

设置背景颜色。

-

background-image

-

string

-

-

-

否

-

设置背景图片。与background-color、background不兼容；支持本地图片资源地址。

-

示例：

-
  • background-image: url("/common/background.png")
-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

否

-

设置背景图片的大小。

-
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    -
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
-

background-repeat

-

string

-

repeat

-

否

-

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

-
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

否

-
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    -
-
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>
-

opacity

-

number

-

1

-

否

-

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

-

display

-

string

-

-

flex

-

否

-

确定一个元素所产生的框的类型，可选值为：

-
  • flex：弹性布局。
  • none：不渲染此元素。
-

visibility

-

string

-

-

visible

-

否

-

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

-
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
-
说明：

visibility和display样式都设置时，仅display生效

-
-

flex

-

-

-

-

-

否

-

规定当前组件如何适应父组件中的可用空间。

-

flex可以指定1个，2个5+或3个5+值。

-

单值语法：

-
  • 一个无单位数：用来设置组件的flex-grow
  • 一个有效的宽度值5+：用来设置组件的flex-basis
-

双值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow。第二个值是以下之一：

-
  • 一个无单位数：用来设置组件的flex-shrink
  • 一个有效的宽度值：用来设置组件的flex-basis
-

三值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow；第二个值必须是无单位数，用来设置组件的flex-shrink；第三个值必须是一个有效的宽度值，用来设置组件的flex-basis。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-grow

-

number

-

0

-

否

-

设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-shrink

-

number

-

1

-

否

-

设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-basis

-

<length>

-

-

-

-

否

-

设置组件在主轴方向上的初始大小。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

position

-

string

-

relative

-

否

-

设置元素的定位类型，不支持动态变更。

-
  • fixed：相对与整个界面进行定位。
  • absolute：相对于父元素进行定位。
  • relative：相对于其正常位置进行定位。
-
说明：

absolute属性仅在父容器为<div>、<stack>时生效。

-
-

[left|top|right|bottom]

-

<length>

-

-

-

否

-

left|top|right|bottom需要配合position样式使用，来确定元素的偏移位置。

-
  • left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  • top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  • right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
  • bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
-
- -## 示例 - -``` - -
-
- - -
-
- - -
-
- - -
-
-``` - -``` -/*xxx.css */ -.container { - flex-direction: column; - align-items: center; -} -.row { - flex-direction: row; -} -.label { - width: 200px; -} -.input { - margin-left: 100px; - margin-top: 50px; -} -``` - -![](figures/label.png) - diff --git a/zh-cn/application-dev/js-reference/list-item-group.md b/zh-cn/application-dev/js-reference/list-item-group.md deleted file mode 100755 index e8dde970d346943eabdf377f2c9de11f34d9aebc..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/list-item-group.md +++ /dev/null @@ -1,768 +0,0 @@ -# list-item-group - -- [权限列表](#zh-cn_topic_0000001058830738_section11257113618419) -- [子组件](#zh-cn_topic_0000001058830738_section9288143101012) -- [属性](#zh-cn_topic_0000001058830738_section2907183951110) -- [事件](#zh-cn_topic_0000001058830738_section3892191911214) -- [样式](#zh-cn_topic_0000001058830738_section16337145611017) -- [示例](#zh-cn_topic_0000001058830738_section1159816598218) - -<[list](list.md#ZH-CN_TOPIC_0000001162494595)\>的子组件，用来展示分组，宽度默认充满list组件。 - ->![](public_sys-resources/icon-note.gif) **说明：** ->- 使用该组件时父元素list组件的样式columns必须为1，否则功能异常。 ->- 由于父元素list组件的align-items默认样式为stretch，该组件宽度默认充满list组件。设置父元素list组件的align-items样式为非stretch来生效自定义宽度。 - -## 权限列表 - -无 - -## 子组件 - -仅支持<[list-item](list-item.md#ZH-CN_TOPIC_0000001115814816)\>。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

type

-

string

-

default

-

否

-

list-item-group类型，同一list支持多种type的list-item-group，相同type的list-item-group需要确保渲染后的视图布局也完全相同，当type固定时，使用show属性代替if属性，确保视图布局不变。

-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

disabled

-

boolean

-

false

-

否

-

当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-
- -通用属性中的id用来标识一个group。list中相关的函数的入参以及事件的信息皆以此标识一个唯一的group。 - -## 事件 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

groupclick

-

{ groupid: string }

-

group点击事件。

-

groupid：被点击的group的id。

-

groupcollapse

-

{ groupid: string }

-

group收拢事件。

-

groupid：收拢的group的id。

-

当不输入参数或者groupid为空时收拢所有分组。

-

groupexpand

-

{ groupid: string }

-

group展开事件。

-

groupid：展开的group的id。

-

当不输入参数或者groupid为空时展开所有分组。

-

touchstart

-

TouchEvent

-

手指刚触摸屏幕时触发该事件。

-

touchmove

-

TouchEvent

-

手指触摸屏幕后移动时触发该事件。

-

touchcancel

-

TouchEvent

-

手指触摸屏幕中动作被打断时触发该事件。

-

touchend

-

TouchEvent

-

手指触摸结束离开屏幕时触发该事件。

-

click

-

-

-

点击动作触发该事件。

-

longpress

-

-

-

长按动作触发该事件。

-

swipe5+

-

SwipeEvent

-

组件上快速滑动后触发。

-
- -## 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

flex-direction

-

string

-

row

-

否

-

flex容器主轴方向。可选项有：

-
  • column：垂直方向从上到下
  • row：水平方向从左到右
-

justify-content

-

string

-

flex-start

-

否

-

flex容器当前行的主轴对齐格式。可选项有：

-
  • flex-start：项目位于容器的开头。
  • flex-end：项目位于容器的结尾。
  • center：项目位于容器的中心。
  • space-between：项目位于各行之间留有空白的容器内。
  • space-around：项目位于各行之前、之间、之后都留有空白的容器内。
  • space-evenly5+: 均匀排列每个元素，每个元素之间的间隔相等。
-

display

-

string

-

flex

-

否

-

确定一个元素所产生的框的类型，可选值为：

-
  • flex：弹性布局。
  • none：不渲染此元素。
-

width

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的宽度。

-

缺省时使用元素自身内容需要的宽度。

-

height

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的高度。

-

缺省时使用元素自身内容需要的高度。

-

padding

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的内边距属性。

-
该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    -

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    -

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    -

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下内边距属性。

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端内边距属性。

-

margin

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

-

  • 只有一个值时，这个值会被指定给全部的四个边。

    -

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    -

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    -

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下外边距属性。

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端外边距属性。

-

border

-

-

-

0

-

否

-

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

-

border-style

-

string

-

solid

-

否

-

使用简写属性设置所有边框的样式，可选值为：

-
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
-
  • solid：显示为一条实线。
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

否

-

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

-

border-[left|top|right|bottom]

-

-

-

-

-

否

-

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

-

border-width

-

<length>

-

0

-

否

-

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

否

-

分别设置左、上、右、下四个边框的宽度。

-

border-color

-

<color>

-

black

-

否

-

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

否

-

分别设置左、上、右、下四个边框的颜色。

-

border-radius

-

<length>

-

-

-

否

-

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，border-[left|top|right|bottom]-style，如果要设置color、width和style，需要将四个方向一起设置（border-width、border-color、border-style）。

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

否

-

分别设置左上，右上，右下和左下四个角的圆角半径。

-

background

-

<linear-gradient>

-

-

-

否

-

仅支持设置渐变样式，与background-color、background-image不兼容。

-

background-color

-

<color>

-

-

-

否

-

设置背景颜色。

-

background-image

-

string

-

-

-

否

-

设置背景图片。与background-color、background不兼容；支持本地图片资源地址。

-

示例：

-
  • background-image: url("/common/background.png")
-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

否

-

设置背景图片的大小。

-
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    -
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
-

background-repeat

-

string

-

repeat

-

否

-

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

-
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

否

-
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    -
-
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>
-

opacity

-

number

-

1

-

否

-

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

-

display

-

string

-

-

flex

-

否

-

确定一个元素所产生的框的类型，可选值为：

-
  • flex：弹性布局。
  • none：不渲染此元素。
-

visibility

-

string

-

-

visible

-

否

-

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

-
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
-
说明：

visibility和display样式都设置时，仅display生效

-
-

flex

-

-

-

-

-

否

-

规定当前组件如何适应父组件中的可用空间。

-

flex可以指定1个，2个5+或3个5+值。

-

单值语法：

-
  • 一个无单位数：用来设置组件的flex-grow
  • 一个有效的宽度值5+：用来设置组件的flex-basis
-

双值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow。第二个值是以下之一：

-
  • 一个无单位数：用来设置组件的flex-shrink
  • 一个有效的宽度值：用来设置组件的flex-basis
-

三值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow；第二个值必须是无单位数，用来设置组件的flex-shrink；第三个值必须是一个有效的宽度值，用来设置组件的flex-basis。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-grow

-

number

-

0

-

否

-

设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-shrink

-

number

-

1

-

否

-

设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-basis

-

<length>

-

-

-

-

否

-

设置组件在主轴方向上的初始大小。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-
- -## 示例 - -``` - -
- - -
-
- - -
-
- - -
-
- - - - -
- One---{{listgroup.value}} -
- - -
- Primary---{{listgroup.value}} -
- - - -
-``` - -``` -/* xxx.css */ -.doc-page { - flex-direction: column; -} - -.top-list-item { - width:100%; - background-color:#D4F2E7; -} - -.item-div { - flex-direction:column; - align-items:center; - justify-content:space-around; - height:240px; -} - -.item-child { - width:100%; - height:60px; - justify-content:space-around; - align-items:center; -} - -.item-group-child { - justify-content: center; - align-items: center; - width:100%; -} -``` - -``` -// xxx.js -import prompt from '@system.prompt'; - -export default { - data: { - direction: 'column', - list: [] - }, - onInit() { - this.list = [] - this.listAdd = [] - for (var i = 1; i <= 3; i++) { - var dataItem = { - value: 'GROUP' + i, - }; - this.list.push(dataItem); - } - }, - collapseOne(e) { - this.$element('mylist').collapseGroup({ - groupid: 'GROUP1' - }) - }, - expandOne(e) { - this.$element('mylist').expandGroup({ - groupid: 'GROUP1' - }) - }, - collapseAll(e) { - this.$element('mylist').collapseGroup() - }, - expandAll(e) { - this.$element('mylist').expandGroup() - }, - collapse(e) { - prompt.showToast({ - message: 'Close ' + e.groupid - }) - }, - expand(e) { - prompt.showToast({ - message: 'Open ' + e.groupid - }) - } -} -``` - -![](figures/list6.gif) - diff --git a/zh-cn/application-dev/js-reference/list-item.md b/zh-cn/application-dev/js-reference/list-item.md deleted file mode 100755 index 43f60ce56e3095e494c6480a3cd5fdc60ac62d85..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/list-item.md +++ /dev/null @@ -1,678 +0,0 @@ -# list-item - -- [权限列表](#zh-cn_topic_0000001058670839_section11257113618419) -- [子组件](#zh-cn_topic_0000001058670839_section9288143101012) -- [属性](#zh-cn_topic_0000001058670839_section2907183951110) -- [事件](#zh-cn_topic_0000001058670839_section26172053201913) -- [样式](#zh-cn_topic_0000001058670839_section5775351116) - -<[list](list.md#ZH-CN_TOPIC_0000001162494595)\>的子组件，用来展示列表具体item。 - ->![](public_sys-resources/icon-note.gif) **说明：** ->由于父元素list组件的align-items默认样式为stretch，该组件宽度默认充满list组件。设置父元素list组件的align-items样式为非stretch来生效自定义宽度。 - -## 权限列表 - -无 - -## 子组件 - -支持。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

type

-

string

-

default

-

否

-

list-item类型，默认值为default，同一list中可以包含多种type的list-item，相同type的list-item需要确保渲染后的视图布局也相同，如果type固定，则使用show属性代替if属性，确保视图布局不变。

-

primary

-

boolean

-

false

-

否

-

设置为true表示该item是group中的主item，即收拢时显示的item。如果有多个primary，以第一个为准。如果没有标记为primary的item，则以第一个item为主item。

-

section

-

string

-

-

-

否

-

当前item的匹配字符串，如不设置则为空。不支持动态修改。group内只有主item设置有效。

-

sticky

-

string

-

none

-

否

-

设置当前item是否为吸顶item以及其吸顶消失的效果，当前仅支持纵向list，group内部的item不可吸顶，设置该属性无效。

-
  • none：当前item不吸顶。
  • normal：当前item吸顶，消失效果滑动消失。
  • opacity：当前item吸顶，消失效果渐隐消失。
-

clickeffect5+

-

boolean

-

true

-

否

-

设置当前item是否有点击动效。

-
  • false：item点击时无点击动效。
  • true：item点击时有点击动效。
-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

disabled

-

boolean

-

false

-

否

-

当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-
- -## 事件 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

sticky

-

{ state: boolean }

-

吸顶组件回调事件。

-

value: false表示当前item处于非吸顶状态；

-

value: true表示当前item处于吸顶状态；

-

说明：仅当item设置sticky属性时支持注册此事件。

-

touchstart

-

TouchEvent

-

手指刚触摸屏幕时触发该事件。

-

touchmove

-

TouchEvent

-

手指触摸屏幕后移动时触发该事件。

-

touchcancel

-

TouchEvent

-

手指触摸屏幕中动作被打断时触发该事件。

-

touchend

-

TouchEvent

-

手指触摸结束离开屏幕时触发该事件。

-

click

-

-

-

点击动作触发该事件。

-

longpress

-

-

-

长按动作触发该事件。

-

swipe5+

-

SwipeEvent

-

组件上快速滑动后触发。

-
- -## 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

column-span

-

<number>

-

1

-

否

-

当前的list-item需要在list中占据的列的数量，默认占一列，仅在list为多列时生效。

-

width

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的宽度。

-

缺省时使用元素自身内容需要的宽度。

-

height

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的高度。

-

缺省时使用元素自身内容需要的高度。

-

padding

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的内边距属性。

-
该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    -

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    -

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    -

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下内边距属性。

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端内边距属性。

-

margin

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

-

  • 只有一个值时，这个值会被指定给全部的四个边。

    -

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    -

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    -

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下外边距属性。

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端外边距属性。

-

border

-

-

-

0

-

否

-

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

-

border-style

-

string

-

solid

-

否

-

使用简写属性设置所有边框的样式，可选值为：

-
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
-
  • solid：显示为一条实线。
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

否

-

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

-

border-[left|top|right|bottom]

-

-

-

-

-

否

-

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

-

border-width

-

<length>

-

0

-

否

-

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

否

-

分别设置左、上、右、下四个边框的宽度。

-

border-color

-

<color>

-

black

-

否

-

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

否

-

分别设置左、上、右、下四个边框的颜色。

-

border-radius

-

<length>

-

-

-

否

-

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，border-[left|top|right|bottom]-style，如果要设置color、width和style，需要将四个方向一起设置（border-width、border-color、border-style）。

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

否

-

分别设置左上，右上，右下和左下四个角的圆角半径。

-

background

-

<linear-gradient>

-

-

-

否

-

仅支持设置渐变样式，与background-color、background-image不兼容。

-

background-color

-

<color>

-

-

-

否

-

设置背景颜色。

-

background-image

-

string

-

-

-

否

-

设置背景图片。与background-color、background不兼容；支持本地图片资源地址。

-

示例：

-
  • background-image: url("/common/background.png")
-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

否

-

设置背景图片的大小。

-
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    -
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
-

background-repeat

-

string

-

repeat

-

否

-

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

-
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

否

-
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    -
-
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>
-

opacity

-

number

-

1

-

否

-

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

-

display

-

string

-

-

flex

-

否

-

确定一个元素所产生的框的类型，可选值为：

-
  • flex：弹性布局。
  • none：不渲染此元素。
-

visibility

-

string

-

-

visible

-

否

-

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

-
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
-
说明：

visibility和display样式都设置时，仅display生效

-
-

flex

-

-

-

-

-

否

-

规定当前组件如何适应父组件中的可用空间。

-

flex可以指定1个，2个5+或3个5+值。

-

单值语法：

-
  • 一个无单位数：用来设置组件的flex-grow
  • 一个有效的宽度值5+：用来设置组件的flex-basis
-

双值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow。第二个值是以下之一：

-
  • 一个无单位数：用来设置组件的flex-shrink
  • 一个有效的宽度值：用来设置组件的flex-basis
-

三值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow；第二个值必须是无单位数，用来设置组件的flex-shrink；第三个值必须是一个有效的宽度值，用来设置组件的flex-basis。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-grow

-

number

-

0

-

否

-

设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-shrink

-

number

-

1

-

否

-

设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-basis

-

<length>

-

-

-

-

否

-

设置组件在主轴方向上的初始大小。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

position

-

string

-

relative

-

否

-

设置元素的定位类型，不支持动态变更。

-
  • fixed：相对与整个界面进行定位。
  • absolute：相对于父元素进行定位。
  • relative：相对于其正常位置进行定位。
-
说明：

absolute属性仅在父容器为<div>、<stack>时生效。

-
-

[left|top|right|bottom]

-

<length>

-

-

-

否

-

left|top|right|bottom需要配合position样式使用，来确定元素的偏移位置。

-
  • left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  • top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  • right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
  • bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
-
- diff --git a/zh-cn/application-dev/js-reference/list.md b/zh-cn/application-dev/js-reference/list.md deleted file mode 100755 index 2694c05904eae02269f3a9533876b5d5cf874cb9..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/list.md +++ /dev/null @@ -1,1149 +0,0 @@ -# list - -- [权限列表](#zh-cn_topic_0000001058670742_section11257113618419) -- [子组件](#zh-cn_topic_0000001058670742_section9288143101012) -- [属性](#zh-cn_topic_0000001058670742_section2907183951110) -- [事件](#zh-cn_topic_0000001058670742_section434813139467) -- [样式](#zh-cn_topic_0000001058670742_section5775351116) -- [方法](#zh-cn_topic_0000001058670742_section47669296127) -- [示例](#zh-cn_topic_0000001058670742_section24931424488) - -列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。 - -## 权限列表 - -无 - -## 子组件 - -仅支持<[list-item-group](list-item-group.md#ZH-CN_TOPIC_0000001162414615)\>和<[list-item](list-item.md#ZH-CN_TOPIC_0000001115814816)\>。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

scrollpage

-

boolean

-

false

-

否

-

设置为true时，将 list 顶部页面中非 list 部分随 list 一起滑出可视区域，当list方向为row时，不支持此属性。

-

cachedcount

-

number

-

0

-

否

-

长列表延迟加载时list-item最少缓存数量。

-

可视区域外缓存的list-item数量少于该值时，会触发requestitem事件。

-

scrollbar

-

string

-

off

-

否

-

侧边滑动栏的显示模式（当前只支持纵向）：

-
  • off：不显示。
  • auto：按需显示(触摸时显示，2s后消失)。
  • on：常驻显示。
-

scrolleffect

-

string

-

spring

-

否

-

滑动效果，目前支持如下滑动效果：

-
  • spring：弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹。
  • fade：渐隐物理动效，滑动到边缘后展示一个波浪形的渐隐，根据速度和滑动距离的变化渐隐也会发送一定的变化。
  • no：滑动到边缘后无效果。
-

indexer

-

boolean | Array<string>

-

false

-

否

-

是否展示侧边栏快速字母索引栏。设置为true或者自定义索引时，索引栏会显示在列表右边界处。示例：

-

"indexer" : "true"表示使用默认字母索引表。

-

"indexer" : "false"表示无索引。

-

"indexer" : ["#", "A", ".", "E", ".", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]表示自定义索引表。自定义时"#"必须要存在。

-
说明：
  • indexer属性生效需要flex-direction属性配合设置为column，且columns属性设置为1。
  • 点击索引条进行列表项索引需要list-item子组件配合设置相应的section属性。
-
-

indexermulti5+

-

boolean

-

false

-

否

-

是否开启索引条多语言功能。

-

indexer为false时不生效。

-

indexerbubble5+

-

boolean

-

true

-

否

-

是否开启索引切换的气泡提示。

-

indexer为false时不生效。

-

divider5+

-

boolean

-

false

-

否

-

item是否自带分隔线。

-

其样式参考样式列表的divider-color、divider-height、divider-length、divider-origin。

-

shapemode

-

string

-

default

-

否

-

侧边滑动栏的形状类型。

-
  • default：不指定，跟随主题；
  • rect：矩形；
  • round：圆形。
-

updateeffect

-

boolean

-

false

-

否

-

用于设置当list内部的item发生删除或新增时是否支持动效。

-
  • false：新增删除item时无过渡动效。
  • true：新增删除item时播放过程动效。
-

chainanimation5+

-

boolean

-

false

-

否

-

用于设置当前list是否启用链式联动动效，开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果：list内的list-item间隔一定距离，在基本的滑动交互行为下，主动对象驱动从动对象进行联动，驱动效果遵循弹簧物理动效。

-
  • false：不启用链式联动
  • true：启用链式联动
    说明：
    • 不支持动态修改。
    • 如同时配置了indexer，链式动效不生效。
    • 如配置了链式动效，list-item的sticky不生效。
    -
    -
-

initialindex

-

number

-

0

-

否

-

用于设置当前List初次加载时视口起始位置显示的item，默认为0，即显示第一个item，如设置的序号超过了最后一个item的序号，则设置不生效，当同时设置了initialoffset属性时，当前属性不生效。当indexer为true或者scrollpage为true时，不生效。

-

initialoffset

-

<length>

-

0

-

否

-

用于设置当前List初次加载时视口的起始偏移量，偏移量无法超过当前List可滑动的范围，如果超过会被截断为可滑动范围的极限值。当indexer为true或者scrollpage为true时，不生效。

-

selected5+

-

string

-

-

-

否

-

指定当前列表中被选中激活的项，可选值为list-item的section属性值。

-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

disabled

-

boolean

-

false

-

否

-

当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-
- -## 事件 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

indexerchange5+

-

{ local: booleanValue }

-

多语言索引条切换事件，仅当indexer属性为true，indexermulti为true时生效。booleanValue可能值为true或者false：

-
  • true: 当前展示本地索引。
  • false: 当前展示字母索引。
-

scroll

-

{ scrollX: scrollXValue, scrollY: scrollYValue, scrollState: stateValue }

-

列表滑动的偏移量和状态回调。

-

stateValue: 0表示列表滑动已经停止。

-

stateValue: 1表示列表正在用户触摸状态下滑动。

-

stateValue: 2表示列表正在用户松手状态下滑动。

-

scrollbottom

-

-

-

当前列表已滑动到底部位置。

-

scrolltop

-

-

-

当前列表已滑动到顶部位置。

-

scrollend

-

-

-

列表滑动已经结束。

-

scrolltouchup

-

-

-

手指已经抬起且列表仍在惯性滑动。

-

requestitem

-

-

-

请求创建新的list-item。

-

长列表延迟加载时，可视区域外缓存的list-item数量少于cachedcount时，会触发该事件。

-

touchstart

-

TouchEvent

-

手指刚触摸屏幕时触发该事件。

-

touchmove

-

TouchEvent

-

手指触摸屏幕后移动时触发该事件。

-

touchcancel

-

TouchEvent

-

手指触摸屏幕中动作被打断时触发该事件。

-

touchend

-

TouchEvent

-

手指触摸结束离开屏幕时触发该事件。

-

click

-

-

-

点击动作触发该事件。

-

longpress

-

-

-

长按动作触发该事件。

-

swipe5+

-

SwipeEvent

-

组件上快速滑动后触发。

-
- -## 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

divider-color5+

-

<color>

-

transparent

-

否

-

item分隔线颜色，仅当list的divider属性为true时生效。

-

divider-height5+

-

<length>

-

1

-

否

-

item分隔线高度，仅当list的divider属性为true时生效。

-

divider-length5+

-

<length>

-

主轴宽度

-

否

-

item分隔线长度，不设置时最大长度为主轴宽度，具体长度取决于divider-origin，仅当list的divider属性为true时生效。

-

divider-origin5+

-

<length>

-

0

-

否

-

item分隔线相对于item主轴起点位置的偏移量，仅当list的divider属性为true时生效。

-

flex-direction

-

string

-

-

column

-

否

-

设置flex容器主轴的方向，指定flex项如何放置在flex容器中，可选值为：

-
  • column：主轴为纵向。
  • row：主轴为横向。
-

其他组件默认值为row，在list组件中默认值为column。

-

columns

-

number

-

1

-

否

-

list交叉轴方向的显示列数，默认为1列。

-
说明：

设置多列时，在list交叉轴上进行均分，每一列大小相同。

-
-

align-items

-

string

-

stretch

-

否

-

list每一列交叉轴上的对齐格式，可选值为：

-
  • stretch：弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。
  • flex-start：元素向交叉轴起点对齐。
  • flex-end：元素向交叉轴终点对齐。
  • center：元素在交叉轴居中。
    说明：

    align-items样式作用在每一列的子元素上，列与列之间采用均分方式布局。

    -
    -
-

item-extent

-

<length> | <percentage>

-

-

-

否

-

设置内部item为固定大小，设置为百分比格式时，指相对于list的视口主轴方向长度的百分比。

-

fade-color

-

<color>

-

grey

-

否

-

设置渐隐物理动效的颜色。当滑动效果设置为渐隐物理动效时生效。

-

width

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的宽度。

-

缺省时使用元素自身内容需要的宽度。

-

height

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的高度。

-

缺省时使用元素自身内容需要的高度。

-

padding

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的内边距属性。

-
该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    -

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    -

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    -

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下内边距属性。

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端内边距属性。

-

margin

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

-

  • 只有一个值时，这个值会被指定给全部的四个边。

    -

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    -

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    -

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下外边距属性。

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端外边距属性。

-

border

-

-

-

0

-

否

-

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

-

border-style

-

string

-

solid

-

否

-

使用简写属性设置所有边框的样式，可选值为：

-
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
-
  • solid：显示为一条实线。
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

否

-

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

-

border-[left|top|right|bottom]

-

-

-

-

-

否

-

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

-

border-width

-

<length>

-

0

-

否

-

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

否

-

分别设置左、上、右、下四个边框的宽度。

-

border-color

-

<color>

-

black

-

否

-

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

否

-

分别设置左、上、右、下四个边框的颜色。

-

border-radius

-

<length>

-

-

-

否

-

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，border-[left|top|right|bottom]-style，如果要设置color、width和style，需要将四个方向一起设置（border-width、border-color、border-style）。

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

否

-

分别设置左上，右上，右下和左下四个角的圆角半径。

-

background

-

<linear-gradient>

-

-

-

否

-

仅支持设置渐变样式，与background-color、background-image不兼容。

-

background-color

-

<color>

-

-

-

否

-

设置背景颜色。

-

background-image

-

string

-

-

-

否

-

设置背景图片。与background-color、background不兼容；支持本地图片资源地址。

-

示例：

-
  • background-image: url("/common/background.png")
-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

否

-

设置背景图片的大小。

-
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    -
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
-

background-repeat

-

string

-

repeat

-

否

-

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

-
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

否

-
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    -
-
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>
-

opacity

-

number

-

1

-

否

-

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

-

display

-

string

-

-

flex

-

否

-

确定一个元素所产生的框的类型，可选值为：

-
  • flex：弹性布局。
  • none：不渲染此元素。
-

visibility

-

string

-

-

visible

-

否

-

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

-
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
-
说明：

visibility和display样式都设置时，仅display生效

-
-

flex

-

-

-

-

-

否

-

规定当前组件如何适应父组件中的可用空间。

-

flex可以指定1个，2个5+或3个5+值。

-

单值语法：

-
  • 一个无单位数：用来设置组件的flex-grow
  • 一个有效的宽度值5+：用来设置组件的flex-basis
-

双值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow。第二个值是以下之一：

-
  • 一个无单位数：用来设置组件的flex-shrink
  • 一个有效的宽度值：用来设置组件的flex-basis
-

三值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow；第二个值必须是无单位数，用来设置组件的flex-shrink；第三个值必须是一个有效的宽度值，用来设置组件的flex-basis。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-grow

-

number

-

0

-

否

-

设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-shrink

-

number

-

1

-

否

-

设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-basis

-

<length>

-

-

-

-

否

-

设置组件在主轴方向上的初始大小。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

position

-

string

-

relative

-

否

-

设置元素的定位类型，不支持动态变更。

-
  • fixed：相对与整个界面进行定位。
  • absolute：相对于父元素进行定位。
  • relative：相对于其正常位置进行定位。
-
说明：

absolute属性仅在父容器为<div>、<stack>时生效。

-
-

[left|top|right|bottom]

-

<length>

-

-

-

否

-

left|top|right|bottom需要配合position样式使用，来确定元素的偏移位置。

-
  • left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  • top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  • right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
  • bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
-
- -## 方法 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

scrollTo

-

{ index: number(指定位置) }

-

list滑动到指定index的item位置。

-

scrollTop

-

{ smooth: boolean }

-

smooth缺省为false，表示直接滚动到顶部。

-

smooth为true，表示平滑滚动到顶部。

-

scrollBottom

-

{ smooth: boolean }

-

smooth缺省为false，表示直接滚动到底部。

-

smooth为true，表示平滑滚动到底部。

-

scrollPage

-

{ reverse: boolean, smooth: boolean }

-

reverse缺省值为false，表示下一页，无完整页则滚动到底部。

-

reverse为true，表示上一页，无完整页则滚动到顶部。

-

smooth缺省值为false，表示直接滚动一页。

-

smooth为true，表示平滑滚动一页。

-

scrollArrow

-

{ reverse: boolean, smooth: boolean }

-

reverse缺省值为false，表示向底部方向滑动一段距离，无足够距离则滚动到底部。

-

reverse为true，表示向顶部方向滑动一段距离，无足够距离则滚动到顶部。

-

smooth缺省值为false，表示直接滚动。

-

smooth为true，表示平滑滚动。

-

collapseGroup

-

{ groupid: string }

-

收拢指定的group。

-

groupid：需要收拢的group的id。

-

当groupid未指定时收拢所有的group。

-

expandGroup

-

{ groupid: string }

-

展开指定的group。

-

groupid：需要展开的group的id。

-

当groupid未指定时展开所有的group。

-

currentOffset

-

-

-

返回当前滑动的偏移量。返回值类型是Object，返回值说明请见表2。

-
- -**表 1** ListScrollByOptions - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

是否必选

-

默认值

-

备注

-

dx

-

number

-

否

-

0

-

水平方向滑动的偏移量，单位px。

-

dy

-

number

-

否

-

0

-

垂直方向滑动的偏移量，单位px。

-

smooth

-

boolean

-

否

-

true

-

列表位置跳转时是否有滑动动画。

-
- -**表 2** currentOffset返回对象属性说明 - - - - - - - - - - - - - - - - -

名称

-

类型

-

备注

-

x

-

number

-

当前x轴滑动偏移量，单位px。

-

y

-

number

-

当前y轴滑动偏移量，单位px。

-
- -## 示例 - -``` - -
- - - {{$item.title}} - {{$item.date}} - - -
-``` - -``` -// index.js -export default { - data: { - todolist: [{ - title: '刷题', - date: '2021-12-31 10:00:00', - }, { - title: '看电影', - date: '2021-12-31 20:00:00', - }], - }, -} -``` - -``` -/* index.css */ -.container { - display: flex; - justify-content: center; - align-items: center; - left: 0px; - top: 0px; - width: 454px; - height: 454px; -} -.todo-wraper { - width: 454px; - height: 300px; -} -.todo-item { - width: 454px; - height: 80px; - flex-direction: column; -} -.todo-title { - width: 454px; - height: 40px; - text-align: center; -} -``` - -![](figures/zh-cn_image_0000001082299162.png) - diff --git a/zh-cn/application-dev/js-reference/marquee.md b/zh-cn/application-dev/js-reference/marquee.md deleted file mode 100755 index aecd3f236a09e615431d3fe8a0dac8cb077e375d..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/marquee.md +++ /dev/null @@ -1,809 +0,0 @@ -# marquee - -- [权限列表](#zh-cn_topic_0000001058340505_section11257113618419) -- [子组件](#zh-cn_topic_0000001058340505_section9288143101012) -- [属性](#zh-cn_topic_0000001058340505_section2907183951110) -- [事件](#zh-cn_topic_0000001058340505_section3892191911214) -- [样式](#zh-cn_topic_0000001058340505_section14898114221220) -- [方法](#zh-cn_topic_0000001058340505_section47669296127) -- [示例](#zh-cn_topic_0000001058340505_section198211501414) - -跑马灯组件，用于展示一段单行滚动的文字。 - -## 权限列表 - -无 - -## 子组件 - -不支持。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

scrollamount

-

number

-

6

-

否

-

跑马灯每次滚动时移动的最大长度。

-

loop

-

number

-

-1

-

否

-

跑马灯滚动的次数。如果未指定，则默认值为-1，当该值小于等于零时表示marquee将连续滚动。

-

direction

-

string

-

left

-

否

-

设置跑马灯的文字滚动方向，可选值为left和right。

-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

disabled

-

boolean

-

false

-

否

-

当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-
- -## 事件 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

bounce

-

-

-

当文本滚动到末尾时触发该事件。

-

finish

-

-

-

当完成滚动次数时触发该事件。需要在 loop 属性值大于 0 时触发。

-

start

-

-

-

当文本滚动开始时触发该事件。

-

touchstart

-

TouchEvent

-

手指刚触摸屏幕时触发该事件。

-

touchmove

-

TouchEvent

-

手指触摸屏幕后移动时触发该事件。

-

touchcancel

-

TouchEvent

-

手指触摸屏幕中动作被打断时触发该事件。

-

touchend

-

TouchEvent

-

手指触摸结束离开屏幕时触发该事件。

-

click

-

-

-

点击动作触发该事件。

-

longpress

-

-

-

长按动作触发该事件。

-

swipe5+

-

SwipeEvent

-

组件上快速滑动后触发。

-
- -## 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

color

-

<color>

-

#e5000000

-

否

-

设置跑马灯中文字的文本颜色。

-

font-size

-

<length>

-

37.5

-

否

-

设置跑马灯中文字的文本尺寸。

-

allow-scale

-

boolean

-

true

-

否

-

设置跑马灯中文字的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

-
说明：

如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。

-
-

font-weight

-

number | string

-

normal

-

否

-

设置跑马灯中文字的字体的粗细，见text组件font-weight的样式属性。

-

font-family

-

string

-

sans-serif

-

否

-

设置跑马灯中文字的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

-

width

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的宽度。

-

缺省时使用元素自身内容需要的宽度。

-

height

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的高度。

-

缺省时使用元素自身内容需要的高度。

-

padding

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的内边距属性。

-
该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    -

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    -

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    -

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下内边距属性。

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端内边距属性。

-

margin

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

-

  • 只有一个值时，这个值会被指定给全部的四个边。

    -

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    -

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    -

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下外边距属性。

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端外边距属性。

-

border

-

-

-

0

-

否

-

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

-

border-style

-

string

-

solid

-

否

-

使用简写属性设置所有边框的样式，可选值为：

-
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
-
  • solid：显示为一条实线。
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

否

-

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

-

border-[left|top|right|bottom]

-

-

-

-

-

否

-

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

-

border-width

-

<length>

-

0

-

否

-

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

否

-

分别设置左、上、右、下四个边框的宽度。

-

border-color

-

<color>

-

black

-

否

-

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

否

-

分别设置左、上、右、下四个边框的颜色。

-

border-radius

-

<length>

-

-

-

否

-

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，border-[left|top|right|bottom]-style，如果要设置color、width和style，需要将四个方向一起设置（border-width、border-color、border-style）。

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

否

-

分别设置左上，右上，右下和左下四个角的圆角半径。

-

background

-

<linear-gradient>

-

-

-

否

-

仅支持设置渐变样式，与background-color、background-image不兼容。

-

background-color

-

<color>

-

-

-

否

-

设置背景颜色。

-

background-image

-

string

-

-

-

否

-

设置背景图片。与background-color、background不兼容；支持本地图片资源地址。

-

示例：

-
  • background-image: url("/common/background.png")
-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

否

-

设置背景图片的大小。

-
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    -
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
-

background-repeat

-

string

-

repeat

-

否

-

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

-
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

否

-
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    -
-
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>
-

opacity

-

number

-

1

-

否

-

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

-

display

-

string

-

-

flex

-

否

-

确定一个元素所产生的框的类型，可选值为：

-
  • flex：弹性布局。
  • none：不渲染此元素。
-

visibility

-

string

-

-

visible

-

否

-

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

-
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
-
说明：

visibility和display样式都设置时，仅display生效

-
-

flex

-

-

-

-

-

否

-

规定当前组件如何适应父组件中的可用空间。

-

flex可以指定1个，2个5+或3个5+值。

-

单值语法：

-
  • 一个无单位数：用来设置组件的flex-grow
  • 一个有效的宽度值5+：用来设置组件的flex-basis
-

双值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow。第二个值是以下之一：

-
  • 一个无单位数：用来设置组件的flex-shrink
  • 一个有效的宽度值：用来设置组件的flex-basis
-

三值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow；第二个值必须是无单位数，用来设置组件的flex-shrink；第三个值必须是一个有效的宽度值，用来设置组件的flex-basis。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-grow

-

number

-

0

-

否

-

设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-shrink

-

number

-

1

-

否

-

设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-basis

-

<length>

-

-

-

-

否

-

设置组件在主轴方向上的初始大小。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

position

-

string

-

relative

-

否

-

设置元素的定位类型，不支持动态变更。

-
  • fixed：相对与整个界面进行定位。
  • absolute：相对于父元素进行定位。
  • relative：相对于其正常位置进行定位。
-
说明：

absolute属性仅在父容器为<div>、<stack>时生效。

-
-

[left|top|right|bottom]

-

<length>

-

-

-

否

-

left|top|right|bottom需要配合position样式使用，来确定元素的偏移位置。

-
  • left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  • top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  • right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
  • bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
-
- -## 方法 - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

start

-

-

-

开始滚动。

-

stop

-

-

-

停止滚动。

-
- -## 示例 - -``` - -
- {{marqueeCustomData}} -
- - -
-
-``` - -``` -/* xxx.css */ -.container { - flex-direction: column; - justify-content: center; - align-items: center; - background-color: #ffffff; -} -.customMarquee { - width: 100%; - height: 80px; - padding: 10px; - margin: 20px; - border: 4px solid #ff8888; - border-radius: 20px; - font-size: 40px; - color: #ff8888; - font-weight: bolder; - font-family: serif; - background-color: #ffdddd; -} -.content { - flex-direction: row; -} -.controlButton { - flex-grow: 1; -} -``` - -``` -// xxx.js -export default { - data: { - scrollAmount: 30, - loop: 3, - marqueeDir: 'left', - marqueeCustomData: 'Custom marquee', - }, - onMarqueeBounce: function() { - console.log("onMarqueeBounce"); - }, - onMarqueeStart: function() { - console.log("onMarqueeStart"); - }, - onMarqueeFinish: function() { - console.log("onMarqueeFinish"); - }, - onStartClick (evt) { - this.$element('customMarquee').start(); - }, - onStopClick (evt) { - this.$element('customMarquee').stop(); - } -} -``` - -![](figures/sample1.gif) - diff --git a/zh-cn/application-dev/js-reference/menu.md b/zh-cn/application-dev/js-reference/menu.md deleted file mode 100755 index 22a64ad5f2c00b8073a3497ccf338a95d59c1f51..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/menu.md +++ /dev/null @@ -1,296 +0,0 @@ -# menu - -- [权限列表](#zh-cn_topic_0000001058562841_section11257113618419) -- [子组件](#zh-cn_topic_0000001058562841_section9288143101012) -- [属性](#zh-cn_topic_0000001058562841_section2907183951110) -- [事件](#zh-cn_topic_0000001058562841_section5624519222) -- [样式](#zh-cn_topic_0000001058562841_section5775351116) -- [方法](#zh-cn_topic_0000001058562841_section47669296127) -- [示例](#zh-cn_topic_0000001058562841_section54636714136) - -提供菜单组件，作为临时性弹出窗口，用于展示用户可执行的操作。 - -## 权限列表 - -无 - -## 子组件 - -<[option](option.md#ZH-CN_TOPIC_0000001115974742)\>子组件。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

target

-

string

-

-

-

否

-

目标元素选择器。当使用目标元素选择器后，点击目标元素会自动弹出menu菜单。弹出菜单位置优先为目标元素右下角，当右边可视空间不足时会适当左移，当下方空间不足时会适当上移。

-

type

-

string

-

click

-

否

-

目标元素触发弹窗的方式，可选值有：

-
  • click：点击弹窗。
  • longpress：长按弹窗。
-

title

-

string

-

-

-

否

-

菜单标题内容。

-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-
- -## 事件 - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

selected

-

{ value:value }

-

菜单中某个值被点击选中时触发，返回的value值为option组件的value属性。

-

cancel

-

-

-

用户取消。

-
- -## 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

text-color

-

<color>

-

-

-

否

-

设置菜单的文本颜色。

-

font-size

-

<length>

-

30px

-

否

-

设置菜单的文本尺寸。

-

allow-scale

-

boolean

-

true

-

否

-

设置菜单的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

-
说明：

如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。

-
-

letter-spacing

-

<length>

-

0

-

否

-

设置菜单的字符间距。

-

font-style

-

string

-

normal

-

否

-

设置菜单的字体样式。见text组件font-style的样式属性。

-

font-weight

-

number | string

-

normal

-

否

-

设置菜单的字体粗细。见text组件font-weight的样式属性。

-

font-family

-

string

-

sans-serif

-

否

-

设置菜单的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

-
- -## 方法 - -支持如下方法。 - - - - - - - - - - - - -

名称

-

参数

-

描述

-

show

-

{ x:x, y:y }

-

显示menu菜单。(x, y)指定菜单弹窗位置。其中x表示距离可见区域左边沿的 X 轴坐标，不包含任何滚动偏移，y表示距离可见区域上边沿的 Y 轴坐标，不包含任何滚动偏移以及状态栏。菜单优先显示在弹窗位置右下角，当右边可视空间不足时会适当左移，当下方空间不足时会适当上移。

-
- -## 示例 - -``` - -
- Show popup menu. - - - - - -
-``` - -``` -/* xxx.css */ -.container { - flex-direction: column; - align-items: flex-start; - justify-content: center; -} -.title-text { - margin: 20px; -} -``` - -``` -// xxx.js -import prompt from '@system.prompt'; -export default { - onMenuSelected(e) { - prompt.showToast({ - message: e.value - }) - }, - onTextClick() { - this.$element("apiMenu").show({x:280,y:120}); - } -} -``` - -![](figures/menu13.gif) - diff --git a/zh-cn/application-dev/js-reference/option.md b/zh-cn/application-dev/js-reference/option.md deleted file mode 100755 index 49ec1ad88c42eb82f026786fccfa5b4545d5ed3a..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/option.md +++ /dev/null @@ -1,209 +0,0 @@ -# option - -- [权限列表](#zh-cn_topic_0000001058830805_section11257113618419) -- [子组件](#zh-cn_topic_0000001058830805_section9288143101012) -- [属性](#zh-cn_topic_0000001058830805_section2907183951110) -- [事件](#zh-cn_topic_0000001058830805_section175135119475) -- [样式](#zh-cn_topic_0000001058830805_section5775351116) - -当作为<[select](select.md#ZH-CN_TOPIC_0000001115974746)\>的子组件时用来展示下拉选择的具体项目。 - -当作为<[menu](menu.md#ZH-CN_TOPIC_0000001162414625)\>的子组件时用来展示弹出菜单的具体项目。 - -## 权限列表 - -无 - -## 子组件 - -不支持。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

selected

-

boolean

-

-

-

否

-

选择项是否为下拉列表的默认项，仅在父组件是select时生效。

-

value

-

string

-

-

-

是

-

选择项的值，作为select、menu父组件的selected事件中的返回值。

-
说明：

option选项的UI展示值需要放在标签内，如<option value="10">十月</option>

-
-

icon

-

string

-

-

-

否

-

图标资源路径，该图标展示在选项文本前，图标格式为jpg，png和svg。

-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

disabled(Rich)5+

-

boolean

-

false

-

否

-

当前选择项是否被禁用，在禁用场景下，组件将无法响应用户交互。

-
- -## 事件 - -不支持。 - -## 样式 - -支持如下样式。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

color

-

<color>

-

#e6000000

-

否

-

选择项的文本颜色

-

font-size

-

<length>

-

16px

-

否

-

选择项的文本尺寸

-

allow-scale

-

boolean

-

true

-

否

-

选择项的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

-
说明：

如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。

-
-

font-weight

-

number | string

-

normal

-

否

-

选择项的字体粗细，见text组件font-weight的样式属性。

-

text-decoration

-

string

-

none

-

否

-

选择项的文本修饰，见text组件text-decoration的样式属性。

-

font-family

-

string

-

sans-serif

-

否

-

选择项的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

-
- diff --git a/zh-cn/application-dev/js-reference/panel.md b/zh-cn/application-dev/js-reference/panel.md deleted file mode 100644 index 09e701dae0c0b78135658e876db10ad48c10efc3..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/panel.md +++ /dev/null @@ -1,598 +0,0 @@ -# panel - -- [权限列表](#zh-cn_topic_0000001062321291_section11257113618419) -- [子组件](#zh-cn_topic_0000001062321291_section19368335134016) -- [属性](#zh-cn_topic_0000001062321291_section1100152194018) -- [样式](#zh-cn_topic_0000001062321291_section1137118175437) -- [事件](#zh-cn_topic_0000001062321291_section1614413538447) -- [方法](#zh-cn_topic_0000001062321291_section165301745164719) -- [示例](#zh-cn_topic_0000001062321291_section36743614499) - -可滑动面板。提供一种轻量的内容展示的窗口，可方便的在不同尺寸中切换。属于弹出式组件。 - ->![](public_sys-resources/icon-note.gif) **说明：** ->从API Version 5 开始支持。 - -## 权限列表 - -无 - -## 子组件 - -支持 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

type

-

string

-

-

-

是

-

设置可滑动面板类型，不可动态变更，可选值有：

-

  • minibar：提供minibar和类全屏展示切换效果。

    -

  • foldable：内容永久展示类，提供大（类全屏）、中（类半屏）、小三种尺寸展示切换效果。

    -

  • temporary：内容临时展示区，提供大（类全屏）、中（类半屏）两种尺寸展示切换效果。

    -
-

mode

-

string

-

full

-

否

-

设置初始状态，mode参数可选值为：

-

  1. mini：类型为minibar和foldable时，为最小状态；类型为temporary，则不生效。

    -

  2. half: 类型为foldable和temporary时，为类半屏状态；类型为minibar，则不生效。

    -

  3. full: 类全屏状态。

    -
-

dragbar

-

boolean

-

true

-

否

-

设置是否存在dragbar，true表示存在，false表示不存在。

-

fullheight

-

<length>

-

-

-

否

-

指定full状态下的高度，默认为屏幕尺寸 - 8px。

-

halfheight

-

<length>

-

-

-

否

-

指定half状态下的高度，默认为屏幕尺寸的一半。

-

miniheight

-

<length>

-

-

-

否

-

指定mini状态下的高度，默认为48px。

-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-
- ->![](public_sys-resources/icon-note.gif) **说明：** ->panel可滑动面板暂不支持渲染属性，包括for、if和show。 - -## 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

padding

-

<length>

-

0

-

否

-
该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    -

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    -

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    -

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

    -
-
-

padding-[left|top|right|bottom]

-

<length>

-

0

-

否

-

设置左、上、右、下内边距属性。

-

padding-[start|end]

-

<length>

-

0

-

否

-

设置起始和末端内边距属性。

-

margin

-

<length>

-

0

-

否

-

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

-

  • 只有一个值时，这个值会被指定给全部的四个边。

    -

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    -

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    -

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    -
-

margin-[left|top|right|bottom]

-

<length>

-

0

-

否

-

设置左、上、右、下外边距属性。

-

margin-[start|end]

-

<length>

-

0

-

否

-

设置起始和末端外边距属性。

-

border

-

-

-

0

-

否

-

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

-

border-style

-

string

-

solid

-

否

-

使用简写属性设置所有边框的样式，可选值为：

-
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
-
  • solid：显示为一条实线。
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

否

-

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

-

border-[left|top|right|bottom]

-

-

-

-

-

否

-

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

-

border-width

-

<length>

-

0

-

否

-

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

否

-

分别设置左、上、右、下四个边框的宽度。

-

border-color

-

<color>

-

black

-

否

-

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

否

-

分别设置左、上、右、下四个边框的颜色。

-

border-radius

-

<length>

-

-

-

否

-

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，如果要设置color和width，需要将四个方向一起设置（border-width、border-color）。

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

否

-

分别设置左上，右上，右下和左下四个角的圆角半径。

-

background

-

<linear-gradient>

-

-

-

否

-

仅支持设置渐变样式，与background-color、background-image不兼容。

-

background-color

-

<color>

-

-

-

否

-

设置背景颜色。

-

background-image

-

string

-

-

-

否

-

设置背景图片。与background-color、background不兼容；支持本地图片资源地址。

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

否

-

设置背景图片的大小。

-
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    -
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
-

background-repeat

-

string

-

repeat

-

否

-

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

-
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

否

-
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    -
-
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>
-

opacity

-

number

-

1

-

否

-

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

-
- -## 事件 - - - - - - - - - - - - -

名称

-

参数

-

描述

-

sizechange

-

{ size: { height: heightLength, width: widthLength }, mode: modeStr }

-

当可滑动面板发生状态变化时触发，mode参数可选值为：

-

  1. mini：类型为minibar和foldable时，处于最小状态；

    -

  2. half: 类型为foldable时，处于类半屏状态；

    -

  3. full: 类全屏状态。

    -
    说明：

    返回的height值为内容区高度值，当dragbar属性为true时，panel本身的高度值为dragbar高度加上内容区高度。

    -
    -
-
- -## 方法 - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

show

-

-

-

弹出panel可滑动面板。

-

close

-

-

-

关闭panel可滑动面板。

-
- -## 示例 - -``` - -
-
- -
- -
-
- Simple panel in {{modeFlag}} mode -
-
- -
-
- -
-``` - -``` -/* xxx.css */ -.doc-page { - flex-direction: column; - justify-content: center; - align-items: center; -} -.btn-div { - width: 100%; - height: 200px; - flex-direction: column; - align-items: center; - justify-content: center; -} -.txt { - color: #000000; - font-weight: bold; - font-size: 39px; -} -.panel-div { - width: 100%; - flex-direction: column; - align-items: center; -} -.inner-txt { - width: 100%; - height: 160px; - flex-direction: column; - align-items: center; - justify-content: center; -} -.inner-btn { - width: 100%; - height: 120px; - justify-content: center; - align-items: center; -} -``` - -``` -// xxx.js -export default { - data: { - modeFlag: "half" - }, - showPanel(e) { - this.$element('simplepanel').show() - }, - closePanel(e) { - this.$element('simplepanel').close() - }, - changeMode(e) { - this.modeFlag = e.mode - } -} -``` - -![](figures/panel6.gif) - diff --git a/zh-cn/application-dev/js-reference/picker-view.md b/zh-cn/application-dev/js-reference/picker-view.md deleted file mode 100755 index 063b075a1b6831b01e8ad408a843c0418b941dd4..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/picker-view.md +++ /dev/null @@ -1,1084 +0,0 @@ -# picker-view - -- [概述](#zh-cn_topic_0000001058988952_section48017573337) -- [子组件](#zh-cn_topic_0000001058988952_section54292411343) -- [属性](#zh-cn_topic_0000001058988952_section121957126347) -- [事件](#zh-cn_topic_0000001058988952_section18155133771112) -- [样式](#zh-cn_topic_0000001058988952_section198061172344) -- [示例](#zh-cn_topic_0000001058988952_section738534695417) - -## 概述 - -嵌入页面的滑动选择器。 - -## 子组件 - -不支持。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

type

-

string

-

text

-

否

-

设置滑动选择器的类型，该属性不支持动态修改，可选项有：

-
  • text：文本选择器。
  • time：时间选择器。
  • date：日期选择器。
  • datetime：日期时间选择器。
  • multi-text：多列文本选择器。
-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

disabled

-

boolean

-

false

-

否

-

当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-
- -文本选择器：type=text - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

range

-

Array

-

-

-

否

-

设置文本选择器的取值范围。

-
说明：

使用时需要使用数据绑定的方式，如range = {{data}}，js中声明相应变量：data：["15", "20", "25"]。

-
-

selected

-

string

-

0

-

否

-

设置文本选择器的默认选择值，该值需要为range的索引。

-

indicatorprefix

-

string

-

-

-

否

-

文本选择器选定值增加的前缀字段。

-

indicatorsuffix

-

string

-

-

-

否

-

文本选择器选定值增加的后缀字段。

-
- -时间选择器：type=time - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

containsecond

-

boolean

-

false

-

否

-

时间选择器是否包含秒。

-

selected

-

string

-

当前时间

-

否

-

设置时间选择器的默认取值，格式为 HH:mm；

-

当包含秒时，格式为HH:mm:ss。

-

hours

-

number

-

-5+

-

否

-

设置时间选择器采用的时间格式，可选值：

-
  • 12：按照12小时制显示，用上午和下午进行区分；
  • 24：按照24小时制显示。
    说明：

    默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。5+

    -
    -
-
- -日期选择器：type=date - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

start

-

<time>

-

1970-1-1

-

否

-

设置日期选择器的起始时间，格式为 YYYY-MM-DD。

-

end

-

<time>

-

2100-12-31

-

否

-

设置日期选择器的结束时间，格式为 YYYY-MM-DD。

-

selected

-

string

-

当前日期

-

否

-

设置日期选择器的默认选择值，格式为 YYYY-MM-DD。

-

lunar5+

-

boolean

-

false

-

否

-

设置日期选择器弹窗界面是否为农历展示。

-
- -日期时间选择器：type=datetime，日期的选择范围为本年的日月。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

selected

-

string

-

当前日期时间

-

否

-

设置日期时间选择器的默认取值，格式有两种，为月日时分MM-DD-HH-mm或者年月日时分YYYY-MM-DD-HH-mm，不设置年时，默认使用当前年，该取值表示选择器弹窗时弹窗界面的默认选择值。

-

hours

-

number

-

-5+

-

否

-

设置日期时间选择器采用的时间格式，可选值：

-
  • 12：按照12小时制显示，用上午和下午进行区分；
  • 24：按照24小时制显示。
    说明：

    默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。5+

    -
    -
-

lunar5+

-

boolean

-

false

-

否

-

设置日期时间选择器弹窗界面是否为农历展示。

-
- -多列文本选择器：type=multi-text - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

columns

-

number

-

-

-

是

-

设置多列文本选择器的列数。

-

range

-

二维Array

-

-

-

否

-

设置多列文本选择器的选择值，该值为二维数组。长度表示多少列，数组的每项表示每列的数据，如 [["a","b"], ["c","d"]]。

-
说明：

使用时需要使用数据绑定的方式，如range = {{data}}，js中声明相应变量：data：[["a","b"], ["c","d"]]。

-
-

selected

-

Array

-

[0,0,0,…]

-

否

-

设置多列文本选择器的默认值，每一列被选中项对应的索引构成的数组，该取值表示选择器弹窗时弹窗界面的默认选择值。

-
- -## 事件 - -type=text： - - - - - - - - - - - - -

名称

-

参数

-

描述

-

change

-

{ newValue: newValue, newSelected: newSelected }

-

文本选择器选定值后触发该事件。

-
- -type=time： - - - - - - - - - - - - -

名称

-

参数

-

描述

-

change

-

{ hour: hour, minute: minute, [second:second] }

-

时间选择器选定值后触发该事件。

-

包含秒时，返回时分秒。

-
- -type=date： - - - - - - - - - - - - -

名称

-

参数

-

描述

-

change

-

{ year:year, month:month, day:day }

-

日期选择器选择值后触发该事件。

-
- -type=datetime： - - - - - - - - - - - - -

名称

-

参数

-

描述

-

change

-

{ year:year, month:month, day:day, hour:hour, minute:minute }

-

日期时间选择器选择值后触发该事件。

-
- -type=multi-text： - - - - - - - - - - - - -

名称

-

参数

-

描述

-

columnchange

-

{ column:column, newValue:newValue, newSelected:newSelected }

-

多列文本选择器某一列的值改变时触发该事件，column：第几列修改，newValue：选中的值，newSelected：选中值对应的索引。

-
- -## 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

color

-

<color>

-

#ffffff

-

否

-

候选项字体颜色。

-

font-size

-

<length>

-

16px

-

否

-

候选项字体尺寸，类型length，单位px。

-

selected-color

-

<color>

-

#ff0a69f7

-

否

-

选中项字体颜色。

-

selected-font-size

-

<length>

-

20px

-

否

-

选中项字体尺寸，类型length，单位px。

-

disappear-color5+

-

<color>

-

#ffffff

-

否

-

渐变消失项的字体颜色。消失项是在一列中有五个选项场景下最上和最下的两个选项。

-

disappear-font-size5+

-

<length>

-

14px

-

否

-

渐变消失项的字体尺寸。消失项是在一列中有五个选项场景下最上和最下的两个选项。

-

font-family

-

string

-

sans-serif

-

否

-

选项字体类型。字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

-

width

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的宽度。

-

缺省时使用元素自身内容需要的宽度。

-

height

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的高度。

-

缺省时使用元素自身内容需要的高度。

-

padding

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的内边距属性。

-
该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    -

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    -

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    -

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下内边距属性。

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端内边距属性。

-

margin

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

-

  • 只有一个值时，这个值会被指定给全部的四个边。

    -

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    -

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    -

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下外边距属性。

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端外边距属性。

-

border

-

-

-

0

-

否

-

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

-

border-style

-

string

-

solid

-

否

-

使用简写属性设置所有边框的样式，可选值为：

-
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
-
  • solid：显示为一条实线。
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

否

-

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

-

border-[left|top|right|bottom]

-

-

-

-

-

否

-

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

-

border-width

-

<length>

-

0

-

否

-

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

否

-

分别设置左、上、右、下四个边框的宽度。

-

border-color

-

<color>

-

black

-

否

-

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

否

-

分别设置左、上、右、下四个边框的颜色。

-

border-radius

-

<length>

-

-

-

否

-

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，border-[left|top|right|bottom]-style，如果要设置color、width和style，需要将四个方向一起设置（border-width、border-color、border-style）。

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

否

-

分别设置左上，右上，右下和左下四个角的圆角半径。

-

background

-

<linear-gradient>

-

-

-

否

-

仅支持设置渐变样式，与background-color、background-image不兼容。

-

background-color

-

<color>

-

-

-

否

-

设置背景颜色。

-

background-image

-

string

-

-

-

否

-

设置背景图片。与background-color、background不兼容；支持本地图片资源地址。

-

示例：

-
  • background-image: url("/common/background.png")
-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

否

-

设置背景图片的大小。

-
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    -
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
-

background-repeat

-

string

-

repeat

-

否

-

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

-
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

否

-
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    -
-
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>
-

opacity

-

number

-

1

-

否

-

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

-

display

-

string

-

-

flex

-

否

-

确定一个元素所产生的框的类型，可选值为：

-
  • flex：弹性布局。
  • none：不渲染此元素。
-

visibility

-

string

-

-

visible

-

否

-

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

-
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
-
说明：

visibility和display样式都设置时，仅display生效

-
-

flex

-

-

-

-

-

否

-

规定当前组件如何适应父组件中的可用空间。

-

flex可以指定1个，2个5+或3个5+值。

-

单值语法：

-
  • 一个无单位数：用来设置组件的flex-grow
  • 一个有效的宽度值5+：用来设置组件的flex-basis
-

双值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow。第二个值是以下之一：

-
  • 一个无单位数：用来设置组件的flex-shrink
  • 一个有效的宽度值：用来设置组件的flex-basis
-

三值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow；第二个值必须是无单位数，用来设置组件的flex-shrink；第三个值必须是一个有效的宽度值，用来设置组件的flex-basis。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-grow

-

number

-

0

-

否

-

设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-shrink

-

number

-

1

-

否

-

设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-basis

-

<length>

-

-

-

-

否

-

设置组件在主轴方向上的初始大小。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

position

-

string

-

relative

-

否

-

设置元素的定位类型，不支持动态变更。

-
  • fixed：相对与整个界面进行定位。
  • absolute：相对于父元素进行定位。
  • relative：相对于其正常位置进行定位。
-
说明：

absolute属性仅在父容器为<div>、<stack>时生效。

-
-

[left|top|right|bottom]

-

<length>

-

-

-

否

-

left|top|right|bottom需要配合position样式使用，来确定元素的偏移位置。

-
  • left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  • top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  • right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
  • bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
-
- -## 示例 - -``` - -
- - Selected：{{time}} - - -
-``` - -``` -/* xxx.css */ -.container { - flex-direction: column; - justify-content: center; - align-items: center; - left: 0px; - top: 0px; - width: 454px; - height: 454px; -} -.title { - font-size: 30px; - text-align: center; -} -.time-picker { - width: 500px; - height: 400px; - margin-top: 20px; -} -``` - -``` -/* xxx.js */ -export default { - data: { - defaultTime: "", - time: "", - }, - onInit() { - this.defaultTime = this.now(); - }, - handleChange(data) { - this.time = this.concat(data.hour, data.minute); - }, - now() { - const date = new Date(); - const hours = date.getHours(); - const minutes = date.getMinutes(); - return this.concat(hours, minutes); - }, - - fill(value) { - return (value > 9 ? "" : "0") + value; - }, - - concat(hours, minutes) { - return `${this.fill(hours)}:${this.fill(minutes)}`; - }, -} -``` - -![](figures/sssssss.png) - diff --git a/zh-cn/application-dev/js-reference/picker.md b/zh-cn/application-dev/js-reference/picker.md deleted file mode 100755 index 5d4afe059bb9f8cb99566f49c19886f0981de837..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/picker.md +++ /dev/null @@ -1,1209 +0,0 @@ -# picker - -- [权限列表](#zh-cn_topic_0000001059340512_section11257113618419) -- [子组件](#zh-cn_topic_0000001059340512_section9288143101012) -- [属性](#zh-cn_topic_0000001059340512_section2907183951110) -- [事件](#zh-cn_topic_0000001059340512_section3892191911214) -- [样式](#zh-cn_topic_0000001059340512_section1299175511712) -- [方法](#zh-cn_topic_0000001059340512_section47669296127) - -滑动选择器组件，类型支持普通选择器，日期选择器，时间选择器，时间日期选择器，多列文本选择器。 - -## 权限列表 - -无 - -## 子组件 - -不支持。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

type

-

string

-

-

-

否

-

该属性值不支持动态修改。可选择项有：

-
  • text：文本选择器。
  • date：日期选择器。
  • time：时间选择器。
  • datetime：日期时间选择器。
  • multi-text：多列文本选择器。
-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

disabled

-

boolean

-

false

-

否

-

当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-
- -普通选择器：type=text - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

range

-

Array

-

-

-

否

-

设置普通选择器的取值范围，如["15", "20", "25"]。

-
说明：

使用时需要使用数据绑定的方式，如range = {{data}}，js中声明相应变量：data：["15", "20", "25"]。

-
-

selected

-

string

-

0

-

否

-

设置普通选择器弹窗的默认取值，取值需要是 range 的索引值，该取值表示选择器弹窗时弹窗界面的默认选择值。

-

value

-

string

-

-

-

否

-

设置普通选择器的值。

-
- -日期选择器：type=date - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

start

-

<time>

-

1970-1-1

-

否

-

设置日期选择器的起始时间，格式为 YYYY-MM-DD。

-

end

-

<time>

-

2100-12-31

-

否

-

设置日期选择器的结束时间，格式为 YYYY-MM-DD。

-

selected

-

string

-

当前日期

-

否

-

设置日期选择器弹窗的默认取值，格式为 YYYY-MM-DD，该取值表示选择器弹窗时弹窗界面的默认选择值。

-

value

-

string

-

-

-

是

-

设置日期选择器的值。

-

lunar5+

-

boolean

-

false

-

否

-

设置日期选择器弹窗界面是否为农历展示。

-
- -时间选择器：type=time - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

containsecond

-

boolean

-

false

-

否

-

设置时间选择器是否包含秒。

-

selected

-

string

-

当前时间

-

否

-

设置时间选择器弹窗的默认取值，格式为 HH:mm；当包含秒时，格式为HH:mm:ss，

-

该取值表示选择器弹窗时弹窗界面的默认选择值。

-

value

-

string

-

-

-

否

-

设置时间选择器的值。

-

hours

-

number

-

-5+

-

否

-

设置时间选择器采用的时间格式，可选值：

-
  • 12：按照12小时制显示，用上午和下午进行区分；
  • 24：按照24小时制显示。
    说明：

    默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。5+

    -
    -
-
- -日期时间选择器：type=datetime，日期的选择范围为本年的日月。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

selected

-

string

-

当前日期时间

-

否

-

设置日期时间选择器弹窗的默认取值，格式有两种，为月日时分MM-DD-HH-mm或者年月日时分YYYY-MM-DD-HH-mm，不设置年时，默认使用当前年，该取值表示选择器弹窗时弹窗界面的默认选择值。

-

value

-

string

-

-

-

是

-

设置日期时间选择器的值。

-

hours

-

number

-

-5+

-

否

-

设置日期时间选择器采用的时间格式，可选值：

-
  • 12：按照12小时制显示，用上午和下午进行区分；
  • 24：按照24小时制显示。
    说明：

    默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。5+

    -
    -
-

lunar5+

-

boolean

-

false

-

否

-

设置日期时间选择器弹窗界面是否为农历展示。

-
- -多列文本选择器：type=multi-text - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

columns

-

number

-

-

-

是

-

设置多列文本选择器的列数。

-

range

-

二维Array

-

-

-

否

-

设置多列文本选择器的选择项，其中range 为二维数组。长度表示多少列，数组的每项表示每列的数据，如 [["a","b"], ["c","d"]]。

-
说明：

使用时需要使用数据绑定的方式，如range = {{data}}，js中声明相应变量：data：[["a","b"], ["c","d"]]。

-
-

selected

-

Array

-

[0,0,0,…]

-

否

-

设置多列文本选择器弹窗的默认值，每一列被选中项对应的索引构成的数组，该取值表示选择器弹窗时弹窗界面的默认选择值。

-

value

-

Array

-

-

-

否

-

设置多列文本选择器的值，每一列被选中项对应的值构成的数组。

-
- -## 事件 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

touchstart

-

TouchEvent

-

手指刚触摸屏幕时触发该事件。

-

touchmove

-

TouchEvent

-

手指触摸屏幕后移动时触发该事件。

-

touchcancel

-

TouchEvent

-

手指触摸屏幕中动作被打断时触发该事件。

-

touchend

-

TouchEvent

-

手指触摸结束离开屏幕时触发该事件。

-

longpress

-

-

-

长按动作触发该事件。

-

swipe5+

-

SwipeEvent

-

组件上快速滑动后触发。

-
- -普通选择器： - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

change

-

{ newValue:newValue, newSelected:newSelected }

-

普通选择器选择值后点击弹窗中的确定按钮时触发该事件（newSelected为索引）。

-

cancel

-

-

-

用户点击弹窗中的取消按钮时触发该事件。

-
- -日期选择器： - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

change

-

{ year:year, month:month, day:day }

-

日期选择器选择值后点击弹窗中的确认按钮时触发该事件。

-
说明：

month值范围为： 0（1月）~11（12月）。5+

-
-

cancel

-

-

-

用户点击弹窗中的取消按钮时触发该事件。

-
- -日期时间选择器： - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

change

-

{ year:year, month:month, day:day, hour:hour, minute:minute}

-

日期时间选择器选择值后点击弹窗中的确认按钮时触发该事件。

-

cancel

-

-

-

用户点击弹窗中的取消按钮时触发该事件。

-
- -时间选择器： - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

change

-

{ hour:hour, minute:minute,

-

[second:second] }

-

时间选择器选择值后点击弹窗中的确认按钮时触发该事件，当使用时分秒时，还包含秒数据。

-

cancel

-

-

-

用户点击弹窗中的取消按钮时触发该事件。

-
- -多列文本选择器： - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

change

-

{ newValue:[newValue1, newValue2, newValue3, …], newSelected:[newSelected1, newSelected2, newSelected3, …] }

-

多列文本选择器选择值后点击弹窗中的确认按钮时触发该事件，其中：

-
  • newValue：被选中项对应的值构成的数组。
  • newSelected：被选中项对应的索引构成的数组，两者的长度和range的长度一致。
-

columnchange

-

{ column:column, newValue:newValue, newSelected:newSelected }

-

多列文本选择器中某一列的值改变时触发该事件，其中：

-
  • column：第几列修改。
  • newValue：选中的值。
  • newSelected：选中值对应的索引。
-

cancel

-

-

-

用户点击弹窗中的取消按钮时触发该事件。

-
- -## 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

text-color

-

<color>

-

#e6000000

-

否

-

选择器的文本颜色。

-

font-size

-

<length>

-

30px

-

否

-

选择器的文本尺寸。

-

allow-scale

-

boolean

-

true

-

否

-

选择器的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

-
说明：

如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。

-
-

letter-spacing

-

<length>

-

0

-

否

-

选择器的字符间距。见text组件的letter-spacing样式属性。

-

text-decoration

-

string

-

-

-

否

-

选择器的文本修饰。见text组件的text-decoration样式属性。

-

font-style

-

string

-

normal

-

否

-

选择器的字体样式。见text组件的font-style样式属性。

-

font-weight

-

number | string

-

normal

-

否

-

选择器的字体粗细。见text组件的font-weight样式属性。

-

font-family

-

string

-

sans-serif

-

否

-

选择器的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

-

line-height

-

<length>

-

0px

-

否

-

选择器的文本行高。

-

column-height5+

-

<length>

-

-

-

否

-

选择器的选择项列表高度。

-

width

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的宽度。

-

缺省时使用元素自身内容需要的宽度。

-

height

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的高度。

-

缺省时使用元素自身内容需要的高度。

-

padding

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的内边距属性。

-
该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    -

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    -

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    -

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下内边距属性。

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端内边距属性。

-

margin

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

-

  • 只有一个值时，这个值会被指定给全部的四个边。

    -

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    -

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    -

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下外边距属性。

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端外边距属性。

-

border

-

-

-

0

-

否

-

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

-

border-style

-

string

-

solid

-

否

-

使用简写属性设置所有边框的样式，可选值为：

-
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
-
  • solid：显示为一条实线。
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

否

-

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

-

border-[left|top|right|bottom]

-

-

-

-

-

否

-

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

-

border-width

-

<length>

-

0

-

否

-

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

否

-

分别设置左、上、右、下四个边框的宽度。

-

border-color

-

<color>

-

black

-

否

-

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

否

-

分别设置左、上、右、下四个边框的颜色。

-

border-radius

-

<length>

-

-

-

否

-

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，border-[left|top|right|bottom]-style，如果要设置color、width和style，需要将四个方向一起设置（border-width、border-color、border-style）。

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

否

-

分别设置左上，右上，右下和左下四个角的圆角半径。

-

background

-

<linear-gradient>

-

-

-

否

-

仅支持设置渐变样式，与background-color、background-image不兼容。

-

background-color

-

<color>

-

-

-

否

-

设置背景颜色。

-

background-image

-

string

-

-

-

否

-

设置背景图片。与background-color、background不兼容；支持本地图片资源地址。

-

示例：

-
  • background-image: url("/common/background.png")
-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

否

-

设置背景图片的大小。

-
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    -
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
-

background-repeat

-

string

-

repeat

-

否

-

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

-
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

否

-
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    -
-
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>
-

opacity

-

number

-

1

-

否

-

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

-

display

-

string

-

-

flex

-

否

-

确定一个元素所产生的框的类型，可选值为：

-
  • flex：弹性布局。
  • none：不渲染此元素。
-

visibility

-

string

-

-

visible

-

否

-

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

-
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
-
说明：

visibility和display样式都设置时，仅display生效

-
-

flex

-

-

-

-

-

否

-

规定当前组件如何适应父组件中的可用空间。

-

flex可以指定1个，2个5+或3个5+值。

-

单值语法：

-
  • 一个无单位数：用来设置组件的flex-grow
  • 一个有效的宽度值5+：用来设置组件的flex-basis
-

双值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow。第二个值是以下之一：

-
  • 一个无单位数：用来设置组件的flex-shrink
  • 一个有效的宽度值：用来设置组件的flex-basis
-

三值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow；第二个值必须是无单位数，用来设置组件的flex-shrink；第三个值必须是一个有效的宽度值，用来设置组件的flex-basis。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-grow

-

number

-

0

-

否

-

设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-shrink

-

number

-

1

-

否

-

设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-basis

-

<length>

-

-

-

-

否

-

设置组件在主轴方向上的初始大小。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

position

-

string

-

relative

-

否

-

设置元素的定位类型，不支持动态变更。

-
  • fixed：相对与整个界面进行定位。
  • absolute：相对于父元素进行定位。
  • relative：相对于其正常位置进行定位。
-
说明：

absolute属性仅在父容器为<div>、<stack>时生效。

-
-

[left|top|right|bottom]

-

<length>

-

-

-

否

-

left|top|right|bottom需要配合position样式使用，来确定元素的偏移位置。

-
  • left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  • top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  • right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
  • bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
-
- -## 方法 - - - - - - - - - - - - -

名称

-

参数

-

描述

-

show

-

-

-

显示 picker。

-
- diff --git a/zh-cn/application-dev/js-reference/piece.md b/zh-cn/application-dev/js-reference/piece.md deleted file mode 100644 index 9efa545246fa9f5865d9e33a0e979cce0c152a7b..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/piece.md +++ /dev/null @@ -1,653 +0,0 @@ -# piece - -- [子组件](#zh-cn_topic_0000001060517794_section9288143101012) -- [属性](#zh-cn_topic_0000001060517794_section2907183951110) -- [样式](#zh-cn_topic_0000001060517794_section17756476592) -- [事件](#zh-cn_topic_0000001060517794_section19137152119) -- [示例](#zh-cn_topic_0000001060517794_section118886119320) - -一种块状的入口，可包含图片和文本。常用于展示收件人，例如：邮件收件人或信息收件人。 - ->![](public_sys-resources/icon-note.gif) **说明：** ->从API Version 5 开始支持。 - -## 子组件 - -无 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

content

-

string

-

-

-

是

-

操作块文本内容。

-

closable

-

boolean

-

false

-

否

-

设置当前操作块是否显示删除图标，当显示删除图标时，点击删除图标会触发close事件。

-

icon

-

string

-

-

-

否

-

操作块删除图标的url，支持本地路径，支持的图片格式为png、jpg和svg。

-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

disabled

-

boolean

-

false

-

否

-

当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-
- -## 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

width

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的宽度。

-

缺省时使用元素自身内容需要的宽度。

-

height

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的高度。

-

缺省时使用元素自身内容需要的高度。

-

padding

-

<length>

-

0

-

否

-
该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    -

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    -

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    -

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

    -
-
-

padding-[left|top|right|bottom]

-

<length>

-

0

-

否

-

设置左、上、右、下内边距属性。

-

padding-[start|end]

-

<length>

-

0

-

否

-

设置起始和末端内边距属性。

-

margin

-

<length>

-

0

-

否

-

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

-

  • 只有一个值时，这个值会被指定给全部的四个边。

    -

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    -

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    -

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    -
-

margin-[left|top|right|bottom]

-

<length>

-

0

-

否

-

设置左、上、右、下外边距属性。

-

margin-[start|end]

-

<length>

-

0

-

否

-

设置起始和末端外边距属性。

-

border

-

-

-

0

-

否

-

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

-

border-style

-

string

-

solid

-

否

-

使用简写属性设置所有边框的样式，可选值为：

-
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
-
  • solid：显示为一条实线。
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

否

-

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

-

border-[left|top|right|bottom]

-

-

-

-

-

否

-

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

-

border-width

-

<length>

-

0

-

否

-

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

否

-

分别设置左、上、右、下四个边框的宽度。

-

border-color

-

<color>

-

black

-

否

-

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

否

-

分别设置左、上、右、下四个边框的颜色。

-

border-radius

-

<length>

-

-

-

否

-

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，如果要设置color和width，需要将四个方向一起设置（border-width、border-color）。

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

否

-

分别设置左上，右上，右下和左下四个角的圆角半径。

-

background

-

<linear-gradient>

-

-

-

否

-

仅支持设置渐变样式，与background-color、background-image不兼容。

-

background-color

-

<color>

-

-

-

否

-

设置背景颜色。

-

background-image

-

string

-

-

-

否

-

设置背景图片。与background-color、background不兼容；支持本地图片资源地址。

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

否

-

设置背景图片的大小。

-
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    -
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
-

background-repeat

-

string

-

repeat

-

否

-

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

-
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

否

-
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    -
-
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>
-

opacity

-

number

-

1

-

否

-

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

-

display

-

string

-

-

flex

-

否

-

确定一个元素所产生的框的类型，可选值为：

-
  • flex：弹性布局。
  • none：不渲染此元素。
-

visibility

-

string

-

-

visible

-

否

-

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

-
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
-
说明：

visibility和display样式都设置时，仅display生效

-
-

flex

-

number

-

-

-

否

-

规定当前组件如何适应父组件中的可用空间。它作为一个简写属性，用来设置组件的flex-grow。

-
说明：

仅父容器为<div>、<list-item>、<tabs>时生效。

-
-

flex-grow

-

number

-

0

-

否

-

设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。

-
说明：

仅父容器为<div>、<list-item>、<tabs>时生效。

-
-

flex-shrink

-

number

-

1

-

否

-

设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。

-
说明：

仅父容器为<div>、<list-item>、<tabs>时生效。

-
-

flex-basis

-

<length>

-

-

-

-

否

-

设置组件在主轴方向上的初始大小。

-
说明：

仅父容器为<div>、<list-item>、<tabs>时生效。

-
-

position

-

string

-

relative

-

否

-

设置元素的定位类型，不支持动态变更。

-
  • fixed：相对与整个界面进行定位。
  • absolute：相对于父元素进行定位。
  • relative：相对于其正常位置进行定位。
-
说明：

absolute属性仅在父容器为<div>、<stack>时生效。

-
-

[left|top|right|bottom]

-

<length>

-

-

-

否

-

left|top|right|bottom需要配合position样式使用，来确定元素的偏移位置。

-
  • left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  • top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  • right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
  • bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
-
- ->![](public_sys-resources/icon-note.gif) **说明：** ->文本和图片默认在整个piece组件中居中。 - -## 事件 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

close

-

-

-

当piece组件点击删除图标触发，此时可以通过渲染属性if删除该组件。

-

touchstart

-

TouchEvent

-

手指刚触摸屏幕时触发该事件。

-

touchmove

-

TouchEvent

-

手指触摸屏幕后移动时触发该事件。

-

touchcancel

-

TouchEvent

-

手指触摸屏幕中动作被打断时触发该事件。

-

touchend

-

TouchEvent

-

手指触摸结束离开屏幕时触发该事件。

-

click

-

-

-

点击动作触发该事件。

-

longpress

-

-

-

长按动作触发该事件。

-

swipe5+

-

SwipeEvent

-

组件上快速滑动后触发。

-
- -## 示例 - -``` - -
- - -
-``` - -``` -// xxx.js -export default { - data: { - first: true, - second: true - }, - closeSecond(e) { - this.second = false; - } -} -``` - -![](figures/SVID_20210301_193525_1.gif) - diff --git a/zh-cn/application-dev/js-reference/popup.md b/zh-cn/application-dev/js-reference/popup.md deleted file mode 100755 index 59679aa76ab050c26af3a1f6203714ffd9393277..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/popup.md +++ /dev/null @@ -1,675 +0,0 @@ -# popup - -- [权限列表](#zh-cn_topic_0000001058988948_section11257113618419) -- [子组件](#zh-cn_topic_0000001058988948_s726c642d8f514b0cb5ef8854fe6ac02c) -- [属性](#zh-cn_topic_0000001058988948_s7ff9da9346504b11aca7015dc689dc67) -- [事件](#zh-cn_topic_0000001058988948_section1295913853210) -- [样式](#zh-cn_topic_0000001058988948_s472a5052130e49bca059adfe7bb6b96d) -- [方法](#zh-cn_topic_0000001058988948_section1970516568131) -- [示例](#zh-cn_topic_0000001058988948_section29231018162418) - -气泡指示。在点击绑定的控件后会弹出相应的气泡提示来引导用户进行操作。 - -## 权限列表 - -无 - -## 子组件 - -支持单个子组件节点5+。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

target

-

string

-

-

-

是

-

目标元素的id属性值，不支持动态切换。

-

placement

-

string

-

bottom

-

否

-

弹出窗口位置。可选值为：

-
  • left：位于目标元素左边；
  • right：位于目标元素右边；
  • top：位于目标元素上边；
  • bottom：位于目标元素下边；
  • topLeft：位于目标元素左上角；
  • topRight：位于目标元素右上角；
  • bottomLeft：位于目标元素左下角；
  • bottomRight：位于目标元素右下角。
-

keepalive5+

-

boolean

-

false

-

否

-

设置当前popup是否需要保留。设置为true时，点击屏幕区域或者页面切换气泡不会消失，需调用气泡组件的hide方法才可让气泡消失；设置为false时，点击屏幕区域或者页面切换气泡会自动消失。

-

clickable5+

-

boolean

-

true

-

否

-

popup是否使用点击弹窗，当设置为false时，只支持方法调用显示。

-

arrowoffset5+

-

<length>

-

0

-

否

-

popup箭头在弹窗处的偏移，默认居中，正值按照语言方向进行偏移，负值相反。

-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

disabled

-

boolean

-

false

-

否

-

当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-
- -## 事件 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

visibilitychange

-

{ visibility: boolean }

-

当气泡弹出和消失时会触发该回调函数。

-

touchstart

-

TouchEvent

-

手指刚触摸屏幕时触发该事件。

-

touchmove

-

TouchEvent

-

手指触摸屏幕后移动时触发该事件。

-

touchcancel

-

TouchEvent

-

手指触摸屏幕中动作被打断时触发该事件。

-

touchend

-

TouchEvent

-

手指触摸结束离开屏幕时触发该事件。

-

click

-

-

-

点击动作触发该事件。

-

longpress

-

-

-

长按动作触发该事件。

-

swipe5+

-

SwipeEvent

-

组件上快速滑动后触发。

-
- -## 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

mask-color

-

<color>

-

#00000000

-

否

-

遮罩层的颜色，默认值为全透明。

-

width

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的宽度。

-

缺省时使用元素自身内容需要的宽度。

-

height

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的高度。

-

缺省时使用元素自身内容需要的高度。

-

padding

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的内边距属性。

-
该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    -

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    -

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    -

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下内边距属性。

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端内边距属性。

-

margin

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

-

  • 只有一个值时，这个值会被指定给全部的四个边。

    -

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    -

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    -

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下外边距属性。

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端外边距属性。

-

border

-

-

-

0

-

否

-

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

-

border-style

-

string

-

solid

-

否

-

使用简写属性设置所有边框的样式，可选值为：

-
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
-
  • solid：显示为一条实线。
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

否

-

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

-

border-[left|top|right|bottom]

-

-

-

-

-

否

-

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

-

border-width

-

<length>

-

0

-

否

-

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

否

-

分别设置左、上、右、下四个边框的宽度。

-

border-color

-

<color>

-

black

-

否

-

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

否

-

分别设置左、上、右、下四个边框的颜色。

-

border-radius

-

<length>

-

-

-

否

-

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，border-[left|top|right|bottom]-style，如果要设置color、width和style，需要将四个方向一起设置（border-width、border-color、border-style）。

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

否

-

分别设置左上，右上，右下和左下四个角的圆角半径。

-

background

-

<linear-gradient>

-

-

-

否

-

仅支持设置渐变样式，与background-color、background-image不兼容。

-

background-color

-

<color>

-

-

-

否

-

设置背景颜色。

-

background-image

-

string

-

-

-

否

-

设置背景图片。与background-color、background不兼容；支持本地图片资源地址。

-

示例：

-
  • background-image: url("/common/background.png")
-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

否

-

设置背景图片的大小。

-
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    -
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
-

background-repeat

-

string

-

repeat

-

否

-

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

-
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

否

-
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    -
-
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>
-

opacity

-

number

-

1

-

否

-

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

-

display

-

string

-

-

flex

-

否

-

确定一个元素所产生的框的类型，可选值为：

-
  • flex：弹性布局。
  • none：不渲染此元素。
-

visibility

-

string

-

-

visible

-

否

-

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

-
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
-
说明：

visibility和display样式都设置时，仅display生效

-
-
- -## 方法 - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

show5+

-

-

-

弹出气泡提示。

-

hide5+

-

-

-

取消气泡提示。

-
- ->![](public_sys-resources/icon-note.gif) **说明：** ->1. popup气泡弹窗属性、样式均不支持动态更新。 ->2. popup气泡弹窗的margin样式是相对于target元素进行生效的，如popup在target元素下方，此时只生效margin-top样式，popup在target元素左上方，此时只生效margin-bottom和margin-right样式。 ->3. popup的border四边样式需一致，若四边设置不一致且圆角为零，则按左、上、右、下的顺序取第一个被设置的样式，否则border不生效。 ->4. popup的target组件的click事件不生效。 - -## 示例 - -``` - -
- Click to show the pop-up - - - Text content of the pop-up - - -
-``` - -``` -/* xxx.css */ -.container { - flex-direction: column; - align-items: center; - padding: 200px; -} -.popup { - mask-color: gray; -} -.text { - color: white; -} -.button { - width: 220px; - height: 70px; - margin-top: 50px; -} -``` - -``` -// xxx.js -import prompt from '@system.prompt' -export default { - visibilitychange(e) { - prompt.showToast({ - message: 'visibility change visibility: ' + e.visibility, - duration: 3000, - }); - }, - showpopup() { - this.$element("popup").show(); - }, - hidepopup() { - this.$element("popup").hide(); - }, -} -``` - -![](figures/zh-cn_image_0000001082052793.png) - diff --git a/zh-cn/application-dev/js-reference/progress.md b/zh-cn/application-dev/js-reference/progress.md deleted file mode 100755 index 31a1ca8435f537bd726dc986891be5b693ce9d0a..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/progress.md +++ /dev/null @@ -1,981 +0,0 @@ -# progress - -- [权限列表](#zh-cn_topic_0000001058670841_section11257113618419) -- [子组件](#zh-cn_topic_0000001058670841_section9288143101012) -- [属性](#zh-cn_topic_0000001058670841_section2907183951110) -- [事件](#zh-cn_topic_0000001058670841_section164912362544) -- [样式](#zh-cn_topic_0000001058670841_section5775351116) -- [示例](#zh-cn_topic_0000001058670841_section493033510346) - -进度条，用于显示内容加载或操作处理进度。 - -## 权限列表 - -无 - -## 子组件 - -不支持。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

type

-

string

-

horizontal

-

否

-

设置进度条的类型，该属性不支持动态修改，可选值为：

-
  • horizontal：线性进度条；
  • circular：loading样式进度条；
  • ring：圆环形进度条；
  • scale-ring：带刻度圆环形进度条
  • arc：弧形进度条。
  • eclipse5+：圆形进度条，展现类似月圆月缺的进度展示效果。
-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-
- -不同类型的进度条还支持不同的属性： - -- 类型为horizontal、ring、scale-ring时，支持如下属性： - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

percent

-

number

-

0

-

否

-

当前进度。取值范围为0-100。

-

secondarypercent

-

number

-

0

-

否

-

次级进度。取值范围为0-100。

-
- -- 类型为ring、scale-ring时，支持如下属性： - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

clockwise

-

boolean

-

true

-

否

-

圆环形进度条是否采用顺时针。

-
- -- 类型为arc、eclipse5+时，支持如下属性： - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

percent

-

number

-

0

-

否

-

当前进度。取值范围为0-100。

-
- - -## 事件 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

touchstart

-

TouchEvent

-

手指刚触摸屏幕时触发该事件。

-

touchmove

-

TouchEvent

-

手指触摸屏幕后移动时触发该事件。

-

touchcancel

-

TouchEvent

-

手指触摸屏幕中动作被打断时触发该事件。

-

touchend

-

TouchEvent

-

手指触摸结束离开屏幕时触发该事件。

-

click

-

-

-

点击动作触发该事件。

-

longpress

-

-

-

长按动作触发该事件。

-

swipe5+

-

SwipeEvent

-

组件上快速滑动后触发。

-
- -## 样式 - -type=horizontal - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

color

-

<color>

-

#ff007dff

-

否

-

设置进度条的颜色。

-

stroke-width

-

<length>

-

4px

-

-

否

-

设置进度条的宽度。

-

background-color

-

<color>

-

-

-

否

-

设置进度条的背景色。

-

secondary-color

-

<color>

-

-

-

否

-

设置次级进度条的颜色。

-
- -type=circular - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

color

-

<color>

-

-

-

否

-

loading进度条上的圆点颜色。

-
- -type=ring, scale-ring - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

color

-

<color> | <linear-gradient>

-

-

-

否

-

环形进度条的颜色，ring类型支持线性渐变色设置。

-
说明：

线性渐变色仅支持两个颜色参数设置格式，如color = linear-gradient(#ff0000, #00ff00)。

-
-

background-color

-

<color>

-

-

-

否

-

环形进度条的背景色。

-

secondary-color

-

<color>

-

-

-

否

-

环形次级进度条的颜色。

-

stroke-width

-

<length>

-

10px

-

否

-

环形进度条的宽度。

-

scale-width

-

<length>

-

-

-

否

-

带刻度的环形进度条的刻度粗细，类型为scale-ring生效。

-

scale-number

-

number

-

120

-

否

-

带刻度的环形进度条的刻度数量，类型为scale-ring生效。

-
- -type=arc - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

color

-

<color>

-

-

-

否

-

弧形进度条的颜色。

-

background-color

-

<color>

-

-

-

否

-

弧形进度条的背景色。

-

stroke-width

-

<length>

-

4px

-

否

-

弧形进度条的宽度。

-
说明：

进度条宽度越大，进度条越靠近圆心。即进度条始终在半径区域内。

-
-

start-angle

-

<deg>

-

240

-

否

-

弧形进度条起始角度，以时钟0点为基线。范围为0到360（顺时针）。

-

total-angle

-

<deg>

-

240

-

否

-

弧形进度条总长度，范围为-360到360，负数标识起点到终点为逆时针。

-

center-x

-

<length>

-

-

-

否

-

弧形进度条中心位置，（坐标原点为组件左上角顶点）。该样式需要和center-y和radius一起。

-

center-y

-

<length>

-

-

-

否

-

弧形进度条中心位置，（坐标原点为组件左上角顶点）。该样式需要和center-x和radius一起。

-

radius

-

<length>

-

-

-

否

-

弧形进度条半径，该样式需要和center-x和center-y一起。

-
- -type=eclipse5+ - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

color

-

<color>

-

-

-

否

-

圆形进度条的颜色。

-

background-color

-

<color>

-

-

-

否

-

弧形进度条的背景色。

-
- -除上述样式之外，所有type还支持如下样式： - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

width

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的宽度。

-

缺省时使用元素自身内容需要的宽度。

-

height

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的高度。

-

缺省时使用元素自身内容需要的高度。

-

padding

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的内边距属性。

-
该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    -

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    -

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    -

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下内边距属性。

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端内边距属性。

-

margin

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

-

  • 只有一个值时，这个值会被指定给全部的四个边。

    -

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    -

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    -

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下外边距属性。

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端外边距属性。

-

border

-

-

-

0

-

否

-

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

-

border-style

-

string

-

solid

-

否

-

使用简写属性设置所有边框的样式，可选值为：

-
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
-
  • solid：显示为一条实线。
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

否

-

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

-

border-[left|top|right|bottom]

-

-

-

-

-

否

-

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

-

border-width

-

<length>

-

0

-

否

-

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

否

-

分别设置左、上、右、下四个边框的宽度。

-

border-color

-

<color>

-

black

-

否

-

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

否

-

分别设置左、上、右、下四个边框的颜色。

-

border-radius

-

<length>

-

-

-

否

-

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，border-[left|top|right|bottom]-style，如果要设置color、width和style，需要将四个方向一起设置（border-width、border-color、border-style）。

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

否

-

分别设置左上，右上，右下和左下四个角的圆角半径。

-

opacity

-

number

-

1

-

否

-

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

-

display

-

string

-

-

flex

-

否

-

确定一个元素所产生的框的类型，可选值为：

-
  • flex：弹性布局。
  • none：不渲染此元素。
-

visibility

-

string

-

-

visible

-

否

-

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

-
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
-
说明：

visibility和display样式都设置时，仅display生效

-
-

flex

-

-

-

-

-

否

-

规定当前组件如何适应父组件中的可用空间。

-

flex可以指定1个，2个5+或3个5+值。

-

单值语法：

-
  • 一个无单位数：用来设置组件的flex-grow
  • 一个有效的宽度值5+：用来设置组件的flex-basis
-

双值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow。第二个值是以下之一：

-
  • 一个无单位数：用来设置组件的flex-shrink
  • 一个有效的宽度值：用来设置组件的flex-basis
-

三值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow；第二个值必须是无单位数，用来设置组件的flex-shrink；第三个值必须是一个有效的宽度值，用来设置组件的flex-basis。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-grow

-

number

-

0

-

否

-

设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-shrink

-

number

-

1

-

否

-

设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-basis

-

<length>

-

-

-

-

否

-

设置组件在主轴方向上的初始大小。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

position

-

string

-

relative

-

否

-

设置元素的定位类型，不支持动态变更。

-
  • fixed：相对与整个界面进行定位。
  • absolute：相对于父元素进行定位。
  • relative：相对于其正常位置进行定位。
-
说明：

absolute属性仅在父容器为<div>、<stack>时生效。

-
-

[left|top|right|bottom]

-

<length>

-

-

-

否

-

left|top|right|bottom需要配合position样式使用，来确定元素的偏移位置。

-
  • left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  • top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  • right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
  • bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
-
- -## 示例 - -``` - -
- - - - -
-``` - -``` -/* xxx.css */ -.container { - flex-direction: column; - height: 100%; - width: 100%; - align-items: center; -} -.min-progress { - width: 300px; - height: 300px; -} -``` - -![](figures/progress.png) - diff --git a/zh-cn/application-dev/js-reference/public_sys-resources/icon-caution.gif b/zh-cn/application-dev/js-reference/public_sys-resources/icon-caution.gif deleted file mode 100755 index 6e90d7cfc2193e39e10bb58c38d01a23f045d571..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/public_sys-resources/icon-caution.gif and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/public_sys-resources/icon-danger.gif b/zh-cn/application-dev/js-reference/public_sys-resources/icon-danger.gif deleted file mode 100755 index 6e90d7cfc2193e39e10bb58c38d01a23f045d571..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/public_sys-resources/icon-danger.gif and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/public_sys-resources/icon-note.gif b/zh-cn/application-dev/js-reference/public_sys-resources/icon-note.gif deleted file mode 100755 index 6314297e45c1de184204098efd4814d6dc8b1cda..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/public_sys-resources/icon-note.gif and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/public_sys-resources/icon-notice.gif b/zh-cn/application-dev/js-reference/public_sys-resources/icon-notice.gif deleted file mode 100755 index 86024f61b691400bea99e5b1f506d9d9aef36e27..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/public_sys-resources/icon-notice.gif and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/public_sys-resources/icon-tip.gif b/zh-cn/application-dev/js-reference/public_sys-resources/icon-tip.gif deleted file mode 100755 index 93aa72053b510e456b149f36a0972703ea9999b7..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/public_sys-resources/icon-tip.gif and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/public_sys-resources/icon-warning.gif b/zh-cn/application-dev/js-reference/public_sys-resources/icon-warning.gif deleted file mode 100755 index 6e90d7cfc2193e39e10bb58c38d01a23f045d571..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/public_sys-resources/icon-warning.gif and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/qrcode.md b/zh-cn/application-dev/js-reference/qrcode.md deleted file mode 100644 index 1d487421403f0afc5f4c4b102db5f006df8904c7..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/qrcode.md +++ /dev/null @@ -1,633 +0,0 @@ -# qrcode - -- [权限列表](#zh-cn_topic_0000001058562843_section11257113618419) -- [子组件](#zh-cn_topic_0000001058562843_section352513155564) -- [属性](#zh-cn_topic_0000001058562843_section5347151165210) -- [事件](#zh-cn_topic_0000001058562843_section108671611161319) -- [样式](#zh-cn_topic_0000001058562843_section439317598552) -- [示例](#zh-cn_topic_0000001058562843_section81001951259) - -生成并显示二维码。 - ->![](public_sys-resources/icon-note.gif) **说明：** ->从API Version 5 开始支持。 - -## 权限列表 - -无 - -## 子组件 - -不支持。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

value

-

string

-

-

-

是

-

用来生成二维码的内容。

-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

disabled

-

boolean

-

false

-

否

-

当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-
- -## 事件 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

touchstart

-

TouchEvent

-

手指刚触摸屏幕时触发该事件。

-

touchmove

-

TouchEvent

-

手指触摸屏幕后移动时触发该事件。

-

touchcancel

-

TouchEvent

-

手指触摸屏幕中动作被打断时触发该事件。

-

touchend

-

TouchEvent

-

手指触摸结束离开屏幕时触发该事件。

-

click

-

-

-

点击动作触发该事件。

-

longpress

-

-

-

长按动作触发该事件。

-

swipe5+

-

SwipeEvent

-

组件上快速滑动后触发。

-
- -## 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

color

-

<color>

-

#000000

-

否

-

二维码颜色

-

background-color

-

<color>

-

#ffffff

-

否

-

二维码背景颜色

-

width

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的宽度。

-

缺省时使用元素自身内容需要的宽度。

-

height

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的高度。

-

缺省时使用元素自身内容需要的高度。

-

padding

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的内边距属性。

-
该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    -

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    -

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    -

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下内边距属性。

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端内边距属性。

-

margin

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

-

  • 只有一个值时，这个值会被指定给全部的四个边。

    -

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    -

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    -

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下外边距属性。

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端外边距属性。

-

border

-

-

-

0

-

否

-

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

-

border-style

-

string

-

solid

-

否

-

使用简写属性设置所有边框的样式，可选值为：

-
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
-
  • solid：显示为一条实线。
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

否

-

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

-

border-[left|top|right|bottom]

-

-

-

-

-

否

-

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

-

border-width

-

<length>

-

0

-

否

-

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

否

-

分别设置左、上、右、下四个边框的宽度。

-

border-color

-

<color>

-

black

-

否

-

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

否

-

分别设置左、上、右、下四个边框的颜色。

-

border-radius

-

<length>

-

-

-

否

-

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，border-[left|top|right|bottom]-style，如果要设置color、width和style，需要将四个方向一起设置（border-width、border-color、border-style）。

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

否

-

分别设置左上，右上，右下和左下四个角的圆角半径。

-

background

-

<linear-gradient>

-

-

-

否

-

仅支持设置渐变样式，与background-color、background-image不兼容。

-

background-image

-

string

-

-

-

否

-

设置背景图片。与background-color、background不兼容；支持本地图片资源地址。

-

示例：

-
  • background-image: url("/common/background.png")
-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

否

-

设置背景图片的大小。

-
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    -
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
-

background-repeat

-

string

-

repeat

-

否

-

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

-
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

否

-
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    -
-
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>
-

opacity

-

number

-

1

-

否

-

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

-

display

-

string

-

-

flex

-

否

-

确定一个元素所产生的框的类型，可选值为：

-
  • flex：弹性布局。
  • none：不渲染此元素。
-

visibility

-

string

-

-

visible

-

否

-

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

-
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
-
说明：

visibility和display样式都设置时，仅display生效

-
-

flex

-

-

-

-

-

否

-

规定当前组件如何适应父组件中的可用空间。

-

flex可以指定1个，2个5+或3个5+值。

-

单值语法：

-
  • 一个无单位数：用来设置组件的flex-grow
  • 一个有效的宽度值5+：用来设置组件的flex-basis
-

双值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow。第二个值是以下之一：

-
  • 一个无单位数：用来设置组件的flex-shrink
  • 一个有效的宽度值：用来设置组件的flex-basis
-

三值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow；第二个值必须是无单位数，用来设置组件的flex-shrink；第三个值必须是一个有效的宽度值，用来设置组件的flex-basis。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-grow

-

number

-

0

-

否

-

设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-shrink

-

number

-

1

-

否

-

设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-basis

-

<length>

-

-

-

-

否

-

设置组件在主轴方向上的初始大小。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

position

-

string

-

relative

-

否

-

设置元素的定位类型，不支持动态变更。

-
  • fixed：相对与整个界面进行定位。
  • absolute：相对于父元素进行定位。
  • relative：相对于其正常位置进行定位。
-
说明：

absolute属性仅在父容器为<div>、<stack>时生效。

-
-

[left|top|right|bottom]

-

<length>

-

-

-

否

-

left|top|right|bottom需要配合position样式使用，来确定元素的偏移位置。

-
  • left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  • top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  • right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
  • bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
-
- ->![](public_sys-resources/icon-note.gif) **说明：** ->- width和height不一致时，以二者最小值作为二维码的边长。且最终生成的二维码居中显示； ->- width和height只设置一个时，取设置的值作为二维码的边长。都不设置时，使用默认200px边长。 - -## 示例 - -``` - -``` - diff --git a/zh-cn/application-dev/js-reference/rating.md b/zh-cn/application-dev/js-reference/rating.md deleted file mode 100755 index fd8684df2bddead0193dc4ce87cfcb7f2578fbf6..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/rating.md +++ /dev/null @@ -1,670 +0,0 @@ -# rating - -- [权限列表](#zh-cn_topic_0000001058460509_section11257113618419) -- [子组件](#zh-cn_topic_0000001058460509_section9288143101012) -- [属性](#zh-cn_topic_0000001058460509_section2907183951110) -- [事件](#zh-cn_topic_0000001058460509_section124498406719) -- [样式](#zh-cn_topic_0000001058460509_section5775351116) - -评分条，表示用户使用感受的衡量标准条。 - -## 权限列表 - -无 - -## 子组件 - -不支持。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

numstars

-

number

-

5

-

否

-

设置评分条的星级总数。

-

rating

-

number

-

0

-

否

-

设置评分条当前评星数。

-

indicator

-

boolean

-

false

-

否

-

设置评分条是否作为一个指示器，此时用户不可操作。

-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

disabled

-

boolean

-

false

-

否

-

当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-
- -## 事件 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

change

-

{ rating: current rating }

-

评分条的评星发生改变时触发该回调。

-

touchstart

-

TouchEvent

-

手指刚触摸屏幕时触发该事件。

-

touchmove

-

TouchEvent

-

手指触摸屏幕后移动时触发该事件。

-

touchcancel

-

TouchEvent

-

手指触摸屏幕中动作被打断时触发该事件。

-

touchend

-

TouchEvent

-

手指触摸结束离开屏幕时触发该事件。

-

swipe5+

-

SwipeEvent

-

组件上快速滑动后触发。

-
- -## 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

star-background

-

string

-

-

-

否

-

设置单个星级未选中的背景图片，只支持本地路径图片，图片格式为png和jpg。

-

star-foreground

-

string

-

-

-

否

-

设置单个星级选中的前景图片，只支持本地路径图片，图片格式为png和jpg。

-

star-secondary

-

string

-

-

-

否

-

设置单个星级部分选中的次级背景图片，该图片会覆盖背景图片，只支持本地路径图片，图片格式为png和jpg。

-

width

-

<length>|<percentage>

-

120px

-

60px（不可操作）

-

否

-

默认值是在未设置自定义资源和评分星数时，使用5个星和默认资源下的宽度值。

-

height

-

<length>|<percentage>

-

24px

-

12px（不可操作）

-

否

-

默认值是在未设置自定义资源和评分星数时，使用5个星和默认资源下的高度值。

-

rtl-flip

-

boolean

-

true

-

否

-

在RTL文字方向下是否自动翻转图源。

-

padding

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的内边距属性。

-
该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    -

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    -

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    -

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下内边距属性。

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端内边距属性。

-

margin

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

-

  • 只有一个值时，这个值会被指定给全部的四个边。

    -

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    -

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    -

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下外边距属性。

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端外边距属性。

-

border

-

-

-

0

-

否

-

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

-

border-style

-

string

-

solid

-

否

-

使用简写属性设置所有边框的样式，可选值为：

-
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
-
  • solid：显示为一条实线。
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

否

-

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

-

border-[left|top|right|bottom]

-

-

-

-

-

否

-

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

-

border-width

-

<length>

-

0

-

否

-

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

否

-

分别设置左、上、右、下四个边框的宽度。

-

border-color

-

<color>

-

black

-

否

-

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

否

-

分别设置左、上、右、下四个边框的颜色。

-

border-radius

-

<length>

-

-

-

否

-

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，border-[left|top|right|bottom]-style，如果要设置color、width和style，需要将四个方向一起设置（border-width、border-color、border-style）。

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

否

-

分别设置左上，右上，右下和左下四个角的圆角半径。

-

background

-

<linear-gradient>

-

-

-

否

-

仅支持设置渐变样式，与background-color、background-image不兼容。

-

background-color

-

<color>

-

-

-

否

-

设置背景颜色。

-

background-image

-

string

-

-

-

否

-

设置背景图片。与background-color、background不兼容；支持本地图片资源地址。

-

示例：

-
  • background-image: url("/common/background.png")
-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

否

-

设置背景图片的大小。

-
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    -
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
-

background-repeat

-

string

-

repeat

-

否

-

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

-
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

否

-
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    -
-
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>
-

opacity

-

number

-

1

-

否

-

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

-

display

-

string

-

-

flex

-

否

-

确定一个元素所产生的框的类型，可选值为：

-
  • flex：弹性布局。
  • none：不渲染此元素。
-

visibility

-

string

-

-

visible

-

否

-

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

-
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
-
说明：

visibility和display样式都设置时，仅display生效

-
-

flex

-

-

-

-

-

否

-

规定当前组件如何适应父组件中的可用空间。

-

flex可以指定1个，2个5+或3个5+值。

-

单值语法：

-
  • 一个无单位数：用来设置组件的flex-grow
  • 一个有效的宽度值5+：用来设置组件的flex-basis
-

双值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow。第二个值是以下之一：

-
  • 一个无单位数：用来设置组件的flex-shrink
  • 一个有效的宽度值：用来设置组件的flex-basis
-

三值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow；第二个值必须是无单位数，用来设置组件的flex-shrink；第三个值必须是一个有效的宽度值，用来设置组件的flex-basis。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-grow

-

number

-

0

-

否

-

设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-shrink

-

number

-

1

-

否

-

设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-basis

-

<length>

-

-

-

-

否

-

设置组件在主轴方向上的初始大小。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

position

-

string

-

relative

-

否

-

设置元素的定位类型，不支持动态变更。

-
  • fixed：相对与整个界面进行定位。
  • absolute：相对于父元素进行定位。
  • relative：相对于其正常位置进行定位。
-
说明：

absolute属性仅在父容器为<div>、<stack>时生效。

-
-

[left|top|right|bottom]

-

<length>

-

-

-

否

-

left|top|right|bottom需要配合position样式使用，来确定元素的偏移位置。

-
  • left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  • top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  • right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
  • bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
-
- ->![](public_sys-resources/icon-note.gif) **说明：** ->star-background，star-secondary，star-foreground三个星级图源必须全部设置，否则默认的星级颜色为灰色，以此提示图源设置错误。 - diff --git a/zh-cn/application-dev/js-reference/refresh.md b/zh-cn/application-dev/js-reference/refresh.md deleted file mode 100755 index 14da82e4f80347bd5e05ebdb60a66fdd8a34dd9c..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/refresh.md +++ /dev/null @@ -1,728 +0,0 @@ -# refresh - -- [权限列表](#zh-cn_topic_0000001058562839_section11257113618419) -- [子组件](#zh-cn_topic_0000001058562839_section9288143101012) -- [属性](#zh-cn_topic_0000001058562839_section2907183951110) -- [事件](#zh-cn_topic_0000001058562839_section3892191911214) -- [样式](#zh-cn_topic_0000001058562839_section1465118493710) - -下拉刷新容器。 - -## 权限列表 - -无 - -## 子组件 - -支持。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

offset

-

<length>

-

-

-

否

-

刷新组件静止时距离父组件顶部的距离。

-

refreshing

-

boolean

-

false

-

否

-

用于标识刷新组件当前是否正在刷新。

-

type

-

string

-

auto

-

否

-

设置组件刷新时的动效。两个可选值，不支持动态修改。

-
  • auto: 默认效果，列表界面拉到顶后，列表不移动，下拉后有转圈弹出。
  • pulldown: 列表界面拉到顶后，可以继续往下滑动一段距离触发刷新，刷新完成后有回弹效果（如果子组件含有list，防止下拉效果冲突，需将list的scrolleffect设置为no）。
-

lasttime

-

boolean

-

false

-

否

-

是否显示上次更新时间，字符串格式为：“上次更新时间：XXXX ”，XXXX 按照时间日期显示规范显示，不可动态修改（建议type为pulldown时使用，固定距离位于内容下拉区域底部，使用时注意offset属性设置，防止出现重叠）。

-

friction

-

number

-

42

-

否

-

下拉摩擦系数，取值范围：0-100，数值越大refresh组件跟手性高，数值越小refresh跟手性低。

-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

disabled

-

boolean

-

false

-

否

-

当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-
- -## 事件 - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

refresh

-

{ refreshing: refreshingValue }

-

下拉刷新状态变化时触发。可能值：

-
  • false：当前处于下拉刷新过程中
  • true：当前未处于下拉刷新过程中
-

pulldown

-

{ state: string }

-

下拉开始和松手时触发。可能值：

-
  • start：表示开始下拉。
  • end：表示结束下拉。
-
- -## 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

background-color

-

<color>

-

white

-

否

-

用于设置刷新组件的背景颜色。

-

progress-color

-

<color>

-

black

-

否

-

用于设置刷新组件的loading颜色。

-

width

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的宽度。

-

缺省时使用元素自身内容需要的宽度。

-

height

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的高度。

-

缺省时使用元素自身内容需要的高度。

-

min-width5+

-

<length>

-

0

-

否

-

设置元素的最小宽度。

-

min-height5+

-

<length>

-

0

-

否

-

设置元素的最小高度。

-

max-width5+

-

<length>

-

-

-

否

-

设置元素的最大宽度。默认无限制。

-

max-height5+

-

<length>

-

-

-

否

-

设置元素的最大高度。默认无限制。

-

padding

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的内边距属性。

-
该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    -

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    -

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    -

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下内边距属性。

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端内边距属性。

-

margin

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

-

  • 只有一个值时，这个值会被指定给全部的四个边。

    -

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    -

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    -

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下外边距属性。

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端外边距属性。

-

border

-

-

-

0

-

否

-

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

-

border-style

-

string

-

solid

-

否

-

使用简写属性设置所有边框的样式，可选值为：

-
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
-
  • solid：显示为一条实线。
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

否

-

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

-

border-[left|top|right|bottom]

-

-

-

-

-

否

-

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

-

border-width

-

<length>

-

0

-

否

-

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

否

-

分别设置左、上、右、下四个边框的宽度。

-

border-color

-

<color>

-

black

-

否

-

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

否

-

分别设置左、上、右、下四个边框的颜色。

-

border-radius

-

<length>

-

-

-

否

-

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，border-[left|top|right|bottom]-style，如果要设置color、width和style，需要将四个方向一起设置（border-width、border-color、border-style）。

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

否

-

分别设置左上，右上，右下和左下四个角的圆角半径。

-

background

-

<linear-gradient>

-

-

-

否

-

仅支持设置渐变样式，与background-color、background-image不兼容。

-

background-color

-

<color>

-

-

-

否

-

设置背景颜色。

-

background-image

-

string

-

-

-

否

-

设置背景图片。与background-color、background不兼容；支持本地图片资源地址。

-

示例：

-
  • background-image: url("/common/background.png")
-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

否

-

设置背景图片的大小。

-
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    -
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
-

background-repeat

-

string

-

repeat

-

否

-

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

-
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

否

-
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    -
-
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>
-

box-shadow5+

-

-

-

0

-

否

-

语法：box-shadow: h-shadow v-shadow blur spread color

-

通过这个样式可以设置当前组件的阴影样式，包括水平位置(必填)、垂直位置(必填)、模糊半径(可选，默认值为0)、阴影延展距离(可选，默认值为0)、阴影颜色(可选，默认值为黑色)。

-

示例：

-
  • box-shadow :10px 20px 5px 10px #888888
  • box-shadow :100px 100px 30px red
  • box-shadow :-100px -100px 0px 40px
-

filter5+

-

string

-

-

-

否

-

语法：filter: blur(px)

-

通过这个样式可以设置当前组件布局范围的内容模糊，参数用于指定模糊半径，如果没有设置值，则默认是0(不模糊)，不支持百分比。

-

示例：

-
  • filter: blur(10px)
-

backdrop-filter5+

-

string

-

-

-

否

-

语法：backdrop-filter: blur(px)

-

通过这个样式可以设置当前组件布局范围的背景模糊，参数用于指定模糊半径，如果没有设置值，则默认是0(不模糊)，不支持百分比。

-

示例：

-
  • backdrop-filter: blur(10px)
-

opacity

-

number

-

1

-

否

-

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

-

display

-

string

-

-

flex

-

否

-

确定一个元素所产生的框的类型，可选值为：

-
  • flex：弹性布局。
  • none：不渲染此元素。
-

visibility

-

string

-

-

visible

-

否

-

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

-
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
-
说明：

visibility和display样式都设置时，仅display生效

-
-

flex

-

-

-

-

-

否

-

规定当前组件如何适应父组件中的可用空间。

-

flex可以指定1个，2个5+或3个5+值。

-

单值语法：

-
  • 一个无单位数：用来设置组件的flex-grow
  • 一个有效的宽度值5+：用来设置组件的flex-basis
-

双值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow。第二个值是以下之一：

-
  • 一个无单位数：用来设置组件的flex-shrink
  • 一个有效的宽度值：用来设置组件的flex-basis
-

三值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow；第二个值必须是无单位数，用来设置组件的flex-shrink；第三个值必须是一个有效的宽度值，用来设置组件的flex-basis。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<stepper-item>5+时生效。

-
-

flex-grow

-

number

-

0

-

否

-

设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<stepper-item>5+时生效。

-
-

flex-shrink

-

number

-

1

-

否

-

设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<stepper-item>5+时生效。

-
-

flex-basis

-

<length>

-

-

-

-

否

-

设置组件在主轴方向上的初始大小。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<stepper-item>5+时生效。

-
-

position

-

string

-

relative

-

否

-

设置元素的定位类型，不支持动态变更。

-
  • fixed：相对与整个界面进行定位。
  • absolute：相对于父元素进行定位。
  • relative：相对于其正常位置进行定位。
-
说明：

absolute属性仅在父容器为<div>、<stack>时生效。

-
-

[left|top|right|bottom]

-

<length>

-

-

-

否

-

left|top|right|bottom需要配合position样式使用，来确定元素的偏移位置。

-
  • left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  • top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  • right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
  • bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
-
- diff --git a/zh-cn/application-dev/js-reference/select.md b/zh-cn/application-dev/js-reference/select.md deleted file mode 100755 index 61bdbebff21bf9a98639c4a785130329fbf9998b..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/select.md +++ /dev/null @@ -1,608 +0,0 @@ -# select - -- [权限列表](#zh-cn_topic_0000001058670843_section11257113618419) -- [子组件](#zh-cn_topic_0000001058670843_section9288143101012) -- [属性](#zh-cn_topic_0000001058670843_section2907183951110) -- [事件](#zh-cn_topic_0000001058670843_section3892191911214) -- [样式](#zh-cn_topic_0000001058670843_section648514244510) - -下拉选择按钮，可让用户在多个选项之间选择。 - -## 权限列表 - -无 - -## 子组件 - -支持<[option](option.md#ZH-CN_TOPIC_0000001115974742)\>。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

disabled

-

boolean

-

false

-

否

-

当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-
- -## 事件 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

change

-

{newValue: newValue}

-

下拉选择新值后触发该事件，newValue的值为子组件option的value属性值。

-

touchstart

-

TouchEvent

-

手指刚触摸屏幕时触发该事件。

-

touchmove

-

TouchEvent

-

手指触摸屏幕后移动时触发该事件。

-

touchcancel

-

TouchEvent

-

手指触摸屏幕中动作被打断时触发该事件。

-

touchend

-

TouchEvent

-

手指触摸结束离开屏幕时触发该事件。

-

longpress

-

-

-

长按动作触发该事件。

-

swipe5+

-

SwipeEvent

-

组件上快速滑动后触发。

-
- -## 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

font-family

-

string

-

sans-serif

-

否

-

字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

-

width

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的宽度。

-

缺省时使用元素自身内容需要的宽度。

-

height

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的高度。

-

缺省时使用元素自身内容需要的高度。

-

padding

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的内边距属性。

-
该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    -

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    -

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    -

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下内边距属性。

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端内边距属性。

-

margin

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

-

  • 只有一个值时，这个值会被指定给全部的四个边。

    -

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    -

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    -

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下外边距属性。

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端外边距属性。

-

border

-

-

-

0

-

否

-

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

-

border-style

-

string

-

solid

-

否

-

使用简写属性设置所有边框的样式，可选值为：

-
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
-
  • solid：显示为一条实线。
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

否

-

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

-

border-[left|top|right|bottom]

-

-

-

-

-

否

-

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

-

border-width

-

<length>

-

0

-

否

-

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

否

-

分别设置左、上、右、下四个边框的宽度。

-

border-color

-

<color>

-

black

-

否

-

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

否

-

分别设置左、上、右、下四个边框的颜色。

-

border-radius

-

<length>

-

-

-

否

-

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，border-[left|top|right|bottom]-style，如果要设置color、width和style，需要将四个方向一起设置（border-width、border-color、border-style）。

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

否

-

分别设置左上，右上，右下和左下四个角的圆角半径。

-

background

-

<linear-gradient>

-

-

-

否

-

仅支持设置渐变样式，与background-color、background-image不兼容。

-

background-color

-

<color>

-

-

-

否

-

设置背景颜色。

-

background-image

-

string

-

-

-

否

-

设置背景图片。与background-color、background不兼容；支持本地图片资源地址。

-

示例：

-
  • background-image: url("/common/background.png")
-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

否

-

设置背景图片的大小。

-
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    -
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
-

background-repeat

-

string

-

repeat

-

否

-

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

-
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

否

-
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    -
-
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>
-

opacity

-

number

-

1

-

否

-

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

-

display

-

string

-

-

flex

-

否

-

确定一个元素所产生的框的类型，可选值为：

-
  • flex：弹性布局。
  • none：不渲染此元素。
-

visibility

-

string

-

-

visible

-

否

-

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

-
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
-
说明：

visibility和display样式都设置时，仅display生效

-
-

flex

-

-

-

-

-

否

-

规定当前组件如何适应父组件中的可用空间。

-

flex可以指定1个，2个5+或3个5+值。

-

单值语法：

-
  • 一个无单位数：用来设置组件的flex-grow
  • 一个有效的宽度值5+：用来设置组件的flex-basis
-

双值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow。第二个值是以下之一：

-
  • 一个无单位数：用来设置组件的flex-shrink
  • 一个有效的宽度值：用来设置组件的flex-basis
-

三值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow；第二个值必须是无单位数，用来设置组件的flex-shrink；第三个值必须是一个有效的宽度值，用来设置组件的flex-basis。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-grow

-

number

-

0

-

否

-

设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-shrink

-

number

-

1

-

否

-

设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-basis

-

<length>

-

-

-

-

否

-

设置组件在主轴方向上的初始大小。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

position

-

string

-

relative

-

否

-

设置元素的定位类型，不支持动态变更。

-
  • fixed：相对与整个界面进行定位。
  • absolute：相对于父元素进行定位。
  • relative：相对于其正常位置进行定位。
-
说明：

absolute属性仅在父容器为<div>、<stack>时生效。

-
-

[left|top|right|bottom]

-

<length>

-

-

-

否

-

left|top|right|bottom需要配合position样式使用，来确定元素的偏移位置。

-
  • left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  • top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  • right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
  • bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
-
- diff --git a/zh-cn/application-dev/js-reference/slider.md b/zh-cn/application-dev/js-reference/slider.md deleted file mode 100755 index 8be66bd38c602797123f4804310d474c445c6d06..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/slider.md +++ /dev/null @@ -1,803 +0,0 @@ -# slider - -- [子组件](#zh-cn_topic_0000001058948925_section9288143101012) -- [属性](#zh-cn_topic_0000001058948925_section2907183951110) -- [事件](#zh-cn_topic_0000001058948925_section412849105010) -- [样式](#zh-cn_topic_0000001058948925_section5775351116) -- [示例](#zh-cn_topic_0000001058948925_section166243517816) - -滑动条组件，用来快速调节设置值，如音量、亮度等。 - -## 子组件 - -不支持。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

min

-

number

-

0

-

否

-

滑动选择器的最小值。

-

max

-

number

-

100

-

否

-

滑动选择器的最大值。

-

step

-

number

-

1

-

否

-

每次滑动的步长。

-

value

-

number

-

0

-

否

-

滑动选择器的初始值。

-

mode5+

-

string

-

outset

-

否

-

滑动条样式：

-
  • outset：滑块在滑杆上；
  • inset：滑块在滑杆内。
-

showsteps5+

-

boolean

-

false

-

否

-

是否显示步长标识；

-

showtips5+

-

boolean

-

false

-

否

-

滑动时是否有气泡提示百分比；

-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

disabled

-

boolean

-

false

-

否

-

当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-
- -## 事件 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

change

-

ChangeEvent

-

选择值发生变化时触发该事件。

-

touchstart

-

TouchEvent

-

手指刚触摸屏幕时触发该事件。

-

touchmove

-

TouchEvent

-

手指触摸屏幕后移动时触发该事件。

-

touchcancel

-

TouchEvent

-

手指触摸屏幕中动作被打断时触发该事件。

-

touchend

-

TouchEvent

-

手指触摸结束离开屏幕时触发该事件。

-

click

-

-

-

点击动作触发该事件。

-

longpress

-

-

-

长按动作触发该事件。

-

swipe5+

-

SwipeEvent

-

组件上快速滑动后触发。

-
- -**表 1** ChangeEvent - - - - - - - - - - - - - - - - - - - - - - - - -

属性

-

类型

-

说明

-

progress(deprecated5+)

-

string

-

当前slider的进度值。

-

isEnd(deprecated5+)

-

string

-

当前slider是否拖拽结束，可选值为：

-
  • true：slider拖拽结束；
  • false：slider拖拽中。
-

value5+

-

number

-

当前slider的进度值。

-

mode5+

-

string

-

当前change事件的类型，可选值为：

-
  • start：slider的值开始改变；
  • move：slider的值跟随手指拖动中；
  • end：slider的值结束改变。
-
- -## 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

color

-

<color>

-

#19000000

-

否

-

滑动条的背景颜色。

-

selected-color

-

<color>

-

#ff007dff

-

否

-

滑动条的已选择颜色。

-

block-color

-

<color>

-

#ffffff

-

否

-

滑动条的滑块颜色。

-

width

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的宽度。

-

缺省时使用元素自身内容需要的宽度。

-

height

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的高度。

-

缺省时使用元素自身内容需要的高度。

-

padding

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的内边距属性。

-
该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    -

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    -

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    -

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

padding-[left|right]:32px;

-

padding-[top|bottom]:0px

-

否

-

设置左、上、右、下内边距属性。

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端内边距属性。

-

margin

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

-

  • 只有一个值时，这个值会被指定给全部的四个边。

    -

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    -

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    -

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下外边距属性。

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端外边距属性。

-

border

-

-

-

0

-

否

-

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

-

border-style

-

string

-

solid

-

否

-

使用简写属性设置所有边框的样式，可选值为：

-
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
-
  • solid：显示为一条实线。
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

否

-

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

-

border-[left|top|right|bottom]

-

-

-

-

-

否

-

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

-

border-width

-

<length>

-

0

-

否

-

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

否

-

分别设置左、上、右、下四个边框的宽度。

-

border-color

-

<color>

-

black

-

否

-

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

否

-

分别设置左、上、右、下四个边框的颜色。

-

border-radius

-

<length>

-

-

-

否

-

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，border-[left|top|right|bottom]-style，如果要设置color、width和style，需要将四个方向一起设置（border-width、border-color、border-style）。

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

否

-

分别设置左上，右上，右下和左下四个角的圆角半径。

-

background

-

<linear-gradient>

-

-

-

否

-

仅支持设置渐变样式，与background-color、background-image不兼容。

-

background-color

-

<color>

-

-

-

否

-

设置背景颜色。

-

background-image

-

string

-

-

-

否

-

设置背景图片。与background-color、background不兼容；支持本地图片资源地址。

-

示例：

-
  • background-image: url("/common/background.png")
-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

否

-

设置背景图片的大小。

-
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    -
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
-

background-repeat

-

string

-

repeat

-

否

-

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

-
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

否

-
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    -
-
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>
-

opacity

-

number

-

1

-

否

-

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

-

display

-

string

-

-

flex

-

否

-

确定一个元素所产生的框的类型，可选值为：

-
  • flex：弹性布局。
  • none：不渲染此元素。
-

visibility

-

string

-

-

visible

-

否

-

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

-
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
-
说明：

visibility和display样式都设置时，仅display生效

-
-

flex

-

-

-

-

-

否

-

规定当前组件如何适应父组件中的可用空间。

-

flex可以指定1个，2个5+或3个5+值。

-

单值语法：

-
  • 一个无单位数：用来设置组件的flex-grow
  • 一个有效的宽度值5+：用来设置组件的flex-basis
-

双值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow。第二个值是以下之一：

-
  • 一个无单位数：用来设置组件的flex-shrink
  • 一个有效的宽度值：用来设置组件的flex-basis
-

三值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow；第二个值必须是无单位数，用来设置组件的flex-shrink；第三个值必须是一个有效的宽度值，用来设置组件的flex-basis。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-grow

-

number

-

0

-

否

-

设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-shrink

-

number

-

1

-

否

-

设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-basis

-

<length>

-

-

-

-

否

-

设置组件在主轴方向上的初始大小。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

position

-

string

-

relative

-

否

-

设置元素的定位类型，不支持动态变更。

-
  • fixed：相对与整个界面进行定位。
  • absolute：相对于父元素进行定位。
  • relative：相对于其正常位置进行定位。
-
说明：

absolute属性仅在父容器为<div>、<stack>时生效。

-
-

[left|top|right|bottom]

-

<length>

-

-

-

否

-

left|top|right|bottom需要配合position样式使用，来确定元素的偏移位置。

-
  • left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  • top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  • right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
  • bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
-
- -## 示例 - -``` - -
- slider start value is {{startValue}} - slider current value is {{currentValue}} - slider end value is {{endValue}} - -
-``` - -``` -/* xxx.css */ -.container { - flex-direction: column; - justify-content: center; - align-items: center; -} -``` - -``` -// xxx.js -export default { - data: { - value: 0, - startValue: 0, - currentValue: 0, - endValue: 0, - }, - setvalue(e) { - if (e.mode == "start") { - this.value = e.value; - this.startValue = e.value; - } else if (e.mode == "move") { - this.value = e.value; - this.currentValue = e.value; - } else if (e.mode == "end") { - this.value = e.value; - this.endValue = e.value; - } - } -} -``` - -![](figures/slider.png) - diff --git a/zh-cn/application-dev/js-reference/span.md b/zh-cn/application-dev/js-reference/span.md deleted file mode 100755 index cd63a186b198a0229098c6c3be6f8d0edecbdc90..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/span.md +++ /dev/null @@ -1,192 +0,0 @@ -# span - -- [权限列表](#zh-cn_topic_0000001058948923_section11257113618419) -- [子组件](#zh-cn_topic_0000001058948923_section9288143101012) -- [属性](#zh-cn_topic_0000001058948923_section2907183951110) -- [事件](#zh-cn_topic_0000001058948923_section1298575017310) -- [样式](#zh-cn_topic_0000001058948923_section5775351116) - -作为<[text](text.md#ZH-CN_TOPIC_0000001115974748)\>子组件提供文本修饰能力。 - -## 权限列表 - -无 - -## 子组件 - -支持子组件。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-
- -## 事件 - -不支持。 - -## 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

color

-

<color>

-

-

-

否

-

设置文本段落的文本颜色

-

font-size

-

<length>

-

30px

-

否

-

设置文本段落的文本尺寸

-

allow-scale

-

boolean

-

true

-

否

-

设置文本段落的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

-
说明：

如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。

-
-

font-style

-

string

-

normal

-

否

-

设置文本段落的字体样式，见text组件font-style的样式属性。

-

font-weight

-

number | string

-

normal

-

否

-

设置文本段落的字体粗细，见text组件font-weight的样式属性。

-

text-decoration

-

string

-

none

-

否

-

设置文本段落的文本修饰，见text组件text-decoration样式属性。

-

font-family

-

string

-

sans-serif

-

否

-

设置文本段落的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

-
- diff --git a/zh-cn/application-dev/js-reference/stack.md b/zh-cn/application-dev/js-reference/stack.md deleted file mode 100755 index f308e968f1ac69ed7b0e9dc50737682c6ce1c3d5..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/stack.md +++ /dev/null @@ -1,642 +0,0 @@ -# stack - -- [权限列表](#zh-cn_topic_0000001058830801_section11257113618419) -- [子组件](#zh-cn_topic_0000001058830801_s2936fc34a22b44aa8389d1ec3de8fa61) -- [属性](#zh-cn_topic_0000001058830801_s7207d4d586504fa3be62558273017fbe) -- [事件](#zh-cn_topic_0000001058830801_section1948143416285) -- [样式](#zh-cn_topic_0000001058830801_se6fae888907a4236a6881e60a7567c37) -- [示例](#zh-cn_topic_0000001058830801_section18137649112711) - -堆叠容器，子组件按照顺序依次入栈，后一个子组件覆盖前一个子组件。 - -## 权限列表 - -无 - -## 子组件 - -支持。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

disabled

-

boolean

-

false

-

否

-

当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-
- -## 事件 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

touchstart

-

TouchEvent

-

手指刚触摸屏幕时触发该事件。

-

touchmove

-

TouchEvent

-

手指触摸屏幕后移动时触发该事件。

-

touchcancel

-

TouchEvent

-

手指触摸屏幕中动作被打断时触发该事件。

-

touchend

-

TouchEvent

-

手指触摸结束离开屏幕时触发该事件。

-

click

-

-

-

点击动作触发该事件。

-

longpress

-

-

-

长按动作触发该事件。

-

swipe5+

-

SwipeEvent

-

组件上快速滑动后触发。

-
- -## 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

width

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的宽度。

-

缺省时使用元素自身内容需要的宽度。

-

height

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的高度。

-

缺省时使用元素自身内容需要的高度。

-

padding

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的内边距属性。

-
该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    -

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    -

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    -

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下内边距属性。

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端内边距属性。

-

margin

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

-

  • 只有一个值时，这个值会被指定给全部的四个边。

    -

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    -

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    -

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下外边距属性。

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端外边距属性。

-

border

-

-

-

0

-

否

-

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

-

border-style

-

string

-

solid

-

否

-

使用简写属性设置所有边框的样式，可选值为：

-
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
-
  • solid：显示为一条实线。
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

否

-

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

-

border-[left|top|right|bottom]

-

-

-

-

-

否

-

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

-

border-width

-

<length>

-

0

-

否

-

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

否

-

分别设置左、上、右、下四个边框的宽度。

-

border-color

-

<color>

-

black

-

否

-

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

否

-

分别设置左、上、右、下四个边框的颜色。

-

border-radius

-

<length>

-

-

-

否

-

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，border-[left|top|right|bottom]-style，如果要设置color、width和style，需要将四个方向一起设置（border-width、border-color、border-style）。

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

否

-

分别设置左上，右上，右下和左下四个角的圆角半径。

-

background

-

<linear-gradient>

-

-

-

否

-

仅支持设置渐变样式，与background-color、background-image不兼容。

-

background-color

-

<color>

-

-

-

否

-

设置背景颜色。

-

background-image

-

string

-

-

-

否

-

设置背景图片。与background-color、background不兼容；支持本地图片资源地址。

-

示例：

-
  • background-image: url("/common/background.png")
-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

否

-

设置背景图片的大小。

-
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    -
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
-

background-repeat

-

string

-

repeat

-

否

-

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

-
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

否

-
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    -
-
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>
-

opacity

-

number

-

1

-

否

-

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

-

display

-

string

-

-

flex

-

否

-

确定一个元素所产生的框的类型，可选值为：

-
  • flex：弹性布局。
  • none：不渲染此元素。
-

visibility

-

string

-

-

visible

-

否

-

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

-
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
-
说明：

visibility和display样式都设置时，仅display生效

-
-

flex

-

-

-

-

-

否

-

规定当前组件如何适应父组件中的可用空间。

-

flex可以指定1个，2个5+或3个5+值。

-

单值语法：

-
  • 一个无单位数：用来设置组件的flex-grow
  • 一个有效的宽度值5+：用来设置组件的flex-basis
-

双值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow。第二个值是以下之一：

-
  • 一个无单位数：用来设置组件的flex-shrink
  • 一个有效的宽度值：用来设置组件的flex-basis
-

三值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow；第二个值必须是无单位数，用来设置组件的flex-shrink；第三个值必须是一个有效的宽度值，用来设置组件的flex-basis。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-grow

-

number

-

0

-

否

-

设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-shrink

-

number

-

1

-

否

-

设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-basis

-

<length>

-

-

-

-

否

-

设置组件在主轴方向上的初始大小。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

position

-

string

-

relative

-

否

-

设置元素的定位类型，不支持动态变更。

-
  • fixed：相对与整个界面进行定位。
  • absolute：相对于父元素进行定位。
  • relative：相对于其正常位置进行定位。
-
说明：

absolute属性仅在父容器为<div>、<stack>时生效。

-
-

[left|top|right|bottom]

-

<length>

-

-

-

否

-

left|top|right|bottom需要配合position样式使用，来确定元素的偏移位置。

-
  • left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  • top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  • right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
  • bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
-
- -## 示例 - -``` - - -
-
-
- -``` - -``` -/* xxx.css */ -.stack-parent { - width: 400px; - height: 400px; - background-color: #ffffff; - border-width: 1px; - border-style: solid; -} -.back-child { - width: 300px; - height: 300px; - background-color: #3f56ea; -} -.front-child { - width: 100px; - height: 100px; - background-color: #00bfc9; -} -.positioned-child { - width: 100px; - height: 100px; - left: 50px; - top: 50px; - background-color: #47cc47; -} -.bd-radius { - border-radius: 16px; -} -``` - -![](figures/zh-cn_image_0000001074522727.png) - diff --git a/zh-cn/application-dev/js-reference/stepper-item.md b/zh-cn/application-dev/js-reference/stepper-item.md deleted file mode 100644 index 8ee0a1188bff76e083d38acf5314239349cd4b51..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/stepper-item.md +++ /dev/null @@ -1,637 +0,0 @@ -# stepper-item - -- [权限列表](#zh-cn_topic_0000001060038131_section11257113618419) -- [子组件](#zh-cn_topic_0000001060038131_section9288143101012) -- [属性](#zh-cn_topic_0000001060038131_section2907183951110) -- [样式](#zh-cn_topic_0000001060038131_section1326042123512) -- [事件](#zh-cn_topic_0000001060038131_section121081858163714) - -步骤导航器子组件，作为步骤导航器某一个步骤的内容展示组件。 - ->![](public_sys-resources/icon-note.gif) **说明：** ->从API Version 5 开始支持。 - -## 权限列表 - -无 - -## 子组件 - -支持。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

label

-

Label

-

-

-

否

-

自定义步骤导航器底部步骤提示文本按钮属性，不支持动态修改。如果没有定义该属性，步骤导航器在中文语言环境下，使用“返回”和“下一步”文本按钮，在非中文语言环境下，使用“BACK”和“NEXT”文本按钮。针对第一个步骤，没有回退文本按钮，针对最后一个步骤，下一步文本按钮文本使用“开始”（中文语言）或者“START”（非中文语言）。

-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

disabled

-

boolean

-

false

-

否

-

当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-
- -**表 1** Label对象定义 - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

描述

-

prevLabel

-

string

-

-

-

步骤导航器底部回退文本按钮的描述文本。

-

nextLabel

-

string

-

-

-

步骤导航器底部下一步文本按钮的描述文本。

-

status

-

string

-

normal

-

步骤导航器当前步骤的初始状态，可选值为：

-
  1. normal：正常状态，右侧文本按钮正常显示，可点击进入下一个步骤；
  2. disabled：不可用状态，右侧文本按钮灰度显示，不可点击进入下一个步骤；
  3. waiting：等待状态，右侧文本按钮不显示，使用等待进度条，不可点击进入下一个步骤。
-
- -## 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

color

-

<color>

-

#e600000

-

否

-

文本颜色。

-

font-size

-

<length>

-

16px

-

否

-

文本大小。

-

allow-scale

-

boolean

-

true

-

否

-

文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

-

font-style

-

string

-

normal

-

否

-

文本字体样式，可选值为：

-
  1. normal: 标准的字体样式；
  2. italic: 斜体的字体样式。
-

font-weight

-

number|string

-

normal

-

否

-

文本字体粗细，number类型取值[100, 900]的整数（被100整除），默认为400，取值越大，字体越粗。string类型取值为：lighter、normal、bold、bolder。

-

text-decoration

-

string

-

none

-

否

-

文本修饰，可选值为：

-
  1. underline: 文本下划线修饰；
  2. line-through: 穿过文本的修饰线；
  3. none: 标准文本。
-

font-family

-

string

-

sans-serif

-

否

-

字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

-

padding

-

<length>

-

0

-

否

-
该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    -

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    -

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    -

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

    -
-
-

padding-[left|top|right|bottom]

-

<length>

-

0

-

否

-

设置左、上、右、下内边距属性。

-

padding-[start|end]

-

<length>

-

0

-

否

-

设置起始和末端内边距属性。

-

margin

-

<length>

-

0

-

否

-

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

-

  • 只有一个值时，这个值会被指定给全部的四个边。

    -

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    -

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    -

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    -
-

margin-[left|top|right|bottom]

-

<length>

-

0

-

否

-

设置左、上、右、下外边距属性。

-

margin-[start|end]

-

<length>

-

0

-

否

-

设置起始和末端外边距属性。

-

border

-

-

-

0

-

否

-

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

-

border-style

-

string

-

solid

-

否

-

使用简写属性设置所有边框的样式，可选值为：

-
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
-
  • solid：显示为一条实线。
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

否

-

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

-

border-[left|top|right|bottom]

-

-

-

-

-

否

-

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

-

border-width

-

<length>

-

0

-

否

-

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

否

-

分别设置左、上、右、下四个边框的宽度。

-

border-color

-

<color>

-

black

-

否

-

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

否

-

分别设置左、上、右、下四个边框的颜色。

-

border-radius

-

<length>

-

-

-

否

-

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，如果要设置color和width，需要将四个方向一起设置（border-width、border-color）。

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

否

-

分别设置左上，右上，右下和左下四个角的圆角半径。

-

background

-

<linear-gradient>

-

-

-

否

-

仅支持设置渐变样式，与background-color、background-image不兼容。

-

background-color

-

<color>

-

-

-

否

-

设置背景颜色。

-

background-image

-

string

-

-

-

否

-

设置背景图片。与background-color、background不兼容；支持本地图片资源地址。

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

否

-

设置背景图片的大小。

-
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    -
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
-

background-repeat

-

string

-

repeat

-

否

-

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

-
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

否

-
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    -
-
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>
-

opacity

-

number

-

1

-

否

-

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

-

display

-

string

-

-

flex

-

否

-

确定一个元素所产生的框的类型，可选值为：

-
  • flex：弹性布局。
  • none：不渲染此元素。
-

visibility

-

string

-

-

visible

-

否

-

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

-
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
-
说明：

visibility和display样式都设置时，仅display生效

-
-
- ->![](public_sys-resources/icon-note.gif) **说明：** ->stepper-item不支持长宽样式，宽和父容器stepper一样，高是父容器stepper减去底部导航按钮的高度。 - -## 事件 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

appear

-

-

-

当该步骤出现时触发。

-

disappear

-

-

-

当该步骤消失时触发。

-

touchstart

-

TouchEvent

-

手指刚触摸屏幕时触发该事件。

-

touchmove

-

TouchEvent

-

手指触摸屏幕后移动时触发该事件。

-

touchcancel

-

TouchEvent

-

手指触摸屏幕中动作被打断时触发该事件。

-

touchend

-

TouchEvent

-

手指触摸结束离开屏幕时触发该事件。

-

click

-

-

-

点击动作触发该事件。

-

longpress

-

-

-

长按动作触发该事件。

-

swipe5+

-

SwipeEvent

-

组件上快速滑动后触发。

-
- diff --git a/zh-cn/application-dev/js-reference/stepper.md b/zh-cn/application-dev/js-reference/stepper.md deleted file mode 100644 index 7fb56645e3b7c4814e67033feddc7f7fb2bcefd1..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/stepper.md +++ /dev/null @@ -1,711 +0,0 @@ -# stepper - -- [权限列表](#zh-cn_topic_0000001060518078_section11257113618419) -- [子组件](#zh-cn_topic_0000001060518078_section9288143101012) -- [属性](#zh-cn_topic_0000001060518078_section191521418142311) -- [样式](#zh-cn_topic_0000001060518078_section72591594253) -- [事件](#zh-cn_topic_0000001060518078_section69611614182911) -- [方法](#zh-cn_topic_0000001060518078_section1954212182148) -- [示例](#zh-cn_topic_0000001060518078_section15374183712313) - -步骤导航器。当完成一个任务需要多个步骤时，可以使用步骤导航器展示当前进展。 - ->![](public_sys-resources/icon-note.gif) **说明：** ->从API Version 5 开始支持。 - -## 权限列表 - -无 - -## 子组件 - -仅支持子组件。 - ->![](public_sys-resources/icon-note.gif) **说明：** ->步骤导航器内的步骤顺序按照子组件的顺序进行排序。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

index

-

number

-

-

-

否

-

设置步骤导航器步骤显示第几个stepper-item子组件。

-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

disabled

-

boolean

-

false

-

否

-

当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-
- -## 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

width

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的宽度。

-

缺省时使用元素自身内容需要的宽度。

-

height

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的高度。

-

缺省时使用元素自身内容需要的高度。

-

padding

-

<length>

-

0

-

否

-
该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    -

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    -

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    -

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

    -
-
-

padding-[left|top|right|bottom]

-

<length>

-

0

-

否

-

设置左、上、右、下内边距属性。

-

padding-[start|end]

-

<length>

-

0

-

否

-

设置起始和末端内边距属性。

-

margin

-

<length>

-

0

-

否

-

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

-

  • 只有一个值时，这个值会被指定给全部的四个边。

    -

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    -

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    -

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    -
-

margin-[left|top|right|bottom]

-

<length>

-

0

-

否

-

设置左、上、右、下外边距属性。

-

margin-[start|end]

-

<length>

-

0

-

否

-

设置起始和末端外边距属性。

-

border

-

-

-

0

-

否

-

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

-

border-style

-

string

-

solid

-

否

-

使用简写属性设置所有边框的样式，可选值为：

-
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
-
  • solid：显示为一条实线。
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

否

-

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

-

border-[left|top|right|bottom]

-

-

-

-

-

否

-

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

-

border-width

-

<length>

-

0

-

否

-

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

否

-

分别设置左、上、右、下四个边框的宽度。

-

border-color

-

<color>

-

black

-

否

-

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

否

-

分别设置左、上、右、下四个边框的颜色。

-

border-radius

-

<length>

-

-

-

否

-

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，如果要设置color和width，需要将四个方向一起设置（border-width、border-color）。

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

否

-

分别设置左上，右上，右下和左下四个角的圆角半径。

-

background

-

<linear-gradient>

-

-

-

否

-

仅支持设置渐变样式，与background-color、background-image不兼容。

-

background-color

-

<color>

-

-

-

否

-

设置背景颜色。

-

background-image

-

string

-

-

-

否

-

设置背景图片。与background-color、background不兼容；支持本地图片资源地址。

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

否

-

设置背景图片的大小。

-
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    -
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
-

background-repeat

-

string

-

repeat

-

否

-

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

-
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

否

-
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    -
-
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>
-

opacity

-

number

-

1

-

否

-

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

-

display

-

string

-

-

flex

-

否

-

确定一个元素所产生的框的类型，可选值为：

-
  • flex：弹性布局。
  • none：不渲染此元素。
-

visibility

-

string

-

-

visible

-

否

-

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

-
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
-
说明：

visibility和display样式都设置时，仅display生效

-
-

flex

-

number

-

-

-

否

-

规定当前组件如何适应父组件中的可用空间。它作为一个简写属性，用来设置组件的flex-grow。

-
说明：

仅父容器为<div>、<list-item>、<tabs>时生效。

-
-

flex-grow

-

number

-

0

-

否

-

设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。

-
说明：

仅父容器为<div>、<list-item>、<tabs>时生效。

-
-

flex-shrink

-

number

-

1

-

否

-

设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。

-
说明：

仅父容器为<div>、<list-item>、<tabs>时生效。

-
-

flex-basis

-

<length>

-

-

-

-

否

-

设置组件在主轴方向上的初始大小。

-
说明：

仅父容器为<div>、<list-item>、<tabs>时生效。

-
-

position

-

string

-

relative

-

否

-

设置元素的定位类型，不支持动态变更。

-
  • fixed：相对与整个界面进行定位。
  • absolute：相对于父元素进行定位。
  • relative：相对于其正常位置进行定位。
-
说明：

absolute属性仅在父容器为<div>、<stack>时生效。

-
-

[left|top|right|bottom]

-

<length>

-

-

-

否

-

left|top|right|bottom需要配合position样式使用，来确定元素的偏移位置。

-
  • left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  • top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  • right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
  • bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
-
- ->![](public_sys-resources/icon-note.gif) **说明：** ->stepper组件默认占满父容器大小，建议父组件使用应用窗口大小（或者父组件为根节点）来优化体验。 - -## 事件 - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

finish

-

无

-

当步骤导航器最后一个步骤完成时触发该事件。

-

skip

-

无

-

当通过setNextButtonStatus方法设置当前步骤导航器可跳过时，点击右侧跳过按钮触发该事件。

-

change

-

{ prevIndex：prevIndex, index: index}

-

当步骤导航器点击左边或者右边文本按钮进行步骤切换时触发该事件，prevIndex表示老步骤的序号，index表示新步骤的序号。

-

next

-

{ index：index, pendingIndex: pendingIndex }

-

当用户点击下一步按钮时触发该事件，index表示当前步骤序号，pendingIndex表示将于跳转的序号，该事件有返回值，返回值格式为：{ pendingIndex：pendingIndex }，可以通过指定pendingIndex来修改下一个步骤使用哪个stepper-item子组件。

-

back

-

{ index：index, pendingIndex: pendingIndex }

-

当用户点击上一步按钮时触发该事件，index表示当前步骤序号，pendingIndex表示将于跳转的序号，该事件有返回值，返回值格式为Object：{ pendingIndex：pendingIndex }，可以通过指定pendingIndex来修改上一个步骤使用哪个stepper-item子组件。

-
- -## 方法 - - - - - - - - - - - - -

名称

-

参数

-

描述

-

setNextButtonStatus

-

{ status: string, label: label }

-

设置当前步骤导航器下一步文本按钮的状态，参数中status类型为string，可选值为：

-
  1. normal：正常状态，下一步文本按钮正常显示，可点击进入下一个步骤；
  2. disabled：不可用状态，下一步文本按钮灰度显示，不可点击进入下一个步骤；
  3. waiting：等待状态，下一步文本按钮不显示，使用等待进度条，不可点击进入下一个步骤。
  4. skip：跳过状态，下一步文本按钮显示跳过按钮，点击时会跳过剩下步骤。
-
- -## 示例 - -``` - -
- - -
- First screen -
- - - -
- Second screen -
- - - -
- Third screen -
- - - -
-``` - -``` -/* xxx.css */ -.container { - margin-top: 20px; - flex-direction: column; - align-items: center; - height: 300px; -} -.stepperItem { - flex-direction: column; - align-items: center; -} -.stepperItemContent { - color: #0000ff; - font-size: 50px; - justify-content: center; -} -.button { - width: 60%; - margin-top: 30px; - justify-content: center; -} -``` - -``` -// xxx.js -export default { - data: { - label_1: - { - prevLabel: 'BACK', - nextLabel: 'NEXT', - status: 'normal' - }, - label_2: - { - prevLabel: 'BACK', - nextLabel: 'NEXT', - status: 'normal' - }, - label_3: - { - prevLabel: 'BACK', - nextLabel: 'NEXT', - status: 'normal' - }, - }, - setRightButton(e) { - this.$element('mystepper').setNextButtonStatus({status: 'skip', label: 'SKIP'}); - }, - nextclick(e) { - var index = { - pendingIndex: e.pendingIndex - } - return index; - }, - backclick(e) { - var index = { - pendingIndex: e.pendingIndex - } - return index; - }, -} -``` - -![](figures/Video_2021-03-26_154549.gif) - diff --git a/zh-cn/application-dev/js-reference/swiper.md b/zh-cn/application-dev/js-reference/swiper.md deleted file mode 100755 index 5a3189c5a3ee0290279713e24d66398d04fce2e5..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/swiper.md +++ /dev/null @@ -1,859 +0,0 @@ -# swiper - -- [权限列表](#zh-cn_topic_0000001058948921_section11257113618419) -- [子组件](#zh-cn_topic_0000001058948921_section9288143101012) -- [属性](#zh-cn_topic_0000001058948921_section2907183951110) -- [事件](#zh-cn_topic_0000001058948921_section5891352194417) -- [样式](#zh-cn_topic_0000001058948921_section5775351116) -- [方法](#zh-cn_topic_0000001058948921_section47669296127) -- [示例](#zh-cn_topic_0000001058948921_section1933534232313) - -滑动容器，提供切换子组件显示的能力。 - -## 权限列表 - -无 - -## 子组件 - -支持除之外的子组件。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

index

-

number

-

0

-

否

-

当前在容器中显示的子组件的索引值。

-

autoplay

-

boolean

-

false

-

否

-

子组件是否自动播放，自动播放状态下，导航点不可操作5+。

-

interval

-

number

-

3000

-

否

-

使用自动播放时播放的时间间隔，单位为ms。

-

indicator

-

boolean

-

true

-

否

-

是否启用导航点指示器，默认true。

-

digital5+

-

boolean

-

false

-

否

-

是否启用数字导航点，默认为false。

-
说明：

必须设置indicator时才能生效数字导航点。

-
-

indicatordisabled5+

-

boolean

-

false

-

否

-

指示器是否禁止用户手势操作，设置为true时，指示器不会响应用户的点击拖拽。

-

loop

-

boolean

-

true

-

否

-

是否开启循环轮播。

-

duration

-

number

-

-

-

否

-

子组件切换的动画时长。

-

vertical

-

boolean

-

false

-

否

-

是否为纵向滑动，纵向滑动时采用纵向的指示器。

-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

disabled

-

boolean

-

false

-

否

-

当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-
- -## 事件 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

change

-

{ index: currentIndex }

-

当前显示的组件索引变化时触发该事件。

-

touchstart

-

TouchEvent

-

手指刚触摸屏幕时触发该事件。

-

touchmove

-

TouchEvent

-

手指触摸屏幕后移动时触发该事件。

-

touchcancel

-

TouchEvent

-

手指触摸屏幕中动作被打断时触发该事件。

-

touchend

-

TouchEvent

-

手指触摸结束离开屏幕时触发该事件。

-

click

-

-

-

点击动作触发该事件。

-

longpress

-

-

-

长按动作触发该事件。

-

swipe5+

-

SwipeEvent

-

组件上快速滑动后触发。

-
- -## 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

indicator-color

-

<color>

-

-

-

否

-

导航点指示器的填充颜色。

-

indicator-selected-color

-

<color>

-

#ff007dff

-

否

-

导航点指示器选中的颜色。

-

indicator-size

-

<length>

-

4px

-

否

-

导航点指示器的直径大小。

-

indicator-top|left|right|bottom

-

<length> | <percentage>

-

-

-

否

-

导航点指示器在swiper中的相对位置。

-

width

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的宽度。

-

缺省时使用元素自身内容需要的宽度。

-

height

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的高度。

-

缺省时使用元素自身内容需要的高度。

-

padding

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的内边距属性。

-
该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    -

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    -

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    -

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下内边距属性。

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端内边距属性。

-

margin

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

-

  • 只有一个值时，这个值会被指定给全部的四个边。

    -

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    -

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    -

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下外边距属性。

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端外边距属性。

-

border

-

-

-

0

-

否

-

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

-

border-style

-

string

-

solid

-

否

-

使用简写属性设置所有边框的样式，可选值为：

-
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
-
  • solid：显示为一条实线。
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

否

-

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

-

border-[left|top|right|bottom]

-

-

-

-

-

否

-

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

-

border-width

-

<length>

-

0

-

否

-

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

否

-

分别设置左、上、右、下四个边框的宽度。

-

border-color

-

<color>

-

black

-

否

-

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

否

-

分别设置左、上、右、下四个边框的颜色。

-

border-radius

-

<length>

-

-

-

否

-

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，border-[left|top|right|bottom]-style，如果要设置color、width和style，需要将四个方向一起设置（border-width、border-color、border-style）。

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

否

-

分别设置左上，右上，右下和左下四个角的圆角半径。

-

background

-

<linear-gradient>

-

-

-

否

-

仅支持设置渐变样式，与background-color、background-image不兼容。

-

background-color

-

<color>

-

-

-

否

-

设置背景颜色。

-

background-image

-

string

-

-

-

否

-

设置背景图片。与background-color、background不兼容；支持本地图片资源地址。

-

示例：

-
  • background-image: url("/common/background.png")
-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

否

-

设置背景图片的大小。

-
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    -
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
-

background-repeat

-

string

-

repeat

-

否

-

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

-
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

否

-
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    -
-
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>
-

opacity

-

number

-

1

-

否

-

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

-

display

-

string

-

-

flex

-

否

-

确定一个元素所产生的框的类型，可选值为：

-
  • flex：弹性布局。
  • none：不渲染此元素。
-

visibility

-

string

-

-

visible

-

否

-

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

-
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
-
说明：

visibility和display样式都设置时，仅display生效

-
-

flex

-

-

-

-

-

否

-

规定当前组件如何适应父组件中的可用空间。

-

flex可以指定1个，2个5+或3个5+值。

-

单值语法：

-
  • 一个无单位数：用来设置组件的flex-grow
  • 一个有效的宽度值5+：用来设置组件的flex-basis
-

双值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow。第二个值是以下之一：

-
  • 一个无单位数：用来设置组件的flex-shrink
  • 一个有效的宽度值：用来设置组件的flex-basis
-

三值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow；第二个值必须是无单位数，用来设置组件的flex-shrink；第三个值必须是一个有效的宽度值，用来设置组件的flex-basis。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-grow

-

number

-

0

-

否

-

设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-shrink

-

number

-

1

-

否

-

设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-basis

-

<length>

-

-

-

-

否

-

设置组件在主轴方向上的初始大小。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

position

-

string

-

relative

-

否

-

设置元素的定位类型，不支持动态变更。

-
  • fixed：相对与整个界面进行定位。
  • absolute：相对于父元素进行定位。
  • relative：相对于其正常位置进行定位。
-
说明：

absolute属性仅在父容器为<div>、<stack>时生效。

-
-

[left|top|right|bottom]

-

<length>

-

-

-

否

-

left|top|right|bottom需要配合position样式使用，来确定元素的偏移位置。

-
  • left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  • top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  • right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
  • bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
-
- -## 方法 - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

swipeTo

-

{ index: number(指定位置) }

-

切换到index位置的子组件。

-

showNext

-

无

-

显示下一个子组件。

-

showPrevious

-

无

-

显示上一个子组件。

-
- -## 示例 - -``` - -
- -
- First screen -
-
- Second screen -
-
- Third screen -
- - - - -
-``` - -``` -/* xxx.css */ -.container { - flex-direction: column; - width: 100%; - height: 100%; - align-items: center; -} -.swiper { - flex-direction: column; - align-content: center; - align-items: center; - width: 70%; - height: 130px; - border: 1px solid #000000; - indicator-color: #cf2411; - indicator-size: 14px; - indicator-bottom: 20px; - indicator-right: 30px; - margin-top: 100px; -} -.swiperContent { - height: 100%; - justify-content: center; -} -.button { - width: 70%; - margin: 10px; -} -.text { - font-size: 40px; -} -``` - -``` -// xxx.js -export default { - swipeTo() { - this.$element('swiper').swipeTo({index: 2}); - }, - showNext() { - this.$element('swiper').showNext(); - }, - showPrevious() { - this.$element('swiper').showPrevious(); - } -} -``` - -![](figures/swiper.gif) - diff --git a/zh-cn/application-dev/js-reference/switch.md b/zh-cn/application-dev/js-reference/switch.md deleted file mode 100755 index 744e57d17ce298e6dffb86466d6d5dba397ec052..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/switch.md +++ /dev/null @@ -1,738 +0,0 @@ -# switch - -- [权限列表](#zh-cn_topic_0000001058460511_section11257113618419) -- [子组件](#zh-cn_topic_0000001058460511_section9288143101012) -- [属性](#zh-cn_topic_0000001058460511_section2907183951110) -- [事件](#zh-cn_topic_0000001058460511_section138898141137) -- [样式](#zh-cn_topic_0000001058460511_section5775351116) - -开关选择器，通过开关，开启或关闭某个功能。 - -## 权限列表 - -无 - -## 子组件 - -不支持。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

checked

-

boolean

-

false

-

否

-

是否选中。

-

showtext

-

boolean

-

false

-

否

-

是否显示文本。

-

texton

-

string

-

"On"

-

否

-

选中时显示的文本。

-

textoff

-

string

-

"Off"

-

否

-

未选中时显示的文本。

-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

disabled

-

boolean

-

false

-

否

-

当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-
- -## 事件 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

change

-

{ checked: checkedValue }

-

选中状态改变时触发该事件。

-

touchstart

-

TouchEvent

-

手指刚触摸屏幕时触发该事件。

-

touchmove

-

TouchEvent

-

手指触摸屏幕后移动时触发该事件。

-

touchcancel

-

TouchEvent

-

手指触摸屏幕中动作被打断时触发该事件。

-

touchend

-

TouchEvent

-

手指触摸结束离开屏幕时触发该事件。

-

click

-

-

-

点击动作触发该事件。

-

longpress

-

-

-

长按动作触发该事件。

-

swipe5+

-

SwipeEvent

-

组件上快速滑动后触发。

-
- -## 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

texton-color

-

<color>

-

#000000

-

否

-

选中时显示的文本颜色。

-

textoff-color

-

<color>

-

#000000

-

否

-

未选中时显示的文本颜色。

-

text-padding

-

number

-

0px

-

否

-

texton/textoff中最长文本两侧距离滑块边界的距离。

-

font-size

-

<length>

-

-

-

否

-

文本尺寸，仅设置texton和textoff生效。

-

allow-scale

-

boolean

-

true

-

否

-

文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

-
说明：

如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。

-
-

font-style

-

string

-

normal

-

否

-

字体样式，仅设置texton和textoff生效。见text组件font-style的样式属性。

-

font-weight

-

number | string

-

normal

-

否

-

字体粗细，仅设置texton和textoff生效。见text组件的font-weight的样式属性。

-

font-family

-

string

-

sans-serif

-

否

-

字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。仅设置texton和textoff生效。

-

width

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的宽度。

-

缺省时使用元素自身内容需要的宽度。

-

height

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的高度。

-

缺省时使用元素自身内容需要的高度。

-

padding

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的内边距属性。

-
该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    -

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    -

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    -

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下内边距属性。

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端内边距属性。

-

margin

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

-

  • 只有一个值时，这个值会被指定给全部的四个边。

    -

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    -

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    -

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下外边距属性。

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端外边距属性。

-

border

-

-

-

0

-

否

-

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

-

border-style

-

string

-

solid

-

否

-

使用简写属性设置所有边框的样式，可选值为：

-
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
-
  • solid：显示为一条实线。
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

否

-

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

-

border-[left|top|right|bottom]

-

-

-

-

-

否

-

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

-

border-width

-

<length>

-

0

-

否

-

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

否

-

分别设置左、上、右、下四个边框的宽度。

-

border-color

-

<color>

-

black

-

否

-

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

否

-

分别设置左、上、右、下四个边框的颜色。

-

border-radius

-

<length>

-

-

-

否

-

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，border-[left|top|right|bottom]-style，如果要设置color、width和style，需要将四个方向一起设置（border-width、border-color、border-style）。

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

否

-

分别设置左上，右上，右下和左下四个角的圆角半径。

-

background

-

<linear-gradient>

-

-

-

否

-

仅支持设置渐变样式，与background-color、background-image不兼容。

-

background-color

-

<color>

-

-

-

否

-

设置背景颜色。

-

background-image

-

string

-

-

-

否

-

设置背景图片。与background-color、background不兼容；支持本地图片资源地址。

-

示例：

-
  • background-image: url("/common/background.png")
-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

否

-

设置背景图片的大小。

-
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    -
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
-

background-repeat

-

string

-

repeat

-

否

-

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

-
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

否

-
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    -
-
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>
-

opacity

-

number

-

1

-

否

-

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

-

display

-

string

-

-

flex

-

否

-

确定一个元素所产生的框的类型，可选值为：

-
  • flex：弹性布局。
  • none：不渲染此元素。
-

visibility

-

string

-

-

visible

-

否

-

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

-
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
-
说明：

visibility和display样式都设置时，仅display生效

-
-

flex

-

-

-

-

-

否

-

规定当前组件如何适应父组件中的可用空间。

-

flex可以指定1个，2个5+或3个5+值。

-

单值语法：

-
  • 一个无单位数：用来设置组件的flex-grow
  • 一个有效的宽度值5+：用来设置组件的flex-basis
-

双值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow。第二个值是以下之一：

-
  • 一个无单位数：用来设置组件的flex-shrink
  • 一个有效的宽度值：用来设置组件的flex-basis
-

三值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow；第二个值必须是无单位数，用来设置组件的flex-shrink；第三个值必须是一个有效的宽度值，用来设置组件的flex-basis。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-grow

-

number

-

0

-

否

-

设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-shrink

-

number

-

1

-

否

-

设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-basis

-

<length>

-

-

-

-

否

-

设置组件在主轴方向上的初始大小。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

position

-

string

-

relative

-

否

-

设置元素的定位类型，不支持动态变更。

-
  • fixed：相对与整个界面进行定位。
  • absolute：相对于父元素进行定位。
  • relative：相对于其正常位置进行定位。
-
说明：

absolute属性仅在父容器为<div>、<stack>时生效。

-
-

[left|top|right|bottom]

-

<length>

-

-

-

否

-

left|top|right|bottom需要配合position样式使用，来确定元素的偏移位置。

-
  • left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  • top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  • right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
  • bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
-
- diff --git a/zh-cn/application-dev/js-reference/tab-bar.md b/zh-cn/application-dev/js-reference/tab-bar.md deleted file mode 100755 index 7506bc552bd576826080977ebd30de893945d4a0..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/tab-bar.md +++ /dev/null @@ -1,609 +0,0 @@ -# tab-bar - -- [权限列表](#zh-cn_topic_0000001058340503_section11257113618419) -- [子组件](#zh-cn_topic_0000001058340503_sfddaafa400fa4802a6c4344a0cc0f9ed) -- [属性](#zh-cn_topic_0000001058340503_s45d9533b71b049aba681c57db73d9f7b) -- [事件](#zh-cn_topic_0000001058340503_section71081937192815) -- [样式](#zh-cn_topic_0000001058340503_s20317619719f4f708afc05306d7630b3) - -<[tabs](tabs.md#ZH-CN_TOPIC_0000001162414619)\>的子组件，用来展示tab的标签区，子组件排列方式为横向排列。 - -## 权限列表 - -无 - -## 子组件 - -支持。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

mode

-

string

-

scrollable

-

否

-

设置组件宽度的可延展性。可选值为：

-
  • scrollable：子组件宽度为实际设置的宽度，当宽度之和大于tab-bar的宽度时，子组件可以横向滑动。
  • fixed：子组件宽度均分tab-bar的宽度。
-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

disabled

-

boolean

-

false

-

否

-

当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-
- -## 事件 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

touchstart

-

TouchEvent

-

手指刚触摸屏幕时触发该事件。

-

touchmove

-

TouchEvent

-

手指触摸屏幕后移动时触发该事件。

-

touchcancel

-

TouchEvent

-

手指触摸屏幕中动作被打断时触发该事件。

-

touchend

-

TouchEvent

-

手指触摸结束离开屏幕时触发该事件。

-

click

-

-

-

点击动作触发该事件。

-

longpress

-

-

-

长按动作触发该事件。

-

swipe5+

-

SwipeEvent

-

组件上快速滑动后触发。

-
- -## 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

height

-

<length> | <percentage>

-

100px

-

否

-

每个tab-bar的高度。

-

缺省时使用元素自身内容需要的高度。

-

width

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的宽度。

-

缺省时使用元素自身内容需要的宽度。

-

padding

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的内边距属性。

-
该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    -

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    -

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    -

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下内边距属性。

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端内边距属性。

-

margin

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

-

  • 只有一个值时，这个值会被指定给全部的四个边。

    -

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    -

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    -

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下外边距属性。

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端外边距属性。

-

border

-

-

-

0

-

否

-

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

-

border-style

-

string

-

solid

-

否

-

使用简写属性设置所有边框的样式，可选值为：

-
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
-
  • solid：显示为一条实线。
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

否

-

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

-

border-[left|top|right|bottom]

-

-

-

-

-

否

-

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

-

border-width

-

<length>

-

0

-

否

-

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

否

-

分别设置左、上、右、下四个边框的宽度。

-

border-color

-

<color>

-

black

-

否

-

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

否

-

分别设置左、上、右、下四个边框的颜色。

-

border-radius

-

<length>

-

-

-

否

-

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，border-[left|top|right|bottom]-style，如果要设置color、width和style，需要将四个方向一起设置（border-width、border-color、border-style）。

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

否

-

分别设置左上，右上，右下和左下四个角的圆角半径。

-

background

-

<linear-gradient>

-

-

-

否

-

仅支持设置渐变样式，与background-color、background-image不兼容。

-

background-color

-

<color>

-

-

-

否

-

设置背景颜色。

-

background-image

-

string

-

-

-

否

-

设置背景图片。与background-color、background不兼容；支持本地图片资源地址。

-

示例：

-
  • background-image: url("/common/background.png")
-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

否

-

设置背景图片的大小。

-
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    -
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
-

background-repeat

-

string

-

repeat

-

否

-

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

-
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

否

-
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    -
-
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>
-

opacity

-

number

-

1

-

否

-

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

-

display

-

string

-

-

flex

-

否

-

确定一个元素所产生的框的类型，可选值为：

-
  • flex：弹性布局。
  • none：不渲染此元素。
-

visibility

-

string

-

-

visible

-

否

-

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

-
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
-
说明：

visibility和display样式都设置时，仅display生效

-
-

flex

-

-

-

-

-

否

-

规定当前组件如何适应父组件中的可用空间。

-

flex可以指定1个，2个5+或3个5+值。

-

单值语法：

-
  • 一个无单位数：用来设置组件的flex-grow
  • 一个有效的宽度值5+：用来设置组件的flex-basis
-

双值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow。第二个值是以下之一：

-
  • 一个无单位数：用来设置组件的flex-shrink
  • 一个有效的宽度值：用来设置组件的flex-basis
-

三值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow；第二个值必须是无单位数，用来设置组件的flex-shrink；第三个值必须是一个有效的宽度值，用来设置组件的flex-basis。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-grow

-

number

-

0

-

否

-

设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-shrink

-

number

-

1

-

否

-

设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-basis

-

<length>

-

-

-

-

否

-

设置组件在主轴方向上的初始大小。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

position

-

string

-

relative

-

否

-

设置元素的定位类型，不支持动态变更。

-
  • fixed：相对与整个界面进行定位。
  • absolute：相对于父元素进行定位。
  • relative：相对于其正常位置进行定位。
-
说明：

absolute属性仅在父容器为<div>、<stack>时生效。

-
-

[left|top|right|bottom]

-

<length>

-

-

-

否

-

left|top|right|bottom需要配合position样式使用，来确定元素的偏移位置。

-
  • left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  • top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  • right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
  • bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
-
- diff --git a/zh-cn/application-dev/js-reference/tab-content.md b/zh-cn/application-dev/js-reference/tab-content.md deleted file mode 100755 index 4e60593a40105fadb272b3bec58b1f492417c9f1..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/tab-content.md +++ /dev/null @@ -1,608 +0,0 @@ -# tab-content - -- [权限列表](#zh-cn_topic_0000001059340508_section11257113618419) -- [子组件](#zh-cn_topic_0000001059340508_s6831289f2fac48a892746bd57f336c26) -- [属性](#zh-cn_topic_0000001059340508_s623ab9c704b24c329d0e91e85a30263e) -- [事件](#zh-cn_topic_0000001059340508_s0c39d3f35b9d4af69a19456ae743c675) -- [样式](#zh-cn_topic_0000001059340508_section1056973623012) - -<[tabs](tabs.md#ZH-CN_TOPIC_0000001162414619)\>的子组件，用来展示tab的内容区，高度默认充满tabs剩余空间，子组件排列方式为横向排列，当作为容器组件的子元素时在主轴方向需要设置tab-content的确定长度，否则无法显示。 - -## 权限列表 - -无 - -## 子组件 - -支持。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

scrollable

-

boolean

-

true

-

否

-

是否可以通过左右滑动进行页面切换。默认为true，设置为false后，页面的切换只能通过tab-bar的点击实现。

-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

disabled

-

boolean

-

false

-

否

-

当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-
- -## 事件 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

touchstart

-

TouchEvent

-

手指刚触摸屏幕时触发该事件。

-

touchmove

-

TouchEvent

-

手指触摸屏幕后移动时触发该事件。

-

touchcancel

-

TouchEvent

-

手指触摸屏幕中动作被打断时触发该事件。

-

touchend

-

TouchEvent

-

手指触摸结束离开屏幕时触发该事件。

-

click

-

-

-

点击动作触发该事件。

-

longpress

-

-

-

长按动作触发该事件。

-

swipe5+

-

SwipeEvent

-

组件上快速滑动后触发。

-
- -## 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

width

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的宽度。

-

缺省时使用元素自身内容需要的宽度。

-

height

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的高度。

-

缺省时使用元素自身内容需要的高度。

-

padding

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的内边距属性。

-
该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    -

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    -

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    -

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下内边距属性。

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端内边距属性。

-

margin

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

-

  • 只有一个值时，这个值会被指定给全部的四个边。

    -

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    -

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    -

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下外边距属性。

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端外边距属性。

-

border

-

-

-

0

-

否

-

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

-

border-style

-

string

-

solid

-

否

-

使用简写属性设置所有边框的样式，可选值为：

-
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
-
  • solid：显示为一条实线。
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

否

-

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

-

border-[left|top|right|bottom]

-

-

-

-

-

否

-

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

-

border-width

-

<length>

-

0

-

否

-

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

否

-

分别设置左、上、右、下四个边框的宽度。

-

border-color

-

<color>

-

black

-

否

-

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

否

-

分别设置左、上、右、下四个边框的颜色。

-

border-radius

-

<length>

-

-

-

否

-

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，border-[left|top|right|bottom]-style，如果要设置color、width和style，需要将四个方向一起设置（border-width、border-color、border-style）。

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

否

-

分别设置左上，右上，右下和左下四个角的圆角半径。

-

background

-

<linear-gradient>

-

-

-

否

-

仅支持设置渐变样式，与background-color、background-image不兼容。

-

background-color

-

<color>

-

-

-

否

-

设置背景颜色。

-

background-image

-

string

-

-

-

否

-

设置背景图片。与background-color、background不兼容；支持本地图片资源地址。

-

示例：

-
  • background-image: url("/common/background.png")
-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

否

-

设置背景图片的大小。

-
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    -
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
-

background-repeat

-

string

-

repeat

-

否

-

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

-
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

否

-
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    -
-
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>
-

opacity

-

number

-

1

-

否

-

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

-

display

-

string

-

-

flex

-

否

-

确定一个元素所产生的框的类型，可选值为：

-
  • flex：弹性布局。
  • none：不渲染此元素。
-

visibility

-

string

-

-

visible

-

否

-

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

-
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
-
说明：

visibility和display样式都设置时，仅display生效

-
-

flex

-

-

-

-

-

否

-

规定当前组件如何适应父组件中的可用空间。

-

flex可以指定1个，2个5+或3个5+值。

-

单值语法：

-
  • 一个无单位数：用来设置组件的flex-grow
  • 一个有效的宽度值5+：用来设置组件的flex-basis
-

双值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow。第二个值是以下之一：

-
  • 一个无单位数：用来设置组件的flex-shrink
  • 一个有效的宽度值：用来设置组件的flex-basis
-

三值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow；第二个值必须是无单位数，用来设置组件的flex-shrink；第三个值必须是一个有效的宽度值，用来设置组件的flex-basis。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-grow

-

number

-

0

-

否

-

设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-shrink

-

number

-

1

-

否

-

设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-basis

-

<length>

-

-

-

-

否

-

设置组件在主轴方向上的初始大小。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

position

-

string

-

relative

-

否

-

设置元素的定位类型，不支持动态变更。

-
  • fixed：相对与整个界面进行定位。
  • absolute：相对于父元素进行定位。
  • relative：相对于其正常位置进行定位。
-
说明：

absolute属性仅在父容器为<div>、<stack>时生效。

-
-

[left|top|right|bottom]

-

<length>

-

-

-

否

-

left|top|right|bottom需要配合position样式使用，来确定元素的偏移位置。

-
  • left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  • top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  • right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
  • bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
-
- diff --git a/zh-cn/application-dev/js-reference/tabs.md b/zh-cn/application-dev/js-reference/tabs.md deleted file mode 100755 index 0093d39ee0d6bc7bb3c1140b783f527465ea3343..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/tabs.md +++ /dev/null @@ -1,699 +0,0 @@ -# tabs - -- [权限列表](#zh-cn_topic_0000001058460507_section11257113618419) -- [子组件](#zh-cn_topic_0000001058460507_section9288143101012) -- [属性](#zh-cn_topic_0000001058460507_section2907183951110) -- [事件](#zh-cn_topic_0000001058460507_section3892191911214) -- [样式](#zh-cn_topic_0000001058460507_section1212881582618) -- [示例](#zh-cn_topic_0000001058460507_section14993155318710) - -tab页签容器。 - -## 权限列表 - -无 - -## 子组件 - -仅支持最多一个<[tab-bar](tab-bar.md#ZH-CN_TOPIC_0000001115974736)\>和最多一个<[tab-content](tab-content.md#ZH-CN_TOPIC_0000001162494601)\>。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

index

-

number

-

0

-

否

-

当前处于激活态的tab索引。

-

vertical

-

boolean

-

false

-

否

-

是否为纵向的tab，默认为false，可选值为：

-
  • false：tabbar和tabcontent上下排列。
  • true：tabbar和tabcontent左右排列。
-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

disabled

-

boolean

-

false

-

否

-

当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-
- -## 事件 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

change

-

{ index: indexValue }

-

tab页签切换后触发。

-

touchstart

-

TouchEvent

-

手指刚触摸屏幕时触发该事件。

-

touchmove

-

TouchEvent

-

手指触摸屏幕后移动时触发该事件。

-

touchcancel

-

TouchEvent

-

手指触摸屏幕中动作被打断时触发该事件。

-

touchend

-

TouchEvent

-

手指触摸结束离开屏幕时触发该事件。

-

click

-

-

-

点击动作触发该事件。

-

longpress

-

-

-

长按动作触发该事件。

-

swipe5+

-

SwipeEvent

-

组件上快速滑动后触发。

-
- -## 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

width

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的宽度。

-

缺省时使用元素自身内容需要的宽度。

-

height

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的高度。

-

缺省时使用元素自身内容需要的高度。

-

padding

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的内边距属性。

-
该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    -

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    -

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    -

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下内边距属性。

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端内边距属性。

-

margin

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

-

  • 只有一个值时，这个值会被指定给全部的四个边。

    -

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    -

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    -

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下外边距属性。

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端外边距属性。

-

border

-

-

-

0

-

否

-

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

-

border-style

-

string

-

solid

-

否

-

使用简写属性设置所有边框的样式，可选值为：

-
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
-
  • solid：显示为一条实线。
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

否

-

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

-

border-[left|top|right|bottom]

-

-

-

-

-

否

-

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

-

border-width

-

<length>

-

0

-

否

-

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

否

-

分别设置左、上、右、下四个边框的宽度。

-

border-color

-

<color>

-

black

-

否

-

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

否

-

分别设置左、上、右、下四个边框的颜色。

-

border-radius

-

<length>

-

-

-

否

-

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，border-[left|top|right|bottom]-style，如果要设置color、width和style，需要将四个方向一起设置（border-width、border-color、border-style）。

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

否

-

分别设置左上，右上，右下和左下四个角的圆角半径。

-

background

-

<linear-gradient>

-

-

-

否

-

仅支持设置渐变样式，与background-color、background-image不兼容。

-

background-color

-

<color>

-

-

-

否

-

设置背景颜色。

-

background-image

-

string

-

-

-

否

-

设置背景图片。与background-color、background不兼容；支持本地图片资源地址。

-

示例：

-
  • background-image: url("/common/background.png")
-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

否

-

设置背景图片的大小。

-
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    -
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
-

background-repeat

-

string

-

repeat

-

否

-

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

-
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

否

-
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    -
-
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>
-

opacity

-

number

-

1

-

否

-

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

-

display

-

string

-

-

flex

-

否

-

确定一个元素所产生的框的类型，可选值为：

-
  • flex：弹性布局。
  • none：不渲染此元素。
-

visibility

-

string

-

-

visible

-

否

-

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

-
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
-
说明：

visibility和display样式都设置时，仅display生效

-
-

flex

-

-

-

-

-

否

-

规定当前组件如何适应父组件中的可用空间。

-

flex可以指定1个，2个5+或3个5+值。

-

单值语法：

-
  • 一个无单位数：用来设置组件的flex-grow
  • 一个有效的宽度值5+：用来设置组件的flex-basis
-

双值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow。第二个值是以下之一：

-
  • 一个无单位数：用来设置组件的flex-shrink
  • 一个有效的宽度值：用来设置组件的flex-basis
-

三值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow；第二个值必须是无单位数，用来设置组件的flex-shrink；第三个值必须是一个有效的宽度值，用来设置组件的flex-basis。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-grow

-

number

-

0

-

否

-

设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-shrink

-

number

-

1

-

否

-

设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-basis

-

<length>

-

-

-

-

否

-

设置组件在主轴方向上的初始大小。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

position

-

string

-

relative

-

否

-

设置元素的定位类型，不支持动态变更。

-
  • fixed：相对与整个界面进行定位。
  • absolute：相对于父元素进行定位。
  • relative：相对于其正常位置进行定位。
-
说明：

absolute属性仅在父容器为<div>、<stack>时生效。

-
-

[left|top|right|bottom]

-

<length>

-

-

-

否

-

left|top|right|bottom需要配合position样式使用，来确定元素的偏移位置。

-
  • left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  • top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  • right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
  • bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
-
- -## 示例 - -``` - -
- - - Home - Index - Detail - - -
- First screen -
-
- Second screen -
-
- Third screen -
- - -
-``` - -``` -/* xxx.css */ -.container { - flex-direction: column; - justify-content: flex-start; - align-items: center; -} -.tabs { - width: 100%; -} -.tabcontent { - width: 100%; - height: 80%; - justify-content: center; -} -.item-content { - height: 100%; - justify-content: center; -} -.item-title { - font-size: 60px; -} -.tab-bar { - margin: 10px; - height: 60px; - border-color: #007dff; - border-width: 1px; -} -.tab-text { - width: 300px; - text-align: center; -} -``` - -``` -// xxx.js -export default { - change: function(e) { - console.log("Tab index: " + e.index); - }, -} -``` - -![](figures/tab.gif) - diff --git a/zh-cn/application-dev/js-reference/text.md b/zh-cn/application-dev/js-reference/text.md deleted file mode 100755 index 3f7ea22aefe5ca22bb17ac77bdf05d5d5de31f0f..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/text.md +++ /dev/null @@ -1,795 +0,0 @@ -# text - -- [权限列表](#zh-cn_topic_0000001058830803_section11257113618419) -- [子组件](#zh-cn_topic_0000001058830803_section9288143101012) -- [属性](#zh-cn_topic_0000001058830803_section2907183951110) -- [事件](#zh-cn_topic_0000001058830803_section1476513233592) -- [样式](#zh-cn_topic_0000001058830803_section5775351116) - -文本，用于呈现一段信息。 - ->![](public_sys-resources/icon-note.gif) **说明：** ->文本的展示内容需要写在元素标签内。 - -## 权限列表 - -无 - -## 子组件 - -支持<[span](span.md#ZH-CN_TOPIC_0000001115814832)\>。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

disabled

-

boolean

-

false

-

否

-

当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-
- -## 事件 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

touchstart

-

TouchEvent

-

手指刚触摸屏幕时触发该事件。

-

touchmove

-

TouchEvent

-

手指触摸屏幕后移动时触发该事件。

-

touchcancel

-

TouchEvent

-

手指触摸屏幕中动作被打断时触发该事件。

-

touchend

-

TouchEvent

-

手指触摸结束离开屏幕时触发该事件。

-

click

-

-

-

点击动作触发该事件。

-

longpress

-

-

-

长按动作触发该事件。

-

swipe5+

-

SwipeEvent

-

组件上快速滑动后触发。

-
- -## 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

color

-

<color>

-

#e5000000

-

否

-

设置文本的颜色。

-

font-size

-

<length>

-

30px

-

否

-

设置文本的尺寸。

-

allow-scale

-

boolean

-

true

-

否

-

文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

-
说明：

如果需要支持动态生效，请参看config描述文件中config-changes标签。

-
-

letter-spacing

-

<length>

-

0px

-

否

-

设置文本的字符间距。

-

font-style

-

string

-

normal

-

否

-

设置文本的字体样式，可选值为：

-
  • normal：标准的字体样式；
  • italic：斜体的字体样式。
-

font-weight

-

number | string

-

normal

-

否

-

设置文本的字体粗细，number类型取值[100, 900]，默认为400，取值越大，字体越粗。

-
说明：

number取值必须为100的整数倍。

-
-

string类型取值支持如下四个值：lighter、normal、bold、bolder。

-

text-decoration

-

string

-

none

-

否

-

设置文本的文本修饰，可选值为：

-
  • underline：文字下划线修饰；
  • line-through：穿过文本的修饰线n
  • none：标准文本。
-

text-align

-

string

-

start

-

否

-

设置文本的文本对齐方式，可选值为：

-
  • left：文本左对齐；
  • center：文本居中对齐；
  • right：文本右对齐；
  • start：根据文字书写相同的方向对齐；
  • end：根据文字书写相反的方向对齐。
-
说明：

如文本宽度未指定大小，文本的宽度和父容器的宽度大小相等的情况下，对齐效果可能会不明显。

-
-

line-height

-

<length>

-

0px

-

否

-

设置文本的文本行高，设置为0px时，不限制文本行高，自适应字体大小。

-

text-overflow

-

string

-

clip

-

否

-

在设置了最大行数的情况下生效，可选值为：

-
  • clip：将文本根据父容器大小进行裁剪显示；
  • ellipsis：根据父容器大小显示，显示不下的文本用省略号代替。需配合max-lines使用。
-

font-family

-

string

-

sans-serif

-

否

-

设置文本的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

-

max-lines

-

number

-

-

-

否

-

设置文本的最大行数。

-

min-font-size

-

<length>

-

-

-

否

-

文本最小字号，需要和文本最大字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。

-

max-font-size

-

<length>

-

-

-

否

-

文本最大字号，需要和文本最小字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。

-

font-size-step

-

<length>

-

1px

-

否

-

文本动态调整字号时的步长，需要设置最小，最大字号样式生效。

-

prefer-font-sizes

-

<array>

-

-

-

否

-

预设的字号集合，在动态尺寸调整时，优先使用预设字号集合中的字号匹配设置的最大行数，如果预设字号集合未设置，则使用最大最小和步长调整字号。针对仍然无法满足最大行数要求的情况，使用text-overflow设置项进行截断，设置预设尺寸集后，font-size、max-font-size、min-font-size和font-size-step不生效。

-

如：prefer-font-sizes: 12px,14px,16px

-

width

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的宽度。

-

缺省时使用元素自身内容需要的宽度。

-

height

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的高度。

-

缺省时使用元素自身内容需要的高度。

-

padding

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的内边距属性。

-
该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    -

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    -

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    -

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下内边距属性。

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端内边距属性。

-

margin

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

-

  • 只有一个值时，这个值会被指定给全部的四个边。

    -

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    -

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    -

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下外边距属性。

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端外边距属性。

-

border

-

-

-

0

-

否

-

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

-

border-style

-

string

-

solid

-

否

-

使用简写属性设置所有边框的样式，可选值为：

-
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
-
  • solid：显示为一条实线。
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

否

-

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

-

border-[left|top|right|bottom]

-

-

-

-

-

否

-

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

-

border-width

-

<length>

-

0

-

否

-

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

否

-

分别设置左、上、右、下四个边框的宽度。

-

border-color

-

<color>

-

black

-

否

-

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

否

-

分别设置左、上、右、下四个边框的颜色。

-

border-radius

-

<length>

-

-

-

否

-

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，border-[left|top|right|bottom]-style，如果要设置color、width和style，需要将四个方向一起设置（border-width、border-color、border-style）。

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

否

-

分别设置左上，右上，右下和左下四个角的圆角半径。

-

background

-

<linear-gradient>

-

-

-

否

-

仅支持设置渐变样式，与background-color、background-image不兼容。

-

background-color

-

<color>

-

-

-

否

-

设置背景颜色。

-

background-image

-

string

-

-

-

否

-

设置背景图片。与background-color、background不兼容；支持本地图片资源地址。

-

示例：

-
  • background-image: url("/common/background.png")
-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

否

-

设置背景图片的大小。

-
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    -
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
-

background-repeat

-

string

-

repeat

-

否

-

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

-
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

否

-
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    -
-
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>
-

opacity

-

number

-

1

-

否

-

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

-

display

-

string

-

-

flex

-

否

-

确定一个元素所产生的框的类型，可选值为：

-
  • flex：弹性布局。
  • none：不渲染此元素。
-

visibility

-

string

-

-

visible

-

否

-

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

-
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
-
说明：

visibility和display样式都设置时，仅display生效

-
-

flex

-

-

-

-

-

否

-

规定当前组件如何适应父组件中的可用空间。

-

flex可以指定1个，2个5+或3个5+值。

-

单值语法：

-
  • 一个无单位数：用来设置组件的flex-grow
  • 一个有效的宽度值5+：用来设置组件的flex-basis
-

双值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow。第二个值是以下之一：

-
  • 一个无单位数：用来设置组件的flex-shrink
  • 一个有效的宽度值：用来设置组件的flex-basis
-

三值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow；第二个值必须是无单位数，用来设置组件的flex-shrink；第三个值必须是一个有效的宽度值，用来设置组件的flex-basis。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-grow

-

number

-

0

-

否

-

设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-shrink

-

number

-

1

-

否

-

设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-basis

-

<length>

-

-

-

-

否

-

设置组件在主轴方向上的初始大小。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

position

-

string

-

relative

-

否

-

设置元素的定位类型，不支持动态变更。

-
  • fixed：相对与整个界面进行定位。
  • absolute：相对于父元素进行定位。
  • relative：相对于其正常位置进行定位。
-
说明：

absolute属性仅在父容器为<div>、<stack>时生效。

-
-

[left|top|right|bottom]

-

<length>

-

-

-

否

-

left|top|right|bottom需要配合position样式使用，来确定元素的偏移位置。

-
  • left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  • top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  • right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
  • bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
-
- ->![](public_sys-resources/icon-note.gif) **说明：** ->- 字体动态缩放：预设尺寸集合和最小最大字号调节基于是否满足最大行数要求，预设尺寸集合会按照从左到右顺序查看是否满足最大行数要求，最小最大字号调节则基于从大到小顺序查看是否满足最大行数要求。 ->- 文本换行：文本可以通过转义字符\\r\\n进行换行。 ->- 文本标签内支持转义字符'\\'。 ->- 当使用子组件span组成文本段落时，如果span属性样式异常，将导致text段落无法显示。 ->- letter-spacing、text-align、line-height、text-overflow和max-lines样式作用于text及其子组件（span）组成的文本内容。 - diff --git a/zh-cn/application-dev/js-reference/toggle.md b/zh-cn/application-dev/js-reference/toggle.md deleted file mode 100644 index 30bae3d5a814d6ee40164e7e233cda888a8e90f4..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/toggle.md +++ /dev/null @@ -1,635 +0,0 @@ -# toggle - -- [权限列表](#zh-cn_topic_0000001061155984_section11257113618419) -- [子组件](#zh-cn_topic_0000001061155984_section9288143101012) -- [属性](#zh-cn_topic_0000001061155984_section2598341175212) -- [样式](#zh-cn_topic_0000001061155984_section3655917541) -- [事件](#zh-cn_topic_0000001061155984_section3892191911214) -- [示例](#zh-cn_topic_0000001061155984_section520313404174) - -状态按钮用于从一组选项中进行选择，并可能在界面上实时显示选择后的结果。通常这一组选项都是由状态按钮构成。 - ->![](public_sys-resources/icon-note.gif) **说明：** ->从 API Version 5 开始支持。 - -## 权限列表 - -无 - -## 子组件 - -不支持。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

value

-

string

-

-

-

是

-

toggle组件的文本值。

-

checked

-

boolean

-

false

-

否

-

toggle组件是否被选中。

-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

disabled

-

boolean

-

false

-

否

-

当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-
- -## 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

color

-

<color>

-

#ff007dff

-

否

-

按钮的文本颜色。

-

font-size

-

<length>

-

16px

-

否

-

按钮的文本尺寸。

-

allow-scale

-

boolean

-

true

-

否

-

按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

-
说明：

如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。

-
-

font-style

-

string

-

normal

-

否

-

按钮的字体样式。

-

font-weight

-

number | string

-

normal

-

否

-

按钮的字体粗细。见text组件font-weight的样式属性。

-

font-family

-

<string>

-

sans-serif

-

否

-

按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

-

width

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的宽度。

-

缺省时使用元素自身内容需要的宽度。

-

height

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的高度。

-

缺省时使用元素自身内容需要的高度。

-

padding

-

<length>

-

0

-

否

-
该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    -

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    -

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    -

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

    -
-
-

padding-[left|top|right|bottom]

-

<length>

-

0

-

否

-

设置左、上、右、下内边距属性。

-

padding-[start|end]

-

<length>

-

0

-

否

-

设置起始和末端内边距属性。

-

margin

-

<length>

-

0

-

否

-

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

-

  • 只有一个值时，这个值会被指定给全部的四个边。

    -

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    -

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    -

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    -
-

margin-[left|top|right|bottom]

-

<length>

-

0

-

否

-

设置左、上、右、下外边距属性。

-

margin-[start|end]

-

<length>

-

0

-

否

-

设置起始和末端外边距属性。

-

background

-

<linear-gradient>

-

-

-

否

-

仅支持设置渐变样式，与background-color、background-image不兼容。

-

background-color

-

<color>

-

-

-

否

-

设置背景颜色。

-

background-image

-

string

-

-

-

否

-

设置背景图片。与background-color、background不兼容；支持本地图片资源地址。

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

否

-

设置背景图片的大小。

-
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    -
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
-

background-repeat

-

string

-

repeat

-

否

-

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

-
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

否

-
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    -
-
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>
-

opacity

-

number

-

1

-

否

-

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

-

display

-

string

-

-

flex

-

否

-

确定一个元素所产生的框的类型，可选值为：

-
  • flex：弹性布局。
  • none：不渲染此元素。
-

visibility

-

string

-

-

visible

-

否

-

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

-
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
-
说明：

visibility和display样式都设置时，仅display生效

-
-

flex

-

number

-

-

-

否

-

规定当前组件如何适应父组件中的可用空间。它作为一个简写属性，用来设置组件的flex-grow。

-
说明：

仅父容器为<div>、<list-item>、<tabs>时生效。

-
-

flex-grow

-

number

-

0

-

否

-

设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。

-
说明：

仅父容器为<div>、<list-item>、<tabs>时生效。

-
-

flex-shrink

-

number

-

1

-

否

-

设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。

-
说明：

仅父容器为<div>、<list-item>、<tabs>时生效。

-
-

flex-basis

-

<length>

-

-

-

-

否

-

设置组件在主轴方向上的初始大小。

-
说明：

仅父容器为<div>、<list-item>、<tabs>时生效。

-
-

position

-

string

-

relative

-

否

-

设置元素的定位类型，不支持动态变更。

-
  • fixed：相对与整个界面进行定位。
  • absolute：相对于父元素进行定位。
  • relative：相对于其正常位置进行定位。
-
说明：

absolute属性仅在父容器为<div>、<stack>时生效。

-
-

[left|top|right|bottom]

-

<length>

-

-

-

否

-

left|top|right|bottom需要配合position样式使用，来确定元素的偏移位置。

-
  • left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  • top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  • right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
  • bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
-
- -## 事件 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

change

-

{ checked：isChecked }

-

组件选中状态发生变化时触发。

-

touchstart

-

TouchEvent

-

手指刚触摸屏幕时触发该事件。

-

touchmove

-

TouchEvent

-

手指触摸屏幕后移动时触发该事件。

-

touchcancel

-

TouchEvent

-

手指触摸屏幕中动作被打断时触发该事件。

-

touchend

-

TouchEvent

-

手指触摸结束离开屏幕时触发该事件。

-

click

-

-

-

点击动作触发该事件。

-

longpress

-

-

-

长按动作触发该事件。

-

swipe5+

-

SwipeEvent

-

组件上快速滑动后触发。

-
- -## 示例 - -``` - -
- 1. Multiple choice example -
- {{$item}} -
- 2. Single choice example -
- -
-
-``` - -``` -/* xxx.css */ -.margin { - margin: 7px; -} -``` - -``` -// xxx.js -export default { - data: { - toggle_list: [ - { "id":"1001", "name":"Living room", "checked":true }, - { "id":"1002", "name":"Bedroom", "checked":false }, - { "id":"1003", "name":"Second bedroom", "checked":false }, - { "id":"1004", "name":"Kitchen", "checked":false }, - { "id":"1005", "name":"Study", "checked":false }, - { "id":"1006", "name":"Garden", "checked":false }, - { "id":"1007", "name":"Bathroom", "checked":false }, - { "id":"1008", "name":"Balcony", "checked":false }, - ], - toggles: ["Living room","Bedroom","Kitchen","Study"], - idx: "" - }, - allclick(arg) { - this.idx = arg - }, - allchange(e) { - if (e.checked === true) { - for (var i = 0; i < this.toggle_list.length; i++) { - if (this.toggle_list[i].id === this.idx) { - this.toggle_list[i].checked = true - } else { - this.toggle_list[i].checked = false - } - } - } - } -} -``` - -![](figures/screenshot.png) - diff --git a/zh-cn/application-dev/js-reference/toolbar-item.md b/zh-cn/application-dev/js-reference/toolbar-item.md deleted file mode 100644 index 89318f20016b99cc72b8206196e549c9d73c8587..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/toolbar-item.md +++ /dev/null @@ -1,420 +0,0 @@ -# toolbar-item - -- [权限列表](#zh-cn_topic_0000001061931453_section11257113618419) -- [子组件](#zh-cn_topic_0000001061931453_section9288143101012) -- [属性](#zh-cn_topic_0000001061931453_section19217161499) -- [样式](#zh-cn_topic_0000001061931453_section184493015533) -- [事件](#zh-cn_topic_0000001061931453_section571865310552) -- [方法](#zh-cn_topic_0000001061931453_section568225514199) -- [示例](#zh-cn_topic_0000001061931453_section1240714821316) - -工具栏子组件。作为工具栏子组件，用于展示工具栏上的一个操作选项。 - ->![](public_sys-resources/icon-note.gif) **说明：** ->从API Version 5 开始支持。 - -## 权限列表 - -无 - -## 子组件 - -无 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

value

-

string

-

-

-

是

-

该操作项文本内容。

-

icon

-

string

-

-

-

是

-

该操作项图标资源路径，该图标展示在选项文本上，支持本地路径，格式为png，jpg和svg。

-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

disabled

-

boolean

-

false

-

否

-

当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-
- -## 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

color

-

<color>

-

#e6000000

-

否

-

文本颜色。

-

font-size

-

<length>

-

16px

-

否

-

文本大小。

-

allow-scale

-

boolean

-

true

-

否

-

文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。

-

font-style

-

string

-

normal

-

否

-

文本字体样式，可选值为：

-
  1. normal: 标准的字体样式；
  2. italic: 斜体的字体样式。
-

font-weight

-

number|string

-

normal

-

否

-

文本字体粗细，number类型取值[100, 900]的整数（被100整除），默认为400，取值越大，字体越粗。string类型取值为：lighter、normal、bold、bolder。

-

text-decoration

-

string

-

none

-

否

-

文本修饰，可选值为：

-
  1. underline: 文本下划线修饰；
  2. line-through: 穿过文本的修饰线；
  3. none: 标准文本。
-

font-family

-

string

-

sans-serif

-

否

-

字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

-

background

-

<linear-gradient>

-

-

-

否

-

仅支持设置渐变样式，与background-color、background-image不兼容。

-

background-color

-

<color>

-

-

-

否

-

设置背景颜色。

-

background-image

-

string

-

-

-

否

-

设置背景图片。与background-color、background不兼容；支持本地图片资源地址。

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

否

-

设置背景图片的大小。

-
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    -
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
-

background-repeat

-

string

-

repeat

-

否

-

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

-
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

否

-
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    -
-
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>
-

opacity

-

number

-

1

-

否

-

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

-

display

-

string

-

-

flex

-

否

-

确定一个元素所产生的框的类型，可选值为：

-
  • flex：弹性布局。
  • none：不渲染此元素。
-

visibility

-

string

-

-

visible

-

否

-

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

-
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
-
说明：

visibility和display样式都设置时，仅display生效

-
-
- -## 事件 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

touchstart

-

TouchEvent

-

手指刚触摸屏幕时触发该事件。

-

touchmove

-

TouchEvent

-

手指触摸屏幕后移动时触发该事件。

-

touchcancel

-

TouchEvent

-

手指触摸屏幕中动作被打断时触发该事件。

-

touchend

-

TouchEvent

-

手指触摸结束离开屏幕时触发该事件。

-

click

-

-

-

点击动作触发该事件。

-

longpress

-

-

-

长按动作触发该事件。

-

swipe5+

-

SwipeEvent

-

组件上快速滑动后触发。

-
- -## 方法 - -无 - -## 示例 - -``` - - - - - - - - -``` - -![](figures/000000.jpg) - diff --git a/zh-cn/application-dev/js-reference/toolbar.md b/zh-cn/application-dev/js-reference/toolbar.md deleted file mode 100644 index f2c71603c47aa544522992275ccd004954534a2d..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/toolbar.md +++ /dev/null @@ -1,518 +0,0 @@ -# toolbar - -- [权限列表](#zh-cn_topic_0000001062209279_section11257113618419) -- [子组件](#zh-cn_topic_0000001062209279_section172027510456) -- [属性](#zh-cn_topic_0000001062209279_section153601034618) -- [样式](#zh-cn_topic_0000001062209279_section1889052254711) -- [事件](#zh-cn_topic_0000001062209279_section104349151916) -- [方法](#zh-cn_topic_0000001062209279_section568225514199) - -工具栏。放在界面底部，用于展示针对当前界面的操作选项。 - ->![](public_sys-resources/icon-note.gif) **说明：** ->从API Version 5 开始支持。 - -## 权限列表 - -无 - -## 子组件 - -支持子组件。 - ->![](public_sys-resources/icon-note.gif) **说明：** ->工具栏最多可以展示5个toolbar-item子组件，如果存在6个及以上toolbar-item子组件，则保留前面4个子组件，后续的子组件收纳到工具栏上的更多项中，通过点击更多项弹窗展示剩下的子组件，更多项展示的组件样式采用系统默认样式，toolbar-item上设置的自定义样式不生效。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-
- -## 样式 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

width

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的宽度。

-

缺省时使用元素自身内容需要的宽度。

-

padding

-

<length>

-

0

-

否

-
该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    -

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    -

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    -

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

    -
-
-

padding-[left|top|right|bottom]

-

<length>

-

0

-

否

-

设置左、上、右、下内边距属性。

-

padding-[start|end]

-

<length>

-

0

-

否

-

设置起始和末端内边距属性。

-

margin

-

<length>

-

0

-

否

-

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

-

  • 只有一个值时，这个值会被指定给全部的四个边。

    -

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    -

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    -

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    -
-

margin-[left|top|right|bottom]

-

<length>

-

0

-

否

-

设置左、上、右、下外边距属性。

-

margin-[start|end]

-

<length>

-

0

-

否

-

设置起始和末端外边距属性。

-

border

-

-

-

0

-

否

-

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

-

border-style

-

string

-

solid

-

否

-

使用简写属性设置所有边框的样式，可选值为：

-
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
-
  • solid：显示为一条实线。
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

否

-

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

-

border-[left|top|right|bottom]

-

-

-

-

-

否

-

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

-

border-width

-

<length>

-

0

-

否

-

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

否

-

分别设置左、上、右、下四个边框的宽度。

-

border-color

-

<color>

-

black

-

否

-

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

否

-

分别设置左、上、右、下四个边框的颜色。

-

border-radius

-

<length>

-

-

-

否

-

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，如果要设置color和width，需要将四个方向一起设置（border-width、border-color）。

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

否

-

分别设置左上，右上，右下和左下四个角的圆角半径。

-

background

-

<linear-gradient>

-

-

-

否

-

仅支持设置渐变样式，与background-color、background-image不兼容。

-

background-color

-

<color>

-

-

-

否

-

设置背景颜色。

-

background-image

-

string

-

-

-

否

-

设置背景图片。与background-color、background不兼容；支持本地图片资源地址。

-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

否

-

设置背景图片的大小。

-
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    -
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
-

background-repeat

-

string

-

repeat

-

否

-

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

-
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

否

-
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    -
-
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>
-

opacity

-

number

-

1

-

否

-

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

-

display

-

string

-

-

flex

-

否

-

确定一个元素所产生的框的类型，可选值为：

-
  • flex：弹性布局。
  • none：不渲染此元素。
-

visibility

-

string

-

-

visible

-

否

-

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

-
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
-
说明：

visibility和display样式都设置时，仅display生效

-
-

flex

-

number

-

-

-

否

-

规定当前组件如何适应父组件中的可用空间。它作为一个简写属性，用来设置组件的flex-grow。

-
说明：

仅父容器为<div>、<list-item>、<tabs>时生效。

-
-

flex-grow

-

number

-

0

-

否

-

设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。

-
说明：

仅父容器为<div>、<list-item>、<tabs>时生效。

-
-

flex-shrink

-

number

-

1

-

否

-

设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。

-
说明：

仅父容器为<div>、<list-item>、<tabs>时生效。

-
-

flex-basis

-

<length>

-

-

-

-

否

-

设置组件在主轴方向上的初始大小。

-
说明：

仅父容器为<div>、<list-item>、<tabs>时生效。

-
-

position

-

string

-

relative

-

否

-

设置元素的定位类型，不支持动态变更。

-
  • fixed：相对与整个界面进行定位。
  • absolute：相对于父元素进行定位。
  • relative：相对于其正常位置进行定位。
-
说明：

absolute属性仅在父容器为<div>、<stack>时生效。

-
-

[left|top|right|bottom]

-

<length>

-

-

-

否

-

left|top|right|bottom需要配合position样式使用，来确定元素的偏移位置。

-
  • left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  • top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  • right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
  • bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
-
- ->![](public_sys-resources/icon-note.gif) **说明：** ->toolbar组件高度固定为56px。 - -## 事件 - -无 - -## 方法 - -无 - diff --git a/zh-cn/application-dev/js-reference/video.md b/zh-cn/application-dev/js-reference/video.md deleted file mode 100644 index 22d039a80a557722e75d47b3f487be02bca376eb..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/video.md +++ /dev/null @@ -1,210 +0,0 @@ -# video - -- [子组件](#zh-cn_topic_0000001058670744_section9288143101012) -- [属性](#zh-cn_topic_0000001058670744_section2907183951110) -- [事件](#zh-cn_topic_0000001058670744_section3892191911214) -- [方法](#zh-cn_topic_0000001058670744_section45171131134215) -- [示例](#zh-cn_topic_0000001058670746_section16867208402) - -视频播放组件。 - -## 子组件 - -不支持。 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

src

-

string

-

-

-

否

-

播放视频内容的路径。

-

muted

-

boolean

-

false

-

否

-

视频是否静音播放。

-

autoplay

-

boolean

-

false

-

否

-

视频是否自动播放。

-

controls

-

boolean

-

true

-

否

-

控制视频播放的控制栏是否显示，如果设置为false，则不显示控制栏。默认为true，由系统决定显示或隐藏控制栏。

-
- -## 事件 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

start

-

-

-

播放时触发该事件。

-

pause

-

-

-

暂停时触发该事件。

-

finish

-

-

-

播放结束时触发该事件。

-

error

-

-

-

播放失败时触发该事件。

-

seeking

-

{ currenttime: value(秒) }

-

操作进度条过程时上报时间信息，单位为s。

-

seeked

-

{ currenttime: value(秒) }

-

操作进度条完成后，上报播放时间信息，单位为s。

-

timeupdate

-

{ currenttime: value(秒) }

-

播放进度变化时触发该事件，单位为s，更新时间间隔为250ms。

-
- -## 方法 - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

start

-

-

-

请求播放视频。

-

pause

-

-

-

请求暂停播放视频。

-

setCurrentTime

-

{ currenttime: value(秒) }

-

指定视频播放的进度位置。

-
- -## 示例 - -``` - -
- -
-``` - -``` -/* xxx.js */ -export default { - data: { - event:'', - seekingtime:'', - timeupdatetime:'', - seekedtime:'', - isStart: true, - }, - startCallback:function(){ this.event = '视频开始播放'; }, - pauseCallback:function(){ this.event = '视频暂停播放'; }, - finishCallback:function(){ this.event = '视频播放结束'; }, - errorCallback:function(){ this.event = '视频播放错误'; }, - seekingCallback:function(e){ this.seekingtime = e.currenttime; }, - timeupdateCallback:function(e){ this.timeupdatetime = e.currenttime;}, - change_start_pause: function() { - if(this.isStart) { - this.$element('videoId').pause(); - this.isStart = false; - } else { - this.$element('videoId').start(); - this.isStart = true; - } - } -} -``` diff --git "a/zh-cn/application-dev/js-reference/\345\212\250\347\224\273\346\240\267\345\274\217.md" "b/zh-cn/application-dev/js-reference/\345\212\250\347\224\273\346\240\267\345\274\217.md" deleted file mode 100755 index 97f8bee6388f07a5cad9320a8298e6d6b7b1cd24..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/js-reference/\345\212\250\347\224\273\346\240\267\345\274\217.md" +++ /dev/null @@ -1,258 +0,0 @@ -# 动画样式 - -组件普遍支持的可以在style或css中设置的动态的旋转、平移、缩放效果。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

描述

-

transform-origin

-

<percentage> | <length> <percentage> | <length>

-

控件中心

-

变换对象的原点位置，支持px和百分比(相对于动画目标组件)，如果仅设置一个值，另一个值为50%。

-

示例：

-

transform-origin: 200px 30%

-

transform

-

string

-

-

-

支持同时设置平移/旋转/缩放的属性

-

详见表1。

-

animation-name

-

string

-

-

-

指定@keyframes，详见表2。

-

animation-delay

-

<time>

-

0

-

定义动画播放的延迟时间。支持的单位为[s(秒)|ms(毫秒) ]，默认单位为ms，格式为：1000ms或1s。

-

animation-duration

-

<time>

-

0

-

定义一个动画周期。支持的单位为[s(秒)|ms(毫秒) ]，默认单位为ms，格式为：1000ms或1s。

-
说明：

animation-duration 样式必须设置，否则时长为 0，则不会播放动画。

-
-

animation-iteration-count

-

number | infinite

-

1

-

定义动画播放的次数，默认播放一次，可通过设置为infinite无限次播放。

-

animation-timing-function

-

string

-

ease

-

描述动画执行的速度曲线，用于使动画更为平滑。

-

可选项有：

-
  • linear：表示动画从头到尾的速度都是相同的。
  • ease：表示动画以低速开始，然后加快，在结束前变慢，cubic-bezier(0.25, 0.1, 0.25, 1.0)。
  • ease-in：表示动画以低速开始，cubic-bezier(0.42, 0.0, 1.0, 1.0)。
  • ease-out：表示动画以低速结束，cubic-bezier(0.0, 0.0, 0.58, 1.0)。
  • ease-in-out：表示动画以低速开始和结束，cubic-bezier(0.42, 0.0, 0.58, 1.0)。
  • friction：阻尼曲线，cubic-bezier(0.2, 0.0, 0.2, 1.0)。
  • extreme-deceleration：急缓曲线，cubic-bezier(0.0, 0.0, 0.0, 1.0)。
  • sharp：锐利曲线，cubic-bezier(0.33, 0.0, 0.67, 1.0)。
  • rhythm：节奏曲线，cubic-bezier(0.7, 0.0, 0.2, 1.0)。
  • smooth：平滑曲线，cubic-bezier(0.4, 0.0, 0.4, 1.0)。
  • cubic-bezier：在三次贝塞尔函数中定义动画变化过程，入参的x和y值必须处于0-1之间。
-

animation-fill-mode

-

string

-

none

-

指定动画开始和结束的状态：

-
  • none：在动画执行之前和之后都不会应用任何样式到目标上。
  • forwards：在动画结束后，目标将保留动画结束时的状态（在最后一个关键帧中定义）。
-
- -**表 1** transform操作说明 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

描述

-

translate

-

<length>| <percent>

-

平移动画属性，支持设置x轴和y轴两个维度的平移参数

-

translateX

-

<length>| <percent>

-

X轴方向平移动画属性

-

translateY

-

<length>| <percent>

-

Y轴方向平移动画属性

-

scale

-

<number>

-

缩放动画属性，支持设置x轴和y轴两个维度的缩放参数

-

scaleX

-

<number>

-

X轴方向缩放动画属性

-

scaleY

-

<number>

-

Y轴方向缩放动画属性

-

rotate

-

<deg> | <rad>

-

旋转动画属性，支持设置x轴和y轴两个维度的选中参数

-

rotateX

-

<deg> | <rad>

-

X轴方向旋转动画属性

-

rotateY

-

<deg> | <rad>

-

Y轴方向旋转动画属性

-
- -**表 2** @keyframes属性说明 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

描述

-

background-color

-

<color>

-

-

-

动画执行后应用到组件上的背景颜色。

-

opacity

-

number

-

1

-

动画执行后应用到组件上的不透明度值，为介于0到1间的数值，默认为1。

-

width

-

<length>

-

-

-

动画执行后应用到组件上的宽度值。

-

height

-

<length>

-

-

-

动画执行后应用到组件上的高度值。

-

transform

-

string

-

-

-

定义应用在组件上的变换类型，见表1。

-
- -对于不支持起始值或终止值缺省的情况，可以通过from和to显示指定起始和结束。示例： - -``` -@keyframes Go -{ - from { - background-color: #f76160; - transform:translate(100px) rotate(0deg) scale(1.0); - } - - to { - background-color: #09ba07; - transform:translate(100px) rotate(180deg) scale(2.0); - } -} -``` - -![](figures/动画样式demo2.gif) - ->![](public_sys-resources/icon-note.gif) **说明：** ->@keyframes的from/to不支持动态绑定。 - diff --git "a/zh-cn/application-dev/js-reference/\345\215\207\347\272\247.md" "b/zh-cn/application-dev/js-reference/\345\215\207\347\272\247.md" deleted file mode 100644 index 6dfc0396682e90e99d11da65f2279df6b545973f..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/js-reference/\345\215\207\347\272\247.md" +++ /dev/null @@ -1,322 +0,0 @@ -# 升级 - -- [导入模块](#zh-cn_topic_0000001149710363_section749mcpsimp) -- [权限列表](#zh-cn_topic_0000001149710363_section752mcpsimp) -- [updater.getNewVersionInfo\(\)](#zh-cn_topic_0000001149710363_section755mcpsimp) -- [updater.checkNewVersion\(\)](#zh-cn_topic_0000001149710363_section817mcpsimp) -- [updater.download\(\)](#zh-cn_topic_0000001149710363_section879mcpsimp) -- [updater.upgrade\(\)](#zh-cn_topic_0000001149710363_section894mcpsimp) -- [updater.setUpdatePolicy\(\)](#zh-cn_topic_0000001149710363_section909mcpsimp) -- [updater.getUpdatePolicy\(\)](#zh-cn_topic_0000001149710363_section985mcpsimp) - -## 导入模块 - -``` -import client from 'libupdateclient.z.so' -``` - -## 权限列表 - -无。 - -## updater.getNewVersionInfo\(\) - -获取新版本信息。 - -**参数：** - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

callback

-

Function

-

否

-

AsyncCallback<NewVersionInfo>

-
- -**返回值：** - - - - - - - - - - - - -

参数名

-

类型

-

说明

-

info

-

NewVersionInfo

-

新版本信息

-
- -**示例：** - -``` -updater.getNewVersionInfo(info => { -console.log("getNewVersionInfo sucess " + info.status); -console.log(`info versionName = ` + info.result[0].versionName); -console.log(`info versionCode = ` + info.result[0].versionCode); -console.log(`info verifyInfo = ` + info.result[0].verifyInfo); -)}; -``` - -## updater.checkNewVersion\(\) - -检查新版本。 - -**参数：** - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

callback

-

Function

-

否

-

AsyncCallback<NewVersionInfo>

-
- -**返回值：** - - - - - - - - - - - - -

参数名

-

类型

-

说明

-

info

-

NewVersionInfo

-

新版本信息

-
- -**示例：** - -``` -updater.checkNewVersion(info => { -console.log("checkNewVersion sucess " + info.status); -console.log(`info versionName = ` + info.result[0].versionName); -console.log(`info versionCode = ` + info.result[0].versionCode); -console.log(`info verifyInfo = ` + info.result[0].verifyInfo); -)}; -``` - -## updater.download\(\) - -下载新版本，并监听下载进程。 - -**参数：** - -无 - -**返回值：** - -无 - -**示例：** - -``` -updater.on("downloadProgress", progress => { -console.log("downloadProgress on" + progress); -console.log(`downloadProgress status: ` + progress.status); -console.log(`downloadProgress percent: ` + progress.percent); -)}; -updater.download(); -``` - -## updater.upgrade\(\) - -启动升级。 - -**参数：** - -无 - -**返回值：** - -无 - -**示例：** - -``` -updater.on("upgradeProgress", progress => { -console.log("downloadProgress on" + progress); -console.log(`downloadProgress status: ` + progress.status); -console.log(`downloadProgress percent: ` + progress.percent); -)}; -updater.upgrade(); -``` - -## updater.setUpdatePolicy\(\) - -设置升级策略。 - -**参数：** - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

policy

-

UpdatePolicy

-

是

-

设置策略

-

callback

-

Function

-

是

-

AsyncCallback<number>

-
- -**返回值：** - - - - - - - - - - - - -

参数名

-

类型

-

说明

-

result

-

number

-		  
- -**示例：** - -``` -// 设置策略 -let policy = { -autoDownload: false, -autoDownloadNet: true, -mode: 2, -autoUpgradeInterval: [ 2, 3 ], -autoUpgradeCondition: 2 -} -updater.setUpdatePolicy(policy, function(result) { -console.log("setUpdatePolicy ", result) -} -); -``` - -## updater.getUpdatePolicy\(\) - -查看升级策略。 - -**参数：** - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

callback

-

Function

-

是

-

AsyncCallback<UpdatePolicy>

-
- -**返回值：** - - - - - - - - - - - - -

参数名

-

类型

-

说明

-

policy

-

UpdatePolicy

-

策略

-
- -**示例：** - -``` -updater.getUpdatePolicy(policy => { -console.log("getUpdatePolicy sucess", policy) -}); -``` - diff --git "a/zh-cn/application-dev/js-reference/\345\216\237\345\255\220\345\270\203\345\261\200.md" "b/zh-cn/application-dev/js-reference/\345\216\237\345\255\220\345\270\203\345\261\200.md" deleted file mode 100644 index 32fa98dbf0dd44d9099316dce5ec2702a206eb28..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/js-reference/\345\216\237\345\255\220\345\270\203\345\261\200.md" +++ /dev/null @@ -1,94 +0,0 @@ -# 原子布局 - -- [隐藏能力](#zh-cn_topic_0000001062070665_section0441154013284) -- [占比能力](#zh-cn_topic_0000001062070665_section13725752194418) -- [固定比例](#zh-cn_topic_0000001062070665_section922215811557) - -为了解决由于屏幕形态和规格不同而导致的对布局效果自适应的要求，系统提供了面向不同屏幕尺寸界面自适应适配的布局能力，称为原子布局。设计师可以考虑使用原子能力，定义元素在不同形态对尺寸界面上体现的自适应规则。开发者可以使用原子布局能力，快速实现让应用在多形态屏幕上有与设计效果相匹配的自适应效果。 - ->![](public_sys-resources/icon-note.gif) **说明：** ->从API Version 5 开始支持。 - -## 隐藏能力 - -在非折行flex布局基础上，增加了显示优先级标记，可以调整组件内元素水平/垂直方向的显示优先级，根据当前组件容器的可用空间来显示内容。 - - - - - - - - - - - - - - -

样式

-

类型

-

默认值

-

说明

-

display-index

-

number

-

Infinity

-

该适用于div等支持flex布局的容器组件中的子组件上，当容器组件在flex主轴上尺寸不足以显示下全部内容时，按照display-index值从小到大的顺序进行隐藏，具有相同display-index值的组件同时隐藏，默认值为Infinity，表示不隐藏。

-
- -## 占比能力 - -在非折行的flex布局中，定义了占比能力的组件，保证指定元素始终在容器的某一个比例空间中进行布局。 - - - - - - - - - - - - - - -

样式

-

类型

-

默认值

-

说明

-

flex-weight

-

number

-

-

-

指明当前元素在flex主轴方向上尺寸权值，当且仅当容器组件中所有节点均设置此属性时生效，当前元素尺寸为： 容器主轴尺寸 * 当前权值 / 所有子元素权值和。

-
- -## 固定比例 - -定义了组件固定比例调整尺寸的能力 - - - - - - - - - - - - - - -

样式

-

类型

-

默认值

-

说明

-

aspect-ratio

-

number

-

-

-

1. 接受任意大于0的浮点值，定义为该节点的宽度与高度比，设置该属性后，该元素尺寸宽高比按照此属性值进行调整。

-

2. 遵守最大值与最小值的限制。

-

3. 在flex布局中，主轴尺寸先进行调整，后根据该尺寸调整交叉轴

-
- diff --git "a/zh-cn/application-dev/js-reference/\345\233\275\351\231\205\345\214\226.md" "b/zh-cn/application-dev/js-reference/\345\233\275\351\231\205\345\214\226.md" deleted file mode 100644 index 79a659863bc62f8586fef25800a1ba09295d40d0..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/js-reference/\345\233\275\351\231\205\345\214\226.md" +++ /dev/null @@ -1,222 +0,0 @@ -# 国际化 - -- [导入模块](#zh-cn_topic_0000001103315838_s56d19203690d4782bfc74069abb6bd71) -- [权限](#zh-cn_topic_0000001103315838_section11257113618419) -- [类](#zh-cn_topic_0000001103315838_section1956131218111) -- [Locale](#zh-cn_topic_0000001103315838_section189341937163212) - - [属性](#zh-cn_topic_0000001103315838_section23751576140) - - [Locale](#zh-cn_topic_0000001103315838_section1410593619146) - -- [DateTimeFormat](#zh-cn_topic_0000001103315838_section88061769522) - - [DateTimeFormat](#zh-cn_topic_0000001103315838_section28081362523) - - [format](#zh-cn_topic_0000001103315838_section917151185514) - - -## 导入模块 - -``` -import Intl from '@ohos.intl'; -``` - -## 权限 - -无 - -## 类 - -## Locale - -提供用于获取区域信息的接口。 - -### 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

可读

-

可写

-

说明

-

language

-

string

-

是

-

否

-

区域关联的语言。

-

script

-

string

-

是

-

否

-

区域关联的文字。

-

region

-

string

-

是

-

否

-

区域关联的地区

-

baseName

-

string

-

是

-

否

-

以完整区域字符串的子字符串形式返回有关区域的基本核心信息。

-
- -### Locale - -构造方法，用于构造Locale对象 - -**参数：** - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

locale

-

string

-

是

-

表示区域信息的字符串，必须包含语言，可选择性包含文字与地区。

-
- -**示例：** - -``` -var enLatnGB = new Intl.Locale("en-Latn-GB"); -var enGB = new Intl.Locale("en-GB"); -var en = new Intl.Locale("en"); -``` - -## DateTimeFormat - -提供用于格式化日期字符串的接口。 - -### DateTimeFormat - -构造方法，用于构造DateTimeFormat对象 - -**参数：** - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

locale

-

string

-

是

-

用于创建DateTimeFormat对象的表示区域信息的字符串，必须包含语言，可选择性包含文字与地区。

-
- -**示例：** - -``` -var dateFmt = new Intl.DateTimeFormat("en-Latn-GB"); -``` - -### format - -获取格式化的日期字符串。 - -**参数：** - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

date

-

Date

-

是

-

要格式化的日期对象。

-
- -**返回值：** - - - - - - - - - - -

类型

-

说明

-

string

-

返回根据区域格式化的日期字符串。

-
- -**示例：** - -``` -var date = new Date(1995, 11, 25, 3, 14, 0); -var datefmt = new Intl.DateTimeFormat("en-Latn-GB"); -var result = datefmt.format(date); // 返回“Dec 25, 1995” -``` - diff --git "a/zh-cn/application-dev/js-reference/\345\237\272\347\241\200\347\273\204\344\273\266.md" "b/zh-cn/application-dev/js-reference/\345\237\272\347\241\200\347\273\204\344\273\266.md" deleted file mode 100755 index 33780805dcdfe0a939ec13587ccff55dfef1e118..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/js-reference/\345\237\272\347\241\200\347\273\204\344\273\266.md" +++ /dev/null @@ -1,51 +0,0 @@ -# 基础组件 - -- **[button](button.md)** - -- **[chart](chart.md)** - -- **[divider](divider.md)** - -- **[image](image.md)** - -- **[image-animator](image-animator.md)** - -- **[input](input.md)** - -- **[label](label.md)** - -- **[marquee](marquee.md)** - -- **[menu](menu.md)** - -- **[option](option.md)** - -- **[picker](picker.md)** - -- **[picker-view](picker-view.md)** - -- **[piece](piece.md)** - -- **[progress](progress.md)** - -- **[qrcode](qrcode.md)** - -- **[rating](rating.md)** - -- **[select](select.md)** - -- **[slider](slider.md)** - -- **[span](span.md)** - -- **[switch](switch.md)** - -- **[text](text.md)** - -- **[toolbar](toolbar.md)** - -- **[toolbar-item](toolbar-item.md)** - -- **[toggle](toggle.md)** - - diff --git "a/zh-cn/application-dev/js-reference/\345\252\222\344\275\223\347\273\204\344\273\266.md" "b/zh-cn/application-dev/js-reference/\345\252\222\344\275\223\347\273\204\344\273\266.md" deleted file mode 100644 index 41f251feeba36a82cd63a5445ea0a19761e4e6b0..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/js-reference/\345\252\222\344\275\223\347\273\204\344\273\266.md" +++ /dev/null @@ -1,5 +0,0 @@ -# 媒体组件 - -- **[Camera](Camera.md)** - - diff --git "a/zh-cn/application-dev/js-reference/\345\256\232\346\227\266\345\231\250.md" "b/zh-cn/application-dev/js-reference/\345\256\232\346\227\266\345\231\250.md" deleted file mode 100755 index 713a1ce59f547b6c31c2c22e11b4134e58c55997..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/js-reference/\345\256\232\346\227\266\345\231\250.md" +++ /dev/null @@ -1,217 +0,0 @@ -# 定时器 - -- [导入模块](#zh-cn_topic_0000001058562847_section7480141454919) -- [权限列表](#zh-cn_topic_0000001058562847_section11257113618419) -- [setTimeout\(handler\[, delay\[, ...args\]\]\)](#zh-cn_topic_0000001058562847_section691616559215) -- [clearTimeout\(timeoutID\)](#zh-cn_topic_0000001058562847_section591824471012) -- [setInterval\(handler\[, delay\[, ...args\]\]\)](#zh-cn_topic_0000001058562847_section3644185910144) -- [clearInterval\(intervalID\)](#zh-cn_topic_0000001058562847_section16451595149) - -## 导入模块 - -无需导入。 - -## 权限列表 - -无 - -## setTimeout\(handler\[, delay\[, ...args\]\]\) - -设置一个定时器，该定时器在定时器到期后执行一个函数。 - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

handler

-

Function

-

是

-

定时器到期后执行函数。

-

delay

-

number

-

否

-

延迟的毫秒数，函数的调用会在该延迟之后发生。如果省略该参数，delay取默认值0，意味着“马上”执行，或尽快执行。

-

...args

-

Array<any>

-

否

-

附加参数，一旦定时器到期，他们会作为参数传递给handler。

-
- -- 返回值 - - **timeoutID** 定时器的ID - -- 示例 - - ``` - var timeoutID = setTimeout(function() { - console.log('delay 1s'); - }, 1000); - ``` - - -## clearTimeout\(timeoutID\) - -取消了先前通过调用setTimeout\(\)建立的定时器。 - -- 参数 - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

timeoutID

-

number

-

是

-

要取消定时器的ID， 是由setTimeout()返回的。

-
- -- 示例 - - ``` - var timeoutID = setTimeout(function() { - console.log('do after 1s delay.'); - }, 1000); - - clearTimeout(timeoutID); - ``` - - -## setInterval\(handler\[, delay\[, ...args\]\]\) - -重复调用一个函数，在每次调用之间具有固定的时间延迟。 - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

handler

-

Function

-

是

-

要重复调用的函数。

-

delay

-

number

-

否

-

延迟的毫秒数（一秒等于1000毫秒），函数的调用会在该延迟之后发生。

-

...args

-

Array<any>

-

否

-

附加参数，一旦定时器到期，他们会作为参数传递给handler。

-
- -- 返回值 - - **intervalID** 重复定时器ID - -- 示例 - - ``` - var intervalID = setInterval(function() { - console.log('do very 1s.'); - }, 1000); - ``` - - -## clearInterval\(intervalID\) - -可取消先前通过 setInterval\(\) 设置的重复定时任务。 - -- 参数 - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

intervalID

-

number

-

是

-

要取消的重复定时器的ID，是由 setInterval() 返回的。

-
- -- 示例 - - ``` - var intervalID = setInterval(function() { - console.log('do very 1s.'); - }, 1000); - - clearInterval(intervalID); - ``` - - diff --git "a/zh-cn/application-dev/js-reference/\345\256\232\346\227\266\346\234\215\345\212\241.md" "b/zh-cn/application-dev/js-reference/\345\256\232\346\227\266\346\234\215\345\212\241.md" deleted file mode 100644 index 853b13fecf2532ae076ae641f086f308fdbda403..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/js-reference/\345\256\232\346\227\266\346\234\215\345\212\241.md" +++ /dev/null @@ -1,247 +0,0 @@ -# 时间组件 - -- [简介](#section11660541593) -- [目录](#section161941989596) -- [说明](#section38521239153117) - - [js接口说明](#section11908203714422) - - [js接口使用说明](#section9938411124317) - -- [相关仓](#section1371113476307) - -## 简介 - -时间组件提供管理系统时间时区和定时的能力。 - -**图 1** 子系统架构图 -![](figures/subsystem_architecture_zh.png "子系统架构图") - -## 目录 - -``` -/base/miscservices/time -├── etc # 组件包含的进程的配置文件 -├── figures # 构架图 -├── interfaces # 组件对外提供的接口代码 -│ └── innerkits # 服务间接口 -│ └── kits # 对应用提供的接口 -├── profile # 组件包含的系统服务的配置文件 -└── services # 时间服务实现 -``` - -## 说明 - -### js接口说明 - -**表 1** js组件systemTime开放的主要方法 - - - - - - - - - - - - - - - - - - - - - - - - - -

接口名

-

描述

-

function setTime(time : number) : Promise<boolean>

-

设置系统时间（1970-01-01至今毫秒数），Promise方式

-

function setTime(time : number, callback : AsyncCallback<boolean>) : void

-

设置系统时间（1970-01-01至今毫秒数），callback方式

-

function setDate(date: Date, callback: AsyncCallback<boolean>): void;

-

设置系统时间（Date格式），Promise方式

-

function setDate(date: Date): Promise<boolean>

-

设置系统时间（Date格式），callback方式

-

function setTimezone(timezone: string, callback: AsyncCallback<boolean>): void

-

设置系统时区，callback方式

-

function setTimezone(timezone: string): Promise<boolean>

-

设置系统时区，Promise方式

-
- - -**表 2** js组件systemTimer开放的主要方法 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

接口名

-

描述

-

function createTimer(options: TimerOptions, callback: AsyncCallback<number>): void

-

创建定时器，callback方式

-

function createTimer(options: TimerOptions): Promise<number>

-

创建定时器，promise方式

-

function startTimer(timer: number, triggerTime: number, callback: AsyncCallback<boolean>): void

-

开启定时器，callback方式

-

function startTimer(timer: number, triggerTime: number): Promise<boolean>

-

开启定时器，promise方式

-

function stopTimer(timer: number, callback: AsyncCallback<boolean>): void

-

停止定时器，callback方式

-

function stopTimer(timer: number): Promise<boolean>

-

停止定时器，promise方式

-

function destroyTimer(timer: number, callback: AsyncCallback<boolean>): void

-

销毁定时器，callback方式

-

function destroyTimer(timer: number): Promise<boolean>

-

摧毁定时器，promise方式

-
- -**表 3** systemTimer组件参数TimerOptions说明 - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

说明

-

type

-

number

-

TIMER_TYPE_REALTIME: 设置为系统启动时间定时器，否则为walltime定时器; - TIMER_TYPE_WAKEUP: 设置为唤醒定时器，否则为非唤醒; - const TIMER_TYPE_EXACT: 设置为精准定时器，否则为非精准定时器; - const TIMER_TYPE_IDLE: 设置为IDLE模式定时器，否则为非IDLE模式定时器（暂不支持） -

-

repeat

-

boolean

-

true 为循环定时器，false为单次定时器

-

interval

-

number

-

如果是循环定时器，repeat值应大于5000毫秒，非重复定时器置为0

-

wantAgent

-

wantAgent

-

设置通知的wantagent，定时器到期后通知

-

callback

-

=> void

-

设置回调函数，定时器到期后触发

-
- -### js接口使用说明 - - -systemTime模块使用示例： - -``` -// 导入模块 -import systemTime from '@ohos.systemTime'; - -// Promise方式的异步方法设置时间 -var time = 1611081385000; -systemTime.setTime(time) - .then((value) => { - console.log(`success to systemTime.setTime: ${value}`); - }).catch((err) => { - console.error(`failed to systemTime.setTime because ${err.message}`) - }); - - -// callback方式的异步方法设置时间 - -var time = 1611081385000; -systemTime.setTime(time, (err, value) => { - if (err) { - console.error(`failed to systemTime.setTime because ${err.message}`); - return; - } - console.log(`success to systemTime.setTime: ${value}`); - }); - -``` - -systemTimer模块使用示例： - -``` -// 导入模块 -import systemTimer from '@ohos.systemTimer'; - -console.log("start") -var options:TimerOptions{ - type:TIMER_TYPE_REALTIME, - repeat:false, - interval:Number.MAX_VALUE/2, - persistent:false -} - -console.log("create timer") -let timerId = systemTimer.Timer(options) -console.log("start timer") -let startTimerRes = systemTimer.startTimer(timerId, 100000) -console.log("stop timer") -let stopTimerRes = systemTimer.stopTimer(timerId) -console.log("destroy timer") -let destroyTimerRes = systemTimer.destroyTimer(timerId) -console.log('end'); - - -``` - -## 相关仓 - -**Misc软件服务子系统** - -miscservices\_time - diff --git "a/zh-cn/application-dev/js-reference/\345\256\271\345\231\250\347\273\204\344\273\266.md" "b/zh-cn/application-dev/js-reference/\345\256\271\345\231\250\347\273\204\344\273\266.md" deleted file mode 100755 index 4c586d27a0f3994f5f0635965d9e04fe742af596..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/js-reference/\345\256\271\345\231\250\347\273\204\344\273\266.md" +++ /dev/null @@ -1,35 +0,0 @@ -# 容器组件 - -- **[badge](badge.md)** - -- **[dialog](dialog.md)** - -- **[div](div.md)** - -- **[list](list.md)** - -- **[list-item](list-item.md)** - -- **[list-item-group](list-item-group.md)** - -- **[panel](panel.md)** - -- **[popup](popup.md)** - -- **[refresh](refresh.md)** - -- **[stack](stack.md)** - -- **[stepper](stepper.md)** - -- **[stepper-item](stepper-item.md)** - -- **[swiper](swiper.md)** - -- **[tabs](tabs.md)** - -- **[tab-bar](tab-bar.md)** - -- **[tab-content](tab-content.md)** - - diff --git "a/zh-cn/application-dev/js-reference/\345\272\224\347\224\250\346\211\223\347\202\271.md" "b/zh-cn/application-dev/js-reference/\345\272\224\347\224\250\346\211\223\347\202\271.md" deleted file mode 100644 index 430945d7b11e3e09be0a1180c89f8cf2474488bf..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/js-reference/\345\272\224\347\224\250\346\211\223\347\202\271.md" +++ /dev/null @@ -1,285 +0,0 @@ -# 应用打点 - -- [导入模块](#zh-cn_topic_0000001150092213_s56d19203690d4782bfc74069abb6bd71) -- [权限](#zh-cn_topic_0000001150092213_section11257113618419) -- [hiAppEvent.write](#zh-cn_topic_0000001150092213_section570630172512) -- [hiAppEvent.write](#zh-cn_topic_0000001150092213_section0857164934517) -- [hiAppEvent.configure](#hiAppEvent.configure) -- [ConfigOption](#ConfigOption) -- [EventType](#zh-cn_topic_0000001150092213_section099619567453) -- [Event](#Event) -- [Param](#Param) - -## 导入模块 - -``` -import hiAppEvent from '@ohos.hiAppEvent'; -``` - -## 权限 - -无 - -## hiAppEvent.write - -write(eventName: string, eventType: EventType, keyValues: object, callback: AsyncCallback\): void - -应用事件打点，将事件信息写入到当天的事件文件中，可接收类型为JSON对象的事件参数，使用callback方式作为异步方法。 - -**参数：** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

eventName

-

string

-

是

-

应用事件名称。

-

eventType

-

EventType

-

是

-

应用事件类型。

-

keyValues

-

object

-

是

-

应用事件的参数，key类型只能为string，value类型只能为string、number、boolean、Array（数组数据类型只能为string、number、boolean）。

-

callback

-

AsyncCallback<void>

-

否

-

回调函数，可以在回调函数中处理接口返回值。

-
  • 返回值为0表示事件参数校验成功，事件正常异步写入事件文件；
  • 大于0表示事件校验存在异常参数，事件在忽略异常参数后将事件异步写入事件文件；
  • 小于0表示事件校验失败，不将事件写入事件文件。
-
- -**示例：** - -``` -hiAppEvent.write("test_event", hiAppEvent.EventType.FAULT, {"int_data":100, "str_data":"strValue"}, (err, value) => { - if (err) { - // 事件写入异常：事件存在异常参数或者事件校验失败不执行写入 - console.error(`failed to write event because ${err.code}`); - return; - } - - // 事件写入正常 - console.log(`success to write event: ${value}`); -}); -``` - -## hiAppEvent.write - -write(eventName: string, eventType: EventType, keyValues: object): Promise - -应用事件打点，将事件信息写入到当天的事件文件中，可接收类型为JSON对象的事件参数，使用promise方式作为异步方法。 - -**参数：** - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

eventName

-

string

-

是

-

应用事件名称。

-

eventType

-

EventType

-

是

-

应用事件类型。

-

keyValues

-

object

-

是

-

应用事件的参数，key类型只能为string，value类型只能为string、number、boolean、Array（数组数据类型只能为string、number、boolean）。

-
- -**返回值：** - - - - - - - - - - -

类型

-

说明

-

Promise<void>

-

Promise实例，可以在其then()、catch()方法中分别对事件写入成功、写入异常的情况进行回调处理。

-
- - -**示例：** - -``` -hiAppEvent.write("test_event", hiAppEvent.EventType.FAULT, {"int_data":100, "str_data":"strValue"}) - .then((value) => { - // 事件写入正常 - console.log(`success to write event: ${value}`); - }).catch((err) => { - // 事件写入异常：事件存在异常参数或者事件校验失败不执行写入 - console.error(`failed to write event because ${err.code}`); - }); -``` - -## hiAppEvent.configure - -configure(config: ConfigOption): boolean - -应用事件打点配置方法，可用于配置打点开关、文件目录存储限额大小等功能。 - -**参数：** - -| 参数名 | 类型 | 必填 | 说明 | -| ------ | ------------ | ---- | ------------------------ | -| config | ConfigOption | 是 | 应用事件打点配置项对象。 | - -**返回值：** - -| 类型 | 说明 | -| ------- | ----------------------------------------------- | -| boolean | 配置结果，true表示配置成功，false表示配置失败。 | - -**示例：** - -``` -// 配置应用事件打点功能开关 -hiAppEvent.configure({ - disable: true -}) - -// 配置事件文件目录存储限额大小 -hiAppEvent.configure({ - maxStorage: '100M' -}) -``` - -## ConfigOption - -此接口提供了应用打点的配置选项。 - -| 参数名 | 类型 | 必填 | 说明 | -| ---------- | ------- | ---- | ------------------------------------------------------------ | -| disable | boolean | 否 | 应用打点功能开关。配置值为true表示关闭打点功能，false表示不关闭打点功能。 | -| maxStorage | string | 否 | 打点数据本地存储文件所在目录的配额大小，默认限额为“10M”。所在目录大小超出限额后会对目录进行清理操作，会按从旧到新的顺序逐个删除打点数据文件，直到目录大小不超出限额时停止。 | - -## EventType - -用于表示事件类型。 - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

默认值

-

说明

-

FAULT

-

1

-

故障类型事件。

-

STATISTIC

-

2

-

统计类型事件。

-

SECURITY

-

3

-

安全类型事件。

-

BEHAVIOR

-

4

-

系统行为事件。

-
- -## Event - -此接口提供了所有预定义事件的事件名称常量。 - -**属性：** - -| 名称 | 参数类型 | 可读 | 可写 | 说明 | -| ------------------------- | -------- | ---- | ---- | -------------------- | -| USER_LOGIN | string | 是 | 否 | 用户登录事件。 | -| USER_LOGOUT | string | 是 | 否 | 用户登出事件。 | -| DISTRIBUTED_SERVICE_START | string | 是 | 否 | 分布式服务启动事件。 | - -## Param - -此接口提供了所有预定义参数的参数名称常量。 - -**属性：** - -| 名称 | 参数类型 | 可读 | 可写 | 说明 | -| ------------------------------- | -------- | ---- | ---- | ------------------ | -| USER_ID | string | 是 | 否 | 用户自定义ID。 | -| DISTRIBUTED_SERVICE_NAME | string | 是 | 否 | 分布式服务名称。 | -| DISTRIBUTED_SERVICE_INSTANCE_ID | string | 是 | 否 | 分布式服务实例ID。 | diff --git "a/zh-cn/application-dev/js-reference/\345\274\271\347\252\227.md" "b/zh-cn/application-dev/js-reference/\345\274\271\347\252\227.md" deleted file mode 100755 index 80f2882a2b58c77a586e6677bdef17882096aab1..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/js-reference/\345\274\271\347\252\227.md" +++ /dev/null @@ -1,193 +0,0 @@ -# 弹窗 - -- [导入模块](#zh-cn_topic_0000001059340516_s1fada83813e64efcbc67e970ced86588) -- [权限列表](#zh-cn_topic_0000001059340516_section11257113618419) -- [prompt.showToast\(OBJECT\)](#zh-cn_topic_0000001059340516_sc34d255befcf467dab069802dc9e54d8) -- [prompt.showDialog\(OBJECT\)](#zh-cn_topic_0000001059340516_sc6babedb391e4de9af1189ebc9ff5e69) - -## 导入模块 - -``` -import prompt from '@system.prompt'; -``` - -## 权限列表 - -无 - -## prompt.showToast\(OBJECT\) - -显示文本弹窗。 - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

message

-

string

-

是

-

显示的文本信息。

-

duration

-

number

-

否

-

默认值1500ms，建议区间：1500ms-10000ms。

-
说明：

若小于1500ms则取默认值，最大取值为10000ms。

-
-

[bottom]5+

-

<length>

-

否

-

设置弹窗边框距离屏幕底部的位置。

-
- -- 示例 - - ``` - prompt.showToast({ - message: 'Message Info', - duration: 2000, - }); - ``` - - -## prompt.showDialog\(OBJECT\) - -在页面内显示对话框。 - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

title

-

string

-

否

-

标题文本。

-

message

-

string

-

否

-

内容文本。

-

buttons

-

Array

-

否

-

对话框中按钮的数组，结构为：{text:'button', color: '#666666'}，支持1-3个按钮。其中第一个为positiveButton；第二个为negativeButton；第三个为neutralButton。

-

success

-

Function

-

否

-

接口调用成功的回调函数，返回值如success返回值所示。

-

cancel

-

Function

-

否

-

取消调用此接口的回调函数。

-

complete

-

Function

-

否

-

弹框退出时的回调函数。

-
- - success返回值： - - - - - - - - - - - - -

参数名

-

类型

-

说明

-

index

-

number

-

选中按钮在buttons数组中的索引。

-
- -- 示例 - - ``` - prompt.showDialog({ - title: 'Title Info', - message: 'Message Info', - buttons: [ - { - text: 'button', - color: '#666666', - }, - ], - success: function(data) { - console.log('dialog success callback，click button : ' + data.index); - }, - cancel: function() { - console.log('dialog cancel callback'); - }, - }); - ``` - - diff --git "a/zh-cn/application-dev/js-reference/\346\213\250\346\211\223\347\224\265\350\257\235.md" "b/zh-cn/application-dev/js-reference/\346\213\250\346\211\223\347\224\265\350\257\235.md" deleted file mode 100755 index 5ce29415fd0c56a82c9ec4bc5619c4995e4330e3..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/js-reference/\346\213\250\346\211\223\347\224\265\350\257\235.md" +++ /dev/null @@ -1,996 +0,0 @@ -# 拨打电话 - -- [导入模块](#section111401036143) -- [call.dial](#section1961259194312) -- [call.dial](#section387281814438) -- [call.dial](#section37173354913) -- [call.hasCall](#section19558123217015) -- [call.hasCall](#section12874319303) -- [call.getCallState](#section5882223124910) -- [call.getCallState](#section198597561794) -- [call.isEmergencyPhoneNumber7+](#section8560112174319) -- [call.isEmergencyPhoneNumber7+](#section9565131204319) -- [call.isEmergencyPhoneNumber7+](#section5569131234312) -- [call.formatPhoneNumber7+](#section1532018310579) -- [call.formatPhoneNumber7+](#section1832553165720) -- [call.formatPhoneNumber7+](#section1933033195716) -- [call.formatPhoneNumberToE1647+](#section10285180112418) -- [call.formatPhoneNumberToE1647+](#section142931509247) -- [DialOptions](#section12262183471518) -- [CallState](#section345181318300) -- [EmergencyNumberOptions7+](#section03689893518) -- [NumberFormatOptions7+](#section23348305716) - ->**说明：** -> ->标记7+的表示从API Version 7开始支持，未标记的表示从API Version 6开始支持。 - - -## 导入模块 - -``` -import call from '@ohos.telephony.call'; -``` - -## call.dial - -dial\(phoneNumber: string, callback: AsyncCallback\): void - -拨打电话，使用callback方式作为异步方法。 - -需要权限：ohos.permission.PLACE\_CALL权限，该权限为系统权限。 - -- 参数 - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

phoneNumber

-

string

-

是

-

电话号码。

-

callback

-

AsyncCallback<boolean>

-

是

-

回调函数：

-
  • true：成功。
  • false：失败。
-
- -- 示例 - - ``` - call.dial("138xxxxxxxx", (err, data) => { - console.log(`callback: err->${JSON.stringify(err)}, data->${JSON.stringify(data)}`); - }); - ``` - - -## call.dial - -dial\(phoneNumber: string, options: DialOptions, callback: AsyncCallback\): void - -拨打电话，可设置通话参数，使用callback方式作为异步方法。 - -需要权限：ohos.permission.PLACE\_CALL权限，该权限为系统权限。 - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

phoneNumber

-

string

-

是

-

电话号码。

-

options

-

DialOptions

-

是

-

通话参数，参考DialOptions。

-

callback

-

AsyncCallback<boolean>

-

是

-

回调函数：

-
  • true：成功。
  • false：失败。
-
- -- 示例 - - ``` - call.dial("138xxxxxxxx", { - extras: false - }, (err, data) => { - console.log(`callback: err->${JSON.stringify(err)}, data->${JSON.stringify(data)}`); - }); - ``` - - -## call.dial - -dial\(phoneNumber: string, options?: DialOptions\): Promise - -拨打电话，可设置通话参数，使用promise方式作为异步方法。 - -需要权限：ohos.permission.PLACE\_CALL权限，该权限为系统权限。 - -- 参数 - - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

phoneNumber

-

string

-

是

-

电话号码。

-

options

-

DialOptions

-

否

-

通话参数，参考DialOptions。

-
- -- 返回值 - - - - - - - - - - -

类型

-

说明

-

Promise<boolean>

-

以Promise形式返回拨打电话的结果。

-
- -- 示例 - - ``` - let promise = call.dial("138xxxxxxxx", { - extras: false - }); - promise.then(data => { - console.log(`dial success, promise: data->${JSON.stringify(data)}`); - }).catch(err => { - console.error(`dial fail, promise: err->${JSON.stringify(err)}`); - }); - ``` - -## call.hasCall - -hasCall\(callback: AsyncCallback\): void - -判断是否存在通话，使用callback方式作为异步方法。 - -- 参数 - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

callback

-

AsyncCallback<boolean>

-

是

-

回调函数：

-
  • true：当前存在通话。
  • false：当前不存在通话。
-
- -- 示例 - - ``` - call.hasCall((err, data) => { - console.log(`callback: err->${JSON.stringify(err)}, data->${JSON.stringify(data)}`); - }); - ``` - - -## call.hasCall - -hasCall\(\): Promise - -判断是否存在通话，使用Promise方式作为异步方法。 - -- 返回值 - - - - - - - - - - -

类型

-

说明

-

Promise<boolean>

-

以Promise形式异步返回判断是否存在通话。

-
- -- 示例 - - ``` - let promise = call.hasCall(); - promise.then(data => { - console.log(`hasCall success, promise: data->${JSON.stringify(data)}`); - }).catch(err => { - console.error(`hasCall fail, promise: err->${JSON.stringify(err)}`); - }); - ``` - - -## call.getCallState - -getCallState\(callback: AsyncCallback\): void - -获取通话状态，使用callback方式作为异步方法。 - -- 参数 - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

callback

-

AsyncCallback<CallState>

-

是

-

回调函数，异步返回获取到的通话状态。

-
- -- 示例 - - ``` - call.getCallState((err, data) => { - console.log(`callback: err->${JSON.stringify(err)}, data->${JSON.stringify(data)}`); - }); - ``` - - -## call.getCallState - -getCallState\(\): Promise - -获取通话状态，使用Promise方式作为异步方法。 - -- 返回值 - - - - - - - - - - -

类型

-

说明

-

Promise<CallState>

-

以Promise形式异步返回获取通话状态的结果。

-
- -- 示例 - - ``` - let promise = call.getCallState(); - promise.then(data => { - console.log(`getCallState success, promise: data->${JSON.stringify(data)}`); - }).catch(err => { - console.error(`getCallState fail, promise: err->${JSON.stringify(err)}`); - }); - ``` - -## call.isEmergencyPhoneNumber7+ - -isEmergencyPhoneNumber\(phoneNumber: string, callback: AsyncCallback\): void - -判断是否是紧急电话号码，使用callback方式作为异步方法。 - -- 参数 - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

phoneNumber

-

string

-

是

-

电话号码。

-

callback

-

AsyncCallback<boolean>

-

是

-

回调函数，返回判断是否是紧急电话号码的结果：

-
  • true：是紧急电话号码。
  • false：不是紧急电话号码。
-
- -- 示例 - - ``` - call.isEmergencyPhoneNumber("138xxxxxxxx", (err, data) => { - console.log(`callback: err->${JSON.stringify(err)}, data->${JSON.stringify(data)}`); - }); - ``` - - -## call.isEmergencyPhoneNumber7+ - -isEmergencyPhoneNumber\(phoneNumber: string, options: EmergencyNumberOptions, callback: AsyncCallback\): void - -判断是否是紧急电话号码，使用callback方式作为异步方法。 - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

phoneNumber

-

string

-

是

-

电话号码。

-

options

-

EmergencyNumberOptions

-

是

-

手机参数，参考EmergencyNumberOptions。

-

callback

-

AsyncCallback<boolean>

-

是

-

回调函数，返回判断是否是紧急电话号码的结果：

-
  • true：是紧急电话号码。
  • false：不是紧急电话号码。
-
- -- 示例 - - ``` - call.isEmergencyPhoneNumber("112", {slotId: 1}, (err, value) => { - console.log(`callback: err->${JSON.stringify(err)}, data->${JSON.stringify(data)}`); - }); - ``` - - -## call.isEmergencyPhoneNumber7+ - -isEmergencyPhoneNumber\(phoneNumber: string, options?: EmergencyNumberOptions\): Promise - -判断是否是紧急电话号码，使用promise方式作为异步方法。 - -- 参数 - - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

phoneNumber

-

string

-

是

-

电话号码。

-

options

-

EmergencyNumberOptions

-

否

-

手机参数，参考EmergencyNumberOptions。

-
- -- 返回值 - - - - - - - - - - - -

类型

-

说明

-

Promise<boolean>

-

以Promise形式异步返回判断是否是紧急电话号码的结果。

-
- -- 示例 - - ``` - let promise = call.isEmergencyPhoneNumber("138xxxxxxxx", {slotId: 1}); - promise.then(data => { - console.log(`isEmergencyPhoneNumber success, promise: data->${JSON.stringify(data)}`); - }).catch(err => { - console.error(`isEmergencyPhoneNumber fail, promise: err->${JSON.stringify(err)}`); - }); - ``` - -## call.formatPhoneNumber7+ - -formatPhoneNumber\(phoneNumber: string, callback: AsyncCallback\): void - -格式化电话号码，使用callback方式作为异步方法。 - -- 参数 - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

phoneNumber

-

string

-

是

-

电话号码。

-

callback

-

AsyncCallback<string>

-

是

-

回调函数，返回格式化电话号码的结果。

-
- -- 示例 - - ``` - call.formatPhoneNumber("138xxxxxxxx", (err, data) => { - console.log(`callback: err->${JSON.stringify(err)}, data->${JSON.stringify(data)}`); - }); - ``` - - -## call.formatPhoneNumber7+ - -formatPhoneNumber\(phoneNumber: string, options: NumberFormatOptions, callback: AsyncCallback\): void - -格式化电话号码，可设置格式化参数，使用callback方式作为异步方法。 - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

phoneNumber

-

string

-

是

-

电话号码。

-

options

-

NumberFormatOptions

-

是

-

格式化参数，参考NumberFormatOptions。

-

callback

-

AsyncCallback<string>

-

是

-

回调函数，返回格式化电话号码的结果。

-
- -- 示例 - - ``` - call.formatPhoneNumber("138xxxxxxxx",{ - countryCode: "CN" - }, (err, data) => { - console.log(`callback: err->${JSON.stringify(err)}, data->${JSON.stringify(data)}`); - }); - ``` - - -## call.formatPhoneNumber7+ - -formatPhoneNumber\(phoneNumber: string, options?: NumberFormatOptions\): Promise - -格式化电话号码，可设置格式化参数，使用promise方式作为异步方法。 - -- 参数 - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

phoneNumber

-

string

-

是

-

电话号码。

-

options

-

NumberFormatOptions

-

否

-

格式化参数，参考NumberFormatOptions。

-
- -- 返回值 - - - - - - - - - - -

类型

-

说明

-

Promise<string>

-

以Promise形式异步返回格式化电话号码的结果。

-
- -- 示例 - - ``` - let promise = call.formatPhoneNumber("138xxxxxxxx", { - countryCode: "CN" - }); - promise.then(data => { - console.log(`formatPhoneNumber success, promise: data->${JSON.stringify(data)}`); - }).catch(err => { - console.error(`formatPhoneNumber fail, promise: err->${JSON.stringify(err)}`); - }); - ``` - -## call.formatPhoneNumberToE1647+ - -formatPhoneNumberToE164\(phoneNumber: string, countryCode: string, callback: AsyncCallback\): void - -将电话号码格式化为E.164表示形式，使用callback方式作为异步方法。 - -需要格式化的电话号码需要与传入国家码相匹配，如中国手机号需要传入国家码CN，否则格式化后的手机号为null。 - -支持所有国家码。 - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

phoneNumber

-

string

-

是

-

电话号码。

-

countryCode

-

string

-

是

-

国家码，支持所有国家码，如：中国（CN）。

-

callback

-

AsyncCallback<string>

-

是

-

回调函数，返回将电话号码格式化为E.164表示形式的结果。

-
- -- 示例 - - ``` - call.formatPhoneNumberToE164("138xxxxxxxx",{ - countryCode: "CN" - }, (err, data) => { - console.log(`callback: err->${JSON.stringify(err)}, data->${JSON.stringify(data)}`); - }); - ``` - - -## call.formatPhoneNumberToE1647+ - -formatPhoneNumberToE164\(phoneNumber: string, countryCode: string\): Promise - -将电话号码格式化为E.164表示形式，使用promise方式作为异步方法。 - -需要格式化的手机号码需要与传入国家码相匹配，如中国手机号需要传入国家码CN，否则格式化后的手机号为null。 - -支持所有国家码。 - -- 参数 - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

phoneNumber

-

string

-

是

-

电话号码。

-

countryCode

-

string

-

是

-

国家码，如：中国（CN）。

-
- -- 返回值 - - - - - - - - - - -

类型

-

说明

-

Promise<string>

-

以Promise形式异步返回将电话号码格式化为E.164表示形式的结果。

-
- -- 示例 - - ``` - let promise = call.formatPhoneNumberToE164("138xxxxxxxx", { - countryCode: "CN" - }); - promise.then(data => { - console.log(`formatPhoneNumberToE164 success, promise: data->${JSON.stringify(data)}`); - }).catch(err => { - console.error(`formatPhoneNumberToE164 fail, promise: err->${JSON.stringify(err)}`); - }); - ``` - -## DialOptions - -拨打电话的可选参数。 - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

extras

-

boolean

-

否

-

根据extras的值判断是否为视频通话，默认为语音通话。

-
  • true：视频通话。
  • fasle：语音通话。
-
- -## CallState - -通话状态码。 - - - - - - - - - - - - - - - - - - - - - - - - - -

变量

-

值

-

说明

-

CALL_STATE_UNKNOWN

-

-1

-

无效状态，当获取呼叫状态失败时返回。

-

CALL_STATE_IDLE

-

0

-

表示没有正在进行的呼叫。

-

CALL_STATE_RINGING

-

1

-

表示来电正在振铃或等待。

-

CALL_STATE_OFFHOOK

-

2

-

表示至少有一个呼叫处于拨号、通话中或呼叫保持状态，并且没有新的来电振铃或等待。

-
- -## EmergencyNumberOptions7+ - -判断是否是紧急电话号码的可选参数。 - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

slotId

-

number

-

否

-

卡槽ID：

-
  • 0：卡槽1。
  • 1：卡槽2。
-
- -## NumberFormatOptions7+ - -格式化号码的可选参数。 - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

countryCode

-

string

-

否

-

国家码，支持所有国家的国家码，如：中国（CN），默认为：CN。

-
\ No newline at end of file diff --git "a/zh-cn/application-dev/js-reference/\346\216\245\345\217\243.md" "b/zh-cn/application-dev/js-reference/\346\216\245\345\217\243.md" deleted file mode 100755 index 1bc007c2a0e22e945f60dbc874c38b377e767420..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/js-reference/\346\216\245\345\217\243.md" +++ /dev/null @@ -1,33 +0,0 @@ -# 接口 - -- **[日志打印](日志打印.md)** - -- **[应用打点](应用打点.md)** - -- **[页面路由](页面路由.md)** - -- **[弹窗](弹窗.md)** - -- **[定时器](定时器.md)** - -- **[时间设置](时间设置.md)** - -- **[音频管理](音频管理.md)** - -- **[音频播放](音频播放.md)** - -- **[设备信息](设备信息.md)** - -- **[系统属性](系统属性.md)** - -- **[电池和充电属性](电池和充电属性.md)** - -- **[设置系统屏幕亮度](设置系统屏幕亮度.md)** - -- **[国际化](国际化.md)** - -- **[资源管理](资源管理.md)** - -- **[升级](升级.md)** - - diff --git "a/zh-cn/application-dev/js-reference/\346\226\207\344\273\266\345\255\230\345\202\250.md" "b/zh-cn/application-dev/js-reference/\346\226\207\344\273\266\345\255\230\345\202\250.md" deleted file mode 100644 index 61b7a80b1de548aa2f3d8af2ecca85436add985e..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/js-reference/\346\226\207\344\273\266\345\255\230\345\202\250.md" +++ /dev/null @@ -1,579 +0,0 @@ -# 文件存储 - -更新时间: 2021-07-09 15:29 - -说明 - -从API Version 6开始，该接口不再维护，推荐使用[文件管理接口（@ohos.fileio）](文件管理.md)进行文件存储管理。 - -涉及到文件目录的请参考下述表格： - - - - - - - - - - - - - - - - - - - -

目录类型

-

路径前缀

-

访问可见性

-

说明

-

临时目录

-

internal://cache/

-

仅本应用可见

-

可读写，随时可能清除，不保证持久性。一般用作下载临时目录或缓存目录。

-

应用私有目录

-

internal://app/

-

仅本应用可见

-

随应用卸载删除。

-
- -## 支持设备 - - - -| API | 手机 | 平板 | 智慧屏 | 智能穿戴 | -| --------------------- | ---- | ---- | ------ | -------- | -| file.move | 支持 | 支持 | 支持 | 支持 | -| file.copy | 支持 | 支持 | 支持 | 支持 | -| file.list | 支持 | 支持 | 支持 | 支持 | -| file.get | 支持 | 支持 | 支持 | 支持 | -| file.delete | 支持 | 支持 | 支持 | 支持 | -| file.writeText | 支持 | 支持 | 支持 | 支持 | -| file.writeArrayBuffer | 支持 | 支持 | 支持 | 支持 | -| file.readText | 支持 | 支持 | 支持 | 支持 | -| file.readArrayBuffer | 支持 | 支持 | 支持 | 支持 | -| file.access | 支持 | 支持 | 支持 | 支持 | -| file.mkdir | 支持 | 支持 | 支持 | 支持 | -| file.rmdir | 支持 | 支持 | 支持 | 支持 | - -说明 - -file.writeText、file.writeArrayBuffer、file.readText和file.readArrayBuffer仅支持文本文档读写。 - -## 导入模块 - - - -```javascript -import file from '@system.file'; -``` - -## 权限列表 - - - -无 - -## file.move(OBJECT) - - - -将指定文件移动到其他指定位置。 - -- 参数 - - | 参数名 | 类型 | 必填 | 说明 | - | -------- | -------- | ---- | ----------------------------------------------------- | - | srcUri | string | 是 | 要移动的文件的uri。 | - | dstUri | string | 是 | 文件要移动到的位置的uri。 | - | success | Function | 否 | 接口调用成功的回调函数，返回文件要移动到的位置的uri。 | - | fail | Function | 否 | 接口调用失败的回调函数。 | - | complete | Function | 否 | 接口调用结束的回调函数。 | - - fail返回错误代码： - - | 错误码 | 说明 | - | ------ | ------------------ | - | 202 | 出现参数错误。 | - | 300 | 出现I/O错误。 | - | 301 | 文件或目录不存在。 | - -- 示例 - - ```javascript - file.move({ - srcUri: 'internal://app/myfiles1', - dstUri: 'internal://app/myfiles2', - success: function(uri) { - console.log('call success callback success'); - }, - fail: function(data, code) { - console.error('call fail callback fail, code: ' + code + ', data: ' + data); - }, - }); - ``` - -## file.copy(OBJECT) - - - -将指定文件拷贝并存储到指定位置，接口所使用的URI描述详见[文件组织](https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-framework-file-0000000000611396)。 - -- 参数 - - | 参数名 | 类型 | 必填 | 说明 | - | -------- | -------- | ---- | ------------------------------------------------------------ | - | srcUri | string | 是 | 要拷贝的文件的uri。 | - | dstUri | string | 是 | 文件要拷贝到的位置的uri。 不支持用应用资源路径或tmp类型的uri。 | - | success | Function | 否 | 接口调用成功的回调函数，返回文件要拷贝到的位置的uri。 | - | fail | Function | 否 | 接口调用失败的回调函数。 | - | complete | Function | 否 | 接口调用结束的回调函数。 | - - fail返回错误代码： - - | 错误码 | 说明 | - | ------ | ------------------ | - | 202 | 出现参数错误。 | - | 300 | 出现I/O错误。 | - | 301 | 文件或目录不存在。 | - -- 示例 - - ```javascript - file.copy({ - srcUri: 'internal://app/file.txt', - dstUri: 'internal://app/file_copy.txt', - success: function(uri) { - console.log('call success callback success'); - }, - fail: function(data, code) { - console.error('call fail callback fail, code: ' + code + ', data: ' + data); - }, - }); - ``` - -## file.list(OBJECT) - - - -获取指定路径下全部文件的列表，接口所使用的 URI 描述详见[文件组织](https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-framework-file-0000000000611396)。 - -- 参数 - - | 参数名 | 类型 | 必填 | 说明 | - | -------- | -------- | ---- | ------------------------ | - | uri | string | 是 | 目录uri。 | - | success | Function | 否 | 接口调用成功的回调函数。 | - | fail | Function | 否 | 接口调用失败的回调函数。 | - | complete | Function | 否 | 接口调用结束的回调函数。 | - - success返回值： - - | 参数名 | 类型 | 说明 | - | -------- | ------------------------------------------------------------ | ------------------------------------------------------------ | - | fileList | Array<[FileInfo](https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-file-storage-0000000000629445#ZH-CN_TOPIC_0000001102026082__table156231426174610)> | 获取的文件列表，其中每个文件的信息的格式为： **{** **uri:'file1',** **lastModifiedTime:1589965924479,** **length:10240,** **type: 'file'** **}** | - - - - | 参数名 | 类型 | 说明 | - | ---------------- | ------ | ------------------------------------------------------------ | - | uri | string | 文件的 uri。 | - | lastModifiedTime | number | 文件上一次保存时的时间戳，显示从1970/01/01 00:00:00 GMT到当前时间的毫秒数。 | - | length | number | 文件的大小，单位为字节。 | - | type | string | 文件的类型，可选值为： dir：目录；file：文件。 | - - fail返回错误代码： - - | 错误码 | 说明 | - | ------ | ------------------ | - | 202 | 出现参数错误。 | - | 300 | 出现I/O错误。 | - | 301 | 文件或目录不存在。 | - -- 示例 - - ```javascript - file.list({ - uri: 'internal://app/pic', - success: function(data) { - console.log(data.fileList); - }, - fail: function(data, code) { - console.error('call fail callback fail, code: ' + code + ', data: ' + data); - }, - }); - ``` - -## file.get(OBJECT) - - - -获取指定本地文件的信息，URI请参考[文件组织](https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-framework-file-0000000000611396)。 - -- 参数 - - | 参数名 | 类型 | 必填 | 说明 | - | --------- | -------- | ---- | --------------------------------------------- | - | uri | string | 是 | 文件的uri。 | - | recursive | boolean | 否 | 是否进行递归获取子目录文件列表，缺省为false。 | - | success | Function | 否 | 接口调用成功的回调函数。 | - | fail | Function | 否 | 接口调用失败的回调函数。 | - | complete | Function | 否 | 接口调用结束的回调函数。 | - - success返回值： - - | 参数名 | 类型 | 说明 | - | ---------------- | ------ | ------------------------------------------------------------ | - | uri | string | 文件的uri。 | - | length | number | 文件字节长。 | - | lastModifiedTime | number | 文件保存时的时间戳，从1970/01/01 00:00:00到当前时间的毫秒数。 | - | type | string | 文件类型，可选值为： dir：目录；file：文件。 | - | subFiles | Array | 文件列表。 | - - fail返回错误代码： - - | 错误码 | 说明 | - | ------ | ------------------ | - | 202 | 出现参数错误。 | - | 300 | 出现I/O错误。 | - | 301 | 文件或目录不存在。 | - -- 示例 - - ```javascript - file.get({ - uri: 'internal://app/file', - success: function(data) { - console.log(data.uri); - }, - fail: function(data, code) { - console.error('call fail callback fail, code: ' + code + ', data: ' + data); - }, - }); - ``` - -## file.delete(OBJECT) - - - -删除本地文件，使用的URI参考[文件组织](https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-framework-file-0000000000611396)。 - -- 参数 - - | 参数名 | 类型 | 必填 | 说明 | - | -------- | -------- | ---- | ----------------------------------- | - | uri | string | 是 | 删除文件的uri，不能是应用资源路径。 | - | success | Function | 否 | 接口调用成功的回调函数。 | - | fail | Function | 否 | 接口调用失败的回调函数。 | - | complete | Function | 否 | 接口调用结束的回调函数。 | - - fail返回错误代码： - - | 错误码 | 说明 | - | ------ | ------------------ | - | 202 | 参数错误。 | - | 300 | I/O错误。 | - | 301 | 文件或目录不存在。 | - -- 示例 - - ```javascript - file.delete({ - uri: 'internal://app/my_file', - success: function() { - console.log('call delete success.'); - }, - fail: function(data, code) { - console.error('call fail callback fail, code: ' + code + ', data: ' + data); - }, - }); - ``` - -## file.writeText(OBJECT) - - - -写文本内容到指定文件。 - -- 参数 - - | 参数名 | 类型 | 必填 | 说明 | - | -------- | -------- | ---- | --------------------------------------- | - | uri | string | 是 | 本地文件uri，如果文件不存在会创建文件。 | - | text | string | 是 | 写入的字符串。 | - | encoding | string | 否 | 编码格式，默认为UTF-8。 | - | append | boolean | 否 | 是否追加模式，默认为false。 | - | success | Function | 否 | 接口调用成功的回调函数。 | - | fail | Function | 否 | 接口调用失败的回调函数。 | - | complete | Function | 否 | 接口调用结束的回调函数。 | - - fail返回错误代码： - - | 错误码 | 说明 | - | ------ | ------------------ | - | 202 | 参数错误。 | - | 300 | I/O错误。 | - | 301 | 文件或目录不存在。 | - -- 示例 - - ```javascript - file.writeText({ - uri: 'internal://app/workspace/test.txt', - text: 'Text that just for test.', - success: function() { - console.log('call writeText success.'); - }, - fail: function(data, code) { - console.error('call fail callback fail, code: ' + code + ', data: ' + data); - }, - }); - ``` - -## file.writeArrayBuffer(OBJECT) - - - -写Buffer内容到指定文件。 - -- 参数 - - | 参数名 | 类型 | 必填 | 说明 | - | -------- | ---------- | ---- | ------------------------------------------------------------ | - | uri | string | 是 | 本地文件uri，如果文件不存在会创建文件。 | - | buffer | Uint8Array | 是 | 写入的Buffer。 | - | position | number | 否 | 文件开始写入数据的位置的偏移量，默认为0。 | - | append | boolean | 否 | 是否追加模式，默认为false。当设置为true时，position参数无效。 | - | success | Function | 否 | 接口调用成功的回调函数。 | - | fail | Function | 否 | 接口调用失败的回调函数。 | - | complete | Function | 否 | 接口调用结束的回调函数。 | - - fail返回错误代码： - - | 错误码 | 说明 | - | ------ | ------------------ | - | 202 | 出现参数错误。 | - | 300 | 出现I/O错误。 | - | 301 | 文件或目录不存在。 | - -- 示例 - - ```javascript - file.writeArrayBuffer({ - uri: 'internal://app/workspace/test', - buffer: buffer, //buffer为Uint8Array类型 - success: function() { - console.log('call writeArrayBuffer success.'); - }, - fail: function(data, code) { - console.error('call fail callback fail, code: ' + code + ', data: ' + data); - }, - }); - ``` - -## file.readText(OBJECT) - - - -从指定文件中读取文本内容。 - -- 参数 - - | 参数名 | 类型 | 必填 | 说明 | - | -------- | -------- | ---- | ------------------------ | - | uri | string | 是 | 本地文件uri。 | - | encoding | string | 否 | 编码格式，缺省为UTF-8。 | - | success | Function | 否 | 接口调用成功的回调函数。 | - | fail | Function | 否 | 接口调用失败的回调函数。 | - | complete | Function | 否 | 接口调用结束的回调函数。 | - - success返回值： - - | 参数名 | 类型 | 说明 | - | ------ | ------ | ------------------ | - | text | string | 读取到的文本内容。 | - - fail返回错误代码： - - | 错误码 | 说明 | - | ------ | ------------------ | - | 202 | 出现参数错误。 | - | 300 | 出现I/O错误。 | - | 301 | 文件或目录不存在。 | - -- 示例 - - ```javascript - file.readText({ - uri: 'internal://app/workspace/text.txt', - success: function(data) { - console.log('call readText success: ' + data.text); - }, - fail: function(data, code) { - console.error('call fail callback fail, code: ' + code + ', data: ' + data); - }, - }); - ``` - -## file.readArrayBuffer(OBJECT) - - - -从指定文件中读取Buffer内容。 - -- 参数 - - | 参数名 | 类型 | 必填 | 说明 | - | -------- | -------- | ---- | -------------------------------------- | - | uri | string | 是 | 本地文件uri。 | - | position | number | 否 | 读取的起始位置，缺省为文件的起始位置。 | - | length | number | 否 | 需要读取的长度，缺省则读取到文件结尾。 | - | success | Function | 否 | 接口调用成功的回调函数。 | - | fail | Function | 否 | 接口调用失败的回调函数。 | - | complete | Function | 否 | 接口调用结束的回调函数。 | - - success返回值： - - | 参数名 | 类型 | 说明 | - | ------ | ---------- | ------------------ | - | buffer | Uint8Array | 读取到的文件内容。 | - - fail返回错误代码： - - | 错误码 | 说明 | - | ------ | ------------------ | - | 202 | 出现参数错误。 | - | 300 | 出现I/O错误。 | - | 301 | 文件或目录不存在。 | - -- 示例 - - ```javascript - file.readArrayBuffer({ - uri: 'internal://app/workspace/test', - position: 10, - length: 200, - success: function(data) { - console.log('call readArrayBuffer success: ' + data.buffer); - }, - fail: function(data, code) { - console.error('call fail callback fail, code: ' + code + ', data: ' + data); - }, - }); - ``` - -## file.access(OBJECT) - - - -判断指定文件或目录是否存在。 - -- 参数 - - | 参数名 | 类型 | 必填 | 说明 | - | -------- | -------- | ---- | ------------------------ | - | uri | string | 是 | 目录或文件uri。 | - | success | Function | 否 | 接口调用成功的回调函数。 | - | fail | Function | 否 | 接口调用失败的回调函数。 | - | complete | Function | 否 | 接口调用结束的回调函数。 | - - fail返回错误代码： - - | 错误码 | 说明 | - | ------ | ------------------ | - | 202 | 出现参数错误。 | - | 300 | 出现I/O 错误。 | - | 301 | 文件或目录不存在。 | - -- 示例 - - ```javascript - file.access({ - uri: 'internal://app/test', - success: function() { - console.log('call access success.'); - }, - fail: function(data, code) { - console.error('call fail callback fail, code: ' + code + ', data: ' + data); - }, - }); - ``` - -## file.mkdir(OBJECT) - - - -创建指定目录。 - -- 参数 - - | 参数名 | 类型 | 必填 | 说明 | - | --------- | -------- | ---- | ------------------------------------------- | - | uri | string | 是 | 目录的uri路径。 | - | recursive | boolean | 否 | 是否递归创建该目录的上级目录，缺省为false。 | - | success | Function | 否 | 接口调用成功的回调函数。 | - | fail | Function | 否 | 接口调用失败的回调函数。 | - | complete | Function | 否 | 接口调用结束的回调函数。 | - - fail返回错误代码： - - | 错误码 | 说明 | - | ------ | -------------- | - | 202 | 出现参数错误。 | - | 300 | 出现I/O 错误。 | - -- 示例 - - ```javascript - file.mkdir({ - uri: 'internal://app/test_directory', - success: function() { - console.log('call mkdir success.'); - }, - fail: function(data, code) { - console.error('call fail callback fail, code: ' + code + ', data: ' + data); - }, - }); - ``` - -## file.rmdir(OBJECT) - - - -删除指定目录。 - -- 参数 - - | 参数名 | 类型 | 必填 | 说明 | - | --------- | -------- | ---- | ----------------------------------------- | - | uri | string | 是 | 目录的uri路径。 | - | recursive | boolean | 否 | 是否递归删除子文件和子目录，缺省为false。 | - | success | Function | 否 | 接口调用成功的回调函数。 | - | fail | Function | 否 | 接口调用失败的回调函数。 | - | complete | Function | 否 | 接口调用结束的回调函数。 | - - fail返回错误代码： - - | 错误码 | 说明 | - | ------ | ------------------ | - | 202 | 出现参数错误。 | - | 300 | 出现I/O 错误。 | - | 301 | 文件或目录不存在。 | - -- 示例 - - ```javascript - file.rmdir({ - uri: 'internal://app/test_directory', - success: function() { - console.log('call rmdir success.'); - }, - fail: function(data, code) { - console.error('call fail callback fail, code: ' + code + ', data: ' + data); - }, - }); - ``` - diff --git "a/zh-cn/application-dev/js-reference/\346\226\207\344\273\266\347\256\241\347\220\206.md" "b/zh-cn/application-dev/js-reference/\346\226\207\344\273\266\347\256\241\347\220\206.md" deleted file mode 100644 index 2ab616b5deae849f27a53ca9fd34e93fc5d730be..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/js-reference/\346\226\207\344\273\266\347\256\241\347\220\206.md" +++ /dev/null @@ -1,1056 +0,0 @@ -# 文件管理 - - - -## 支持设备 - -| 手机 | 平板 | 智慧屏 | 智能穿戴 | -| ---- | ---- | ------ | -------- | -| 支持 | 支持 | 支持 | 支持 | - - - -## 导入模块 - -```js -import fileio from '@ohos.fileio' -``` - - - -## 权限列表 - -无 - - - -## openSync(path:string, flags?:number, mode?:number): number - -同步地打开文件。 - -- 参数： - - | 参数名 | 类型 | 必填 | 说明 | - | ------ | ------ | ---- | ------------------------------------------------------------ | - | path | string | 是 | 待打开文件的绝对路径。 | - | flags | number | 否 | 打开文件的选项，必须指定如下选项中的一个，默认以只读方式打开：
0o0：只读打开。
0o1：只写打开。
0o2：读写打开。
同时，也可给定如下选项，以按位或的方式追加，默认不给定任何额外选项：
0o100：若文件不存在，则创建文件。使用该选项时必须指定第三个参数mode。
0o200：如果追加了0o100 选项，且文件已经存在，则报错。
0o1000：如果文件存在且以只写或读写的方式打开文件，则将其长度裁剪为零。
0o2000：以追加方式打开，后续写将追加到文件末尾。
0o4000：如果path指向FIFO、块特殊文件或字符特殊文件，则本次打开及后续IO进行非阻塞操作。
0o200000：如果path指向目录，则报错。
0o400000：如果path指向符号链接，则报错。
0o4010000：以同步IO的方式打开文件。 | - | mode | number | 否 | 若创建文件，则指定文件的权限，可给定如下权限，以按位或的方式追加权限，默认给定0o666。
0o666：所有者具有读、写及可执行权限，其余用户具有读、写及可执行权限。
0o0700：所有者具有读、写及可执行权限。
0o0400：所有者具有读权限。
0o0200：所有者具有写权限。
0o0100：所有者具有可执行权限。
0o0070：所有用户组具有读、写及可执行权限。
0o0040：所有用户组具有读权限。
0o0020：所有用户组具有写权限。
0o0010：所有用户组具有可执行权限。
0o0007：其余用户具有读、写及可执行权限。
0o0004：其余用户具有读权限。
0o0002：其余用户具有写权限。
0o0001 ：其余用户具有可执行权限。 | - -- 返回值： - - | 类型 | 说明 | - | :----- | :--------------------- | - | number | 打开文件的文件描述符。 | - -- 示例： - - ```js - let fd = fileio.openSync(path); - ``` - - - -## accessSync(path: string, mode?: number): void - -同步地检查当前进程是否可访问某文件。 - -- 参数： - - | 参数名 | 类型 | 必填 | 说明 | - | ------ | ------ | ---- | ------------------------------------------------------------ | - | path | string | 是 | 文件路径。 | - | mode | number | 否 | 查询文件时的选项，可给定如下选项，以按位或的方式使用多个选项，默认给定0。
确认当前进程是否具有对应权限：
0：确认文件是否存在。
1：确认当前进程是否具有可执行权限。
2：确认当前进程是否具有写权限。
4：确认当前进程是否具有读权限。 | - -- 返回值： - - 无 - -- 示例： - - ```js - fileio.accessSync(path); - ``` - - - -## chmodSync(path:string, mode:number):void - -同步地修改文件权限。 - -- 参数： - - | 参数名 | 类型 | 必填 | 说明 | - | ------ | ------ | ---- | ------------------------------------------------------------ | - | path | string | 是 | 文件路径。 | - | mode | number | 是 | 文件的访问权限，可给定如下权限，以按位或的方式追加权限。只有该文件的所有者或有效用户识别码为0，才可以修改该文件的权限。
0o4000：文件的 (set user-id on execution)位
0o2000：文件的 (set group-id on execution)位
0o1000：文件的sticky 位
0o0700：所有者具有读、写及可执行权限。
0o0400：所有者具有读权限。
0o0200：所有者具有写权限。
0o0100：所有者具有可执行权限。
0o0070：所有用户组具有读、写及可执行权限。
0o0040：所有用户组具有读权限。
0o0020：所有用户组具有写权限。
0o0010：所有用户组具有可执行权限。
0o0007：其余用户具有读、写及可执行权限。
0o0004：其余用户具有读权限。
0o0002：其余用户具有写权限。
0o0001 ：其余用户具有可执行权限。 | - -- 返回值： - - 无 - -- 示例： - - ```js - fileio.chmodSync(path, 0o660); - ``` - - - -## chownSync(path:string, owner:number, group:number):void - -同步地修改文件的所有者和组。 - -- 参数： - - | 参数名 | 类型 | 必填 | 说明 | - | ------ | ------ | ---- | -------------------- | - | path | string | 是 | 待修改的文件路径。 | - | owner | number | 是 | 文件所有者的用户ID。 | - | group | number | 是 | 组ID。 | - -- 返回值： - - 无 - -- 示例： - - ```js - fileio.chownSync(path, UID, UID); - ``` - - - -## closeSync(fd: number): void - -关闭文件描述符。 - -- 参数： - - | 参数名 | 类型 | 必填 | 说明 | - | ------ | ------ | ---- | ------------ | - | fd | number | 是 | 文件描述符。 | - -- 返回值： - - 无 - -- 示例： - - ```js - fileio.closeSync(fd); - ``` - - - -## copyFileSync(src:string, dest:string, mode?:number): void - -同步地复制文件。 - -- 参数： - - | 参数名 | 类型 | 必填 | 说明 | - | ------ | ------ | ---- | ------------------------------------------------------------ | - | src | string | 是 | 待复制文件的路径。 | - | dest | string | 是 | 目标文件路径。 | - | mode | number | 否 | mode提供覆盖文件的选项，当前仅支持0，且默认为0。0：完全覆盖目标文件，未覆盖部分将被裁切掉。 | - -- 返回值： - - 无 - -- 示例： - - ```js - fileio.copyFileSync(src, dest); - ``` - - - -## fchmodSync(fd:number, mode:number):void - -同步地更改文件描述符所指文件的权限。 - -- 参数： - - | 参数名 | 类型 | 必填 | 说明 | - | ------ | ------ | ---- | ------------------------------------------------------------ | - | fd | number | 是 | 待修改权限的文件描述符 | - | mode | number | 是 | 文件的访问权限，可给定如下权限，以按位或的方式追加权限。只有该文件的所有者或有效用户识别码为0，才可以修改该文件的权限。
0o4000：文件的 (set user-id on execution)位
0o2000：文件的 (set group-id on execution)位
0o1000：文件的sticky 位
0o0700：所有者具有读、写及可执行权限。
0o0400：所有者具有读权限。
0o0200：所有者具有写权限。
0o0100：所有者具有可执行权限。
0o0070：所有用户组具有读、写及可执行权限。
0o0040：所有用户组具有读权限。
0o0020：所有用户组具有写权限。
0o0010：所有用户组具有可执行权限。
0o0007：其余用户具有读、写及可执行权限。
0o0004：其余用户具有读权限。
0o0002：其余用户具有写权限。
0o0001 ：其余用户具有可执行权限。 | - -- 返回值： - - 无 - -- 示例： - - ```js - let fd = fileio.openSync(path, 0o2); - fileio.fchmodSync(fd, 0o660); - ``` - - - -## fchownSync(fd:number, owner:number, group:number):void - -同步地更改已打开文件的所有者和组。 - -- 参数： - - | 参数名 | 类型 | 必填 | 说明 | - | ------ | ------ | ---- | ------------------ | - | fd | number | 是 | 要修改的文件描述符 | - | owner | number | 是 | 文件所有者的用户ID | - | group | number | 是 | 组ID | - -- 返回值： - - 无 - -- 示例： - - ```js - let fd = fileio.openSync(path, 0o2); - fileio.fchownSync(fd, UID, UID); - ``` - - - -## fstatSync(fd:number):Stat - -同步地获取已打开文件的信息。 - -- 参数： - - | 参数名 | 类型 | 必填 | 说明 | - | ------ | ------ | ---- | ---------------------- | - | fd | number | 是 | 已打开文件的文件描述符 | - -- 返回值： - - | 类型 | 说明 | - | :--- | :------------------- | - | Stat | 表示文件的具体信息。 | - -- 示例： - - ```js - let fd = fileio.openSync(path, 0o2); - let stat = fileio.fstatSync(fd); - ``` - - - -## ftruncateSync(fd:number, len?:number):void - -同步地修改已打开文件的大小。 - -- 参数： - - | 参数名 | 类型 | 必填 | 说明 | - | ------ | ------ | ---- | ---------------------------------------------------- | - | fd | number | 是 | 待修改的文件描述符 | - | len | number | 否 | 指定文件大小，缺省值0，原文件大小超过len部分会被删除 | - -- 返回值： - - 无 - -- 示例： - - ```js - let fd = fileio.openSync(path, 0o2); - fileio.ftruncateSync(fd); - ``` - - - -## mkdirSync(path: string, mode?: number): void - -同步地创建目录。 - -- 参数： - - | 参数名 | 类型 | 必填 | 说明 | - | ------ | ------ | ---- | ------------------------------------------------------------ | - | path | string | 是 | 待创建目录的绝对路径。 | - | mode | number | 否 | 待创建目录的权限，可给定如下权限，以按位或的方式追加权限，默认给定0o775。
0o775：所有者具有读、写及可执行权限，其余用户具有读、写及可执行权限。
0o700：所有者具有读、写及可执行权限。
0o400：所有者具有读权限。
0o200：所有者具有写权限。
0o100：所有者具有可执行权限。
0o070：所有用户组具有读、写及可执行权限。
0o040：所有用户组具有读权限。
0o020：所有用户组具有写权限。
0o010：所有用户组具有可执行权限。
0o007：其余用户具有读、写及可执行权限。
0o004：其余用户具有读权限。
0o002：其余用户具有写权限。
0o001：其余用户具有可执行权限。 | - -- 返回值： - - 无 - -- 示例： - - ``` - fileio.mkdirSync(path); - ``` - - - -## readSync(fd: number, buffer: ArrayBuffer, options?: Object): number - -同步地从文件读取数据。 - -- 参数： - - | 参数名 | 类型 | 必填 | 说明 | - | ------- | ----------- | ---- | ------------------------------------------------------------ | - | fd | number | 是 | 待读取文件的文件描述符。 | - | buffer | ArrayBuffer | 是 | 用于读取文件的缓冲区。 | - | options | Object | 否 | 支持如下选项：
offset，number 类型，表示将数据读取到缓冲区的位置，即相对于缓冲区首地址的偏移。可选，默认为0。
length，number 类型，表示期望读取数据的长度。可选，默认缓冲区长度减去偏移长度。
position，number 类型，表示期望读取文件的位置。可选，默认从当前位置开始读。 | - -- 返回值： - - | 类型 | 说明 | - | :----- | :--------------- | - | number | 实际读取的长度。 | - -- 示例： - - ```js - let fd = fileio.openSync(path, 0o2); - let buf = new ArrayBuffer(4096); - fileio.readSync(fd, buf); - console.log(String.fromCharCode.apply(null, new Uint8Array(buf))); - ``` - - - -## renameSync(path:string, pathTarget:string):void - -同步地重命名文件。 - -- 参数： - - | 参数名 | 类型 | 必填 | 说明 | - | ---------- | ------ | ---- | -------------------- | - | path | string | 是 | 待重命名的文件原路径 | - | pathTarget | string | 是 | 要重命名的文件路径 | - -- 返回值： - - 无 - -- 示例： - - ```js - fileio.renameSync(path, pathTarget); - ``` - - - -## rmdirSync(path:string):void - -同步地删除目录。 - -- 参数： - - | 参数名 | 类型 | 必填 | 说明 | - | ------ | ------ | ---- | ---------------------- | - | path | string | 是 | 待删除目录的绝对路径。 | - -- 返回值： - - 无 - -- 示例： - - ```js - fileio.rmdirSync(path); - ``` - - - -## unlinkSync(path: string): void - -同步地删除文件。 - -- 参数： - - | 参数名 | 类型 | 必填 | 说明 | - | ------ | ------ | ---- | ---------------------- | - | path | string | 是 | 待删除文件的绝对路径。 | - -- 返回值： - - 无 - -- 示例： - - ``` - fileio.unlinkSync(path); - ``` - - - -## fsyncSync(fd:number):void - -同步地将缓冲区数据写回磁盘进行数据同步。 - -- 参数： - - | 参数名 | 类型 | 必填 | 说明 | - | ------ | ------ | ---- | ---------------------- | - | fd | number | 是 | 待同步数据的文件描述符 | - -- 返回值： - - 无 - -- 示例： - - ```js - let fd = fileio.openSync(path, 0o2); - fileio.fsyncSync(fd); - ``` - - - -## truncateSync(path:string, len?:number):void - -同步地修改文件大小。 - -- 参数： - - | 参数名 | 类型 | 必填 | 说明 | - | ------ | ------ | ---- | ---------------------------------------------------- | - | path | string | 是 | 待修改的文件路径 | - | len | number | 否 | 指定文件大小，缺省值0，原文件大小超过len部分会被删除 | - -- 返回值： - - 无 - -- 示例： - - ```js - fileio.truncateSync(path); - ``` - - - -## writeSync(fd: number, buffer: ArrayBuffer | string, options?:Object): number - -同步地将数据写入文件。 - -- 参数： - - | 参数名 | 类型 | 必填 | 说明 | - | ------- | --------------------- | ---- | ------------------------------------------------------------ | - | fd | number | 是 | 待写入文件的文件描述符。 | - | buffer | ArrayBuffer \| string | 是 | 待写入文件的数据，可来自缓冲区或字符串。 | - | options | Object | 否 | 支持如下选项：
offset，number类型，表示期望写入数据的位置相对于数据首地址的偏移。可选，默认为0。
length，number类型，表示期望写入数据的长度。可选，默认缓冲区长度减去偏移长度。
position，number类型，表示期望写入文件的位置。可选，默认从当前位置开始写。
encoding，string类型，当数据是 string 类型时有效，表示数据的编码方式，默认 'utf-8'，仅支持 'utf-8'。 | - -- 返回值： - - | 类型 | 说明 | - | :----- | :--------------- | - | number | 实际写入的长度。 | - -- 示例： - - ```js - let fd = fileio.openSync(path, 0o102, 0o666); - let writeLen = fileio.writeSync(fd, 'hello, world'); - ``` - - - -## Stat - -文件具体信息，在调用Stat的方法前，需要先通过statSync(path:string)方法来构建一个Stat实例。 - -### 属性 - -| 名称 | 参数类型 | 可读 | 可写 | 说明 | -| ------- | -------- | ---- | ---- | ------------------------------------------------------------ | -| dev | number | 是 | 否 | 标识包含该文件的主设备号。 | -| ino | number | 是 | 否 | 标识该文件。通常同设备上的不同文件的INO不同。 | -| mode | number | 是 | 否 | 表示文件类型及权限，其首 4 位表示文件类型，后 12 位表示权限。各特征位的含义如下：
0o170000：可用于获取文件类型的掩码
0o140000：文件是套接字
0o120000：文件是符号链接
0o100000：文件是一般文件
0o060000：文件属于块设备
0o040000：文件是目录
0o020000：文件是字符设备
0o010000：文件是具名管道，即FIFO
0o0700：可用于获取用户权限的掩码
0o0400：用户读，对于普通文件，文件所有者可读取文件；对于目录，文件所有者可读取目录项
0o0200：用户写，对于普通文件，文件所有者可写入文件；对于目录，文件所有者可创建/删除目录项
0o0100：用户执行，对于普通文件，文件所有者可执行文件；对于目录，文件所有者可在目录中搜索给定路径名0o0070：可用于获取用户组权限的掩码
0o0040：用户组读，对于普通文件，文件所有用户组可读取文件；对于目录，文件所有用户组可读取目录项
0o0020：用户组写，对于普通文件，文件所有用户组可写入文件；对于目录，文件所有用户组可创建/删除目录项0o0010：用户组执行，对于普通文件，文件所有用户组可执行文件；对于目录，文件所有用户组是否可在目录中搜索给定路径名
0o0007：可用于获取其他用户权限的掩码
0o0004：其他读，对于普通文件，其他用户组可读取文件；对于目录，其他用户组可读取目录项
0o0002：其他写，对于普通文件，其他用户组可写入文件；对于目录，其他用户组可创建/删除目录项
0o0001：其他执行，对于普通文件，其他用户组可执行文件；对于目录，其他用户组可在目录中搜索给定路径名 | -| nlink | number | 是 | 否 | 文件的硬链接数。 | -| uid | number | 是 | 否 | 文件所有者的ID。 | -| gid | number | 是 | 否 | 文件所有组的ID。 | -| rdev | number | 是 | 否 | 标识包含该文件的从设备号。 | -| size | number | 是 | 否 | 文件的大小，以字节为单位。仅对普通文件有效。 | -| blksize | number | 是 | 否 | 包含该文件的磁盘块的大小 | -| blocks | number | 是 | 否 | 文件占用的块数，计算时块大小按512B计算。 | -| atime | number | 是 | 否 | 上次访问该文件的时间，表示距1970年1月1日0时0分0秒的秒数。 | -| mtime | number | 是 | 否 | 上次修改该文件的时间，表示距1970年1月1日0时0分0秒的秒数。 | -| ctime | number | 是 | 否 | 最近改变文件状态的时间，表示距1970年1月1日0时0分0秒的秒数。 | - - - -### statSync(path:string): Stat - -同步地获取文件的信息。 - -- 参数： - - | 参数名 | 类型 | 必填 | 说明 | - | ------ | ------ | ---- | ---------- | - | path | string | 是 | 文件路径。 | - -- 返回值： - - | 类型 | 说明 | - | :--- | :------------------- | - | Stat | 表示文件的具体信息。 | - -- 示例： - - ```js - let stat = fileio.statSync(path); - ``` - - - -### isBlockDevice(): boolean - -用于判断当前目录项是否是块特殊文件。一个块特殊文件只能以块为粒度进行访问，且访问的时候带缓存。 - -- 参数： - - 无 - -- 返回值： - - | 类型 | 说明 | - | :------ | :------------------------------- | - | boolean | 表示当前目录项是否是块特殊设备。 | - -- 示例： - - ```js - let isBLockDevice = fileio.statSync(fpath).isBlockDevice(); - ``` - - - -### isCharacterDevice(): boolean - -用于判断当前目录项是否是字符特殊文件。一个字符特殊设备可进行随机访问，且访问的时候不带缓存。 - -- 参数： - - 无 - -- 返回值： - - | 类型 | 说明 | - | :------ | :--------------------------------- | - | boolean | 表示当前目录项是否是字符特殊设备。 | - -- 示例： - - ```js - let isCharacterDevice = fileio.statSync(fpath).isCharacterDevice(); - ``` - - - -### isDirectory(): boolean - -用于判断当前目录项是否是目录。 - -- 参数： - - 无 - -- 返回值： - - | 类型 | 说明 | - | :------ | :------------------------- | - | boolean | 表示当前目录项是否是目录。 | - -- 示例： - - ```js - let isDirectory = fileio.statSync(fpath).isDirectory(); - ``` - - - -### isFIFO(): boolean - -用于判断当前目录项是否是命名管道（有时也称为FIFO）。命名管道通常用于进程间通信。 - -- 参数： - - 无 - -- 返回值： - - | 类型 | 说明 | - | :------ | :-------------------------- | - | boolean | 表示当前目录项是否是 FIFO。 | - -- 示例： - - ```js - let isFIFO = fileio.statSync(fpath).isFIFO(); - ``` - - - -### isFile(): boolean - -用于判断当前目录项是否是普通文件。 - -- 参数： - - 无 - -- 返回值： - - | 类型 | 说明 | - | :------ | :----------------------------- | - | boolean | 表示当前目录项是否是普通文件。 | - -- 示例： - - ```js - let isFile = fileio.statSync(fpath).isFile(); - ``` - - - -### isSocket(): boolean - -用于判断当前目录项是否是套接字。 - -- 参数： - - 无 - -- 返回值： - - | 类型 | 说明 | - | :------ | :--------------------------- | - | boolean | 表示当前目录项是否是套接字。 | - -- 示例： - - ```js - let isSocket = fileio.statSync(fpath).isSocket(); - ``` - - - -### isSymbolicLink(): boolean - -用于判断当前目录项是否是符号链接。 - -- 参数： - - 无 - -- 返回值： - - | 类型 | 说明 | - | :------ | :----------------------------- | - | boolean | 表示当前目录项是否是符号链接。 | - -- 示例： - - ```js - let isSymbolicLink = fileio.statSync(fpath).isSymbolicLink(); - ``` - - - -## Dir - -管理目录，在调用Dir的方法前，需要先通过opendirSync(path: string)方法来构建一个Dir实例。 - - - -### opendirSync(path: string): Dir - -同步地打开文件目录。 - -- 参数： - - | 参数名 | 类型 | 必填 | 说明 | - | ------ | ------ | ---- | ---------- | - | path | string | 是 | 目录名称。 | - -- 返回值： - - | 类型 | 说明 | - | :--- | :------------ | - | Dir | 返回Dir对象。 | - -- 示例： - - ```js - let dir = fileio.opendirSync(path); - ``` - - - -### readSync(): Dirent - -同步读取下一个目录项。 - -- 参数： - - 无 - -- 返回值： - - | 类型 | 说明 | - | :----------------------------------------------------------- | :--------------- | - | [Dirent](https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-fileio-0000001169469727#section92331215118) | 表示一个目录项。 | - -- 示例： - - ```js - let dir = fileio.opendirSync(dpath); - let dirent = dir.readSync(); - console.log(dirent.name); - ``` - - - -### closeSync(): void - -用于关闭目录。目录被关闭后，Dir中持有的文件描述将被释放，后续将无法从Dir中读取目录项。 - -- 参数： - - 无 - -- 返回值： - - 无 - -- 示例： - - ```js - let dir = fileio.opendirSync(dpath); - dir.closeSync(); - ``` - - - -## Dirent - -在调用Dirent的方法前，需要先通过dir.readSync()方法来构建一个Dirent实例。 - -### 属性 - -| 名称 | 参数类型 | 可读 | 可写 | 说明 | -| ---- | -------- | ---- | ---- | -------------- | -| name | string | 是 | 否 | 目录项的名称。 | - - - -### isBlockDevice(): boolean - -用于判断当前目录项是否是块特殊文件。一个块特殊文件只能以块为粒度进行访问，且访问的时候带缓存。 - -- 参数： - - 无 - -- 返回值： - - | 类型 | 说明 | - | :------ | :------------------------------- | - | boolean | 表示当前目录项是否是块特殊设备。 | - -- 示例： - - ```js - let dir = fileio.opendirSync(dpath); - let isBLockDevice = dir.readSync().isBlockDevice(); - ``` - - - -### isCharacterDevice(): boolean - -用于判断当前目录项是否是字符特殊设备。一个字符特殊设备可进行随机访问，且访问的时候不带缓存。 - -- 参数： - - 无 - -- 返回值： - - | 类型 | 说明 | - | :------ | :--------------------------------- | - | boolean | 表示当前目录项是否是字符特殊设备。 | - -- 示例： - - ```js - let dir = fileio.opendirSync(dpath); - let isCharacterDevice = dir.readSync().isCharacterDevice(); - ``` - - - -### isDirectory(): boolean - -用于判断当前目录项是否是目录。 - -- 参数： - - 无 - -- 返回值： - - | 类型 | 说明 | - | :------ | :------------------------- | - | boolean | 表示当前目录项是否是目录。 | - -- 示例： - - ```js - let dir = fileio.opendirSync(dpath); - let isDirectory = dir.readSync().isDirectory(); - ``` - - - -### isFIFO(): boolean - -用于判断当前目录项是否是命名管道（有时也称为FIFO）。命名管道通常用于进程间通信。 - -- 参数： - - 无 - -- 返回值： - - | 类型 | 说明 | - | :------ | :------------------------- | - | boolean | 表示当前目录项是否是FIFO。 | - -- 示例： - - ```js - let dir = fileio.opendirSync(dpath); - let isFIFO = dir.readSync().isFIFO(); - ``` - - - -### isFile(): boolean - -用于判断当前目录项是否是普通文件。 - -- 参数： - - 无 - -- 返回值： - - | 类型 | 说明 | - | :------ | :----------------------------- | - | boolean | 表示当前目录项是否是普通文件。 | - -- 示例： - - ```js - let dir = fileio.opendirSync(dpath); - let isFile = dir.readSync().isFile(); - ``` - - - -### isSocket(): boolean - -用于判断当前目录项是否是套接字。 - -- 参数： - - 无 - -- 返回值： - - | 类型 | 说明 | - | :------ | :--------------------------- | - | boolean | 表示当前目录项是否是套接字。 | - -- 示例： - - ```js - let dir = fileio.opendirSync(dpath); - let isSocket = dir.readSync().isSocket(); - ``` - - - -### isSymbolicLink(): boolean - -用于判断当前目录项是否是符号链接。 - -- 参数： - - 无 - -- 返回值： - - | 类型 | 说明 | - | :------ | :----------------------------- | - | boolean | 表示当前目录项是否是符号链接。 | - -- 示例： - - ```js - let dir = fileio.opendirSync(dpath); - let isSymbolicLink = dir.readSync().isSymbolicLink(); - ``` - - - -## Stream - -### createStreamSync(path:string, mode:string): Stream - -同步地获取文件流。 - -- 参数： - - | 参数名 | 类型 | 必填 | 说明 | - | ------ | ------ | ---- | ------------------------------------------------------------ | - | path | string | 是 | 文件路径。 | - | mode | string | 是 | 文件访问模式，以文本方式打开文件可给定如下选项，如果要以二进制形式打开，需要在模式字符串的末尾或两个字符中间加上“b”。
r: 打开只读文件；文件必须存在。
w: 打开只写空文件；若文件已存在则舍弃原有文件内容，否则建立该文件。
a: 打开只写文件；若文件不存在，创建新文件，否则在文件末尾追加数据。
r+: 打开可读写文件；文件必须存在。
w+: 打开可读写空文件；若文件已存在则舍弃原有文件内容，否则建立该文件。
a+: 打开可读写文件；若文件不存在，创建新文件，否则在文件末尾追加数据。 | - -- 返回值： - - | 类型 | 说明 | - | :----- | :----------- | - | Stream | 表示文件流。 | - -- 示例： - - ```js - let ss = fileio.createStreamSync(path, "r+"); - ``` - - - -### fdopenStreamSync(fd:number, mode:string):Stream - -同步地将文件描述符转为文件流。 - -- 参数： - - | 参数名 | 类型 | 必填 | 说明 | - | ------ | ------ | ---- | ------------------------------------------------------------ | - | fd | number | 是 | 已打开文件的文件描述符。 | - | mode | string | 是 | 文件访问模式，以文本方式打开文件可给定如下选项，如果要以二进制形式打开，需要在模式字符串的末尾或两个字符中间加上“b”。
r: 打开只读文件；文件必须存在。
w: 打开只写空文件；若文件已存在则舍弃原有文件内容，否则建立该文件。
a: 打开只写文件；若文件不存在，创建新文件，否则在文件末尾追加数据。
r+: 打开可读写文件；文件必须存在。
w+: 打开可读写空文件；若文件已存在则舍弃原有文件内容，否则建立该文件。
a+: 打开可读写文件；若文件不存在，创建新文件，否则在文件末尾追加数据。 | - -- 返回值： - - | 类型 | 说明 | - | :----- | :----------- | - | Stream | 表示文件流。 | - -- 示例： - - ```js - let fd = fileio.openSync(path, 0o2); - let ss = fileio.fdopenStreamSync(fd, "r+"); - ``` - - - -### writeSync(buffer: ArrayBuffer | string, options?:Object):number - -同步地向文件流写入数据。 - -- 参数： - - | 参数名 | 类型 | 必填 | 说明 | - | ------- | -------------------- | ---- | ------------------------------------------------------------ | - | buffer | ArrayBuffer \|string | 是 | 待写入的数据，可来自缓冲区或字符串。 | - | options | object | 否 | 支持如下选项：
offset，number类型，表示期望写入数据的位置相对于数据首地址的偏移。可选，默认为0。
length，number类型，表示期望写入数据的长度。可选，默认缓冲区长度减去偏移长度。
position，number类型，表示期望写入文件的位置。可选，默认从当前位置开始写。
encoding，string类型，当数据是 string 类型时有效，表示数据的编码方式，默认 'utf-8'，仅支持 'utf-8'。 | - -- 返回值： - - | 类型 | 说明 | - | :----- | :--------------- | - | number | 实际写入的长度。 | - -- 示例： - - ```js - let ss = fileio.createStreamSync(path, "r+"); - let writeLen = ss.writeSync('hello, world'); - ``` - - - -### flushSync():void - -同步地刷新文件流的输出缓冲区。 - -- 参数： - - 无 - -- 返回值： - - 无 - -- 示例： - - ```js - let ss = fileio.createStreamSync(path, "r+"); - let writeLen = ss.writeSync('hello, world'); - ss.flushSync(); - ``` - - - -### readSync(buffer: ArrayBuffer, options?:Object):number - -同步地从文件流读取数据。 - -- 参数： - - | 参数名 | 类型 | 必填 | 说明 | - | ------- | ----------- | ---- | ------------------------------------------------------------ | - | buffer | ArrayBuffer | 是 | 用于读取数据的缓冲区。 | - | options | Object | 否 | 支持如下选项：
offset，number 类型，表示将数据读取到缓冲区的位置，即相对于缓冲区首地址的偏移。可选，默认为0。
length，number 类型，表示期望读取数据的长度。可选，默认缓冲区长度减去偏移长度。
position，number 类型，表示期望读取文件的位置。可选，默认从当前位置开始读。 | - -- 返回值： - - | 类型 | 说明 | - | :----- | :--------------- | - | number | 实际读取的长度。 | - -- 示例： - - ```js - let ss = fileio.createStreamSync(path, "r+"); - let buf = new ArrayBuffer(4096); - let readLen = fileio.readSync(buf); - console.log(String.fromCharCode.apply(null, new Uint8Array(buf))); - ``` - - - -### closeSync():void - -同步地关闭文件流。 - -- 参数： - - 无 - -- 返回值： - - 无 - -- 示例： - - ```js - let ss = fileio.createStreamSync(path, "r+"); - ss.closeSync(); - ``` - diff --git "a/zh-cn/application-dev/js-reference/\346\227\245\345\277\227\346\211\223\345\215\260.md" "b/zh-cn/application-dev/js-reference/\346\227\245\345\277\227\346\211\223\345\215\260.md" deleted file mode 100755 index b6c69127ca2e878ca7b520b60c09cb9b63cbee33..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/js-reference/\346\227\245\345\277\227\346\211\223\345\215\260.md" +++ /dev/null @@ -1,58 +0,0 @@ -# 日志打印 - -- [导入模块](#zh-cn_topic_0000001058460515_s56d19203690d4782bfc74069abb6bd71) -- [权限列表](#zh-cn_topic_0000001058460515_section11257113618419) -- [日志分类](#zh-cn_topic_0000001058460515_s298a3cf59a3b470dbb0742706102ced7) - -## 导入模块 - -无需导入。 - -## 权限列表 - -无 - -## 日志分类 - -打印一段文本信息，console.debug|log|info|warn|error\(message\) - -- 参数 - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

message

-

string

-

是

-

表示要打印的文本信息。

-
- -- 示例 - - ``` - var versionCode = 1; - console.info('Hello World. The current version code is ' + versionCode); - ``` - - 在DevEco Studio的底部，切换到“HiLog”窗口。选择当前的设备及进程，日志级别选择Info，搜索内容设置为“Hello World”。此时窗口仅显示符合条件的日志，效果如图所示： - - ![](figures/打印日志.png) - - >![](public_sys-resources/icon-note.gif) **说明：** - >console.log\(\)打印的是debug级别日志信息。 - - diff --git "a/zh-cn/application-dev/js-reference/\346\240\205\346\240\274\347\273\204\344\273\266.md" "b/zh-cn/application-dev/js-reference/\346\240\205\346\240\274\347\273\204\344\273\266.md" deleted file mode 100644 index 2f59e15b81888a524f45bcb7ba81f636be3d92e5..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/js-reference/\346\240\205\346\240\274\347\273\204\344\273\266.md" +++ /dev/null @@ -1,11 +0,0 @@ -# 栅格组件 - -- **[基本概念](基本概念.md)** - -- **[grid-container](grid-container.md)** - -- **[grid-row](grid-row.md)** - -- **[grid-col](grid-col.md)** - - diff --git "a/zh-cn/application-dev/js-reference/\346\241\206\346\236\266\350\257\264\346\230\216.md" "b/zh-cn/application-dev/js-reference/\346\241\206\346\236\266\350\257\264\346\230\216.md" deleted file mode 100755 index 361c165503c2543511ce9e0d13b65dccf83e8328..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/js-reference/\346\241\206\346\236\266\350\257\264\346\230\216.md" +++ /dev/null @@ -1,11 +0,0 @@ -# 框架说明 - -- **[文件组织](文件组织.md)** - -- **[js标签配置](js标签配置.md)** - -- **[app.js](app-js.md)** - -- **[语法](语法.md)** - - diff --git "a/zh-cn/application-dev/js-reference/\347\224\265\346\261\240\345\222\214\345\205\205\347\224\265\345\261\236\346\200\247.md" "b/zh-cn/application-dev/js-reference/\347\224\265\346\261\240\345\222\214\345\205\205\347\224\265\345\261\236\346\200\247.md" deleted file mode 100644 index 49e0ef41cca03b62318e1a1d6d85b9e1a4b0fc22..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/js-reference/\347\224\265\346\261\240\345\222\214\345\205\205\347\224\265\345\261\236\346\200\247.md" +++ /dev/null @@ -1,251 +0,0 @@ -# 电池和充电属性 - -- [导入模块](#zh-cn_topic_0000001100730486_section199443271307) -- [BatteryInfo](#zh-cn_topic_0000001100730486_section1853612361618) -- [枚举列表](#zh-cn_topic_0000001100730486_section14572171519166) -- [BatteryPluggedType](#zh-cn_topic_0000001100730486_section1861134715488) -- [BatteryChargeState](#zh-cn_topic_0000001100730486_section629045815408) -- [BatteryHealthState](#zh-cn_topic_0000001100730486_section1636311513419) - -## 导入模块 - -``` -import batteryInfo from '@ohos.batteryinfo.d.ts' -``` - -## BatteryInfo - -描述电池信息。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

读写属性

-

类型

-

描述

-

batterySOC

-

只读

-

number

-

表示当前设备剩余电池容量。

-

chargingStatus

-

只读

-

BatteryChargeState

-

表示当前设备电池的充电状态。

-

healthStatus

-

只读

-

BatteryHealthState

-

表示当前设备电池的健康状态。

-

pluggedType

-

只读

-

BatteryPluggedType

-

表示当前设备连接的充电器类型。

-

voltage

-

只读

-

number

-

表示当前设备电池的电压。

-

technology

-

只读

-

string

-

表示当前设备电池的技术型号。

-

batteryTemperature

-

只读

-

number

-

表示当前设备电池的温度。

-
- -**示例**： - -``` -import batteryInfo from '@ohos.batteryInfo'; -var batterySoc = batteryInfo.batterySOC; -``` - -## 枚举列表 - -## BatteryPluggedType - -用于表示连接的充电器类型。 - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

默认值

-

描述

-

NONE

-

0

-

表示连接充电器类型未知。

-

AC

-

1

-

表示连接的充电器类型为交流充电器。

-

USB

-

2

-

表示连接的充电器类型为USB。

-

WIRELESS

-

3

-

表示连接的充电器类型为无线充电器。

-
- -## BatteryChargeState - -用于表示电池充电状态。 - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

默认值

-

描述

-

NONE

-

0

-

表示电池充电状态未知。

-

ENABLE

-

1

-

表示电池充电状态为使能状态。

-

DISABLE

-

2

-

表示电池充电状态为停止状态。

-

FULL

-

3

-

表示电池充电状态为已充满状态。

-
- -## BatteryHealthState - -用于表示电池的健康状态。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

默认值

-

描述

-

UNKNOWN

-

0

-

表示电池健康状态未知。

-

GOOD

-

1

-

表示电池健康状态为正常。

-

OVERHEAT

-

2

-

表示电池健康状态为过热。

-

OVERVOLTAGE

-

3

-

表示电池健康状态为过压。

-

COLD

-

4

-

表示电池健康状态为低温。

-

DEAD

-

5

-

表示电池健康状态为僵死状态。

-
- diff --git "a/zh-cn/application-dev/js-reference/\347\224\273\345\270\203\347\273\204\344\273\266.md" "b/zh-cn/application-dev/js-reference/\347\224\273\345\270\203\347\273\204\344\273\266.md" deleted file mode 100755 index ff1cf6120b6147a2edaaf27f2379111b89cdafa7..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/js-reference/\347\224\273\345\270\203\347\273\204\344\273\266.md" +++ /dev/null @@ -1,13 +0,0 @@ -# 画布组件 - -- **[canvas组件](canvas组件.md)** - -- **[CanvasRenderingContext2D对象](CanvasRenderingContext2D对象.md)** - -- **[Image对象](Image对象.md)** - -- **[CanvasGradient对象](CanvasGradient对象.md)** - -- **[ImageData对象](ImageData对象.md)** - - diff --git "a/zh-cn/application-dev/js-reference/\347\237\255\344\277\241\345\217\221\351\200\201.md" "b/zh-cn/application-dev/js-reference/\347\237\255\344\277\241\345\217\221\351\200\201.md" deleted file mode 100755 index 5f399841c018bdb97a1440fa34ae172a32796bb9..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/js-reference/\347\237\255\344\277\241\345\217\221\351\200\201.md" +++ /dev/null @@ -1,924 +0,0 @@ -# 短信服务 - -- [导入模块](#section111401036143) -- [sms.createMessage](#section3831173019331) -- [sms.createMessage](#section9796242123511) -- [sms.sendMessage](#section128401423810) -- [sms.getDefaultSmsSlotId7+](#section46193383478) -- [sms.getDefaultSmsSlotId7+](#section19981626114817) -- [sms.setSmscAddr7+](#section155849574485) -- [sms.setSmscAddr7+](#section7801426144910) -- [sms.getSmscAddr7+](#section347174613494) -- [sms.getSmscAddr7+](#section1178428175016) -- [ShortMessage](#section345181318300) -- [ShortMessageClass](#section141712166453) -- [SendMessageOptions](#section12262183471518) -- [ISendShortMessageCallback](#section16646146115317) -- [IDeliveryShortMessageCallback](#section12183749531) -- [SendSmsResult](#section13290132311575) - ->**说明：** -> ->标记7+的表示从API Version 7开始支持，未标记的表示从API Version 6开始支持。 - -## 导入模块 - -``` -import sms from '@ohos.telephony.sms'; -``` - -## sms.createMessage - -createMessage\(pdu: Array, specification: string, callback: AsyncCallback\): void - -根据协议数据单元（PDU）和指定的短信协议创建短信实例，使用callback方式作为异步方法。 - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

pdu

-

Array<number>

-

是

-

协议数据单元，从收到的信息中获取。

-

specification

-

string

-

是

-

短信协议类型。

-
  • 3gpp表示GSM/UMTS/LTE SMS
  • 3gpp2表示CDMA SMS
-

callback

-

AsyncCallback<ShortMessage>

-

是

-

回调函数。

-
- -- 示例 - - ``` - let specification = '3gpp'; - let pdu = [0x08, 0x91, ...]; - sms.createMessage(pdu, specification, (err, data) => { - console.log(`callback: err->${JSON.stringify(err)}, data->${JSON.stringify(data)}`); - }); - ``` - - -## sms.createMessage - -createMessage\(pdu: Array, specification: string\): Promise - -根据协议数据单元（PDU）和指定的短信协议创建短信实例，使用Promise方式作为异步方法。 - -- 参数 - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

pdu

-

Array<number>

-

是

-

协议数据单元，从收到的信息中获取。

-

specification

-

string

-

是

-

短信协议类型。

-
  • 3gpp表示GSM/UMTS/LTE SMS
  • 3gpp2表示CDMA SMS
-
- -- 返回值 - - - - - - - - - - -

类型

-

说明

-

Promise<ShortMessage>

-

以Promise形式返回创建的短信实例。

-
- -- 示例 - - ``` - let specification = '3gpp'; - let pdu = [0x08, 0x91, ...]; - let promise = sms.createMessage(pdu, specification); - promise.then(data => { - console.log(`createMessage success, promise: data->${JSON.stringify(data)}`); - }).catch(err => { - console.error(`createMessage fail, promise: err->${JSON.stringify(err)}`); - }); - ``` - - -## sms.sendMessage - -sendMessage\(options: SendMessageOptions\): void - -发送短信。 - -需要ohos.permission.SEND\_MESSAGES权限。 - -- 参数 - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

options

-

SendMessageOptions

-

是

-

发送短信的参数和回调，参考SendMessageOptions。

-
- -- 示例 - - ``` - let sendCallback = function (err, data) { - console.log(`sendCallback: err->${JSON.stringify(err)}, data->${JSON.stringify(data)}`); - } - let deliveryCallback = function (err, data) { - console.log(`deliveryCallback: err->${JSON.stringify(err)}, data->${JSON.stringify(data)}`); - } - let slotId = 0; - let content = '短信内容'; - let destinationHost = '+861xxxxxxxxxx'; - let serviceCenter = '+861xxxxxxxxxx'; - let destinationPort = 1000; - let options = {slotId, content, destinationHost, serviceCenter, destinationPort, sendCallback, deliveryCallback}; - sms.sendMessage(options); - ``` - - -## sms.getDefaultSmsSlotId7+ - -getDefaultSmsSlotId\(callback: AsyncCallback\): void - -获取发送短信的默认SIM卡槽ID，使用callback方式作为异步方法。 - -- 参数 - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

callback

-

AsyncCallback<number>

-

是

-

回调函数。

-
  • 0：卡槽1
  • 1：卡槽2
-
- -- 示例 - - ``` - sms.getDefaultSmsSlotId((err, data) => { - console.log(`callback: err->${JSON.stringify(err)}, data->${JSON.stringify(data)}`); - }); - ``` - - -## sms.getDefaultSmsSlotId7+ - -getDefaultSmsSlotId\(\): Promise - -获取发送短信的默认SIM卡槽ID，使用Promise方式作为异步方法。 - -- 返回值 - - - - - - - - - - -

类型

-

说明

-

Promise<number>

-

以Promise形式返回发送短信的默认SIM卡：

-
  • 0：卡槽1
  • 1：卡槽2
-
- -- 示例 - - ``` - let promise = call.getDefaultSmsSlotId(); - promise.then(data => { - console.log(`getDefaultSmsSlotId success, promise: data->${JSON.stringify(data)}`); - }).catch(err => { - console.error(`getDefaultSmsSlotId fail, promise: err->${JSON.stringify(err)}`); - }); - ``` - - -## sms.setSmscAddr7+ - -setSmscAddr\(slotId: number, smscAddr: string, callback: AsyncCallback\): void - -设置短信服务中心（SMSC）地址，使用callback方式作为异步方法。 - -需要ohos.permission.SET\_TELEPHONY\_STATE权限，该权限为系统权限。 - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

slotId

-

number

-

是

-

SIM卡槽ID：

-
  • 0：卡槽1
  • 1：卡槽2
-

smscAddr

-

string

-

是

-

短信服务中心地址。

-

callback

-

AsyncCallback<void>

-

是

-

回调函数。

-
- -- 示例 - - ``` - let slotId = 0; - let smscAddr = '+861xxxxxxxxxx'; - sms.setSmscAddr(slotId, smscAddr, (err,data) => { - console.log(`callback: err->${JSON.stringify(err)}, data->${JSON.stringify(data)}`); - }); - ``` - - -## sms.setSmscAddr7+ - -setSmscAddr\(slotId: number, smscAddr: string\): Promise - -设置短信服务中心（SMSC）地址，使用Promise方式作为异步方法。 - -需要ohos.permission.SET\_TELEPHONY\_STATE权限，该权限为系统权限。 - -- 参数 - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

slotId

-

number

-

是

-

SIM卡槽ID：

-
  • 0：卡槽1
  • 1：卡槽2
-

smscAddr

-

string

-

是

-

短信服务中心地址。

-
- -- 返回值 - - - - - - - - - - -

类型

-

说明

-

Promise<void>

-

以Promise形式异步返回设置结果。

-
- -- 示例 - - ``` - let slotId = 0; - let smscAddr = '+861xxxxxxxxxx'; - let promise = sms.setSmscAddr(slotId, smscAddr); - promise.then(data => { - console.log(`setSmscAddr success, promise: data->${JSON.stringify(data)}`); - }).catch(err => { - console.error(`setSmscAddr fail, promise: err->${JSON.stringify(err)}`); - }); - ``` - - -## sms.getSmscAddr7+ - -getSmscAddr\(slotId: number, callback: AsyncCallback\): void - -获取短信服务中心（SMSC）地址，使用callback方式作为异步方法。 - -需要ohos.permission.GET\_TELEPHONY\_STATE权限，该权限为系统权限。 - -- 参数 - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

slotId

-

number

-

是

-

SIM卡槽ID：

-
  • 0：卡槽1
  • 1：卡槽2
-

callback

-

AsyncCallback<string>

-

是

-

回调函数。

-
- -- 示例 - - ``` - let slotId = 0; - sms.getSmscAddr(slotId, (err, data) => { - console.log(`callback: err->${JSON.stringify(err)}, data->${JSON.stringify(data)}`); - }); - ``` - - -## sms.getSmscAddr7+ - -getSmscAddr\(slotId: number\): Promise - -获取短信服务中心（SMSC）地址，使用Promise方式作为异步方法。 - -需要ohos.permission.GET\_TELEPHONY\_STATE权限，该权限为系统权限。 - -- 参数 - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

slotId

-

number

-

是

-

SIM卡槽ID：

-
  • 0：卡槽1
  • 1：卡槽2
-
- -- 返回值 - - - - - - - - - - -

类型

-

说明

-

Promise<string>

-

以Promise形式返回获取短信服务中心地址的结果。

-
- -- 示例 - - ``` - let slotId = 0; - let promise = sms.getSmscAddr(slotId); - promise.then(data => { - console.log(`getSmscAddr success, promise: data->${JSON.stringify(data)}`); - }).catch(err => { - console.error(`getSmscAddr fail, promise: err->${JSON.stringify(err)}`); - }); - ``` - - -## ShortMessage - -短信实例 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

变量

-

类型

-

说明

-

emailAddress

-

string

-

电子邮件地址。

-

emailMessageBody

-

string

-

电子邮件正文。

-

hasReplyPath

-

boolean

-

收到的短信是否包含“TP-Reply-Path”，默认为false。

-
  • “TP-Reply-Path”：移动电话根据发送SMS消息的短消息中心进行回复。
-

isEmailMessage

-

boolean

-

收到的短信是否为电子邮件。

-

isReplaceMessage

-

boolean

-

收到的短信是否为“替换短信”，默认为false。

-
  • “替换短信”有关详细信息，参见 “3GPP TS 23.040 9.2.3.9”。
-

isSmsStatusReportMessage

-

boolean

-

当前消息是否为“短信状态报告”，默认为false。

-
  • “短信状态报告”是一种特定格式的短信，被用来从Service Center到Mobile Station传送状态报告。
-

messageClass

-

ShortMessageClass

-

短信类型。

-

pdu

-

Array<number>

-

SMS消息中的协议数据单元 （PDU）。

-

protocolId

-

number

-

发送短信时使用的协议标识。

-

scAddress

-

string

-

短消息服务中心（SMSC）地址。

-

scTimestamp

-

number

-

SMSC时间戳。

-

status

-

number

-

SMS-STATUS-REPORT消息中的短信状态指示短信服务中心（SMSC）发送的短信状态。

-

userRawData

-

Array<number>

-

除数据头外的用户数据。

-

visibleMessageBody

-

string

-

短信正文。

-

visibleRawAddress

-

string

-

发送者地址。

-
- -## ShortMessageClass - -短信类型。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

变量

-

值

-

说明

-

UNKNOWN

-

0

-

未知类型。

-

INSTANT_MESSAGE

-

1

-

即时消息，收到后立即显示。

-

OPTIONAL_MESSAGE

-

2

-

存储在设备或SIM卡上的短信。

-

SIM_MESSAGE

-

3

-

包含SIM卡信息的短信，需要存储在SIM卡中。

-

FORWARD_MESSAGE

-

4

-

要转发到另一台设备的短信。

-
- -## SendMessageOptions - -发送短信的参数和回调。 - -根据SendMessageOptions中的可选参数content的值判断短信类型。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

slotId

-

number

-

是

-

用于发送短信的SIM卡槽ID：

-
  • 0：卡槽1
  • 1：卡槽2
-

destinationHost

-

string

-

是

-

短信的发送地址。

-

content

-

string | Array<number>

-

是

-

如果内容是字符串，则这是一条文本短信。

-

如果内容是字节数组，则这是一条数据短信。

-

serviceCenter

-

string

-

否

-

短信中心地址。默认使用SIM卡中的短信中心地址。

-

destinationPort

-

number

-

否

-

如果发送数据消息，destinationPort 是必需的。否则是可选的。

-

sendCallback

-

AsyncCallback

-

<ISendShortMessageCallback>

-

否

-

短信发送结果回调，返回短信发送的结果，参考ISendShortMessageCallback。

-

deliveryCallback

-

AsyncCallback

-

<IDeliveryShortMessageCallback>

-

否

-

短信送达结果回调，返回短信递送报告，参考IDeliveryShortMessageCallback。

-
- -## ISendShortMessageCallback - -回调实例。返回短信发送结果、存储已发送短信的URI和是否为长短信的最后一部分。 - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

isLastPart

-

boolean

-

否

-

指定这是否是长短信的最后一部分。true表示这是长短信的最后一部分，false表示不是。默认为false。

-

result

-

SendSmsResult

-

是

-

短信发送结果。

-

url

-

string

-

是

-

存储发送短信的URI。

-
- -## IDeliveryShortMessageCallback - -回调实例。返回短信送达报告。 - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

pdu

-

Array<number>

-

是

-

短信送达报告。

-
- -## SendSmsResult - -短信发送结果。 - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

值

-

说明

-

SEND_SMS_SUCCESS

-

0

-

发送短信成功。

-

SEND_SMS_FAILURE_UNKNOWN

-

1

-

发送短信失败，原因未知。

-

SEND_SMS_FAILURE_RADIO_OFF

-

2

-

发送短信失败，原因为调制解调器关机。

-

SEND_SMS_FAILURE_SERVICE_UNAVAILABLE

-

3

-

发送短信失败，原因为网络不可用、不支持发送或接收短信。

-
diff --git "a/zh-cn/application-dev/js-reference/\347\273\204\344\273\266.md" "b/zh-cn/application-dev/js-reference/\347\273\204\344\273\266.md" deleted file mode 100755 index f03535d4e14c2a3a04e057d6bb82fb46e7892ca9..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/js-reference/\347\273\204\344\273\266.md" +++ /dev/null @@ -1,13 +0,0 @@ -# 组件 - -- **[通用](通用.md)** - -- **[容器组件](容器组件.md)** - -- **[基础组件](基础组件.md)** - -- **[画布组件](画布组件.md)** - -- **[栅格组件](栅格组件.md)** - - diff --git "a/zh-cn/application-dev/js-reference/\347\273\204\344\273\266\346\226\271\346\263\225.md" "b/zh-cn/application-dev/js-reference/\347\273\204\344\273\266\346\226\271\346\263\225.md" deleted file mode 100755 index 6414bacb1981c2d2cbc1db355af6b55da808aaae..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/js-reference/\347\273\204\344\273\266\346\226\271\346\263\225.md" +++ /dev/null @@ -1,466 +0,0 @@ -# 组件方法 - -- [this.$element\('id'\).animate\(Object, Object\)](#zh-cn_topic_0000001058670837_section844805134319) - -当组件通过id属性标识后，可以使用该id获取组件对象并调用相关组件方法。 - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

必填

-

默认值

-

返回值

-

描述

-

animate

-

-
  • Object： keyframes，用于描述动画关键帧参数
  • Object： options，用于描述动画参数
-

是

-

-

-

-

-

在组件上创建和运行动画的快捷方式。输入动画所需的keyframes和options，返回animation对象实例。

-
- -## this.$element\('_id_'\).animate\(Object, Object\) - -通过animate\(keyframes, options\)方法获得animation对象。该对象支持动画属性，动画方法和动画事件。重复多次调用animate方法时，采用replace策略，最后一次调用时传入的参数生效。 - -- keyframes - - - - - - - - - - - - -

参数

-

类型

-

说明

-

frames

-

Array<Style>

-

用于设置动画样式属性的对象列表。Style类型说明请见表1 Style类型说明。

-
- - **表 1** Style类型说明 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

默认值

-

说明

-

width

-

number

-

-

-

动画执行过程中设置到组件上的宽度值。

-

height

-

number

-

-

-

动画执行过程中设置到组件上的高度值。

-

backgroundColor

-

<color>

-

none

-

动画执行过程中设置到组件上的背景颜色。

-

opacity

-

number

-

1

-

设置到组件上的透明度（介于0到1之间）。

-

backgroundPosition

-

string

-

-

-

格式为"x y"，单位为百分号或者px。

-

第一个值是水平位置，第二个值是垂直位置。

-

如果仅规定了一个值，另一个值为 50%。

-

transformOrigin

-

string

-

'center center'

-

变换对象的中心点。

-

第一个参数表示x轴的值，可以设置为left、center、right、长度值或百分比值。

-

第二个参数表示y轴的值，可以设置为top、center、bottom、长度值或百分比值。

-

transform

-

Transform

-

-

-

设置到变换对象上的类型。

-

offset

-

number

-

-

-
  • offset值（如果提供）必须在0.0到1.0（含）之间，并以升序排列。
  • 若只有两帧，可以不填offset。
  • 若超过两帧，offset必填。
-
- - -- options - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

默认值

-

说明

-

duration

-

number

-

0

-

指定当前动画的运行时长（单位毫秒）。

-

easing

-

string

-

linear

-

描述动画的时间曲线，支持类型见表3 easing有效值说明。

-

delay

-

number

-

0

-

设置动画执行的延迟时间（默认值表示无延迟）。

-

iterations

-

number | string

-

1

-

设置动画执行的次数。number表示固定次数，Infinity枚举表示无限次数播放。

-

fill

-

string

-

none

-

指定动画开始和结束的状态：

-

none：在动画执行之前和之后都不会应用任何样式到目标上。

-

forwards：在动画结束后，目标将保留动画结束时的状态（在最后一个关键帧中定义）。

-
- - **表 2** easing有效值说明 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

值

-

描述

-

linear

-

动画线性变化。

-

ease-in

-

动画速度先慢后快，cubic-bezier(0.42, 0.0, 1.0, 1.0)。

-

ease-out

-

动画速度先快后慢，cubic-bezier(0.0, 0.0, 0.58, 1.0)。

-

ease-in-out

-

动画先加速后减速，cubic-bezier(0.42, 0.0, 0.58, 1.0)。

-

friction

-

阻尼曲线，cubic-bezier(0.2, 0.0, 0.2, 1.0)。

-

extreme-deceleration

-

急缓曲线，cubic-bezier(0.0, 0.0, 0.0, 1.0)。

-

sharp

-

锐利曲线，cubic-bezier(0.33, 0.0, 0.67, 1.0)。

-

rhythm

-

节奏曲线，cubic-bezier(0.7, 0.0, 0.2, 1.0)。

-

smooth

-

平滑曲线，cubic-bezier(0.4, 0.0, 0.4, 1.0)。

-

cubic-bezier(x1, y1, x2, y2)

-

在三次贝塞尔函数中定义动画变化过程，入参的x和y值必须处于0-1之间。

-

steps(number, step-position)

-

Step曲线。

-

number必须设置，支持的类型为int。

-

step-position参数可选，支持设置start或end，默认值为end。

-
- - -- 返回值 - - animation对象支持的属性： - - - - - - - - - - - - - - - - - - - - - - - - -

属性

-

类型

-

说明

-

finished

-

boolean

-

只读，用于表示当前动画是否已播放完成。

-

pending

-

boolean

-

只读，用于表示当前动画是否处于等待其他异步操作完成的等待状态（例如启动一个延时播放的动画）。

-

playState

-

string

-

可读可写，动画的执行状态：

-
  • idle：未执行状态，包括已结束或未开始。
  • running：动画正在运行。
  • paused：动画暂停。
  • finished：动画播放完成。
-

startTime

-

number

-

可读可写，动画播放开始的预定时间，用途类似于options参数中的delay。

-
- - animation对象支持的方法： - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

方法

-

参数

-

说明

-

play

-

-

-

组件播放动画。

-

finish

-

-

-

组件完成动画。

-

pause

-

-

-

组件暂停动画。

-

cancel

-

-

-

组件取消动画。

-

reverse

-

-

-

组件倒播动画。

-
- - animation对象支持的事件： - - - - - - - - - - - - - - - - -

事件

-

说明

-

cancel

-

动画被强制取消。

-

finish

-

动画播放完成。

-

repeat

-

动画重播事件。

-
- - -- 示例代码： - - ``` - // xxx.js - import prompt from '@system.prompt'; - export default { - data : { - animation:'', - }, - onInit() { - }, - onShow() { - var options = { - duration: 1500, - easing: 'friction', - delay: 500, - fill: 'forwards', - iterations: 2, - }; - var frames = [ - {transform: {translate: '-120px -0px'}, opacity: 0.1, offset: 0.0}, - {transform: {translate: '120px 0px'}, opacity: 1.0, offset: 1.0} - ]; - this.animation = this.$element('idName').animate(frames, options); - // handle finish event - this.animation.onfinish = function() { - prompt.showToast({ - message: "The animation is finished." - }); - }; - // handle cancel event - this.animation.oncancel = function() { - prompt.showToast({ - message: "The animation is canceled." - }); - }; - // handle repeat event - this.animation.onrepeat = function() { - prompt.showToast({ - message: "The animation is repeated." - }); - }; - }, - start() { - this.animation.play(); - }, - cancel() { - this.animation.cancel(); - } - } - ``` - - ![](figures/AnimationAPI裁剪.gif) - - diff --git "a/zh-cn/application-dev/js-reference/\347\273\204\344\273\266\351\200\232\347\224\250\350\257\264\346\230\216.md" "b/zh-cn/application-dev/js-reference/\347\273\204\344\273\266\351\200\232\347\224\250\350\257\264\346\230\216.md" deleted file mode 100755 index 280364ff4c9a0ec5d7f3cd42a3340f490235754c..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/js-reference/\347\273\204\344\273\266\351\200\232\347\224\250\350\257\264\346\230\216.md" +++ /dev/null @@ -1,9 +0,0 @@ -# 组件通用说明 - -- **[通用事件](通用事件.md)** - -- **[通用属性](通用属性.md)** - -- **[通用样式](通用样式.md)** - - diff --git "a/zh-cn/application-dev/js-reference/\347\275\221\347\273\234\346\220\234\347\264\242.md" "b/zh-cn/application-dev/js-reference/\347\275\221\347\273\234\346\220\234\347\264\242.md" deleted file mode 100755 index d881b032043369aea31e241d55c84887ef2dcbdf..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/js-reference/\347\275\221\347\273\234\346\220\234\347\264\242.md" +++ /dev/null @@ -1,1159 +0,0 @@ -# Radio - -- [导入模块](#s56d19203690d4782bfc74069abb6bd71) -- [radio.getRadioTech](#section18401172810207) -- [radio.getRadioTech](#section686385662419) -- [radio.getNetworkState](#section2090641619263) -- [radio.getNetworkState](#section392520433402) -- [radio.getNetworkState](#section20661545182918) -- [radio.getNetworkSelectionMode](#section79561056114711) -- [radio.getNetworkSelectionMode](#section553074612507) -- [radio.getISOCountryCodeForNetwork7+](#section16183194320525) -- [radio.getISOCountryCodeForNetwork7+](#section56144132559) -- [radio.getSignalInformation](#section1153532721018) -- [radio.getSignalInformation](#section1859512161511) -- [radio.isRadioOn7+](#section5456161711228) -- [radio.isRadioOn7+](#section178817520243) -- [RadioTechnology](#section1072135204020) -- [SignalInformation](#section10701756164212) -- [NetworkType](#section519718112466) -- [NetworkState](#section1691213911470) -- [RegState](#section18174131911514) -- [NsaState](#section448018155317) -- [NetworkSelectionMode](#section14219361268) - ->**说明：** -> ->标记7+的表示从API Version 7开始支持，未标记的表示从API Version 6开始支持。 - - -## 导入模块 - -``` -import radio from '@ohos.telephony.radio' -``` - -## radio.getRadioTech - -getRadioTech\(slotId: number, callback: AsyncCallback<\{psRadioTech: RadioTechnology, csRadioTech: RadioTechnology\}\>\): void - -获取当前接入的CS域和PS域无线接入技术，使用callback方式作为异步方法。 - -需要ohos.permission.GET\_NETWORK\_INFO权限。 - -- 参数 - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

slotId

-

number

-

是

-

卡槽ID。

-

0：卡槽1

-

1：卡槽2

-

callback

-

AsyncCallback<{psRadioTech: RadioTechnology, csRadioTech: RadioTechnology}>

-

是

-

回调函数。

-
- -- 示例 - - ``` - let slotId = 0; - radio.getRadioTech(slotId, (err, data) =>{ - console.log(`callback: err->${JSON.stringify(err)}, data->${JSON.stringify(data)}`); - }); - ``` - - -## radio.getRadioTech - -getRadioTech\(slotId: number\): Promise<\{psRadioTech: RadioTechnology, csRadioTech: RadioTechnology\}\> - -获取当前接入的CS域和PS域无线接入技术，使用Promise方式作为异步方法。 - -需要ohos.permission.GET\_NETWORK\_INFO权限。 - -- 参数 - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

slotId

-

number

-

是

-

卡槽ID。

-

0：卡槽1

-

1：卡槽2

-
- -- 返回值 - - - - - - - - - - -

类型

-

说明

-

Promise<{psRadioTech: RadioTechnology, csRadioTech: RadioTechnology}>

-

以Promise形式返回获取当前接入的CS域和PS域技术。

-
- -- 示例 - - ``` - let slotId = 0; - let promise = radio.getRadioTech(slotId); - promise.then(data => { - console.log(`getRadioTech success, data->${JSON.stringify(data)}`); - }).catch(err => { - console.log(`getRadioTech fail, err->${JSON.stringify(err)}`); - }); - ``` - - -## radio.getNetworkState - -getNetworkState\(callback: AsyncCallback\): void - -获取网络状态，使用callback方式作为异步方法。 - -需要ohos.permission.GET\_NETWORK\_INFO权限。 - -- 参数 - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

callback

-

AsyncCallback<NetworkState>

-

是

-

回调函数。

-
- -- 示例 - - ``` - radio.getNetworkState((err, data) =>{ - console.log(`callback: err->${JSON.stringify(err)}, data->${JSON.stringify(data)}`); - }); - ``` - - -## radio.getNetworkState - -getNetworkState\(slotId: number, callback: AsyncCallback\): void - -获取网络状态，使用callback方式作为异步方法。 - -需要ohos.permission.GET\_NETWORK\_INFO权限。 - -- 参数 - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

slotId

-

number

-

是

-

卡槽ID。

-

0：卡槽1

-

1：卡槽2

-

callback

-

AsyncCallback<NetworkState>

-

是

-

回调函数。

-
- -- 示例 - - ``` - let slotId = 0; - radio.getNetworkState(slotId, (err, data) => { - console.log(`callback: err->${JSON.stringify(err)}, data->${JSON.stringify(data)}`); - }); - ``` - - -## radio.getNetworkState - -getNetworkState\(slotId?: number\): Promise - -获取网络状态，使用Promise方式作为异步方法。 - -需要ohos.permission.GET\_NETWORK\_INFO权限。 - -- 参数 - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

slotId

-

number

-

否

-

卡槽ID。

-

0：卡槽1

-

1：卡槽2

-
- -- 返回值 - - - - - - - - - - -

类型

-

说明

-

Promise<NetworkState>

-

以Promise形式返回网络状态。

-
- -- 示例 - - ``` - let slotId = 0; - let promise = radio.getNetworkState(slotId); - promise.then(data => { - console.log(`getNetworkState success, promise: data->${JSON.stringify(data)}`); - }).catch(err => { - console.log(`getNetworkState fail, promise: err->${JSON.stringify(err)}`); - }); - ``` - - -## radio.getNetworkSelectionMode - -getNetworkSelectionMode\(slotId: number, callback: AsyncCallback\): void - -获取当前选网模式，使用callback方式作为异步方法。 - -- 参数 - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

slotId

-

number

-

是

-

卡槽ID。

-

0：卡槽1

-

1：卡槽2

-

callback

-

AsyncCallback<NetworkSelectionMode>

-

是

-

回调函数。

-
- -- 示例 - - ``` - let slotId = 0; - radio.getNetworkSelectionMode(slotId, (err, data) => { - console.log(`callback: err->${JSON.stringify(err)}, data->${JSON.stringify(data)}`); - }); - ``` - - -## radio.getNetworkSelectionMode - -getNetworkSelectionMode\(slotId: number\): Promise - -获取当前选网模式，使用Promise方式作为异步方法。 - -- 参数 - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

slotId

-

number

-

是

-

卡槽ID。

-

0：卡槽1

-

1：卡槽2

-
- -- 返回值 - - - - - - - - - - -

类型

-

说明

-

Promise<NetworkSelectionMode>

-

以Promise形式返回当前选网模式。

-
- -- 示例 - - ``` - let slotId = 0; - let promise = radio.getNetworkSelectionMode(slotId); - promise.then(data => { - console.log(`getNetworkSelectionMode success, promise: data->${JSON.stringify(data)}`); - }).catch(err => { - console.log(`getNetworkSelectionMode fail, promise: err->${JSON.stringify(err)}`); - }); - ``` - - -## radio.getISOCountryCodeForNetwork7+ - -getISOCountryCodeForNetwork\(slotId: number, callback: AsyncCallback\): void - -获取注册网络所在国家的ISO国家码，使用callback方式作为异步方法。 - -- 参数 - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

slotId

-

number

-

是

-

卡槽ID。

-

0：卡槽1

-

1：卡槽2

-

callback

-

AsyncCallback<string>

-

是

-

回调函数。返回国家码，例如：CN（中国）。

-
- -- 示例 - - ``` - let slotId = 0; - radio.getISOCountryCodeForNetwork(slotId, (err, data) => { - console.log(`callback: err->${JSON.stringify(err)}, data->${JSON.stringify(data)}`); - }); - ``` - - -## radio.getISOCountryCodeForNetwork7+ - -getISOCountryCodeForNetwork\(slotId: number\): Promise - -获取注册网络所在国家的ISO国家码，使用Promise方式作为异步方法。 - -- 参数 - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

slotId

-

number

-

是

-

卡槽ID。

-

0：卡槽1

-

1：卡槽2

-
- -- 返回值 - - - - - - - - - - -

类型

-

说明

-

Promise<string>

-

以Promise形式返回注册网络所在国家的ISO国家码，例如CN（中国）。

-
- -- 示例 - - ``` - let slotId = 0; - let promise = radio.getISOCountryCodeForNetwork(slotId); - promise.then(data => { - console.log(`getISOCountryCodeForNetwork success, promise: data->${JSON.stringify(data)}`); - }).catch(err => { - console.log(`getISOCountryCodeForNetwork fail, promise: err->${JSON.stringify(err)}`); - }); - ``` - - -## radio.getSignalInformation - -getSignalInformation\(slotId: number, callback: AsyncCallback\>\): void - -获取指定SIM卡槽对应的注册网络信号强度信息列表，使用callback方式作为异步方法。 - -- 参数 - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

slotId

-

number

-

是

-

卡槽ID。

-

0：卡槽1

-

1：卡槽2

-

callback

-

AsyncCallback<Array<SignalInformation>>

-

是

-

回调函数，返回SignalInformation对象的数组。

-
- -- 示例 - - ``` - let slotId = 0; - radio.getSignalInformation(slotId, (err, data) => { - console.log(`callback: err->${JSON.stringify(err)}, data->${JSON.stringify(data)}`); - }); - ``` - - -## radio.getSignalInformation - -getSignalInformation\(slotId: number\): Promise\> - -获取指定SIM卡槽对应的注册网络信号强度信息列表，使用Promise方式作为异步方法。 - -- 参数 - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

slotId

-

number

-

是

-

卡槽ID。

-

0：卡槽1

-

1：卡槽2

-
- -- 返回值 - - - - - - - - - - -

类型

-

说明

-

Promise<Array<SignalInformation>>

-

以Promise形式返回网络信号强度SignalInformation对象的数组。

-
- -- 示例 - - ``` - let slotId = 0; - let promise = radio.getSignalInformation(slotId); - promise.then(data => { - console.log(`getSignalInformation success, promise: data->${JSON.stringify(data)}`); - }).catch(err => { - console.error(`getSignalInformation fail, promise: err->${JSON.stringify(err)}`); - }); - ``` - - -## radio.isRadioOn7+ - -isRadioOn\(callback: AsyncCallback\): void - -判断Radio是否打开，使用callback方式作为异步方法。 - -需要ohos.permission.GET\_NETWORK\_INFO权限。 - -- 参数 - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

callback

-

AsyncCallback<boolean>

-

是

-

回调函数。

-

true：Radio打开

-

false：Radio关闭

-
- -- 示例 - - ``` - radio.isRadioOn((err, data) => { - console.log(`callback: err->${JSON.stringify(err)}, data->${JSON.stringify(data)}`); - }); - ``` - - -## radio.isRadioOn7+ - -isRadioOn\(\): Promise - -判断Radio是否打开，使用Promise方式作为异步方法。 - -需要ohos.permission.GET\_NETWORK\_INFO权限。 - -- 返回值 - - - - - - - - - - -

类型

-

说明

-

Promise<boolean>

-

以Promise形式返回判断Radio是否打开的结果。

-

true：Radio打开

-

false：Radio关闭

-
- -- 示例 - - ``` - let promise = radio.isRadioOn(); - promise.then(data => { - console.log(`isRadioOn success, promise: data->${JSON.stringify(data)}`); - }).catch(err => { - console.error(`isRadioOn fail, promise: err->${JSON.stringify(err)}`); - }); - ``` - - -## RadioTechnology - -无线接入技术。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

变量

-

值

-

说明

-

RADIO_TECHNOLOGY_UNKNOWN

-

0

-

未知无线接入技术（RAT）。

-

RADIO_TECHNOLOGY_GSM

-

1

-

无线接入技术GSM（Global System For Mobile Communication）。

-

RADIO_TECHNOLOGY_1XRTT

-

2

-

无线接入技术1XRTT（Single-Carrier Radio Transmission Technology）。

-

RADIO_TECHNOLOGY_WCDMA

-

3

-

无线接入技术WCDMA（Wideband Code Division Multiple Access）。

-

RADIO_TECHNOLOGY_HSPA

-

4

-

无线接入技术HSPA（High Speed Packet Access）。

-

RADIO_TECHNOLOGY_HSPAP

-

5

-

无线接入技术HSPAP（High Speed packet access (HSPA+) ）。

-

RADIO_TECHNOLOGY_TD_SCDMA

-

6

-

无线接入技术TDSCDMA（TimeDivision-Synchronous Code Division Multiple Access）。

-

RADIO_TECHNOLOGY_EVDO

-

7

-

无线接入技术EVDO（Evolution、Data Only）。

-

RADIO_TECHNOLOGY_EHRPD

-

8

-

无线接入技术EHRPD（Evolved High Rate Package Data）。

-

RADIO_TECHNOLOGY_LTE

-

9

-

无线接入技术LTE（Long Term Evolution）。

-

RADIO_TECHNOLOGY_LTE_CA

-

10

-

无线接入技术LTE_CA（Long Term Evolution_Carrier Aggregation）。

-

RADIO_TECHNOLOGY_IWLAN

-

11

-

无线接入技术IWLAN（Industrial Wireless LAN）。

-

RADIO_TECHNOLOGY_NR

-

12

-

无线接入技术NR（New Radio）。

-
- -## SignalInformation - -网络信号强度信息对象。 - - - - - - - - - - - - - - - - -

属性名

-

类型

-

说明

-

signalType

-

NetworkType

-

网络信号强度类型。

-

signalLevel

-

number

-

网络信号强度等级。

-
- -## NetworkType - -网络类型。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

变量

-

值

-

说明

-

NETWORK_TYPE_UNKNOWN

-

0

-

未知网络类型。

-

NETWORK_TYPE_GSM

-

1

-

网络类型为GSM（Global System For Mobile Communication）。

-

NETWORK_TYPE_CDMA

-

2

-

网络类型为CDMA（Code Division Multiple Access）。

-

NETWORK_TYPE_WCDMA

-

3

-

网络类型为WCDMA（Wideband Code Division Multiple Access）。

-

NETWORK_TYPE_TDSCDMA

-

4

-

网络类型为TDSCDMA（TimeDivision-Synchronous Code Division Multiple Access）。

-

NETWORK_TYPE_LTE

-

5

-

网络类型为LTE（Long Term Evolution）。

-

NETWORK_TYPE_NR

-

6

-

网络类型为5G NR（New Radio）。

-
- - -## NetworkState - -网络注册状态。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

变量

-

类型

-

说明

-

longOperatorName

-

string

-

注册网络的长运营商名称。

-

shortOperatorName

-

string

-

注册网络的短运营商名称。

-

plmnNumeric

-

string

-

注册网络的PLMN码。

-

isRoaming

-

boolean

-

是否处于漫游状态。

-

regState

-

RegState

-

设备的网络注册状态。

-

nsaState

-

NsaState

-

设备的NSA网络注册状态。

-

isCaActive

-

boolean

-

CA的状态。

-

isEmergency

-

boolean

-

此设备是否只允许拨打紧急呼叫。

-
- -## RegState - -网络注册状态。 - - - - - - - - - - - - - - - - - - - - - - - - -

变量

-

值

-

说明

-

REG_STATE_NO_SERVICE

-

0

-

设备不能使用任何服务。

-

REG_STATE_IN_SERVICE

-

1

-

设备可以正常使用业务。

-

REG_STATE_EMERGENCY_CALL_ONLY

-

2

-

设备只能使用紧急呼叫业务。

-

REG_STATE_POWER_OFF

-

3

-

蜂窝无线电已关闭。

-
- -## NsaState - -非独立组网状态。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

变量

-

值

-

说明

-

NSA_STATE_NOT_SUPPORT

-

1

-

设备在不支持NSA的LTE小区下处于空闲状态或连接状态。

-

NSA_STATE_NO_DETECT

-

2

-

在支持NSA但不支持NR覆盖检测的LTE小区下，设备处于空闲状态。

-

NSA_STATE_CONNECTED_DETECT

-

3

-

设备在LTE小区下连接到LTE网络支持NSA和NR覆盖检测。

-

NSA_STATE_IDLE_DETECT

-

4

-

支持NSA和NR覆盖检测的LTE小区下设备处于空闲状态。

-

NSA_STATE_DUAL_CONNECTED

-

5

-

设备在支持NSA的LTE小区下连接到LTE + NR网络。

-

NSA_STATE_SA_ATTACHED

-

6

-

设备在5GC附着时在NG-RAN小区下空闲或连接到NG-RAN小区。

-
- -## NetworkSelectionMode - -选网模式。 - - - - - - - - - - - - - - - - - - - - - -

变量

-

值

-

说明

-

NETWORK_SELECTION_UNKNOWN

-

0

-

未知选网模式。

-

NETWORK_SELECTION_AUTOMATIC

-

1

-

自动选网模式。

-

NETWORK_SELECTION_MANUAL

-

2

-

手动选网模式。

-
\ No newline at end of file diff --git "a/zh-cn/application-dev/js-reference/\350\207\252\345\256\232\344\271\211\347\273\204\344\273\266.md" "b/zh-cn/application-dev/js-reference/\350\207\252\345\256\232\344\271\211\347\273\204\344\273\266.md" deleted file mode 100755 index 70e87050b60b7d9042a8832f96c2ee79c8107ee6..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/js-reference/\350\207\252\345\256\232\344\271\211\347\273\204\344\273\266.md" +++ /dev/null @@ -1,11 +0,0 @@ -# 自定义组件 - -- **[基本用法](基本用法.md)** - -- **[自定义事件](自定义事件.md)** - -- **[Props](Props.md)** - -- **[事件参数](事件参数.md)** - - diff --git "a/zh-cn/application-dev/js-reference/\350\256\276\347\275\256\347\263\273\347\273\237\345\261\217\345\271\225\344\272\256\345\272\246.md" "b/zh-cn/application-dev/js-reference/\350\256\276\347\275\256\347\263\273\347\273\237\345\261\217\345\271\225\344\272\256\345\272\246.md" deleted file mode 100644 index 9701d2f562dc47158d6b0e63c014e9c2e2a8162b..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/js-reference/\350\256\276\347\275\256\347\263\273\347\273\237\345\261\217\345\271\225\344\272\256\345\272\246.md" +++ /dev/null @@ -1,54 +0,0 @@ -# 设置系统屏幕亮度 - -- [导入模块](#zh-cn_topic_0000001101127828_s56d19203690d4782bfc74069abb6bd71) -- [方法](#zh-cn_topic_0000001101127828_section1998783153219) -- [setValue\(value: number\)](#zh-cn_topic_0000001101127828_section1853612361618) - -## 导入模块 - -``` -import brightness from '@ohos.brightness.d.ts'. -``` - -## 方法 - -## setValue\(value: number\) - -设置系统的屏幕亮度。 - -**参数：** - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

value

-

number

-

是

-

亮度的值（0~255）

-
- -**返回值：** - -无 - -**示例：** - -``` -import brightness from '@ohos.brightness.d.ts' -brightness.setValue(128); -``` - diff --git "a/zh-cn/application-dev/js-reference/\350\257\255\346\263\225.md" "b/zh-cn/application-dev/js-reference/\350\257\255\346\263\225.md" deleted file mode 100755 index 7812cd0d4f78534d9823cf8489bd5490c6f54b2b..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/js-reference/\350\257\255\346\263\225.md" +++ /dev/null @@ -1,9 +0,0 @@ -# 语法 - -- **[HML语法参考](HML语法参考.md)** - -- **[CSS语法参考](CSS语法参考.md)** - -- **[JS语法参考](JS语法参考.md)** - - diff --git "a/zh-cn/application-dev/js-reference/\350\265\204\346\272\220\347\256\241\347\220\206.md" "b/zh-cn/application-dev/js-reference/\350\265\204\346\272\220\347\256\241\347\220\206.md" deleted file mode 100644 index 1121bda0227affc4d07dc511d103b698b5357e86..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/js-reference/\350\265\204\346\272\220\347\256\241\347\220\206.md" +++ /dev/null @@ -1,1114 +0,0 @@ -# 资源管理 - -- [导入模块](#zh-cn_topic_0000001150318493_s56d19203690d4782bfc74069abb6bd71) -- [权限](#zh-cn_topic_0000001150318493_section11257113618419) -- [方法](#zh-cn_topic_0000001150318493_section125675489541) -- [getResourceManager](#zh-cn_topic_0000001150318493_section192192415554) -- [getResourceManager](#zh-cn_topic_0000001150318493_section46989284018) -- [getResourceManager](#zh-cn_topic_0000001150318493_section0543541673) -- [getResourceManager](#zh-cn_topic_0000001150318493_section1816951410716) -- [枚举](#zh-cn_topic_0000001150318493_section1978842154715) -- [Direction](#zh-cn_topic_0000001150318493_section099619567453) -- [DeviceType](#zh-cn_topic_0000001150318493_section4734636131914) -- [ScreenDensity](#zh-cn_topic_0000001150318493_section7331173812197) -- [附录](#zh-cn_topic_0000001150318493_section1933416317165) -- [AsyncCallback](#zh-cn_topic_0000001150318493_section256244135613) -- [Configuration](#zh-cn_topic_0000001150318493_section12882825611) - - [属性](#zh-cn_topic_0000001150318493_section1059684317312) - -- [DeviceCapability](#zh-cn_topic_0000001150318493_section7200123494410) - - [属性](#zh-cn_topic_0000001150318493_section2201153419440) - -- [ResourceManager](#zh-cn_topic_0000001150318493_section137771134135415) - - [getString](#zh-cn_topic_0000001150318493_section9779153419548) - - [getString](#zh-cn_topic_0000001150318493_section159261924165411) - - [getStringArray](#zh-cn_topic_0000001150318493_section4490132775420) - - [getStringArray](#zh-cn_topic_0000001150318493_section1992322017541) - - [getMedia](#zh-cn_topic_0000001150318493_section6710152513409) - - [getMedia](#zh-cn_topic_0000001150318493_section6711152517409) - - [getMediaBase64](#zh-cn_topic_0000001150318493_section11402326194315) - - [getMediaBase64](#zh-cn_topic_0000001150318493_section6404726124312) - - [getConfiguration](#zh-cn_topic_0000001150318493_section8123152874015) - - [getConfiguration](#zh-cn_topic_0000001150318493_section312515284406) - - [getDeviceCapability](#zh-cn_topic_0000001150318493_section104951210135017) - - [getDeviceCapability](#zh-cn_topic_0000001150318493_section114961410115013) - - [getPluralString](#zh-cn_topic_0000001150318493_section1549163064013) - - [getPluralString](#zh-cn_topic_0000001150318493_section165183015405) - - -## 导入模块 - -``` -import resmgr from '@ohos.resmgr'; -``` - -## 权限 - -无 - -## 方法 - -## getResourceManager - -获取当前应用的资源管理对象 - -**参数：** - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

callback

-

AsyncCallback<ResourceManager>

-

是

-

callback方式返回ResourceManager对象

-
- -**返回值：** - -无 - -**示例：** - -``` -resmgr.getResourceManager((error, mgr) => { - // callback - mgr.getString(0x1000000, (error, value) => { - if (error != null) { - console.log(value); - } else { - console.log(value); - } - }); - - // promise - mgr.getString(0x1000000).then(value => { - console.log(value); - }).catch(error => { - console.log("getstring promise " + error); - }); -} - -``` - -## getResourceManager - -获取指定应用的资源管理对象。 - -**参数：** - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

bundleName

-

string

-

是

-

指定应用的Bundle名称

-

callback

-

AsyncCallback<ResourceManager>

-

是

-

callback方式返回ResourceManager对象

-
- -**返回值：** - -无 - -**示例：** - -``` -resmgr.getResourceManager("com.example.myapplication", (error, mgr) => { -} -``` - -## getResourceManager - -获取当前应用的资源管理对象。 - -**参数：** - -无 - -**返回值：** - - - - - - - - - - -

类型

-

说明

-

Promise<ResourceManager>

-

Promise方式返回的资源管理对象

-
- -**示例：** - -``` -resmgr.getResourceManager().then(mgr => { - // callback - mgr.getString(0x1000000, (error, value) => { - if (error != null) { - console.log(value); - } else { - console.log(value); - } - }); - - // promise - mgr.getString(0x1000000).then(value => { - console.log(value); - }).catch(error => { - console.log("getstring promise " + error); - }); -}).catch(error => { - -}); -``` - -## getResourceManager - -获取指定应用的资源管理对象。 - -**参数：** - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

bundleName

-

string

-

是

-

指定应用的Bundle名称

-
- -**返回值：** - - - - - - - - - - -

类型

-

说明

-

Promise<ResourceManager>

-

Promise方式返回的资源管理对象

-
- -**示例：** - -``` -resmgr.getResourceManager("com.example.myapplication").then(mgr => { - -}).catch(error => { - -}); -``` - -## 枚举 - -## Direction - -用于表示设备屏幕方向。 - - - - - - - - - - - - - - - - -

名称

-

默认值

-

说明

-

DIRECTION_VERTICAL

-

0

-

Indicates the vertical direction.

-

DIRECTION_HORIZONTAL

-

1

-

Indicates the horizontal direction.

-
- -## DeviceType - -用于表示当前设备类型。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

默认值

-

说明

-

DEVICE_TYPE_PHONE

-

0x00

-

Indicates a smartphone.

-

DEVICE_TYPE_TABLET

-

0x01

-

Indicates a tablet.

-

DEVICE_TYPE_CAR

-

0x02

-

Indicates a car.

-

DEVICE_TYPE_PC

-

0x03

-

Indicates a PC.

-

DEVICE_TYPE_TV

-

0x04

-

Indicates a smart TV.

-

DEVICE_TYPE_WEARABLE

-

0x06

-

Indicates a wearable device.

-
- -## ScreenDensity - -用于表示当前设备屏幕密度。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

默认值

-

说明

-

SCREEN_SDPI

-

120

-

Indicates small screen density.

-

SCREEN_MDPI

-

160

-

Indicates medium screen density.

-

SCREEN_LDPI

-

240

-

Indicates large screen density.

-

SCREEN_XLDPI

-

320

-

Indicates extra-large screen density.

-

SCREEN_XXLDPI

-

480

-

Indicates extra-extra-large screen density.

-

SCREEN_XXXLDPI

-

640

-

Indicates extra-extra-extra-large screen density.

-
- -## 附录 - -## AsyncCallback - - - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

必填

-

说明

-

error

-

Error

-

否

-

执行不正常时返回错误对象，正常时无值

-

data

-

T

-

否

-

执行正常时返回T类型的对象，不正常时无值

-
- -## Configuration - -表示当前设备的状态。 - -### 属性 - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

可读

-

可写

-

说明

-

direction

-

Direction

-

是

-

否

-

当前设备屏幕方向

-

locale

-

string

-

是

-

否

-

当前系统语言，如zh-Hans-CN

-
- -## DeviceCapability - -表示设备支持的。 - -### 属性 - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

可读

-

可写

-

说明

-

screenDensity

-

ScreenDensity

-

是

-

否

-

当前设备屏幕密度

-

deviceType

-

DeviceType

-

是

-

否

-

当前设备类型

-
- -## ResourceManager - -提供访问应用资源的能力。 - -### getString - -callback接口，用户获取指定资源ID对应的字符串。 - -**参数：** - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

resId

-

number

-

是

-

资源ID值

-

callback

-

AsyncCallback<string>

-

是

-

异步回调，用于返回获取的字符串

-
- -**返回值：** - -无 - -### getString - -promise接口，用户获取指定资源ID对应的字符串。 - -**参数：** - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

resId

-

number

-

是

-

资源ID值

-
- -**返回值：** - - - - - - - - - - -

类型

-

说明

-

Promise<string>

-

资源ID值对应的字符串

-
- -### getStringArray - -callback接口，用户获取指定资源ID对应的字符串数组。 - -**参数：** - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

resId

-

number

-

是

-

资源ID值

-

callback

-

AsyncCallback<Array<string>>

-

是

-

异步回调，用于返回获取的字符串数组

-
- -**返回值：** - -无 - -### getStringArray - -Promise接口，用户获取指定资源ID对应的字符串数组。 - -**参数：** - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

resId

-

number

-

是

-

资源ID值

-
- -**返回值：** - - - - - - - - - - -

类型

-

说明

-

Promise<Array<string>>

-

资源ID值对应的字符串数组

-
- -### getMedia - -callback接口，用户获取指定资源ID对应的媒体文件内容。 - -**参数：** - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

resId

-

number

-

是

-

资源ID值

-

callback

-

AsyncCallback<Array<Uint8Array>>

-

是

-

异步回调，用于返回获取的媒体文件内容

-
- -**返回值：** - -无 - -### getMedia - -Promise接口，用户获取指定资源ID对应的媒体文件内容。 - -**参数：** - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

resId

-

number

-

是

-

资源ID值

-
- -**返回值：** - - - - - - - - - - -

类型

-

说明

-

Promise<Array<Uint8Array>>

-

资源ID值对应的媒体文件内容

-
- -### getMediaBase64 - -callback接口，用户获取指定资源ID对应的图片资源Base64编码。 - -**参数：** - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

resId

-

number

-

是

-

资源ID值

-

callback

-

AsyncCallback<string>

-

是

-

异步回调，用于返回获取的图片资源Base64编码

-
- -**返回值：** - -无 - -### getMediaBase64 - -Promise接口，用户获取指定资源ID对应的图片资源Base64编码。 - -**参数：** - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

resId

-

number

-

是

-

资源ID值

-
- -**返回值：** - - - - - - - - - - -

类型

-

说明

-

Promise<string>

-

资源ID值对应的图片资源Base64编码

-
- -### getConfiguration - -callback接口，用户获取设备的Configuration。 - -**参数：** - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

callback

-

AsyncCallback<Configuration>

-

是

-

异步回调，用于返回设备的Configuration

-
- -**返回值：** - -无 - -### getConfiguration - -Promise接口，用户获取设备的Configuration。 - -**参数：** - -无 - -**返回值：** - - - - - - - - - - -

类型

-

说明

-

Promise<Configuration>

-

设备的Configuration

-
- -### getDeviceCapability - -callback接口，用户获取设备的DeviceCapability。 - -**参数：** - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

callback

-

AsyncCallback<DeviceCapability>

-

是

-

异步回调，用于返回设备的DeviceCapability

-
- -**返回值：** - -无 - -### getDeviceCapability - -Promise接口，用户获取设备的DeviceCapability。 - -**参数：** - -无 - -**返回值：** - - - - - - - - - - -

类型

-

说明

-

Promise<DeviceCapability>

-

设备的DeviceCapability

-
- -**返回值：** - -无 - -### getPluralString - -callback接口，根据提供的数量获取对应ID字符串表示的单复数字符串。 - -**参数：** - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

resId

-

number

-

是

-

资源ID值

-

num:

-

number

-

是

-

数量值

-

callback

-

AsyncCallback<string>

-

是

-

异步回调，返回根据提供的数量获取对应ID字符串表示的单复数字符串

-
- -**返回值：** - -无 - -### getPluralString - -Promise接口，根据提供的数量获取对应ID字符串表示的单复数字符串。 - -**参数：** - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

resId

-

number

-

是

-

资源ID值

-

num:

-

number

-

是

-

数量值

-
- -**返回值：** - - - - - - - - - - -

类型

-

说明

-

Promise<string>

-

根据提供的数量获取对应ID字符串表示的单复数字符串

-
- diff --git "a/zh-cn/application-dev/js-reference/\351\200\232\347\224\250.md" "b/zh-cn/application-dev/js-reference/\351\200\232\347\224\250.md" deleted file mode 100755 index 2876bc02bf2be9e68c180dce4b7f3b653474f0ef..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/js-reference/\351\200\232\347\224\250.md" +++ /dev/null @@ -1,15 +0,0 @@ -# 通用 - -- **[组件方法](组件方法.md)** - -- **[动画样式](动画样式.md)** - -- **[渐变样式](渐变样式.md)** - -- **[转场样式](转场样式.md)** - -- **[自定义字体样式](自定义字体样式.md)** - -- **[原子布局](原子布局.md)** - - diff --git "a/zh-cn/application-dev/js-reference/\351\200\232\347\224\250\344\272\213\344\273\266.md" "b/zh-cn/application-dev/js-reference/\351\200\232\347\224\250\344\272\213\344\273\266.md" deleted file mode 100644 index 299fa252a976d7e157964b5bb076ab7c974e6ef7..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/js-reference/\351\200\232\347\224\250\344\272\213\344\273\266.md" +++ /dev/null @@ -1,192 +0,0 @@ -# 通用事件 - -相对于私有事件，大部分组件都可以绑定如下事件。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数

-

描述

-

touchstart

-

TouchEvent

-

手指刚触摸屏幕时触发该事件。

-

touchmove

-

TouchEvent

-

手指触摸屏幕后移动时触发该事件。

-

touchcancel

-

TouchEvent

-

手指触摸屏幕中动作被打断时触发该事件。

-

touchend

-

TouchEvent

-

手指触摸结束离开屏幕时触发该事件。

-

click

-

-

-

点击动作触发该事件。

-

longpress

-

-

-

长按动作触发该事件。

-

swipe5+

-

SwipeEvent

-

组件上快速滑动后触发。

-
- -**表 1** BaseEvent对象属性列表 - - - - - - - - - - - - - - - - -

属性

-

类型

-

说明

-

type

-

string

-

当前事件的类型，比如click、longpress等。

-

timestamp

-

number

-

该事件触发时的时间戳。

-
- -**表 2** TouchEvent对象属性列表\(继承BaseEvent\) - - - - - - - - - - - - - - - - -

属性

-

类型

-

说明

-

touches

-

Array<TouchInfo>

-

触摸事件时的属性集合，包含屏幕触摸点的信息数组。

-

changedTouches

-

Array<TouchInfo>

-

触摸事件时的属性集合，包括产生变化的屏幕触摸点的信息数组。数据数据格式和touches一样。该属性表示有变化的触摸点，如从无变有，位置变化，从有变无。例如用户手指刚接触屏幕时，touches数组中有数据，但changedTouches无数据。

-
- -**表 3** TouchInfo - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

属性

-

类型

-

说明

-

globalX

-

number

-

距离屏幕左上角（不包括状态栏）横向距离。屏幕的左上角为原点。

-

globalY

-

number

-

距离屏幕左上角（不包括状态栏）纵向距离。屏幕的左上角为原点。

-

localX

-

number

-

距离被触摸组件左上角横向距离。组件的左上角为原点。

-

localY

-

number

-

距离被触摸组件左上角纵向距离。组件的左上角为原点。

-

size

-

number

-

触摸接触面积。

-
- -**表 4** SwipeEvent 基础事件对象属性列表（继承BaseEvent） - - - - - - - - - - - - -

属性

-

类型

-

说明

-

direction

-

string

-

滑动方向，可能值有：

-
  1. left：向左滑动；
  2. right：向右滑动；
  3. up：向上滑动；
  4. down：向下滑动。
-
- diff --git "a/zh-cn/application-dev/js-reference/\351\200\232\347\224\250\345\261\236\346\200\247.md" "b/zh-cn/application-dev/js-reference/\351\200\232\347\224\250\345\261\236\346\200\247.md" deleted file mode 100644 index cd50987eab266c6a3472639a662d7db1bfc9299b..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/js-reference/\351\200\232\347\224\250\345\261\236\346\200\247.md" +++ /dev/null @@ -1,153 +0,0 @@ -# 通用属性 - -- [常规属性](#zh-cn_topic_0000001058340523_section861395713012) -- [渲染属性](#zh-cn_topic_0000001058340523_section1894362211119) - -## 常规属性 - -常规属性指的是组件普遍支持的用来设置组件基本标识和外观显示特征的属性。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

id

-

string

-

-

-

否

-

组件的唯一标识。

-

style

-

string

-

-

-

否

-

组件的样式声明。

-

class

-

string

-

-

-

否

-

组件的样式类，用于引用样式表。

-

ref

-

string

-

-

-

否

-

用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。

-

disabled

-

boolean

-

false

-

否

-

当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。

-

data

-

string

-

-

-

否

-

给当前组件设置data属性，进行相应的数据存储和读取。

-

click-effect5+

-

string

-

-

-

否

-

通过这个样式可以设置组件的弹性点击效果，当前支持如下三种效果：

-
  • spring-small：建议小面积组件设置，

    缩放(90%)

    -
  • spring-medium：建议中面积组件设置，缩放(95%)
  • spring-large：建议大面积组件设置，

    缩放(95%)

    -
-
- -## 渲染属性 - -组件普遍支持的用来设置组件是否渲染的属性。 - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

描述

-

for

-

Array

-

-

-

根据设置的数据列表，展开当前元素。

-

if

-

boolean

-

-

-

根据设置的boolean值，添加或移除当前元素。

-

show

-

boolean

-

-

-

根据设置的boolean值，显示或隐藏当前元素。

-
- ->![](public_sys-resources/icon-note.gif) **说明：** ->属性和样式不能混用，不能在属性字段中进行样式设置。 - diff --git "a/zh-cn/application-dev/js-reference/\351\200\232\347\224\250\346\240\267\345\274\217.md" "b/zh-cn/application-dev/js-reference/\351\200\232\347\224\250\346\240\267\345\274\217.md" deleted file mode 100644 index 1c187674db5ee64622e032923bc53033263ec994..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/js-reference/\351\200\232\347\224\250\346\240\267\345\274\217.md" +++ /dev/null @@ -1,1571 +0,0 @@ -# 通用样式 - -组件普遍支持的可以在style或css中设置组件外观样式。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

width

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的宽度。

-

缺省时使用元素自身内容需要的宽度。

-

height

-

<length> | <percentage>

-

-

-

否

-

设置组件自身的高度。

-

缺省时使用元素自身内容需要的高度。

-

min-width5+

-

<length>

-

0

-

否

-

设置元素的最小宽度。

-

min-height5+

-

<length>

-

0

-

否

-

设置元素的最小高度。

-

max-width5+

-

<length>

-

-

-

否

-

设置元素的最大宽度。默认无限制。

-

max-height5+

-

<length>

-

-

-

否

-

设置元素的最大高度。默认无限制。

-

padding

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的内边距属性。

-
该属性可以有1到4个值：

  • 指定一个值时，该值指定四个边的内边距。

    -

  • 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。

    -

  • 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。

    -

  • 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。

    -
-
-

padding-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下内边距属性。

-

padding-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端内边距属性。

-

margin

-

<length> | <percentage>5+

-

0

-

否

-

使用简写属性设置所有的外边距属性，该属性可以有1到4个值。

-

  • 只有一个值时，这个值会被指定给全部的四个边。

    -

  • 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。

    -

  • 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。

    -

  • 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。

    -
-

margin-[left|top|right|bottom]

-

<length> | <percentage>5+

-

0

-

否

-

设置左、上、右、下外边距属性。

-

margin-[start|end]

-

<length> | <percentage>5+

-

0

-

否

-

设置起始和末端外边距属性。

-

border

-

-

-

0

-

否

-

使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。

-

border-style

-

string

-

solid

-

否

-

使用简写属性设置所有边框的样式，可选值为：

-
  • dotted：显示为一系列圆点，圆点半径为border-width的一半。
  • dashed：显示为一系列短的方形虚线。
-
  • solid：显示为一条实线。
-

border-[left|top|right|bottom]-style

-

string

-

solid

-

否

-

分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。

-

border-[left|top|right|bottom]

-

-

-

-

-

否

-

使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。

-

border-width

-

<length>

-

0

-

否

-

使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。

-

border-[left|top|right|bottom]-width

-

<length>

-

0

-

否

-

分别设置左、上、右、下四个边框的宽度。

-

border-color

-

<color>

-

black

-

否

-

使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。

-

border-[left|top|right|bottom]-color

-

<color>

-

black

-

否

-

分别设置左、上、右、下四个边框的颜色。

-

border-radius

-

<length>

-

-

-

否

-

border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，border-[left|top|right|bottom]-style，如果要设置color、width和style，需要将四个方向一起设置（border-width、border-color、border-style）。

-

border-[top|bottom]-[left|right]-radius

-

<length>

-

-

-

否

-

分别设置左上，右上，右下和左下四个角的圆角半径。

-

background

-

<linear-gradient>

-

-

-

否

-

仅支持设置渐变样式，与background-color、background-image不兼容。

-

background-color

-

<color>

-

-

-

否

-

设置背景颜色。

-

background-image

-

string

-

-

-

否

-

设置背景图片。与background-color、background不兼容；支持本地图片资源地址。

-

示例：

-
  • background-image: url("/common/background.png")
-

background-size

-
  • string
  • <length> <length>
  • <percentage> <percentage>
-

auto

-

否

-

设置背景图片的大小。

-
  • string可选值：
    • contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
    • auto：保持原图的比例不变。
    -
  • length值参数方式：

    设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
  • 百分比参数方式：

    以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

    -
-

background-repeat

-

string

-

repeat

-

否

-

针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。

-
  • repeat：在水平轴和竖直轴上同时重复绘制图片。
  • repeat-x：只在水平轴上重复绘制图片。
  • repeat-y：只在竖直轴上重复绘制图片。
  • no-repeat：不会重复绘制图片。
-

background-position

-
  • string string
  • <length> <length>
  • <percentage> <percentage>
-

0px 0px

-

否

-
  • 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
    • left：水平方向上最左侧。
    • right：水平方向上最右侧。
    • top：竖直方向上最顶部。
    • bottom：竖直方向上最底部。
    • center：水平方向或竖直方向上中间位置。
    -
-
  • length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
  • 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
  • 可以混合使用<percentage>和<length>
-

box-shadow5+

-

-

-

0

-

否

-

语法：box-shadow: h-shadow v-shadow blur spread color

-

通过这个样式可以设置当前组件的阴影样式，包括水平位置(必填)、垂直位置(必填)、模糊半径(可选，默认值为0)、阴影延展距离(可选，默认值为0)、阴影颜色(可选，默认值为黑色)。

-

示例：

-
  • box-shadow :10px 20px 5px 10px #888888
  • box-shadow :100px 100px 30px red
  • box-shadow :-100px -100px 0px 40px
-

filter5+

-

string

-

-

-

否

-

语法：filter: blur(px)

-

通过这个样式可以设置当前组件布局范围的内容模糊，参数用于指定模糊半径，如果没有设置值，则默认是0(不模糊)，不支持百分比。

-

示例：

-
  • filter: blur(10px)
-

backdrop-filter5+

-

string

-

-

-

否

-

语法：backdrop-filter: blur(px)

-

通过这个样式可以设置当前组件布局范围的背景模糊，参数用于指定模糊半径，如果没有设置值，则默认是0(不模糊)，不支持百分比。

-

示例：

-
  • backdrop-filter: blur(10px)
-

opacity

-

number

-

1

-

否

-

元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

-

display

-

string

-

-

flex

-

否

-

确定一个元素所产生的框的类型，可选值为：

-
  • flex：弹性布局。
  • none：不渲染此元素。
-

visibility

-

string

-

-

visible

-

否

-

是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：

-
  • visible：元素正常显示。
  • hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。
-
说明：

visibility和display样式都设置时，仅display生效

-
-

flex

-

-

-

-

-

否

-

规定当前组件如何适应父组件中的可用空间。

-

flex可以指定1个，2个5+或3个5+值。

-

单值语法：

-
  • 一个无单位数：用来设置组件的flex-grow
  • 一个有效的宽度值5+：用来设置组件的flex-basis
-

双值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow。第二个值是以下之一：

-
  • 一个无单位数：用来设置组件的flex-shrink
  • 一个有效的宽度值：用来设置组件的flex-basis
-

三值语法5+：

-

第一个值必须是无单位数，用来设置组件的flex-grow；第二个值必须是无单位数，用来设置组件的flex-shrink；第三个值必须是一个有效的宽度值，用来设置组件的flex-basis。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-grow

-

number

-

0

-

否

-

设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-shrink

-

number

-

1

-

否

-

设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

flex-basis

-

<length>

-

-

-

-

否

-

设置组件在主轴方向上的初始大小。

-
说明：

仅父容器为<div>、<list-item>、<tabs>、<refresh>、<stepper-item>5+时生效。

-
-

position

-

string

-

relative

-

否

-

设置元素的定位类型，不支持动态变更。

-
  • fixed：相对与整个界面进行定位。
  • absolute：相对于父元素进行定位。
  • relative：相对于其正常位置进行定位。
-
说明：

absolute属性仅在父容器为<div>、<stack>时生效。

-
-

[left|top|right|bottom]

-

<length>

-

-

-

否

-

left|top|right|bottom需要配合position样式使用，来确定元素的偏移位置。

-
  • left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  • top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  • right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
  • bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
-
- ->![](public_sys-resources/icon-note.gif) **说明：** ->通用样式都不是必填项。 ->目前，样式支持的颜色格式如下： ->- rgb\(255, 255, 255\) ->- rgba\(255, 255, 255, 1.0\) ->- HEX格式：\#rrggbb，\#aarrggbb ->- 枚举格式：black，white等，详见[表1](#zh-cn_topic_0000001059340528_table16879155017425)。Script脚本中不支持枚举格式。 - -**表 1** 当前支持的颜色枚举 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

枚举名称

-

对应颜色

-

颜色

-

aliceblue

-

#f0f8ff

-

-

antiquewhite

-

#faebd7

-

-

aqua

-

#00ffff

-

-

aquamarine

-

#7fffd4

-

-

azure

-

#f0ffff

-

-

beige

-

#f5f5dc

-

-

bisque

-

#ffe4c4

-

-

black

-

#000000

-

-

blanchedalmond

-

#ffebcd

-

-

blue

-

#0000ff

-

-

blueviolet

-

#8a2be2

-

-

brown

-

#a52a2a

-

-

burlywood

-

#deB887

-

-

cadetblue

-

#5f9ea0

-

-

chartreuse

-

#7fff00

-

-

chocolate

-

#d2691e

-

-

coral

-

#ff7f50

-

-

cornflowerblue

-

#6495ed

-

-

cornsilk

-

#fff8dc

-

-

crimson

-

#dc143c

-

-

cyan

-

#00ffff

-

-

darkblue

-

#00008b

-

-

darkcyan

-

#008b8b

-

-

darkgoldenrod

-

#b8860b

-

-

darkgray

-

#a9a9a9

-

-

darkgreen

-

#006400

-

-

darkgrey

-

#a9a9a9

-

-

darkkhaki

-

#bdb76b

-

-

darkmagenta

-

#8b008b

-

-

darkolivegreen

-

#556b2f

-

-

darkorange

-

#ff8c00

-

-

darkorchid

-

#9932cc

-

-

darkred

-

#8b0000

-

-

darksalmon

-

#e9967a

-

-

darkseagreen

-

#8fbc8f

-

-

darkslateblue

-

#483d8b

-

-

darkslategray

-

#2f4f4f

-

-

darkslategrey

-

#2f4f4f

-

-

darkturquoise

-

#00ced1

-

-

darkviolet

-

#9400d3

-

-

deeppink

-

#ff1493

-

-

deepskyblue

-

#00bfff

-

-

dimgray

-

#696969

-

-

dimgrey

-

#696969

-

-

dodgerblue

-

#1e90ff

-

-

firebrick

-

#b22222

-

-

floralwhite

-

#fffaf0

-

-

forestgreen

-

#228b22

-

-

fuchsia

-

#ff00ff

-

-

gainsboro

-

#dcdcdc

-

-

ghostwhite

-

#f8f8ff

-

-

gold

-

#ffd700

-

-

goldenrod

-

#daa520

-

-

gray

-

#808080

-

-

green

-

#008000

-

-

greenyellow

-

#adff2f

-

-

grey

-

#808080

-

-

honeydew

-

#f0fff0

-

-

hotpink

-

#ff69b4

-

-

indianred

-

#cd5c5c

-

-

indigo

-

#4b0082

-

-

ivory

-

#fffff0

-

-

khaki

-

#f0e68c

-

-

lavender

-

#e6e6fa

-

-

lavenderblush

-

#fff0f5

-

-

lawngreen

-

#7cfc00

-

-

lemonchiffon

-

#fffacd

-

-

lightblue

-

#add8e6

-

-

lightcoral

-

#f08080

-

-

lightcyan

-

#e0ffff

-

-

lightgoldenrodyellow

-

#fafad2

-

-

lightgray

-

#d3d3d3

-

-

lightgreen

-

#90ee90

-

-

lightpink

-

#ffb6c1

-

-

lightsalmon

-

#ffa07a

-

-

lightseagreen

-

#20b2aa

-

-

lightskyblue

-

#87cefa

-

-

lightslategray

-

#778899

-

-

lightslategrey

-

#778899

-

-

lightsteelblue

-

#b0c4de

-

-

lightyellow

-

#ffffe0

-

-

lime

-

#00ff00

-

-

limegreen

-

#32cd32

-

-

linen

-

#faf0e6

-

-

magenta

-

#ff00ff

-

-

maroon

-

#800000

-

-

mediumaquamarine

-

#66cdaa

-

-

mediumblue

-

#0000cd

-

-

mediumorchid

-

#ba55d3

-

-

mediumpurple

-

#9370db

-

-

mediumseagreen

-

#3cb371

-

-

mediumslateblue

-

#7b68ee

-

-

mediumspringgreen

-

#00fa9a

-

-

mediumturquoise

-

#48d1cc

-

-

mediumvioletred

-

#c71585

-

-

midnightblue

-

#191970

-

-

mintcream

-

#f5fffa

-

-

mistyrose

-

#ffe4e1

-

-

moccasin

-

#ffe4b5

-

-

navajowhite

-

#ffdead

-

-

navy

-

#000080

-

-

oldlace

-

#fdf5e6

-

-

olive

-

#808000

-

-

olivedrab

-

#6b8e23

-

-

orange

-

#ffa500

-

-

orangered

-

#ff4500

-

-

orchid

-

#da70d6

-

-

palegoldenrod

-

#eee8aa

-

-

palegreen

-

#98fb98

-

-

paleturquoise

-

#afeeee

-

-

palevioletred

-

#db7093

-

-

papayawhip

-

#ffefd5

-

-

peachpuff

-

#ffdab9

-

-

peru

-

#cd853f

-

-

pink

-

#ffc0cb

-

-

plum

-

#dda0dd

-

-

powderblue

-

#b0e0e6

-

-

purple

-

#800080

-

-

rebeccapurple

-

#663399

-

-

red

-

#ff0000

-

-

rosybrown

-

#bc8f8f

-

-

royalblue

-

#4169e1

-

-

saddlebrown

-

#8b4513

-

-

salmon

-

#fa8072

-

-

sandybrown

-

#f4a460

-

-

seagreen

-

#2e8b57

-

-

seashell

-

#fff5ee

-

-

sienna

-

#a0522d

-

-

silver

-

#c0c0c0

-

-

skyblue

-

#87ceeb

-

-

slateblue

-

#6a5acd

-

-

slategray

-

#708090

-

-

slategrey

-

#708090

-

-

snow

-

#fffafa

-

-

springgreen

-

#00ff7f

-

-

steelblue

-

#4682b4

-

-

tan

-

#d2b48c

-

-

teal

-

#008080

-

-

thistle

-

#d8Bfd8

-

-

tomato

-

#ff6347

-

-

turquoise

-

#40e0d0

-

-

violet

-

#ee82ee

-

-

wheat

-

#f5deb3

-

-

white

-

#ffffff

-

-

whitesmoke

-

#f5f5f5

-

-

yellow

-

#ffff00

-

-

yellowgreen

-

#9acd32

-

-
- diff --git "a/zh-cn/application-dev/js-reference/\351\237\263\351\242\221\346\222\255\346\224\276.md" "b/zh-cn/application-dev/js-reference/\351\237\263\351\242\221\346\222\255\346\224\276.md" deleted file mode 100644 index cdfdbb07237b22c4f5b5b800ce15d89ae7ba584e..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/js-reference/\351\237\263\351\242\221\346\222\255\346\224\276.md" +++ /dev/null @@ -1,478 +0,0 @@ -# 音频播放 - -- [导入模块](#s56d19203690d4782bfc74069abb6bd71) -- [权限](#section11257113618419) -- [方法](#section125675489541) -- [createAudioPlayer\(\)](#section582314017253) -- [附录](#section1933416317165) -- [AudioPlayer](#section5174142818365) - - [属性](#section4947115405) - - [play\(\)](#section964512672913) - - [pause\(\)](#section78173258296) - - [stop\(\)](#section122114334296) - - [seek\(number\)](#section1387113816298) - - [setVolume\(number\)](#section164235176552) - - [reset\(\)7+](#section1473283011356) - - [release\(\)](#section9224621145512) - - [事件](#section5453721192911) - - [play](#section87307411494) - - [pause](#section198217471590) - - [stop](#section437616531910) - - [dataLoad](#section982114219106) - - [timeUpdate](#section13687114181014) - - [volumeChange](#section139227715717) - - [finish](#section15181321181018) - - [error](#section5593132921016) - -- [AudioState](#section5181155710523) - -## 导入模块 - -``` -import audio from '@ohos.multimedia.media'; -``` - -## 权限 - -无 - -## 方法 - -## createAudioPlayer\(\) - -创建音频播放的实例来控制音频的播放。 - -**返回值：** - - - - - - - - - - -

类型

-

说明

-

AudioPlayer

-

返回AudioPlayer类实例，失败时返回null。

-
- -**示例：** - -``` -var audioplayer = audio.createAudioPlayer(); -``` - -## 附录 - -## AudioPlayer - -音频播放器。 - -### 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

可读

-

可写

-

说明

-

src

-

string

-

是

-

是

-

音频媒体URI。

-

loop

-

boolean

-

是

-

是

-

音频循环播放属性。

-

currentTime

-

number

-

是

-

否

-

音频的当前播放阶段。

-

duration

-

number

-

是

-

否

-

音频播放的时长。

-

state

-

AudioState

-

是

-

否

-

音频播放的状态。

-
- -### play\(\) - -开始播放音频资源。 - -**示例：** - -``` -audioplayer.on('dataload', (err, action) => { - if (err) { - console.info('Error returned in the prepare() callback.'); - return; - } - console.info('Start to play the audio.'); - audioplayer.play(); -}; - -audioplayer.on('play', (err, action) => { - if (err) { - console.info('Error returned in the play() callback.'); - return; - } - console.info('Succeeded in playing the audio.'); -}; -audioplayer.src = 'common/mydream.mp3'; -``` - -### pause\(\) - -暂停播放音频资源。 - -**示例：** - -``` -audioplayer.on('dataload', (err, action) => { - if (err) { - console.info('Error returned in the prepare() callback.'); - return; - } - console.info('Start to play the audio.'); - audioplayer.play(); -} -audioplayer.on('play', (err, action) => { - if (err) { - console.info('Error returned in the play() callback.'); - return; - } - console.info('Start to pause audio playback.'); - audioplayer.pause(); -}; -audioplayer.on('pause', (err, action) => { - if (err) { - console.info('Error returned in the pause() callback.'); - return; - } - console.info('Succeeded in pausing audio playback.'); -}; -audioplayer.src = 'common/mydream.mp3'; -``` - -### stop\(\) - -停止播放音频资源。 - -**示例：** - -``` -audioplayer.on('dataload', (err, action) => { - if (err) { - console.info('Error returned in the prepare() callback.'); - return; - } - console.info('Start to play the audio.'); - audioplayer.play(); -}; -audioplayer.on('play', (err, action) => { - if (err) { - console.info('Error returned in the play() callback.'); - return; - } - console.info('Start to pause audio playback.'); - audioplayer.pause(); -}; -audioplayer.on('stop', (err, action) => { - if (err) { - console.info('Error returned in the stop() callback.'); - return; - } - console.info('Succeeded in stopping audio playback.'); -}; -audioplayer.src = 'common/mydream.mp3'; -``` - -### seek\(number\) - -跳转到指定播放位置。 - -**参数：** - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

timeMs

-

number

-

是

-

想要跳转到的时间点。

-
- -**示例：** - -``` -audioplayer.on('dataload', (err, action) => { - if (err) { - console.info('Error returned in the prepare() callback.'); - return; - } - console.info('Start to play the audio.'); - audioplayer.play(); -}; -audioplayer.on('play', (err, action) => { - if (err) { - console.info('Error returned in the play() callback.'); - return; - } - console.info('Succeeded in playing the audio.') -}; -audioplayer.on('timeUpdate', (seekTime, action) => { - console.info('Seek time returned in the seek() callback: ' + seekTime); - var newTime = audioplayer.currenTime; - if(newTime == 30000) { - console.info('Seek succeeded. New time: ' + newTime); - } else { - console.info('Seek failed.'); - } -}; -audioplayer.src = 'common/mydream.mp3'; -audioplayer.seek(30000); -``` - -### setVolume\(number\) - -设置音量。 - -**参数：** - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

vol

-

number

-

是

-

想要设置的音量值(0-1)。

-
- -**示例：** - -``` -audioplayer.on('dataload', (err, action) => { - if (err) { - console.error('Error returned in the prepare() callback.'); - return; - } - console.info('Start to play the audio.'); - audioplayer.play(); -}; -audioplayer.on('play', (err, action) => { - if (err) { - console.error('Error returned in the play() callback.'); - return; - } - console.info('Succeeded in playing the audio.') -}; -audioplayer.on('volumeChange', (err, action) => { - if (err) { - console.error('Error returned in the setVolume() callback.'); - return; - } - console.info('Playback volume changed.'); -}; -audioplayer.src = 'common/mydream.mp3'; -audioplayer.setVolume(0.5); -``` - -### reset\(\)7+ - -切换播放音频资源。 - -**示例：** - -``` -audioplayer.on('dataload', (err, action) => { - if (err) { - console.error('Error returned in the prepare() callback.'); - return; - } - console.info('Start to reset audio playback.'); - audioplayer.reset(); -}; -audioplayer.on('reset', (err, action) => { - if (err) { - console.error('Error returned in the reset() callback.'); - return; - } - console.info('Reset succeeded.'); -}; -audioplayer.src = 'common/mydream.mp3'; -``` - -### release\(\) - -释放音频资源。 - -**示例：** - -``` -audioplay.release(); -``` - -### 事件 - -### play - -在调用play方法后的回调事件。 - -### pause - -在调用pause方法后的回调事件。 - -### stop - -在调用stop方法后的回调事件。 - -### dataLoad - -在音频数据加载后的回调事件。 - -### timeUpdate - -在播放时间改变后的回调事件。 - -### volumeChange - -在播放音量改变后的回调事件。 - -### finish - -在播放完成后的回调事件。 - -### error - -在播放错误时的回调事件。 - - - - - - - - - - - - -

参数名

-

类型

-

说明

-

callback

-

ErrorCallback

-

错误事件的回调函数。

-
- -## AudioState - -音频播放的状态机。 - - - - - - - - - - - - - - - - - - - -

名称

-

描述

-

idle

-

音频播放空闲。

-

playing

-

音频正在播放。

-

paused

-

音频暂停播放。

-

stopped

-

音频播放停止。

-
- diff --git "a/zh-cn/application-dev/js-reference/\351\237\263\351\242\221\347\256\241\347\220\206.md" "b/zh-cn/application-dev/js-reference/\351\237\263\351\242\221\347\256\241\347\220\206.md" deleted file mode 100644 index 8fa663e5f71eeb552b7f8642e82b4e6492d2592c..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/js-reference/\351\237\263\351\242\221\347\256\241\347\220\206.md" +++ /dev/null @@ -1,2046 +0,0 @@ -# 音频管理 - -- [导入模块](#s56d19203690d4782bfc74069abb6bd71) -- [权限](#section11257113618419) -- [getAudioManager\(\): AudioManager](#section84581011418) -- [AudioVolumeType](#section92261857172218) -- [DeviceFlag](#section11285183164210) -- [DeviceRole](#section380038142619) -- [DeviceType](#devicetype) - - [ActiveDeviceType7+](#activedevicetype) -- [AudioRingMode7+](#section14948916131018) -- [AudioManager](#section8265143814015) - - [setVolume\(volumeType: AudioVolumeType, volume: number, callback: AsyncCallback\): void](#section189141826104616) - - [setVolume\(volumeType: AudioVolumeType, volume: number\): Promise](#section102021249114612) - - [getVolume\(volumeType: AudioVolumeType, callback: AsyncCallback\): void](#section4387320194714) - - [getVolume\(volumeType: AudioVolumeType\): Promise](#section04121965119) - - [getMinVolume\(volumeType: AudioVolumeType, callback: AsyncCallback\): void](#section188714283511) - - [getMinVolume\(volumeType: AudioVolumeType\): Promise](#section41556389511) - - [getMaxVolume\(volumeType: AudioVolumeType, callback: AsyncCallback\): void](#section690395418516) - - [getMaxVolume\(volumeType: AudioVolumeType\): Promise](#section155151345217) - - [mute\(volumeType: AudioVolumeType, mute: boolean, callback: AsyncCallback\): void7+](#section13516136134613) - - [mute\(volumeType: AudioVolumeType, mute: boolean\): Promise7+](#section7519036144616) - - [isMute\(volumeType: AudioVolumeType, callback: AsyncCallback\): void7+](#section10684183819585) - - [isMute\(volumeType: AudioVolumeType\): Promise7+](#section6920211145610) - - [isActive\(volumeType: AudioVolumeType, callback: AsyncCallback\): void7+](#section380012544121) - - [isActive\(volumeType: AudioVolumeType\): Promise7+](#section1880315481216) - - [setRingerMode\(mode: AudioRingMode, callback: AsyncCallback\): void7+](#section18572131483613) - - [setRingerMode\(mode: AudioRingMode\): Promise7+](#section55741914143615) - - [getRingerMode\(callback: AsyncCallback\): void7+](#section149044108162) - - [getRingerMode\(\): Promise7+](#section13908210101620) - - [setAudioParameter\(key: string, value: string, callback: AsyncCallback\): void7+](#section1691957174818) - - [setAudioParameter\(key: string, value: string\): Promise7+](#section18121057174820) - - [getAudioParameter\(key: string, callback: AsyncCallback\): void7+](#section1415145714812) - - [getAudioParameter\(key: string\): Promise7+](#section3185577485) - - [getDevices\(deviceFlag: DeviceFlag, callback: AsyncCallback\): void](#section11536182020523) - - [getDevices\(deviceFlag: DeviceFlag\): Promise](#section181733125210) - - [setDeviceActive\(deviceType: ActiveDeviceType, active: boolean, callback: AsyncCallback\): void7+](#section103558400222) - - [setDeviceActive\(deviceType: ActiveDeviceType, active: boolean\): Promise7+](#section1235914401228) - - [isDeviceActive\(deviceType: ActiveDeviceType, callback: AsyncCallback\): void7+](#section12363240122219) - - [isDeviceActive\(deviceType: ActiveDeviceType\): Promise7+](#section18366184012213) - - [setMicrophoneMute\(mute: boolean, callback: AsyncCallback\): void7+](#section14703163618122) - - [setMicrophoneMute\(mute: boolean\): Promise7+](#section56287111791) - - [isMicrophoneMute\(callback: AsyncCallback\): void7+](#section6632141119912) - - [isMicrophoneMute\(\): Promise7+](#section196363111918) - -- [AudioDeviceDescriptor](#section164657411927) - - [属性](#section4947115405) - -- [AudioDeviceDescriptors](#section5181155710523) - -## 导入模块 - -``` -import audio from '@ohos.multimedia.audio'; -``` - -## 权限 - -无 - -## getAudioManager\(\): AudioManager - -获取音频管理器。 - -**返回值：** - - - - - - - - - - -

类型

-

说明

-

AudioManager

-

音频管理类。

-
- -**示例：** - -``` -var audioManager = audio.getAudioManager(); -``` - -## AudioVolumeType - -枚举，音频流类型。 - - - - - - - - - - - - - - - - -

名称

-

默认值

-

描述

-

RINGTONE

-

2

-

表示铃声。

-

MEDIA

-

3

-

表示媒体。

-
- -## DeviceFlag - -枚举，可获取的设备种类。 - - - - - - - - - - - - - - - - - - - - -

名称

-

默认值

-

描述

-

OUTPUT_DEVICES_FLAG

-

1

-

表示输出设备种类。

-

INPUT_DEVICES_FLAG

-

2

-

表示输入设备种类。

-

ALL_DEVICES_FLAG

-

3

-

表示所有设备种类。

-
- -## DeviceRole - -枚举，设备角色。 - - - - - - - - - - - - - - - - -

名称

-

默认值

-

描述

-

INPUT_DEVICE

-

1

-

输入设备角色。

-

OUTPUT_DEVICE

-

2

-

输出设备角色。

-
- -## DeviceType - -枚举，设备类型。 - -| 名称 | 默认值 | 描述 | -| -------------- | ------------- | ------------------------------------------------------- | -| INVALID | 0 | 无效设备。 | -| EARPIECE | 1 | 听筒。 | -| SPEAKER | 2 | 扬声器。 | -| WIRED_HEADSET | 3 | 有线耳机。 | -| BLUETOOTH_SCO | 7 | 蓝牙设备SCO连接(Synchronous Connection Oriented)。 | -| BLUETOOTH_A2DP | 8 | 蓝牙设备A2DP连接(Advanced Audio Distribution Profile)。 | -| MIC | 15 | 麦克风。 | - - -## ActiveDeviceType7+ - -Enumerates active device types. - -| 名称 | 默认值 | 描述 | -| ------------- | ------------- | -------------------------------------------------------- | -| SPEAKER | 2 | 扬声器。 | -| BLUETOOTH_SCO | 7 | 蓝牙设备SCO连接(Synchronous Connection Oriented)。 | - -## AudioRingMode7+ - -枚举，铃声模式。 - - - - - - - - - - - - - - - - - - - - -

名称

-

默认值

-

描述

-

RINGER_MODE_SILENT

-

0

-

静音模式

-

RINGER_MODE_VIBRATE

-

1

-

震动模式

-

RINGER_MODE_NORMAL

-

2

-

响铃模式

-
- -## AudioManager - -管理音频音量和音频设备。 - -### setVolume\(volumeType: AudioVolumeType, volume: number, callback: AsyncCallback\): void - -设置指定流的音量，使用callback方式返回异步结果。 - -**参数：** - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

volumeType

-

AudioVolumeType

-

是

-

音量流类型。

-

volume

-

number

-

是

-

音量等级，可设置范围通过getMinVolume和getMaxVolume获取。

-

callback

-

AsyncCallback<void>

-

是

-

回调表示成功还是失败。

-
- -**返回值：** - -无 - -**示例：** - -``` -audioManager.setVolume(audio.AudioVolumeType.MEDIA, 10, (err)=>{ - if (err) { - console.error('Failed to set the volume. ${err.message}'); - return; - } - console.log('Callback invoked to indicate a successful volume setting.'); -}) -``` - -### setVolume\(volumeType: AudioVolumeType, volume: number\): Promise - -设置指定流的音量，使用promise方式返回异步结果。 - -**参数：** - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

volumeType

-

AudioVolumeType

-

是

-

音量流类型。

-

volume

-

number

-

是

-

音量等级，可设置范围通过getMinVolume和getMaxVolume获取。

-
- -**返回值：** - - - - - - - - - - -

类型

-

说明

-

Promise<void>

-

Promise回调表示成功还是失败。

-
- -**示例：** - -``` -audioManager.setVolume(audio.AudioVolumeType.MEDIA, 10).then(()=> - console.log('Promise returned to indicate a successful volume setting.'); -) -``` - -### getVolume\(volumeType: AudioVolumeType, callback: AsyncCallback\): void - -获取指定流的音量，使用callback方式返回异步结果。 - -**参数：** - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

volumeType

-

AudioVolumeType

-

是

-

音量流类型。

-

callback

-

AsyncCallback<number>

-

是

-

回调返回音量大小。

-
- -**返回值：** - -无 - -**示例：** - -``` -audioManager.getVolume(audio.AudioVolumeType.MEDIA, (err, value) => { - if (err) { - console.error('Failed to obtain the volume. ${err.message}'); - return; - } - console.log('Callback invoked to indicate that the volume is obtained.'); -}) -``` - -### getVolume\(volumeType: AudioVolumeType\): Promise - -获取指定流的音量，使用promise方式返回异步结果。 - -**参数：** - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

volumeType

-

AudioVolumeType

-

是

-

音量流类型。

-
- -**返回值：** - - - - - - - - - - -

类型

-

说明

-

Promise<number>

-

Promise回调返回音量大小。

-
- -**示例：** - -``` -audioManager.getVolume(audio.AudioVolumeType.MEDIA).then((value) => - console.log('Promise returned to indicate that the volume is obtained.' + value); -) -``` - -### getMinVolume\(volumeType: AudioVolumeType, callback: AsyncCallback\): void - -获取指定流的最小音量，使用callback方式返回异步结果。 - -**参数：** - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

volumeType

-

AudioVolumeType

-

是

-

音量流类型。

-

callback

-

AsyncCallback<number>

-

是

-

回调返回最小音量。

-
- -**返回值：** - -无 - -**示例：** - -``` -audioManager.getVolume(audio.AudioVolumeType.MEDIA, (err, value) => { - if (err) { - console.error('Failed to obtain the minimum volume. ${err.message}'); - return; - } - console.log('Callback invoked to indicate that the minimum volume is obtained.' + value); -}) -``` - -### getMinVolume\(volumeType: AudioVolumeType\): Promise - -获取指定流的最小音量，使用promise方式返回异步结果。 - -**参数：** - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

volumeType

-

AudioVolumeType

-

是

-

音量流类型。

-
- -**返回值：** - - - - - - - - - - -

类型

-

说明

-

Promise<number>

-

Promise回调返回最小音量。

-
- -**示例：** - -``` -audioManager.getMinVolume(audio.AudioVolumeType.MEDIA).then((value) => - console.log('Promised returned to indicate that the minimum volume is obtained.' + value); -) -``` - -### getMaxVolume\(volumeType: AudioVolumeType, callback: AsyncCallback\): void - -获取指定流的最大音量，使用callback方式返回异步结果。 - -**参数：** - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

volumeType

-

AudioVolumeType

-

是

-

音量流类型。

-

callback

-

AsyncCallback<number>

-

是

-

回调返回最大音量大小。

-
- -**返回值：** - -无 - -**示例：** - -``` -audioManager.getMaxVolume(audio.AudioVolumeType.MEDIA, (err, value) => { - if (err) { - console.error('Failed to obtain the maximum volume. ${err.message}'); - return; - } - console.log('Callback invoked to indicate that the maximum volume is obtained.' + value); -}) -``` - -### getMaxVolume\(volumeType: AudioVolumeType\): Promise - -获取指定流的最大音量，使用promise方式返回异步结果。 - -**参数：** - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

volumeType

-

AudioVolumeType

-

是

-

音量流类型。

-
- -**返回值：** - - - - - - - - - - -

类型

-

说明

-

Promise<number>

-

Promise回调返回最大音量大小。

-
- -**示例：** - -``` -audioManager.getMaxVolume(audio.AudioVolumeType.MEDIA).then((data)=> - console.log('Promised returned to indicate that the maximum volume is obtained.'); -) -``` - -### mute\(volumeType: AudioVolumeType, mute: boolean, callback: AsyncCallback\): void7+ - -设置指定音量流静音，使用callback方式返回异步结果。 - -**参数：** - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

volumeType

-

AudioVolumeType

-

是

-

音量流类型。

-

mute

-

boolean

-

是

-

静音状态，true为静音，false为非静音。

-

callback

-

AsyncCallback<void>

-

是

-

回调表示成功还是失败。

-
- -**返回值：** - -无 - -**示例：** - -``` -audioManager.mute(audio.AudioVolumeType.MEDIA, true, (err) => { - if (err) { - console.error('Failed to mute the stream. ${err.message}'); - return; - } - console.log('Callback invoked to indicate that the stream is muted.'); -}) -``` - -### mute\(volumeType: AudioVolumeType, mute: boolean\): Promise7+ - -设置指定音量流静音，使用promise方式返回异步结果。 - -**参数：** - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

volumeType

-

AudioVolumeType

-

是

-

音量流类型。

-

mute

-

boolean

-

是

-

静音状态，true为静音，false为非静音。

-
- -**返回值：** - - - - - - - - - - -

类型

-

说明

-

Promise<void>

-

Promise回调表示成功还是失败。

-
- -**示例：** - -``` -audioManager.mute(audio.AudioVolumeType.MEDIA, true).then(() => - console.log('Promise returned to indicate that the stream is muted.'); -) -``` - -### isMute\(volumeType: AudioVolumeType, callback: AsyncCallback\): void7+ - -获取指定音量流是否被静音，使用callback方式返回异步结果。 - -**参数：** - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

volumeType

-

AudioVolumeType

-

是

-

音量流类型。

-

callback

-

AsyncCallback<boolean>

-

是

-

回调返回流静音状态，true为静音，false为非静音。

-
- -**返回值：** - -无 - -**示例：** - -``` -audioManager.isMute(audio.AudioVolumeType.MEDIA, (err, value) => { - if (err) { - console.error('Failed to obtain the mute status. ${err.message}'); - return; - } - console.log('Callback invoked to indicate that the mute status of the stream is obtained.' + value); -}) -``` - -### isMute\(volumeType: AudioVolumeType\): Promise7+ - -获取指定音量流是否被静音，使用promise方式返回异步结果。 - -**参数：** - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

volumeType

-

AudioVolumeType

-

是

-

音量流类型。

-
- -**返回值：** - - - - - - - - - - -

类型

-

说明

-

Promise<boolean>

-

Promise回调返回流静音状态，true为静音，false为非静音。

-
- -**示例：** - -``` -audioManager.isMute(audio.AudioVolumeType.MEDIA).then((value) => - console.log('Promise returned to indicate that the mute status of the stream is obtained.' + value); -) -``` - -### isActive\(volumeType: AudioVolumeType, callback: AsyncCallback\): void7+ - -获取指定音量流是否为活跃状态，使用callback方式返回异步结果。 - -**参数：** - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

volumeType

-

AudioVolumeType

-

是

-

音量流类型。

-

callback

-

AsyncCallback<boolean>

-

是

-

回调返回流的活跃状态，true为活跃，false为不活跃。

-
- -**返回值：** - -无 - -**示例：** - -``` -audioManager.isActive(audio.AudioVolumeType.MEDIA, (err, value) => { - if (err) { - console.error('Failed to obtain the active status of the stream. ${err.message}'); - return; - } - console.log('Callback invoked to indicate that the active status of the stream is obtained.' + value); -}) -``` - -### isActive\(volumeType: AudioVolumeType\): Promise7+ - -获取指定音量流是否为活跃状态，使用promise方式返回异步结果。 - -**参数：** - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

volumeType

-

AudioVolumeType

-

是

-

音量流类型。

-
- -**返回值：** - - - - - - - - - - -

类型

-

说明

-

Promise<boolean>

-

Promise回调返回流的活跃状态，true为活跃，false为不活跃。

-
- -**示例：** - -``` -audioManager.isActive(audio.AudioVolumeType.MEDIA).then((value) => - console.log('Promise returned to indicate that the active status of the stream is obtained.' + value); -) -``` - -### setRingerMode\(mode: AudioRingMode, callback: AsyncCallback\): void7+ - -设置铃声模式，使用callback方式返回异步结果。 - -**参数：** - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

mode

-

AudioRingMode

-

是

-

音频铃声模式。

-

callback

-

AsyncCallback<void>

-

是

-

回调返回设置成功或失败。

-
- -**返回值：** - -无 - -**示例：** - -``` -audioManager.setRingerMode(audio.AudioRingMode.RINGER_MODE_NORMAL, (err) => { - if (err) { - console.error('Failed to set the ringer mode.​ ${err.message}'); - return; - } - console.log('Callback invoked to indicate a successful setting of the ringer mode.'); -}) -``` - -### setRingerMode\(mode: AudioRingMode\): Promise7+ - -设置铃声模式，使用promise方式返回异步结果。 - -**参数：** - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

mode

-

AudioRingMode

-

是

-

音频铃声模式。

-
- -**返回值：** - - - - - - - - - - -

类型

-

说明

-

Promise<void>

-

Promise回调返回设置成功或失败。

-
- -**示例：** - -``` -audioManager.setRingerMode(audio.AudioRingMode.RINGER_MODE_NORMAL).then(() => - console.log('Promise returned to indicate a successful setting of the ringer mode.'); -) -``` - -### getRingerMode\(callback: AsyncCallback\): void7+ - -获取铃声模式，使用callback方式返回异步结果。 - -**参数：** - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

callback

-

AsyncCallback<AudioRingMode>

-

是

-

回调返回系统的铃声模式。

-
- -**返回值：** - -无 - -**示例：** - -``` -audioManager.getRingerMode((err, value) => { - if (err) { - console.error('Failed to obtain the ringer mode.​ ${err.message}'); - return; - } - console.log('Callback invoked to indicate that the ringer mode is obtained.' + value); -}) -``` - -### getRingerMode\(\): Promise7+ - -获取铃声模式，使用promise方式返回异步结果。 - -**参数：** - -无 - -**返回值：** - - - - - - - - - - -

类型

-

说明

-

Promise<AudioRingerMode>

-

Promise回调返回系统的铃声模式。

-
- -**示例：** - -``` -audioManager.getRingerMode().then((value) => - console.log('Promise returned to indicate that the ringer mode is obtained.' + value); -) -``` - -### setAudioParameter\(key: string, value: string, callback: AsyncCallback\): void7+ - -音频参数设置，使用callback方式返回异步结果。 - -**参数：** - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

key

-

string

-

是

-

被设置的音频参数的键。

-

value

-

string

-

是

-

被设置的音频参数的值。

-

callback

-

AsyncCallback<void>

-

是

-

回调返回设置成功或失败。

-
- -**返回值：** - -无 - -**示例：** - -``` -audioManager.setAudioParameter('PBits per sample', '8 bit', (err) => { - if (err) { - console.error('Failed to set the audio parameter. ${err.message}'); - return; - } - console.log('Callback invoked to indicate a successful setting of the audio parameter.'); -}) -``` - -### setAudioParameter\(key: string, value: string\): Promise7+ - -音频参数设置，使用promise方式返回异步结果。 - -**参数：** - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

key

-

string

-

是

-

被设置的音频参数的键。

-

value

-

string

-

是

-

被设置的音频参数的值。

-
- -**返回值：** - - - - - - - - - - -

类型

-

说明

-

Promise<void>

-

Promise回调返回设置成功或失败。

-
- -**示例：** - -``` -audioManager.setAudioParameter('PBits per sample', '8 bit').then(() => - console.log('Promise returned to indicate a successful setting of the audio parameter.'); -) -``` - -### getAudioParameter\(key: string, callback: AsyncCallback\): void7+ - -获取指定音频参数值，使用callback方式返回异步结果。 - -**参数：** - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

key

-

string

-

是

-

待获取的音频参数的键。

-

callback

-

AsyncCallback<string>

-

是

-

回调返回获取的音频参数的值。

-
- -**返回值：** - -无 - -**示例：** - -``` -audioManager.getAudioParameter('PBits per sample', (err, value) => { - if (err) { - console.error('Failed to obtain the value of the audio parameter. ${err.message}'); - return; - } - console.log('Callback invoked to indicate that the value of the audio parameter is obtained.' + value); -}) -``` - -### getAudioParameter\(key: string\): Promise7+ - -获取指定音频参数值，使用promise方式返回异步结果。 - -**参数：** - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

key

-

string

-

是

-

待获取的音频参数的键。

-
- -**返回值：** - - - - - - - - - - -

类型

-

说明

-

Promise<string>

-

Promise回调返回获取的音频参数的值。

-
- -**示例：** - -``` -audioManager.getAudioParameter('PBits per sample').then((value) => - console.log('Promise returned to indicate that the value of the audio parameter is obtained.' + value); -) -``` - -### getDevices\(deviceFlag: DeviceFlag, callback: AsyncCallback\): void - -获取音频设备列表，使用callback方式返回异步结果。 - -**参数：** - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

deviceFlag

-

DeviceFlag

-

是

-

设备类型的flag。

-

callback

-

AsyncCallback<AudioDeviceDescriptors>

-

是

-

回调，返回设备列表。

-
- -**示例：** - -``` -audioManager.getDevices(audio.DeviceFlag.OUTPUT_DEVICES_FLAG, (err, value)=>{ - if (err) { - console.error('Failed to obtain the device list. ${err.message}'); - return; - } - console.log('Callback invoked to indicate that the device list is obtained.'); -}) -``` - -### getDevices\(deviceFlag: DeviceFlag\): Promise - -获取音频设备列表，使用promise方式返回异步结果。 - -**参数：** - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

deviceFlag

-

DeviceFlag

-

是

-

设备类型的flag。

-
- -**返回值：** - - - - - - - - - - -

类型

-

说明

-

Promise<AudioDeviceDescriptors>

-

Promise回调返回设备列表。

-
- -**示例：** - -``` -audioManager.getDevices(audio.DeviceFlag.OUTPUT_DEVICES_FLAG).then((data)=> - console.log('Promise returned to indicate that the device list is obtained.'); -) -``` - -### setDeviceActive\(deviceType: ActiveDeviceType, active: boolean, callback: AsyncCallback\): void7+ - -设置设备激活状态，使用callback方式返回异步结果。 - -**参数：** - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

deviceType

-

ActiveDeviceType

-

是

-

音频设备类型。

-

active

-

boolean

-

是

-

设备激活状态。

-

callback

-

AsyncCallback<void>

-

是

-

回调返回设置成功或失败。

-
- -**返回值：** - -无 - -**示例：** - -``` -audioManager.setDeviceActive(audio.ActiveDeviceType.SPEAKER, true, (err)=> { - if (err) { - console.error('Failed to set the active status of the device. ${err.message}'); - return; - } - console.log('Callback invoked to indicate that the device is set to the active status.'); -}) -``` - -### setDeviceActive\(deviceType: ActiveDeviceType, active: boolean\): Promise7+ - -设置设备激活状态，使用promise方式返回异步结果。 - -**参数：** - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

deviceType

-

ActiveDeviceType

-

是

-

音频设备类型。

-

active

-

boolean

-

是

-

设备激活状态。

-
- -**返回值：** - - - - - - - - - - -

类型

-

说明

-

Promise<void>

-

Promise回调返回设置成功或失败。

-
- -**示例：** - -``` -audioManager.setDeviceActive(audio.ActiveDeviceType.SPEAKER, true).then(()=> - console.log('Promise returned to indicate that the device is set to the active status.'); -) -``` - -### isDeviceActive\(deviceType: DeviceType, callback: AsyncCallback\): void7+ - -获取指定设备激活状态，使用callback方式返回异步结果。 - -**参数：** - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

deviceType

-

ActiveDeviceType

-

是

-

音频设备类型。

-

callback

-

AsyncCallback<boolean>

-

是

-

回调返回设备的激活状态。

-
- -**返回值：** - -无 - -**示例：** - -``` -audioManager.isDeviceActive(audio.ActiveDeviceType.SPEAKER, (err, value) => { - if (err) { - console.error('Failed to obtain the active status of the device. ${err.message}'); - return; - } - console.log('Callback invoked to indicate that the active status of the device is obtained.'); -}) -``` - -### isDeviceActive\(deviceType: ActiveDeviceType\): Promise7+ - -获取指定设备激活状态，使用promise方式返回异步结果。 - -**参数：** - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

deviceType

-

ActiveDeviceType

-

是

-

音频设备类型。

-
- -**返回值：** - - - - - - - - - - -

Type

-

Description

-

Promise<boolean>

-

Promise回调返回设备的激活状态。

-
- -**示例：** - -``` -audioManager.isDeviceActive(audio.ActiveDeviceType.SPEAKER).then((value) => - console.log('Promise returned to indicate that the active status of the device is obtained.' + value); -) -``` - -### setMicrophoneMute\(mute: boolean, callback: AsyncCallback\): void7+ - -设置麦克风静音状态，使用callback方式返回异步结果。 - -**参数：** - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

mute

-

boolean

-

是

-

待设置的静音状态，true为静音，false为非静音。

-

callback

-

AsyncCallback<void>

-

是

-

回调返回设置成功或失败。

-
- -**返回值：** - -无 - -**示例：** - -``` -audioManager.setMicrophoneMute(true, (err) => { - if (err) { - console.error('Failed to mute the microphone. ${err.message}'); - return; - } - console.log('Callback invoked to indicate that the microphone is muted.'); -}) -``` - -### setMicrophoneMute\(mute: boolean\): Promise7+ - -设置麦克风静音状态，使用promise方式返回异步结果。 - -**参数：** - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

mute

-

boolean

-

是

-

待设置的静音状态，true为静音，false为非静音。

-
- -**返回值：** - - - - - - - - - - -

类型

-

说明

-

Promise<void>

-

Promise回调返回设置成功或失败。

-
- -**示例：** - -``` -audioManager.setMicrophoneMute(true).then(() => - console.log('Promise returned to indicate that the microphone is muted.'); -) -``` - -### isMicrophoneMute\(callback: AsyncCallback\): void7+ - -获取麦克风静音状态，使用callback方式返回异步结果。 - -**参数：** - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

callback

-

AsyncCallback<boolean>

-

是

-

回调返回系统麦克风静音状态，true为静音，false为非静音。

-
- -**返回值：** - -无 - -**示例：** - -``` -audioManager.isMicrophoneMute((err, value) => { - if (err) { - console.error('Failed to obtain the mute status of the microphone. ${err.message}'); - return; - } - console.log('Callback invoked to indicate that the mute status of the microphone is obtained.' + value); -}) -``` - -### isMicrophoneMute\(\): Promise7+ - -获取麦克风静音状态，使用promise方式返回异步结果。 - -**参数：** - -无 - -**返回值：** - - - - - - - - - - -

类型

-

说明

-

Promise<boolean>

-

Promise回调返回系统麦克风静音状态，true为静音，false为非静音。

-
- -**示例：** - -``` -audioManager.isMicrophoneMute().then((value) => - console.log('Promise returned to indicate that the mute status of the microphone is obtained.', + value); -) -``` - -## AudioDeviceDescriptor - -描述音频设备。 - -### 属性 - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数型

-

可读

-

可写

-

说明

-

deviceRole

-

DeviceRole

-

是

-

否

-

设备角色。

-

deviceType

-

DeviceType

-

是

-

否

-

设备类型。

-
- -## AudioDeviceDescriptors - - - - - - - - - - -

名称

-

描述

-

设备属性数组

-

AudioDeviceDescriptor的数组，只读。

-
- diff --git "a/zh-cn/application-dev/js-reference/\351\241\265\351\235\242\350\267\257\347\224\261.md" "b/zh-cn/application-dev/js-reference/\351\241\265\351\235\242\350\267\257\347\224\261.md" deleted file mode 100755 index 1ded00dc58d927f1a60dd44dd09caa4dc0819366..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/js-reference/\351\241\265\351\235\242\350\267\257\347\224\261.md" +++ /dev/null @@ -1,315 +0,0 @@ -# 页面路由 - -- [导入模块](#zh-cn_topic_0000001058340511_s0e7b1e85a4274f58a8206e0b065bd80c) -- [权限列表](#zh-cn_topic_0000001058340511_section11257113618419) -- [router.push\(OBJECT\)](#zh-cn_topic_0000001058340511_s938bf8d664f9475485e83d445c0eeeae) -- [router.replace\(OBJECT\)](#zh-cn_topic_0000001058340511_s6d485e6ae3064996a4de2f407bc4287d) -- [router.back\(OBJECT\)](#zh-cn_topic_0000001058340511_s3f958a02dde141e69b7f02f22fb2e401) -- [router.clear\(\)](#zh-cn_topic_0000001058340511_sa5c3dfd1bb0d4b43906c3d770d6ab2d9) -- [router.getLength\(\)](#zh-cn_topic_0000001058340511_s3f121f4005934fda9a1830a909c92c25) -- [router.getState\(\)](#zh-cn_topic_0000001058340511_s8843a443a12048e68e33f586aee8dc34) - ->![](public_sys-resources/icon-notice.gif) **须知：** ->页面路由需要在页面渲染完成之后才能调用，在onInit和onReady生命周期中页面还处于渲染阶段，禁止调用页面路由方法。 - -## 导入模块 - -``` -import router from '@system.router'; -``` - -## 权限列表 - -无 - -## router.push\(OBJECT\) - -跳转到应用内的指定页面。 - -- 参数 - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

uri

-

string

-

是

-

表示目标页面的uri，可以用以下两种格式：

-
  • 页面绝对路径，由配置文件中pages列表提供，例如：
    • pages/index/index
    • pages/detail/detail
    -
  • 特殊值，如果uri的值是"/"，则跳转到首页。
-

params

-

Object

-

否

-

跳转时要同时传递到目标页面的数据，跳转到目标页面后，参数可以在页面中直接使用，如this.data1(data1为跳转时params参数中的key值)。如果目标页面中已有该字段，则其值会被传入的字段值覆盖。

-
- -- 示例 - - ``` - // 在当前页面中 - export default { - pushPage() { - router.push({ - uri: 'pages/routerpage2/routerpage2', - params: { - data1: 'message', - data2: { - data3: [123, 456, 789] - }, - }, - }); - } - } - // 在routerpage2页面中 - export default { - data: { - data1: 'default', - data2: { - data3: [1, 2, 3] - } - }, - onInit() { - console.info('showData1:' + this.data1); - console.info('showData3:' + this.data2.data3); - } - } - ``` - - >![](public_sys-resources/icon-note.gif) **说明：** - >页面路由栈支持的最大Page数量为32。 - - -## router.replace\(OBJECT\) - -用应用内的某个页面替换当前页面，并销毁被替换的页面。 - -- 参数 - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

uri

-

string

-

是

-

目标页面的uri，可以是以下的两种格式：

-
  • 页面绝对路径，由配置文件中pages列表提供，例如：
    • pages/index/index
    • pages/detail/detail
    -
  • 特殊值，如果uri的值是"/"，则跳转到首页。
-

params

-

Object

-

否

-

跳转时要同时传递到目标页面的数据，跳转到目标页面后，参数可以在页面中直接使用，如this.data1(data1为跳转时params参数中的key值)。如果目标页面中已有该字段，则其值会被传入的字段值覆盖。

-
- -- 示例 - - ``` - // 在当前页面中 - export default { - replacePage() { - router.replace({ - uri: 'pages/detail/detail', - params: { - data1: 'message', - }, - }); - } - } - // 在detail页面中 - export default { - data: { - data1: 'default' - }, - onInit() { - console.info('showData1:' + this.data1) - } - } - ``` - - -## router.back\(OBJECT\) - -返回上一页面或指定的页面。 - -- 参数 - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

uri

-

string

-

否

-

返回到指定uri的界面，如果页面栈上没有uri页面，则不响应该情况。如果uri未设置，则返回上一页。

-
- -- 示例 - - ``` - // index页面 - router.push({ - uri: 'pages/detail/detail', - }); - - // detail页面 - router.push({ - uri: 'pages/mall/mall', - }); - - // mall页面通过back，将返回detail页面 - router.back(); - // detail页面通过back，将返回index页面 - router.back(); - // 通过back，返回到detail页面 - router.back({uri:'pages/detail/detail'}); - ``` - - >![](public_sys-resources/icon-note.gif) **说明：** - >示例中的uri字段是页面路由，由配置文件中的pages列表指定。 - - -## router.clear\(\) - -清空页面栈中的所有历史页面，仅保留当前页面作为栈顶页面。 - -- 参数 - - 无。 - -- 示例 - - ``` - router.clear(); - ``` - - -## router.getLength\(\) - -获取当前在页面栈内的页面数量。 - -- 返回值 - - - - - - - - - - -

类型

-

说明

-

string

-

页面数量，页面栈支持最大数值是32。

-
- -- 示例 - - ``` - var size = router.getLength(); - console.log('pages stack size = ' + size); - ``` - - -## router.getState\(\) - -获取当前页面的状态信息。 - -- 返回值 - - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

说明

-

index

-

number

-

表示当前页面在页面栈中的索引。

-
说明：

从栈底到栈顶，index从1开始递增。

-
-

name

-

string

-

表示当前页面的名称，即对应文件名。

-

path

-

string

-

表示当前页面的路径。

-
- -- 示例 - - ``` - var page = router.getState(); - console.log('current index = ' + page.index); - console.log('current name = ' + page.name); - console.log('current path = ' + page.path); - ``` - - diff --git a/zh-cn/application-dev/media/Readme-CN.md b/zh-cn/application-dev/media/Readme-CN.md index 3de9157b32cc71153bbd1dbbef20f29bba6dc6a5..455153bc1f59280c64862a45d903d2d0e37ee3e4 100755 --- a/zh-cn/application-dev/media/Readme-CN.md +++ b/zh-cn/application-dev/media/Readme-CN.md @@ -1,7 +1,8 @@ # 媒体 -- [音频](音频.md) - - [音频开发概述](音频开发概述.md) - - [音频播放开发指导](音频播放开发指导.md) - - [音频管理开发指导](音频管理开发指导.md) +- [音频](audio.md) + - [音频开发概述](audio-overview.md) + - [音频播放开发指导](audio-playback.md) + - [音频管理开发指导](audio-management.md) + - [音频录制开发指导](audio-recorder.md) diff --git "a/zh-cn/application-dev/media/\351\237\263\351\242\221\347\256\241\347\220\206\345\274\200\345\217\221\346\214\207\345\257\274.md" b/zh-cn/application-dev/media/audio-management.md similarity index 98% rename from "zh-cn/application-dev/media/\351\237\263\351\242\221\347\256\241\347\220\206\345\274\200\345\217\221\346\214\207\345\257\274.md" rename to zh-cn/application-dev/media/audio-management.md index 11a8fc38d8e7c8376140587a83d9b663bcea47a5..266eb37ed4f31bbc4b2451cfb8fd5462d8cd0d8b 100644 --- "a/zh-cn/application-dev/media/\351\237\263\351\242\221\347\256\241\347\220\206\345\274\200\345\217\221\346\214\207\345\257\274.md" +++ b/zh-cn/application-dev/media/audio-management.md @@ -24,9 +24,9 @@

获得音频管理器。

AudioManager

+

AudioManager

音频管理器。

+

音频管理器。具体参考表 音频管理相关的interface AudioManager。

AudioDeviceDescriptor

@@ -57,7 +57,7 @@
-**表 2** 音频管理相关的interface AudioManager +**表 2** 音频管理相关的interface **AudioManager** - -

接口名

diff --git "a/zh-cn/application-dev/media/\351\237\263\351\242\221\345\274\200\345\217\221\346\246\202\350\277\260.md" b/zh-cn/application-dev/media/audio-overview.md old mode 100755 new mode 100644 similarity index 95% rename from "zh-cn/application-dev/media/\351\237\263\351\242\221\345\274\200\345\217\221\346\246\202\350\277\260.md" rename to zh-cn/application-dev/media/audio-overview.md index a97d2a26817ff5da516823a782ee30f7072b3f98..a7fd845931212d0eab6c4e3a39d19e70f9ef1fa2 --- "a/zh-cn/application-dev/media/\351\237\263\351\242\221\345\274\200\345\217\221\346\246\202\350\277\260.md" +++ b/zh-cn/application-dev/media/audio-overview.md @@ -4,8 +4,8 @@ OpenHarmony音频模块支持音频业务的开发，提供音频相关的功能，主要包括音频播放、音量管理等。 ->![](public_sys-resources/icon-note.gif) **说明：** ->由于权限问题，此部分功能在标准系统暂不可用，待更新。 +>![](../public_sys-resources/icon-note.gif) **说明：** +>由于权限问题，此部分功能在标准系统暂不可用。 ## 基本概念 diff --git "a/zh-cn/application-dev/media/\351\237\263\351\242\221\346\222\255\346\224\276\345\274\200\345\217\221\346\214\207\345\257\274.md" b/zh-cn/application-dev/media/audio-playback.md old mode 100755 new mode 100644 similarity index 94% rename from "zh-cn/application-dev/media/\351\237\263\351\242\221\346\222\255\346\224\276\345\274\200\345\217\221\346\214\207\345\257\274.md" rename to zh-cn/application-dev/media/audio-playback.md index 4bf8fc7269c5664de3c93c1c390245de98db2d93..26fc1ceccdacb7fbb84b1fee85b1e2b8fbe5261d --- "a/zh-cn/application-dev/media/\351\237\263\351\242\221\346\222\255\346\224\276\345\274\200\345\217\221\346\214\207\345\257\274.md" +++ b/zh-cn/application-dev/media/audio-playback.md @@ -26,15 +26,15 @@

创建AudioPlayer实例。

AudioPlayer

+

AudioPlayer

提供音频播放相关功能。

+

提供音频播放相关功能，具体见表 音频播放相关的interface AudioPlayer。
-**表 2** 音频播放相关的interface AudioPlayer +**表 2** 音频播放相关的interface **AudioPlayer** - - - - - - - - - @@ -154,10 +154,11 @@ 1. 创建音频播放器。 ``` + import media from '@ohos.multimedia.media'; var player = media.createAudioPlayer(); ``` -2. 设置消息监听事件。 +2. 设置消息订阅事件。 ``` player.on('play', (err, action) => { diff --git a/zh-cn/application-dev/media/audio-recorder.md b/zh-cn/application-dev/media/audio-recorder.md new file mode 100644 index 0000000000000000000000000000000000000000..c5262d67f16e999307fc0bfc3deb48fb9f3b4b11 --- /dev/null +++ b/zh-cn/application-dev/media/audio-recorder.md @@ -0,0 +1,267 @@ +# 音频录制开发指导 + +- [场景介绍](#section910413166166) +- [接口说明](#section1225204317126) + +## 场景介绍 + +音频录制的主要工作是将音频信号记录并保存下来，同时提供包括采样率、声道数、码率、编码格式、封装格式、文件路径等设置功能。 + +## 接口说明 + +**表 1** media + + +

接口名

@@ -105,47 +105,47 @@

on('play', function callback)

监听音频播放开始事件。

+

订阅音频播放开始事件。

on('pause', function callback)

监听音频播放暂停事件。

+

订阅音频播放暂停事件。

on('stop', function callback)

监听音频播放停止事件。

+

订阅音频播放停止事件。

on('reset', function callback)

监听音频播放重置事件。

+

订阅音频播放重置事件。

on('finish',function callback)

监听音频播放结束事件。

+

订阅音频播放结束事件。

on('error', function callback)

监听音频播放错误事件。

+

订阅音频播放错误事件。

on('dataload', function callback)

监听音频播放加载数据事件。

+

订阅音频播放加载数据事件。

on('volumeChange', function callback)

监听音频播放音量变化事件。

+

订阅音频播放音量变化事件。

on('timeUpdate', function callback)

监听音频播放进度改变事件。

+

订阅音频播放进度改变事件。
+ + + + + + + + + + + + + +

接口名

+

描述

+

media.createAudioRecorder()

+

创建AudioRecorder实例。

+

AudioRecorder

+

提供音频录制相关功能。

+

AudioRecorderConfig

+

提供音频录制相关参数设置。

+
+ +**表 2** 音频录制相关的interface AudioRecorder + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

接口名

+

描述

+

prepare(config: AudioRecorderConfig): void

+

准备音频录制并设置参数。

+

start(): void

+

开始音频录制。

+

pause(): void

+

暂停音频录制。(暂不支持)

+

resume(): void

+

恢复音频录制。(暂不支持)

+

stop(): void

+

停止音频录制。

+

release(): void

+

释放音频录制资源。

+

reset(): void

+

重置音频录制。

+

on('prepare', function callback)

+

订阅音频录制准备事件。

+

on('start', function callback)

+

订阅音频录制开始事件。

+

on('pause', function callback)

+

订阅音频录制暂停事件。

+

on('resume', function callback)

+

订阅音频录制恢复事件。

+

on('stop',function callback)

+

订阅音频录制结束事件。

+

on('release', function callback)

+

订阅音频录制释放资源事件。

+

on('reset', function callback)

+

订阅音频录制重置事件。

+

on('error', function callback)

+

订阅音频录制错误事件。

+
+ +**表 3** 音频录制的相关参数的interface AudioRecorderConfig + + + + + + + + + + + + + + + + + + + + + + + + + +

接口名

+

描述

+

audioEncoder?: AudioEncoder

+

音频编码格式,默认值是AAC_LC。

+

audioEncodeBitRate?: number

+

音频编码的比特率，默认值为48000。

+

audioSampleRate?: number

+

音频编码的采样率，默认值为48000。

+

numberOfChannels?：number

+

音频的声道数，默认值为2。

+

format?: AudioOutputFormat

+

音频的输出格式，默认值是MPEG_4。

+

uri: string

+

音频的输出路径。（file://path 或者 file://fd）

+
+ +**表 4** AudioEncoder的相关参数的interface AudioEncoder + + + + + + + + + + +

接口名

+

描述

+

AAC_LC = 3

+

表示AAC_LC编码格式。

+
+ +**表 5** 音频输出格式的相关参数的interface AudioOutputFormat + + + + + + + + + + + + + +

接口名

+

描述

+

MPEG_4 = 2

+

表示MPEG_4编码格式。

+

AAC_ADTS= 6

+

表示AAC_ADTS编码格式。

+
+ +1. 创建音频录制器。 + + ``` + import media from '@ohos.multimedia.media'; + var recorder = media.createAudioRecorder(); + ``` + +2. 准备音频录制参数。 + + ``` + let audioRecorderConfig = { + audioEncoder : AAC_LC , + audioEncodeBitRate : 22050, + audioSampleRate : 22050, + numberOfChannels : 2, + format : AAC_ADTS, + uri : 'file:///data/accounts/account_0/appdata/appdata/recorder/test.m4a', + } + recorder.prepare(audioRecorderConfig); + ``` + +3. 设置消息订阅事件。 + + ``` + recorder.on('prepare', () => { + console.info('setCallback prepare() case callback is called'); + recorder.start(); + }); + recorder.on('start', () => { + console.info('setCallback start() case callback is called'); + setTimeout(function(){ + recorder.pause(); + }, 10000); // 开始录音10秒后，暂停录音。 + }); + recorder.on('pause', () => { + console.info('setCallback pause() case callback is called'); + setTimeout(function(){ + recorder.resume(); + }, 10000); // 暂停录音10秒后，恢复录音。 + }); + recorder.on('resume', () => { + console.info('setCallback resume() case callback is called'); + setTimeout(function(){ + recorder.stop(); + }, 10000); // 恢复录音10秒后，停止录音。 + }); + recorder.on('stop', () => { + console.info('setCallback stop() case callback is called'); + recorder.release(); + }); + recorder.on('release', () => { + console.info('setCallback release() case callback is called'); + }); + recorder.on('error', (err) => { + console.info(`case error called,errCode is ${err.code}`); + console.info(`case error called,errMessage is ${err.message}`); + recorder.reset(); + }); + ``` + + diff --git a/zh-cn/application-dev/media/audio.md b/zh-cn/application-dev/media/audio.md new file mode 100644 index 0000000000000000000000000000000000000000..6a65ab2c8f643c56f8dca6dafad96ca4ece338af --- /dev/null +++ b/zh-cn/application-dev/media/audio.md @@ -0,0 +1,11 @@ +# 音频 + +- **[音频开发概述](audio-overview.md)** + +- **[音频播放开发指导](audio-playback.md)** + +- **[音频管理开发指导](audio-management.md)** + +- **[音频录制开发指导](audio-recorder.md)** + + diff --git a/zh-cn/application-dev/media/public_sys-resources/icon-caution.gif b/zh-cn/application-dev/media/public_sys-resources/icon-caution.gif deleted file mode 100755 index 6e90d7cfc2193e39e10bb58c38d01a23f045d571..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/media/public_sys-resources/icon-caution.gif and /dev/null differ diff --git a/zh-cn/application-dev/media/public_sys-resources/icon-danger.gif b/zh-cn/application-dev/media/public_sys-resources/icon-danger.gif deleted file mode 100755 index 6e90d7cfc2193e39e10bb58c38d01a23f045d571..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/media/public_sys-resources/icon-danger.gif and /dev/null differ diff --git a/zh-cn/application-dev/media/public_sys-resources/icon-note.gif b/zh-cn/application-dev/media/public_sys-resources/icon-note.gif deleted file mode 100755 index 6314297e45c1de184204098efd4814d6dc8b1cda..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/media/public_sys-resources/icon-note.gif and /dev/null differ diff --git a/zh-cn/application-dev/media/public_sys-resources/icon-notice.gif b/zh-cn/application-dev/media/public_sys-resources/icon-notice.gif deleted file mode 100755 index 86024f61b691400bea99e5b1f506d9d9aef36e27..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/media/public_sys-resources/icon-notice.gif and /dev/null differ diff --git a/zh-cn/application-dev/media/public_sys-resources/icon-tip.gif b/zh-cn/application-dev/media/public_sys-resources/icon-tip.gif deleted file mode 100755 index 93aa72053b510e456b149f36a0972703ea9999b7..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/media/public_sys-resources/icon-tip.gif and /dev/null differ diff --git a/zh-cn/application-dev/media/public_sys-resources/icon-warning.gif b/zh-cn/application-dev/media/public_sys-resources/icon-warning.gif deleted file mode 100755 index 6e90d7cfc2193e39e10bb58c38d01a23f045d571..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/media/public_sys-resources/icon-warning.gif and /dev/null differ diff --git "a/zh-cn/application-dev/media/\351\237\263\351\242\221.md" "b/zh-cn/application-dev/media/\351\237\263\351\242\221.md" deleted file mode 100755 index a218dc31e2676c2deffacc9f9900b349d10f3a66..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/media/\351\237\263\351\242\221.md" +++ /dev/null @@ -1,9 +0,0 @@ -# 音频 - -- **[音频开发概述](音频开发概述.md)** - -- **[音频播放开发指导](音频播放开发指导.md)** - -- **[音频管理开发指导](音频管理开发指导.md)** - - diff --git a/zh-cn/application-dev/connectivity/public_sys-resources/icon-caution.gif b/zh-cn/application-dev/public_sys-resources/icon-caution.gif old mode 100755 new mode 100644 similarity index 100% rename from zh-cn/application-dev/connectivity/public_sys-resources/icon-caution.gif rename to zh-cn/application-dev/public_sys-resources/icon-caution.gif diff --git a/zh-cn/application-dev/connectivity/public_sys-resources/icon-danger.gif b/zh-cn/application-dev/public_sys-resources/icon-danger.gif old mode 100755 new mode 100644 similarity index 100% rename from zh-cn/application-dev/connectivity/public_sys-resources/icon-danger.gif rename to zh-cn/application-dev/public_sys-resources/icon-danger.gif diff --git a/zh-cn/application-dev/connectivity/public_sys-resources/icon-note.gif b/zh-cn/application-dev/public_sys-resources/icon-note.gif old mode 100755 new mode 100644 similarity index 100% rename from zh-cn/application-dev/connectivity/public_sys-resources/icon-note.gif rename to zh-cn/application-dev/public_sys-resources/icon-note.gif diff --git a/zh-cn/application-dev/connectivity/public_sys-resources/icon-notice.gif b/zh-cn/application-dev/public_sys-resources/icon-notice.gif old mode 100755 new mode 100644 similarity index 100% rename from zh-cn/application-dev/connectivity/public_sys-resources/icon-notice.gif rename to zh-cn/application-dev/public_sys-resources/icon-notice.gif diff --git a/zh-cn/application-dev/connectivity/public_sys-resources/icon-tip.gif b/zh-cn/application-dev/public_sys-resources/icon-tip.gif old mode 100755 new mode 100644 similarity index 100% rename from zh-cn/application-dev/connectivity/public_sys-resources/icon-tip.gif rename to zh-cn/application-dev/public_sys-resources/icon-tip.gif diff --git a/zh-cn/application-dev/connectivity/public_sys-resources/icon-warning.gif b/zh-cn/application-dev/public_sys-resources/icon-warning.gif old mode 100755 new mode 100644 similarity index 100% rename from zh-cn/application-dev/connectivity/public_sys-resources/icon-warning.gif rename to zh-cn/application-dev/public_sys-resources/icon-warning.gif diff --git "a/zh-cn/application-dev/quick-start/DevEco-Studio\357\274\210OpenHarmony\357\274\211\344\275\277\347\224\250\346\214\207\345\215\227.md" "b/zh-cn/application-dev/quick-start/DevEco-Studio\357\274\210OpenHarmony\357\274\211\344\275\277\347\224\250\346\214\207\345\215\227.md" deleted file mode 100644 index e6197342ac3d774849033892b4d98f71b62715c4..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/quick-start/DevEco-Studio\357\274\210OpenHarmony\357\274\211\344\275\277\347\224\250\346\214\207\345\215\227.md" +++ /dev/null @@ -1,13 +0,0 @@ -# DevEco Studio（OpenHarmony）使用指南 - -- **[概述](概述.md)** - -- **[配置OpenHarmony SDK](配置OpenHarmony-SDK.md)** - -- **[创建OpenHarmony工程](创建OpenHarmony工程.md)** - -- **[配置OpenHarmony应用签名信息](配置OpenHarmony应用签名信息.md)** - -- **[安装运行OpenHarmony应用](安装运行OpenHarmony应用.md)** - - diff --git a/zh-cn/application-dev/quick-start/Readme-CN.md b/zh-cn/application-dev/quick-start/Readme-CN.md index 4639968354201c23b7d178ec7283c0a02f923c6a..dde1c37653905335588ace7ff51a7bcdc1c4b875 100755 --- a/zh-cn/application-dev/quick-start/Readme-CN.md +++ b/zh-cn/application-dev/quick-start/Readme-CN.md @@ -1,14 +1,17 @@ # 入门 -- [DevEco Studio（OpenHarmony）使用指南](DevEco-Studio（OpenHarmony）使用指南.md) - - [概述](概述.md) - - [配置OpenHarmony SDK](配置OpenHarmony-SDK.md) - - [创建OpenHarmony工程](创建OpenHarmony工程.md) - - [配置OpenHarmony应用签名信息](配置OpenHarmony应用签名信息.md) - - [安装运行OpenHarmony应用](安装运行OpenHarmony应用.md) - -- [包结构说明](包结构说明.md) -- [快速入门](快速入门.md) - - [开发准备](开发准备.md) - - [使用JS语言开发](使用JS语言开发.md) +- [DevEco Studio（OpenHarmony）使用指南](deveco-studio-user-guide-for-openharmony.md) + - [概述](deveco-studio-overview.md) + - [版本变更说明](deveco-studio-release-notes.md) + - [配置OpenHarmony SDK](configuring-openharmony-sdk.md) + - [创建OpenHarmony工程](create-openharmony-project.md) + - [使用工程向导创建新工程](use-wizard-to-create-project.md) + - [通过导入Sample方式创建新工程](import-sample-to-create-project.md) + + - [配置OpenHarmony应用签名信息](configuring-openharmony-app-signature.md) + - [安装运行OpenHarmony应用](installing-openharmony-app.md) +- [包结构说明](package-structure.md) +- [快速入门](start.md) + - [开发准备](start-overview.md) + - [使用JS语言开发](start-with-js.md) diff --git "a/zh-cn/application-dev/quick-start/\351\205\215\347\275\256OpenHarmony\345\272\224\347\224\250\347\255\276\345\220\215\344\277\241\346\201\257.md" b/zh-cn/application-dev/quick-start/configuring-openharmony-app-signature.md similarity index 91% rename from "zh-cn/application-dev/quick-start/\351\205\215\347\275\256OpenHarmony\345\272\224\347\224\250\347\255\276\345\220\215\344\277\241\346\201\257.md" rename to zh-cn/application-dev/quick-start/configuring-openharmony-app-signature.md index e7eab4d4015f27d2aba93ab08de86e89957bff26..2b6c107342a99b5d295b52c64a1564bc9117c94a 100644 --- "a/zh-cn/application-dev/quick-start/\351\205\215\347\275\256OpenHarmony\345\272\224\347\224\250\347\255\276\345\220\215\344\277\241\346\201\257.md" +++ b/zh-cn/application-dev/quick-start/configuring-openharmony-app-signature.md @@ -17,7 +17,7 @@ OpenHarmony应用通过数字证书（.cer文件）和Profile文件（.p7b文件 使用[生成密钥和证书请求文件](#section153146467405)中生成的证书请求文件，来生成应用签名所需的数字证书文件。生成方法如下： -进入DevEco Studio安装目录的**Sdk\\toolchains\\lib**文件夹下（该SDK目录只能是OpenHarmony SDK，配置方法可参考[配置OpenHarmony SDK](配置OpenHarmony-SDK.md)），打开命令行工具，执行如下命令（如果keytool命令不能执行，请在系统环境变量中添加JDK的环境变量）。其中，只需要修改输入和输出即可快速生成证书文件，即修改**-infile**指定证书请求文件csr文件路径，**-outfile**指定输出证书文件名及路径。 +进入DevEco Studio安装目录的**Sdk\\toolchains\\lib**文件夹下（该SDK目录只能是OpenHarmony SDK，配置方法可参考[配置OpenHarmony SDK](configuring-openharmony-sdk.md)），打开命令行工具，执行如下命令（如果keytool命令不能执行，请在系统环境变量中添加JDK的环境变量）。其中，只需要修改输入和输出即可快速生成证书文件，即修改**-infile**指定证书请求文件csr文件路径，**-outfile**指定输出证书文件名及路径。 ``` keytool -gencert -alias "OpenHarmony Application CA" -infile myApplication_ohos.csr -outfile myApplication_ohos.cer -keystore OpenHarmony.p12 -sigalg SHA384withECDSA -storepass 123456 -ext KeyUsage:"critical=digitalSignature" -validity 3650 -rfc @@ -58,7 +58,7 @@ java -jar provisionsigtool.jar sign --in UnsgnedReleasedProfileTemplate.json --o - **validity**：证书有效期，自定义天数。 - **developer-id**：开发者标识符，自定义一个字符串。 - **bundle-name**：填写应用包名。 -- **permission**：可选字段，如果不需要，则可以省去此字段；如果需要添加多个受限权限，则如示例所示重复输入。受限权限列表如下：ohos.permission.READ\_CONTACTS、ohos.permission.WRITE\_CONTACTS。 +- **permission**：可选字段，如果不需要，则可以不用填写此字段；如果需要添加多个受限权限，则如示例所示重复输入。受限权限列表如下：ohos.permission.READ\_CONTACTS、ohos.permission.WRITE\_CONTACTS。 - **distribution-certificate**：[生成应用证书文件](#section136609429562)中生成的证书文件。 ## 配置应用签名信息 diff --git a/zh-cn/application-dev/quick-start/configuring-openharmony-sdk.md b/zh-cn/application-dev/quick-start/configuring-openharmony-sdk.md new file mode 100644 index 0000000000000000000000000000000000000000..7df6f77927e804d2d78b02852a6a23f44f4f68d9 --- /dev/null +++ b/zh-cn/application-dev/quick-start/configuring-openharmony-sdk.md @@ -0,0 +1,193 @@ +# 配置OpenHarmony SDK + +- [前提条件](#section164161442154812) +- [配置SDK信息](#section1265592425017) +- [参考信息](#section0384143616409) + - [配置DevEco Studio代理](#section10129720184214) + - [配置NPM代理](#section19984059114316) + - [设置Gradle代理](#section164211820465) + + +在设置OpenHarmony应用开发环境时，需要开发者在DevEco Studio中配置对应的SDK信息。 + +>![](../public_sys-resources/icon-note.gif) **说明：** +>请注意，OpenHarmony SDK版本精简了部分工具链，因此不适用于HarmonyOS应用开发。 + +## 前提条件 + +已下载并安装好DevEco Studio 3.0 Beta1及以上版本，点击[链接下载](https://developer.harmonyos.com/cn/develop/deveco-studio#download)。 + +## 配置SDK信息 + +DevEco Studio通过SDK Manager统一管理SDK及工具链，OpenHarmony包含如下SDK包： + + + + + + + + + + + + + + + + + + + +

类别

+

包名

+

说明

+

SDK

+

JS

+

JS语言SDK包。

+

SDK Tool

+

Toolchains

+

SDK工具链，OpenHarmony应用开发必备工具集，包括编译、打包、签名、数据库管理等工具的集合。

+

Previewer

+

OpenHarmony应用预览器，可以在应用开发过程中查看界面UI布局效果。

+
+ +1. 运行已安装的DevEco Studio，首次使用，请选择**Do not import settings**，点击OK。 +2. 进入配置向导页面，设置**npm registry**，DevEco Studio已预置对应的仓，直接点击**Start using DevEco Studio**进入下一步。 + + >![](../public_sys-resources/icon-note.gif) **说明：** + >如果配置向导界面出现的是设置**Set up HTTP Proxy**界面，说明网络受限，请根据[参考信息](#section0384143616409)配置DevEco Studio代理、NPM代理和Gradle代理后，再下载OpenHarmony SDK。 + + ![](figures/zh-cn_image_0000001163314102.png) + +3. DevEco Studio向导指引开发者下载SDK，默认下载OpenHarmony SDK。SDK下载到user目录下，也可以指定对应的存储路径，SDK存储路径不支持中文字符，然后点击**Next**。 + + ![](figures/zh-cn_image_0000001208394019.png) + + >![](../public_sys-resources/icon-note.gif) **说明：** + >如果不是首次安装DevEco Studio，可能无法查看进入该界面，可通过欢迎页的**Configure （或**![](figures/zh-cn_image_0000001208274069.png)**图标）\> Settings \> SDK Manager \> OpenHarmony SDK**界面，点击**OpenHarmony SDK Location**加载SDK。 + +4. 在弹出的SDK下载信息页面，点击**Next**，并在弹出的**License Agreement**窗口，点击**Accept**开始下载SDK。 + + >![](../public_sys-resources/icon-note.gif) **说明：** + >下载SDK过程中，如果出现下载JS SDK失败，提示“Install js dependencies failed”，请根据[JS SDK安装失败处理指导](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/faq-development-environment-0000001168829643#section1311117111474)进行处理。 + + ![](figures/zh-cn_image_0000001163472654.png) + +5. 等待OpenHarmony SDK及工具下载完成，点击**Finish**，界面会进入到DevEco Studio欢迎页。 + + ![](figures/zh-cn_image_0000001163632602.png) + + +## 参考信息 + +DevEco Studio开发环境需要依赖于网络环境，需要连接上网络才能确保工具的正常使用。 + +一般来说，如果使用的是个人或家庭网络，是不需要设置代理信息的；只有部分企业网络受限的情况下，才需要设置代理信息。 + +如果是第一次打开DevEco Studio，配置向导界面出现设置**Set up HTTP Proxy**界面，说明网络受限，可以通过配置代理的方式来解决，需要配置DevEco Studio代理、NPM代理和Gradle代理。 + +![](figures/zh-cn_image_0000001123021842.png) + +### 配置DevEco Studio代理 + +1. 启动DevEco Studio，配置向导进入**Set up HTTP Proxy**界面，勾选**Manual proxy configuration**，设置DevEco Studio的HTTP Proxy。 + + >![](../public_sys-resources/icon-note.gif) **说明：** + >如果非首次设置向导进入HTTP Proxy，可以通过如下方式进入HTTP Proxy配置界面： + >- 在欢迎页点击**Configure（或**![](figures/zh-cn_image_0000001122862128.png)**图标） \> Settings \> Appearance & Behavior \> System Settings \> HTTP Proxy**进入HTTP Proxy设置界面（Mac系统为**Configure \> Preferences \> Appearance & Behavior \> System Settings \> HTTP Proxy**）。 + >- 在打开了工程的情况下，可以点击**File \> Settings \> Appearance & Behavior \> System Settings \> HTTP Proxy**进入HTTP Proxy设置界面（Mac系统为**DevEco Studio \> Preferences \> Appearance & Behavior \> System Settings \> HTTP Proxy**） + + - **HTTP**配置项，设置代理服务器信息。**如果不清楚代理服务器信息，可以咨询你们的网络管理人员**。 + - **Host name**：代理服务器主机名或IP地址。 + - **Port number**：代理服务器对应的端口号。 + - **No proxy for**：不需要通过代理服务器访问的URL或者IP地址（地址之间用英文逗号分隔）。 + + - **Proxy authentication**配置项，如果代理服务器需要通过认证鉴权才能访问，则需要设置。否则，请跳过该配置项。 + - **Login**：访问代理服务器的用户名。 + - **Password**：访问代理服务器的密码。 + - **Remember**：勾选，记住密码。 + + ![](figures/zh-cn_image_0000001123021962.png) + +2. 配置完成后，点击**Check connection**，输入网络地址（如：https://developer.harmonyos.com），检查网络连通性。提示“Connection successful“表示代理设置成功。 +3. 点击**Next: Configure npm**继续设置NPM代理信息，请参考[配置NPM代理](#section19984059114316)。 + +### 配置NPM代理 + +通过DevEco Studio的设置向导设置NPM代理信息，代理信息将写入用户“users/用户名/”目录下的**.npmrc**文件。 + +>![](../public_sys-resources/icon-note.gif) **说明：** +>该向导只有第一次安装DevEco Studio才会出现。如果未出现该向导，可以直接在“users/用户名/”目录下的**.npmrc**文件中，添加代理配置信息。 + +- npm registry：设置npm仓的地址信息，建议勾选。 +- HTTP proxy：代理服务器信息，默认会与DevEco Studio的HTTP proxy设置项保持一致。 +- Enable Https Proxy：同步设置HTTPS Proxy配置信息，建议勾选。 + +![](figures/zh-cn_image_0000001164577336.png) + +然后点击**Start using DevEco Studio**继续下一步操作。 + +如果代理服务器需要认证（需要用户名和密码），请先根据如下指导配置代理服务器的用户名和密码信息，然后再下载OpenHarmony SDK；否则，请跳过该操作，参考[配置SDK信息](#section1265592425017)进行操作即可。 + +![](figures/zh-cn_image_0000001209817299.png) + +1. 进入用户的users目录，打开**.npmrc**文件。 +2. 修改npm代理信息，在proxy和https-proxy中，增加user和password字段，具体取值请以实际代理信息为准。示例如下所示： + + ``` + proxy=http://user:password@proxy.server.com:80 + https-proxy=http://user:password@proxy.server.com:80 + ``` + + >![](../public_sys-resources/icon-note.gif) **说明：** + >如果password中存在特殊字符，如@、\#、\*等符号，可能导致配置不生效，建议将特殊字符替换为ASCII码，并在ASCII码前加百分号%。常用符号替换为ASCII码对照表如下： + >- !：%21 + >- @：%40 + >- \#：%23 + >- ￥：%24 + >- &：%26 + >- \*：%2A + +3. 代理设置完成后，打开命令行工具，执行如下命令进行验证网络是否正常。 + + ``` + npm info express + ``` + + 执行结果如下图所示，则说明代理设置成功。 + + ![](figures/zh-cn_image_0000001164417356.png) + +4. 网络设置完成后，然后再[配置SDK信息](#section1265592425017)。 + +### 设置Gradle代理 + +1. 打开“此电脑”，在文件夹地址栏中输入**%userprofile%**（Mac系统请点击**前往 \> 个人**），进入个人用户文件夹。 + + ![](figures/zh-cn_image_0000001123024482.png) + +2. 创建一个文件夹，命名为**.gradle**。如果已有.gradle文件夹，请跳过此操作。 + + >![](../public_sys-resources/icon-note.gif) **说明：** + >macOS系统创建.gradle文件夹前，请将系统设置为“显示隐藏文件”。 + +3. 进入.gradle文件夹，新建一个文本文档，命名为**gradle**，并修改后缀为**.properties**。 +4. 打开**gradle.properties**文件中，添加如下脚本，然后保存。 + + 其中代理服务器、端口、用户名、密码和不使用代理的域名，请根据实际代理情况进行修改。其中不使用代理的“nonProxyHosts“的配置间隔符是 “|”。 + + ``` + systemProp.http.proxyHost=proxy.server.com + systemProp.http.proxyPort=8080 + systemProp.http.nonProxyHosts=*.company.com|10.*|100.* + systemProp.http.proxyUser=userId + systemProp.http.proxyPassword=password + systemProp.https.proxyHost=proxy.server.com + systemProp.https.proxyPort=8080 + systemProp.https.nonProxyHosts=*.company.com|10.*|100.* + systemProp.https.proxyUser=userId + systemProp.https.proxyPassword=password + ``` + + diff --git a/zh-cn/application-dev/quick-start/create-openharmony-project.md b/zh-cn/application-dev/quick-start/create-openharmony-project.md new file mode 100644 index 0000000000000000000000000000000000000000..2ba5f2d1ba897a3fefec48b40aa67df8ead2eaa4 --- /dev/null +++ b/zh-cn/application-dev/quick-start/create-openharmony-project.md @@ -0,0 +1,7 @@ +# 创建OpenHarmony工程 + +- **[使用工程向导创建新工程](use-wizard-to-create-project.md)** + +- **[通过导入Sample方式创建新工程](import-sample-to-create-project.md)** + + diff --git "a/zh-cn/application-dev/quick-start/\346\246\202\350\277\260.md" b/zh-cn/application-dev/quick-start/deveco-studio-overview.md similarity index 95% rename from "zh-cn/application-dev/quick-start/\346\246\202\350\277\260.md" rename to zh-cn/application-dev/quick-start/deveco-studio-overview.md index 4726ab655e4b85c94c65e969bb0f674ede355e2d..40d3d26d1cb4ba6facda1e7826e64de25c19d9bb 100644 --- "a/zh-cn/application-dev/quick-start/\346\246\202\350\277\260.md" +++ b/zh-cn/application-dev/quick-start/deveco-studio-overview.md @@ -10,10 +10,10 @@ DevEco Studio是HarmonyOS的配套的开发IDE，因为HarmonyOS是基于OpenHar 使用DevEco Studio开发OpenHarmony应用的流程与开发HarmonyOS的流程完全一样，本文档仅描述OpenHarmony应用开发与HarmonyOS应用开发的差异点。 -- **搭建开发环境差异**：OpenHarmony应用开发环境需要开发者手动配置SDK，具体可参考[配置OpenHarmony SDK](配置OpenHarmony-SDK.md)章节。 -- **导入OpenHarmony工程**：OpenHarmony应用开发，只能通过导入Sample工程的方式来创建一个新工程，具体可参考[导入OpenHarmony工程](导入OpenHarmony工程.md)。 -- **调试签名配置**：OpenHarmony应用运行在真机设备上，需要对应用进行签名，关于OpenHarmony应用的签名指导请参考[配置OpenHarmony应用签名信息](配置OpenHarmony应用签名信息.md)。 -- **在真机设备上运行应用**：需要使用hdc工具将OpenHarmony的hap包推送到真机设备上进行安装，具体可参考[安装运行OpenHarmony应用](安装运行OpenHarmony应用.md)。 +- **搭建开发环境差异**：OpenHarmony应用开发环境需要先安装OpenHarmony SDK，具体可参考[配置OpenHarmony SDK](configuring-openharmony-sdk.md)章节。 +- **导入OpenHarmony工程**：OpenHarmony应用开发，只能通过导入Sample工程的方式来创建一个新工程，具体可参考[通过导入Sample方式创建新工程](import-sample-to-create-project.md)。 +- **调试签名配置**：OpenHarmony应用运行在真机设备上，需要对应用进行签名，关于OpenHarmony应用的签名指导请参考[配置OpenHarmony应用签名信息](configuring-openharmony-app-signature.md)。 +- **在真机设备上运行应用**：需要使用hdc工具将OpenHarmony的hap包推送到真机设备上进行安装，具体可参考[安装运行OpenHarmony应用](installing-openharmony-app.md)。 关于DevEco Studio的详细操作指导，请访问[HUAWEI DevEco Studio使用指南](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/tools_overview-0000001053582387)。 @@ -96,5 +96,5 @@ OpenHarmony与HarmonyOS的开发工具都是DevEco Studio，下表为OpenHarmony Huawei DevEco Studio分阶段支持OpenHarmony应用开发的演进路标如下： -![](figures/zh-cn_image_0000001163571565.png) +![](figures/zh-cn_image_0000001210018359.png) diff --git a/zh-cn/application-dev/quick-start/deveco-studio-release-notes.md b/zh-cn/application-dev/quick-start/deveco-studio-release-notes.md new file mode 100644 index 0000000000000000000000000000000000000000..d37efb01603bf6f5013348585979ea90019434ee --- /dev/null +++ b/zh-cn/application-dev/quick-start/deveco-studio-release-notes.md @@ -0,0 +1,15 @@ +# 版本变更说明 + +- [V3.0 Beta1（2021-09-29）](#section21092033115018) + +## V3.0 Beta1（2021-09-29） + + + + +
新增特性：
  • 新增支持OpenHarmony SDK的管理，开发者可通过DevEco Studio的SDK Manager功能来下载和管理OpenHarmony SDK。
  • 在编译构建HAP包时，新增支持对单个Module进行编译，对于多Module工程中只需要编译其中一个Module的场景，可以提升编译构建速度；同时还新增支持一键重构建HAP包，即在编译构建HAP前，会自动执行Clean Project操作。
+
+
增强特性：
  • 编译构建插件更新至3.0.3.2版本。
  • Json编辑器增强，资源索引错误支持快速修复，并支持快速查看资源的取值。
  • 工程视图支持Ohos视图，默认视图为Project视图，开发者可手动切换。
  • OpenHarmony工程支持ark方舟编译。
  • OpenHarmony工程类型标识字段supportSystem "standard"，由模块级build.gradle调整至工程级build.gradle。
+
+
+ diff --git a/zh-cn/application-dev/quick-start/deveco-studio-user-guide-for-openharmony.md b/zh-cn/application-dev/quick-start/deveco-studio-user-guide-for-openharmony.md new file mode 100644 index 0000000000000000000000000000000000000000..53fda8d36d321a96cc7a8f0ca1cf273fd001058f --- /dev/null +++ b/zh-cn/application-dev/quick-start/deveco-studio-user-guide-for-openharmony.md @@ -0,0 +1,15 @@ +# DevEco Studio（OpenHarmony）使用指南 + +- **[概述](deveco-studio-overview.md)** + +- **[版本变更说明](deveco-studio-release-notes.md)** + +- **[配置OpenHarmony SDK](configuring-openharmony-sdk.md)** + +- **[创建OpenHarmony工程](create-openharmony-project.md)** + +- **[配置OpenHarmony应用签名信息](configuring-openharmony-app-signature.md)** + +- **[安装运行OpenHarmony应用](installing-openharmony-app.md)** + + diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001117288684.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001117288684.png deleted file mode 100644 index bf596cf14b97d6991cb34ebff2b35d4380d055d3..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001117288684.png and /dev/null differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001117475776.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001117475776.png deleted file mode 100644 index e235ddff784187c8075f3ddc5cae45c86556b630..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001117475776.png and /dev/null differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001117635680.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001117635680.png deleted file mode 100644 index a99dd0e5f433e4b458ff3c79eac82ecf21b2786f..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001117635680.png and /dev/null differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001118201202.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001118201202.png deleted file mode 100644 index 13231431d0fa268058df97a0187837c634052fa6..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001118201202.png and /dev/null differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001117475774.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001122862128.png similarity index 100% rename from zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001117475774.png rename to zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001122862128.png diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001123021842.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001123021842.png new file mode 100644 index 0000000000000000000000000000000000000000..36dc2d05ca4eb23505a73cb0d1606afd3bf844d8 Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001123021842.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001123021962.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001123021962.png new file mode 100644 index 0000000000000000000000000000000000000000..708b49814e270289c6d1c96520aa6d90ba0edb9c Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001123021962.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001123024482.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001123024482.png new file mode 100644 index 0000000000000000000000000000000000000000..9d9dc95f14cdc94007dbf04f217d496d49f9318c Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001123024482.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001130932554.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001130932554.png deleted file mode 100644 index 0628bd691b40a53e0e5ac919381b13131587a10a..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001130932554.png and /dev/null differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001144765960.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001144765960.png deleted file mode 100644 index 8aac40ccf2d2dc3d22ee6e652ad4ba8ba45e71a2..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001144765960.png and /dev/null differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001162463400.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001162463400.png new file mode 100644 index 0000000000000000000000000000000000000000..48239f38c31b907155d7b0501401ca9dd8635d73 Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001162463400.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001162781359.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001162781359.png deleted file mode 100644 index 086ceb75cf7428cfedd2acca391a223d113faa22..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001162781359.png and /dev/null differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001163170097.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001163170097.png deleted file mode 100644 index b8c1a6d7823b8a76ca0eb6a3ce416a3356bc0ad2..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001163170097.png and /dev/null differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001163314102.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001163314102.png new file mode 100644 index 0000000000000000000000000000000000000000..286a49def18618c79088deeb49203969ac6ce4c0 Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001163314102.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001163472654.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001163472654.png new file mode 100644 index 0000000000000000000000000000000000000000..5328a3c1b62eb8281e316d5ae4a6ca11694ec4a2 Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001163472654.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001163571565.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001163571565.png deleted file mode 100644 index ee559ef00a762f1e360c5390ba3d247827f6e816..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001163571565.png and /dev/null differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001163632602.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001163632602.png new file mode 100644 index 0000000000000000000000000000000000000000..10c5cf41ab78ea58c194fe1ed0429352e85a88a8 Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001163632602.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001163835551.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001163835551.png deleted file mode 100644 index f3fb41e2b60ac3c4f541fd45f84a64adc0960edc..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001163835551.png and /dev/null differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001163835553.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001163835553.png deleted file mode 100644 index 93f3c6cdd75a7358060f9fc406921d43cac52c39..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001163835553.png and /dev/null differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001163915521.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001163915521.png deleted file mode 100644 index 9f6132ceb468e798bccaa1900def6cbefc882441..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001163915521.png and /dev/null differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001164417356.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001164417356.png new file mode 100644 index 0000000000000000000000000000000000000000..97795b40abbea9f58aabe62dd7643eca208315e3 Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001164417356.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001164577336.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001164577336.png new file mode 100644 index 0000000000000000000000000000000000000000..1127bbfabc9ef766284eec12c574096f8bb45ac3 Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001164577336.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001177051523.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001177051523.png deleted file mode 100644 index 1b4cbd9b48873812575675d3029208ebdb3d0161..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001177051523.png and /dev/null differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001207744539.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001207744539.png new file mode 100644 index 0000000000000000000000000000000000000000..5e1269e9e8fb620f8ed6051395c727590e6dc1bc Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001207744539.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001208006117.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001208006117.png new file mode 100644 index 0000000000000000000000000000000000000000..5c576d84b0ca4b369cdaac5aa7de19718628bc37 Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001208006117.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001208210505.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001208210505.png new file mode 100644 index 0000000000000000000000000000000000000000..934b69477b4c10140f0cf8198e4248c53bdb0364 Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001208210505.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001208274069.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001208274069.png new file mode 100644 index 0000000000000000000000000000000000000000..74b66efabbbbbea4752f0296985486369a0cdc74 Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001208274069.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001208394019.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001208394019.png new file mode 100644 index 0000000000000000000000000000000000000000..aa7f5ffb0d59c7ab7a1784bfde775aeccc16a424 Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001208394019.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001209817299.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001209817299.png new file mode 100644 index 0000000000000000000000000000000000000000..aa7f5ffb0d59c7ab7a1784bfde775aeccc16a424 Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001209817299.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001210018359.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001210018359.png new file mode 100644 index 0000000000000000000000000000000000000000..7fe695d19f2f15a7ce9c941907f17becf0d9b849 Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001210018359.png differ diff --git "a/zh-cn/application-dev/quick-start/figures/\351\241\271\347\233\256\345\210\227\350\241\250.png" "b/zh-cn/application-dev/quick-start/figures/\351\241\271\347\233\256\345\210\227\350\241\250.png" deleted file mode 100755 index 43e80427f461dc0d19f5331773d94f6fb734b653..0000000000000000000000000000000000000000 Binary files "a/zh-cn/application-dev/quick-start/figures/\351\241\271\347\233\256\345\210\227\350\241\250.png" and /dev/null differ diff --git "a/zh-cn/application-dev/quick-start/\344\275\277\347\224\250\345\257\274\345\205\245Sample\346\226\271\345\274\217\345\210\233\345\273\272\346\226\260\345\267\245\347\250\213.md" b/zh-cn/application-dev/quick-start/import-sample-to-create-project.md similarity index 82% rename from "zh-cn/application-dev/quick-start/\344\275\277\347\224\250\345\257\274\345\205\245Sample\346\226\271\345\274\217\345\210\233\345\273\272\346\226\260\345\267\245\347\250\213.md" rename to zh-cn/application-dev/quick-start/import-sample-to-create-project.md index 27530c8d3eb9c6d72814ab3e7a65a690ee5c012a..1c031207ad2c7f6cb0775dbaf9cf4b13aafd32db 100644 --- "a/zh-cn/application-dev/quick-start/\344\275\277\347\224\250\345\257\274\345\205\245Sample\346\226\271\345\274\217\345\210\233\345\273\272\346\226\260\345\267\245\347\250\213.md" +++ b/zh-cn/application-dev/quick-start/import-sample-to-create-project.md @@ -1,6 +1,6 @@ -# 使用导入Sample方式创建新工程 +# 通过导入Sample方式创建新工程 ->![](public_sys-resources/icon-note.gif) **说明：** +>![](../public_sys-resources/icon-note.gif) **说明：** >该功能适用于通过DevEco Studio 2.1 Release及以上版本，创建OpenHarmony工程。 OpenHarmony SDK配置完成后，便可以启动应用开发。针对OpenHarmony应用开发，**可以通过导入Sample工程的方式来创建一个新工程**。 @@ -14,9 +14,9 @@ OpenHarmony SDK配置完成后，便可以启动应用开发。针对OpenHarmony ![](figures/zh-cn_image_0000001164498191.png) -2. 在DevEco Studio的欢迎页，点击**Import HarmonyOS Sample**按钮，导入Sample工程。 +2. 在DevEco Studio的欢迎页，点击**Import Sample**按钮，导入Sample工程。 - ![](figures/zh-cn_image_0000001163835551.png) + ![](figures/zh-cn_image_0000001208006117.png) 3. 选择OpenHarmony Samples \> common下的**JsHelloWorld**工程，然后点击**Next**。 @@ -24,7 +24,7 @@ OpenHarmony SDK配置完成后，便可以启动应用开发。针对OpenHarmony 4. 设置**App Name**和**Project Location**，然后点击**Finish**，等待Sample工程导入完成。 - ![](figures/zh-cn_image_0000001163915521.png) + ![](figures/zh-cn_image_0000001207744539.png) 5. 等待工程同步完成，同步成功后，便可以进行OpenHarmony应用开发了。 diff --git "a/zh-cn/application-dev/quick-start/\345\256\211\350\243\205\350\277\220\350\241\214OpenHarmony\345\272\224\347\224\250.md" b/zh-cn/application-dev/quick-start/installing-openharmony-app.md similarity index 84% rename from "zh-cn/application-dev/quick-start/\345\256\211\350\243\205\350\277\220\350\241\214OpenHarmony\345\272\224\347\224\250.md" rename to zh-cn/application-dev/quick-start/installing-openharmony-app.md index 8bfebe769c28cc0d1b7005226cfeae78ee8b9001..8e921c8ce2fe0e2e5b97ef1dd8073cd92250569b 100644 --- "a/zh-cn/application-dev/quick-start/\345\256\211\350\243\205\350\277\220\350\241\214OpenHarmony\345\272\224\347\224\250.md" +++ b/zh-cn/application-dev/quick-start/installing-openharmony-app.md @@ -37,5 +37,5 @@ hdc工具本身需要手动从开源仓中获取。然后使用工具将编译 ``` -完整的hdc工具使用指导及命令格式请参见[hdc_std使用指导.md](../../device-dev/subsystems/subsys-toolchain-hdc-guide.md)。 +完整的hdc工具使用指导及命令格式请参见开源仓“docs/zh-cn/device-dev/subsystems/hdc使用指导.md“。 diff --git "a/zh-cn/application-dev/quick-start/\345\214\205\347\273\223\346\236\204\350\257\264\346\230\216.md" b/zh-cn/application-dev/quick-start/package-structure.md similarity index 100% rename from "zh-cn/application-dev/quick-start/\345\214\205\347\273\223\346\236\204\350\257\264\346\230\216.md" rename to zh-cn/application-dev/quick-start/package-structure.md diff --git a/zh-cn/application-dev/quick-start/public_sys-resources/icon-caution.gif b/zh-cn/application-dev/quick-start/public_sys-resources/icon-caution.gif deleted file mode 100755 index 6e90d7cfc2193e39e10bb58c38d01a23f045d571..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/quick-start/public_sys-resources/icon-caution.gif and /dev/null differ diff --git a/zh-cn/application-dev/quick-start/public_sys-resources/icon-danger.gif b/zh-cn/application-dev/quick-start/public_sys-resources/icon-danger.gif deleted file mode 100755 index 6e90d7cfc2193e39e10bb58c38d01a23f045d571..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/quick-start/public_sys-resources/icon-danger.gif and /dev/null differ diff --git a/zh-cn/application-dev/quick-start/public_sys-resources/icon-note.gif b/zh-cn/application-dev/quick-start/public_sys-resources/icon-note.gif deleted file mode 100755 index 6314297e45c1de184204098efd4814d6dc8b1cda..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/quick-start/public_sys-resources/icon-note.gif and /dev/null differ diff --git a/zh-cn/application-dev/quick-start/public_sys-resources/icon-notice.gif b/zh-cn/application-dev/quick-start/public_sys-resources/icon-notice.gif deleted file mode 100755 index 86024f61b691400bea99e5b1f506d9d9aef36e27..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/quick-start/public_sys-resources/icon-notice.gif and /dev/null differ diff --git a/zh-cn/application-dev/quick-start/public_sys-resources/icon-tip.gif b/zh-cn/application-dev/quick-start/public_sys-resources/icon-tip.gif deleted file mode 100755 index 93aa72053b510e456b149f36a0972703ea9999b7..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/quick-start/public_sys-resources/icon-tip.gif and /dev/null differ diff --git a/zh-cn/application-dev/quick-start/public_sys-resources/icon-warning.gif b/zh-cn/application-dev/quick-start/public_sys-resources/icon-warning.gif deleted file mode 100755 index 6e90d7cfc2193e39e10bb58c38d01a23f045d571..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/quick-start/public_sys-resources/icon-warning.gif and /dev/null differ diff --git "a/zh-cn/application-dev/quick-start/\345\274\200\345\217\221\345\207\206\345\244\207.md" b/zh-cn/application-dev/quick-start/start-overview.md old mode 100755 new mode 100644 similarity index 47% rename from "zh-cn/application-dev/quick-start/\345\274\200\345\217\221\345\207\206\345\244\207.md" rename to zh-cn/application-dev/quick-start/start-overview.md index 5c358a3afe92b1225314361b96d635c9070fb6e5..664004226b280c51e68ec9487fd0083a573697cd --- "a/zh-cn/application-dev/quick-start/\345\274\200\345\217\221\345\207\206\345\244\207.md" +++ b/zh-cn/application-dev/quick-start/start-overview.md @@ -11,15 +11,13 @@ ![](figures/3.png) -另外，DevEco Studio V2.2 Beta1及更高版本还支持HarmonyOS低代码开发方式。低代码开发方式遵循[HarmonyOS JS开发规范](https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-overview-0000001056361791)，具有丰富的UI界面编辑功能，通过可视化界面开发方式快速构建布局，可有效降低用户的上手成本提升用户构建UI界面的效率。 - ## 开发准备 -1. 开始前请参考[配置OpenHarmony SDK](../quick-start/配置OpenHarmony-SDK.md)，完成**DevEco Studio**的安装和开发环境配置。 -2. 开发环境配置完成后，请参考[创建和运行Hello World](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/hello_world-0000001054516888)创建工程，设备类型以“Phone“为例： - - 使用JS语言开发，模板选择“Empty Ability\(JS\)“ +1. 开始前请参考[配置OpenHarmony SDK](configuring-openharmony-sdk.md)，完成**DevEco Studio**的安装和开发环境配置。 +2. 开发环境配置完成后，请参考[创建OpenHarmony工程](use-wizard-to-create-project.md)创建工程。 + - 使用JS语言开发，模板选择“Empty Ability“，Language选择Js。 -3. 工程创建完成后，使用[预览器](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/previewer-0000001054328973#ZH-CN_TOPIC_0000001056725592__section16523172216252)或Phone[模拟器](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/run_simulator-0000001053303709)运行该工程。 +3. 工程创建完成后，使用[预览器](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/previewer-0000001054328973#ZH-CN_TOPIC_0000001056725592__section16523172216252)或[模拟器](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/run_simulator-0000001053303709)运行该工程。 -完成上述操作后，请参考[使用JS语言开发](使用JS语言开发.md)继续下一步的学习。 +完成上述操作后，请参考[使用JS语言开发](start-with-js.md)继续下一步的学习。 diff --git "a/zh-cn/application-dev/quick-start/\344\275\277\347\224\250JS\350\257\255\350\250\200\345\274\200\345\217\221.md" b/zh-cn/application-dev/quick-start/start-with-js.md old mode 100755 new mode 100644 similarity index 90% rename from "zh-cn/application-dev/quick-start/\344\275\277\347\224\250JS\350\257\255\350\250\200\345\274\200\345\217\221.md" rename to zh-cn/application-dev/quick-start/start-with-js.md index b9d6d3bb9c983b7910feaee0c861817c9bdac781..e11af482e9896327cd6e6e0c5b06a4694747d7a8 --- "a/zh-cn/application-dev/quick-start/\344\275\277\347\224\250JS\350\257\255\350\250\200\345\274\200\345\217\221.md" +++ b/zh-cn/application-dev/quick-start/start-with-js.md @@ -8,7 +8,7 @@ 1. 第一个页面内有一个文本和一个按钮，通过text和button组件来实现。 - 在“Project“窗口，选择“entry \> src \> main \> js \> default \> pages.index“，打开“index.hml“文件，添加一个文本和一个按钮，示例代码如下： + 在“Project“窗口，选择“entry \> src \> main \> js \> default \> pages \> index“，打开“index.hml“文件，添加一个文本和一个按钮，示例代码如下： ``` @@ -53,9 +53,9 @@ ## 创建另一个页面 -1. 在“Project“窗口，打开“entry \> src \> main \> js \> default“，右键点击“pages.index“文件夹，选择“New \> JS Page“，命名为“details“，单击回车键。 +1. 在“Project“窗口，打开“entry \> src \> main \> js \> default“，右键点击“pages“文件夹，选择“New \> JS Page“，命名为“details“，单击回车键。 - 创建完成后，可以看到“pages.index“文件夹下的文件目录结构如： + 创建完成后，可以看到“pages.index“文件夹下的文件目录结构如下： ![](figures/1-0.png) @@ -108,5 +108,5 @@ ![](figures/2.png) -恭喜你，至此已成功完成HarmonyOS快速入门-使用JS语言开发。 +恭喜你，至此已成功完成OpenHarmony快速入门-使用JS语言开发。 diff --git "a/zh-cn/application-dev/quick-start/\345\277\253\351\200\237\345\205\245\351\227\250.md" b/zh-cn/application-dev/quick-start/start.md old mode 100755 new mode 100644 similarity index 38% rename from "zh-cn/application-dev/quick-start/\345\277\253\351\200\237\345\205\245\351\227\250.md" rename to zh-cn/application-dev/quick-start/start.md index a48a63e4740e2153845dd7964cfa50e98f0e9cec..a667e2decf0e677089d2eaaf5f26fb986ba4be0a --- "a/zh-cn/application-dev/quick-start/\345\277\253\351\200\237\345\205\245\351\227\250.md" +++ b/zh-cn/application-dev/quick-start/start.md @@ -1,7 +1,7 @@ # 快速入门 -- **[开发准备](开发准备.md)** +- **[开发准备](start-overview.md)** -- **[使用JS语言开发](使用JS语言开发.md)** +- **[使用JS语言开发](start-with-js.md)** diff --git "a/zh-cn/application-dev/quick-start/\344\275\277\347\224\250\345\267\245\347\250\213\345\220\221\345\257\274\345\210\233\345\273\272\346\226\260\345\267\245\347\250\213.md" b/zh-cn/application-dev/quick-start/use-wizard-to-create-project.md similarity index 74% rename from "zh-cn/application-dev/quick-start/\344\275\277\347\224\250\345\267\245\347\250\213\345\220\221\345\257\274\345\210\233\345\273\272\346\226\260\345\267\245\347\250\213.md" rename to zh-cn/application-dev/quick-start/use-wizard-to-create-project.md index c519201b80b810470920bf3025bdd4002c42046c..d3013d019cef8c60b064ea5b0aff80b26b9cca4e 100644 --- "a/zh-cn/application-dev/quick-start/\344\275\277\347\224\250\345\267\245\347\250\213\345\220\221\345\257\274\345\210\233\345\273\272\346\226\260\345\267\245\347\250\213.md" +++ b/zh-cn/application-dev/quick-start/use-wizard-to-create-project.md @@ -3,27 +3,27 @@ - [前提条件](#section13642104391619) - [操作步骤](#section132671712101714) -通过工程向导创建一个OpenHarmony工程，该功能只有DevEco Studio 2.2 Beta1及以上版本支持。如果是DevEco Studio 2.1 Release版本，请根据[使用导入Sample方式创建新工程](使用导入Sample方式创建新工程.md)进行操作。 +通过工程向导创建一个OpenHarmony工程，该功能只有DevEco Studio 2.2 Beta1及以上版本支持。如果是DevEco Studio 2.1 Release版本，请根据[通过导入Sample方式创建新工程](import-sample-to-create-project.md)进行操作。 ## 前提条件 -已安装OpenHarmony SDK，具体请参考[配置OpenHarmony SDK](配置OpenHarmony-SDK.md)。 +已安装OpenHarmony SDK，具体请参考[配置OpenHarmony SDK](configuring-openharmony-sdk.md)。 ## 操作步骤 1. 通过如下两种方式，打开工程创建向导界面。 - - 如果当前未打开任何工程，可以在DevEco Studio的欢迎页，选择**Create HarmonyOS Project**开始创建一个新工程。 + - 如果当前未打开任何工程，可以在DevEco Studio的欢迎页，选择**Create Project**开始创建一个新工程。 - 如果已经打开了工程，可以在菜单栏选择**File \> New \> New Project**来创建一个新工程。 -2. 根据工程创建向导，选择**\[Standard\]Empty Ability\(JS\)**模板，点击**Next**。 +2. 根据工程创建向导，选择**\[Standard\]Empty Ability**模板，点击**Next**。 - ![](figures/zh-cn_image_0000001177051523.png) + ![](figures/zh-cn_image_0000001162463400.png) 3. 点击**Next**，进入到工程配置阶段，需要根据向导配置工程的基本信息。 - **Project Name**：工程的名称，可以自定义。 - **Project Type**：工程的类型，标识该工程是一个[原子化服务](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/atomic-service-definition-0000001090840664)（Service）或传统方式的需要安装的应用（Application）。 - >![](public_sys-resources/icon-note.gif) **说明：** + >![](../public_sys-resources/icon-note.gif) **说明：** >如果是创建的原子化服务，则： >- 原子化服务调试、运行时，在设备桌面上没有应用图标，请使用DevEco Studio的调试和运行功能，来启动原子化服务。 >- 原子化服务是免安装的，config.json中自动添加**installationFree**字段，取值为“true”。 @@ -33,9 +33,14 @@ - **Package Name**：软件包名称，默认情况下，应用ID也会使用该名称，应用发布时，应用ID需要唯一。 - **Save Location**：工程文件本地存储路径。 - **Compatible API Version**：兼容的SDK最低版本。 + + >![](../public_sys-resources/icon-note.gif) **说明：** + >OpenHarmony工程如果配置了compileSdkVersion 7以上，对应模块默认使用方舟编译器进行编译，如果要修改编译方式为非方舟编译，在模块级build.gradle的**ohos**闭包中添加**arkEnable false**字段。 + + - **Language：**支持的开发语言。 - **Device Type**：该工程模板支持的设备类型。 - ![](figures/zh-cn_image_0000001130932554.png) + ![](figures/zh-cn_image_0000001208210505.png) 4. 点击**Finish**，工具会自动生成示例代码和相关资源，等待工程创建完成。 diff --git "a/zh-cn/application-dev/quick-start/\345\210\233\345\273\272OpenHarmony\345\267\245\347\250\213.md" "b/zh-cn/application-dev/quick-start/\345\210\233\345\273\272OpenHarmony\345\267\245\347\250\213.md" deleted file mode 100644 index 909e19a5ba44c5f662b878b36c6d4488ef59cbb6..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/quick-start/\345\210\233\345\273\272OpenHarmony\345\267\245\347\250\213.md" +++ /dev/null @@ -1,7 +0,0 @@ -# 创建OpenHarmony工程 - -- **[使用工程向导创建新工程](使用工程向导创建新工程.md)** - -- **[使用导入Sample方式创建新工程](使用导入Sample方式创建新工程.md)** - - diff --git "a/zh-cn/application-dev/quick-start/\351\205\215\347\275\256OpenHarmony-SDK.md" "b/zh-cn/application-dev/quick-start/\351\205\215\347\275\256OpenHarmony-SDK.md" deleted file mode 100644 index 91be8730c2da16cf0faa514febf843152fdb6948..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/quick-start/\351\205\215\347\275\256OpenHarmony-SDK.md" +++ /dev/null @@ -1,77 +0,0 @@ -# 配置OpenHarmony SDK - -- [前提条件](#section164161442154812) -- [配置SDK信息](#section1265592425017) - -在设置OpenHarmony应用开发环境时，需要开发者在DevEco Studio中配置对应的SDK信息。 - ->![](public_sys-resources/icon-note.gif) **说明：** ->请注意，OpenHarmony SDK版本是API Version 6 Canary1，并精简了部分工具链，因此不适用于HarmonyOS应用开发。 - -## 前提条件 - -- 已下载并安装好DevEco Studio 2.1 Release及以上版本，点击[链接下载](https://developer.harmonyos.com/cn/develop/deveco-studio#download)。 -- 已获取OpenHarmony SDK包并解压，点击[链接下载](https://mirror.iscas.ac.cn/OpenHarmony/sdk/)。 - -## 配置SDK信息 - -DevEco Studio通过SDK Manager统一管理SDK及工具链，OpenHarmony包含如下SDK包： - - - - - - - - - - - - - - - - - - - - - - -

类别

-

包名

-

说明

-

SDK

-

Java

-

Java语言SDK包。

-

JS

-

JS语言SDK包。

-

SDK Tool

-

Toolchains

-

SDK工具链，OpenHarmony应用开发必备工具集，包括编译、打包、签名、数据库管理等工具的集合。

-

Previewer

-

OpenHarmony应用预览器，可以在应用开发过程中查看界面UI布局效果。

-
- -1. 运行已安装的DevEco Studio，首次使用，请选择**Do not import settings**，点击OK。 -2. 接下来DevEco Studio会根据向导指示，进入到SDK下载界面，**HarmonyOS SDK Location**选择本地解压的SDK包路径，然后点击**Next**。 - - >![](public_sys-resources/icon-note.gif) **说明：** - >如果不是首次安装DevEco Studio，可能无法查看进入该界面，可通过欢迎页的**Configure （或**![](figures/zh-cn_image_0000001117475774.png)**图标）\> Settings \> Appearance & Behavior \> System Settings \> HarmonyOS SDK**界面，点击**HarmonyOS SDK Location**加载SDK。 - - ![](figures/zh-cn_image_0000001117288684.png) - -3. SDK安装完成后，点击**Finish**，界面会进入到DevEco Studio欢迎页。 - - ![](figures/zh-cn_image_0000001162781359.png) - -4. 进入**Sdk\\js\\版本号\\build-tools\\ace-loader**目录，然后在该目录下运行命令行工具，分别执行如下命令，直至安装完成。 - - ``` - npm cache clean -f - npm install - ``` - - ![](figures/zh-cn_image_0000001163170097.png) - - diff --git "a/zh-cn/application-dev/ui/JS-UI\346\241\206\346\236\266.md" "b/zh-cn/application-dev/ui/JS-UI\346\241\206\346\236\266.md" deleted file mode 100755 index 3779d0dc32bd0bf4a8ffa4b7944272b875e1519e..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/ui/JS-UI\346\241\206\346\236\266.md" +++ /dev/null @@ -1,9 +0,0 @@ -# JS UI框架 - -- **[JS UI框架概述](JS-UI框架概述.md)** - -- **[构建用户界面](构建用户界面.md)** - -- **[自定义组件](自定义组件.md)** - - diff --git a/zh-cn/application-dev/ui/Readme-CN.md b/zh-cn/application-dev/ui/Readme-CN.md index fd74a42e2594837e93d9043f84a49980edf1cf73..9ccb37efa8447fe15c42bba9b99c7b69d457eaaa 100755 --- a/zh-cn/application-dev/ui/Readme-CN.md +++ b/zh-cn/application-dev/ui/Readme-CN.md @@ -1,20 +1,19 @@ # UI + - [JS UI框架](ui-js.md) + - [JS UI框架概述](ui-js-overview.md) + - [构建用户界面](ui-js-building-ui.md) + - [组件介绍](ui-js-building-ui-component.md) + - [构建布局](ui-js-building-ui-layout.md) + - [布局说明](ui-js-building-ui-layout-intro.md) + - [添加标题行和文本区域](ui-js-building-ui-layout-text.md) + - [添加图片区域](ui-js-building-ui-layout-image.md) + - [添加留言区域](ui-js-building-ui-layout-comment.md) + - [添加容器](ui-js-building-ui-layout-external-container.md) -- [JS UI框架](JS-UI框架.md) - - [JS UI框架概述](JS-UI框架概述.md) - - [构建用户界面](构建用户界面.md) - - [组件介绍](组件介绍.md) - - [构建布局](构建布局.md) - - [布局说明](布局说明.md) - - [添加标题行和文本区域](添加标题行和文本区域.md) - - [添加图片区域](添加图片区域.md) - - [添加留言区域](添加留言区域.md) - - [添加容器](添加容器.md) + - [添加交互](ui-js-building-ui-interactions.md) + - [动画](ui-js-building-ui-animation.md) + - [事件](ui-js-building-ui-event.md) + - [页面路由](ui-js-building-ui-routes.md) - - [添加交互](添加交互.md) - - [动画](动画.md) - - [事件](事件.md) - - [页面路由](页面路由.md) - - - [自定义组件](自定义组件.md) + - [自定义组件](ui-js-custom-components.md) diff --git a/zh-cn/application-dev/ui/public_sys-resources/icon-caution.gif b/zh-cn/application-dev/ui/public_sys-resources/icon-caution.gif deleted file mode 100755 index 6e90d7cfc2193e39e10bb58c38d01a23f045d571..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/ui/public_sys-resources/icon-caution.gif and /dev/null differ diff --git a/zh-cn/application-dev/ui/public_sys-resources/icon-danger.gif b/zh-cn/application-dev/ui/public_sys-resources/icon-danger.gif deleted file mode 100755 index 6e90d7cfc2193e39e10bb58c38d01a23f045d571..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/ui/public_sys-resources/icon-danger.gif and /dev/null differ diff --git a/zh-cn/application-dev/ui/public_sys-resources/icon-note.gif b/zh-cn/application-dev/ui/public_sys-resources/icon-note.gif deleted file mode 100755 index 6314297e45c1de184204098efd4814d6dc8b1cda..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/ui/public_sys-resources/icon-note.gif and /dev/null differ diff --git a/zh-cn/application-dev/ui/public_sys-resources/icon-notice.gif b/zh-cn/application-dev/ui/public_sys-resources/icon-notice.gif deleted file mode 100755 index 86024f61b691400bea99e5b1f506d9d9aef36e27..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/ui/public_sys-resources/icon-notice.gif and /dev/null differ diff --git a/zh-cn/application-dev/ui/public_sys-resources/icon-tip.gif b/zh-cn/application-dev/ui/public_sys-resources/icon-tip.gif deleted file mode 100755 index 93aa72053b510e456b149f36a0972703ea9999b7..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/ui/public_sys-resources/icon-tip.gif and /dev/null differ diff --git a/zh-cn/application-dev/ui/public_sys-resources/icon-warning.gif b/zh-cn/application-dev/ui/public_sys-resources/icon-warning.gif deleted file mode 100755 index 6e90d7cfc2193e39e10bb58c38d01a23f045d571..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/ui/public_sys-resources/icon-warning.gif and /dev/null differ diff --git "a/zh-cn/application-dev/ui/\345\212\250\347\224\273.md" b/zh-cn/application-dev/ui/ui-js-building-ui-animation.md old mode 100755 new mode 100644 similarity index 100% rename from "zh-cn/application-dev/ui/\345\212\250\347\224\273.md" rename to zh-cn/application-dev/ui/ui-js-building-ui-animation.md diff --git "a/zh-cn/application-dev/ui/\347\273\204\344\273\266\344\273\213\347\273\215.md" b/zh-cn/application-dev/ui/ui-js-building-ui-component.md old mode 100755 new mode 100644 similarity index 100% rename from "zh-cn/application-dev/ui/\347\273\204\344\273\266\344\273\213\347\273\215.md" rename to zh-cn/application-dev/ui/ui-js-building-ui-component.md diff --git "a/zh-cn/application-dev/ui/\344\272\213\344\273\266.md" b/zh-cn/application-dev/ui/ui-js-building-ui-event.md old mode 100755 new mode 100644 similarity index 100% rename from "zh-cn/application-dev/ui/\344\272\213\344\273\266.md" rename to zh-cn/application-dev/ui/ui-js-building-ui-event.md diff --git "a/zh-cn/application-dev/ui/\346\267\273\345\212\240\344\272\244\344\272\222.md" b/zh-cn/application-dev/ui/ui-js-building-ui-interactions.md old mode 100755 new mode 100644 similarity index 100% rename from "zh-cn/application-dev/ui/\346\267\273\345\212\240\344\272\244\344\272\222.md" rename to zh-cn/application-dev/ui/ui-js-building-ui-interactions.md diff --git "a/zh-cn/application-dev/ui/\346\267\273\345\212\240\347\225\231\350\250\200\345\214\272\345\237\237.md" b/zh-cn/application-dev/ui/ui-js-building-ui-layout-comment.md old mode 100755 new mode 100644 similarity index 100% rename from "zh-cn/application-dev/ui/\346\267\273\345\212\240\347\225\231\350\250\200\345\214\272\345\237\237.md" rename to zh-cn/application-dev/ui/ui-js-building-ui-layout-comment.md diff --git "a/zh-cn/application-dev/ui/\346\267\273\345\212\240\345\256\271\345\231\250.md" b/zh-cn/application-dev/ui/ui-js-building-ui-layout-external-container.md old mode 100755 new mode 100644 similarity index 100% rename from "zh-cn/application-dev/ui/\346\267\273\345\212\240\345\256\271\345\231\250.md" rename to zh-cn/application-dev/ui/ui-js-building-ui-layout-external-container.md diff --git "a/zh-cn/application-dev/ui/\346\267\273\345\212\240\345\233\276\347\211\207\345\214\272\345\237\237.md" b/zh-cn/application-dev/ui/ui-js-building-ui-layout-image.md old mode 100755 new mode 100644 similarity index 100% rename from "zh-cn/application-dev/ui/\346\267\273\345\212\240\345\233\276\347\211\207\345\214\272\345\237\237.md" rename to zh-cn/application-dev/ui/ui-js-building-ui-layout-image.md diff --git "a/zh-cn/application-dev/ui/\345\270\203\345\261\200\350\257\264\346\230\216.md" b/zh-cn/application-dev/ui/ui-js-building-ui-layout-intro.md old mode 100755 new mode 100644 similarity index 73% rename from "zh-cn/application-dev/ui/\345\270\203\345\261\200\350\257\264\346\230\216.md" rename to zh-cn/application-dev/ui/ui-js-building-ui-layout-intro.md index 03e2139d5edcc8f7e0c7a11d16a42fbfa965b39d..4e6400693ca5dd47e19255a87a8c994f88e77787 --- "a/zh-cn/application-dev/ui/\345\270\203\345\261\200\350\257\264\346\230\216.md" +++ b/zh-cn/application-dev/ui/ui-js-building-ui-layout-intro.md @@ -1,6 +1,10 @@ # 布局说明 -JS UI框架中设备以720px（px指逻辑像素，非物理像素）为基准宽度，根据实际屏幕宽度进行缩放，例如当width设为100px时，在宽度为1440物理像素的屏幕上，实际显示的宽度为200物理像素。 +JS UI框架中，设备的基准宽度为720px（px为逻辑像素，非物理像素），实际显示效果会根据实际屏幕宽度进行缩放。 + +其换算关系如下： + +组件的width设为100px时，在宽度为720物理像素的屏幕上，实际显示为100物理像素；在宽度为1440物理像素的屏幕上，实际显示为200物理像素。 一个页面的基本元素包含标题区域、文本区域、图片区域等，每个基本元素内还可以包含多个子元素，开发者根据需求还可以添加按钮、开关、进度条等组件。在构建页面布局时，需要对每个基本元素思考以下几个问题： diff --git "a/zh-cn/application-dev/ui/\346\267\273\345\212\240\346\240\207\351\242\230\350\241\214\345\222\214\346\226\207\346\234\254\345\214\272\345\237\237.md" b/zh-cn/application-dev/ui/ui-js-building-ui-layout-text.md old mode 100755 new mode 100644 similarity index 100% rename from "zh-cn/application-dev/ui/\346\267\273\345\212\240\346\240\207\351\242\230\350\241\214\345\222\214\346\226\207\346\234\254\345\214\272\345\237\237.md" rename to zh-cn/application-dev/ui/ui-js-building-ui-layout-text.md diff --git a/zh-cn/application-dev/ui/ui-js-building-ui-layout.md b/zh-cn/application-dev/ui/ui-js-building-ui-layout.md new file mode 100644 index 0000000000000000000000000000000000000000..9cc3a1138d726a1d5aa4d73c7c039fcf749ea978 --- /dev/null +++ b/zh-cn/application-dev/ui/ui-js-building-ui-layout.md @@ -0,0 +1,13 @@ +# 构建布局 + +- **[布局说明](ui-js-building-ui-layout-intro.md)** + +- **[添加标题行和文本区域](ui-js-building-ui-layout-text.md)** + +- **[添加图片区域](ui-js-building-ui-layout-image.md)** + +- **[添加留言区域](ui-js-building-ui-layout-comment.md)** + +- **[添加容器](ui-js-building-ui-layout-external-container.md)** + + diff --git "a/zh-cn/application-dev/ui/\351\241\265\351\235\242\350\267\257\347\224\261.md" b/zh-cn/application-dev/ui/ui-js-building-ui-routes.md old mode 100755 new mode 100644 similarity index 94% rename from "zh-cn/application-dev/ui/\351\241\265\351\235\242\350\267\257\347\224\261.md" rename to zh-cn/application-dev/ui/ui-js-building-ui-routes.md index f45a69985d03ea0c605e4a13db2769b5af34ef66..dac9f8d307e17391db268147f403115efb3cdd60 --- "a/zh-cn/application-dev/ui/\351\241\265\351\235\242\350\267\257\347\224\261.md" +++ b/zh-cn/application-dev/ui/ui-js-building-ui-routes.md @@ -6,7 +6,7 @@ 很多应用由多个页面组成，比如用户可以从音乐列表页面点击歌曲，跳转到该歌曲的播放界面。开发者需要通过页面路由将这些页面串联起来，按需实现跳转。 -页面路由router根据页面的uri来找到目标页面，从而实现跳转。以最基础的两个页面之间的跳转为例，具体实现步骤如下： +页面路由router根据页面的uri找到目标页面，从而实现跳转。以最基础的两个页面之间的跳转为例，具体实现步骤如下： 1. 在“Project“窗口，打开“entry \> src \> main \> js \> default“，右键点击“pages“文件夹，选择“New \> JS Page“，创建一个详情页。 2. 调用router.push\(\)路由到详情页。 diff --git a/zh-cn/application-dev/ui/ui-js-building-ui.md b/zh-cn/application-dev/ui/ui-js-building-ui.md new file mode 100644 index 0000000000000000000000000000000000000000..934f5970d8a9bffe4742f9ea22325d19a19bfdb6 --- /dev/null +++ b/zh-cn/application-dev/ui/ui-js-building-ui.md @@ -0,0 +1,15 @@ +# 构建用户界面 + +- **[组件介绍](ui-js-building-ui-component.md)** + +- **[构建布局](ui-js-building-ui-layout.md)** + +- **[添加交互](ui-js-building-ui-interactions.md)** + +- **[动画](ui-js-building-ui-animation.md)** + +- **[事件](ui-js-building-ui-event.md)** + +- **[页面路由](ui-js-building-ui-routes.md)** + + diff --git "a/zh-cn/application-dev/ui/\350\207\252\345\256\232\344\271\211\347\273\204\344\273\266.md" b/zh-cn/application-dev/ui/ui-js-custom-components.md old mode 100755 new mode 100644 similarity index 100% rename from "zh-cn/application-dev/ui/\350\207\252\345\256\232\344\271\211\347\273\204\344\273\266.md" rename to zh-cn/application-dev/ui/ui-js-custom-components.md diff --git "a/zh-cn/application-dev/ui/JS-UI\346\241\206\346\236\266\346\246\202\350\277\260.md" b/zh-cn/application-dev/ui/ui-js-overview.md old mode 100755 new mode 100644 similarity index 100% rename from "zh-cn/application-dev/ui/JS-UI\346\241\206\346\236\266\346\246\202\350\277\260.md" rename to zh-cn/application-dev/ui/ui-js-overview.md diff --git a/zh-cn/application-dev/ui/ui-js.md b/zh-cn/application-dev/ui/ui-js.md new file mode 100644 index 0000000000000000000000000000000000000000..11cacfcb1d44323b2315d2121a8a45669584470a --- /dev/null +++ b/zh-cn/application-dev/ui/ui-js.md @@ -0,0 +1,9 @@ +# JS UI框架 + +- **[JS UI框架概述](ui-js-overview.md)** + +- **[构建用户界面](ui-js-building-ui.md)** + +- **[自定义组件](ui-js-custom-components.md)** + + diff --git "a/zh-cn/application-dev/ui/\346\236\204\345\273\272\345\270\203\345\261\200.md" "b/zh-cn/application-dev/ui/\346\236\204\345\273\272\345\270\203\345\261\200.md" deleted file mode 100755 index ad14552c3c5bf7b1dc47a15cda8d22d8c2bf9d58..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/ui/\346\236\204\345\273\272\345\270\203\345\261\200.md" +++ /dev/null @@ -1,13 +0,0 @@ -# 构建布局 - -- **[布局说明](布局说明.md)** - -- **[添加标题行和文本区域](添加标题行和文本区域.md)** - -- **[添加图片区域](添加图片区域.md)** - -- **[添加留言区域](添加留言区域.md)** - -- **[添加容器](添加容器.md)** - - diff --git "a/zh-cn/application-dev/ui/\346\236\204\345\273\272\347\224\250\346\210\267\347\225\214\351\235\242.md" "b/zh-cn/application-dev/ui/\346\236\204\345\273\272\347\224\250\346\210\267\347\225\214\351\235\242.md" deleted file mode 100755 index 4bb95d150a5f22daf572fe6dfc17280116bc550f..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/ui/\346\236\204\345\273\272\347\224\250\346\210\267\347\225\214\351\235\242.md" +++ /dev/null @@ -1,15 +0,0 @@ -# 构建用户界面 - -- **[组件介绍](组件介绍.md)** - -- **[构建布局](构建布局.md)** - -- **[添加交互](添加交互.md)** - -- **[动画](动画.md)** - -- **[事件](事件.md)** - -- **[页面路由](页面路由.md)** - -