diff --git a/docker/standard/CHANGELOG.md b/docker/standard/CHANGELOG.md index c6089a6645b5682d01ed582d7803e545f47614e3..42434adbdc1478b14f0e8c85a795053489ecb52f 100644 --- a/docker/standard/CHANGELOG.md +++ b/docker/standard/CHANGELOG.md @@ -1,3 +1,9 @@ + ### 0.0.4（2021/09/18） + +1、删除编译依赖的工具预装。 + +2、增加安装ruby。 + ### 0.0.3（2021/08/30） 1、更新llvm版本从10.0.1-62608更新到10.0.1-69957。 diff --git a/docker/standard/CHANGELOG_en.md b/docker/standard/CHANGELOG_en.md index fa141e90b6fee53f53ea3df510b8e2ea7fda7143..c14f7da669e47373428efeb2af817289c852c2e9 100644 --- a/docker/standard/CHANGELOG_en.md +++ b/docker/standard/CHANGELOG_en.md @@ -1,4 +1,10 @@ - ### 0.0.2（2021/08/11） + ### 0.0.4（2021/09/18） + +1\. dropped pre-installed build dependency tools. + +2\. Added the installation of ruby. + + ### 0.0.3（2021/08/30） 1\. Updated LLVM from 10.0.1-62608 to 10.0.1-69957. diff --git a/docker/standard/Readme-en.md b/docker/standard/Readme-en.md index 43c04b716bec16e4c86c932c25eca0a6b79ca815..679d8e054a1926763fa4f7eaed21efecaefef09f 100755 --- a/docker/standard/Readme-en.md +++ b/docker/standard/Readme-en.md @@ -10,11 +10,11 @@ The Docker image of OpenHarmony is hosted on [HUAWEI Cloud SWR](https://auth.hua 1. Obtain the Docker image. ``` -docker pull swr.cn-south-1.myhuaweicloud.com/openharmony-docker/openharmony-docker-standard:0.0.3 +docker pull swr.cn-south-1.myhuaweicloud.com/openharmony-docker/openharmony-docker-standard:0.0.4 ``` 2. Go to the root directory of OpenHarmony code and run the following command to access the Docker build environment: ``` -docker run -it -v $(pwd):/home/openharmony swr.cn-south-1.myhuaweicloud.com/openharmony-docker/openharmony-docker-standard:0.0.3 +docker run -it -v $(pwd):/home/openharmony swr.cn-south-1.myhuaweicloud.com/openharmony-docker/openharmony-docker-standard:0.0.4 ``` ##### **Method 2: Using the Dockerfile to Build a Local Docker Image** @@ -30,15 +30,12 @@ cd docs/docker/standard ``` 3. Go to the root directory of OpenHarmony code and run the following command to access the Docker build environment: ``` -docker run -it -v $(pwd):/home/openharmony openharmony-docker-standard:0.0.3 +docker run -it -v $(pwd):/home/openharmony openharmony-docker-standard:0.0.4 ``` ### Building for Standard-System Devices (reference memory ≥ 128 MB) -1. Run the preprocessing script in the root directory of the source code. -``` -../scripts/prepare.sh -``` -2. Run the following script to start building for Standard-System Devices (reference memory ≥ 128 MB) +Run the following script to start building for Standard-System Devices (reference memory ≥ 128 MB) + ``` ./build.sh --product-name {product_name} ``` diff --git a/docker/standard/Readme.md b/docker/standard/Readme.md index a68037a0ad106a804583d29eb72195c05278f8fb..81e6c8a965663531a31d37c64144e3f705839b77 100755 --- a/docker/standard/Readme.md +++ b/docker/standard/Readme.md @@ -10,11 +10,11 @@ OpenHarmony的Docker镜像托管在HuaweiCloud SWR上。开发者可以通过该 1. 获取Docker镜像。 ``` -docker pull swr.cn-south-1.myhuaweicloud.com/openharmony-docker/openharmony-docker-standard:0.0.3 +docker pull swr.cn-south-1.myhuaweicloud.com/openharmony-docker/openharmony-docker-standard:0.0.4 ``` 2. 进入OpenHarmony代码根目录执行如下命令，从而进入Docker构建环境。 ``` -docker run -it -v $(pwd):/home/openharmony swr.cn-south-1.myhuaweicloud.com/openharmony-docker/openharmony-docker-standard:0.0.3 +docker run -it -v $(pwd):/home/openharmony swr.cn-south-1.myhuaweicloud.com/openharmony-docker/openharmony-docker-standard:0.0.4 ``` ##### 方式二：通过Dockerfile 构建本地Docker镜像进行构建 @@ -30,15 +30,12 @@ cd docs/docker/standard ``` 3. 进入OpenHarmony代码根目录执行如下命令，从而进入Docker构建环境。 ``` -docker run -it -v $(pwd):/home/openharmony openharmony-docker-standard:0.0.3 +docker run -it -v $(pwd):/home/openharmony openharmony-docker-standard:0.0.4 ``` ### 编译源码-标准系统类设备（参考内存≥128MB） -1. 在源码的根目录执行预处理脚本。 -``` -../scripts/prepare.sh -``` -2. 通过如下编译脚本启动标准系统类设备（参考内存≥128MB）的编译。 +通过如下编译脚本启动标准系统类设备（参考内存≥128MB）的编译。 + ``` ./build.sh --product-name {product_name} ``` diff --git a/docker/standard/build.sh b/docker/standard/build.sh index 5371886ecb6afd1545d52c897fffe9674f095b85..7627d6123d56c009722ed946a9175818827a28e0 100755 --- a/docker/standard/build.sh +++ b/docker/standard/build.sh @@ -13,4 +13,4 @@ #!/bin/sh -docker build -t openharmony-docker-standard:0.0.3 . +docker build -t openharmony-docker-standard:0.0.4 . diff --git a/docker/standard/dockerfile b/docker/standard/dockerfile index 9f17b6c9c2bbd47baef5a992544c5412df05959f..6e4ef8c3f48a7053efbd268d7c7419200cf512b8 100755 --- a/docker/standard/dockerfile +++ b/docker/standard/dockerfile @@ -17,14 +17,11 @@ WORKDIR /home/openharmony ARG DEBIAN_FRONTEND=noninteractive ARG PREBUILTS_DIR=/home/prebuilts ARG HOME_TOOLS=/home/tools -ARG HOME_SCRIPTS=/home/scripts RUN mv /etc/apt/sources.list /etc/apt/sources.list.bak COPY sources.list /etc/apt -COPY prebuilts_download.sh prepare.sh $HOME_SCRIPTS/ - RUN apt-get update \ && apt-get install -y \ apt-utils \ @@ -85,9 +82,10 @@ RUN apt-get update \ libc6-dev-i386 \ lib32z-dev \ openjdk-8-jdk \ + ruby \ && rm -rf /bin/sh \ && ln -s /bin/bash /bin/sh \ - && mkdir -p $PREBUILTS_DIR/prebuilts $HOME_TOOLS $HOME_SCRIPTS + && mkdir -p $PREBUILTS_DIR/prebuilts $HOME_TOOLS RUN wget -P $HOME_TOOLS https://mirrors.huaweicloud.com/nodejs/v12.18.4/node-v12.18.4-linux-x64.tar.gz \ && wget -P $HOME_TOOLS https://mirrors.huaweicloud.com/nodejs/v12.18.4/node-v12.18.4-darwin-x64.tar.gz \ @@ -98,7 +96,4 @@ RUN wget -P $HOME_TOOLS https://mirrors.huaweicloud.com/nodejs/v12.18.4/node-v12 && export PATH=$PATH:$PREBUILTS_DIR/prebuilts/node-v12.18.4-linux-x64/bin \ && export PATH=$PATH:$PREBUILTS_DIR/prebuilts/hc-gen \ && rm -rf $HOME_TOOLS \ - && chmod -R 777 $HOME_SCRIPTS/*.sh \ - && $HOME_SCRIPTS/prebuilts_download.sh \ - && rm -rf /tmp/prebuilts \ && npm install -g @ohos/hpm-cli --registry https://registry.npm.taobao.org diff --git a/docker/standard/prebuilts_download.sh b/docker/standard/prebuilts_download.sh deleted file mode 100755 index 307b7069210cef4592477adb384fa97f7fa4ba5b..0000000000000000000000000000000000000000 --- a/docker/standard/prebuilts_download.sh +++ /dev/null @@ -1,67 +0,0 @@ -# Copyright (c) 2020 Huawei Device Co., Ltd. -# Licensed under the Apache License, Version 2.0 (the "License"); -# you may not use this file except in compliance with the License. -# You may obtain a copy of the License at -# -# http://www.apache.org/licenses/LICENSE-2.0 -# -# Unless required by applicable law or agreed to in writing, software -# distributed under the License is distributed on an "AS IS" BASIS, -# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -# See the License for the specific language governing permissions and -# limitations under the License. - -#!/bin/bash -# 代码下载目录 -code_dir=/home/prebuilts -# 二进制所在目录,用于临时存放二进制,二进制整个大小约10G,请确保有足够的空间 -bin_dir=/tmp/prebuilts -# 二进制关系 -copy_config=""" -prebuilts/cmake,https://repo.huaweicloud.com/harmonyos/compiler/cmake/3.16.5/darwin/cmake-darwin-x86-3.16.5.tar.gz -prebuilts/cmake,https://repo.huaweicloud.com/harmonyos/compiler/cmake/3.16.5/linux/cmake-linux-x86-3.16.5.tar.gz -prebuilts/cmake,https://repo.huaweicloud.com/harmonyos/compiler/cmake/3.16.5/windows/cmake-windows-x86-3.16.5.tar.gz -prebuilts/build-tools/darwin-x86/bin,https://repo.huaweicloud.com/harmonyos/compiler/gn/1717/darwin/gn-darwin-x86-1717.tar.gz -prebuilts/build-tools/linux-x86/bin,https://repo.huaweicloud.com/harmonyos/compiler/gn/1717/linux/gn-linux-x86-1717.tar.gz -prebuilts/build-tools/darwin-x86/bin,https://repo.huaweicloud.com/harmonyos/compiler/ninja/1.10.1/darwin/ninja-darwin-x86-1.10.1.tar.gz -prebuilts/build-tools/linux-x86/bin,https://repo.huaweicloud.com/harmonyos/compiler/ninja/1.10.1/linux/ninja-linux-x86-1.10.1.tar.gz -prebuilts/python,https://repo.huaweicloud.com/harmonyos/compiler/python/3.8.5/darwin/python-darwin-x86-3.8.5.tar.gz -prebuilts/python,https://repo.huaweicloud.com/harmonyos/compiler/python/3.8.5/linux/python-linux-x86-3.8.5.tar.gz -prebuilts/mingw-w64/ohos/linux-x86_64,https://repo.huaweicloud.com/harmonyos/compiler/mingw-w64/7.0.0/clang-mingw.tar.gz -prebuilts,https://repo.huaweicloud.com/harmonyos/compiler/hc-gen/0.65/linux/hc-gen-0.65-linux.tar -prebuilts/gcc/linux-x86/arm,https://repo.huaweicloud.com/harmonyos/compiler/prebuilts_gcc_linux-x86_arm_gcc-linaro-7.5.0-arm-linux-gnueabi/1.0/prebuilts_gcc_linux-x86_arm_gcc-linaro-7.5.0-arm-linux-gnueabi.tar.gz -prebuilts/gcc/linux-x86/aarch64,https://repo.huaweicloud.com/harmonyos/compiler/prebuilts_gcc_linux-x86_arm_gcc-linaro-7.5.0-arm-linux-gnueabi/1.0/gcc-linaro-7.5.0-2019.12-x86_64-aarch64-linux-gnu.tar.xz -prebuilts/sdk/js-loader/build-tools,https://repo.huaweicloud.com/harmonyos/compiler/ace-loader/1.0/ace-loader.tar.gz -prebuilts/clang/ohos/linux-x86_64,https://repo.huaweicloud.com/harmonyos/compiler/clang/10.0.1-69957/linux/clang-69957-linux-x86_64.tar.bz2 -prebuilts/build-tools/common,https://repo.huaweicloud.com/harmonyos/compiler/restool/1.023-c/restool.tar.gz -""" -if [ ! -d "${bin_dir}" ];then - mkdir -p "${bin_dir}" -fi - -for i in `echo ${copy_config}` -do - unzip_dir=`echo $i|awk -F ',' '{print $1}'` - huaweicloud_url=`echo $i|awk -F ',' '{print $2}'` - md5_huaweicloud_url=`echo ${huaweicloud_url}|md5sum|awk '{print $1}'` - bin_file=`basename ${huaweicloud_url}` - bin_file_suffix=${bin_file#*.} - #huaweicloud_file_name=`echo ${huaweicloud_url}|awk -F '/' '{print $NF}'` - - if [ ! -d "${code_dir}/${unzip_dir}" ];then - mkdir -p "${code_dir}/${unzip_dir}" - fi - if [ ! -f "${bin_dir}/${md5_huaweicloud_url}.${bin_file_suffix}" ];then - # 代理不需要鉴权: wget -P ${bin_dir} -e "https_proxy=http://domain.com:port" ${huaweicloud_url} - # 代理需要鉴权(账号密码特殊字符均需要URL转义): wget -P ${bin_dir} -e "https_proxy=http://username:password@domain.com:port" ${huaweicloud_url} - # 不需要代理 - wget -O ${bin_dir}/${md5_huaweicloud_url}.${bin_file_suffix} ${huaweicloud_url} - fi - if [ "X${bin_file_suffix:0-3}" = "Xzip" ];then - unzip "${bin_dir}/${md5_huaweicloud_url}.${bin_file_suffix}" -d "${code_dir}/${unzip_dir}/" - elif [ "X${bin_file_suffix:0-6}" = "Xtar.gz" ];then - tar -xvzf "${bin_dir}/${md5_huaweicloud_url}.${bin_file_suffix}" -C "${code_dir}/${unzip_dir}" - else - tar -xvf "${bin_dir}/${md5_huaweicloud_url}.${bin_file_suffix}" -C "${code_dir}/${unzip_dir}" - fi -done diff --git a/docker/standard/prepare.sh b/docker/standard/prepare.sh deleted file mode 100755 index d3e3a1f65a764ec920ebac5cdc5201a48b22a0b4..0000000000000000000000000000000000000000 --- a/docker/standard/prepare.sh +++ /dev/null @@ -1,86 +0,0 @@ -# Copyright (c) 2020 Huawei Device Co., Ltd. -# Licensed under the Apache License, Version 2.0 (the "License"); -# you may not use this file except in compliance with the License. -# You may obtain a copy of the License at -# -# http://www.apache.org/licenses/LICENSE-2.0 -# -# Unless required by applicable law or agreed to in writing, software -# distributed under the License is distributed on an "AS IS" BASIS, -# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -# See the License for the specific language governing permissions and -# limitations under the License. - -#!/bin/bash - -WORKDIR=/home/openharmony -TOOLSDIR=/home/prebuilts/prebuilts - -rm -rf /usr/bin/python -ln -s /usr/bin/python2.7 /usr/bin/python - -if [[ -d $WORKDIR/third_party/jsframework ]]; then - echo copy jsframework node_modules - cd $WORKDIR/third_party/jsframework - npm install --registry https://registry.npm.taobao.org -fi - -if [[ -d $TOOLSDIR/build-tools/common/js-framework ]]; then - rm -rf $TOOLSDIR/build-tools/common/js-framework -fi -mkdir -p $TOOLSDIR/build-tools/common/js-framework -cp -r $WORKDIR/third_party/jsframework/node_modules $TOOLSDIR/build-tools/common/js-framework - -if [[ -d $TOOLSDIR/build-tools/common/nodejs ]]; then - rm -rf $TOOLSDIR/build-tools/common/nodejs -fi - -mkdir -p $TOOLSDIR/build-tools/common/nodejs -cp -r $TOOLSDIR/node-v12.18.4-linux-x64 $TOOLSDIR/build-tools/common/nodejs -cp -r $TOOLSDIR/node-v12.18.4-darwin-x64 $TOOLSDIR/build-tools/common/nodejs - -if [[ -h $WORKDIR/prebuilts/cmake ]]; then - rm $WORKDIR/prebuilts/cmake -fi -echo link cmake -ln -s $TOOLSDIR/cmake $WORKDIR/prebuilts/cmake - -if [[ -h $WORKDIR/prebuilts/build-tools ]]; then - rm $WORKDIR/prebuilts/build-tools -fi -echo link build-tools -ln -s $TOOLSDIR/build-tools $WORKDIR/prebuilts/build-tools - -if [[ -h $WORKDIR/prebuilts/python ]]; then - rm $WORKDIR/prebuilts/python -fi -echo link python -ln -s $TOOLSDIR/python $WORKDIR/prebuilts/python - -if [[ -h $WORKDIR/prebuilts/mingw-w64 ]]; then - rm $WORKDIR/prebuilts/mingw-w64 -fi -echo link mingw-w64 -ln -s $TOOLSDIR/mingw-w64 $WORKDIR/prebuilts/mingw-w64 - -mv $TOOLSDIR/clang/ohos/linux-x86_64/clang-69957 $TOOLSDIR/clang/ohos/linux-x86_64/llvm -if [[ -h $WORKDIR/prebuilts/clang ]]; then - rm $WORKDIR/prebuilts/clang -fi -echo link clang -ln -snf 10.0.1 $TOOLSDIR/clang/ohos/linux-x86_64/llvm/lib/clang/current -ln -s $TOOLSDIR/clang $WORKDIR/prebuilts/clang - -mv $TOOLSDIR/gcc/linux-x86/arm/prebuilts_gcc_linux-x86_arm_gcc-linaro-7.5.0-arm-linux-gnueabi $TOOLSDIR/gcc/linux-x86/arm/gcc-linaro-7.5.0-arm-linux-gnueabi -if [[ -h $WORKDIR/prebuilts/gcc ]]; then - rm $WORKDIR/prebuilts/gcc -fi -echo link gcc -ln -s $TOOLSDIR/gcc $WORKDIR/prebuilts/gcc - -if [[ -h $WORKDIR/prebuilts/sdk ]]; then - rm $WORKDIR/prebuilts/sdk -fi -echo link sdk -ln -s $TOOLSDIR/sdk $WORKDIR/prebuilts/sdk - diff --git a/en/application-dev/js-reference/audio-management.md b/en/application-dev/js-reference/audio-management.md index e538c610ff6fc68f2f31dc88bf8ad8b7e6b3be18..195effeb78b4309a7ed7a36a980dae2d5b20bc9c 100644 --- a/en/application-dev/js-reference/audio-management.md +++ b/en/application-dev/js-reference/audio-management.md @@ -1,63 +1,63 @@ # Audio Management -- [Modules to Import](#s56d19203690d4782bfc74069abb6bd71) -- [Required Permissions](#section11257113618419) -- [getAudioManager\(\): AudioManager](#section84581011418) -- [AudioVolumeType](#section92261857172218) -- [DeviceFlag](#section11285183164210) -- [DeviceRole](#section380038142619) -- [DeviceType](#section11727420122710) -- [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: DeviceType, active: boolean, callback: AsyncCallback\): void7+](#section103558400222) - - [setDeviceActive\(deviceType: DeviceType, active: boolean\): Promise7+](#section1235914401228) - - [isDeviceActive\(deviceType: DeviceType, callback: AsyncCallback\): void7+](#section12363240122219) - - [isDeviceActive\(deviceType: DeviceType\): Promise7+](#section18366184012213) - - [setMicrophoneMute\(mute: boolean, callback: AsyncCallback\): void7+](#section14703163618122) - - [setMicrophoneMute\(mute: boolean\): Promise7+](#section56287111791) - - [isMicrophoneMute\(callback: AsyncCallback\): void7+](#section6632141119912) - - [isMicrophoneMute\(\): Promise7+](#section196363111918) - -- [AudioDeviceDescriptor](#section164657411927) - - [Attributes](#section4947115405) - -- [AudioDeviceDescriptors](#section5181155710523) - -## Modules to Import + - [Modules to Import](#modules-to-import) + - [Required Permissions](#required-permissions) + - [getAudioManager\(\): AudioManager](#getaudiomanager-audiomanager) + - [AudioVolumeType](#audiovolumetype) + - [DeviceFlag](#deviceflag) + - [DeviceRole](#devicerole) + - [DeviceType](#devicetype) + - [ActiveDeviceType7+](#activedevicetype) + - [AudioRingMode7+](#audioringmode) + - [AudioManager](#audiomanager) + - [setVolume\(volumeType: AudioVolumeType, volume: number, callback: AsyncCallback\): void](#setvolume-asynccallback) + - [setVolume\(volumeType: AudioVolumeType, volume: number\): Promise](#setvolume-promise) + - [getVolume\(volumeType: AudioVolumeType, callback: AsyncCallback\): void](#getvolume-asynccallback) + - [getVolume\(volumeType: AudioVolumeType\): Promise](#getvolume-promise) + - [getMinVolume\(volumeType: AudioVolumeType, callback: AsyncCallback\): void](#getminvolume-asynccallback) + - [getMinVolume\(volumeType: AudioVolumeType\): Promise](#getminvolume-promise) + - [getMaxVolume\(volumeType: AudioVolumeType, callback: AsyncCallback\): void](#getmaxvolume-asynccallback) + - [getMaxVolume\(volumeType: AudioVolumeType\): Promise](#getmaxvolume-promise) + - [mute\(volumeType: AudioVolumeType, mute: boolean, callback: AsyncCallback\): void7+](#mute-asynccallback) + - [mute\(volumeType: AudioVolumeType, mute: boolean\): Promise7+](#mute-promise) + - [isMute\(volumeType: AudioVolumeType, callback: AsyncCallback\): void7+](#ismute-asynccallback) + - [isMute\(volumeType: AudioVolumeType\): Promise7+](#ismute-promise) + - [isActive\(volumeType: AudioVolumeType, callback: AsyncCallback\): void7+](#isactive-asynccallback) + - [isActive\(volumeType: AudioVolumeType\): Promise7+](#isactive-promise) + - [setRingerMode\(mode: AudioRingMode, callback: AsyncCallback\): void7+](#setringermode-asynccallback) + - [setRingerMode\(mode: AudioRingMode\): Promise7+](#setringermode-promise) + - [getRingerMode\(callback: AsyncCallback\): void7+](#getringermode-asynccallback) + - [getRingerMode\(\): Promise7+](#getringermode-promise) + - [setAudioParameter\(key: string, value: string, callback: AsyncCallback\): void7+](#setaudioparameter-asynccallback) + - [setAudioParameter\(key: string, value: string\): Promise7+](#setaudioparameter-promise) + - [getAudioParameter\(key: string, callback: AsyncCallback\): void7+](#getaudioparameter-asynccallback) + - [getAudioParameter\(key: string\): Promise7+](#getaudioparameter-promise) + - [getDevices\(deviceFlag: DeviceFlag, callback: AsyncCallback\): void](#getdevices-asynccallback) + - [getDevices\(deviceFlag: DeviceFlag\): Promise](#getdevices-promise) + - [setDeviceActive\(deviceType: ActiveDeviceType, active: boolean, callback: AsyncCallback\): void7+](#setdeviceactive-asynccallback) + - [setDeviceActive\(deviceType: ActiveDeviceType, active: boolean\): Promise7+](#setdeviceactive-promise) + - [isDeviceActive\(deviceType: ActiveDeviceType, callback: AsyncCallback\): void7+](#isdeviceactive-asynccallback) + - [isDeviceActive\(deviceType: ActiveDeviceType\): Promise7+](#isdeviceactive-promise) + - [setMicrophoneMute\(mute: boolean, callback: AsyncCallback\): void7+](#setmicrophonemute-asynccallback) + - [setMicrophoneMute\(mute: boolean\): Promise7+](#setmicrophonemute-promise) + - [isMicrophoneMute\(callback: AsyncCallback\): void7+](#ismicrophonemute-asynccallback) + - [isMicrophoneMute\(\): Promise7+](#ismicrophonemute-promise) + - [AudioDeviceDescriptor](#audiodevicedescriptor) + - [Attributes](#attributes) + - [AudioDeviceDescriptors](#audiodevicedescriptors) + + +## Modules to Import ``` import audio from '@ohos.multimedia.audio'; ``` -## Required Permissions +## Required Permissions None -## getAudioManager\(\): AudioManager +## getAudioManager\(\): AudioManager Obtains an **AudioManager** instance. @@ -78,13 +78,14 @@ Obtains an **AudioManager** instance. + **Example** ``` var audioManager = audio.getAudioManager(); ``` -## AudioVolumeType +## AudioVolumeType Enumerates audio stream types. @@ -114,7 +115,7 @@ Enumerates audio stream types. -## DeviceFlag +## DeviceFlag Enumerates audio device flags. @@ -151,7 +152,7 @@ Enumerates audio device flags. -## DeviceRole +## DeviceRole Enumerates audio device roles. @@ -181,65 +182,31 @@ Enumerates audio device roles. -## DeviceType +## DeviceType Enumerates audio device types. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Name

-

Default Value

-

Description

-

INVALID

-

0

-

Invalid device

-

SPEAKER

-

1

-

Speaker

-

WIRED_HEADSET

-

2

-

Wired headset

-

BLUETOOTH_SCO

-

3

-

Bluetooth device using the synchronous connection oriented (SCO) link

-

BLUETOOTH_A2DP

-

4

-

Bluetooth device using the advanced audio distribution profile (A2DP)

-

MIC

-

5

-

Microphone

-
+| Name | Default Value | Description | +| -------------- | ------------- | --------------------------------------------------------------------- | +| INVALID | 0 | Invalid device | +| EARPIECE | 1 | Earpiece | +| SPEAKER | 2 | Speaker | +| WIRED_HEADSET | 3 | Wired headset | +| BLUETOOTH_SCO | 7 | Bluetooth device using the synchronous connection oriented (SCO) link | +| BLUETOOTH_A2DP | 8 | Bluetooth device using the advanced audio distribution profile (A2DP) | +| MIC | 15 | Microphone | + + +## ActiveDeviceType7+ + +Enumerates active device types. + +| Name | Default Value | Description | +| ------------- | ------------- | --------------------------------------------------------------------- | +| SPEAKER | 2 | Speaker | +| BLUETOOTH_SCO | 7 | Bluetooth device using the synchronous connection oriented (SCO) link | -## AudioRingMode7+ +## AudioRingMode7+ Enumerates ringer modes. @@ -280,7 +247,7 @@ Enumerates ringer modes. Implements audio volume and audio device management. -### setVolume\(volumeType: AudioVolumeType, volume: number, callback: AsyncCallback\): void +### setVolume\(volumeType: AudioVolumeType, volume: number, callback: AsyncCallback\): void Sets the volume for a stream. This method uses an asynchronous callback to return the execution result. @@ -343,7 +310,7 @@ audioManager.setVolume(audio.AudioVolumeType.MEDIA, 10, (err)=>{ }) ``` -### setVolume\(volumeType: AudioVolumeType, volume: number\): Promise +### setVolume\(volumeType: AudioVolumeType, volume: number\): Promise Sets the volume for a stream. This method uses a promise to return the execution result. @@ -406,7 +373,7 @@ audioManager.setVolume(audio.AudioVolumeType.MEDIA, 10).then(()=> ) ``` -### getVolume\(volumeType: AudioVolumeType, callback: AsyncCallback\): void +### getVolume\(volumeType: AudioVolumeType, callback: AsyncCallback\): void Obtains the volume of a stream. This method uses an asynchronous callback to return the query result. @@ -460,7 +427,7 @@ audioManager.getVolume(audio.AudioVolumeType.MEDIA, (err, value) => { }) ``` -### getVolume\(volumeType: AudioVolumeType\): Promise +### getVolume\(volumeType: AudioVolumeType\): Promise Obtains the volume of a stream. This method uses a promise to return the query result. @@ -514,7 +481,7 @@ audioManager.getVolume(audio.AudioVolumeType.MEDIA).then((value) => ) ``` -### getMinVolume\(volumeType: AudioVolumeType, callback: AsyncCallback\): void +### getMinVolume\(volumeType: AudioVolumeType, callback: AsyncCallback\): void Obtains the minimum volume allowed for a stream. This method uses an asynchronous callback to return the query result. @@ -568,7 +535,7 @@ audioManager.getMinVolume(audio.AudioVolumeType.MEDIA, (err, value) => { }) ``` -### getMinVolume\(volumeType: AudioVolumeType\): Promise +### getMinVolume\(volumeType: AudioVolumeType\): Promise Obtains the minimum volume allowed for a stream. This method uses a promise to return the query result. @@ -622,7 +589,7 @@ audioManager.getMinVolume(audio.AudioVolumeType.MEDIA).then((value) => ) ``` -### getMaxVolume\(volumeType: AudioVolumeType, callback: AsyncCallback\): void +### getMaxVolume\(volumeType: AudioVolumeType, callback: AsyncCallback\): void Obtains the maximum volume allowed for a stream. This method uses an asynchronous callback to return the query result. @@ -676,7 +643,7 @@ audioManager.getMaxVolume(audio.AudioVolumeType.MEDIA, (err, value) => { }) ``` -### getMaxVolume\(volumeType: AudioVolumeType\): Promise +### getMaxVolume\(volumeType: AudioVolumeType\): Promise Obtains the maximum volume allowed for a stream. This method uses a promise to return the query result. @@ -730,7 +697,7 @@ audioManager.getMaxVolume(audio.AudioVolumeType.MEDIA).then((data)=> ) ``` -### mute\(volumeType: AudioVolumeType, mute: boolean, callback: AsyncCallback\): void7+ +### mute\(volumeType: AudioVolumeType, mute: boolean, callback: AsyncCallback\): void7+ Mutes a stream. This method uses an asynchronous callback to return the execution result. @@ -793,7 +760,7 @@ audioManager.mute(audio.AudioVolumeType.MEDIA, true, (err) => { }) ``` -### mute\(volumeType: AudioVolumeType, mute: boolean\): Promise7+ +### mute\(volumeType: AudioVolumeType, mute: boolean\): Promise7+ Mutes a stream. This method uses a promise to return the execution result. @@ -856,7 +823,7 @@ audioManager.mute(audio.AudioVolumeType.MEDIA, true).then(() => ) ``` -### isMute\(volumeType: AudioVolumeType, callback: AsyncCallback\): void7+ +### isMute\(volumeType: AudioVolumeType, callback: AsyncCallback\): void7+ Checks whether a stream is muted. This method uses an asynchronous callback to return the query result. @@ -910,7 +877,7 @@ audioManager.isMute(audio.AudioVolumeType.MEDIA, (err, value) => { }) ``` -### isMute\(volumeType: AudioVolumeType\): Promise7+ +### isMute\(volumeType: AudioVolumeType\): Promise7+ Checks whether a stream is muted. This method uses a promise to return the execution result. @@ -964,7 +931,7 @@ audioManager.isMute(audio.AudioVolumeType.MEDIA).then((value) => ) ``` -### isActive\(volumeType: AudioVolumeType, callback: AsyncCallback\): void7+ +### isActive\(volumeType: AudioVolumeType, callback: AsyncCallback\): void7+ Checks whether a stream is active. This method uses an asynchronous callback to return the query result. @@ -1018,7 +985,7 @@ audioManager.isActive(audio.AudioVolumeType.MEDIA, (err, value) => { }) ``` -### isActive\(volumeType: AudioVolumeType\): Promise7+ +### isActive\(volumeType: AudioVolumeType\): Promise7+ Checks whether a stream is active. This method uses a promise to return the query result. @@ -1072,7 +1039,7 @@ audioManager.isActive(audio.AudioVolumeType.MEDIA).then((value) => ) ``` -### setRingerMode\(mode: AudioRingMode, callback: AsyncCallback\): void7+ +### setRingerMode\(mode: AudioRingMode, callback: AsyncCallback\): void7+ Sets the ringer mode. This method uses an asynchronous callback to return the execution result. @@ -1126,7 +1093,7 @@ audioManager.setRingerMode(audio.AudioRingMode.RINGER_MODE_NORMAL, (err) => { }) ``` -### setRingerMode\(mode: AudioRingMode\): Promise7+ +### setRingerMode\(mode: AudioRingMode\): Promise7+ Sets the ringer mode. This method uses a promise to return the execution result. @@ -1180,7 +1147,7 @@ audioManager.setRingerMode(audio.AudioRingMode.RINGER_MODE_NORMAL).then(() => ) ``` -### getRingerMode\(callback: AsyncCallback\): void7+ +### getRingerMode\(callback: AsyncCallback\): void7+ Obtains the ringer mode. This method uses an asynchronous callback to return the query result. @@ -1225,7 +1192,7 @@ audioManager.getRingerMode((err, value) => { }) ``` -### getRingerMode\(\): Promise7+ +### getRingerMode\(\): Promise7+ Obtains the ringer mode. This method uses a promise to return the query result. @@ -1258,7 +1225,7 @@ audioManager.getRingerMode().then((value) => ) ``` -### setAudioParameter\(key: string, value: string, callback: AsyncCallback\): void7+ +### setAudioParameter\(key: string, value: string, callback: AsyncCallback\): void7+ Sets an audio parameter. This method uses an asynchronous callback to return the execution result. @@ -1321,7 +1288,7 @@ audioManager.setAudioParameter('PBits per sample', '8 bit', (err) => { }) ``` -### setAudioParameter\(key: string, value: string\): Promise7+ +### setAudioParameter\(key: string, value: string\): Promise7+ Sets an audio parameter. This method uses a promise to return the execution result. @@ -1384,7 +1351,7 @@ audioManager.setAudioParameter('PBits per sample', '8 bit').then(() => ) ``` -### getAudioParameter\(key: string, callback: AsyncCallback\): void7+ +### getAudioParameter\(key: string, callback: AsyncCallback\): void7+ Obtains the value of an audio parameter. This method uses an asynchronous callback to return the query result. @@ -1438,7 +1405,7 @@ audioManager.getAudioParameter('PBits per sample', (err, value) => { }) ``` -### getAudioParameter\(key: string\): Promise7+ +### getAudioParameter\(key: string\): Promise7+ Obtains the value of an audio parameter. This method uses a promise to return the query result. @@ -1492,7 +1459,7 @@ audioManager.getAudioParameter('PBits per sample').then((value) => ) ``` -### getDevices\(deviceFlag: DeviceFlag, callback: AsyncCallback\): void +### getDevices\(deviceFlag: DeviceFlag, callback: AsyncCallback\): void Obtains the audio devices with a specific flag. This method uses an asynchronous callback to return the query result. @@ -1546,7 +1513,7 @@ audioManager.getDevices(audio.DeviceFlag.OUTPUT_DEVICES_FLAG, (err, value)=>{ }) ``` -### getDevices\(deviceFlag: DeviceFlag\): Promise +### getDevices\(deviceFlag: DeviceFlag\): Promise Obtains the audio devices with a specific flag. This method uses a promise to return the query result. @@ -1600,7 +1567,7 @@ audioManager.getDevices(audio.DeviceFlag.OUTPUT_DEVICES_FLAG).then((data)=> ) ``` -### setDeviceActive\(deviceType: DeviceType, active: boolean, callback: AsyncCallback\): void7+ +### setDeviceActive\(deviceType: ActiveDeviceType, active: boolean, callback: AsyncCallback\): void7+ Sets a device to the active state. This method uses an asynchronous callback to return the execution result. @@ -1619,7 +1586,7 @@ Sets a device to the active state. This method uses an asynchronous callback to

deviceType

-

DeviceType

+

ActiveDeviceType

Yes

@@ -1654,7 +1621,7 @@ None **Example** ``` -audioManager.setDeviceActive(audio.DeviceType.SPEAKER, true, (err)=> { +audioManager.setDeviceActive(audio.ActiveDeviceType.SPEAKER, true, (err)=> { if (err) { console.error('Failed to set the active status of the device. ${err.message}'); return; @@ -1663,7 +1630,7 @@ audioManager.setDeviceActive(audio.DeviceType.SPEAKER, true, (err)=> { }) ``` -### setDeviceActive\(deviceType: DeviceType, active: boolean\): Promise7+ +### setDeviceActive\(deviceType: ActiveDeviceType, active: boolean\): Promise7+ Sets a device to the active state. This method uses a promise to return the execution result. @@ -1682,7 +1649,7 @@ Sets a device to the active state. This method uses a promise to return the exec

deviceType

-

DeviceType

+

ActiveDeviceType

Yes

@@ -1721,12 +1688,12 @@ Sets a device to the active state. This method uses a promise to return the exec **Example** ``` -audioManager.setDeviceActive(audio.DeviceType.SPEAKER, true).then(()=> +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+ +### isDeviceActive\(deviceType: DeviceType, callback: AsyncCallback\): void7+ Checks whether a device is active. This method uses an asynchronous callback to return the query result. @@ -1745,7 +1712,7 @@ Checks whether a device is active. This method uses an asynchronous callback to

deviceType

-

DeviceType

+

ActiveDeviceType

Yes

@@ -1771,7 +1738,7 @@ None **Example** ``` -audioManager.isDeviceActive(audio.DeviceType.SPEAKER, (err, value) => { +audioManager.isDeviceActive(audio.ActiveDeviceType.SPEAKER, (err, value) => { if (err) { console.error('Failed to obtain the active status of the device. ${err.message}'); return; @@ -1780,7 +1747,7 @@ audioManager.isDeviceActive(audio.DeviceType.SPEAKER, (err, value) => { }) ``` -### isDeviceActive\(deviceType: DeviceType\): Promise7+ +### isDeviceActive\(deviceType: ActiveDeviceType\): Promise7+ Checks whether a device is active. This method uses a promise to return the query result. @@ -1799,7 +1766,7 @@ Checks whether a device is active. This method uses a promise to return the quer

deviceType

-

DeviceType

+

ActiveDeviceType

Yes

@@ -1829,12 +1796,12 @@ Checks whether a device is active. This method uses a promise to return the quer **Example** ``` -audioManager.isDeviceActive(audio.DeviceType.SPEAKER).then((value) => +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+ +### setMicrophoneMute\(mute: boolean, callback: AsyncCallback\): void7+ Mutes or unmutes the microphone. This method uses an asynchronous callback to return the execution result. @@ -1888,7 +1855,7 @@ audioManager.setMicrophoneMute(true, (err) => { }) ``` -### setMicrophoneMute\(mute: boolean\): Promise7+ +### setMicrophoneMute\(mute: boolean\): Promise7+ Mutes or unmutes the microphone. This method uses a promise to return the execution result. @@ -1942,7 +1909,7 @@ audioManager.setMicrophoneMute(true).then(() => ) ``` -### isMicrophoneMute\(callback: AsyncCallback\): void7+ +### isMicrophoneMute\(callback: AsyncCallback\): void7+ Checks whether the microphone is muted. This method uses an asynchronous callback to return the query result. @@ -1987,7 +1954,7 @@ audioManager.isMicrophoneMute((err, value) => { }) ``` -### isMicrophoneMute\(\): Promise7+ +### isMicrophoneMute\(\): Promise7+ Checks whether the microphone is muted. This method uses a promise to return the query result. @@ -2020,11 +1987,11 @@ audioManager.isMicrophoneMute().then((value) => ) ``` -## AudioDeviceDescriptor +## AudioDeviceDescriptor Describes an audio device. -### Attributes +### Attributes

Name

@@ -2064,7 +2031,7 @@ Describes an audio device.
-## AudioDeviceDescriptors +## AudioDeviceDescriptors -

Name

diff --git a/en/contribute/OpenHarmony-JavaScript-coding-style-guide.md b/en/contribute/OpenHarmony-JavaScript-coding-style-guide.md index 2bc5234ca6a8a7a28a0b4f0d2c4eebf0123bcb8c..f540122b839d6b685a2f97a0b064c39c83c8c4f5 100755 --- a/en/contribute/OpenHarmony-JavaScript-coding-style-guide.md +++ b/en/contribute/OpenHarmony-JavaScript-coding-style-guide.md @@ -353,9 +353,8 @@ console.log(url); //url can be accessed, output: http://127.0.0.1:8080 **Example:** ```javascript -// ES5.1 Using var to declare variables function open() { - var url = 'http://127.0.0.1:8080'; + let url = 'http://127.0.0.1:8080'; // todo something } open(); @@ -363,7 +362,6 @@ console.log(url); //Report: Uncaught ReferenceError: url is not defined ``` ```javascript -// In ES6, the let and const keywords are preferred to declare variables. function open() { const url = 'http://127.0.0.1:8080'; //todo something diff --git a/en/design/en-OpenHarmony-API-governance.md b/en/design/en-OpenHarmony-API-governance.md index de3ba6a1d9e9a6999a1f4c0c2aa5164a74988d5d..b7924c8c80ec1c2029259bb12a5d964ed1f440f5 100644 --- a/en/design/en-OpenHarmony-API-governance.md +++ b/en/design/en-OpenHarmony-API-governance.md @@ -20,9 +20,8 @@ OpenHarmony APIs are classified into the following types by authorized usage: OpenHarmony APIs are classified into the following types by programming language: -- Java APIs: Java programming interfaces open to applications. - JS APIs: JavaScript programming interfaces open to applications. -- Native APIs: C/C++ programming interfaces open to applications. Unless otherwise specified, the terms defined in this Charter also apply to Java APIs, JS APIs, and Native APIs. +- Native APIs: C/C++ programming interfaces open to applications. Unless otherwise specified, the terms defined in this Charter also apply to JS APIs, and Native APIs. ## API Governance @@ -68,7 +67,7 @@ For changed APIs, except the preceding composites, the following must be include 1. (Mandatory) How old APIs are handled (deprecated, hidden, or permanently deleted) and compatibility measures for developing applications using old SDKs. 2. (Mandatory) Change impact, substitute APIs, and corresponding application adaptation solution. -3. (Mandatory) Update the ChangeLog file. Update the API-diff file (Mandatory if JS/Native API changes are involved. Optional for Java API changes because this file is automatically generated using the tool and do not need to be manually submitted.) +3. (Mandatory) Update the ChangeLog file. Update the API-diff file (Mandatory if JS/Native API changes are involved.) ## API Design Requirements @@ -98,10 +97,9 @@ Design APIs from the perspective of their users rather than providers. 4. The larger the scope is, the more precise the naming should be. 5. Do not use or minimize the use of abbreviations. Common terms in the industry must comply with industry conventions and can be abbreviated. 6. Package name/module name/namespace prefix convention: - 1. Java API package name: package ohos.\*. - 2. JS API module name: @ohos.\*. - 3. Native API namespace: namespace OHOS.\*. - 4. If external open-source code is referenced, retain the original package name, module name, or namespace, or replace the package name according to the preceding rules. + 1. JS API module name: @ohos.\*. + 2. Native API namespace: namespace OHOS.\*. + 3. If external open-source code is referenced, retain the original package name, module name, or namespace, or replace the package name according to the preceding rules. 7. The package name, module name, and namespace must contain at least two and at most four segments. One word is recommended for each segment, and a maximum of two words are allowed. 8. The class name, method name, function name, member variable, and variable name cannot exceed four words. diff --git a/en/device-dev/driver/driver-peripherals.md b/en/device-dev/driver/driver-peripherals.md index 02e7a9e357a6eb7484f8a0eea5a486c3a90b396a..2269b5f9dde2fbe881a7047b0f08d09ad7304be0 100644 --- a/en/device-dev/driver/driver-peripherals.md +++ b/en/device-dev/driver/driver-peripherals.md @@ -1,4 +1,4 @@ -# Peripherals +# Peripheral Driver Development - **[LCD](driver-peripherals-lcd-des.md)** diff --git a/en/device-dev/driver/driver-platform-watchdog-des.md b/en/device-dev/driver/driver-platform-watchdog-des.md index ddaddc1abe08efca457b46b26db353dc0df06f2e..6b907fcdf0dd75eb047d74a045d79a4ab16e00ce 100644 --- a/en/device-dev/driver/driver-platform-watchdog-des.md +++ b/en/device-dev/driver/driver-platform-watchdog-des.md @@ -104,7 +104,7 @@ A watchdog, also called a watchdog timer, is a hardware timing device. If an err Use **WatchdogOpen** to open a watchdog. A system may have multiple watchdogs. You can open the specified watchdog by using the ID. -int32\_t WatchdogOpen\(int16\_t wdtId\); +DevHandle WatchdogOpen\(int16\_t wdtId\); **Table 2** Description of WatchdogOpen @@ -201,7 +201,7 @@ if (ret != 0) { ### Setting the Timeout Duration -int32\_t WatchdogSetTimeout\(PalHandle \*handle, uint32\_t seconds\); +int32\_t WatchdogSetTimeout\(DevHandle \*handle, uint32\_t seconds\); **Table 4** Description of WatchdogSetTimeout @@ -253,7 +253,7 @@ if (ret != 0) { ### Obtaining the Timeout Duration -int32\_t WatchdogGetTimeout\(PalHandle \*handle, uint32\_t \*seconds\); +int32\_t WatchdogGetTimeout\(DevHandle \*handle, uint32\_t \*seconds\); **Table 5** Description of WatchdogGetTimeout diff --git a/en/device-dev/get-code/gettools-acquire.md b/en/device-dev/get-code/gettools-acquire.md index 854a055a1950ec8e1c879732950c66095f10a970..31e2b3212c6db58fd8cd19ea82fea1ccf3b9c3a8 100644 --- a/en/device-dev/get-code/gettools-acquire.md +++ b/en/device-dev/get-code/gettools-acquire.md @@ -52,7 +52,7 @@ OpenHarmony provides the following two types of Docker environments for you to q

swr.cn-south-1.myhuaweicloud.com/openharmony-docker/openharmony-docker-standard

0.0.3

+

0.0.4

HPM-based Docker environment

@@ -69,6 +69,7 @@ OpenHarmony provides the following two types of Docker environments for you to q
+ ## Preparations Before using the Docker environment, perform the following operations: @@ -178,13 +179,13 @@ hb set 1. Obtain the Docker image. ``` - docker pull swr.cn-south-1.myhuaweicloud.com/openharmony-docker/openharmony-docker-standard:0.0.3 + docker pull swr.cn-south-1.myhuaweicloud.com/openharmony-docker/openharmony-docker-standard:0.0.4 ``` 2. Go to the root directory of OpenHarmony code and run the following command to access the Docker build environment: ``` - docker run -it -v $(pwd):/home/openharmony swr.cn-south-1.myhuaweicloud.com/openharmony-docker/openharmony-docker-standard:0.0.3 + docker run -it -v $(pwd):/home/openharmony swr.cn-south-1.myhuaweicloud.com/openharmony-docker/openharmony-docker-standard:0.0.4 ``` @@ -206,27 +207,21 @@ hb set 3. Go to the root directory of OpenHarmony code and run the following command to access the Docker build environment: ``` - docker run -it -v $(pwd):/home/openharmony openharmony-docker-standard:0.0.3 + docker run -it -v $(pwd):/home/openharmony openharmony-docker-standard:0.0.4 ``` ### Building for Standard-System Devices \(reference memory ≥ 128 MB\) -1. Run the preprocessing script in the root directory of the source code. - - ``` - ../scripts/prepare.sh - ``` - -2. Run the following script to start building for standard-system devices \(reference memory ≥ 128 MB\). +Run the following script to start building for standard-system devices \(reference memory ≥ 128 MB\). - ``` - ./build.sh --product-name {product_name} - ``` +``` +./build.sh --product-name {product_name} +``` - **product\_name** indicates the platform supported by the current distribution, for example, Hi3516D V300. +**product\_name** indicates the platform supported by the current distribution, for example, Hi3516D V300. - Files generated during building are stored in the **out/ohos-arm-release/** directory, and the generated image is stored in the **out/ohos-arm-release/packages/phone/images/** directory. +Files generated during building are stored in the **out/ohos-arm-release/** directory, and the generated image is stored in the **out/ohos-arm-release/packages/phone/images/** directory. >![](../public_sys-resources/icon-note.gif) **NOTE:** @@ -307,4 +302,3 @@ Start building. Docker can be automatically installed only in Ubuntu. If you are hpm run distWithDocker solution={product} ``` - diff --git a/en/device-dev/get-code/sourcecode-acquire.md b/en/device-dev/get-code/sourcecode-acquire.md index 3d0b0964360f4095b7b00daa7532a99a08848e2e..89ca0277cb4f0315e2f843a48d6601949efddf33 100644 --- a/en/device-dev/get-code/sourcecode-acquire.md +++ b/en/device-dev/get-code/sourcecode-acquire.md @@ -13,21 +13,23 @@ - [How to Use](#section954619433333) - [Method 3: Acquiring Source Code from Image Sites](#section1186691118430) +- [Method 4: Acquiring Source Code from the GitHub Image Repository](#section23448418360) - [Source Code Directories](#section1072115612811) ## About OpenHarmony OpenHarmony is an open-source project launched by the OpenAtom Foundation. The purpose of this project is to build an open, distributed operating system \(OS\) framework for smart IoT devices in the full-scenario, full-connectivity, and full-intelligence era. -The open-source code repositories are available at [https://openharmony.gitee.com](https://openharmony.gitee.com). +The open-source code repositories are available at [https://openharmony.gitee.com](https://openharmony.gitee.com). ## Overview of Source Code Acquisition -This document describes how to acquire OpenHarmony source code and provides its directory structure. The OpenHarmony code is open to you as [bundles](../bundles/bundles-standard-rules.md), which can be obtained in any of the following ways: +This document describes how to acquire OpenHarmony source code and provides its directory structure. The OpenHarmony code is open to you as [bundles](../bundles/bundles-standard-rules.md), which can be obtained in any of the following ways: -- **Method 1**: Acquire the source code from a code repository. You can use the **repo** or **git** tool to download the latest code from the code repository. -- **Method 2**: Obtain the source code from the HarmonyOS Package Manager \(HPM\). Visit the [HPM](https://hpm.harmonyos.com/#/en/home) website, search for your desired open-source distribution, and download the bundle list \(or customize bundles and download the bundle list\). Then use **hpm-cli** to download and install the bundles and compilation toolchain on your local PC. -- **Method 3**: Download the compressed file of a distribution from an image site. This method provides a fast download speed, so you can also use this method for obtaining the source code of an earlier version. +- **Method 1**: Acquire the source code from a code repository. You can use the**repo**or**git** tool to download the latest code from the code repository. +- **Method 2**: Acquire the source code from the HarmonyOS Package Manager \(HPM\). Visit the [HPM](https://hpm.harmonyos.com/#/en/home) website, search for your desired open-source distribution, and download the bundle list \(or customize bundles and download the bundle list\). Then use **hpm-cli** to download and install the bundles and compilation toolchain on your local PC. +- **Method 3**: Download the compressed file of a distribution from a mirror site. This method provides a fast download speed, so you can also use this method for obtaining the source code of an earlier version. +- **Method 4**: Acquire the source code from the GitHub image repository. You can use the **repo**or **git**tool to download the latest code from the code repository. ## Method 1: Acquiring Source Code from a Code Repository @@ -48,7 +50,7 @@ This document describes how to acquire OpenHarmony source code and provides its 1. Register your account with Gitee. 2. Register an SSH public key for access to Gitee. -3. Install the [git client](http://git-scm.com/book/en/v2) and [git-lfs](https://gitee.com/vcs-all-in-one/git-lfs?_from=gitee_search#downloading), and configure basic user information. +3. Install the [git client](http://git-scm.com/book/en/v2) and [git-lfs](https://gitee.com/vcs-all-in-one/git-lfs?_from=gitee_search#downloading), and configure basic user information. ``` git config --global user.name "yourname" @@ -56,10 +58,10 @@ This document describes how to acquire OpenHarmony source code and provides its git config --global credential.helper store ``` -4. Run the following commands to install the **repo** tool: +4. Run the following commands to install the **repo** tool: ``` - curl -s https://gitee.com/oschina/repo/raw/fork_flow/repo-py3 > /usr/local/bin/repo # If you do not have the access permission to this directory, download the tool to any other accessible directory and configure the directory to the environment variable. + curl -s https://gitee.com/oschina/repo/raw/fork_flow/repo-py3 > /usr/local/bin/repo # If you do not have the access permission to this directory, download the tool to any other accessible directory and configure the directory to the environment variable. chmod a+x /usr/local/bin/repo pip3 install -i https://repo.huaweicloud.com/repository/pypi/simple requests ``` @@ -74,7 +76,7 @@ This document describes how to acquire OpenHarmony source code and provides its - **Obtaining OpenHarmony master code** - Method 1 \(recommended\): Use the **repo** tool to download the source code over SSH. \(You must have registered an SSH public key for access to Gitee.\) + Method 1 \(recommended\): Use the **repo** tool to download the source code over SSH. \(You must have registered an SSH public key for access to Gitee.\) ``` repo init -u git@gitee.com:openharmony/manifest.git -b master --no-repo-verify @@ -82,7 +84,7 @@ This document describes how to acquire OpenHarmony source code and provides its repo forall -c 'git lfs pull' ``` - Method 2 \(recommended\): Use the **repo** tool to download the source code over HTTPS. + Method 2: Use the **repo** tool to download the source code over HTTPS. ``` repo init -u https://gitee.com/openharmony/manifest.git -b master --no-repo-verify @@ -91,41 +93,38 @@ This document describes how to acquire OpenHarmony source code and provides its ``` -- **Obtaining Latest OpenHarmony\_1.0.1\_release code** +- **Obtaining latest OpenHarmony\_1.0.1\_release code** >![](../public_sys-resources/icon-note.gif) **NOTE:** >Currently, only the source code for mini and small systems can be obtained through this release. - Use the **repo** tool to download the release code. + Use the **repo** tool to download the release code. ``` repo init -u https://gitee.com/openharmony/manifest.git -b OpenHarmony_1.0.1_release --no-repo-verify repo sync -c - repo[Release-Notes](../../release-notes/Readme.md) forall -c 'git lfs pull' + repo forall -c 'git lfs pull' ``` -- Obtaining the source code of other OpenHarmony releases - - For details about how to obtain the source code of other OpenHarmony releases, see the [Release-Notes](../../release-notes/Readme.md). - +- For details about how to obtain the source code of other OpenHarmony releases, see the [Release-Notes](../../release-notes/Readme.md). ## Method 2: Acquiring Source Code from HPM ### When to Use -If OpenHarmony is new to you, sample solutions are helpful to your development. You can obtain an open-source distribution from the [HPM](https://hpm.harmonyos.com/#/en/home) website, or customize a distribution by adding or deleting bundles of an open-source distribution. Then use **hpm-cli** to download and install the bundles and compilation toolchain on your local PC. +If OpenHarmony is new to you, sample solutions are helpful to your development. You can obtain an open-source distribution from the [HPM](https://hpm.harmonyos.com/#/en/home) website, or customize a distribution by adding or deleting bundles of an open-source distribution. Then use **hpm-cli** to download and install the bundles and compilation toolchain on your local PC. ### Prerequisites -You must install **Node.js** and HPM on your local PC. The installation procedure is as follows: +You must install **Node.js** and HPM on your local PC. The installation procedure is as follows: -1. Install **Node.js**. +1. Install **Node.js**. - Download **Node.js** from its official website and install it on your local PC. + Download **Node.js** from its official website and install it on your local PC. - You are advised to install [Node.js](https://nodejs.org/) 12.x \(including npm 6.14.4\) or a later version \(12.13.0 or later is recommended\). + You are advised to install [Node.js](https://nodejs.org/) 12.x \(including npm 6.14.4\) or a later version \(12.13.0 or later is recommended\). -2. Install the hpm-cli tool using **npm** delivered with **Node.js**. +2. Install the hpm-cli tool using **npm** delivered with **Node.js**. Open the CMD window and run the following command: @@ -149,56 +148,56 @@ You must install **Node.js** and HPM on your local PC. The installation proced ### How to Use 1. Search for distributions. - 1. Access the [HPM](https://hpm.harmonyos.com/#/en/home) page, and click the **Distribution** tab, as shown in the following figure. - 2. Enter a keyword \(for example: **camera**\) in the search box. All matched distributions are found. - 3. Specify filter criteria, such as the bundle type \(for example: **Board support** and **Kernel support**\), to further filter the distributions. - 4. Locate your desired distribution and click it to view details. + 1. Access the [HPM](https://hpm.harmonyos.com/#/en/home) page, and click the **Distribution** tab, as shown in the following figure. + 2. Enter a keyword \(for example: **camera**\) in the search box. All matched distributions are found. + 3. Specify filter criteria, such as the bundle type \(for example: **Board support** and **Kernel support**\), to further filter the distributions. + 4. Find your desired distribution and click it to view details. - **Figure 1** HPM page + **Figure 1** HPM page ![](figure/hpm-page.png "hpm-page") 2. Learn more about the distribution. 1. Read carefully the information about the distribution to learn its application scenarios, features, bundles, usage, and customization methods, as shown in the following figure. - 2. Click **Download** to download the distribution to your local PC. - 3. Click **Custom** to add or delete bundles of the distribution. + 2. Click **Download** to download the distribution to your local PC. + 3. Click **Custom** to add or delete bundles of the distribution. - **Figure 2** Example distribution + **Figure 2** Example distribution ![](figure/example-distribution.png "example-distribution") 3. Customize bundles. - 1. Access the **Custom solution** page, as shown in the following figure. - 2. Set the toggle switch next to a specific optional bundle to delete it from the distribution, or click **Add bundle** to add new bundles. + 1. Access the **Custom solution** page, as shown in the following figure. + 2. Set the toggle switch next to a specific optional bundle to delete it from the distribution, or click **Add bundle** to add new bundles. 3. Enter the basic information about your project, including the bundle name, version, and description, on the right pane. - 4. Click **Download**. The system then generates the OpenHarmony code structure file \(for example, **my\_cust\_dist.zip**\) and saves it to your local PC. + 4. Click **Download**. The system then generates the OpenHarmony code structure file \(for example, **my\_cust\_dist.zip**\) and saves it to your local PC. - **Figure 3** Customizing bundles + **Figure 3** Customizing bundles ![](figure/customizing-bundles.png "customizing-bundles") 4. Download and install bundles. 1. Decompress the downloaded file using the CLI tool CMD \(shell in Linux\). - 2. In the generated directory, run the **hpm install** command. - 3. The downloaded bundles are stored in the **ohos\_bundles** folder under the project directory. \(The source code of some bundles will be copied to a specified directory after the bundles are installed.\) + 2. In the generated directory, run the **hpm install** command. + 3. The downloaded bundles are stored in the **ohos\_bundles** folder under the project directory. \(The source code of some bundles will be copied to a specified directory after the bundles are installed.\) -## Method 3: Acquiring Source Code from Image Sites +## Method 3: Acquiring Source Code from Mirror Sites To ensure the download performance, you are advised to download the source code or the corresponding solution from the image library of the respective site listed in the table below. ->![](../public_sys-resources/icon-note.gif) **NOTE:** ->- The table below provides only the sites for downloading the latest OpenHarmony master and LTS code. For details about how to obtain the source code of earlier versions, see the [Release-Notes](../../release-notes/Readme.md). +>![](../public_sys-resources/icon-note.gif) **NOTE:** +>- The table below provides only the sites for downloading the latest OpenHarmony master and LTS code. For details about how to obtain the source code of earlier versions, see the [Release-Notes](../../release-notes/Readme.md). >- The Master 1.0 version is no longer maintained. -**Table 1** Sites for acquiring source code from image sites +**Table 1** Sites for acquiring source code -

LTS Code

+ - - - - @@ -246,13 +245,13 @@ To ensure the download performance, you are advised to download the source code - - - - - @@ -309,13 +308,13 @@ To ensure the download performance, you are advised to download the source code - - - -

LTS Code

Version Information

+

Version Information

Site

+

Site

SHA-256 Verification Code

+

SHA-256 Verification Code

Full code (for mini and small systems)

@@ -237,7 +236,7 @@ To ensure the download performance, you are advised to download the source code

Download

RELEASE-NOTES

+

Release notes

1.1.2

-

Master Code

+

Master Code

Version Information

+

Version Information

Site

+

Site

SHA-256 Verification Code

+

SHA-256 Verification Code

Full code (for standard systems)

@@ -300,7 +299,7 @@ To ensure the download performance, you are advised to download the source code

Download

RELEASE-NOTES

+

Release notes

1.0 (no longer maintained)

-

Compiler Toolchain

+

Compiler Toolchain

Version Information

+

Version Information

Site

+

Site

SHA-256 Verification Code

+

SHA-256 Verification Code

Compiler toolchain

@@ -330,89 +329,182 @@ To ensure the download performance, you are advised to download the source code
+ +## Method 4: Acquiring Source Code from the GitHub Image Repository (at 23:00 UTC Every Day) + + +Method 1 \(recommended\): Use the**repo**tool to download the source code over SSH. \(You must have registered an SSH public key for access to Gitee.\) + + repo init -u git@github.com:openharmony/manifest.git -b master --no-repo-verify + repo sync -c + repo forall -c 'git lfs pull' + +Method 2: Use the **repo** tool to download the source code over HTTPS. + + repo init -u https://github.com/openharmony/manifest.git -b master --no-repo-verify + repo sync -c + repo forall -c 'git lfs pull' + ## Source Code Directories The following table describes the OpenHarmony source code directories. -**Table 2** Source code directories +**Table 2** Source code directories + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -

Name

+

Description

+

applications

+

Application samples, for example, camera

+

base

+

Basic software service subsystem set and hardware service subsystem set

+

build

+

Bundle-based compilation, building, and configuration scripts

+ +

Bundle-based compilation, build, and configuration scripts

+

docs

+

Reference documents

+

domains

+

Enhanced software service subsystem set

+

drivers

+

Driver subsystem

+

foundation

+

Basic system capability subsystem set

+

kernel

+

Kernel subsystem

+

prebuilts

+

Compiler and tool chain subsystem

+

test

+

Testing subsystem

+

third_party

+

Open-source third-party software

+

utils

+

Commonly used development tools

+

vendor

+

Vendor-provided software

+

build.py

+

Compilation script file

+
+
diff --git a/en/device-dev/kernel/kernel-mini-appx-lib-posix.md b/en/device-dev/kernel/kernel-mini-appx-lib-posix.md index ebed9d85d51bb803ee54a998d7e944afd9621f5b..e5cc7ba886d7cd3f8bf895521bff5ec8bdf689c7 100644 --- a/en/device-dev/kernel/kernel-mini-appx-lib-posix.md +++ b/en/device-dev/kernel/kernel-mini-appx-lib-posix.md @@ -250,7 +250,8 @@ The OpenHarmony kernel uses the **musl libc** library and self-developed APIs

Deletes a file.

-

#include <fcntl.h

+

#include <fcntl.h>

int open(const char *path, int oflags, ...);

diff --git a/en/device-dev/kernel/kernel-mini-basic-interrupt-guide.md b/en/device-dev/kernel/kernel-mini-basic-interrupt-guide.md index b1b66d320fef87738c93177aeaa3f35b488dd17b..53c70db20a6b420c55a7fe28eaf0d19eb3843480 100644 --- a/en/device-dev/kernel/kernel-mini-basic-interrupt-guide.md +++ b/en/device-dev/kernel/kernel-mini-basic-interrupt-guide.md @@ -94,7 +94,7 @@ static UINT32 Example_Interrupt(VOID) HWI_PRIOR_T hwiPrio = 3; HWI_MODE_T mode = 0; HWI_ARG_T arg = 0; - + /* Create an interrupt. */ ret = HalHwiCreate(HWI_NUM_TEST, hwiPrio, mode, (HWI_PROC_FUNC)HwiUsrIrq, arg); if(ret == LOS_OK){ @@ -125,6 +125,6 @@ The development is successful if the return result is as follows: ``` Hwi create success! -Hwi delete success!. +Hwi delete success! ``` diff --git a/en/device-dev/porting/porting-thirdparty-cmake.md b/en/device-dev/porting/porting-thirdparty-cmake.md old mode 100644 new mode 100755 index b0c6419a7cbc633aadcfc646890e2761c8a73334..14d113166cad79b81f354f700e859beb4f7e7a56 --- a/en/device-dev/porting/porting-thirdparty-cmake.md +++ b/en/device-dev/porting/porting-thirdparty-cmake.md @@ -131,7 +131,7 @@ The following steps show how to configure and modify the toolchains for cross-co # Specify the C++ compiler (ensure that the path of the toolchain has been added to the PATH environment variable) and its flags. To perform cross-compilation, the --target flag must be specified. set(CMAKE_CXX_COMPILER clang++) set(CMAKE_CXX_FLAGS "--target=arm-liteos -D__clang__ -march=armv7-a -w") - # Specify the linker and its flags. --target and --sysroot must be specified. You can specify OHOS_ROOT_PATH via the suffix parameter of the cmake command. + # Specify the linker and its flags. --target and --sysroot must be specified. You can specify OHOS_SYSROOT_PATH via the suffix parameter of the cmake command. set(MY_LINK_FLAGS "--target=arm-liteos --sysroot=${OHOS_SYSROOT_PATH}") set(CMAKE_LINKER clang) set(CMAKE_CXX_LINKER clang++) diff --git a/en/device-dev/quick-start/quickstart-standard-docker-environment.md b/en/device-dev/quick-start/quickstart-standard-docker-environment.md index a40bf48c7621032c00d566caf749dcd8d0392204..6cb423557f300d8f98107d8daaa40cab824c1b92 100644 --- a/en/device-dev/quick-start/quickstart-standard-docker-environment.md +++ b/en/device-dev/quick-start/quickstart-standard-docker-environment.md @@ -44,6 +44,7 @@ Method 1 \(recommended\): Use the **repo** tool to download the source code ov repo init -u git@gitee.com:openharmony/manifest.git -b master --no-repo-verify repo sync -c repo forall -c 'git lfs pull' +bash build/prebuilts_download.sh ``` Method 2: Use the **repo** tool to download the source code over HTTPS. @@ -52,6 +53,7 @@ Method 2: Use the **repo** tool to download the source code over HTTPS. repo init -u https://gitee.com/openharmony/manifest.git -b master --no-repo-verify repo sync -c repo forall -c 'git lfs pull' +bash build/prebuilts_download.sh ``` ## Obtaining the Docker Environment @@ -61,13 +63,13 @@ repo forall -c 'git lfs pull' 1. Obtain the Docker image. ``` - docker pull swr.cn-south-1.myhuaweicloud.com/openharmony-docker/openharmony-docker-standard:0.0.3 + docker pull swr.cn-south-1.myhuaweicloud.com/openharmony-docker/openharmony-docker-standard:0.0.4 ``` 2. Go to the root directory of OpenHarmony code and run the following command to access the Docker build environment: ``` - docker run -it -v $(pwd):/home/openharmony swr.cn-south-1.myhuaweicloud.com/openharmony-docker/openharmony-docker-standard:0.0.3 + docker run -it -v $(pwd):/home/openharmony swr.cn-south-1.myhuaweicloud.com/openharmony-docker/openharmony-docker-standard:0.0.4 ``` @@ -89,29 +91,23 @@ repo forall -c 'git lfs pull' 3. Go to the root directory of OpenHarmony code and run the following command to access the Docker build environment: ``` - docker run -it -v $(pwd):/home/openharmony openharmony-docker-standard:0.0.3 + docker run -it -v $(pwd):/home/openharmony openharmony-docker-standard:0.0.4 ``` ## Building Source Code -1. Run the preprocessing script in the root directory of the source code. +1. Run the following script to start building for Standard-System Devices \(reference memory ≥ 128 MB\): - ``` - ../scripts/prepare.sh - ``` - -2. Run the following script to start building for Standard-System Devices \(reference memory ≥ 128 MB\): - - ``` - ./build.sh --product-name {product_name} - ``` + ``` + ./build.sh --product-name {product_name} + ``` - **product\_name** indicates the product supported by the current distribution, for example, **Hi3516DV300**. + **product\_name** indicates the product supported by the current distribution, for example, **Hi3516DV300**. - Files generated during the build are stored in the **out/ohos-arm-release/** directory, and the generated image is stored in the **out/ohos-arm-release/packages/phone/images/** directory. + Files generated during the build are stored in the **out/ohos-arm-release/** directory, and the generated image is stored in the **out/ohos-arm-release/packages/phone/images/** directory. -3. Burn the image. For details, see [Burning Images](quickstart-standard-burn.md). +2. Burn the image. For details, see [Burning Images](quickstart-standard-burn.md). >![](../public_sys-resources/icon-note.gif) **NOTE:** >You can exit Docker by simply running the **exit** command. diff --git a/en/device-dev/quick-start/quickstart-standard-running.md b/en/device-dev/quick-start/quickstart-standard-running.md index 5e377347e4126e2e62b0f8780a85fe739c255303..56033ecc0e418003d11a3f566a0602849674c6f4 100644 --- a/en/device-dev/quick-start/quickstart-standard-running.md +++ b/en/device-dev/quick-start/quickstart-standard-running.md @@ -1,6 +1,6 @@ # Running an Image -- [\#EN-US\_TOPIC\_0000001142160948/section153991115191314](#section153991115191314) +## Running an Image After the image burning is complete, perform the following steps to run the system: @@ -43,4 +43,6 @@ After the image burning is complete, perform the following steps to run the syst ![](figure/start-the-system.png) +## Next +Congratulations! You have completed the quick start for the standard system. Get yourself familiar with OpenHarmony by a [Development Example for Clock App](../device/device-clock-guide.md). diff --git a/en/device-dev/subsystems/Readme-EN.md b/en/device-dev/subsystems/Readme-EN.md index 86a43cbe70b80e64f7a577fc64cc32e43185b524..443fc64a65979c301836ab0cca38856d7cf3aa59 100644 --- a/en/device-dev/subsystems/Readme-EN.md +++ b/en/device-dev/subsystems/Readme-EN.md @@ -39,10 +39,10 @@ - [KWS SDK](subsys-aiframework-demo-sdk.md) - [KWS Plug-in](subsys-aiframework-demo-plugin.md) - [KWS Configuration File](subsys-aiframework-demo-conf.md) -- [Sensors](subsys-densor.md) - - [Sensors Overview](subsys-densor-overview.md) - - [Sensors Usage Guidelines](subsys-densor-guide.md) - - [Sensors Usage Example](subsys-densor-demo.md) +- [Sensors](subsys-sensor.md) + - [Sensors Overview](subsys-sensor-overview.md) + - [Sensors Usage Guidelines](subsys-sensor-guide.md) + - [Sensors Usage Example](subsys-sensor-demo.md) - [Application Framework](subsys-application-framework.md) - [Overview](subsys-application-framework-overview.md) - [Setting Up a Development Environment](subsys-application-framework-envbuild.md) diff --git a/en/device-dev/subsystems/oem_subsys_toolchain_hdc_guide.md b/en/device-dev/subsystems/oem_subsys_toolchain_hdc_guide.md index 8116d317a2f56abdd4fcd5304d2c5076fd5fdf6b..8cb18fe497bdb4d236cc15470edf1eec03457aee 100644 --- a/en/device-dev/subsystems/oem_subsys_toolchain_hdc_guide.md +++ b/en/device-dev/subsystems/oem_subsys_toolchain_hdc_guide.md @@ -45,7 +45,7 @@ This section describes how to set up the hdc\_std environment and use its common **Obtaining hdc\_std:** -Obtain hdc\_std from the **developtools\_hdc\_standard** repository in the **prebuilt** directory. +Obtain **hdc\_std** from the **prebuilt** directory at [developtools\_hdc\_standard](https://gitee.com/openharmony/developtools_hdc_standard). **Example:** @@ -702,5 +702,3 @@ hdc\_std shell - **Solutions** **hdc\_std.exe** requires no installation. It can be directly used on a disk or added to environment variables. Open the cmd window and run the **hdc\_std** command to use **hdc\_std.exe**. - - diff --git a/en/device-dev/subsystems/subsys-densor.md b/en/device-dev/subsystems/subsys-densor.md deleted file mode 100644 index 590bc4c9665c51548ee59cd1761c075a1cb71d3d..0000000000000000000000000000000000000000 --- a/en/device-dev/subsystems/subsys-densor.md +++ /dev/null @@ -1,9 +0,0 @@ -# Sensors - -- **[Sensors Overview](subsys-densor-overview.md)** - -- **[Sensors Usage Guidelines](subsys-densor-guide.md)** - -- **[Sensors Usage Example](subsys-densor-demo.md)** - - diff --git a/en/device-dev/subsystems/subsys-densor-demo.md b/en/device-dev/subsystems/subsys-sensor-demo.md similarity index 100% rename from en/device-dev/subsystems/subsys-densor-demo.md rename to en/device-dev/subsystems/subsys-sensor-demo.md diff --git a/en/device-dev/subsystems/subsys-densor-guide.md b/en/device-dev/subsystems/subsys-sensor-guide.md similarity index 100% rename from en/device-dev/subsystems/subsys-densor-guide.md rename to en/device-dev/subsystems/subsys-sensor-guide.md diff --git a/en/device-dev/subsystems/subsys-densor-overview.md b/en/device-dev/subsystems/subsys-sensor-overview.md similarity index 100% rename from en/device-dev/subsystems/subsys-densor-overview.md rename to en/device-dev/subsystems/subsys-sensor-overview.md diff --git a/en/device-dev/subsystems/subsys-sensor.md b/en/device-dev/subsystems/subsys-sensor.md new file mode 100644 index 0000000000000000000000000000000000000000..937d03221f56bff810edbf42b2697710d1df131f --- /dev/null +++ b/en/device-dev/subsystems/subsys-sensor.md @@ -0,0 +1,9 @@ +# Sensors + +- **[Sensors Overview](subsys-sensor-overview.md)** + +- **[Sensors Usage Guidelines](subsys-sensor-guide.md)** + +- **[Sensors Usage Example](subsys-sensor-demo.md)** + + diff --git a/en/device-dev/subsystems/subsys.md b/en/device-dev/subsystems/subsys.md index d6cdc8fccd7c05d497089ddff01479ce29691b37..74cc4fa005d4ed12c8011f05d7beff8a2476c714 100644 --- a/en/device-dev/subsystems/subsys.md +++ b/en/device-dev/subsystems/subsys.md @@ -12,7 +12,7 @@ - **[AI Framework](subsys-aiframework.md)** -- **[Sensors](subsys-densor.md)** +- **[Sensors](subsys-sensor.md)** - **[Application Framework](subsys-application-framework.md)** diff --git a/en/readme/ai.md b/en/readme/ai.md new file mode 100644 index 0000000000000000000000000000000000000000..6c6615a184a5a7d8c9c95e95fa5b8cb4b3050839 --- /dev/null +++ b/en/readme/ai.md @@ -0,0 +1,434 @@ +# AI + +- [Introduction](#section187321516154516) +- [Directory Structure](#section571610913453) +- [Constraints](#section5748426453) +- [Usage](#section6370123616447) +- [Repositories Involved](#section10492183517430) +- [Reference](#section6808423133718) + +## Introduction + +The AI subsystem is the part of OpenHarmony that provides native distributed AI capabilities. At the heart of the subsystem is a unified AI engine framework, which implements quick integration of AI algorithm plug-ins. The framework consists of the plug-in management, module management, and communication management modules, fulfilling lifecycle management and on-demand deployment of AI algorithms. Under this framework, AI algorithm APIs will be standardized to facilitate distributed calling of AI capabilities. In addition, unified inference APIs will be provided to adapt to different inference framework hierarchies. + +**Figure 1** AI engine framework +![](figures/ai-engine-framework.png "ai-engine-framework") + +## Directory Structure + +``` +/foundation/ai/engine # Home directory of the AI subsystem +├── interfaces +│ └── kits # External APIs of the AI subsystem +└── services +│ ├── client # Client module of the AI subsystem +│ │ ├── client_executor # Executor of the client module +│ │ └── communication_adapter # Communication adaptation layer for the client module, with extension supported +│ ├── common # Common tools and protocol modules of the AI subsystem +│ │ ├── platform +│ │ ├── protocol +│ │ └── utils +│ └── server # Server module of the AI subsystem +│ │ ├── communication_adapter # Communication adaptation layer for the server module, with extension supported +│ │ ├── plugin +│ │ ├── asr +│ │ └── keyword_spotting # ASR algorithm plug-in reference: keyword spotting +│ │ └── cv +│ │ └── image_classification # CV algorithm plug-in reference: image classification +│ │ ├── plugin_manager +│ │ └── server_executor # Executor of the server module +``` + +## Constraints + +* **Programming language**: C/C++ + +* **Operating system**: OpenHarmony + +* **Others**: The System Ability Manager \(Samgr\) has been started and is running properly. + +## Usage + +1. Compile the AI subsystem. + + The source code for lightweight AI framework is available at **//foundation/ai/engine/services**. + + The compilation procedure is as follows: + + 1. Set the compilation path. + + ``` + hb set -root dir (root dir is the root directory of the project code.) + ``` + + 2. Specify the product for compilation. \(After the product list is displayed using the following command, move to the desired product with arrow keys and press **Enter**.\) + + ``` + hb set -p + ``` + + 3. Start compilation. + + ``` + hb build -f (Use this command if you want to compile the entire repository.) + hb build ai_engine (Use this command if you want to compile only the ai_engine module.) + ``` + + >**Note**: For details about the hb configuration, see the readme of the build\_lite subsystem. + +2. Develop the plug-in, with keyword spotting as an example. + + Directory: //foundation/ai/engine/services/server/plugin/asr/keyword\_spotting + + >**Note**: The plug-in must implement the **IPlugin** and **IPluginCallback** APIs provided by the server. + + ``` + #include "plugin/i_plugin.h + class KWSPlugin : public IPlugin { # Inherits the public base class of the IPlugin API for Keywords Spotting Plugin (KWSPlugin). + KWSPlugin(); + ~KWSPlugin(); + + const long long GetVersion() const override; + const char* GetName() const override; + const char* GetInferMode() const override; + + int32_t Prepare(long long transactionId, const DataInfo &amp;inputInfo, DataInfo &amp;outputInfo) override; + int32_t SetOption(int optionType, const DataInfo &amp;inputInfo) override; + int32_t GetOption(int optionType, const DataInfo &amp;inputInfo, DataInfo &amp;outputInfo) override; + int32_t SyncProcess(IRequest *request, IResponse *&amp;response) override; + int32_t AsyncProcess(IRequest *request, IPluginCallback*callback) override; + int32_t Release(bool isFullUnload, long long transactionId, const DataInfo &amp;inputInfo) override; + . + . + . + }; + ``` + + >**Note**: Depending on the algorithm in use, you only need to implement the **SyncProcess** or **AsyncProcess** API. Use an empty function as a placeholder for the other API. In this example, the KWS plug-in uses the synchronous algorithm. Therefore, you need to implement **SyncProcess** API and use an empty function as a placeholder for the **SyncProcess** API. + + ``` + #include "aie_log.h" + #include "aie_retcode_inner.h" + . + . + . + + const long long KWSPlugin::GetVersion() const + { + return ALGOTYPE_VERSION_KWS; + } + + const char *KWSPlugin::GetName() const + { + return ALGORITHM_NAME_KWS.c_str(); + } + + const char *KWSPlugin::GetInferMode() const + { + return DEFAULT_INFER_MODE.c_str(); + } + . + . + . + int32_t KWSPlugin::AsyncProcess(IRequest *request, IPluginCallback *callback) + { + return RETCODE_SUCCESS; + } + ``` + +3. Develop the SDK, with keyword spotting as an example. + + Directory: //foundation/ai/engine/services/client/algorithm\_sdk/asr/keyword\_spotting + + Keyword spotting SDK: + + ``` + class KWSSdk { + public: + KWSSdk(); + virtual ~KWSSdk(); + + /** + * @brief Create a new session with KWS Plugin + * + * @return Returns KWS_RETCODE_SUCCESS(0) if the operation is successful, + * returns a non-zero value otherwise. + */ + int32_t Create(); + + /** + * @brief Synchronously execute keyword spotting once + * + * @param audioInput pcm data. + * @return Returns KWS_RETCODE_SUCCESS(0) if the operation is successful, + * returns a non-zero value otherwise. + */ + int32_t SyncExecute(const Array &audioInput); + + /** + * @brief Asynchronously execute keyword spotting once + * + * @param audioInput pcm data. + * @return Returns KWS_RETCODE_SUCCESS(0) if the operation is successful, + * returns a non-zero value otherwise. + */ + int32_t AsyncExecute(const Array &audioInput); + + /** + * @brief Set callback + * + * @param callback Callback function that will be called during the process. + * @return Returns KWS_RETCODE_SUCCESS(0) if the operation is successful, + * returns a non-zero value otherwise. + */ + int32_t SetCallback(const std::shared_ptr &callback); + + /** + * @brief Destroy the created session with KWS Plugin + * + * @return Returns KWS_RETCODE_SUCCESS(0) if the operation is successful, + * returns a non-zero value otherwise. + */ + int32_t Destroy(); + ``` + + >**Note**: The sequence for the SDK to call client APIs of the AI engine is as follows: AieClientInit -\> AieClientPrepare -\> AieClientSyncProcess/AieClientAsyncProcess -\> AieClientRelease -\> AieClientDestroy. An exception will be thrown if the call sequence is violated. In addition, all these APIs must be called. Otherwise, a memory leakage may occur. + + ``` + int32_t KWSSdk::KWSSdkImpl::Create() + { + if (kwsHandle_ != INVALID_KWS_HANDLE) { + HILOGE("[KWSSdkImpl]The SDK has been created"); + return KWS_RETCODE_FAILURE; + } + if (InitComponents() != RETCODE_SUCCESS) { + HILOGE("[KWSSdkImpl]Fail to init sdk components"); + return KWS_RETCODE_FAILURE; + } + int32_t retCode = AieClientInit(configInfo_, clientInfo_, algorithmInfo_, nullptr); + if (retCode != RETCODE_SUCCESS) { + HILOGE("[KWSSdkImpl]AieClientInit failed. Error code[%d]", retCode); + return KWS_RETCODE_FAILURE; + } + if (clientInfo_.clientId == INVALID_CLIENT_ID) { + HILOGE("[KWSSdkImpl]Fail to allocate client id"); + return KWS_RETCODE_FAILURE; + } + DataInfo inputInfo = { + .data = nullptr, + .length = 0, + }; + DataInfo outputInfo = { + .data = nullptr, + .length = 0, + }; + retCode = AieClientPrepare(clientInfo_, algorithmInfo_, inputInfo, outputInfo, nullptr); + if (retCode != RETCODE_SUCCESS) { + HILOGE("[KWSSdkImpl]AieclientPrepare failed. Error code[%d]", retCode); + return KWS_RETCODE_FAILURE; + } + if (outputInfo.data == nullptr || outputInfo.length <= 0) { + HILOGE("[KWSSdkImpl]The data or length of output info is invalid"); + return KWS_RETCODE_FAILURE; + } + MallocPointerGuard pointerGuard(outputInfo.data); + retCode = PluginHelper::UnSerializeHandle(outputInfo, kwsHandle_); + if (retCode != RETCODE_SUCCESS) { + HILOGE("[KWSSdkImpl]Get handle from inputInfo failed"); + return KWS_RETCODE_FAILURE; + } + return KWS_RETCODE_SUCCESS; + } + + int32_t KWSSdk::KWSSdkImpl::SyncExecute(const Array &audioInput) + { + intptr_t newHandle = 0; + Array kwsResult = { + .data = nullptr, + .size = 0 + }; + DataInfo inputInfo = { + .data = nullptr, + .length = 0 + }; + DataInfo outputInfo = { + .data = nullptr, + .length = 0 + }; + int32_t retCode = PluginHelper::SerializeInputData(kwsHandle_, audioInput, inputInfo); + if (retCode != RETCODE_SUCCESS) { + HILOGE("[KWSSdkImpl]Fail to serialize input data"); + callback_->OnError(KWS_RETCODE_SERIALIZATION_ERROR); + return RETCODE_FAILURE; + } + retCode = AieClientSyncProcess(clientInfo_, algorithmInfo_, inputInfo, outputInfo); + if (retCode != RETCODE_SUCCESS) { + HILOGE("[KWSSdkImpl]AieClientSyncProcess failed. Error code[%d]", retCode); + callback_->OnError(KWS_RETCODE_PLUGIN_EXECUTION_ERROR); + return RETCODE_FAILURE; + } + if (outputInfo.data == nullptr || outputInfo.length <= 0) { + HILOGE("[KWSSdkImpl] The data or length of outputInfo is invalid. Error code[%d]", retCode); + callback_->OnError(KWS_RETCODE_NULL_PARAM); + return RETCODE_FAILURE; + } + MallocPointerGuard pointerGuard(outputInfo.data); + retCode = PluginHelper::UnSerializeOutputData(outputInfo, newHandle, kwsResult); + if (retCode != RETCODE_SUCCESS) { + HILOGE("[KWSSdkImpl]UnSerializeOutputData failed. Error code[%d]", retCode); + callback_->OnError(KWS_RETCODE_UNSERIALIZATION_ERROR); + return retCode; + } + if (kwsHandle_ != newHandle) { + HILOGE("[KWSSdkImpl]The handle[%lld] of output data is not equal to the current handle[%lld]", + (long long)newHandle, (long long)kwsHandle_); + callback_->OnError(KWS_RETCODE_PLUGIN_SESSION_ERROR); + return RETCODE_FAILURE; + } + callback_->OnResult(kwsResult); + return RETCODE_SUCCESS; + } + + int32_t KWSSdk::KWSSdkImpl::Destroy() + { + if (kwsHandle_ == INVALID_KWS_HANDLE) { + return KWS_RETCODE_SUCCESS; + } + DataInfo inputInfo = { + .data = nullptr, + .length = 0 + }; + int32_t retCode = PluginHelper::SerializeHandle(kwsHandle_, inputInfo); + if (retCode != RETCODE_SUCCESS) { + HILOGE("[KWSSdkImpl]SerializeHandle failed. Error code[%d]", retCode); + return KWS_RETCODE_FAILURE; + } + retCode = AieClientRelease(clientInfo_, algorithmInfo_, inputInfo); + if (retCode != RETCODE_SUCCESS) { + HILOGE("[KWSSdkImpl]AieClientRelease failed. Error code[%d]", retCode); + return KWS_RETCODE_FAILURE; + } + retCode = AieClientDestroy(clientInfo_); + if (retCode != RETCODE_SUCCESS) { + HILOGE("[KWSSdkImpl]AieClientDestroy failed. Error code[%d]", retCode); + return KWS_RETCODE_FAILURE; + } + mfccProcessor_ = nullptr; + pcmIterator_ = nullptr; + callback_ = nullptr; + kwsHandle_ = INVALID_KWS_HANDLE; + return KWS_RETCODE_SUCCESS; + } + ``` + +4. **Sample development** [\(similar to keyword spotting\)](https://gitee.com/openharmony/applications_sample_camera/tree/master/ai) + + Directory: //applications/sample/camera/ai/asr/keyword\_spotting + + Call the **Create** API. + + ``` + bool KwsManager::PreparedInference() + { + if (capturer_ == nullptr) { + printf("[KwsManager] only load plugin after AudioCapturer ready\n"); + return false; + } + if (plugin_ != nullptr) { + printf("[KwsManager] stop created InferencePlugin at first\n"); + StopInference(); + } + plugin_ = std::make_shared(); + if (plugin_ == nullptr) { + printf("[KwsManager] fail to create inferencePlugin\n"); + return false; + } + if (plugin_->Create() != SUCCESS) { + printf("[KwsManager] KWSSdk fail to create.\n"); + return false; + } + std::shared_ptr callback = std::make_shared(); + if (callback == nullptr) { + printf("[KwsManager] new Callback failed.\n"); + return false; + } + plugin_->SetCallback(callback); + return true; + } + ``` + + Call the **SyncExecute** API. + + ``` + void KwsManager::ConsumeSamples() + { + uintptr_t sampleAddr = 0; + size_t sampleSize = 0; + int32_t retCode = SUCCESS; + while (status_ == RUNNING) { + { + std::lock_guard lock(mutex_); + if (cache_ == nullptr) { + printf("[KwsManager] cache_ is nullptr.\n"); + break; + } + sampleSize = cache_->GetCapturedBuffer(sampleAddr); + } + if (sampleSize == 0 || sampleAddr == 0) { + continue; + } + Array input = { + .data = (int16_t *)(sampleAddr), + .size = sampleSize >> 1 + }; + { + std::lock_guard lock(mutex_); + if (plugin_ == nullptr) { + printf("[KwsManager] cache_ is nullptr.\n"); + break; + } + if ((retCode = plugin_->SyncExecute(input)) != SUCCESS) { + printf("[KwsManager] SyncExecute KWS failed with retCode = [%d]\n", retCode); + continue; + } + } + } + } + ``` + + Call the **Destroy** API. + + ``` + void KwsManager::StopInference() + { + printf("[KwsManager] StopInference\n"); + if (plugin_ != nullptr) { + int ret = plugin_->Destroy(); + if (ret != SUCCESS) { + printf("[KwsManager] plugin_ destroy failed.\n"); + } + plugin_ = nullptr; + } + } + ``` + + +## Repositories Involved + +AI subsystem: + +ai\_engine + +Dependency repositories: + +build\_lite + +distributedschedule\_services\_samgr\_lite + +startup\_init\_lite + +## Reference + +[AI Engine Framework Development Guide](https://gitee.com/openharmony/docs/blob/master/en/device-dev/subsystems/development-examples.md) + + diff --git a/en/readme/figures/ai-engine-framework.png b/en/readme/figures/ai-engine-framework.png new file mode 100644 index 0000000000000000000000000000000000000000..91f3e18d940a6a3af7fb7b66cf3d5874d7354f1f Binary files /dev/null and b/en/readme/figures/ai-engine-framework.png differ diff --git a/en/readme/figures/en-us_image_ark_frontend.png b/en/readme/figures/en-us_image_ark_frontend.png index e8e9951f3f2dc5b566a3d9b36229def46c41aecd..00e5c3750329155150266b9721814d5c7769b506 100644 Binary files a/en/readme/figures/en-us_image_ark_frontend.png and b/en/readme/figures/en-us_image_ark_frontend.png differ 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/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/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/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/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/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/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\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\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 08258f16922a1fe8421ce0b1388128a99e46537b..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/js-reference/\345\272\224\347\224\250\346\211\223\347\202\271.md" +++ /dev/null @@ -1,368 +0,0 @@ -# 应用打点 - -- [导入模块](#zh-cn_topic_0000001150092213_s56d19203690d4782bfc74069abb6bd71) -- [权限](#zh-cn_topic_0000001150092213_section11257113618419) -- [方法](#zh-cn_topic_0000001150092213_section125675489541) -- [write\(string, EventType, any..., AsyncCallback\)](#zh-cn_topic_0000001150092213_section192192415554) -- [write\(string, EventType, any...\)](#zh-cn_topic_0000001150092213_section1696563334210) -- [writeJson\(string, EventType, object, AsyncCallback\)](#zh-cn_topic_0000001150092213_section570630172512) -- [writeJson\(string, EventType, object\)](#zh-cn_topic_0000001150092213_section0857164934517) -- [枚举](#zh-cn_topic_0000001150092213_section1978842154715) -- [EventType](#zh-cn_topic_0000001150092213_section099619567453) - -## 导入模块 - -``` -import hiappevent from '@ohos.hiappevent'; -``` - -## 权限 - -无 - -## 方法 - -## write\(string, EventType, any..., AsyncCallback\) - -应用事件打点，将事件信息写入到当天的事件文件中，可接收类型为不定参数的事件参数，使用callback方式作为异步方法。 - -**参数：** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

eventName

-

string

-

是

-

应用事件名称。

-

eventType

-

EventType

-

是

-

应用事件类型。

-

params

-

any...

-

否

-

应用事件的参数，按顺序输入事件的参数名与参数值。参数名的类型只能为string类型，参数值的类型只能为string、number、boolean、Array（数组数据类型只能为string、number、boolean）。

-

callback

-

AsyncCallback<number>

-

否

-

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

-
  • 返回值为0表示事件参数校验成功，事件正常异步写入事件文件；
  • 大于0表示事件存在异常参数，事件在忽略异常参数后再异步写入事件文件；
  • 小于0表示事件校验失败，不执行事件异步打点操作。
-
- -**示例：** - -``` -hiappevent.write("testEvent", hiappevent.EventType.FAULT, "intData", 100, "strData", "strValue", (err, value) => { - if (err) { - // 事件写入异常：事件存在异常参数或者事件校验失败不执行写入 - console.error(`failed to write event because ${err}`); - return; - } - - // 事件写入正常 - console.log(`success to write event: ${value}`); -}); -``` - -## write\(string, EventType, any...\) - -应用事件打点，将事件信息写入到当天的事件文件中，可接收类型为不定参数的事件参数，使用promise方式作为异步方法。 - -**参数：** - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

eventName

-

string

-

是

-

应用事件名称。

-

eventType

-

EventType

-

是

-

应用事件类型。

-

params

-

any...

-

否

-

应用事件的参数，按顺序输入事件的参数名与参数值。参数名的类型只能为string类型，参数值的类型只能为string、number、boolean、Array（数组数据类型只能为string、number、boolean）。

-
- -**返回值：** - - - - - - - - - - -

类型

-

说明

-

Promise<void>

-

Promise函数

-
- -**示例：** - -``` -hiappevent.write("testEvent", hiappevent.EventType.FAULT, "intData", 100, "strData", "strValue") - .then((value) => { - // 事件写入正常 - console.log(`success to write event: ${value}`); - }).catch((err) => { - // 事件写入异常：事件存在异常参数或者事件校验失败不执行写入 - console.error(`failed to write event because ${err}`); - }); -``` - -## writeJson\(string, EventType, object, AsyncCallback\) - -应用事件打点，将事件信息写入到当天的事件文件中，可接收类型为JSON对象的事件参数，使用callback方式作为异步方法。 - -**参数：** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

eventName

-

string

-

是

-

应用事件名称。

-

eventType

-

EventType

-

是

-

应用事件类型。

-

jsonParam

-

object

-

是

-

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

-

callback

-

AsyncCallback<number>

-

否

-

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

-
  • 返回值为0表示事件参数校验成功，事件正常异步写入事件文件；
  • 大于0表示事件存在异常参数，事件在忽略异常参数后再异步写入事件文件；
  • 小于0表示事件校验失败，不执行事件异步打点操作。
-
- -**示例：** - -``` -hiappevent.writeJson("testEvent", hiappevent.EventType.FAULT, {"intData":100, "strData":"strValue"}, (err, value) => { - if (err) { - // 事件写入异常：事件存在异常参数或者事件校验失败不执行写入 - console.error(`failed to write event because ${err}`); - return; - } - - // 事件写入正常 - console.log(`success to write event: ${value}`); -}); -``` - -## writeJson\(string, EventType, object\) - -应用事件打点，将事件信息写入到当天的事件文件中，可接收类型为JSON对象的事件参数，使用promise方式作为异步方法。 - -**参数：** - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

eventName

-

string

-

是

-

应用事件名称。

-

eventType

-

EventType

-

是

-

应用事件类型。

-

jsonParam

-

object

-

是

-

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

-
- -**返回值：** - - - - - - - - - - -

类型

-

说明

-

Promise<void>

-

Promise函数

-
- -**示例：** - -``` -hiappevent.writeJson("testEvent", hiappevent.EventType.FAULT, {"intData":100, "strData":"strValue"}) - .then((value) => { - // 事件写入正常 - console.log(`success to write event: ${value}`); - }).catch((err) => { - // 事件写入异常：事件存在异常参数或者事件校验失败不执行写入 - console.error(`failed to write event because ${err}`); - }); -``` - -## 枚举 - -## EventType - -用于表示事件类型。 - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

默认值

-

说明

-

FAULT

-

1

-

故障类型事件。

-

STATISTIC

-

2

-

统计类型事件。

-

SECURITY

-

3

-

安全类型事件。

-

BEHAVIOR

-

4

-

系统行为事件。

-
- 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\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 52a38c973cc66006b36a41a5fe4f95b1f73ea541..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\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/\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 d84cf90dfaeb99cec36facd83a0005c9cd3f39cf..0000000000000000000000000000000000000000 --- "a/zh-cn/application-dev/js-reference/\351\237\263\351\242\221\347\256\241\347\220\206.md" +++ /dev/null @@ -1,2079 +0,0 @@ -# 音频管理 - -- [导入模块](#s56d19203690d4782bfc74069abb6bd71) -- [权限](#section11257113618419) -- [getAudioManager\(\): AudioManager](#section84581011418) -- [AudioVolumeType](#section92261857172218) -- [DeviceFlag](#section11285183164210) -- [DeviceRole](#section380038142619) -- [DeviceType](#section11727420122710) -- [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: DeviceType, active: boolean, callback: AsyncCallback\): void7+](#section103558400222) - - [setDeviceActive\(deviceType: DeviceType, active: boolean\): Promise7+](#section1235914401228) - - [isDeviceActive\(deviceType: DeviceType, callback: AsyncCallback\): void7+](#section12363240122219) - - [isDeviceActive\(deviceType: DeviceType\): 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

-

无效设备。

-

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.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: 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/\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/CommonEvent\345\274\200\345\217\221\346\214\207\345\215\227.md" "b/zh-cn/application-dev/quick-start/CommonEvent\345\274\200\345\217\221\346\214\207\345\215\227.md" new file mode 100644 index 0000000000000000000000000000000000000000..3f95719dfffb483896bf6ec0f701d0044397645a --- /dev/null +++ "b/zh-cn/application-dev/quick-start/CommonEvent\345\274\200\345\217\221\346\214\207\345\215\227.md" @@ -0,0 +1,522 @@ +CommonEvent开发指南 + +#### 基本概念 + +OpenHarmony通过CES（Common Event Service，公共事件服务）为应用程序提供订阅、发布、退订公共事件的能力。 + +公共事件可分为系统公共事件和自定义公共事件。 + +- 系统公共事件：系统将收集到的事件信息，根据系统策略发送给订阅该事件的用户程序。 例如：系统关键服务发布的系统事件（例如：hap安装，更新，卸载等）。 + +- 自定义公共事件：应用自定义一些公共事件用来实现跨应用的事件通信能力。 + +每个应用都可以按需订阅公共事件，订阅成功且公共事件发布，系统会把其发送给应用。这些公共事件可能来自系统、其他应用和应用自身。 + + + +#### 接口列表 + +| 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) | 支持 | 支持 | 支持 | 支持 | 不支持 | + + + +#### 导入模块 + +```js +import CommonEvent from '@ohos.commonevent'; +``` + + + +#### 创建公共事件订阅者 + +根据开发者设定的公共事件订阅相关信息（比如准备订阅的公共事件集等）创建公共事件订阅者对象。 + +- CommonEventSubscribeInfo类型说明 + + CommonEventSubscribeInfo封装公共事件订阅相关信息，比如准备订阅的公共事件集、发布者必须具备的权限、发布者的设备ID、发布者的用户ID、优先级等。 + + | 名称 | 读写属性 | 类型 | 必填 | 描述 | + | ------------------- | -------- | ------------- | ---- | ------------------------------------------------------------ | + | events | 只读 | Array | 是 | 表示要订阅的公共事件集。 | + | publisherPermission | 只读 | string | 否 | 表示发布者的权限。 | + | publisherDeviceId | 只读 | int | 否 | 表示发布者的设备ID，该值必须是同一ohos网络上的现有设备ID。 | + | userId | 只读 | int | 否 | 表示发布者的用户ID。默认值当前用户的ID。如果指定了此参数，则该值必须是系统中现有的用户ID。 | + | priority | 只读 | int | 否 | 表示订阅者的优先级，范围为-100~1000，用于有序公共事件。 | + +- CommonEventSubscriber 类说明 + + 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形式） | + + + +- 创建订阅者接口（callback形式） + + CommonEvent.createSubscriber(subscribeInfo: CommonEventSubscribeInfo, callback: AsyncCallback) + + - 接口参数描述 + + + | 名称 | 读写属性 | 类型 | 必填 | 描述 | + | ------------- | -------- | ------------------------------------ | ---- | ------------------------ | + | subscribeInfo | 只读 | CommonEventSubscribeInfo | 是 | 表示公共事件订阅信息 | + | callback | 只读 | AsyncCallback | 是 | 表示创建订阅者的回调方法 | + + - 返回值 + + void + + - 示例代码 + + ```js + var subscriber; //用于保存创建成功的订阅者对象，后续使用其完成订阅及退订的动作 + //订阅者信息 + var subscribeInfo = { + events: ["event"] + }; + //创建订阅者回调 + function CreateSubscriberCallBack(err, data) { + console.info("==========================>CreateSubscriberCallBack=======================>"); + subscriber = data; + } + //创建订阅者 + CommonEvent.createSubscriber(subscribeInfo, CreateSubscriberCallBack); + ``` + +- 创建订阅者接口（Promise形式） + + CommonEvent.createSubscriber(subscribeInfo: CommonEventSubscribeInfo) + + - 接口参数描述 + + | 名称 | 读写属性 | 类型 | 必填 | 描述 | + | ------------- | -------- | ------------------------ | ---- | ------------ | + | subscribeInfo | 只读 | CommonEventSubscribeInfo | 是 | 表示订阅信息 | + + - 返回值 + + Promise + + - 示例代码 + + ```js + var subscriber; //用于保存创建成功的订阅者对象，后续使用其完成订阅及退订的动作 + //订阅者信息 + var subscribeInfo = { + events: ["event"] + }; + //创建订阅者 + CommonEvent.createSubscriber(subscribeInfo).then((data) => { + console.info("==========================>createSubscriberPromise=======================>"); + subscriber = data; + }); + ``` + + + +#### 订阅公共事件 + +订阅公共事件，并指定公共事件订阅者对象和接收公共事件的回调函数。 + +- CommonEventData类型说明 + + CommonEventData封装公共事件相关信息。用于在接收时处理数据。 + + | 名称 | 读写属性 | 类型 | 必填 | 描述 | + | ---------- | -------- | -------------------- | ---- | ------------------------------------------------------- | + | event | 只读 | string | 是 | 表示当前接收的公共事件名称 | + | bundleName | 只读 | string | 否 | 表示包名称 | + | code | 只读 | int | 否 | 表示公共事件的结果代码，用于传递int类型的数据 | + | data | 只读 | string | 否 | 表示公共事件的自定义结果数据，用于传递string 类型的数据 | + | parameters | 只读 | {[key: string]: any} | 否 | 表示公共事件的附加信息 | + +- 订阅公共事件接口（callback形式） + + CommonEvent.subscribe(subscriber: CommonEventSubscriber, callback: AsyncCallback) + + - 接口参数描述 + + | 名称 | 读写属性 | 类型 | 必填 | 描述 | + | ---------- | -------- | ------------------------------ | ---- | ------------------------------ | + | 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); + } + //创建订阅者 + 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); + ``` + + + +#### 发布公共事件 + +发布指定事件名称的公共事件，并可携带事件相关数据、属性、限制等信息。 + +- CommonEventPublishData类型说明 + + CommonEventPublishData封装公共事件发布相关数据、属性及限制等信息，包括公共事件类型（有序或无序）、订阅者所需权限等。 + + | 名称 | 读写属性 | 类型 | 必填 | 描述 | + | --------------------- | -------- | -------------------- | ---- | ---------------------------- | + | bundleName | 只读 | string | 否 | 表示包名称 | + | code | 只读 | int | 否 | 表示公共事件的结果代码 | + | data | 只读 | string | 否 | 表示公共事件的自定义结果数据 | + | subscriberPermissions | 只读 | Array | 否 | 表示订阅者所需的权限 | + | isOrdered | 只读 | bool | 否 | 表示是否是有序事件 | + | parameters | 只读 | {[key: string]: any} | 否 | 表示公共事件的附加信息 | + +- 发布公共事件接口（callback形式） + + CommonEvent.publish(event: string, callback: AsyncCallback) + + - 接口参数描述 + + | 名称 | 读写属性 | 类型 | 必填 | 描述 | + | -------- | -------- | ------------------- | ---- | ------------------------ | + | event | 只读 | string | 是 | 表示要发送的公共事件名称 | + | callback | 只读 | AsyncCallback | 是 | 表示被指定的回调方法 | + + - 返回值 + + void + + - 示例代码 + + ```js + //发布公共事件回调 + function PublishCallBack(err) { + console.info("==========================>PublishCallBack=======================>"); + console.info("==========================>err:=======================>", err.code); + } + //发布公共事件 + CommonEvent.publish("publish_event", PublishCallBack); + ``` + +- 发布公共事件指定发布信息接口（callback形式） + + CommonEvent.publish(event: string, options: CommonEventPublishData, callback: AsyncCallback) + + - 接口参数描述 + + | 名称 | 读写属性 | 类型 | 必填 | 描述 | + | -------- | -------- | ---------------------- | ---- | ------------------------ | + | event | 只读 | string | 是 | 表示要发布的公共事件名称 | + | options | 只读 | CommonEventPublishData | 是 | 表示发布公共事件的属性 | + | callback | 只读 | AsyncCallback | 是 | 表示被指定的回调方法 | + + - 返回值 + + void + + - 示例代码 + + ```js + //公共事件相关信息 + var options = { + code: 0; //公共事件的初始代码 + data: "initial data"; //公共事件的初始数据 + isOrdered: true; //有序公共事件 + } + //发布公共事件回调 + function PublishCallBack(err) { + console.info("==========================>PublishCallBack=======================>"); + } + //发布公共事件 + CommonEvent.publish("publish_event", options, PublishCallBack); + ``` + + + + +#### 取消订阅公共事件 + +- 取消订阅公共事件接口（callback形式） + + CommonEvent.unsubscribe(subscriber: CommonEventSubscriber, callback?: AsyncCallback) + + - 接口参数描述 + + | 名称 | 读写属性 | 类型 | 必填 | 描述 | + | ---------- | -------- | --------------------- | ---- | ---------------------- | + | 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); + ``` + + + + +#### 系统公共事件列表 + +| 系统公共事件宏 | 系统公共事件名称 | 订阅者所需权限 | +| ------------------------------------------------------------ | ----------------------------------------------------------- | ------------------------------------------------------------ | +| 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 | 无 | 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/Notification\345\274\200\345\217\221\346\214\207\345\215\227.md" "b/zh-cn/application-dev/quick-start/Notification\345\274\200\345\217\221\346\214\207\345\215\227.md" new file mode 100644 index 0000000000000000000000000000000000000000..ae87bce4b78b4d61437370f0610e4c69e28bf985 --- /dev/null +++ "b/zh-cn/application-dev/quick-start/Notification\345\274\200\345\217\221\346\214\207\345\215\227.md" @@ -0,0 +1,1583 @@ + + +Notification开发指南 + +#### 简介 + +OpenHarmony通过ANS（Advanced Notification Service，通知系统服务）对通知类型的消息进行管理，支持多种通知类型，包括文本，长文本，多文本，图片，社交，媒体等。所有系统服务以及应用都可以通过通知接口发送通知消息，用户可以通过SystemUI查看所有通知消息。 + +通知常见的使用场景： + +- 显示接收到短消息、即时消息等。 +- 显示应用的推送消息，如广告、版本更新等。 +- 显示当前正在进行的事件，如导航、下载等。 + + + +#### 接口列表 + +| 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(type: SlotType, callback: AsyncCallback) | 支持 | 支持 | 支持 | 支持 | +| Notification.addSlot(type: SlotType) | 支持 | 支持 | 支持 | 支持 | +| 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.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.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 | 支持 | 支持 | 支持 | 支持 | + + + +#### Notification接口 + +##### 导入模块 + +```js +import Notification from '@ohos.notification'; +``` + + + +##### NotificationSlot类型说明 + +NotificationSlot可以对提示音、振动等进行设置。一个应用可以创建一个或多个NotificationSlot，在发布通知时，通过绑定不同的NotificationSlot，实现不同用途。 + +| 名称 | 读写属性 | 类型 | 必填 | 描述 | +| -------------------- | -------- | ------------- | ---- | ---------------------------- | +| type | 读、写 | SlotType | 是 | 通道类型 | +| level | 读、写 | SlotLevel | 否 | 通知级别 | +| desc | 读、写 | string | 否 | 通知渠道描述信息 | +| badgeFlag | 读、写 | boolean | 否 | 是否显示角标 | +| bypassDnd | 读、写 | boolean | 否 | 置是否在系统中绕过免打扰模式 | +| lockscreenVisibility | 读、写 | boolean | 否 | 在锁定屏幕上显示通知的模式 | +| vibrationEnabled | 读、写 | boolean | 否 | 是否可振动 | +| sound | 读、写 | string | 否 | 通知提示音 | +| lightEnabled | 读、写 | boolean | 否 | 是否闪灯 | +| lightColor | 读、写 | number | 否 | 通知灯颜色 | +| vibrationValues | 读、写 | Array | 否 | 通知振动样式 | + +- SlotType类型说明 + +| 名称 | 读写属性 | 类型 | 描述 | +| -------------------- | -------- | ---- | -------- | +| SOCIAL_COMMUNICATION | 只读 | enum | 社交类型 | +| SERVICE_INFORMATION | 只读 | enum | 服务类型 | +| CONTENT_INFORMATION | 只读 | enum | 内容类型 | +| OTHER_TYPES | 只读 | enum | 其他类型 | + +- SlotLevel类型说明 + +| 名称 | 读写属性 | 类型 | 描述 | +| ------------- | -------- | ---- | ------------------------------------------------------------ | +| LEVEL_NONE | 只读 | enum | 表示通知不发布 | +| LEVEL_MIN | 只读 | enum | 表示通知可以发布，但不在状态栏显示，不自动弹出，无提示音；该级别不适用于前台服务的场景 | +| LEVEL_LOW | 只读 | enum | 表示通知发布后在状态栏显示，不自动弹出，无提示音 | +| LEVEL_DEFAULT | 只读 | enum | 表示通知发布后在状态栏显示，不自动弹出，触发提示音 | +| LEVEL_HIGH | 只读 | enum | 表示通知发布后在状态栏显示，自动弹出，触发提示音 | + + + +##### NotificationRequest类型说明 + +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 | 否 | 通知唯一标识 | + +- NotificationContent类型说明 + + +| 名称 | 读写属性 | 类型 | 必填 | 描述 | +| ----------- | -------- | ---------------------------- | ---- | -------------------- | +| contentType | 读、写 | ContentType | 是 | 通知内容类型 | +| normal | 读、写 | NotificationBasicContent | 否 | 普通类型通知内容 | +| longText | 读、写 | NotificationLongTextContent | 否 | 长文本类型通知内容 | +| multiLine | 读、写 | NotificationMultiLineContent | 否 | 多行文本类型通知内容 | +| picture | 读、写 | NotificationPictureContent | 否 | 图片类型通知内容 | + +- ContentType类型说明 + +| 名称 | 读写属性 | 类型 | 描述 | +| --------------------------------- | -------- | ---- | ---------------- | +| NOTIFICATION_CONTENT_BASIC_TEXT | 只读 | enum | 普通类型通知 | +| NOTIFICATION_CONTENT_LONG_TEXT | 只读 | enum | 长文本类型通知 | +| NOTIFICATION_CONTENT_PICTURE | 只读 | enum | 图片类型通知 | +| NOTIFICATION_CONTENT_CONVERSATION | 只读 | enum | 社交类型通知 | +| NOTIFICATION_CONTENT_MULTILINE | 只读 | enum | 多行文本类型通知 | + +- 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 | 否 | 按钮图标 | + + + +##### 创建通知通道 + +- 创建通知通道（callback形式) + + Notification.addSlot(type: SlotType, callback: AsyncCallback) + + - 参数描述 + + | 名称 | 读写属性 | 类型 | 必填 | 描述 | + | -------- | -------- | ------------------- | ---- | ---------------------- | + | type | 只读 | SlotType | 是 | 要创建的通知通道的类型 | + | callback | 只读 | AsyncCallback | 是 | 表示被指定的回调方法 | + + - 返回值 + + void + + - 示例代码 + + ```js + //addslot回调 + function addSlotCallBack(err) { + console.info("==========================>addSlotCallBack=======================>"); + } + Notification.addSlot(SOCIAL_COMMUNICATION, addSlotCallBack) + ``` + + + +- 创建通知通道（Promise形式) + + Notification.addSlot(type: SlotType) + + - 参数描述 + + | 名称 | 读写属性 | 类型 | 必填 | 描述 | + | ---- | -------- | -------- | ---- | ---------------------- | + | type | 只读 | SlotType | 是 | 要创建的通知通道的类型 | + + - 返回值 + + Promise<**void**> + + - 示例代码 + + ```js + Notification.addSlot(SOCIAL_COMMUNICATION).then((void) => { + console.info("==========================>addSlotCallback=======================>"); + }); + ``` + + + +##### 获取通知通道 + +- 获取一个通知通道（callback形式) + + Notification.getSlot(slotType: SlotType, callback: AsyncCallback) + + - 参数描述 + + | 名称 | 读写属性 | 类型 | 必填 | 描述 | + | -------- | -------- | ------------------------------- | ---- | ----------------------------------------------------------- | + | slotType | 只读 | slotType | 是 | 通知渠道类型,目前分为社交通信、服务提醒、内容咨询和其他类型 | + | callback | 只读 | AsyncCallback | 是 | 表示被指定的回调方法 | + + - 返回值 + + void + + - 示例代码 + + ```js + //getSlot回调 + function getSlotCallback(err,data) { + console.info("==========================>getSlotCallback=======================>"); + } + var slotType = SOCIAL_COMMUNICATION; + Notification.getSlot(slotType, getSlotCallback) + ``` + + + +- 获取一个通知通道（Promise形式) + + Notification.getSlot(slotType) + + - 参数描述 + + | 名称 | 读写属性 | 类型 | 必填 | 描述 | + | -------- | -------- | -------- | ---- | ----------------------------------------------------------- | + | slotType | 只读 | slotType | 是 | 通知渠道类型,目前分为社交通信、服务提醒、内容咨询和其他类型 | + + - 返回值 + + Promise + + - 示例代码 + + ```js + var slotType = SOCIAL_COMMUNICATION; + Notification.getSlot(slotType).then((data) => { + console.info("==========================>getSlotCallback=======================>"); + }); + ``` + + + +- 获取本应用程序的所有通知通道（callback形式) + + Notification.getSlots(callback: AsyncCallback>) + + - 参数描述 + + | 名称 | 读写属性 | 类型 | 必填 | 描述 | + | -------- | -------- | ------------------------------- | ---- | -------------------- | + | callback | 只读 | AsyncCallback | 是 | 表示被指定的回调方法 | + + - 返回值 + + void + + - 示例代码 + + ```js + //getSlots回调 + function getSlotsCallback(err,data) { + console.info("==========================>getSlotsCallback=======================>"); + } + Notification.getSlots(getSlotsCallback) + ``` + + + +- 获取此应用程序的所有通知通道（Promise形式) + + Notification.getSlots() + + - 参数描述 + + 无参数 + + - 返回值 + + Promise> + + - 示例代码 + + ```js + Notification.getSlots().then((data) => { + console.info("==========================>getSlotsCallback=======================>"); + }); + ``` + + + +##### 删除通知通道 + +- 根据通知通道类型删除通知通道（callback形式) + + Notification.removeSlot(slotType: SlotType, callback: AsyncCallback) + + - 参数描述 + + | 名称 | 读写属性 | 类型 | 必填 | 描述 | + | -------- | -------- | ------------------- | ---- | ----------------------------------------------------------- | + | SlotType | 只读 | SlotType | 是 | 通知渠道类型,目前分为社交通信、服务提醒、内容咨询和其他类型 | + | callback | 只读 | AsyncCallback | 是 | 表示被指定的回调方法 | + + - 返回值 + + void + + - 示例代码 + + ```js + //removeSlot回调 + function removeSlotCallback(err) { + console.info("==========================>removeSlotCallback=======================>"); + } + var slotType = SOCIAL_COMMUNICATION; + Notification.removeSlot(slotType, removeSlotCallback) + ``` + + + +- 根据通知通道类型删除通知通道（Promise形式) + + Notification.removeSlot(slotType: SlotType) + + - 参数描述 + + | 名称 | 读写属性 | 类型 | 必填 | 描述 | + | -------- | -------- | -------- | ---- | ----------------------------------------------------------- | + | SlotType | 只读 | SlotType | 是 | 通知渠道类型,目前分为社交通信、服务提醒、内容咨询和其他类型 | + + - 返回值 + + Promise<**void**> + + - 示例代码 + + ```js + var slotType = SOCIAL_COMMUNICATION; + Notification.removeSlot(slotType).then((void) => { + console.info("==========================>removeSlotCallback=======================>"); + }); + ``` + + + +- 删除所有通知通道（callback形式) + + Notification.removeAllSlots(callback: AsyncCallback) + + - 参数描述 + + | 名称 | 读写属性 | 类型 | 必填 | 描述 | + | -------- | -------- | ------------------- | ---- | -------------------- | + | callback | 只读 | AsyncCallback | 是 | 表示被指定的回调方法 | + + - 返回值 + + void + + - 示例代码 + + ```js + function removeAllSlotsCallBack(err) { + console.info("================>removeAllSlotsCallBack=======================>"); + } + Notification.removeAllSlots(removeAllCallBack) + ``` + + + +- 删除所有通知通道（Promise形式) + + Notification.removeAllSlots() + + - 参数描述 + + 无参数 + + - 返回值 + + Promise<**void**> + + - 示例代码 + + ```js + Notification.removeAllSlots().then((void) => { + console.info("==========================>removeAllSlotsCallBack=======================>"); + }); + ``` + + + +##### 发布通知 + +- 发布通知（callback形式） + + Notification.publish(request: NotificationRequest, callback: AsyncCallback) + + - 参数描述 + + | 名称 | 读写属性 | 类型 | 必填 | 描述 | + | -------- | -------- | ------------------- | ---- | ------------------------------------------- | + | request | 只读 | NotificationRequest | 是 | 设置要发布通知内容的NotificationRequest对象 | + | callback | 只读 | AsyncCallback | 是 | 被指定的回调方法 | + + - 返回值 + + void + + - 示例代码 + + ```js + //publish回调 + function publishCallback(err) { + console.info("==========================>publishCallback=======================>"); + } + //通知Request对象 + var request = { + id: 1, + content: { + contentType: notify.ContentType.NOTIFICATION_CONTENT_BASIC_TEXT, + normal: { + title: "test_title", + text: "test_text", + additionalText: "test_additionalText" + } + } + } + Notification.publish(request, publishCallback); + ``` + + + + +- 发布通知（Promise形式） + + Notification.publish(request: NotificationRequest) + + - 参数描述 + + | 名称 | 读写属性 | 类型 | 必填 | 描述 | + | ------- | -------- | ------------------- | ---- | ------------------------------------------- | + | request | 只读 | NotificationRequest | 是 | 设置要发布通知内容的NotificationRequest对象 | + + - 返回值 + + 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=======================>"); + }); + ``` + + + +##### 取消通知 + +- 取消指定通知（callback形式） + + Notification.cancel(id: number, label: string, callback: AsyncCallback) + + - 参数描述 + + | 名称 | 读写属性 | 类型 | 必填 | 描述 | + | -------- | -------- | ------------------- | ---- | -------------------- | + | id | 只读 | number | 是 | 通知ID | + | lable | 只读 | string | 是 | 通知标签 | + | callback | 只读 | AsyncCallback | 是 | 表示被指定的回调方法 | + + - 返回值 + + void + + - 示例代码 + + ```js + //cancel回调 + function cancelCallback(err) { + console.info("==========================>cancelCallback=======================>"); + } + Notification.cancel(0, "label", cancelCallback) + ``` + + + +- 取消指定通知（Promise形式) + + Notification.cancel(id：number, label？：string） + + - 参数描述 + + | 名称 | 读写属性 | 类型 | 必填 | 描述 | + | ----- | -------- | ------ | ---- | -------- | + | id | 只读 | number | 是 | 通知ID | + | lable | 只读 | string | 是 | 通知标签 | + + - 返回值 + + Promise<**void**> + + - 示例代码 + + ```js + Notification.cancel(0).then((void) => { + console.info("==========================>cancelCallback=======================>"); + }); + ``` + + + +- 取消指定id通知（callback形式) + + Notification.cancel(id: number, callback: AsyncCallback) + + - 参数描述 + + | 名称 | 读写属性 | 类型 | 必填 | 描述 | + | -------- | -------- | ------------------- | ---- | -------------------- | + | id | 只读 | number | 是 | 通知ID | + | callback | 只读 | AsyncCallback | 是 | 表示被指定的回调方法 | + + - 返回值 + + void + + - 示例代码 + + ```js + //cancel回调 + function cancelCallback(err) { + console.info("==========================>cancelCallback=======================>"); + } + Notification.cancel(0, cancelCallback) + ``` + + + +- 取消所有已发布的通知（callback形式) + + Notification.cancelAll(callback: AsyncCallback) + + - 参数描述 + + | 名称 | 读写属性 | 类型 | 必填 | 描述 | + | -------- | -------- | ------------------- | ---- | -------------------- | + | callback | 只读 | AsyncCallback | 是 | 表示被指定的回调方法 | + + - 返回值 + + void + + - 示例代码 + + ```js + //cancel回调 + function cancelAllback(err) { + console.info("==========================>cancelAllback=======================>"); + } + Notification.cancelAll(cancelCallback) + ``` + + + +- 取消所有已发布的通知（Promise形式) + + Notification.cancelAll() + + - 参数描述 + + 无参数 + + - 返回值 + + Promise + + - 示例代码 + + ```js + Notification.cancelAll().then((void) => { + console.info("==========================>cancelAllback=======================>"); + }); + ``` + + + +##### 获取当前应用活动通知 + +- 获取当前应用的活动通知数（Callback形式) + + Notification.getActiveNotificationCount(callback: AsyncCallback<**number**>) + + - 参数描述 + + | 名称 | 读写属性 | 类型 | 必填 | 描述 | + | -------- | -------- | ------------------------- | ---- | ---------------------- | + | callback | 只读 | AsyncCallback<**number**> | 是 | 获取活动通知数回调函数 | + + - 返回值 + + void + + - 示例代码 + + ```js + function getActiveNotificationCountCallback(err, data) { + console.info("==========================>getActiveNotificationCountCallback=======================>"); + } + Notification.getActiveNotificationCount(getActiveNotificationCountCallback); + ``` + + + +- 获取当前应用的活动通知数（Promise形式) + + Notification.getActiveNotificationCount() + + - 参数描述 + + 无 + + - 返回值 + + Promise<**number**> + + - 示例代码 + + ```js + Notification.getActiveNotificationCount().then((data) => { + console.info("==========================>getActiveNotificationCountCallback=======================>"); + }); + ``` + + + +- 获取当前应用的活动通知（Callback形式) + + Notification.getActiveNotifications(callback: AsyncCallback>) + + - 参数描述 + + | 名称 | 读写属性 | 类型 | 必填 | 描述 | + | -------- | -------- | ----------------------------------------- | ---- | ------------------------------ | + | callback | 只读 | AsyncCallback> | 是 | 获取当前应用的活动通知回调函数 | + + - 返回值 + + void + + - 示例代码 + + ```js + function getActiveNotificationsCallback(err, data) { + console.info("==========================>getActiveNotificationsCallback=======================>"); + } + Notification.getActiveNotifications(getActiveNotificationsCallback); + ``` + + + +- 获取当前应用的活动通知（Promise形式) + + Notification.getActiveNotifications() + + - 参数描述 + + 无 + + - 返回值 + + Promise> + + - 示例代码 + + ```js + Notification.getActiveNotifications().then((data) => { + console.info("==========================>getActiveNotificationsCallback=======================>"); + }); + ``` + + + +#### WantAgent接口 + +##### 导入模块 + +```js +import WantAgent from '@ohos.wantAgent'; +``` + + + +##### WantAgentInfo类型说明 + +WantAgentInfo类封装了获取一个WantAgent实例所需的数据。 + +| 名称 | 读写属性 | 类型 | 必填 | 描述 | +| -------------- | -------- | ------------------------------- | ---- | ---------------------- | +| wants | 读、写 | Array | 是 | 将被执行的动作列表 | +| operationType | 读、写 | wantAgent.OperationType | 是 | 动作类型 | +| requestCode | 读、写 | number | 是 | 使用者定义的一个私有值 | +| wantAgentFlags | 读、写 | Array | 否 | 动作执行属性 | +| extraInfo | 读、写 | {[key: string]: any} | 否 | 额外数据 | + +- OperationType类型说明 + +| 名称 | 读写属性 | 类型 | 描述 | +| ----------------- | -------- | ---- | ----------------------- | +| UNKNOWN_TYPE | 只读 | enum | 不识别的类型 | +| START_ABILITY | 只读 | enum | 开启一个有页面的Ability | +| START_ABILITIES | 只读 | enum | 开启多个有页面的Ability | +| START_SERVICE | 只读 | enum | 开启一个无页面的ability | +| SEND_COMMON_EVENT | 只读 | enum | 发送一个公共事件 | + +- 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属性取代 | + + + +##### TriggerInfo类型说明 + +TriggerInfo类封装了主动激发一个WantAgent实例所需的数据。 + +| 名称 | 读写属性 | 类型 | 必填 | 描述 | +| ---------- | -------- | -------------------- | ---- | ----------- | +| code | 读、写 | number | 是 | result code | +| want | 读、写 | Want | 否 | Want | +| permission | 读、写 | string | 否 | 权限定义 | +| extraInfo | 读、写 | {[key: string]: any} | 否 | 额外数据 | + + + +##### 创建WantAgent + +- 创建WantAgent（callback形式） + + WantAgent.getWantAgent(info: WantAgentInfo, callback: AsyncCallback) + + - 参数描述 + + | 名称 | 读写属性 | 类型 | 必填 | 描述 | + | -------- | -------- | ------------------------ | ---- | ----------------------- | + | info | 只读 | WantAgentInfo | 是 | WantAgent信息 | + | callback | 只读 | AsyncCallback | 是 | 创建WantAgent的回调方法 | + - 返回值 + + 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（Promise形式） + + WantAgent.getWantAgent(info: WantAgentInfo): Promise + + - 参数描述 + + | 名称 | 读写属性 | 类型 | 必填 | 描述 | + | ---- | -------- | ------------- | ---- | ------------- | + | 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实例的包名 + +- 获取WantAgent实例的包名（callback形式） + + WantAgent.getBundleName(agent: WantAgent, callback: AsyncCallback) + + - 参数描述 + + | 名称 | 读写属性 | 类型 | 必填 | 描述 | + | -------- | -------- | --------------------- | ---- | ---------------------------------------- | + | agent | 只读 | WantAgent | 是 | WantAgent对象 | + | callback | 只读 | AsyncCallback | 是 | 获取WantAgent指定的bundle name的回调方法 | + + - 返回值 + + 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实例的包名（Promise形式） + + WantAgent.getBundleName(agent: WantAgent): Promise + + - 参数描述 + + | 名称 | 读写属性 | 类型 | 必填 | 描述 | + | ----- | -------- | --------- | ---- | ------------- | + | 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实例的用户ID + +- 获取WantAgent实例的用户ID（callback形式） + + WantAgent.getUid(agent: WantAgent, callback: AsyncCallback) + + - 参数描述 + + | 名称 | 读写属性 | 类型 | 必填 | 描述 | + | -------- | -------- | --------------------- | ---- | ----------------------------------- | + | 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实例的用户ID（Promise形式） + + WantAgent.getUid(agent: WantAgent): Promise + + - 参数描述 + + | 名称 | 读写属性 | 类型 | 必填 | 描述 | + | ----- | -------- | --------- | ---- | ------------- | + | 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实例 + +- 取消WantAgent实例（callback形式） + + WantAgent.cancel(agent: WantAgent, callback: AsyncCallback) + + - 参数描述 + + | 名称 | 读写属性 | 类型 | 必填 | 描述 | + | -------- | -------- | ------------------- | ---- | --------------------------- | + | 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实例（Promise形式） + + WantAgent.cancel(agent: WantAgent): Promise + + - 参数描述 + + | 名称 | 读写属性 | 类型 | 必填 | 描述 | + | ----- | -------- | --------- | ---- | ------------- | + | 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实例 + +- 主动激发WantAgent实例（callback形式） + + WantAgent.trigger(agent: WantAgent, triggerInfo: TriggerInfo, callback?: Callback) + + - 参数描述 + + | 名称 | 读写属性 | 类型 | 必填 | 描述 | + | ----------- | -------- | --------------------------- | ---- | ------------------------------- | + | agent | 只读 | WantAgent | 是 | WantAgent对象 | + | triggerInfo | 只读 | TriggerInfo | 是 | TriggerInfo对象 | + | 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 triggerCallback(err, data) { + console.info("==========================>triggerCallback=======================>"); + } + wantAgent.trigger(WantAgent, triggerCallback) + ``` + + + + +##### 判断两个WantAgent实例是否相等 + +- 判断两个WantAgent实例是否相等（callback形式） + + WantAgent.equal(agent: WantAgent, otherAgent: WantAgent, callback: AsyncCallback) + + - 参数描述 + + | 名称 | 读写属性 | 类型 | 必填 | 描述 | + | ---------- | -------- | ---------------------- | ---- | --------------------------------------- | + | 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实例是否相等（Promise形式） + + WantAgent.equal(agent: WantAgent, otherAgent: WantAgent): Promise + + - 参数描述 + + | 名称 | 读写属性 | 类型 | 必填 | 描述 | + | ---------- | -------- | --------- | ---- | ------------- | + | 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/quick-start/PageAbility\345\274\200\345\217\221\350\257\264\346\230\216.md" "b/zh-cn/application-dev/quick-start/PageAbility\345\274\200\345\217\221\350\257\264\346\230\216.md" new file mode 100644 index 0000000000000000000000000000000000000000..c3d2a7160f646571f4e868a3eaba4b754a452a06 --- /dev/null +++ "b/zh-cn/application-dev/quick-start/PageAbility\345\274\200\345\217\221\350\257\264\346\230\216.md" @@ -0,0 +1,129 @@ +# PageAbility开发说明 + + + +## PageAbility介绍 + +Page模板（以下简称“Page”）是FA唯一支持的模板，用于提供与用户交互的能力。 + +## PageAbility的生命周期 + +**Ability生命周期介绍**（Ability Life Cycle）是Ability被调度到INACTIVE、ACTIVE、BACKGROUND等各个状态的统称（主要涉及PageAbility类型和ServiceAbility类型的Ability）。 + + - **PageAbility类型的Ability生命周期流转如下图所示** + +![PageAbility-Lifecycle](figures/page-ability-lifecycle.png) + + +**Ability生命周期状态说明：** + + - **UNINITIALIZED**：未初始状态，为临时状态，Ability被创建后会由UNINITIALIZED状态进入INITIAL状态。 + + - **INITIAL**：初始化状态，也表示停止状态，表示当前Ability未运行，Ability被启动后由INITIAL态进入INACTIVE状态。 + + - **INACTIVE**：未激活状态，表示当前窗口已显示但是无焦点状态，由于Window暂未支持焦点的概念，当前状态与ACTIVE一致。 + + - **ACTIVE**：前台激活状态，表示当前窗口已显示，并获取焦点，Ability在退到后台之前先由ACTIVE状态进入INACTIVE状态。 + + - **BACKGROUND**: 后台状态，表示当前Ability退到后台，Ability在被销毁后由BACKGROUND状态进入INITIAL状态，或者重新被激活后由BACKGROUND状态进入ACTIVE状态。 + +**PageAbility类型Ability生命周期回调如下图所示：** + +![PageAbility-Lifecycel-Callbacks](figures/page-ability-lifecycle-callbacks.png) + + + +## 启动本地PageAbility + + 导入模块 + +``` +import featureAbility from '@ohos.ability.featureAbility' +``` +``` + FeatureAbility.startAbility(parameter: StartAbilityParameter, callback: AsyncCallback) +``` + +* 接口说明 + + 启动新的ability(callback形式) + +* 示例 + +```javascript +import featureAbility from '@ohos.ability.featureAbility' +featureAbility.startAbility( + { + want: + { + action: "", + entities: [""], + type: "", + options: { + // indicates the grant to perform read operations on the URI + authReadUriPermission: true, + // indicates the grant to perform write operations on the URI + authWriteUriPermission: true, + // support forward intent result to origin ability + abilityForwardResult: true, + // used for marking the ability start-up is triggered by continuation + abilityContinuation: true, + // specifies whether a component does not belong to ohos + notOhosComponent: true, + // specifies whether an ability is started + abilityFormEnabled: true, + // indicates the grant for possible persisting on the URI. + authPersistableUriPermission: true, + // indicates the grant for possible persisting on the URI. + authPrefixUriPermission: true, + // support distributed scheduling system start up multiple devices + abilitySliceMultiDevice: true, + // indicates that an ability using the service template is started regardless of whether the + // host application has been started. + startForegroundAbility: true, + // install the specified ability if it's not installed. + installOnDemand: true, + // return result to origin ability slice + abilitySliceForwardResult: true, + // install the specified ability with background mode if it's not installed. + installWithBackgroundMode: true + }, + deviceId: "", + bundleName: "com.example.startability", + abilityName: "com.example.startability.MainAbility", + uri: "" + }, + }, + ); +) +``` +## 启动远程PageAbility + + 导入模块 + +``` +import featureAbility from '@ohos.ability.featureAbility' +``` + +``` +FeatureAbility.startAbility(parameter: StartAbilityParameter) +``` +* 接口说明 + + 启动远程的ability(promise形式) + 前提：通过deviceManager获取远程deviceid + +* 示例 + +```javascript + var promise = await ability.startAbility( + { + want: + { + deviceId: this.deviceId, + bundleName: "com.example.test", + abilityName: "com.example.test.MainAbility", + }, + } + ); +``` \ No newline at end of file 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/ServiceAbility\345\274\200\345\217\221\350\257\264\346\230\216.md" "b/zh-cn/application-dev/quick-start/ServiceAbility\345\274\200\345\217\221\350\257\264\346\230\216.md" new file mode 100644 index 0000000000000000000000000000000000000000..42269495122e752300c4926d2195551c04ebda76 --- /dev/null +++ "b/zh-cn/application-dev/quick-start/ServiceAbility\345\274\200\345\217\221\350\257\264\346\230\216.md" @@ -0,0 +1,189 @@ +# ServiceAbility开发说明 + +- [创建Service](#section17436202895812) +- [启动Service](#section944219415599) +- [连接Service](#section126857614018) + +## 创建Service + +1. Service也是一种Ability，Ability为Service提供了以下生命周期方法，开发者可以重写这些方法，来添加其他Ability请求与Service Ability交互时的处理方法。 + + - onStart() + + 该方法在创建Service的时候调用，用于Service的初始化。在Service的整个生命周期只会调用一次，调用时传入的Want应为空。 + + - onCommand() + + 在Service创建完成之后调用，该方法在客户端每次启动该Service时都会调用，开发者可以在该方法中做一些调用统计、初始化类的操作。 + + - onConnect() + + 在Ability和Service连接时调用，该方法返回IRemoteObject对象，开发者可以在该回调函数中生成对应Service的IPC通信通道，以便Ability与Service交互。Ability可以多次连接同一个Service，系统会缓存该Service的IPC通信对象，只有第一个客户端连接Service时，系统才会调用Service的onConnect方法来生成IRemoteObject对象，而后系统会将同一个RemoteObject对象传递至其他连接同一个Service的所有客户端，而无需再次调用onConnect方法。 + + - onDisconnect() + + 在Ability与绑定的Service断开连接时调用。 + + - onStop() + + 在Service销毁时调用。Service应通过实现此方法来清理任何资源，如关闭线程、注册的侦听器等。 + + 创建Service的代码示例如下： + + ```javascript + export default { + onStart(want) { + console.log('SerivceAbility onStart'); + }, + onCommand(want, restart, startId) { + console.log('SerivceAbility onCommand'); + }, + onConnect(want) { + console.log('SerivceAbility OnConnect'); + }, + onDisconnect() { + console.log('SerivceAbility OnDisConnect'); + }, + onStop() { + console.log('SerivceAbility onStop'); + }, + } + ``` + +2. 注册Service。 + + Service也需要在应用配置文件config.json中进行注册，注册类型type需要设置为service。 + + ```javascript + { + "module": { + "abilities": [ + { + "name": ".ServiceAbility", + "type": "service", + "visible": true + ... + } + ] + ... + } + ... + } + ``` + + + + +## 启动Service + +Ability为开发者提供了startAbility()方法来启动另外一个Ability。因为Service也是Ability的一种，开发者同样可以通过将Want传递给该方法来启动Service。 + +开发者可以通过构造包含BundleName与AbilityName的Want对象来设置目标Service信息。参数的含义如下： + +- BundleName：表示包名称。 +- AbilityName：表示待启动的Ability名称。 + +启动本地设备Service的代码示例如下： + +```javascript +import featureAbility from '@ohos.ability.featureability'; +var promise = await featureAbility.startAbility( + { + want: + { + bundleName: "com.jstest.serviceability", + abilityName: "com.jstest.serviceability.MainAbility", + }, + } +); +``` + +- 执行上述代码后，Ability将通过startAbility() 方法来启动Service。 + - 如果Service尚未运行，则系统会先调用onStart()来初始化Service，再回调Service的onCommand()方法来启动Service。 + - 如果Service正在运行，则系统会直接回调Service的onCommand()方法来启动Service。 + +- 停止Service + + Service一旦创建就会一直保持在后台运行，除非必须回收内存资源，否则系统不会停止或销毁Service。开发者可以在Service中通过terminateAbility()停止本Service或在其他Ability调用stopAbility()来停止Service。 + + + +## 连接Service + +如果Service需要与Page Ability或其他应用的Service Ability进行交互，则须创建用于连接的Connection。Service支持其他Ability通过connectAbility()方法与其进行连接。 + +在使用connectAbility()处理回调时，需要传入目标Service的Want与IAbilityConnection的实例。IAbilityConnection提供了以下方法供开发者实现：onConnect()是用来处理连接Service成功的回调，onDisconnect()是用来处理Service异常死亡的回调，onFailed()是用来处理连接Service失败的回调。 + +创建连接Service回调实例的代码示例如下： + +```javascript +var mRemote; +function onConnectCallback(element, remote){ + console.log('ConnectAbility onConnect Callback') + mRemote = remote; +} + +function onDisconnectCallback(element){ + console.log('ConnectAbility onDisconnect Callback') +} + +function onFailedCallback(code){ + console.log('ConnectAbility onFailed Callback') +} +``` + +连接Service的代码示例如下： + +```javascript +import featureAbility from '@ohos.ability.featureability'; +var connId = featureAbility.connectAbility( + { + bundleName: "com.jstest.serviceability", + abilityName: "com.jstest.serviceability.MainAbility", + }, + { + onConnect: onConnectCallback, + onDisconnect: onDisconnectCallback, + onFailed: onFailedCallback, + }, +); +``` + +同时，Service侧也需要在onConnect()时返回IRemoteObject，从而定义与Service进行通信的接口。onConnect()需要返回一个IRemoteObject对象，HarmonyOS提供了IRemoteObject的默认实现，用户可以通过继承rpc.RemoteObject来创建自定义的实现类。 + +Service侧把自身的实例返回给调用侧的代码示例如下： + +```javascript +import rpc from "@ohos.rpc"; + +var mMyStub; +export default { + onStart(want) { + class MyStub extends rpc.RemoteObject{ + constructor(des) { + if (typeof des === 'string') { + super(des, des.length); + } + return null; + } + onRemoteRequest(code, message, reply, option) { + } + } + mMyStub = new MyStub("ServiceAbility-test"); + }, + onCommand(want, restart, startId) { + console.log('SerivceAbility onCommand'); + }, + onConnect(want) { + console.log('SerivceAbility OnConnect'); + return mMyStub; + }, + onDisconnect() { + console.log('SerivceAbility OnDisConnect'); + }, + onStop() { + console.log('SerivceAbility onStop'); + }, +} +``` + 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 76% 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 90a5aab67c6f2e9a6a74a5b5eb4d70933c36c3b4..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/\345\237\272\344\272\216Native\347\232\204DataAbility\345\210\233\345\273\272\344\270\216\350\256\277\351\227\256.md" "b/zh-cn/application-dev/quick-start/\345\237\272\344\272\216Native\347\232\204DataAbility\345\210\233\345\273\272\344\270\216\350\256\277\351\227\256.md" new file mode 100644 index 0000000000000000000000000000000000000000..6a2f10ea98521042c7a0728d03cd2f93fddf01ab --- /dev/null +++ "b/zh-cn/application-dev/quick-start/\345\237\272\344\272\216Native\347\232\204DataAbility\345\210\233\345\273\272\344\270\216\350\256\277\351\227\256.md" @@ -0,0 +1,192 @@ +# 基于Native的Data Ability创建与访问 + +- **[Data Ability基本概念](#section001)** + +- **[创建Data](#section002)** + +- **[访问Data](#section003)** + +## Data Ability基本概念 +通过Ability派生出的DataAbility类（以下简称“Data”）,有助于应用管理其自身和其他应用存储数据的访问，并提供与其他应用共享数据的方法。Data既可用于同设备不同应用的数据共享，也支持跨设备不同应用的数据共享。 + +## 创建Data +### 1. Data子系统实现 +1. 基于Native的Data子系统,需要继承Ability类,成为Ability的派生类来实现功能 +2. 需要实现父类中Insert,Query,Update,Delete接口的业务内容.保证能够满足数据库存储业务的基本需求.BatchInsert与ExecuteBatch接口已经在系统中实现遍历逻辑,依赖Insert,Query,Update,Delete接口逻辑,来实现数据的批量处理. +3. 使用REGISTER_AA宏将Data的类名注册到系统服务中 + + +### 2. 子系统配置 + +| Json重要字段 | 备注说明 | +| ------------- | ------------------------------------------------------------ | +| "name" | Ability名子,对应Ability派生的Data类名 | +| "type" | Ability类型,Data对应的Ability类型未"data" | +| "uri" | 通信使用的URI | +| "srcLanguage" | Data实现语言,c++实现的Data填写c++, js实现的Data填写js | +| "visible" | 对其他应用是否可见, 设置为true时, Data才能与其他应用进行通信传输数据 | + +**config.json配置样例** + +```json +"abilities":[{ + "name": ".DataAbility", + "icon": "$media:snowball", + "label": "Data Firs Ability", + "launchType": "standard", + "orientation": "unspecified", + "type": "data", + "uri": "dataability://com.ix.DataAbility", + "srcLanguage": "c++", + "visible": true +}] +``` + +## 访问Data +### 1 JS应用开发前准备 +基础依赖包: + 1. @ohos.ability.featureAbility + 2. @ohos.data.dataability + 3. @ohos.data.rdb +与Data子系统通信的Uri字符串 + +### 2 JS应用开发接口 +工具接口类对象创建 +```js +// 作为参数传递的Uri,与config中定义的Uri的区别是多了一个"/",是因为作为参数传递的uri中,在第二个与第三个"/"中间,存在一个DeviceID的参数 +var urivar = "dataability:///com.ix.DataAbility" +var DAHelper = featureAbility.acquireDataAbilityHelper( + urivar +); +``` +数据库相关的rdb数据构建 +```js +var valuesBucket = {"name": "gaolu"} +var da = new ohos_data_ability.DataAbilityPredicates() +var valArray =new Array("value1"); +var cars = new Array({"batchInsert1" : "value1",}); +``` +向指定的Data子系统插入数据,inster调用 +```js +// callbacke方式调用: +DAHelper.insert( + urivar, + valuesBucket, + (error, data) => { + expect(typeof(data)).assertEqual("number") + } +); +// promise方式调用: +var datainsert = await DAHelper.insert( + urivar, + valuesBucket +); +``` +删除Data子系统中指定的数据, delete调用 +```js +// callbacke方式调用: +DAHelper.delete( + urivar, + da, + (error, data) => { + expect(typeof(data)).assertEqual("number") + } +); +// promise方式调用: +var datadelete = await DAHelper.delete( + urivar, + da, +); +``` +更新指定Data子系统中的数据, update调用 +```js +// callbacke方式调用: +DAHelper.update( + urivar + valuesBucket, + da, + (error, data) => { + expect(typeof(data)).assertEqual("number") + } +); +// promise方式调用: +var dataupdate = await DAHelper.update( + urivar, + valuesBucket, + da, +); +``` +在指定的Data子系统中查找数据,query调用 +```js +// callbacke方式调用: +DAHelper.query( + urivar, + valArray, + da, + (error, data) => { + expect(typeof(data)).assertEqual("object") + } +); +// promise方式调用: +var dataquery = await DAHelper.query( + urivar, + valArray, + da +); +``` +向指定的数据子系统批量插入数据,batchInsert调用 +```js +// callbacke方式调用: +DAHelper.batchInsert( + urivar, + cars, + (error, data) => { + expect(typeof(data)).assertEqual("number") + } +); +// promise方式调用: +var databatchInsert = await DAHelper.batchInsert( + urivar, + cars +); +``` +向指定的Data子系统进行数据的批量处理,executeBatch调用 +```js +// callbacke方式调用: +DAHelper.executeBatch( + urivar, + [ + { + uri: urivar, + type: featureAbility.DataAbilityOperationType.TYPE_INSERT, + valuesBucket: {"executeBatch" : "value1",}, + predicates: da, + expectedCount:0, + PredicatesBackReferences: {}, + interrupted:true, + } + ], + (error, data) => { + expect(typeof(data)).assertEqual("object") + } +); +// promise方式调用: +var dataexecuteBatch = await DAHelper.executeBatch( + urivar, + [ + { + uri: urivar, + type: featureAbility.DataAbilityOperationType.TYPE_INSERT, + valuesBucket: + { + "executeBatch" : "value1", + }, + predicates: da, + expectedCount:0, + PredicatesBackReferences: {}, + interrupted:true, + } + ] +); +``` + 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)** - - diff --git a/zh-cn/contribute/OpenHarmony-JavaScript-coding-style-guide.md b/zh-cn/contribute/OpenHarmony-JavaScript-coding-style-guide.md index 74dffa62081ecc349c319b5d5ba60c3812847811..fa308f1d22bc77cef496570be1043342c6fe5623 100755 --- a/zh-cn/contribute/OpenHarmony-JavaScript-coding-style-guide.md +++ b/zh-cn/contribute/OpenHarmony-JavaScript-coding-style-guide.md @@ -354,9 +354,8 @@ console.log(url); //url可以被访问到，输出内容：http://127.0.0.1:8080 **正例：** ```javascript -// ES5.1使用var声明变量 function open() { - var url = 'http://127.0.0.1:8080'; + let url = 'http://127.0.0.1:8080'; // todo something } open(); @@ -364,7 +363,6 @@ console.log(url); //报错：Uncaught ReferenceError: url is not defined ``` ```javascript -// ES6中，优先推荐使用let和const关键字来声明变量 function open() { const url = 'http://127.0.0.1:8080'; //todo something diff --git "a/zh-cn/contribute/\345\217\202\344\270\216\350\264\241\347\214\256.md" "b/zh-cn/contribute/\345\217\202\344\270\216\350\264\241\347\214\256.md" index e507801d83da81f6c1aed047e675cd59c8da0ed0..8841c77fe0dd0ef695cb1c318aca9af9c63125ce 100755 --- "a/zh-cn/contribute/\345\217\202\344\270\216\350\264\241\347\214\256.md" +++ "b/zh-cn/contribute/\345\217\202\344\270\216\350\264\241\347\214\256.md" @@ -8,7 +8,7 @@ 您必须首先签署“开发者原创声明”，然后才能参与社区贡献。 -点击[这里](https://dco.openharmony.io/sign/Z2l0ZWUlMkZvcGVuX2hhcm1vbnk=)签署、查看签署状态。 +点击[这里](https://dco.openharmony.io/sign/Z2l0ZWUlMkZvcGVuX2hhcm1vbnk=)签署，点击[这里](https://dco.openharmony.io/check-sign-status)查询签署状态。 #### 行为准则 diff --git "a/zh-cn/contribute/\350\264\241\347\214\256\346\265\201\347\250\213.md" "b/zh-cn/contribute/\350\264\241\347\214\256\346\265\201\347\250\213.md" index 05963e0d903b6aa7e6f02f43182ce2c5e312ec22..27bfb1de3082f00e8fbece5da0e8b3024ae0a20f 100755 --- "a/zh-cn/contribute/\350\264\241\347\214\256\346\265\201\347\250\213.md" +++ "b/zh-cn/contribute/\350\264\241\347\214\256\346\265\201\347\250\213.md" @@ -83,6 +83,7 @@ 更新您的本地分支 ``` + git remote add origin $remote_link git fetch origin git checkout master git pull --rebase diff --git a/zh-cn/design/OpenHarmony-API-governance.md b/zh-cn/design/OpenHarmony-API-governance.md index 7cf97fed5b3039f3948b72f47510e9d2476e0d72..a0568c0e539c15bc929e0c2a4cbaaeb06978c8c6 100755 --- a/zh-cn/design/OpenHarmony-API-governance.md +++ b/zh-cn/design/OpenHarmony-API-governance.md @@ -21,10 +21,9 @@ OpenHarmony API按可授权使用方分类包括：

如无特别说明，本章程定义的条款同时适用于Public API、System API或Test API等三种OpenHarmony API。针对System API和Test API的额外要求或例外说明，通过特别说明方式加以补充说明。

OpenHarmony API按编程语言分类包括： -- Java API：面向应用开放的Java编程语言接口。 - JS API：面向应用开放的JavaScript编程语言接口。 - Native API：面向应用开放的C/C++编程语言接口。 -

如无特别说明，本章程定义的条款同时适用于Java API、JS API和Native API等三种编程语言OpenHarmony API。

+

如无特别说明，本章程定义的条款同时适用于JS API和Native API。

## API治理 @@ -65,7 +64,7 @@ API评审流程如下： 针对变更API，需要额外包含如下要素： 1. 针对老接口的处理方式（废弃、隐藏或彻底删除）以及对使用老SDK开发应用的兼容措施（必须）； 2. 变更影响、替代接口和相应的应用适配方案（必须）。 -3. 刷新ChangeLog（必须） 和 API-diff文档（涉及JS/Native API变更，必须；Java API的差异报告可工具化生成，不需要人工提交）。 +3. 刷新ChangeLog（必须） 和 API-diff文档（涉及JS/Native API变更，必须）。 ## API设计要求 ### 一致性要求 @@ -90,10 +89,9 @@ API评审流程如下： 1. 作用域越大，命名应越精确。 1. 不用或少用缩写，业界通用术语遵从行业习惯允许使用缩写。 1. 包名/模块名/命名空间前缀约定： - 1. Java API 统一包名： package ohos.\*。 - 2. JS API 统一模块名：@ohos.\*。 - 3. Native API 统一命名空间：namespace OHOS.\*。 - 4. 引用外部开源代码的，可以保留原包名/模块名/命名空间，也可以按照上述规则对包名统一进行替换。 + 1. JS API 统一模块名：@ohos.\*。 + 2. Native API 统一命名空间：namespace OHOS.\*。 + 3. 引用外部开源代码的，可以保留原包名/模块名/命名空间，也可以按照上述规则对包名统一进行替换。 1. 包名/模块名/命名空间最短不少于2段，最长不超过4段；每一段建议使用一个单词，最长不超过2个单词。 1. 类名、方法名/函数名、成员变量、变量名最多不超过4个单词。 diff --git a/zh-cn/device-dev/driver/driver-hdf-development.md b/zh-cn/device-dev/driver/driver-hdf-development.md index 60f3a0918908d3b8d2598926f3a8c142d196ca34..bd393dc8965a5f55b406d8db87f6321a80c2c2e0 100644 --- a/zh-cn/device-dev/driver/driver-hdf-development.md +++ b/zh-cn/device-dev/driver/driver-hdf-development.md @@ -167,7 +167,7 @@ HDF框架以组件化的驱动模型作为核心设计思路，为开发者提 > DEVICE_PRELOAD_INVALID > } DevicePreload; > ``` -> 配置文件中preload 字段配成 0 （DEVICE\_PRELOAD\_ENABLE ），则系统启动过程中默认加载；配成1（DEVICE\_PRELOAD\_ENABLE\_STEP2），当系统支持快启的时候，则在系统系统完成之后再加载这一类驱动，否则和DEVICE\_PRELOAD\_ENABLE 含义相同；配成2（DEVICE\_PRELOAD\_DISABLE），则系统启动过程中默认不加载，支持后续动态加载，当用户态获取驱动服务（参考[消息机制](driver-hdf-news.md)）时，如果驱动服务不存在时，HDF框架会尝试动态加载该驱动。 +> 配置文件中preload 字段配成 0 （DEVICE\_PRELOAD\_ENABLE ），则系统启动过程中默认加载；配成1（DEVICE\_PRELOAD\_ENABLE\_STEP2），当系统支持快启的时候，则在系统完成之后再加载这一类驱动，否则和DEVICE\_PRELOAD\_ENABLE 含义相同；配成2（DEVICE\_PRELOAD\_DISABLE），则系统启动过程中默认不加载，支持后续动态加载，当用户态获取驱动服务（参考[消息机制](driver-hdf-news.md)）时，如果驱动服务不存在时，HDF框架会尝试动态加载该驱动。 >- 按序加载（需要驱动为默认加载） > 配置文件中的priority（取值范围为整数0到200）是用来表示host和驱动的优先级，不同的host内的驱动，host的priority值越小，驱动加载优先级越高；同一个host内驱动的priority值越小，加载优先级越高。 diff --git a/zh-cn/device-dev/driver/driver-platform-gpio-develop.md b/zh-cn/device-dev/driver/driver-platform-gpio-develop.md index 7689a94b1bbe0b46df6111cd3214f76e0d0ca8bb..7f587b81c15f62a0e6e91ef97b80bc1a4263bec5 100755 --- a/zh-cn/device-dev/driver/driver-platform-gpio-develop.md +++ b/zh-cn/device-dev/driver/driver-platform-gpio-develop.md @@ -127,7 +127,7 @@ GPIO模块适配的三个环节是配置属性文件，实例化驱动入口， match_attr = "hisilicon_hi35xx_pl061"; //【必要】必须和device_info.hcs中的deviceMatchAttr值一致 groupNum = 12; //【必要】GPIO组索引 需要根据设备情况填写 bitNum = 8; //【必要】每组GPIO管脚数 - regBase = 0x120d0000;//【必要】物理及地址 + regBase = 0x120d0000;//【必要】物理基地址 regStep = 0x1000; //【必要】寄存器偏移步进 irqStart = 48; //【必要】开启中断 irqShare = 0; //【必要】共享中断 diff --git a/zh-cn/device-dev/driver/driver-platform-mipidsi-develop.md b/zh-cn/device-dev/driver/driver-platform-mipidsi-develop.md index 636950be2d1a640dff99000572cad8324140c25b..5dc633c45be6a6d6bbff017d0f17eccea67c3a1f 100755 --- a/zh-cn/device-dev/driver/driver-platform-mipidsi-develop.md +++ b/zh-cn/device-dev/driver/driver-platform-mipidsi-develop.md @@ -112,7 +112,7 @@ MIPI-DSI模块适配的三个环节是配置属性文件，实例化驱动入口 3. 完成驱动入口注册之后，最后一步就是以核心层MipiDsiCntlr对象的初始化为核心，包括厂商自定义结构体（传递参数和数据），实例化MipiDsiCntlr成员MipiDsiCntlrMethod（让用户可以通过接口来调用驱动底层函数），实现HdfDriverEntry成员函数（Bind，Init，Release） - 自定义结构体参考 - + > 从驱动的角度看，自定义结构体是参数和数据的载体，一般来说，config文件中的数值也会用来初始化结构体成员，但本例的mipidsi无器件属性文件，故基本成员结构与MipiDsiCntlr无太大差异。 ```c @@ -196,8 +196,8 @@ MIPI-DSI模块适配的三个环节是配置属性文件，实例化驱动入口 g_mipiDsihandle[cntlr->devNo].cntlr = cntlr;//初始化MipiDsiHandle成员 g_mipiDsihandle[cntlr->devNo].priv = NULL; - cntlr->device = device; //使HdfDeviceObject与MmcCntlr可以相互转化的前提 - device->service = &(cntlr->service); //使HdfDeviceObject与MmcCntlr可以相互转化的前提 + cntlr->device = device; //使HdfDeviceObject与MipiDsiHandle可以相互转化的前提 + device->service = &(cntlr->service); //使HdfDeviceObject与MipiDsiHandle可以相互转化的前提 cntlr->priv = NULL; ... return HDF_SUCCESS; diff --git a/zh-cn/device-dev/driver/driver-platform-pwm-develop.md b/zh-cn/device-dev/driver/driver-platform-pwm-develop.md index 12ccdece68228e8cf9d49a1588796425dbe99835..dd2e846b7809d31d3e8777b2026426c092c16f7a 100755 --- a/zh-cn/device-dev/driver/driver-platform-pwm-develop.md +++ b/zh-cn/device-dev/driver/driver-platform-pwm-develop.md @@ -213,7 +213,7 @@ PWM模块适配HDF框架的三个环节是配置属性文件，实例化驱动 (void)obj; return HDF_SUCCESS; } - //挂载init的 + static int32_t HdfPwmInit(struct HdfDeviceObject *obj) { int ret; diff --git a/zh-cn/device-dev/driver/driver-platform-rtc-develop.md b/zh-cn/device-dev/driver/driver-platform-rtc-develop.md index 4e31ceff434abce6b7de034547223316a1229bea..ed31512235c1824e98cc594ede3027bdd0aca0c0 100755 --- a/zh-cn/device-dev/driver/driver-platform-rtc-develop.md +++ b/zh-cn/device-dev/driver/driver-platform-rtc-develop.md @@ -59,7 +59,7 @@ RTC模块适配HDF框架的三个环节是配置属性文件，实例化驱动 > > |函数|入参|出参|返回值|功能| > |-|-|-|-|-| -> |ReadTime |**host**: 结构体指针,核心层RTC控制器 ; |**time**: 结构体指针,
传出的时间值; |HDF_STATUS相关状态| 读RTC时间信息[^2] | +> |ReadTime |**host**: 结构体指针,核心层RTC控制器 ; |**time**: 结构体指针,
传出的时间值; |HDF_STATUS相关状态| 读RTC时间信息 | > |WriteTime |**host**: 结构体指针,核心层RTC控制器 ;
**time**: 结构体指针,时间传入值; |无 |HDF_STATUS相关状态| 写RTC时间信息（包括毫秒~年） | > |ReadAlarm |**host**: 结构体指针,核心层RTC控制器 ;
**alarmIndex**: 枚举值，闹钟报警索引 ;|**time**: 结构体指针,
传出的时间值;|HDF_STATUS相关状态| 读RTC报警时间信息 | > |WriteAlarm |**host**: 结构体指针,核心层RTC控制器 ;
**alarmIndex**: 枚举值，闹钟报警索引 ;
**time**: 结构体指针,时间传入值;|无|HDF_STATUS相关状态| 写RTC报警时间信息 | @@ -76,7 +76,7 @@ RTC模块适配HDF框架的三个环节是配置属性文件，实例化驱动 下方将以rtc_hi35xx.c为示例，展示需要厂商提供哪些内容来完整实现设备功能。 1. 驱动开发首先需要实例化驱动入口，驱动入口必须为HdfDriverEntry（在 hdf_device_desc.h 中定义）类型的全局变量，且moduleName要和device_info.hcs中保持一致。HDF框架会将所有加载的驱动的HdfDriverEntry对象首地址汇总，形成一个类似数组的段地址空间，方便上层调用。 - + 一般在加载驱动时HDF会先调用Bind函数，再调用Init函数加载该驱动。当Init调用异常时，HDF框架会调用Release释放驱动资源并退出。 - RTC驱动入口参考 @@ -94,7 +94,7 @@ RTC模块适配HDF框架的三个环节是配置属性文件，实例化驱动 ``` 2. 完成驱动入口注册之后，下一步请在device_info.hcs文件中添加deviceNode信息，并在 rtc_config.hcs 中配置器件属性。deviceNode信息与驱动入口注册相关，器件属性值与核心层RtcHost成员的默认值或限制范围有密切关系。 - + **本例只有一个RTC控制器，如有多个器件信息，则需要在device_info文件增加deviceNode信息，以及在rtc_config文件中增加对应的器件属性**。 - device_info.hcs 配置参考 @@ -108,7 +108,7 @@ RTC模块适配HDF框架的三个环节是配置属性文件，实例化驱动 policy = 1; //2:用户态可见,1:内核态可见,0:不需要发布服务 priority = 30; //优先级越大，值越小 permission = 0644; //驱动创建设备节点权限 - moduleName = "HDF_PLATFORM_RTC"; //【必要】驱动注册名字 + moduleName = "HDF_PLATFORM_RTC"; //【必要】用于指定驱动名称，需要与驱动Entry中的moduleName一致； serviceName = "HDF_PLATFORM_RTC"; //【必要】驱动对外发布服务的名称，必须唯一 deviceMatchAttr = "hisilicon_hi35xx_rtc";//【必要】需要与设备hcs文件中的 match_attr 匹配 } @@ -208,8 +208,9 @@ RTC模块适配HDF框架的三个环节是配置属性文件，实例化驱动 > |HDF_ERR_IO |I/O 错误| > |HDF_SUCCESS |初始化成功| > |HDF_FAILURE |初始化失败| + > > **函数说明：** - > 链接HdfDeviceObject对象和RtcHost + > 关联HdfDeviceObject对象和RtcHost ```c static int32_t HiRtcBind(struct HdfDeviceObject *device) diff --git a/zh-cn/device-dev/driver/driver-platform-sdio-develop.md b/zh-cn/device-dev/driver/driver-platform-sdio-develop.md index 4254bec8b1baab626313c3225d42e58deb45ca5f..cb8883babfaef39add44768b1ed927f336be3849 100755 --- a/zh-cn/device-dev/driver/driver-platform-sdio-develop.md +++ b/zh-cn/device-dev/driver/driver-platform-sdio-develop.md @@ -228,10 +228,7 @@ SDIO模块适配HDF框架的三个环节是配置属性文件，实例化驱动 > |HDF_ERR_IO |I/O 错误| > |HDF_SUCCESS |初始化成功| > |HDF_FAILURE |初始化失败| - > - > **函数说明：** - > 将 MmcCntlr 对象同 HdfDeviceObject 进行了关联 - > + > > **函数说明：** > 初始化自定义结构体对象，初始化SdioCntlr成员，调用核心层SdioCntlrAdd函数，以及其他厂商自定义初始化操作 @@ -295,7 +292,7 @@ SDIO模块适配HDF框架的三个环节是配置属性文件，实例化驱动 > 无 > > **函数说明：** - > 释放内存和删除控制器，该函数需要在驱动入口结构体中赋值给 Release 接口， 当HDF框架调用Init函数初始化驱动失败时，可以调用 Release 释放驱动资源。所有强制转换获取相应对象的操作**前提**是在Bnit函数中具备对应赋值的操作。 + > 释放内存和删除控制器，该函数需要在驱动入口结构体中赋值给 Release 接口， 当HDF框架调用Init函数初始化驱动失败时，可以调用 Release 释放驱动资源。所有强制转换获取相应对象的操作**前提**是在Bind函数中具备对应赋值的操作。 ```c static void Hi35xxLinuxSdioRelease(struct HdfDeviceObject *obj) diff --git a/zh-cn/device-dev/driver/driver-platform-spi-develop.md b/zh-cn/device-dev/driver/driver-platform-spi-develop.md index 7b172fe66a12bf8b96bec2bc9a968080e8c41f7c..705791a44c4cbc25286e710cb264007dd831fc2a 100755 --- a/zh-cn/device-dev/driver/driver-platform-spi-develop.md +++ b/zh-cn/device-dev/driver/driver-platform-spi-develop.md @@ -15,7 +15,7 @@ SPI是串行外设接口（Serial Peripheral Interface）的缩写，在HDF框 ## 开发步骤 -SPI模块适配HDF框架的三个环节是配置属性文件，实例化驱动入口，以及填充核心层接口函数。 +SPI模块适配HDF框架的三个环节是配置属性文件，实例化驱动入口，以及实例化核心层接口函数。 1. **实例化驱动入口：** - 实例化HdfDriverEntry结构体成员。 @@ -61,7 +61,7 @@ SPI模块适配HDF框架的三个环节是配置属性文件，实例化驱动 下方将以spi_hi35xx.c为示例，展示需要厂商提供哪些内容来完整实现设备功能。 1. 驱动开发首先需要实例化驱动入口，驱动入口必须为HdfDriverEntry（在 hdf_device_desc.h 中定义）类型的全局变量，且moduleName要和device_info.hcs中保持一致。HDF框架会将所有加载的驱动的HdfDriverEntry对象首地址汇总，形成一个类似数组的段地址空间，方便上层调用。 - + 一般在加载驱动时HDF会先调用Bind函数，再调用Init函数加载该驱动。当Init调用异常时，HDF框架会调用Release释放驱动资源并退出。 - SPI驱动入口参考 @@ -214,7 +214,7 @@ SPI模块适配HDF框架的三个环节是配置属性文件，实例化驱动 - **【重要】** SpiCntlr成员回调函数结构体SpiCntlrMethod的实例化，其他成员在Init函数中初始化 ```c - // spi_hi35xx.c 中的示例：钩子函数的填充 + // spi_hi35xx.c 中的示例：钩子函数的实例化 struct SpiCntlrMethod g_method = { .Transfer = Pl022Transfer, .SetCfg = Pl022SetCfg, @@ -247,7 +247,7 @@ SPI模块适配HDF框架的三个环节是配置属性文件，实例化驱动 { struct SpiCntlr *cntlr = NULL; //创建核心层 SpiCntlr 对象 ... - cntlr = (struct SpiCntlr *)OsalMemCalloc(sizeof(*cntlr));//非配内存 + cntlr = (struct SpiCntlr *)OsalMemCalloc(sizeof(*cntlr));//分配内存 ... cntlr->device = device; //使HdfDeviceObject与SpiCntlr可以相互转化的前提 device->service = &(cntlr->service);//使HdfDeviceObject与SpiCntlr可以相互转化的前提 @@ -280,7 +280,6 @@ SPI模块适配HDF框架的三个环节是配置属性文件，实例化驱动 > 初始化自定义结构体对象，初始化SpiCntlr成员。 ```c - //挂载init的 static int32_t HdfSpiDeviceInit(struct HdfDeviceObject *device) { int32_t ret; @@ -289,7 +288,7 @@ SPI模块适配HDF框架的三个环节是配置属性文件，实例化驱动 cntlr = SpiCntlrFromDevice(device);//这里有HdfDeviceObject到SpiCntlr的强制转化，通过service成员，赋值见Bind函数 //return (device == NULL) ? NULL : (struct SpiCntlr *)device->service; ... - ret = Pl022Init(cntlr, device);//【必要】填充厂商自定义操作对象，示例见下 + ret = Pl022Init(cntlr, device);//【必要】实例化厂商自定义操作对象，示例见下 ... ret = Pl022Probe(cntlr->priv); ... @@ -303,10 +302,10 @@ SPI模块适配HDF框架的三个环节是配置属性文件，实例化驱动 ... pl022 = (struct Pl022 *)OsalMemCalloc(sizeof(*pl022));//申请内存 ... - ret = SpiGetBaseCfgFromHcs(pl022, device->property); //填充busNum, numCs, speed, fifoSize, clkRate, + ret = SpiGetBaseCfgFromHcs(pl022, device->property); //初始化busNum, numCs, speed, fifoSize, clkRate, //mode, bitsPerWord, transferMode参数值 ... - ret = SpiGetRegCfgFromHcs(pl022, device->property); //填充regBase, phyBase, irqNum, regCrg, clkEnBit, + ret = SpiGetRegCfgFromHcs(pl022, device->property); //初始化regBase, phyBase, irqNum, regCrg, clkEnBit, //clkRstBit, regMiscCtrl, regMiscCtrl, miscCtrlCs, //miscCtrlCsShift参数值 ... @@ -327,7 +326,7 @@ SPI模块适配HDF框架的三个环节是配置属性文件，实例化驱动 return 0; } ``` - + - **Release函数参考** > **入参：** diff --git a/zh-cn/device-dev/driver/driver-platform-uart-develop.md b/zh-cn/device-dev/driver/driver-platform-uart-develop.md index 800c16dc4792c2adb5998b9c9393e18dbd26c17a..f087e7df7b4dc89607be5080d4d65822c5ecdf1a 100755 --- a/zh-cn/device-dev/driver/driver-platform-uart-develop.md +++ b/zh-cn/device-dev/driver/driver-platform-uart-develop.md @@ -15,7 +15,7 @@ UART是通用异步收发传输器（Universal Asynchronous Receiver/Transmitter ## 开发步骤 -uart模块适配HDF框架的三个环节是配置属性文件，实例化驱动入口，以及填充核心层接口函数。 +uart模块适配HDF框架的三个环节是配置属性文件，实例化驱动入口，以及实例化核心层接口函数。 1. **实例化驱动入口：** - 实例化HdfDriverEntry结构体成员。 @@ -73,7 +73,7 @@ uart模块适配HDF框架的三个环节是配置属性文件，实例化驱动 下方将以uart_hi35xx.c为示例，展示需要厂商提供哪些内容来完整实现设备功能。 1. 驱动开发首先需要实例化驱动入口，驱动入口必须为HdfDriverEntry（在 hdf_device_desc.h 中定义）类型的全局变量，且moduleName要和device_info.hcs中保持一致。HDF框架会将所有加载的驱动的HdfDriverEntry对象首地址汇总，形成一个类似数组的段地址空间，方便上层调用。 - + 一般在加载驱动时HDF会先调用Bind函数，再调用Init函数加载该驱动。当Init调用异常时，HDF框架会调用Release释放驱动资源并退出。 - UART驱动入口参考 @@ -206,14 +206,14 @@ uart模块适配HDF框架的三个环节是配置属性文件，实例化驱动 uint32_t num; OsalAtomic atom; void *priv; //一般存储厂商自定义结构体首地址，方便后者被调用 - struct UartHostMethod *method; //核心层钩子函数，厂商需要实现其成员函数功能并填充 + struct UartHostMethod *method; //核心层钩子函数，厂商需要实现其成员函数功能并实例化 }; ``` - **【重要】** UartHost成员回调函数结构体UartHostMethod的实例化，其他成员在Bind函数中初始化 ```c - // uart_hi35xx.c 中的示例：钩子函数的填充 + // uart_hi35xx.c 中的示例：钩子函数的实例化 struct UartHostMethod g_uartHostMethod = { .Init = Hi35xxInit, .Deinit = Hi35xxDeinit, @@ -286,7 +286,6 @@ uart模块适配HDF框架的三个环节是配置属性文件，实例化驱动 > 初始化自定义结构体对象，初始化UartHost成员，调用核心层UartAddDev函数，接入VFS ```c - //挂载init的 int32_t HdfUartDeviceInit(struct HdfDeviceObject *device) { int32_t ret; @@ -308,7 +307,7 @@ uart模块适配HDF框架的三个环节是配置属性文件，实例化驱动 struct UartDriverData *udd = NULL; struct UartPl011Port *port = NULL; ... - // 【必要相关功能】步骤【1】~【7】主要实现对 udd 对象的填充赋值，然后赋值给核心层UartHost对象上 + // 【必要相关功能】步骤【1】~【7】主要实现对 udd 对象的实例化赋值，然后赋值给核心层UartHost对象上 udd = (struct UartDriverData *)OsalMemCalloc(sizeof(*udd));//【1】 ... port = (struct UartPl011Port *)OsalMemCalloc(sizeof(struct UartPl011Port));//【2】 @@ -343,7 +342,7 @@ uart模块适配HDF框架的三个环节是配置属性文件，实例化驱动 return 0; } ``` - + - **Release函数参考** > **入参：** diff --git a/zh-cn/device-dev/driver/driver-platform-watchdog-des.md b/zh-cn/device-dev/driver/driver-platform-watchdog-des.md index b6eba28de3581722b16b58ed7a4e31e6b7054362..57f2d55bc5fb03474aad9ff7042334c214ec7632 100644 --- a/zh-cn/device-dev/driver/driver-platform-watchdog-des.md +++ b/zh-cn/device-dev/driver/driver-platform-watchdog-des.md @@ -104,7 +104,7 @@ 在操作看门狗之前，需要使用WatchdogOpen打开一个看门狗设备，一个系统可能有多个看门狗，通过ID号来打开指定的看门狗设备： -int32\_t WatchdogOpen\(int16\_t wdtId\); +DevHandle WatchdogOpen\(int16\_t wdtId\); **表 2** WatchdogOpen参数和返回值描述 @@ -201,7 +201,7 @@ if (ret != 0) { ### 设置超时时间 -int32\_t WatchdogSetTimeout\(PalHandle \*handle, uint32\_t seconds\); +int32\_t WatchdogSetTimeout\(DevHandle \*handle, uint32\_t seconds\); **表 4** WatchdogSetTimeout参数和返回值描述 @@ -253,7 +253,7 @@ if (ret != 0) { ### 获取超时时间 -int32\_t WatchdogGetTimeout\(PalHandle \*handle, uint32\_t \*seconds\); +int32\_t WatchdogGetTimeout\(DevHandle \*handle, uint32\_t \*seconds\); **表 5** WatchdogGetTimeout参数和返回值描述 diff --git a/zh-cn/device-dev/driver/driver-platform-watchdog-develop.md b/zh-cn/device-dev/driver/driver-platform-watchdog-develop.md index 1bb85b3e1f2dfb0e9726215bde37ca6a7fb74cd7..85f75ad85201fdea2ea2ef35c9d69b300e87ee80 100755 --- a/zh-cn/device-dev/driver/driver-platform-watchdog-develop.md +++ b/zh-cn/device-dev/driver/driver-platform-watchdog-develop.md @@ -6,7 +6,7 @@ ## 概述 -看门狗（watchdog），又叫看门狗计时器（watchdog timer），是一种硬件的计时设备，在HDF框架中，watchdog接口适配模式采用独立服务模式，在这种模式下，每一个设备对象会独立发布一个设备服务来处理外部访问，设备管理器收到API的访问请求之后，通过提取该请求的参数，达到调用实际设备对象的相应内部方法的目的。 +看门狗（Watchdog），又叫看门狗计时器（Watchdog timer），是一种硬件的计时设备，在HDF框架中，Watchdog接口适配模式采用独立服务模式，在这种模式下，每一个设备对象会独立发布一个设备服务来处理外部访问，设备管理器收到API的访问请求之后，通过提取该请求的参数，达到调用实际设备对象的相应内部方法的目的。 独立服务模式可以直接借助HDFDeviceManager的服务管理能力，但需要为每个设备单独配置设备节点，增加内存占用。 @@ -15,7 +15,7 @@ ## 开发步骤 -watchdog模块适配HDF框架的三个环节是配置属性文件，实例化驱动入口，以及填充核心层接口函数。 +Watchdog模块适配HDF框架的三个环节是配置属性文件，实例化驱动入口，以及实例化核心层接口函数。 1. **实例化驱动入口：** - 实例化HdfDriverEntry结构体成员。 @@ -45,7 +45,7 @@ watchdog模块适配HDF框架的三个环节是配置属性文件，实例化驱 > int32_t (*start)(struct WatchdogCntlr *wdt); > int32_t (*stop)(struct WatchdogCntlr *wdt); > int32_t (*feed)(struct WatchdogCntlr *wdt); -> int32_t (*getPriv)(struct WatchdogCntlr *wdt); //【可选】如果WatchdogCntlr 中的priv成员存在，则按需填充 +> int32_t (*getPriv)(struct WatchdogCntlr *wdt); //【可选】如果WatchdogCntlr 中的priv成员存在，则按需进行实例化 > void (*releasePriv)(struct WatchdogCntlr *wdt);//【可选】 > }; > ``` @@ -56,7 +56,7 @@ watchdog模块适配HDF框架的三个环节是配置属性文件，实例化驱 > |getStatus |**wdt**: 结构体指针,核心层WDG控制器; |**status**: int32_t指针,
表示狗的状态（打开或关闭）; |HDF_STATUS相关状态|获取看门狗所处的状态| > |start |**wdt**: 结构体指针,核心层WDG控制器; |无 |HDF_STATUS相关状态|打开开门狗 | > |stop |**wdt**: 结构体指针,核心层WDG控制器; |无 |HDF_STATUS相关状态|关闭开门狗 | -> |setTimeout|**wdt**: 结构体指针,核心层WDG控制器;
**seconds**: uint32_t,时间传入值;|无|HDF_STATUS相关状态|设置超时时间值，
需要与设置的时间相对应，
与厂商看门狗的时钟周期相关 | +> |setTimeout|**wdt**: 结构体指针,核心层WDG控制器;
**seconds**: uint32_t,时间传入值;|无|HDF_STATUS相关状态|设置超时时间值，单位秒，
需要保证看门狗实际运行的时间符合该值 | > |getTimeout|**wdt**: 结构体指针,核心层WDG控制器; |**seconds**: uint32_t,
传出的时间值|HDF_STATUS相关状态|回读设置的超时时间值 | > |feed |**wdt**: 结构体指针,核心层WDG控制器; |无 |HDF_STATUS相关状态|喂狗 | @@ -66,10 +66,10 @@ watchdog模块适配HDF框架的三个环节是配置属性文件，实例化驱 下方将以watchdog_hi35xx.c为示例，展示需要厂商提供哪些内容来完整实现设备功能。 1. 驱动开发首先需要实例化驱动入口，驱动入口必须为HdfDriverEntry（在 hdf_device_desc.h 中定义）类型的全局变量，且moduleName要和device_info.hcs中保持一致。HDF框架会将所有加载的驱动的HdfDriverEntry对象首地址汇总，形成一个类似数组的段地址空间，方便上层调用。 - + 一般在加载驱动时HDF会先调用Bind函数，再调用Init函数加载该驱动。当Init调用异常时，HDF框架会调用Release释放驱动资源并退出。 -- watchdog驱动入口参考 +- Watchdog驱动入口参考 ```c struct HdfDriverEntry g_watchdogDriverEntry = { @@ -83,7 +83,7 @@ watchdog模块适配HDF框架的三个环节是配置属性文件，实例化驱 ``` 2. 完成驱动入口注册之后，下一步请在device_info.hcs文件中添加deviceNode信息，并在 watchdog_config.hcs 中配置器件属性。deviceNode信息与驱动入口注册相关，器件属性值与核心层WatchdogCntlr 成员的默认值或限制范围有密切关系。 - + **本例只有一个Watchdog控制器，如有多个器件信息，则需要在device_info文件增加deviceNode信息，以及在watchdog_config文件中增加对应的器件属性**。 - device_info.hcs 配置参考 @@ -138,15 +138,15 @@ watchdog模块适配HDF框架的三个环节是配置属性文件，实例化驱 ```c struct Hi35xxWatchdog { struct WatchdogCntlr wdt; //【必要】是链接上下层的载体，具体描述见下面 - OsalSpinlock lock; //【可选】可挂载到 WatchdogCntlr 的lock成员上，两个是相同的定义 + OsalSpinlock lock; volatile unsigned char *regBase;//【必要】地址映射需要 uint32_t phyBase; //【必要】地址映射需要 uint32_t regStep; //【必要】地址映射需要 }; //WatchdogCntlr是核心层控制器结构体，其中的成员在Init函数中会被赋值 struct WatchdogCntlr { - struct IDeviceIoService service;//驱动服务，【无需挂载】 - struct HdfDeviceObject *device; //驱动设备，需要挂载 bind 函数的入参：struct HdfDeviceObject *device + struct IDeviceIoService service;//驱动服务 + struct HdfDeviceObject *device; //驱动设备 OsalSpinlock lock; //在HDF核心层调用时从系统代码实现了一个自旋锁的机制，挂载的变量需要是相同的变量，不建议挂载 struct WatchdogMethod *ops; //接口回调函数 int16_t wdtId; //WDG设备的识别id @@ -188,8 +188,8 @@ watchdog模块适配HDF框架的三个环节是配置属性文件，实例化驱 > 初始化自定义结构体对象，初始化WatchdogCntlr成员，调用核心层WatchdogCntlrAdd函数。 ```c - //一般而言，初始化函数需要根据传入设备的属性实现 Hi35xxWatchdog 结构的填充， - //但此示例中的这部分集成在 bind 函数中 + //一般而言，Init函数需要根据入参（HdfDeviceObject对象）的属性值初始化Hi35xxWatchdog结构体的成员， + //但本例中是在bind函数中实现的 static int32_t Hi35xxWatchdogInit(struct HdfDeviceObject *device) { (void)device; @@ -205,14 +205,13 @@ watchdog模块适配HDF框架的三个环节是配置属性文件，实例化驱 ... hwdt->regBase = OsalIoRemap(hwdt->phyBase, hwdt->regStep); //地址映射 ... - //最重要的是这个挂载的过程 - hwdt->wdt.priv = (void *)device->property;//【可选】此处填充的是设备属性，但后续没有调用 priv 成员， - // 如果需要用到 priv 成员，需要实现对应的钩子函数填充 WatchdogMethod - // 结构体的 getPriv 和 releasePriv 成员函数 - hwdt->wdt.ops = &g_method; //【必要】WatchdogMethod的实例化对象的挂载 - hwdt->wdt.device = device; //【必要】使HdfDeviceObject与WatchdogcCntlr可以相互转化的前提 - ret = WatchdogCntlrAdd(&hwdt->wdt); //【必要】调用此函数填充核心层结构体，返回成功信号后驱动才完全接入平台核心层 - if (ret != HDF_SUCCESS) { //不成功的话，需要反向执行初始化相关函数 + + hwdt->wdt.priv = (void *)device->property;//【可选】此处是将设备属性的内容赋值给priv成员，但后续没有调用priv成员， + // 如果需要用到priv成员，需要额外实例化WatchdogMethod的getPriv和releasePriv成员函数 + hwdt->wdt.ops = &g_method; //【必要】将实例化后的对象赋值给ops成员，就可以实现顶层调用WatchdogMethod成员函数 + hwdt->wdt.device = device; //【必要】这是为了方便HdfDeviceObject与WatchdogcCntlr相互转化 + ret = WatchdogCntlrAdd(&hwdt->wdt); //【必要】调用此函数初始化核心层结构体，返回成功信号后驱动才完全接入平台核心层 + if (ret != HDF_SUCCESS) { // 不成功的话，需要释放初始化函数申请的资源 OsalIoUnmap((void *)hwdt->regBase); OsalMemFree(hwdt); return ret; @@ -220,7 +219,7 @@ watchdog模块适配HDF框架的三个环节是配置属性文件，实例化驱 return HDF_SUCCESS; } ``` - + - **Release函数参考** > **入参：** @@ -238,17 +237,17 @@ watchdog模块适配HDF框架的三个环节是配置属性文件，实例化驱 struct WatchdogCntlr *wdt = NULL; struct Hi35xxWatchdog *hwdt = NULL; ... - wdt = WatchdogCntlrFromDevice(device);//这里有HdfDeviceObject到MmcCntlr的强制转化，通过service成员(第一个成员)，赋值见Bind函数 + wdt = WatchdogCntlrFromDevice(device); //这里通过service成员将HdfDeviceObject强制转化为WatchdogCntlr //return (device == NULL) ? NULL : (struct WatchdogCntlr *)device->service; if (wdt == NULL) { return; } WatchdogCntlrRemove(wdt); //核心层函数，实际执行wdt->device->service = NULL以及cntlr->lock的释放 - hwdt = (struct Hi35xxWatchdog *)wdt; //这里有MmcCntlr到HimciHost的强制转化 - if (hwdt->regBase != NULL) { //地址反映射 + hwdt = (struct Hi35xxWatchdog *)wdt; //这里将WatchdogCntlr强制转化为HimciHost + if (hwdt->regBase != NULL) { //解除地址映射 OsalIoUnmap((void *)hwdt->regBase); hwdt->regBase = NULL; } - OsalMemFree(hwdt); //厂商自定义对象的内存释放 + OsalMemFree(hwdt); //释放厂商自定义对象占用的内存 } ``` diff --git a/zh-cn/device-dev/get-code/gettools-acquire.md b/zh-cn/device-dev/get-code/gettools-acquire.md index a2c790b11886e1eb01b9249e97729de5562a70a5..543098f5f4a2a64c819b1e1fdef8b56d4463ba49 100644 --- a/zh-cn/device-dev/get-code/gettools-acquire.md +++ b/zh-cn/device-dev/get-code/gettools-acquire.md @@ -52,7 +52,7 @@ OpenHarmony为开发者提供了两种Docker环境，以帮助开发者快速完

swr.cn-south-1.myhuaweicloud.com/openharmony-docker/openharmony-docker-standard

0.0.3

+

0.0.4

HPM Docker环境

@@ -69,6 +69,7 @@ OpenHarmony为开发者提供了两种Docker环境，以帮助开发者快速完
+ ## 环境准备 在使用docker环境前需要先完成以下操作： @@ -178,13 +179,13 @@ hb set 1. 获取Docker镜像。 ``` - docker pull swr.cn-south-1.myhuaweicloud.com/openharmony-docker/openharmony-docker-standard:0.0.3 + docker pull swr.cn-south-1.myhuaweicloud.com/openharmony-docker/openharmony-docker-standard:0.0.4 ``` 2. 进入OpenHarmony代码根目录执行如下命令，从而进入Docker构建环境。 ``` - docker run -it -v $(pwd):/home/openharmony swr.cn-south-1.myhuaweicloud.com/openharmony-docker/openharmony-docker-standard:0.0.3 + docker run -it -v $(pwd):/home/openharmony swr.cn-south-1.myhuaweicloud.com/openharmony-docker/openharmony-docker-standard:0.0.4 ``` @@ -206,27 +207,21 @@ hb set 3. 进入OpenHarmony代码根目录执行如下命令，从而进入Docker构建环境。 ``` - docker run -it -v $(pwd):/home/openharmony openharmony-docker-standard:0.0.3 + docker run -it -v $(pwd):/home/openharmony openharmony-docker-standard:0.0.4 ``` ### 编译源码-标准系统类设备（参考内存≥128MB） -1. 在源码的根目录执行预处理脚本。 - - ``` - ../scripts/prepare.sh - ``` - -2. 通过如下编译脚本启动标准系统类设备（参考内存≥128MB）的编译。 +通过如下编译脚本启动标准系统类设备（参考内存≥128MB）的编译。 - ``` - ./build.sh --product-name {product_name} - ``` +``` +./build.sh --product-name {product_name} +``` - \{product\_name\}为当前版本支持的平台。比如：Hi3516DV300等。 +\{product\_name\}为当前版本支持的平台。比如：Hi3516DV300等。 - 编译所生成的文件都归档在out/ohos-arm-release/目录下，结果镜像输出在 out/ohos-arm-release/packages/phone/images/ 目录下。 +编译所生成的文件都归档在out/ohos-arm-release/目录下，结果镜像输出在 out/ohos-arm-release/packages/phone/images/ 目录下。 >![](../public_sys-resources/icon-note.gif) **说明：** @@ -307,4 +302,3 @@ docker\_dist是一个[HPM](https://hpm.harmonyos.com/)系统中的模板组件 hpm run distWithDocker solution={product} ``` - diff --git a/zh-cn/device-dev/get-code/sourcecode-acquire.md b/zh-cn/device-dev/get-code/sourcecode-acquire.md index c953882f8b3759e5d26b268238af344a4c3c4aef..021675956fe0c4170b10b596c7e3120646f37ca3 100644 --- a/zh-cn/device-dev/get-code/sourcecode-acquire.md +++ b/zh-cn/device-dev/get-code/sourcecode-acquire.md @@ -2,7 +2,7 @@ - [OpenHarmony介绍](#section6370143622110) - [源码获取概述](#section12763342204) -- [获取方式1：从代码仓库获取](#section537312010229) +- [获取方式1：从gitee代码仓库获取](#section537312010229) - [适用场景](#section10881513459) - [前提条件](#section102871547153314) - [操作步骤](#section429012478331) @@ -13,6 +13,7 @@ - [操作步骤](#section954619433333) - [获取方式3：从镜像站点获取](#section1186691118430) +- [获取方式4：从github镜像仓库获取(每天UTC时间23点同步)](#section23448418360) - [源码目录简介](#section1072115612811) ## OpenHarmony介绍 @@ -25,11 +26,12 @@ OpenHarmony是由开放原子开源基金会（OpenAtom Foundation）孵化及 本文档将介绍如何获取OpenHarmony源码并说明OpenHarmony的源码目录结构。OpenHarmony的代码以[组件](../bundles/oem_bundle_standard_des.md)的形式开放，开发者可以通过如下其中一种方式获取： -- **获取方式1**：从代码仓库获取。通过repo或git工具从代码仓库中下载，此方式可获取最新代码。 +- **获取方式1**：从gitee代码仓库获取。通过repo或git工具从代码仓库中下载，此方式可获取最新代码。 - **获取方式2**：通过HPM包管理器获取。在[HPM](https://hpm.harmonyos.com)网站，查找满足需求的开源发行版，直接下载（或者定制后下载），再通过hpm-cli命令工具将所需的组件及工具链下载、安装到本地。 - **获取方式3**：从镜像站点下载归档后的发行版压缩文件。如果要获取旧版本的源码，也可通过此方式获取，此方式下载速度较快。 +- **获取方式4**：从github代码仓库获取。通过repo或git工具从代码仓库中下载，此方式可获取最新代码。 -## 获取方式1：从代码仓库获取 +## 获取方式1：从gitee代码仓库获取 ### 适用场景 @@ -101,7 +103,7 @@ OpenHarmony是由开放原子开源基金会（OpenAtom Foundation）孵化及 ``` repo init -u https://gitee.com/openharmony/manifest.git -b OpenHarmony_1.0.1_release --no-repo-verify repo sync -c - repo[Release-Notes](../../release-notes/Readme.md) forall -c 'git lfs pull' + repo forall -c 'git lfs pull' ``` - OpenHarmony其他版本源码获取方式请参考版本[Release-Notes](../../release-notes/Readme.md)。 @@ -327,89 +329,185 @@ OpenHarmony是由开放原子开源基金会（OpenAtom Foundation）孵化及
+ +## 获取方式4：从github镜像仓库获取(每天UTC时间23点同步) + + +方式一（推荐）：通过repo + ssh 下载（需注册公钥，请参考[GitHub帮助中心](https://docs.github.com/en/github/authenticating-to-github/connecting-to-github-with-ssh/adding-a-new-ssh-key-to-your-github-account)）。 + + repo init -u git@github.com:openharmony/manifest.git -b master --no-repo-verify + repo sync -c + repo forall -c 'git lfs pull' + +方式二：通过repo + https 下载。 + + repo init -u https://github.com/openharmony/manifest.git -b master --no-repo-verify + repo sync -c + repo forall -c 'git lfs pull' + ## 源码目录简介 下表是OpenHarmony源码的目录及简单说明： -**表 2** 源码目录 +**表 2** 源码目录 + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

目录名

+

描述

+

applications

+

应用程序样例，包括camera等

+

base

+

基础软件服务子系统集&硬件服务子系统集

+ +

基础软件服务子系统集硬件服务子系统集

+

build

+

组件化编译、构建和配置脚本

+

docs

+

说明文档

+

domains

+

增强软件服务子系统集

+

drivers

+

驱动子系统

+

foundation

+

系统基础能力子系统集

+

kernel

+

内核子系统

+

prebuilts

+

编译器及工具链子系统

+

test

+

测试子系统

+

third_party

+

开源第三方组件

+

utils

+

常用的工具集

+

vendor

+

厂商提供的软件

+

build.py

+

编译脚本文件

+
+ + diff --git a/zh-cn/device-dev/kernel/kernel-mini-basic-interrupt-guide.md b/zh-cn/device-dev/kernel/kernel-mini-basic-interrupt-guide.md index 346332358b3a116c07f195a0b5013617d500ef57..83841bb53c767aa248ea4c9aaf9654232632a50d 100644 --- a/zh-cn/device-dev/kernel/kernel-mini-basic-interrupt-guide.md +++ b/zh-cn/device-dev/kernel/kernel-mini-basic-interrupt-guide.md @@ -94,7 +94,7 @@ static UINT32 Example_Interrupt(VOID) HWI_PRIOR_T hwiPrio = 3; HWI_MODE_T mode = 0; HWI_ARG_T arg = 0; - + /*创建中断*/ ret = HalHwiCreate(HWI_NUM_TEST, hwiPrio, mode, (HWI_PROC_FUNC)HwiUsrIrq, arg); if(ret == LOS_OK){ @@ -125,6 +125,6 @@ static UINT32 Example_Interrupt(VOID) ``` Hwi create success! -Hwi delete success!. +Hwi delete success! ``` diff --git a/zh-cn/device-dev/kernel/kernel-mini-basic-ipc-queue-guide.md b/zh-cn/device-dev/kernel/kernel-mini-basic-ipc-queue-guide.md index 9e794c0c1b5e98ab4aa993c319fac4e39480c0ac..b1b9570e185f5d5a21a895e182b5b3a5b1b8d44e 100644 --- a/zh-cn/device-dev/kernel/kernel-mini-basic-ipc-queue-guide.md +++ b/zh-cn/device-dev/kernel/kernel-mini-basic-ipc-queue-guide.md @@ -62,7 +62,7 @@

LOS_QueueWriteHeadCopy

向指定队列头节点中写入入参bufferAddr中保存的数据。

+

向指定队列头节点中写入入参bufferAddr中保存的数据。

获取队列信息

diff --git a/zh-cn/device-dev/kernel/kernel-mini-extend-file-littlefs-basic.md b/zh-cn/device-dev/kernel/kernel-mini-extend-file-littlefs-basic.md index 49a6f6cb8d5e6b80f1677fb1e808c2dad3f18ed9..05608b21dac7314e10ccbb2ebcd4a3a2d3914d37 100644 --- a/zh-cn/device-dev/kernel/kernel-mini-extend-file-littlefs-basic.md +++ b/zh-cn/device-dev/kernel/kernel-mini-extend-file-littlefs-basic.md @@ -1,6 +1,6 @@ # 基本概念 -LittleFS是一个小型的的Flash文件系统，它结合日志结构（log-structured）文件系统和COW（copy-on-write）文件系统的思想，以日志结构存储元数据，以COW结构存储数据。这种特殊的存储方式，使LittleFS具有强大的掉电恢复能力（power-loss resilience\)。分配COW数据块时LittleFS采用了名为统计损耗均衡的动态损耗均衡算法，使Flash设备的寿命得到有效保障。同时LittleFS针对资源紧缺的小型设备进行设计，具有极其有限的ROM和RAM占用，并且所有RAM的使用都通过一个可配置的固定大小缓冲区进行分配，不会随文件系统的扩大占据更多的系统资源。 +LittleFS是一个小型的Flash文件系统，它结合日志结构（log-structured）文件系统和COW（copy-on-write）文件系统的思想，以日志结构存储元数据，以COW结构存储数据。这种特殊的存储方式，使LittleFS具有强大的掉电恢复能力（power-loss resilience\)。分配COW数据块时LittleFS采用了名为统计损耗均衡的动态损耗均衡算法，使Flash设备的寿命得到有效保障。同时LittleFS针对资源紧缺的小型设备进行设计，具有极其有限的ROM和RAM占用，并且所有RAM的使用都通过一个可配置的固定大小缓冲区进行分配，不会随文件系统的扩大占据更多的系统资源。 当在一个资源非常紧缺的小型设备上，寻找一个具有掉电恢复能力并支持损耗均衡的Flash文件系统时，LittleFS是一个比较好的选择。 diff --git a/zh-cn/device-dev/kernel/kernel-small-basic-interrupt.md b/zh-cn/device-dev/kernel/kernel-small-basic-interrupt.md index e74f7d866ea9a1c49981ecb2f0e35ec24914f8da..77646e13c75cbbdb6839c0034a29e42725797949 100644 --- a/zh-cn/device-dev/kernel/kernel-small-basic-interrupt.md +++ b/zh-cn/device-dev/kernel/kernel-small-basic-interrupt.md @@ -59,12 +59,12 @@

LOS_IntUnLock

打开当前处理器所有中断响应

+

打开当前处理器所有中断响应

LOS_IntLock

关闭当前处理器所有中断响应

+

关闭当前处理器所有中断响应

LOS_IntRestore

diff --git a/zh-cn/device-dev/kernel/kernel-small-basic-trans-queue.md b/zh-cn/device-dev/kernel/kernel-small-basic-trans-queue.md index af2bec2777b65bd57c5881bfb92fa9a544ed967d..49a07e82c33eeb7c18d74b2dbfb39bbc1fc4b7f0 100644 --- a/zh-cn/device-dev/kernel/kernel-small-basic-trans-queue.md +++ b/zh-cn/device-dev/kernel/kernel-small-basic-trans-queue.md @@ -129,7 +129,7 @@ typedef struct {

LOS_QueueWriteHeadCopy

向指定队列头节点中写入入参bufferAddr中保存的数据

+

向指定队列头节点中写入入参bufferAddr中保存的数据

获取队列信息

diff --git a/zh-cn/device-dev/kernel/kernel-standard-build.md b/zh-cn/device-dev/kernel/kernel-standard-build.md index 1b52ac7b1f6ef75cb9c1e29e611e54ab24831d79..f83572008eed2348a75140036feb7cc24f67adcb 100644 --- a/zh-cn/device-dev/kernel/kernel-standard-build.md +++ b/zh-cn/device-dev/kernel/kernel-standard-build.md @@ -1,47 +1,12 @@ # Linux内核编译与构建指导 -- [开发示例1](#section19369206113115) - - [场景1：版本级编译原生方式](#section1025111193220) - - [场景2：单独编译修改后的内核](#section17446652173211) - - -## 开发示例1 - -以hi3516dv300开源开发板+ubuntu x86主机开发环境为例。 - -### 场景1：版本级编译原生方式 +以hi3516dv300开源开发板+ubuntu x86主机开发环境为例 使用工程的全量编译命令，编译生成uImage内核镜像 ``` -./build.sh --product-name Hi3516DV300 # 编译hi3516dv300的uImage内核镜像 +./build.sh --product-name Hi3516DV300 # 编译hi3516dv300镜像 + --build-target build_kernel # 编译hi3516dv300的uImage内核镜像 + --gn-args linux_kernel_version=\"linux-5.10\" # 编译指定内核版本 ``` -### 场景2：单独编译修改后的内核 - -1. 准备工作 - - 1. 按[开发板Patch使用指导](kernel-standard-patch.md)打入所需补丁。 - 2. 准备编译环境，可以使用开源arm clang/gcc编译器。 - - 进入工程主目录配置环境变量： - - ``` - export PATH=`pwd`/prebuilts/clang/host/linux-x86/clang-r353983c/bin:`pwd`/prebuilts/gcc/linux-x86/arm/gcc-linaro-7.5.0-arm-linux-gnueabi/bin/:$PATH # 配置编译环境 - MAKE_OPTIONES="ARCH=arm CROSS_COMPILE=arm-linux-gnueabi- CC=clang HOSTCC=clang" # 使用工程项目自带的clang环境 - ``` - -2. 修改内核代码或内核config （OpenHarmony提供对应平台的defconfig供参考）。 -3. 创建编译目录及生成内核.config。 - - ``` - make ${MAKE_OPTIONES} hi3516dv300_emmc_smp_hos_l2_defconfig # 使用自带的默认config 构建内核 - ``` - -4. 编译生成对应的内核Image。 - - ``` - make ${MAKE_OPTIONES} -j32 uImage # 编译uImage内核镜像 - ``` - - diff --git a/zh-cn/device-dev/kernel/kernel-standard-overview.md b/zh-cn/device-dev/kernel/kernel-standard-overview.md index 0727fa97264a4d471c7bf550dee2da94267e900a..c60169d1584ec22906b125c6edc471e3a63b06a4 100644 --- a/zh-cn/device-dev/kernel/kernel-standard-overview.md +++ b/zh-cn/device-dev/kernel/kernel-standard-overview.md @@ -15,7 +15,4 @@ LTS为长期支持版本，“长期支持”体现在对该版本内核的长 ## OpenHarmony内核版本选择 -OpenHarmony中的Linux内核从LTS版本中选择合适的版本作为内核基础版本，目前较多设备使用的4.19内核。4.4\~4.14LTS内核较旧，对新特性支持不足，且按计划在2023年左右会陆续不再维护，可使用周期较短，不适合作为首发版本。5.4LTS版本在已发产品中未广泛使用，4.19更为大家熟悉也可减少适配内核的周期，更新版本内核也会持续发布。 - -OpenHarmony 中的Linux内核推荐参考内存≥128MB的设备选用。 - +OpenHarmony中Linux内核从LTS版本中选择合适的版本作为内核的基础版本，目前已完成对Linux-4.19及Linux-5.10完成适配及支持。 diff --git a/zh-cn/device-dev/kernel/kernel-standard-patch.md b/zh-cn/device-dev/kernel/kernel-standard-patch.md index 87b3fea376cbb44d0f082ffdc2bc87c59fbda1d3..4ec8244dcb68f309b785069746cbeee1abb36483 100644 --- a/zh-cn/device-dev/kernel/kernel-standard-patch.md +++ b/zh-cn/device-dev/kernel/kernel-standard-patch.md @@ -1,17 +1,35 @@ # OpenHarmony开发板Patch使用指导 -Patch文件位于工程项目源码路径：kernel/linux/patches/linux-4.19，存放特定芯片架构驱动补丁。 +1. 合入HDF补丁 -如需使用特定芯片平台驱动的Patch，需要在内核仓代码完成对芯片平台驱动补丁合入。 + 在kernel/linux/build仓中，按照kernel.mk中HDF的补丁合入方法，合入不同内核版本对应的HDF内核补丁： + + ``` + $(OHOS_BUILD_HOME)/drivers/adapter/khdf/linux/patch_hdf.sh $(OHOS_BUILD_HOME) $(KERNEL_SRC_TMP_PATH) $(HDF_PATCH_FILE) + ``` -合入芯片平台驱动补丁，针对不同芯片平台合入对应的patch： +2. 合入芯片平台驱动补丁 -以Hi3516dv300为例： + 以Hi3516DV300为例： + + 在kernel/linux/build仓中，按照kernel.mk中的芯片组件所对应的patch路径规则及命名规则，将对应的芯片组件patch放到对应路径下： + + ``` + DEVICE_PATCH_DIR := $(OHOS_BUILD_HOME)/kernel/linux/patches/${KERNEL_VERSION}/$(DEVICE_NAME)_patch + DEVICE_PATCH_FILE := $(DEVICE_PATCH_DIR)/$(DEVICE_NAME).patch + ``` -``` -patch -p1 < device/hisilicon/hi3516dv300/sdk_linux/open_source/linux/hisi_linux-4.19_hos_l2.patch -``` +3. 修改自己所需要编译的config ->![](../public_sys-resources/icon-notice.gif) **须知：** ->由于OpenHarmony的编译构建流程中会拷贝kernel/linux-4.19的代码环境后进行打补丁动作，在使用OpenHarmony的版本级编译命令前，需要kernel/linux-4.19保持原代码环境。 + 在kernel/linux/build仓中，按照kernel.mk中的芯片组件所对应的patch路径规则及命名规则，将对应的芯片组件config放到对应路径下： + + ``` + KERNEL_CONFIG_PATH := $(OHOS_BUILD_HOME)/kernel/linux/config/${KERNEL_VERSION} + DEFCONFIG_FILE := $(DEVICE_NAME)_$(BUILD_TYPE)_defconfig + ``` + > **须知：** + > + >由于OpenHarmony工程的编译构建流程中会拷贝kernel/linux/linux-\*\.\*的代码环境后进行打补丁动作，在使用OpenHarmony的版本级编译命令前，需要kernel/linux/linux-\*\.\*原代码环境。 + > + >根据不同系统工程，编译完成后会在out目录下的kernel目录中生成对应实际编译的内核，基于此目录的内核，进行对应的config修改，将最后生成的\.config文件cp到config仓对应的路径文件里，即可生效。 diff --git a/zh-cn/device-dev/porting/Readme-CN.md b/zh-cn/device-dev/porting/Readme-CN.md index 71d0fcb98f2c03934f85f9a727a0f39e5d7dfbc6..5fa708769896553325b89e0ce0298992c6e23bea 100755 --- a/zh-cn/device-dev/porting/Readme-CN.md +++ b/zh-cn/device-dev/porting/Readme-CN.md @@ -49,6 +49,7 @@ repo init -u https://gitee.com/openharmony-sig/manifest.git -b master -m devboar - [平台驱动移植](porting-smallchip-driver-plat.md) - [器件驱动移植](porting-smallchip-driver-oom.md) - [标准系统移植指南](standard-system-porting-guide.md) +- [一种快速移植OpenHarmony Linux内核的方法](porting-linux-kernel.md) # 三方库移植 diff --git a/zh-cn/device-dev/porting/figure/zh-cn_image_0000001162805936.png b/zh-cn/device-dev/porting/figure/zh-cn_image_0000001162805936.png new file mode 100644 index 0000000000000000000000000000000000000000..0546e82fc91c605ba78f9bb56c4de88066c8c189 Binary files /dev/null and b/zh-cn/device-dev/porting/figure/zh-cn_image_0000001162805936.png differ diff --git a/zh-cn/device-dev/porting/figure/zh-cn_image_0000001208365855.png b/zh-cn/device-dev/porting/figure/zh-cn_image_0000001208365855.png new file mode 100644 index 0000000000000000000000000000000000000000..3cb585b4f3780141a122563f9d05bb47c1e30dd7 Binary files /dev/null and b/zh-cn/device-dev/porting/figure/zh-cn_image_0000001208365855.png differ diff --git a/zh-cn/device-dev/porting/figure/zh-cn_image_0000001208524821.png b/zh-cn/device-dev/porting/figure/zh-cn_image_0000001208524821.png new file mode 100644 index 0000000000000000000000000000000000000000..2668799e706c34df82d75050e701f450e226a536 Binary files /dev/null and b/zh-cn/device-dev/porting/figure/zh-cn_image_0000001208524821.png differ diff --git a/zh-cn/device-dev/porting/porting-linux-kernel.md b/zh-cn/device-dev/porting/porting-linux-kernel.md new file mode 100644 index 0000000000000000000000000000000000000000..10d11bc887bc5237870f1b0f5bdd9842d1ac4caf --- /dev/null +++ b/zh-cn/device-dev/porting/porting-linux-kernel.md @@ -0,0 +1,292 @@ +# 一种快速移植OpenHarmony Linux内核的方法 + +- [移植概述](#移植概述) +- [移植到三方芯片平台的整体思路](#移植到三方芯片平台的整体思路) + - [内核态层和用户态层](#内核态层和用户态层) + - [获得内核态层的两种方法](#获得内核态层的两种方法) + - [借助已有Linux内核来移植OpenHarmony的流程](#section1233187263176) +- [移植到三方芯片平台的步骤](#移植到三方芯片平台的步骤) + - [整体构建环境的准备](#整体构建环境的准备) + - [内核态基础代码的移植](#内核态基础代码的移植) + - [内核态必选特性HDF的移植](#内核态必选特性hdf的移植) + - [编译Image](#编译image) + - [编译和运行HDF测试用例（可选）](#编译和运行hdf测试用例-可选-) + +## 移植概述 + + +本文面向希望将OpenHarmony 移植到三方芯片平台硬件的开发者，介绍一种借助三方芯片平台自带Linux内核的现有能力，快速移植OpenHarmony到三方芯片平台的方法。 + + +## 移植到三方芯片平台的整体思路 + + +### 内核态层和用户态层 + +为了更好的解释整个内核移植，首先需要介绍一些概念： + +我们可以把OpenHarmony简单的分为 + +OpenHarmony = OpenHarmony 内核态层 + OpenHarmony 用户态层 + +![zh-cn_image_0000001162805936](figure/zh-cn_image_0000001162805936.png) + +其中OpenHarmony 内核态层就是上图的紫色部分，可以看到，它主要由内核本身（如Linux Kernel，LiteOS），和一些运行在内核态的一些特性组成，比如HDF等。 + +而OpenHarmony用户态层，在上图，就是紫色之外的部分。可以看到，由下往上看，它主要由系统服务层，框架层，应用层组成。在这儿我们将这三层整体称为“OpenHarmony 用户态层”。 + +为什么这么区分呢？因为我们这篇文章主要是要讨论如何快速的把OpenHarmony移植到三方芯片平台上。而OpenHarmony的用户态层，整体来说和三方芯片平台的耦合度不高，移植较为方便。而内核态层中的内核本身以及HDF驱动框架等，和三方芯片平台的耦合度较高，是移植的重难点。我们先做这个区分，就是为了先把聚光灯打到我们最需要关注的OpenHarmony内核态层上，开始分析和解题。另外说明，本文只包含Linux内核的快速移植，不包含LiteOS的移植。 + + +### 获得内核态层的两种方法 + +为了表述方便，我们在下文部分地方用“OH”代替“OpenHarmony”。 + +将OH 内核态层继续分解 + +OH 内核态层 = OH Linux内核 + OH内核态特性（可选特性或者必选特性，如必选特性HDF，今后的可选特性HMDFS等） + +而OH Linux内核 = 标准LTS Linux 内核 + 三方SoC芯片平台代码 + OH内核态基础代码（支撑OH用户态层运行的最基础代码） + +因此OH 内核态层 = 标准LTS Linux 内核 + 三方SoC芯片平台代码 + OH内核态基础代码 + OH内核态特性（如HDF，今后的HMDFS等） + +![zh-cn_image_0000001208365855](figure/zh-cn_image_0000001208365855.png) + +而将前两项组合，标准LTS Linux 内核 + 三方SoC芯片平台代码，其实就是一个三方Linux内核的基础组成。从上面的推导可以看出，OpenHarmony 内核态层其实能够由两种方法得到： + +方法一：OH 内核态层 = 三方Linux内核 + OH内核态基础代码 + OH内核态特性（如HDF，今后的HMDFS等） + +也就是直接借助三方Linux内核，再加上基础OH内核态基础代码、以及HDF等OH内核态特性。 + +方法二：OH 内核态层 = OH Linux内核 + OH内核态特性（如HDF，今后的HMDFS等） + +也就是直接采用OH Linux内核，然后再加入OH的其他内核态特性。 + +当前方法二中OH Linux内核支持的三方芯片平台还不够丰富。为了能够响应三方开发者快速移植OpenHarmony的要求，下文会着重介绍方法一，即借助三方已有的Linux内核，来快速移植OpenHarmony。 + + +### 借助已有Linux内核来移植OpenHarmony的流程 + + +整个移植流程可以分为三步： + +1. 准备整体构建环境，包括将三方芯片平台的现有内核代码拷贝到OpenHarmony的整体编译环境下。 + +2. OpenHarmony内核态基础代码的移植。 + +3. OpenHarmony内核态必选特性（如HDF等）的移植。 + +详细步骤在接下来的章节中介绍。 + + +## 移植到三方芯片平台的步骤 + +下面以树莓派3b (BCM2837) 为例，演示将OpenHarmony移植到树莓派的过程。 + + +### 整体构建环境的准备 + +1. 将三方内核纳入OpenHarmony编译环境。 + 完整编译过一遍标准 Hi3516DV300 内核之后，clone 树莓派内核源码并复制到 manifest 输出目录下： + + ``` + export PROJ_ROOT=[OpenHarmony manifest] + git clone https://gitee.com/xfan1024/oh-rpi3b-kernel.git + cp -r oh-rpi3b-kernel $PROJ_ROOT/out/KERNEL_OBJ/kernel/src_tmp/linux-rpi3b + ``` + +2. 配置树莓派内核编译环境 + ```shell + # 进入树莓派 kernel 目录 + cd out/KERNEL_OBJ/kernel/src_tmp/linux-rpi3b + + # 配置编译环境,使用工程项目自带的clang + export PATH=$PROJ_ROOT/prebuilts/clang/ohos/linux-x86_64/llvm/bin:$PROJ_ROOT/prebuilts/gcc/linux-x86/arm/gcc-linaro-7.5.0-arm-linux-gnueabi/bin/:$PATH + export MAKE_OPTIONS="ARCH=arm CROSS_COMPILE=arm-linux-gnueabi- CC=clang HOSTCC=clang" + export PRODUCT_PATH=vendor/hisilicon/Hi3516DV300 + ``` + +3. 注释掉clang不识别的flag + PROJ_ROOT/out/KERNEL_OBJ/kernel/src_tmp/linux-rpi3b/arch/arm/Makefile 注释掉以下这一行： + + ```makefile + KBUILD_CFLAGS +=-fno-omit-frame-pointer -mapcs -mno-sched-prolog + ``` + + +### 内核态基础代码的移植 + +目前OpenHarmony内核态的基础代码，主要是日志服务相关。轻量化内核日志服务代码包含： + +``` +drivers/staging/hilog +drivers/staging/hievent +``` + +将以上代码，从OpenHarmony内核代码目录kernel/linux/linux-4.19/drivers/staging中，拷贝到out/KERNEL_OBJ/kernel/src_tmp/linux-rpi3b/drivers/staging 下。 + +在内核config项中打开对应的CONFIG控制宏：CONFIG_HILOG和CONFIG_HIEVENT。 + +具体日志使用说明请参见：[Hilog_lite组件介绍](https://gitee.com/openharmony/hiviewdfx_hilog_lite/blob/master/README_zh.md)。 + + +### 内核态必选特性HDF的移植 + +1. 打HDF 补丁 + 在 Linux 内核打 HDF 补丁时，执行补丁 shell 脚本合入 HDF 补丁。 + + 1. 配置HDF补丁脚本的三个变量参数。 + 2. 获取 patch_hdf.sh 脚本。 + 3. 执行 patch_hdf.sh 脚本依次传入三个变量参数。 + patch_hdf.sh 脚本三个参数含义为：第一个入参为工程根目录路径，第二入参为内核目录路径，第三个入参为hdf补丁文件。 + + ``` + ./patch_hdf.sh [工程根目录路径] [内核目录路径] [hdf补丁文件] + ``` + + 以树莓派3b为示例介绍： + + ``` + # 进入树莓派 kernel 目录 + $PROJ_ROOT/drivers/adapter/khdf/linux/patch_hdf.sh \ + $PROJ_ROOT # 指定工程根目录路径 \ + $PROJ_ROOT/out/KERNEL_OBJ/kernel/src_tmp/linux-rpi3b # 打补丁的内核目录路径 \ + $PROJ_ROOT/kernel/linux/patches/linux-4.19/hi3516dv300_patch/hdf.patch # HDF补丁文件 + ``` + +2. 配置config + 提供HDF基本配置，如果需要其他功能，通过 menuconfig 打开对应驱动开关即可。 + + HDF补丁执行成功后，默认HDF开关是关闭的，打开HDF基本配置选项如下： + + ``` + CONFIG_DRIVERS_HDF=y + CONFIG_HDF_SUPPORT_LEVEL=2 + CONFIG_DRIVERS_HDF_PLATFORM=y + CONFIG_DRIVERS_HDF_PLATFORM_MIPI_DSI=y + CONFIG_DRIVERS_HDF_PLATFORM_GPIO=y + CONFIG_DRIVERS_HDF_PLATFORM_I2C=y + CONFIG_DRIVERS_HDF_PLATFORM_UART=y + CONFIG_DRIVERS_HDF_TEST=y + ``` + + 或者通过 menuconfig 界面打开HDF相关配置，命令如下： + + ``` + # 生成 .config 配置文件 + make ${MAKE_OPTIONS} rpi3b_oh_defconfig + + # 更改HDF内核配置 + make ${MAKE_OPTIONS} menuconfig + # [*] Device Drivers + # [*] HDF driver framework support ---> + ``` + + 配置如下（在 Device Drivers -> HDF driver framework support 目录下）： + + ![zh-cn_image_0000001208524821](figure/zh-cn_image_0000001208524821.png) + + +### 编译Image + +``` +# 执行编译命令 +make ${MAKE_OPTIONS} -j33 zImage +``` + + +### 编译和运行HDF测试用例（可选） + +**简介** + +HDF（Hardware Driver Foundation)自测试用例，用于测试HDF框架和外设的基本功能，本文主要介绍HDF内核态用例测试方法。 + +**预置条件** + +测试前需要在menuconfig里检查HDF测试开关CONFIG_DRIVERS_HDF_TEST=y，代码全量编译通过。 + +**用例编译和测试方法** + +通过[hdc_std工具](http://gitee.com/openharmony/docs/blob/master/zh-cn/device-dev/subsystems/subsys-toolchain-hdc-guide.md)把用例执行文件推送到设备中，然后执行用例即可，操作步骤如下： +1. 编译hdf测试用例。 + +2. 用hdc_std工具推送测试文件到设备中。 + +3. 进入设备data/test目录，执行测试文件即可。 + +用例编译和测试详细步骤如下： + +1. 编译hdf测试用例 + 编译hdf测试用例命令和文件路径如下： + + ``` + ./build.sh --product-name Hi3516DV300 --build-target hdf_test + ``` + + 等待编译完成。 + +2. 将测试文件移动到目标移植设备上（以树莓派为例） + + 方法一：使用 [hdc_std工具](http://gitee.com/openharmony/docs/blob/master/zh-cn/device-dev/subsystems/subsys-toolchain-hdc-guide.md)。 + + 1. 先在树莓派里新建data/test目录。 + ``` + mkdir -p data/test + ``` + 2. 推送依赖库和测试用例到树莓派。 + ``` + hdc_std file send XXX\out\ohos-arm-release\hdf\hdf\libhdf_test_common.z.so /system/lib + hdc_std file send XXX\out\ohos-arm-release\tests\unittest\hdf\config\hdf_adapter_uhdf_test_config /data/test + hdc_std file send XXX\out\ohos-arm-release\tests\unittest\hdf\devmgr\DevMgrTest /data/test + hdc_std file send XXX\out\ohos-arm-release\tests\unittest\hdf\osal\OsalTest /data/test + hdc_std file send XXX\out\ohos-arm-release\tests\unittest\hdf\sbuf\SbufTest /data/test + ``` + 方法二：移动到储存卡内，启动树莓派之后装载。 + + 1. 拔掉树莓派连接电脑的串口、USB线，然后拔下数据卡。 + 2. 将数据卡插入到电脑的读取口，将编译好的 zImage 和测试文件夹 test/ 下载到电脑，然后移动到数据卡的根目录下。zImage 文件会被替换，请提前做好备份。 + 3. 最后将数据卡插回树莓派。 + ``` + # 让树莓派文件系统读取储存卡根目录 + mount -t vfat /dev/block/mmcblk0p1 /boot + cd /boot/[测试文件目录] + # 允许修改系统文件 + mount -o remount,rw / + # 安装测试用库 + mv libhdf_test_common.z.so /system/lib + mkdir /data/test + mv * /data/test + ``` + +3. 执行测试 + 1. 进入目录执行测试文件目录 data/test。 + ``` + cd /data/test + ``` + 2. 修改文件执行权限。 + ``` + chmod 777 hdf_adapter_uhdf_test_config DevMgrTest OsalTest SbufTest + ``` + 3. 开始测试。 + ``` + ./hdf_adapter_uhdf_test_config + ./DevMgrTest + ./OsalTest + ./SbufTest + ``` + 4. 如果所有测试文件输出均显示 PASSED，那么 HDF 功能即安装成功。 + 示例：DevMgrTest 用例成功结果显示： + ``` + ./DevMgrTest + Running main() from gmock_main.cc + [==========] Running 1 test from 1 test case. + [----------] Global test environment set-up. + [----------] 1 test from DevMgrTest + [ RUN ] DevMgrTest.DriverLoaderTest_001 + [ OK ] DevMgrTest.DriverLoaderTest_001 (0 ms) + [----------] 1 test from DevMgrTest (0 ms total) + [----------] Global test environment tear-down + Gtest xml output finished + [==========] 1 test from 1 test case ran. (0 ms total) + [ PASSED ] 1 test. + ``` diff --git a/zh-cn/device-dev/quick-start/quickstart-standard-docker-environment.md b/zh-cn/device-dev/quick-start/quickstart-standard-docker-environment.md index 7169920a1984a3e9ee1d9b85f397ec6d6e5f6efa..3addc9ee979d31d35359ffebe815f61df30dc817 100644 --- a/zh-cn/device-dev/quick-start/quickstart-standard-docker-environment.md +++ b/zh-cn/device-dev/quick-start/quickstart-standard-docker-environment.md @@ -44,6 +44,7 @@ OpenHarmony标准系统为开发者提供的Docker环境已经将对应的编译 repo init -u git@gitee.com:openharmony/manifest.git -b master --no-repo-verify repo sync -c repo forall -c 'git lfs pull' +bash build/prebuilts_download.sh ``` 方式二：通过repo + https 下载。 @@ -52,6 +53,7 @@ repo forall -c 'git lfs pull' repo init -u https://gitee.com/openharmony/manifest.git -b master --no-repo-verify repo sync -c repo forall -c 'git lfs pull' +bash build/prebuilts_download.sh ``` ## 获取Docker环境 @@ -61,13 +63,13 @@ repo forall -c 'git lfs pull' 1. 获取Docker镜像。 ``` - docker pull swr.cn-south-1.myhuaweicloud.com/openharmony-docker/openharmony-docker-standard:0.0.3 + docker pull swr.cn-south-1.myhuaweicloud.com/openharmony-docker/openharmony-docker-standard:0.0.4 ``` 2. 进入OpenHarmony代码根目录执行如下命令，从而进入Docker构建环境。 ``` - docker run -it -v $(pwd):/home/openharmony swr.cn-south-1.myhuaweicloud.com/openharmony-docker/openharmony-docker-standard:0.0.3 + docker run -it -v $(pwd):/home/openharmony swr.cn-south-1.myhuaweicloud.com/openharmony-docker/openharmony-docker-standard:0.0.4 ``` @@ -89,29 +91,23 @@ repo forall -c 'git lfs pull' 3. 进入OpenHarmony代码根目录执行如下命令，从而进入Docker构建环境。 ``` - docker run -it -v $(pwd):/home/openharmony openharmony-docker-standard:0.0.3 + docker run -it -v $(pwd):/home/openharmony openharmony-docker-standard:0.0.4 ``` ## 编译 -1. 在源码的根目录执行预处理脚本。 +1. 通过如下编译脚本启动标准系统类设备（参考内存≥128MB）的编译。 - ``` - ../scripts/prepare.sh - ``` - -2. 通过如下编译脚本启动标准系统类设备（参考内存≥128MB）的编译。 - - ``` - ./build.sh --product-name {product_name} - ``` + ``` + ./build.sh --product-name {product_name} + ``` - \{product\_name\}为当前版本支持的平台，比如：Hi3516DV300 + \{product\_name\}为当前版本支持的平台，比如：Hi3516DV300 - 编译所生成的文件都归档在out/ohos-arm-release/目录下，结果镜像输出在 out/ohos-arm-release/packages/phone/images/ 目录下。 + 编译所生成的文件都归档在out/ohos-arm-release/目录下，结果镜像输出在 out/ohos-arm-release/packages/phone/images/ 目录下。 -3. 编译源码完成，请进行镜像烧录，具体请参见[镜像烧录](quickstart-standard-burn.md)。 +2. 编译源码完成，请进行镜像烧录，具体请参见[镜像烧录](quickstart-standard-burn.md)。 >![](../public_sys-resources/icon-note.gif) **说明：** >退出Docker执行exit命令即可。 diff --git a/zh-cn/device-dev/quick-start/quickstart-standard-running.md b/zh-cn/device-dev/quick-start/quickstart-standard-running.md index 22c78213f7af44e3ef451dc84b4ddb5f8c97f1eb..674aef0332696ae0b2ac6da2ef3d2fd9cc863a8d 100644 --- a/zh-cn/device-dev/quick-start/quickstart-standard-running.md +++ b/zh-cn/device-dev/quick-start/quickstart-standard-running.md @@ -1,6 +1,9 @@ # 镜像运行 -- [\#ZH-CN\_TOPIC\_0000001142160948/section153991115191314](#section153991115191314) +- [镜像运行](#section153991115191314) +- [下一步](#section5600113114323) + +## 镜像运行 烧录完成后通过以下步骤运行系统： @@ -44,3 +47,5 @@ ![](figure/start-the-system.png) +## 下一步 +恭喜！您已经完成了OpenHarmony标准系统的快速入门，接下来可[开发一个小示例](../guide/device-clock-guide.md)，进一步熟悉OpenHarmony的开发。 \ No newline at end of file diff --git a/zh-cn/device-dev/subsystems/Readme-CN.md b/zh-cn/device-dev/subsystems/Readme-CN.md index fbecac938668c28197c9c762863df819974e4a98..074ff034cb4564739bdc1d9582acf3cb940f4dbc 100755 --- a/zh-cn/device-dev/subsystems/Readme-CN.md +++ b/zh-cn/device-dev/subsystems/Readme-CN.md @@ -39,10 +39,10 @@ - [唤醒词识别SDK的开发示例](subsys-aiframework-demo-sdk.md) - [唤醒词识别插件的开发示例](subsys-aiframework-demo-plugin.md) - [唤醒词识别配置文件的开发示例](subsys-aiframework-demo-conf.md) -- [Sensor服务](subsys-densor.md) - - [Sensor服务子系概述](subsys-densor-overview.md) - - [Sensor服务子系使用指导](subsys-densor-guide.md) - - [Sensor服务子系使用实例](subsys-densor-demo.md) +- [Sensor服务](subsys-sensor.md) + - [Sensor服务子系概述](subsys-sensor-overview.md) + - [Sensor服务子系使用指导](subsys-sensor-guide.md) + - [Sensor服务子系使用实例](subsys-sensor-demo.md) - [用户程序框架](subsys-application-framework.md) - [概述](subsys-application-framework-overview.md) - [搭建环境](subsys-application-framework-envbuild.md) diff --git a/zh-cn/device-dev/subsystems/subsys-build-mini-lite.md b/zh-cn/device-dev/subsystems/subsys-build-mini-lite.md index 858b9424b862f5442361b9ef7c3dec524dccf02f..fea8623f14cd26554d9f26ae6a46e2bad2d1d2c3 100644 --- a/zh-cn/device-dev/subsystems/subsys-build-mini-lite.md +++ b/zh-cn/device-dev/subsystems/subsys-build-mini-lite.md @@ -580,7 +580,7 @@ optional arguments: 3. 将组件配置到产品。 - 产品的配置文件config.json位于位于vendor/company/product/下，产品配置文件需包含产品名称、OpenHarmony版本号、device厂商、开发板、内核类型、内核版本号，以及配置的子系统和组件。以将hello\_world组件加入产品配置文件my\_product.json中为例，加入hello\_wolrd对象： + 产品的配置文件config.json位于vendor/company/product/下，产品配置文件需包含产品名称、OpenHarmony版本号、device厂商、开发板、内核类型、内核版本号，以及配置的子系统和组件。以将hello\_world组件加入产品配置文件my\_product.json中为例，加入hello\_wolrd对象： ``` { diff --git a/zh-cn/device-dev/subsystems/subsys-densor.md b/zh-cn/device-dev/subsystems/subsys-densor.md deleted file mode 100644 index 2c5ea0dbbeeab7689d3120089e1f91e994cac8bb..0000000000000000000000000000000000000000 --- a/zh-cn/device-dev/subsystems/subsys-densor.md +++ /dev/null @@ -1,9 +0,0 @@ -# Sensor服务 - -- **[Sensor服务子系概述](subsys-densor-overview.md)** - -- **[Sensor服务子系使用指导](subsys-densor-guide.md)** - -- **[Sensor服务子系使用实例](subsys-densor-demo.md)** - - diff --git a/zh-cn/device-dev/subsystems/subsys-densor-demo.md b/zh-cn/device-dev/subsystems/subsys-sensor-demo.md similarity index 100% rename from zh-cn/device-dev/subsystems/subsys-densor-demo.md rename to zh-cn/device-dev/subsystems/subsys-sensor-demo.md diff --git a/zh-cn/device-dev/subsystems/subsys-densor-guide.md b/zh-cn/device-dev/subsystems/subsys-sensor-guide.md similarity index 100% rename from zh-cn/device-dev/subsystems/subsys-densor-guide.md rename to zh-cn/device-dev/subsystems/subsys-sensor-guide.md diff --git a/zh-cn/device-dev/subsystems/subsys-densor-overview.md b/zh-cn/device-dev/subsystems/subsys-sensor-overview.md similarity index 100% rename from zh-cn/device-dev/subsystems/subsys-densor-overview.md rename to zh-cn/device-dev/subsystems/subsys-sensor-overview.md diff --git a/zh-cn/device-dev/subsystems/subsys-sensor.md b/zh-cn/device-dev/subsystems/subsys-sensor.md new file mode 100644 index 0000000000000000000000000000000000000000..415eec2bde7a96ccb8ee88e7c27d41872654b843 --- /dev/null +++ b/zh-cn/device-dev/subsystems/subsys-sensor.md @@ -0,0 +1,9 @@ +# Sensor服务 + +- **[Sensor服务子系概述](subsys-sensor-overview.md)** + +- **[Sensor服务子系使用指导](subsys-sensor-guide.md)** + +- **[Sensor服务子系使用实例](subsys-sensor-demo.md)** + + diff --git a/zh-cn/device-dev/subsystems/subsys-testguide-envbuild.md b/zh-cn/device-dev/subsystems/subsys-testguide-envbuild.md new file mode 100644 index 0000000000000000000000000000000000000000..338ba3138f9604e7c5012a7b5c752211099b475a --- /dev/null +++ b/zh-cn/device-dev/subsystems/subsys-testguide-envbuild.md @@ -0,0 +1,83 @@ + + +# 环境配置 +## 测试框架基础环境依赖 + +|环境依赖|操作系统|Linux系统扩展组件|python|python插件|NFS Server|HDC| +|------------|------------|------------|------------|------------|------------|------------| +|版本型号|Ubuntu18.04及以上|libreadline-dev|3.7.5版本及以上|pyserial 3.3及以上、paramiko2.7.1及以上、setuptools40.8.0及以上、rsa4.0及以上|haneWIN NFS Server 1.2.50及以上或者 NFSSv4及以上| 1.1.0版本及以上 | +|详细说明|代码编译环境|命令行读取插件|测试框架语言 |pyserial：支持python的串口通信；paramiko：支持python使用SSH协议；setuptools：支持python方便创建和分发python包；rsa：支持python rsa加密 |支持设备通过串口连接| 支持设备通过HDC连接 | + +## 安装流程 +1. 安装Linux扩展组件readline，安装命令如下： + ``` + sudo apt-get install libreadline-dev + ``` + 安装成功提示如下： + ``` + Reading package lists... Done + Building dependency tree + Reading state information... Done + libreadline-dev is already the newest version (7.0-3). + 0 upgraded, 0 newly installed, 0 to remove and 11 not upgraded. + ``` +2. 安装setuptools插件，安装命令如下： + ``` + pip3 install setuptools + ``` + 安装成功提示如下： + ``` + Requirement already satisfied: setuptools in d:\programs\python37\lib\site-packages (41.2.0) + ``` +3. 安装paramiko插件，安装命令如下： + ``` + pip3 install paramiko + ``` + 安装成功提示如下： + ``` + Installing collected packages: pycparser, cffi, pynacl, bcrypt, cryptography, paramiko + Successfully installed bcrypt-3.2.0 cffi-1.14.4 cryptography-3.3.1 paramiko-2.7.2 pycparser-2.20 pynacl-1.4.0 + ``` +4. 安装python的rsa插件，安装命令如下： + ``` + pip3 install rsa + ``` + 安装成功提示如下： + ``` + Installing collected packages: pyasn1, rsa + Successfully installed pyasn1-0.4.8 rsa-4.7 + ``` +5. 安装串口插件pyserial，安装命令如下： + ``` + pip3 install pyserial + ``` + 安装成功提示如下： + ``` + Requirement already satisfied: pyserial in d:\programs\python37\lib\site-packages\pyserial-3.4-py3.7.egg (3.4) + ``` +6. 如果设备仅支持串口输出测试结果，则需要安装NFS Server + - Windows环境下安装，例如安装haneWIN NFS Server1.2.50。 + - Linux环境下安装，安装命令如下： + ``` + sudo apt install nfs-kernel-server + ``` + 安装成功提示如下： + ``` + Reading package lists... Done + Building dependency tree + Reading state information... Done + nfs-kernel-server is already the newest version (1:1.3.4-2.1ubuntu5.3). + 0 upgraded, 0 newly installed, 0 to remove and 11 not upgraded. + ``` +7. 如果设备支持HDC连接，则需要安装HDC工具，安装流程请参考如下链接 + + https://gitee.com/openharmony/developtools_hdc_standard/blob/master/README_zh.md + +## 安装环境检查 + +| 检查项 |操作 |满足环境 | +| --- | --- | --- | +| 检查python安装成功 |命令行窗口执行命令：python --version |版本不小于3.7.5即可 | +| 检查python扩展插件安装成功 |打开test/developertest目录，执行run.bat或run.sh| 可进入提示符“>>>”界面即可 | +|检查NFS Server启动状态（被测设备仅支持串口时检测） |通过串口登录开发板，执行mount命令挂载NFS |可正常挂载文件目录即可 | +|检查HDC安装成功 |命令行窗口执行命令：hdc_std -v |版本不小于1.1.0即可 | diff --git a/zh-cn/device-dev/subsystems/subsys-testguide-test.md b/zh-cn/device-dev/subsystems/subsys-testguide-test.md index 1797e29f6a3ef77e96481d8b862f553815555593..8763e16cd2967449d13354591db1d6436798e63a 100644 --- a/zh-cn/device-dev/subsystems/subsys-testguide-test.md +++ b/zh-cn/device-dev/subsystems/subsys-testguide-test.md @@ -1,282 +1,80 @@ -# 测试用例开发指导 - -- [概述](#section12403172115920) - - [基本概念](#section53632272090) - - [运作机制](#section2394431106) - -- [约束与限制](#section2029921310472) -- [搭建环境](#section175012297491) - - [环境要求](#section935055691014) - - [安装环境](#section6511193210111) - - [检验环境是否搭建成功](#section1899144517117) - -- [开发指导](#section16741101301210) - - [场景介绍](#section93782214124) - - [接口说明](#section54131732101218) - - [开发步骤](#section53541946111218) - -- [开发实例](#section7477121918136) -- [测试平台使用](#section76401945124810) -- [包结构说明](#section1875515364133) - -## 概述 - -### 基本概念 - -测试子系统提供基于python开发的一键式的开发者自测试平台，支持跨平台使用以及三方测试框架拓展，主要包括测试用例编译、测试用例管理、测试用例调度分发、测试用例执行、测试结果收集、测试报告生成、测试用例模板、测试环境管理等模块。 - -在测试子系统开发前，开发者应先了解以下概念： - -- 测试用例编译 - - 支持将测试用例源代码编译成可在被测设备侧执行的二进制文件。 - -- 测试用例调度分发 - - 支持将测试用例通过网口通道或者串口通道分发到不同的被测设备上，并且为每一个测试用例分配特定的测试用例执行器。 - -- 测试用例执行器 - - 负责测试用例的预处理，用例执行，结果记录等执行逻辑。 - -- 测试用例模板 - - 定义了测试用例以及用例编译配置GN文件的统一格式。 - -- 测试平台kit - - 测试平台运行过程中公共方法，如提供测试用例目录向被测设备挂载文件系统，测试用例推送到被测设备，或者从被测设备获取测试结果等操作。 - -- 测试报告生成 - - 定义开发者自测试报告模板，生成web测试报告。 - -- 测试环境管理 - - 支持通过USB、串口等方式管理被测设备，功能包括设备发现，设备状态查询等。 - - -### 运作机制 - -- 测试平台架构图如下： - -**图 1** 测试平台架构 -![](figure/测试平台架构.png "测试平台架构") - -- 测试平台运行时序图如下： - -**图 2** 测试平台运行时序 -![](figure/测试平台运行时序.png "测试平台运行时序") - -- 测试平台运行原理 - -测试平台通过shell脚本启动，以命令行方式支持一系列的测试指令执行，通过命令行输出测试结果。 - -## 约束与限制 - -- 功能使用范围：开发自测试平台仅支持代码级的测试用例开发和验证，如单元测试，模块测试。 -- 规格限制：当前测试框架的适用范围仅支持白盒测试。 -- 操作限制：一台测试设备上仅支持启动单个测试平台。 - -## 搭建环境 - -### 环境要求 - -**表 1** **环境要求** - - - - - - - - - - - - - - - - -

项目

-

测试设备

-

被测设备

-

硬件

-
  • 内存：8G及以上
  • 硬盘：100G及以上
  • 硬件架构：X86或ARM64
-
  • Hi3516 DV300开发板
  • Hi3518 EV300开发板
-

软件

-
  • 操作系统：Windows 10 64位 或 Ubuntu 18.04

    系统组件（Linux）： libreadline-dev

    -
  • Python：3.7.5及以上
  • Python插件：pyserial3.3及以上、paramiko2.7.1及以上、setuptools40.8.0及以上，rsa4.0及以上
  • NFS Server：haneWIN NFS Server1.2.50及以上或者 NFSv4及以上
-
  • 系统软件：版本不低于OpenHarmony 1.0
  • 内核类型：LiteOS-A或者Linux
-
- -### 安装环境 - -1. 如测试环境为Linux，需要安装系统组件readline，命令如下： - - ``` - sudo apt-get install libreadline-dev - ``` - - 安装成功提示如下： - - ``` - Reading package lists... Done - Building dependency tree - Reading state information... Done - libreadline-dev is already the newest version (7.0-3). - 0 upgraded, 0 newly installed, 0 to remove and 11 not upgraded. - ``` - -2. 安装Python扩展组件setuptools、（rsa、paramiko、以及pyserial，设备仅支持串口时安装），命令如下: - - 1、安装setuptools，安装命令如下： - - ``` - pip install setuptools - ``` - - 安装成功提示如下： - - ``` - Requirement already satisfied: setuptools in d:\programs\python37\lib\site-packages (41.2.0) - ``` - - 2、安装rsa，安装命令如下： - - ``` - pip install rsa - ``` - - 安装成功提示如下： - - ``` - Installing collected packages: pyasn1, rsa - Successfully installed pyasn1-0.4.8 rsa-4.7 - ``` - - 3、安装Paramiko，安装命令如下： - - ``` - pip install paramiko - ``` - - 安装成功提示如下： - - ``` - Installing collected packages: pycparser, cffi, pynacl, bcrypt, cryptography, paramiko - Successfully installed bcrypt-3.2.0 cffi-1.14.4 cryptography-3.3.1 paramiko-2.7.2 pycparser-2.20 pynacl-1.4.0 - ``` - - 4、安装pyserial（被测设备仅支持串口时安装），安装命令如下： - - ``` - pip install pyserial - ``` - - 安装成功提示如下： - - ``` - Requirement already satisfied: pyserial in d:\programs\python37\lib\site-packages\pyserial-3.4-py3.7.egg (3.4) - ``` - -3. 安装NFS server（被测设备仅支持串口时安装）。 - - **Windows环境安装** - - 下载并安装haneWIN NFS Server1.2.50，地址：https://www.hanewin.net/nfs-e.htm - - **Linux环境下安装** - - ``` - sudo apt install nfs-kernel-server - ``` - - 所有环境配置安装完成，即可在IDE中进行测试平台代码开发调试，推荐的IDE为 DevEco Studio。 - - -### 检验环境是否搭建成功 - -**表 2** **检验环境** - - - - - - - - - - - - - - - - - - - - -

检查项

-

操作

-

满足条件

-

检查python安装与否，版本是否满足要求。

-

命令行窗口执行命令：python --version。

-

版本不小于3.7.5即可。

-

检查python扩展插件安装与否。

-

打开test/xdevice目录，执行run.bat或run.sh。

-

可进入提示符“>>>”界面即可。

-

检查NFS Server启动状态（被测设备仅支持串口时检测）。

-

通过串口登录开发板，执行mount命令挂载NFS。

-

可正常挂载文件目录即可。

-
- -## 开发指导 - -### 场景介绍 - -针对开发的业务代码进行白盒测试验证。 - -### 接口说明 - -测试框架集成了开源的单元测试框架，并对测试用例的宏定义做了扩展，具体框架说明详见开源官方文档。 - -**表 3** 测试框架扩展宏定义说明 - - - - - - - - - - - - - - - - -

宏定义

-

描述

-

HWTEST

-

测试用例执行不依赖Setup&Teardown。HWTEST对TEST增加了“用例级别”参数“TestSize.Level1”，例如HWTEST(CalculatorAddTest, TestPoint_001, TestSize.Level1)。

-

HWTEST_F

-

测试用例（不带参数）执行依赖Setup&Teardown。HWTEST_F对TEST_F增加了“用例级别”参数“ TestSize.Level1”，例如HWTEST_F(CalculatorAddTest, TestPoint_001, TestSize.Level1)。

-

HWTEST_P

-

测试用例（带参数）执行依赖Setup&Teardown。HWTEST_P对TEST_P增加了“用例级别”参数“ TestSize.Level1”，例如HWTEST_P(CalculatorAddTest, TestPoint_001, TestSize.Level1)。

-
- -### 开发步骤 - -1. 按照开发者测试用例目录规划定义测试套文件，需要继承testing::Test类，命名以被测特性+Test命名，示例代码路径：test/developertest/examples/lite/cxx\_demo/test/unittest/common/calc\_subtraction\_test.cpp - +# 测试子系统 +OpenHarmony为开发者提供了一套全面的自测试框架，开发者可根据测试需求开发相关测试用例，开发阶段提前发现缺陷，大幅提高代码质量。 + +本文从基础环境构建，用例开发，编译以及执行等方面介绍OpenHarmony测试框架如何运行和使用。 +## 基础环境构建 +测试框架依赖于python运行环境，在使用测试框架之前可参阅以下方式进行配置。 + - [环境配置](subsys-testguide-envbuild.md) + - [源码获取](../get-code/sourcecode-acquire.md) + + +## 测试框架目录简介 +以下是测试框架的目录层级架构，在使用测试框架过程中可在相应目录查找对应组件。 +``` +test # 测试子系统 +├── developertest # 开发者测试组件 +│ ├── aw # 测试框架的静态库 +│ ├── config # 测试框架配置 +│ │ │ ... +│ │ └── user_config.xml # 用户使用配置 +│ ├── examples # 测试用例示例 +│ ├── src # 测试框架源码 +│ ├── third_party # 测试框架依赖第三方组件适配 +│ ├── reports # 测试结果报告 +│ ├── BUILD.gn # 测试框架编译入口 +│ ├── start.bat # 开发者测试入口（Windows） +│ └── start.sh # 开发者测试入口（Linux） +└── xdevice # 测试框架依赖组件 +``` +## 测试用例编写 +### 测试用例目录规划 +使用测试框架过程中，可根据以下层级关系规划测试用例目录。 +``` +subsystem # 子系统 +├── partA # 部件A +│ ├── moduleA # 模块A +│ │ ├── include +│ │ ├── src # 业务代码 +│ │ └── test # 测试目录 +│ │ ├── unittest # 单元测试 +│ │ │ ├── common # 公共用例 +│ │ │ │ ├── BUILD.gn # 测试用例编译配置 +│ │ │ │ ├── testA_test.cpp # 单元测试用例源码 +│ │ │ ├── phone # 手机形态用例 +│ │ │ ├── ivi # 车机形态用例 +│ │ │ └── liteos-a # ipcamera使用liteos内核的用例 +│ │ └── resource # 依赖资源 +│ │ └── ohos_test.xml +│ ├── moduleB # 模块B +│ ├── test +│ │ └── moduletest # 模块测试 +│ │ ├── common +│ │ ├── phone +│ │ ├── ivi +│ │ └── liteos-a +│ │ ... +│ └── ohos_build # 编译入口配置 +... +``` +> **注意：** 测试用例根据不同设备形态差异分为通用用例和非通用用例，建议将通用用例存放在common目录下，非通用用例存放在相应设备形态目录下。 + +### 测试用例编写 +本测试框架支持多种语言用例编写，针对不同语言提供了不同的模板以供编写参考。 + +**C++参考示例** + +- 用例源文件命名规范 + + 测试用例源文件名称和测试套内容保持一致，文件命名采用全小写+下划线方式命名，以test结尾，具体格式为：[功能]_[子功能]_test，子功能支持向下细分。 +示例： + ``` + calculator_sub_test.cpp + ``` + +- 用例示例 ``` /* - * Copyright (c) 2020 OpenHarmony. + * Copyright (c) 2021 XXXX Device Co., Ltd. * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at @@ -289,694 +87,776 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + + #include "calculator.h" #include - using namespace std; using namespace testing::ext; - class CalcSubtractionTest : public testing::Test { + class CalculatorSubTest : public testing::Test { public: static void SetUpTestCase(void); static void TearDownTestCase(void); void SetUp(); void TearDown(); }; - ``` - - >![](../public_sys-resources/icon-note.gif) **说明：** - >测试用例规范 - >- 命名规范 - > 测试用例源文件名称和测试套内容保持一致，测试套与用例之间关系1:N，测试套与测试源文件之间关系1:1，每个源文件全局唯一，格式：\[特性\]\_\[功能\]\_\[子功能1\]\_\[子功能1.1\]，子功能支持向下细分。 - > 文件命名采用全小写+下划线方式命名，以test结尾，如demo用例：developertest/examples/lite/cxx\_demo - >- 测试用例编码规范 - > 开发者测试用例原则上与特性代码编码规范保持一致，另外需要添加必要的用例描述信息，详见[•自测试用例模板](#li2069415903917)。 - >- 测试用例编译配置规范 - > 测试用例采用GN方式编译，配置遵循本开源项目的[编译指导](subsys-build-mini-lite.md)。 - >- 测试用例模板 - > 详见测试demo用例：developertest/examples/lite/cxx\_demo/test/unittest/common/calc\_subtraction\_test.cpp - -2. 实现测试套执行过程需要的预处理操作和后处理操作，即实现SetUp和TearDown方法。 - - ``` - void CalcSubtractionTest::SetUpTestCase(void) + + void CalculatorSubTest::SetUpTestCase(void) { - // step 1: input testsuite setup step + // input testsuit setup step，setup invoked before all testcases } - void CalcSubtractionTest::TearDownTestCase(void) + void CalculatorSubTest::TearDownTestCase(void) { - // step 2: input testsuite teardown step + // input testsuit teardown step，teardown invoked after all testcases } - void CalcSubtractionTest::SetUp(void) + void CalculatorSubTest::SetUp(void) { - // step 3: input testcase setup step + // input testcase setup step，setup invoked before each testcases } - void CalcSubtractionTest::TearDown(void) + void CalculatorSubTest::TearDown(void) { - // step 4: input testcase teardown step + // input testcase teardown step，teardown invoked after each testcases } - ``` - -3. 针对被测对象的特性编写测试用例，以使用HWTEST\_F为例说明。 - - ``` + /** * @tc.name: integer_sub_001 - * @tc.desc: Test Calculator + * @tc.desc: Verify the sub function. * @tc.type: FUNC - * @tc.require: AR00000000 SR00000000 + * @tc.require: Issue Number */ - HWTEST_F(CalcSubtractionTest, integer_sub_001, TestSize.Level1) + HWTEST_F(CalculatorSubTest, integer_sub_001, TestSize.Level1) { - EXPECT_EQ(0, Subtraction(1, 0)); + // step 1:调用函数获取结果 + int actual = Sub(4，0)； + + // Step 2:使用断言比较预期与实际结果 + EXPECT_EQ(4, actual); } ``` + 详细内容介绍： + 1. 添加测试用例文件头注释信息 + ``` + /* + * Copyright (c) 2021 XXXX Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + ``` + 2. 引用测试框架头文件和命名空间 + ``` + #include + + using namespace testing::ext; + ``` + 3. 添加被测试类的头文件 + ``` + #include "calculator.h" + ``` + 4. 定义测试套（测试类） + ``` + class CalculatorSubTest : public testing::Test { + public: + static void SetUpTestCase(void); + static void TearDownTestCase(void); + void SetUp(); + void TearDown(); + }; + + void CalculatorSubTest::SetUpTestCase(void) + { + // input testsuit setup step，setup invoked before all testcases + } + + void CalculatorSubTest::TearDownTestCase(void) + { + // input testsuit teardown step，teardown invoked after all testcases + } + + void CalculatorSubTest::SetUp(void) + { + // input testcase setup step，setup invoked before each testcases + } + + void CalculatorSubTest::TearDown(void) + { + // input testcase teardown step，teardown invoked after each testcases + } + ``` + > **注意：** 在定义测试套时，测试套名称应与编译目标保持一致，采用大驼峰风格。 + + 5. 测试用例实现，包含用例注释和逻辑实现 + ``` + /** + * @tc.name: integer_sub_001 + * @tc.desc: Verify the sub function. + * @tc.type: FUNC + * @tc.require: Issue Number + */ + HWTEST_F(CalculatorSubTest, integer_sub_001, TestSize.Level1) + { + //step 1:调用函数获取结果 + int actual = Sub(4，0)； + + //Step 2:使用断言比较预期与实际结果 + EXPECT_EQ(4, actual); + } + ``` + 在编写用例时，我们提供了三种用例模板供您选择。 + + | 类型 | 描述 | + | ------------| ------------| + | HWTEST(A,B,C)| 用例执行不依赖Setup&Teardown时，可选取| + | HWTEST_F(A,B,C)| 用例执行(不含参数)依赖于Setup&Teardown时，可选取| + | HWTEST_P(A,B,C)| 用例执行(含参数)依赖于Set&Teardown时，可选取| + + 其中，参数A，B，C的含义如下： + - 参数A为测试套名。 + - 参数B为测试用例名，其命名必须遵循[功能点]_[编号]的格式，编号为3位数字，从001开始。 + - 参数C为测试用例等级，具体分为门禁level0 以及非门禁level1-level4共五个等级，其中非门禁level1-level4等级的具体选取规则为：测试用例功能越重要，level等级越低。 + + **注意：** + - 测试用例的预期结果必须有对应的断言。 + - 测试用例必须填写用例等级。 + - 测试体建议按照模板分步实现。 + - 用例描述信息按照标准格式@tc.xxx value书写，注释信息必须包含用例名称，用例类型，需求编号四项。其中用例测试类型@tc.type参数的选取，可参考下表。 + + | 测试类型名称|功能测试|性能测试|可靠性测试|安全测试|模糊测试| + | ------------|------------|------------|------------|------------|------------| + | 类型编码|FUNC|PERF|RELI|SECU|FUZZ| + + +**JavaScript参考示例** - >![](../public_sys-resources/icon-note.gif) **说明：** - >- @tc.name：用例名称，对测试目的简要描述。 - >- @tc.desc：描述用例详细描述，包括测试目的、测试步骤、期望结果等。 - >- @tc.type：测试属性分类（FUNC、PERF、SECU、RELI）。 - >- @tc.require：需求编号或者issue编号，用来将修改与用例关联。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

序号

-

测试类型名称

-

缩写

-

测试类型描述

-

1

-

功能测试(functionality)

-

FUNC

-

验证软件各个功能满足功能设计与规格。

-

2

-

性能测试(performance)

-

PERF

-

验证软件是否满足性能设计指标。包含负载测试，容量测试，压力测试等。

-

3

-

安全性测试(security)

-

SECU

-

验证软件在生命周期内符合安全需求定义和相关法规。

-

4

-

可靠性测试（reliability）

-

RELI

-

在规定的条件下，在规定的时间内，软件不引起系统失效的概率，这里也包含稳定性。

-
- -4. 编写用例编译GN文件，其中包括定义用例编译目标，添加编译配置依赖，源文件等，举例说明： - - 示例文件路径：test/developertest/examples/lite/cxx\_demo/test/unittest/common/BUILD.gn）。 +- 用例源文件命名规范 + 测试用例原文件名称采用大驼峰风格，以TEST结尾，具体格式为：[功能][子功能]TEST，子功能支持向下细分。 +示例： ``` - import("//build/lite/config/test.gni") - - unittest("CalcSubTest") { - output_extension = "bin" - sources = [ - "calc_subtraction_test.cpp" - ] - include_dirs = [] - deps = [] - } + AppInfoTest.js ``` -5. 将用例编译目标添加到子系统编译配置中，保证用例随版本一起编译，举例说明： - 1. 支持hdc连接的设备，编译配置示例路径：test/developertest/examples/ohos.build。 - - ``` - { - "subsystem": "subsystem_examples", - "parts": { - "subsystem_examples": { - "module_list": [ - "//test/developertest/examples/detector:detector", - ... ... - ], - "test_list": [ - "//test/developertest/examples/detector/test:unittest", - ... ... - ] - }, - ... ... - } - ``` - - 2. 仅支持串口的设备，编译配置示例路径：test/developertest/examples/lite/BUILD.gn。 - - ``` - import("//build/lite/config/test.gni") +- 用例示例 + ``` + /* + * Copyright (C) 2021 XXXX Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + import app from '@system.app' + + import {describe, beforeAll, beforeEach, afterEach, afterAll, it, expect} from 'deccjsunit/index' + + describe("AppInfoTest", function () { + beforeAll(function() { + // input testsuit setup step，setup invoked before all testcases + console.info('beforeAll caled') + }) + + afterAll(function() { + // input testsuit teardown step，teardown invoked after all testcases + console.info('afterAll caled') + }) - subsystem_test("test") { - test_components = [] - if(ohos_kernel_type == "liteos_riscv") { - features += [ - ] - }else if(ohos_kernel_type == "liteos_a") { - test_components += [ - "//test/developertest/examples/lite/cxx_demo/test/unittest/common:CalcSubTest" - ] - } - } - ``` + beforeEach(function() { + // input testcase setup step，setup invoked before each testcases + console.info('beforeEach caled') + }) + + afterEach(function() { + // input testcase teardown step，teardown invoked after each testcases + console.info('afterEach caled') + }) + + /* + * @tc.name:appInfoTest001 + * @tc.desc:verify app info is not null + * @tc.type: FUNC + * @tc.require: Issue Number + */ + it("appInfoTest001", 0, function () { + //step 1:调用函数获取结果 + var info = app.getInfo() + + //Step 2:使用断言比较预期与实际结果 + expect(info != null).assertEqual(true) + }) + }) + ``` + 详细内容介绍： + 1. 添加测试用例文件头注释信息 + ``` + /* + * Copyright (C) 2021 XXXX Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + ``` + 2. 导入被测api和jsunit测试库 + ``` + import app from '@system.app' + + import {describe, beforeAll, beforeEach, afterEach, afterAll, it, expect} from 'deccjsunit/index' + ``` + 3. 定义测试套（测试类） + ``` + describe("AppInfoTest", function () { + beforeAll(function() { + // input testsuit setup step，setup invoked before all testcases + console.info('beforeAll caled') + }) + + afterAll(function() { + // input testsuit teardown step，teardown invoked after all testcases + console.info('afterAll caled') + }) + + beforeEach(function() { + // input testcase setup step，setup invoked before each testcases + console.info('beforeEach caled') + }) + + afterEach(function() { + // input testcase teardown step，teardown invoked after each testcases + console.info('afterEach caled') + }) + ``` + 4. 测试用例实现 + ``` + /* + * @tc.name:appInfoTest001 + * @tc.desc:verify app info is not null + * @tc.type: FUNC + * @tc.require: Issue Number + */ + it("appInfoTest001", 0, function () { + //step 1:调用函数获取结果 + var info = app.getInfo() + + //Step 2:使用断言比较预期与实际结果 + expect(info != null).assertEqual(true) + }) + ``` + +### 测试用例编译文件编写 +根据测试用例目录规划，当执行某一用例时，测试框架会根据编译文件逐层查找，最终找到所需用例进行编译。下面通过不同示例来讲解gn文件如何编写。 + +#### 测试用例编译配置文件 +针对不同语言，下面提供不同的编译模板以供参考。 + +- **C++用例编译配置示例** + ``` + # Copyright (c) 2021 XXXX Device Co., Ltd. + + import("//build/test.gni") + + module_output_path = "subsystem_examples/calculator" + + config("module_private_config") { + visibility = [ ":*" ] + + include_dirs = [ "../../../include" ] + } + + ohos_unittest("CalculatorSubTest") { + module_out_path = module_output_path + + sources = [ + "../../../include/calculator.h", + "../../../src/calculator.cpp", + ] + + sources += [ "calculator_sub_test.cpp" ] + + configs = [ ":module_private_config" ] + + deps = [ "//third_party/googletest:gtest_main" ] + } + + group("unittest") { + testonly = true + deps = [":CalculatorSubTest"] + } + ``` + 详细内容如下： + + 1. 添加文件头注释信息 + ``` + # Copyright (c) 2021 XXXX Device Co., Ltd. + ``` + 2. 导入编译模板文件 + ``` + import("//build/test.gni") + ``` + 3. 指定文件输出路径 + ``` + module_output_path = "subsystem_examples/calculator" + ``` + > **说明：** 此处输出路径为部件/模块名。 + + 4. 配置依赖包含目录 + + ``` + config("module_private_config") { + visibility = [ ":*" ] + + include_dirs = [ "../../../include" ] + } + ``` + > **说明：** 一般在此处对相关配置进行设置，在测试用例编译脚本中可直接引用。 + + 5. 指定测试用例编译目标输出的文件名称 + + ``` + ohos_unittest("CalculatorSubTest") { + } + ``` + 6. 编写具体的测试用例编译脚本（添加需要参与编译的源文件、配置和依赖） + ``` + ohos_unittest("CalculatorSubTest") { + module_out_path = module_output_path + sources = [ + "../../../include/calculator.h", + "../../../src/calculator.cpp", + "../../../test/calculator_sub_test.cpp" + ] + sources += [ "calculator_sub_test.cpp" ] + configs = [ ":module_private_config" ] + deps = [ "//third_party/googletest:gtest_main" ] + } + ``` + + > **说明：根据测试类型的不同，在具体编写过程中可选择不同的测试类型：** + > - ohos_unittest：单元测试 + > - ohos_moduletest：模块测试 + > - ohos_systemtest：系统测试 + > - ohos_performancetest：性能测试 + > - ohos_securitytest：安全测试 + > - ohos_reliabilitytest：可靠性测试 + > - ohos_distributedtest：分布式测试 + + 7. 对目标测试用例文件进行条件分组 + + ``` + group("unittest") { + testonly = true + deps = [":CalculatorSubTest"] + } + ``` + > **说明：** 进行条件分组的目的在于执行用例时可以选择性的执行某一种特定类型的用例。 + +- **JavaScript用例编译配置示例** -6. 编写测试用例资源配置，当测试用例需要使用静态测试资源文件时使用该配置。 - 1. 在部件或者模块的test目录下创建resource目录。 - 2. 在resource目录下创建形态目录，如phone。 - 3. 在设备形态目录下创建一个以模块名命名的文件夹，如testmodule。 - 4. 在模块目录下创建一个ohos\_test.xml文件，文件内容格式如下: + ``` + # Copyright (C) 2021 XXXX Device Co., Ltd. + + import("//build/test.gni") + + module_output_path = "subsystem_examples/app_info" + + ohos_js_unittest("GetAppInfoJsTest") { + module_out_path = module_output_path + + hap_profile = "./config.json" + certificate_profile = "//test/developertest/signature/openharmony_sx.p7b" + } + + group("unittest") { + testonly = true + deps = [ ":GetAppInfoJsTest" ] + } + ``` - ``` - - - - - - - - ``` + 详细内容如下： - 5. 在测试用例的编译配置文件中定义resource\_config\_file，用来指定对应的资源文件ohos\_test.xml。 + 1. 添加文件头注释信息 + + ``` + # Copyright (C) 2021 XXXX Device Co., Ltd. + ``` + 2. 导入编译模板文件 + + ``` + import("//build/test.gni") + ``` + 3. 指定文件输出路径 + + ``` + module_output_path = "subsystem_examples/app_info" + ``` + > **说明：** 此处输出路径为部件/模块名。 + + 4. 指定测试用例编译目标输出的文件名称 + + ``` + ohos_js_unittest("GetAppInfoJsTest") { + } + ``` + > **说明：** + >- 使用模板ohos_js_unittest定义js测试套，注意与C++用例区分。 + >- js测试套编译输出文件为hap类型，hap名为此处定义的测试套名，测试套名称必须以JsTest结尾。 + + 5. 指定hap包配置文件config.json和签名文件，两个配置为必选项 + + ``` + ohos_js_unittest("GetAppInfoJsTest") { + module_out_path = module_output_path + + hap_profile = "./config.json" + certificate_profile = "//test/developertest/signature/openharmony_sx.p7b" + } + ``` + config.json为hap编译所需配置文件，需要开发者根据被测sdk版本配置“target”项，其余项可默认，具体如下所示： + + ``` + { + "app": { + "bundleName": "com.example.myapplication", + "vendor": "example", + "version": { + "code": 1, + "name": "1.0" + }, + "apiVersion": { + "compatible": 4, + "target": 5 // 根据被测sdk版本进行修改，此例为sdk5 + } + }, + "deviceConfig": {}, + "module": { + "package": "com.example.myapplication", + "name": ".MyApplication", + "deviceType": [ + "phone" + ], + "distro": { + "deliveryWithInstall": true, + "moduleName": "entry", + "moduleType": "entry" + }, + "abilities": [ + { + "skills": [ + { + "entities": [ + "entity.system.home" + ], + "actions": [ + "action.system.home" + ] + } + ], + "name": "com.example.myapplication.MainAbility", + "icon": "$media:icon", + "description": "$string:mainability_description", + "label": "MyApplication", + "type": "page", + "launchType": "standard" + } + ], + "js": [ + { + "pages": [ + "pages/index/index" + ], + "name": "default", + "window": { + "designWidth": 720, + "autoDesignWidth": false + } + } + ] + } + } + ``` + 6. 对目标测试用例文件进行条件分组 + ``` + group("unittest") { + testonly = true + deps = [ ":GetAppInfoJsTest" ] + } + ``` + > **说明：** 进行条件分组的目的在于执行用例时可以选择性的执行某一种特定类型的用例。 + +#### 编译入口配置文件ohos.build + +当完成用例编译配置文件编写后，需要进一步编写部件编译配置文件，以关联到具体的测试用例。 +``` +"partA": { + "module_list": [ + + ], + "inner_list": [ + + ], + "system_kits": [ + + ], + "test_list": [ + "//system/subsystem/partA/calculator/test:unittest" //配置模块calculator下的test + ] + } +``` +> **说明：** test_list中配置的是对应模块的测试用例。 + +### 测试用例资源配置 +测试依赖资源主要包括测试用例在执行过程中需要的图片文件，视频文件、第三方库等对外的文件资源。 + +依赖资源文件配置步骤如下： +1. 在部件或者模块的test目录下创建resource目录，存放需要的资源文件 + +2. 在resource目录下创建一个ohos_test.xml文件，文件内容格式如下: + ``` + + + + + + + + ``` +3. 在测试用例的编译配置文件中定义resource_config_file进行指引，用来指定对应的资源文件ohos_test.xml + ``` + ohos_unittest("CalculatorSubTest") { + resource_config_file = "//system/subsystem/partA/calculator/test/resource/ohos_test.xml" + } + ``` + >**说明：** + >- target_name: 测试套的名称，定义在测试目录的BUILD.gn中。preparer: 表示该测试套执行前执行的动作。 + >- src="res": 表示测试资源位于test目录下的resource目录下，src="out" 表示位于out/release/$(部件)目录下。 + +## 测试用例执行 +在执行测试用例之前，针对用例使用设备的不同，需要对相应配置进行修改，修改完成即可执行测试用例。 + +### user_config.xml配置 +``` + + + + false + + false + + true + + + + + + + + + + + + + cmd + 115200 + 8 + 1 + 1 + + + + + + + + + + + + + + + + + + +``` +>**说明：** 在执行测试用例之前，若使用HDC连接设备，用例仅需配置设备IP和端口号即可，其余信息均默认不修改。 + +### Windows环境执行 +#### 测试用例编译 + +由于Windows环境下无法实现用例编译，因此执行用例前需要在Linux环境下进行用例编译，用例编译命令： +``` +./build.sh --product-name Hi3516DV300 --build-target make_test +``` +>说明: +>- product-name：指定编译产品名称，例如Hi3516DV300。 +>- build-target：指定所需要编译的用例，make_test表示指定全部用例，实际开发中可指定特定用例。 + +编译完成后，测试用例将自动保存在out/ohos-arm-release/packages/phone/images/tests目录下。 + +#### 搭建执行环境 +1. 在Windows环境创建测试框架目录Test，并在此目录下创建testcase目录 + +2. 从Linux环境拷贝测试框架developertest和xdevice到创建的Test目录下，拷贝编译好的测试用例到testcase目录下 + >**说明：** 将测试框架及测试用例从Linux环境移植到Windows环境，以便后续执行。 + +3. 修改user_config.xml + ``` + + + false + + + + D:\Test\testcase\tests + + ``` + >**说明：** ``标签表示是否需要编译用例；``标签表示测试用例查找路径。 + +#### 执行用例 +1. 启动测试框架 + ``` + start.bat + ``` +2. 选择产品形态 + + 进入测试框架，系统会自动提示您选择产品形态，请根据实际的开发板进行选择。例如：Hi3516DV300。 + +3. 执行测试用例 + + 当选择完产品形态，可参考如下指令执行测试用例。 + ``` + run -t UT -ts CalculatorSubTest -tc interger_sub_00l + ``` + 执行命令参数说明： + ``` + -t [TESTTYPE]: 指定测试用例类型，有UT，MST，ST，PERF等。（必选参数） + -tp [TESTTYPE]: 指定部件，可独立使用。 + -tm [TESTTYPE]: 指定模块，不可独立使用，需结合-tp指定上级部件使用。 + -ts [TESTTYPE]: 指定测试套，可独立使用。 + -tc [TESTTYPE]: 指定测试用例，不可独立使用，需结合-ts指定上级测试套使用。 + -h : 帮助命令。 + ``` +### Linux环境执行 +#### 远程端口映射 +为了在Linux远程服务器以及Linux虚拟机两种环境下执行测试用例，需要对端口进行远程映射，以实现与设备的数据通路连接。具体操作如下： +1. HDC Server指令： + ``` + hdc_std kill + hdc_std -m -s 0.0.0.0:8710 + ``` + >**说明：** IP和端口号为默认值。 + +2. HDC Client指令： + ``` + hdc_std -s xx.xx.xx.xx:8710 list targets + ``` + >**说明：** 此处IP填写设备侧IP地址。 + +#### 执行用例 +1. 启动测试框架 + ``` + ./start.sh + ``` +2. 选择产品形态 + + 进入测试框架，系统会自动提示您选择产品形态，请根据实际的开发板进行选择。例如：Hi3516DV300。 + +3. 执行测试用例 + + 测试框架在执行用例时会根据指令找到所需用例，自动实现用例编译，执行过程，完成自动化测试。 + ``` + run -t UT -ts CalculatorSubTest -tc interger_sub_00l + ``` + 执行命令参数说明： + ``` + -t [TESTTYPE]: 指定测试用例类型，有UT，MST，ST，PERF等。（必选参数） + -tp [TESTTYPE]: 指定部件，可独立使用。 + -tm [TESTTYPE]: 指定模块，不可独立使用，需结合-tp指定上级部件使用。 + -ts [TESTTYPE]: 指定测试套，可独立使用。 + -tc [TESTTYPE]: 指定测试用例，不可独立使用，需结合-ts指定上级测试套使用。 + -h : 帮助命令。 + ``` + +## 测试报告日志 +当执行完测试指令，控制台会自动生成测试结果，若需要详细测试报告您可在相应的数据文档中进行查找。 + +### 测试结果 +测试结果输出根路径如下： +``` +test/developertest/reports/xxxx_xx_xx_xx_xx_xx +``` +>**说明：** 测试报告文件目录将自动生成。 + +该目录中包含以下几类结果： +| 类型 | 描述| +| ------------ | ------------ | +| result/ |测试用例格式化结果| +| log/plan_log_xxxx_xx_xx_xx_xx_xx.log | 测试用例日志 | +| summary_report.html | 测试报告汇总 | +| details_report.html | 测试报告详情 | + +### 测试框架日志 +``` +reports/platform_log_xxxx_xx_xx_xx_xx_xx.log +``` + +### 最新测试报告 +``` +reports/latest +``` - >![](../public_sys-resources/icon-note.gif) **说明：** - >如上资源文件功能：将resource目录下的test.txt文件通过hdc push命令推送到被测设备的/data/test/resource目录下。 -7. 以上步骤完成即完成测试用例编写，即可执行测试用例。 - >![](../public_sys-resources/icon-note.gif) **说明：** - >- 支持hdc连接的设备，测试用例支持单独编译。 - >- 仅支持串口连接的设备，在代码根路径下执行编译debug版本的命令，即可编译测试用例。 - > 测试用例用例的执行详见[测试平台使用](#section76401945124810)。 -## 开发实例 -测试子系统代码仓提供了完整demo用例，demo用例路径：test/developertest/examples/。以一个减法运算方法编写测试用例举例说明： -- 被测代码如下： - ``` - static int Subtraction(int a, int b) - { - return a - b; - } - ``` -- 测试用例代码如下： - ``` - /** - * @tc.name: integer_sub_002 - * @tc.desc: Verify the Subtraction function. - * @tc.type: FUNC - * @tc.require: AR00000000 SR00000000 - */ - HWTEST_F(CalcSubtractionTest, integer_sub_002, TestSize.Level1) - { - EXPECT_EQ(1, Subtraction(2, 1)); - } - ``` -## 测试平台使用 -1. （可选）安装xdevice组件。安装xdevice后，xdevice组件可以作为python的扩展包使用。 - 打开xdevice安装目录：test/xdevice，执行如下命令： - ``` - python setup.py install - ``` - 安装成功提示如下： - ``` - ... ... - Installed d:\programs\python37\lib\site-packages\xdevice-0.0.0-py3.7.egg - Processing dependencies for xdevice==0.0.0 - Searching for pyserial==3.4 - Best match: pyserial 3.4 - Processing pyserial-3.4-py3.7.egg - pyserial 3.4 is already the active version in easy-install.pth - Installing miniterm.py script to D:\Programs\Python37\Scripts - - Using d:\programs\python37\lib\site-packages\pyserial-3.4-py3.7.egg - Finished processing dependencies for xdevice==0.0.0 - ``` -2. 修改developertest/config/user\_config.xml 文件配置developertest组件。 - 1. 测试框架通用配置。 - - \[build\] \# 配置测试用例的编译参数，例如： - - ``` - - false - false - true - ... ... - - ``` - - >![](../public_sys-resources/icon-note.gif) **说明：** - >测试用例的编译参数说明如下： - >example：是否编译测试用例示例，默认false。 - >version：是否编译测试版本，默认false。 - >testcase：是否编译测试用例，默认true。 - - 2. 支持hdc连接的被测设备。 - - \[device\] \# 配置标签为usb-hdc的环境信息，测试设备的IP地址和hdc映射的端口号，例如： - - ``` - - 192.168.1.1 - 9111 - - - ``` - - 3. 仅支持串口的被测设备。 - - \[board\_info\] \# 开发板配置信息，例如： - - ``` - - hispark - taurus - ipcamera - hb build - - ``` - - >![](../public_sys-resources/icon-note.gif) **说明：** - >开发板配置信息如下： - >board\_series：开发板系列，默认hispark。 - >board\_type：开发板类型，默认taurus。 - >board\_product：目标产品，默认ipcamera。 - >build\_command：测试版本和用例的编译命令，默认hb build。 - - \[device\] \# 配置标签为ipcamera的串口信息，COM口和波特率，例如： - - ``` - - - COM1 - cmd - 115200 - 8 - 1 - 1 - - - ``` - -3. （可选）修改developertest组件配置。如果测试用例已完成编译，可以直接指定测试用例的编译输出路径，测试平台执行用例时即不会重新编译测试用例。 - - 配置文件：config/user\_config.xml - - 1. \[test\_cases\] \# 指定测试用例的输出路径，编译输出目录，例如： - - ``` - - /home/opencode/out/release/tests - - ``` - - 2. \[NFS\] \# 被测设备仅支持串口时配置，指定NFS的映射路径，host\_dir为PC侧的NFS目录，board\_dir为板侧创建的目录，例如： - - ``` - - D:\nfs - user - - ``` - -4. （可选）测试环境准备。当被测设备仅支持串口时，需要检查。 - - 系统镜像与文件系统已烧录进开发板，开发板上系统正常运行，在系统模式下，如使用shell登录时，设备提示符是“OHOS\#”。 - - 开发主机和开发板串口连接正常，网口连接正常。 - - 开发主机IP与开发板IP处在同一小网网段，相互可以ping通。 - - 开发主机侧创建空目录用于开发板通过NFS挂载测试用例，并且NFS服务启动正常。 -5. （必选）启动测试平台，执行测试用例。 - - 启动测试框架，打开test/developertest目录，执行启动脚本。 - 1. Windows环境启动测试框架，执行如下脚本： - ``` - start.bat - ``` - 2. Linux环境启动测试框架。 - ``` - ./start.sh - ``` - - 设备形态选择。 - 根据实际的开发板选择，设备形态配置：developertest/config/framework\_config.xml。 - - 执行测试指令。 - 1. 查询测试用例支持的子系统，模块，产品形态以及测试类型，使用show命令，示例如下： - ``` - usage: - show productlist Querying Supported Product Forms - show typelist Querying the Supported Test Type - show subsystemlist Querying Supported Subsystems - show modulelist Querying Supported Modules - ``` - 2. 执行测试指令，其中-t为必选，-ss和-tm为可选字段，示例如下： - - ``` - run -t ut -ss subsystem_examples -tm calculator - ``` - - 3. 参数说明：指定参数可以执行特定特性、模块对应的测试套。 - - ``` - usage: run [-h] [-p PRODUCTFORM] [-t [TESTTYPE [TESTTYPE ...]]] - [-ss SUBSYSTEM] [-tm TESTMODULE] [-ts TESTSUIT] - [-tc TESTCASE] [-tl TESTLEVEL] - - optional arguments: - -h, --help show this help message and exit - -p PRODUCTFORM, --productform PRODUCTFORM Specified product form - -t [TESTTYPE [TESTTYPE ...]], --testtype [TESTTYPE [TESTTYPE ...]] - Specify test type(UT,MST,ST,PERF,ALL) - -ss SUBSYSTEM, --subsystem SUBSYSTEM Specify test subsystem - -tm TESTMODULE, --testmodule TESTMODULE Specified test module - -ts TESTSUIT, --testsuite TESTSUIT Specify test suite - -tc TESTCASE, --testcase TESTCASE Specify test case - -tl TESTLEVEL, --testlevel TESTLEVEL Specify test level - ``` - - - 测试框架帮助。 - - 帮助指令，用于查询测试平台支持哪些测试指令，如下： - - ``` - help - ``` - - - 退出自测试平台。 - - 退出自测试平台，使用如下命令退出测试平台，如下： - - ``` - quit - ``` - -6. （必选）查看测试结果与日志，通过在测试平台中执行测试指令，即可在developertest/reports目录下生成测试日志和测试报告。 - - 测试用例的结果会直接显示在控制台上，执行一次的测试结果根路径如下： - - ``` - reports/xxxx-xx-xx-xx-xx-xx - ``` - - - 测试用例格式化结果目录如下： - - ``` - result/ - ``` - - - 测试用例日志目录如下： - - ``` - log/plan_log_xxxx-xx-xx-xx-xx-xx.log - ``` - - - 测试报告汇总： - - ``` - summary_report.html - ``` - - - 测试报告详情： - - ``` - details_report.html - ``` - - - 测试平台日志目录如下： - - ``` - reports/platform_log_xxxx-xx-xx-xx-xx-xx.log - ``` - - - -## 包结构说明 - -开发者测试平台xdevice组件包结构说明，代码目录test/xdevice，详见下表所示： - -**表 4** xdevice组件包结构说明 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

功能描述

-

xdevice

-

测试平台基础组件。

-

xdevice/src/xdevice

-

基础测试框架源码。

-

xdevice/config

-

基础测试框架配置文件定义。

-

xdevice/src/xdevice/__main__.py

-

基础测试框架内部入口。

-

xdevice/src/xdevice/__init__.py

-

包依赖定义，插件依赖。

-

xdevice/src/xdevice/variables.py

-

全局变量定义。

-

xdevice/src/xdevice/_core/command

-

用例输入的命令行处理。

-

xdevice/src/xdevice/_core/config

-

基础测试框架的配置管理。

-

xdevice/src/xdevice/_core/environment

-

基础测试框架的环境管理，包括设备管理。

-

xdevice/src/xdevice/_core/executor

-

基础测试框架用例调度和分发。

-

xdevice/src/xdevice/_core/driver

-

基础测试框架测试执行器。

-

xdevice/src/xdevice/_core/resource

-

基础测试框架资源文件以及测试报告模板。

-

xdevice/src/xdevice/_core/testkit

-

基础测试框架公共操作，包括NFS文件系统挂载等。

-

xdevice/src/xdevice/_core/logger.py

-

基础测试框架日志管理。

-

xdevice/src/xdevice/_core/plugin.py

-

基础测试框架插件管理。

-

xdevice/src/xdevice/_core/interface.py

-

基础测试框架插件接口定义。

-

xdevice/setup.py

-

基础测试框架的安装脚本。

-

xdevice/run.bat

-

基础测试框架启动脚本（Windows）。

-

xdevice/run.sh

-

基础测试框架启动脚本（Linux）。

-
- -开发者测试平台developertest组件包结构说明，代码目录test/developertest，详见下表所示： - -**表 5** developertest组件包结构说明 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

描述

-

developertest

-

开发测试框架。

-

developertest/src

-

测试框架源码。

-

developertest/src/core

-

测试执行器。

-

developertest/src/core/build

-

测试用例编译。

-

developertest/src/core/command

-

对用户输入的命令行处理。

-

developertest/src/core/config

-

测试框架配置管理。

-

developertest/src/core/driver

-

测试框架驱动执行器。

-

developertest/src/core/resource

-

测试框架配置文件。

-

developertest/src/core/testcase

-

测试用例管理。

-

developertest/src/core/common.py

-

测试框架公共操作。

-

developertest/src/core/constants.py

-

测试框架全局常量。

-

developertest/src/core/exception.py

-

测试框架异常定义。

-

developertest/src/core/utils.py

-

测试框架工具方法。

-

developertest/src/main

-

测试框架平台。

-

developertest/src/main/__main__.py

-

测试框架内部入口。

-

developertest/examples

-

测试框架demo用例。

-

developertest/third_party

-

测试框架依赖第三方组件适配。

-

developertest/BUILD.gn

-

测试子系统编译配置。

-

developertest/start.bat

-

开发者测试入口（Windows）。

-

developertest/start.sh

-

开发者测试入口（Linux）。

-
diff --git a/zh-cn/device-dev/subsystems/subsys.md b/zh-cn/device-dev/subsystems/subsys.md index b36d4325c6d4389ad8fe7e5c3168fec7f323292f..9cb0761bcd3d9947979827040ebcd13ec1e92ed0 100644 --- a/zh-cn/device-dev/subsystems/subsys.md +++ b/zh-cn/device-dev/subsystems/subsys.md @@ -12,7 +12,7 @@ - **[AI框架](subsys-aiframework.md)** -- **[Sensor服务](subsys-densor.md)** +- **[Sensor服务](subsys-sensor.md)** - **[用户程序框架](subsys-application-framework.md)** diff --git "a/zh-cn/readme/AI\344\270\232\345\212\241\345\255\220\347\263\273\347\273\237.md" "b/zh-cn/readme/AI\344\270\232\345\212\241\345\255\220\347\263\273\347\273\237.md" new file mode 100644 index 0000000000000000000000000000000000000000..15996408cf13e888a3b960d4bc9c6da28a1d72a9 --- /dev/null +++ "b/zh-cn/readme/AI\344\270\232\345\212\241\345\255\220\347\263\273\347\273\237.md" @@ -0,0 +1,432 @@ +# AI业务子系统 + +- [简介](#section187321516154516) +- [目录](#section571610913453) +- [约束](#section5748426453) +- [使用](#section7981135212144) +- [涉及仓](#section10492183517430) +- [AI引擎开发导航](#section6808423133718) + +## 简介 + +AI业务子系统是OpenHarmony提供原生的分布式AI能力的子系统。本次开源范围是提供了统一的AI引擎框架，实现算法能力快速插件化集成。框架中主要包含插件管理、模块管理和通信管理等模块，对AI算法能力进行生命周期管理和按需部署。后续，会逐步定义统一的AI能力接口，便于AI能力的分布式调用。同时，提供适配不同推理框架层级的统一推理接口。 + +**图 1** AI引擎框架 +![](figures/AI引擎框架.png "AI引擎框架") + +## 目录 + +``` +/foundation/ai/engine # AI子系统主目录 +├── interfaces +│ └── kits # AI子系统对外接口 +└── services +│ ├── client # AI子系统Client模块 +│ │ ├── client_executor # Client模块执行主体 +│ │ └── communication_adapter # Client模块通信适配层，支持拓展 +│ ├── common # AI子系统公共工具、协议模块 +│ │ ├── platform +│ │ ├── protocol +│ │ └── utils +│ └── server # AI子系统服务端模块 +│ │ ├── communication_adapter # Server模块通信适配层，支持拓展 +│ │ ├── plugin +│ │ ├── asr +│ │ └── keyword_spotting # ASR算法插件参考：唤醒词识别 +│ │ └── cv +│ │ └── image_classification # CV算法插件参考：图片分类 +│ │ ├── plugin_manager +│ │ └── server_executor # Server模块执行主体 +``` + +## 约束 + +* **语言限制**：C/C++语言 + +* **操作系统限制**：OpenHarmony操作系统 + +* **AI服务启动的约束与限制**：SAMGR（System Ability Manager）启动且运行正常 + +## 使用 + +1. **AI业务子系统编译** + + 轻量级AI引擎框架模块，代码所在路径：//foundation/ai/engine/services + + 编译指令如下： + + 1. **设置编译路径** + + ``` + hb set -root dir(项目代码根目录) + ``` + + 2. **设置编译产品**（执行后用方向键和回车进行选择）： + + ``` + hb set -p + ``` + + 3. **执行编译**： + + ``` + hb build -f（编译全仓） + 或者 hb build ai_engine（只编译ai_engine组件） + ``` + + >**注意**：hb相关配置请参考编译构建子系统**build\_lite** + +2. **插件开发**（以唤醒词识别为例） + + 位置：//foundation/ai/engine/services/server/plugin/asr/keyword\_spotting + + >**注意**：插件需要实现server提供的IPlugin接口和IPluginCallback接口 + + ``` + #include "plugin/i_plugin.h + class KWSPlugin : public IPlugin { # Keywords Spotting Plugin（KWSPlugin）继承IPlugin算法插件基类public: + KWSPlugin(); + ~KWSPlugin(); + + const long long GetVersion() const override; + const char* GetName() const override; + const char* GetInferMode() const override; + + int32_t Prepare(long long transactionId, const DataInfo &amp;inputInfo, DataInfo &amp;outputInfo) override; + int32_t SetOption(int optionType, const DataInfo &amp;inputInfo) override; + int32_t GetOption(int optionType, const DataInfo &amp;inputInfo, DataInfo &amp;outputInfo) override; + int32_t SyncProcess(IRequest *request, IResponse *&amp;response) override; + int32_t AsyncProcess(IRequest *request, IPluginCallback*callback) override; + int32_t Release(bool isFullUnload, long long transactionId, const DataInfo &amp;inputInfo) override; + . + . + . + }; + ``` + + >**注意**：SyncProcess和AsyncProcess接口只需要根据算法实际情况实现一个接口即可，另一个用空方法占位（这里KWS插件为同步算法，故异步接口为空实现）。 + + ``` + #include "aie_log.h" + #include "aie_retcode_inner.h" + . + . + . + + const long long KWSPlugin::GetVersion() const + { + return ALGOTYPE_VERSION_KWS; + } + + const char *KWSPlugin::GetName() const + { + return ALGORITHM_NAME_KWS.c_str(); + } + + const char *KWSPlugin::GetInferMode() const + { + return DEFAULT_INFER_MODE.c_str(); + } + . + . + . + int32_t KWSPlugin::AsyncProcess(IRequest *request, IPluginCallback *callback) + { + return RETCODE_SUCCESS; + } + ``` + +3. **插件SDK开发**（以唤醒词识别kws\_sdk为例） + + 位置：//foundation/ai/engine/services/client/algorithm\_sdk/asr/keyword\_spotting + + 唤醒词识别SDK： + + ``` + class KWSSdk { + public: + KWSSdk(); + virtual ~KWSSdk(); + + /** + * @brief Create a new session with KWS Plugin + * + * @return Returns KWS_RETCODE_SUCCESS(0) if the operation is successful, + * returns a non-zero value otherwise. + */ + int32_t Create(); + + /** + * @brief Synchronously execute keyword spotting once + * + * @param audioInput pcm data. + * @return Returns KWS_RETCODE_SUCCESS(0) if the operation is successful, + * returns a non-zero value otherwise. + */ + int32_t SyncExecute(const Array &audioInput); + + /** + * @brief Asynchronously execute keyword spotting once + * + * @param audioInput pcm data. + * @return Returns KWS_RETCODE_SUCCESS(0) if the operation is successful, + * returns a non-zero value otherwise. + */ + int32_t AsyncExecute(const Array &audioInput); + + /** + * @brief Set callback + * + * @param callback Callback function that will be called during the process. + * @return Returns KWS_RETCODE_SUCCESS(0) if the operation is successful, + * returns a non-zero value otherwise. + */ + int32_t SetCallback(const std::shared_ptr &callback); + + /** + * @brief Destroy the created session with KWS Plugin + * + * @return Returns KWS_RETCODE_SUCCESS(0) if the operation is successful, + * returns a non-zero value otherwise. + */ + int32_t Destroy(); + ``` + + >**注意**：SDK调用AI引擎客户端接口顺序应遵循AieClientInit-\>AieClientPrepare-\>AieClientSyncProcess/AieClientAsyncProcess-\>AieClientRelease-\>AieClientDestroy，否则调用接口会返回错误码；同时应保证各个接口都有调用到，要不然会引起内存泄漏。 + + ``` + int32_t KWSSdk::KWSSdkImpl::Create() + { + if (kwsHandle_ != INVALID_KWS_HANDLE) { + HILOGE("[KWSSdkImpl]The SDK has been created"); + return KWS_RETCODE_FAILURE; + } + if (InitComponents() != RETCODE_SUCCESS) { + HILOGE("[KWSSdkImpl]Fail to init sdk components"); + return KWS_RETCODE_FAILURE; + } + int32_t retCode = AieClientInit(configInfo_, clientInfo_, algorithmInfo_, nullptr); + if (retCode != RETCODE_SUCCESS) { + HILOGE("[KWSSdkImpl]AieClientInit failed. Error code[%d]", retCode); + return KWS_RETCODE_FAILURE; + } + if (clientInfo_.clientId == INVALID_CLIENT_ID) { + HILOGE("[KWSSdkImpl]Fail to allocate client id"); + return KWS_RETCODE_FAILURE; + } + DataInfo inputInfo = { + .data = nullptr, + .length = 0, + }; + DataInfo outputInfo = { + .data = nullptr, + .length = 0, + }; + retCode = AieClientPrepare(clientInfo_, algorithmInfo_, inputInfo, outputInfo, nullptr); + if (retCode != RETCODE_SUCCESS) { + HILOGE("[KWSSdkImpl]AieclientPrepare failed. Error code[%d]", retCode); + return KWS_RETCODE_FAILURE; + } + if (outputInfo.data == nullptr || outputInfo.length <= 0) { + HILOGE("[KWSSdkImpl]The data or length of output info is invalid"); + return KWS_RETCODE_FAILURE; + } + MallocPointerGuard pointerGuard(outputInfo.data); + retCode = PluginHelper::UnSerializeHandle(outputInfo, kwsHandle_); + if (retCode != RETCODE_SUCCESS) { + HILOGE("[KWSSdkImpl]Get handle from inputInfo failed"); + return KWS_RETCODE_FAILURE; + } + return KWS_RETCODE_SUCCESS; + } + + int32_t KWSSdk::KWSSdkImpl::SyncExecute(const Array &audioInput) + { + intptr_t newHandle = 0; + Array kwsResult = { + .data = nullptr, + .size = 0 + }; + DataInfo inputInfo = { + .data = nullptr, + .length = 0 + }; + DataInfo outputInfo = { + .data = nullptr, + .length = 0 + }; + int32_t retCode = PluginHelper::SerializeInputData(kwsHandle_, audioInput, inputInfo); + if (retCode != RETCODE_SUCCESS) { + HILOGE("[KWSSdkImpl]Fail to serialize input data"); + callback_->OnError(KWS_RETCODE_SERIALIZATION_ERROR); + return RETCODE_FAILURE; + } + retCode = AieClientSyncProcess(clientInfo_, algorithmInfo_, inputInfo, outputInfo); + if (retCode != RETCODE_SUCCESS) { + HILOGE("[KWSSdkImpl]AieClientSyncProcess failed. Error code[%d]", retCode); + callback_->OnError(KWS_RETCODE_PLUGIN_EXECUTION_ERROR); + return RETCODE_FAILURE; + } + if (outputInfo.data == nullptr || outputInfo.length <= 0) { + HILOGE("[KWSSdkImpl] The data or length of outputInfo is invalid. Error code[%d]", retCode); + callback_->OnError(KWS_RETCODE_NULL_PARAM); + return RETCODE_FAILURE; + } + MallocPointerGuard pointerGuard(outputInfo.data); + retCode = PluginHelper::UnSerializeOutputData(outputInfo, newHandle, kwsResult); + if (retCode != RETCODE_SUCCESS) { + HILOGE("[KWSSdkImpl]UnSerializeOutputData failed. Error code[%d]", retCode); + callback_->OnError(KWS_RETCODE_UNSERIALIZATION_ERROR); + return retCode; + } + if (kwsHandle_ != newHandle) { + HILOGE("[KWSSdkImpl]The handle[%lld] of output data is not equal to the current handle[%lld]", + (long long)newHandle, (long long)kwsHandle_); + callback_->OnError(KWS_RETCODE_PLUGIN_SESSION_ERROR); + return RETCODE_FAILURE; + } + callback_->OnResult(kwsResult); + return RETCODE_SUCCESS; + } + + int32_t KWSSdk::KWSSdkImpl::Destroy() + { + if (kwsHandle_ == INVALID_KWS_HANDLE) { + return KWS_RETCODE_SUCCESS; + } + DataInfo inputInfo = { + .data = nullptr, + .length = 0 + }; + int32_t retCode = PluginHelper::SerializeHandle(kwsHandle_, inputInfo); + if (retCode != RETCODE_SUCCESS) { + HILOGE("[KWSSdkImpl]SerializeHandle failed. Error code[%d]", retCode); + return KWS_RETCODE_FAILURE; + } + retCode = AieClientRelease(clientInfo_, algorithmInfo_, inputInfo); + if (retCode != RETCODE_SUCCESS) { + HILOGE("[KWSSdkImpl]AieClientRelease failed. Error code[%d]", retCode); + return KWS_RETCODE_FAILURE; + } + retCode = AieClientDestroy(clientInfo_); + if (retCode != RETCODE_SUCCESS) { + HILOGE("[KWSSdkImpl]AieClientDestroy failed. Error code[%d]", retCode); + return KWS_RETCODE_FAILURE; + } + mfccProcessor_ = nullptr; + pcmIterator_ = nullptr; + callback_ = nullptr; + kwsHandle_ = INVALID_KWS_HANDLE; + return KWS_RETCODE_SUCCESS; + } + ``` + +4. **sample开发** [（参考唤醒词识别demo）](https://gitee.com/openharmony/applications_sample_camera/tree/master/ai) + + 位置：//applications/sample/camera/ai/asr/keyword\_spotting + + **调用Create** + + ``` + bool KwsManager::PreparedInference() + { + if (capturer_ == nullptr) { + printf("[KwsManager] only load plugin after AudioCapturer ready\n"); + return false; + } + if (plugin_ != nullptr) { + printf("[KwsManager] stop created InferencePlugin at first\n"); + StopInference(); + } + plugin_ = std::make_shared(); + if (plugin_ == nullptr) { + printf("[KwsManager] fail to create inferencePlugin\n"); + return false; + } + if (plugin_->Create() != SUCCESS) { + printf("[KwsManager] KWSSdk fail to create.\n"); + return false; + } + std::shared_ptr callback = std::make_shared(); + if (callback == nullptr) { + printf("[KwsManager] new Callback failed.\n"); + return false; + } + plugin_->SetCallback(callback); + return true; + } + ``` + + **调用SyncExecute** + + ``` + void KwsManager::ConsumeSamples() + { + uintptr_t sampleAddr = 0; + size_t sampleSize = 0; + int32_t retCode = SUCCESS; + while (status_ == RUNNING) { + { + std::lock_guard lock(mutex_); + if (cache_ == nullptr) { + printf("[KwsManager] cache_ is nullptr.\n"); + break; + } + sampleSize = cache_->GetCapturedBuffer(sampleAddr); + } + if (sampleSize == 0 || sampleAddr == 0) { + continue; + } + Array input = { + .data = (int16_t *)(sampleAddr), + .size = sampleSize >> 1 + }; + { + std::lock_guard lock(mutex_); + if (plugin_ == nullptr) { + printf("[KwsManager] cache_ is nullptr.\n"); + break; + } + if ((retCode = plugin_->SyncExecute(input)) != SUCCESS) { + printf("[KwsManager] SyncExecute KWS failed with retCode = [%d]\n", retCode); + continue; + } + } + } + } + ``` + + **调用Destroy** + + ``` + void KwsManager::StopInference() + { + printf("[KwsManager] StopInference\n"); + if (plugin_ != nullptr) { + int ret = plugin_->Destroy(); + if (ret != SUCCESS) { + printf("[KwsManager] plugin_ destroy failed.\n"); + } + plugin_ = nullptr; + } + } + ``` + + +## 涉及仓 + +AI子系统 + +ai_engine + +依赖仓： + +build\_lite + +distributedschedule\_services\_samgr\_lite + +startup\_init\_lite + +## AI引擎开发导航 + +[《AI插件开发指南》](https://gitee.com/openharmony/docs/blob/master/zh-cn/device-dev/subsystems/subsys-aiframework-guide.md) \ No newline at end of file diff --git "a/zh-cn/readme/figures/AI\345\274\225\346\223\216\346\241\206\346\236\266.png" "b/zh-cn/readme/figures/AI\345\274\225\346\223\216\346\241\206\346\236\266.png" new file mode 100644 index 0000000000000000000000000000000000000000..40fce96c01fbe619d77851dffcb5c37b1468892f Binary files /dev/null and "b/zh-cn/readme/figures/AI\345\274\225\346\223\216\346\241\206\346\236\266.png" differ diff --git a/zh-cn/readme/figures/dms-architecture_zh.png b/zh-cn/readme/figures/dms-architecture_zh.png new file mode 100644 index 0000000000000000000000000000000000000000..588c33751dff097e9a8bb9b21d731a1ca1633ffd Binary files /dev/null and b/zh-cn/readme/figures/dms-architecture_zh.png differ diff --git "a/zh-cn/readme/\345\206\205\346\240\270\345\255\220\347\263\273\347\273\237.md" "b/zh-cn/readme/\345\206\205\346\240\270\345\255\220\347\263\273\347\273\237.md" index bf9da1b65ffc0245beb1a3942b745d02e9f32532..1c1f5ae1fffebd3069fefc2eb6203b69e5b28e6b 100755 --- "a/zh-cn/readme/\345\206\205\346\240\270\345\255\220\347\263\273\347\273\237.md" +++ "b/zh-cn/readme/\345\206\205\346\240\270\345\255\220\347\263\273\347\273\237.md" @@ -9,17 +9,12 @@ - [LiteOS使用说明](#section118811457303) - [linux使用说明](#section1352114469620) -- [以hi3516dv300开源开发板+ubuntu x86主机开发环境为例](#section19369206113115) - - [场景1：版本级编译原生方式](#section1025111193220) - - [场景2：单独编译修改后的内核](#section17446652173211) - +- [构建说明](#section19369206113115) - [相关仓](#section27639463106) ## 简介 -OpenHarmony针对不同量级的系统，分别使用了不同形态的内核，分别为LiteOS和Linux。在轻量系统、小型系统和标准系统上，可以选用LiteOS；在标准系统上，可以选用Linux。 - -**表 1** +OpenHarmony针对不同量级的系统，分别使用了不同形态的内核，分别为LiteOS和Linux。在轻量系统、小型系统和标准系统上，可以选用LiteOS；在小型系统和标准系统上，可以选用Linux。 - - + @@ -64,37 +59,51 @@ OpenHarmonyLiteOS内核的源代码分为 kernel\_liteos\_a 和 kernel\_liteos\_ ## Linux -OpenHarmony的Linux内核基于开源Linux内核LTS 4.19.y分支演进，为满足不同的内核场景诉求，以内核 + patch的形式开展，其中内核在LTS 4.19内核的基础上合入CVE补丁 + OpenHarmony特性作为Common内核基线，针对性打上vendor厂商提供的板级芯片驱动补丁从而构成完整的内核。 - -Linux社区LTS 4.19.y分支信息请查看[kernel官网](https://git.kernel.org/pub/scm/linux/kernel/git/stable/linux.git/log/?h=linux-4.19.y)。 - -内核组成模块，以开源Linux内核为基线， 合入了公共补丁：CVE补丁/OpenHarmony特性，在编译构建流程中针对具体芯片平台合入对应的架构驱动代码进行编译对应的内核镜像。所有补丁来源均遵守GPL-2.0协议。 - -1. CVE补丁 - - 补丁所涉及的CVE\(Common Vulnerabilities and Exposures\)安全漏洞是通过NVD \([https://nvd.nist.gov](内核子系统.md)/\)官方机构收集，且补丁已经进入LTS 4.19.y分支或主线，主要涉及存储\(btrfs/scsi/\)、网络\(net/bpf/mwifiex\) 、驱动\(xen/nfc\)，对应CVE列表参考commit信息中CVE字段信息。 - - -1. OpenHarmony特性 - - HDF驱动、binder ipc转发功能等特性支持。 - -2. 特定芯片架构驱动补丁（比如Hi3516DV300） +OpenHarmony的Linux内核基于开源Linux内核LTS **4.19.y / 5.10.y** 分支演进，在此基线基础上，回合CVE补丁及OpenHarmony特性，作为OpenHarmony Common Kernel基线。针对不同的芯片，各厂商合入对应的板级驱动补丁，完成对OpenHarmony的基线适配。 - vendor厂商提供的特定芯片架构驱动代码： +Linux社区LTS 4.19.y分支信息请查看[kernel官网](https://git.kernel.org/pub/scm/linux/kernel/git/stable/linux.git/log/?h=linux-4.19.y)； - hisi\_linux-4.19\_hos\_l2.patch: 在Hi3516DV300芯片上支持arm架构的内核启动（DTS等）及对应的drm/mmc等驱动的支持。 +Linux社区LTS 5.10.y分支信息请查看[kernel官网](https://git.kernel.org/pub/scm/linux/kernel/git/stable/linux.git/log/?h=linux-5.10.y)。 +内核的Patch组成模块，在编译构建流程中，针对具体芯片平台，合入对应的架构驱动代码，进行编译对应的内核镜像。所有补丁来源均遵守GPL-2.0协议。 ## 目录 ``` kernel/ -├── linux-4.19 # 4.19内核基线代码 -├── linux/config/linux-4.19 # 内核config -│ └── standard_common_defconfig # 标准系统的内核的common defconfig -│ └── hi3516dv300_emmc_smp_hos_l2_defconfig # 厂商Hisilicon对应的开源开发板Hi3516dv300标准系统的defconfig -├── linux/patches/linux-4.19 # 内核patch及编译脚本 +├── linux +│ ├── linux-4.19 # OpenHarmony linux-4.19 Common kernel +│ ├── linux-5.10 # OpenHarmony linux-5.10 Common kernel +│ ├── build +│ │ ├── BUILD.gn # 编译框架GN文件 +│ │ ├── kernel.mk # 内核编译文件 +│ │ └── ohos.build # 内核编译组件文件 +│ ├── patches +│ │ ├── linux-4.19 # linux-4.19 相关patch +│ │ │   └── hi3516dv300_patch +│ │ │   ├── hi3516dv300.patch # linux-4.19 hi3516dv300 SOC patch +│ │ │   └── hdf.patch # linux-4.19 hi3516dv300 hdf patch +│ │ └── linux-5.10 +│ │    └── hi3516dv300_patch +│ │    ├── hi3516dv300.patch # linux-5.10 hi3516dv300 SOC patch +│ │    └── hdf.patch # linux-5.10 hi3516dv300 hdf patch +│ └── config +│ ├── linux-4.19 +│ │   └── arch +│ │   └── arm +│ │   └── configs +│ │   ├── hi3516dv300_small_defconfig # 厂商Hisilicon对应的开源开发板Hi3516dv300小型系统的defconfig +│ │   ├── hi3516dv300_standard_defconfig # 厂商Hisilicon对应的开源开发板Hi3516dv300标准系统的defconfig +│ │   ├── small_common_defconfig # 小型系统的内核的common defconfig +│ │   └── standard_common_defconfig # 标准系统的内核的common defconfig +│ └── linux-5.10 +│ └── arch +│ └── arm +│ └── configs +│    ├── hi3516dv300_small_defconfig # 厂商Hisilicon对应的开源开发板Hi3516dv300小型系统的defconfig +│    ├── hi3516dv300_standard_defconfig # 厂商Hisilicon对应的开源开发板Hi3516dv300标准系统的defconfig +│    ├── small_common_defconfig # 小型系统的内核的common defconfig +│    └── standard_common_defconfig # 标准系统的内核的common defconfig └── liteos_a # liteos内核基线代码 ├── apps # 用户态的init和shell应用程序 ├── arch # 体系架构的目录，如arm等 @@ -148,57 +157,52 @@ Hi3518EV300默认使用jffs2文件系统，Hi3516DV300默认使用FAT文件系 ### linux使用说明 -如需使用上述patch，需要在内核代码完成对应芯片平台驱动补丁进行合入。 +1. 合入HDF补丁 -1. 合入芯片平台驱动补丁 + 在kernel/linux/build仓中，按照kernel.mk中HDF的补丁合入方法，合入不同内核版本对应的HDF内核补丁： + + ``` + $(OHOS_BUILD_HOME)/drivers/adapter/khdf/linux/patch_hdf.sh $(OHOS_BUILD_HOME) $(KERNEL_SRC_TMP_PATH) $(HDF_PATCH_FILE) + ``` - 针对不同芯片平台合入对应的patch，以上述Hi3516DV300为例： +2. 合入芯片平台驱动补丁 - ``` - patch -p1 < device/hisilicon/hi3516dv300/sdk_linux/open_source/linux/hisi_linux-4.19_hos_l2.patch - ``` + 以Hi3516DV300为例： + + 在kernel/linux/build仓中，按照kernel.mk中的芯片组件所对应的patch路径规则及命名规则，将对应的芯片组件patch放到对应路径下： + + ``` + DEVICE_PATCH_DIR := $(OHOS_BUILD_HOME)/kernel/linux/patches/${KERNEL_VERSION}/$(DEVICE_NAME)_patch + DEVICE_PATCH_FILE := $(DEVICE_PATCH_DIR)/$(DEVICE_NAME).patch + ``` - >![](public_sys-resources/icon-notice.gif) **须知：** - >由于OpenHarmony工程的编译构建流程中会拷贝kernel/linux-4.19的代码环境后进行打补丁动作，在使用OpenHarmony的版本级编译命令前，需要kernel/linux-4.19保持原代码环境。 +3. 修改自己所需要编译的config + 在kernel/linux/build仓中，按照kernel.mk中的芯片组件所对应的patch路径规则及命名规则，将对应的芯片组件config放到对应路径下： + + ``` + KERNEL_CONFIG_PATH := $(OHOS_BUILD_HOME)/kernel/linux/config/${KERNEL_VERSION} + DEFCONFIG_FILE := $(DEVICE_NAME)_$(BUILD_TYPE)_defconfig + ``` -## 以hi3516dv300开源开发板+ubuntu x86主机开发环境为例 + > **须知：** + > + >由于OpenHarmony工程的编译构建流程中会拷贝kernel/linux/linux-\*\.\*的代码环境后进行打补丁动作，在使用OpenHarmony的版本级编译命令前，需要kernel/linux/linux-\*\.\*原代码环境。 + > + >根据不同系统工程，编译完成后会在out目录下的kernel目录中生成对应实际编译的内核，基于此目录的内核，进行对应的config修改，将最后生成的\.config文件cp到config仓对应的路径文件里，即可生效。 -### 场景1：版本级编译原生方式 +## 构建说明 + +以hi3516dv300开源开发板+ubuntu x86主机开发环境为例 使用工程的全量编译命令，编译生成uImage内核镜像 ``` -./build.sh --product-name Hi3516DV300 # 编译hi3516dv300的uImage内核镜像 +./build.sh --product-name Hi3516DV300 # 编译hi3516dv300镜像 + --build-target build_kernel # 编译hi3516dv300的uImage内核镜像 + --gn-args linux_kernel_version=\"linux-5.10\" # 编译指定内核版本 ``` -### 场景2：单独编译修改后的内核 - -1. 准备工作 - - 准备编译环境，可以使用开源arm clang/gcc编译器，或者使用工程自带编译器。 - - 进入工程主目录配置环境变量： - - ``` - export PATH=`pwd`/prebuilts/clang/host/linux-x86/clang-r353983c/bin:`pwd`/prebuilts/gcc/linux-x86/arm/gcc-linaro-7.5.0-arm-linux-gnueabi/bin/:$PATH # 配置编译环境 - MAKE_OPTIONES="ARCH=arm CROSS_COMPILE=arm-linux-gnueabi- CC=clang HOSTCC=clang" # 使用工程项目自带的clang环境 - ``` - -2. 修改内核代码或内核config （OpenHarmony提供对应平台的defconfig供参考）。 -3. 创建编译目录及生成内核.config。 - - ``` - make ${MAKE_OPTIONES} hi3516dv300_emmc_smp_hos_l2_defconfig # 使用自带的默认config 构建内核 - ``` - -4. 编译生成对应的内核Image。 - - ``` - make ${MAKE_OPTIONES} -j32 uImage # 编译uImage内核镜像 - ``` - - ## 相关仓 **内核子系统** @@ -217,11 +221,12 @@ LiteOS： Linux： -kernel\_linux\_patches +[kernel\_linux\_patches](https://gitee.com/openharmony/kernel_linux_patches/blob/master/README_zh.md) -device\_hisilicon\_hi3516dv300 +[kernel\_linux\_config](https://gitee.com/openharmony/kernel_linux_config/blob/master/README_zh.md) -kernel\_linux\_config +[kernel\_linux\_build](https://gitee.com/openharmony/kernel_linux_build/blob/master/README_zh.md) -kernel\_linux-4.19 +[kernel\_linux\_4.19](https://gitee.com/openharmony/kernel_linux_4.19/blob/master/README) +[kernel\_linux\_5.10](https://gitee.com/openharmony/kernel_linux_5.10/blob/master/README) \ No newline at end of file diff --git "a/zh-cn/readme/\345\210\206\345\270\203\345\274\217\344\273\273\345\212\241\350\260\203\345\272\246\345\255\220\347\263\273\347\273\237.md" "b/zh-cn/readme/\345\210\206\345\270\203\345\274\217\344\273\273\345\212\241\350\260\203\345\272\246\345\255\220\347\263\273\347\273\237.md" index 7d345245448078020e282a11fecb9e065cc80d94..aef735a67b5b5b6663ad70ab77c64cdb352b46e2 100755 --- "a/zh-cn/readme/\345\210\206\345\270\203\345\274\217\344\273\273\345\212\241\350\260\203\345\272\246\345\255\220\347\263\273\347\273\237.md" +++ "b/zh-cn/readme/\345\210\206\345\270\203\345\274\217\344\273\273\345\212\241\350\260\203\345\272\246\345\255\220\347\263\273\347\273\237.md" @@ -1,17 +1,25 @@ # 分布式任务调度子系统 - [简介](#section11660541593) +- [系统架构](#section13587185873516) - [目录](#section161941989596) - [相关仓](#section1371113476307) ## 简介 -在OpenHarmony系统中，分布式任务调度平台提供系统服务启动、注册、查询等功能。 +分布式任务调度模块负责跨设备组件管理，提供访问和控制远程组件的能力，支持分布式场景下的应用协同。主要功能如下： + +- 远程启动元能力：跨设备拉起远端设备上的指定元能力。 +- 远程迁移元能力：将元能力跨设备迁移到远端设备。 +- 远程绑定元能力：跨设备绑定远端设备上的指定元能力。 +- 系统服务管理：提供系统服务的本地启动、注册、查询等功能；提供系统服务的跨设备查询功能。 + +## 系统架构 **图 1** 子系统架构图 -![](figures/zh-cn_image_0000001162500331.png) +![](figures/dms-architecture_zh.png) ## 目录 @@ -39,5 +47,4 @@ distributedschedule\_safwk\_lite hdistributedschedule\_samgr\_lite -distributedschedule\_dms\_fwk\_lite - +distributedschedule\_dms\_fwk\_lite \ No newline at end of file diff --git "a/zh-cn/readme/\346\265\213\350\257\225\345\255\220\347\263\273\347\273\237.md" "b/zh-cn/readme/\346\265\213\350\257\225\345\255\220\347\263\273\347\273\237.md" index 65aaa9d5e9022c833e6480e06e3d4a70d07a3152..eecaaa12996b90ff26a2a3ccb9963c1c112ce4df 100755 --- "a/zh-cn/readme/\346\265\213\350\257\225\345\255\220\347\263\273\347\273\237.md" +++ "b/zh-cn/readme/\346\265\213\350\257\225\345\255\220\347\263\273\347\273\237.md" @@ -1,527 +1,865 @@ -# 测试子系统 +# 测试子系统 +OpenHarmony为开发者提供了一套全面的自测试框架，开发者可根据测试需求开发相关测试用例，开发阶段提前发现缺陷，大幅提高代码质量。 -- [简介](#section7375710115617) -- [目录](#section102031353175317) -- [约束](#section87444710110) -- [安装](#section1347156474) -- [编写测试用例](#section125411936102918) -- [使用测试框架](#section75882026185016) -- [测试结果与日志](#section414715805819) -- [涉及仓](#section6299103515474) +本文从基础环境构建，用例开发，编译以及执行等方面介绍OpenHarmony测试框架如何运行和使用。 +## 基础环境构建 +测试框架依赖于python运行环境，在使用测试框架之前可参阅以下方式进行配置。 + - [环境配置](../device-dev/subsystems/subsys-testguide-envbuild.md) + - [源码获取](../device-dev/get-code/sourcecode-acquire.md) -## 简介 - -开发过程采用测试驱动开发模式，开发者基于系统新增特性可以通过开发者自己开发用例保证，对于系统已有特性的修改，也可通过修改项目中原有的测试用例保证，开发者测试旨在帮助开发者在开发阶段就能开发出高质量代码。 - -## 目录 +## 测试框架目录简介 +以下是测试框架的目录层级架构，在使用测试框架过程中可在相应目录查找对应组件。 ``` -test/ -├── developertest # 开发者测试框架 -│ ├── aw # 测试框架的静态库 -│ ├── config # 测试框架配置 -│ ├── examples # 测试用例示例 -│ ├── src # 测试框架源码 -│ ├── third_party # 测试框架依赖第三方组件适配 -│ ├── start.bat # 开发者测试入口（Windows） -│ ├── start.sh # 开发者测试入口（Linux） -│ └── BUILD.gn # 测试框架编译入口 -├── xdevice # 测试框架基础组件 -│ ├── config # 框架配置文件 -│ ├── extension # 基础组件扩展仓 -│ ├── resource # 基础组件测试资源 -│ └── src # 基础组件源码 -└── xts # XTS认证套件 +test # 测试子系统 +├── developertest # 开发者测试组件 +│ ├── aw # 测试框架的静态库 +│ ├── config # 测试框架配置 +│ │ │ ... +│ │ └── user_config.xml # 用户使用配置 +│ ├── examples # 测试用例示例 +│ ├── src # 测试框架源码 +│ ├── third_party # 测试框架依赖第三方组件适配 +│ ├── reports # 测试结果报告 +│ ├── BUILD.gn # 测试框架编译入口 +│ ├── start.bat # 开发者测试入口（Windows） +│ └── start.sh # 开发者测试入口（Linux） +└── xdevice # 测试框架依赖组件 ``` +## 测试用例编写 +### 测试用例目录规划 +使用测试框架过程中，可根据以下层级关系规划测试用例目录。 +``` +subsystem # 子系统 +├── partA # 部件A +│ ├── moduleA # 模块A +│ │ ├── include +│ │ ├── src # 业务代码 +│ │ └── test # 测试目录 +│ │ ├── unittest # 单元测试 +│ │ │ ├── common # 公共用例 +│ │ │ │ ├── BUILD.gn # 测试用例编译配置 +│ │ │ │ ├── testA_test.cpp # 单元测试用例源码 +│ │ │ ├── phone # 手机形态用例 +│ │ │ ├── ivi # 车机形态用例 +│ │ │ └── liteos-a # ipcamera使用liteos内核的用例 +│ │ └── resource # 依赖资源 +│ │ └── ohos_test.xml +│ ├── moduleB # 模块B +│ ├── test +│ │ └── moduletest # 模块测试 +│ │ ├── common +│ │ ├── phone +│ │ ├── ivi +│ │ └── liteos-a +│ │ ... +│ └── ohos_build # 编译入口配置 +... +``` +> **注意：** 测试用例根据不同设备形态差异分为通用用例和非通用用例，建议将通用用例存放在common目录下，非通用用例存放在相应设备形态目录下。 + +### 测试用例编写 +本测试框架支持多种语言用例编写，针对不同语言提供了不同的模板以供编写参考。 + +**C++参考示例** + +- 用例源文件命名规范 + + 测试用例源文件名称和测试套内容保持一致，文件命名采用全小写+下划线方式命名，以test结尾，具体格式为：[功能]_[子功能]_test，子功能支持向下细分。 +示例： + ``` + calculator_sub_test.cpp + ``` + +- 用例示例 + ``` + /* + * Copyright (c) 2021 XXXX Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + + #include "calculator.h" + #include + + using namespace testing::ext; + + class CalculatorSubTest : public testing::Test { + public: + static void SetUpTestCase(void); + static void TearDownTestCase(void); + void SetUp(); + void TearDown(); + }; + + void CalculatorSubTest::SetUpTestCase(void) + { + // input testsuit setup step，setup invoked before all testcases + } + + void CalculatorSubTest::TearDownTestCase(void) + { + // input testsuit teardown step，teardown invoked after all testcases + } + + void CalculatorSubTest::SetUp(void) + { + // input testcase setup step，setup invoked before each testcases + } + + void CalculatorSubTest::TearDown(void) + { + // input testcase teardown step，teardown invoked after each testcases + } + + /** + * @tc.name: integer_sub_001 + * @tc.desc: Verify the sub function. + * @tc.type: FUNC + * @tc.require: Issue Number + */ + HWTEST_F(CalculatorSubTest, integer_sub_001, TestSize.Level1) + { + // step 1:调用函数获取结果 + int actual = Sub(4，0)； + + // Step 2:使用断言比较预期与实际结果 + EXPECT_EQ(4, actual); + } + ``` + 详细内容介绍： + 1. 添加测试用例文件头注释信息 + ``` + /* + * Copyright (c) 2021 XXXX Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + ``` + 2. 引用测试框架头文件和命名空间 + ``` + #include + + using namespace testing::ext; + ``` + 3. 添加被测试类的头文件 + ``` + #include "calculator.h" + ``` + 4. 定义测试套（测试类） + ``` + class CalculatorSubTest : public testing::Test { + public: + static void SetUpTestCase(void); + static void TearDownTestCase(void); + void SetUp(); + void TearDown(); + }; + + void CalculatorSubTest::SetUpTestCase(void) + { + // input testsuit setup step，setup invoked before all testcases + } + + void CalculatorSubTest::TearDownTestCase(void) + { + // input testsuit teardown step，teardown invoked after all testcases + } + + void CalculatorSubTest::SetUp(void) + { + // input testcase setup step，setup invoked before each testcases + } + + void CalculatorSubTest::TearDown(void) + { + // input testcase teardown step，teardown invoked after each testcases + } + ``` + > **注意：** 在定义测试套时，测试套名称应与编译目标保持一致，采用大驼峰风格。 + + 5. 测试用例实现，包含用例注释和逻辑实现 + ``` + /** + * @tc.name: integer_sub_001 + * @tc.desc: Verify the sub function. + * @tc.type: FUNC + * @tc.require: Issue Number + */ + HWTEST_F(CalculatorSubTest, integer_sub_001, TestSize.Level1) + { + //step 1:调用函数获取结果 + int actual = Sub(4，0)； + + //Step 2:使用断言比较预期与实际结果 + EXPECT_EQ(4, actual); + } + ``` + 在编写用例时，我们提供了三种用例模板供您选择。 + + | 类型 | 描述 | + | ------------| ------------| + | HWTEST(A,B,C)| 用例执行不依赖Setup&Teardown时，可选取| + | HWTEST_F(A,B,C)| 用例执行(不含参数)依赖于Setup&Teardown时，可选取| + | HWTEST_P(A,B,C)| 用例执行(含参数)依赖于Set&Teardown时，可选取| + + 其中，参数A，B，C的含义如下： + - 参数A为测试套名。 + - 参数B为测试用例名，其命名必须遵循[功能点]_[编号]的格式，编号为3位数字，从001开始。 + - 参数C为测试用例等级，具体分为门禁level0 以及非门禁level1-level4共五个等级，其中非门禁level1-level4等级的具体选取规则为：测试用例功能越重要，level等级越低。 + + **注意：** + - 测试用例的预期结果必须有对应的断言。 + - 测试用例必须填写用例等级。 + - 测试体建议按照模板分步实现。 + - 用例描述信息按照标准格式@tc.xxx value书写，注释信息必须包含用例名称，用例类型，需求编号四项。其中用例测试类型@tc.type参数的选取，可参考下表。 + + | 测试类型名称|功能测试|性能测试|可靠性测试|安全测试|模糊测试| + | ------------|------------|------------|------------|------------|------------| + | 类型编码|FUNC|PERF|RELI|SECU|FUZZ| + + +**JavaScript参考示例** + +- 用例源文件命名规范 + + 测试用例原文件名称采用大驼峰风格，以TEST结尾，具体格式为：[功能][子功能]TEST，子功能支持向下细分。 +示例： + ``` + AppInfoTest.js + ``` + +- 用例示例 + ``` + /* + * Copyright (C) 2021 XXXX Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + import app from '@system.app' + + import {describe, beforeAll, beforeEach, afterEach, afterAll, it, expect} from 'deccjsunit/index' + + describe("AppInfoTest", function () { + beforeAll(function() { + // input testsuit setup step，setup invoked before all testcases + console.info('beforeAll caled') + }) + + afterAll(function() { + // input testsuit teardown step，teardown invoked after all testcases + console.info('afterAll caled') + }) + + beforeEach(function() { + // input testcase setup step，setup invoked before each testcases + console.info('beforeEach caled') + }) + + afterEach(function() { + // input testcase teardown step，teardown invoked after each testcases + console.info('afterEach caled') + }) + + /* + * @tc.name:appInfoTest001 + * @tc.desc:verify app info is not null + * @tc.type: FUNC + * @tc.require: Issue Number + */ + it("appInfoTest001", 0, function () { + //step 1:调用函数获取结果 + var info = app.getInfo() + + //Step 2:使用断言比较预期与实际结果 + expect(info != null).assertEqual(true) + }) + }) + ``` + 详细内容介绍： + 1. 添加测试用例文件头注释信息 + ``` + /* + * Copyright (C) 2021 XXXX Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + ``` + 2. 导入被测api和jsunit测试库 + ``` + import app from '@system.app' + + import {describe, beforeAll, beforeEach, afterEach, afterAll, it, expect} from 'deccjsunit/index' + ``` + 3. 定义测试套（测试类） + ``` + describe("AppInfoTest", function () { + beforeAll(function() { + // input testsuit setup step，setup invoked before all testcases + console.info('beforeAll caled') + }) + + afterAll(function() { + // input testsuit teardown step，teardown invoked after all testcases + console.info('afterAll caled') + }) + + beforeEach(function() { + // input testcase setup step，setup invoked before each testcases + console.info('beforeEach caled') + }) + + afterEach(function() { + // input testcase teardown step，teardown invoked after each testcases + console.info('afterEach caled') + }) + ``` + 4. 测试用例实现 + ``` + /* + * @tc.name:appInfoTest001 + * @tc.desc:verify app info is not null + * @tc.type: FUNC + * @tc.require: Issue Number + */ + it("appInfoTest001", 0, function () { + //step 1:调用函数获取结果 + var info = app.getInfo() + + //Step 2:使用断言比较预期与实际结果 + expect(info != null).assertEqual(true) + }) + ``` + +### 测试用例编译文件编写 +根据测试用例目录规划，当执行某一用例时，测试框架会根据编译文件逐层查找，最终找到所需用例进行编译。下面通过不同示例来讲解gn文件如何编写。 + +#### 测试用例编译配置文件 +针对不同语言，下面提供不同的编译模板以供参考。 + +- **C++用例编译配置示例** + ``` + # Copyright (c) 2021 XXXX Device Co., Ltd. + + import("//build/test.gni") + + module_output_path = "subsystem_examples/calculator" + + config("module_private_config") { + visibility = [ ":*" ] + + include_dirs = [ "../../../include" ] + } + + ohos_unittest("CalculatorSubTest") { + module_out_path = module_output_path + + sources = [ + "../../../include/calculator.h", + "../../../src/calculator.cpp", + ] + + sources += [ "calculator_sub_test.cpp" ] + + configs = [ ":module_private_config" ] + + deps = [ "//third_party/googletest:gtest_main" ] + } + + group("unittest") { + testonly = true + deps = [":CalculatorSubTest"] + } + ``` + 详细内容如下： + + 1. 添加文件头注释信息 + ``` + # Copyright (c) 2021 XXXX Device Co., Ltd. + ``` + 2. 导入编译模板文件 + ``` + import("//build/test.gni") + ``` + 3. 指定文件输出路径 + ``` + module_output_path = "subsystem_examples/calculator" + ``` + > **说明：** 此处输出路径为部件/模块名。 + + 4. 配置依赖包含目录 + + ``` + config("module_private_config") { + visibility = [ ":*" ] + + include_dirs = [ "../../../include" ] + } + ``` + > **说明：** 一般在此处对相关配置进行设置，在测试用例编译脚本中可直接引用。 + + 5. 指定测试用例编译目标输出的文件名称 + + ``` + ohos_unittest("CalculatorSubTest") { + } + ``` + 6. 编写具体的测试用例编译脚本（添加需要参与编译的源文件、配置和依赖） + ``` + ohos_unittest("CalculatorSubTest") { + module_out_path = module_output_path + sources = [ + "../../../include/calculator.h", + "../../../src/calculator.cpp", + "../../../test/calculator_sub_test.cpp" + ] + sources += [ "calculator_sub_test.cpp" ] + configs = [ ":module_private_config" ] + deps = [ "//third_party/googletest:gtest_main" ] + } + ``` + + > **说明：根据测试类型的不同，在具体编写过程中可选择不同的测试类型：** + > - ohos_unittest：单元测试 + > - ohos_moduletest：模块测试 + > - ohos_systemtest：系统测试 + > - ohos_performancetest：性能测试 + > - ohos_securitytest：安全测试 + > - ohos_reliabilitytest：可靠性测试 + > - ohos_distributedtest：分布式测试 + + 7. 对目标测试用例文件进行条件分组 + + ``` + group("unittest") { + testonly = true + deps = [":CalculatorSubTest"] + } + ``` + > **说明：** 进行条件分组的目的在于执行用例时可以选择性的执行某一种特定类型的用例。 + +- **JavaScript用例编译配置示例** + + ``` + # Copyright (C) 2021 XXXX Device Co., Ltd. + + import("//build/test.gni") + + module_output_path = "subsystem_examples/app_info" + + ohos_js_unittest("GetAppInfoJsTest") { + module_out_path = module_output_path + + hap_profile = "./config.json" + certificate_profile = "//test/developertest/signature/openharmony_sx.p7b" + } + + group("unittest") { + testonly = true + deps = [ ":GetAppInfoJsTest" ] + } + ``` + + 详细内容如下： + + 1. 添加文件头注释信息 + + ``` + # Copyright (C) 2021 XXXX Device Co., Ltd. + ``` + 2. 导入编译模板文件 + + ``` + import("//build/test.gni") + ``` + 3. 指定文件输出路径 + + ``` + module_output_path = "subsystem_examples/app_info" + ``` + > **说明：** 此处输出路径为部件/模块名。 + + 4. 指定测试用例编译目标输出的文件名称 + + ``` + ohos_js_unittest("GetAppInfoJsTest") { + } + ``` + > **说明：** + >- 使用模板ohos_js_unittest定义js测试套，注意与C++用例区分。 + >- js测试套编译输出文件为hap类型，hap名为此处定义的测试套名，测试套名称必须以JsTest结尾。 + + 5. 指定hap包配置文件config.json和签名文件，两个配置为必选项 + + ``` + ohos_js_unittest("GetAppInfoJsTest") { + module_out_path = module_output_path + + hap_profile = "./config.json" + certificate_profile = "//test/developertest/signature/openharmony_sx.p7b" + } + ``` + config.json为hap编译所需配置文件，需要开发者根据被测sdk版本配置“target”项，其余项可默认，具体如下所示： + + ``` + { + "app": { + "bundleName": "com.example.myapplication", + "vendor": "example", + "version": { + "code": 1, + "name": "1.0" + }, + "apiVersion": { + "compatible": 4, + "target": 5 // 根据被测sdk版本进行修改，此例为sdk5 + } + }, + "deviceConfig": {}, + "module": { + "package": "com.example.myapplication", + "name": ".MyApplication", + "deviceType": [ + "phone" + ], + "distro": { + "deliveryWithInstall": true, + "moduleName": "entry", + "moduleType": "entry" + }, + "abilities": [ + { + "skills": [ + { + "entities": [ + "entity.system.home" + ], + "actions": [ + "action.system.home" + ] + } + ], + "name": "com.example.myapplication.MainAbility", + "icon": "$media:icon", + "description": "$string:mainability_description", + "label": "MyApplication", + "type": "page", + "launchType": "standard" + } + ], + "js": [ + { + "pages": [ + "pages/index/index" + ], + "name": "default", + "window": { + "designWidth": 720, + "autoDesignWidth": false + } + } + ] + } + } + ``` + 6. 对目标测试用例文件进行条件分组 + ``` + group("unittest") { + testonly = true + deps = [ ":GetAppInfoJsTest" ] + } + ``` + > **说明：** 进行条件分组的目的在于执行用例时可以选择性的执行某一种特定类型的用例。 + +#### 编译入口配置文件ohos.build + +当完成用例编译配置文件编写后，需要进一步编写部件编译配置文件，以关联到具体的测试用例。 +``` +"partA": { + "module_list": [ + + ], + "inner_list": [ + + ], + "system_kits": [ + + ], + "test_list": [ + "//system/subsystem/partA/calculator/test:unittest" //配置模块calculator下的test + ] + } +``` +> **说明：** test_list中配置的是对应模块的测试用例。 + +### 测试用例资源配置 +测试依赖资源主要包括测试用例在执行过程中需要的图片文件，视频文件、第三方库等对外的文件资源。 + +依赖资源文件配置步骤如下： +1. 在部件或者模块的test目录下创建resource目录，存放需要的资源文件 + +2. 在resource目录下创建一个ohos_test.xml文件，文件内容格式如下: + ``` + + + + + + + + ``` +3. 在测试用例的编译配置文件中定义resource_config_file进行指引，用来指定对应的资源文件ohos_test.xml + ``` + ohos_unittest("CalculatorSubTest") { + resource_config_file = "//system/subsystem/partA/calculator/test/resource/ohos_test.xml" + } + ``` + >**说明：** + >- target_name: 测试套的名称，定义在测试目录的BUILD.gn中。preparer: 表示该测试套执行前执行的动作。 + >- src="res": 表示测试资源位于test目录下的resource目录下，src="out" 表示位于out/release/$(部件)目录下。 + +## 测试用例执行 +在执行测试用例之前，针对用例使用设备的不同，需要对相应配置进行修改，修改完成即可执行测试用例。 + +### user_config.xml配置 +``` + + + + false + + false + + true + + + + + + + + + + + + + cmd + 115200 + 8 + 1 + 1 + + + + + + + + + + + + + + + + + + +``` +>**说明：** 在执行测试用例之前，若使用HDC连接设备，用例仅需配置设备IP和端口号即可，其余信息均默认不修改。 -## 约束 - -测试工具环境依赖 - -1. python版本\>=3.7.5 -2. paramiko版本\>=2.7.1 -3. setuptools版本\>=40.8.0 -4. rsa版本\>=4.0 -5. NFS版本\>=V4，设备不支持hdc连接，支持串口时使用 -6. pyserial版本\>=3.3，设备不支持hdc连接，支持串口时使用 -7. 运行操作系统：Windows版本\>=Win10，Linux为Ubuntu18.04 - -## 安装 - -依赖python环境： - -1. 安装Linux扩展组件readline， - - 执行如下命令如下： - - ``` - sudo apt-get install libreadline-dev - ``` - - 安装成功提示 - - ``` - Reading package lists... Done - Building dependency tree - Reading state information... Done - libreadline-dev is already the newest version (7.0-3). - 0 upgraded, 0 newly installed, 0 to remove and 11 not upgraded. - ``` - -2. 安装setuptools插件，安装命令如下： - - ``` - pip3 install setuptools - ``` - - 安装成功提示如下： - - ``` - Requirement already satisfied: setuptools in d:\programs\python37\lib\site-packages (41.2.0) - ``` - -3. 安装paramiko插件，安装命令如下： - - ``` - pip3 install paramiko - ``` - - 安装成功提示如下： - - ``` - Installing collected packages: pycparser, cffi, pynacl, bcrypt, cryptography, paramiko - Successfully installed bcrypt-3.2.0 cffi-1.14.4 cryptography-3.3.1 paramiko-2.7.2 pycparser-2.20 pynacl-1.4.0 - ``` - -4. 安装python的rsa插件，安装命令如下： - - ``` - pip3 install rsa - ``` - - 安装成功截图如下： - - ``` - Installing collected packages: pyasn1, rsa - Successfully installed pyasn1-0.4.8 rsa-4.7 - ``` - -5. 需要本地的python安装串口插件pyserial，安装命令如下： - - ``` - pip3 install pyserial - ``` - - 安装成功提示如下： - - ``` - Requirement already satisfied: pyserial in d:\programs\python37\lib\site-packages\pyserial-3.4-py3.7.egg (3.4) - ``` - -6. 如果设备仅支持串口输出测试结果，则需要安装NFS Server - - windows环境下安装，例如安装haneWIN NFS Server1.2.50，下载地址：https://www.hanewin.net/nfs-e.htm 。 - - Linux环境下安装，安装命令如下： - - ``` - sudo apt install nfs-kernel-server - ``` - - 安装成功提示如下： - - ``` - Reading package lists... Done - Building dependency tree - Reading state information... Done - nfs-kernel-server is already the newest version (1:1.3.4-2.1ubuntu5.3). - 0 upgraded, 0 newly installed, 0 to remove and 11 not upgraded. - ``` - - -## 编写测试用例 - -- 测试用例规范 - - 命名规范 - - 测试用例源文件名称和测试套内容保持一致，测试套与用例之间关系1:N，测试套与测试源文件之间关系1:1，每个源文件全局唯一，格式：\[特性\]\_\[功能\]\_\[子功能1\]\_\[子功能1.1\]，子功能支持向下细分。 - - 文件命名采用全小写+下划线方式命名，以test结尾，如demo用例：developertest/examples/calculator。 - - - 测试用例编码规范 - - 开发者测试用例原则上与特性代码编码规范保持一致，另外需要添加必要的用例描述信息，详见[•自测试用例模板](#li2069415903917)。 - - - 测试用例编译配置规范 - - 测试用例采用GN方式编译，配置遵循本开源项目的编译指导[使用](编译构建子系统.md)。 - - -- 测试用例模板 - - 详见测试demo用例：developertest/examples/calculator/test/unittest/common/calculator\_add\_test.cpp。 - -- 测试用例目录规划 - - ``` - subsystem # 子系统，系统组件 - ├── parts # 部件 - │ └── test # 模块测试目录 - │ └── unittest # 单元测试 - │ ├── common # 公共用例 - │ ├── phone # 手机形态用例 - │ └── ivi # 车机形态 - │ └── liteos-a # ipcamera使用liteos内核时的用例 - │ └── moduletest # 模块测试 - │ ├── common - │ ├── phone - │ └── ivi - │ └── liteos-a - └── test # 子系统测试目录 - └── resource # 测试资源 - ├── module - ├── common - ├── phone - ├── ivi - ├── liteos-a - └── systemtest # 系统测试 - ├── common - ├── phone - ├── ivi - ├── liteos-a - ``` - - >![](public_sys-resources/icon-note.gif) **说明：** - >其中phone，ivi，liteos-a仅不同设备形态举例，如区分手机，车机，IPCamera等不同形态设备，对于同一特性在不同开发板上，如果用例没有差异，则用例放置common目录下，如果同一特性，用例区分不同设备形态，可能包含内核差异，芯片平台差异，则用例以目录区分。 - -- 编写测试用例步骤 - 1. 添加测试用例文件头注释信息。 - 2. 引用gtest头文件和ext命名空间。 - 3. 添加被测试类的头文件。 - 4. 定义测试套（测试类）。 - 5. 实现该测试套具体的测试用例，包括用例注释和用例逻辑实现。 - 6. 编写测试用例编译配置。 - - >![](public_sys-resources/icon-note.gif) **说明：** - >\*样例参考： - >仅支持串口设备形态编译示例：developertest/examples/lite/cxx\_demo/test/unittest/common/calc\_subtraction\_test.cpp。 - >支持hdc连接的设备形态编译示例：developertest/examples/calculator/test/unittest/common/calculator\_add\_test.cpp。 - >注意点如下： - >a、SetUp & TearDown是针对该测试套下每条用例执行前和执行后的处理逻辑 - >b、SetUpTestCase & TearDownTestCase是针对该测试套下所有用例执行前和执行后的处理逻辑 - >c、HWTEST的使用：特点：只适合做简单测试（执行不依赖Setup & Teardown）缺点：多个测试场景需要相同数据配置的情况不适用，测试用例之间可能相互影响，不具备独立性 - >d、使用printf函数打印日志 - - -- 编写测试用例编译文件 - - 定义测试用例编译构建目标。 - 1. 添加测试用例编译文件头注释信息。 - 2. 导入测试用例编译模板文件。 - 3. 指定测试用例文件的输出路径。 - 4. 配置测试用例编译依赖包含目录。 - 5. 指定测试用例编译目标输出的文件名称。 - 6. 编写具体的测试用例编译脚本（添加需要参与编译的源文件、配置和依赖 ）。 - 7. 对目标测试用例文件进行条件分组（分组名称固定为：unittest/moduletest\)。 - - - 如果存在多个测试套，定义公共编译配置。 - - 将测试用例添加到构建系统中。 - - >![](public_sys-resources/icon-note.gif) **说明：** - >\*样例参考： - >1、仅支持串口设备形态编译示例： - >用例编译配置：developertest/examples/lite/cxx\_demo/test/unittest/common/BUILD.gn - >编译入口配置：developertest/examples/lite/BUILD.gn - >2、支持hdc连接的设备形态编译示例： - >用例编译配置：developertest/examples/calculator/test/unittest/common/BUILD.gn - >编译入口配置：developertest/examples/ohos.build - - -- 编写测试用例资源 - 1. 在部件或者模块的test目录下创建resource目录。 - 2. 在resource目录下创建形态目录，如phone。 - 3. 在设备形态目录下创建一个以模块名命名的文件夹，如testmodule。 - 4. 在模块目录下创建一个ohos\_test.xml文件，文件内容格式如下 - - ``` - - - - - - - - ``` - - 5. 在测试用例的编译配置文件中定义resource\_config\_file，用来指定对应的资源文件ohos\_test.xml。 - - >![](public_sys-resources/icon-note.gif) **说明：** - >如上资源文件功能：将resource目录下的test.txt文件通过hdc push命令推送到被测设备的/data/test/resource目录下。 - - 6. ohos\_test.xml文件标签说明如下： - - >![](public_sys-resources/icon-note.gif) **说明：** - >target\_name：测试单元的名字，通常定义在测试目录的BUILD.gn中。 - >preparer：表示该测试单元执行前执行的动作。 - >cleaner：表示测试单元执行结束后的动作。 - >特别的，src=”res” 表示测试资源位于子系统根目录的resource目录， src=“out“ 表示out/release/$\(子系统名\)目录。 - - -- 测试用例级别定义 - - 基本（Level1） - - 重要（Level2） - - 一般（Level3） - - 生僻（Level4） - - -## 使用测试框架 - -- 可选，安装xdevice组件。 - 1. 以Windows环境为例，打开xdevice安装目录：test/xdevice。 - 2. 打开控制台窗口，执行如下命令： - - ``` - python setup.py install - ``` - - 安装成功如下图： - - ``` - Installed d:\programs\python37\lib\site-packages\xdevice-0.0.0-py3.7.egg - Processing dependencies for xdevice==0.0.0 - Finished processing dependencies for xdevice==0.0.0 - ``` - - -- 必选，developertest组件配置。 - - 文件：developertest/config/user\_config.xml。 - - 1. 测试框架通用配置。 - - \[build\] \# 配置测试用例的编译参数，例如： - - ``` - - false - false - true - ... ... - - ``` - - >![](public_sys-resources/icon-note.gif) **说明：** - >测试用例的编译参数说明如下： - >example：是否编译测试用例示例，默认false。 - >version：是否编译测试版本，默认false。 - >testcase：是否编译测试用例，默认true。 - - 2. 支持hdc连接的被测设备。 - - \[device\] \# 配置标签为usb-hdc的环境信息，测试设备的IP地址和hdc映射的端口号，例如： - - ``` - - 192.168.1.1 - 9111 - - - ``` - - 3. 仅支持串口的被测设备。 - - \[board\_info\] \# 开发板配置信息，例如： - - ``` - - hispark - taurus - ipcamera - hb build - - ``` - - >![](public_sys-resources/icon-note.gif) **说明：** - >开发板配置信息如下： - >board\_series：开发板系列，默认hispark。 - >board\_type：开发板类型，默认taurus。 - >board\_product：目标产品，默认ipcamera。 - >build\_command：测试版本和用例的编译命令，默认hb build。 - - \[device\] \# 配置标签为ipcamera的串口信息，COM口和波特率，例如： - - ``` - - - COM1 - cmd - 115200 - 8 - 1 - 1 - - - ``` - - -- 修改developertest组件配置。可选，如果测试用例已完成编译，可以直接指定测试用例的编译输出路径，测试平台执行测试用例时即不会重新编译测试用例。 - - 文件：config/user\_config.xml。 - - 1. \[test\_cases\] \# 指定测试用例的输出路径，编译输出目录，例如： - - ``` - - /home/source_code/out/release/tests - - ``` - - 2. \[NFS\] \# 被测设备仅支持串口时配置，指定NFS的映射路径，host\_dir为PC侧的NFS目录，board\_dir为板侧创建的目录，例如： - - ``` - - D:\nfs - user - - ``` - - -- 测试环境准备（当被测设备仅支持串口时，需要检查）。 - - 系统镜像与文件系统已烧录进开发板，开发板上系统正常运行，在系统模式下，如shell登录时设备提示符OHOS\#。 - - 开发主机和开发板串口连接正常，网口连接正常。 - - 开发主机IP与开发板IP处在同一小网网段，相互可以ping通。 - - 开发主机侧创建空目录用于开发板通过NFS挂载测试用例，并且NFS服务启动正常。 - -- 运行测试套。 - - 启动测试框架，打开test/developertest目录。 - 1. Windows环境启动测试框架。 - - ``` - start.bat - ``` - - 2. Linux环境启动测试框架。 - - ``` - ./strat.sh - ``` - - - - 设备形态选择。 - - 根据实际的开发板选择，设备形态配置：developertest/config/framework\_config.xml。 - - - 执行测试指令。 - 1. 查询测试用例支持的子系统，模块，产品形态以及测试类型，使用show命令。 - - ``` - usage: - show productlist Querying Supported Product Forms - show typelist Querying the Supported Test Type - show subsystemlist Querying Supported Subsystems - show modulelist Querying Supported Modules - ``` - - 2. 执行测试指令示例，其中-t为必选，-ss和-tm为可选字段。 - - ``` - run -t ut -ss test -tm example - ``` - - 3. 参数说明：指定参数可以执行特定特性、模块对应的测试套。 +### Windows环境执行 +#### 测试用例编译 - ``` - usage: run [-h] [-p PRODUCTFORM] [-t [TESTTYPE [TESTTYPE ...]]] - [-ss SUBSYSTEM] [-tm TESTMODULE] [-ts TESTSUIT] - [-tc TESTCASE] [-tl TESTLEVEL] - - optional arguments: - -h, --help show this help message and exit - -p PRODUCTFORM, --productform PRODUCTFORM Specified product form - -t [TESTTYPE [TESTTYPE ...]], --testtype [TESTTYPE [TESTTYPE ...]] - Specify test type(UT,MST,ST,PERF,ALL) - -ss SUBSYSTEM, --subsystem SUBSYSTEM Specify test subsystem - -tm TESTMODULE, --testmodule TESTMODULE Specified test module - -ts TESTSUIT, --testsuite TESTSUIT Specify test suite - -tc TESTCASE, --testcase TESTCASE Specify test case - -tl TESTLEVEL, --testlevel TESTLEVEL Specify test level - ``` +由于Windows环境下无法实现用例编译，因此执行用例前需要在Linux环境下进行用例编译，用例编译命令： +``` +./build.sh --product-name Hi3516DV300 --build-target make_test +``` +编译完成后，测试用例将自动保存在out/ohos-arm-release/packages/phone/images/tests目录下。 + +>说明: Hi3516DV300为当前版本所支持的平台，make_test表示全部用例。根据不同需求，编译选项可进行不同选择： +> - --product-name # 编译产品名称（必选） +> - --build-target # 指定编译目标（可选） + +#### 搭建执行环境 +1. 在Windows环境创建测试框架目录Test，并在此目录下创建testcase目录 + +2. 从Linux环境拷贝测试框架developertest和xdevice到创建的Test目录下，拷贝编译好的测试用例到testcase目录下 + >**说明：** 将测试框架及测试用例从Linux环境移植到Windows环境，以便后续执行。 + +3. 修改user_config.xml + ``` + + + false + + + + D:\Test\testcase\tests + + ``` + >**说明：** ``标签表示是否需要编译用例；``标签表示测试用例查找路径。 + +#### 执行用例 +1. 启动测试框架 + ``` + start.bat + ``` +2. 选择产品形态 + + 进入测试框架，系统会自动提示您选择产品形态，请根据实际的开发板进行选择。例如：Hi3516DV300。 + +3. 执行测试用例 + + 当选择完产品形态，可参考如下指令执行测试用例。 + ``` + run -t UT -ts CalculatorSubTest -tc interger_sub_00l + ``` + 执行命令参数说明： + ``` + -t [TESTTYPE]: 指定测试用例类型，有UT，MST，ST，PERF等。（必选参数） + -tp [TESTTYPE]: 指定部件，可独立使用。 + -tm [TESTTYPE]: 指定模块，不可独立使用，需结合-tp指定上级部件使用。 + -ts [TESTTYPE]: 指定测试套，可独立使用。 + -tc [TESTTYPE]: 指定测试用例，不可独立使用，需结合-ts指定上级测试套使用。 + -h : 帮助命令。 + ``` +### Linux环境执行 +#### 远程端口映射 +为了在Linux远程服务器以及Linux虚拟机两种环境下执行测试用例，需要对端口进行远程映射，以实现与设备的数据通路连接。具体操作如下： +1. HDC Server指令： + ``` + hdc_std kill + hdc_std -m -s 0.0.0.0:8710 + ``` + >**说明：** IP和端口号为默认值。 + +2. HDC Client指令： + ``` + hdc_std -s xx.xx.xx.xx:8710 list targets + ``` + >**说明：** 此处IP填写设备侧IP地址。 + +#### 执行用例 +1. 启动测试框架 + ``` + ./start.sh + ``` +2. 选择产品形态 + + 进入测试框架，系统会自动提示您选择产品形态，请根据实际的开发板进行选择。例如：Hi3516DV300。 + +3. 执行测试用例 + + 测试框架在执行用例时会根据指令找到所需用例，自动实现用例编译，执行过程，完成自动化测试。 + ``` + run -t UT -ts CalculatorSubTest -tc interger_sub_00l + ``` + 执行命令参数说明： + ``` + -t [TESTTYPE]: 指定测试用例类型，有UT，MST，ST，PERF等。（必选参数） + -tp [TESTTYPE]: 指定部件，可独立使用。 + -tm [TESTTYPE]: 指定模块，不可独立使用，需结合-tp指定上级部件使用。 + -ts [TESTTYPE]: 指定测试套，可独立使用。 + -tc [TESTTYPE]: 指定测试用例，不可独立使用，需结合-ts指定上级测试套使用。 + -h : 帮助命令。 + ``` + +## 测试报告日志 +当执行完测试指令，控制台会自动生成测试结果，若需要详细测试报告您可在相应的数据文档中进行查找。 + +### 测试结果 +测试结果输出根路径如下： +``` +test/developertest/reports/xxxx_xx_xx_xx_xx_xx +``` +>**说明：** 测试报告文件目录将自动生成。 +该目录中包含以下几类结果： +| 类型 | 描述| +| ------------ | ------------ | +| result/ |测试用例格式化结果| +| log/plan_log_xxxx_xx_xx_xx_xx_xx.log | 测试用例日志 | +| summary_report.html | 测试报告汇总 | +| details_report.html | 测试报告详情 | +### 测试框架日志 +``` +reports/platform_log_xxxx_xx_xx_xx_xx_xx.log +``` -- 测试框架帮助。 +### 最新测试报告 +``` +reports/latest +``` - 帮助指令，用于查询测试平台支持哪些测试指令。 +## 涉及仓 - ``` - help - ``` +[test\_xdevice](https://gitee.com/openharmony/test_xdevice/blob/master/README_zh.md) -- 退出自测试平台。 - 退出自测试平台，使用如下命令退出测试平台。 - ``` - quit - ``` -## 测试结果与日志 -- 通过在测试框架中执行测试指令，即可以生成测试日志和测试报告。 -- 测试结果 - - 测试用例的结果会直接显示在控制台上，执行一次的测试结果根路径如下： - ``` - reports/xxxx-xx-xx-xx-xx-xx - ``` - - 测试用例格式化结果 - ``` - result/ - ``` - - 测试用例日志 - ``` - log/plan_log_xxxx-xx-xx-xx-xx-xx.log - ``` - - 测试报告汇总 - ``` - summary_report.html - ``` - - 测试报告详情 - ``` - details_report.html - ``` -- 测试框架日志 - ``` - reports/platform_log_xxxx-xx-xx-xx-xx-xx.log - ``` -- 最新测试报告 - ``` - reports/latest - ``` -## 涉及仓 -**测试子系统** -test\_developertest -test\_xdevice -test\_xdevice\_extension diff --git a/zh-cn/release-notes/OpenHarmony-v3.0-LTS.md b/zh-cn/release-notes/OpenHarmony-v3.0-LTS.md new file mode 100644 index 0000000000000000000000000000000000000000..9d1001e9fb52e0d1bb45acf337fc7d892c2f024f --- /dev/null +++ b/zh-cn/release-notes/OpenHarmony-v3.0-LTS.md @@ -0,0 +1,159 @@ +# OpenHarmony 3.0 LTS + +- [版本概述](#版本概述) +- [配套关系](#配套关系) +- [源码获取](#源码获取) +- [更新说明](#更新说明) + - [特性变更](#特性变更) + - [API变更](#api变更) + - [芯片及开发板适配](#芯片及开发板适配) +- [修复缺陷列表](#修复缺陷列表) + +## 版本概述 + +当前版本在OpenHarmony 2.2 Beta2的基础上，针对标准系统、轻量系统和小型系统更新内容： + +### 标准系统新增特性功能 + +- 用户程序框架支持服务能力(ServiceAbility，DataAbility)和线程模型。 + +- 支持文件安全访问，即文件转成URI和解析URI打开文件的能力。 + +- 支持设备管理PIN码认证的基本能力。 + +- 支持关系型数据库、分布式数据管理基础能力。 + +- 支持方舟JS编译工具链和运行时，支持OpenHarmony JS UI框架应用开发和运行。 + +- 支持远程绑定ServiceAbility、FA跨设备迁移能力。 + +- 支持应用通知订阅与应用通知消息跳转能力。 + +- 支持输入法框架及支持输入基础英文字母、符号和数字。 + +- 相机应用支持预览、拍照和录像基础能力。 + +- 支持CS基础通话、GSM短信能力。 + +- 支持定时器能力，提供定时时区管理能力。 + +- 在标准设备间的分布式组网下，提供应用跨设备访问对端资源或能力时的权限校验功能。 + +### 轻量和小型系统新增特性功能 + +- 新增轻量级分布式能力增强，支持从轻量级系统启动标准系统上的Ability。 + +- 软总线能力增强支持，提供认证通道传输能力，用于设备绑定。 + +- 轻量级全球化能力增强支持，新增31种语言支持。 + +- 轻量系统上新增权限属性字段及其写入接口，上层应用可通过该字段实现相关业务。 + + +## 配套关系 + +**表1** 版本软件和工具配套关系 + +| 软件 | 版本 | 备注 | +| -------- | -------- | -------- | +| OpenHarmony | 3.0 LTS | NA | +| HUAWEI DevEco Studio（可选） | 3.0 Beta1 | OpenHarmony应用开发推荐使用。 | +| HUAWEI DevEco Device Tool（可选） | 2.2 Beta2 | OpenHarmony智能设备集成开发环境推荐使用。 | + + +## 源码获取 + +**方式** **一（推荐）** + +通过repo + ssh 下载（需注册公钥，请参考[码云帮助中心](https://gitee.com/help/articles/4191)）。 + +```undefined +repo init -u git@gitee.com:openharmony/manifest.git -b refs/tags/OpenHarmony-v3.0-LTS --no-repo-verify +repo sync -c +repo forall -c 'git lfs pull' +``` + +**方式二** + +通过repo + https 下载。 + +```undefined +repo init -u https://gitee.com/openharmony/manifest.git -b refs/tags/OpenHarmony-v3.0-LTS --no-repo-verify +repo sync -c +repo forall -c 'git lfs pull' +``` + + +## 更新说明 + +本版本在OpenHarmony 2.2 Beta2的基础上有如下变更。 + + +### 特性变更 + +**表2** 版本新增特性表 + +| 子系统名称 | 标准系统 | 轻量、小型系统 | +| -------- | -------- | -------- | +| 分布式任务调度 | - 新增远程绑定ServiceAbility基本功能
- 新增FA跨设备迁移功能
- 新增组件visible属性权限校验功能 | 支持从轻量级系统启动标准系统上的Ability | +| 图形 | 对于带有GPU模块的芯片平台，支持使用GPU进行渲染合成，以提升图形性能，降低CPU负载 | NA | +| 分布式硬件 | - 支持基于分布式软总线认证通道的PIN码认证正式方案
- 支持PIN码认证授权提示弹窗
- 支持PIN码显示弹窗
- 支持PIN码输入弹窗 | NA | +| 事件通知 | - 支持应用通知订阅 & 取消订阅
- 支持应用侧发布&取消本地文本、图片通知
- 支持应用通知消息跳转能力
- 支持应用侧增加&删除slot
- 支持通知流控处理、死亡监听能力 | NA | +| 分布式软总线 | - 支持基于CoAP的主动发现和被动发现，支持通过BLE主动发现连接
- 支持基于WLAN网络的手动入网和自组网
- 支持基于WLAN网络的消息、字节、文件传输 | - 支持基于CoAP的主动发现和被动发现
- 支持基于WLAN网络的手动入网和自组网
- 支持基于WLAN网络的消息、字节、文件传输 | +| 全球化 | 提供获取系统设置的语言、地区、区域信息，以及获取语言和地区的本地化名称的能力 | 轻量级全球化能力增强支持，新增31种语言支持 | +| 系统应用 | 桌面：
- 全新架构优化
SystemUI：
- 通知中心以及普通文本通知功能
- 控制中心：WLAN、飞行模式开关、亮度调节、声音调节
- 全新架构优化
设置：
- 全新架构优化
相机：
- 支持基础拍照、录像功能
- 分布式协同：拉起对端相机并拍照 | NA | +| 语言编译运行时 | 新增方舟JS编译工具链和运行时，支持OpenHarmony JS UI框架应用开发和运行 | NA | +| 媒体 | - 相机组件中新增录像功能
- 新增音频录制功能接口 | 新增支持播放mp3格式文件 | +| JS UI框架 | - 支持迁移相关生命周期
- 支持系统服务弹窗
- 支持使用JS开发service类型和data类型的Ability | NA | +| 内核 | 新增支持OpenHarmony Common Linux Kernel 5.10 | 轻量系统新增支持OpenHarmony Common Linux Kernel 5.10 | +| DFX | - 提供HiAppEvent应用事件打点的JS API
- 提供HiCollie卡死检测框架
- 提供HiTrace分布式调用链基础库 | NA | +| 驱动 | 新增I2S、陀螺仪、压力、霍尔驱动模型 | NA | +| 安全 | 在标准设备间的分布式组网下，提供应用跨设备访问对端资源或能力时的权限校验功能 | 轻量系统上新增权限属性字段及其写入接口，上层应用可通过该字段实现相关业务（如弹框授权场景下，用户拒绝授权后不再弹框） | +| 电话服务 | - 搜网功能模块：支持飞行模式设置、搜网模式设置（包括手动搜网和自动搜网）、LTE制式信号强度获取
- SIM功能模块：支持PIN/PUK解锁、卡文件信息获取、卡账户信息的存取、卡状态获取
- 蜂窝通话功能模块：支持通话前后台切换、来电静音、呼叫保持与恢复、三方通话、DTMF
- 短彩信功能模块：支持SIM卡短信的增删改查 | NA | +| 分布式文件 | - 支持f2fs、ext4文件系统不同参数设置的分区挂载能力
- 支持文件安全访问，即文件转成URI和解析URI打开文件的能力
- 支持系统应用访问公共目录的能力 | NA | +| 分布式数据管理 | - 支持关系型数据库JS基础能力（增删改查等）
- 支持分布式数据管理JS基础能力（增删改查等） | NA | +| 编译构建 | - 支持编译arm64形态产品
- 支持编译ohos-sdk | NA | +| 用户程序框架 | - 支持 ServiceAbility JS开发能力
- 支持 DataAbility JS开发能力
- HAP支持多Ability声明
- 本地Ability迁移到远程设备
- 应用任务栈保存与恢复
- JS 利用Zip库实现文件压缩和解压缩 | NA | +| 杂散软件服务 | 支持定时器能力，提供定时时区管理能力 | NA | + + +### API变更 + +API变更请参考：[JS API 差异报告](api-change/v3.0-LTS/js-apidiff-v3.0-lts.md) + + +### 芯片及开发板适配 + +芯片及开发板适配状态请参考[SIG-Devboard](https://gitee.com/openharmony/community/blob/master/sig/sig-devboard/sig_devboard_cn.md)信息。 + + +## 修复缺陷列表 + +**表3** 轻量和小型系统解决的缺陷ISSUE列表 + +| ISSUE单号 | 问题描述 | +| -------- | -------- | +| [I45AVP](https://gitee.com/openharmony/hiviewdfx_hilog/issues/I45AVP) | 执行hilog落盘之后hilog命令执行失败 | +| [I47EPA](https://gitee.com/openharmony/appexecfwk_appexecfwk_lite/issues/I47EPA?from=project-issue) | 入参为空或无效时，GetBundleSize接口返回错误 | +| [I434AD](https://gitee.com/openharmony/multimedia_camera_lite/issues/I434AD) | HI3516DV300轻量级系统常驻内存超基线 | +| [I434P1](https://gitee.com/openharmony/multimedia_camera_lite/issues/I434P1) | HI3518EV300轻量级系统常驻内存超基线 | +| [I46I6K](https://gitee.com/openharmony/multimedia_media_lite/issues/I46I6K?from=project-issue) | 多媒体子系统相关代码存在安全编码问题 | +| [I46E6S](https://gitee.com/openharmony/kernel_liteos_m/issues/I46E6S?from=project-issue) | 轻量级内核模块编译添加-Werror编译选项 | +| [I47ETO](https://gitee.com/openharmony/appexecfwk_appexecfwk_lite/issues/I47ETO?from=project-issue -) | 权限校验没有生效，使用测试 bin 直接调用无权限 hap，期望查询失败返回 0，结果查询成功 | +| [I48A2I](https://gitee.com/openharmony/drivers_peripheral/issues/I48A2I) | HI3516DV300轻量级版本调用AllocMem接口测试，单板挂死 | +| [I42LCU](https://gitee.com/openharmony/kernel_liteos_m/issues/I42LCU) | 集成测试开发板移植指导中需增加线程不足的确认方法和配置线程个数的方法 | +| [I3IPD7](https://gitee.com/openharmony/kernel_liteos_m/issues/I3IPD7) | 不支持osThreadExit/join函数需要在头文件中说明 | +| [I3M12H](https://gitee.com/openharmony/kernel_liteos_a/issues/I3M12H) | 集成测试发送两个不同的信号，sigwait第二次等到的仍是第一个信号 | +| [I47X2Z](https://gitee.com/openharmony/kernel_liteos_a/issues/I47X2Z?from=project-issue) | 集成测试 在执行ActsIpcShmTest.bin脚本，出现大量未释放的共享内存 | + +**表4** 标准系统解决的缺陷ISSUE列表 + +| ISSUE单号 | 问题描述 | +| -------- | -------- | +| [I46A6H](https://gitee.com/openharmony/ace_ace_engine/issues/I46A6H) | XTS压测过程中libace.z.so异常导致ohos.samples.flashlight出现cppcrash异常 | +| [I48HLN](https://gitee.com/openharmony/app_samples/issues/I48HLN) | BUG-[Demo&应用子系统] [ JsCanvas] 清除的button功能未生效 | +| [I46HH7](https://gitee.com/openharmony/drivers_peripheral/issues/I46HH7) | 【OpenHarmony 3.0.0.3】【驱动子系统】L2单板wifi测试用例失败 | +| [I4312A](https://gitee.com/openharmony/communication_dsoftbus/issues/I4312A) | 【2.2 Beta2】【软总线】已组网，断1端网络后，自组网失败(GetAllNodeDeviceInfo返回null) | +| [I43WIJ](https://gitee.com/openharmony/communication_dsoftbus/issues/I43WIJ) | 【2.2 Beta2】【软总线】已组网，一端切换网络再切回，过程中组网未下线(无上下线回调) | +| [I43KLC](https://gitee.com/openharmony/communication_dsoftbus/issues/I43KLC) | 【2.2 Beta2】【软总线】注册节点状态监听，设备上线，设备再离线，offline回调调用了2次 | +| [I47WTY](https://gitee.com/openharmony/communication_dsoftbus/issues/I47WTY) | 【3.0 beta1】【软总线-传输】session id范围校验不严谨（有效范围1-16，校验时判断的是>17） | diff --git a/zh-cn/release-notes/Readme.md b/zh-cn/release-notes/Readme.md index 04486fbf7d6a6172fe990967d46eca3caa6f941b..814b8be8e910d4ab9d611c833a70bdc49a53b8be 100644 --- a/zh-cn/release-notes/Readme.md +++ b/zh-cn/release-notes/Readme.md @@ -1,5 +1,8 @@ # OpenHarmony Release Notes +[OpenHarmony v3.0 LTS (2021-09-30)](OpenHarmony-v3.0-LTS.md) + ## OpenHarmony 2.x Releases + - [OpenHarmony v2.2 beta2 (2021-08-04)](OpenHarmony-v2.2-beta2.md) - [OpenHarmony 2.0 Canary (2021-06-02)](OpenHarmony-2-0-Canary.md) ## OpenHarmony 1.x Releases diff --git a/zh-cn/release-notes/api-change/v3.0-LTS/js-apidiff-v3.0-lts.md b/zh-cn/release-notes/api-change/v3.0-LTS/js-apidiff-v3.0-lts.md new file mode 100644 index 0000000000000000000000000000000000000000..da19b9959afb10882da6e7263bd7db370312f88f --- /dev/null +++ b/zh-cn/release-notes/api-change/v3.0-LTS/js-apidiff-v3.0-lts.md @@ -0,0 +1,625 @@ +# JS API 差异报告 +OpenHarmony 3.0 LTS相较于OpenHarmony 2.2 Beta2版本的API变更如下: +## 标准系统接口变更 + +| 模块名称 | 接口名称 | 变更类型 | 变更说明 | +| -------- | -------- | -------- | -------- | +|语言编译器运行时-worker|postMessage(obj):void|新增|宿主线程与worker通信，传递数据| +|语言编译器运行时-worker|postMessage(message: Object, options?: PostMessageOptions):void|新增|宿主线程与worker通信，转移arrayBuffer的数据控制权| +|语言编译器运行时-worker|terminate():void|新增|宿主线程主动停止worker| +|语言编译器运行时-worker|on(type: string, listener: EventListener): void|新增|向worker添加回调接口| +|语言编译器运行时-worker|once(type: string, listener: EventListener): void|新增|向worker添加回调接口，并且在回调一次会释放回调| +|语言编译器运行时-worker|off(type: string, listener?: EventListener): void|新增|删除worker已添加的回调接口| +|语言编译器运行时-worker|addEventListener(type: string, listener: EventListener): void|新增|向worker添加回调接口| +|语言编译器运行时-worker|removeEventListener(type: string, listener?: EventListener): void|新增|删除worker已添加的回调接口| +|语言编译器运行时-worker|removeAllListener(): void|新增|删除worker所有的回调接口| +|语言编译器运行时-worker|dispatchEvent(event: Event): boolean|新增|向worker发送指定事件，触发回调接口| +|语言编译器运行时-parentPort|postMessage(obj):void|新增|worker与宿主线程通信，传递数据| +|语言编译器运行时-parentPort|postMessage(message: Object, options?: PostMessageOptions):void|新增|worker与宿主线程通信，转移arrayBuffer的数据控制权| +|语言编译器运行时-parentPort|close(): void|新增|worker主动终止| +|语言编译器运行时-Util|printf(format: string, ...args: Object[]): string|新增|-| +|语言编译器运行时-Util|getErrorString(errno: number): string|新增|-| +|语言编译器运行时-Util|callbackWrapper(original: Function): (err: Object, value: Object) => void|新增|-| +|语言编译器运行时-Util|promiseWrapper(original: (err: Object, value: Object) => void): Object|新增|-| +|语言编译器运行时-Util|new TextDecoder([encoding[, options]])|新增|-| +|语言编译器运行时-Util|decode([input[, options]]):string|新增|-| +|语言编译器运行时-Util|new TextEncoder()|新增|-| +|语言编译器运行时-Util|encode(input?: string): Uint8Array;|新增|-| +|语言编译器运行时-Util|"encodeInto(input: string,dest: Uint8Array,): { read: number; written: number };"|新增|-| +|语言编译器运行时-Util|readonly encoding: string;|新增|-| +|语言编译器运行时-Util|readonly fatal: boolean;|新增|-| +|语言编译器运行时-Util|readonly ignoreBOM = false;|新增|-| +|语言编译器运行时-Util|readonly encoding = "utf-8";|新增|-| +|语言编译器运行时-URL|new URL(url: string, base?: string/URL)|新增|-| +|语言编译器运行时-URL|toString(): string;|新增|-| +|语言编译器运行时-URL|toJSON(): string;|新增|-| +|语言编译器运行时-URL|new URSearchParams()|新增|-| +|语言编译器运行时-URL|new URSearchParams(string)|新增|-| +|语言编译器运行时-URL|new URSearchParams(obj)|新增|-| +|语言编译器运行时-URL|new URSearchParams(iterable)|新增|-| +|语言编译器运行时-URL|append(name: string, value: string): void;|新增|-| +|语言编译器运行时-URL|delete(name: string): void;|新增|-| +|语言编译器运行时-URL|entries(): IterableIterator<[string, string]>;|新增|-| +|语言编译器运行时-URL|forEach(callbackfn: (value: string, key: string, parent: this) => void, thisArg?: any,): void;|新增|-| +|语言编译器运行时-URL|get(name: string): string / null;|新增|-| +|语言编译器运行时-URL|getAll(name: string): string[];|新增|-| +|语言编译器运行时-URL|has(name: string): boolean;|新增|-| +|语言编译器运行时-URL|keys(): IterableIterator;|新增|-| +|语言编译器运行时-URL|set(name: string, value: string): void;|新增|-| +|语言编译器运行时-URL|sort():void;|新增|-| +|语言编译器运行时-URL|toString():string|新增|-| +|语言编译器运行时-URL|values(): IterableIterator;|新增|-| +|语言编译器运行时-URL|URSearchParams[Symbol.iterator]()|新增|-| +|语言编译器运行时-URL|hash: string;|新增|-| +|语言编译器运行时-URL|host: string;|新增|-| +|语言编译器运行时-URL|hostname: string;|新增|-| +|语言编译器运行时-URL|href: string;|新增|-| +|语言编译器运行时-URL|readonly origin: string;|新增|-| +|语言编译器运行时-URL|password: string;|新增|-| +|语言编译器运行时-URL|pathname: string;|新增|-| +|语言编译器运行时-URL|port: string;|新增|-| +|语言编译器运行时-URL|protocol: string;|新增|-| +|语言编译器运行时-URL|search: string;|新增|-| +|语言编译器运行时-URL|readonly searchParams: URLSearchParams;|新增|-| +|语言编译器运行时-URL|username: string;|新增|-| +|语言编译器运行时-ChildProcess|readonly pid: number;|新增|-| +|语言编译器运行时-ChildProcess|readonly ppid: number;|新增|-| +|语言编译器运行时-ChildProcess|readonly exitCode: number;|新增|-| +|语言编译器运行时-ChildProcess|readonly killed: boolean;|新增|-| +|语言编译器运行时-ChildProcess|wait(): Promise;|新增|-| +|语言编译器运行时-ChildProcess|getOutput(): Promise;|新增|-| +|语言编译器运行时-ChildProcess|getErrorOutput(): Promise;|新增|-| +|语言编译器运行时-ChildProcess|close(): void;|新增|-| +|语言编译器运行时-ChildProcess|kill(signal: number): void;|新增|-| +|语言编译器运行时-process|runCmd(command: string,options?: { timeout : number, killSignal : number / string, maxBuffer : number }): ChildProcess;|新增|-| +|语言编译器运行时-process|getPid(): number;|新增|-| +|语言编译器运行时-process|getPpid(): number;|新增|-| +|语言编译器运行时-process|abort(): void;|新增|-| +|语言编译器运行时-process|on(type: string, listener: EventListener): void;|新增|-| +|语言编译器运行时-process|exit(code?:number): void;|新增|-| +|语言编译器运行时-process|cwd(): string;|新增|-| +|语言编译器运行时-process|chdir(dir: string): void;|新增|-| +|语言编译器运行时-process|getEgid(): number;|新增|-| +|语言编译器运行时-process|getEuid(): number;|新增|-| +|语言编译器运行时-process|getGid(): number|新增|-| +|语言编译器运行时-process|getUid(): number;|新增|-| +|语言编译器运行时-process|uptime(): number;|新增|-| +|语言编译器运行时-process|getGroups(): number[];|新增|-| +|语言编译器运行时-process|kill(signal?: number, pid?: number): boolean;|新增|-| +|升级服务子系统-Updater|checkNewVersion(): Promise;|新增| -| +|升级服务子系统-Updater|rebootAndCleanUserData(callback: AsyncCallback): void;|新增| -| +|升级服务子系统-Updater|rebootAndCleanCache(): Promise;|新增| -| +|升级服务子系统-Updater|function getUpdaterFromOther(device: string, updateType?: UpdateTypes): Updater;|新增| -| +|升级服务子系统-Updater|cancel(): void;|新增| -| +|升级服务子系统-Updater|upgrade(): void;|新增| -| +|升级服务子系统-Updater|off(eventType: 'downloadProgress', callback?: UpdateProgressCallback): void;|新增| -| +|升级服务子系统-Updater|getUpdatePolicy(callback: AsyncCallback): void;|新增| -| +|升级服务子系统-Updater|function getUpdaterForOther(device: string, updateType?: UpdateTypes): Updater;|新增| -| +|升级服务子系统-Updater|setUpdatePolicy(policy: UpdatePolicy, callback: AsyncCallback): void;|新增| -| +|升级服务子系统-Updater|getNewVersionInfo(): Promise;|新增| -| +|升级服务子系统-Updater|function getUpdater(updateType?: UpdateTypes): Updater;|新增| -| +|升级服务子系统-Updater|applyNewVersion(callback: AsyncCallback): void;|新增| -| +|升级服务子系统-Updater|rebootAndCleanUserData(): Promise;|新增| -| +|升级服务子系统-Updater|off(eventType: 'verifyProgress', callback?: UpdateProgressCallback): void;|新增| -| +|升级服务子系统-Updater|on(eventType: 'upgradeProgress', callback: UpdateProgressCallback): void;|新增| -| +|升级服务子系统-Updater|checkNewVersion(callback: AsyncCallback): void;|新增| -| +|升级服务子系统-Updater|on(eventType: 'downloadProgress', callback: UpdateProgressCallback): void;|新增| -| +|升级服务子系统-Updater|getUpdatePolicy(): Promise;|新增| -| +|升级服务子系统-Updater|download(): void;|新增| -| +|升级服务子系统-Updater|off(eventType: 'upgradeProgress', callback?: UpdateProgressCallback): void;|新增| -| +|升级服务子系统-Updater|getNewVersionInfo(callback: AsyncCallback): void;|新增| -| +|升级服务子系统-Updater|on(eventType: 'verifyProgress', callback: UpdateProgressCallback): void;|新增| -| +|升级服务子系统-Updater|verifyUpdatePackage(upgradeFile: string, certsFile: string): void;|新增| -| +|升级服务子系统-Updater|setUpdatePolicy(policy: UpdatePolicy): Promise;|新增| -| +|升级服务子系统-Updater|rebootAndCleanCache(callback: AsyncCallback): void;|新增| -| +|升级服务子系统-Updater|applyNewVersion(): Promise;|新增| -| +|全球化子系统-I18n|getSystemLanguages(): Array;|新增| -| +|全球化子系统-I18n|getSystemCountries(language: string): Array;|新增| -| +|全球化子系统-I18n|isSuggested(language: string, region?: string): boolean;|新增| -| +|全球化子系统-I18n|getSystemLanguage(): string;|新增| -| +|全球化子系统-I18n|setSystemLanguage(language: string);|新增| -| +|全球化子系统-I18n|getSystemRegion(): string;|新增| -| +|全球化子系统-I18n|setSystemRegion(region: string);|新增| -| +|全球化子系统-I18n|"getDisplayCountry(locale: string, displayLocale: string,sentenceCase?: boolean): string;"|新增| -| +|全球化子系统-I18n|getSystemLocale(): string;|新增| -| +|全球化子系统-I18n|setSystemLocale(locale: string);|新增| -| +|全球化子系统-I18n|"getDisplayLanguage(locale: string, displayLocale: string,sentenceCase?: boolean): string;"|新增| -| +|电话子系统-radio|getNetworkState(callback: AsyncCallback): void;getNetworkState(slotId: number, callback: AsyncCallback): void;getNetworkState(slotId?: number): Promise;|新增| -| +|电话子系统-sim|getSimAccountInfo(slotId: number, callback: AsyncCallback): void;getSimAccountInfo(slotId: number): Promise;|新增| -| +|电话子系统-sim|getDefaultVoiceSlotId(callback: AsyncCallback): void;getDefaultVoiceSlotId(): Promise;|新增| -| +|电话子系统-sim|getSimSpn(slotId: number, callback: AsyncCallback): void;getSimSpn(slotId: number): Promise;|新增| -| +|电话子系统-sim|getISOCountryCodeForSim(slotId: number, callback: AsyncCallback): void;getISOCountryCodeForSim(slotId: number): Promise;|新增| -| +|电话子系统-sim|getSimIccId(slotId: number, callback: AsyncCallback): void;getSimIccId(slotId: number): Promise;|新增| -| +|电话子系统-sim|getSimGid1(slotId: number, callback: AsyncCallback): void;getSimGid1(slotId: number): Promise;|新增| -| +|电话子系统-sim|getISOCountryCodeForSim(slotId: number, callback: AsyncCallback): void;getISOCountryCodeForSim(slotId: number): Promise;|新增| -| +|电话子系统-sim|getSimOperatorNumeric(slotId: number, callback: AsyncCallback): void;getSimOperatorNumeric(slotId: number): Promise;|新增| -| +|电话子系统-sim|getSimSpn(slotId: number, callback: AsyncCallback): void;getSimSpn(slotId: number): Promise;|新增| -| +|电话子系统-sim|getSimIccId(slotId: number, callback: AsyncCallback): void;getSimIccId(slotId: number): Promise;|新增| -| +|电话子系统-sim|getIMSI(slotId: number, callback: AsyncCallback): void;getIMSI(slotId: number): Promise;|新增| -| +|电话子系统-call|combineConference(callId: number, callback: AsyncCallback): void;combineConference(callId: number): Promise;|新增| -| +|电话子系统-call|startDTMF(callId: number, character: string, callback: AsyncCallback): void;startDTMF(callId: number, character: string): Promise;|新增| -| +|电话子系统-call|stopDTMF(callId: number, callback: AsyncCallback): void;stopDTMF(callId: number): Promise;|新增| -| +|电话子系统-sim|setDefaultVoiceSlotId(slotId: number, callback: AsyncCallback): void;setDefaultVoiceSlotId(slotId: number): Promise;|新增| -| +|电话子系统-sim|unlockPin(slotId: number, pin: string, callback: AsyncCallback): void;unlockPin(slotId: number, pin: string): Promise;|新增| -| +|电话子系统-sim|alterPin(slotId: number, newPin: string, oldPin: string, callback: AsyncCallback): void;alterPin(slotId: number, newPin: string, oldPin: string): Promise;|新增| -| +|电话子系统-sim|setLockState(slotId: number, pin: string, enable: number, callback: AsyncCallback): void;setLockState(slotId: number, pin: string, enable: number): Promise;|新增| -| +|电话子系统-sim|getSimState(slotId: number, callback: AsyncCallback): void;getSimState(slotId: number): Promise;|新增| -| +|电话子系统-sim|getSimState(slotId: number, callback: AsyncCallback): void;getSimState(slotId: number): Promise;|新增| -| +|电话子系统-sim|getSimState(slotId: number, callback: AsyncCallback): void;getSimState(slotId: number): Promise;|新增| -| +|电话子系统-sim|getSimState(slotId: number, callback: AsyncCallback): void;getSimState(slotId: number): Promise;|新增| -| +|电话子系统-call|isEmergencyPhoneNumber(phoneNumber: string, callback: AsyncCallback): void;isEmergencyPhoneNumber(phoneNumber: string, options: EmergencyNumberOptions, callback: AsyncCallback): void;isEmergencyPhoneNumber(phoneNumber: string, options?: EmergencyNumberOptions): Promise;|新增| -| +|电话子系统-sms|createMessage(pdu: Array, specification: string, callback: AsyncCallback): void;createMessage(pdu: Array, specification: string): Promise;|新增| -| +|电话子系统-call|hasCall(callback: AsyncCallback): void;hasCall(): Promise;|新增| -| +|电话子系统-sms|sendMessage(options: SendMessageOptions): void;|新增| -| +|电话子系统-call|dial(phoneNumber: string, callback: AsyncCallback): void;dial(phoneNumber: string, options: DialOptions, callback: AsyncCallback): void;dial(phoneNumber: string, options?: DialOptions): Promise;|新增| -| +|电话子系统-call|interface DialOptions {extras?: boolean; }|新增| -| +|电话子系统-sms|sendMessage(options: SendMessageOptions): void;|新增| -| +|电话子系统-sms|getDefaultSmsSlotId(callback: AsyncCallback): void;getDefaultSmsSlotId(): Promise;|新增| -| +|电话子系统-call|formatPhoneNumber(phoneNumber: string, callback: AsyncCallback): void;formatPhoneNumber(phoneNumber: string, options: NumberFormatOptions, callback: AsyncCallback): void;formatPhoneNumber(phoneNumber: string, options?: NumberFormatOptions): Promise;|新增| -| +|电话子系统-call|formatPhoneNumber(phoneNumber: string, callback: AsyncCallback): void;formatPhoneNumber(phoneNumber: string, options: NumberFormatOptions, callback: AsyncCallback): void;formatPhoneNumber(phoneNumber: string, options?: NumberFormatOptions): Promise;|新增| -| +|电话子系统-call|formatPhoneNumberToE164(phoneNumber: string, countryCode: string, callback: AsyncCallback): void;formatPhoneNumberToE164(phoneNumber: string, countryCode: string): Promise;|新增| -| +|电话子系统-sms|setDefaultSmsSlotId(slotId: number, callback: AsyncCallback): void;setDefaultSmsSlotId(slotId: number): Promise;|新增| -| +|电话子系统-call|getCallState(callback: AsyncCallback): void;getCallState(): Promise;|新增| -| +|电话子系统-sms|setSmscAddr(slotId: number, smscAddr: string, callback: AsyncCallback): void;setSmscAddr(slotId: number, smscAddr: string): Promise;|新增| -| +|电话子系统-sms|getSmscAddr(slotId: number, callback: AsyncCallback): void;getSmscAddr(slotId: number): Promise;|新增| -| +|电话子系统-sms|addSimMessage(options: SimMessageOptions, callback: AsyncCallback): void;addSimMessage(options: SimMessageOptions): Promise;|新增| -| +|电话子系统-sms|delSimMessage(slotId: number, msgIndex: number, callback: AsyncCallback): void;delSimMessage(slotId: number, msgIndex: number): Promise;|新增| -| +|电话子系统-radio|getISOCountryCodeForNetwork(slotId: number, callback: AsyncCallback): void;getISOCountryCodeForNetwork(slotId: number): Promise;|新增| -| +|电话子系统-sms|updateSimMessage(options: UpdateSimMessageOptions, callback: AsyncCallback): void;updateSimMessage(options: UpdateSimMessageOptions): Promise;|新增| -| +|电话子系统-radio|getISOCountryCodeForNetwork(slotId: number, callback: AsyncCallback): void;getISOCountryCodeForNetwork(slotId: number): Promise;|新增| -| +|电话子系统-sms|getAllSimMessages(slotId: number, callback: AsyncCallback>): void;getAllSimMessages(slotId: number): Promise>;|新增| -| +|电话子系统-call|isInEmergencyCall(callback: AsyncCallback): void;isInEmergencyCall(): Promise;|新增| -| +|电话子系统-sms|setCBConfig(options: CBConfigOptions, callback: AsyncCallback): void;setCBConfig(options: CBConfigOptions): Promise;|新增| -| +|电话子系统-call|answer(callId: number, callback: AsyncCallback): void;answer(callId: number): Promise;|新增| -| +|电话子系统-call|hangup(callId: number, callback: AsyncCallback): void;hangup(callId: number): Promise;|新增| -| +|电话子系统-call|reject(callId: number, callback: AsyncCallback): void;reject(callId: number, options: RejectMessageOptions, callback: AsyncCallback): void;reject(callId: number, options?: RejectMessageOptions): Promise;|新增| -| +|电话子系统-call|holdCall(callId: number, callback: AsyncCallback): void;holdCall(callId: number): Promise;|新增| -| +|电话子系统-call|unHoldCall(callId: number, callback: AsyncCallback): void;unHoldCall(callId: number): Promise;|新增| -| +|电话子系统-call|switchCall(callId: number, callback: AsyncCallback): void;switchCall(callId: number): Promise;|新增| -| +|电话子系统-radio|setNetworkSelectionMode(options: NetworkSelectionModeOptions, callback: AsyncCallback): void;setNetworkSelectionMode(options: NetworkSelectionModeOptions): Promise;|新增| -| +|电话子系统-radio|getNetworkSearchInformation(slotId: number, callback: AsyncCallback): void;getNetworkSearchInformation(slotId: number): Promise;|新增| -| +|电话子系统-radio|getNetworkSelectionMode(slotId: number, callback: AsyncCallback): void;getNetworkSelectionMode(slotId: number): Promise;|新增| -| +|电话子系统-radio|isRadioOn(callback: AsyncCallback): void;isRadioOn(): Promise;|新增| -| +|电话子系统-radio|turnOnRadio(callback: AsyncCallback): void;turnOnRadio(): Promise;|新增| -| +|电话子系统-radio|turnOffRadio(callback: AsyncCallback): void;turnOffRadio(): Promise;|新增| -| +|电话子系统-radio|getSignalInformation(slotId: number, callback: AsyncCallback>): void;getSignalInformation(slotId: number): Promise>;|新增| -| +|电话子系统-radio|getRadioTech(slotId: number, callback: AsyncCallback<{psRadioTech: RadioTechnology, csRadioTech: RadioTechnology}>): void;getRadioTech(slotId: number): Promise<{psRadioTech: RadioTechnology, csRadioTech: RadioTechnology}>;|新增| -| +|电话子系统-radio|getRadioTech(slotId: number, callback: AsyncCallback<{psRadioTech: RadioTechnology, csRadioTech: RadioTechnology}>): void;getRadioTech(slotId: number): Promise<{psRadioTech: RadioTechnology, csRadioTech: RadioTechnology}>;|新增| -| +|电话子系统-radio|getRadioTech(slotId: number, callback: AsyncCallback<{psRadioTech: RadioTechnology, csRadioTech: RadioTechnology}>): void;getRadioTech(slotId: number): Promise<{psRadioTech: RadioTechnology, csRadioTech: RadioTechnology}>;|新增| -| +|数据管理-distributeddata|put(key:string, value:Uint8Array / string / boolean / number, callback: AsyncCallback):void put(key:string, value:Uint8Array / string / boolean / number):Promise|新增| -| +|数据管理-distributeddata|delete(key: string, callback: AsyncCallback): void delete(key: string): Promise|新增| -| +|数据管理-distributeddata|on(event:'dataChange', subType: SubscribeType, observer: Callback): void|新增| -| +|数据管理-distributeddata|get(key:string, callback:AsyncCallback):void get(key:string):Promise|新增| -| +|数据管理-distributeddata|sync(deviceIdList:string[], mode:SyncMode, allowedDelayMs?:number):void|新增| -| +|数据管理-distributeddata|createKVManager(config: KVManagerConfig, callback: AsyncCallback): void;createKVManager(config: KVManagerConfig): Promise;|新增| -| +|数据管理-distributeddata|getKVStore(options: Options, storeId: string): Promise;getKVStore(options: Options, storeId: string, callback: AsyncCallback): void;|新增| -| +|数据管理-distributeddata|on(event:'syncComplete', syncCallback: Callback>):void|新增| -| +|数据管理-rdb|type ValueType = number / string / boolean;|新增| -| +|数据管理-rdb|type ValuesBucket = { [key: string]: ValueType / Uint8Array / null; }|新增| -| +|数据管理-rdb|name: string;|新增| -| +|数据管理-rdb|constructor(name: string)|新增| -| +|数据管理-rdb|equalTo(field: string, value: ValueType): RdbPredicates;|新增| -| +|数据管理-rdb|notEqualTo(field: string, value: ValueType): RdbPredicates;|新增| -| +|数据管理-rdb|beginWrap(): RdbPredicates;|新增| -| +|数据管理-rdb|endWrap(): RdbPredicates;|新增| -| +|数据管理-rdb|function getRdbStore(config: StoreConfig, version: number, callback: AsyncCallback): void;function getRdbStore(config: StoreConfig, version: number): Promise;|新增| -| +|数据管理-rdb|function deleteRdbStore(name: string, callback: AsyncCallback): void;function deleteRdbStore(name: string): Promise;|新增| -| +|数据管理-rdb|insert(name: string, values: ValuesBucket, callback: AsyncCallback): void;insert(name: string, values: ValuesBucket): Promise;|新增| -| +|数据管理-rdb|update(values: ValuesBucket, rdbPredicates: RdbPredicates, callback: AsyncCallback): void;update(values: ValuesBucket, rdbPredicates: RdbPredicates): Promise;|新增| -| +|数据管理-rdb|delete(rdbPredicates: RdbPredicates, callback: AsyncCallback): void;delete(rdbPredicates: RdbPredicates): Promise;|新增| -| +|数据管理-rdb|query(rdbPredicates: RdbPredicates, columns: Array, callback: AsyncCallback): void;query(rdbPredicates: RdbPredicates, columns: Array): Promise;|新增| -| +|数据管理-rdb|executeSql(sql: string, bindArgs: Array, callback: AsyncCallback): void;executeSql(sql: string, bindArgs: Array): Promise;|新增| -| +|数据管理-rdb|like(field: string, value: string): RdbPredicates;|新增| -| +|数据管理-rdb|glob(field: string, value: string): RdbPredicates;|新增| -| +|数据管理-rdb|between(field: string, low: ValueType, high: ValueType): RdbPredicates;|新增| -| +|数据管理-rdb|notBetween(field: string, low: ValueType, high: ValueType): RdbPredicates;|新增| -| +|数据管理-rdb|greaterThan(field: string, value: ValueType): RdbPredicates;|新增| -| +|数据管理-rdb|lessThan(field: string, value: ValueType): RdbPredicates;|新增| -| +|数据管理-rdb|greaterThanOrEqualTo(field: string, value: ValueType): RdbPredicates;|新增| -| +|数据管理-rdb|lessThanOrEqualTo(field: string, value: ValueType): RdbPredicates;|新增| -| +|数据管理-rdb|or(): RdbPredicates;|新增| -| +|数据管理-rdb|and(): RdbPredicates;|新增| -| +|数据管理-rdb|contains(field: string, value: string): RdbPredicates;|新增| -| +|数据管理-rdb|beginsWith(field: string, value: string): RdbPredicates;|新增| -| +|数据管理-rdb|endsWith(field: string, value: string): RdbPredicates;|新增| -| +|数据管理-rdb|isNull(field: string): RdbPredicates;|新增| -| +|数据管理-rdb|isNotNull(field: string): RdbPredicates;|新增| -| +|数据管理-rdb|isEnded: boolean;|新增| -| +|数据管理-rdb|isStarted: boolean;|新增| -| +|数据管理-rdb|isClosed: boolean;|新增| -| +|数据管理-rdb|getColumnIndex(columnName: string): number;|新增| -| +|数据管理-rdb|getColumnName(columnIndex: number): string;|新增| -| +|数据管理-rdb|goTo(offset: number): boolean;|新增| -| +|数据管理-rdb|goToRow(position: number): boolean;|新增| -| +|数据管理-rdb|goToFirstRow(): boolean;|新增| -| +|数据管理-rdb|goToLastRow(): boolean;|新增| -| +|数据管理-rdb|goToNextRow(): boolean;|新增| -| +|数据管理-rdb|goToPreviousRow(): boolean;|新增| -| +|数据管理-rdb|getBlob(columnIndex: number): Uint8Array;|新增| -| +|数据管理-rdb|getString(columnIndex: number): string;|新增| -| +|数据管理-rdb|getLong(columnIndex: number): number;|新增| -| +|数据管理-rdb|getDouble(columnIndex: number): number;|新增| -| +|数据管理-dataAbility|orderByDesc(field: string): DataAbilityPredicates;|新增| -| +|数据管理-dataAbility|distinct(): DataAbilityPredicates;|新增| -| +|数据管理-dataAbility|limitAs(value: number): DataAbilityPredicates;|新增| -| +|数据管理-dataAbility|offsetAs(rowOffset: number): DataAbilityPredicates;|新增| -| +|数据管理-dataAbility|groupBy(fields: Array): DataAbilityPredicates;|新增| -| +|数据管理-dataAbility|indexedBy(field: string): DataAbilityPredicates;|新增| -| +|数据管理-dataAbility|in(field: string, value: Array): DataAbilityPredicates;|新增| -| +|数据管理-dataAbility|notIn(field: string, value: Array): DataAbilityPredicates;|新增| -| +|数据管理-dataAbility|glob(field: string, value: string): DataAbilityPredicates;|新增| -| +|数据管理-dataAbility|between(field: string, low: ValueType, high: ValueType): DataAbilityPredicates;|新增| -| +|数据管理-dataAbility|notBetween(field: string, low: ValueType, high: ValueType): DataAbilityPredicates;|新增| -| +|数据管理-dataAbility|greaterThan(field: string, value: ValueType): DataAbilityPredicates;|新增| -| +|数据管理-dataAbility|lessThan(field: string, value: ValueType): DataAbilityPredicates;|新增| -| +|数据管理-dataAbility|greaterThanOrEqualTo(field: string, value: ValueType): DataAbilityPredicates;|新增| -| +|数据管理-dataAbility|lessThanOrEqualTo(field: string, value: ValueType): DataAbilityPredicates;|新增| -| +|数据管理-dataAbility|orderByAsc(field: string): DataAbilityPredicates;|新增| -| +|数据管理-rdb|isColumnNull(columnIndex: number): boolean;|新增| -| +|数据管理-rdb|close(): void;|新增| -| +|数据管理-dataAbility|function createRdbPredicates(name: string, dataAbilityPredicates: DataAbilityPredicates): rdb.RdbPredicates;|新增| -| +|数据管理-dataAbility|equalTo(field: string, value: ValueType): DataAbilityPredicates;|新增| -| +|数据管理-dataAbility|notEqualTo(field: string, value: ValueType): DataAbilityPredicates;|新增| -| +|数据管理-dataAbility|beginWrap():DataAbilityPredicates;|新增| -| +|数据管理-dataAbility|endWrap(): DataAbilityPredicates;|新增| -| +|数据管理-rdb|orderByAsc(field: string): RdbPredicates;|新增| -| +|数据管理-rdb|orderByDesc(field: string): RdbPredicates;|新增| -| +|数据管理-rdb|distinct(): RdbPredicates;|新增| -| +|数据管理-rdb|limitAs(value: number): RdbPredicates;|新增| -| +|数据管理-rdb|offsetAs(rowOffset: number): RdbPredicates;|新增| -| +|数据管理-rdb|groupBy(fields: Array): RdbPredicates;|新增| -| +|数据管理-rdb|indexedBy(field: string): RdbPredicates;|新增| -| +|数据管理-dataAbility|or(): DataAbilityPredicates;|新增| -| +|数据管理-dataAbility|and(): DataAbilityPredicates;|新增| -| +|数据管理-dataAbility|contains(field: string, value: string): DataAbilityPredicates;|新增| -| +|数据管理-dataAbility|beginsWith(field: string, value: string): DataAbilityPredicates;|新增| -| +|数据管理-dataAbility|endsWith(field: string, value: string): DataAbilityPredicates;|新增| -| +|数据管理-dataAbility|isNull(field: string): DataAbilityPredicates;|新增| -| +|数据管理-dataAbility|isNotNull(field: string): DataAbilityPredicates;|新增| -| +|数据管理-dataAbility|like(field: string, value: string): DataAbilityPredicates;|新增| -| +|数据管理-rdb|in(field: string, value: Array): RdbPredicates;|新增| -| +|数据管理-rdb|notIn(field: string, value: Array): RdbPredicates;|新增| -| +|数据管理-rdb|columnNames: Array;|新增| -| +|数据管理-rdb|columnCount: number;|新增| -| +|数据管理-rdb|rowCount: number;|新增| -| +|数据管理-rdb|rowIndex: number;|新增| -| +|数据管理-rdb|isAtFirstRow: boolean;|新增| -| +|数据管理-rdb|isAtLastRow: boolean;|新增| -| +|事件通知-notification|title: string;|新增| -| +|事件通知-notification|sound?: string;|新增| -| +|事件通知-notification|text: string;|新增| -| +|事件通知-notification|vibrationValues?: Array;|新增| -| +|事件通知-wantAgent|want?: Want;|新增| -| +|事件通知-notification|vibrationEnabled?: boolean;|新增| -| +|事件通知-notification|badgeFlag?: boolean;|新增| -| +|事件通知-notification|type: notification.SlotType;|新增| -| +|事件通知-wantAgent|code: number;|新增| -| +|事件通知-notification|contentType: ContentType;|新增| -| +|事件通知-notification|picture: image.PixelMap;|新增| -| +|事件通知-notification|briefText: string;|新增| -| +|事件通知-notification|briefText: string;|新增| -| +|事件通知-notification|briefText: string;|新增| -| +|事件通知-notification|bypassDnd?: boolean;|新增| -| +|事件通知-notification|additionalText?: string;|新增| -| +|事件通知-wantagent|function cancel(info: WantAgentInfo, callback: AsyncCallback): void;|新增| -| +|事件通知-wantAgent|enum OperationType|新增| -| +|事件通知-wantAgent|enum WantAgentFlags|新增| -| +|事件通知-wantAgent|permission?: string;|新增| -| +|事件通知-notification|picture?: NotificationPictureContent;|新增| -| +|事件通知-notification|normal?: NotificationBasicContent;|新增| -| +|事件通知-notification|expandedTitle: string;|新增| -| +|事件通知-notification|expandedTitle: string;|新增| -| +|事件通知-wantAgent|function trigger(info: WantAgentInfo, triggerInfo: TriggerInfo, callback: AsyncCallback): void;|新增| -| +|事件通知-wantAgent|extraInfo?: {[key: string]: any};|新增| -| +|事件通知-notification|multiLine?: NotificationMultiLineContent;|新增| -| +|事件通知-notification|level?: notification.SlotLevel;|新增| -| +|事件通知-notification|lightColor?: number;|新增| -| +|事件通知-notification|lightEnabled?: boolean;|新增| -| +|事件通知-notification|lines: Array;|新增| -| +|事件通知-notification|lockscreenVisibility?: number;|新增| -| +|事件通知-notification|longText: string;|新增| -| +|事件通知-wantAgent|function getBundleName(info: WantAgentInfo, callback: AsyncCallback): void;|新增| -| +|事件通知-notification|longText?: NotificationLongTextContent;|新增| -| +|事件通知-notification|longTitle: string;|新增| -| +|事件通知-wantAgent|function judgeEquality(info: WantAgentInfo, info2: WantAgentInfo, callback: AsyncCallback): void;|新增| -| +|事件通知-wantAgent|function getUid(info: WantAgentInfo, callback: AsyncCallback): void;|新增| -| +|事件通知-commonEvent|COMMON_EVENT_IVI_TEMPERATURE_ABNORMAL = common.event.IVI_TEMPERATURE_ABNORMAL,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_IVI_VOLTAGE_RECOVERY = common.event.IVI_VOLTAGE_RECOVERY,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_IVI_TEMPERATURE_RECOVERY = common.event.IVI_TEMPERATURE_RECOVERY,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_IVI_ACTIVE = common.event.IVI_ACTIVE,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_USB_DEVICE_ATTACHED = usual.event.hardware.usb.action.USB_DEVICE_ATTACHED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_USB_DEVICE_DETACHED = usual.event.hardware.usb.action.USB_DEVICE_DETACHED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_IVI_PAUSE = common.event.IVI_PAUSE,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_IVI_STANDBY = common.event.IVI_STANDBY,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_IVI_LASTMODE_SAVE = common.event.IVI_LASTMODE_SAVE,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_IVI_VOLTAGE_ABNORMAL = common.event.IVI_VOLTAGE_ABNORMAL,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_IVI_HIGH_TEMPERATURE = common.event.IVI_HIGH_TEMPERATURE,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_IVI_EXTREME_TEMPERATURE = common.event.IVI_EXTREME_TEMPERATURE,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_DISK_UNMOUNTABLE = usual.event.data.DISK_UNMOUNTABLE,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_DISK_EJECT = usual.event.data.DISK_EJECT,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_VISIBLE_ACCOUNTS_UPDATED = usual.event.data.VISIBLE_ACCOUNTS_UPDATED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_ACCOUNT_DELETED = usual.event.data.ACCOUNT_DELETED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_FOUNDATION_READY = common.event.FOUNDATION_READY,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_AIRPLANE_MODE_CHANGED = usual.event.AIRPLANE_MODE|新增| -| +|事件通知-commonEvent|COMMON_EVENT_USB_ACCESSORY_ATTACHED = usual.event.hardware.usb.action.USB_ACCESSORY_ATTACHED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_USB_ACCESSORY_DETACHED = usual.event.hardware.usb.action.USB_ACCESSORY_DETACHED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_DISK_REMOVED = usual.event.data.DISK_REMOVED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_DISK_UNMOUNTED = usual.event.data.DISK_UNMOUNTED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_DISK_MOUNTED = usual.event.data.DISK_MOUNTED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_DISK_BAD_REMOVAL = usual.event.data.DISK_BAD_REMOVAL,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_NFC_ACTION_RF_FIELD_OFF_DETECTED = usual.event.nfc.action.RF_FIELD_OFF_DETECTED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_DISCHARGING = usual.event.DISCHARGING,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_CHARGING = usual.event.CHARGING,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_DEVICE_IDLE_MODE_CHANGED = usual.event.DEVICE_IDLE_MODE_CHANGED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_POWER_SAVE_MODE_CHANGED = usual.event.POWER_SAVE_MODE_CHANGED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_USER_ADDED = usual.event.USER_ADDED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_USER_REMOVED = usual.event.USER_REMOVED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_ABILITY_ADDED = common.event.ABILITY_ADDED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_ABILITY_REMOVED = common.event.ABILITY_REMOVED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_ABILITY_UPDATED = common.event.ABILITY_UPDATED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_LOCATION_MODE_STATE_CHANGED = usual.event.location.MODE_STATE_CHANGED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_IVI_SLEEP = common.event.IVI_SLEEP,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_BLUETOOTH_HOST_NAME_UPDATE = usual.event.bluetooth.host.NAME_UPDATE,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_BLUETOOTH_A2DPSINK_CONNECT_STATE_UPDATE = usual.event.bluetooth.a2dpsink.CONNECT_STATE_UPDATE,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_BLUETOOTH_A2DPSINK_PLAYING_STATE_UPDATE = usual.event.bluetooth.a2dpsink.PLAYING_STATE_UPDATE,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_BLUETOOTH_A2DPSINK_AUDIO_STATE_UPDATE = usual.event.bluetooth.a2dpsink.AUDIO_STATE_UPDATE,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_NFC_ACTION_ADAPTER_STATE_CHANGED = usual.event.nfc.action.ADAPTER_STATE_CHANGED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_NFC_ACTION_RF_FIELD_ON_DETECTED = usual.event.nfc.action.RF_FIELD_ON_DETECTED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_BLUETOOTH_HOST_REQ_ENABLE = usual.event.bluetooth.host.REQ_ENABLE,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_BLUETOOTH_HOST_REQ_DISABLE = usual.event.bluetooth.host.REQ_DISABLE,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_BLUETOOTH_HOST_SCAN_MODE_UPDATE = usual.event.bluetooth.host.SCAN_MODE_UPDATE,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_BLUETOOTH_HOST_DISCOVERY_STARTED = usual.event.bluetooth.host.DISCOVERY_STARTED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_BLUETOOTH_HOST_DISCOVERY_FINISHED = usual.event.bluetooth.host.DISCOVERY_FINISHED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_WIFI_P2P_CONN_STATE = usual.event.wifi.p2p.CONN_STATE_CHANGE,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_WIFI_P2P_STATE_CHANGED = usual.event.wifi.p2p.STATE_CHANGE,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_WIFI_P2P_PEERS_STATE_CHANGED = usual.event.wifi.p2p.DEVICES_CHANGE,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_WIFI_P2P_CURRENT_DEVICE_STATE_CHANGED = usual.event.wifi.p2p.CURRENT_DEVICE_CHANGE,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_WIFI_P2P_GROUP_STATE_CHANGED = usual.event.wifi.p2p.GROUP_STATE_CHANGED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_BLUETOOTH_HANDSFREE_AG_CONNECT_STATE_UPDATE = usual.event.bluetooth.handsfree.ag.CONNECT_STATE_UPDATE,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_BLUETOOTH_HANDSFREE_AG_CURRENT_DEVICE_UPDATE = usual.event.bluetooth.handsfree.ag.CURRENT_DEVICE_UPDATE,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_BLUETOOTH_HANDSFREE_AG_AUDIO_STATE_UPDATE = usual.event.bluetooth.handsfree.ag.AUDIO_STATE_UPDATE,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_BLUETOOTH_A2DPSOURCE_CONNECT_STATE_UPDATE = usual.event.bluetooth.a2dpsource.CONNECT_STATE_UPDATE,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_BLUETOOTH_A2DPSOURCE_CURRENT_DEVICE_UPDATE = usual.event.bluetooth.a2dpsource.CURRENT_DEVICE_UPDATE,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_WIFI_RSSI_VALUE = usual.event.wifi.RSSI_VALUE,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_WIFI_CONN_STATE = usual.event.wifi.CONN_STATE,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_WIFI_HOTSPOT_STATE = usual.event.wifi.HOTSPOT_STATE,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_WIFI_AP_STA_JOIN = usual.event.wifi.WIFI_HS_STA_JOIN,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_WIFI_AP_STA_LEAVE = usual.event.wifi.WIFI_HS_STA_LEAVE,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_WIFI_MPLINK_STATE_CHANGE = usual.event.wifi.mplink.STATE_CHANGE,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_HWID_LOGOUT = common.event.HWID_LOGOUT,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_HWID_TOKEN_INVALID = common.event.HWID_TOKEN_INVALID,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_HWID_LOGOFF = common.event.HWID_LOGOFF,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_WIFI_POWER_STATE = usual.event.wifi.POWER_STATE,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_WIFI_SCAN_FINISHED = usual.event.wifi.SCAN_FINISHED,|新增| -| +|事件通知-commonEvent|clearAbortCommonEvent(): Promise;|新增| -| +|事件通知-commonEvent|bundleName?: string;|新增| -| +|事件通知-commonEvent|code?: number;|新增| -| +|事件通知-commonEvent|data?: string;|新增| -| +|事件通知-commonEvent|subscriberPermissions?: Array;|新增| -| +|事件通知-commonEvent|isOrdered?: boolean;|新增| -| +|事件通知-commonEvent|isSticky?: boolean;|新增| -| +|事件通知-commonEvent|abortCommonEvent(callback: AsyncCallback): void;|新增| -| +|事件通知-commonEvent|abortCommonEvent(): Promise;|新增| -| +|事件通知-commonEvent|function createSubscriber(subscribeInfo: CommonEventSubscribeInfo): Promise;|新增| -| +|事件通知-commonEvent|function createSubscriber(subscribeInfo: CommonEventSubscribeInfo, callback: AsyncCallback): void;|新增| -| +|事件通知-commonEvent|function subscribe(subscriber: CommonEventSubscriber, callback: AsyncCallback): void;|新增| -| +|事件通知-commonEvent|function publish(event: string, options: CommonEventPublishData, callback: AsyncCallback): void;|新增| -| +|事件通知-commonEvent|isOrderedCommonEvent(callback: AsyncCallback): void;|新增| -| +|事件通知-commonEvent|isOrderedCommonEvent(): Promise;|新增| -| +|事件通知-commonEvent|COMMON_EVENT_BOOT_COMPLETED = usual.event.BOOT_COMPLETED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_LOCKED_BOOT_COMPLETED = usual.event.LOCKED_BOOT_COMPLETED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_SHUTDOWN = usual.event.SHUTDOWN,|新增| -| +|事件通知-commonEvent|isStickyCommonEvent(): Promise;|新增| -| +|事件通知-commonEvent|getData(callback: AsyncCallback): void;|新增| -| +|事件通知-commonEvent|getData(): Promise;|新增| -| +|事件通知-commonEvent|getSubscribeInfo(callback: AsyncCallback): void;|新增| -| +|事件通知-commonEvent|getSubscribeInfo(): Promise;|新增| -| +|事件通知-commonEvent|function publish(event: string, callback: AsyncCallback): void;|新增| -| +|事件通知-commonEvent|event: string|新增| -| +|事件通知-commonEvent|bundleName?: string;|新增| -| +|事件通知-commonEvent|code?: number;|新增| -| +|事件通知-commonEvent|data?: string;|新增| -| +|事件通知-commonEvent|setCode(code: number, callback: AsyncCallback): void;|新增| -| +|事件通知-commonEvent|COMMON_EVENT_DRIVE_MODE = common.event.DRIVE_MODE,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_HOME_MODE = common.event.HOME_MODE,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_OFFICE_MODE = common.event.OFFICE_MODE,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_USER_STARTED = usual.event.USER_STARTED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_USER_BACKGROUND = usual.event.USER_BACKGROUND,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_USER_FOREGROUND = usual.event.USER_FOREGROUND,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_USER_SWITCHED = usual.event.USER_SWITCHED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_USER_STARTING = usual.event.USER_STARTING,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_USER_UNLOCKED = usual.event.USER_UNLOCKED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_USER_STOPPING = usual.event.USER_STOPPING,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_USER_STOPPED = usual.event.USER_STOPPED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_HWID_LOGIN = common.event.HWID_LOGIN,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_PACKAGE_VERIFIED = usual.event.PACKAGE_VERIFIED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_EXTERNAL_APPLICATIONS_AVAILABLE = usual.event.EXTERNAL_APPLICATIONS_AVAILABLE,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_EXTERNAL_APPLICATIONS_UNAVAILABLE = usual.event.EXTERNAL_APPLICATIONS_UNAVAILABLE,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_CONFIGURATION_CHANGED = usual.event.CONFIGURATION_CHANGED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_LOCALE_CHANGED = usual.event.LOCALE_CHANGED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_MANAGE_PACKAGE_STORAGE = usual.event.MANAGE_PACKAGE_STORAGE,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_PACKAGES_UNSUSPENDED = usual.event.PACKAGES_UNSUSPENDED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_MY_PACKAGE_SUSPENDED = usual.event.MY_PACKAGE_SUSPENDED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_MY_PACKAGE_UNSUSPENDED = usual.event.MY_PACKAGE_UNSUSPENDED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_UID_REMOVED = usual.event.UID_REMOVED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_PACKAGE_FIRST_LAUNCH = usual.event.PACKAGE_FIRST_LAUNCH,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_PACKAGE_NEEDS_VERIFICATION = usual.event.PACKAGE_NEEDS_VERIFICATION,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_SCREEN_OFF = usual.event.SCREEN_OFF,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_SCREEN_ON = usual.event.SCREEN_ON,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_USER_PRESENT = usual.event.USER_PRESENT,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_TIME_TICK = usual.event.TIME_TICK,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_TIME_CHANGED = usual.event.TIME_CHANGED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_DATE_CHANGED = usual.event.DATE_CHANGED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_BATTERY_CHANGED = usual.event.BATTERY_CHANGED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_BATTERY_LOW = usual.event.BATTERY_LOW,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_BATTERY_OKAY = usual.event.BATTERY_OKAY,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_POWER_CONNECTED = usual.event.POWER_CONNECTED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_POWER_DISCONNECTED = usual.event.POWER_DISCONNECTED,|新增| -| +|事件通知-commonEvent|function unsubscribe(subscriber: CommonEventSubscriber, callback?: AsyncCallback): void;|新增| -| +|事件通知-commonEvent|COMMON_EVENT_BLUETOOTH_REMOTEDEVICE_ACL_CONNECTED = usual.event.bluetooth.remotedevice.ACL_CONNECTED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_BLUETOOTH_REMOTEDEVICE_ACL_DISCONNECTED = usual.event.bluetooth.remotedevice.ACL_DISCONNECTED,|新增| -| +|事件通知-commonEvent|getAbortCommonEvent(callback: AsyncCallback): void;|新增| -| +|事件通知-commonEvent|COMMON_EVENT_BLUETOOTH_REMOTEDEVICE_NAME_UPDATE = usual.event.bluetooth.remotedevice.NAME_UPDATE,|新增| -| +|事件通知-commonEvent|getAbortCommonEvent(): Promise;|新增| -| +|事件通知-commonEvent|COMMON_EVENT_BLUETOOTH_HANDSFREEUNIT_CONNECT_STATE_UPDATE = usual.event.bluetooth.handsfreeunit.CONNECT_STATE_UPDATE,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_BLUETOOTH_REMOTEDEVICE_PAIR_STATE = usual.event.bluetooth.remotedevice.PAIR_STATE,|新增| -| +|事件通知-commonEvent|getCode(callback: AsyncCallback): void;|新增| -| +|事件通知-commonEvent|setCode(code: number): Promise;|新增| -| +|事件通知-commonEvent|COMMON_EVENT_BLUETOOTH_HANDSFREEUNIT_AUDIO_STATE_UPDATE = usual.event.bluetooth.handsfreeunit.AUDIO_STATE_UPDATE,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_BLUETOOTH_REMOTEDEVICE_BATTERY_VALUE_UPDATE = usual.event.bluetooth.remotedevice.BATTERY_VALUE_UPDATE,|新增| -| +|事件通知-commonEvent|getCode(): Promise;|新增| -| +|事件通知-commonEvent|COMMON_EVENT_BLUETOOTH_HANDSFREEUNIT_AG_COMMON_EVENT = usual.event.bluetooth.handsfreeunit.AG_COMMON_EVENT,|新增| -| +|事件通知-commonEvent|setCodeAndData(code: number, data: string, callback: AsyncCallback): void;|新增| -| +|事件通知-commonEvent|COMMON_EVENT_BLUETOOTH_REMOTEDEVICE_SDP_RESULT = usual.event.bluetooth.remotedevice.SDP_RESULT,|新增| -| +|事件通知-commonEvent|isStickyCommonEvent(callback: AsyncCallback): void;|新增| -| +|事件通知-commonEvent|COMMON_EVENT_BLUETOOTH_HANDSFREEUNIT_AG_CALL_STATE_UPDATE = usual.event.bluetooth.handsfreeunit.AG_CALL_STATE_UPDATE,|新增| -| +|事件通知-commonEvent|setCodeAndData(code: number, data: string): Promise;|新增| -| +|事件通知-commonEvent|events: Array;|新增| -| +|事件通知-commonEvent|COMMON_EVENT_BLUETOOTH_HOST_STATE_UPDATE = usual.event.bluetooth.host.STATE_UPDATE,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_BLUETOOTH_A2DPSOURCE_PLAYING_STATE_UPDATE = usual.event.bluetooth.a2dpsource.PLAYING_STATE_UPDATE,|新增| -| +|事件通知-commonEvent|setData(data: string, callback: AsyncCallback): void;|新增| -| +|事件通知-commonEvent|COMMON_EVENT_BLUETOOTH_A2DPSOURCE_AVRCP_CONNECT_STATE_UPDATE = usual.event.bluetooth.a2dpsource.AVRCP_CONNECT_STATE_UPDATE,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_BLUETOOTH_HOST_REQ_DISCOVERABLE = usual.event.bluetooth.host.REQ_DISCOVERABLE,|新增| -| +|事件通知-commonEvent|publisherPermission?: string;|新增| -| +|事件通知-commonEvent|setData(data: string): Promise;|新增| -| +|事件通知-commonEvent|COMMON_EVENT_BLUETOOTH_REMOTEDEVICE_UUID_VALUE = usual.event.bluetooth.remotedevice.UUID_VALUE,|新增| -| +|事件通知-commonEvent|publisherDeviceId?: string;|新增| -| +|事件通知-commonEvent|clearAbortCommonEvent(callback: AsyncCallback): void;|新增| -| +|事件通知-commonEvent|userId?: number;|新增| -| +|事件通知-commonEvent|COMMON_EVENT_TIMEZONE_CHANGED = usual.event.TIMEZONE_CHANGED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_BLUETOOTH_REMOTEDEVICE_PAIRING_REQ = usual.event.bluetooth.remotedevice.PAIRING_REQ,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_BLUETOOTH_REMOTEDEVICE_DISCOVERED = usual.event.bluetooth.remotedevice.DISCOVERED,|新增| -| +|事件通知-commonEvent|priority?: number;|新增| -| +|事件通知-commonEvent|COMMON_EVENT_BUNDLE_REMOVED = usual.event.BUNDLE_REMOVED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_BLUETOOTH_REMOTEDEVICE_CLASS_VALUE_UPDATE = usual.event.bluetooth.remotedevice.CLASS_VALUE_UPDATE,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_BLUETOOTH_REMOTEDEVICE_PAIRING_CANCEL = usual.event.bluetooth.remotedevice.PAIRING_CANCEL,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_CLOSE_SYSTEM_DIALOGS = usual.event.CLOSE_SYSTEM_DIALOGS,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_PACKAGE_ADDED = usual.event.PACKAGE_ADDED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_BLUETOOTH_REMOTEDEVICE_CONNECT_REQ = usual.event.bluetooth.remotedevice.CONNECT_REQ,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_PACKAGE_FULLY_REMOVED = usual.event.PACKAGE_FULLY_REMOVED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_PACKAGE_REPLACED = usual.event.PACKAGE_REPLACED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_BLUETOOTH_REMOTEDEVICE_CONNECT_REPLY = usual.event.bluetooth.remotedevice.CONNECT_REPLY,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_MY_PACKAGE_REPLACED = usual.event.MY_PACKAGE_REPLACED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_PACKAGE_CHANGED = usual.event.PACKAGE_CHANGED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_BLUETOOTH_REMOTEDEVICE_CONNECT_CANCEL = usual.event.bluetooth.remotedevice.CONNECT_CANCEL,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_PACKAGE_REMOVED = usual.event.PACKAGE_REMOVED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_PACKAGE_RESTARTED = usual.event.PACKAGE_RESTARTED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_PACKAGE_DATA_CLEARED = usual.event.PACKAGE_DATA_CLEARED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_PACKAGES_SUSPENDED = usual.event.PACKAGES_SUSPENDED,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_BLUETOOTH_A2DPSOURCE_CODEC_VALUE_UPDATE = usual.event.bluetooth.a2dpsource.CODEC_VALUE_UPDATE,|新增| -| +|事件通知-commonEvent|COMMON_EVENT_WIFI_P2P_PEERS_DISCOVERY_STATE_CHANGED = usual.event.wifi.p2p.PEER_DISCOVERY_STATE_CHANGE,|新增| -| +|事件通知-notification|LEVEL_NONE = 0,|新增| -| +|事件通知-notification|LEVEL_MIN = 1,|新增| -| +|事件通知-notification|LEVEL_LOW = 2,|新增| -| +|事件通知-notification|LEVEL_DEFAULT = 3,|新增| -| +|事件通知-notification|label?: string;|新增| -| +|事件通知-notification|bundle: string;|新增| -| +|事件通知-notification|uid?: number;|新增| -| +|事件通知-notification|NOTIFICATION_CONTENT_MULTILINE,|新增| -| +|事件通知-notification|UNKNOWN_TYPE = 0,|新增| -| +|事件通知-notification|SOCIAL_COMMUNICATION = 1,|新增| -| +|事件通知-notification|LEVEL_HIGH = 4,|新增| -| +|事件通知-notification|NOTIFICATION_CONTENT_BASIC_TEXT,|新增| -| +|事件通知-notification|NOTIFICATION_CONTENT_LONG_TEXT,|新增| -| +|事件通知-notification|NOTIFICATION_CONTENT_PICTURE,|新增| -| +|事件通知-notification|isFloatingIcon?: boolean;|新增| -| +|事件通知-notification|label?: string;|新增| -| +|事件通知-notification|badgeIconStyle?: number;|新增| -| +|事件通知-notification|showDeliveryTime?: boolean;|新增| -| +|事件通知-notification|isAlertOnce?: boolean;|新增| -| +|事件通知-notification|function getActiveNotifications(callback: AsyncCallback>): void;|新增| -| +|事件通知-notification|isStopwatch?: boolean;|新增| -| +|事件通知-notification|isCountDown?: boolean;|新增| -| +|事件通知-notification|function getActiveNotifications(): Promise>;|新增| -| +|事件通知-notification|function getActiveNotificationCount(callback: AsyncCallback): void;|新增| -| +|事件通知-notification|readonly creatorUid?: number;|新增| -| +|事件通知-notification|function getActiveNotificationCount(): Promise;|新增| -| +|事件通知-notification|readonly creatorPid?: number;|新增| -| +|事件通知-notification|function cancel(id: number, label?: string): Promise;|新增| -| +|事件通知-notification|classification?: string;|新增| -| +|事件通知-notification|readonly hashCode?: string;|新增| -| +|事件通知-notification|function cancelAll(callback: AsyncCallback): void;|新增| -| +|事件通知-notification|actionButtons?: Array;|新增| -| +|事件通知-notification|function cancelAll(): Promise;|新增| -| +|事件通知-notification|smallIcon?: image.PixelMap;|新增| -| +|事件通知-notification|isUnremovable?: boolean;|新增| -| +|事件通知-notification|largeIcon?: image.PixelMap;|新增| -| +|事件通知-notification|deliveryTime?: number;|新增| -| +|事件通知-notification|readonly creatorBundleName?: string;|新增| -| +|事件通知-notification|tapDismissed?: boolean;|新增| -| +|事件通知-notification|function publish(request: NotificationRequest): Promise;|新增| -| +|事件通知-notification|autoDeletedTime?: number;|新增| -| +|事件通知-notification|function cancel(id: number, callback: AsyncCallback): void;|新增| -| +|事件通知-notification|content: NotificationContent;|新增| -| +|事件通知-notification|wantAgent?: WantAgentInfo;|新增| -| +|事件通知-notification|function cancel(id: number, label: string, callback: AsyncCallback): void;|新增| -| +|事件通知-notification|function getSlot(slotType: SlotType, callback: AsyncCallback): void;|新增| -| +|事件通知-notification|extraInfo?: {[key: string]: any};|新增| -| +|事件通知-notification|function getSlot(slotType: SlotType): Promise;|新增| -| +|事件通知-notification|SERVICE_INFORMATION = 2,|新增| -| +|事件通知-notification|color?: number;|新增| -| +|事件通知-notification|id?: number;|新增| -| +|事件通知-notification|function getSlots(callback: AsyncCallback>): void;|新增| -| +|事件通知-notification|CONTENT_INFORMATION = 3,|新增| -| +|事件通知-notification|slotType?: notification.SlotType;|新增| -| +|事件通知-notification|colorEnabled?: boolean;|新增| -| +|事件通知-notification|OTHER_TYPES = 0xFFFF,|新增| -| +|事件通知-notification|isOngoing?: boolean;|新增| -| +|事件通知-notification|function addSlot(type: SlotType, callback: AsyncCallback): void;|新增| -| +|事件通知-notification|id: number;|新增| -| +|事件通知-notification|function addSlot(type: SlotType): Promise;|新增| -| +|事件通知-notification|desc?: string;|新增| -| +|事件通知-notification|function publish(request: NotificationRequest, callback: AsyncCallback): void;|新增| -| +|事件通知-notification|function removeAllSlots(callback: AsyncCallback): void;|新增| -| +|事件通知-notification|function removeAllSlots(): Promise;|新增| -| +|事件通知-notification|function getSlots(): Promise>;|新增| -| +|事件通知-notification|function removeSlot(slotType: SlotType, callback: AsyncCallback): void;|新增| -| +|事件通知-notification|function removeSlot(slotType: SlotType): Promise;|新增| -| +|全球化-resourceManager|getString(resId: number, callback: AsyncCallback);getString(resId: number): Promise;|新增| -| +|全球化-resourceManager|getStringArray(resId: number, callback: AsyncCallback>);getStringArray(resId: number): Promise>;|新增| -| +|全球化-resourceManager|getConfiguration(callback: AsyncCallback);getConfiguration(): Promise;|新增| -| +|全球化-resourceManager|getDeviceCapability(callback: AsyncCallback);getDeviceCapability(): Promise;|新增| -| +|全球化-resourceManager|getMedia(resId: number, callback: AsyncCallback);getMedia(resId: number): Promise;getMediaBase64(resId: number, callback: AsyncCallback);getMediaBase64(resId: number): Promise;|新增| -| +|全球化-resourceManager|"getPluralString(resId: number, num: number, callback: AsyncCallback);getPluralString(resId: number, num: number): Promise;"|新增| -| +|全球化-resourceManager|DeviceCapability|新增| -| +|全球化-resourceManager|"getMediaBase64(resId: number, callback: AsyncCallback);getMediaBase64(resId: number): Promise;"|新增| -| +|全球化-resourceManager|"getResourceManager(callback: AsyncCallback);getResourceManager(bundleName: string, callback: AsyncCallback);getResourceManager(): Promise;getResourceManager(bundleName: string): Promise;"|新增| -| +|全球化-resourceManager|DeviceType|新增| -| +|全球化-resourceManager|Direction|新增| -| +|全球化-resourceManager|Configuration|新增| -| +|全球化-resourceManager|ScreenDensity|新增| -| +|全球化-resourceManager|deviceType|新增| -| +|全球化-resourceManager|locale|新增| -| +|全球化-resourceManager|direction|新增| -| +|全球化-resourceManager|screenDensity|新增| -| +|电源服务-batteryInfo|batteryInfo:const batterySOC: number;|新增| -| +|电源服务-batteryInfo|batteryInfo:const technology: string;|新增| -| +|电源服务-batteryInfo|batteryInfo:const isBatteryPresent: boolean;|新增| -| +|电源服务-batteryInfo|batteryInfo:const batteryTemperature: number;|新增| -| +|电源服务-batteryInfo|batteryInfo:const pluggedType: BatteryPluggedType;|新增| -| +|电源服务-batteryInfo|batteryInfo:const chargingStatus: BatteryChargeState;|新增| -| +|电源服务-batteryInfo|batteryInfo:const healthStatus: BatteryHealthState;|新增| -| +|电源服务-batteryInfo|batteryInfo:const voltage: number;|新增| -| +|电源服务-batteryInfo|BatteryChargeState:NONE|新增| -| +|电源服务-batteryInfo|BatteryChargeState:DISABLE|新增| -| +|电源服务-batteryInfo|BatteryChargeState:ENABLE,|新增| -| +|电源服务-batteryInfo|BatteryChargeState:FULL|新增| -| +|电源服务-batteryInfo|BatteryHealthState:COLD|新增| -| +|电源服务-batteryInfo|BatteryHealthState:OVERHEAT|新增| -| +|电源服务-batteryInfo|BatteryHealthState:OVERVOLTAGE|新增| -| +|电源服务-batteryInfo|BatteryHealthState:DEAD|新增| -| +|电源服务-batteryInfo|BatteryHealthState:UNKNOWN|新增| -| +|电源服务-batteryInfo|BatteryHealthState:GOOD|新增| -| +|电源服务-batteryInfo|BatteryPluggedType:WIRELESS|新增| -| +|电源服务-batteryInfo|BatteryPluggedType:NONE|新增| -| +|电源服务-batteryInfo|BatteryPluggedType:AC|新增| -| +|电源服务-batteryInfo|BatteryPluggedType:USB|新增| -| +|电源服务-runningLock|RunningLock:unlock()|新增| -| +|电源服务-runningLock|runningLock:isRunningLockTypeSupported(type: RunningLockType, callback: AsyncCallback): void;|新增| -| +|电源服务-runningLock|runningLock:createRunningLock(name: string, type: runningLockType): RunningLock|新增| -| +|电源服务-runningLock|RunningLock:lock(timeout: number)|新增| -| +|电源服务-runningLock|RunningLock:isUsed(): boolean|新增| -| +|电源服务-runninglock|RunningLockType:BACKGROUND|新增| -| +|电源服务-runninglock|RunningLockType:PROXIMITY_SCREEN_CONTROL|新增| -| +|电源服务-power|power:rebootDevice(reason ?: string)|新增| -| +|电源服务-power|power:isScreenOn(callback: AsyncCallback): void;|新增| -|

系统级别

@@ -43,8 +38,8 @@ OpenHarmony针对不同量级的系统，分别使用了不同形态的内核，

Linux

    

×

+

√

√