diff --git a/zh-cn/application-dev/Readme-CN.md b/zh-cn/application-dev/Readme-CN.md index 0301f1ec275a4bd4b20ede8a717ef4a55b2e4e5e..3dabd771aad9a52346bde57b8996ebc10c37ef9f 100644 --- a/zh-cn/application-dev/Readme-CN.md +++ b/zh-cn/application-dev/Readme-CN.md @@ -1,193 +1,14 @@ # 应用开发 - [应用开发导读](application-dev-guide.md) -- DevEco Studio（OpenHarmony）使用指南 - - [概述](quick-start/deveco-studio-overview.md) - - [版本变更说明](quick-start/deveco-studio-release-notes.md) - - [配置OpenHarmony SDK](quick-start/configuring-openharmony-sdk.md) - - 创建OpenHarmony工程 - - [使用工程向导创建新工程](quick-start/use-wizard-to-create-project.md) - - [通过导入Sample方式创建新工程](quick-start/import-sample-to-create-project.md) - - [配置OpenHarmony应用签名信息](quick-start/configuring-openharmony-app-signature.md) - - [安装运行OpenHarmony应用](quick-start/installing-openharmony-app.md) +- [DevEco Studio（OpenHarmony）使用指南](quick-start/deveco-studio-user-guide-for-openharmony.md) - [包结构说明](quick-start/package-structure.md) -- 快速入门 - - [开发准备](quick-start/start-overview.md) - - [使用JS语言开发](quick-start/start-with-js.md) -- JS UI框架 - - [JS UI框架概述](ui/ui-js-overview.md) - - 构建用户界面 - - [组件介绍](ui/ui-js-building-ui-component.md) - - 构建布局 - - [布局说明](ui/ui-js-building-ui-layout-intro.md) - - [添加标题行和文本区域](ui/ui-js-building-ui-layout-text.md) - - [添加图片区域](ui/ui-js-building-ui-layout-image.md) - - [添加留言区域](ui/ui-js-building-ui-layout-comment.md) - - [添加容器](ui/ui-js-building-ui-layout-external-container.md) - - [添加交互](ui/ui-js-building-ui-interactions.md) - - [动画](ui/ui-js-building-ui-animation.md) - - [事件](ui/ui-js-building-ui-event.md) - - [页面路由](ui/ui-js-building-ui-routes.md) - - [自定义组件](ui/ui-js-custom-components.md) -- 音频 - - [音频开发概述](media/audio-overview.md) - - [音频播放开发指导](media/audio-playback.md) - - [音频管理开发指导](media/audio-management.md) - - [音频录制开发指导](media/audio-recorder.md) -- IPC与RPC通信 - - [IPC与RPC通信概述](connectivity/ipc-rpc-overview.md) - - [IPC与RPC通信开发指导](connectivity/ipc-rpc-development-guideline.md) - - [远端状态订阅开发实例](connectivity/subscribe-remote-state.md) -- JS 开发参考 - - 框架说明 - - [文件组织](js-reference/js-framework-file.md) - - [js标签配置](js-reference/js-framework-js-tag.md) - - [app.js](js-reference/js-framework-js-file.md) - - 语法 - - [HML语法参考](js-reference/js-framework-syntax-hml.md) - - [CSS语法参考](js-reference/js-framework-syntax-css.md) - - [JS语法参考](js-reference/js-framework-syntax-js.md) - - [生命周期](js-reference/js-framework-lifecycle.md) - - [资源限定与访问](js-reference/js-framework-resource-restriction.md) - - [多语言支持](js-reference/js-framework-multiple-languages.md) - - 组件 - - 通用 - - [通用属性](js-reference/component/js-components-common-attributes.md) - - [通用样式](js-reference/component/js-components-common-styles.md) - - [通用事件](js-reference/component/js-components-common-events.md) - - [通用方法](js-reference/component/js-components-common-methods.md) - - [动画样式](js-reference/component/js-components-common-animation.md) - - [渐变样式](js-reference/component/js-components-common-gradient.md) - - [转场样式](js-reference/component/js-components-common-transition.md) - - [媒体查询](js-reference/component/js-components-common-mediaquery.md) - - [自定义字体样式](js-reference/component/js-components-common-customizing-font.md) - - [原子布局](js-reference/component/js-components-common-atomic-layout.md) - - 容器组件 - - [badge](js-reference/component/js-components-container-badge.md) - - [dialog](js-reference/component/js-components-container-dialog.md) - - [div](js-reference/component/js-components-container-div.md) - - [form](js-reference/component/js-components-container-form.md) - - [list](js-reference/component/js-components-container-list.md) - - [list-item](js-reference/component/js-components-container-list-item.md) - - [list-item-group](js-reference/component/js-components-container-list-item-group.md) - - [panel](js-reference/component/js-components-container-panel.md) - - [popup](js-reference/component/js-components-container-popup.md) - - [refresh](js-reference/component/js-components-container-refresh.md) - - [stack](js-reference/component/js-components-container-stack.md) - - [stepper](js-reference/component/js-components-container-stepper.md) - - [stepper-item](js-reference/component/js-components-container-stepper-item.md) - - [swiper](js-reference/component/js-components-container-swiper.md) - - [tabs](js-reference/component/js-components-container-tabs.md) - - [tab-bar](js-reference/component/js-components-container-tab-bar.md) - - [tab-content](js-reference/component/js-components-container-tab-content.md) - - 基础组件 - - [button](js-reference/component/js-components-basic-button.md) - - [chart](js-reference/component/js-components-basic-chart.md) - - [divider](js-reference/component/js-components-basic-divider.md) - - [image](js-reference/component/js-components-basic-image.md) - - [image-animator](js-reference/component/js-components-basic-image-animator.md) - - [input](js-reference/component/js-components-basic-input.md) - - [label](js-reference/component/js-components-basic-label.md) - - [marquee](js-reference/component/js-components-basic-marquee.md) - - [menu](js-reference/component/js-components-basic-menu.md) - - [option](js-reference/component/js-components-basic-option.md) - - [picker](js-reference/component/js-components-basic-picker.md) - - [picker-view](js-reference/component/js-components-basic-picker-view.md) - - [piece](js-reference/component/js-components-basic-piece.md) - - [progress](js-reference/component/js-components-basic-progress.md) - - [qrcode](js-reference/component/js-components-basic-qrcode.md) - - [rating](js-reference/component/js-components-basic-rating.md) - - [richtext](js-reference/component/js-components-basic-richtext.md) - - [search](js-reference/component/js-components-basic-search.md) - - [select](js-reference/component/js-components-basic-select.md) - - [slider](js-reference/component/js-components-basic-slider.md) - - [span](js-reference/component/js-components-basic-span.md) - - [switch](js-reference/component/js-components-basic-switch.md) - - [text](js-reference/component/js-components-basic-text.md) - - [textarea](js-reference/component/js-components-basic-textarea.md) - - [toolbar](js-reference/component/js-components-basic-toolbar.md) - - [toolbar-item](js-reference/component/js-components-basic-toolbar-item.md) - - [toggle](js-reference/component/js-components-basic-toggle.md) - - 媒体组件 - - [video](js-reference/component/js-components-media-video.md) - - 画布组件 - - [canvas组件](js-reference/component/js-components-canvas-canvas.md) - - [CanvasRenderingContext2D对象](js-reference/component/js-components-canvas-canvasrenderingcontext2d.md) - - [Image对象](js-reference/component/js-components-canvas-image.md) - - [CanvasGradient对象](js-reference/component/js-components-canvas-canvasgradient.md) - - [ImageData对象](js-reference/component/js-components-canvas-imagedata.md) - - [Path2D对象](js-reference/component/js-components-canvas-path2d.md) - - [ImageBitmap对象](js-reference/component/js-components-canvas-imagebitmap.md) - - [OffscreenCanvas对象](js-reference/component/js-components-canvas-offscreencanvas.md) - - [OffscreenCanvasRenderingContext2D对象](js-reference/component/js-components-canvas-offscreencanvasrenderingcontext2d.md) - - 栅格组件 - - [基本概念](js-reference/component/js-components-grid-basic-concepts.md) - - [grid-container](js-reference/component/js-components-grid-container.md) - - [grid-row](js-reference/component/js-components-grid-row.md) - - [grid-col](js-reference/component/js-components-grid-col.md) - - svg组件 - - [通用属性](js-reference/component/js-components-svg-common-attributes.md) - - [svg](js-reference/component/js-components-svg.md) - - [rect](js-reference/component/js-components-svg-rect.md) - - [circle](js-reference/component/js-components-svg-circle.md) - - [ellipse](js-reference/component/js-components-svg-ellipse.md) - - [path](js-reference/component/js-components-svg-path.md) - - [line](js-reference/component/js-components-svg-line.md) - - [polyline](js-reference/component/js-components-svg-polyline.md) - - [polygon](js-reference/component/js-components-svg-polygon.md) - - [text](js-reference/component/js-components-svg-text.md) - - [tspan](js-reference/component/js-components-svg-tspan.md) - - [textPath](js-reference/component/js-components-svg-textpath.md) - - [animate](js-reference/component/js-components-svg-animate.md) - - [animateMotion](js-reference/component/js-components-svg-animate-motion.md) - - [animateTransform](js-reference/component/js-components-svg-animate-transform.md) - - 自定义组件 - - [基本用法](js-reference/component/js-components-custom-basic-usage.md) - - [自定义事件](js-reference/component/js-components-custom-events.md) - - [Props](js-reference/component/js-components-custom-props.md) - - [事件参数](js-reference/component/js-components-custom-event-parameter.md) - - [slot插槽](js-reference/component/js-components-custom-slot.md) - - [生命周期定义](js-reference/component/js-components-custom-lifecycle.md) - - 接口 - - 基本功能 - - [应用上下文](js-reference/apis/js-apis-system-app.md) - - [日志打印](js-reference/apis/js-apis-basic-features-logs.md) - - [页面路由](js-reference/apis/js-apis-system-router.md) - - [弹窗](js-reference/apis/js-apis-system-prompt.md) - - [应用配置](js-reference/apis/js-apis-system-configuration.md) - - [定时器](js-reference/apis/js-apis-system-timer.md) - - [动画](js-reference/apis/js-apis-animator.md) - - [应用打点](js-reference/apis/js-apis-hiappevent.md) - - [性能打点](js-reference/apis/js-apis-bytrace.md) - - [分布式帐号管理](js-reference/apis/js-apis-distributedaccount.md) - - 媒体 - - [音频管理](js-reference/apis/js-apis-audio.md) - - [音频播放](js-reference/apis/js-apis-media.md) - - 数据管理 - - [文件管理](js-reference/apis/js-apis-fileio.md) - - [单版本分布式数据库](js-reference/apis/js-apis-data-singlekvstore.md) - - [创建和获取分布式数据库](js-reference/apis/js-apis-data-kvmanager.md) - - [KVManager配置信息](js-reference/apis/js-apis-data-kvmanager-config.md) - - [分布式数据库操作描述](js-reference/apis/js-apis-data-kvstore.md) - - [数据类型描述](js-reference/apis/js-apis-data-type.md) - - [轻量级存储](js-reference/apis/js-apis-data-storage.md) - - 设备管理 - - [设备信息](js-reference/apis/js-apis-deviceinfo.md) - - [系统属性](js-reference/apis/js-apis-systemparameter.md) - - [系统恢复](js-reference/apis/js-apis-update.md) - - [显示设备属性](js-reference/apis/js-apis-display.md) - - [电池和充电属性](js-reference/apis/js-apis-batteryinfo.md) - - [设置系统屏幕亮度](js-reference/apis/js-apis-brightness.md) - - [系统电源管理](js-reference/apis/js-apis-power.md) - - [Runninglock锁](js-reference/apis/js-apis-runninglock.md) - - [传感器](js-reference/apis/js-apis-sensor.md) - - [振动](js-reference/apis/js-apis-vibrate.md) - - [国际化（I18n）](js-reference/apis/js-apis-i18n.md) - - [国际化（Intl）](js-reference/apis/js-apis-intl.md) - - [资源管理](js-reference/apis/js-apis-resourcemanage.md) - - [时间设置](js-reference/apis/js-apis-systemtime.md) - - [升级](js-reference/apis/js-apis-libupdateclient.md) - - [获取进程相关的信息](js-reference/apis/js-apis-process.md) - - [字符串编解码](js-reference/apis/js-apis-util.md) - - [启动一个worker](js-reference/apis/js-apis-worker.md) - - [URL字符串解析](js-reference/apis/js-apis-url.md) +- [快速入门](quick-start/start.md) +- [Ability框架](ability/Readme-CN.md) +- 方舟开发框架（ArkUI） + - [基于JS扩展的类Web开发范式](ui/ui-arkui-js.md) + - [基于TS扩展的声明式开发范式](ui/ui-arkui-ts.md) +- [音频](media/audio.md) +- [IPC与RPC通信](connectivity/ipc-rpc.md) +- [JS 开发参考](js-reference/Readme-CN.md) + diff --git a/zh-cn/application-dev/ability/Readme-CN.md b/zh-cn/application-dev/ability/Readme-CN.md new file mode 100644 index 0000000000000000000000000000000000000000..202dc4ca4253a99c5cb7a91f724b85cd2656fcdf --- /dev/null +++ b/zh-cn/application-dev/ability/Readme-CN.md @@ -0,0 +1,8 @@ +# Ability框架 + +* [PageAbility开发说明](page-ability.md) +* [ServiceAbility开发说明](service-ability.md) +* [基于Native的Data Ability创建与访问](data-ability-creating-accessing.md) +* [CommonEvent开发指南](common-event.md) +* [Notification开发指南](notification.md) + 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/ability/common-event.md similarity index 98% rename from "zh-cn/application-dev/quick-start/CommonEvent\345\274\200\345\217\221\346\214\207\345\215\227.md" rename to zh-cn/application-dev/ability/common-event.md index 3f95719dfffb483896bf6ec0f701d0044397645a..1bfe3ed49d5d302762630c3920aa31757dac3ee5 100644 --- "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/ability/common-event.md @@ -1,522 +1,525 @@ -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 | 无 | +# 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/\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/ability/data-ability-creating-accessing.md similarity index 94% rename from "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" rename to zh-cn/application-dev/ability/data-ability-creating-accessing.md index 6a2f10ea98521042c7a0728d03cd2f93fddf01ab..7f3550bb73fb200e9bee2fa314c24bcd11641046 100644 --- "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/ability/data-ability-creating-accessing.md @@ -1,192 +1,186 @@ -# 基于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, - } - ] -); -``` - +# 基于Native的Data Ability创建与访问 + +## 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/ability/figures/page-ability-lifecycle-callbacks.png b/zh-cn/application-dev/ability/figures/page-ability-lifecycle-callbacks.png new file mode 100644 index 0000000000000000000000000000000000000000..4c94556b5c2516ad2978a9a31d833cfb2cf3dd01 Binary files /dev/null and b/zh-cn/application-dev/ability/figures/page-ability-lifecycle-callbacks.png differ diff --git a/zh-cn/application-dev/ability/figures/page-ability-lifecycle.png b/zh-cn/application-dev/ability/figures/page-ability-lifecycle.png new file mode 100644 index 0000000000000000000000000000000000000000..d4fff2a49bf103cb5d8763f271c847fc1b711723 Binary files /dev/null and b/zh-cn/application-dev/ability/figures/page-ability-lifecycle.png differ 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/ability/notification.md similarity index 97% rename from "zh-cn/application-dev/quick-start/Notification\345\274\200\345\217\221\346\214\207\345\215\227.md" rename to zh-cn/application-dev/ability/notification.md index ae87bce4b78b4d61437370f0610e4c69e28bf985..3cad2705a551f32c2375aa41a234bfe4746ab350 100644 --- "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/ability/notification.md @@ -1,1583 +1,1589 @@ - - -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=======================>"); - }); - ``` - - - - - - - - - - - - - - - - - - - - - - - - - - + + +# 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/ability/page-ability.md similarity index 99% rename from "zh-cn/application-dev/quick-start/PageAbility\345\274\200\345\217\221\350\257\264\346\230\216.md" rename to zh-cn/application-dev/ability/page-ability.md index c3d2a7160f646571f4e868a3eaba4b754a452a06..948d45706d4d27942f285b6ca5eb26e1ae34ea9d 100644 --- "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/ability/page-ability.md @@ -1,7 +1,5 @@ # PageAbility开发说明 - - ## PageAbility介绍 Page模板（以下简称“Page”）是FA唯一支持的模板，用于提供与用户交互的能力。 diff --git a/zh-cn/application-dev/ability/public_sys-resources/icon-caution.gif b/zh-cn/application-dev/ability/public_sys-resources/icon-caution.gif new file mode 100644 index 0000000000000000000000000000000000000000..6e90d7cfc2193e39e10bb58c38d01a23f045d571 Binary files /dev/null and b/zh-cn/application-dev/ability/public_sys-resources/icon-caution.gif differ diff --git a/zh-cn/application-dev/ability/public_sys-resources/icon-danger.gif b/zh-cn/application-dev/ability/public_sys-resources/icon-danger.gif new file mode 100644 index 0000000000000000000000000000000000000000..6e90d7cfc2193e39e10bb58c38d01a23f045d571 Binary files /dev/null and b/zh-cn/application-dev/ability/public_sys-resources/icon-danger.gif differ diff --git a/zh-cn/application-dev/ability/public_sys-resources/icon-note.gif b/zh-cn/application-dev/ability/public_sys-resources/icon-note.gif new file mode 100644 index 0000000000000000000000000000000000000000..6314297e45c1de184204098efd4814d6dc8b1cda Binary files /dev/null and b/zh-cn/application-dev/ability/public_sys-resources/icon-note.gif differ diff --git a/zh-cn/application-dev/ability/public_sys-resources/icon-notice.gif b/zh-cn/application-dev/ability/public_sys-resources/icon-notice.gif new file mode 100644 index 0000000000000000000000000000000000000000..86024f61b691400bea99e5b1f506d9d9aef36e27 Binary files /dev/null and b/zh-cn/application-dev/ability/public_sys-resources/icon-notice.gif differ diff --git a/zh-cn/application-dev/ability/public_sys-resources/icon-tip.gif b/zh-cn/application-dev/ability/public_sys-resources/icon-tip.gif new file mode 100644 index 0000000000000000000000000000000000000000..93aa72053b510e456b149f36a0972703ea9999b7 Binary files /dev/null and b/zh-cn/application-dev/ability/public_sys-resources/icon-tip.gif differ diff --git a/zh-cn/application-dev/ability/public_sys-resources/icon-warning.gif b/zh-cn/application-dev/ability/public_sys-resources/icon-warning.gif new file mode 100644 index 0000000000000000000000000000000000000000..6e90d7cfc2193e39e10bb58c38d01a23f045d571 Binary files /dev/null and b/zh-cn/application-dev/ability/public_sys-resources/icon-warning.gif differ 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/ability/service-ability.md similarity index 98% rename from "zh-cn/application-dev/quick-start/ServiceAbility\345\274\200\345\217\221\350\257\264\346\230\216.md" rename to zh-cn/application-dev/ability/service-ability.md index 42269495122e752300c4926d2195551c04ebda76..e0c861c6ae1952a883fb5c48f93b77ebaacc5e59 100644 --- "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/ability/service-ability.md @@ -1,9 +1,5 @@ # ServiceAbility开发说明 -- [创建Service](#section17436202895812) -- [启动Service](#section944219415599) -- [连接Service](#section126857614018) - ## 创建Service 1. Service也是一种Ability，Ability为Service提供了以下生命周期方法，开发者可以重写这些方法，来添加其他Ability请求与Service Ability交互时的处理方法。 diff --git a/zh-cn/application-dev/js-reference/Readme-CN.md b/zh-cn/application-dev/js-reference/Readme-CN.md index f6c0c2e1be171562930eb4287fcc7165366ce427..71fdf4e1ea87bbd9e87914d08ab42bee316e5e86 100755 --- a/zh-cn/application-dev/js-reference/Readme-CN.md +++ b/zh-cn/application-dev/js-reference/Readme-CN.md @@ -1,184 +1,365 @@ # JS开发参考 -- 框架说明 - - [文件组织](js-framework-file.md) - - [js标签配置](js-framework-js-tag.md) - - [app.js](js-framework-js-file.md) - - 语法 - - [HML语法参考](js-framework-syntax-hml.md) - - [CSS语法参考](js-framework-syntax-css.md) - - [JS语法参考](js-framework-syntax-js.md) - - - [生命周期](js-framework-lifecycle.md) - - [资源限定与访问](js-framework-resource-restriction.md) - - [多语言支持](js-framework-multiple-languages.md) - -- [组件](component/Readme-CN.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) - - - 容器组件 - - [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) - - - 基础组件 - - [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) - - - 媒体组件 - - [video](component/js-components-media-video.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) - - - 栅格组件 - - [基本概念](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) - - - svg组件 - - [通用属性](component/js-components-svg-common-attributes.md) - - [svg](component/js-components-svg.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-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) - - Ability框架 +- [基于JS扩展的类Web开发范式](js-based-web-like-development-paradigm/js-web-development-like.md) + - [框架说明](js-based-web-like-development-paradigm/js-framework.md) + - [文件组织](js-based-web-like-development-paradigm/js-framework-file.md) + - [js标签配置](js-based-web-like-development-paradigm/js-framework-js-tag.md) + - [app.js](js-based-web-like-development-paradigm/js-framework-js-file.md) + - [语法](js-based-web-like-development-paradigm/js-framework-syntax.md) + - [HML语法参考](js-based-web-like-development-paradigm/js-framework-syntax-hml.md) + - [CSS语法参考](js-based-web-like-development-paradigm/js-framework-syntax-css.md) + - [JS语法参考](js-based-web-like-development-paradigm/js-framework-syntax-js.md) + + - [生命周期](js-based-web-like-development-paradigm/js-framework-lifecycle.md) + - [资源限定与访问](js-based-web-like-development-paradigm/js-framework-resource-restriction.md) + - [多语言支持](js-based-web-like-development-paradigm/js-framework-multiple-languages.md) + + - [组件](js-based-web-like-development-paradigm/js-components.md) + - [通用](js-based-web-like-development-paradigm/js-components-common.md) + - [通用属性](js-based-web-like-development-paradigm/js-components-common-attributes.md) + - [通用样式](js-based-web-like-development-paradigm/js-components-common-styles.md) + - [通用事件](js-based-web-like-development-paradigm/js-components-common-events.md) + - [通用方法](js-based-web-like-development-paradigm/js-components-common-methods.md) + - [动画样式](js-based-web-like-development-paradigm/js-components-common-animation.md) + - [渐变样式](js-based-web-like-development-paradigm/js-components-common-gradient.md) + - [转场样式](js-based-web-like-development-paradigm/js-components-common-transition.md) + - [媒体查询](js-based-web-like-development-paradigm/js-components-common-mediaquery.md) + - [自定义字体样式](js-based-web-like-development-paradigm/js-components-common-customizing-font.md) + - [原子布局](js-based-web-like-development-paradigm/js-components-common-atomic-layout.md) + + - [容器组件](js-based-web-like-development-paradigm/js-components-container.md) + - [badge](js-based-web-like-development-paradigm/js-components-container-badge.md) + - [dialog](js-based-web-like-development-paradigm/js-components-container-dialog.md) + - [div](js-based-web-like-development-paradigm/js-components-container-div.md) + - [form](js-based-web-like-development-paradigm/js-components-container-form.md) + - [list](js-based-web-like-development-paradigm/js-components-container-list.md) + - [list-item](js-based-web-like-development-paradigm/js-components-container-list-item.md) + - [list-item-group](js-based-web-like-development-paradigm/js-components-container-list-item-group.md) + - [panel](js-based-web-like-development-paradigm/js-components-container-panel.md) + - [popup](js-based-web-like-development-paradigm/js-components-container-popup.md) + - [refresh](js-based-web-like-development-paradigm/js-components-container-refresh.md) + - [stack](js-based-web-like-development-paradigm/js-components-container-stack.md) + - [stepper](js-based-web-like-development-paradigm/js-components-container-stepper.md) + - [stepper-item](js-based-web-like-development-paradigm/js-components-container-stepper-item.md) + - [swiper](js-based-web-like-development-paradigm/js-components-container-swiper.md) + - [tabs](js-based-web-like-development-paradigm/js-components-container-tabs.md) + - [tab-bar](js-based-web-like-development-paradigm/js-components-container-tab-bar.md) + - [tab-content](js-based-web-like-development-paradigm/js-components-container-tab-content.md) + + - [基础组件](js-based-web-like-development-paradigm/js-components-basic.md) + - [button](js-based-web-like-development-paradigm/js-components-basic-button.md) + - [chart](js-based-web-like-development-paradigm/js-components-basic-chart.md) + - [divider](js-based-web-like-development-paradigm/js-components-basic-divider.md) + - [image](js-based-web-like-development-paradigm/js-components-basic-image.md) + - [image-animator](js-based-web-like-development-paradigm/js-components-basic-image-animator.md) + - [input](js-based-web-like-development-paradigm/js-components-basic-input.md) + - [label](js-based-web-like-development-paradigm/js-components-basic-label.md) + - [marquee](js-based-web-like-development-paradigm/js-components-basic-marquee.md) + - [menu](js-based-web-like-development-paradigm/js-components-basic-menu.md) + - [option](js-based-web-like-development-paradigm/js-components-basic-option.md) + - [picker](js-based-web-like-development-paradigm/js-components-basic-picker.md) + - [picker-view](js-based-web-like-development-paradigm/js-components-basic-picker-view.md) + - [piece](js-based-web-like-development-paradigm/js-components-basic-piece.md) + - [progress](js-based-web-like-development-paradigm/js-components-basic-progress.md) + - [qrcode](js-based-web-like-development-paradigm/js-components-basic-qrcode.md) + - [rating](js-based-web-like-development-paradigm/js-components-basic-rating.md) + - [richtext](js-based-web-like-development-paradigm/js-components-basic-richtext.md) + - [search](js-based-web-like-development-paradigm/js-components-basic-search.md) + - [select](js-based-web-like-development-paradigm/js-components-basic-select.md) + - [slider](js-based-web-like-development-paradigm/js-components-basic-slider.md) + - [span](js-based-web-like-development-paradigm/js-components-basic-span.md) + - [switch](js-based-web-like-development-paradigm/js-components-basic-switch.md) + - [text](js-based-web-like-development-paradigm/js-components-basic-text.md) + - [textarea](js-based-web-like-development-paradigm/js-components-basic-textarea.md) + - [toolbar](js-based-web-like-development-paradigm/js-components-basic-toolbar.md) + - [toolbar-item](js-based-web-like-development-paradigm/js-components-basic-toolbar-item.md) + - [toggle](js-based-web-like-development-paradigm/js-components-basic-toggle.md) + + - [媒体组件](js-based-web-like-development-paradigm/js-components-media.md) + - [video](js-based-web-like-development-paradigm/js-components-media-video.md) + + - [画布组件](js-based-web-like-development-paradigm/js-components-canvas.md) + - [canvas组件](js-based-web-like-development-paradigm/js-components-canvas-canvas.md) + - [CanvasRenderingContext2D对象](js-based-web-like-development-paradigm/js-components-canvas-canvasrenderingcontext2d.md) + - [Image对象](js-based-web-like-development-paradigm/js-components-canvas-image.md) + - [CanvasGradient对象](js-based-web-like-development-paradigm/js-components-canvas-canvasgradient.md) + - [ImageData对象](js-based-web-like-development-paradigm/js-components-canvas-imagedata.md) + - [Path2D对象](js-based-web-like-development-paradigm/js-components-canvas-path2d.md) + - [ImageBitmap对象](js-based-web-like-development-paradigm/js-components-canvas-imagebitmap.md) + - [OffscreenCanvas对象](js-based-web-like-development-paradigm/js-components-canvas-offscreencanvas.md) + - [OffscreenCanvasRenderingContext2D对象](js-based-web-like-development-paradigm/js-offscreencanvasrenderingcontext2d.md) + + - [栅格组件](js-based-web-like-development-paradigm/js-components-grid.md) + - [基本概念](js-based-web-like-development-paradigm/js-components-grid-basic-concepts.md) + - [grid-container](js-based-web-like-development-paradigm/js-components-grid-container.md) + - [grid-row](js-based-web-like-development-paradigm/js-components-grid-row.md) + - [grid-col](js-based-web-like-development-paradigm/js-components-grid-col.md) + + - [svg组件](js-based-web-like-development-paradigm/js-svg.md) + - [通用属性](js-based-web-like-development-paradigm/js-components-svg-common-attributes.md) + - [svg](js-based-web-like-development-paradigm/js-components-svg.md) + - [rect](js-based-web-like-development-paradigm/js-components-svg-rect.md) + - [circle](js-based-web-like-development-paradigm/js-components-svg-circle.md) + - [ellipse](js-based-web-like-development-paradigm/js-components-svg-ellipse.md) + - [path](js-based-web-like-development-paradigm/js-components-svg-path.md) + - [line](js-based-web-like-development-paradigm/js-components-svg-line.md) + - [polyline](js-based-web-like-development-paradigm/js-components-svg-polyline.md) + - [polygon](js-based-web-like-development-paradigm/js-components-svg-polygon.md) + - [text](js-based-web-like-development-paradigm/js-components-svg-text.md) + - [tspan](js-based-web-like-development-paradigm/js-components-svg-tspan.md) + - [textPath](js-based-web-like-development-paradigm/js-components-svg-textpath.md) + - [animate](js-based-web-like-development-paradigm/js-components-svg-animate.md) + - [animateMotion](js-based-web-like-development-paradigm/js-components-svg-animatemotion.md) + - [animateTransform](js-based-web-like-development-paradigm/js-components-svg-animatetransform.md) + + - [自定义组件](js-based-web-like-development-paradigm/js-components-custom.md) + - [基本用法](js-based-web-like-development-paradigm/js-components-custom-basic-usage.md) + - [自定义事件](js-based-web-like-development-paradigm/js-components-custom-events.md) + - [Props](js-based-web-like-development-paradigm/js-components-custom-props.md) + - [事件参数](js-based-web-like-development-paradigm/js-components-custom-event-parameter.md) + - [slot插槽](js-based-web-like-development-paradigm/js-components-custom-slot.md) + - [生命周期定义](js-based-web-like-development-paradigm/js-components-custom-lifecycle.md) + + - [附录](js-based-web-like-development-paradigm/js-appendix.md) + - [类型说明](js-based-web-like-development-paradigm/js-appendix-types.md) + +- [基于TS扩展的声明式开发范式](ts-based-declarative-development-paradigm/ts-declarative.md) + - [框架说明](ts-based-declarative-development-paradigm/ts-framework-framework.md) + - [文件组织](ts-based-declarative-development-paradigm/ts-framework-file.md) + - [目录结构](ts-based-declarative-development-paradigm/ts-framework-directory.md) + - [应用代码文件访问规则](ts-based-declarative-development-paradigm/ts-framework-file-access-rules.md) + + - [js标签配置](ts-based-declarative-development-paradigm/ts-framework-js-tag.md) + - [资源访问](ts-based-declarative-development-paradigm/ts-resource-access.md) + - [媒体资源类型说明](ts-based-declarative-development-paradigm/ts-media-resource-type.md) + + - [像素单位](ts-based-declarative-development-paradigm/ts-pixel-units.md) + - [类型定义](ts-based-declarative-development-paradigm/ts-types.md) + + - [声明式语法](ts-based-declarative-development-paradigm/ts-declarative-syntax.md) + - [描述规范使用说明](ts-based-declarative-development-paradigm/ts-syntax-intro.md) + - [通用UI描述规范](ts-based-declarative-development-paradigm/ts-general-ui-description-specifications.md) + - [基本概念](ts-based-declarative-development-paradigm/ts-general-ui-concepts.md) + - [声明式UI描述规范](ts-based-declarative-development-paradigm/ts-declarative-ui-description-specifications.md) + - [无构造参数配置](ts-based-declarative-development-paradigm/ts-parameterless-configuration.md) + - [必选参数构造配置](ts-based-declarative-development-paradigm/ts-configuration-with-mandatory-parameters.md) + - [属性配置](ts-based-declarative-development-paradigm/ts-attribution-configuration.md) + - [事件配置](ts-based-declarative-development-paradigm/ts-event-configuration.md) + - [子组件配置](ts-based-declarative-development-paradigm/ts-child-component-configuration.md) + + - [组件化](ts-based-declarative-development-paradigm/ts-component-based.md) + - [@Component](ts-based-declarative-development-paradigm/ts-component-based-component.md) + - [@Entry](ts-based-declarative-development-paradigm/ts-component-based-entry.md) + - [@Preview](ts-based-declarative-development-paradigm/ts-component-based-preview.md) + - [@Builder](ts-based-declarative-development-paradigm/ts-component-based-builder.md) + - [@Extend](ts-based-declarative-development-paradigm/ts-component-based-extend.md) + - [@CustomDialog](ts-based-declarative-development-paradigm/ts-component-based-customdialog.md) + + - [UI状态管理](ts-based-declarative-development-paradigm/ts-ui-state-management.md) + - [基本概念](ts-based-declarative-development-paradigm/ts-ui-state-mgmt-concepts.md) + - [管理组件拥有的状态](ts-based-declarative-development-paradigm/ts-managing-component-states.md) + - [@State](ts-based-declarative-development-paradigm/ts-component-states-state.md) + - [@Prop](ts-based-declarative-development-paradigm/ts-component-states-prop.md) + - [@Link](ts-based-declarative-development-paradigm/ts-component-states-link.md) + + - [管理应用程序的状态](ts-based-declarative-development-paradigm/ts-managing-application-states.md) + - [接口](ts-based-declarative-development-paradigm/ts-managing-application-states-apis.md) + - [应用程序的数据存储](ts-based-declarative-development-paradigm/ts-application-states-appstorage.md) + - [持久化数据管理](ts-based-declarative-development-paradigm/ts-application-states-apis-persistentstorage.md) + - [环境变量](ts-based-declarative-development-paradigm/ts-application-states-apis-environment.md) + + - [AppStorage与组件同步](ts-based-declarative-development-paradigm/ts-application-states-storagelink-storageprop.md) + + - [其他类目的状态管理](ts-based-declarative-development-paradigm/ts-managing-other-states.md) + - [Observed和ObjectLink数据管理](ts-based-declarative-development-paradigm/ts-other-states-observed-objectlink.md) + - [@Consume和@Provide数据管理](ts-based-declarative-development-paradigm/ts-other-states-consume-provide.md) + - [@Watch](ts-based-declarative-development-paradigm/ts-other-states-watch.md) + + - [渲染控制语法](ts-based-declarative-development-paradigm/ts-rending-control-syntax.md) + - [条件渲染](ts-based-declarative-development-paradigm/ts-rending-control-syntax-if-else.md) + - [循环渲染](ts-based-declarative-development-paradigm/ts-rending-control-syntax-foreach.md) + - [数据懒加载](ts-based-declarative-development-paradigm/ts-rending-control-syntax-lazyforeach.md) + + - [深入理解组件化](ts-based-declarative-development-paradigm/ts-a-deep-dive-into-component.md) + - [build函数](ts-based-declarative-development-paradigm/ts-function-build.md) + - [自定义组件初始化](ts-based-declarative-development-paradigm/ts-custom-component-initialization.md) + - [自定义组件生命周期回调函数](ts-based-declarative-development-paradigm/ts-custom-component-lifecycle-callbacks.md) + - [组件创建和重新初始化示例](ts-based-declarative-development-paradigm/ts-component-creation-re-initialization.md) + + - [语法糖](ts-based-declarative-development-paradigm/ts-syntactic-sugar.md) + - [装饰器](ts-based-declarative-development-paradigm/ts-syntactic-sugar-decorator.md) + - [链式调用](ts-based-declarative-development-paradigm/ts-syntactic-sugar-chaining.md) + - [struct对象](ts-based-declarative-development-paradigm/ts-syntactic-sugar-struct.md) + - [在实例化过程中省略"new"](ts-based-declarative-development-paradigm/ts-instantiating-a-struct-without-new-keyword.md) + - [组件创建使用独立一行](ts-based-declarative-development-paradigm/ts-using-a-separate-line-for-new-component.md) + - [生成器函数内使用TS语言的限制](ts-based-declarative-development-paradigm/ts-restrictions-for-generators.md) + + - [组件](ts-based-declarative-development-paradigm/ts-components.md) + - [通用](ts-based-declarative-development-paradigm/ts-universal-components.md) + - [通用事件](ts-based-declarative-development-paradigm/ts-universal-events.md) + - [点击事件](ts-based-declarative-development-paradigm/ts-universal-events-click.md) + - [触摸事件](ts-based-declarative-development-paradigm/ts-universal-events-touch.md) + - [挂载卸载事件](ts-based-declarative-development-paradigm/ts-universal-events-show-hide.md) + - [按键事件](ts-based-declarative-development-paradigm/ts-universal-events-key.md) + + - [通用属性](ts-based-declarative-development-paradigm/ts-universal-attributes.md) + - [尺寸设置](ts-based-declarative-development-paradigm/ts-universal-attributes-size.md) + - [位置设置](ts-based-declarative-development-paradigm/ts-universal-attributes-location.md) + - [布局约束](ts-based-declarative-development-paradigm/ts-universal-attributes-layout-constraints.md) + - [Flex布局](ts-based-declarative-development-paradigm/ts-universal-attributes-flex-layout.md) + - [边框设置](ts-based-declarative-development-paradigm/ts-universal-attributes-border.md) + - [背景设置](ts-based-declarative-development-paradigm/ts-universal-attributes-background.md) + - [透明度设置](ts-based-declarative-development-paradigm/ts-universal-attributes-opacity.md) + - [显隐控制](ts-based-declarative-development-paradigm/ts-universal-attributes-visibility.md) + - [禁用控制](ts-based-declarative-development-paradigm/ts-universal-attributes-enable.md) + - [浮层](ts-based-declarative-development-paradigm/ts-universal-attributes-overlay.md) + - [Z序控制](ts-based-declarative-development-paradigm/ts-universal-attributes-z-order.md) + - [图形变换](ts-based-declarative-development-paradigm/ts-universal-attributes-transformation.md) + - [图像效果](ts-based-declarative-development-paradigm/ts-universal-attributes-image-effect.md) + - [形状裁剪](ts-based-declarative-development-paradigm/ts-universal-attributes-sharp-clipping.md) + - [文本样式设置](ts-based-declarative-development-paradigm/ts-universal-attributes-text-style.md) + - [栅格设置](ts-based-declarative-development-paradigm/ts-universal-attributes-grid.md) + - [颜色渐变](ts-based-declarative-development-paradigm/ts-universal-attributes-gradient-color.md) + - [Popup控制](ts-based-declarative-development-paradigm/ts-universal-attributes-popup.md) + - [Menu控制](ts-based-declarative-development-paradigm/ts-universal-attributes-menu.md) + + - [手势处理](ts-based-declarative-development-paradigm/ts-gesture-processing.md) + - [绑定手势方法](ts-based-declarative-development-paradigm/ts-gesture-settings.md) + - [基础手势](ts-based-declarative-development-paradigm/ts-basic-gestures.md) + - [TapGesture](ts-based-declarative-development-paradigm/ts-basic-gestures-tapgesture.md) + - [LongPressGesture](ts-based-declarative-development-paradigm/ts-basic-gestures-longpressgesture.md) + - [PanGesture](ts-based-declarative-development-paradigm/ts-basic-gestures-pangesture.md) + - [PinchGesture](ts-based-declarative-development-paradigm/ts-basic-gestures-pinchgesture.md) + - [RotationGesture](ts-based-declarative-development-paradigm/ts-basic-gestures-rotationgesture.md) + + - [组合手势](ts-based-declarative-development-paradigm/ts-combined-gestures.md) + + - [基础组件](ts-based-declarative-development-paradigm/ts-basic-components.md) + - [Blank](ts-based-declarative-development-paradigm/ts-basic-components-blank.md) + - [Button](ts-based-declarative-development-paradigm/ts-basic-components-button.md) + - [DataPanel](ts-based-declarative-development-paradigm/ts-basic-components-datapanel.md) + - [Divider](ts-based-declarative-development-paradigm/ts-basic-components-divider.md) + - [Image](ts-based-declarative-development-paradigm/ts-basic-components-image.md) + - [ImageAnimator](ts-based-declarative-development-paradigm/ts-basic-components-imageanimator.md) + - [Progress](ts-based-declarative-development-paradigm/ts-basic-components-progress.md) + - [QRCode](ts-based-declarative-development-paradigm/ts-basic-components-qrcode.md) + - [Rating](ts-based-declarative-development-paradigm/ts-basic-components-rating.md) + - [Span](ts-based-declarative-development-paradigm/ts-basic-components-span.md) + - [Slider](ts-based-declarative-development-paradigm/ts-basic-components-slider.md) + - [Text](ts-based-declarative-development-paradigm/ts-basic-components-text.md) + + - [容器组件](ts-based-declarative-development-paradigm/ts-components-container.md) + - [AlphabetIndexer](ts-based-declarative-development-paradigm/ts-container-alphabet-indexer.md) + - [Badge](ts-based-declarative-development-paradigm/ts-container-badge.md) + - [Column](ts-based-declarative-development-paradigm/ts-container-column.md) + - [ColumnSplit](ts-based-declarative-development-paradigm/ts-container-columnsplit.md) + - [Counter](ts-based-declarative-development-paradigm/ts-container-counter.md) + - [Flex](ts-based-declarative-development-paradigm/ts-container-flex.md) + - [GridContainer](ts-based-declarative-development-paradigm/ts-container-gridcontainer.md) + - [Grid](ts-based-declarative-development-paradigm/ts-container-grid.md) + - [GridItem](ts-based-declarative-development-paradigm/ts-container-griditem.md) + - [List](ts-based-declarative-development-paradigm/ts-container-list.md) + - [ListItem](ts-based-declarative-development-paradigm/ts-container-listitem.md) + - [Navigator](ts-based-declarative-development-paradigm/ts-container-navigator.md) + - [Panel](ts-based-declarative-development-paradigm/ts-container-panel.md) + - [Row](ts-based-declarative-development-paradigm/ts-container-row.md) + - [RowSplit](ts-based-declarative-development-paradigm/ts-container-rowsplit.md) + - [Scroll](ts-based-declarative-development-paradigm/ts-container-scroll.md) + - [Stack](ts-based-declarative-development-paradigm/ts-container-stack.md) + - [Swiper](ts-based-declarative-development-paradigm/ts-container-swiper.md) + - [Tabs](ts-based-declarative-development-paradigm/ts-container-tabs.md) + - [TabContent](ts-based-declarative-development-paradigm/ts-container-tabcontent.md) + + - [绘制组件](ts-based-declarative-development-paradigm/ts-drawing-components.md) + - [Circle](ts-based-declarative-development-paradigm/ts-drawing-components-circle.md) + - [Ellipse](ts-based-declarative-development-paradigm/ts-drawing-components-ellipse.md) + - [Line](ts-based-declarative-development-paradigm/ts-drawing-components-line.md) + - [Polyline](ts-based-declarative-development-paradigm/ts-drawing-components-polyline.md) + - [Polygon](ts-based-declarative-development-paradigm/ts-drawing-components-polygon.md) + - [Path](ts-based-declarative-development-paradigm/ts-drawing-components-path.md) + - [Rect](ts-based-declarative-development-paradigm/ts-drawing-components-rect.md) + - [Shape](ts-based-declarative-development-paradigm/ts-drawing-components-shape.md) + + - [动画](ts-based-declarative-development-paradigm/ts-animation.md) + - [属性动画](ts-based-declarative-development-paradigm/ts-animatorproperty.md) + - [显式动画](ts-based-declarative-development-paradigm/ts-explicit-animation.md) + - [转场动画](ts-based-declarative-development-paradigm/ts-transition-animation.md) + - [页面间转场](ts-based-declarative-development-paradigm/ts-page-transition-animation.md) + - [组件内转场](ts-based-declarative-development-paradigm/ts-transition-animation-component.md) + - [共享元素转场](ts-based-declarative-development-paradigm/ts-transition-animation-shared-elements.md) + + - [路径动画](ts-based-declarative-development-paradigm/ts-motion-path-animation.md) + - [矩阵变换](ts-based-declarative-development-paradigm/ts-matrix-transformation.md) + - [插值计算](ts-based-declarative-development-paradigm/ts-interpolation-calculation.md) + + - [全局UI方法](ts-based-declarative-development-paradigm/ts-global-ui-methods.md) + - [警告弹窗](ts-based-declarative-development-paradigm/ts-methods-alert-dialog-box.md) + - [自定义弹窗](ts-based-declarative-development-paradigm/ts-methods-custom-dialog-box.md) + - [图片缓存](ts-based-declarative-development-paradigm/ts-methods-image-cache.md) + - [媒体查询](ts-based-declarative-development-paradigm/ts-methods-media-query.md) + + - [附录](ts-based-declarative-development-paradigm/ts-appendix.md) + - [文档中涉及到的内置枚举值](ts-based-declarative-development-paradigm/ts-appendix-enums.md) + +- [接口](apis/js-apis.md) + - [Ability框架](apis/js-apis-ability.md) - [FeatureAbility模块](apis/js-apis-featureAbility.md) - [ParticleAbility模块](apis/js-apis-particleAbility.md) - [DataAbilityHelper模块](apis/js-apis-dataAbilityHelper.md) - [DataUriUtils模块](apis/js-apis-DataUriUtils.md) - [Bundle模块](apis/js-apis-Bundle.md) - - [CommonEvent模块](apis/js-apis-commonEvent.md) + - [CommonEvent模块](apis/js-apis-commonEvent.md) - [Notification模块](apis/js-apis-notification.md) - [Context模块](apis/js-apis-Context.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-apis-resource.md) + - [资源管理](apis/js-apis-resource-manager.md) + - [国际化（I18n）](apis/js-apis-i18n.md) + - [国际化（Intl）](apis/js-apis-intl.md) + - [媒体](apis/js-apis-multmedia.md) - [音频管理](apis/js-apis-audio.md) - [音频播放](apis/js-apis-media.md) - - - 网络与连接 + - [音频录制](apis/js-apis-recorder.md) + - [数据管理](apis/js-apis-data.md) + - [文件管理](apis/js-apis-fileio.md) + - [轻量级存储](apis/js-apis-data-storage.md) + - [分布式数据管理](apis/js-apis-distributed-data.md) + - [关系型数据库](apis/js-apis-data-rdb.md) + - [结果集](apis/js-apis-data-resultset.md) + - [DataAbility 谓词](apis/js-apis-data-ability.md) + - [账号管理](apis/js-apis-account.md) + - [分布式帐号管理](apis/js-apis-distributed-account.md) + - [电话服务](apis/js-apis-telephony.md) - [拨打电话](apis/js-apis-call.md) - [短信服务](apis/js-apis-sms.md) - [SIM卡管理](apis/js-apis-sim.md) - [网络搜索](apis/js-apis-radio.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-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-device-mgmt.md) + - [传感器](apis/js-apis-sensor.md) + - [振动](apis/js-apis-vibrator.md) + - [屏幕亮度](apis/js-apis-brightness.md) + - [电量信息](apis/js-apis-battery-info.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-device-info.md) + - [系统属性](apis/js-apis-system-parameter.md) + - [设备管理](apis/js-apis-device-manager.md) + - [显示设备属性](apis/js-apis-display.md) + - [升级](apis/js-apis-libupdateclient.md) + - [启动恢复](apis/js-apis-update.md) + - [基本功能](apis/js-apis-basic-features.md) + - [应用上下文](apis/js-apis-basic-features-app-context.md) + - [日志打印](apis/js-apis-basic-features-logs.md) + - [页面路由](apis/js-apis-basic-features-routes.md) + - [弹窗](apis/js-apis-basic-features-pop-up.md) + - [应用配置](apis/js-apis-basic-features-configuration.md) + - [定时器](apis/js-apis-basic-features-timer.md) + - [设置系统时间](apis/js-apis-system-time.md) + - [动画](apis/js-apis-basic-features-animator.md) + - [应用打点](apis/js-apis-hiappevent.md) + - [性能打点](apis/js-apis-bytrace.md) + - [语言基础类库](apis/js-apis-base-library.md) - [获取进程相关的信息](apis/js-apis-process.md) + - [URL字符串解析](apis/js-apis-url.md) - [字符串编解码](apis/js-apis-util.md) - [启动一个worker](apis/js-apis-worker.md) - - [URL字符串解析](apis/js-apis-url.md) diff --git a/zh-cn/application-dev/js-reference/apis/Readme-CN.md b/zh-cn/application-dev/js-reference/apis/Readme-CN.md deleted file mode 100644 index a9f489658856c6e253fdf79e6a7224906c285d97..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/apis/Readme-CN.md +++ /dev/null @@ -1,67 +0,0 @@ -# 接口 - - -- Ability框架 - - [FeatureAbility模块](js-apis-featureAbility.md) - - [ParticleAbility模块](js-apis-particleAbility.md) - - [DataAbilityHelper模块](js-apis-dataAbilityHelper.md) - - [DataUriUtils模块](js-apis-DataUriUtils.md) - - [Bundle模块](js-apis-Bundle.md) - - [CommonEvent模块](js-apis-commonEvent.md) - - [Notification模块](js-apis-notification.md) - - [Context模块](js-apis-Context.md) - -- [基本功能](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-apis-multmedia.md) - - [音频管理](js-apis-audio.md) - - [音频播放](js-apis-media.md) - -- 网络与连接 - - [拨打电话](js-apis-call.md) - - [短信服务](js-apis-sms.md) - - [SIM卡管理](js-apis-sim.md) - - [网络搜索](js-apis-radio.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/apis/figures/zh-cn_image_0000001164217678.png b/zh-cn/application-dev/js-reference/apis/figures/zh-cn_image_0000001164217678.png new file mode 100644 index 0000000000000000000000000000000000000000..1e2cc34bf20dcd27dc9dff6a3eb6eb56dd4809c4 Binary files /dev/null and b/zh-cn/application-dev/js-reference/apis/figures/zh-cn_image_0000001164217678.png differ diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-Bundle.md b/zh-cn/application-dev/js-reference/apis/js-apis-Bundle.md index ad32538ebe6bcf81c00cac835e20973995a8a8a1..c671755ff0d8f13824eb059b1c40610c8faf041b 100644 --- a/zh-cn/application-dev/js-reference/apis/js-apis-Bundle.md +++ b/zh-cn/application-dev/js-reference/apis/js-apis-Bundle.md @@ -1,4 +1,4 @@ -### Bundle模块(JS端SDK接口) +# Bundle模块(JS端SDK接口) #### 支持设备 diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-Context.md b/zh-cn/application-dev/js-reference/apis/js-apis-Context.md index 60907af2a6cb5c466c113a7ee1cf6654d8a0b13f..e0536f8dfad59b120302406a2a519eebd19703f1 100644 --- a/zh-cn/application-dev/js-reference/apis/js-apis-Context.md +++ b/zh-cn/application-dev/js-reference/apis/js-apis-Context.md @@ -1,4 +1,4 @@ -### Context模块(JS端SDK接口) +# Context模块(JS端SDK接口) #### 支持设备 diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-ability.md b/zh-cn/application-dev/js-reference/apis/js-apis-ability.md new file mode 100644 index 0000000000000000000000000000000000000000..08fbf6e592c0c8259b604ecea5ad08354276ef31 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-ability.md @@ -0,0 +1,10 @@ +# Ability框架 + +- [FeatureAbility模块](js-apis-featureAbility.md) +- [ParticleAbility模块](js-apis-particleAbility.md) +- [DataAbilityHelper模块](js-apis-dataAbilityHelper.md) +- [DataUriUtils模块](js-apis-DataUriUtils.md) +- [Bundle模块](js-apis-Bundle.md) +- [CommonEvent模块](js-apis-commonEvent.md) +- [Notification模块](js-apis-notification.md) +- [Context模块](js-apis-Context.md) \ No newline at end of file diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-account.md b/zh-cn/application-dev/js-reference/apis/js-apis-account.md new file mode 100644 index 0000000000000000000000000000000000000000..2c512038e6d44de51aea28dbe681f0d81b2e2237 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-account.md @@ -0,0 +1,5 @@ +# 账号管理 + +- **[分布式帐号管理](js-apis-distributed-account.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 deleted file mode 100644 index c1e6b64fd262c9701d72727ed5c06829ea6c44d6..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/apis/js-apis-animator.md +++ /dev/null @@ -1,435 +0,0 @@ -# 动画 - -- [导入模块](#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-audio.md b/zh-cn/application-dev/js-reference/apis/js-apis-audio.md index 8fa663e5f71eeb552b7f8642e82b4e6492d2592c..d076b7cfef2b8f9568afb08d0d8ff2d864ee0c5d 100644 --- a/zh-cn/application-dev/js-reference/apis/js-apis-audio.md +++ b/zh-cn/application-dev/js-reference/apis/js-apis-audio.md @@ -1,53 +1,5 @@ # 音频管理 -- [导入模块](#s56d19203690d4782bfc74069abb6bd71) -- [权限](#section11257113618419) -- [getAudioManager\(\): AudioManager](#section84581011418) -- [AudioVolumeType](#section92261857172218) -- [DeviceFlag](#section11285183164210) -- [DeviceRole](#section380038142619) -- [DeviceType](#devicetype) - - [ActiveDeviceType7+](#activedevicetype) -- [AudioRingMode7+](#section14948916131018) -- [AudioManager](#section8265143814015) - - [setVolume\(volumeType: AudioVolumeType, volume: number, callback: AsyncCallback\): void](#section189141826104616) - - [setVolume\(volumeType: AudioVolumeType, volume: number\): Promise](#section102021249114612) - - [getVolume\(volumeType: AudioVolumeType, callback: AsyncCallback\): void](#section4387320194714) - - [getVolume\(volumeType: AudioVolumeType\): Promise](#section04121965119) - - [getMinVolume\(volumeType: AudioVolumeType, callback: AsyncCallback\): void](#section188714283511) - - [getMinVolume\(volumeType: AudioVolumeType\): Promise](#section41556389511) - - [getMaxVolume\(volumeType: AudioVolumeType, callback: AsyncCallback\): void](#section690395418516) - - [getMaxVolume\(volumeType: AudioVolumeType\): Promise](#section155151345217) - - [mute\(volumeType: AudioVolumeType, mute: boolean, callback: AsyncCallback\): void7+](#section13516136134613) - - [mute\(volumeType: AudioVolumeType, mute: boolean\): Promise7+](#section7519036144616) - - [isMute\(volumeType: AudioVolumeType, callback: AsyncCallback\): void7+](#section10684183819585) - - [isMute\(volumeType: AudioVolumeType\): Promise7+](#section6920211145610) - - [isActive\(volumeType: AudioVolumeType, callback: AsyncCallback\): void7+](#section380012544121) - - [isActive\(volumeType: AudioVolumeType\): Promise7+](#section1880315481216) - - [setRingerMode\(mode: AudioRingMode, callback: AsyncCallback\): void7+](#section18572131483613) - - [setRingerMode\(mode: AudioRingMode\): Promise7+](#section55741914143615) - - [getRingerMode\(callback: AsyncCallback\): void7+](#section149044108162) - - [getRingerMode\(\): Promise7+](#section13908210101620) - - [setAudioParameter\(key: string, value: string, callback: AsyncCallback\): void7+](#section1691957174818) - - [setAudioParameter\(key: string, value: string\): Promise7+](#section18121057174820) - - [getAudioParameter\(key: string, callback: AsyncCallback\): void7+](#section1415145714812) - - [getAudioParameter\(key: string\): Promise7+](#section3185577485) - - [getDevices\(deviceFlag: DeviceFlag, callback: AsyncCallback\): void](#section11536182020523) - - [getDevices\(deviceFlag: DeviceFlag\): Promise](#section181733125210) - - [setDeviceActive\(deviceType: ActiveDeviceType, active: boolean, callback: AsyncCallback\): void7+](#section103558400222) - - [setDeviceActive\(deviceType: ActiveDeviceType, active: boolean\): Promise7+](#section1235914401228) - - [isDeviceActive\(deviceType: ActiveDeviceType, callback: AsyncCallback\): void7+](#section12363240122219) - - [isDeviceActive\(deviceType: ActiveDeviceType\): Promise7+](#section18366184012213) - - [setMicrophoneMute\(mute: boolean, callback: AsyncCallback\): void7+](#section14703163618122) - - [setMicrophoneMute\(mute: boolean\): Promise7+](#section56287111791) - - [isMicrophoneMute\(callback: AsyncCallback\): void7+](#section6632141119912) - - [isMicrophoneMute\(\): Promise7+](#section196363111918) - -- [AudioDeviceDescriptor](#section164657411927) - - [属性](#section4947115405) - -- [AudioDeviceDescriptors](#section5181155710523) - ## 导入模块 ``` diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-base-library.md b/zh-cn/application-dev/js-reference/apis/js-apis-base-library.md new file mode 100644 index 0000000000000000000000000000000000000000..66c47168cbb49e768e9ab441fc63992f0e6114d9 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-base-library.md @@ -0,0 +1,11 @@ +# 语言基础类库 + +- **[获取进程相关的信息](js-apis-process.md)** + +- **[URL字符串解析](js-apis-url.md)** + +- **[字符串编解码](js-apis-util.md)** + +- **[启动一个worker](js-apis-worker.md)** + + diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-animator.md b/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-animator.md new file mode 100644 index 0000000000000000000000000000000000000000..81e08630864c13e55f3f79c4add7fd28807b74cb --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-animator.md @@ -0,0 +1,480 @@ +# 动画 + +>![](../../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。

+
+ +- 示例 + + ``` + +
+ +
+ ``` + + ``` + /* xxx.css */ + .container { + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + } + .btn{ + width: 300px; + margin-top: 40px; + } + ``` + + ``` + /* xxx.js */ + export default { + 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。

+
+ +- 示例 + + ``` + +
+ + +
+ ``` + + ``` + /* xxx.css */ + .container { + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + } + .btn{ + width: 300px; + margin-top: 40px; + } + ``` + + ``` + /* xxx.js */ + export default { + 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-app-context.md b/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-app-context.md new file mode 100644 index 0000000000000000000000000000000000000000..201556ce619453520e8fb4a15fbd48108c5d89fd --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-app-context.md @@ -0,0 +1,84 @@ +# 应用上下文 + +## 导入模块 + +``` +import app from '@system.app'; +``` + +## 权限列表 + +无 + +## app.getInfo + +getInfo\(\): <[AppResponse](#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-basic-features-configuration.md b/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-configuration.md new file mode 100644 index 0000000000000000000000000000000000000000..6b0aa3826a59574a7d20fdb88958182797b5b6a8 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-configuration.md @@ -0,0 +1,73 @@ +# 应用配置 + +## 导入模块 + +``` +import configuration from '@system.configuration'; +``` + +## 权限列表 + +无 + +## configuration.getLocale + +getLocale\(\): <[LocaleResponse](#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-basic-features-logs.md b/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-logs.md index 3de7df438d7a930578fc2f61fa3b0e9cdcc87f84..8b172bec109982ffc628e3bc37862f3691096b5a 100644 --- 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 @@ -1,23 +1,14 @@ -# 日志打印 +# 日志打印 -- [导入模块](#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 +## console.debug debug\(message: string\): void @@ -25,66 +16,63 @@ debug\(message: string\): void - 参数 - -

参数名

+ + - - - - - - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

message

+

message

string

+

string

是

+

是

表示要打印的文本信息。

+

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

参数名

+ + - - - - - - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

message

+

message

string

+

string

是

+

是

表示要打印的文本信息。

+

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

参数名

+ + - - - - - - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

message

+

message

string

+

string

是

+

是

表示要打印的文本信息。

+

表示要打印的文本信息。
-## console.warn +## console.warn warn\(message: string\): void @@ -124,31 +112,31 @@ warn\(message: string\): void - 参数 - -

参数名

+ + - - - - - - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

message

+

message

string

+

string

是

+

是

表示要打印的文本信息。

+

表示要打印的文本信息。
-## console.error +## console.error error\(message: string\): void @@ -156,37 +144,39 @@ error\(message: string\): void - 参数 - -

参数名

+ + - - - - - - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

message

+

message

string

+

string

是

+

是

表示要打印的文本信息。

+

表示要打印的文本信息。
-## 示例 +## 示例 ``` + var versionCode = 1; console.info('Hello World. The current version code is ' + versionCode); console.log(`versionCode: ${versionCode}`) -console.log('versionCode:%d.', versionCode);6+ +// 以下写法从API Version 6开始支持 +console.log('versionCode:%d.', versionCode); ``` 在DevEco Studio的底部，切换到“HiLog”窗口。选择当前的设备及进程，日志级别选择Info，搜索内容设置为“Hello World”。此时窗口仅显示符合条件的日志，效果如图所示： diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-pop-up.md b/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-pop-up.md new file mode 100644 index 0000000000000000000000000000000000000000..82706369ec346547864cc2200ff1a24616597c32 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-pop-up.md @@ -0,0 +1,310 @@ +# 弹窗 + +## 导入模块 + +``` +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-basic-features-routes.md b/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-routes.md new file mode 100644 index 0000000000000000000000000000000000000000..8c933dc7b27d3188053b540acca82943651b9177 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-routes.md @@ -0,0 +1,457 @@ +# 页面路由 + +>![](../../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](#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-basic-features-timer.md b/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-timer.md new file mode 100644 index 0000000000000000000000000000000000000000..d81c74fcbee4d5fa935e3dadb79cbec638b6b495 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-basic-features-timer.md @@ -0,0 +1,248 @@ +# 定时器 + +## 导入模块 + +无需导入。 + +## 权限列表 + +无 + +## 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/apis/js-apis-basic-features.md b/zh-cn/application-dev/js-reference/apis/js-apis-basic-features.md index e18a036a49a1b98a2418616f2b0b7a5050cea455..58d82e38f171849cb607ca3e77aa243b8f9f21f0 100644 --- 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 @@ -1,23 +1,23 @@ -# 基本功能 +# 基本功能 -- **[应用上下文](js-apis-system-app.md)** +- **[应用上下文](js-apis-basic-features-app-context.md)** - **[日志打印](js-apis-basic-features-logs.md)** -- **[页面路由](js-apis-system-router.md)** +- **[页面路由](js-apis-basic-features-routes.md)** -- **[弹窗](js-apis-system-prompt.md)** +- **[弹窗](js-apis-basic-features-pop-up.md)** -- **[应用配置](js-apis-system-configuration.md)** +- **[应用配置](js-apis-basic-features-configuration.md)** -- **[定时器](js-apis-system-timer.md)** +- **[定时器](js-apis-basic-features-timer.md)** -- **[动画](js-apis-animator.md)** +- **[设置系统时间](js-apis-system-time.md)** + +- **[动画](js-apis-basic-features-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-battery-info.md b/zh-cn/application-dev/js-reference/apis/js-apis-battery-info.md new file mode 100644 index 0000000000000000000000000000000000000000..ce90dd03f8e7035a7a6f6ea304c12f644e3b95d2 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-battery-info.md @@ -0,0 +1,273 @@ +# 电量信息 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从 API Version 6 开始支持。 + +## 导入模块 + +``` +import batteryInfo from '@ohos.batteryInfo'; +``` + +## 属性 + +描述电池信息。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

可读

+

可写

+

描述

+

batterySOC

+

number

+

是

+

否

+

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

+

chargingStatus

+

BatteryChargeState

+

是

+

否

+

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

+

healthStatus

+

BatteryHealthState

+

是

+

否

+

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

+

pluggedType

+

BatteryPluggedType

+

是

+

否

+

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

+

voltage

+

number

+

是

+

否

+

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

+

technology

+

string

+

是

+

否

+

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

+

batteryTemperature

+

number

+

是

+

否

+

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

+

isBatteryPresent7+

+

boolean

+

是

+

否

+

表示当前设备是否支持电池或者电池是否在位。

+
+ +- 示例： + + ``` + 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-batteryinfo.md b/zh-cn/application-dev/js-reference/apis/js-apis-batteryinfo.md deleted file mode 100644 index 58bafe703f6d2789f8baeb0cbc61a2a1d61a0885..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/apis/js-apis-batteryinfo.md +++ /dev/null @@ -1,251 +0,0 @@ -# 电池和充电属性 - -- [导入模块](#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 index e8f04a6f71b2454368efc722bcbc76e66c27ec2b..fb8f8bd696127f5727c98e9d371c55c5ee160614 100644 --- a/zh-cn/application-dev/js-reference/apis/js-apis-brightness.md +++ b/zh-cn/application-dev/js-reference/apis/js-apis-brightness.md @@ -1,18 +1,15 @@ -# 设置系统屏幕亮度 - -- [导入模块](#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'. +import brightness from '@ohos.brightness'; ``` -## brightness.setValue +## brightness.setValue setValue\(value: number\) @@ -20,24 +17,24 @@ setValue\(value: number\) - 参数： - -

参数名

+ + - - - - - - - @@ -46,7 +43,7 @@ setValue\(value: number\) - 示例： ``` - import brightness from '@ohos.brightness.d.ts' + 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 index e24428644d6139938a408b579b6a8c13551c3c64..26b64d588e2d201948d2ae28ff9df9076317debd 100644 --- a/zh-cn/application-dev/js-reference/apis/js-apis-bytrace.md +++ b/zh-cn/application-dev/js-reference/apis/js-apis-bytrace.md @@ -1,25 +1,19 @@ -# 性能打点 - -- [导入模块](#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 +## bytrace.startTrace startTrace\(name: string, taskId: number, expectedTime?: number\): void @@ -27,49 +21,49 @@ startTrace\(name: string, taskId: number, expectedTime?: number\): void - 参数： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

value

+

value

number

+

number

是

+

是

亮度的值（0~255）

+

亮度的值（0~255）

参数名

+ + - - - - - - - - - - - - - - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

name

+

name

string

+

string

是

+

是

要追踪的任务名称

+

要追踪的任务名称

taskId

+

taskId

number

+

number

是

+

是

任务id

+

任务id

expectedTime

+

expectedTime

number

+

number

否

+

否

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

+

期望的耗时时间，单位：ms
>![](../../public_sys-resources/icon-note.gif) **说明：** - >如果多个要追踪任务的name相同，taskId必须不一致。通过name和taskId来唯一标识一个任务。 + >如果有多个相同name的任务需要追踪或者对同一个任务要追踪多次，并且这些会同时被执行，则每次调用startTrace的taskId必须不一致。如果具有相同name的任务是串行执行的，则taskId可以相同。在下面bytrace.finishTrace的示例中会举例说明。 - 示例： @@ -79,7 +73,7 @@ startTrace\(name: string, taskId: number, expectedTime?: number\): void ``` -## bytrace.finishTrace +## bytrace.finishTrace finishTrace\(name: string, taskId: number\): void @@ -87,33 +81,33 @@ finishTrace\(name: string, taskId: number\): void - 参数： - -

参数名

+ + - - - - - - - - - - - @@ -128,42 +122,64 @@ finishTrace\(name: string, taskId: number\): void bytrace.finishTrace("myTestFunc", 1); ``` + ``` + //追踪并行执行的同名任务 + bytrace.startTrace("myTestFunc", 1); + ...... //业务流程 + bytrace.startTrace("myTestFunc", 2); //第二个追踪的任务开始，同时第一个追踪的同名任务还没结束，出现了并行执行，对应接口的taskId需要不同。 + ...... //业务流程 + bytrace.finishTrace("myTestFunc", 1); + ...... //业务流程 + bytrace.finishTrace("myTestFunc", 2); + ``` + + ``` + //追踪串行执行的同名任务 + bytrace.startTrace("myTestFunc", 1); + ...... //业务流程 + bytrace.finishTrace("myTestFunc", 1); //第一个追踪的任务结束 + ...... //业务流程 + bytrace.startTrace("myTestFunc", 1); //第二个追踪的同名任务开始，同名的待追踪任务串行执行。 + ...... //业务流程 + bytrace.finishTrace("myTestFunc", 1); + ``` + -## bytrace.traceByValue +## bytrace.traceByValue -traceByValue\(name: string, count: number\): void +traceByValue\(name: string, value: number\): void 用来标记一个预追踪的数值变量，该变量的数值会不断变化。 - 参数： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

name

+

name

string

+

string

是

+

是

要追踪的任务名称

+

要追踪的任务名称

taskId

+

taskId

number

+

number

是

+

是

任务id

+

任务id

参数名

+ + - - - - - - - - - - - diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-call.md b/zh-cn/application-dev/js-reference/apis/js-apis-call.md index 784b99569ae9f79002334812a3671a1250e81bbb..ebc03287ad8161a21f3385992137568e7baeb163 100755 --- a/zh-cn/application-dev/js-reference/apis/js-apis-call.md +++ b/zh-cn/application-dev/js-reference/apis/js-apis-call.md @@ -1,26 +1,5 @@ # 拨打电话 -- [导入模块](#导入模块) -- [call.dial](#call.dial-callback1) -- [call.dial](#call.dial-callback2) -- [call.dial](#call.dial-promise) -- [call.hasCall](#call.hasCall-callback) -- [call.hasCall](#call.hasCall-promise) -- [call.getCallState](#call.getCallState-callback]) -- [call.getCallState](#call.getCallState-promise) -- [call.isEmergencyPhoneNumber7+](#call.isEmergencyPhoneNumber-callback1) -- [call.isEmergencyPhoneNumber7+](#call.isEmergencyPhoneNumber-callback2) -- [call.isEmergencyPhoneNumber7+](#call.isEmergencyPhoneNumber-promise) -- [call.formatPhoneNumber7+](#call.formatPhoneNumber-callback1) -- [call.formatPhoneNumber7+](#call.formatPhoneNumber-callback2) -- [call.formatPhoneNumber7+](#call.formatPhoneNumber-promise) -- [call.formatPhoneNumberToE1647+](#call.formatPhoneNumberToE164-callback) -- [call.formatPhoneNumberToE1647+](#call.formatPhoneNumberToE164-promise) -- [DialOptions](#DialOptions) -- [CallState](#CallState) -- [EmergencyNumberOptions7+](#EmergencyNumberOptions) -- [NumberFormatOptions7+](#NumberFormatOptions) - >**说明：** > >- 从 API Version 6 开始支持。 diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-commonEvent.md b/zh-cn/application-dev/js-reference/apis/js-apis-commonEvent.md index 2efca69b56b2942079425873e16a0763d4d93bd8..dd7dc23cbbdbc2538c2720380f728795872e21b2 100644 --- a/zh-cn/application-dev/js-reference/apis/js-apis-commonEvent.md +++ b/zh-cn/application-dev/js-reference/apis/js-apis-commonEvent.md @@ -1,4 +1,4 @@ -CommonEvent模块(JS端SDK接口) +# CommonEvent模块(JS端SDK接口) #### 支持设备 diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-data-ability.md b/zh-cn/application-dev/js-reference/apis/js-apis-data-ability.md new file mode 100644 index 0000000000000000000000000000000000000000..b19e3f579ea243989999ed1529cac5b42be2e3d3 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-data-ability.md @@ -0,0 +1,1698 @@ +# DataAbility 谓词 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从 API Version 7 开始支持。 + +## 导入模块 + +``` +import dataAbility from '@ohos.data.dataAbility' +``` + +## 权限 + +无 + +## dataAbility.createRdbPredicates + +createRdbPredicates\(name: string, dataAbilityPredicates: DataAbilityPredicates\): rdb.RdbPredicates + +从DataAabilityPredicates对象创建RdbPredicates对象。 + +- 参数： + + +

参数名

类型

+

类型

必填

+

必填

说明

+

说明

name

+

name

string

+

string

是

+

是

要追踪的数值变量名称

+

要追踪的数值变量名称

count

+

value

number

+

number

是

+

是

变量的值

+

变量的值
+ + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

name

+

string

+

是

+

数据库表中表名。

+

dataAbilityPredicates

+

DataAbilityPredicates

+

是

+

dataAbility谓词。

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

类型

+

说明

+

rdb.RdbPredicates

+

返回RdbPredicates对象。

+
+ +- 示例： + + ``` + let dataAbilityPredicates = new dataAbility.DataAbilityPredicates() + dataAbilityPredicates.equalTo("NAME", "Rose").between("AGE", 16, 30) + let predicates = dataAbility.createRdbPredicates("EMPLOYEE", dataAbilityPredicates) + ``` + + +## DataAbilityPredicates + +提供用于实现不同查询方法的谓词。 + +### equalTo + +equalTo\(field: string, value: ValueType\): DataAbilityPredicates + +配置谓词以匹配数据类型为ValueType且值等于指定值的字段。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

field

+

string

+

是

+

数据库表中的列名。

+

value

+

ValueType

+

是

+

指示要与谓词匹配的值。

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

类型

+

说明

+

DataAbilityPredicates

+

返回与指定字段匹配的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataAbility.DataAbilityPredicates("EMPLOYEE") + predicates.equalTo("NAME", "lisi") + ``` + + +### notEqualTo + +notEqualTo\(field: string, value: ValueType\): DataAbilityPredicates + +配置谓词以匹配数据类型为ValueType且值不等于指定值的字段。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

field

+

string

+

是

+

数据库表中的列名。

+

value

+

ValueType

+

是

+

指示要与谓词匹配的值。

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

类型

+

说明

+

DataAbilityPredicates

+

返回与指定字段匹配的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataAbility.DataAbilityPredicates("EMPLOYEE") + predicates.notEqualTo("NAME", "lisi") + ``` + + +### beginWrap + +beginWrap\(\): DataAbilityPredicates + +向谓词添加左括号。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

DataAbilityPredicates

+

返回带有左括号的DataAbility谓词。

+
+ +- 示例： + + ``` + let predicates = new dataAbilitylity.DataAbilityPredicates("EMPLOYEE") + predicates.equalTo("NAME", "lisi") + .beginWrap() + .equalTo("AGE", 18) + .or() + .equalTo("SALARY", 200.5) + .endWrap() + ``` + + +### endWrap + +endWrap\(\): DataAbilityPredicates + +向谓词添加右括号。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

DataAbilityPredicates

+

返回带有右括号的DataAbility谓词。

+
+ +- 示例： + + ``` + let predicates = new dataAbility.DataAbilityPredicates("EMPLOYEE") + predicates.equalTo("NAME", "lisi") + .beginWrap() + .equalTo("AGE", 18) + .or() + .equalTo("SALARY", 200.5) + .endWrap() + ``` + + +### or + +or\(\): DataAbilityPredicates + +将或条件添加到谓词中。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

DataAbilityPredicates

+

返回带有或条件的DataAbility谓词。

+
+ +- 示例： + + ``` + let predicates = new dataAbility.DataAbilityPredicates("EMPLOYEE") + predicates.equalTo("NAME", "Lisa") + .or() + .equalTo("NAME", "Rose") + ``` + + +### and + +and\(\): DataAbilityPredicates + +向谓词添加和条件。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

DataAbilityPredicates

+

返回带有和条件的DataAbility谓词。

+
+ +- 示例： + + ``` + let predicates = new dataAbility.DataAbilityPredicates("EMPLOYEE") + predicates.equalTo("NAME", "Lisa") + .and() + .equalTo("SALARY", 200.5) + ``` + + +### contains + +contains\(field: string, value: string\): DataAbilityPredicates + +配置谓词以匹配数据类型为String且value包含指定值的字段。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

field

+

string

+

是

+

数据库表中的列名。

+

value

+

string

+

是

+

指示要与谓词匹配的值。

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

类型

+

说明

+

DataAbilityPredicates

+

返回与指定字段匹配的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataAbility.DataAbilityPredicates("EMPLOYEE") + predicates.contains("NAME", "os") + ``` + + +### beginsWith + +beginsWith\(field: string, value: string\): DataAbilityPredicates + +配置谓词以匹配数据类型为String且值以指定字符串开头的字段。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

field

+

string

+

是

+

数据库表中的列名。

+

value

+

string

+

是

+

指示要与谓词匹配的值。

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

类型

+

说明

+

DataAbilityPredicates

+

返回与指定字段匹配的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataAbility.DataAbilityPredicates("EMPLOYEE") + predicates.beginsWith("NAME", "os") + ``` + + +### endsWith + +endsWith\(field: string, value: string\): DataAbilityPredicates + +配置谓词以匹配数据类型为String且值以指定字符串结尾的字段。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

field

+

string

+

是

+

数据库表中的列名。

+

value

+

string

+

是

+

指示要与谓词匹配的值。

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

类型

+

说明

+

DataAbilityPredicates

+

返回与指定字段匹配的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataAbility.DataAbilityPredicates("EMPLOYEE") + predicates.endsWith("NAME", "se") + ``` + + +### isNull + +isNull\(field: string\): DataAbilityPredicates + +配置谓词以匹配值为null的字段。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

field

+

string

+

是

+

数据库表中的列名。

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

类型

+

说明

+

DataAbilityPredicates

+

返回与指定字段匹配的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataAbility.DataAbilityPredicates("EMPLOYEE") + predicates.isNull("NAME") + ``` + + +### isNotNull + +isNotNull\(field: string\): DataAbilityPredicates + +配置谓词以匹配值不为null的指定字段。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

field

+

string

+

是

+

数据库表中的列名。

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

类型

+

说明

+

DataAbilityPredicates

+

返回与指定字段匹配的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataAbility.DataAbilityPredicates("EMPLOYEE") + predicates.isNotNull("NAME") + ``` + + +### like + +like\(field: string, value: string\): DataAbilityPredicates + +配置谓词以匹配数据类型为string且值类似于指定字符串的字段。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

field

+

string

+

是

+

数据库表中的列名。

+

value

+

string

+

是

+

指示要与谓词匹配的值。

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

类型

+

说明

+

DataAbilityPredicates

+

返回与指定字段匹配的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataAbility.DataAbilityPredicates("EMPLOYEE") + predicates.like("NAME", "%os%") + ``` + + +### glob + +glob\(field: string, value: string\): DataAbilityPredicates + +配置谓词匹配数据类型为string的指定字段。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

field

+

string

+

是

+

数据库表中的列名。

+

value

+

string

+

是

+

指示要与谓词匹配的值。

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

类型

+

说明

+

DataAbilityPredicates

+

返回与指定字段匹配的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataAbility.DataAbilityPredicates("EMPLOYEE") + predicates.glob("NAME", "?h*g") + ``` + + +### between + +between\(field: string, low: ValueType, high: ValueType\): DataAbilityPredicates + +将谓词配置为匹配数据类型为ValueType且value在指定范围内的指定字段。 + +- 参数： + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

field

+

string

+

是

+

数据库表中的列名。

+

low

+

ValueType

+

是

+

指示与谓词匹配的最小值。

+

high

+

ValueType

+

是

+

指示与谓词匹配的最大值。

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

类型

+

说明

+

DataAbilityPredicates

+

返回与指定字段匹配的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataAbility.DataAbilityPredicates("EMPLOYEE") + predicates.between("AGE", 10, 50) + ``` + + +### notBetween + +notBetween\(field: string, low: ValueType, high: ValueType\): DataAbilityPredicates + +配置谓词以匹配数据类型为ValueType且value超出给定范围的指定字段。 + +- 参数： + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

field

+

string

+

是

+

数据库表中的列名。

+

low

+

ValueType

+

是

+

指示与谓词匹配的最小值。

+

high

+

ValueType

+

是

+

指示与谓词匹配的最大值。

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

类型

+

说明

+

DataAbilityPredicates

+

返回与指定字段匹配的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataAbility.DataAbilityPredicates("EMPLOYEE") + predicates.notBetween("AGE", 10, 50) + ``` + + +### greaterThan + +greaterThan\(field: string, value: ValueType\): DataAbilityPredicates + +配置谓词以匹配数据类型为ValueType且值大于指定值的字段。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

field

+

string

+

是

+

数据库表中的列名。

+

value

+

ValueType

+

是

+

指示要与谓词匹配的值。

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

类型

+

说明

+

DataAbilityPredicates

+

返回与指定字段匹配的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataAbility.DataAbilityPredicates("EMPLOYEE") + predicates.greaterThan("AGE", 18) + ``` + + +### lessThan + +lessThan\(field: string, value: ValueType\): DataAbilityPredicates + +配置谓词以匹配数据类型为valueType且value小于指定值的字段。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

field

+

string

+

是

+

数据库表中的列名。

+

value

+

ValueType

+

是

+

指示要与谓词匹配的值。

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

类型

+

说明

+

DataAbilityPredicates

+

返回与指定字段匹配的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataAbility.DataAbilityPredicates("EMPLOYEE") + predicates.lessThan("AGE", 20) + ``` + + +### greaterThanOrEqualTo + +greaterThanOrEqualTo\(field: string, value: ValueType\): DataAbilityPredicates + +配置谓词以匹配数据类型为ValueType且value大于或等于指定值的字段。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

field

+

string

+

是

+

数据库表中的列名。

+

value

+

ValueType

+

是

+

指示要与谓词匹配的值。

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

类型

+

说明

+

DataAbilityPredicates

+

返回与指定字段匹配的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataAbility.DataAbilityPredicates("EMPLOYEE") + predicates.greaterThanOrEqualTo("AGE", 18) + ``` + + +### lessThanOrEqualTo + +lessThanOrEqualTo\(field: string, value: ValueType\): DataAbilityPredicates + +配置谓词以匹配数据类型为ValueType且value小于或等于指定值的字段。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

field

+

string

+

是

+

数据库表中的列名。

+

value

+

ValueType

+

是

+

指示要与谓词匹配的值。

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

类型

+

说明

+

DataAbilityPredicates

+

返回与指定字段匹配的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataAbility.DataAbilityPredicates("EMPLOYEE") + predicates.lessThanOrEqualTo("AGE", 20) + ``` + + +### orderByAsc + +orderByAsc\(field: string\): DataAbilityPredicates + +配置谓词以匹配其值按升序排序的列。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

field

+

string

+

是

+

数据库表中的列名。

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

类型

+

说明

+

DataAbilityPredicates

+

返回与指定字段匹配的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataAbility.DataAbilityPredicates("EMPLOYEE") + predicates.orderByAsc("NAME") + ``` + + +### orderByDesc + +orderByDesc\(field: string\): DataAbilityPredicates + +配置谓词以匹配其值按降序排序的列。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

field

+

string

+

是

+

数据库表中的列名。

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

类型

+

说明

+

DataAbilityPredicates

+

返回与指定字段匹配的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataAbility.DataAbilityPredicates("EMPLOYEE") + predicates.orderByDesc("AGE") + ``` + + +### distinct + +distinct\(\): DataAbilityPredicates + +配置谓词以过滤重复记录并仅保留其中一个。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

DataAbilityPredicates

+

返回可用于过滤重复记录的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataAbility.DataAbilityPredicates("EMPLOYEE") + predicates.equalTo("NAME", "Rose").distinct("NAME") + let resultSet = await rdbStore.query(predicates, ["NAME"]) + ``` + + +### limitAs + +limitAs\(value: number\): DataAbilityPredicates + +设置最大数据记录数的谓词。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

value

+

number

+

是

+

最大数据记录数。

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

类型

+

说明

+

DataAbilityPredicates

+

返回可用于设置最大数据记录数的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataAbility.DataAbilityPredicates("EMPLOYEE") + predicates.equalTo("NAME", "Rose").limitAs(3) + ``` + + +### offsetAs + +offsetAs\(rowOffset: number\): DataAbilityPredicates + +配置谓词以指定返回结果的起始位置。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

rowOffset

+

number

+

是

+

返回结果的起始位置，取值为正整数。

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

类型

+

说明

+

DataAbilityPredicates

+

返回具有指定返回结果起始位置的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataAbility.DataAbilityPredicates("EMPLOYEE") + predicates.equalTo("NAME", "Rose").offsetAs(3) + ``` + + +### groupBy + +groupBy\(fields: Array\): DataAbilityPredicates + +配置谓词按指定列分组查询结果。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

fields

+

Array<string>

+

是

+

指定分组依赖的列名。

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

类型

+

说明

+

DataAbilityPredicates

+

返回分组查询列的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataAbility.DataAbilityPredicates("EMPLOYEE") + predicates.groupBy(["AGE", "NAME"]) + ``` + + +### indexedBy + +indexedBy\(indexName: string\): DataAbilityPredicates + +配置谓词以指定索引列。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

indexName

+

string

+

是

+

索引列的名称。

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

类型

+

说明

+

DataAbilityPredicates

+

返回具有指定索引列的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataAbility.DataAbilityPredicates("EMPLOYEE") + predicates.indexedBy("SALARY_INDEX") + ``` + + +### in + +in\(field: string, value: Array\): DataAbilityPredicates + +配置谓词以匹配数据类型为ValueType数组且值在给定范围内的指定字段。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

field

+

string

+

是

+

数据库表中的列名。

+

value

+

Array<ValueType>

+

是

+

以ValueType型数组形式指定的要匹配的值。

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

类型

+

说明

+

DataAbilityPredicates

+

返回与指定字段匹配的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataAbility.DataAbilityPredicates("EMPLOYEE") + predicates.in("AGE", [18, 20]) + ``` + + +### notIn + +notIn\(field: string, value: Array\): DataAbilityPredicates + +配置谓词以匹配数据类型为ValueType数组且值不在给定范围内的指定字段。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

field

+

string

+

是

+

数据库表中的列名。

+

value

+

Array<ValueType>

+

是

+

以ValueType型数组形式指定的要匹配的值。

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

类型

+

说明

+

DataAbilityPredicates

+

返回与指定字段匹配的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataAbility.DataAbilityPredicates("EMPLOYEE") + predicates.notIn("NAME", ["Lisa", "Rose"]) + ``` + + 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 deleted file mode 100644 index 4e8a8397a5c45c46f8e1520d3a9bae4f20fe5bf1..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/apis/js-apis-data-kvmanager-config.md +++ /dev/null @@ -1,130 +0,0 @@ -# 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 deleted file mode 100644 index 4eba1ebe246881218cd3a3201b6005b4f18b88f2..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/apis/js-apis-data-kvmanager.md +++ /dev/null @@ -1,246 +0,0 @@ -# 创建和获取分布式数据库 - -- [导入模块](#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 deleted file mode 100644 index a97a102fc61543b0331fb0e57cda78bee4cc4b2b..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/apis/js-apis-data-kvstore.md +++ /dev/null @@ -1,346 +0,0 @@ -# 分布式数据库操作描述 - -- [导入模块](#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-rdb.md b/zh-cn/application-dev/js-reference/apis/js-apis-data-rdb.md new file mode 100644 index 0000000000000000000000000000000000000000..4c86eb19b634875cd7ca1c54880166c7045187e6 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-data-rdb.md @@ -0,0 +1,2642 @@ +# 关系型数据库 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从 API Version 7 开始支持。 + +## 导入模块 + +``` +import dataRdb from '@ohos.data.rdb' +``` + +## 权限 + +无 + +## dataRdb.getRdbStore + +getRdbStore\(config: StoreConfig, version: number, callback: AsyncCallback\): void + +获得一个相关的RdbStore，操作关系型数据库，用户可以根据自己的需求配置RdbStore的参数，然后通过RdbStore调用相关接口可以执行相关的数据操作，结果以callback形式返回。 + +- 参数： + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

config

+

StoreConfig

+

是

+

与此RDB存储相关的数据库配置。

+

version

+

number

+

是

+

数据库版本。

+

callback

+

AsyncCallback<RdbStore>

+

是

+

指定callback回调函数。返回一个RdbStore。

+
+ +- 示例： + + ``` + import dataRdb from '@ohos.data.rdb' + const STORE_CONFIG = { name: "RdbTest.db" } + const SQL_CREATE_TABLE = "CREATE TABLE IF NOT EXISTS EMPLOYEE (ID INTEGER PRIMARY KEY AUTOINCREMENT, NAME TEXT NOT NULL, AGE INTEGER, SALARY REAL, CODES BLOB)" + dataRdb.getRdbStore(STORE_CONFIG, 1, function (err, rdbStore) { + rdbStore.executeSql(SQL_CREATE_TABLE) + console.info(TAG + 'create table done.') + }) + ``` + + +## dataRdb.getRdbStore + +getRdbStore\(config: StoreConfig, version: number\): Promise + +获得一个相关的RdbStore，操作关系型数据库，用户可以根据自己的需求配置RdbStore的参数，然后通过RdbStore调用相关接口可以执行相关的数据操作，结果以Promise形式返回。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

config

+

StoreConfig

+

是

+

与此RDB存储相关的数据库配置。

+

version

+

number

+

是

+

数据库版本。

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

类型

+

说明

+

Promise<RdbStore>

+

指定Promise回调函数。返回一个RdbStore。

+
+ +- 示例： + + ``` + import dataRdb from '@ohos.data.rdb' + const STORE_CONFIG = { name: "RdbTest.db" } + const SQL_CREATE_TABLE = "CREATE TABLE IF NOT EXISTS EMPLOYEE (ID INTEGER PRIMARY KEY AUTOINCREMENT, NAME TEXT NOT NULL, AGE INTEGER, SALARY REAL, CODES BLOB)" + let promise = dataRdb.getRdbStore(STORE_CONFIG, 1); + promise.then(async (rdbStore) => { + await rdbStore.executeSql(SQL_CREATE_TABLE, null) + }).catch((err) => { + expect(null).assertFail(); + }) + ``` + + +## dataRdb.deleteRdbStore + +deleteRdbStore\(name: string, callback: AsyncCallback\): void + +删除数据库，结果以callback形式返回。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

name

+

string

+

是

+

数据库名称。

+

callback

+

AsyncCallback<void>

+

是

+

指定callback回调函数。如果数据库已删除，则为true；否则返回false。

+
+ +- 示例： + + ``` + import dataRdb from '@ohos.data.rdb' + dataRdb.deleteRdbStore("RdbTest.db", function (err, rdbStore) { + console.info(TAG + 'delete store done.')}) + ``` + + +## dataRdb.deleteRdbStore + +deleteRdbStore\(name: string\): Promise + +使用指定的数据库文件配置删除数据库，结果以Promise形式返回。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

name

+

string

+

是

+

数据库名称。

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

类型

+

说明

+

Promise<void>

+

指定Promise回调函数。如果数据库已删除，则为true；否则返回false。

+
+ +- 示例： + + ``` + import dataRdb from '@ohos.data.rdb' + let promise = dataRdb.deleteRdbStore("RdbTest.db") + promise.then(()=>{ + console.info(TAG + 'delete store done.') + }) + ``` + + +## RdbPredicates + +表示关系型数据库（RDB）的谓词。该类确定RDB中条件表达式的值是true还是false。 + +### constructor + +constructor\(name: string\) + +构造函数。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

name

+

string

+

是

+

数据库表名。

+
+ +- 示例： + + ``` + import dataRdb from '@ohos.data.rdb' + let predicates = new dataRdb.RdbPredicates("EMPLOYEE") + ``` + + +### equalTo + +equalTo\(field: string, value: ValueType\): RdbPredicates + +配置谓词以匹配数据字段为ValueType且值等于指定值的字段。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

field

+

string

+

是

+

数据库表中的列名。

+

value

+

ValueType

+

是

+

指示要与谓词匹配的值。

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

类型

+

说明

+

RdbPredicates

+

返回与指定字段匹配的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataRdb.RdbPredicates("EMPLOYEE") + predicates.equalTo("NAME", "lisi") + ``` + + +### notEqualTo + +notEqualTo\(field: string, value: ValueType\): RdbPredicates + +配置谓词以匹配数据字段为ValueType且值不等于指定值的字段。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

field

+

string

+

是

+

数据库表中的列名。

+

value

+

ValueType

+

是

+

指示要与谓词匹配的值。

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

类型

+

说明

+

RdbPredicates

+

返回与指定字段匹配的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataRdb.RdbPredicates("EMPLOYEE") + predicates.notEqualTo("NAME", "lisi") + ``` + + +### beginWrap + +beginWrap\(\): RdbPredicates + +向谓词添加左括号。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

RdbPredicates

+

返回带有左括号的Rdb谓词。

+
+ +- 示例： + + ``` + let predicates = new dataRdb.RdbPredicates("EMPLOYEE") + predicates.equalTo("NAME", "lisi") + .beginWrap() + .equalTo("AGE", 18) + .or() + .equalTo("SALARY", 200.5) + .endWrap() + ``` + + +### endWrap + +endWrap\(\): RdbPredicates + +向谓词添加右括号。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

RdbPredicates

+

返回带有右括号的Rdb谓词。

+
+ +- 示例： + + ``` + let predicates = new dataRdb.RdbPredicates("EMPLOYEE") + predicates.equalTo("NAME", "lisi") + .beginWrap() + .equalTo("AGE", 18) + .or() + .equalTo("SALARY", 200.5) + .endWrap() + ``` + + +### or + +or\(\): RdbPredicates + +将或条件添加到谓词中。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

RdbPredicates

+

返回带有或条件的Rdb谓词。

+
+ +- 示例： + + ``` + let predicates = new dataRdb.RdbPredicates("EMPLOYEE") + predicates.equalTo("NAME", "Lisa") + .or() + .equalTo("NAME", "Rose") + ``` + + +### and + +and\(\): RdbPredicates + +向谓词添加和条件。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

RdbPredicates

+

返回带有和条件的Rdb谓词。

+
+ +- 示例： + + ``` + let predicates = new dataRdb.RdbPredicates("EMPLOYEE") + predicates.equalTo("NAME", "Lisa") + .and() + .equalTo("SALARY", 200.5) + ``` + + +### contains + +contains\(field: string, value: string\): RdbPredicat + +配置谓词以匹配数据字段为String且value包含指定值的字段。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

field

+

string

+

是

+

数据库表中的列名。

+

value

+

string

+

是

+

指示要与谓词匹配的值。

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

类型

+

说明

+

RdbPredicates

+

返回与指定字段匹配的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataRdb.RdbPredicates("EMPLOYEE") + predicates.contains("NAME", "os") + ``` + + +### beginsWith + +beginsWith\(field: string, value: string\): RdbPredicates + +配置谓词以匹配数据字段为String且值以指定字符串开头的字段。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

field

+

string

+

是

+

数据库表中的列名。

+

value

+

string

+

是

+

指示要与谓词匹配的值。

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

类型

+

说明

+

RdbPredicates

+

返回与指定字段匹配的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataRdb.RdbPredicates("EMPLOYEE") + predicates.beginsWith("NAME", "os") + ``` + + +### endsWith + +endsWith\(field: string, value: string\): RdbPredicates + +配置谓词以匹配数据字段为String且值以指定字符串结尾的字段。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

field

+

string

+

是

+

数据库表中的列名。

+

value

+

string

+

是

+

指示要与谓词匹配的值。

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

类型

+

说明

+

RdbPredicates

+

返回与指定字段匹配的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataRdb.RdbPredicates("EMPLOYEE") + predicates.endsWith("NAME", "se") + ``` + + +### isNull + +isNull\(field: string\): RdbPredicates + +配置谓词以匹配值为null的字段。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

field

+

string

+

是

+

数据库表中的列名。

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

类型

+

说明

+

RdbPredicates

+

返回与指定字段匹配的谓词。

+
+ +- 示例 + + ``` + let predicates = new dataRdb.RdbPredicates("EMPLOYEE") + predicates.isNull("NAME") + ``` + + +### isNotNull + +isNotNull\(field: string\): RdbPredicates + +配置谓词以匹配值不为null的指定字段。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

field

+

string

+

是

+

数据库表中的列名。

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

类型

+

说明

+

RdbPredicates

+

返回与指定字段匹配的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataRdb.RdbPredicates("EMPLOYEE") + predicates.isNotNull("NAME") + ``` + + +### like + +like\(field: string, value: string\): RdbPredicates + +配置谓词以匹配数据字段为String且值类似于指定字符串的字段。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

field

+

string

+

是

+

数据库表中的列名。

+

value

+

string

+

是

+

指示要与谓词匹配的值。

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

类型

+

说明

+

RdbPredicates

+

返回与指定字段匹配的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataRdb.RdbPredicates("EMPLOYEE") + predicates.like("NAME", "%os%") + ``` + + +### glob + +glob\(field: string, value: string\): RdbPredicates + +配置RdbPredicates匹配数据字段为String的指定字段。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

field

+

string

+

是

+

数据库表中的列名。

+

value

+

string

+

是

+

指示要与谓词匹配的值。

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

类型

+

说明

+

RdbPredicates

+

返回指定的Rdb谓词。

+
+ +- 示例： + + ``` + let predicates = new dataRdb.RdbPredicates("EMPLOYEE") + predicates.glob("NAME", "?h*g") + ``` + + +### between + +between\(field: string, low: ValueType, high: ValueType\): RdbPredicates + +将谓词配置为匹配数据字段为ValueType且value在给定范围内的指定字段。 + +- 参数： + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

field

+

string

+

是

+

数据库表中的列名。

+

low

+

ValueType

+

是

+

指示与谓词匹配的最小值。

+

high

+

ValueType

+

是

+

指示要与谓词匹配的最大值。

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

类型

+

说明

+

RdbPredicates

+

返回与指定字段匹配的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataRdb.RdbPredicates("EMPLOYEE") + predicates.between("AGE", 10, 50) + ``` + + +### notBetween + +notBetween\(field: string, low: ValueType, high: ValueType\): RdbPredicates + +配置RdbPredicates以匹配数据字段为ValueType且value超出给定范围的指定字段。 + +- 参数： + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

field

+

string

+

是

+

数据库表中的列名。

+

low

+

ValueType

+

是

+

指示与谓词匹配的最小值。

+

high

+

ValueType

+

是

+

指示要与谓词匹配的最大值。

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

类型

+

说明

+

RdbPredicates

+

返回与指定字段匹配的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataRdb.RdbPredicates("EMPLOYEE") + predicates.notBetween("AGE", 10, 50) + ``` + + +### greaterThan + +greaterThan\(field: string, value: ValueType\): RdbPredicatesgr + +配置谓词以匹配数据字段为ValueType且值大于指定值的字段。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

field

+

string

+

是

+

数据库表中的列名。

+

value

+

ValueType

+

是

+

指示要与谓词匹配的值。

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

类型

+

说明

+

RdbPredicates

+

返回与指定字段匹配的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataRdb.RdbPredicates("EMPLOYEE") + predicates.greaterThan("AGE", 18) + ``` + + +### lessThan + +lessThan\(field: string, value: ValueType\): RdbPredicates + +配置谓词以匹配数据字段为valueType且value小于指定值的字段。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

field

+

string

+

是

+

数据库表中的列名。

+

value

+

ValueType

+

是

+

指示要与谓词匹配的值。

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

类型

+

说明

+

RdbPredicates

+

返回与指定字段匹配的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataRdb.RdbPredicates("EMPLOYEE") + predicates.lessThan("AGE", 20) + ``` + + +### greaterThanOrEqualTo + +greaterThanOrEqualTo\(field: string, value: ValueType\): RdbPredicates + +配置谓词以匹配数据字段为ValueType且value大于或等于指定值的字段。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

field

+

string

+

是

+

数据库表中的列名。

+

value

+

ValueType

+

是

+

指示要与谓词匹配的值。

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

类型

+

说明

+

RdbPredicates

+

返回与指定字段匹配的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataRdb.RdbPredicates("EMPLOYEE") + predicates.greaterThanOrEqualTo("AGE", 18) + ``` + + +### lessThanOrEqualTo + +lessThanOrEqualTo\(field: string, value: ValueType\): RdbPredicates + +配置谓词以匹配数据字段为ValueType且value小于或等于指定值的字段。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

field

+

string

+

是

+

数据库表中的列名。

+

value

+

ValueType

+

是

+

指示要与谓词匹配的值。

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

类型

+

说明

+

RdbPredicates

+

返回与指定字段匹配的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataRdb.RdbPredicates("EMPLOYEE") + predicates.lessThanOrEqualTo("AGE", 20) + ``` + + +### orderByAsc + +orderByAsc\(field: string\): RdbPredicates + +配置谓词以匹配其值按升序排序的列。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

field

+

string

+

是

+

数据库表中的列名。

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

类型

+

说明

+

RdbPredicates

+

返回与指定字段匹配的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataRdb.RdbPredicates("EMPLOYEE") + predicates.orderByAsc("NAME") + ``` + + +### orderByDesc + +orderByDesc\(field: string\): RdbPredicates + +配置谓词以匹配其值按降序排序的列。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

field

+

string

+

是

+

数据库表中的列名。

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

类型

+

说明

+

RdbPredicates

+

返回与指定字段匹配的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataRdb.RdbPredicates("EMPLOYEE") + predicates.orderByDesc("AGE") + ``` + + +### distinct + +distinct\(\): RdbPredicates + +配置谓词以过滤重复记录并仅保留其中一个。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

RdbPredicates

+

返回可用于过滤重复记录的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataRdb.RdbPredicates("EMPLOYEE") + predicates.equalTo("NAME", "Rose").distinct("NAME") + let resultSet = await rdbStore.query(predicates, ["NAME"]) + ``` + + +### limitAs + +limitAs\(value: number\): RdbPredicates + +设置最大数据记录数的谓词。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

value

+

number

+

是

+

最大数据记录数。

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

类型

+

说明

+

RdbPredicates

+

返回可用于设置最大数据记录数的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataRdb.RdbPredicates("EMPLOYEE") + predicates.equalTo("NAME", "Rose").limitAs(3) + ``` + + +### offsetAs + +offsetAs\(rowOffset: number\): RdbPredicates + +配置RdbPredicates以指定返回结果的起始位置。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

rowOffset

+

number

+

是

+

返回结果的起始位置，取值为正整数。

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

类型

+

说明

+

RdbPredicates

+

返回具有指定返回结果起始位置的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataRdb.RdbPredicates("EMPLOYEE") + predicates.equalTo("NAME", "Rose").offsetAs(3) + ``` + + +### groupBy + +groupBy\(fields: Array\): RdbPredicates + +配置RdbPredicates按指定列分组查询结果。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

fields

+

Array<string>

+

是

+

指定分组依赖的列名。

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

类型

+

说明

+

RdbPredicates

+

返回分组查询列的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataRdb.RdbPredicates("EMPLOYEE") + predicates.groupBy(["AGE", "NAME"]) + ``` + + +### indexedBy + +indexedBy\(indexName: string\): RdbPredicates + +配置RdbPredicates以指定索引列。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

indexName

+

string

+

是

+

索引列的名称。

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

类型

+

说明

+

RdbPredicates

+

返回具有指定索引列的RdbPredicates。

+
+ +- 示例： + + ``` + let predicates = new dataRdb.RdbPredicates("EMPLOYEE") + predicates.indexedBy("SALARY_INDEX") + ``` + + +### in + +in\(field: string, value: Array\): RdbPredicates + +配置RdbPredicates以匹配数据字段为ValueType数组且值在给定范围内的指定字段。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

field

+

string

+

是

+

数据库表中的列名。

+

value

+

Array<ValueType>

+

是

+

以ValueType型数组形式指定的要匹配的值。

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

类型

+

说明

+

RdbPredicates

+

返回与指定字段匹配的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataRdb.RdbPredicates("EMPLOYEE") + predicates.in("AGE", [18, 20]) + ``` + + +### notIn + +notIn\(field: string, value: Array\): RdbPredicates + +将RdbPredicates配置为匹配数据字段为ValueType且值超出给定范围的指定字段。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

field

+

string

+

是

+

数据库表中的列名。

+

value

+

Array<ValueType>

+

是

+

以ValueType数组形式指定的要匹配的值。

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

类型

+

说明

+

RdbPredicates

+

返回与指定字段匹配的谓词。

+
+ +- 示例： + + ``` + let predicates = new dataRdb.RdbPredicates("EMPLOYEE") + predicates.notIn("NAME", ["Lisa", "Rose"]) + ``` + + +## RdbStore + +提供管理关系数据库\(RDB\)方法的接口。 + +### insert + +insert\(name: string, values: ValuesBucket, callback: AsyncCallback\):void + +向目标表中插入一行数据，结果以callback形式返回。 + +- 参数： + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

name

+

string

+

是

+

指定的目标表名。

+

values

+

ValuesBucket

+

是

+

表示要插入到表中的数据行。

+

callback

+

AsyncCallback<number>

+

是

+

指定callback回调函数。如果操作成功，返回行ID；否则返回-1。

+
+ +- 示例： + + ``` + const valueBucket = { + "NAME": "Lisa", + "AGE": 18, + "SALARY": 100.5, + "CODES": new Uint8Array([1, 2, 3, 4, 5]), + } + rdbStore.insert("EMPLOYEE", valueBucket, function (err, ret) { + expect(1).assertEqual(ret) + console.log(TAG + "insert first done: " + ret)}) + ``` + + +### insert + +insert\(name: string, values: ValuesBucket\):Promise + +向目标表中插入一行数据，结果以Promise形式返回。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

name

+

string

+

是

+

指定的目标表名。

+

values

+

ValuesBucket

+

是

+

表示要插入到表中的数据行。

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

类型

+

说明

+

Promise<number>

+

指定Promise回调函数。如果操作成功，返回行ID；否则返回-1。

+
+ +- 示例： + + ``` + const valueBucket = { + "NAME": "Lisa", + "AGE": 18, + "SALARY": 100.5, + "CODES": new Uint8Array([1, 2, 3, 4, 5]), + } + let promise = rdbStore.insert("EMPLOYEE", valueBucket) + promise.then(async (ret) => { + await console.log(TAG + "insert first done: " + ret) + }).catch((err) => {}) + ``` + + +### update + +update\(values: ValuesBucket, rdbPredicates: RdbPredicates, callback: AsyncCallback\):void + +根据RdbPredicates的指定实例对象更新数据库中的数据，结果以callback形式返回。 + +- 参数： + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

values

+

ValuesBucket

+

是

+

value指示数据库中要更新的数据行。键值对与数据库表的列名相关联

+

rdbPredicates

+

RdbPredicates

+

是

+

表示要插入到表中的数据行。

+

callback

+

AsyncCallback<number>

+

是

+

指定的callback回调方法。返回受影响的行数。

+
+ +- 示例： + + ``` + const valueBucket = { + "NAME": "Rose", + "AGE": 22, + "SALARY": 200.5, + "CODES": new Uint8Array([1, 2, 3, 4, 5]), + } + let predicates = new dataRdb.RdbPredicates("EMPLOYEE") + predicates.equalTo("NAME", "Lisa") + rdbStore.update(valueBucket, predicates, function (err, ret) { + console.log(TAG + "updated row count: " + changedRows)}) + ``` + + +### update + +update\(values: ValuesBucket, rdbPredicates: RdbPredicates\):Promise + +根据RdbPredicates的指定实例对象更新数据库中的数据，结果以Promise形式返回。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

values

+

ValuesBucket

+

是

+

value指示数据库中要更新的数据行。键值对与数据库表的列名相关联

+

rdbPredicates

+

RdbPredicates

+

是

+

表示要插入到表中的数据行。

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

类型

+

说明

+

Promise<number>

+

指定的Promise回调方法。返回受影响的行数。

+
+ +- 示例： + + ``` + const valueBucket = { + "NAME": "Rose", + "AGE": 22, + "SALARY": 200.5, + "CODES": new Uint8Array([1, 2, 3, 4, 5]), + } + let predicates = new dataRdb.RdbPredicates("EMPLOYEE") + predicates.equalTo("NAME", "Lisa") + let promise = rdbStore.update(valueBucket, predicates) + promise.then(async (ret) => { + await console.log(TAG + "updated row count: " + changedRows) + }).catch((err) => {}) + ``` + + +### delete + +delete\(rdbPredicates: RdbPredicates, callback: AsyncCallback\):void + +根据rdbPredicates的指定实例对象从数据库中删除数据，结果以callback形式返回。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

rdbPredicates

+

RdbPredicates

+

是

+

RdbPredicates的实例对象指定的删除条件。

+

callback

+

AsyncCallback<number>

+

是

+

指定callback回调函数。返回受影响的行数。

+
+ +- 示例： + + ``` + let predicates = new dataRdb.RdbPredicates("EMPLOYEE") + predicates.equalTo("NAME", "Lisa") + rdbStore.delete(predicates, function (err, rows) { + console.log(TAG + "delete rows: " + rows)}) + ``` + + +### delete + +delete\(rdbPredicates: RdbPredicates\):Promise + +根据rdbPredicates的指定实例对象从数据库中删除数据，结果以Promise形式返回。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

rdbPredicates

+

RdbPredicates

+

是

+

RdbPredicates的实例对象指定的删除条件。

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

类型

+

说明

+

Promise<number>

+

指定Promise回调函数。返回受影响的行数。

+
+ +- 示例： + + ``` + let predicates = new dataRdb.RdbPredicates("EMPLOYEE") + predicates.equalTo("NAME", "Lisa") + let promise = rdbStore.delete(predicates) + promise.then((rows) => { + console.log(TAG + "delete rows: " + rows) + }).catch((err) => {}) + ``` + + +### query + +query\(rdbPredicates: RdbPredicates, columns: Array, callback: AsyncCallback\):void + +根据指定条件查询数据库中的数据，结果以callback形式返回。 + +- 参数： + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

rdbPredicates

+

RdbPredicates

+

是

+

表示rdbPredicates的实例对象指定的查询条件。

+

columns

+

Array<string>

+

是

+

表示要查询的列。如果值为空，则查询应用于所有列。

+

callback

+

AsyncCallback<ResultSet>

+

是

+

指定callback回调函数。如果操作成功，则返回ResultSet对象。

+
+ +- 示例： + + ``` + let predicates = new dataRdb.RdbPredicates("EMPLOYEE") + predicates.equalTo("NAME", "Rose") + rdbStore.query(predicates, ["ID", "NAME", "AGE", "SALARY", "CODES"], function (err, resultSet) { + console.log(TAG + "resultSet column names:" + resultSet.columnNames) + console.log(TAG + "resultSet column count:" + resultSet.columnCount)}) + ``` + + +### query + +query\(rdbPredicates: RdbPredicates, columns: Array\):Promise + +根据指定条件查询数据库中的数据，结果以Promise形式返回。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

rdbPredicates

+

RdbPredicates

+

是

+

表示rdbPredicates的实例对象指定的查询条件。

+

columns

+

Array<string>

+

是

+

表示要查询的列。如果值为空，则查询应用于所有列。

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

类型

+

说明

+

Promise<ResultSet>

+

指定Promise回调函数。如果操作成功，则返回ResultSet对象。

+
+ +- 示例： + + ``` + let predicates = new dataRdb.RdbPredicates("EMPLOYEE") + predicates.equalTo("NAME", "Rose") + let promise = rdbStore.query(predicates, ["ID", "NAME", "AGE", "SALARY", "CODES"]) + promise.then((resultSet) => { + console.log(TAG + "resultSet column names:" + resultSet.columnNames) + console.log(TAG + "resultSet column count:" + resultSet.columnCount)}) + ``` + + +### executeSql + +executeSql\(sql: string, bindArgs: Array, callback: AsyncCallback\):void + +执行包含指定参数但不返回值的SQL语句，结果以callbck形式返回。 + +- 参数： + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

sql

+

string

+

是

+

指定要执行的SQL语句。

+

bindArgs

+

Array<ValueType>

+

是

+

SQL语句中参数的值。

+

callback

+

AsyncCallback<void>

+

是

+

指定callback回调函数。

+
+ + +- 示例： + + ``` + rdbStore.executeSql("DELETE FROM EMPLOYEE", function () { + console.info(TAG + 'delete done.')}) + ``` + + +### executeSql + +executeSql\(sql: string, bindArgs: Array\):Promise + +执行包含指定参数但不返回值的SQL语句，结果以Promise形式返回。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

sql

+

string

+

是

+

指定要执行的SQL语句。

+

bindArgs

+

Array<ValueType>

+

是

+

SQL语句中参数的值。

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

类型

+

说明

+

Promise<void>

+

指定Promise回调函数。

+
+ +- 示例： + + ``` + let promise = rdbStore.executeSql("DELETE FROM EMPLOYEE") + promise.then(() => { + console.info(TAG + 'delete done.')}) + ``` + + +## StoreConfig + +管理关系数据库配置。 + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

name

+

string

+

是

+

数据库文件名。

+
+ +## ValueType + +用于表示允许的数据字段类型。 + + + + + + + + + + + + + + + + +

名称

+

说明

+

number

+

表示值类型为数字。

+

string

+

表示值类型为字符。

+

boolean

+

表示值类型为布尔值。

+
+ +## ValuesBucket + +用于存储键值对。 + + + + + + + + + + + + + + +

名称

+

参数类型

+

必填

+

说明

+

[key: string]

+

ValueType| Uint8Array | null

+

是

+

用于存储键值对。

+
+ diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-data-resultset.md b/zh-cn/application-dev/js-reference/apis/js-apis-data-resultset.md new file mode 100644 index 0000000000000000000000000000000000000000..a1900a06c456a84390b177de12d6263ed8e4e38a --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-data-resultset.md @@ -0,0 +1,788 @@ +# 结果集 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从 API Version 7 开始支持。 + +## 使用说明 + +需要通过[RdbStore.query\(\)](js-apis-data-rdb.md#section6231155031814)获取resultSet对象。 + +``` +import dataRdb from '@ohos.data.rdb'; +let predicates = new dataRdb.RdbPredicates("EMPLOYEE") +predicates.equalTo("AGE", 18) +let promise = rdbStore.query(predicates, ["ID", "NAME", "AGE", "SALARY", "CODES"]) +promise.then((resultSet) => { + await console.log(TAG + "resultSet columnNames:" + resultSet.columnNames); + await console.log(TAG + "resultSet columnCount:" + resultSet.columnCount);}) +``` + +## 权限 + +无 + +## ResultSet + +提供通过查询数据库生成的数据库结果集的访问方法。 + +### 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

必填

+

说明

+

columnNames

+

Array<string>

+

是

+

获取结果集中所有列的名称。

+

columnCount

+

number

+

是

+

获取结果集中的列数。

+

rowCount

+

number

+

是

+

获取结果集中的行数。

+

rowIndex

+

number

+

是

+

获取结果集当前行的索引。

+

isAtFirstRow

+

boolean

+

是

+

检查结果集是否位于第一行。

+

isAtLastRow

+

boolean

+

是

+

检查结果集是否位于最后一行。

+

isEnded

+

boolean

+

是

+

检查结果集是否位于最后一行之后。

+

isStarted

+

boolean

+

是

+

检查指针是否移动过。

+

isClosed

+

boolean

+

是

+

检查当前结果集是否关闭。

+
+ +### getColumnIndex + +getColumnIndex\(columnName: string\): number + +根据指定的列名获取列索引。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

columnName

+

string

+

是

+

表示结果集中指定列的名称。

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

类型

+

说明

+

number

+

返回指定列的索引。

+
+ +- 示例： + + ``` + resultSet.goToFirstRow() + const id = resultSet.getLong(resultSet.getColumnIndex("ID")) + const name = resultSet.getString(resultSet.getColumnIndex("NAME")) + const age = resultSet.getLong(resultSet.getColumnIndex("AGE")) + const salary = resultSet.getDouble(resultSet.getColumnIndex("SALARY")) + ``` + + +### getColumnName + +getColumnName\(columnIndex: number\): string + +根据指定的列索引获取列名。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

columnIndex

+

number

+

是

+

表示结果集中指定列的索引。

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

类型

+

说明

+

string

+

返回指定列的名称。

+
+ +- 示例： + + ``` + const id = resultSet.getColumnName(0) + const name = resultSet.getColumnName(1) + const age = resultSet.getColumnName(2) + ``` + + +### goTo + +goTo\(offset:number\): boolean + +向前或向后转至结果集的指定行，相对于其当前位置偏移。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

offset

+

number

+

是

+

表示相对于当前位置的偏移量。

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

类型

+

说明

+

boolean

+

如果成功移动结果集，则为true；否则返回false。

+
+ +- 示例： + + ``` + let predicates = new dataRdb.RdbPredicates("EMPLOYEE") + let resultSet = await rdbStore.query(predicates, ["ID", "NAME", "AGE", "SALARY", "CODES"]) + resultSet.goTo(1) + resultSet.close() + resultSet = null + ``` + + +### goToRow + +goToRow\(position: number\): boolean + +转到结果集的指定行。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

position

+

number

+

是

+

表示要移动到的指定位置。

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

类型

+

说明

+

boolean

+

如果成功移动结果集，则为true；否则返回false。

+
+ +- 示例： + + ``` + let predicates = new dataRdb.RdbPredicates("EMPLOYEE") + let resultSet = await rdbStore.query(predicates, ["ID", "NAME", "AGE", "SALARY", "CODES"]) + resultSet.goToRow(1) + resultSet.close() + resultSet = null + ``` + + +### goToFirstRow + +goToFirstRow\(\): boolean + +转到结果集的第一行。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

boolean

+

如果成功移动结果集，则为true；否则返回false。

+
+ +- 示例： + + ``` + let predicates = new dataRdb.RdbPredicates("EMPLOYEE") + let resultSet = await rdbStore.query(predicates, ["ID", "NAME", "AGE", "SALARY", "CODES"]) + resultSet.goToFirstRow() + resultSet.close() + resultSet = null; + ``` + + +### goToLastRow + +goToLastRow\(\): boolean + +转到结果集的最后一行。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

boolean

+

如果成功移动结果集，则为true；否则返回false。

+
+ +- 示例： + + ``` + let predicates = new dataRdb.RdbPredicates("EMPLOYEE") + let resultSet = await rdbStore.query(predicates, ["ID", "NAME", "AGE", "SALARY", "CODES"]) + resultSet.goToLastRow() + resultSet.close() + resultSet = null; + ``` + + +### goToNextRow + +goToNextRow\(\): boolean + +转到结果集的下一行。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

boolean

+

如果成功移动结果集，则为true；否则返回false。

+
+ +- 示例： + + ``` + let predicates = new dataRdb.RdbPredicates("EMPLOYEE") + let resultSet = await rdbStore.query(predicates, ["ID", "NAME", "AGE", "SALARY", "CODES"]) + resultSet.goToNextRow() + resultSet.close() + resultSet = null; + ``` + + +### goToPreviousRow + +goToPreviousRow\(\): boolean + +转到结果集的上一行。 + +- 返回值： + + + + + + + + + + +

类型

+

说明

+

boolean

+

如果成功移动结果集，则为true；否则返回false。

+
+ +- 示例： + + ``` + let predicates = new dataRdb.RdbPredicates("EMPLOYEE") + let resultSet = await rdbStore.query(predicates, ["ID", "NAME", "AGE", "SALARY", "CODES"]) + resultSet.goToPreviousRow() + resultSet.close() + resultSet = null + ``` + + +### getBlob + +getBlob\(columnIndex: number\): Uint8Array + +以字节数组的形式获取当前行中指定列的值。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

columnIndex

+

number

+

是

+

指定的列索引，从0开始。

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

类型

+

说明

+

Uint8Array

+

以字节数组的形式返回指定列的值。

+
+ +- 示例： + + ``` + const codes = resultSet.getBlob(resultSet.getColumnIndex("CODES")) + ``` + + +### getString + +getString\(columnIndex: number\): string + +以字符串形式获取当前行中指定列的值。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

columnIndex

+

number

+

是

+

指定的列索引，从0开始。

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

类型

+

说明

+

string

+

以字符串形式返回指定列的值。

+
+ +- 示例： + + ``` + const name = resultSet.getString(resultSet.getColumnIndex("NAME")) + ``` + + +### getLong + +getLong\(columnIndex: number\): number + +以Long形式获取当前行中指定列的值。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

columnIndex

+

number

+

是

+

指定的列索引，从0开始。

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

类型

+

说明

+

number

+

以Long形式返回指定列的值。

+
+ +- 示例： + + ``` + const age = resultSet.getLong(resultSet.getColumnIndex("AGE")) + ``` + + +### getDouble + +getDouble\(columnIndex: number\): number + +以double形式获取当前行中指定列的值。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

columnIndex

+

number

+

是

+

指定的列索引，从0开始。

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

类型

+

说明

+

number

+

以double形式返回指定列的值。

+
+ +- 示例： + + ``` + const salary = resultSet.getDouble(resultSet.getColumnIndex("SALARY")) + ``` + + +### isColumnNull + +isColumnNull\(columnIndex: number\): boolean + +检查当前行中指定列的值是否为null。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

columnIndex

+

number

+

是

+

指定的列索引，从0开始。

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

类型

+

说明

+

boolean

+

如果当前行中指定列的值为null，则返回true，否则返回false。

+
+ +- 示例： + + ``` + const isColumnNull = resultSet.isColumnNull(resultSet.getColumnIndex("CODES")) + ``` + + +### close + +close\(\): void + +关闭结果集。 + +- 示例： + + ``` + let predicates = new dataRdb.RdbPredicates("EMPLOYEE") + let resultSet = await rdbStore.query(predicates, ["ID", "NAME", "AGE", "SALARY", "CODES"]) + resultSet.close() + resultSet = null + ``` + + 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 deleted file mode 100644 index c8244adf9149788f5588583cd94316a6c138d7f2..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/apis/js-apis-data-singlekvstore.md +++ /dev/null @@ -1,190 +0,0 @@ -# 单版本分布式数据库 - -- [导入模块](#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 index 304de0b47611e1965578b3f214ebd1e6cfffb309..87a4530e6e5a34aaf813c021dfc7acdd1d2163c2 100644 --- 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 @@ -1,1851 +1,1521 @@ -# 轻量级存储 - -- [导入模块](#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键值型的文件数据处理能力，支持应用对数据进行轻量级存储及查询。数据存储形式为键值对，键的类型为字符串型，值的存储数据类型包括数字型、字符型、布尔型。 - -## 导入模块 +# 轻量级存储 + +轻量级存储为应用提供key-value键值型的文件数据处理能力，支持应用对数据进行轻量级存储及查询。数据存储形式为键值对，键的类型为字符串型，值的存储数据类型包括数字型、字符型、布尔型。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从 API Version 6 开始支持。 + +## 导入模块 ``` -import data_storage from '@ohos.data.storage'; +import dataStorage from '@ohos.data.storage'; ``` -## 权限 +## 权限 无 -## 属性 +## 属性 - -

名称

+ + - - - - - - - - - - - - - -

名称

参数类型

+

参数类型

可读

+

可读

可写

+

可写

说明

+

说明

MAX_KEY_LENGTH

+

MAX_KEY_LENGTH

string

+

string

是

+

是

否

+

否

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

+

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

MAX_VALUE_LENGTH

+

MAX_VALUE_LENGTH

string

+

string

是

+

是

否

+

否

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

+

string类型value的最大长度限制，大小为8192字节。
-## 方法 - -## getStorageSync\(path: string\) +## dataStorage.getStorageSync + +getStorageSync\(path: string\): Storage + +读取指定文件，将数据加载到Storage实例，用于数据操作，此方法为同步方法。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

path

+

string

+

是

+

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

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

类型

+

说明

+

Storage

+

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

+
+ +- 示例： + + ``` + const PATH = '{storage_path_name_in_working_folder}'; + let store = dataStorage.getStorageSync(PATH); + ``` + + +## dataStorage.getStorage + +getStorage\(path: string, callback: AsyncCallback\): void + +读取指定文件，将数据加载到Storage实例，用于数据操作，使用callback形式返回结果。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

path

+

string

+

是

+

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

+

callback

+

AsyncCallback<Storage>

+

是

+

回调函数。

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

参数名

+

类型

+

必填

+

说明

+

path

+

string

+

是

+

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

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

类型

+

说明

+

Promise<Storage>

+

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

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

参数名

+

类型

+

必填

+

说明

+

path

+

string

+

是

+

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

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

参数名

+

类型

+

必填

+

说明

+

path

+

string

+

是

+

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

+

callback

+

AsyncCallback<Storage>

+

是

+

回调函数。

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

参数名

+

类型

+

必填

+

说明

+

path

+

string

+

是

+

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

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

类型

+

说明

+

Promise<void>

+

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

+
+ +- 示例： + + ``` + const promise = dataStorage.deleteStorage(PATH); + promise.then((data) => { + }).catch((err) => { + }); + ``` -读取指定文件，将数据加载到Storage实例，用于数据操作。 -此方法为同步方法。 +## dataStorage.removeStorageFromCacheSync -**参数：** +removeStorageFromCacheSync\(path: string\): void - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

path

-

string

-

是

-

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

-
+从内存中移除指定文件对应的Storage单实例。移除Storage单实例时，应用不允许再使用该实例进行数据操作，否则会出现数据一致性问题。 -**返回值：** +此方法为同步方法。 - - - - - - - - - -

类型

-

说明

-

Storage

-

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

-
+- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

path

+

string

+

是

+

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

+
+ +- 示例： + + ``` + dataStorage.removeStorageFromCacheSync(PATH); + ``` + + +## dataStorage.removeStorageFromCache + +removeStorageFromCache\(path: string, callback: AsyncCallback\): void -**示例：** +从内存中移除指定文件对应的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\) +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

path

+

string

+

是

+

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

+

callback

+

AsyncCallback<Storage>

+

是

+

回调函数。

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

参数名

+

类型

+

必填

+

说明

+

path

+

string

+

是

+

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

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

类型

+

说明

+

Promise<void>

+

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

+
+ +- 示例： + + ``` + const promise = dataStorage.removeStorageFromCache(PATH); + promise.then((data) => { + }).catch((err) => { + }); + ``` - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

path

-

string

-

是

-

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

-

callback

-

AsyncCallback<Storage>

-

是

-

回调函数。

-
-**返回值：** +## Storage - - - - - - - - - -

类型

-

说明

-

void

-

无

-
+提供获取和修改存储数据的接口。 -**示例：** +### getSync -``` -data_storage.getStorage(PATH, function(err, data) { - strore = data; -}); -``` +getSync\(key: string, defValue: ValueType\): ValueType + +获取键对应的值，如果值为null或者非默认值类型，返回默认数据。 -## getStorage\(path: string\) +此方法为同步方法。 -读取指定文件，将数据加载到Storage实例，用于数据操作。 +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

key

+

string

+

是

+

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

+

defValue

+

ValueType

+

是

+

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

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

类型

+

说明

+

ValueType

+

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

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

参数名

+

类型

+

必填

+

说明

+

key

+

string

+

是

+

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

+

defValue

+

ValueType

+

是

+

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

+

callback

+

AsyncCallback<ValueType>

+

是

+

回调函数。

+
+ +- 示例： + + ``` + store.get(key, 'test', function(err, data) { + console.info(data); + }); + ``` + + +### get + +get\(key: string, defValue: ValueType\): Promise - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

path

-

string

-

是

-

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

-
+获取键对应的值，如果值为null或者非默认值类型，返默认数据。 -**返回值：** +此方法为异步方法。 - - - - - - - - - -

类型

-

说明

-

Promise<Storage>

-

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

-
+- **参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

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) => { + }); + ``` -**示例：** -``` -const promise = data_storage.getStorage(PATH); -promise.then((data) => { - data.clearSync(); - }).catch((err) => { -}); -``` +### putSync -## deleteStorageSync\(path: string\) +putSync\(key: string, value: ValueType\): void -从内存中移除指定文件对应的Storage单实例，并删除指定文件及其备份文件、损坏文件。删除指定文件时，应用不允许再使用该实例进行数据操作，否则会出现数据一致性问题。 +首先获取指定文件对应的Storage实例，然后借助Storage API将数据写入Storage实例，通过flush或者flushSync将Storage实例持久化。 此方法为同步方法。 -**参数：** - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

path

-

string

-

是

-

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

-
- -**返回值：** +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

key

+

string

+

是

+

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

+

value

+

ValueType

+

是

+

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

+
+ +- 示例： + + ``` + let data = store.putSync(key, 'defValue'); + ``` + + +### put + +put\(key: string, value: ValueType, callback: AsyncCallback\): void - - - - - - - - - -

类型

-

说明

-

void

-

无

-
- -**示例：** +首先获取指定文件对应的Storage实例，然后借助Storage API将数据写入Storage实例，通过flush或者flushSync将Storage实例持久化。 -``` -const PATH = '/data/accounts/account_0/appdata/com.example.myapplication/database/{storage_name}'; -data_storage.deleteStorageSync(PATH); -``` +此方法为异步方法。 -## deleteStorage\(path: string, callback: AsyncCallback\) +- 参数： + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

key

+

string

+

是

+

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

+

value

+

ValueType

+

是

+

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

+

callback

+

AsyncCallback<void>

+

是

+

回调函数。

+
+ +- 示例： + + ``` + store.put(key, 'test', function(err, data) { + }); + ``` + + +### put + +put\(key: string, value: ValueType\): Promise -从内存中移除指定文件对应的Storage单实例，并删除指定文件及其备份文件、损坏文件。删除指定文件时，应用不允许再使用该实例进行数据操作，否则会出现数据一致性问题。 +首先获取指定文件对应的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) => { + }); + ``` - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

path

-

string

-

是

-

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

-

callback

-

AsyncCallback<Storage>

-

是

-

回调函数。

-
-**返回值：** +### hasSync - - - - - - - - - -

类型

-

说明

-

void

-

无

-
+hasSync\(key: string\): boolean -**示例：** +检查存储对象是否包含名为给定key的存储。 -``` -data_storage.deleteStorage(PATH, function(err, data) { -}); -``` +此方法为同步方法。 -## deleteStorage\(path: string\) +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

key

+

string

+

是

+

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

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

类型

+

说明

+

boolean

+

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

+
+ +- 示例： + + ``` + let ret = store.hasSync(key); + ``` + + +### has + +has\(key: string, callback: AsyncCallback\): boolean -从内存中移除指定文件对应的Storage单实例，并删除指定文件及其备份文件、损坏文件。删除指定文件时，应用不允许再使用该实例进行数据操作，否则会出现数据一致性问题。 +检查存储对象是否包含名为给定key的存储。 此方法为异步方法。 -**参数：** +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

key

+

string

+

是

+

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

+

callback

+

AsyncCallback<boolean>

+

是

+

回调函数。

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

类型

+

说明

+

boolean

+

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

+
+ +- 示例： + + ``` + store.has(key, function(err, data) { + console.info(data); + }); + ``` + + +### has + +has\(key: string\): Promise - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

path

-

string

-

是

-

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

-
+检查存储对象是否包含名为给定key的存储。 -**返回值：** +此方法为异步方法。 - - - - - - - - - -

类型

-

说明

-

Promise<void>

-

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

-
+- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

key

+

string

+

是

+

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

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

类型

+

说明

+

Promise<boolean>

+

Promise实例，用于异步处理。

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

参数名

-

类型

-

必填

-

说明

-

path

-

string

-

是

-

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

-
+ + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

key

+

string

+

是

+

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

+
-**返回值：** +- 示例： - - - - - - - - - -

类型

-

说明

-

void

-

无

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

参数名

+

类型

+

必填

+

说明

+

key

+

string

+

是

+

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

+

callback

+

AsyncCallback<void>

+

是

+

回调函数。

+
+ +- 示例： + + ``` + store.delete(key, function(err, data) { + }); + ``` + + +### delete + +delete\(key: string\): Promise + +从存储对象删除名为给定key的存储。 - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

path

-

string

-

是

-

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

-

callback

-

AsyncCallback<Storage>

-

是

-

回调函数。

-
+此方法为异步方法。 -**返回值：** +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

key

+

string

+

是

+

要获取的存储key名称。

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

类型

+

说明

+

Promise<void>

+

Promise实例，用于异步处理。

+
+ +- 示例： + + ``` + const promise = store.delete(key); + promise.then((data) => { + }).catch((err) => { + }); + ``` - - - - - - - - - -

类型

-

说明

-

void

-

无

-
-**示例：** +### flushSync -``` -data_storage.removeStorageFromCache(PATH, function(err, data) { -}); -``` +flushSync\(\): void -## removeStorageFromCache\(path: string\) +将当前storage对象中的修改保存到当前的storage，并同步存储到文件中。 -从内存中移除指定文件对应的Storage单实例。移除Storage单实例时，应用不允许再使用该实例进行数据操作，否则会出现数据一致性问题。 +此方法为同步方法。 + +- 示例： + + ``` + store.flushSync(); + ``` + + +### flush + +flush\(callback: AsyncCallback\): void + +将当前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\(\) +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

callback

+

AsyncCallback<void>

+

是

+

回调函数。

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

参数名

-

类型

-

必填

-

说明

-

无

-

无

-

无

-

无

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

类型

-

说明

-

Promise<void>

-

Promise实例，用于异步处理。

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

类型

+

说明

+

Promise<void>

+

Promise实例，用于异步处理。

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

参数名

-

类型

-

必填

-

说明

-

无

-

无

-

无

-

无

-
- -**返回值：** +- 示例： - - - - - - - - - -

类型

-

说明

-

void

-

无

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

参数名

-

类型

-

必填

-

说明

-

callback

-

AsyncCallback<void>

-

是

-

回调函数。

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

类型

-

说明

-

void

-

无

-
- -**示例：** - -``` -store.clear(function(err, data) { -}); -``` - -## clear\(\) +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

callback

+

AsyncCallback<void>

+

是

+

回调函数。

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

参数名

-

类型

-

必填

-

说明

-

无

-

无

-

无

-

无

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

类型

-

说明

-

Promise<void>

-

Promise实例，用于异步处理。

-
- -**示例：** - -``` -const promise = store.clear(); -promise.then((data) => { +- 返回值： + + + + + + + + + + +

类型

+

说明

+

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\) + }); + ``` + + +### on（'change'） + +on\(type: 'change', callback: Callback\): void + +监听者类需要实现StorageObserver接口，当数据发生改变时，监听者的 StorageObserver\#onChange会被回调。 + +- 参数： + + + + + + + + + + + + + + + + +

参数名

+

类型

+

说明

+

type

+

string

+

事件类型，固定值'change'，表示数据变更。

+

callback

+

Callback<StorageObserver>

+

需要监听的回调对象实例。

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

参数名

-

类型

-

说明

-

type

-

'change'

-

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

-

callback

-

Callback<StorageObserver>

-

需要取消的回调对象实例

-
- -**示例：** - -``` -var observer = function (data) { - console.info(data); - }; -store.off('change', observer); -``` +- 参数： -## 事件 + + + + + + + + + + + + + + + +

参数名

+

类型

+

说明

+

type

+

string

+

事件类型，固定值'change'，表示数据变更。

+

callback

+

Callback<StorageObserver>

+

需要取消的回调对象实例。

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

参数名

-

类型

-

说明

-

observer

-

StorageObserver

-

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

-
-## StorageObserver +## StorageObserver - -

名称

+ + - - - - - - - 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 deleted file mode 100644 index 2ec92a56e1fee55d95690a6104cf5644e5c58cd7..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/apis/js-apis-data-type.md +++ /dev/null @@ -1,476 +0,0 @@ -# 数据类型描述 - -- [导入模块](#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 - -描述订阅类型。 - - -

名称

参数类型

+

参数类型

必填

+

必填

说明

+

说明

key

+

key

string

+

string

否

+

否

变更的数据内容

+

变更的数据内容。
- - - - - - - - - - - - - - - - - -

名称

-

默认值

-

说明

-

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 index 80d67c3732c493accff1036cfc81c18be8bc6582..5e4c1885631f653cca13e7a173d7489d2a6117b9 100644 --- a/zh-cn/application-dev/js-reference/apis/js-apis-data.md +++ b/zh-cn/application-dev/js-reference/apis/js-apis-data.md @@ -1,17 +1,15 @@ -# 数据管理 +# 数据管理 - **[文件管理](js-apis-fileio.md)** -- **[单版本分布式数据库](js-apis-data-singlekvstore.md)** - -- **[创建和获取分布式数据库](js-apis-data-kvmanager.md)** +- **[轻量级存储](js-apis-data-storage.md)** -- **[KVManager配置信息](js-apis-data-kvmanager-config.md)** +- **[分布式数据管理](js-apis-distributed-data.md)** -- **[分布式数据库操作描述](js-apis-data-kvstore.md)** +- **[关系型数据库](js-apis-data-rdb.md)** -- **[数据类型描述](js-apis-data-type.md)** +- **[结果集](js-apis-data-resultset.md)** -- **[轻量级存储](js-apis-data-storage.md)** +- **[DataAbility 谓词](js-apis-data-ability.md)** diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-device-info.md b/zh-cn/application-dev/js-reference/apis/js-apis-device-info.md new file mode 100644 index 0000000000000000000000000000000000000000..903f0fb6c007f118e49d11c82be516b95c37338b --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-device-info.md @@ -0,0 +1,350 @@ +# 设备信息 + +## 导入模块 + +``` +import deviceInfo from '@ohos.deviceInfo' +``` + +## 权限列表 + +无 + +## 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

描述

+

deviceType

+

string

+

是

+

否

+

设备类型。

+

manufacture

+

string

+

是

+

否

+

设备厂家名称。

+

brand

+

string

+

是

+

否

+

设备品牌名称。

+

marketName

+

string

+

是

+

否

+

外部产品系列。

+

productSeries

+

string

+

是

+

否

+

产品系列。

+

productModel

+

string

+

是

+

否

+

认证型号。

+

softwareModel

+

string

+

是

+

否

+

内部软件子型号。

+

hardwareModel

+

string

+

是

+

否

+

硬件版本号。

+

hardwareProfile

+

string

+

是

+

否

+

硬件Profile。

+

serial

+

string

+

是

+

否

+

设备序列号。

+

bootloaderVersion

+

string

+

是

+

否

+

Bootloader版本号。

+

abiList

+

string

+

是

+

否

+

应用二进制接口（Abi）列表。

+

securityPatchTag

+

string

+

是

+

否

+

安全补丁级别。

+

displayVersion

+

string

+

是

+

否

+

产品版本。

+

incrementalVersion

+

string

+

是

+

否

+

差异版本号。

+

osReleaseType

+

string

+

是

+

否

+

系统的发布类型，取值为：

+
  • Canary：面向特定开发者发布的早期预览版本，不承诺API稳定性。
  • Beta：面向开发者公开发布的Beta版本，不承诺API稳定性。
  • Release：面向开发者公开发布的正式版本，承诺API稳定性。
+

osFullName

+

string

+

是

+

否

+

系统版本。

+

majorVersion

+

number

+

是

+

否

+

Major版本号，随主版本更新增加。

+

seniorVersion

+

number

+

是

+

否

+

Senior版本号，随局部架构、重大特性增加。

+

featureVersion

+

number

+

是

+

否

+

Feature版本号，标识规划的新特性版本。

+

buildVersion

+

number

+

是

+

否

+

Build版本号，标识编译构建的版本号。

+

sdkApiVersion

+

number

+

是

+

否

+

系统软件API版本。

+

firstApiVersion

+

number

+

是

+

否

+

首个版本系统软件API版本。

+

versionId

+

string

+

是

+

否

+

版本ID。

+

buildType

+

string

+

是

+

否

+

构建类型。

+

buildUser

+

string

+

是

+

否

+

构建用户。

+

buildHost

+

string

+

是

+

否

+

构建主机。

+

buildTime

+

string

+

是

+

否

+

构建时间。

+

buildRootHash

+

string

+

是

+

否

+

构建版本Hash。

+
+ diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-device-manager.md b/zh-cn/application-dev/js-reference/apis/js-apis-device-manager.md new file mode 100644 index 0000000000000000000000000000000000000000..112f7bcb31c7e3d9da0f808791dd2d759325a6f8 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-device-manager.md @@ -0,0 +1,456 @@ +# 设备管理 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从 API Version 7 开始支持。 + +## 导入模块 + +``` +import deviceManager from '@ohos.distributedHardware.deviceManager'; +``` + +## deviceManager.createDeviceManager + +createDeviceManager\(bundleName: string, callback: AsyncCallback\): void + +创建一个设备管理器实例。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

bundleName

+

string

+

是

+

指示应用程序的包名。

+

callback

+

AsyncCallback<DeviceManager>

+

是

+

DeviceManager实例创建时调用的回调，返回设备管理器对象实例。

+
+ +- 示例： + + ``` + deviceManager.createDeviceManager("ohos.samples.jshelloworld", (err, data) => { + if (err) { + console.info("createDeviceManager err:" + JSON.stringify(err)); + return; + } + console.info("createDeviceManager success"); + this.dmInstance = data; + }); + ``` + + +## DeviceStateChangeAction + +表示设备状态变化的枚举。 + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

默认值

+

说明

+

ONLINE

+

0

+

设备上线。

+

READY

+

1

+

设备就绪，设备信息同步已完成。

+

OFFLINE

+

2

+

设备下线。

+

CHANGE

+

3

+

设备信息更改。

+
+ +## DeviceType + +表示设备类型的枚举类。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

默认值

+

说明

+

SPEAKER

+

0x0A

+

智能音箱

+

PHONE

+

0x0E

+

手机

+

TABLET

+

0x11

+

平板

+

WEARABLE

+

0x6D

+

智能穿戴

+

TV

+

0x9C

+

智慧屏

+
+ +## DeviceInfo + +设备信息。 + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

必填

+

描述

+

deviceId

+

number

+

是

+

设备的唯一标识。

+

deviceName

+

string

+

是

+

设备名称。

+

deviceType

+

number

+

是

+

设备类型。

+
+ +## DeviceManager + +设备管理实例，用于获取可信设备和本地设备的相关信息。在调用DeviceManager的方法前，需要先通过createDeviceManager构建一个DeviceManager实例dmInstance。 + +### release + +release\(\): void + +设备管理实例不再使用后，通过该方法释放DeviceManager实例。 + +- 示例： + + ``` + dmInstance.release(); + ``` + + +### getTrustedDeviceListSync + +getTrustedDeviceListSync\(\): Array + +同步获取所有可信设备列表。 + +- 返回值： + + + + + + + + + + +

名称

+

说明

+

Array<DeviceInfo>

+

返回可信设备列表。

+
+ +- 示例： + + ``` + var deviceInfoList = dmInstance.getTrustedDeviceListSync(); + ``` + + +### on\('deviceStateChange'\) + +on\(type: 'deviceStateChange', callback: Callback<\{ action: DeviceStateChangeAction, device: DeviceInfo \}\>\): void + +注册设备状态回调。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

必填

+

说明

+

type

+

string

+

是

+

注册设备状态回调，固定为deviceStateChange。

+

callback

+

Callback<{ action: DeviceStateChangeAction, device: DeviceInfo }>

+

是

+

指示要注册的设备状态回调，返回设备状态和设备信息。

+
+ + +- 示例： + + ``` + dmInstance.on('deviceStateChange', (data) => { + console.info("deviceStateChange on:" + JSON.stringify(data)); + } + ); + ``` + + +### off\('deviceStateChange'\) + +off\(type: 'deviceStateChange', callback?: Call back<\{ action: DeviceStateChangeAction, device: DeviceInfo \}\>\): void + +取消注册设备状态回调。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

必填

+

说明

+

type

+

string

+

是

+

根据应用程序的包名取消注册设备状态回调。

+

callback

+

Callback<{ action: DeviceStateChangeAction, device: DeviceInfo }>

+

是

+

指示要取消注册的设备状态回调，返回设备状态和设备信息。

+
+ + +- 示例： + + ``` + dmInstance.off('deviceStateChange', (data) => { + console.info('deviceStateChange' + JSON.stringify(data)); + } + ); + ``` + + +### on\('serviceDie'\) + +on\(type: 'serviceDie', callback: \(\) =\> void\): void + +注册设备管理服务死亡监听。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

必填

+

说明

+

type

+

string

+

是

+

注册serviceDie回调，以便在devicemanager服务异常终止时通知应用程序。

+

callback

+

() => void

+

是

+

注册serviceDie的回调方法。

+
+ + +- 示例： + + ``` + dmInstance.on("serviceDie", () => { + console.info("serviceDie on"); + } + ); + ``` + + +### off\('serviceDie'\) + +off\(type: 'serviceDie', callback?: \(\) =\> void\): void + +取消注册设备管理服务死亡监听。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

必填

+

说明

+

type

+

string

+

是

+

取消注册serviceDie回调，以便在devicemanager服务异常终止时通知应用程序。

+

callback

+

() => void

+

否

+

取消注册serviceDie的回调方法。

+
+ + +- 示例： + + ``` + dmInstance.off("serviceDie", () => { + console.info("serviceDie off"); + } + ); + ``` + + 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 index a4f6bb1182eeb0ee71a834a2ba1272abbac4ed5f..fb9919f9c5a0b3529416226ee9fcb1198fa50499 100644 --- 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 @@ -1,41 +1,16 @@ -# 设备管理 - -- **[设备信息](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-sensor.md)** +- **[振动](js-apis-vibrator.md)** +- **[屏幕亮度](js-apis-brightness.md)** +- **[电量信息](js-apis-battery-info.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-device-info.md)** +- **[系统属性](js-apis-system-parameter.md)** +- **[设备管理](js-apis-device-manager.md)** +- **[显示设备属性](js-apis-display.md)** - **[升级](js-apis-libupdateclient.md)** - -- **[获取进程相关的信息](js-apis-process.md)** - -- **[字符串编解码](js-apis-util.md)** - -- **[启动一个worker](js-apis-worker.md)** - -- **[URL字符串解析](js-apis-url.md)** +- **[启动恢复](js-apis-update.md)** diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-deviceinfo.md b/zh-cn/application-dev/js-reference/apis/js-apis-deviceinfo.md deleted file mode 100644 index 94715992f5026546f6bb6b1aecf22eb3ae8eaa27..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/apis/js-apis-deviceinfo.md +++ /dev/null @@ -1,354 +0,0 @@ -# 设备信息 - -- [导入模块](#zh-cn_topic_0000001139910745_section370mcpsimp) -- [权限列表](#zh-cn_topic_0000001139910745_section373mcpsimp) -- [属性](#zh-cn_topic_0000001139910745_section62871841172112) - -## 导入模块 - -``` -import deviceInfo from '@ohos.deviceInfo' -``` - -## 权限列表 - -无 - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

可读

-

可写

-

描述

-

deviceType

-

string

-

是

-

否

-

设备类型。

-

manufacture

-

string

-

是

-

否

-

设备厂家名称。

-

brand

-

string

-

是

-

否

-

设备品牌名称。

-

marketName

-

string

-

是

-

否

-

外部产品系列。

-

productSeries

-

string

-

是

-

否

-

产品系列。

-

productModel

-

string

-

是

-

否

-

认证型号。

-

softwareModel

-

string

-

是

-

否

-

内部软件子型号。

-

hardwareModel

-

string

-

是

-

否

-

硬件版本号。

-

hardwareProfile

-

string

-

是

-

否

-

硬件Profile。

-

serial

-

string

-

是

-

否

-

设备序列号。

-

bootloaderVersion

-

string

-

是

-

否

-

Bootloader版本号。

-

abiList

-

string

-

是

-

否

-

应用二进制接口（Abi）列表。

-

securityPatchTag

-

string

-

是

-

否

-

安全补丁级别。

-

displayVersion

-

string

-

是

-

否

-

产品版本。

-

incrementalVersion

-

string

-

是

-

否

-

差异版本号。

-

osReleaseType

-

string

-

是

-

否

-

系统的发布类型，取值为：

-
  • Canary：面向特定开发者发布的早期预览版本，不承诺API稳定性。
  • Beta：面向开发者公开发布的Beta版本，不承诺API稳定性。
  • Release：面向开发者公开发布的正式版本，承诺API稳定性。
-

osFullName

-

string

-

是

-

否

-

系统版本。

-

majorVersion

-

number

-

是

-

否

-

Major版本号，随主版本更新增加。

-

seniorVersion

-

number

-

是

-

否

-

Senior版本号，随局部架构、重大特性增加。

-

featureVersion

-

number

-

是

-

否

-

Feature版本号，标识规划的新特性版本。

-

buildVersion

-

number

-

是

-

否

-

Build版本号，标识编译构建的版本号。

-

sdkApiVersion

-

number

-

是

-

否

-

系统软件API版本。

-

firstApiVersion

-

number

-

是

-

否

-

首个版本系统软件API版本。

-

versionId

-

string

-

是

-

否

-

版本ID。

-

buildType

-

string

-

是

-

否

-

构建类型。

-

buildUser

-

string

-

是

-

否

-

构建用户。

-

buildHost

-

string

-

是

-

否

-

构建主机。

-

buildTime

-

string

-

是

-

否

-

构建时间。

-

buildRootHash

-

string

-

是

-

否

-

构建版本Hash。

-
- 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 index 6f75303b620b3f2c3b5225b012239a227d32aca9..c4f999a68f2e82ff287c24e194c92d853375b1c9 100644 --- a/zh-cn/application-dev/js-reference/apis/js-apis-display.md +++ b/zh-cn/application-dev/js-reference/apis/js-apis-display.md @@ -1,260 +1,249 @@ -# 显示设备属性 - -- [导入模块](#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 +## DisplayState 用于表示显示设备的状态。 - -

名称

+ + - - - - - - - - - - - - - - - - - - - - - - -

名称

默认值

+

默认值

说明

+

说明

STATE_UNKNOWN

+

STATE_UNKNOWN

0

+

0

表示显示设备状态未知。

+

表示显示设备状态未知。

STATE_OFF

+

STATE_OFF

1

+

1

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

+

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

STATE_ON

+

STATE_ON

2

+

2

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

+

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

STATE_DOZE

+

STATE_DOZE

3

+

3

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

+

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

STATE_DOZE_SUSPEND

+

STATE_DOZE_SUSPEND

4

+

4

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

+

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

STATE_VR

+

STATE_VR

5

+

5

表示显示设备为VR模式。

+

表示显示设备为VR模式。

STATE_ON_SUSPEND

+

STATE_ON_SUSPEND

6

+

6

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

+

表示显示设备为开启状态，CPU为挂起状态。
-## Display +## Display 描述display对象的属性。 -### 属性 +### 属性 - -

名称

+ + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

参数类型

+

参数类型

可读

+

可读

可写

+

可写

说明

+

说明

id

+

id

number

+

number

是

+

是

否

+

否

显示设备的id号。

+

显示设备的id号。

name

+

name

string

+

string

是

+

是

否

+

否

显示设备的名称。

+

显示设备的名称。

alive

+

alive

boolean

+

boolean

是

+

是

否

+

否

显示设备是否启用。

+

显示设备是否启用。

state

+

state

DisplayState

+

DisplayState

是

+

是

否

+

否

显示设备的状态。

+

显示设备的状态。

refreshRate

+

refreshRate

number

+

number

是

+

是

否

+

否

显示设备的刷新率。

+

显示设备的刷新率。

rotation

+

rotation

number

+

number

是

+

是

否

+

否

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

+

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

width

+

width

number

+

number

是

+

是

否

+

否

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

+

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

height

+

height

number

+

number

是

+

是

否

+

否

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

+

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

densityDPI

+

densityDPI

number

+

number

是

+

是

否

+

否

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

+

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

densityPixels

+

densityPixels

number

+

number

是

+

是

否

+

否

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

+

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

scaledDensity

+

scaledDensity

number

+

number

是

+

是

否

+

否

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

+

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

xDPI

+

xDPI

number

+

number

是

+

是

否

+

否

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

+

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

yDPI

+

yDPI

number

+

number

是

+

是

否

+

否

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

+

y方向中每英寸屏幕的确切物理像素值。
-## display.getDefaultDisplay +## display.getDefaultDisplay getDefaultDisplay\(callback: AsyncCallback\): void; @@ -262,24 +251,24 @@ getDefaultDisplay\(callback: AsyncCallback\): void; - 参数 - -

参数名

+ + - - - - - - - @@ -300,7 +289,7 @@ getDefaultDisplay\(callback: AsyncCallback\): void; ``` -## display.getAllDisplay +## display.getAllDisplay getAllDisplay\(callback: AsyncCallback\>\): void; @@ -308,24 +297,24 @@ getAllDisplay\(callback: AsyncCallback\>\): void; - 参数 - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

callback

+

callback

AsyncCallback<Display>

+

AsyncCallback<Display>

是

+

是

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

+

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

参数名

+ + - - - - - - - @@ -344,7 +333,7 @@ getAllDisplay\(callback: AsyncCallback\>\): void; ``` -## display.on\('add'|'remove'|'change'\) +## display.on\('add'|'remove'|'change'\) on\(type: 'add'|'remove'|'change', callback: Callback\): void; @@ -352,34 +341,34 @@ on\(type: 'add'|'remove'|'change', callback: Callback\): void; - 参数 - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

callback

+

callback

AsyncCallback<Array<Display>>

+

AsyncCallback<Array<Display>>

是

+

是

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

+

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

参数名

+ + - - - - - - - - - - - @@ -396,7 +385,7 @@ on\(type: 'add'|'remove'|'change', callback: Callback\): void; ``` -## display.off\('add'|'remove'|'change'\) +## display.off\('add'|'remove'|'change'\) off\(type: 'add'|'remove'|'change', callback?: Callback\): void; @@ -404,34 +393,34 @@ off\(type: 'add'|'remove'|'change', callback?: Callback\): void; - 参数 - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

string

+

string

是

+

是

设置监听类型。

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

设置监听类型。

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

callback

+

callback

Callback<number>

+

Callback<number>

是

+

是

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

+

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

参数名

+ + - - - - - - - - - - - diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-distributed-account.md b/zh-cn/application-dev/js-reference/apis/js-apis-distributed-account.md new file mode 100644 index 0000000000000000000000000000000000000000..72d981af6130df5fe707c88b94519da023449e20 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-distributed-account.md @@ -0,0 +1,300 @@ +# 分布式帐号管理 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7 开始支持。 + +## 导入模块 + +``` +import account_distributedAccount from '@ohos.account.distributedAccount'; +``` + +## account\_distributedAccount.getDistributedAccountAbility + +getDistributedAccountAbility\(\): DistributedAccountAbility + +获取分布式帐号单实例对象。 + +- 返回值： + + +

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

string

+

string

是

+

是

设置监听类型。

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

设置监听类型。

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

callback

+

callback

Callback<number>

+

Callback<number>

否

+

否

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

+

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

类型

+

说明

+

DistributedAccountAbility

+

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

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

参数名

+

类型

+

必填

+

说明

+

callback

+

AsyncCallback<DistributedInfo>

+

是

+

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

+
+ +- 示例： + + ``` + const accountAbility = account_distributedAccount.getDistributedAccountAbility(); + 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实例，用于获取异步返回结果。

+
+ +- 示例： + + ``` + const accountAbility = account_distributedAccount.getDistributedAccountAbility(); + 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>

+

是

+

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

+
+ +- 示例： + + ``` + const accountAbility = account_distributedAccount.getDistributedAccountAbility(); + 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实例，用于获取异步返回结果。

+
+ +- 示例： + + ``` + const accountAbility = account_distributedAccount.getDistributedAccountAbility(); + 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-distributed-data.md b/zh-cn/application-dev/js-reference/apis/js-apis-distributed-data.md new file mode 100644 index 0000000000000000000000000000000000000000..bec049e62e9c45de62728d3819bd459b8fb0c945 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-distributed-data.md @@ -0,0 +1,1490 @@ +# 分布式数据管理 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从 API Version 7 开始支持。 + +## 导入模块 + +``` +import distributedData from '@ohos.data.distributedData'; +``` + +## 权限 + +无 + +## distributedData.createKVManager + +createKVManager\(config: KVManagerConfig, callback: AsyncCallback\): void + +创建一个KVManager对象实例，用于管理数据库对象，并通过callback方式返回，此方法为异步方法。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

config

+

KVManagerConfig

+

是

+

提供KVManager实例的配置信息，包括调用方的包名和用户信息。

+

callback

+

AsyncCallback<KVManager>

+

是

+

KVManager实例创建时调用的回调，返回KVManager对象实例。

+
+ +- 示例： + + ``` + let kvManager; + try { + const kvManagerConfig = { + bundleName : 'com.example.datamanagertest', + userInfo : { + userId : '0', + userType : 0 + } + } + distributedData.createKVManager(kvManagerConfig, function (err, manager) { + if (err) { + console.log("createKVManager err: " + JSON.stringify(err)); + return; + } + console.log("createKVManager success"); + kvManager = manager; + }); + } catch (e) { + console.log("An unexpected error occurred. Error:" + e); + } + ``` + + +## distributedData.createKVManager + +createKVManager\(config: KVManagerConfig\): Promise + +创建一个KVManager对象实例，用于管理数据库对象，并通过Promise方式返回，此方法为异步方法。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

config

+

KVManagerConfig

+

是

+

提供KVManager实例的配置信息，包括调用方的包名和用户信息。

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

类型

+

说明

+

Promise<KVManager>

+

指定的Promise回调方法，返回创建的KVManager对象实例。

+
+ +- 示例： + + ``` + let kvManager; + try { + const kvManagerConfig = { + bundleName : 'com.example.datamanagertest', + userInfo : { + userId : '0', + userType : 0 + } + } + distributedData.createKVManager(kvManagerConfig).then((manager) => { + console.log("createKVManager success"); + kvManager = manager; + }).catch((err) => { + console.log("createKVManager err: " + JSON.stringify(err)); + }); + } catch (e) { + console.log("An unexpected error occurred. Error:" + e); + } + ``` + + +## KVManagerConfig + +提供KVManager实例的配置信息，包括调用方的包名和用户信息。 + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

必填

+

描述

+

userInfo

+

UserInfo

+

是

+

调用方的用户信息。

+

bundleName

+

string

+

是

+

调用方的包名。

+
+ +## UserInfo + +用户信息。 + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

必填

+

描述

+

userId

+

string

+

是

+

指示要设置的用户ID。

+

userType

+

UserType

+

是

+

指示要设置的用户类型。

+
+ +## UserType + +用户类型。 + + + + + + + + + + + + +

名称

+

默认值

+

说明

+

SAME_USER_ID

+

0

+

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

+
+ +## KVManager + +数据管理实例，用于获取KVStore的相关信息。在调用KVManager的方法前，需要先通过createKVManager构建一个KVManager实例。 + +### getKVStore + +getKVStore\(storeId: string, options: Options, callback: AsyncCallback\): void + +通过指定Options和storeId，创建并获取KVStore数据库，并通过callback方式返回，此方法为异步方法。 + +- 参数： + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

storeId

+

string

+

是

+

数据库唯一标识符，长度不大于MAX_STORE_ID_LENGTH。

+

options

+

Options

+

是

+

创建KVStore实例的配置信息。

+

callback

+

AsyncCallback<T>，

+

<T extends KVStore>

+

是

+

创建KVStore实例的回调，返回KVStore对象实例。

+
+ +- 示例： + + ``` + let kvStore; + try { + const options = { + createIfMissing : true, + encrypt : false, + backup : false, + autoSync : true, + kvStoreType : 1, + securityLevel : 3, + }; + kvManager.getKVStore('storeId', options, function (err, store) { + if (err) { + console.log("getKVStore err: " + JSON.stringify(err)); + return; + } + console.log("getKVStore success"); + kvStore = store; + }); + } catch (e) { + console.log("An unexpected error occurred. Error:" + e); + } + ``` + + +### getKVStore + +getKVStore\(storeId: string, options: Options\): Promise + +通过指定Options和storeId，创建并获取KVStore数据库，并通过Promise方式返回，此方法为异步方法。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

storeId

+

string

+

是

+

数据库唯一标识符，长度不大于MAX_STORE_ID_LENGTH。

+

options

+

Options

+

是

+

创建KVStore实例的配置信息。

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

类型

+

说明

+

Promise<T>

+

<T extends KVStore>

+

指定的Promise回调方法，返回创建的KVStore数据库实例。

+
+ +- 示例： + + ``` + let kvStore; + try { + const options = { + createIfMissing : true, + encrypt : false, + backup : false, + autoSync : true, + kvStoreType : 1, + securityLevel : 3, + }; + kvManager.getKVStore('storeId', options).then((store) => { + console.log("getKVStore success"); + kvStore = store; + }).catch((err) => { + console.log("getKVStore err: " + JSON.stringify(err)); + }); + } catch (e) { + console.log("An unexpected error occurred. Error:" + e); + } + ``` + + +## Options + +用于提供创建数据库的配置信息。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

createIfMissing

+

boolean

+

否

+

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

+

encrypt

+

boolean

+

否

+

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

+

backup

+

boolean

+

否

+

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

+

autoSync

+

boolean

+

否

+

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

+

kvStoreType

+

KVStoreType

+

否

+

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

+

securityLevel

+

SecurityLevel

+

否

+

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

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

名称

+

默认值

+

说明

+

DEVICE_COLLABORATION

+

0

+

表示多设备协同数据库。

+

SINGLE_VERSION

+

1

+

表示单版本数据库。

+

MULTI_VERSION

+

2

+

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

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

名称

+

默认值

+

说明

+

NO_LEVEL

+

0

+

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

+

S0

+

1

+

表示数据库的安全级别为公共级别安全。

+

S1

+

2

+

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

+

S2

+

3

+

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

+

S3

+

5

+

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

+

S4

+

6

+

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

+
+ +## Constants + +KVStore常量。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

默认值

+

说明

+

MAX_KEY_LENGTH

+

1024

+

数据库中Key允许最大长度，单位字节。

+

MAX_VALUE_LENGTH

+

4194303

+

数据库中Value允许的最大长度，单位字节。

+

MAX_KEY_LENGTH_DEVICE

+

896

+

最大设备坐标密钥长度。

+

MAX_STORE_ID_LENGTH

+

128

+

数据库标识符允许的最大长度，单位字节。

+

MAX_QUERY_LENGTH

+

512000

+

最大查询长度。

+

MAX_BATCH_SIZE

+

128

+

最大批处理操作大小。

+
+ +## KVStore + +KVStore数据库实例，提供增加数据、删除数据和订阅数据变更、订阅同步完成的方法。在调用KVStore的方法前，需要先通过getKVStore构建一个KVStore实例。 + +### put + +put\(key: string, value: Uint8Array | string | number | boolean, callback: AsyncCallback\): void + +添加指定类型键值对到数据库，并通过callback方式返回，此方法为异步方法。 + +- 参数： + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

key

+

string

+

是

+

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

+

value

+

Uint8Array | string | number | boolean

+

是

+

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

+

Uint8Array、string 的长度不大于MAX_VALUE_LENGTH。

+

callback

+

AsyncCallback<void>

+

是

+

回调函数。

+
+ +- 示例 + + ``` + const KEY_TEST_STRING_ELEMENT = 'key_test_string'; + const VALUE_TEST_STRING_ELEMENT = 'value-test-string'; + try { + kvStore.put(KEY_TEST_STRING_ELEMENT, VALUE_TEST_STRING_ELEMENT, function (err,data) { + if (err != undefined) { + console.log("put err: " + JSON.stringify(err)); + return; + } + console.log("put success"); + }); + }catch (e) { + console.log("An unexpected error occurred. Error:" + e); + } + ``` + + +### put + +put\(key: string, value: Uint8Array | string | number | boolean\): Promise + +添加指定类型键值对到数据库，并通过Promise方式返回，此方法为异步方法。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

key

+

string

+

是

+

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

+

value

+

Uint8Array | string | number | boolean

+

是

+

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

+

Uint8Array、string 的长度不大于MAX_VALUE_LENGTH。

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

类型

+

说明

+

Promise<void>

+

Promise实例，用于异步处理。

+
+ + +- 示例 + + ``` + const KEY_TEST_STRING_ELEMENT = 'key_test_string'; + const VALUE_TEST_STRING_ELEMENT = 'value-test-string'; + try { + kvStore.put(KEY_TEST_STRING_ELEMENT, VALUE_TEST_STRING_ELEMENT).then((data) => { + console.log("put success: " + JSON.stringify(data)); + }).catch((err) => { + console.log("put err: " + JSON.stringify(err)); + }); + }catch (e) { + console.log("An unexpected error occurred. Error:" + e); + } + ``` + + +### delete + +delete\(key: string, callback: AsyncCallback\): void + +从数据库中删除指定键值的数据，并通过callback方式返回，此方法为异步方法。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

key

+

string

+

是

+

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

+

callback

+

AsyncCallback<void>

+

是

+

回调函数。

+
+ +- 示例 + + ``` + const KEY_TEST_STRING_ELEMENT = 'key_test_string'; + const VALUE_TEST_STRING_ELEMENT = 'value-test-string'; + try { + kvStore.put(KEY_TEST_STRING_ELEMENT, VALUE_TEST_STRING_ELEMENT, function (err,data) { + if (err != undefined) { + console.log("put err: " + JSON.stringify(err)); + return; + } + console.log("put success"); + kvStore.delete(KEY_TEST_STRING_ELEMENT, function (err,data) { + if (err != undefined) { + console.log("delete err: " + JSON.stringify(err)); + return; + } + console.log("delete success"); + }); + }); + }catch (e) { + console.log("An unexpected error occurred. Error:" + e); + } + ``` + + +### delete + +delete\(key: string\): Promise + +从数据库中删除指定键值的数据，并通过Promise方式返回，此方法为异步方法。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

key

+

string

+

是

+

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

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

类型

+

说明

+

Promise<void>

+

Promise实例，用于异步处理。

+
+ +- 示例 + + ``` + const KEY_TEST_STRING_ELEMENT = 'key_test_string'; + const VALUE_TEST_STRING_ELEMENT = 'value-test-string'; + try { + kvStore.put(KEY_TEST_STRING_ELEMENT, VALUE_TEST_STRING_ELEMENT).then((data) => { + console.log("put success: " + JSON.stringify(data)); + kvStore.delete(KEY_TEST_STRING_ELEMENT).then((data) => { + console.log("delete success"); + }).catch((err) => { + console.log("delete err: " + JSON.stringify(err)); + }); + }).catch((err) => { + console.log("put err: " + JSON.stringify(err)); + }); + }catch (e) { + console.log("An unexpected error occurred. Error:" + e); + } + ``` + + +### on + +on\(event: 'dataChange', type: SubscribeType, observer: Callback\): void + +订阅指定类型的数据变更通知，此方法为同步方法。 + +- 参数： + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

说明

+

event

+

'dataChange'

+

回调函数名称。

+

type

+

SubscribeType

+

表示订阅的类型。

+

observer

+

Callback<ChangeNotification>

+

回调函数。

+
+ +- 示例 + + ``` + kvStore.on('dataChange', 2, function (data) { + console.log("dataChange callback call data: " + JSON.stringify(data)); + }); + ``` + + +### on + +on\(event: 'syncComplete', syncCallback: Callback\>\): void + +订阅数据同步完成通知，此方法为同步方法。 + +- 参数： + + + + + + + + + + + + + + + + +

参数名

+

类型

+

说明

+

event

+

'syncComplete'

+

回调函数名称。

+

syncCallback

+

Callback<Array<[string, number]>>

+

回调函数。

+
+ +- 示例 + + ``` + kvStore.on('syncComplete', function (data) { + console.log("syncComplete callback call data: " + data); + }); + ``` + + +## SubscribeType + +描述订阅类型。 + + + + + + + + + + + + + + + + + + + + +

名称

+

默认值

+

说明

+

SUBSCRIBE_TYPE_LOCAL

+

0

+

表示订阅本地数据变更。

+

SUBSCRIBE_TYPE_REMOTE

+

1

+

表示订阅远端数据变更。

+

SUBSCRIBE_TYPE_ALL

+

2

+

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

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

名称

+

参数类型

+

可读

+

可写

+

说明

+

insertEntries

+

Entry[]

+

是

+

是

+

数据添加记录。

+

updateEntries

+

Entry[]

+

是

+

是

+

数据更新记录。

+

deleteEntries

+

Entry[]

+

是

+

是

+

数据删除记录。

+

deviceId

+

string

+

是

+

是

+

设备ID，此处为设备UUID。

+
+ +## Entry + +存储在数据库中的键值对。 + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

key

+

string

+

是

+

是

+

键值。

+

value

+

Value

+

是

+

是

+

值对象。

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

名称

+

参数类型

+

可读

+

可写

+

说明

+

type

+

ValueType

+

是

+

是

+

值类型。

+

value

+

Uint8Array | string | number | boolean

+

是

+

是

+

值，Uint8Array、string 的长度不大于MAX_VALUE_LENGTH。

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

名称

+

默认值

+

说明

+

STRING

+

0

+

表示值类型为字符串。

+

INTEGER

+

1

+

表示值类型为整数。

+

FLOAT

+

2

+

表示值类型为浮点数。

+

BYTE_ARRAY

+

3

+

表示值类型为字节数组。

+

BOOLEAN

+

4

+

表示值类型为布尔值。

+

DOUBLE

+

5

+

表示值类型为双浮点数。

+
+ +## SingleKVStore + +单版本分布式数据库，继承自KVStore，提供查询数据和同步数据的方法。在调用SingleKVStore的方法前，需要先通过getKVStore构建一个KVStore实例。 + +### get + +get\(key: string, callback: AsyncCallback\): void + +获取指定键的值，并通过callback方式返回，此方法为异步方法。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

key

+

string

+

是

+

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

+

callback

+

AsyncCallback<Uint8Array | string | boolean | number>

+

是

+

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

+
+ +- 示例 + + ``` + const KEY_TEST_STRING_ELEMENT = 'key_test_string'; + const VALUE_TEST_STRING_ELEMENT = 'value-test-string'; + try { + kvStore.put(KEY_TEST_STRING_ELEMENT, VALUE_TEST_STRING_ELEMENT, function (err,data) { + if (err != undefined) { + console.log("put err: " + JSON.stringify(err)); + return; + } + console.log("put success"); + kvStore.get(KEY_TEST_STRING_ELEMENT, function (err,data) { + console.log("get success data: " + data); + }); + }); + }catch (e) { + console.log("An unexpected error occurred. Error:" + e); + } + ``` + + +### get + +get\(key: string\): Promise + +获取指定键的值，并通过Promise方式返回，此方法为异步方法。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

key

+

string

+

是

+

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

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

类型

+

说明

+

Promise<Uint8Array | string | boolean | number>

+

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

+
+ + +- 示例 + + ``` + const KEY_TEST_STRING_ELEMENT = 'key_test_string'; + const VALUE_TEST_STRING_ELEMENT = 'value-test-string'; + try { + kvStore.put(KEY_TEST_STRING_ELEMENT, VALUE_TEST_STRING_ELEMENT).then((data) => { + console.log("put success: " + JSON.stringify(data)); + kvStore.get(KEY_TEST_STRING_ELEMENT).then((data) => { + console.log("get success data: " + data); + }).catch((err) => { + console.log("get err: " + JSON.stringify(err)); + }); + }).catch((err) => { + console.log("put err: " + JSON.stringify(err)); + }); + }catch (e) { + console.log("An unexpected error occurred. Error:" + e); + } + ``` + + +### sync + +sync\(deviceIdList: string\[\], mode: SyncMode, allowedDelayMs?: number\): void + +在手动同步模式下，触发数据库同步，此方法为同步方法。 + +- 参数： + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

deviceIdList

+

string[]

+

是

+

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

+

mode

+

SyncMode

+

是

+

同步类型。

+

allowedDelayMs

+

number

+

否

+

可选参数，允许延时时间，单位：ms（毫秒）。

+
+ +- 示例： + + ``` + kvStore.sync(deviceIds, 1, 1000); + ``` + + +## SyncMode + +用于指定同步模式。 + + + + + + + + + + + + + + + + + + + + +

名称

+

默认值

+

说明

+

PULL_ONLY

+

0

+

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

+

PUSH_ONLY

+

1

+

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

+

PUSH_PULL

+

2

+

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

+
+ 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 deleted file mode 100644 index ec4ea3c8f4d9f72da48a5ebdc8ddf86d48adf2a9..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/apis/js-apis-distributedaccount.md +++ /dev/null @@ -1,303 +0,0 @@ -# 分布式帐号管理 - -- [导入模块](#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-featureAbility.md b/zh-cn/application-dev/js-reference/apis/js-apis-featureAbility.md index 196edf6609d2141827b76a3727603cd64624bed5..832cdcd4097283215ba0fecf0ae97a9242c04c93 100644 --- a/zh-cn/application-dev/js-reference/apis/js-apis-featureAbility.md +++ b/zh-cn/application-dev/js-reference/apis/js-apis-featureAbility.md @@ -1,4 +1,4 @@ -### FeatureAbility模块(JS端SDK接口) +# FeatureAbility模块(JS端SDK接口) #### 支持设备 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 index ca0d2cae4deff1bf532f5d91b2d8569820c85218..b451a76cf11e81d56528ac08153a486b397025d2 100644 --- a/zh-cn/application-dev/js-reference/apis/js-apis-fileio.md +++ b/zh-cn/application-dev/js-reference/apis/js-apis-fileio.md @@ -1,81 +1,50 @@ -# 文件管理 - -- [导入模块](#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 开始支持。 ->- 标记7+的接口从API Version 7开始支持。 +>从 API Version 6 开始支持。 -## 导入模块 +## 导入模块 ``` import fileio from '@ohos.fileio'; ``` -## 权限列表 +## 权限列表 无 -## 使用说明 +## 使用说明 + +使用该功能模块对文件/目录进行操作前，需要先获取其绝对路径，获取方式及其接口用法请参考：[Context模块的接口getOrCreateLocalDir](js-apis-Context.md)。 + + + + + + + + + + + + + + + + +

目录类型

+

说明

+

相关接口

+

内部存储的缓存目录

+

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

+

getCacheDir

+

内部存储目录

+

随应用卸载删除。

+

getFilesDir

+
+ +“文件/目录绝对路径”=“应用目录路径”+“文件/目录名” -使用该功能模块对文件/目录进行操作前，需要先获取其绝对路径。 -“文件/目录绝对路径”=“应用目录路径”+“文件/目录名”。 -应用目录路径可通过[Context模块的接口getOrCreateLocalDir](js-apis-Context.md)获取。 通过上述接口获取到应用目录路径dir，文件名为“xxx.txt”，文件所在绝对路径为： ``` @@ -88,7 +57,7 @@ let path = dir + "xxx.txt" let fd = fileio.openSync(path); ``` -## fileio.statSync +## fileio.statSync statSync\(path:string\): Stat @@ -96,24 +65,24 @@ statSync\(path:string\): Stat - 参数： - -

参数名

+ + - - - - - - - @@ -122,16 +91,16 @@ statSync\(path:string\): Stat - 返回值： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

path

+

path

string

+

string

是

+

是

待获取文件的绝对路径。

+

待获取文件的绝对路径。

类型

+ + - - - @@ -144,7 +113,7 @@ statSync\(path:string\): Stat ``` -## fileio.opendirSync +## fileio.opendirSync opendirSync\(path: string\): Dir @@ -152,24 +121,24 @@ opendirSync\(path: string\): Dir - 参数： - -

类型

说明

+

说明

Stat

+

Stat

表示文件的具体信息。

+

表示文件的具体信息。

参数名

+ + - - - - - - - @@ -177,16 +146,16 @@ opendirSync\(path: string\): Dir - 返回值： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

path

+

path

string

+

string

是

+

是

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

+

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

类型

+ + - - - @@ -199,7 +168,7 @@ opendirSync\(path: string\): Dir ``` -## fileio.accessSync +## fileio.accessSync accessSync\(path: string, mode?: number\): void @@ -207,36 +176,36 @@ accessSync\(path: string, mode?: number\): void - 参数： - -

类型

说明

+

说明

Dir

+

Dir

返回Dir对象。

+

返回Dir对象。

参数名

+ + - - - - - - - - - - - @@ -249,7 +218,7 @@ accessSync\(path: string, mode?: number\): void ``` -## fileio.closeSync +## fileio.closeSync closeSync\(fd: number\): void @@ -257,24 +226,24 @@ closeSync\(fd: number\): void - 参数： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

path

+

path

string

+

string

是

+

是

待访问文件的绝对路径。

+

待访问文件的绝对路径。

mode

+

mode

number

+

number

否

+

否

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

-

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

-
  • 0：确认文件是否存在。
-
  • 1：确认当前进程是否具有可执行权限。
  • 2：确认当前进程是否具有写权限。
  • 4：确认当前进程是否具有读权限。
+

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

+

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

+
  • 0：确认文件是否存在。
+
  • 1：确认当前进程是否具有可执行权限。
  • 2：确认当前进程是否具有写权限。
  • 4：确认当前进程是否具有读权限。

参数名

+ + - - - - - - - @@ -287,7 +256,7 @@ closeSync\(fd: number\): void ``` -## fileio.copyFileSync +## fileio.copyFileSync fileio.copyFileSync\(src: string, dest: string, mode?:number\): void @@ -295,43 +264,43 @@ fileio.copyFileSync\(src: string, dest: string, mode?:number\): void - 参数： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

fd

+

fd

number

+

number

是

+

是

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

+

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

参数名

+ + - - - - - - - - - - - - - - - @@ -344,7 +313,7 @@ fileio.copyFileSync\(src: string, dest: string, mode?:number\): void ``` -## fileio.mkdirSync +## fileio.mkdirSync fileio.mkdirSync\(path: string, mode?: number\): void @@ -352,34 +321,34 @@ fileio.mkdirSync\(path: string, mode?: number\): void - 参数： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

src

+

src

string

+

string

是

+

是

待复制文件的路径。

+

待复制文件的路径。

dest

+

dest

string

+

string

是

+

是

目标文件路径。

+

目标文件路径。

mode

+

mode

number

+

number

否

+

否

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

-

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

+

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

+

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

参数名

+ + - - - - - - - - - - - @@ -392,7 +361,7 @@ fileio.mkdirSync\(path: string, mode?: number\): void ``` -## fileio.openSync +## fileio.openSync openSync\(path: string, flags?: number, mode?: number\): number @@ -400,46 +369,46 @@ openSync\(path: string, flags?: number, mode?: number\): number - 参数： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

path

+

path

string

+

string

是

+

是

待创建目录的绝对路径。

+

待创建目录的绝对路径。

mode

+

mode

number

+

number

否

+

否

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

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

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

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

参数名

+ + - - - - - - - - - - - - - - - @@ -447,16 +416,16 @@ openSync\(path: string, flags?: number, mode?: number\): number - 返回值： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

path

+

path

string

+

string

是

+

是

待打开文件的绝对路径。

+

待打开文件的绝对路径。

flags

+

flags

number

+

number

否

+

否

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

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

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

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

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

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

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

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

mode

+

mode

number

+

number

否

+

否

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

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

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

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

类型

+ + - - - @@ -469,7 +438,7 @@ openSync\(path: string, flags?: number, mode?: number\): number ``` -## fileio.readSync +## fileio.readSync readSync\(fd: number, buffer: ArrayBuffer, options?: Object\): number @@ -477,43 +446,43 @@ readSync\(fd: number, buffer: ArrayBuffer, options?: Object\): number - 参数： - -

类型

说明

+

说明

number

+

number

打开文件的文件描述符。

+

打开文件的文件描述符。

参数名

+ + - - - - - - - - - - - - - - - @@ -521,16 +490,16 @@ readSync\(fd: number, buffer: ArrayBuffer, options?: Object\): number - 返回值： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

fd

+

fd

number

+

number

是

+

是

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

+

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

buffer

+

buffer

ArrayBuffer

+

ArrayBuffer

是

+

是

用于读取文件的缓冲区。

+

用于读取文件的缓冲区。

options

+

options

Object

+

Object

否

+

否

支持如下选项：

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

支持如下选项：

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

类型

+ + - - - @@ -546,7 +515,7 @@ readSync\(fd: number, buffer: ArrayBuffer, options?: Object\): number ``` -## fileio.rmdirSync +## fileio.rmdirSync rmdirSync\(path: string\): void @@ -554,24 +523,24 @@ rmdirSync\(path: string\): void - 参数： - -

类型

说明

+

说明

number

+

number

实际读取的长度。

+

实际读取的长度。

参数名

+ + - - - - - - - @@ -584,7 +553,7 @@ rmdirSync\(path: string\): void ``` -## fileio.unlinkSync +## fileio.unlinkSync unlinkSync\(path: string\): void @@ -592,24 +561,24 @@ unlinkSync\(path: string\): void - 参数： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

path

+

path

string

+

string

是

+

是

待删除目录的绝对路径。

+

待删除目录的绝对路径。

参数名

+ + - - - - - - - @@ -622,7 +591,7 @@ unlinkSync\(path: string\): void ``` -## fileio.writeSync +## fileio.writeSync writeSync\(fd: number, buffer: ArrayBuffer | string, options?:Object\): number @@ -630,43 +599,43 @@ writeSync\(fd: number, buffer: ArrayBuffer | string, options?:Object\): number - 参数： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

path

+

path

string

+

string

是

+

是

待删除文件的绝对路径。

+

待删除文件的绝对路径。

参数名

+ + - - - - - - - - - - - - - - - @@ -674,16 +643,16 @@ writeSync\(fd: number, buffer: ArrayBuffer | string, options?:Object\): number - 返回值： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

fd

+

fd

number

+

number

是

+

是

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

+

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

buffer

+

buffer

ArrayBuffer | string

+

ArrayBuffer | string

是

+

是

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

+

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

options

+

options

Object

+

Object

否

+

否

支持如下选项：

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

支持如下选项：

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

类型

+ + - - - @@ -697,7 +666,7 @@ writeSync\(fd: number, buffer: ArrayBuffer | string, options?:Object\): number ``` -## fileio.chmodSync7+ +## fileio.chmodSync7+ chmodSync\(path: string, mode: number\): void @@ -705,34 +674,34 @@ chmodSync\(path: string, mode: number\): void - 参数： - -

类型

说明

+

说明

number

+

number

实际写入的长度。

+

实际写入的长度。

参数名

+ + - - - - - - - - - - - @@ -745,7 +714,7 @@ chmodSync\(path: string, mode: number\): void ``` -## fileio.fstatSync7+ +## fileio.fstatSync7+ fstatSync\(fd: number\): Stat @@ -753,24 +722,24 @@ fstatSync\(fd: number\): Stat - 参数： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

path

+

path

string

+

string

是

+

是

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

+

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

mode

+

mode

number

+

number

是

+

是

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

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

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

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

参数名

+ + - - - - - - - @@ -779,16 +748,16 @@ fstatSync\(fd: number\): Stat - 返回值： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

fd

+

fd

number

+

number

是

+

是

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

+

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

类型

+ + - - - @@ -803,7 +772,7 @@ fstatSync\(fd: number\): Stat ``` -## fileio.ftruncateSync7+ +## fileio.ftruncateSync7+ ftruncateSync\(fd: number, len?: number\): void @@ -811,33 +780,33 @@ ftruncateSync\(fd: number, len?: number\): void - 参数： - -

类型

说明

+

说明

Promise<Stat>

+

Promise<Stat>

表示文件的具体信息。

+

表示文件的具体信息。

参数名

+ + - - - - - - - - - - - @@ -851,7 +820,7 @@ ftruncateSync\(fd: number, len?: number\): void ``` -## fileio.fchmodSync7+ +## fileio.fchmodSync7+ fchmodSync\(existingPath: string, newPath: string\): void @@ -859,34 +828,34 @@ fchmodSync\(existingPath: string, newPath: string\): void - 参数： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

fd

+

fd

number

+

number

是

+

是

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

+

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

len

+

len

number

+

number

否

+

否

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

+

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

参数名

+ + - - - - - - - - - - - @@ -899,7 +868,7 @@ fchmodSync\(existingPath: string, newPath: string\): void ``` -## fileio.truncateSync7+ +## fileio.truncateSync7+ truncateSync\(fpath: string, len?: number\): void @@ -907,33 +876,33 @@ truncateSync\(fpath: string, len?: number\): void - 参数： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

fd

+

fd

number

+

number

是

+

是

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

+

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

mode

+

mode

number

+

number

是

+

是

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

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

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

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

参数名

+ + - - - - - - - - - - - @@ -947,7 +916,7 @@ truncateSync\(fpath: string, len?: number\): void ``` -## fileio.renameSync7+ +## fileio.renameSync7+ renameSync\(oldPath: string, newPath: string\): void @@ -955,33 +924,33 @@ renameSync\(oldPath: string, newPath: string\): void - 参数： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

path

+

path

string

+

string

是

+

是

待截断文件的绝对路径。

+

待截断文件的绝对路径。

len

+

len

number

+

number

否

+

否

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

+

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

参数名

+ + - - - - - - - - - - - @@ -990,11 +959,11 @@ renameSync\(oldPath: string, newPath: string\): void - 示例： ``` - fileio.rename(oldpath，newpath); + fileio.renameSync(oldpath, newpath); ``` -## fileio.fsyncSync7+ +## fileio.fsyncSync7+ fsyncSync\(fd: number\): void @@ -1002,24 +971,24 @@ fsyncSync\(fd: number\): void - 参数： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

oldPath

+

oldPath

string

+

string

是

+

是

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

+

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

Newpath

+

Newpath

String

+

String

是

+

是

目标文件的新绝对路径。

+

目标文件的新绝对路径。

参数名

+ + - - - - - - - @@ -1032,7 +1001,7 @@ fsyncSync\(fd: number\): void ``` -## fileio.chownSync7+ +## fileio.chownSync7+ chownSync\(path: string, uid: number, gid: number\): void @@ -1040,42 +1009,42 @@ chownSync\(path: string, uid: number, gid: number\): void - 参数： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

fd

+

fd

number

+

number

是

+

是

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

+

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

参数名

+ + - - - - - - - - - - - - - - - @@ -1089,7 +1058,7 @@ chownSync\(path: string, uid: number, gid: number\): void ``` -## fileio.createStreamSync7+ +## fileio.createStreamSync7+ createStreamSync\(path: string, mode: string\): Stream @@ -1097,33 +1066,33 @@ createStreamSync\(path: string, mode: string\): Stream - 参数： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

path

+

path

string

+

string

是

+

是

待改变文件的绝对路径。

+

待改变文件的绝对路径。

uid

+

uid

number

+

number

是

+

是

新的UID。

+

新的UID。

gid

+

gid

number

+

number

是

+

是

新的GID。

+

新的GID。

参数名

+ + - - - - - - - - - - - @@ -1132,16 +1101,16 @@ createStreamSync\(path: string, mode: string\): Stream - 返回值： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

path

+

path

string

+

string

是

+

是

待打开文件的绝对路径。

+

待打开文件的绝对路径。

mode

+

mode

string

+

string

是

+

是

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

参数名

+ + - - - @@ -1154,7 +1123,7 @@ createStreamSync\(path: string, mode: string\): Stream ``` -## fileio.fdopenStreamSync7+ +## fileio.fdopenStreamSync7+ fdopenStreamSync\(fd: number, mode: string\): Stream @@ -1162,33 +1131,33 @@ fdopenStreamSync\(fd: number, mode: string\): Stream - 参数： - -

参数名

说明

+

说明

Stream

+

Stream

返回文件流的结果。

+

返回文件流的结果。

参数名

+ + - - - - - - - - - - - @@ -1197,16 +1166,16 @@ fdopenStreamSync\(fd: number, mode: string\): Stream - 返回值： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

fd

+

fd

number

+

number

是

+

是

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

+

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

mode

+

mode

string

+

string

是

+

是

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

参数名

+ + - - - @@ -1219,7 +1188,7 @@ fdopenStreamSync\(fd: number, mode: string\): Stream ``` -## fileio.fchownSync7+ +## fileio.fchownSync7+ fchownSync\(fd: number, uid: number, gid: number\): void @@ -1227,42 +1196,42 @@ fchownSync\(fd: number, uid: number, gid: number\): void - 参数： - -

参数名

说明

+

说明

Stream

+

Stream

返回文件流的结果。

+

返回文件流的结果。

参数名

+ + - - - - - - - - - - - - - - - @@ -1276,162 +1245,162 @@ fchownSync\(fd: number, uid: number, gid: number\): void ``` -## Stat +## Stat -文件具体信息，在调用Stat的方法前，需要先通过[fileio.statSync](#zh-cn_topic_0000001208447259_section014281412198)来构建一个Stat实例。 +文件具体信息，在调用Stat的方法前，需要先通过[fileio.statSync](#section014281412198)来构建一个Stat实例。 -### 属性 +### 属性 - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

fd

+

fd

number

+

number

是

+

是

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

+

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

uid

+

uid

number

+

number

是

+

是

文件所有者的UID。

+

文件所有者的UID。

gid

+

gid

number

+

number

是

+

是

文件所有组的GID。

+

文件所有组的GID。

名称

+ + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

参数类型

+

参数类型

可读

+

可读

可写

+

可写

说明

+

说明

dev

+

dev

number

+

number

是

+

是

否

+

否

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

+

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

ino

+

ino

number

+

number

是

+

是

否

+

否

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

+

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

mode

+

mode

number

+

number

是

+

是

否

+

否

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

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

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

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

nlink

+

nlink

number

+

number

是

+

是

否

+

否

文件的硬链接数。

+

文件的硬链接数。

uid

+

uid

number

+

number

是

+

是

否

+

否

文件所有者的ID。

+

文件所有者的ID。

gid

+

gid

number

+

number

是

+

是

否

+

否

文件所有组的ID。

+

文件所有组的ID。

rdev

+

rdev

number

+

number

是

+

是

否

+

否

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

+

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

size

+

size

number

+

number

是

+

是

否

+

否

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

+

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

blocks

+

blocks

number

+

number

是

+

是

否

+

否

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

+

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

atime

+

atime

number

+

number

是

+

是

否

+

否

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

+

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

mtime

+

mtime

number

+

number

是

+

是

否

+

否

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

+

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

ctime

+

ctime

number

+

number

是

+

是

否

+

否

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

+

最近改变文件状态的时间，表示距1970年1月1日0时0分0秒的秒数。
-### isBlockDevice +### isBlockDevice isBlockDevice\(\): boolean @@ -1439,16 +1408,16 @@ isBlockDevice\(\): boolean - 返回值： - -

类型

+ + - - - @@ -1461,7 +1430,7 @@ isBlockDevice\(\): boolean ``` -### isCharacterDevice +### isCharacterDevice isCharacterDevice\(\): boolean @@ -1469,16 +1438,16 @@ isCharacterDevice\(\): boolean - 返回值： - -

类型

说明

+

说明

boolean

+

boolean

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

+

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

类型

+ + - - - @@ -1491,7 +1460,7 @@ isCharacterDevice\(\): boolean ``` -### isDirectory +### isDirectory isDirectory\(\): boolean @@ -1499,16 +1468,16 @@ isDirectory\(\): boolean - 返回值： - -

类型

说明

+

说明

boolean

+

boolean

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

+

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

类型

+ + - - - @@ -1521,7 +1490,7 @@ isDirectory\(\): boolean ``` -### isFIFO +### isFIFO isFIFO\(\): boolean @@ -1529,16 +1498,16 @@ isFIFO\(\): boolean - 返回值： - -

类型

说明

+

说明

boolean

+

boolean

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

+

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

类型

+ + - - - @@ -1551,7 +1520,7 @@ isFIFO\(\): boolean ``` -### isFile +### isFile isFile\(\): boolean @@ -1559,16 +1528,16 @@ isFile\(\): boolean - 返回值： - -

类型

说明

+

说明

boolean

+

boolean

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

+

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

类型

+ + - - - @@ -1581,7 +1550,7 @@ isFile\(\): boolean ``` -### isSocket +### isSocket isSocket\(\): boolean @@ -1589,16 +1558,16 @@ isSocket\(\): boolean - 返回值： - -

类型

说明

+

说明

boolean

+

boolean

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

+

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

类型

+ + - - - @@ -1611,7 +1580,7 @@ isSocket\(\): boolean ``` -### isSymbolicLink +### isSymbolicLink isSymbolicLink\(\): boolean @@ -1619,16 +1588,16 @@ isSymbolicLink\(\): boolean - 返回值： - -

类型

说明

+

说明

boolean

+

boolean

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

+

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

类型

+ + - - - @@ -1641,11 +1610,11 @@ isSymbolicLink\(\): boolean ``` -## Stream7+ +## Stream7+ -文件流，在调用Stream的方法前，需要先通过[fileio.createStreamSync](#zh-cn_topic_0000001208447259_section1956102153713)方法来构建一个Stream实例。 +文件流，在调用Stream的方法前，需要先通过[fileio.createStreamSync](#section1956102153713)方法来构建一个Stream实例。 -### closeSync7+ +### closeSync7+ closeSync\(\): void @@ -1659,7 +1628,7 @@ closeSync\(\): void ``` -### flushSync7+ +### flushSync7+ flushSync\(\): void @@ -1673,7 +1642,7 @@ flushSync\(\): void ``` -### writeSync7+ +### writeSync7+ writeSync\(buffer: ArrayBuffer | string, options?:Object\): number @@ -1681,34 +1650,34 @@ writeSync\(buffer: ArrayBuffer | string, options?:Object\): number - 参数： - -

类型

说明

+

说明

boolean

+

boolean

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

+

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

参数名

+ + - - - - - - - - - - - @@ -1716,16 +1685,16 @@ writeSync\(buffer: ArrayBuffer | string, options?:Object\): number - 返回值： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

buffer

+

buffer

ArrayBuffer | string

+

ArrayBuffer | string

是

+

是

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

+

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

options

+

options

Object

+

Object

否

+

否

支持如下选项：

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

支持如下选项：

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

类型

+ + - - - @@ -1739,7 +1708,7 @@ writeSync\(buffer: ArrayBuffer | string, options?:Object\): number ``` -### readSync7+ +### readSync7+ readSync\(buffer: ArrayBuffer, options?: Object\): number @@ -1747,34 +1716,34 @@ readSync\(buffer: ArrayBuffer, options?: Object\): number - 参数： - -

类型

说明

+

说明

number

+

number

实际写入的长度。

+

实际写入的长度。

参数名

+ + - - - - - - - - - - - @@ -1782,16 +1751,16 @@ readSync\(buffer: ArrayBuffer, options?: Object\): number - 返回值： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

buffer

+

buffer

ArrayBuffer

+

ArrayBuffer

是

+

是

用于读取文件的缓冲区。

+

用于读取文件的缓冲区。

options

+

options

Object

+

Object

否

+

否

支持如下选项：

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

支持如下选项：

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

类型

+ + - - - @@ -1805,11 +1774,11 @@ readSync\(buffer: ArrayBuffer, options?: Object\): number ``` -## Dir +## Dir -管理目录，在调用Dir的方法前，需要先通过[fileio.opendirSync](#zh-cn_topic_0000001208447259_section7741145112216)方法来构建一个Dir实例。 +管理目录，在调用Dir的方法前，需要先通过[fileio.opendirSync](#section7741145112216)方法来构建一个Dir实例。 -### readSync +### readSync readSync\(\): Dirent @@ -1817,16 +1786,16 @@ readSync\(\): Dirent - 返回值： - -

类型

说明

+

说明

number

+

number

实际读取的长度。

+

实际读取的长度。

类型

+ + - - - @@ -1841,7 +1810,7 @@ readSync\(\): Dirent ``` -### closeSync +### closeSync closeSync\(\): void @@ -1855,40 +1824,40 @@ closeSync\(\): void ``` -## Dirent +## Dirent -在调用Dirent的方法前，需要先通过[readSync](#zh-cn_topic_0000001208447259_section10198204912710)方法来构建一个Dirent实例。 +在调用Dirent的方法前，需要先通过[readSync](#section10198204912710)方法来构建一个Dirent实例。 -### 属性 +### 属性 - -

类型

说明

+

说明

Dirent

+

Dirent

表示一个目录项。

+

表示一个目录项。

名称

+ + - - - - - - - - -

名称

参数类型

+

参数类型

可读

+

可读

可写

+

可写

说明

+

说明

name

+

name

string

+

string

是

+

是

否

+

否

目录项的名称。

+

目录项的名称。
-### isBlockDevice +### isBlockDevice isBlockDevice\(\): boolean @@ -1896,16 +1865,16 @@ isBlockDevice\(\): boolean - 返回值： - -

类型

+ + - - - @@ -1919,7 +1888,7 @@ isBlockDevice\(\): boolean ``` -### isCharacterDevice +### isCharacterDevice isCharacterDevice\(\): boolean @@ -1927,16 +1896,16 @@ isCharacterDevice\(\): boolean - 返回值： - -

类型

说明

+

说明

boolean

+

boolean

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

+

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

类型

+ + - - - @@ -1950,7 +1919,7 @@ isCharacterDevice\(\): boolean ``` -### isDirectory +### isDirectory isDirectory\(\): boolean @@ -1958,16 +1927,16 @@ isDirectory\(\): boolean - 返回值： - -

类型

说明

+

说明

boolean

+

boolean

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

+

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

类型

+ + - - - @@ -1981,7 +1950,7 @@ isDirectory\(\): boolean ``` -### isFIFO +### isFIFO isFIFO\(\): boolean @@ -1989,16 +1958,16 @@ isFIFO\(\): boolean - 返回值： - -

类型

说明

+

说明

boolean

+

boolean

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

+

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

类型

+ + - - - @@ -2012,7 +1981,7 @@ isFIFO\(\): boolean ``` -### isFile +### isFile isFile\(\): boolean @@ -2020,16 +1989,16 @@ isFile\(\): boolean - 返回值： - -

类型

说明

+

说明

boolean

+

boolean

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

+

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

类型

+ + - - - @@ -2043,7 +2012,7 @@ isFile\(\): boolean ``` -### isSocket +### isSocket isSocket\(\): boolean @@ -2051,16 +2020,16 @@ isSocket\(\): boolean - 返回值： - -

类型

说明

+

说明

boolean

+

boolean

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

+

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

类型

+ + - - - @@ -2074,7 +2043,7 @@ isSocket\(\): boolean ``` -### isSymbolicLink +### isSymbolicLink isSymbolicLink\(\): boolean @@ -2082,16 +2051,16 @@ isSymbolicLink\(\): boolean - 返回值： - -

类型

说明

+

说明

boolean

+

boolean

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

+

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

类型

+ + - - - @@ -2104,3 +2073,4 @@ isSymbolicLink\(\): boolean 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 index ed824883bbd53a1c12ff830cb6f86a38aab55332..a1a318bf9dda1aeef0301d5a81a437a52777bc38 100644 --- a/zh-cn/application-dev/js-reference/apis/js-apis-hiappevent.md +++ b/zh-cn/application-dev/js-reference/apis/js-apis-hiappevent.md @@ -1,33 +1,19 @@ -# 应用打点 - -- [导入模块](#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 +## hiAppEvent.write write\(eventName: string, eventType: EventType, keyValues: object, callback: AsyncCallback\): void @@ -35,52 +21,52 @@ write\(eventName: string, eventType: EventType, keyValues: object, callback: Asy - 参数： - -

类型

说明

+

说明

boolean

+

boolean

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

+

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

参数名

+ + - - - - - - - - - - - - - - - - - - - @@ -102,7 +88,7 @@ write\(eventName: string, eventType: EventType, keyValues: object, callback: Asy ``` -## hiAppEvent.write +## hiAppEvent.write write\(eventName: string, eventType: EventType, keyValues: object\): Promise @@ -110,42 +96,42 @@ write\(eventName: string, eventType: EventType, keyValues: object\): Promise -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

eventName

+

eventName

string

+

string

是

+

是

应用事件名称。

+

应用事件名称。

eventType

+

eventType

EventType

+

EventType

是

+

是

应用事件类型。

+

应用事件类型。

keyValues

+

keyValues

object

+

object

是

+

是

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

+

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

callback

+

callback

AsyncCallback<void>

+

AsyncCallback<void>

否

+

否

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

-
  • 返回值为0表示事件校验成功，事件正常异步写入事件文件；
  • 大于0表示事件校验存在异常参数，在忽略异常参数后将事件异步写入事件文件；
  • 小于0表示事件校验失败，不将事件写入事件文件。
+

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

+
  • 返回值为0表示事件校验成功，事件正常异步写入事件文件；
  • 大于0表示事件校验存在异常参数，在忽略异常参数后将事件异步写入事件文件；
  • 小于0表示事件校验失败，不将事件写入事件文件。

参数名

+ + - - - - - - - - - - - - - - - @@ -153,16 +139,16 @@ write\(eventName: string, eventType: EventType, keyValues: object\): Promise -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

eventName

+

eventName

string

+

string

是

+

是

应用事件名称。

+

应用事件名称。

eventType

+

eventType

EventType

+

EventType

是

+

是

应用事件类型。

+

应用事件类型。

keyValues

+

keyValues

object

+

object

是

+

是

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

+

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

类型

+ + - - - @@ -182,7 +168,7 @@ write\(eventName: string, eventType: EventType, keyValues: object\): Promise +## hiAppEvent.configure configure\(config: ConfigOption\): boolean @@ -190,24 +176,24 @@ configure\(config: ConfigOption\): boolean - 参数： - -

类型

说明

+

说明

Promise<void>

+

Promise<void>

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

+

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

参数名

+ + - - - - - - - @@ -215,16 +201,16 @@ configure\(config: ConfigOption\): boolean - 返回值： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

config

+

config

ConfigOption

+

ConfigOption

是

+

是

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

+

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

类型

+ + - - - @@ -245,191 +231,191 @@ configure\(config: ConfigOption\): boolean ``` -## ConfigOption +## ConfigOption 此接口提供了应用打点的配置选项。 - -

类型

说明

+

说明

boolean

+

boolean

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

+

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

参数名

+ + - - - - - - - - - - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

disable

+

disable

boolean

+

boolean

否

+

否

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

+

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

maxStorage

+

maxStorage

string

+

string

否

+

否

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

+

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

名称

+ + - - - - - - - - - - - - - -

名称

默认值

+

默认值

说明

+

说明

FAULT

+

FAULT

1

+

1

故障类型事件。

+

故障类型事件。

STATISTIC

+

STATISTIC

2

+

2

统计类型事件。

+

统计类型事件。

SECURITY

+

SECURITY

3

+

3

安全类型事件。

+

安全类型事件。

BEHAVIOR

+

BEHAVIOR

4

+

4

行为类型事件。

+

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

名称

+ + - - - - - - - - - - - - - - - - - - -

名称

参数类型

+

参数类型

可读

+

可读

可写

+

可写

说明

+

说明

USER_LOGIN

+

USER_LOGIN

string

+

string

是

+

是

否

+

否

用户登录事件。

+

用户登录事件。

USER_LOGOUT

+

USER_LOGOUT

string

+

string

是

+

是

否

+

否

用户登出事件。

+

用户登出事件。

DISTRIBUTED_SERVICE_START

+

DISTRIBUTED_SERVICE_START

string

+

string

是

+

是

否

+

否

分布式服务启动事件。

+

分布式服务启动事件。
-## Param +## Param 此接口提供了所有预定义参数的参数名称常量。 -### 属性 +### 属性 - -

名称

+ + - - - - - - - - - - - - - - - - - - - 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 index 486ee1518416ed0d1fa8350d651c5c09f864b7b7..634f0dab150d03edd50ada054a7055da8cd8be04 100644 --- a/zh-cn/application-dev/js-reference/apis/js-apis-i18n.md +++ b/zh-cn/application-dev/js-reference/apis/js-apis-i18n.md @@ -1,27 +1,19 @@ -# 国际化（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) +# 国际化（I18n） >![](../../public_sys-resources/icon-note.gif) **说明：** >从 API Version 7 开始支持。 -## 导入模块 +## 导入模块 ``` import i18n from '@ohos.i18n'; ``` -## 权限 +## 权限 无 -## i18n.getDisplayLanguage +## i18n.getDisplayLanguage getDisplayLanguage\(language: string, locale: string, sentenceCase?: boolean\): string @@ -29,42 +21,42 @@ getDisplayLanguage\(language: string, locale: string, sentenceCase?: boolean\): - 参数： - -

名称

参数类型

+

参数类型

可读

+

可读

可写

+

可写

说明

+

说明

USER_ID

+

USER_ID

string

+

string

是

+

是

否

+

否

用户自定义ID。

+

用户自定义ID。

DISTRIBUTED_SERVICE_NAME

+

DISTRIBUTED_SERVICE_NAME

string

+

string

是

+

是

否

+

否

分布式服务名称。

+

分布式服务名称。

DISTRIBUTED_SERVICE_INSTANCE_ID

+

DISTRIBUTED_SERVICE_INSTANCE_ID

string

+

string

是

+

是

否

+

否

分布式服务实例ID。

+

分布式服务实例ID。

参数名

+ + - - - - - - - - - - - - - - - @@ -72,16 +64,16 @@ getDisplayLanguage\(language: string, locale: string, sentenceCase?: boolean\): - 返回值： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

language

+

language

string

+

string

是

+

是

指定语言

+

指定语言

locale

+

locale

string

+

string

是

+

是

显示指定语言的区域ID

+

显示指定语言的区域ID

sentenceCase

+

sentenceCase

boolean

+

boolean

否

+

否

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

+

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

类型

+ + - - - @@ -95,7 +87,7 @@ getDisplayLanguage\(language: string, locale: string, sentenceCase?: boolean\): ``` -## i18n.getDisplayCountry +## i18n.getDisplayCountry getDisplayCountry\(country: string, locale: string, sentenceCase?: boolean\): string @@ -103,42 +95,42 @@ getDisplayCountry\(country: string, locale: string, sentenceCase?: boolean\): st - 参数： - -

类型

说明

+

说明

string

+

string

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

+

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

参数名

+ + - - - - - - - - - - - - - - - @@ -146,16 +138,16 @@ getDisplayCountry\(country: string, locale: string, sentenceCase?: boolean\): st - 返回值： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

country

+

country

string

+

string

是

+

是

指定国家

+

指定国家

locale

+

locale

string

+

string

是

+

是

显示指定国家的区域ID

+

显示指定国家的区域ID

sentenceCase

+

sentenceCase

boolean

+

boolean

否

+

否

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

+

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

类型

+ + - - - @@ -169,7 +161,7 @@ getDisplayCountry\(country: string, locale: string, sentenceCase?: boolean\): st ``` -## i18n.getSystemLanugage +## i18n.getSystemLanugage getSystemLanguage\(\): string @@ -177,16 +169,16 @@ getSystemLanguage\(\): string - 返回值： - -

类型

说明

+

说明

string

+

string

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

+

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

类型

+ + - - - @@ -199,7 +191,7 @@ getSystemLanguage\(\): string ``` -## i18n.getSystemRegion +## i18n.getSystemRegion getSystemRegion\(\): string @@ -207,16 +199,16 @@ getSystemRegion\(\): string - 返回值： - -

类型

说明

+

说明

string

+

string

系统语言ID

+

系统语言ID

类型

+ + - - - @@ -229,7 +221,7 @@ getSystemRegion\(\): string ``` -## i18n.getSystemLocale +## i18n.getSystemLocale getSystemLocale\(\): string @@ -237,16 +229,16 @@ getSystemLocale\(\): string - 返回值： - -

类型

说明

+

说明

string

+

string

系统地区ID

+

系统地区ID

类型

+ + - - - 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 index 167c63e8e3feebde4122c684bf362f0d1a91e01f..ebfc69390e7a1b43fe0a6fc21a67c76d6e3cbdb4 100644 --- a/zh-cn/application-dev/js-reference/apis/js-apis-intl.md +++ b/zh-cn/application-dev/js-reference/apis/js-apis-intl.md @@ -1,178 +1,149 @@ -# 国际化（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) - +# 国际化（Intl） >![](../../public_sys-resources/icon-note.gif) **说明：** >从 API Version 6 开始支持。 -## 导入模块 +## 导入模块 ``` import intl from '@ohos.intl'; ``` -## 权限 +## 权限 无 -## Locale +## Locale -### 属性 +### 属性 - -

类型

说明

+

说明

string

+

string

系统区域ID

+

系统区域ID

名称

+ + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

参数类型

+

参数类型

可读

+

可读

可写

+

可写

说明

+

说明

language

+

language

string

+

string

是

+

是

否

+

否

与区域设置关联的语言

+

与区域设置关联的语言

script

+

script

string

+

string

是

+

是

否

+

否

语言的书写方式

+

语言的书写方式

region

+

region

string

+

string

是

+

是

否

+

否

与区域设置相关的地区

+

与区域设置相关的地区

baseName

+

baseName

string

+

string

是

+

是

否

+

否

Locale的基本核心信息

+

Locale的基本核心信息

caseFirst

+

caseFirst

string

+

string

是

+

是

否

+

否

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

+

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

calendar

+

calendar

string

+

string

是

+

是

否

+

否

区域的日历信息

+

区域的日历信息

collation

+

collation

string

+

string

是

+

是

否

+

否

区域的排序规则

+

区域的排序规则

hourCycle

+

hourCycle

string

+

string

是

+

是

否

+

否

区域的时制信息

+

区域的时制信息

numberingSystem

+

numberingSystem

string

+

string

是

+

是

否

+

否

区域使用的数字系统

+

区域使用的数字系统

numeric

+

numeric

boolean

+

boolean

是

+

是

否

+

否

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

+

是否对数字字符具有特殊的排序规则处理
-### constructor +### constructor constructor\(locale: string, options?:options\) @@ -180,33 +151,33 @@ constructor\(locale: string, options?:options\) - 参数： - -

参数名

+ + - - - - - - - - - - - @@ -220,7 +191,7 @@ constructor\(locale: string, options?:options\) ``` -### toString +### toString toString\(\): string @@ -228,16 +199,16 @@ toString\(\): string - 返回值： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

locale

+

locale

string

+

string

是

+

是

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

+

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

options

+

options

options

+

options

否

+

否

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

+

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

类型

+ + - - - @@ -252,7 +223,7 @@ toString\(\): string ``` -### maximize +### maximize maximize\(\): Locale @@ -260,16 +231,16 @@ maximize\(\): Locale - 返回值： - -

类型

说明

+

说明

string

+

string

字符串形式的区域信息

+

字符串形式的区域信息

类型

+ + - - - @@ -284,7 +255,7 @@ maximize\(\): Locale ``` -### minimize +### minimize minimize\(\): Locale @@ -292,16 +263,16 @@ minimize\(\): Locale - 返回值： - -

类型

说明

+

说明

Locale

+

Locale

最大化后的区域对象

+

最大化后的区域对象

类型

+ + - - - @@ -316,9 +287,9 @@ minimize\(\): Locale ``` -## DateTimeFormat +## DateTimeFormat -### constructor +### constructor constructor\(locale: string, options?:DateTimeOptions\) @@ -326,33 +297,33 @@ constructor\(locale: string, options?:DateTimeOptions\) - 参数： - -

类型

说明

+

说明

Locale

+

Locale

最小化后的区域对象

+

最小化后的区域对象

参数名

+ + - - - - - - - - - - - @@ -366,7 +337,7 @@ constructor\(locale: string, options?:DateTimeOptions\) ``` -### constructor +### constructor constructor\(locales: Array, options?:DateTimeOptions\) @@ -374,33 +345,33 @@ constructor\(locales: Array, options?:DateTimeOptions\) - 参数： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

locale

+

locale

string

+

string

是

+

是

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

+

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

options

+

options

DateTimeOptions

+

DateTimeOptions

否

+

否

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

+

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

参数名

+ + - - - - - - - - - - - @@ -414,7 +385,7 @@ constructor\(locales: Array, options?:DateTimeOptions\) ``` -### format +### format format\(date: Date\): string; @@ -422,24 +393,24 @@ format\(date: Date\): string; - 参数： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

locales

+

locales

Array<string>

+

Array<string>

是

+

是

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

+

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

options

+

options

DateTimeOptions

+

DateTimeOptions

否

+

否

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

+

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

参数名

+ + - - - - - - - @@ -447,16 +418,16 @@ format\(date: Date\): string; - 返回值： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

date

+

date

Date

+

Date

是

+

是

时间日期对象。

+

时间日期对象。

类型

+ + - - - @@ -472,7 +443,7 @@ format\(date: Date\): string; ``` -### formatRange +### formatRange formatRange\(fromDate: Date, toDate: Date\): string; @@ -480,33 +451,33 @@ formatRange\(fromDate: Date, toDate: Date\): string; - 参数： - -

类型

说明

+

说明

string

+

string

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

+

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

参数名

+ + - - - - - - - - - - - @@ -514,16 +485,16 @@ formatRange\(fromDate: Date, toDate: Date\): string; - 返回值： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

startDate

+

startDate

Date

+

Date

是

+

是

起始的时间日期

+

起始的时间日期

endDate

+

endDate

Date

+

Date

是

+

是

结束的时间日期

+

结束的时间日期

类型

+ + - - - @@ -540,7 +511,7 @@ formatRange\(fromDate: Date, toDate: Date\): string; ``` -### resolvedOptions +### resolvedOptions resolvedOptions\(\): DateTimeOptions @@ -548,16 +519,16 @@ resolvedOptions\(\): DateTimeOptions - 返回值： - -

类型

说明

+

说明

string

+

string

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

+

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

类型

+ + - - - @@ -572,9 +543,9 @@ resolvedOptions\(\): DateTimeOptions ``` -## NumberFormat +## NumberFormat -### constructor +### constructor constructor\(locale: string, options?:NumberOptions\) @@ -582,33 +553,33 @@ constructor\(locale: string, options?:NumberOptions\) 参数： - -

类型

说明

+

说明

DateTimeOptions

+

DateTimeOptions

DateTimeFormat 对象的格式化选项。

+

DateTimeFormat 对象的格式化选项。

参数名

+ + - - - - - - - - - - - @@ -621,7 +592,7 @@ constructor\(locale: string, options?:NumberOptions\) ``` -### constructor +### constructor constructor\(locales: Array, options?:NumberOptions\) @@ -629,33 +600,33 @@ constructor\(locales: Array, options?:NumberOptions\) - 参数： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

locale

+

locale

string

+

string

是

+

是

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

+

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

options

+

options

NumberOptions

+

NumberOptions

否

+

否

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

+

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

参数名

+ + - - - - - - - - - - - @@ -669,7 +640,7 @@ constructor\(locales: Array, options?:NumberOptions\) ``` -### format +### format format\(number: number\): string; @@ -677,24 +648,24 @@ format\(number: number\): string; - 参数： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

locales

+

locales

Array<string>

+

Array<string>

是

+

是

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

+

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

options

+

options

NumberOptions

+

NumberOptions

否

+

否

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

+

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

参数名

+ + - - - - - - - @@ -702,16 +673,16 @@ format\(number: number\): string; - 返回值： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

number

+

number

number

+

number

是

+

是

数字对象

+

数字对象

类型

+ + - - - @@ -726,7 +697,7 @@ format\(number: number\): string; ``` -### resolvedOptions +### resolvedOptions resolvedOptions\(\): NumberOptions @@ -734,16 +705,16 @@ resolvedOptions\(\): NumberOptions - 返回值： - -

类型

说明

+

说明

string

+

string

格式化后的数字字符串

+

格式化后的数字字符串

类型

+ + - - - @@ -758,452 +729,452 @@ resolvedOptions\(\): NumberOptions ``` -## DateTimeOptions +## DateTimeOptions 表示时间日期格式化选项。 -### 属性 +### 属性 - -

类型

说明

+

说明

NumberOptions

+

NumberOptions

NumberFormat 对象的格式化选项。

+

NumberFormat 对象的格式化选项。

名称

+ + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

参数类型

+

参数类型

可读

+

可读

可写

+

可写

说明

+

说明

locale

+

locale

string

+

string

是

+

是

否

+

否

区域参数

+

区域参数

dateStyle

+

dateStyle

string

+

string

是

+

是

是

+

是

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

+

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

timeStyle

+

timeStyle

string

+

string

是

+

是

是

+

是

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

+

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

hourCycle

+

hourCycle

string

+

string

是

+

是

是

+

是

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

+

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

timeZone

+

timeZone

string

+

string

是

+

是

是

+

是

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

+

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

numberingSystem

+

numberingSystem

string

+

string

是

+

是

是

+

是

数字系统

+

数字系统

hour12

+

hour12

boolean

+

boolean

是

+

是

是

+

是

是否使用12小时制

+

是否使用12小时制

weekday

+

weekday

string

+

string

是

+

是

是

+

是

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

+

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

era

+

era

string

+

string

是

+

是

是

+

是

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

+

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

year

+

year

string

+

string

是

+

是

是

+

是

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

+

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

month

+

month

string

+

string

是

+

是

是

+

是

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

+

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

day

+

day

string

+

string

是

+

是

是

+

是

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

+

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

hour

+

hour

string

+

string

是

+

是

是

+

是

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

+

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

minute

+

minute

string

+

string

是

+

是

是

+

是

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

+

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

second

+

second

string

+

string

是

+

是

是

+

是

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

+

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

timeZoneName

+

timeZoneName

string

+

string

是

+

是

是

+

是

时区名称的本地化表示

+

时区名称的本地化表示

dayPeriod

+

dayPeriod

string

+

string

是

+

是

是

+

是

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

+

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

localeMatcher

+

localeMatcher

string

+

string

是

+

是

是

+

是

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

+

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

formatMatcher

+

formatMatcher

string

+

string

是

+

是

是

+

是

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

+

要使用的格式匹配算法，取值范围："basic", "best fit"
-## NumberOptions +## NumberOptions 表示设备支持的能力。 -### 属性 +### 属性 - -

名称

+ + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 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 index de1b3d9eaac5b5283f52c1c371213588d44e08a0..71585421ddcd344b35e1b1b9f9206eb785e3a6d9 100644 --- a/zh-cn/application-dev/js-reference/apis/js-apis-libupdateclient.md +++ b/zh-cn/application-dev/js-reference/apis/js-apis-libupdateclient.md @@ -1,34 +1,5 @@ # 升级 -- [导入模块](#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卡升级和在线升级两种。 diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-media.md b/zh-cn/application-dev/js-reference/apis/js-apis-media.md index 28b33359ccf7363788614c2435a5a2593bbf2ea7..fed05acd5dd8bf8b6f05901644fff71dd569368c 100644 --- a/zh-cn/application-dev/js-reference/apis/js-apis-media.md +++ b/zh-cn/application-dev/js-reference/apis/js-apis-media.md @@ -1,24 +1,5 @@ # 音频播放 -- [导入模块](#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) - ## 导入模块 ``` diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-multmedia.md b/zh-cn/application-dev/js-reference/apis/js-apis-multmedia.md index 8be8a7e1d5ea071dd7d3c4292df5ceb40191e10c..167fb9d67728bacdbad2e971660c8093efbfd395 100644 --- a/zh-cn/application-dev/js-reference/apis/js-apis-multmedia.md +++ b/zh-cn/application-dev/js-reference/apis/js-apis-multmedia.md @@ -1,6 +1,9 @@ -# 媒体 +# 媒体 - **[音频管理](js-apis-audio.md)** - **[音频播放](js-apis-media.md)** +- **[音频录制](js-apis-recorder.md)** + + diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-notification-fwk.md b/zh-cn/application-dev/js-reference/apis/js-apis-notification-fwk.md new file mode 100644 index 0000000000000000000000000000000000000000..83de3deb0ce18d4936e228b531c63f1267a15379 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-notification-fwk.md @@ -0,0 +1,2 @@ +# 公共事件与通知 + diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-notification.md b/zh-cn/application-dev/js-reference/apis/js-apis-notification.md index 03534a362c561ce43d507ca2dd8275c6f94fa784..8068a14f08e1244ee56cde47cb802b3ed0629cb7 100644 --- a/zh-cn/application-dev/js-reference/apis/js-apis-notification.md +++ b/zh-cn/application-dev/js-reference/apis/js-apis-notification.md @@ -1,6 +1,4 @@ - - -### Notification模块(JS端SDK接口) +# Notification模块(JS端SDK接口) #### 支持设备 @@ -203,7 +201,7 @@ NotificationContent类型说明 | extras | 读、写 | Array | 否 | 按钮扩展信息 | | icon | 读、写 | image.PixelMap | 否 | 按钮图标 | -- +- 返回值 返回值为void @@ -237,7 +235,7 @@ Notification.publish(notificationRequest, publishCallback) 发布通知（Promise形式） -- +- 返回值 返回值为Promise<**void**> @@ -278,7 +276,7 @@ Notification.publish(notificationRequest).then((void) => { | lable | 只读 | string | 是 | 通知标签 | | callback | 只读 | AsyncCallback | 是 | 表示被指定的回调方法 | -- +- 返回值 返回值为void @@ -307,7 +305,7 @@ Notification.cancel(0, "label", cancelCallback) | id | 只读 | number | 是 | 通知ID | | lable | 只读 | string | 是 | 通知标签 | -- +- 返回值 返回值为Promise<**void**> @@ -334,7 +332,7 @@ Notification.cancel(0).then((void) => { | id | 只读 | number | 是 | 通知ID | | callback | 只读 | AsyncCallback | 是 | 表示被指定的回调方法 | -- +- 返回值 返回值为void @@ -362,7 +360,7 @@ Notification.cancel(0, cancelCallback) | -------- | -------- | ------------------- | ---- | -------------------- | | callback | 只读 | AsyncCallback | 是 | 表示被指定的回调方法 | -- +- 返回值 返回值为void @@ -388,7 +386,7 @@ Notification.cancelAll(cancelCallback) 无参数 -- +- 返回值 返回值为void @@ -422,7 +420,7 @@ Notification.cancelAll().then((void) => { | CONTENT_INFORMATION | 只读 | SlotType | 否 | 内容类型 | | OTHER_TYPES | 只读 | SlotType | 否 | 其他类型 | -* +* 返回值 返回值为void @@ -450,7 +448,7 @@ Notification.addSlot(SOCIAL_COMMUNICATION, addSlotCallBack) | ---- | -------- | -------- | ---- | ---------------------- | | type | 只读 | SlotType | 是 | 要创建的通知通道的类型 | -- +- 返回值 返回值为Promise<**void**> @@ -475,7 +473,7 @@ Notification.addSlot(SOCIAL_COMMUNICATION).then((void) => { | slotType | 只读 | slotType | 是 | 通知渠道类型,目前分为社交通信、服务提醒、内容咨询和其他类型 | | callback | 只读 | AsyncCallback | 是 | 表示被指定的回调方法 | -- +- 返回值 返回值为void @@ -504,7 +502,7 @@ Notification.getSlot(slotType, getSlotCallback) | -------- | -------- | -------- | ---- | ----------------------------------------------------------- | | slotType | 只读 | slotType | 是 | 通知渠道类型,目前分为社交通信、服务提醒、内容咨询和其他类型 | -* +* 返回值 返回值为Promise @@ -530,7 +528,7 @@ Notification.getSlot(slotType).then((data) => { | -------- | -------- | ------------------------------- | ---- | -------------------- | | callback | 只读 | AsyncCallback | 是 | 表示被指定的回调方法 | -- +- 返回值 返回值为void @@ -556,7 +554,7 @@ Notification.getSlots(getSlotsCallback) 无参数 -- +- 返回值 返回值为Promise> diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-particleAbility.md b/zh-cn/application-dev/js-reference/apis/js-apis-particleAbility.md index c639e3419ceec05ca2b266917195620fe851cad3..61a144a8ef5c29b425b5da71ed62e1023d793763 100644 --- a/zh-cn/application-dev/js-reference/apis/js-apis-particleAbility.md +++ b/zh-cn/application-dev/js-reference/apis/js-apis-particleAbility.md @@ -1,4 +1,4 @@ -### ParticleAbility模块(JS端SDK接口) +# ParticleAbility模块(JS端SDK接口) #### 支持设备 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 index 760f20553ab6a33eaaef0db7ce18608d25a6dcd1..a5bab82ea9d958e47f11674f8fae8cc4e62feafa 100644 --- a/zh-cn/application-dev/js-reference/apis/js-apis-power.md +++ b/zh-cn/application-dev/js-reference/apis/js-apis-power.md @@ -1,48 +1,15 @@ -# 系统电源管理 - -- [支持设备](#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 开始支持。 -## 支持设备 - - -

名称

参数类型

+

参数类型

可读

+

可读

可写

+

可写

说明

+

说明

locale

+

locale

string

+

string

是

+

是

否

+

否

区域参数

+

区域参数

currency

+

currency

string

+

string

是

+

是

是

+

是

货币单位

+

货币单位

currencySign

+

currencySign

string

+

string

是

+

是

是

+

是

货币单位的符号显示

+

货币单位的符号显示

currencyDisplay

+

currencyDisplay

string

+

string

是

+

是

是

+

是

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

+

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

unit

+

unit

string

+

string

是

+

是

是

+

是

单位

+

单位

unitDisplay

+

unitDisplay

string

+

string

是

+

是

是

+

是

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

+

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

signDisplay

+

signDisplay

string

+

string

是

+

是

是

+

是

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

+

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

compactDisplay

+

compactDisplay

string

+

string

是

+

是

是

+

是

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

+

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

notation

+

notation

string

+

string

是

+

是

是

+

是

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

+

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

localeMatcher

+

localeMatcher

string

+

string

是

+

是

是

+

是

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

+

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

style

+

style

string

+

string

是

+

是

是

+

是

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

+

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

numberingSystem

+

numberingSystem

string

+

string

是

+

是

是

+

是

数字系统

+

数字系统

useGrouping

+

useGrouping

boolean

+

boolean

是

+

是

是

+

是

是否分组显示

+

是否分组显示

miniumumIntegerDigits

+

miniumumIntegerDigits

number

+

number

是

+

是

是

+

是

最少整数个数

+

最少整数个数

miniumumFractionDigits

+

miniumumFractionDigits

number

+

number

是

+

是

是

+

是

最少小数个数

+

最少小数个数

maxiumumFractionDigits

+

maxiumumFractionDigits

number

+

number

是

+

是

是

+

是

最多小数个数

+

最多小数个数

miniumumSignificantDigits

+

miniumumSignificantDigits

number

+

number

是

+

是

是

+

是

最少有效位个数

+

最少有效位个数

maxiumumSignificantDigits

+

maxiumumSignificantDigits

number

+

number

是

+

是

是

+

是

最多有效位个数

+

最多有效位个数
- - - - - - - - - - - -

手机

-

平板

-

智慧屏

-

智能穿戴

-

支持

-

支持

-

不支持

-

支持

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

参数名

+ + - - - - - - - @@ -89,7 +56,7 @@ shutdownDevice\(reason: string\): void ``` -## power.rebootDevice +## power.rebootDevice rebootDevice\(reason: string\): void @@ -97,24 +64,24 @@ rebootDevice\(reason: string\): void - 参数： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

reason

+

reason

string

+

string

是

+

是

关机原因。

+

关机原因。

参数名

+ + - - - - - - - @@ -128,7 +95,7 @@ rebootDevice\(reason: string\): void ``` -## power.isScreenOn +## power.isScreenOn isScreenOn\(callback: AsyncCallback\): void @@ -136,25 +103,25 @@ isScreenOn\(callback: AsyncCallback\): void - 参数： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

reason

+

reason

string

+

string

是

+

是

重启原因。

+

重启原因。

类型

+ + - - - - - - - @@ -167,16 +134,14 @@ isScreenOn\(callback: AsyncCallback\): void power.isScreenOn((error, screenOn) => { if (typeof error === "undefined") { console.info('screenOn status is ' + screenOn); - done(); } else { console.log('error: ' + error); - done(); } }) ``` -## power.isScreenOn +## power.isScreenOn isScreenOn\(\): Promise @@ -184,16 +149,16 @@ isScreenOn\(\): Promise - 返回值： - -

类型

类型

+

类型

必填

+

必填

说明

+

说明

callback

+

callback

AsyncCallback<boolean>

+

AsyncCallback<boolean>

是

+

是

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

-

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

+

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

+

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

类型

+ + - - - @@ -205,11 +170,9 @@ isScreenOn\(\): Promise 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 index bc03638eabe27e9e625971591719987403d9a23f..818806a4c18af6a9e9e4265b1609b00fdc403e8b 100644 --- a/zh-cn/application-dev/js-reference/apis/js-apis-process.md +++ b/zh-cn/application-dev/js-reference/apis/js-apis-process.md @@ -1,201 +1,180 @@ -# 获取进程相关的信息 - -- [导入模块](#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'; ``` -## 权限 +## 权限 无 -## 属性 +## 属性 - -

类型

说明

+

说明

Promise<boolean>

+

Promise<boolean>

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

+

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

名称

+ + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

类型

+

类型

可读

+

可读

可写

+

可写

说明

+

说明

getEgid

+

egid

number

+

number

是

+

是

否

+

否

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

+

获取进程的有效组标识。

getEuid

+

euid

number

+

number

是

+

是

否

+

否

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

+

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

getGid

+

gid

number

+

number

是

+

是

否

+

否

获取进程的数字组标识。

+

获取进程的组标识。

getUid

+

uid

number

+

number

是

+

是

否

+

否

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

+

获取进程的用户标识。

getGroups

+

groups

number[]

+

number[]

是

+

是

否

+

否

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

+

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

getPid

+

pid

number

+

number

是

+

是

否

+

否

获取当前进程的pid。

+

获取当前进程的pid。

getPpid

+

ppid

number

+

number

是

+

是

否

+

否

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

+

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

名称

+ + - - - - - - - - - - - - - - - - - - - - - - - -

名称

类型

+

类型

可读

+

可读

可写

+

可写

说明

+

说明

pid

+

pid

number

+

number

是

+

是

否

+

否

返回子进程的pid。

+

子进程的pid。

ppid

+

ppid

number

+

number

是

+

是

否

+

否

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

+

子进程的父进程的pid。

exitCode

+

exitCode

number

+

number

是

+

是

否

+

否

返回子进程的退出码。

+

子进程的退出码。

killed

+

killed

boolean

+

boolean

是

+

是

否

+

否

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

+

父进程给子进程发信号是否成功。
-### wait +### wait wait\(\): Promise @@ -203,16 +182,16 @@ wait\(\): Promise - 返回值： - -

类型

+ + - - - @@ -230,7 +209,7 @@ wait\(\): Promise ``` -### getOutput +### getOutput getOutput\(\): Promise @@ -238,16 +217,16 @@ getOutput\(\): Promise - 返回值： - -

类型

说明

+

说明

Promise<number>

+

Promise<number>

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

+

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

类型

+ + - - - @@ -265,7 +244,7 @@ getOutput\(\): Promise ``` -### getErrorOutput +### getErrorOutput getErrorOutput\(\): Promise @@ -273,16 +252,16 @@ getErrorOutput函数用来获取子进程的标准错误输出。 - 返回值： - -

类型

说明

+

说明

Promise<Uint8Array>

+

Promise<Uint8Array>

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

+

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

类型

+ + - - - @@ -300,7 +279,7 @@ getErrorOutput函数用来获取子进程的标准错误输出。 ``` -### close +### close close\(\): void @@ -315,32 +294,32 @@ close\(\): void ``` -### kill +### kill kill\(signal: number | string\): void -kill函数用来发送信号给子进程。 +kill函数用来发送信号给子进程，结束指定进程。 - 参数： - -

类型

说明

+

说明

Promise<Uint8Array>

+

Promise<Uint8Array>

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

+

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

参数名

+ + - - - - - - - @@ -355,7 +334,7 @@ kill函数用来发送信号给子进程。 ``` -## process.runCmd +## process.runCmd runCmd\(command: string, options?: \{ timeout : number, killSignal ：number | string, maxBuffer : number \}\) : ChildProcess @@ -363,33 +342,33 @@ runCmd\(command: string, options?: \{ timeout : number, killSignal ：number | s - 参数： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

signal

+

signal

number | string

+

number | string

是

+

是

数字或字符串。

+

数字或字符串。

参数名

+ + - - - - - - - - - - - @@ -397,42 +376,42 @@ runCmd\(command: string, options?: \{ timeout : number, killSignal ：number | s **表 1** options - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

command

+

command

string

+

string

是

+

是

shell命令。

+

shell命令。

options

+

options

Object

+

Object

否

+

否

相关选项参数。

+

相关选项参数。

名称

+ + - - - - - - - - - - - - - - - @@ -440,16 +419,16 @@ runCmd\(command: string, options?: \{ timeout : number, killSignal ：number | s - 返回值： - -

名称

参数类型

+

参数类型

必填

+

必填

说明

+

说明

timeout

+

timeout

number

+

number

否

+

否

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

+

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

killSignal

+

killSignal

number | string

+

number | string

否

+

否

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

+

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

maxBuffer

+

maxBuffer

number

+

number

否

+

否

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

+

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

类型

+ + - - - @@ -467,7 +446,7 @@ runCmd\(command: string, options?: \{ timeout : number, killSignal ：number | s ``` -## process.abort +## process.abort abort\(\): void @@ -481,7 +460,7 @@ abort\(\): void ``` -## process.on +## process.on on\(type: string, listener: EventListener\): void @@ -489,33 +468,33 @@ on\(type: string, listener: EventListener\): void - 参数： - -

类型

说明

+

说明

ChildProcess

+

ChildProcess

子进程对象。

+

子进程对象。

参数名

+ + - - - - - - - - - - - @@ -523,16 +502,17 @@ on\(type: string, listener: EventListener\): void **表 2** EventListener - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

string

+

string

是

+

是

存储事件的type。

+

存储事件的type。

listener

+

listener

EventListener

+

EventListener

是

+

是

回调的事件。

+

回调的事件。

名称

+ + - - + -

名称

说明

+

说明

EventListener = (evt: Object) => void

+

EventListener = (evt: Object) => void

+

用户存储的事件。

  
@@ -542,12 +522,12 @@ on\(type: string, listener: EventListener\): void ``` import process from '@ohos.process'; process.on("data", (e)=>{ - console.log("data callback); + console.log("data callback"); }) ``` -## process.off +## process.off off\(type: string\): boolean @@ -555,24 +535,24 @@ off\(type: string\): boolean - 参数： - -

参数名

+ + - - - - - - - @@ -580,16 +560,16 @@ off\(type: string\): boolean - 返回值： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

string

+

string

是

+

是

删除事件的type。

+

删除事件的type。

类型

+ + - - - @@ -600,13 +580,13 @@ off\(type: string\): boolean ``` import process from '@ohos.process'; process.on("data", (e)=>{ - console.log("data callback); + console.log("data callback"); }) var result = process.off("data"); ``` -## process.exit +## process.exit exit\(code: number\): void @@ -614,24 +594,24 @@ exit\(code: number\): void - 参数： - -

类型

说明

+

说明

boolean

+

boolean

事件是否删除成功。

+

事件是否删除成功。

参数名

+ + - - - - - - - @@ -645,7 +625,7 @@ exit\(code: number\): void ``` -## process.cwd +## process.cwd cwd\(\): string @@ -659,7 +639,7 @@ cwd\(\): string ``` -## process.chdir +## process.chdir chdir\(dir: string\): void @@ -667,24 +647,24 @@ chdir\(dir: string\): void - 参数： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

code

+

code

number

+

number

是

+

是

进程的退出码。

+

进程的退出码。

参数名

+ + - - - - - - - @@ -698,7 +678,7 @@ chdir\(dir: string\): void ``` -## process.uptime +## process.uptime uptime\(\): number @@ -706,16 +686,16 @@ uptime\(\): number - 返回值： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

dir

+

dir

string

+

string

是

+

是

路径。

+

路径。

类型

+ + - - - @@ -729,41 +709,41 @@ uptime\(\): number ``` -## process.kill +## process.kill kill\(pid: number，signal: number \): boolean -用该方法发送signal到指定的进程。 +用该方法发送signal到指定的进程，结束指定进程。 - 参数： - -

类型

说明

+

说明

number

+

number

当前系统已运行的秒数。

+

当前系统已运行的秒数。

参数名

+ + - - - - - - - - - - - @@ -771,16 +751,16 @@ kill\(pid: number，signal: number \): boolean - 返回值： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

pid

+

pid

number

+

number

是

+

是

进程的id。

+

进程的id。

signal

+

signal

number

+

number

是

+

是

发送的信号。

+

发送的信号。

类型

+ + - - - @@ -790,7 +770,7 @@ kill\(pid: number，signal: number \): boolean ``` import process from '@ohos.process' - var pres = process.getPid + var pres = process.pid var result = that.kill(pres, 28) ``` diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-radio.md b/zh-cn/application-dev/js-reference/apis/js-apis-radio.md index 2136539f9fe2e140accb65769d75c6255e787ae0..5d2a244e8c2fc2453405c8a41b765b0ab525681a 100644 --- a/zh-cn/application-dev/js-reference/apis/js-apis-radio.md +++ b/zh-cn/application-dev/js-reference/apis/js-apis-radio.md @@ -1,27 +1,5 @@ # 网络搜索 -- [导入模块](#导入模块) -- [radio.getRadioTech](#radio.getRadioTech-callback) -- [radio.getRadioTech](#radio.getRadioTech-promise) -- [radio.getNetworkState](#radio.getNetworkState-callback1) -- [radio.getNetworkState](#radio.getNetworkState-callback2) -- [radio.getNetworkState](#radio.getNetworkState-promise) -- [radio.getNetworkSelectionMode](#radio.getNetworkSelectionMode-callback) -- [radio.getNetworkSelectionMode](#radio.getNetworkSelectionMode-promise) -- [radio.getISOCountryCodeForNetwork7+](#radio.getISOCountryCodeForNetwork-callback) -- [radio.getISOCountryCodeForNetwork7+](#radio.getISOCountryCodeForNetwork-promise) -- [radio.getSignalInformation](#radio.getSignalInformation-callback) -- [radio.getSignalInformation](#radio.getSignalInformation-promise) -- [radio.isRadioOn7+](#radio.isRadioOn-callback) -- [radio.isRadioOn7+](#radio.isRadioOn-promise) -- [RadioTechnology](#RadioTechnology) -- [SignalInformation](#SignalInformation) -- [NetworkType](#NetworkType) -- [NetworkState](#NetworkState) -- [RegState](#RegState) -- [NsaState](#NsaState) -- [NetworkSelectionMode](#NetworkSelectionMode) - >**说明：** > >- 从 API Version 6 开始支持。 @@ -157,8 +135,8 @@ getNetworkState\(slotId?: number\): Promise - 返回值 | 类型 | 说明 | - | ---------------------------------------- | --------------------------- | - | Promise\<[NetworkState](#NetworkState)\> | 以Promise形式返回网络状态。 | + | ---------------------------------------- | --------------------------- | + | Promise\<[NetworkState](#NetworkState)\> | 以Promise形式返回网络状态。 | - 示例 diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-recorder.md b/zh-cn/application-dev/js-reference/apis/js-apis-recorder.md new file mode 100644 index 0000000000000000000000000000000000000000..9dbfb5c7539a7322cb9b7258494e7fe6264d0142 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-recorder.md @@ -0,0 +1,478 @@ +# 音频录制 + +## 导入模块 + +``` +import media from '@ohos.multimedia.media'; +``` + +## 权限 + +无 + +## createAudioRecorder\(\): AudioRecorder + +创建音频录制的实例来控制音频的录制。 + +- 参数： + + 无 + +- 返回值 + + +

类型

说明

+

说明

boolean

+

boolean

信号是否发送成功。

+

信号是否发送成功。
+ + + + + + + +

类型

+

说明

+

AudioRecorder

+

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

+
+ +- 示例 + +``` +var audiorecorder = media.createAudioRecorder(); +``` + +## AudioRecorder + +音频录制管理类，用于录制音频媒体。在调用AudioRecorder的方法前，需要先通过[createAudioRecorder\(\)](#section582314017253)构建一个AudioRecorder实例。 + +### prepare\(config: AudioRecorderConfig\): void + +录音准备。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

config

+

AudioRecorderConfig

+

是

+

配置录音的相关参数，包括音频输出URI、编码格式、采样率、声道数等。

+
+ + +- 返回值： + + 无 + +- 示例： + + ``` + 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', + } + audiorecorder.prepare(audioRecorderConfig) + ``` + + +## start\(\): void + +开始录音。 + +- 参数： + + 无 + +- 返回值： + + 无 + +- 示例： + + ``` + audiorecorder.start(); + ``` + + +## stop\(\): void + +停止录音。 + +- 参数： + + 无 + + +- 返回值： + + 无 + +- 示例： + + ``` + audiorecorder.stop(); + ``` + + +## release\(\): void + +释放录音资源。 + +- 参数： + + 无 + +- 返回值： + + 无 + +- 示例： + + ``` + audiorecorder.release(); + ``` + + +## reset\(\): void + +重置录音。 + +进行重置录音之前，需要先调用stop\(\)停止录音。重置录音之后，需要调用prepare\(\)设置录音配置项，才能再次进行录音。 + +- 参数： + + 无 + +- 返回值： + + 无 + +- 示例： + + ``` + audiorecorder.reset(); + ``` + + +## on\(type: string, callback: \(\) =\> void\): void + +开始订阅音频录制事件。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

string

+

是

+

录制事件回调类型，支持的事件包括：'prepare' | 'start' | 'stop' | 'release' | 'reset'。

+
  • 'prepare' ：音频录制准备完成后，触发该事件。
  • 'start' ：音频录制开始后，触发该事件。
  • 'stop' ：音频录制停止后，触发该事件。
  • 'release' ：音频录制相关资源释放后，触发该事件。
  • 'reset'：音频录制重置后，触发该事件。
+

callback

+

function

+

是

+

录制事件回调方法。

+
+ +- 返回值： + + 无 + +- 示例： + + ``` + audiorecorder.on('prepare', () => { + console.log('Preparation succeeded.'); + audiorecorder.start(); + }); + ``` + + +## on\(type: string, callback: ErrorCallback\): void + +开始订阅音频录制错误事件。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

string

+

是

+

录制错误事件回调类型'error'。

+
  • 'error'：音频录制过程中发生错误，触发该事件。
+

callback

+

ErrorCallback

+

是

+

录制错误事件回调方法。

+
+ +- 返回值： + + 无 + + +### 事件 + +AudioRecorder支持订阅以下事件。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

prepare

+

-

+

音频录制准备完成后，触发该事件。

+

start

+

-

+

音频录制开始后，触发该事件。

+

stop

+

-

+

音频录制停止后，触发该事件。

+

release

+

-

+

音频录制相关资源释放后，触发该事件。

+

reset

+

-

+

音频录制重置后，触发该事件。

+

error

+

callback

+

音频录制过程中发生错误，触发该事件。

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

参数名

+

类型

+

说明

+

callback

+

ErrorCallback

+

错误事件的回调函数。

+
+ +## AudioRecorderConfig + +表示音频的录音配置。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

必填

+

说明

+

audioEncoder

+

AudioEncoder

+

否

+

音频编码格式，默认设置为AAC_LC。

+

audioEncodeBitRate

+

number

+

否

+

音频编码比特率，默认值为48000。

+

audioSampleRate

+

number

+

否

+

音频采集采样率，默认值为48000。

+

numberOfChannels

+

number

+

否

+

音频采集声道数，默认值为2。

+

format

+

AudioOutputFormat

+

否

+

音量输出封装格式，默认设置为MPEG_4。

+

uri

+

string

+

是

+

音频输出URI。支持：

+
  1. 文件的绝对路径：file:///data/data/ohos.xxx.xxx/cache/test.mp4
  2. 文件的fd路径：file://1 (fd number)

    +
+
+ +## AudioEncoder + +表示音频编码格式的枚举。 + + + + + + + + + + + + +

名称

+

默认值

+

说明

+

AAC_LC

+

3

+

AAC-LC（Advanced Audio Coding Low Complexity）编码格式。

+
+ +## AudioOutputFormat + +表示音频封装格式的枚举。 + + + + + + + + + + + + + + + + +

名称

+

默认值

+

说明

+

MPEG_4

+

2

+

封装为MPEG-4格式。

+

AAC_ADTS

+

6

+

封装为ADTS（Audio Data Transport Stream）格式，是AAC音频的传输流格式。

+
+ diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-resource-manager.md b/zh-cn/application-dev/js-reference/apis/js-apis-resource-manager.md new file mode 100644 index 0000000000000000000000000000000000000000..886030e18e0ccb83c57400385a0acbc6867924a1 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-resource-manager.md @@ -0,0 +1,1213 @@ +# 资源管理 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从 API Version 7 开始支持。 + +## 导入模块 + +``` +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-resource.md b/zh-cn/application-dev/js-reference/apis/js-apis-resource.md new file mode 100644 index 0000000000000000000000000000000000000000..256f3bbd13c9bd5bb56b107918341d1b86a7be9e --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-resource.md @@ -0,0 +1,9 @@ +# 资源管理 + +- **[资源管理](js-apis-resource-manager.md)** + +- **[国际化（I18n）](js-apis-i18n.md)** + +- **[国际化（Intl）](js-apis-intl.md)** + + 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 deleted file mode 100644 index d2efacc991c6f3809b938f6b9fb0beea724eae9c..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/apis/js-apis-resourcemanage.md +++ /dev/null @@ -1,1246 +0,0 @@ -# 资源管理 - -- [导入模块](#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 index f4dc09124bb743684a86359b894f4b918675ff11..6da949f38aca8b89218a7db72924e950fee7318d 100644 --- a/zh-cn/application-dev/js-reference/apis/js-apis-runninglock.md +++ b/zh-cn/application-dev/js-reference/apis/js-apis-runninglock.md @@ -1,62 +1,49 @@ -# 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) - +# Runninglock锁 >![](../../public_sys-resources/icon-note.gif) **说明：** >从 API Version 7 开始支持。 -## 导入模块 +## 导入模块 ``` -import runninglock from '@runninglock'; +import runninglock from '@ohos.runningLock'; ``` -## 权限 +## 权限 申请、使用锁的权限：ohos.permission.RUNNING\_LOCK -## RunningLockType +## RunningLockType -Runninglock锁的类型。 +RunningLock锁的类型。 - -

名称

+ + - - - - - - - -

名称

默认值

+

默认值

描述

+

描述

BACKGROUND

+

BACKGROUND

1

+

1

阻止系统休眠的锁。

+

阻止系统休眠的锁。

PROXIMITY_SCREEN_CONTROL

+

PROXIMITY_SCREEN_CONTROL

2

+

2

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

+

通过接近或者远离状态来控制亮灭屏的锁。
-## runninglock.isRunningLockTypeSupported +## isRunningLockTypeSupported isRunningLockTypeSupported\(type: RunningLockType, callback: AsyncCallback\): void @@ -64,34 +51,34 @@ isRunningLockTypeSupported\(type: RunningLockType, callback: AsyncCallback -

参数名

+ + - - - - - - - - - - - @@ -103,16 +90,14 @@ isRunningLockTypeSupported\(type: RunningLockType, callback: AsyncCallback { if (typeof error === "undefined") { console.info('BACKGROUND support status is ' + supported); - done(); } else { console.log('error: ' + error); - done(); } }) ``` -## runninglock.isRunningLockTypeSupported +## isRunningLockTypeSupported isRunningLockTypeSupported\(type: RunningLockType\): Promise @@ -120,24 +105,24 @@ isRunningLockTypeSupported\(type: RunningLockType\): Promise - 参数： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

RunningLockType

+

RunningLockType

是

+

是

需要查询的锁的类型。

+

需要查询的锁的类型。

callback

+

callback

AsyncCallback<boolean>

+

AsyncCallback<boolean>

是

+

是

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

-

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

+

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

+

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

参数名

+ + - - - - - - - @@ -145,16 +130,16 @@ isRunningLockTypeSupported\(type: RunningLockType\): Promise - 返回值： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

RunningLockType

+

RunningLockType

是

+

是

需要查询的锁的类型。

+

需要查询的锁的类型。

类型

+ + - - - @@ -163,62 +148,60 @@ isRunningLockTypeSupported\(type: RunningLockType\): Promise - 示例： ``` - runninglock.isRunningLockTypeSupported(runninglock.RunningLockType.PROXIMITY_SCREEN_CONTROL) + 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 createRunningLock\(name: string, type: RunningLockType, callback: AsyncCallback\): void -创建Runninglock锁。 +创建RunningLock锁。 - 参数： - -

类型

说明

+

说明

Promise<boolean>

+

Promise<boolean>

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

+

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

参数名

+ + - - - - - - - - - - - - - - - @@ -234,16 +217,14 @@ createRunningLock\(name: string, type: RunningLockType, callback: AsyncCallback< 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 createRunningLock\(name: string, type: RunningLockType\): Promise @@ -251,33 +232,33 @@ createRunningLock\(name: string, type: RunningLockType\): Promise - 参数： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

name

+

name

string

+

string

是

+

是

锁的名字。

+

锁的名字。

type

+

type

RunningLockType

+

RunningLockType

是

+

是

要创建的锁的类型。

+

要创建的锁的类型。

callback

+

callback

AsyncCallback<RunningLock>

+

AsyncCallback<RunningLock>

是

+

是

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

+

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

参数名

+ + - - - - - - - - - - - @@ -285,16 +266,16 @@ createRunningLock\(name: string, type: RunningLockType\): Promise - 返回值： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

name

+

name

string

+

string

是

+

是

锁的名字。

+

锁的名字。

type

+

type

RunningLockType

+

RunningLockType

是

+

是

要创建的锁的类型。

+

要创建的锁的类型。

类型

+ + - - - @@ -306,20 +287,18 @@ createRunningLock\(name: string, type: RunningLockType\): Promise 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 +## RunningLock 阻止系统休眠的锁。 -### lock +### lock lock\(timeout: number\): void @@ -327,24 +306,24 @@ lock\(timeout: number\): void - 参数： - -

类型

说明

+

说明

Promise<RunningLock>

+

Promise<RunningLock>

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

+

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

参数名

+ + - - - - - - - @@ -353,7 +332,7 @@ lock\(timeout: number\): void - 示例： ``` - runninglock.createRunningLock("running_lock_test", runninglock.RunningLockType.BACKGROUND) + runningLock.createRunningLock("running_lock_test", runningLock.RunningLockType.BACKGROUND) .then(runningLock => { runningLock.lock(100) console.info('create runningLock success') @@ -364,7 +343,7 @@ lock\(timeout: number\): void ``` -### unlock +### unlock unlock\(\): void @@ -373,7 +352,7 @@ unlock\(\): void - 示例： ``` - runninglock.createRunningLock("running_lock_test", runninglock.RunningLockType.BACKGROUND) + runningLock.createRunningLock("running_lock_test", runningLock.RunningLockType.BACKGROUND) .then(runningLock => { runningLock.unlock() console.info('unLock runningLock success') @@ -384,7 +363,7 @@ unlock\(\): void ``` -### isUsed +### isUsed isUsed\(\): boolean @@ -392,16 +371,16 @@ isUsed\(\): boolean - 返回值： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

timeout

+

timeout

number

+

number

否

+

否

锁定和持有Runninglock的时长。

+

锁定和持有RunningLock的时长。

类型

+ + - - - @@ -410,7 +389,7 @@ isUsed\(\): boolean - 示例： ``` - runninglock.createRunningLock("running_lock_test", runninglock.RunningLockType.BACKGROUND) + runningLock.createRunningLock("running_lock_test", runningLock.RunningLockType.BACKGROUND) .then(runningLock => { var used = runningLock.isUsed() console.info('runningLock used status: ' + used) 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 index 2dd3a5b801cb830d19274714381f4a82a4e0277f..7ad6e15939e45b23e20b6d92fdd7777fd0b948fa 100644 --- a/zh-cn/application-dev/js-reference/apis/js-apis-sensor.md +++ b/zh-cn/application-dev/js-reference/apis/js-apis-sensor.md @@ -1,124 +1,15 @@ -# 传感器 - -- [导入模块](#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 开始支持。 +>从API Version 7 开始支持。 -## 导入模块 +## 导入模块 ``` import sensor from '@ohos.sensor'; ``` -## 权限列表 +## 权限列表 计步器：ohos.permission.ACTIVITY\_MOTION @@ -126,7 +17,7 @@ import sensor from '@ohos.sensor'; 加速度：ohos.permission.ACCELEROMETER -## sensor.on +## sensor.on\(SensorType.SENSOR\_TYPE\_ID\_ACCELEROMETER\) on\(type: SensorType.SENSOR\_TYPE\_ID\_ACCELEROMETER, callback: AsyncCallback,options?: Options\): void @@ -134,42 +25,42 @@ on\(type: SensorType.SENSOR\_TYPE\_ID\_ACCELEROMETER, callback: AsyncCallback -

类型

说明

+

说明

boolean

+

boolean

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

+

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

参数名

+ + - - - - - - - - - - - - - - - @@ -192,7 +83,7 @@ sensor.on(sensor.SensorType.SENSOR_TYPE_ID_ACCELEROMETER, function(error, data) ); ``` -## sensor.on +## sensor.on\(SensorType.SENSOR\_TYPE\_ID\_LINEAR\_ACCELERATION\) on\(type:SensorType.SENSOR\_TYPE\_ID\_LINEAR\_ACCELERATION,callback:AsyncCallback, options?: Options\): void @@ -200,42 +91,42 @@ on\(type:SensorType.SENSOR\_TYPE\_ID\_LINEAR\_ACCELERATION,callback:AsyncCallbac **参数：** - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

SensorType

+

SensorType

是

+

是

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

+

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

callback

+

callback

AsyncCallback<AccelerometerResponse>

+

AsyncCallback<AccelerometerResponse>

是

+

是

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

+

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

Options

+

Options

options

+

options

否

+

否

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

+

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

参数名

+ + - - - - - - - - - - - - - - - @@ -258,7 +149,7 @@ sensor.on(sensor.SensorType.SENSOR_TYPE_ID_LINEAR_ACCELERATION, function(error, ); ``` -## sensor.on +## sensor.on\(SensorType.SENSOR\_TYPE\_ID\_ACCELEROMETER\_UNCALIBRATED\) on\(type:SensorType.SENSOR\_TYPE\_ID\_ACCELEROMETER\_UNCALIBRATED,callback:AsyncCallback, options?: Options\): void @@ -266,42 +157,42 @@ on\(type:SensorType.SENSOR\_TYPE\_ID\_ACCELEROMETER\_UNCALIBRATED,callback:Async **参数**： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

SensorType

+

SensorType

是

+

是

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

+

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

callback

+

callback

AsyncCallback<LinearAccelerometerResponse>

+

AsyncCallback<LinearAccelerometerResponse>

是

+

是

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

+

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

Options

+

Options

options

+

options

否

+

否

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

+

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

参数名

+ + - - - - - - - - - - - - - - - @@ -328,7 +219,7 @@ sensor.on(sensor.SensorType.SENSOR_TYPE_ID_ACCELEROMETER_UNCALIBRATED, function( ); ``` -## sensor.on +## sensor.on\(SensorType.SENSOR\_TYPE\_ID\_GRAVITY\) on\(type: SensorType.SENSOR\_TYPE\_ID\_GRAVITY, callback: AsyncCallback,options?: Options\): void @@ -336,42 +227,42 @@ on\(type: SensorType.SENSOR\_TYPE\_ID\_GRAVITY, callback: AsyncCallback -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

SensorType

+

SensorType

是

+

是

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

+

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

callback

+

callback

AsyncCallback<AccelerometerUncalibratedResponse>

+

AsyncCallback<AccelerometerUncalibratedResponse>

是

+

是

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

+

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

Options

+

Options

options

+

options

否

+

否

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

+

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

参数名

+ + - - - - - - - - - - - - - - - @@ -394,7 +285,7 @@ sensor.on(sensor.SensorType.SENSOR_TYPE_ID_GRAVITY, function(error, data) { ); ``` -## sensor.on +## sensor.on\(SensorType.SENSOR\_TYPE\_ID\_GYROSCOPE\) on\(type: SensorType.SENSOR\_TYPE\_ID\_GYROSCOPE, callback: AsyncCallback, options?: Options\): void @@ -402,42 +293,42 @@ on\(type: SensorType.SENSOR\_TYPE\_ID\_GYROSCOPE, callback: AsyncCallback -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

SensorType

+

SensorType

是

+

是

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

+

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

callback

+

callback

AsyncCallback<GravityResponse>

+

AsyncCallback<GravityResponse>

是

+

是

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

+

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

Options

+

Options

options

+

options

否

+

否

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

+

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

参数名

+ + - - - - - - - - - - - - - - - @@ -460,7 +351,7 @@ sensor.on(sensor.SensorType.SENSOR_TYPE_ID_GYROSCOPE, function(error, data) { ); ``` -## sensor.on +## sensor.on\(SensorType.SENSOR\_TYPE\_ID\_GYROSCOPE\_UNCALIBRATED\) on\(type:SensorType.SENSOR\_TYPE\_ID\_GYROSCOPE\_UNCALIBRATED,callback:AsyncCallback, options?: Options\): void @@ -468,42 +359,42 @@ on\(type:SensorType.SENSOR\_TYPE\_ID\_GYROSCOPE\_UNCALIBRATED,callback:AsyncCall **参数：** - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

SensorType

+

SensorType

是

+

是

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

+

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

callback

+

callback

AsyncCallback<GyroscopeResponse>

+

AsyncCallback<GyroscopeResponse>

是

+

是

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

+

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

Options

+

Options

options

+

options

否

+

否

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

+

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

参数名

+ + - - - - - - - - - - - - - - - @@ -530,7 +421,7 @@ sensor.on(sensor.SensorType.SENSOR_TYPE_ID_GYROSCOPE_UNCALIBRATED, function(erro ); ``` -## sensor.on +## sensor.on\(SensorType.SENSOR\_TYPE\_ID\_SIGNIFICANT\_MOTION\) on\(type: SensorType.SENSOR\_TYPE\_ID\_SIGNIFICANT\_MOTION, callback: AsyncCallback, options?: Options\): void @@ -538,42 +429,42 @@ on\(type: SensorType.SENSOR\_TYPE\_ID\_SIGNIFICANT\_MOTION, callback: AsyncCallb **参数：** - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

SensorType

+

SensorType

是

+

是

要订阅的未校准陀螺仪传感器类型为SENSOR_TYPE_ID_GYROSCOPE_UNCALIBRATED。

+

要订阅的未校准陀螺仪传感器类型为SENSOR_TYPE_ID_GYROSCOPE_UNCALIBRATED。

callback

+

callback

AsyncCallback<GyroscopeUncalibratedResponse>

+

AsyncCallback<GyroscopeUncalibratedResponse>

是

+

是

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

+

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

Options

+

Options

options

+

options

否

+

否

可选参数列表，设置上报频率。

+

可选参数列表，设置上报频率。

参数名

+ + - - - - - - - - - - - - - - - @@ -593,7 +484,7 @@ sensor.on(sensor.SensorType.SENSOR_TYPE_ID_SIGNIFICANT_MOTION, function(error, d ); ``` -## sensor.on +## sensor.on\(SensorType.SENSOR\_TYPE\_ID\_PEDOMETER\_DETECTION\) on\(type: SensorType.SENSOR\_TYPE\_ID\_PEDOMETER\_DETECTION, callback: AsyncCallback, options?: Options\): void @@ -601,42 +492,42 @@ on\(type: SensorType.SENSOR\_TYPE\_ID\_PEDOMETER\_DETECTION, callback: AsyncCall **参数：** - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

SensorType

+

SensorType

是

+

是

要订阅的有效运动传感器类型为SENSOR_TYPE_ID_SIGNIFICANT_MOTION。

+

要订阅的有效运动传感器类型为SENSOR_TYPE_ID_SIGNIFICANT_MOTION。

callback

+

callback

AsyncCallback<SignificantMotionResponse>

+

AsyncCallback<SignificantMotionResponse>

是

+

是

注册有效运动传感器的回调函数，上报的数据类型为SignificantMotionResponse。

+

注册有效运动传感器的回调函数，上报的数据类型为SignificantMotionResponse。

Options

+

Options

options

+

options

否

+

否

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

+

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

参数名

+ + - - - - - - - - - - - - - - - @@ -656,7 +547,7 @@ sensor.on(sensor.SensorType.SENSOR_TYPE_ID_PEDOMETER_DETECTION, function(error, ); ``` -## sensor.on +## sensor.on\(SensorType.SENSOR\_TYPE\_ID\_PEDOMETER\) on\(type: SensorType.SENSOR\_TYPE\_ID\_PEDOMETER, callback: AsyncCallback, options?: Options\): void @@ -664,42 +555,42 @@ on\(type: SensorType.SENSOR\_TYPE\_ID\_PEDOMETER, callback: AsyncCallback -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

SensorType

+

SensorType

是

+

是

要订阅的计步检测传感器类型为SENSOR_TYPE_ID_PEDOMETER_DETECTION。

+

要订阅的计步检测传感器类型为SENSOR_TYPE_ID_PEDOMETER_DETECTION。

callback

+

callback

AsyncCallback<PedometerDetectResponse>

+

AsyncCallback<PedometerDetectResponse>

是

+

是

注册计步检测传感器的回调函数，上报的数据类型为PedometerDetectResponse。

+

注册计步检测传感器的回调函数，上报的数据类型为PedometerDetectResponse。

Options

+

Options

options

+

options

否

+

否

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

+

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

参数名

+ + - - - - - - - - - - - - - - - @@ -720,7 +611,7 @@ sensor.on(sensor.SensorType.SENSOR_TYPE_ID_PEDOMETER, function(error, data) { ); ``` -## sensor.on +## sensor.on\(SensorType.SENSOR\_TYPE\_ID\_AMBIENT\_TEMPERATURE\) on\(type:SensorType.SENSOR\_TYPE\_ID\_AMBIENT\_TEMPERATURE,callback:AsyncCallback, options?: Options\): void @@ -728,42 +619,42 @@ on\(type:SensorType.SENSOR\_TYPE\_ID\_AMBIENT\_TEMPERATURE,callback:AsyncCallbac **参数：** - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

SensorType

+

SensorType

是

+

是

要订阅的计步传感器类型为SENSOR_TYPE_ID_PEDOMETER。

+

要订阅的计步传感器类型为SENSOR_TYPE_ID_PEDOMETER。

callback

+

callback

AsyncCallback<PedometerResponse>

+

AsyncCallback<PedometerResponse>

是

+

是

注册计步传感器的回调函数，上报的数据类型为PedometerResponse。

+

注册计步传感器的回调函数，上报的数据类型为PedometerResponse。

Options

+

Options

options

+

options

否

+

否

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

+

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

参数名

+ + - - - - - - - - - - - - - - - @@ -784,7 +675,7 @@ sensor.on(sensor.SensorType.SENSOR_TYPE_ID_AMBIENT_TEMPERATURE, function(error, ); ``` -## sensor.on +## sensor.on\(SensorType.SENSOR\_TYPE\_ID\_MAGNETIC\_FIELD\) on\(type: SensorType.SENSOR\_TYPE\_ID\_MAGNETIC\_FIELD, callback: AsyncCallback,options?: Options\): void @@ -792,42 +683,42 @@ on\(type: SensorType.SENSOR\_TYPE\_ID\_MAGNETIC\_FIELD, callback: AsyncCallback< **参数：** - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

SensorType

+

SensorType

是

+

是

要订阅的环境温度传感器类型为SENSOR_TYPE_ID_AMBIENT_TEMPERATURE。

+

要订阅的环境温度传感器类型为SENSOR_TYPE_ID_AMBIENT_TEMPERATURE。

callback

+

callback

AsyncCallback<AmbientTemperatureResponse>

+

AsyncCallback<AmbientTemperatureResponse>

是

+

是

注册环境温度传感器的回调函数，上报的数据类型为AmbientTemperatureResponse。

+

注册环境温度传感器的回调函数，上报的数据类型为AmbientTemperatureResponse。

Options

+

Options

options

+

options

否

+

否

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

+

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

参数名

+ + - - - - - - - - - - - - - - - @@ -850,7 +741,7 @@ sensor.on(sensor.SensorType.SENSOR_TYPE_ID_MAGNETIC_FIELD, function(error, data) ); ``` -## sensor.on +## sensor.on\(SensorType.SENSOR\_TYPE\_ID\_MAGNETIC\_FIELD\_UNCALIBRATED\) on\(type:SensorType.SENSOR\_TYPE\_ID\_MAGNETIC\_FIELD\_UNCALIBRATED,callback:AsyncCallback, options: Options\): void @@ -858,42 +749,42 @@ on\(type:SensorType.SENSOR\_TYPE\_ID\_MAGNETIC\_FIELD\_UNCALIBRATED,callback:Asy **参数：** - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

SensorType

+

SensorType

是

+

是

要订阅的磁场传感器类型为SENSOR_TYPE_ID_MAGNETIC_FIELD。

+

要订阅的磁场传感器类型为SENSOR_TYPE_ID_MAGNETIC_FIELD。

callback

+

callback

AsyncCallback<MagneticFieldResponse>

+

AsyncCallback<MagneticFieldResponse>

是

+

是

注册磁场传感器的回调函数，上报的数据类型为MagneticFieldResponse。

+

注册磁场传感器的回调函数，上报的数据类型为MagneticFieldResponse。

Options

+

Options

options

+

options

否

+

否

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

+

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

参数名

+ + - - - - - - - - - - - - - - - @@ -920,7 +811,7 @@ sensor.on(sensor.SensorType.SENSOR_TYPE_ID_MAGNETIC_FIELD_UNCALIBRATED, function ); ``` -## sensor.on +## sensor.on\(SensorType.SENSOR\_TYPE\_ID\_PROXIMITY\) on\(type: SensorType.SENSOR\_TYPE\_ID\_PROXIMITY, callback: AsyncCallback,options?: Options\): void @@ -928,42 +819,42 @@ on\(type: SensorType.SENSOR\_TYPE\_ID\_PROXIMITY, callback: AsyncCallback -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

SensorType

+

SensorType

是

+

是

要订阅的未校准磁场传感器类型为SENSOR_TYPE_ID_MAGNETIC_FIELD_UNCALIBRATED。

+

要订阅的未校准磁场传感器类型为SENSOR_TYPE_ID_MAGNETIC_FIELD_UNCALIBRATED。

callback

+

callback

AsyncCallback<MagneticFieldUncalibratedResponse>

+

AsyncCallback<MagneticFieldUncalibratedResponse>

是

+

是

注册未校准磁场传感器的回调函数，上报的数据类型为MagneticFieldUncalibratedResponse。

+

注册未校准磁场传感器的回调函数，上报的数据类型为MagneticFieldUncalibratedResponse。

Options

+

Options

options

+

options

否

+

否

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

+

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

参数名

+ + - - - - - - - - - - - - - - - @@ -984,7 +875,7 @@ sensor.on(sensor.SensorType.SENSOR_TYPE_ID_PROXIMITY, function(error, data) { ); ``` -## sensor.on +## sensor.on\(SensorType.SENSOR\_TYPE\_ID\_HUMIDITY\) on\(type: SensorType.SENSOR\_TYPE\_ID\_HUMIDITY, callback: AsyncCallback,options?: Options\): void @@ -992,42 +883,42 @@ on\(type: SensorType.SENSOR\_TYPE\_ID\_HUMIDITY, callback: AsyncCallback -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

SensorType

+

SensorType

是

+

是

要订阅的接近光传感器类型为SENSOR_TYPE_ID_PROXIMITY。

+

要订阅的接近光传感器类型为SENSOR_TYPE_ID_PROXIMITY。

callback

+

callback

AsyncCallback<ProximityResponse>

+

AsyncCallback<ProximityResponse>

是

+

是

注册接近光传感器的回调函数，上报的数据类型为ProximityResponse。

+

注册接近光传感器的回调函数，上报的数据类型为ProximityResponse。

Options

+

Options

options

+

options

否

+

否

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

+

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

参数名

+ + - - - - - - - - - - - - - - - @@ -1048,7 +939,7 @@ sensor.on(sensor.SensorType.SENSOR_TYPE_ID_HUMIDITY, function(error, data) { ); ``` -## sensor.on +## sensor.on\(SensorType.SENSOR\_TYPE\_ID\_BAROMETER\) on\(type: SensorType.SENSOR\_TYPE\_ID\_BAROMETER, callback: AsyncCallback,options?: Options\): void @@ -1056,42 +947,42 @@ on\(type: SensorType.SENSOR\_TYPE\_ID\_BAROMETER, callback: AsyncCallback -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

SensorType

+

SensorType

是

+

是

要订阅的湿度传感器类型为SENSOR_TYPE_ID_HUMIDITY。

+

要订阅的湿度传感器类型为SENSOR_TYPE_ID_HUMIDITY。

callback

+

callback

AsyncCallback<HumidityResponse>

+

AsyncCallback<HumidityResponse>

是

+

是

注册湿度传感器的回调函数，上报的数据类型为HumidityResponse。

+

注册湿度传感器的回调函数，上报的数据类型为HumidityResponse。

Options

+

Options

options

+

options

否

+

否

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

+

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

参数名

+ + - - - - - - - - - - - - - - - @@ -1112,7 +1003,7 @@ sensor.on(sensor.SensorType.SENSOR_TYPE_ID_BAROMETER, function(error, data) { ); ``` -## sensor.on +## sensor.on\(SensorType.SENSOR\_TYPE\_ID\_HALL\) on\(type: SensorType.SENSOR\_TYPE\_ID\_HALL, callback: AsyncCallback, options?: Options\): void @@ -1120,42 +1011,42 @@ on\(type: SensorType.SENSOR\_TYPE\_ID\_HALL, callback: AsyncCallback -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

SensorType

+

SensorType

是

+

是

要订阅的气压计传感器类型为SENSOR_TYPE_ID_BAROMETER。

+

要订阅的气压计传感器类型为SENSOR_TYPE_ID_BAROMETER。

callback

+

callback

AsyncCallback<BarometerResponse>

+

AsyncCallback<BarometerResponse>

是

+

是

注册气压计传感器的回调函数，上报的数据类型为BarometerResponse。

+

注册气压计传感器的回调函数，上报的数据类型为BarometerResponse。

Options

+

Options

options

+

options

否

+

否

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

+

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

参数名

+ + - - - - - - - - - - - - - - - @@ -1176,7 +1067,7 @@ sensor.on(sensor.SensorType.SENSOR_TYPE_ID_HALL, function(error, data) { ); ``` -## sensor.on +## sensor.on\(SensorType.SENSOR\_TYPE\_ID\_AMBIENT\_LIGHT\) on\(type: SensorType.SENSOR\_TYPE\_ID\_AMBIENT\_LIGHT, callback: AsyncCallback, options?: Options\): void @@ -1184,42 +1075,42 @@ on\(type: SensorType.SENSOR\_TYPE\_ID\_AMBIENT\_LIGHT, callback: AsyncCallback -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

SensorType

+

SensorType

是

+

是

要订阅的霍尔传感器类型为SENSOR_TYPE_ID_HALL。

+

要订阅的霍尔传感器类型为SENSOR_TYPE_ID_HALL。

callback

+

callback

AsyncCallback<HallResponse>

+

AsyncCallback<HallResponse>

是

+

是

注册霍尔传感器的回调函数，上报的数据类型为 HallResponse。

+

注册霍尔传感器的回调函数，上报的数据类型为 HallResponse。

Options

+

Options

options

+

options

否

+

否

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

+

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

参数名

+ + - - - - - - - - - - - - - - - @@ -1240,7 +1131,7 @@ sensor.on(sensor.SensorType.SENSOR_TYPE_ID_AMBIENT_LIGHT, function(error, data) ); ``` -## sensor.on +## sensor.on\(SensorType.SENSOR\_TYPE\_ID\_ORIENTATION\) on\(type: SensorType.SENSOR\_TYPE\_ID\_ORIENTATION, callback: AsyncCallback, options?: Options\): void @@ -1248,42 +1139,42 @@ on\(type: SensorType.SENSOR\_TYPE\_ID\_ORIENTATION, callback: AsyncCallback -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

SensorType

+

SensorType

是

+

是

要订阅的环境光传感器类型为SENSOR_TYPE_ID_AMBIENT_LIGHT。

+

要订阅的环境光传感器类型为SENSOR_TYPE_ID_AMBIENT_LIGHT。

callback

+

callback

AsyncCallback<LightResponse>

+

AsyncCallback<LightResponse>

是

+

是

注册环境光传感器的回调函数，上报的数据类型为LightResponse。

+

注册环境光传感器的回调函数，上报的数据类型为LightResponse。

Options

+

Options

options

+

options

否

+

否

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

+

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

参数名

+ + - - - - - - - - - - - - - - - @@ -1306,7 +1197,7 @@ sensor.on(sensor.SensorType.SENSOR_TYPE_ID_ORIENTATION, function(error, data) { ); ``` -## sensor.on +## sensor.on\(SensorType.SENSOR\_TYPE\_ID\_ROTATION\_VECTOR\) on\(type:SensorType.SENSOR\_TYPE\_ID\_ROTATION\_VECTOR,callback:AsyncCallback,options?: Options\): void @@ -1314,42 +1205,42 @@ on\(type:SensorType.SENSOR\_TYPE\_ID\_ROTATION\_VECTOR,callback:AsyncCallback -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

SensorType

+

SensorType

是

+

是

要订阅的方向传感器类型为SENSOR_TYPE_ID_ORIENTATION

+

要订阅的方向传感器类型为SENSOR_TYPE_ID_ORIENTATION

callback

+

callback

AsyncCallback<OrientationResponse>

+

AsyncCallback<OrientationResponse>

是

+

是

注册方向传感器的回调函数，上报的数据类型为OrientationResponse。

+

注册方向传感器的回调函数，上报的数据类型为OrientationResponse。

Options

+

Options

options

+

options

否

+

否

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

+

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

参数名

+ + - - - - - - - - - - - - - - - @@ -1372,7 +1263,7 @@ sensor.on(sensor.SensorType.SENSOR_TYPE_ID_ROTATION_VECTOR, function(error, data ); ``` -## sensor.on +## sensor.on\(SensorType.SENSOR\_TYPE\_ID\_WEAR\_DETECTION\) on\(type: SensorType.SENSOR\_TYPE\_ID\_WEAR\_DETECTION, callback: AsyncCallback,options?: Options\): void @@ -1380,42 +1271,42 @@ on\(type: SensorType.SENSOR\_TYPE\_ID\_WEAR\_DETECTION, callback: AsyncCallback< **参数：** - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

SensorType

+

SensorType

是

+

是

要订阅的旋转矢量传感器类型为SENSOR_TYPE_ID_ROTATION_VECTOR。

+

要订阅的旋转矢量传感器类型为SENSOR_TYPE_ID_ROTATION_VECTOR。

callback

+

callback

AsyncCallback<RotationVectorResponse>

+

AsyncCallback<RotationVectorResponse>

是

+

是

注册旋转矢量传感器的回调函数，上报的数据类型为RotationVectorResponse。

+

注册旋转矢量传感器的回调函数，上报的数据类型为RotationVectorResponse。

Options

+

Options

options

+

options

否

+

否

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

+

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

参数名

+ + - - - - - - - - - - - - - - - @@ -1436,7 +1327,7 @@ sensor.on(sensor.SensorType.SENSOR_TYPE_ID_WEAR_DETECTION, function(error, data) ); ``` -## sensor.once +## sensor.once\(SensorType.SENSOR\_TYPE\_ID\_ACCELEROMETER\) once\(type: SensorType.SENSOR\_TYPE\_ID\_ACCELEROMETER, callback: AsyncCallback\): void @@ -1444,33 +1335,33 @@ once\(type: SensorType.SENSOR\_TYPE\_ID\_ACCELEROMETER, callback: AsyncCallback< **参数：** - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

SensorType

+

SensorType

是

+

是

要订阅的佩戴检测传感器类型为SENSOR_TYPE_ID_WEAR_DETECTION。

+

要订阅的佩戴检测传感器类型为SENSOR_TYPE_ID_WEAR_DETECTION。

callback

+

callback

AsyncCallback<WearDetectionResponse>

+

AsyncCallback<WearDetectionResponse>

是

+

是

注册佩戴检测传感器的回调函数，上报的数据类型为WearDetectionResponse。

+

注册佩戴检测传感器的回调函数，上报的数据类型为WearDetectionResponse。

Options

+

Options

options

+

options

否

+

否

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

+

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

参数名

+ + - - - - - - - - - - - @@ -1492,7 +1383,7 @@ sensor.once(sensor.SensorType.SENSOR_TYPE_ID_ACCELEROMETER, function(error, data ); ``` -## sensor.once +## sensor.once\(SensorType.SENSOR\_TYPE\_ID\_LINEAR\_ACCELERATION\) once\(type:SensorType.SENSOR\_TYPE\_ID\_LINEAR\_ACCELERATION,callback:AsyncCallback\): void @@ -1500,33 +1391,33 @@ once\(type:SensorType.SENSOR\_TYPE\_ID\_LINEAR\_ACCELERATION,callback:AsyncCallb **参数：** - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

SensorType

+

SensorType

是

+

是

加速度传感器类型为SENSOR_TYPE_ID_ACCELEROMETER。

+

加速度传感器类型为SENSOR_TYPE_ID_ACCELEROMETER。

callback

+

callback

AsyncCallback<AccelerometerResponse>

+

AsyncCallback<AccelerometerResponse>

是

+

是

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

+

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

参数名

+ + - - - - - - - - - - - @@ -1548,7 +1439,7 @@ sensor.once(sensor.SensorType.SENSOR_TYPE_ID_LINEAR_ACCELERATION, function(error ); ``` -## sensor.once +## sensor.once\(SensorType.SENSOR\_TYPE\_ID\_ACCELEROMETER\_UNCALIBRATED\) once\(type:SensorType.SENSOR\_TYPE\_ID\_ACCELEROMETER\_UNCALIBRATED,callback:AsyncCallback\): void @@ -1556,33 +1447,33 @@ once\(type:SensorType.SENSOR\_TYPE\_ID\_ACCELEROMETER\_UNCALIBRATED,callback:Asy **参数：** - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

SensorType

+

SensorType

是

+

是

线性加速度传感器类型为SENSOR_TYPE_ID_LINEAR_ACCELERATION。

+

线性加速度传感器类型为SENSOR_TYPE_ID_LINEAR_ACCELERATION。

callback

+

callback

AsyncCallback<LinearAccelerometerResponse>

+

AsyncCallback<LinearAccelerometerResponse>

是

+

是

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

+

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

参数名

+ + - - - - - - - - - - - @@ -1608,7 +1499,7 @@ sensor.once(sensor.SensorType.SENSOR_TYPE_ID_ACCELEROMETER_UNCALIBRATED, functio ); ``` -## sensor.once +## sensor.once\(SensorType.SENSOR\_TYPE\_ID\_GRAVITY\) once\(type: SensorType.SENSOR\_TYPE\_ID\_GRAVITY, callback: AsyncCallback\): void @@ -1616,33 +1507,33 @@ once\(type: SensorType.SENSOR\_TYPE\_ID\_GRAVITY, callback: AsyncCallback -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

SensorType

+

SensorType

是

+

是

未校准加速度传感器类型为SENSOR_TYPE_ID_ACCELEROMETER_UNCALIBRATED。

+

未校准加速度传感器类型为SENSOR_TYPE_ID_ACCELEROMETER_UNCALIBRATED。

callback

+

callback

AsyncCallback<AccelerometerUncalibratedResponse>

+

AsyncCallback<AccelerometerUncalibratedResponse>

是

+

是

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

+

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

参数名

+ + - - - - - - - - - - - @@ -1664,7 +1555,7 @@ sensor.once(sensor.SensorType.SENSOR_TYPE_ID_GRAVITY, function(error, data) { ); ``` -## sensor.once +## sensor.once\(SensorType.SENSOR\_TYPE\_ID\_GYROSCOPE\) once\(type: SensorType.SENSOR\_TYPE\_ID\_GYROSCOPE, callback: AsyncCallback\): void @@ -1672,33 +1563,33 @@ once\(type: SensorType.SENSOR\_TYPE\_ID\_GYROSCOPE, callback: AsyncCallback -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

SensorType

+

SensorType

是

+

是

重力传感器类型为SENSOR_TYPE_ID_GRAVITY。

+

重力传感器类型为SENSOR_TYPE_ID_GRAVITY。

callback

+

callback

AsyncCallback<GravityResponse>

+

AsyncCallback<GravityResponse>

是

+

是

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

+

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

参数名

+ + - - - - - - - - - - - @@ -1720,7 +1611,7 @@ sensor.once(sensor.SensorType.SENSOR_TYPE_ID_GYROSCOPE, function(error, data) { ); ``` -## sensor.once +## sensor.once\(SensorType.SENSOR\_TYPE\_ID\_GYROSCOPE\_UNCALIBRATED\) once\(type:SensorType.SENSOR\_TYPE\_ID\_GYROSCOPE\_UNCALIBRATED,callback:AsyncCallback\): void @@ -1728,33 +1619,33 @@ once\(type:SensorType.SENSOR\_TYPE\_ID\_GYROSCOPE\_UNCALIBRATED,callback:AsyncCa **参数：** - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

SensorType

+

SensorType

是

+

是

陀螺仪传感器类型为SENSOR_TYPE_ID_GYROSCOPE。

+

陀螺仪传感器类型为SENSOR_TYPE_ID_GYROSCOPE。

callback

+

callback

AsyncCallback<GyroscopeResponse>

+

AsyncCallback<GyroscopeResponse>

是

+

是

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

+

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

参数名

+ + - - - - - - - - - - - @@ -1780,7 +1671,7 @@ sensor.once(sensor.SensorType.SENSOR_TYPE_ID_GYROSCOPE_UNCALIBRATED, function(er ); ``` -## sensor.once +## sensor.once\(SensorType.SENSOR\_TYPE\_ID\_SIGNIFICANT\_MOTION\) once\(type: SensorType.SENSOR\_TYPE\_ID\_SIGNIFICANT\_MOTION,callback:AsyncCallback\): void @@ -1788,33 +1679,33 @@ once\(type: SensorType.SENSOR\_TYPE\_ID\_SIGNIFICANT\_MOTION,callback:AsyncCallb **参数：** - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

SensorType

+

SensorType

是

+

是

未校准陀螺仪传感器类型为SENSOR_TYPE_ID_GYROSCOPE_UNCALIBRATED。

+

未校准陀螺仪传感器类型为SENSOR_TYPE_ID_GYROSCOPE_UNCALIBRATED。

callback

+

callback

AsyncCallback<GyroscopeUncalibratedResponse>

+

AsyncCallback<GyroscopeUncalibratedResponse>

是

+

是

注册一次未校准陀螺仪传感器的回调函数，上报的数据类型为GyroscopeUncalibratedResponse。

+

注册一次未校准陀螺仪传感器的回调函数，上报的数据类型为GyroscopeUncalibratedResponse。

参数名

+ + - - - - - - - - - - - @@ -1833,7 +1724,7 @@ sensor.once(sensor.SensorType.SENSOR_TYPE_ID_SIGNIFICANT_MOTION, function(error, ); ``` -## sensor.once +## sensor.once\(SensorType.SENSOR\_TYPE\_ID\_PEDOMETER\_DETECTION\) once\(type:SensorType.SENSOR\_TYPE\_ID\_PEDOMETER\_DETECTION,callback:AsyncCallback\): void @@ -1841,33 +1732,33 @@ once\(type:SensorType.SENSOR\_TYPE\_ID\_PEDOMETER\_DETECTION,callback:AsyncCallb **参数：** - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

SensorType

+

SensorType

是

+

是

有效运动传感器类型为SENSOR_TYPE_ID_SIGNIFICANT_MOTION。

+

有效运动传感器类型为SENSOR_TYPE_ID_SIGNIFICANT_MOTION。

callback

+

callback

AsyncCallback<SignificantMotionResponse>

+

AsyncCallback<SignificantMotionResponse>

是

+

是

注册一次有效运动传感器的回调函数，上报的数据类型为SignificantMotionResponse。

+

注册一次有效运动传感器的回调函数，上报的数据类型为SignificantMotionResponse。

参数名

+ + - - - - - - - - - - - @@ -1886,7 +1777,7 @@ sensor.once(sensor.SensorType.SENSOR_TYPE_ID_PEDOMETER_DETECTION, function(error ); ``` -## sensor.once +## sensor.once\(SensorType.SENSOR\_TYPE\_ID\_PEDOMETER\) once\(type: SensorType.SENSOR\_TYPE\_ID\_PEDOMETER, callback: AsyncCallback\): void @@ -1894,33 +1785,33 @@ once\(type: SensorType.SENSOR\_TYPE\_ID\_PEDOMETER, callback: AsyncCallback -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

SensorType

+

SensorType

是

+

是

计步检测传感器类型为SENSOR_TYPE_ID_PEDOMETER_DETECTION。

+

计步检测传感器类型为SENSOR_TYPE_ID_PEDOMETER_DETECTION。

callback

+

callback

AsyncCallback<PedometerDetectResponse>

+

AsyncCallback<PedometerDetectResponse>

是

+

是

注册一次计步检测传感器的回调函数，上报的数据类型为PedometerDetectResponse。

+

注册一次计步检测传感器的回调函数，上报的数据类型为PedometerDetectResponse。

参数名

+ + - - - - - - - - - - - @@ -1940,7 +1831,7 @@ sensor.once(sensor.SensorType.SENSOR_TYPE_ID_PEDOMETER, function(error, data) { ); ``` -## sensor.once +## sensor.once\(SensorType.SENSOR\_TYPE\_ID\_AMBIENT\_TEMPERATURE\) once\(type:SensorType.SENSOR\_TYPE\_ID\_AMBIENT\_TEMPERATURE,callback:AsyncCallback\): void @@ -1948,33 +1839,33 @@ once\(type:SensorType.SENSOR\_TYPE\_ID\_AMBIENT\_TEMPERATURE,callback:AsyncCallb **参数：** - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

SensorType

+

SensorType

是

+

是

计步传感器类型为SENSOR_TYPE_ID_PEDOMETER。

+

计步传感器类型为SENSOR_TYPE_ID_PEDOMETER。

callback

+

callback

AsyncCallback<PedometerResponse>

+

AsyncCallback<PedometerResponse>

是

+

是

注册一次计步传感器的回调函数，上报的数据类型为PedometerResponse。

+

注册一次计步传感器的回调函数，上报的数据类型为PedometerResponse。

参数名

+ + - - - - - - - - - - - @@ -1994,7 +1885,7 @@ sensor.once(sensor.SensorType.SENSOR_TYPE_ID_AMBIENT_TEMPERATURE, function(error ); ``` -## sensor.once +## sensor.once\(SensorType.SENSOR\_TYPE\_ID\_MAGNETIC\_FIELD\) once\(type: SensorType.SENSOR\_TYPE\_ID\_MAGNETIC\_FIELD, callback: AsyncCallback\): void @@ -2002,33 +1893,33 @@ once\(type: SensorType.SENSOR\_TYPE\_ID\_MAGNETIC\_FIELD, callback: AsyncCallbac **参数：** - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

SensorType

+

SensorType

是

+

是

环境温度传感器类型为SENSOR_TYPE_ID_AMBIENT_TEMPERATURE。

+

环境温度传感器类型为SENSOR_TYPE_ID_AMBIENT_TEMPERATURE。

callback

+

callback

AsyncCallback<AmbientTemperatureResponse>

+

AsyncCallback<AmbientTemperatureResponse>

是

+

是

注册一次环境温度传感器的回调函数，上报的数据类型为AmbientTemperatureResponse。

+

注册一次环境温度传感器的回调函数，上报的数据类型为AmbientTemperatureResponse。

参数名

+ + - - - - - - - - - - - @@ -2050,7 +1941,7 @@ sensor.once(sensor.SensorType.SENSOR_TYPE_ID_MAGNETIC_FIELD, function(error, dat ); ``` -## sensor.once +## sensor.once\(SensorType.SENSOR\_TYPE\_ID\_MAGNETIC\_FIELD\_UNCALIBRATED\) once\(type:SensorType.SENSOR\_TYPE\_ID\_MAGNETIC\_FIELD\_UNCALIBRATED,callback:AsyncCallback\): void @@ -2058,33 +1949,33 @@ once\(type:SensorType.SENSOR\_TYPE\_ID\_MAGNETIC\_FIELD\_UNCALIBRATED,callback:A **参数：** - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

SensorType

+

SensorType

是

+

是

磁场传感器类型为SENSOR_TYPE_ID_MAGNETIC_FIELD。

+

磁场传感器类型为SENSOR_TYPE_ID_MAGNETIC_FIELD。

callback

+

callback

AsyncCallback<MagneticFieldResponse>

+

AsyncCallback<MagneticFieldResponse>

是

+

是

注册一次磁场传感器的回调函数，上报的数据类型为MagneticFieldResponse。

+

注册一次磁场传感器的回调函数，上报的数据类型为MagneticFieldResponse。

参数名

+ + - - - - - - - - - - - @@ -2110,7 +2001,7 @@ sensor.once(sensor.SensorType.SENSOR_TYPE_ID_MAGNETIC_FIELD_UNCALIBRATED, functi ); ``` -## sensor.once +## sensor.once\(SensorType.SENSOR\_TYPE\_ID\_PROXIMITY\) once\(type: SensorType.SENSOR\_TYPE\_ID\_PROXIMITY, callback: AsyncCallback\): void @@ -2118,33 +2009,33 @@ once\(type: SensorType.SENSOR\_TYPE\_ID\_PROXIMITY, callback: AsyncCallback -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

SensorType

+

SensorType

是

+

是

未校准磁场传感器类型为SENSOR_TYPE_ID_MAGNETIC_FIELD_UNCALIBRATED。

+

未校准磁场传感器类型为SENSOR_TYPE_ID_MAGNETIC_FIELD_UNCALIBRATED。

callback

+

callback

AsyncCallback<MagneticFieldUncalibratedResponse>

+

AsyncCallback<MagneticFieldUncalibratedResponse>

是

+

是

注册一次未校准磁场传感器的回调函数，上报的数据类型为MagneticFieldUncalibratedResponse。

+

注册一次未校准磁场传感器的回调函数，上报的数据类型为MagneticFieldUncalibratedResponse。

参数名

+ + - - - - - - - - - - - @@ -2164,7 +2055,7 @@ sensor.once(sensor.SensorType.SENSOR_TYPE_ID_PROXIMITY, function(error, data) { ); ``` -## senor.once +## senor.once\(SensorType.SENSOR\_TYPE\_ID\_HUMIDITY\) once\(type: SensorType.SENSOR\_TYPE\_ID\_HUMIDITY, callback: AsyncCallback\): void @@ -2172,33 +2063,33 @@ once\(type: SensorType.SENSOR\_TYPE\_ID\_HUMIDITY, callback: AsyncCallback -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

SensorType

+

SensorType

是

+

是

接近光传感器类型为SENSOR_TYPE_ID_PROXIMITY。

+

接近光传感器类型为SENSOR_TYPE_ID_PROXIMITY。

callback

+

callback

AsyncCallback<ProximityResponse>

+

AsyncCallback<ProximityResponse>

是

+

是

注册一次接近光传感器的回调函数，上报的数据类型为ProximityResponse。

+

注册一次接近光传感器的回调函数，上报的数据类型为ProximityResponse。

参数名

+ + - - - - - - - - - - - @@ -2218,7 +2109,7 @@ sensor.once(sensor.SensorType.SENSOR_TYPE_ID_HUMIDITY, function(error, data) { ); ``` -## sensor.once +## sensor.once\(SensorType.SENSOR\_TYPE\_ID\_BAROMETER\) once\(type: SensorType.SENSOR\_TYPE\_ID\_BAROMETER, callback: AsyncCallback\): void @@ -2226,33 +2117,33 @@ once\(type: SensorType.SENSOR\_TYPE\_ID\_BAROMETER, callback: AsyncCallback -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

SensorType

+

SensorType

是

+

是

湿度传感器类型为SENSOR_TYPE_ID_HUMIDITY。

+

湿度传感器类型为SENSOR_TYPE_ID_HUMIDITY。

callback

+

callback

AsyncCallback<HumidityResponse>

+

AsyncCallback<HumidityResponse>

是

+

是

注册一次湿度传感器的回调函数，上报的数据类型为HumidityResponse。

+

注册一次湿度传感器的回调函数，上报的数据类型为HumidityResponse。

参数名

+ + - - - - - - - - - - - @@ -2272,7 +2163,7 @@ sensor.once(sensor.SensorType.SENSOR_TYPE_ID_BAROMETER, function(error, data) { ); ``` -## sensor.once +## sensor.once\(SensorType.SENSOR\_TYPE\_ID\_HALL\) once\(type: SensorType.SENSOR\_TYPE\_ID\_HALL, callback: AsyncCallback\): void @@ -2280,33 +2171,33 @@ once\(type: SensorType.SENSOR\_TYPE\_ID\_HALL, callback: AsyncCallback -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

SensorType

+

SensorType

是

+

是

气压计传感器类型为SENSOR_TYPE_ID_BAROMETER。

+

气压计传感器类型为SENSOR_TYPE_ID_BAROMETER。

callback

+

callback

AsyncCallback<BarometerResponse>

+

AsyncCallback<BarometerResponse>

是

+

是

注册一次气压计传感器的回调函数，上报的数据类型为BarometerResponse。

+

注册一次气压计传感器的回调函数，上报的数据类型为BarometerResponse。

参数名

+ + - - - - - - - - - - - @@ -2326,7 +2217,7 @@ sensor.once(sensor.SensorType.SENSOR_TYPE_ID_HALL, function(error, data) { ); ``` -## sensor.once +## sensor.once\(SensorType.SENSOR\_TYPE\_ID\_AMBIENT\_LIGHT\) once\(type: SensorType.SENSOR\_TYPE\_ID\_AMBIENT\_LIGHT, callback: AsyncCallback\): void @@ -2334,33 +2225,33 @@ once\(type: SensorType.SENSOR\_TYPE\_ID\_AMBIENT\_LIGHT, callback: AsyncCallback **参数：** - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

SensorType

+

SensorType

是

+

是

霍尔传感器类型为SENSOR_TYPE_ID_HALL。

+

霍尔传感器类型为SENSOR_TYPE_ID_HALL。

callback

+

callback

AsyncCallback<HallResponse>

+

AsyncCallback<HallResponse>

是

+

是

注册一次霍尔传感器的回调函数，上报的数据类型为HallResponse。

+

注册一次霍尔传感器的回调函数，上报的数据类型为HallResponse。

参数名

+ + - - - - - - - - - - - @@ -2380,7 +2271,7 @@ sensor.once(sensor.SensorType.SENSOR_TYPE_ID_AMBIENT_LIGHT, function(error, data ); ``` -## sensor.once +## sensor.once\(SensorType.SENSOR\_TYPE\_ID\_ORIENTATION\) once\(type: SensorType.SENSOR\_TYPE\_ID\_ORIENTATION, callback: AsyncCallback\): void @@ -2388,33 +2279,33 @@ once\(type: SensorType.SENSOR\_TYPE\_ID\_ORIENTATION, callback: AsyncCallback -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

SensorType

+

SensorType

是

+

是

环境光传感器类型为SENSOR_TYPE_ID_AMBIENT_LIGHT。

+

环境光传感器类型为SENSOR_TYPE_ID_AMBIENT_LIGHT。

callback

+

callback

AsyncCallback<LightResponse>

+

AsyncCallback<LightResponse>

是

+

是

注册一次环境光传感器的回调函数，上报的数据类型为LightResponse。

+

注册一次环境光传感器的回调函数，上报的数据类型为LightResponse。

参数名

+ + - - - - - - - - - - - @@ -2436,7 +2327,7 @@ sensor.once(sensor.SensorType.SENSOR_TYPE_ID_ORIENTATION, function(error, data) ); ``` -## sensor.once +## sensor.once\(SensorType.SENSOR\_TYPE\_ID\_ROTATION\_VECTOR\) once\(type: SensorType.SENSOR\_TYPE\_ID\_ROTATION\_VECTOR, callback: AsyncCallback\): void @@ -2444,33 +2335,33 @@ once\(type: SensorType.SENSOR\_TYPE\_ID\_ROTATION\_VECTOR, callback: AsyncCallba **参数：** - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

SensorType

+

SensorType

是

+

是

方向传感器类型为SENSOR_TYPE_ID_ORIENTATION。

+

方向传感器类型为SENSOR_TYPE_ID_ORIENTATION。

callback

+

callback

AsyncCallback<OrientationResponse>

+

AsyncCallback<OrientationResponse>

是

+

是

注册一次方向传感器的回调函数，上报的数据类型为OrientationResponse。

+

注册一次方向传感器的回调函数，上报的数据类型为OrientationResponse。

参数名

+ + - - - - - - - - - - - @@ -2492,7 +2383,7 @@ sensor.once(sensor.SensorType.SENSOR_TYPE_ID_ROTATION_VECTOR, function(error, da ); ``` -## sensor.once +## sensor.once\(SensorType.SENSOR\_TYPE\_ID\_HEART\_RATE\) once\(type: SensorType.SENSOR\_TYPE\_ID\_HEART\_RATE, callback: AsyncCallback\): void @@ -2500,33 +2391,33 @@ once\(type: SensorType.SENSOR\_TYPE\_ID\_HEART\_RATE, callback: AsyncCallback -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

SensorType

+

SensorType

是

+

是

旋转矢量传感器类型为SENSOR_TYPE_ID_ROTATION_VECTOR。

+

旋转矢量传感器类型为SENSOR_TYPE_ID_ROTATION_VECTOR。

callback

+

callback

AsyncCallback<RotationVectorResponse>

+

AsyncCallback<RotationVectorResponse>

是

+

是

注册一次旋转矢量传感器的回调函数，上报的数据类型为RotationVectorResponse。

+

注册一次旋转矢量传感器的回调函数，上报的数据类型为RotationVectorResponse。

参数名

+ + - - - - - - - - - - - @@ -2546,7 +2437,7 @@ sensor.once(sensor.SensorType.SENSOR_TYPE_ID_HEART_RATE, function(error, data) { ); ``` -## sensor.once +## sensor.once\(SensorType.SENSOR\_TYPE\_ID\_WEAR\_DETECTION\) once\(type: SensorType.SENSOR\_TYPE\_ID\_WEAR\_DETECTION, callback: AsyncCallback\): void @@ -2554,33 +2445,33 @@ once\(type: SensorType.SENSOR\_TYPE\_ID\_WEAR\_DETECTION, callback: AsyncCallbac **参数：** - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

SensorType

+

SensorType

是

+

是

心率传感器类型为SENSOR_TYPE_ID_HEART_RATE。

+

心率传感器类型为SENSOR_TYPE_ID_HEART_RATE。

callback

+

callback

AsyncCallback<HeartRateResponse>

+

AsyncCallback<HeartRateResponse>

是

+

是

注册一次心率传感器的回调函数，上报的数据类型为HeartRateResponse。

+

注册一次心率传感器的回调函数，上报的数据类型为HeartRateResponse。

参数名

+ + - - - - - - - - - - - @@ -2600,7 +2491,7 @@ sensor.once(sensor.SensorType.SENSOR_TYPE_ID_WEAR_DETECTION, function(error, dat ); ``` -## sensor.off +## sensor.off off\(type: SensorType, callback?: AsyncCallback\): void @@ -2608,33 +2499,33 @@ off\(type: SensorType, callback?: AsyncCallback\): void **参数：** - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

SensorType

+

SensorType

是

+

是

佩戴检测传感器类型为SENSOR_TYPE_ID_WEAR_DETECTION。

+

佩戴检测传感器类型为SENSOR_TYPE_ID_WEAR_DETECTION。

callback

+

callback

AsyncCallback<WearDetectionResponse>

+

AsyncCallback<WearDetectionResponse>

是

+

是

注册一次穿戴检测传感器的回调函数，上报的数据类型为WearDetectionResponse。

+

注册一次穿戴检测传感器的回调函数，上报的数据类型为WearDetectionResponse。

参数名

+ + - - - - - - - - - - - @@ -2654,1176 +2545,1134 @@ sensor.off(sensor.SensorType.SENSOR_TYPE_ID_ACCELEROMETER, function(error) { ``` -## SensorType +## SensorType 表示要订阅或取消订阅的传感器类型。 - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

SensorType

+

SensorType

是

+

是

要取消订阅的传感器类型。

+

要取消订阅的传感器类型。

callback

+

callback

AsyncCallback<void>

+

AsyncCallback<void>

是

+

是

取消订阅的传感器的回调函数，表示接口调用是否成功。

+

取消订阅的传感器的回调函数，表示接口调用是否成功。

名称

+ + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

默认值

+

默认值

说明

+

说明

SENSOR_TYPE_ID_ACCELEROMETER

+

SENSOR_TYPE_ID_ACCELEROMETER

1

+

1

加速度传感器。

+

加速度传感器。

SENSOR_TYPE_ID_GYROSCOPE

+

SENSOR_TYPE_ID_GYROSCOPE

2

+

2

陀螺仪传感器。

+

陀螺仪传感器。

SENSOR_TYPE_ID_AMBIENT_LIGHT

+

SENSOR_TYPE_ID_AMBIENT_LIGHT

5

+

5

环境光传感器。

+

环境光传感器。

SENSOR_TYPE_ID_MAGNETIC_FIELD

+

SENSOR_TYPE_ID_MAGNETIC_FIELD

6

+

6

磁场传感器。

+

磁场传感器。

SENSOR_TYPE_ID_BAROMETER

+

SENSOR_TYPE_ID_BAROMETER

8

+

8

气压计传感器。

+

气压计传感器。

SENSOR_TYPE_ID_HALL

+

SENSOR_TYPE_ID_HALL

10

+

10

霍尔传感器。

+

霍尔传感器。

SENSOR_TYPE_ID_PROXIMITY

+

SENSOR_TYPE_ID_PROXIMITY

12

+

12

接近光传感器。

+

接近光传感器。

SENSOR_TYPE_ID_HUMIDITY

+

SENSOR_TYPE_ID_HUMIDITY

13

+

13

湿度传感器。

+

湿度传感器。

SENSOR_TYPE_ID_ORIENTATION

+

SENSOR_TYPE_ID_ORIENTATION

256

+

256

方向传感器。

+

方向传感器。

SENSOR_TYPE_ID_GRAVITY

+

SENSOR_TYPE_ID_GRAVITY

257

+

257

重力传感器。

+

重力传感器。

SENSOR_TYPE_ID_LINEAR_ACCELERATION

+

SENSOR_TYPE_ID_LINEAR_ACCELERATION

258

+

258

线性加速度传感器。

+

线性加速度传感器。

SENSOR_TYPE_ID_ROTATION_VECTOR

+

SENSOR_TYPE_ID_ROTATION_VECTOR

259

+

259

旋转矢量传感器。

+

旋转矢量传感器。

SENSOR_TYPE_ID_AMBIENT_TEMPERATURE

+

SENSOR_TYPE_ID_AMBIENT_TEMPERATURE

260

+

260

环境温度传感器。

+

环境温度传感器。

SENSOR_TYPE_ID_MAGNETIC_FIELD_UNCALIBRATED

+

SENSOR_TYPE_ID_MAGNETIC_FIELD_UNCALIBRATED

261

+

261

未校准磁场传感器。

+

未校准磁场传感器。

SENSOR_TYPE_ID_GYROSCOPE_UNCALIBRATED

+

SENSOR_TYPE_ID_GYROSCOPE_UNCALIBRATED

263

+

263

未校准陀螺仪传感器。

+

未校准陀螺仪传感器。

SENSOR_TYPE_ID_SIGNIFICANT_MOTION

+

SENSOR_TYPE_ID_SIGNIFICANT_MOTION

264

+

264

有效运动传感器。

+

有效运动传感器。

SENSOR_TYPE_ID_PEDOMETER_DETECTION

+

SENSOR_TYPE_ID_PEDOMETER_DETECTION

265

+

265

计步检测传感器。

+

计步检测传感器。

SENSOR_TYPE_ID_PEDOMETER

+

SENSOR_TYPE_ID_PEDOMETER

266

+

266

计步传感器。

+

计步传感器。

SENSOR_TYPE_ID_HEART_RATE

+

SENSOR_TYPE_ID_HEART_RATE

278

+

278

心率传感器。

+

心率传感器。

SENSOR_TYPE_ID_WEAR_DETECTION

+

SENSOR_TYPE_ID_WEAR_DETECTION

280

+

280

佩戴检测传感器。

+

佩戴检测传感器。

SENSOR_TYPE_ID_ACCELEROMETER_UNCALIBRATED

+

SENSOR_TYPE_ID_ACCELEROMETER_UNCALIBRATED

281

+

281

未校准加速度计传感器。

+

未校准加速度计传感器。
-## AccelerometerResponse +## AccelerometerResponse 加速度传感器数据。 -### 属性 - - -

名称

+ + - - - - - - - - - - - - - - - - - - -

名称

参数类型

+

参数类型

可读

+

可读

可写

+

可写

说明

+

说明

x

+

x

number

+

number

是

+

是

是

+

是

x轴坐标分量。

+

x轴坐标分量。

y

+

y

number

+

number

是

+

是

是

+

是

y轴坐标分量。

+

y轴坐标分量。

z

+

z

number

+

number

是

+

是

是

+

是

z轴坐标分量。

+

z轴坐标分量。
-## LinearAccelerometerResponse +## LinearAccelerometerResponse 线性加速度传感器数据。 -### 属性 - - -

名称

+ + - - - - - - - - - - - - - - - - - - -

名称

参数类型

+

参数类型

可读

+

可读

可写

+

可写

说明

+

说明

x

+

x

number

+

number

是

+

是

是

+

是

x轴坐标分量。

+

x轴坐标分量。

y

+

y

number

+

number

是

+

是

是

+

是

y轴坐标分量。

+

y轴坐标分量。

z

+

z

number

+

number

是

+

是

是

+

是

z轴坐标分量。

+

z轴坐标分量。
-## AccelerometerUncalibratedResponse +## AccelerometerUncalibratedResponse 未校准加速度计传感器数据。 -### 属性 - - -

名称

+ + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

参数类型

+

参数类型

可读

+

可读

可写

+

可写

说明

+

说明

x

+

x

number

+

number

是

+

是

是

+

是

x轴坐标分量。

+

x轴坐标分量。

y

+

y

number

+

number

是

+

是

是

+

是

y轴坐标分量。

+

y轴坐标分量。

z

+

z

number

+

number

是

+

是

是

+

是

z轴坐标分量。

+

z轴坐标分量。

biasX

+

biasX

number

+

number

是

+

是

是

+

是

x轴坐标偏移量。

+

x轴坐标偏移量。

biasY

+

biasY

number

+

number

是

+

是

是

+

是

y轴坐标偏移量。

+

y轴坐标偏移量。

biasZ

+

biasZ

number

+

number

是

+

是

是

+

是

z轴坐标偏移量。

+

z轴坐标偏移量。
-## GravityResponse +## GravityResponse 重力传感器数据。 -### 属性 - - -

名称

+ + - - - - - - - - - - - - - - - - - - -

名称

参数类型

+

参数类型

可读

+

可读

可写

+

可写

说明

+

说明

x

+

x

number

+

number

是

+

是

是

+

是

x轴坐标分量。

+

x轴坐标分量。

y

+

y

number

+

number

是

+

是

是

+

是

y轴坐标分量。

+

y轴坐标分量。

z

+

z

number

+

number

是

+

是

是

+

是

z轴坐标分量。

+

z轴坐标分量。
-## OrientationResponse +## OrientationResponse 方向传感器数据。 -### 属性 - - -

名称

+ + - - - - - - - - - - - - - - - - - - -

名称

参数类型

+

参数类型

可读

+

可读

可写

+

可写

说明

+

说明

x

+

x

number

+

number

是

+

是

是

+

是

x轴坐标分量。

+

x轴坐标分量。

y

+

y

number

+

number

是

+

是

是

+

是

y轴坐标分量。

+

y轴坐标分量。

z

+

z

number

+

number

是

+

是

是

+

是

z轴坐标分量。

+

z轴坐标分量。
-## RotationVectorResponse +## RotationVectorResponse 旋转矢量传感器数据。 -### 属性 - - -

名称

+ + - - - - - - - - - - - - - - - - - - -

名称

参数类型

+

参数类型

可读

+

可读

可写

+

可写

说明

+

说明

x

+

x

number

+

number

是

+

是

是

+

是

x轴坐标分量。

+

x轴坐标分量。

y

+

y

number

+

number

是

+

是

是

+

是

y轴坐标分量。

+

y轴坐标分量。

z

+

z

number

+

number

是

+

是

是

+

是

z轴坐标分量。

+

z轴坐标分量。
-## GyroscopeResponse +## GyroscopeResponse 陀螺仪传感器数据。 -### 属性 - - -

名称

+ + - - - - - - - - - - - - - - - - - - -

名称

参数类型

+

参数类型

可读

+

可读

可写

+

可写

说明

+

说明

x

+

x

number

+

number

是

+

是

是

+

是

x轴坐标分量。

+

x轴坐标分量。

y

+

y

number

+

number

是

+

是

是

+

是

y轴坐标分量。

+

y轴坐标分量。

z

+

z

number

+

number

是

+

是

是

+

是

z轴坐标分量。

+

z轴坐标分量。
-## GyroscopeUncalibratedResponse +## GyroscopeUncalibratedResponse 未校准陀螺仪传感器数据。 -### 属性 - - -

名称

+ + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

参数类型

+

参数类型

可读

+

可读

可写

+

可写

说明

+

说明

x

+

x

number

+

number

是

+

是

是

+

是

x轴坐标分量。

+

x轴坐标分量。

y

+

y

number

+

number

是

+

是

是

+

是

y轴坐标分量。

+

y轴坐标分量。

z

+

z

number

+

number

是

+

是

是

+

是

z轴坐标分量。

+

z轴坐标分量。

biasX

+

biasX

number

+

number

是

+

是

是

+

是

x轴坐标偏移量。

+

x轴坐标偏移量。

biasY

+

biasY

number

+

number

是

+

是

是

+

是

y轴坐标偏移量。

+

y轴坐标偏移量。

biasZ

+

biasZ

number

+

number

是

+

是

是

+

是

z轴坐标偏移量。

+

z轴坐标偏移量。
-## SignificantMotionResponse +## SignificantMotionResponse 有效运动传感器数据。 -### 属性 - - -

名称

+ + - - - - - - - - -

名称

参数类型

+

参数类型

可读

+

可读

可写

+

可写

说明

+

说明

scalar

+

scalar

number

+

number

是

+

是

是

+

是

表示剧烈运动程度。测量三个物理轴（x、y 和 z）上，设备是否存在大幅度运动；如果取值为1则代表存在大幅度运动，取值为0则代表没有大幅度运动。

+

表示剧烈运动程度。测量三个物理轴（x、y 和 z）上，设备是否存在大幅度运动；如果取值为1则代表存在大幅度运动，取值为0则代表没有大幅度运动。
-## ProximityResponse +## ProximityResponse 接近光传感器数据。 -### 属性 - - -

名称

+ + - - - - - - - - -

名称

参数类型

+

参数类型

可读

+

可读

可写

+

可写

说明

+

说明

distance

+

distance

number

+

number

是

+

是

是

+

是

可见物体与设备显示器的接近程度。0表示接近，1表示远离。

+

可见物体与设备显示器的接近程度。0表示接近，1表示远离。
-## LightResponse +## LightResponse 环境光传感器数据。 -### 属性 - - -

名称

+ + - - - - - - - - -

名称

参数类型

+

参数类型

可读

+

可读

可写

+

可写

说明

+

说明

intensity

+

intensity

number

+

number

是

+

是

是

+

是

光强（单位：勒克斯）。

+

光强（单位：勒克斯）。
-## HallResponse +## HallResponse 霍尔传感器数据。 -### 属性 - - -

名称

+ + - - - - - - - - -

名称

参数类型

+

参数类型

可读

+

可读

可写

+

可写

说明

+

说明

status

+

status

number

+

number

是

+

是

是

+

是

显示霍尔状态。测量设备周围是否存在磁力吸引，0表示有，1表示没有。

+

显示霍尔状态。测量设备周围是否存在磁力吸引，0表示有，1表示没有。
-## MagneticFieldResponse +## MagneticFieldResponse 磁场传感器数据。 -### 属性 - - -

名称

+ + - - - - - - - - - - - - - - - - - - -

名称

参数类型

+

参数类型

可读

+

可读

可写

+

可写

说明

+

说明

x

+

x

number

+

number

是

+

是

是

+

是

x轴坐标分量。

+

x轴坐标分量。

y

+

y

number

+

number

是

+

是

是

+

是

y轴坐标分量。

+

y轴坐标分量。

z

+

z

number

+

number

是

+

是

是

+

是

z轴坐标分量。

+

z轴坐标分量。
-## MagneticFieldUncalibratedResponse +## MagneticFieldUncalibratedResponse 未校准磁场传感器数据。 -### 属性 - - -

名称

+ + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

参数类型

+

参数类型

可读

+

可读

可写

+

可写

说明

+

说明

x

+

x

number

+

number

是

+

是

是

+

是

x轴坐标分量。

+

x轴坐标分量。

y

+

y

number

+

number

是

+

是

是

+

是

y轴坐标分量。

+

y轴坐标分量。

z

+

z

number

+

number

是

+

是

是

+

是

z轴坐标分量。

+

z轴坐标分量。

biasX

+

biasX

number

+

number

是

+

是

是

+

是

x轴坐标偏移量。

+

x轴坐标偏移量。

biasY

+

biasY

number

+

number

是

+

是

是

+

是

y轴坐标偏移量。

+

y轴坐标偏移量。

biasZ

+

biasZ

number

+

number

是

+

是

是

+

是

z轴坐标偏移量。

+

z轴坐标偏移量。
-## PedometerResponse +## PedometerResponse 计步传感器数据。 -### 属性 - - -

名称

+ + - - - - - - - - -

名称

参数类型

+

参数类型

可读

+

可读

可写

+

可写

说明

+

说明

steps

+

steps

number

+

number

是

+

是

是

+

是

计数的步骤数。每次设备重新启动时，该值将从0重新计算。

+

计数的步骤数。每次设备重新启动时，该值将从0重新计算。
-## HumidityResponse +## HumidityResponse 湿度传感器数据。 -### 属性 - - -

名称

+ + - - - - - - - - -

名称

参数类型

+

参数类型

可读

+

可读

可写

+

可写

说明

+

说明

humidity

+

humidity

number

+

number

是

+

是

是

+

是

湿度值。测量环境的相对湿度，以百分比 (%) 表示。

+

湿度值。测量环境的相对湿度，以百分比 (%) 表示。
-## PedometerDetectResponse +## PedometerDetectResponse 计步检测传感器数据。 -### 属性 - - -

名称

+ + - - - - - - - - -

名称

参数类型

+

参数类型

可读

+

可读

可写

+

可写

说明

+

说明

scalar

+

scalar

number

+

number

是

+

是

是

+

是

计步器检测。检测用户的计步动作，如果取值为1则代表用户产生了计步行走的动作，取值为0则代表用户没有发生运动。

+

计步器检测。检测用户的计步动作，如果取值为1则代表用户产生了计步行走的动作，取值为0则代表用户没有发生运动。
-## AmbientTemperatureResponse +## AmbientTemperatureResponse 温度传感器数据。 -### 属性 - - -

名称

+ + - - - - - - - - -

名称

参数类型

+

参数类型

可读

+

可读

可写

+

可写

说明

+

说明

temperature

+

temperature

number

+

number

是

+

是

是

+

是

环境温度（单位：摄氏度）。

+

环境温度（单位：摄氏度）。
-## BarometerResponse +## BarometerResponse 气压计传感器数据。 -### 属性 - - -

名称

+ + - - - - - - - - -

名称

参数类型

+

参数类型

可读

+

可读

可写

+

可写

说明

+

说明

pressure

+

pressure

number

+

number

是

+

是

是

+

是

压力值（单位：帕斯卡）。

+

压力值（单位：帕斯卡）。
-## HeartRateResponse +## HeartRateResponse 心率传感器数据。 -### 属性 - - -

名称

+ + - - - - - - - - -

名称

参数类型

+

参数类型

可读

+

可读

可写

+

可写

说明

+

说明

heartRate

+

heartRate

number

+

number

是

+

是

是

+

是

心率值。测量用户的心率数值，单位是次/分。

+

心率值。测量用户的心率数值，单位是次/分。
-## WearDetectionResponse +## WearDetectionResponse 佩戴检测传感器数据。 -### 属性 - - -

名称

+ + - - - - - - - - - diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-sim.md b/zh-cn/application-dev/js-reference/apis/js-apis-sim.md index 94b83aa123add20ccd0eee25ba59e1a219193ee1..2b6cf3a095b54ec0d9d26e4350e99636ea6f0d22 100755 --- a/zh-cn/application-dev/js-reference/apis/js-apis-sim.md +++ b/zh-cn/application-dev/js-reference/apis/js-apis-sim.md @@ -1,22 +1,5 @@ # SIM卡管理 -- [导入模块](#导入模块) -- [sim.getSimIccId](#sim.getSimIccId-callback) -- [sim.getSimIccId](#sim.getSimIccId-promise) -- [sim.getDefaultVoiceSlotId7+](#sim.getDefaultVoiceSlotId-callback) -- [sim.getDefaultVoiceSlotId7+](#sim.getDefaultVoiceSlotId-promise) -- [sim.getISOCountryCodeForSim](#sim.getISOCountryCodeForSim-callback) -- [sim.getISOCountryCodeForSim](#sim.getISOCountryCodeForSim-promise) -- [sim.getSimOperatorNumeric](#sim.getSimOperatorNumeric-callback) -- [sim.getSimOperatorNumeric](#sim.getSimOperatorNumeric-promise) -- [sim.getSimSpn](#sim.getSimSpn-callback) -- [sim.getSimSpn](#sim.getSimSpn-promise) -- [sim.getSimState](#sim.getSimState-callback) -- [sim.getSimState](#sim.getSimState-promise) -- [sim.getSimGid1](#sim.getSimGid1-callback) -- [sim.getSimGid1](#sim.getSimGid1-promise) -- [SimState](#SimState) - >**说明：** > >- 从 API Version 6 开始支持。 diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-sms.md b/zh-cn/application-dev/js-reference/apis/js-apis-sms.md index f2f20864b711bfff00a2fe0a88658b442a7b7022..2970a538c4917692164073019ed3512c1e0f4dc9 100755 --- a/zh-cn/application-dev/js-reference/apis/js-apis-sms.md +++ b/zh-cn/application-dev/js-reference/apis/js-apis-sms.md @@ -1,22 +1,5 @@ # 短信服务 -- [导入模块](#导入模块) -- [sms.createMessage](#sms.createMessage-callback) -- [sms.createMessage](#sms.createMessage-promise) -- [sms.sendMessage](#sms.sendMessage) -- [sms.getDefaultSmsSlotId7+](#sms.getDefaultSmsSlotId-callback) -- [sms.getDefaultSmsSlotId7+](#sms.getDefaultSmsSlotId-promise) -- [sms.setSmscAddr7+](#sms.setSmscAddr-callback) -- [sms.setSmscAddr7+](#sms.setSmscAddr-promise) -- [sms.getSmscAddr7+](#sms.getSmscAddr-callback) -- [sms.getSmscAddr7+](#sms.getSmscAddr-promise) -- [ShortMessage](#ShortMessage) -- [ShortMessageClass](#ShortMessageClass) -- [SendMessageOptions](#SendMessageOptions) -- [ISendShortMessageCallback](#ISendShortMessageCallback) -- [IDeliveryShortMessageCallback](#IDeliveryShortMessageCallback) -- [SendSmsResult](#SendSmsResult) - >**说明：** > >- 从 API Version 6 开始支持。 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 deleted file mode 100644 index 957202257b731b011d4cc6854d56949f19f102f4..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/apis/js-apis-system-app.md +++ /dev/null @@ -1,87 +0,0 @@ -# 应用上下文 - -- [导入模块](#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 - - -

名称

参数类型

+

参数类型

可读

+

可读

可写

+

可写

说明

+

说明

value

+

value

boolean

+

boolean

是

+

是

是

+

是

表示设备是否被穿戴（true 表示已穿戴，false表示未穿戴）。

+

表示设备是否被穿戴（true 表示已穿戴，false表示未穿戴）。
- - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

说明

-

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 deleted file mode 100644 index aa842fb629b0c5045a7c96c2aaea6d85e27a5974..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/apis/js-apis-system-configuration.md +++ /dev/null @@ -1,76 +0,0 @@ -# 应用配置 - -- [导入模块](#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-parameter.md b/zh-cn/application-dev/js-reference/apis/js-apis-system-parameter.md new file mode 100644 index 0000000000000000000000000000000000000000..1e49dcdb149f6079a866fc5102dca8d823f9956f --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-system-parameter.md @@ -0,0 +1,458 @@ +# 系统属性 + +## 导入模块 + +``` +import parameter from '@ohos.systemParameter' +``` + +## 权限列表 + +无 + +## parameter.getSync + +getSync\(key: string, def?: string\) + +获取系统属性Key对应的值。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

key

+

string

+

是

+

待查询的系统属性Key。

+

def

+

string

+

否

+

默认值。

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

类型

+

说明

+

string

+

系统属性值，若key不存在，返回默认值。若未指定默认值，返回空字符串。

+
+ +**示例：** + +``` +try { + var info = parameter.getSync("test.parameter.key"); + console.log(JSON.stringify(info)); +}catch(e){ + console.log("getSync unexpected error: " + e); +} +``` + +## parameter.get + +get\(key: string, callback: AsyncCallback\) + +获取系统属性Key对应的值。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

key

+

string

+

是

+

待查询的系统属性Key。

+

callback

+

AsyncCallback<string>

+

是

+

回调函数。

+
+ +**示例：** + +``` +try { + parameter.get("test.parameter.key", function (err, data) { + if (err == undefined) { + console.log("get test.parameter.key value success:" + data) + } else { + console.log(" get test.parameter.key value err:" + err.code) + }}); +}catch(e){ + console.log("get unexpected error: " + e); +} +``` + +## parameter.get + +get\(key: string, def: string, callback: AsyncCallback\) + +获取系统属性Key对应的值。 + +**参数：** + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

key

+

string

+

是

+

待查询的系统属性Key。

+

def

+

string

+

是

+

默认值。

+

callback

+

AsyncCallback<string>

+

是

+

回调函数。

+
+ +**示例：** + +``` +try { + parameter.get("test.parameter.key", "default", function (err, data) { + if (err == undefined) { + console.log("get test.parameter.key value success:" + data) + } else { + console.log(" get test.parameter.key value err:" + err.code) + } + }); +}catch(e){ + console.log("get unexpected error:" + e) +} +``` + +## parameter.get + +get\(key: string, def?: string\) + +获取系统属性Key对应的值。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

key

+

string

+

是

+

待查询的系统属性Key。

+

def

+

string

+

否

+

默认值。

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

类型

+

说明

+

Promise<string>

+

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

+
+ +**示例：** + +``` +try { + var p = parameter.get("test.parameter.key"); + p.then(function (value) { + console.log("get test.parameter.key success: " + value); + }).catch(function (err) { + console.log("get test.parameter.key error: " + err.code); + }); +}catch(e){ + console.log("get unexpected error: " + e); +} +``` + +## parameter.setSync + +setSync\(key: string, value: string\) + +设置系统属性Key对应的值。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

key

+

string

+

是

+

待设置的系统属性Key。

+

value

+

string

+

是

+

待设置的系统属性值。

+
+ +**示例：** + +``` +try { + parameter.setSync("test.parameter.key", "default"); +}catch(e){ + console.log("set unexpected error: " + e); +} +``` + +## parameter.set\(key: string, value: string, callback: AsyncCallback\) + +set\(key: string, value: string, callback: AsyncCallback\) + +设置系统属性Key对应的值。 + +**参数：** + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

key

+

string

+

是

+

待查询的系统属性Key。

+

def

+

string

+

是

+

默认值。

+

callback

+

AsyncCallback<void>

+

是

+

回调函数。

+
+ +**示例：** + +``` +try { + parameter.set("test.parameter.key", "testValue", function (err, data) { + if (err == undefined) { + console.log("set test.parameter.key value success :" + data) + } else { + console.log("set test.parameter.key value err:" + err.code) + }}); +}catch(e){ + console.log("set unexpected error: " + e); +} +``` + +## parameter.set\(key: string, def?: string\) + +set\(key: string, def?: string\) + +设置系统属性Key对应的值。 + +**参数：** + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

key

+

string

+

是

+

待查询的系统属性Key。

+

def

+

string

+

否

+

默认值。

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

类型

+

说明

+

Promise<string>

+

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

+
+ +**示例：** + +``` +try { + var p = para.set("test.parameter.key", "testValue"); + p.then(function (value) { + console.log("set test.parameter.key success: " + value); + }).catch(function (err) { + console.log(" set test.parameter.key error: " + err.code); + }); +}catch(e){ + console.log("set unexpected error: " + e); +} +``` + 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 deleted file mode 100644 index 4635839395b2da773e9cfb5511a81e8c11c8620c..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/apis/js-apis-system-prompt.md +++ /dev/null @@ -1,313 +0,0 @@ -# 弹窗 - -- [导入模块](#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 deleted file mode 100644 index f6f26dc6f381a4852c30d905bd33f083635be4f2..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/apis/js-apis-system-router.md +++ /dev/null @@ -1,463 +0,0 @@ -# 页面路由 - -- [导入模块](#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-time.md b/zh-cn/application-dev/js-reference/apis/js-apis-system-time.md new file mode 100644 index 0000000000000000000000000000000000000000..0a5c29ecff012d60b574c48fb7f97aae9920e366 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-system-time.md @@ -0,0 +1,379 @@ +# 设置系统时间 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从 API Version 7 开始支持。 + +## 支持设备 + + + + + + + + + + + + + + +

手机

+

平板

+

智慧屏

+

智能穿戴

+

支持

+

支持

+

支持

+

支持

+
+ +## 导入模块 + +``` +import systemTime from '@ohos.systemTime'; +``` + +## systemTime.setTime + +setTime\(time : number, callback : AsyncCallback\) : void + +设置系统时间，需要ohos.permission.SET\_TIME权限。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

time

+

number

+

是

+

目标时间戳（毫秒）。

+

callback

+

AsyncCallback<void>

+

是

+

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

+
+ +- 示例： + + ``` + // time对应的时间为2021-01-20 02:36:25 + var time = 1611081385000; + systemTime.setTime(time, (error, data) => { + if (error) { + console.error(`failed to systemTime.setTime because ` + JSON.stringify(error)); + return; + } + console.log(`success to systemTime.setTime: ` + JSON.stringify(data)); + }); + ``` + + +## systemTime.setTime + +setTime\(time : number\) : Promise + +设置系统时间，需要ohos.permission.SET\_TIME权限。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

time

+

number

+

是

+

目标时间戳（毫秒）。

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

类型

+

说明

+

Promise<void>

+

返回的异步回调函数。

+
+ +- 示例： + + ``` + // time对应的时间为2021-01-20 02:36:25 + var time = 1611081385000; + systemTime.setTime(time).then((data) => { + console.log(`success to systemTime.setTime: ` + JSON.stringify(data)); + }).catch((error) => { + console.error(`failed to systemTime.setTime because ` + JSON.stringify(error)); + }); + ``` + + +## systemTime.setDate + +setDate\(date: Date, callback: AsyncCallback\): void + +设置系统日期，需要ohos.permission.SET\_TIME权限。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

date

+

Date

+

是

+

目标日期。

+

callback

+

AsyncCallback<void>

+

是

+

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

+
+ +- 示例： + + ``` + var data = new Date("October 13, 2020 11:13:00"); + systemTime.setDate(data,(error, data) => { + if (error) { + console.error('SystemTimePlugin setDate failed because ' + JSON.stringify(error)); + return; + } + console.info('SystemTimePlugin setDate success data : ' + JSON.stringify(data)); + }); + ``` + + +## systemTime.setDate + +setDate\(date: Date\): Promise + +设置系统日期，需要ohos.permission.SET\_TIME权限。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

date

+

Date

+

是

+

目标日期。

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

类型

+

说明

+

Promise<void>

+

返回的异步回调函数。

+
+ +- 示例： + + ``` + var data = new Date("October 13, 2020 11:13:00"); + systemTime.setDate(data).then((value) => { + console.log(`SystemTimePlugin success to systemTime.setDate: ` + JSON.stringify(value)); + }).catch((error) => { + console.error(`SystemTimePlugin failed to systemTime.setDate because: ` + JSON.stringify(error)); + }); + ``` + + +## systemTime.setTimezone + +setTimezone\(timezone: string, callback: AsyncCallback\): void + +设置系统时区，需要ohos.permission.SET\_TIME\_ZONE权限。 + +- 参数： + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

timezone

+

string

+

是

+

系统时区。

+

callback

+

AsyncCallback<void>

+

是

+

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

+
+ +- 示例： + + ``` + systemTime.setTimezone('Asia/Shanghai', (error, data) => { + if (error) { + console.error('SystemTimePlugin setTimezone failed because ' + JSON.stringify(error)); + return; + } + console.info('SystemTimePlugin setTimezone success data : ' + JSON.stringify(data)); + }); + ``` + + +## systemTime.setTimezone + +setTimezone\(timezone: string\): Promise + +设置系统时区，需要ohos.permission.SET\_TIME\_ZONE权限。 + +- 参数： + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

timezone

+

string

+

是

+

系统时区。

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

类型

+

说明

+

Promise<void>

+

返回的异步回调函数。

+
+ +- 示例： + + ``` + systemTime.setTimezone('Asia/Shanghai').then((data) => { + console.log(`SystemTimePlugin success to systemTime.setTimezone: ` + JSON.stringify(data)); + }).catch((error) => { + console.error(`SystemTimePlugin failed to systemTime.setTimezone because: ` + JSON.stringify(error)); + }); + ``` + + 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 deleted file mode 100644 index dac6e52dbce810ac253b9d050644bdb18e3d942e..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/apis/js-apis-system-timer.md +++ /dev/null @@ -1,251 +0,0 @@ -# 定时器 - -- [导入模块](#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/apis/js-apis-systemparameter.md b/zh-cn/application-dev/js-reference/apis/js-apis-systemparameter.md deleted file mode 100644 index d8ec894d26895c6612fd28fcc59ec00d16df2805..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/apis/js-apis-systemparameter.md +++ /dev/null @@ -1,473 +0,0 @@ -# 系统属性 - -- [导入模块](#zh-cn_topic_0000001094819718_section370mcpsimp) -- [权限列表](#zh-cn_topic_0000001094819718_section373mcpsimp) -- [方法](#zh-cn_topic_0000001094819718_section1319529172015) -- [getSync\(key: string, def?: string\)](#zh-cn_topic_0000001094819718_section3381192816421) -- [get\(key: string, callback: AsyncCallback\)](#zh-cn_topic_0000001094819718_section19655131534912) -- [get\(key: string, def: string, callback: AsyncCallback\)](#zh-cn_topic_0000001094819718_section045334733915) -- [get\(key: string, def?: string\)](#zh-cn_topic_0000001094819718_section10288162818402) -- [setSync\(key: string, value: string\)](#zh-cn_topic_0000001094819718_section63102185493) -- [set\(key: string, value: string, callback: AsyncCallback\)](#zh-cn_topic_0000001094819718_section18770184911197) -- [set\(key: string, def?: string\)](#zh-cn_topic_0000001094819718_section187724496193) - -## 导入模块 - -``` -import parameter from '@ohos.systemParameter' -``` - -## 权限列表 - -无 - -## 方法 - -## getSync\(key: string, def?: string\) - -获取系统属性Key对应的值。 - -**参数：** - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

key

-

string

-

是

-

待查询的系统属性Key。

-

def

-

string

-

否

-

默认值。

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

类型

-

说明

-

string

-

系统属性值，若key不存在，返回默认值。若未指定默认值，返回空字符串。

-
- -**示例：** - -``` -try { - var info = parameter.getSync("test.parameter.key"); - console.log(JSON.stringify(info)); -}catch(e){ - console.log("getSync unexpected error: " + e); -} -``` - -## get\(key: string, callback: AsyncCallback\) - -获取系统属性Key对应的值。 - -**参数：** - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

key

-

string

-

是

-

待查询的系统属性Key。

-

callback

-

AsyncCallback<string>

-

是

-

回调函数。

-
- -**返回值：** - -无 - -**示例：** - -``` -try { - parameter.get("test.parameter.key", function (err, data) { - if (err == undefined) { - console.log("get test.parameter.key value success:" + data) - } else { - console.log(" get test.parameter.key value err:" + err.code) - }}); -}catch(e){ - console.log("get unexpected error: " + e); -} -``` - -## get\(key: string, def: string, callback: AsyncCallback\) - -获取系统属性Key对应的值。 - -**参数：** - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

key

-

string

-

是

-

待查询的系统属性Key。

-

def

-

string

-

是

-

默认值。

-

callback

-

AsyncCallback<string>

-

是

-

回调函数。

-
- -**返回值：** - -无 - -**示例：** - -``` -try { - parameter.get("test.parameter.key", "default", function (err, data) { - if (err == undefined) { - console.log("get test.parameter.key value success:" + data) - } else { - console.log(" get test.parameter.key value err:" + err.code) - } - }); -}catch(e){ - console.log("get unexpected error:" + e) -} -``` - -## get\(key: string, def?: string\) - -获取系统属性Key对应的值。 - -**参数：** - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

key

-

string

-

是

-

待查询的系统属性Key。

-

def

-

string

-

否

-

默认值。

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

类型

-

说明

-

Promise<string>

-

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

-
- -**示例：** - -``` -try { - var p = parameter.get("test.parameter.key"); - p.then(function (value) { - console.log("get test.parameter.key success: " + value); - }).catch(function (err) { - console.log("get test.parameter.key error: " + err.code); - }); -}catch(e){ - console.log("get unexpected error: " + e); -} -``` - -## setSync\(key: string, value: string\) - -设置系统属性Key对应的值。 - -**参数：** - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

key

-

string

-

是

-

待设置的系统属性Key。

-

value

-

string

-

是

-

待设置的系统属性值。

-
- -**返回值：** - -无 - -**示例：** - -``` -try { - parameter.setSync("test.parameter.key", "default"); -}catch(e){ - console.log("set unexpected error: " + e); -} -``` - -## set\(key: string, value: string, callback: AsyncCallback\) - -设置系统属性Key对应的值。 - -**参数：** - - - - - - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

key

-

string

-

是

-

待查询的系统属性Key。

-

def

-

string

-

是

-

默认值。

-

callback

-

AsyncCallback<void>

-

是

-

回调函数。

-
- -**返回值：** - -无 - -**示例：** - -``` -try { - parameter.set("test.parameter.key", "testValue", function (err, data) { - if (err == undefined) { - console.log("set test.parameter.key value success :" + data) - } else { - console.log("set test.parameter.key value err:" + err.code) - }}); -}catch(e){ - console.log("set unexpected error: " + e); -} -``` - -## set\(key: string, def?: string\) - -设置系统属性Key对应的值。 - -**参数：** - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

key

-

string

-

是

-

待查询的系统属性Key。

-

def

-

string

-

否

-

默认值。

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

类型

-

说明

-

Promise<string>

-

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

-
- -**示例：** - -``` -try { - var p = para.set("test.parameter.key", "testValue"); - p.then(function (value) { - console.log("set test.parameter.key success: " + value); - }).catch(function (err) { - console.log(" set test.parameter.key error: " + err.code); - }); -}catch(e){ - console.log("set unexpected error: " + e); -} -``` - diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-systemtime.md b/zh-cn/application-dev/js-reference/apis/js-apis-systemtime.md deleted file mode 100644 index df99227d6af2b2787d06a4a1be155560003b6499..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/apis/js-apis-systemtime.md +++ /dev/null @@ -1,134 +0,0 @@ -# 时间设置 - -- [导入模块](#zh-cn_topic_0000001162403059_s56d19203690d4782bfc74069abb6bd71) -- [权限列表](#zh-cn_topic_0000001162403059_section11257113618419) -- [setTime\(number, AsyncCallback\)](#zh-cn_topic_0000001162403059_section1524014116262) -- [setTime\(number\) : Promise](#zh-cn_topic_0000001162403059_section1853612361618) - -## 导入模块 - -``` -import systemTime from '@ohos.systemTime'; -``` - -## 权限列表 - -无。 - -## setTime\(number, AsyncCallback\) - -设置系统时间 - -**参数：** - - - - - - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

time

-

number

-

是

-

目标时间戳（毫秒）。

-

callback

-

AsyncCallback<boolean>

-

是

-

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

-
  • 返回值为true，表示设置系统时间成功；
  • 返回值为false，表示设置系统时间失败。
-
- -**示例：** - -``` -// time对应的时间为2021-01-20 02:36:25 -var time = 1611081385000; -systemTime.setTime(time, (err, value) => { - if (err) { - // 设置时间失败，err非空，value为空。 - console.error(`failed to systemTime.setTime because ${err.message}`); - return; - } - - // 设置时间成功，err为空，value非空。 - console.log(`success to systemTime.setTime: ${value}`); -}); -``` - -## setTime\(number\) : Promise - -设置系统时间 - -**参数：** - - - - - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

time

-

number

-

是

-

目标时间戳（毫秒）。

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

类型

-

说明

-

Promise<boolean>

-
  • 返回值为true，表示设置系统时间成功；
  • 返回值为false，表示设置系统时间失败。
-
- -**示例：** - -``` -// time对应的时间为2021-01-20 02:36:25 -var time = 1611081385000; -systemTime.setTime(time) - .then((value) => { - // 设置时间成功 - console.log(`success to systemTime.setTime: ${value}`); - }).catch((err) => { - // 设置时间失败 - console.error(`failed to systemTime.setTime because ${err.message}`); - }); -``` - diff --git a/zh-cn/application-dev/js-reference/apis/js-apis-telephony.md b/zh-cn/application-dev/js-reference/apis/js-apis-telephony.md new file mode 100644 index 0000000000000000000000000000000000000000..ab33a0a089a1c4a0cf311ffe0ace786e107e0776 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-telephony.md @@ -0,0 +1,6 @@ +# 电话服务 + +- [拨打电话](js-apis-call.md) +- [短信服务](js-apis-sms.md) +- [SIM卡管理](js-apis-sim.md) +- [网络搜索](js-apis-radio.md) \ No newline at end of file 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 index 9e915247b320b7ef1b53b514158d03db533a6135..29b197150d3bf7bce305ed1f0720aa5502fff108 100644 --- a/zh-cn/application-dev/js-reference/apis/js-apis-url.md +++ b/zh-cn/application-dev/js-reference/apis/js-apis-url.md @@ -1,46 +1,21 @@ -# 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) - +# URL字符串解析 >![](../../public_sys-resources/icon-note.gif) **说明：** >从 API Version 7 开始支持。 -## 导入模块 +## 导入模块 ``` import Url from '@ohos.url' ``` -## 权限 +## 权限 无 -## URLSearchParams +## URLSearchParams -### constructor +### constructor constructor\(init?: string\[\]\[\] | Record | string | URLSearchParams\) @@ -48,25 +23,25 @@ URLSearchParams的构造函数。 - 参数： - -

参数名

+ + - - - - - - - @@ -83,7 +58,7 @@ URLSearchParams的构造函数。 ``` -### append +### append append\(name: string, value: string\): void @@ -91,33 +66,33 @@ append\(name: string, value: string\): void - 参数： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

init

+

init

string[][] | Record<string, string> | string | URLSearchParams

+

string[][] | Record<string, string> | string | URLSearchParams

否

+

否

入参对象。

-
  • string[][]：字符串二维数组
  • Record<string, string>：对象列表
  • string：字符串
  • URLSearchParams：对象
+

入参对象。

+
  • string[][]：字符串二维数组
  • Record<string, string>：对象列表
  • string：字符串
  • URLSearchParams：对象

参数名

+ + - - - - - - - - - - - @@ -132,7 +107,7 @@ append\(name: string, value: string\): void ``` -### delete +### delete delete\(name: string\): void @@ -140,24 +115,24 @@ delete\(name: string\): void - 参数： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

name

+

name

string

+

string

是

+

是

需要插入搜索参数的键名。

+

需要插入搜索参数的键名。

value

+

value

string

+

string

是

+

是

需要插入搜索参数的值。

+

需要插入搜索参数的值。

参数名

+ + - - - - - - - @@ -173,7 +148,7 @@ delete\(name: string\): void ``` -### getAll +### getAll getAll\(name: string\): string\[\] @@ -181,24 +156,24 @@ getAll\(name: string\): string\[\] - 参数： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

name

+

name

string

+

string

是

+

是

需要删除的键值名称。

+

需要删除的键值名称。

参数名

+ + - - - - - - - @@ -207,16 +182,16 @@ getAll\(name: string\): string\[\] - 返回值： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

name

+

name

string

+

string

是

+

是

指定的键值名称。

+

指定的键值名称。

类型

+ + - - - @@ -233,7 +208,7 @@ getAll\(name: string\): string\[\] ``` -### entries +### entries entries\(\): IterableIterator<\[string, string\]\> @@ -241,16 +216,16 @@ entries\(\): IterableIterator<\[string, string\]\> - 返回值： - -

类型

说明

+

说明

string[]

+

string[]

返回指定名称的所有键值对。

+

返回指定名称的所有键值对。

类型

+ + - - - @@ -267,32 +242,41 @@ entries\(\): IterableIterator<\[string, string\]\> ``` -### forEach +### forEach -forEach\(callbackfn: \(value: string, key: string, parent: this\) =\> void\): void +forEach\(callbackfn: \(value: string, key: string, searchParams: Object\) =\> void, thisArg?: Object\): void 通过回调函数来遍历URLSearchParams实例对象上的键值对。 - 参数： - -

类型

说明

+

说明

IterableIterator<[string, string]>

+

IterableIterator<[string, string]>

返回一个ES6的迭代器。

+

返回一个ES6的迭代器。

参数名

+ + - - - - + + + + + - - - @@ -300,42 +284,42 @@ forEach\(callbackfn: \(value: string, key: string, parent: this\) =\> void\): vo **表 1** callbackfn的参数说明 - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

callbackfn

+

callbackfn

+

function

+

是

+

回调函数。

+

thisArg

function

+

Object

是

+

否

回调函数。

+

callbackfn被调用时用作this值

参数名

+ + - - - - - - - - - - - - - - - @@ -351,7 +335,7 @@ forEach\(callbackfn: \(value: string, key: string, parent: this\) =\> void\): vo ``` -### get +### get get\(name: string\): string | null @@ -359,24 +343,24 @@ get\(name: string\): string | null - 参数： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

value

+

value

string

+

string

是

+

是

当前遍历到的键值。

+

当前遍历到的键值。

key

+

key

string

+

string

是

+

是

当前遍历到的键名。

+

当前遍历到的键名。

searchParams

+

searchParams

Object

+

Object

是

+

是

当前调用forEach方法的实例对象。

+

当前调用forEach方法的实例对象。

参数名

+ + - - - - - - - @@ -384,21 +368,21 @@ get\(name: string\): string | null - 返回值： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

name

+

name

string

+

string

是

+

是

指定键值对的名称。

+

指定键值对的名称。

类型

+ + - - - - - @@ -414,7 +398,7 @@ get\(name: string\): string | null ``` -### has +### has has\(name: string\): boolean @@ -422,24 +406,24 @@ has\(name: string\): boolean - 参数： - -

类型

说明

+

说明

string

+

string

返回第一个值。

+

返回第一个值。

null

+

null

如果没找到，返回 null。

+

如果没找到，返回 null。

参数名

+ + - - - - - - - @@ -447,16 +431,16 @@ has\(name: string\): boolean - 返回值： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

name

+

name

string

+

string

是

+

是

要查找的参数的键名。

+

要查找的参数的键名。

类型

+ + - - - @@ -471,7 +455,7 @@ has\(name: string\): boolean ``` -### set +### set set\(name: string, value: string\): void @@ -479,33 +463,33 @@ set\(name: string, value: string\): void - 参数： - -

类型

说明

+

说明

boolean

+

boolean

是否存在相对应的key值，存在返回true，否则返回false。

+

是否存在相对应的key值，存在返回true，否则返回false。

参数名

+ + - - - - - - - - - - - @@ -521,7 +505,7 @@ set\(name: string, value: string\): void ``` -### sort +### sort sort\(\): void @@ -536,7 +520,7 @@ sort\(\): void ``` -### keys +### keys keys\(\): IterableIterator @@ -544,16 +528,16 @@ keys\(\): IterableIterator - 返回值： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

name

+

name

string

+

string

是

+

是

将要设置的参数的键值名。

+

将要设置的参数的键值名。

value

+

value

string

+

string

是

+

是

所要设置的参数值。

+

所要设置的参数值。

类型

+ + - - - @@ -570,7 +554,7 @@ keys\(\): IterableIterator ``` -### values +### values values\(\): IterableIterator @@ -578,16 +562,16 @@ values\(\): IterableIterator - 返回值： - -

类型

说明

+

说明

IterableIterator<string>

+

IterableIterator<string>

返回一个所有键值对的name的ES6迭代器。

+

返回一个所有键值对的name的ES6迭代器。

类型

+ + - - - @@ -604,7 +588,7 @@ values\(\): IterableIterator ``` -### \[Symbol.iterator\] +### \[Symbol.iterator\] \[Symbol.iterator\]\(\): IterableIterator<\[string, string\]\> @@ -612,16 +596,16 @@ values\(\): IterableIterator - 返回值： - -

类型

说明

+

说明

IterableIterator<string>

+

IterableIterator<string>

返回一个所有键值对的value的ES6迭代器。

+

返回一个所有键值对的value的ES6迭代器。

类型

+ + - - - @@ -638,7 +622,7 @@ values\(\): IterableIterator ``` -### tostring +### tostring toString\(\): string @@ -646,16 +630,16 @@ toString\(\): string - 返回值： - -

类型

说明

+

说明

IterableIterator<[string, string]>

+

IterableIterator<[string, string]>

返回一个ES6的迭代器。

+

返回一个ES6的迭代器。

类型

+ + - - - @@ -672,159 +656,159 @@ toString\(\): string ``` -## URL +## URL -### 属性 +### 属性 - -

类型

说明

+

说明

string

+

string

返回序列化为字符串的搜索参数，必要时对字符进行百分比编码。

+

返回序列化为字符串的搜索参数，必要时对字符进行百分比编码。

名称

+ + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

参数类型

+

参数类型

可读

+

可读

可写

+

可写

说明

+

说明

hash

+

hash

string

+

string

是

+

是

是

+

是

获取和设置URL的片段部分。

+

获取和设置URL的片段部分。

host

+

host

string

+

string

是

+

是

是

+

是

获取和设置URL的主机部分。

+

获取和设置URL的主机部分。

hostname

+

hostname

string

+

string

是

+

是

是

+

是

获取和设置URL的主机名部分，不带端口。

+

获取和设置URL的主机名部分，不带端口。

href

+

href

string

+

string

是

+

是

是

+

是

获取和设置序列化的URL。

+

获取和设置序列化的URL。

origin

+

origin

string

+

string

是

+

是

否

+

否

获取URL源的只读序列化。

+

获取URL源的只读序列化。

password

+

password

string

+

string

是

+

是

是

+

是

获取和设置URL的密码部分。

+

获取和设置URL的密码部分。

pathname

+

pathname

string

+

string

是

+

是

是

+

是

获取和设置URL的路径部分。

+

获取和设置URL的路径部分。

port

+

port

string

+

string

是

+

是

是

+

是

获取和设置URL的端口部分。

+

获取和设置URL的端口部分。

protocol

+

protocol

string

+

string

是

+

是

是

+

是

获取和设置URL的协议部分。

+

获取和设置URL的协议部分。

search

+

search

string

+

string

是

+

是

是

+

是

获取和设置URL的序列化查询部分。

+

获取和设置URL的序列化查询部分。

searchParams

+

searchParams

URLsearchParams

+

URLsearchParams

是

+

是

否

+

否

获取URLSearchParams表示URL查询参数的对象。

+

获取URLSearchParams表示URL查询参数的对象。

username

+

username

string

+

string

是

+

是

是

+

是

获取和设置URL的用户名部分。

+

获取和设置URL的用户名部分。
-### constructor +### constructor constructor\(url: string, base?: string | URL\) @@ -832,34 +816,34 @@ URL的构造函数。 - 参数： - -

参数名

+ + - - - - - - - - - - - @@ -884,7 +868,7 @@ URL的构造函数。 ``` -### tostring +### tostring toString\(\): string @@ -892,16 +876,16 @@ toString\(\): string - 返回值： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

url

+

url

string

+

string

是

+

是

入参对象。

+

入参对象。

base

+

base

string | URL

+

string | URL

否

+

否

入参字符串或者对象。

-
  • string：字符串
  • URL：字符串或对象
+

入参字符串或者对象。

+
  • string：字符串
  • URL：字符串或对象

类型

+ + - - - @@ -916,7 +900,7 @@ toString\(\): string ``` -### toJSON +### toJSON toJSON\(\): string @@ -924,16 +908,16 @@ toJSON\(\): string - 返回值： - -

类型

说明

+

说明

string

+

string

用于返回网址的字符串序列化。

+

用于返回网址的字符串序列化。

类型

+ + - - - 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 index 616fec05c2a655cfaae4efc1f1b9f83d3de62b11..9cf776e9a760b3b34d241d3d1a42d6991c5d57d8 100644 --- a/zh-cn/application-dev/js-reference/apis/js-apis-util.md +++ b/zh-cn/application-dev/js-reference/apis/js-apis-util.md @@ -1,37 +1,19 @@ -# 字符串编解码 - -- [导入模块](#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' +import util from '@ohos.util'; ``` -## 权限 +## 权限 无 -## util.printf +## util.printf printf\(format: string, ...args: Object\[\]\): string @@ -39,33 +21,33 @@ printf\(format: string, ...args: Object\[\]\): string - 参数： - -

类型

说明

+

说明

string

+

string

用于返回网址的字符串序列化。

+

用于返回网址的字符串序列化。

参数名

+ + - - - - - - - - - - - @@ -73,16 +55,16 @@ printf\(format: string, ...args: Object\[\]\): string - 返回值： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

format

+

format

string

+

string

是

+

是

式样化字符串。

+

式样化字符串。

...args

+

...args

Object[]

+

Object[]

否

+

否

待式样化数据。

+

待式样化数据。

类型

+ + - - - @@ -96,7 +78,7 @@ printf\(format: string, ...args: Object\[\]\): string ``` -## util.getErrorString +## util.getErrorString getErrorString\(errno: number\): string @@ -104,24 +86,24 @@ getErrorString\(errno: number\): string - 参数： - -

类型

说明

+

说明

string

+

string

按特定格式式样化后的字符串。

+

按特定格式式样化后的字符串。

参数名

+ + - - - - - - - @@ -129,16 +111,16 @@ getErrorString\(errno: number\): string - 返回值： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

errno

+

errno

number

+

number

是

+

是

系统发生错误产生的错误码。

+

系统发生错误产生的错误码。

类型

+ + - - - @@ -153,7 +135,7 @@ getErrorString\(errno: number\): string ``` -## util.callbackWrapper +## util.callbackWrapper callbackWrapper\(original: Function\): \(err: Object, value: Object\)=\>void @@ -161,24 +143,24 @@ callbackWrapper\(original: Function\): \(err: Object, value: Object\)=\>void - 参数： - -

类型

说明

+

说明

string

+

string

错误码对应的详细信息。

+

错误码对应的详细信息。

参数名

+ + - - - - - - - @@ -186,16 +168,16 @@ callbackWrapper\(original: Function\): \(err: Object, value: Object\)=\>void - 返回值： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

original

+

original

Function

+

Function

是

+

是

异步函数。

+

异步函数。

类型

+ + - - - @@ -215,7 +197,7 @@ callbackWrapper\(original: Function\): \(err: Object, value: Object\)=\>void ``` -## util.promiseWrapper +## util.promiseWrapper promiseWrapper\(original: \(err: Object, value: Object\) =\> void\): Object @@ -223,24 +205,24 @@ promiseWrapper\(original: \(err: Object, value: Object\) =\> void\): Object - 参数： - -

类型

说明

+

说明

Function

+

Function

返回一个第一个参数是拒绝原因（如果 Promise 已解决，则为 null），第二个参数是已解决的回调函数。

+

返回一个第一个参数是拒绝原因（如果 Promise 已解决，则为 null），第二个参数是已解决的回调函数。

参数名

+ + - - - - - - - @@ -248,16 +230,16 @@ promiseWrapper\(original: \(err: Object, value: Object\) =\> void\): Object - 返回值： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

original

+

original

Function

+

Function

是

+

是

异步函数。

+

异步函数。

类型

+ + - - - @@ -280,60 +262,60 @@ promiseWrapper\(original: \(err: Object, value: Object\) =\> void\): Object ``` -## TextDecoder +## TextDecoder -### 属性 +### 属性 - -

类型

说明

+

说明

Function

+

Function

采用遵循常见的错误优先的回调风格的函数（也就是将 (err, value) => ... 回调作为最后一个参数），并返回一个返回 promise 的版本。

+

采用遵循常见的错误优先的回调风格的函数（也就是将 (err, value) => ... 回调作为最后一个参数），并返回一个返回 promise 的版本。

名称

+ + - - - - - - - - - - - - - - - - - - -

名称

参数类型

+

参数类型

可读

+

可读

可写

+

可写

说明

+

说明

encoding

+

encoding

string

+

string

是

+

是

否

+

否

编码格式。

+

编码格式。

fatal

+

fatal

boolean

+

boolean

是

+

是

否

+

否

是否显示致命错误。

+

是否显示致命错误。

ignoreBOM

+

ignoreBOM

boolean

+

boolean

是

+

是

否

+

否

是否忽略BOM（byte order marker）标记，默认值是false。

+

是否忽略BOM（byte order marker）标记，默认值是false。
-### constructor +### constructor constructor\(encoding?: string, options?: \{ fatal?: boolean; ignoreBOM?: boolean \},\) @@ -341,33 +323,33 @@ TextDecoder的构造函数。 - 参数： - -

参数名

+ + - - - - - - - - - - - @@ -375,33 +357,33 @@ TextDecoder的构造函数。 **表 1** options - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

encoding

+

encoding

string

+

string

否

+

否

编码格式。

+

编码格式。

options

+

options

Object

+

Object

否

+

否

编码相关选项参数，存在两个属性fatal和ignoreBOM。

+

编码相关选项参数，存在两个属性fatal和ignoreBOM。

名称

+ + - - - - - - - - - - - @@ -410,11 +392,11 @@ TextDecoder的构造函数。 - 示例： ``` - var textDecoder = util.TextDecoder("utf-8",{ignoreBOM:true}) + var textDecoder = new util.TextDecoder("utf-8",{ignoreBOM:true}); ``` -### decode +### decode decode\(input: Uint8Array, options?:\{stream?:false\}\): string @@ -422,33 +404,33 @@ decode\(input: Uint8Array, options?:\{stream?:false\}\): string - 参数： - -

名称

参数类型

+

参数类型

必填

+

必填

说明

+

说明

fatal

+

fatal

boolean

+

boolean

否

+

否

是否显示致命错误。

+

是否显示致命错误。

ignoreBOM

+

ignoreBOM

boolean

+

boolean

否

+

否

是否忽略BOM标记。

+

是否忽略BOM标记。

参数名

+ + - - - - - - - - - - - @@ -456,24 +438,24 @@ decode\(input: Uint8Array, options?:\{stream?:false\}\): string **表 2** options - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

input

+

input

Uint8Array

+

Uint8Array

是

+

是

数字。

+

符合格式需要解码的数组。

options

+

options

Object

+

Object

否

+

否

解码相关选项参数。

+

解码相关选项参数。

名称

+ + - - - - - - - @@ -481,16 +463,16 @@ decode\(input: Uint8Array, options?:\{stream?:false\}\): string - 返回值： - -

名称

参数类型

+

参数类型

必填

+

必填

说明

+

说明

stream

+

stream

boolean

+

boolean

否

+

否

在随后的decode()调用中是否跟随附加数据。如果以块的形式处理数据，则设置为true；如果处理最后的块或数据未分块，则设置为false。默认为false。

+

在随后的decode()调用中是否跟随附加数据块，如果以块的形式处理数据，则设置为true；如果处理最后的数据块或数据未分块，则设置为false。默认为false。

类型

+ + - - - @@ -499,7 +481,7 @@ decode\(input: Uint8Array, options?:\{stream?:false\}\): string - 示例： ``` - var textDecoder = util.TextDecoder("utf-8",{ignoreBOM:true}); + var textDecoder = new util.TextDecoder("utf-8",{ignoreBOM:true}); var result = new Uint8Array(6); result[0] = 0xEF; result[1] = 0xBB; @@ -516,38 +498,38 @@ decode\(input: Uint8Array, options?:\{stream?:false\}\): string ``` -## TextEncoder +## TextEncoder -### 属性 +### 属性 - -

类型

说明

+

说明

string

+

string

解码后的数据。

+

解码后的数据。

名称

+ + - - - - - - - - -

名称

参数类型

+

参数类型

可读

+

可读

可写

+

可写

说明

+

说明

encoding

+

encoding

string

+

string

是

+

是

否

+

否

编码格式，默认值是utf-8。

+

编码格式，默认值是utf-8。
-### constructor +### constructor constructor\(\) @@ -556,11 +538,11 @@ TextEncoder的构造函数。 - 示例： ``` - var textEncoder = new util.TextEncoder() + var textEncoder = new util.TextEncoder(); ``` -### encode +### encode encode\(input?: string\): Uint8Array @@ -568,24 +550,24 @@ encode\(input?: string\): Uint8Array - 参数： - -

参数名

+ + - - - - - - - @@ -593,16 +575,16 @@ encode\(input?: string\): Uint8Array - 返回值： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

input

+

input

string

+

string

是

+

是

需要编码的格式。

+

需要编码的字符串。

类型

+ + - - - @@ -611,13 +593,13 @@ encode\(input?: string\): Uint8Array - 示例： ``` - var textEncoder = new util.TextEncoder() + var textEncoder = new util.TextEncoder(); var result = new Uint8Array(buffer); result = textEncoder.encode("\uD800¥¥"); ``` -### encodeInto +### encodeInto encodeInto\(input: string, dest: Uint8Array,\):\{ read: number; written: number \} @@ -625,33 +607,33 @@ encodeInto\(input: string, dest: Uint8Array,\):\{ read: number; written: number - 参数： - -

类型

说明

+

说明

Uint8Array

+

Uint8Array

返回编码后的文本。

+

返回编码后的文本。

参数名

+ + - - - - - - - - - - - @@ -659,16 +641,16 @@ encodeInto\(input: string, dest: Uint8Array,\):\{ read: number; written: number - 返回值： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

input

+

input

string

+

string

是

+

是

需要编码的格式。

+

需要编码的字符串。

dest

+

dest

Uint8Array

+

Uint8Array

是

+

是

Uint8Array对象实例，用于将生成的UTF-8编码文本放入其中

+

Uint8Array对象实例，用于将生成的UTF-8编码文本放入其中。

类型

+ + - - - @@ -677,10 +659,10 @@ encodeInto\(input: string, dest: Uint8Array,\):\{ read: number; written: number - 示例： ``` - var that = new util.TextEncoder() - var buffer = new ArrayBuffer(4) - this.dest = new Uint8Array(buffer) - var result = that.encodeInto("abcd", this.dest) + 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 deleted file mode 100644 index 3f317c94031f1c5f52f2032487eaa66e5c541b86..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/apis/js-apis-vibrate.md +++ /dev/null @@ -1,409 +0,0 @@ -# 振动 - -- [导入模块](#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 - -按照指定持续时间触发马达振动。 - -**参数：** - - -

类型

说明

+

说明

Uint8Array

+

Uint8Array

返回编码后的文本。

+

返回编码后的文本。
- - - - - - - - - - - -

参数名

-

类型

-

必填

-

说明

-

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-vibrator.md b/zh-cn/application-dev/js-reference/apis/js-apis-vibrator.md new file mode 100644 index 0000000000000000000000000000000000000000..12793dca4f1da1ac8488f369f4acd191a7e3f0cb --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis-vibrator.md @@ -0,0 +1,398 @@ +# 振动 + +>![](../../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 index c5da18f8dbe956aa312c02c7297ba1e8f7d25ddd..30bb07d2084b19cfe6cd70392cd1588c4e8f5516 100644 --- a/zh-cn/application-dev/js-reference/apis/js-apis-worker.md +++ b/zh-cn/application-dev/js-reference/apis/js-apis-worker.md @@ -1,130 +1,94 @@ -# 启动一个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) - +# 启动一个worker >![](../../public_sys-resources/icon-note.gif) **说明：** >从 API Version 7 开始支持。 -## 导入模块 +## 导入模块 ``` import worker from '@ohos.worker'; ``` -## 权限 +## 权限 无 -## 属性 +## 属性 - -

名称

+ + - - - - - - - - -

名称

参数类型

+

参数类型

可读

+

可读

可写

+

可写

说明

+

说明

parentPort

+

parentPort

DedicatedWorkerGlobalScope

+

DedicatedWorkerGlobalScope

是

+

是

是

+

是

worker线程用于与宿主线程通信的对象

+

worker线程用于与宿主线程通信的对象
-## WorkerOptions +## WorkerOptions worker构造函数函数的选项信息，用于为worker添加其他信息。 - -

名称

+ + - - - - - - - - - - - - - -

名称

参数类型

+

参数类型

可读

+

可读

可写

+

可写

说明

+

说明

type

+

type

"classic"

+

"classic"

是

+

是

是

+

是

按照指定方式执行脚本。

+

按照指定方式执行脚本。

name

+

name

string

+

string

是

+

是

是

+

是

worker的名称。

+

worker的名称。
-## constructor +## Worker + +使用以下方法前，均需先构造worker实例，Worker类继承[EventTarget](#section256019311465)。 + +### constructor constructor\(scriptURL: string, options?: WorkerOptions\) @@ -132,33 +96,33 @@ worker构造函数。 - 参数： - -

参数名

+ + - - - - - - - - - - - @@ -166,16 +130,16 @@ worker构造函数。 - 返回值： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

scriptURL

+

scriptURL

string

+

string

是

+

是

worker执行脚本的url，路径规范：若DevEco新建工程在pages同级下没有workers目录，需要新建workers目录，将脚本文件放入workers目录。

+

worker执行脚本的url，路径规范：若DevEco新建工程在pages同级下没有workers目录，需要新建workers目录，将脚本文件放入workers目录。

options

+

options

WorkerOptions

+

WorkerOptions

否

+

否

worker构造的选项。

+

worker构造的选项。

参数名

+ + - - - @@ -185,15 +149,11 @@ worker构造函数。 ``` import worker from '@ohos.worker'; - const worker = new worker.Worker("workers/worker.js", {name:"first worker"} + const worker = new worker.Worker("workers/worker.js", {name:"first worker"}); ``` -## Worker - -使用以下方法前，均需先构造worker实例，Worker类继承[EventTarget](#zh-cn_topic_0000001210206047_section3283104561014)。 - -### postMessage +### postMessage postMessage\(message: Object, options?: PostMessageOptions\): void @@ -201,33 +161,33 @@ postMessage\(message: Object, options?: PostMessageOptions\): void - 参数： - -

参数名

说明

+

说明

worker

+

worker

执行Worker构造函数生成的Worker对象，失败则返回undefined。

+

执行Worker构造函数生成的Worker对象，失败则返回undefined。

参数名

+ + - - - - - - - - - - - @@ -237,16 +197,16 @@ postMessage\(message: Object, options?: PostMessageOptions\): void ``` 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"); + worker.postMessage("hello world"); - const worker = new worker.Worker("workers/worker.js") + const worker = new worker.Worker("workers/worker.js"); var buffer = new ArrayBuffer(8); worker.postMessage(buffer, [buffer]); ``` -### on +### on on\(type: string, listener: EventListener\): void @@ -254,33 +214,33 @@ on\(type: string, listener: EventListener\): void - 参数： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

message

+

message

Object

+

Object

是

+

是

发送至worker的数据。

+

发送至worker的数据。

options

+

options

PostMessageOptions

+

PostMessageOptions

否

+

否

可转移对象是 ArrayBuffer 的实例对象。transferList数组中不可传入null。

+

可转移对象是 ArrayBuffer 的实例对象。transferList数组中不可传入null。

参数名

+ + - - - - - - - - - - - @@ -292,12 +252,12 @@ on\(type: string, listener: EventListener\): void import worker from '@ohos.worker'; const worker = new worker.Worker("workers/worker.js") worker.on("alert", (e)=>{ - console.log("alert listener callback); + console.log("alert listener callback"); }) ``` -### once +### once once\(type: string, listener: EventListener\): void @@ -305,33 +265,33 @@ once\(type: string, listener: EventListener\): void - 参数： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

string

+

string

是

+

是

监听事件的type。

+

监听事件的type。

listener

+

listener

EventListener

+

EventListener

是

+

是

回调的事件。

+

回调的事件。

参数名

+ + - - - - - - - - - - - @@ -341,14 +301,14 @@ once\(type: string, listener: EventListener\): void ``` import worker from '@ohos.worker'; - const worker = new worker.Worker("workers/worker.js") + const worker = new worker.Worker("workers/worker.js"); worker.once("alert", (e)=>{ - console.log("alert listener callback); + console.log("alert listener callback"); }) ``` -### off +### off off\(type: string, listener?: EventListener\): void @@ -356,33 +316,33 @@ off\(type: string, listener?: EventListener\): void - 参数： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

string

+

string

是

+

是

监听事件的type。

+

监听事件的type。

listener

+

listener

EventListener

+

EventListener

是

+

是

回调的事件。

+

回调的事件。

参数名

+ + - - - - - - - - - - - @@ -392,12 +352,12 @@ off\(type: string, listener?: EventListener\): void ``` import worker from '@ohos.worker'; - const worker = new worker.Worker("workers/worker.js") - worker.off("alert") + const worker = new worker.Worker("workers/worker.js"); + worker.off("alert"); ``` -### terminate +### terminate terminate\(\): void @@ -412,7 +372,7 @@ terminate\(\): void ``` -### onexit +### onexit onexit?: \(code: number\) =\> void @@ -420,24 +380,24 @@ Worker对象的onexit属性表示worker退出时被调用的事件处理程序 - 参数： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

string

+

string

是

+

是

需要删除事件的type。

+

需要删除事件的type。

listener

+

listener

EventListener

+

EventListener

否

+

否

需要删除的回调的事件。

+

需要删除的回调的事件。

参数名

+ + - - - - - - - @@ -454,7 +414,7 @@ Worker对象的onexit属性表示worker退出时被调用的事件处理程序 ``` -### onerror +### onerror onerror?: \(err: ErrorEvent\) =\> void @@ -462,24 +422,24 @@ Worker对象的onerror属性表示worker在执行过程中发生异常被调用 - 参数： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

code

+

code

number

+

number

否

+

否

worker退出的code。

+

worker退出的code。

参数名

+ + - - - - - - - @@ -496,7 +456,7 @@ Worker对象的onerror属性表示worker在执行过程中发生异常被调用 ``` -### onmessage +### onmessage onmessage?: \(event: MessageEvent\) =\> void @@ -504,24 +464,24 @@ Worker对象的onmessage属性表示宿主线程接收到来自其创建的worke - 参数： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

err

+

err

ErrorEvent

+

ErrorEvent

否

+

否

异常数据。

+

异常数据。

参数名

+ + - - - - - - - @@ -538,7 +498,7 @@ Worker对象的onmessage属性表示宿主线程接收到来自其创建的worke ``` -### onmessageerror +### onmessageerror onmessageerror?: \(event: MessageEvent\) =\> void @@ -546,24 +506,24 @@ Worker对象的onmessageerror属性表示当 Worker 对象接收到一条无法 - 参数： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

event

+

event

MessageEvent

+

MessageEvent

否

+

否

收到的worker消息数据。

+

收到的worker消息数据。

参数名

+ + - - - - - - - @@ -580,9 +540,9 @@ Worker对象的onmessageerror属性表示当 Worker 对象接收到一条无法 ``` -## EventTarget +## EventTarget -### addEventListener +### addEventListener addEventListener\(type: string, listener: EventListener\): void @@ -590,33 +550,33 @@ addEventListener\(type: string, listener: EventListener\): void - 参数： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

event

+

event

MessageEvent

+

MessageEvent

否

+

否

异常数据。

+

异常数据。

参数名

+ + - - - - - - - - - - - @@ -628,12 +588,12 @@ addEventListener\(type: string, listener: EventListener\): void import worker from '@ohos.worker'; const worker = new worker.Worker("workers/worker.js") worker.addEventListener("alert", (e)=>{ - console.log("alert listener callback); + console.log("alert listener callback"); }) ``` -### removeEventListener +### removeEventListener removeEventListener\(type: string, callback?: EventListener\): void @@ -641,33 +601,33 @@ removeEventListener\(type: string, callback?: EventListener\): void - 参数： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

string

+

string

是

+

是

监听事件的type。

+

监听事件的type。

listener

+

listener

EventListener

+

EventListener

是

+

是

回调的事件。

+

回调的事件。

参数名

+ + - - - - - - - - - - - @@ -682,7 +642,7 @@ removeEventListener\(type: string, callback?: EventListener\): void ``` -### dispatchEvent +### dispatchEvent dispatchEvent\(event: Event\): boolean @@ -690,24 +650,24 @@ dispatchEvent\(event: Event\): boolean - 参数： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

type

+

type

string

+

string

是

+

是

需要删除事件的type。

+

需要删除事件的type。

callback

+

callback

EventListener

+

EventListener

否

+

否

需要删除的回调的事件。

+

需要删除的回调的事件。

参数名

+ + - - - - - - - @@ -715,16 +675,16 @@ dispatchEvent\(event: Event\): boolean - 返回值： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

event

+

event

Event

+

Event

是

+

是

需要分发的事件。

+

需要分发的事件。

参数名

+ + - - - @@ -739,7 +699,7 @@ dispatchEvent\(event: Event\): boolean ``` -### removeAllListener +### removeAllListener removeAllListener\(\): void @@ -754,11 +714,11 @@ removeAllListener\(\): void ``` -## DedicatedWorkerGlobalScope +## DedicatedWorkerGlobalScope -worker线程用于与宿主线程通信的类，通过postMessage接口发送消息给宿主线程、close接口关闭worker线程，DedicatedWorkerGlobalScope类继承[WorkerGlobalScope](#zh-cn_topic_0000001210206047_section12882825611)。 +worker线程用于与宿主线程通信的类，通过postMessage接口发送消息给宿主线程、close接口关闭worker线程，DedicatedWorkerGlobalScope类继承[WorkerGlobalScope](#section12882825611)。 -### postMessage +### postMessage postMessage\(message: Object, options?: PostMessageOptions\): void @@ -766,33 +726,33 @@ worker向宿主线程发送消息。 - 参数： - -

参数名

说明

+

说明

boolean

+

boolean

分发的结果，false表示分发失败。

+

分发的结果，false表示分发失败。

参数名

+ + - - - - - - - - - - - @@ -801,7 +761,7 @@ worker向宿主线程发送消息。 - 示例： ``` - main.js + // main.js import worker from '@ohos.worker'; const worker = new worker.Worker("workers/worker.js") worker.postMessage("hello world") @@ -809,7 +769,7 @@ worker向宿主线程发送消息。 console.log("receive data from worker.js") } - worker.js + // worker.js import worker from "@ohos.worker"; const parentPort = worker.parentPort; parentPort.onmessage = function(e){ @@ -818,7 +778,7 @@ worker向宿主线程发送消息。 ``` -### close +### close close\(\): void @@ -827,11 +787,11 @@ close\(\): void - 示例： ``` - main.js + // main.js import worker from '@ohos.worker'; const worker = new worker.Worker("workers/worker.js") - worker.js + // worker.js import worker from "@ohos.worker"; const parentPort = worker.parentPort; parentPort.onmessage = function(e) { @@ -840,7 +800,7 @@ close\(\): void ``` -### onmessage +### onmessage onmessage?: \(event: MessageEvent\) =\> void @@ -848,24 +808,24 @@ DedicatedWorkerGlobalScope的onmessage属性表示worker线程收到来自其宿 - 参数： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

message

+

message

Object

+

Object

是

+

是

发送至worker的数据。

+

发送至worker的数据。

options

+

options

PostMessageOptions

+

PostMessageOptions

否

+

否

可转移对象是ArrayBuffer的实例对象。transferList数组中不可传入null。

+

可转移对象是ArrayBuffer的实例对象。transferList数组中不可传入null。

参数名

+ + - - - - - - - @@ -874,12 +834,12 @@ DedicatedWorkerGlobalScope的onmessage属性表示worker线程收到来自其宿 - 示例： ``` - main.js + // main.js import worker from '@ohos.worker'; const worker = new worker.Worker("workers/worker.js") worker.postMessage("hello world") - worker.js + // worker.js import worker from "@ohos.worker"; const parentPort = worker.parentPort; parentPort.onmessage = function(e) { @@ -888,7 +848,7 @@ DedicatedWorkerGlobalScope的onmessage属性表示worker线程收到来自其宿 ``` -### onmessageerror +### onmessageerror onmessageerror?: \(event: MessageEvent\) =\> void @@ -896,24 +856,24 @@ DedicatedWorkerGlobalScope的onmessageerror属性表示当 Worker 对象接收 - 参数： - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

event

+

event

MessageEvent

+

MessageEvent

否

+

否

收到的worker消息数据。

+

收到的worker消息数据。

参数名

+ + - - - - - - - @@ -922,11 +882,11 @@ DedicatedWorkerGlobalScope的onmessageerror属性表示当 Worker 对象接收 - 示例： ``` - main.js + // main.js import worker from '@ohos.worker'; const worker = new worker.Worker("workers/worker.js") - worker.js + // worker.js import worker from "@ohos.worker"; const parentPort = worker.parentPort; parentPort.onmessageerror= function(e) { @@ -935,107 +895,107 @@ DedicatedWorkerGlobalScope的onmessageerror属性表示当 Worker 对象接收 ``` -## PostMessageOptions +## PostMessageOptions 明确数据传递过程中需要转移所有权对象的类，传递所有权的对象必须是ArrayBuffer。 - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

event

+

event

MessageEvent

+

MessageEvent

否

+

否

异常数据。

+

异常数据。

名称

+ + - - - - - - - - -

名称

参数类型

+

参数类型

可读

+

可读

可写

+

可写

说明

+

说明

transfer

+

transfer

Object[]

+

Object[]

是

+

是

是

+

是

ArrayBuffer数组，用于传递所有权。

+

ArrayBuffer数组，用于传递所有权。
-## Event +## Event 事件类。 - -

名称

+ + - - - - - - - - - - - - - -

名称

参数类型

+

参数类型

可读

+

可读

可写

+

可写

说明

+

说明

type

+

type

string

+

string

是

+

是

否

+

否

指定事件的type。

+

指定事件的type。

timeStamp

+

timeStamp

number

+

number

是

+

是

否

+

否

事件创建时的时间戳（精度为毫秒）。

+

事件创建时的时间戳（精度为毫秒）。
-## EventListener +## EventListener 事件监听类。 -### \(evt: Event\): void | Promise +### \(evt: Event\): void | Promise 执行的回调函数。 - 参数： - -

参数名

+ + - - - - - - - @@ -1043,16 +1003,16 @@ DedicatedWorkerGlobalScope的onmessageerror属性表示当 Worker 对象接收 - 返回值 - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

evt

+

evt

Event

+

Event

是

+

是

回调的事件类。

+

回调的事件类。

参数名

+ + - - - @@ -1062,164 +1022,164 @@ DedicatedWorkerGlobalScope的onmessageerror属性表示当 Worker 对象接收 ``` import worker from '@ohos.worker'; - const worker = new worker.Worker("workers/worker.js") + const worker = new worker.Worker("workers/worker.js"); worker.addEventListener("alert", (e)=>{ - console.log("alert listener callback); + console.log("alert listener callback"); }) ``` -## ErrorEvent +## ErrorEvent -错误事件类，用于表示worker执行过程中出现异常的详细信息，ErrorEvent类继承[Event](#zh-cn_topic_0000001210206047_section1674694018507)。 +错误事件类，用于表示worker执行过程中出现异常的详细信息，ErrorEvent类继承[Event](#section1674694018507)。 - -

参数名

说明

+

说明

void | Promise<void>

+

void | Promise<void>

无返回值或者以Promise形式返回。

+

无返回值或者以Promise形式返回。

名称

+ + - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

参数类型

+

参数类型

可读

+

可读

可写

+

可写

说明

+

说明

message

+

message

string

+

string

是

+

是

否

+

否

异常发生的错误信息。

+

异常发生的错误信息。

filename

+

filename

string

+

string

是

+

是

否

+

否

出现异常所在的文件。

+

出现异常所在的文件。

lineno

+

lineno

number

+

number

是

+

是

否

+

否

异常所在的行数。

+

异常所在的行数。

colno

+

colno

number

+

number

是

+

是

否

+

否

异常所在的列数。

+

异常所在的列数。

error

+

error

Object

+

Object

是

+

是

否

+

否

异常类型。

+

异常类型。
-## MessageEvent +## MessageEvent 消息类，持有worker线程间传递的数据。 - -

名称

+ + - - - - - - - - -

名称

参数类型

+

参数类型

可读

+

可读

可写

+

可写

说明

+

说明

data

+

data

T

+

T

是

+

是

否

+

否

线程间传递的数据。

+

线程间传递的数据。
-## WorkerGlobalScope +## WorkerGlobalScope -worker线程自身的运行环境，WorkerGlobalScope类继承[EventTarget](#zh-cn_topic_0000001210206047_section3283104561014)。 +worker线程自身的运行环境，WorkerGlobalScope类继承[EventTarget](#section256019311465)。 -### 属性 +### 属性 - -

名称

+ + - - - - - - - - - - - - - -

名称

参数类型

+

参数类型

可读

+

可读

可写

+

可写

说明

+

说明

name

+

name

string

+

string

是

+

是

否

+

否

worker的名字，有new Worker时指定。

+

worker的名字，有new Worker时指定。

self

+

self

WorkerGlobalScope & typeof globalThis

+

WorkerGlobalScope & typeof globalThis

是

+

是

否

+

否

WorkerGlobalScope本身。

+

WorkerGlobalScope本身。
-### onerror +### onerror onerror?: \(ev: ErrorEvent\) =\> void @@ -1227,24 +1187,24 @@ WorkerGlobalScope的onerror属性表示worker在执行过程中发生异常被 - 参数： - -

参数名

+ + - - - - - - - @@ -1253,11 +1213,11 @@ WorkerGlobalScope的onerror属性表示worker在执行过程中发生异常被 - 示例： ``` - main.js + // main.js import worker from '@ohos.worker'; const worker = new worker.Worker("workers/worker.js") - worker.js + // worker.js import worker from "@ohos.worker"; const parentPort = worker.parentPort parentPort.onerror = function(e){ diff --git a/zh-cn/application-dev/js-reference/apis/js-apis.md b/zh-cn/application-dev/js-reference/apis/js-apis.md new file mode 100644 index 0000000000000000000000000000000000000000..19750b9bb523302ff9d81c9a163b07756f858f49 --- /dev/null +++ b/zh-cn/application-dev/js-reference/apis/js-apis.md @@ -0,0 +1,21 @@ +# 接口 + +- **[Ability框架](js-apis-ability.md)** + +- **[资源管理](js-apis-resource.md)** + +- **[媒体](js-apis-multmedia.md)** + +- **[数据管理](js-apis-data.md)** + +- **[账号管理](js-apis-account.md)** + +- **[电话服务](js-apis-telephony.md)** + +- **[设备管理](js-apis-device-mgmt.md)** + +- **[基本功能](js-apis-basic-features.md)** + +- **[语言基础类库](js-apis-base-library.md)** + + diff --git a/zh-cn/application-dev/js-reference/component/Readme-CN.md b/zh-cn/application-dev/js-reference/component/Readme-CN.md deleted file mode 100644 index 006e4f6126ff6eca16bb2acd57e4d2d70f7b7c87..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/Readme-CN.md +++ /dev/null @@ -1,109 +0,0 @@ -# 组件 - -- [通用](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-svg.md) - - [通用属性](js-components-svg-common-attributes.md) - - [svg](js-components-svg.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/component/figures/GIF.gif b/zh-cn/application-dev/js-reference/component/figures/GIF.gif deleted file mode 100644 index fa77bb91654623c2de68a19e7f9f95bbd1d029bc..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/component/figures/GIF.gif and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/component/figures/GIF6.gif b/zh-cn/application-dev/js-reference/component/figures/GIF6.gif deleted file mode 100755 index da70e3d6c3f1392d7fc7071a83de165570f59559..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/component/figures/GIF6.gif and /dev/null 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 deleted file mode 100644 index a6ce56691c8efaae822e72ebf987a45c122c1839..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125128.gif and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125266.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125266.png deleted file mode 100644 index 612bc55f4aa5e832133801edf61cef01ffd1bc64..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125266.png and /dev/null 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 deleted file mode 100644 index 4cb2c24831d622942c9b591fc8e9df8a9d87e7c6..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284986.png and /dev/null 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 deleted file mode 100644 index 0ae3a6bd3ae1e298cbc909952b29b3762313a91c..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152748606.png and /dev/null 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 deleted file mode 100644 index e4daaa2ddaeec216adbcd71331494dd38bc67892..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152773860.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164787.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164787.png deleted file mode 100644 index ee003430ca365892a94c0dbe3e7ba0879f83059d..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164787.png and /dev/null differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164931.png b/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164931.png deleted file mode 100644 index 91c55d3677922b76ac78c4e56c87ef90b5b31fc2..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164931.png and /dev/null 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 deleted file mode 100644 index 02f47f31b344eb15cf9cd145f5fa8cbf6f90d233..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324705.gif and /dev/null 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 deleted file mode 100644 index 4f5e166b9316ea08114fd53fa2b193c65fd43445..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001196052269.gif and /dev/null 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 deleted file mode 100644 index 7a4dbacacb6b1b543a04268afd81a8b8c2f56974..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001198530395.png and /dev/null differ 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 deleted file mode 100644 index 9cf551cd2e746b91abce80ad54a2b7357051c47f..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-basic-button.md +++ /dev/null @@ -1,418 +0,0 @@ -# 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)外，还支持如下属性： - - -

参数名

类型

+

类型

必填

+

必填

说明

+

说明

ev

+

ev

ErrorEvent

+

ErrorEvent

否

+

否

异常数据。

+

异常数据。
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

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 deleted file mode 100644 index 6af8f55d884deba57a84399707bfa0e4da29326f..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-basic-chart.md +++ /dev/null @@ -1,1163 +0,0 @@ -# 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 deleted file mode 100644 index c8c4c89ec8a4a7f447b1127e58e0745cf9979422..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-basic-divider.md +++ /dev/null @@ -1,254 +0,0 @@ -# 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 deleted file mode 100644 index 1b3bff40f3b88f8f1871e64e4cbbc840da60e2df..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-basic-image-animator.md +++ /dev/null @@ -1,425 +0,0 @@ -# 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 deleted file mode 100644 index bf7117131b21e4d83c871bbabf3214b52c7df1e0..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-basic-image.md +++ /dev/null @@ -1,250 +0,0 @@ -# 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 deleted file mode 100644 index ec56778aa963c74abb32404abbb8ffce50ab838f..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-basic-input.md +++ /dev/null @@ -1,614 +0,0 @@ -# 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 deleted file mode 100644 index 4c9e5a13b3f0a9e5f8df959d67533634c0100e58..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-basic-label.md +++ /dev/null @@ -1,308 +0,0 @@ -# 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 deleted file mode 100644 index 6edd9cb1cfaecc23de7ca90d96521e12c05ebf09..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-basic-marquee.md +++ /dev/null @@ -1,290 +0,0 @@ -# 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 deleted file mode 100644 index 1b1699e5db364a57cfcd6e7e854cd0a113b16750..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-basic-menu.md +++ /dev/null @@ -1,272 +0,0 @@ -# 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 deleted file mode 100644 index d73f5c89444f7c73ae988aeb2e238aec029969b2..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-basic-option.md +++ /dev/null @@ -1,177 +0,0 @@ -# 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 deleted file mode 100644 index a91181aadc3e2b5dd93a7a4f8e7c84c38008080f..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-basic-picker-view.md +++ /dev/null @@ -1,644 +0,0 @@ -# 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 deleted file mode 100644 index 8963b36ee90767652a37e66d7813010fb3635efd..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-basic-picker.md +++ /dev/null @@ -1,845 +0,0 @@ -# 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 deleted file mode 100644 index 300e7f442a9332f4972515e787ab866ec5e35719..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-basic-piece.md +++ /dev/null @@ -1,130 +0,0 @@ -# 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 deleted file mode 100644 index f4b677f5dd002194ba8a387aa8deed847e5afd5b..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-basic-progress.md +++ /dev/null @@ -1,521 +0,0 @@ -# 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 deleted file mode 100644 index 62b0c99b314ebccdd48af96266901515d5c51ea2..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-basic-qrcode.md +++ /dev/null @@ -1,126 +0,0 @@ -# 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 deleted file mode 100644 index 497c2617130f6ef5f538d18e02fac924b6cb3cef..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-basic-rating.md +++ /dev/null @@ -1,240 +0,0 @@ -# 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-search.md b/zh-cn/application-dev/js-reference/component/js-components-basic-search.md deleted file mode 100644 index 98dbe2c4858c7afa68c137c70d4b9deef2a5e906..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-basic-search.md +++ /dev/null @@ -1,302 +0,0 @@ -# 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 deleted file mode 100644 index 1d7dc10adf15d418cab9d59c802d55a721c7395e..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-basic-select.md +++ /dev/null @@ -1,115 +0,0 @@ -# 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 deleted file mode 100644 index 1c99689ec04712d4a0ad8971960c2d83c1e111d7..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-basic-slider.md +++ /dev/null @@ -1,287 +0,0 @@ -# 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 deleted file mode 100644 index c7b5aa6693fa86182dab60a077326ab2dc452a05..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-basic-span.md +++ /dev/null @@ -1,166 +0,0 @@ -# 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 deleted file mode 100644 index f8109167b02b4ae4a8050330bda5534ce08379b1..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-basic-switch.md +++ /dev/null @@ -1,269 +0,0 @@ -# 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 deleted file mode 100644 index 07a83eb1d1aee2123f254eb276500c502c9ab8e9..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-basic-text.md +++ /dev/null @@ -1,363 +0,0 @@ -# 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 deleted file mode 100644 index 63fb44b4cfa2b0646142125bdfd9a9bfe0f58de3..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-basic-textarea.md +++ /dev/null @@ -1,381 +0,0 @@ -# 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 deleted file mode 100644 index e6c176b606a0da7ba84fc03c59add54b5c99b303..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-basic-toggle.md +++ /dev/null @@ -1,240 +0,0 @@ -# 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 deleted file mode 100644 index 8b026fc43593b7aaedf341f93b51489d879925e9..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-basic-toolbar-item.md +++ /dev/null @@ -1,294 +0,0 @@ -# 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-canvas-canvas.md b/zh-cn/application-dev/js-reference/component/js-components-canvas-canvas.md deleted file mode 100644 index 32ecd5ccae30cc712e9bfab917996804dfd35dd7..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-canvas-canvas.md +++ /dev/null @@ -1,90 +0,0 @@ -# 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/component/js-components-canvas-canvasgradient.md b/zh-cn/application-dev/js-reference/component/js-components-canvas-canvasgradient.md deleted file mode 100644 index 0b12b625b2e2faaee6fd315f0ec630eac87b0a6b..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-canvas-canvasgradient.md +++ /dev/null @@ -1,53 +0,0 @@ -# CanvasGradient对象 - -- [addColorStop\(\)](#zh-cn_topic_0000001173164733_section12691015917) - -渐变对象。 - -## addColorStop\(\) - -设置渐变断点值，包括偏移和颜色。 - -- 参数 - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

offset

-

number

-

设置渐变点距离起点的位置占总体长度的比例，范围为0到1。

-

color

-

string

-

设置渐变的颜色。

-
- -- 返回值 - - 无 - -- 示例 - - ``` - const gradient = ctx.createLinearGradient(0,0,100,0); - gradient.addColorStop(0,'#00ffff'); - gradient.addColorStop(1,'#ffff00'); - ``` - - ![](figures/zh-cn_image_0000001152610806.png) - - diff --git a/zh-cn/application-dev/js-reference/component/js-components-canvas-canvasrenderingcontext2d.md b/zh-cn/application-dev/js-reference/component/js-components-canvas-canvasrenderingcontext2d.md deleted file mode 100644 index a8472541e7eeca628dbae611c06b1e0d306e9b42..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-canvas-canvasrenderingcontext2d.md +++ /dev/null @@ -1,3018 +0,0 @@ -# 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画布组件上进行绘制，绘制对象可以是矩形、文本、图片等。 - -- 示例 - - ``` - -
- - - -
- ``` - - ``` - // xxx.js - export default { - handleClick() { - const el = this.$refs.canvas1; - const ctx = el.getContext('2d'); - ctx.beginPath(); - 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_0000001127125160.png) - -- 示意图（开启抗锯齿） - - ![](figures/zh-cn_image_0000001127125162.png) - - -## fillRect\(\) - -填充一个矩形。 - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

x

-

number

-

指定矩形左上角点的x坐标。

-

y

-

number

-

指定矩形左上角点的y坐标。

-

width

-

number

-

指定矩形的宽度。

-

height

-

number

-

指定矩形的高度。

-
- -- 返回值 - - 无 - -- 示例 - - ``` - ctx.fillRect(20, 20, 200, 150); - ``` - - ![](figures/zh-cn_image_0000001127125134.png) - - -## fillStyle - -指定绘制的填充色。 - -- 参数 - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

color

-

<color>

-

设置填充区域的颜色。

-

gradient

-

CanvasGradient

-

渐变对象，使用 createLinearGradient()方法创建。

-

pattern

-

CanvasPattern

-

使用 createPattern()方法创建。

-
- -- 返回值 - - 无 - -- 示例 - - ``` - ctx.fillStyle = '#0000ff'; - ctx.fillRect(20, 20, 150, 100); - ``` - - ![](figures/zh-cn_image_0000001127284942.png) - - -## clearRect\(\) - -删除指定区域内的绘制内容。 - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

x

-

number

-

指定矩形上的左上角x坐标。

-

y

-

number

-

指定矩形上的左上角y坐标。

-

width

-

number

-

指定矩形的宽度。

-

height

-

number

-

指定矩形的高度。

-
- -- 返回值 - - 无 - -- 示例 - - ``` - 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\(\) - -绘制具有边框的矩形，矩形内部不填充。 - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

x

-

number

-

指定矩形的左上角x坐标。

-

y

-

number

-

指定矩形的左上角y坐标。

-

width

-

number

-

指定矩形的宽度。

-

height

-

number

-

指定矩形的高度。

-
- -- 返回值 - - 无 - -- 示例 - - ``` - ctx.strokeRect(30, 30, 200, 150); - ``` - - ![](figures/zh-cn_image_0000001173164817.png) - - -## fillText\(\) - -绘制填充类文本。 - -- 参数 - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

text

-

string

-

需要绘制的文本内容。

-

x

-

number

-

需要绘制的文本的左下角x坐标。

-

y

-

number

-

需要绘制的文本的左下角y坐标。

-
- -- 返回值 - - 无 - -- 示例 - - ``` - ctx.font = '35px sans-serif'; - ctx.fillText("Hello World!", 20, 60); - ``` - - ![](figures/zh-cn_image_0000001173164833.png) - - -## strokeText\(\) - -绘制描边类文本。 - -- 参数 - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

text

-

string

-

需要绘制的文本内容。

-

x

-

number

-

需要绘制的文本的左下角x坐标。

-

y

-

number

-

需要绘制的文本的左下角y坐标。

-
- -- 返回值 - - 无 - -- 示例 - - ``` - ctx.font = '25px sans-serif'; - ctx.strokeText("Hello World!", 20, 60); - ``` - - ![](figures/zh-cn_image_0000001127125156.png) - - -## measureText\(\) - -该方法返回一个文本测算的对象，通过该对象可以获取指定文本的宽度值。 - -- 参数 - - - - - - - - - - - - -

参数

-

类型

-

描述

-

text

-

string

-

需要进行测量的文本。

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

类型

-

说明

-

TextMetrics

-

包含指定字体的宽度，该宽度可以通过TextMetrics.width来获取。

-
- -- 示例 - - ``` - ctx.font = '25px sans-serif'; - var txt = 'Hello World'; - ctx.fillText("width:" + ctx.measureText(txt).width, 20, 60); - ctx.fillText(txt, 20, 110); - ``` - - ![](figures/zh-cn_image_0000001127284960.png) - - -## lineWidth - -指定绘制线条的宽度值。 - -- 参数 - - - - - - - - - - - - -

参数

-

类型

-

描述

-

lineWidth

-

number

-

设置绘制线条的宽度。

-
- -- 返回值 - - 无 - -- 示例 - - ``` - ctx.lineWidth = 5; - ctx.strokeRect(25, 25, 85, 105); - ``` - - ![](figures/zh-cn_image_0000001127125166.png) - - -## strokeStyle - -设置描边的颜色。 - -- 参数 - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

color

-

<color>

-

指定描边使用的颜色。

-

gradient

-

CanvasGradient

-

通过createLinearGradient()方法创建。

-

pattern

-

CanvasPattern

-

通过createPattern()方法创建。

-
- -- 返回值 - - 无 - -- 示例 - - ``` - ctx.lineWidth = 10; - ctx.strokeStyle = '#0000ff'; - ctx.strokeRect(25, 25, 155, 105); - ``` - - ![](figures/zh-cn_image_0000001173324719.png) - - -## stroke\(\) - -进行边框绘制操作。 - -- 参数 - - 无 - -- 返回值 - - 无 - -- 示例 - - ``` - ctx.moveTo(25, 25); - ctx.lineTo(25, 105); - ctx.strokeStyle = 'rgb(0,0,255)'; - ctx.stroke(); - ``` - - ![](figures/zh-cn_image_0000001173164819.png) - - -## beginPath\(\) - -创建一个新的绘制路径。 - -- 参数 - - 无 - -- 返回值 - - 无 - -- 示例 - - ``` - ctx.beginPath(); - ctx.lineWidth = '6'; - ctx.strokeStyle = '#0000ff'; - ctx.moveTo(15, 80); - ctx.lineTo(280, 160); - ctx.stroke(); - ``` - - ![](figures/zh-cn_image_0000001127125164.png) - - -## moveTo\(\) - -路径从当前点移动到指定点。 - -- 参数 - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

x

-

number

-

指定位置的x坐标。

-

y

-

number

-

指定位置的y坐标。

-
- -- 返回值 - - 无 - -- 示例 - - ``` - ctx.beginPath(); - ctx.moveTo(10, 10); - ctx.lineTo(280, 160); - ctx.stroke(); - ``` - - ![](figures/zh-cn_image_0000001127125152.png) - - -## lineTo\(\) - -从当前点到指定点进行路径连接。 - -- 参数 - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

x

-

number

-

指定位置的x坐标。

-

y

-

number

-

指定位置的y坐标。

-
- -- 返回值 - - 无 - -- 示例 - - ``` - ctx.beginPath(); - ctx.moveTo(10, 10); - ctx.lineTo(280, 160); - ctx.stroke(); - ``` - - ![](figures/zh-cn_image_0000001173324711.png) - - -## closePath\(\) - -结束当前路径形成一个封闭路径。 - -- 参数 - - 无 - -- 返回值 - - 无 - -- 示例 - - ``` - ctx.beginPath(); - ctx.moveTo(30, 30); - ctx.lineTo(110, 30); - ctx.lineTo(70, 90); - ctx.closePath(); - ctx.stroke(); - ``` - - ![](figures/zh-cn_image_0000001127284950.png) - - -## lineCap - -指定线端点的样式。 - -- 参数 - - - - - - - - - - - - -

参数

-

类型

-

描述

-

lineCap

-

string

-

线条的端点样式，可选值为：

-
  • butt（默认）：线端点以方形结束。
  • round：线端点以圆形结束。
  • square：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。
-
- -- 返回值 - - 无 - -- 示例 - - ``` - ctx.lineWidth = 8; - ctx.beginPath(); - ctx.lineCap = 'round'; - ctx.moveTo(30, 50); - ctx.lineTo(220, 50); - ctx.stroke(); - ``` - - ![](figures/zh-cn_image_0000001127125144.png) - - -## lineJoin - -指定线段间相交的交点样式。 - -- 参数 - - - - - - - - - - - - -

参数

-

类型

-

描述

-

lineJoin

-

string

-

线条的交点样式，可选值为：

-
  • round：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。
  • bevel：在线段相连处使用三角形为底填充， 每个部分矩形拐角独立。
  • miter（默认）：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。
-
- -- 返回值 - - 无 - -- 示例 - - ``` - ctx.beginPath(); - ctx.lineWidth = 8; - ctx.lineJoin = 'miter'; - ctx.moveTo(30, 30); - ctx.lineTo(120, 60); - ctx.lineTo(30, 110); - ctx.stroke(); - ``` - - ![](figures/zh-cn_image_0000001127125140.png) - - -## miterLimit - -设置斜接面限制值，该值指定了线条相交处内角和外角的距离。 - -- 参数 - - - - - - - - - - - - -

参数

-

类型

-

描述

-

miterLimit

-

number

-

斜接面限制值，该属性默认值为10。

-
- -- 返回值 - - 无 - -- 示例 - - ``` - ctx.lineWidth = 8; - ctx.lineJoin = 'miter'; - ctx.miterLimit = 3; - ctx.moveTo(30, 30); - ctx.lineTo(60, 35); - ctx.lineTo(30, 37); - ctx.stroke(); - ``` - - ![](figures/zh-cn_image_0000001127284966.png) - - -## font - -设置文本绘制中的字体样式。 - -- 参数 - - - - - - - - - - - - -

参数

-

类型

-

描述

-

value

-

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。
-
- -- 返回值 - - 无 - -- 示例 - - ``` - ctx.font = '30px sans-serif'; - ctx.fillText("Hello World", 20, 60); - ``` - - ![](figures/zh-cn_image_0000001173324725.png) - - -## textAlign - -设置文本绘制中的文本对齐方式。 - -- 参数 - - - - - - - - - - - - -

参数

-

类型

-

描述

-

align

-

string

-

可选值为：

-
  • left（默认）：文本左对齐。
  • right：文本右对齐。
  • center：文本居中对齐。
  • start：文本对齐界线开始的地方。
  • end：文本对齐界线结束的地方。
-
说明：

ltr布局模式下start和left一致，rtl布局模式下start和right一致·。

-
-
- -- 返回值 - - 无 - -- 示例 - - ``` - ctx.strokeStyle = '#0000ff'; - ctx.moveTo(140, 10); - ctx.lineTo(140, 160); - ctx.stroke(); - - ctx.font = '18px sans-serif'; - - // Show the different textAlign values - ctx.textAlign = 'start'; - ctx.fillText('textAlign=start', 140, 60); - ctx.textAlign = 'end'; - ctx.fillText('textAlign=end', 140, 80); - ctx.textAlign = 'left'; - ctx.fillText('textAlign=left', 140, 100); - ctx.textAlign = 'center'; - ctx.fillText('textAlign=center',140, 120); - ctx.textAlign = 'right'; - ctx.fillText('textAlign=right',140, 140); - ``` - - ![](figures/zh-cn_image_0000001173164795.png) - - -## textBaseline - -设置文本绘制中的水平对齐方式。 - -- 参数 - - - - - - - - - - - - -

参数

-

类型

-

描述

-

textBaseline

-

string

-

可选值为：

-
  • alphabetic（默认）：文本基线是标准的字母基线。
  • top：文本基线在文本块的顶部。
  • hanging：文本基线是悬挂基线。
  • middle：文本基线在文本块的中间。
  • ideographic：文字基线是表意字基线；如果字符本身超出了alphabetic 基线，那么ideograhpic基线位置在字符本身的底部。
  • bottom：文本基线在文本块的底部。 与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母。
-
- -- 返回值 - - 无 - -- 示例 - - ``` - ctx.strokeStyle = '#0000ff'; - ctx.moveTo(0, 120); - ctx.lineTo(400, 120); - ctx.stroke(); - - ctx.font = '20px sans-serif'; - - ctx.textBaseline = 'top'; - ctx.fillText('Top', 10, 120); - ctx.textBaseline = 'bottom'; - ctx.fillText('Bottom', 55, 120); - ctx.textBaseline = 'middle'; - ctx.fillText('Middle', 125, 120); - ctx.textBaseline = 'alphabetic'; - ctx.fillText('Alphabetic', 195, 120); - ctx.textBaseline = 'hanging'; - ctx.fillText('Hanging', 295, 120); - ``` - - ![](figures/zh-cn_image_0000001173324713.png) - - -## createPattern\(\) - -通过指定图像和重复方式创建图片填充的模板。 - -- 参数 - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

image

-

Image

-

图源对象，具体参考Image对象。

-

repetition

-

string

-

设置图像重复的方式，取值为：'repeat'、'repeat-x'、 'repeat-y'、'no-repeat'。

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

类型

-

说明

-

Object

-

指定图像填充的Pattern对象。

-
- -- 示例 - - ``` - var pat = ctx.createPattern(img, 'repeat'); - ctx.fillStyle = pat; - ctx.fillRect(0, 0, 20, 20); - ``` - - ![](figures/zh-cn_image_0000001173164829.png) - - -## bezierCurveTo\(\) - -创建三次贝赛尔曲线的路径。 - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

cp1x

-

number

-

第一个贝塞尔参数的x坐标值。

-

cp1y

-

number

-

第一个贝塞尔参数的y坐标值。

-

cp2x

-

number

-

第二个贝塞尔参数的x坐标值。

-

cp2y

-

number

-

第二个贝塞尔参数的y坐标值。

-

x

-

number

-

路径结束时的x坐标值。

-

y

-

number

-

路径结束时的y坐标值。

-
- -- 返回值 - - 无 - -- 示例 - - ``` - ctx.beginPath(); - ctx.moveTo(10, 10); - ctx.bezierCurveTo(20, 100, 200, 100, 200, 20); - ctx.stroke(); - ``` - - ![](figures/zh-cn_image_0000001152610854.png) - - -## quadraticCurveTo\(\) - -创建二次贝赛尔曲线的路径。 - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

cpx

-

number

-

贝塞尔参数的x坐标值。

-

cpy

-

number

-

贝塞尔参数的y坐标值。

-

x

-

number

-

路径结束时的x坐标值。

-

y

-

number

-

路径结束时的y坐标值。

-
- -- 返回值 - - 无 - -- 示例 - - ``` - ctx.beginPath(); - ctx.moveTo(20, 20); - ctx.quadraticCurveTo(100, 100, 200, 20); - ctx.stroke(); - ``` - - ![](figures/zh-cn_image_0000001173324723.png) - - -## arc\(\) - -绘制弧线路径。 - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

x

-

number

-

弧线圆心的x坐标值。

-

y

-

number

-

弧线圆心的y坐标值。

-

radius

-

number

-

弧线的圆半径。

-

startAngle

-

number

-

弧线的起始弧度。

-

endAngle

-

number

-

弧线的终止弧度。

-

anticlockwise

-

boolean

-

是否逆时针绘制圆弧。

-
- -- 返回值 - - 无 - -- 示例 - - ``` - ctx.beginPath(); - ctx.arc(100, 75, 50, 0, 6.28); - ctx.stroke(); - ``` - - ![](figures/zh-cn_image_0000001127125154.png) - - -## arcTo\(\) - -依据圆弧经过的点和圆弧半径创建圆弧路径。 - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

x1

-

number

-

圆弧经过的第一个点的x坐标值。

-

y1

-

number

-

圆弧经过的第一个点的y坐标值。

-

x2

-

number

-

圆弧经过的第二个点的x坐标值。

-

y2

-

number

-

圆弧经过的第二个点的y坐标值。

-

radius

-

number

-

圆弧的圆半径值。

-
- -- 返回值 - - 无 - -- 示例 - - ``` - ctx.moveTo(100, 20); - ctx.arcTo(150, 20, 150, 70, 50); // Create an arc - ctx.stroke(); - ``` - - ![](figures/zh-cn_image_0000001173164807.png) - - -## ellipse\(\)6+ - -在规定的矩形区域绘制一个椭圆。 - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

x

-

number

-

椭圆圆心的x轴坐标。

-

y

-

number

-

椭圆圆心的y轴坐标。

-

radiusX

-

number

-

椭圆x轴的半径长度。

-

radiusY

-

number

-

椭圆y轴的半径长度。

-

rotation

-

number

-

椭圆的旋转角度，单位为弧度。

-

startAngle

-

number

-

椭圆绘制的起始点角度，以弧度表示。

-

endAngle

-

number

-

椭圆绘制的结束点角度，以弧度表示。

-

anticlockwise

-

number

-

是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。(可选参数，默认为0)

-
- -- 返回值 - - 无 - -- 示例 - - ``` - 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

-

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\(\) - -对封闭路径进行填充。 - -- 参数 - - 无 - -- 返回值 - - 无 - -- 示例 - - ``` - 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\(\) - -设置当前路径为剪切路径。 - -- 参数 - - 无 - -- 返回值 - - 无 - -- 示例 - - ``` - ctx.rect(0, 0, 200, 200); - ctx.stroke(); - ctx.clip(); - // Draw red rectangle after clip - ctx.fillStyle = "rgb(255,0,0)"; - ctx.fillRect(0, 0, 150, 150); - ``` - - ![](figures/zh-cn_image_0000001127284956.png) - - -## rotate\(\) - -针对当前坐标轴进行顺时针旋转。 - -- 参数 - - - - - - - - - - - - -

参数

-

类型

-

描述

-

rotate

-

number

-

设置顺时针旋转的弧度值，可以通过Math.PI / 180将角度转换为弧度值。

-
- -- 返回值 - - 无 - -- 示例 - - ``` - ctx.rotate(45 * Math.PI / 180); // Rotate the rectangle 45 degrees - ctx.fillRect(70, 20, 50, 50); - ``` - - ![](figures/zh-cn_image_0000001127125146.png) - - -## scale\(\) - -设置canvas画布的缩放变换属性，后续的绘制操作将按照缩放比例进行缩放。 - -- 参数 - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

x

-

number

-

设置水平方向的缩放值。

-

y

-

number

-

设置垂直方向的缩放值。

-
- -- 返回值 - - 无 - -- 示例 - - ``` - 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\(\)方法对应一个变换矩阵，想对一个图形进行变化的时候，只要设置此变换矩阵相应的参数，对图形的各个定点的坐标分别乘以这个矩阵，就能得到新的定点的坐标。矩阵变换效果可叠加。 - ->![](../../public_sys-resources/icon-note.gif) **说明：** ->变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标）： ->- x' = scaleX \* x + skewY \* y + translateX ->- y' = skewX \* x + scaleY \* y + translateY - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

scaleX

-

number

-

指定水平缩放值。

-

skewX

-

number

-

指定水平倾斜值。

-

skewY

-

number

-

指定垂直倾斜值。

-

scaleY

-

number

-

指定垂直缩放值。

-

translateX

-

number

-

指定水平移动值。

-

translateY

-

number

-

指定垂直移动值。

-
- -- 返回值 - - 无 - -- 示例 - - ``` - ctx.fillStyle = 'rgb(0,0,0)'; - ctx.fillRect(0, 0, 100, 100) - ctx.transform(1, 0.5, -0.5, 1, 10, 10); - ctx.fillStyle = 'rgb(255,0,0)'; - ctx.fillRect(0, 0, 100, 100); - ctx.transform(1, 0.5, -0.5, 1, 10, 10); - ctx.fillStyle = 'rgb(0,0,255)'; - ctx.fillRect(0, 0, 100, 100); - ``` - - ![](figures/zh-cn_image_0000001173164809.png) - - -## setTransform\(\) - -setTransfrom\(\)方法使用的参数和transform\(\)方法相同，但setTransform\(\)方法会重置现有的变换矩阵并创建新的变换矩阵。 - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

scaleX

-

number

-

指定水平缩放值。

-

skewX

-

number

-

指定水平倾斜值。

-

skewY

-

number

-

指定垂直倾斜值。

-

scaleY

-

number

-

指定垂直缩放值。

-

translateX

-

number

-

指定水平移动值。

-

translateY

-

number

-

指定垂直移动值。

-
- -- 返回值 - - 无 - -- 示例 - - ``` - ctx.fillStyle = 'rgb(255,0,0)'; - ctx.fillRect(0, 0, 100, 100) - ctx.setTransform(1,0.5, -0.5, 1, 10, 10); - ctx.fillStyle = 'rgb(0,0,255)'; - ctx.fillRect(0, 0, 100, 100); - ``` - - ![](figures/zh-cn_image_0000001173164791.png) - - -## translate\(\) - -移动当前坐标系的原点。 - -- 参数 - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

x

-

number

-

设置水平平移量。

-

y

-

number

-

设置竖直平移量。

-
- -- 返回值 - - 无 - -- 示例 - - ``` - 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对象。 - -- 参数 - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

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 - -设置透明度。 - -- 参数 - - - - - - - - - - - - -

参数

-

类型

-

描述

-

value

-

number

-

0.0为完全透明，1.0为完全不透明。

-
- -- 返回值 - - 无 - -- 示例 - - ``` - ctx.fillStyle = 'rgb(255,0,0)'; - ctx.fillRect(0, 0, 50, 50); - ctx.globalAlpha = 0.4; - ctx.fillStyle = 'rgb(0,0,255)'; - ctx.fillRect(50, 50, 50, 50); - ``` - - ![](figures/zh-cn_image_0000001127125168.png) - - -## drawImage\(\) - -进行图像绘制。 - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

image

-

Image

-

图片资源，请参考Image对象。

-

sx

-

number

-

裁切源图像时距离源图像左上角的x坐标值。

-

sy

-

number

-

裁切源图像时距离源图像左上角的y坐标值。

-

sWidth

-

number

-

裁切源图像时需要裁切的宽度。

-

sHeight

-

number

-

裁切源图像时需要裁切的高度。

-

dx

-

number

-

绘制区域左上角在x轴的位置。

-

dy

-

number

-

绘制区域左上角在y 轴的位置。

-

dWidth

-

number

-

绘制区域的宽度。

-

dHeight

-

number

-

绘制区域的高度。

-
- -- 返回值 - - 无 - -- 示例 - - ``` - var test = this.$element('drawImage'); - var ctx = test.getContext('2d'); - var img = new Image(); - img.src = 'common/image/test.jpg'; - ctx.drawImage(img, 50, 80, 80, 80); - ``` - - ![](figures/zh-cn_image_0000001173164821.png) - - -## restore\(\) - -对保存的绘图上下文进行恢复。 - -- 参数 - - 无 - -- 返回值 - - 无 - -- 示例 - - ``` - ctx.restore(); - ``` - - -## save\(\) - -对当前的绘图上下文进行保存。 - -- 参数 - - 无 - -- 返回值 - - 无 - -- 示例 - - ``` - ctx.save(); - ``` - - -## createLinearGradient\(\)6+ - -创建一个线性渐变色，返回CanvasGradient对象，请参考[CanvasGradient对象](js-components-canvas-canvasgradient.md#ZH-CN_TOPIC_0000001209210715)。 - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

x0

-

number

-

起点的x轴坐标。

-

y0

-

number

-

起点的y轴坐标。

-

x1

-

number

-

终点的x轴坐标。

-

y1

-

number

-

终点的y轴坐标。

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

类型

-

说明

-

Object

-

返回创建的CanvasGradient对象。

-
- -- 示例 - - ``` - - - - ``` - - ``` - // xxx.js - export default { - handleClick() { - const el = this.$refs.canvas; - const ctx = el.getContext('2d'); - // Linear gradient: start(50,0) end(300,100) - var gradient = ctx.createLinearGradient(50,0, 300,100); - // 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_0000001173164827.png) - - -## createRadialGradient\(\)6+ - -创建一个径向渐变色，返回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\(\) - -创建新的ImageData 对象，请参考[ImageData对象](js-components-canvas-imagedata.md#ZH-CN_TOPIC_0000001209570711)。 - -- 参数 - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

width

-

number

-

ImageData的宽度。

-

height

-

number

-

ImageData的高度。

-

imagedata

-

Object

-

复制现有的ImageData对象。

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

类型

-

说明

-

Object

-

返回创建的ImageData对象。

-
- -- 示例 - - ``` - imageData = ctx.createImageData(50, 100); // Create ImageData with 50px width and 100px height - newImageData = ctx.createImageData(imageData); // Create ImageData using the input imageData - ``` - - -## getImageData\(\) - -以当前canvas指定区域内的像素创建ImageData对象。 - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

sx

-

number

-

需要输出的区域的左上角x坐标。

-

sy

-

number

-

需要输出的区域的左上角y坐标。

-

sw

-

number

-

需要输出的区域的宽度。

-

sh

-

number

-

需要输出的区域的高度。

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

类型

-

说明

-

Object

-

返回包含指定区域像素的ImageData对象。

-
- -- 示例 - - ``` - var test = this.$element('getImageData'); - var ctx = test.getContext('2d'); - var imageData = ctx.getImageData(0, 0, 280, 300); - ``` - - -## putImageData\(\) - -使用ImageData数据填充新的矩形区域。 - -- 参数 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数

-

类型

-

描述

-

imagedata

-

Object

-

包含像素值的ImageData对象。

-

dx

-

number

-

填充区域在x轴方向的偏移量。

-

dy

-

number

-

填充区域在y轴方向的偏移量。

-

dirtyX

-

number

-

源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。

-

dirtyY

-

number

-

源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。

-

dirtyWidth

-

number

-

源图像数据矩形裁切范围的宽度。

-

dirtyHeight

-

number

-

源图像数据矩形裁切范围的高度。

-
- -- 返回值 - - 无 - -- 示例 - - ``` - var test = this.$element('putImageData'); - var ctx = test.getContext('2d'); - var imgData = ctx.createImageData(100, 100); - for (var i = 0; i < imgData.data.length; i += 4) { - imgData.data[i + 0] = 255; - imgData.data[i + 1] = 0; - imgData.data[i + 2] = 0; - imgData.data[i + 3] = 255; - } - ctx.putImageData(imgData, 10, 10); - ``` - - ![](figures/zh-cn_image_0000001198530737.png) - - -## setLineDash\(\) - -设置画布的虚线样式。 - -- 参数 - - - - - - - - - - - - -

参数

-

类型

-

描述

-

segments

-

Array

-

作为数组用来描述线段如何交替和间距长度。

-
- -- 返回值 - - 无 - -- 示例 - - ``` - ctx.arc(100, 75, 50, 0, 6.28); - ctx.setLineDash([10,20]); - ctx.stroke(); - ``` - - ![](figures/zh-cn_image_0000001152770952.png) - - -## getLineDash\(\) - -获得当前画布的虚线样式。 - -- 参数 - - 无 - -- 返回值 - - - - - - - - - - -

类型

-

说明

-

Array

-

返回数组，该数组用来描述线段如何交替和间距长度。。

-
- -- 示例 - - ``` - var info = ctx.getLineDash(); - ``` - - -## lineDashOffset - -设置画布的虚线偏移量。 - -- 参数 - - - - - - - - - - - - -

参数

-

类型

-

描述

-

value

-

number

-

精度为float，默认为0.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 - -设置合成操作的方式。 - -- 参数 - - - - - - - - - - - - -

参数

-

类型

-

描述

-

type

-

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

-

使用异或操作对新绘制内容与现有绘制内容进行融合。

-
- -- 返回值 - - 无 - -- 示例 - - ``` - ctx.fillStyle = 'rgb(255,0,0)'; - ctx.fillRect(20, 20, 50, 50); - ctx.globalCompositeOperation = 'source-over'; - ctx.fillStyle = 'rgb(0,0,255)'; - ctx.fillRect(50, 50, 50, 50); - // Start drawing second example - ctx.fillStyle = 'rgb(255,0,0)'; - ctx.fillRect(120, 20, 50, 50); - ctx.globalCompositeOperation = 'destination-over'; - ctx.fillStyle = 'rgb(0,0,255)'; - ctx.fillRect(150, 50, 50, 50); - ``` - - ![](figures/zh-cn_image_0000001173324717.png) - - 示例中，新绘制内容是蓝色矩形，现有绘制内容是红色矩形。 - - -## shadowBlur - -设置绘制阴影时的模糊级别，默认值为0.0。 - -- 参数 - - - - - - - - - - - - -

参数

-

类型

-

描述

-

blur

-

number

-

设置模糊效果的程度值，值越大越模糊，精度为float 。

-
- -- 返回值 - - 无 - -- 示例 - - ``` - ctx.shadowBlur = 30; - ctx.shadowColor = 'rgb(0,0,0)'; - ctx.fillStyle = 'rgb(255,0,0)'; - ctx.fillRect(20, 20, 100, 80); - ``` - - ![](figures/zh-cn_image_0000001127284952.png) - - -## shadowColor - -设置绘制阴影时的阴影颜色。 - -- 参数 - - - - - - - - - - - - -

参数

-

类型

-

描述

-

color

-

<color>

-

阴影的颜色值。

-
- -- 返回值 - - 无 - -- 示例 - - ``` - ctx.shadowBlur = 30; - ctx.shadowColor = 'rgb(0,0,255)'; - ctx.fillStyle = 'rgb(255,0,0)'; - ctx.fillRect(30, 30, 100, 100); - ``` - - ![](figures/zh-cn_image_0000001127284944.png) - - -## shadowOffsetX - -设置绘制阴影时和原有对象的水平偏移值。 - -- 参数 - - - - - - - - - - - - -

参数

-

类型

-

描述

-

offsetX

-

number

-

阴影距离原有对象的x轴方向偏移值。

-
- -- 返回值 - - 无 - -- 示例 - - ``` - ctx.shadowBlur = 10; - ctx.shadowOffsetX = 20; - ctx.shadowColor = 'rgb(0,0,0)'; - ctx.fillStyle = 'rgb(255,0,0)'; - ctx.fillRect(20, 20, 100, 80); - ``` - - ![](figures/zh-cn_image_0000001127125148.png) - - -## shadowOffsetY - -设置绘制阴影时和原有对象的垂直偏移值。 - -- 参数 - - - - - - - - - - - - -

参数

-

类型

-

描述

-

offsetY

-

number

-

阴影距离原有对象的y轴方向偏移值。

-
- -- 返回值 - - 无 - -- 示例 - - ``` - ctx.shadowBlur = 10; - ctx.shadowOffsetY = 20; - ctx.shadowColor = 'rgb(0,0,0)'; - ctx.fillStyle = 'rgb(255,0,0)'; - ctx.fillRect(30, 30, 100, 100); - ``` - - ![](figures/zh-cn_image_0000001173164825.png) - - -## imageSmoothingEnabled6+ - -用于设置绘制图片时是否进行图像平滑度调整。 - -- 参数 - - - - - - - - - - - - -

参数

-

类型

-

描述

-

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 deleted file mode 100644 index fcf634df4393168ff7c71993b04f9b4e7ee6ed18..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-canvas-image.md +++ /dev/null @@ -1,97 +0,0 @@ -# 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 deleted file mode 100644 index 990ba799a97337aa475366789e864884893a973d..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-canvas-imagebitmap.md +++ /dev/null @@ -1,37 +0,0 @@ -# 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/component/js-components-canvas-imagedata.md b/zh-cn/application-dev/js-reference/component/js-components-canvas-imagedata.md deleted file mode 100644 index 843b330bd17496622e206c8d9122b05756b9b5e2..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-canvas-imagedata.md +++ /dev/null @@ -1,41 +0,0 @@ -# ImageData对象 - -- [属性](#zh-cn_topic_0000001127125022_section661391987) - -ImageData对象可以存储canvas渲染的像素数据。 - -## 属性 - - - - - - - - - - - - - - - - - - - - -

属性

-

类型

-

描述

-

width

-

number

-

矩形区域实际像素宽度。

-

height

-

number

-

矩形区域实际像素高度。

-

data

-

<Uint8ClampedArray>

-

一维数组，保存了相应的颜色数据，数据值范围为0到255。

-
- 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 deleted file mode 100644 index 3fcda63304f82ef206ae6f08fa1a1bf7d696cea8..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-canvas-offscreencanvas.md +++ /dev/null @@ -1,95 +0,0 @@ -# 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

-

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-path2d.md b/zh-cn/application-dev/js-reference/component/js-components-canvas-path2d.md deleted file mode 100644 index 6f26d1a670de80c5b371d544e632945b2379fd09..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-canvas-path2d.md +++ /dev/null @@ -1,704 +0,0 @@ -# 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-common-animation.md b/zh-cn/application-dev/js-reference/component/js-components-common-animation.md deleted file mode 100644 index c430da83722e8c682c91e9fb4cef2b56b5bda859..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-common-animation.md +++ /dev/null @@ -1,531 +0,0 @@ -# 动画样式 - -组件支持动态的旋转、平移、缩放效果，可在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 deleted file mode 100644 index 6da16f6a4912fdd79708000eb5087c88fd25d86a..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-common-atomic-layout.md +++ /dev/null @@ -1,94 +0,0 @@ -# 原子布局 - -- [隐藏能力](#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 deleted file mode 100644 index 180b8a5dbdb8979ff364bf1415b296a730d78ec3..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-common-attributes.md +++ /dev/null @@ -1,175 +0,0 @@ -# 通用属性 - -- [常规属性](#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/component/js-components-common-events.md b/zh-cn/application-dev/js-reference/component/js-components-common-events.md deleted file mode 100644 index 09987575f9b19bb8c33ba2c0dd0b1e891a77f193..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-common-events.md +++ /dev/null @@ -1,481 +0,0 @@ -# 通用事件 - -- [事件说明](#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/component/js-components-common-mediaquery.md b/zh-cn/application-dev/js-reference/component/js-components-common-mediaquery.md deleted file mode 100644 index 206095f81ccd43bcce7287ccb0f2ecc5c8ce676a..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-common-mediaquery.md +++ /dev/null @@ -1,310 +0,0 @@ -# 媒体查询 - -- [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); -``` - -## 媒体类型 - - - - - - - - - - -

类型

-

说明

-

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 deleted file mode 100644 index 4322b1192dab6a1e5f2af08dd64f0b4d71e78091..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-common-methods.md +++ /dev/null @@ -1,670 +0,0 @@ -# 通用方法 - -- [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 deleted file mode 100644 index 33bb249e8987e8f6caaafa9c1e724c1aab31b313..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-common-styles.md +++ /dev/null @@ -1,628 +0,0 @@ -# 通用样式 - -组件普遍支持的可以在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/component/js-components-container-badge.md b/zh-cn/application-dev/js-reference/component/js-components-container-badge.md deleted file mode 100644 index e028c0959cf77ae3a4de8e23d53babe69c0af66a..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-container-badge.md +++ /dev/null @@ -1,246 +0,0 @@ -# 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 deleted file mode 100644 index de78114e5b80af5001c14d838e82f5b5563acf15..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-container-dialog.md +++ /dev/null @@ -1,229 +0,0 @@ -# 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 deleted file mode 100644 index c88b548e2c9118b36b5cb6a331d765e757cb5c9e..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-container-div.md +++ /dev/null @@ -1,545 +0,0 @@ -# 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 deleted file mode 100644 index 1d3229859c8e6d3a0b1761fa7499a7118989662a..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-container-form.md +++ /dev/null @@ -1,115 +0,0 @@ -# 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 deleted file mode 100644 index fdb075c1fb0e54339d6229907404f22123ed4cbe..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-container-list-item-group.md +++ /dev/null @@ -1,265 +0,0 @@ -# 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 deleted file mode 100644 index 3449a40064ec452392f4da21ccd745b64ecd17ec..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-container-list-item.md +++ /dev/null @@ -1,176 +0,0 @@ -# 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 deleted file mode 100644 index 0546146044268f964c1e8770133700ad05628266..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-container-list.md +++ /dev/null @@ -1,724 +0,0 @@ -# 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 deleted file mode 100644 index 8498a4fc3ca46fb2ca7519355237cf06edbd780f..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-container-panel.md +++ /dev/null @@ -1,547 +0,0 @@ -# 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 deleted file mode 100644 index 97080d5272f4e6514df8b25de1bd78f1d434dd28..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-container-popup.md +++ /dev/null @@ -1,247 +0,0 @@ -# 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 deleted file mode 100644 index 139467290d3b3937f6762f58bb58930eaa79f1a2..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-container-refresh.md +++ /dev/null @@ -1,272 +0,0 @@ -# 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-stepper-item.md b/zh-cn/application-dev/js-reference/component/js-components-container-stepper-item.md deleted file mode 100644 index f44dfa713f8048e9a4fcfc57105fdc6293ee1fe8..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-container-stepper-item.md +++ /dev/null @@ -1,241 +0,0 @@ -# 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 deleted file mode 100644 index edd8c0787548b4459602888e0ba5a53f1a00a135..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-container-stepper.md +++ /dev/null @@ -1,230 +0,0 @@ -# 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 deleted file mode 100644 index 72afbea3b490845a2aff1e9099c4a6b96f3a65ea..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-container-swiper.md +++ /dev/null @@ -1,388 +0,0 @@ -# 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 deleted file mode 100644 index 45e8ec91120f96d665127ada84032f0af4b0b612..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-container-tab-bar.md +++ /dev/null @@ -1,68 +0,0 @@ -# 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 deleted file mode 100644 index 08d29ba62823a254345ff628d997b7e471d147ec..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-container-tab-content.md +++ /dev/null @@ -1,62 +0,0 @@ -# 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 deleted file mode 100644 index e9c3d7f04e8e47ed4da0dfaa1a427bc75f308377..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-container-tabs.md +++ /dev/null @@ -1,162 +0,0 @@ -# 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-custom-lifecycle.md b/zh-cn/application-dev/js-reference/component/js-components-custom-lifecycle.md deleted file mode 100644 index 819586df671fa077ba41dd33cb91e16d645598d2..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-custom-lifecycle.md +++ /dev/null @@ -1,119 +0,0 @@ -# 生命周期定义 - -- [示例](#zh-cn_topic_0000001127125084_section14938111864313) - ->![](../../public_sys-resources/icon-note.gif) **说明：** ->从API Version 5 开始支持。 - -我们为自定义组件提供了一系列生命周期回调方法，便于开发者管理自定义组件的内部逻辑。生命周期主要包括：onInit，onAttached，onDetached，onLayoutReady，onDestroy，onPageShow和onPageHide。下面我们依次介绍一下各个生命周期回调的时机。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

属性

-

类型

-

描述

-

触发时机

-

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/component/js-components-grid-col.md b/zh-cn/application-dev/js-reference/component/js-components-grid-col.md deleted file mode 100644 index 5245085b6e8466d5c1d6ecc9fb63b3f2a8b56b22..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-grid-col.md +++ /dev/null @@ -1,312 +0,0 @@ -# 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 deleted file mode 100644 index 945d76ae9c596af0c0f087afec5d27d6ddea6a61..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-grid-container.md +++ /dev/null @@ -1,286 +0,0 @@ -# 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 deleted file mode 100644 index c816b9c50346bd703dd7e8e730cd2952ea297259..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-grid-row.md +++ /dev/null @@ -1,107 +0,0 @@ -# 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-media-video.md b/zh-cn/application-dev/js-reference/component/js-components-media-video.md deleted file mode 100644 index 648007de04c348e39ba9e24d16ddfb5e0800b97d..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-media-video.md +++ /dev/null @@ -1,238 +0,0 @@ -# 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-svg-animate-motion.md b/zh-cn/application-dev/js-reference/component/js-components-svg-animate-motion.md deleted file mode 100644 index fc47b8c276348e102c5f2aa50c5b79d583d63898..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-svg-animate-motion.md +++ /dev/null @@ -1,101 +0,0 @@ -# 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.md b/zh-cn/application-dev/js-reference/component/js-components-svg-animate.md deleted file mode 100644 index 5232bc09303ff01db4ad556b0b87aafe8585bca5..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-svg-animate.md +++ /dev/null @@ -1,281 +0,0 @@ -# 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 deleted file mode 100644 index 1d12664063e187558e128b075e0a1f309c782d0d..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-svg-circle.md +++ /dev/null @@ -1,98 +0,0 @@ -# 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 deleted file mode 100644 index 24a175ff58454a2cf4be19894dd5d5192ffa2885..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-svg-common-attributes.md +++ /dev/null @@ -1,173 +0,0 @@ -# 通用属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

类型

-

默认值

-

必填

-

描述

-

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 deleted file mode 100644 index ebcbdcc3819b6dd16781a6fee717bf5fc206f0de..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-svg-ellipse.md +++ /dev/null @@ -1,109 +0,0 @@ -# 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 deleted file mode 100644 index d81fd2b8b7c7d8659e787afb6ff159bb5327598d..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-svg-line.md +++ /dev/null @@ -1,113 +0,0 @@ -# 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 deleted file mode 100644 index 2ef9bd47c2ab25d030524f4042c13b745fc9b174..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-svg-path.md +++ /dev/null @@ -1,79 +0,0 @@ -# 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 deleted file mode 100644 index d0c8e893aaaa7141f2bc5847550e9030307c8fac..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-svg-polygon.md +++ /dev/null @@ -1,78 +0,0 @@ -# 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 deleted file mode 100644 index 3716fb3c985867bf925887f09a75bad0c0494963..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-svg-polyline.md +++ /dev/null @@ -1,78 +0,0 @@ -# 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 deleted file mode 100644 index 76144f3a2eadebbf0fcdb22805e4afda276447f9..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-svg-rect.md +++ /dev/null @@ -1,133 +0,0 @@ -# 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 deleted file mode 100644 index 3cea3bd2f5dd1302d9463372ad9eacc7e37fe746..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-svg-text.md +++ /dev/null @@ -1,285 +0,0 @@ -# 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 deleted file mode 100644 index 9766a561fa5c02f6a0627e0900e9a38e278f2f74..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-svg-textpath.md +++ /dev/null @@ -1,383 +0,0 @@ -# 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 deleted file mode 100644 index dfe40e2ac56144cac591bfaf7edc4826bb81c500..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-svg-tspan.md +++ /dev/null @@ -1,313 +0,0 @@ -# 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 deleted file mode 100644 index f80eadf13c5187a7c5e72b1a90545537fc4bf6bd..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/component/js-components-svg.md +++ /dev/null @@ -1,128 +0,0 @@ -# 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/js-based-web-like-development-paradigm/figures/0.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/0.png new file mode 100644 index 0000000000000000000000000000000000000000..99b8f25e0fe85fdbde44a4eae2fdb208561259e6 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/0.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/000000-3.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/000000-3.png new file mode 100644 index 0000000000000000000000000000000000000000..58293d5e874f2aa36ecaf7282ca9e4736318092f Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/000000-3.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/000000.jpg b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/000000.jpg similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/000000.jpg rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/000000.jpg diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/1-1.gif b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/1-1.gif new file mode 100644 index 0000000000000000000000000000000000000000..1346a2deeab10fd18c60e7ff184bbff436bc528f Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/1-1.gif differ diff --git a/zh-cn/application-dev/js-reference/component/figures/1.jpg b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/1.jpg similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/1.jpg rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/1.jpg diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/11.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/11.png new file mode 100644 index 0000000000000000000000000000000000000000..cb270578b22922b3eabadd6801c08ccf6db99a00 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/11.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/2-2.gif b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/2-2.gif new file mode 100644 index 0000000000000000000000000000000000000000..82b802bf8c65f080c0d068689dc9e580840c5f55 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/2-2.gif differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/2.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/2.png new file mode 100644 index 0000000000000000000000000000000000000000..e506fd8f37b0e522d5925b509def595e5db653c3 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/2.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/22.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/22.png new file mode 100644 index 0000000000000000000000000000000000000000..63e63411d18c5394c103e63d15bb125bc01915d0 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/22.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/3.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/3.png new file mode 100644 index 0000000000000000000000000000000000000000..b370937f36a472829e7a08a4439b4025721b0437 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/3.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/33.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/33.png new file mode 100644 index 0000000000000000000000000000000000000000..7886ced8676b7de190671f1d0f08546ee0c6d23b Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/33.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/4-0.gif b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/4-0.gif new file mode 100644 index 0000000000000000000000000000000000000000..1589d8650fa225626fb8dadf085732f92170e40f Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/4-0.gif differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/4.gif b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/4.gif new file mode 100644 index 0000000000000000000000000000000000000000..1dc0753ba566436d3b8611f5efce0cadce36b7d0 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/4.gif differ diff --git "a/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" "b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/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/component/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/js-based-web-like-development-paradigm/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/js-based-web-like-development-paradigm/figures/5.gif b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/5.gif new file mode 100644 index 0000000000000000000000000000000000000000..83d8a2f9864d59fd0c64a03cafcb0bf50432ac92 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/5.gif differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/6.gif b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/6.gif new file mode 100644 index 0000000000000000000000000000000000000000..aacc036cfc90859465a0b3da908a61533b866806 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/6.gif differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/9.gif b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/9.gif new file mode 100644 index 0000000000000000000000000000000000000000..0654ceaa02e5d502239d152e83382df901d7376f Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/9.gif differ diff --git "a/zh-cn/application-dev/js-reference/component/figures/AnimationAPI\350\243\201\345\211\252.gif" "b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/AnimationAPI\350\243\201\345\211\252.gif" similarity index 100% rename from "zh-cn/application-dev/js-reference/component/figures/AnimationAPI\350\243\201\345\211\252.gif" rename to "zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/AnimationAPI\350\243\201\345\211\252.gif" diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/GIF.gif b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/GIF.gif new file mode 100644 index 0000000000000000000000000000000000000000..98bf461673a8f11366755e99b8f59baf7cc282e8 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/GIF.gif differ diff --git a/zh-cn/application-dev/js-reference/component/figures/SVID_20210301_193525_1.gif b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/SVID_20210301_193525_1.gif similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/SVID_20210301_193525_1.gif rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/SVID_20210301_193525_1.gif diff --git a/zh-cn/application-dev/js-reference/component/figures/Video_2021-03-26_154549.gif b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/Video_2021-03-26_154549.gif similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/Video_2021-03-26_154549.gif rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/Video_2021-03-26_154549.gif diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/aliceblue.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/aliceblue.png new file mode 100644 index 0000000000000000000000000000000000000000..378000d344e90ab4db41869a4612daf6b60d66ab Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/aliceblue.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324703.gif b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/animate-1.gif similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324703.gif rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/animate-1.gif diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284938.gif b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/animate-3.gif similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284938.gif rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/animate-3.gif diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125126.gif b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/animate-4.gif similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125126.gif rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/animate-4.gif diff --git a/zh-cn/application-dev/js-reference/component/figures/animate-transform.gif b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/animate-transform.gif similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/animate-transform.gif rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/animate-transform.gif diff --git a/zh-cn/application-dev/js-reference/component/figures/animate-transform2.gif b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/animate-transform2.gif similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/animate-transform2.gif rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/animate-transform2.gif diff --git a/zh-cn/application-dev/js-reference/component/figures/animate-transform3.gif b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/animate-transform3.gif similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/animate-transform3.gif rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/animate-transform3.gif diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/antiquewhite.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/antiquewhite.png new file mode 100644 index 0000000000000000000000000000000000000000..8e195633945b3387c46a7d295862351d4ff1fc64 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/antiquewhite.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/aqua.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/aqua.png new file mode 100644 index 0000000000000000000000000000000000000000..3e6aaacfe1c26157294e6dedfeaa1488aeed12a3 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/aqua.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/aquamarine.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/aquamarine.png new file mode 100644 index 0000000000000000000000000000000000000000..c25a692065d473ccf9f5b6d36254787e2497fad6 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/aquamarine.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/azure.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/azure.png new file mode 100644 index 0000000000000000000000000000000000000000..2e7cec00f9d186d76ff5cb12d47811084217cc1c Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/azure.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/barchart.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/barchart.png old mode 100755 new mode 100644 similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/barchart.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/barchart.png diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/beige.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/beige.png new file mode 100644 index 0000000000000000000000000000000000000000..21f20a4220aabf9449c707291633e7b3723fe378 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/beige.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/bisque.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/bisque.png new file mode 100644 index 0000000000000000000000000000000000000000..7983d590a2c617c6cad68c90af6b12aa17518810 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/bisque.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/blanchedalmond.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/blanchedalmond.png new file mode 100644 index 0000000000000000000000000000000000000000..04bcf099edface801be6074a33ff33a980c9b606 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/blanchedalmond.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/blue.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/blue.png new file mode 100644 index 0000000000000000000000000000000000000000..e370a44cf043fc34bd8891f57faad2cd2ca05707 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/blue.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/blueviolet.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/blueviolet.png new file mode 100644 index 0000000000000000000000000000000000000000..ca1edf2219980ab9c8533b9fda3219521c50533d Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/blueviolet.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/brown.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/brown.png new file mode 100644 index 0000000000000000000000000000000000000000..0d22570503febc7a7dcba0d1e870f49f32fe489a Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/brown.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/burlywood.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/burlywood.png new file mode 100644 index 0000000000000000000000000000000000000000..0d53a47b7eace81d5c7da88c59fee61e30c89681 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/burlywood.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/cadetblue.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/cadetblue.png new file mode 100644 index 0000000000000000000000000000000000000000..a59bc9cdb0f75ad79e4714d3593216021369c862 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/cadetblue.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/chartreuse.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/chartreuse.png new file mode 100644 index 0000000000000000000000000000000000000000..3026d3c195598159232b4b1f08e9f198f4b4fa2c Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/chartreuse.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/chocolate.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/chocolate.png new file mode 100644 index 0000000000000000000000000000000000000000..02d5f4e31b020ea9f64e36a7b7cd50299cf3d7f2 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/chocolate.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/coral.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/coral.png new file mode 100644 index 0000000000000000000000000000000000000000..8442c9b2258c79ee6b6a3d5963df5b792bbb1a16 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/coral.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/cornflowerblue.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/cornflowerblue.png new file mode 100644 index 0000000000000000000000000000000000000000..3621ef6876dbd1103487aed8ff190e6a0204ffde Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/cornflowerblue.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/cornsilk.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/cornsilk.png new file mode 100644 index 0000000000000000000000000000000000000000..bf38fe45eaf254939b88b9d2a66635408060acf7 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/cornsilk.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/crimson.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/crimson.png new file mode 100644 index 0000000000000000000000000000000000000000..bca655617699ef8dc1265bf692a3170c7effe15b Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/crimson.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/cyan.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/cyan.png new file mode 100644 index 0000000000000000000000000000000000000000..3e6aaacfe1c26157294e6dedfeaa1488aeed12a3 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/cyan.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkblue.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkblue.png new file mode 100644 index 0000000000000000000000000000000000000000..b234a769d1a9f1f30c4d2127160cf067e9f71ad6 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkblue.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkcyan.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkcyan.png new file mode 100644 index 0000000000000000000000000000000000000000..b780eb08852e8916ec6ff1a401ea6946c8d727cf Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkcyan.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkgoldenrod.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkgoldenrod.png new file mode 100644 index 0000000000000000000000000000000000000000..26f2f228b47b8acb8adcddc3abf9156d6c29364e Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkgoldenrod.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkgray.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkgray.png new file mode 100644 index 0000000000000000000000000000000000000000..f1abe2afcb7902557ac3c4f58abfdf333af03121 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkgray.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkgreen.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkgreen.png new file mode 100644 index 0000000000000000000000000000000000000000..4c4c304b67c398f32c5fff516cdde377ca39c73d Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkgreen.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkgrey.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkgrey.png new file mode 100644 index 0000000000000000000000000000000000000000..f1abe2afcb7902557ac3c4f58abfdf333af03121 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkgrey.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkkhaki.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkkhaki.png new file mode 100644 index 0000000000000000000000000000000000000000..12085848c0f6472d53f7e6504c1924ea6f5a44c1 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkkhaki.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkmagenta.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkmagenta.png new file mode 100644 index 0000000000000000000000000000000000000000..9ed54c6c5c5186fb43f24dab24f7689ae0d14a12 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkmagenta.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkolivegreen.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkolivegreen.png new file mode 100644 index 0000000000000000000000000000000000000000..53081e06f458cfc1772de30f669180333b8d783d Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkolivegreen.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkorange.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkorange.png new file mode 100644 index 0000000000000000000000000000000000000000..6064f64867e3aca621244e1e6fdb16d3ab2ed748 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkorange.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkorchid.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkorchid.png new file mode 100644 index 0000000000000000000000000000000000000000..6315d4654d04dd6b9b295fa1f8b37e8c550b17cf Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkorchid.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkred.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkred.png new file mode 100644 index 0000000000000000000000000000000000000000..c33d763d18f5108bf0eedba19c662d05af397ee9 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkred.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darksalmon.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darksalmon.png new file mode 100644 index 0000000000000000000000000000000000000000..57594c6855d4cdf1b37cc3e5354374c9dae0823b Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darksalmon.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkseagreen.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkseagreen.png new file mode 100644 index 0000000000000000000000000000000000000000..454b1796715794d51e2a1a4649bfafa1bfde80f0 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkseagreen.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkslateblue.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkslateblue.png new file mode 100644 index 0000000000000000000000000000000000000000..7dfc7ee8793298d19c939369ba980abd547982ff Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkslateblue.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkslategray.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkslategray.png new file mode 100644 index 0000000000000000000000000000000000000000..5e23c304c4911dc0ef487dfeb8d7820aea5fb44b Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkslategray.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkslategrey.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkslategrey.png new file mode 100644 index 0000000000000000000000000000000000000000..5e23c304c4911dc0ef487dfeb8d7820aea5fb44b Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkslategrey.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkturquoise.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkturquoise.png new file mode 100644 index 0000000000000000000000000000000000000000..4e41450db5d70f6d10d6d7bf59daba33085c177e Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkturquoise.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkviolet.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkviolet.png new file mode 100644 index 0000000000000000000000000000000000000000..6f085565bd8c64d44bf58ce0969557515ec7ab97 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/darkviolet.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/date33.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/date33.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/date33.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/date33.png diff --git a/zh-cn/application-dev/js-reference/component/figures/datetime.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/datetime.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/datetime.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/datetime.png diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/deeppink.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/deeppink.png new file mode 100644 index 0000000000000000000000000000000000000000..6348bb2b6ee281976f7d58159e4c33db29f542ad Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/deeppink.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/deepskyblue.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/deepskyblue.png new file mode 100644 index 0000000000000000000000000000000000000000..0ac129028e67b43fcae8e3d5c1a539cc45ba6d21 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/deepskyblue.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/dimgray.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/dimgray.png new file mode 100644 index 0000000000000000000000000000000000000000..1072a50f468dda3c90c889c31424b7c290eb1a13 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/dimgray.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/dimgrey.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/dimgrey.png new file mode 100644 index 0000000000000000000000000000000000000000..1072a50f468dda3c90c889c31424b7c290eb1a13 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/dimgrey.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/dodgerblue.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/dodgerblue.png new file mode 100644 index 0000000000000000000000000000000000000000..fe422eecde9ec9f1fcac762bd81a23b3fa3abde7 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/dodgerblue.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/ellipse.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/ellipse.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/ellipse.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/ellipse.png diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/firebrick.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/firebrick.png new file mode 100644 index 0000000000000000000000000000000000000000..af32ecea68c1cef693bcfa379af5ac28f66c1e14 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/firebrick.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/floralwhite.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/floralwhite.png new file mode 100644 index 0000000000000000000000000000000000000000..5ee9f7e893611dce988b8aa7ccfe3fab4b9d912f Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/floralwhite.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/forestgreen.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/forestgreen.png new file mode 100644 index 0000000000000000000000000000000000000000..7cfd4846ca697424582edbfed23ed93ef9e98138 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/forestgreen.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/fuchsia.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/fuchsia.png new file mode 100644 index 0000000000000000000000000000000000000000..6823cbc9203b07abae455b4ee5c7692878c4be72 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/fuchsia.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/gainsboro.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/gainsboro.png new file mode 100644 index 0000000000000000000000000000000000000000..d1d37504e15eb6fccd6b1c8e985d37fcc8ba9875 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/gainsboro.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/gauge.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/gauge.png old mode 100755 new mode 100644 similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/gauge.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/gauge.png diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/ghostwhite.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/ghostwhite.png new file mode 100644 index 0000000000000000000000000000000000000000..45467f3e6fc0866b6da0521911bdb5e7d740df29 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/ghostwhite.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/gold.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/gold.png new file mode 100644 index 0000000000000000000000000000000000000000..91a276a7dffb4d98c507e9af6afa1912cca1fed2 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/gold.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/goldenrod.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/goldenrod.png new file mode 100644 index 0000000000000000000000000000000000000000..04ab7decab16cb7341665c2a67e8d5655a7eed6a Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/goldenrod.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/gray.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/gray.png new file mode 100644 index 0000000000000000000000000000000000000000..dfcb0c5e259b3f8d7375c21712249c1e847edd67 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/gray.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/green.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/green.png new file mode 100644 index 0000000000000000000000000000000000000000..bc28f5056c679e189543c8ad6fba67fb56db7655 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/green.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/greenyellow.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/greenyellow.png new file mode 100644 index 0000000000000000000000000000000000000000..c89f746719790333bce2bde8c5b8d86102fdfc33 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/greenyellow.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/grey.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/grey.png new file mode 100644 index 0000000000000000000000000000000000000000..dfcb0c5e259b3f8d7375c21712249c1e847edd67 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/grey.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/honeydew.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/honeydew.png new file mode 100644 index 0000000000000000000000000000000000000000..51fb00e10bb5c167506ddfae1689b58e368df340 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/honeydew.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/hotpink.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/hotpink.png new file mode 100644 index 0000000000000000000000000000000000000000..cbc1d312680f479e8c443476ea39eaf1e8a16e55 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/hotpink.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/image-animator.gif b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/image-animator.gif old mode 100755 new mode 100644 similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/image-animator.gif rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/image-animator.gif diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/indianred.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/indianred.png new file mode 100644 index 0000000000000000000000000000000000000000..069f570291be858a1768b75719a4a6adbd1bdef8 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/indianred.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/indigo.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/indigo.png new file mode 100644 index 0000000000000000000000000000000000000000..db83d39f98583ee653ee39b0237eb55961e539c7 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/indigo.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/ivory.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/ivory.png new file mode 100644 index 0000000000000000000000000000000000000000..ff0aa71de78cb461a6602398ee915c677efdf3d4 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/ivory.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/khaki.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/khaki.png new file mode 100644 index 0000000000000000000000000000000000000000..3fca22c329e9dc9ef73eee20757eac4ce7386842 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/khaki.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lavender.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lavender.png new file mode 100644 index 0000000000000000000000000000000000000000..44e4d991524bd0ef88a0dd10f204e022dd9d0621 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lavender.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lavenderblush.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lavenderblush.png new file mode 100644 index 0000000000000000000000000000000000000000..5b22707e37ec772dc08a961e557a937862210167 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lavenderblush.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lawngreen.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lawngreen.png new file mode 100644 index 0000000000000000000000000000000000000000..41be1a646e14511b5d177d11a7bce10deaee5bc9 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lawngreen.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lemonchiffon.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lemonchiffon.png new file mode 100644 index 0000000000000000000000000000000000000000..d77ed21418dc3035feb9f9c8e15815e577d71a90 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lemonchiffon.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightblue.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightblue.png new file mode 100644 index 0000000000000000000000000000000000000000..7cc96f8f6364b93923f0a88b895fe6b151080932 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightblue.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightcoral.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightcoral.png new file mode 100644 index 0000000000000000000000000000000000000000..515185ab1b3cf9aaba1204760dae19ab3c112b42 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightcoral.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightcyan.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightcyan.png new file mode 100644 index 0000000000000000000000000000000000000000..6f929d8ab35b708978d8053047cb56bec4fa83bc Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightcyan.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightgoldenrodyellow.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightgoldenrodyellow.png new file mode 100644 index 0000000000000000000000000000000000000000..1b0ed50716d897398c1e9a741e08ff5f1b9fd9de Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightgoldenrodyellow.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightgray.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightgray.png new file mode 100644 index 0000000000000000000000000000000000000000..0a5eb251a8d731dc6a9d8b1f31f904c42fd372c3 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightgray.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightgreen.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightgreen.png new file mode 100644 index 0000000000000000000000000000000000000000..f89943fc98661a6d2b78b5659c41483308a0c54b Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightgreen.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightpink.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightpink.png new file mode 100644 index 0000000000000000000000000000000000000000..6eb2d41877c85cccfb918b042bc13c81c58ec191 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightpink.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightsalmon.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightsalmon.png new file mode 100644 index 0000000000000000000000000000000000000000..d87462d1cdc9410e91ee050a53d58e71d1c5f312 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightsalmon.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightseagreen.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightseagreen.png new file mode 100644 index 0000000000000000000000000000000000000000..e863d7a1c3b9c1ca08bd182dce43c55a4866d59b Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightseagreen.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightskyblue.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightskyblue.png new file mode 100644 index 0000000000000000000000000000000000000000..daa035cea33b810571c18de67e4ac887eeb11850 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightskyblue.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightslategray.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightslategray.png new file mode 100644 index 0000000000000000000000000000000000000000..2dadb92ce56793e2dd693bfa7d99b0c1168130dc Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightslategray.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightslategrey.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightslategrey.png new file mode 100644 index 0000000000000000000000000000000000000000..2dadb92ce56793e2dd693bfa7d99b0c1168130dc Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightslategrey.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightsteelblue.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightsteelblue.png new file mode 100644 index 0000000000000000000000000000000000000000..ac0521001d2513fd69e48ce61e1d1128b9d3a6dd Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightsteelblue.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightyellow.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightyellow.png new file mode 100644 index 0000000000000000000000000000000000000000..d1ca7dd07fe7812ec1f87bf748595174569a5672 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lightyellow.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lime.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lime.png new file mode 100644 index 0000000000000000000000000000000000000000..481c833482d38c5f564127c8f412fe3c0275fd24 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/lime.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/limegreen.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/limegreen.png new file mode 100644 index 0000000000000000000000000000000000000000..63a8c6adc29d340634ed06a1006a0fb56c991a9d Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/limegreen.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/linen.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/linen.png new file mode 100644 index 0000000000000000000000000000000000000000..486baf6be50982404fd1c68a5bc51db45c62046a Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/linen.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/list6.gif b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/list6.gif similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/list6.gif rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/list6.gif diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/magenta.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/magenta.png new file mode 100644 index 0000000000000000000000000000000000000000..6823cbc9203b07abae455b4ee5c7692878c4be72 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/magenta.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/maroon.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/maroon.png new file mode 100644 index 0000000000000000000000000000000000000000..1324b43b3f5b8dd0548cf2069c4c532c5284c445 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/maroon.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumaquamarine.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumaquamarine.png new file mode 100644 index 0000000000000000000000000000000000000000..800bf296338fd01962f16a8863c37bfe515ce3be Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumaquamarine.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumblue.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumblue.png new file mode 100644 index 0000000000000000000000000000000000000000..c0df3f4f7d99f0b8c39995133c71d944bc07ea4b Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumblue.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumorchid.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumorchid.png new file mode 100644 index 0000000000000000000000000000000000000000..664d13c38389361e61a45870899e2a6f0bfc835f Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumorchid.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumpurple.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumpurple.png new file mode 100644 index 0000000000000000000000000000000000000000..848454297b67eb73ab641424badc438433e24479 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumpurple.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumseagreen.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumseagreen.png new file mode 100644 index 0000000000000000000000000000000000000000..984e7a561e661ecefca8b60d5ac239b67f96c98c Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumseagreen.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumslateblue.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumslateblue.png new file mode 100644 index 0000000000000000000000000000000000000000..39cf9d01563cf63bee003a47cd88258e860a0757 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumslateblue.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumspringgreen.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumspringgreen.png new file mode 100644 index 0000000000000000000000000000000000000000..56db1024a714f821528656c64e12520311bae8f5 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumspringgreen.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumturquoise.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumturquoise.png new file mode 100644 index 0000000000000000000000000000000000000000..b3c353b6a872d3597b767f4c216b2d16bfc2139b Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumturquoise.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumvioletred.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumvioletred.png new file mode 100644 index 0000000000000000000000000000000000000000..00767e63c899eec52c2c732e834bca8d26d348ce Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mediumvioletred.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/menu13.gif b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/menu13.gif similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/menu13.gif rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/menu13.gif diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/midnightblue.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/midnightblue.png new file mode 100644 index 0000000000000000000000000000000000000000..ac66614c0f277cd722b3d090cb10efb973152b0f Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/midnightblue.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mintcream.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mintcream.png new file mode 100644 index 0000000000000000000000000000000000000000..64fdda07447707816e8a6238939169f58a4ce58f Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mintcream.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mistyrose.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mistyrose.png new file mode 100644 index 0000000000000000000000000000000000000000..6f5fe69b5a5a62b2d2b719b2be0a17a501363918 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/mistyrose.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/moccasin.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/moccasin.png new file mode 100644 index 0000000000000000000000000000000000000000..115cb4c96382681743381aeba099549dc24c2ae5 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/moccasin.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/multitext.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/multitext.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/multitext.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/multitext.png diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/navajowhite.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/navajowhite.png new file mode 100644 index 0000000000000000000000000000000000000000..a68e61ab120651294310c5e3632ce22d71917a52 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/navajowhite.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/navy.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/navy.png new file mode 100644 index 0000000000000000000000000000000000000000..4e41c2cd90ba17798448d70b493ccceb3ac960f0 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/navy.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/oldlace.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/oldlace.png new file mode 100644 index 0000000000000000000000000000000000000000..ecf361e4c749446160da1e8a07169b21d99f362a Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/oldlace.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/olive.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/olive.png new file mode 100644 index 0000000000000000000000000000000000000000..0d386fef5c4fa9faf1b29c7667c7392db250f2eb Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/olive.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/olivedrab.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/olivedrab.png new file mode 100644 index 0000000000000000000000000000000000000000..639f16f8aaf261176b3bc760c2eb616ad2f4aa28 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/olivedrab.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/orange.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/orange.png new file mode 100644 index 0000000000000000000000000000000000000000..9c43caf5fdfd466eafc37b793f509a6bde2b885d Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/orange.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/orangered.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/orangered.png new file mode 100644 index 0000000000000000000000000000000000000000..e72165fdf1b24d80f0abde742ad3d848497c6ea7 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/orangered.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/orchid.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/orchid.png new file mode 100644 index 0000000000000000000000000000000000000000..9114031e04fc28be59e8c9567c0fcfe81a9cc5cb Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/orchid.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/palegoldenrod.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/palegoldenrod.png new file mode 100644 index 0000000000000000000000000000000000000000..131584c72c082f40e2b466e2706c86a05df375e0 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/palegoldenrod.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/palegreen.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/palegreen.png new file mode 100644 index 0000000000000000000000000000000000000000..891d52276622fd51893634ce26e08bd56f62b782 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/palegreen.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/paleturquoise.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/paleturquoise.png new file mode 100644 index 0000000000000000000000000000000000000000..a618da21cf6c6d32066286e594921c0fc75b5dba Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/paleturquoise.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/palevioletred.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/palevioletred.png new file mode 100644 index 0000000000000000000000000000000000000000..c88212b6818d6d18c77ee497cfcafaf661a70d52 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/palevioletred.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/panel6.gif b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/panel6.gif similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/panel6.gif rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/panel6.gif diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/papayawhip.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/papayawhip.png new file mode 100644 index 0000000000000000000000000000000000000000..4b1948de8581602c6c5879c03d68c14f06eccd00 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/papayawhip.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/peachpuff.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/peachpuff.png new file mode 100644 index 0000000000000000000000000000000000000000..1821f9c40ad9d24dc10dc662ecbe7936c9e10633 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/peachpuff.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/peru.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/peru.png new file mode 100644 index 0000000000000000000000000000000000000000..3ca3e045717379bb09fa8d13ea0d42019bf546f2 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/peru.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/pink.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/pink.png new file mode 100644 index 0000000000000000000000000000000000000000..5c5e360f249a2002ba68ad9b94bd7f66f5d6aab1 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/pink.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/plum.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/plum.png new file mode 100644 index 0000000000000000000000000000000000000000..1e0bad2b2bfed2559e53a8bc21162e6163ec8434 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/plum.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/powderblue.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/powderblue.png new file mode 100644 index 0000000000000000000000000000000000000000..8b3eec4e46f6a29dc47694940ceaef1cfa1314af Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/powderblue.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/progress.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/progress.png old mode 100755 new mode 100644 similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/progress.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/progress.png diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/purple.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/purple.png new file mode 100644 index 0000000000000000000000000000000000000000..8bc3583f82d21c8bec0c70b2da36ed05723fd9a7 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/purple.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/rebeccapurple.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/rebeccapurple.png new file mode 100644 index 0000000000000000000000000000000000000000..6a64534a0a867d44cf81c8a34c9981b5fbaf5faf Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/rebeccapurple.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/red.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/red.png new file mode 100644 index 0000000000000000000000000000000000000000..309d1c46f8bc396df5eaed381a5ffa2f0389d602 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/red.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/rosybrown.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/rosybrown.png new file mode 100644 index 0000000000000000000000000000000000000000..adca00e684afb79ff4f21313d0586025576a8be1 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/rosybrown.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/royalblue.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/royalblue.png new file mode 100644 index 0000000000000000000000000000000000000000..69cb300d4bc8decee06c7fb64b03a24287865a8f Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/royalblue.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/saddlebrown.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/saddlebrown.png new file mode 100644 index 0000000000000000000000000000000000000000..5d0ae86ad14ff863511a10ecc1a85b273e826dfc Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/saddlebrown.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/salmon.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/salmon.png new file mode 100644 index 0000000000000000000000000000000000000000..b80a6c31cdb287c35965c7841aa97711d79b371c Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/salmon.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/sample1.gif b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/sample1.gif old mode 100755 new mode 100644 similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/sample1.gif rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/sample1.gif diff --git a/zh-cn/application-dev/js-reference/figures/sample_css.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/sample_css.png old mode 100755 new mode 100644 similarity index 100% rename from zh-cn/application-dev/js-reference/figures/sample_css.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/sample_css.png diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/sandybrown.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/sandybrown.png new file mode 100644 index 0000000000000000000000000000000000000000..c952585d8032733700b57ce1a919d71ce9a4b58b Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/sandybrown.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/screenshot.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/screenshot.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/screenshot.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/screenshot.png diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/seagreen.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/seagreen.png new file mode 100644 index 0000000000000000000000000000000000000000..858c4187d3a2874f651adc09dcae9a32f8407d86 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/seagreen.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/seashell.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/seashell.png new file mode 100644 index 0000000000000000000000000000000000000000..c0b21ed6b44c2f756458137f931873f540c16e5f Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/seashell.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/sienna.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/sienna.png new file mode 100644 index 0000000000000000000000000000000000000000..bdb02fdda28a155e2f622eeea2ff820144780e50 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/sienna.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/silver.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/silver.png new file mode 100644 index 0000000000000000000000000000000000000000..0491d350277cd67d7774e3761164b9dd7038a117 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/silver.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/skyblue.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/skyblue.png new file mode 100644 index 0000000000000000000000000000000000000000..1c4f9ae52153198f8690a1066fe66ba8c7bd1ee1 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/skyblue.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/slateblue.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/slateblue.png new file mode 100644 index 0000000000000000000000000000000000000000..87915df37741dacfe9448bfebccf5a88d3ca2a76 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/slateblue.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/slategray-4.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/slategray-4.png new file mode 100644 index 0000000000000000000000000000000000000000..6e4476c4791e37d4681f8e12313ae1cad0887c1b Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/slategray-4.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/slategray.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/slategray.png new file mode 100644 index 0000000000000000000000000000000000000000..6e4476c4791e37d4681f8e12313ae1cad0887c1b Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/slategray.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/slider.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/slider.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/slider.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/slider.png diff --git a/zh-cn/application-dev/js-reference/component/figures/smoothOff.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/smoothOff.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/smoothOff.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/smoothOff.png diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/snow.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/snow.png new file mode 100644 index 0000000000000000000000000000000000000000..283cf90b3828b36af6fb3a746e806f6715053310 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/snow.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/springgreen.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/springgreen.png new file mode 100644 index 0000000000000000000000000000000000000000..93825b7fe53a0794751ee4aa3ca46300c404835e Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/springgreen.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/sssssss.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/sssssss.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/sssssss.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/sssssss.png diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/steelblue.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/steelblue.png new file mode 100644 index 0000000000000000000000000000000000000000..a9aba5f67b94427168fade014542532431e28a2e Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/steelblue.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/tab.gif b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/tab.gif old mode 100755 new mode 100644 similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/tab.gif rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/tab.gif diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/tan.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/tan.png new file mode 100644 index 0000000000000000000000000000000000000000..b162dbf0a6c890a03ea1aa0b28bdb454651b697c Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/tan.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/teal.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/teal.png new file mode 100644 index 0000000000000000000000000000000000000000..93299fc38d761e5251673210c364f6825e319153 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/teal.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/js-based-web-like-development-paradigm/figures/text-animate-part1.gif similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324699.gif rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/text-animate-part1.gif diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164783.gif b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/text-animate-part2.gif similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164783.gif rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/text-animate-part2.gif diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125122.gif b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/text-animate-part3.gif similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125122.gif rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/text-animate-part3.gif diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324697.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/text-part1.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324697.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/text-part1.png diff --git a/zh-cn/application-dev/js-reference/component/figures/text.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/text.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/text.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/text.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164775.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/textPath-part1.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164775.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/textPath-part1.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324691.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/textPath-part2.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324691.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/textPath-part2.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324689.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/textPath-part3.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324689.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/textPath-part3.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284930.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/textPath-part4.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284930.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/textPath-part4.png diff --git a/zh-cn/application-dev/js-reference/component/figures/textpath-animate1.gif b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/textpath-animate1.gif similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/textpath-animate1.gif rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/textpath-animate1.gif diff --git a/zh-cn/application-dev/js-reference/component/figures/textpath-animate2.gif b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/textpath-animate2.gif similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/textpath-animate2.gif rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/textpath-animate2.gif diff --git a/zh-cn/application-dev/js-reference/component/figures/textpath-animate3.gif b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/textpath-animate3.gif similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/textpath-animate3.gif rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/textpath-animate3.gif diff --git a/zh-cn/application-dev/js-reference/component/figures/textpath-animate4.gif b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/textpath-animate4.gif similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/textpath-animate4.gif rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/textpath-animate4.gif diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/thistle.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/thistle.png new file mode 100644 index 0000000000000000000000000000000000000000..d62fc7767f7b2e0e8d0d7fed57e30bdf6a6a332f Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/thistle.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/time.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/time.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/time.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/time.png diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/tomato.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/tomato.png new file mode 100644 index 0000000000000000000000000000000000000000..6d795f1618b1546c94266548069eccf9e9af2e01 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/tomato.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/js-based-web-like-development-paradigm/figures/tspan-animate-part1.gif similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127285008.gif rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/tspan-animate-part1.gif diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125198.gif b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/tspan-animate-part2.gif similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125198.gif rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/tspan-animate-part2.gif diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164863.gif b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/tspan-animate-part3.gif similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164863.gif rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/tspan-animate-part3.gif diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125200.gif b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/tspan-animate-part4.gif similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125200.gif rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/tspan-animate-part4.gif diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125196.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/tspan-part1.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125196.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/tspan-part1.png diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/turquoise.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/turquoise.png new file mode 100644 index 0000000000000000000000000000000000000000..a33c4fce8448e2127b21e277437195ce0002766b Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/turquoise.png differ diff --git a/zh-cn/application-dev/js-reference/figures/unnaming-(1).png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/unnaming-(1).png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/unnaming-(1).png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/unnaming-(1).png diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/violet.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/violet.png new file mode 100644 index 0000000000000000000000000000000000000000..e9a0799a203fdd7bd41fa5175585dc170a20156e Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/violet.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/wheat.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/wheat.png new file mode 100644 index 0000000000000000000000000000000000000000..8a5c7039b580128e75299672dc5438151dcf3572 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/wheat.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/white.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/white.png new file mode 100644 index 0000000000000000000000000000000000000000..56d32d4cd371c5374b133cb81c9c077aaf7b110d Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/white.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/whitesmoke.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/whitesmoke.png new file mode 100644 index 0000000000000000000000000000000000000000..6dc88e656c293c2e65939e4a793684488dfc81be Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/whitesmoke.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/yellow.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/yellow.png new file mode 100644 index 0000000000000000000000000000000000000000..b54dbc2391d1a8f16312dd02dc3d65a35ea2626f Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/yellow.png differ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/yellowgreen.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/yellowgreen.png new file mode 100644 index 0000000000000000000000000000000000000000..f89e20a55ba1e81f2cbda2bd0241edefadbe7149 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/yellowgreen.png differ diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125124.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001127125124.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125124.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001127125124.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125132.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001127125132.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125132.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001127125132.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125136.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001127125136.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125136.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001127125136.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125162.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001127125162.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125162.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001127125162.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125202.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001127125202.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125202.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001127125202.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125204.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001127125204.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125204.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001127125204.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125208.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001127125208.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125208.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001127125208.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125212.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001127125212.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125212.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001127125212.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125220.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001127125220.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125220.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001127125220.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125268.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001127125268.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125268.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001127125268.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284954.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001127284954.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284954.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001127284954.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284958.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001127284958.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284958.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001127284958.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284984.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001127284984.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284984.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001127284984.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127285024.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001127285024.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127285024.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001127285024.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127285034.gif b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001127285034.gif similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127285034.gif rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001127285034.gif diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127285076.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001127285076.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127285076.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/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/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001135171488.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001135171488.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001135171488.png diff --git a/zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001147417424.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001147417424.png similarity index 100% rename from zh-cn/application-dev/js-reference/figures/zh-cn_image_0000001147417424.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001147417424.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001150368628.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001150368628.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001150368628.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001150368628.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001150719520.gif b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001150719520.gif similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001150719520.gif rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001150719520.gif diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152588538.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001152588538.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152588538.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001152588538.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152588626.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001152588626.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152588626.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001152588626.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152610806.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001152610806.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152610806.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001152610806.png diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001152773860.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001152773860.png new file mode 100644 index 0000000000000000000000000000000000000000..dca96aeb057ba12dc63365e613007e54dd268a40 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/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/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001152833768.gif similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152833768.gif rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001152833768.gif diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152834002.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001152834002.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152834002.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001152834002.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152862510.gif b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001152862510.gif similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152862510.gif rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001152862510.gif diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001153427082.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001153427082.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001153427082.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001153427082.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125166.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001166484430.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125166.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001166484430.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284942.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001166962736.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284942.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001166962736.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284966.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001167001464.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284966.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001167001464.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324725.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001167046832.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324725.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001167046832.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164795.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001167472798.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164795.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001167472798.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125148.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001167631876.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125148.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001167631876.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001198530815.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001167950468.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001198530815.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001167950468.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125168.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001167953648.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125168.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001167953648.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284952.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001168111514.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284952.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001168111514.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284944.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001168111610.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284944.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001168111610.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164791.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001168984880.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164791.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001168984880.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001198690237.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001168984882.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001198690237.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001168984882.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284960.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001169142476.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284960.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001169142476.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164807.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001169143586.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164807.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001169143586.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125158.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001169144864.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125158.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001169144864.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284950.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001169151508.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284950.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001169151508.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164829.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001169301188.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164829.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001169301188.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284956.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001169303414.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284956.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001169303414.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164827.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001169303416.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164827.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001169303416.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164819.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001169309930.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164819.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001169309930.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125152.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001169309948.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125152.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001169309948.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324713.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001169315920.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324713.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001169315920.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324723.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001169461910.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324723.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001169461910.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125146.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001169463368.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125146.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001169463368.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164813.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001169463370.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164813.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001169463370.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324711.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001169469914.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324711.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001169469914.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125154.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001169470288.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125154.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001169470288.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164789.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001173164789.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164789.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001173164789.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164793.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001173164793.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164793.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001173164793.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164845.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001173164845.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164845.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001173164845.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164853.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001173164853.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164853.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001173164853.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164867.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001173164867.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164867.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001173164867.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164869.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001173164869.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164869.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001173164869.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164871.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001173164871.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164871.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001173164871.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164873.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001173164873.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164873.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001173164873.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164891.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001173164891.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164891.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001173164891.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324721.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001173324721.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324721.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001173324721.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324749.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001173324749.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324749.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001173324749.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324751.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001173324751.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324751.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001173324751.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324783.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001173324783.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324783.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001173324783.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324787.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001173324787.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324787.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001173324787.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324797.gif b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001173324797.gif similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324797.gif rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001173324797.gif diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324843.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001173324843.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324843.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001173324843.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324847.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001173324847.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324847.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/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/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001178886129.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001178886129.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001178886129.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001181449919.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001181449919.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001181449919.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001181449919.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001181458721.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001181458721.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001181458721.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001181458721.png diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001198530395.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001198530395.png new file mode 100644 index 0000000000000000000000000000000000000000..5e7bc3dec11daa00059d3ec93d77ac15ce357a14 Binary files /dev/null and b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001198530395.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/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001198670487.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001198670487.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001198670487.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001198898293.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001198898293.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001198898293.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001198898293.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324719.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001212124299.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324719.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001212124299.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324717.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001213192781.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173324717.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001213192781.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164825.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001213193285.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164825.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001213193285.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125156.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001214460669.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125156.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001214460669.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164805.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001214463281.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164805.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001214463281.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001198530737.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001214463283.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001198530737.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001214463283.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164833.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001214469787.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164833.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001214469787.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164831.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001214619417.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164831.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001214619417.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152610854.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001214621177.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152610854.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001214621177.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164809.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001214623227.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164809.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001214623227.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152770952.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001214623229.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152770952.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001214623229.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125164.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001214629745.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125164.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001214629745.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125130.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001214630783.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125130.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001214630783.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284940.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001214703717.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127284940.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001214703717.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164821.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001214704759.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164821.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001214704759.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125140.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001214717247.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125140.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001214717247.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125134.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001214811029.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125134.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001214811029.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164817.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001214822091.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001173164817.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001214822091.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152770830.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001214824709.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001152770830.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001214824709.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125144.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001214837127.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125144.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001214837127.png diff --git a/zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125160.png b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001214837333.png similarity index 100% rename from zh-cn/application-dev/js-reference/component/figures/zh-cn_image_0000001127125160.png rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/zh-cn_image_0000001214837333.png diff --git "a/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" "b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/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/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" rename to "zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/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/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" "b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/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/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" rename to "zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/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/component/figures/\345\215\241\347\211\207\350\275\254\345\234\272.gif" "b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/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/component/figures/\345\215\241\347\211\207\350\275\254\345\234\272.gif" rename to "zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/\345\215\241\347\211\207\350\275\254\345\234\272.gif" diff --git "a/zh-cn/application-dev/js-reference/figures/\345\244\232\345\256\236\344\276\213\350\265\204\346\272\220\345\205\261\344\272\253\347\233\256\345\275\225\347\273\223\346\236\2045+.png" "b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/\345\244\232\345\256\236\344\276\213\350\265\204\346\272\220\345\205\261\344\272\253\347\233\256\345\275\225\347\273\223\346\236\2045+.png" similarity index 100% rename from "zh-cn/application-dev/js-reference/figures/\345\244\232\345\256\236\344\276\213\350\265\204\346\272\220\345\205\261\344\272\253\347\233\256\345\275\225\347\273\223\346\236\2045+.png" rename to "zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/figures/\345\244\232\345\256\236\344\276\213\350\265\204\346\272\220\345\205\261\344\272\253\347\233\256\345\275\225\347\273\223\346\236\2045+.png" diff --git "a/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" "b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/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/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" rename to "zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/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/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" "b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/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/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" rename to "zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/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/js-based-web-like-development-paradigm/js-appendix-types.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-appendix-types.md new file mode 100644 index 0000000000000000000000000000000000000000..d3bbd07fb3a78e8ce0570849c2719e1a73010151 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-appendix-types.md @@ -0,0 +1,1099 @@ +# 类型说明 + +## 长度类型 + + + + + + + + + + + + + + + + +

名称

+

类型定义

+

描述

+

length

+

string | number

+

用于描述尺寸单位，输入为number类型时，使用px单位；输入为string类型时，需要显式指定像素单位，当前支持的像素单位有：

+
  • px：逻辑尺寸单位。
  • fp6+：字体尺寸单位，会随系统字体大小设置发生变化，仅支持文本类组件设置相应的字体大小。
+

percentage

+

string

+

百分比尺寸单位，如“50%”。

+
+ +## 颜色类型 + + + + + + + + + + + + +

名称

+

类型定义

+

描述

+

color

+

string | 颜色枚举字符串

+

用于描述颜色信息。

+
字符串格式如下：
  • 'rgb(255, 255, 255)'
  • 'rgba(255, 255, 255, 1.0)'
  • HEX格式：'#rrggbb'，'#aarrggbb'
  • 枚举格式：'black'，'white'。
    说明：

    JS脚本中不支持颜色枚举格式。

    +
    +
+
+
+ +**表 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/js-based-web-like-development-paradigm/js-appendix.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-appendix.md new file mode 100644 index 0000000000000000000000000000000000000000..30905dbc91d4d700576235f9badd9e78bcab376a --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-appendix.md @@ -0,0 +1,5 @@ +# 附录 + +- **[类型说明](js-appendix-types.md)** + + diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-button.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-button.md new file mode 100644 index 0000000000000000000000000000000000000000..4eca5ccf03afc1e220a625687390efe9123c55c0 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-button.md @@ -0,0 +1,411 @@ +# button + +提供按钮组件，包括胶囊按钮、圆形按钮、文本按钮、弧形按钮、下载按钮。 + +## 子组件 + +不支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

type

+

string

+

-

+

否

+

不支持动态修改。如果该属性缺省，展示类胶囊型按钮，不同于胶囊类型，四边圆角可以通过border-radius分别指定，如果需要设置该属性，则可选值包括如下：

+
  • capsule：胶囊型按钮，带圆角按钮，有背景色和文本；
  • circle：圆形按钮，支持放置图标；
  • text：文本按钮，仅包含文本显示；
  • arc：弧形按钮，仅支持智能穿戴；
  • download：下载按钮，额外增加下载进度条功能，仅支持手机和智慧屏。
+

value

+

string

+

-

+

否

+

button的文本值。

+

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)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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)中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)。 + +## 方法 + +支持[通用方法](js-components-common-methods.md)。 + +类型为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/js-based-web-like-development-paradigm/js-components-basic-chart.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-chart.md new file mode 100644 index 0000000000000000000000000000000000000000..67c9c8e63a23fd878b0245f62454193e2488de20 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-chart.md @@ -0,0 +1,1155 @@ +# chart + +图表组件，用于呈现线形图、柱状图、量规图界面。 + +## 权限列表 + +无 + +## 子组件 + +不支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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)。 + +## 方法 + +除支持[通用方法](js-components-common-methods.md)外，还支持如下方法： + + + + + + + + + + + + +

方法

+

参数

+

描述

+

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/js-based-web-like-development-paradigm/js-components-basic-divider.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-divider.md new file mode 100644 index 0000000000000000000000000000000000000000..b5fc0f0c36e17dee76a83e04c0719721bec9db0c --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-divider.md @@ -0,0 +1,246 @@ +# divider + +提供分隔器组件，分隔不同内容块/内容元素。可用于列表或界面布局。 + +## 权限列表 + +无 + +## 子组件 + +不支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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/js-based-web-like-development-paradigm/js-components-basic-image-animator.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-image-animator.md new file mode 100644 index 0000000000000000000000000000000000000000..8f78800c511547256baca3ea434f442ea18eb648 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-image-animator.md @@ -0,0 +1,418 @@ +# image-animator + +图片帧动画播放器。 + +## 子组件 + +不支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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)。 + +## 事件 + +除支持[通用事件](js-components-common-events.md)外，还支持如下事件： + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

start

+

-

+

帧动画启动时触发。

+

pause

+

-

+

帧动画暂停时触发。

+

stop

+

-

+

帧动画结束时触发。

+

resume

+

-

+

帧动画恢复时触发。

+
+ +## 方法 + +支持[通用方法](js-components-common-methods.md)外，还支持如下方法： + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

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/js-based-web-like-development-paradigm/js-components-basic-image.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-image.md new file mode 100644 index 0000000000000000000000000000000000000000..0c2e0d6189891f08cbe7fd4c13be53680ae53c19 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-image.md @@ -0,0 +1,242 @@ +# image + +图片组件，用来渲染展示图片。 + +## 子组件 + +不支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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)外，还支持如下事件： + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

complete(Rich)

+

{ width：width， height：height }

+

图片成功加载时触发该回调，返回成功加载的图源尺寸。

+

error(Rich)

+

{ width：width， height：height }

+

图片加载出现异常时触发该回调，异常时长宽为零。

+
+ +## 方法 + +支持[通用方法](js-components-common-methods.md)。 + +## 示例 + +``` + +
+ + + +
+``` + +``` +/* 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/js-based-web-like-development-paradigm/js-components-basic-input.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-input.md new file mode 100644 index 0000000000000000000000000000000000000000..280de789554f6be5dbab1c01c027ef6667c0898f --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-input.md @@ -0,0 +1,606 @@ +# input + +交互式组件，包括单选框，多选框，按钮和单行文本输入框。 + +## 权限列表 + +无 + +## 子组件 + +不支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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)外，还支持如下事件： + +- 当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)外，还支持如下方法： + + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

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/js-based-web-like-development-paradigm/js-components-basic-label.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-label.md new file mode 100644 index 0000000000000000000000000000000000000000..3fa3c78a09b7f04380af8587e3c1d0902d543e26 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-label.md @@ -0,0 +1,300 @@ +# label + +为input、button、textarea组件定义相应的标注，点击该标注时会触发绑定组件的点击效果。 + +## 权限列表 + +无 + +## 子组件 + +不支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

target

+

string

+

-

+

否

+

目标组件的属性id值。

+
+ +## 样式 + +除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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/js-based-web-like-development-paradigm/js-components-basic-marquee.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-marquee.md new file mode 100644 index 0000000000000000000000000000000000000000..29dd46d9edc5bfb82a01c68d101dee113bb79aaa --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-marquee.md @@ -0,0 +1,283 @@ +# marquee + +跑马灯组件，用于展示一段单行滚动的文字。 + +## 权限列表 + +无 + +## 子组件 + +不支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

scrollamount

+

number

+

6

+

否

+

跑马灯每次滚动时移动的最大长度。

+

loop

+

number

+

-1

+

否

+

跑马灯滚动的次数。如果未指定，则默认值为-1，当该值小于等于零时表示marquee将连续滚动。

+

direction

+

string

+

left

+

否

+

设置跑马灯的文字滚动方向，可选值为left和right。

+
+ +## 样式 + +除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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)外，还支持如下事件： + + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

bounce(Rich)

+

-

+

当文本滚动到末尾时触发该事件。

+

finish(Rich)

+

-

+

当完成滚动次数时触发该事件。需要在 loop 属性值大于 0 时触发。

+

start(Rich)

+

-

+

当文本滚动开始时触发该事件。

+
+ +## 方法 + +除支持[通用方法](js-components-common-methods.md)外，还支持如下方法： + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

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/js-based-web-like-development-paradigm/js-components-basic-menu.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-menu.md new file mode 100644 index 0000000000000000000000000000000000000000..dc698d66376b141ea0109edea18582a84404b6fa --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-menu.md @@ -0,0 +1,264 @@ +# menu + +提供菜单组件，作为临时性弹出窗口，用于展示用户可执行的操作。 + +## 权限列表 + +无 + +## 子组件 + +<[option](js-components-basic-option.md)\>子组件。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性：↵ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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/js-based-web-like-development-paradigm/js-components-basic-option.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-option.md new file mode 100644 index 0000000000000000000000000000000000000000..839c135eb2e8d425accab6ede970f9c8712273cf --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-option.md @@ -0,0 +1,169 @@ +# option + +当作为<[select](js-components-basic-select.md)\>的子组件时用来展示下拉选择的具体项目。 + +当作为<[menu](js-components-basic-menu.md)\>的子组件时用来展示弹出菜单的具体项目。 + +## 权限列表 + +无 + +## 子组件 + +不支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性：↵ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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#section54636714136)。 + diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-picker-view.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-picker-view.md new file mode 100644 index 0000000000000000000000000000000000000000..22ba20cba780f27ba5e9234cf965c2a4c49909ba --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-picker-view.md @@ -0,0 +1,637 @@ +# picker-view + +嵌入页面的滑动选择器。 + +## 子组件 + +不支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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/js-based-web-like-development-paradigm/js-components-basic-picker.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-picker.md new file mode 100644 index 0000000000000000000000000000000000000000..532975b56b313251f40f2ad1a53a0bb59c306469 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-picker.md @@ -0,0 +1,842 @@ +# picker + +滑动选择器组件，类型支持普通选择器、日期选择器、时间选择器、时间日期选择器和多列文本选择器。 + +## 权限列表 + +无 + +## 子组件 + +不支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性：↵ + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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)外，还支持如下事件： + +普通选择器： + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

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)外，支持如下方法： + + + + + + + + + + + + +

名称

+

参数

+

描述

+

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/js-based-web-like-development-paradigm/js-components-basic-piece.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-piece.md new file mode 100644 index 0000000000000000000000000000000000000000..5e597d4f8f420692b17ead24ea5389cd5da38703 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-piece.md @@ -0,0 +1,123 @@ +# piece + +一种块状的入口，可包含图片和文本。常用于展示收件人，例如：邮件收件人或信息收件人。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 5 开始支持。 + +## 子组件 + +无 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

content

+

string

+

-

+

是

+

操作块文本内容。

+

closable

+

boolean

+

false

+

否

+

设置当前操作块是否显示删除图标，当显示删除图标时，点击删除图标会触发close事件。

+

icon

+

string

+

-

+

否

+

操作块删除图标的url，支持本地。

+
+ +## 样式 + +支持[通用样式](js-components-common-styles.md)。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>文本和图片默认在整个piece组件中居中。 + +## 事件 + +除支持[通用事件](js-components-common-events.md)外，还支持如下事件： + + + + + + + + + + + + +

名称

+

参数

+

描述

+

close

+

-

+

当piece组件点击删除图标触发，此时可以通过渲染属性if删除该组件。

+
+ +## 方法 + +支持[通用方法](js-components-common-methods.md)。 + +## 示例 + +``` + +
+ + +
+``` + +``` +// 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/js-based-web-like-development-paradigm/js-components-basic-progress.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-progress.md new file mode 100644 index 0000000000000000000000000000000000000000..3940ed7750e99b9b750be1ac1e73ccc3e1ccc61d --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-progress.md @@ -0,0 +1,513 @@ +# progress + +进度条，用于显示内容加载或操作处理进度。 + +## 权限列表 + +无 + +## 子组件 + +不支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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)外，还支持如下样式： + +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)。 + +## 方法 + +支持[通用方法](js-components-common-methods.md)。 + +## 示例 + +``` + +
+ + + + +
+``` + +``` +/* 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/js-based-web-like-development-paradigm/js-components-basic-qrcode.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-qrcode.md new file mode 100644 index 0000000000000000000000000000000000000000..5c33671af048ff6897278621e56950f1eec35fa6 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-qrcode.md @@ -0,0 +1,118 @@ +# qrcode + +生成并显示二维码。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 5 开始支持。 + +## 权限列表 + +无 + +## 子组件 + +不支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

value

+

string

+

-

+

是

+

用来生成二维码的内容。

+

type

+

string

+

rect

+

否

+

二维码类型。可能选项有：

+
  • rect：矩形二维码。
  • circle：圆形二维码。
+
+ +## 样式 + +除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

color

+

<color>

+

#000000

+

否

+

二维码颜色。

+

background-color

+

<color>

+

#ffffff

+

否

+

二维码背景颜色。

+
+ +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- width和height不一致时，取二者较小值作为二维码的边长。且最终生成的二维码居中显示。 +>- width和height只设置一个时，取设置的值作为二维码的边长。都不设置时，使用200px作为默认边长。 + +## 事件 + +支持[通用事件](js-components-common-events.md)。 + +## 方法 + +支持[通用方法](js-components-common-methods.md)。 + +## 示例 + +``` + +``` + diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-rating.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-rating.md new file mode 100644 index 0000000000000000000000000000000000000000..29a3d5860f6b418d2a7c8591750997fdcbc1039c --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-rating.md @@ -0,0 +1,232 @@ +# rating + +评分条，表示用户使用感受的衡量标准条。 + +## 权限列表 + +无 + +## 子组件 + +不支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

numstars

+

number

+

5

+

否

+

设置评分条的星级总数。

+

rating

+

number

+

0

+

否

+

设置评分条当前评星数。

+

stepsize

+

number

+

0.5

+

否

+

设置评分条的评星步长。

+
说明：

仅手机和平板设备支持

+
+

indicator

+

boolean

+

false

+

否

+

设置评分条是否作为一个指示器，此时用户不可操作。

+
+ +## 样式 + +除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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)外，还支持如下事件： + + + + + + + + + + + + +

名称

+

参数

+

描述

+

change

+

{ rating: number }

+

评分条的评星发生改变时触发该回调。

+
+ +## 方法 + +支持[通用方法](js-components-common-methods.md)。 + +## 示例 + +``` + +
+ + +
+``` + +``` +/* 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/js-based-web-like-development-paradigm/js-components-basic-richtext.md similarity index 33% rename from zh-cn/application-dev/js-reference/component/js-components-basic-richtext.md rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-richtext.md index e046586e33ee29b2d6ec9d79de2dbcafb6d08350..b18d45c2f294064174f4e3fd3dbdb459fab2a105 100644 --- a/zh-cn/application-dev/js-reference/component/js-components-basic-richtext.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-richtext.md @@ -1,11 +1,4 @@ -# 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) +# richtext 富文本组件，用于展示富文本信息。 @@ -13,43 +6,43 @@ >- 从 API Version 6 开始支持。 >- 富文本内容需要写在元素标签内。 -## 权限列表 +## 权限列表 无 -## 属性 +## 属性 -仅支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)中的id、style和class属性。 +仅支持[通用属性](js-components-common-attributes.md)中的id、style和class属性。 -## 样式 +## 样式 -仅支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)中的display和visibility样式。 +仅支持[通用样式](js-components-common-styles.md)中的display和visibility样式。 -## 事件 +## 事件 -除支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)外，还支持如下事件： +除支持[通用事件](js-components-common-events.md)外，还支持如下事件： - -

名称

+ + - - - - - - - - @@ -61,11 +54,11 @@ >- 包含richtext的页面返回时richtext显示区域不会跟随页面的转场动效。 >- richtext内容不建议超过一个屏幕高度，超出部分不会显示。 -## 方法 +## 方法 不支持。 -## 示例 +## 示例 ``` diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-search.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-search.md new file mode 100644 index 0000000000000000000000000000000000000000..6f3f08839320552a009be6f84ac8badba0466f21 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-search.md @@ -0,0 +1,295 @@ +# search + +提供搜索框组件，用于提供用户搜索内容的输入区域。 + +## 子组件 + +不支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： + + +

名称

参数

+

参数

描述

+

描述

start

+

start

-

+

-

开始加载时触发。

+

开始加载时触发。

complete

+

complete

-

+

-

加载完成时触发。

+

加载完成时触发。
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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)外，还支持如下事件： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

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)。 + +## 示例 + +``` + +
+ + +
+``` + +``` +/* 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/js-based-web-like-development-paradigm/js-components-basic-select.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-select.md new file mode 100644 index 0000000000000000000000000000000000000000..17a2d1eb7065d810e127304d6a7d78dc94f813f1 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-select.md @@ -0,0 +1,107 @@ +# select + +下拉选择按钮，可让用户在多个选项之间选择。 + +## 权限列表 + +无 + +## 子组件 + +支持<[option](js-components-basic-option.md)\>。 + +## 属性 + +支持[通用属性](js-components-common-attributes.md)。 + +## 样式 + +除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

font-family

+

string

+

sans-serif

+

否

+

字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

+
+ +## 事件 + +除支持[通用事件](js-components-common-events.md)外，还支持如下事件： + + + + + + + + + + + + +

名称

+

参数

+

描述

+

change

+

{newValue: newValue}

+

下拉选择新值后触发该事件，newValue的值为子组件option的value属性值。

+
+ +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- select组件不支持click事件。 + +## 方法 + +支持[通用方法](js-components-common-methods.md)。 + +## 示例 + +``` + +
+ +
+``` + +``` +/* 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/js-based-web-like-development-paradigm/js-components-basic-slider.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-slider.md new file mode 100644 index 0000000000000000000000000000000000000000..419b41ce1bd0a7e8ea1769401c34795b1226d14f --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-slider.md @@ -0,0 +1,281 @@ +# slider + +滑动条组件，用来快速调节设置值，如音量、亮度等。 + +## 子组件 + +不支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

color

+

<color>

+

#19000000

+

否

+

滑动条的背景颜色。

+

selected-color

+

<color>

+

#ff007dff

+

否

+

滑动条的已选择颜色。

+

block-color

+

<color>

+

#ffffff

+

否

+

滑动条的滑块颜色。

+
说明：

仅手机、平板和智慧屏设备支持。

+
+
+ +## 事件 + +除支持[通用事件](js-components-common-events.md)外，还支持如下事件： + + + + + + + + + + + + +

名称

+

参数

+

描述

+

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/js-based-web-like-development-paradigm/js-components-basic-span.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-span.md new file mode 100644 index 0000000000000000000000000000000000000000..6fa717a0b9d0f66500c04dc61bcb5e6b45a20749 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-span.md @@ -0,0 +1,158 @@ +# span + +作为<[text](js-components-basic-text.md)\>子组件提供文本修饰能力。 + +## 权限列表 + +无 + +## 子组件 + +支持子组件。 + +## 属性 + +支持[通用属性](js-components-common-attributes.md)。 + +>![](../../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)中的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/js-based-web-like-development-paradigm/js-components-basic-switch.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-switch.md new file mode 100644 index 0000000000000000000000000000000000000000..5636ddd9d08676e828e5db8a3403c18cbb5e8eaa --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-switch.md @@ -0,0 +1,261 @@ +# switch + +开关选择器，通过开关，开启或关闭某个功能。 + +## 权限列表 + +无 + +## 子组件 + +不支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

checked

+

boolean

+

false

+

否

+

是否选中。

+

showtext

+

boolean

+

false

+

否

+

是否显示文本。

+

texton

+

string

+

"On"

+

否

+

选中时显示的文本。

+

textoff

+

string

+

"Off"

+

否

+

未选中时显示的文本。

+
+ +## 样式 + +除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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)外，还支持如下事件： + + + + + + + + + + + + +

名称

+

参数

+

描述

+

change

+

{ checked: checkedValue }

+

选中状态改变时触发该事件。

+
+ +## 方法 + +支持[通用方法](js-components-common-methods.md)。 + +## 示例 + +``` + +
+ + +
+``` + +``` +/* 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/js-based-web-like-development-paradigm/js-components-basic-text.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-text.md new file mode 100644 index 0000000000000000000000000000000000000000..c42b1298864e73d64944515f59de0585f1a60994 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-text.md @@ -0,0 +1,405 @@ +# text + +文本，用于呈现一段信息。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>文本的展示内容需要写在元素标签内。 + +## 权限列表 + +无 + +## 子组件 + +支持<[span](js-components-basic-span.md)\>。 + +## 属性 + +支持[通用属性](js-components-common-attributes.md)。 + +## 样式 + +除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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)。 + +## 方法 + +支持[通用方法](js-components-common-methods.md)。 + +## 示例 + +``` + +
+
+ + Hello {{ title }} + +
+
+``` + +``` +/* xxx.css */ +.container { + display: flex; + justify-content: center; + align-items: center; +} +.content{ + width: 400px; + height: 400px; + border: 20px; + border-image-source: url("/common/images/landscape.jpg"); + border-image-slice: 20px; + border-image-width: 30px; + border-image-outset: 10px; + border-image-repeat: round; +} +.title { + font-size: 80px; + text-align: center; + width: 400px; + height: 400px; +} +``` + +``` +// xxx.js +export default { + data: { + title: 'World' + } +} +``` + +![](figures/3.png) + +``` + +
+ + This is a passage + + + This is a passage + +
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + align-items: center; + background-color: #F1F3F5; + justify-content: center; +} +.text1{ + word-spacing: 10px; + adapt-height: true; +} +.text2{ + width: 200px; + max-lines: 1; + text-overflow: ellipsis; + text-valign: middle; + line-height: 40px; + text-decoration: underline; + text-decoration-color: red; + text-indent: 20px; + white-space: pre; +} +``` + +![](figures/2.png) + diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-textarea.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-textarea.md new file mode 100644 index 0000000000000000000000000000000000000000..62211cb9153f11f00033c73dc581621264eec623 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-textarea.md @@ -0,0 +1,373 @@ +# textarea + +多行文本输入的文本框。 + +## 权限列表 + +无 + +## 子组件 + +不支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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)外，还支持如下事件： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

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)。 + +## 示例 + +``` + + +``` + +``` +/* 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/js-based-web-like-development-paradigm/js-components-basic-toggle.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-toggle.md new file mode 100644 index 0000000000000000000000000000000000000000..25877f04d68ccbb76a7191a307ba2fb9611e5304 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-toggle.md @@ -0,0 +1,232 @@ +# toggle + +状态按钮用于从一组选项中进行选择，并可能在界面上实时显示选择后的结果。通常这一组选项都是由状态按钮构成。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从 API Version 5 开始支持。 + +## 权限列表 + +无 + +## 子组件 + +不支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

value

+

string

+

-

+

是

+

状态按钮的文本值。

+

checked

+

boolean

+

false

+

否

+

状态按钮是否被选中。

+
+ +## 样式 + +除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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)外，还支持如下事件： + + + + + + + + + + + + +

名称

+

参数

+

描述

+

change

+

{ checked：isChecked }

+

组件选中状态发生变化时触发。

+
+ +## 方法 + +支持[通用方法](js-components-common-methods.md)。 + +## 示例 + +``` + +
+ 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/js-based-web-like-development-paradigm/js-components-basic-toolbar-item.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-toolbar-item.md new file mode 100644 index 0000000000000000000000000000000000000000..eb1811c893e962eddaad9a13753102b838f529af --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-toolbar-item.md @@ -0,0 +1,287 @@ +# toolbar-item + +工具栏子组件。作为工具栏组件的子组件，用于展示工具栏上的一个操作选项。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 5 开始支持。 + +## 子组件 + +无 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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)。 + +## 方法 + +不支持。 + +## 示例 + +``` + + + + + + + + +``` + +![](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/js-based-web-like-development-paradigm/js-components-basic-toolbar.md similarity index 37% rename from zh-cn/application-dev/js-reference/component/js-components-basic-toolbar.md rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-toolbar.md index b2f4d1c6820f89be5f2824d704614bf5657bb3e8..7a18cab1fe44638d0dbfc7c6b642f007bdb1e894 100644 --- a/zh-cn/application-dev/js-reference/component/js-components-basic-toolbar.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic-toolbar.md @@ -1,49 +1,41 @@ -# 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) +# toolbar 工具栏。放在界面底部，用于展示针对当前界面的操作选项。 >![](../../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-attributes.md)。 -## 样式 +## 样式 -支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)。 +支持[通用样式](js-components-common-styles.md)。 >![](../../public_sys-resources/icon-note.gif) **说明：** >- 不支持height样式，高度固定为56px。 -## 事件 +## 事件 不支持。 -## 方法 +## 方法 不支持。 -## 示例 +## 示例 -详见[toolbar-item示例](js-components-basic-toolbar-item.md#ZH-CN_TOPIC_0000001209252173)。 +详见[toolbar-item示例](js-components-basic-toolbar-item.md)。 diff --git a/zh-cn/application-dev/js-reference/component/js-components-basic.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic.md similarity index 96% rename from zh-cn/application-dev/js-reference/component/js-components-basic.md rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic.md index c427e1ab658ff0a5ef91c3c290144313c07a0d84..e03bcd63f036b44469709a344c7cb80b43b91422 100644 --- a/zh-cn/application-dev/js-reference/component/js-components-basic.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-basic.md @@ -1,4 +1,4 @@ -# 基础组件 +# 基础组件 - **[button](js-components-basic-button.md)** diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-canvas.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-canvas.md new file mode 100644 index 0000000000000000000000000000000000000000..e7924a562c6b3de89e51482b9f20bb405ff7b352 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-canvas.md @@ -0,0 +1,83 @@ +# canvas组件 + +提供画布组件。用于自定义绘制图形。 + +## 权限列表 + +无 + +## 子组件 + +不支持。 + +## 属性 + +支持[通用属性](js-components-common-attributes.md)。 + +## 样式 + +支持[通用样式](js-components-common-styles.md)。 + +## 事件 + +支持[通用事件](js-components-common-events.md)。 + +## 方法 + +除支持[通用方法](js-components-common-methods.md)外，还支持如下方法： + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

getContext

+

getContext ( type: '2d', attributes6+: { antialias: boolean } ) => CanvasRendering2dContext

+

获取canvas绘图上下文。调用方法如下两种6+：

+

var ctx = canvas.getContext(contextType);

+

var ctx = canvas.getContext(contextType, contextAttributes);

+

其中contextType为必填项，当前支持"2d"，contextAttributes为可选参数，当前仅支持配置是否开启抗锯齿功能，默认为关闭。

+

contextType对应的上下文对象如下：

+

"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/js-based-web-like-development-paradigm/js-components-canvas-canvasgradient.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-canvasgradient.md new file mode 100644 index 0000000000000000000000000000000000000000..bb63e0672dc942df9a3757871a9f08fc174f2c27 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-canvasgradient.md @@ -0,0 +1,49 @@ +# CanvasGradient对象 + +渐变对象。 + +## addColorStop + +addColorStop\(offset: number, color: string\): void + +设置渐变断点值，包括偏移和颜色。 + +- 参数 + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

offset

+

number

+

设置渐变点距离起点的位置占总体长度的比例，范围为0到1。

+

color

+

string

+

设置渐变的颜色。

+
+ +- 示例 + + ``` + const gradient = ctx.createLinearGradient(0,0,100,0); + gradient.addColorStop(0,'#00ffff'); + gradient.addColorStop(1,'#ffff00'); + ``` + + ![](figures/zh-cn_image_0000001152610806.png) + + diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-canvasrenderingcontext2d.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-canvasrenderingcontext2d.md new file mode 100644 index 0000000000000000000000000000000000000000..90ef4151b83eca22df6e39043738e46b8dbec664 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-canvasrenderingcontext2d.md @@ -0,0 +1,2527 @@ +# CanvasRenderingContext2D对象 + +使用CanvasRenderingContext2D在canvas画布组件上进行绘制，绘制对象可以是矩形、文本、图片等。 + +- 示例 + + ``` + +
+ + + +
+ ``` + + ``` + // xxx.js + export default { + handleClick() { + const el = this.$refs.canvas1; + const ctx = el.getContext('2d'); + ctx.beginPath(); + 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_0000001214837333.png) + +- 示意图（开启抗锯齿） + + ![](figures/zh-cn_image_0000001127125162.png) + + +## 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

描述

+

fillStyle

+

<color> | CanvasGradient | CanvasPattern

+

-

+

指定绘制的填充色。

+
  • 类型为<color>时，表示设置填充区域的颜色。
  • 类型为CanvasGradient时，表示渐变对象，使用 createLinearGradient()方法创建。
  • 类型为CanvasPattern时，使用 createPattern()方法创建。
+

lineWidth

+

number

+

-

+

设置绘制线条的宽度。

+

strokeStyle

+

<color> | CanvasGradient | CanvasPattern

+

-

+

设置描边的颜色。

+
  • 类型为<color>时，表示设置描边使用的颜色。
  • 类型为CanvasGradient时，表示渐变对象，使用 createLinearGradient()方法创建。
  • 类型为CanvasPattern时，使用 createPattern()方法创建。
+

lineCap

+

string

+

butt

+

指定线端点的样式，可选值为：

+
  • butt：线端点以方形结束。
  • round：线端点以圆形结束。
  • square：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。
+

lineJoin

+

string

+

miter

+

指定线段间相交的交点样式，可选值为：

+
  • round：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。
  • bevel：在线段相连处使用三角形为底填充， 每个部分矩形拐角独立。
  • miter：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。
+

miterLimit

+

number

+

10

+

设置斜接面限制值，该值指定了线条相交处内角和外角的距离。

+

font

+

string

+

"normal normal 14px sans-serif"

+

设置文本绘制中的字体样式。

+

语法：ctx.font="font-style font-weight font-size font-family"5+

+
  • font-style(可选)，用于指定字体样式，支持如下几种样式：normal, italic。
  • font-weight(可选)，用于指定字体的粗细，支持如下几种类型：normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900。
  • font-size(可选)，指定字号和行高，单位只支持px。
  • font-family(可选)，指定字体系列，支持如下几种类型：sans-serif, serif, monospace。
+

textAlign

+

string

+

left

+

设置文本绘制中的文本对齐方式，可选值为：

+
  • left：文本左对齐。
  • right：文本右对齐。
  • center：文本居中对齐。
  • start：文本对齐界线开始的地方。
  • end：文本对齐界线结束的地方。
+
说明：

ltr布局模式下start和left一致，rtl布局模式下start和right一致·。

+
+

textBaseline

+

string

+

alphabetic

+

设置文本绘制中的水平对齐方式，可选值为：

+
  • alphabetic：文本基线是标准的字母基线。
  • top：文本基线在文本块的顶部。
  • hanging：文本基线是悬挂基线。
  • middle：文本基线在文本块的中间。
  • ideographic：文字基线是表意字基线；如果字符本身超出了alphabetic 基线，那么ideograhpic基线位置在字符本身的底部。
  • bottom：文本基线在文本块的底部。 与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母。
+

globalAlpha

+

number

+

-

+

设置透明度，0.0为完全透明，1.0为完全不透明。

+

lineDashOffset

+

number

+

0.0

+

设置画布的虚线偏移量，精度为float。

+

globalCompositeOperation

+

string

+

source-over

+

设置合成操作的方式。类型字段可选值有source-over，source-atop，source-in，source-out，destination-over，destination-atop，destination-in，destination-out，lighter，copy，xor。具体请参考类型字段说明。

+

shadowBlur

+

number

+

0.0

+

设置绘制阴影时的模糊级别，值越大越模糊，精度为float。

+

shadowColor

+

<color>

+

-

+

设置绘制阴影时的阴影颜色。

+

shadowOffsetX

+

number

+

-

+

设置绘制阴影时和原有对象的水平偏移值。

+

shadowOffsetY

+

number

+

-

+

设置绘制阴影时和原有对象的垂直偏移值。

+

imageSmoothingEnabled6+

+

boolean

+

true

+

用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。

+
+ +### fillStyle + +``` +ctx.fillStyle = '#0000ff'; +ctx.fillRect(20, 20, 150, 100); +``` + +![](figures/zh-cn_image_0000001166962736.png) + +### lineWidth + +``` +ctx.lineWidth = 5; +ctx.strokeRect(25, 25, 85, 105); +``` + +![](figures/zh-cn_image_0000001166484430.png) + +### strokeStyle + +``` +ctx.lineWidth = 10; +ctx.strokeStyle = '#0000ff'; +ctx.strokeRect(25, 25, 155, 105); +``` + +![](figures/zh-cn_image_0000001212124299.png) + +### lineCap + +``` +ctx.lineWidth = 8; +ctx.beginPath(); +ctx.lineCap = 'round'; +ctx.moveTo(30, 50); +ctx.lineTo(220, 50); +ctx.stroke(); +``` + +![](figures/zh-cn_image_0000001214837127.png) + +### lineJoin + +``` +ctx.beginPath(); +ctx.lineWidth = 8; +ctx.lineJoin = 'miter'; +ctx.moveTo(30, 30); +ctx.lineTo(120, 60); +ctx.lineTo(30, 110); +ctx.stroke(); +``` + +![](figures/zh-cn_image_0000001214717247.png) + +### miterLimit + +``` +ctx.lineWidth = 8; +ctx.lineJoin = 'miter'; +ctx.miterLimit = 3; +ctx.moveTo(30, 30); +ctx.lineTo(60, 35); +ctx.lineTo(30, 37); +ctx.stroke(); +``` + +![](figures/zh-cn_image_0000001167001464.png) + +### font + +``` +ctx.font = '30px sans-serif'; +ctx.fillText("Hello World", 20, 60); +``` + +![](figures/zh-cn_image_0000001167046832.png) + +### textAlign + +``` +ctx.strokeStyle = '#0000ff'; +ctx.moveTo(140, 10); +ctx.lineTo(140, 160); +ctx.stroke(); + +ctx.font = '18px sans-serif'; + +// Show the different textAlign values +ctx.textAlign = 'start'; +ctx.fillText('textAlign=start', 140, 60); +ctx.textAlign = 'end'; +ctx.fillText('textAlign=end', 140, 80); +ctx.textAlign = 'left'; +ctx.fillText('textAlign=left', 140, 100); +ctx.textAlign = 'center'; +ctx.fillText('textAlign=center',140, 120); +ctx.textAlign = 'right'; +ctx.fillText('textAlign=right',140, 140); +``` + +![](figures/zh-cn_image_0000001167472798.png) + +### textBaseline + +``` +ctx.strokeStyle = '#0000ff'; +ctx.moveTo(0, 120); +ctx.lineTo(400, 120); +ctx.stroke(); + +ctx.font = '20px sans-serif'; + +ctx.textBaseline = 'top'; +ctx.fillText('Top', 10, 120); +ctx.textBaseline = 'bottom'; +ctx.fillText('Bottom', 55, 120); +ctx.textBaseline = 'middle'; +ctx.fillText('Middle', 125, 120); +ctx.textBaseline = 'alphabetic'; +ctx.fillText('Alphabetic', 195, 120); +ctx.textBaseline = 'hanging'; +ctx.fillText('Hanging', 295, 120); +``` + +![](figures/zh-cn_image_0000001169315920.png) + +### globalAlpha + +``` +ctx.fillStyle = 'rgb(255,0,0)'; +ctx.fillRect(0, 0, 50, 50); +ctx.globalAlpha = 0.4; +ctx.fillStyle = 'rgb(0,0,255)'; +ctx.fillRect(50, 50, 50, 50); +``` + +![](figures/zh-cn_image_0000001167953648.png) + +### lineDashOffset + +``` +ctx.arc(100, 75, 50, 0, 6.28); +ctx.setLineDash([10,20]); +ctx.lineDashOffset = 10.0; +ctx.stroke(); +``` + +![](figures/zh-cn_image_0000001167950468.png) + +### globalCompositeOperation + +- 类型字段说明 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

值

+

描述

+

source-over

+

在现有绘制内容上显示新绘制内容，属于默认值。

+

source-atop

+

在现有绘制内容顶部显示新绘制内容。

+

source-in

+

在现有绘制内容中显示新绘制内容。

+

source-out

+

在现有绘制内容之外显示新绘制内容。

+

destination-over

+

在新绘制内容上方显示现有绘制内容。

+

destination-atop

+

在新绘制内容顶部显示现有绘制内容。

+

destination-in

+

在新绘制内容中显示现有绘制内容。

+

destination-out

+

在新绘制内容外显示现有绘制内容。

+

lighter

+

显示新绘制内容和现有绘制内容。

+

copy

+

显示新绘制内容而忽略现有绘制内容。

+

xor

+

使用异或操作对新绘制内容与现有绘制内容进行融合。

+
+ + +- 示例 + + ``` + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(20, 20, 50, 50); + ctx.globalCompositeOperation = 'source-over'; + ctx.fillStyle = 'rgb(0,0,255)'; + ctx.fillRect(50, 50, 50, 50); + // Start drawing second example + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(120, 20, 50, 50); + ctx.globalCompositeOperation = 'destination-over'; + ctx.fillStyle = 'rgb(0,0,255)'; + ctx.fillRect(150, 50, 50, 50); + ``` + + ![](figures/zh-cn_image_0000001213192781.png) + + 示例中，新绘制内容是蓝色矩形，现有绘制内容是红色矩形。 + + +### shadowBlur + +``` +ctx.shadowBlur = 30; +ctx.shadowColor = 'rgb(0,0,0)'; +ctx.fillStyle = 'rgb(255,0,0)'; +ctx.fillRect(20, 20, 100, 80); +``` + +![](figures/zh-cn_image_0000001168111514.png) + +### shadowColor + +``` +ctx.shadowBlur = 30; +ctx.shadowColor = 'rgb(0,0,255)'; +ctx.fillStyle = 'rgb(255,0,0)'; +ctx.fillRect(30, 30, 100, 100); +``` + +![](figures/zh-cn_image_0000001168111610.png) + +### shadowOffsetX + +``` +ctx.shadowBlur = 10; +ctx.shadowOffsetX = 20; +ctx.shadowColor = 'rgb(0,0,0)'; +ctx.fillStyle = 'rgb(255,0,0)'; +ctx.fillRect(20, 20, 100, 80); +``` + +![](figures/zh-cn_image_0000001167631876.png) + +### shadowOffsetY + +``` +ctx.shadowBlur = 10; +ctx.shadowOffsetY = 20; +ctx.shadowColor = 'rgb(0,0,0)'; +ctx.fillStyle = 'rgb(255,0,0)'; +ctx.fillRect(30, 30, 100, 100); +``` + +![](figures/zh-cn_image_0000001213193285.png) + +### imageSmoothingEnabled6+ + +``` +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) + +## 方法 + +### fillRect + +fillRect\(x: number, y: number, width:number, height: number\): void + +填充一个矩形。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

x

+

number

+

指定矩形左上角点的x坐标。

+

y

+

number

+

指定矩形左上角点的y坐标。

+

width

+

number

+

指定矩形的宽度。

+

height

+

number

+

指定矩形的高度。

+
+ +- 示例 + + ``` + ctx.fillRect(20, 20, 200, 150); + ``` + + ![](figures/zh-cn_image_0000001214811029.png) + + +### clearRect + +clearRect\(x: number, y: number, width:number, height: number\): void + +删除指定区域内的绘制内容。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

x

+

number

+

指定矩形上的左上角x坐标。

+

y

+

number

+

指定矩形上的左上角y坐标。

+

width

+

number

+

指定矩形的宽度。

+

height

+

number

+

指定矩形的高度。

+
+ +- 示例 + + ``` + ctx.fillStyle = 'rgb(0,0,255)'; + ctx.fillRect(0, 0, 400, 200); + ctx.clearRect(20, 20, 150, 100); + ``` + + ![](figures/zh-cn_image_0000001214619417.png) + + +### strokeRect + +strokeRect\(x: number, y: number, width:number, height: number\): void + +绘制具有边框的矩形，矩形内部不填充。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

x

+

number

+

指定矩形的左上角x坐标。

+

y

+

number

+

指定矩形的左上角y坐标。

+

width

+

number

+

指定矩形的宽度。

+

height

+

number

+

指定矩形的高度。

+
+ +- 示例 + + ``` + ctx.strokeRect(30, 30, 200, 150); + ``` + + ![](figures/zh-cn_image_0000001214822091.png) + + +### fillText + +fillText\(text: string, x: number, y: number\): void + +绘制填充类文本。 + +- 参数 + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

text

+

string

+

需要绘制的文本内容。

+

x

+

number

+

需要绘制的文本的左下角x坐标。

+

y

+

number

+

需要绘制的文本的左下角y坐标。

+
+ +- 示例 + + ``` + ctx.font = '35px sans-serif'; + ctx.fillText("Hello World!", 20, 60); + ``` + + ![](figures/zh-cn_image_0000001214469787.png) + + +### strokeText + +strokeText\(text: string, x: number, y: number\): void + +绘制描边类文本。 + +- 参数 + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

text

+

string

+

需要绘制的文本内容。

+

x

+

number

+

需要绘制的文本的左下角x坐标。

+

y

+

number

+

需要绘制的文本的左下角y坐标。

+
+ +- 示例 + + ``` + ctx.font = '25px sans-serif'; + ctx.strokeText("Hello World!", 20, 60); + ``` + + ![](figures/zh-cn_image_0000001214460669.png) + + +### measureText + +measureText\(text: string\): TextMetrics + +该方法返回一个文本测算的对象，通过该对象可以获取指定文本的宽度值。 + +- 参数 + + + + + + + + + + + + +

参数

+

类型

+

描述

+

text

+

string

+

需要进行测量的文本。

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

类型

+

说明

+

TextMetrics

+

包含指定字体的宽度，该宽度可以通过TextMetrics.width来获取。

+
+ +- 示例 + + ``` + ctx.font = '25px sans-serif'; + var txt = 'Hello World'; + ctx.fillText("width:" + ctx.measureText(txt).width, 20, 60); + ctx.fillText(txt, 20, 110); + ``` + + ![](figures/zh-cn_image_0000001169142476.png) + + +### stroke + +stroke\(\): void + +进行边框绘制操作。 + +- 示例 + + ``` + ctx.moveTo(25, 25); + ctx.lineTo(25, 105); + ctx.strokeStyle = 'rgb(0,0,255)'; + ctx.stroke(); + ``` + + ![](figures/zh-cn_image_0000001169309930.png) + + +### beginPath + +beginPath\(\): void + +创建一个新的绘制路径。 + +- 示例 + + ``` + ctx.beginPath(); + ctx.lineWidth = '6'; + ctx.strokeStyle = '#0000ff'; + ctx.moveTo(15, 80); + ctx.lineTo(280, 160); + ctx.stroke(); + ``` + + ![](figures/zh-cn_image_0000001214629745.png) + + +### moveTo + +moveTo\(x: number, y: number\): void + +路径从当前点移动到指定点。 + +- 参数 + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

x

+

number

+

指定位置的x坐标。

+

y

+

number

+

指定位置的y坐标。

+
+ +- 示例 + + ``` + ctx.beginPath(); + ctx.moveTo(10, 10); + ctx.lineTo(280, 160); + ctx.stroke(); + ``` + + ![](figures/zh-cn_image_0000001169309948.png) + + +### lineTo + +lineTo\(x: number, y: number\): void + +从当前点到指定点进行路径连接。 + +- 参数 + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

x

+

number

+

指定位置的x坐标。

+

y

+

number

+

指定位置的y坐标。

+
+ +- 示例 + + ``` + ctx.beginPath(); + ctx.moveTo(10, 10); + ctx.lineTo(280, 160); + ctx.stroke(); + ``` + + ![](figures/zh-cn_image_0000001169469914.png) + + +### closePath + +closePath\(\): void + +结束当前路径形成一个封闭路径。 + +- 示例 + + ``` + ctx.beginPath(); + ctx.moveTo(30, 30); + ctx.lineTo(110, 30); + ctx.lineTo(70, 90); + ctx.closePath(); + ctx.stroke(); + ``` + + ![](figures/zh-cn_image_0000001169151508.png) + + +### createPattern + +createPattern\(image: Image, repetition: string\): Object + +通过指定图像和重复方式创建图片填充的模板。 + +- 参数 + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

image

+

Image

+

图源对象，具体参考Image对象。

+

repetition

+

string

+

设置图像重复的方式，取值为：'repeat'、'repeat-x'、 'repeat-y'、'no-repeat'。

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

类型

+

说明

+

Object

+

指定图像填充的Pattern对象。

+
+ +- 示例 + + ``` + var pat = ctx.createPattern(img, 'repeat'); + ctx.fillStyle = pat; + ctx.fillRect(0, 0, 20, 20); + ``` + + ![](figures/zh-cn_image_0000001169301188.png) + + +### bezierCurveTo + +bezierCurveTo\(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number\): void + +创建三次贝赛尔曲线的路径。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

cp1x

+

number

+

第一个贝塞尔参数的x坐标值。

+

cp1y

+

number

+

第一个贝塞尔参数的y坐标值。

+

cp2x

+

number

+

第二个贝塞尔参数的x坐标值。

+

cp2y

+

number

+

第二个贝塞尔参数的y坐标值。

+

x

+

number

+

路径结束时的x坐标值。

+

y

+

number

+

路径结束时的y坐标值。

+
+ +- 示例 + + ``` + ctx.beginPath(); + ctx.moveTo(10, 10); + ctx.bezierCurveTo(20, 100, 200, 100, 200, 20); + ctx.stroke(); + ``` + + ![](figures/zh-cn_image_0000001214621177.png) + + +### quadraticCurveTo + +quadraticCurveTo\(cpx: number, cpy: number, x: number, y: number\): void + +创建二次贝赛尔曲线的路径。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

cpx

+

number

+

贝塞尔参数的x坐标值。

+

cpy

+

number

+

贝塞尔参数的y坐标值。

+

x

+

number

+

路径结束时的x坐标值。

+

y

+

number

+

路径结束时的y坐标值。

+
+ +- 示例 + + ``` + ctx.beginPath(); + ctx.moveTo(20, 20); + ctx.quadraticCurveTo(100, 100, 200, 20); + ctx.stroke(); + ``` + + ![](figures/zh-cn_image_0000001169461910.png) + + +### arc + +arc\(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise: boolean\): void + +绘制弧线路径。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

x

+

number

+

弧线圆心的x坐标值。

+

y

+

number

+

弧线圆心的y坐标值。

+

radius

+

number

+

弧线的圆半径。

+

startAngle

+

number

+

弧线的起始弧度。

+

endAngle

+

number

+

弧线的终止弧度。

+

anticlockwise

+

boolean

+

是否逆时针绘制圆弧。

+
+ +- 示例 + + ``` + ctx.beginPath(); + ctx.arc(100, 75, 50, 0, 6.28); + ctx.stroke(); + ``` + + ![](figures/zh-cn_image_0000001169470288.png) + + +### arcTo + +arcTo\(x1: number, y1: number, x2: number, y2: number, radius: number\): void + +依据圆弧经过的点和圆弧半径创建圆弧路径。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

x1

+

number

+

圆弧经过的第一个点的x坐标值。

+

y1

+

number

+

圆弧经过的第一个点的y坐标值。

+

x2

+

number

+

圆弧经过的第二个点的x坐标值。

+

y2

+

number

+

圆弧经过的第二个点的y坐标值。

+

radius

+

number

+

圆弧的圆半径值。

+
+ +- 示例 + + ``` + ctx.moveTo(100, 20); + ctx.arcTo(150, 20, 150, 70, 50); // Create an arc + ctx.stroke(); + ``` + + ![](figures/zh-cn_image_0000001169143586.png) + + +### ellipse6+ + +ellipse\(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise: number\): void + +在规定的矩形区域绘制一个椭圆。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

x

+

number

+

椭圆圆心的x轴坐标。

+

y

+

number

+

椭圆圆心的y轴坐标。

+

radiusX

+

number

+

椭圆x轴的半径长度。

+

radiusY

+

number

+

椭圆y轴的半径长度。

+

rotation

+

number

+

椭圆的旋转角度，单位为弧度。

+

startAngle

+

number

+

椭圆绘制的起始点角度，以弧度表示。

+

endAngle

+

number

+

椭圆绘制的结束点角度，以弧度表示。

+

anticlockwise

+

number

+

是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。(可选参数，默认为0)

+
+ +- 示例 + + ``` + 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 + +rect\(x: number, y: number, width: number, height: number\): void + +创建矩形路径。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

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_0000001214630783.png) + + +### fill + +fill\(\): void + +对封闭路径进行填充。 + +- 示例 + + ``` + 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_0000001214703717.png) + + +### clip + +clip\(\): void + +设置当前路径为剪切路径。 + +- 示例 + + ``` + ctx.rect(0, 0, 200, 200); + ctx.stroke(); + ctx.clip(); + // Draw red rectangle after clip + ctx.fillStyle = "rgb(255,0,0)"; + ctx.fillRect(0, 0, 150, 150); + ``` + + ![](figures/zh-cn_image_0000001169303414.png) + + +### rotate + +rotate\(rotate: number\): void + +针对当前坐标轴进行顺时针旋转。 + +- 参数 + + + + + + + + + + + + +

参数

+

类型

+

描述

+

rotate

+

number

+

设置顺时针旋转的弧度值，可以通过Math.PI / 180将角度转换为弧度值。

+
+ +- 示例 + + ``` + ctx.rotate(45 * Math.PI / 180); // Rotate the rectangle 45 degrees + ctx.fillRect(70, 20, 50, 50); + ``` + + ![](figures/zh-cn_image_0000001169463368.png) + + +### scale + +scale\(x: number, y: number\): void + +设置canvas画布的缩放变换属性，后续的绘制操作将按照缩放比例进行缩放。 + +- 参数 + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

x

+

number

+

设置水平方向的缩放值。

+

y

+

number

+

设置垂直方向的缩放值。

+
+ +- 示例 + + ``` + ctx.strokeRect(10, 10, 25, 25); + ctx.scale(2, 2);// Scale to 200% + ctx.strokeRect(10, 10, 25, 25); + ``` + + ![](figures/zh-cn_image_0000001214463281.png) + + +### transform + +transform\(scaleX: number, skewX: number, skewY: number, scale: number, translateX: number, translateY: number\): void + +transform方法对应一个变换矩阵，想对一个图形进行变化的时候，只要设置此变换矩阵相应的参数，对图形的各个定点的坐标分别乘以这个矩阵，就能得到新的定点的坐标。矩阵变换效果可叠加。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标）： +>- x' = scaleX \* x + skewY \* y + translateX +>- y' = skewX \* x + scaleY \* y + translateY + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

scaleX

+

number

+

指定水平缩放值。

+

skewX

+

number

+

指定水平倾斜值。

+

skewY

+

number

+

指定垂直倾斜值。

+

scaleY

+

number

+

指定垂直缩放值。

+

translateX

+

number

+

指定水平移动值。

+

translateY

+

number

+

指定垂直移动值。

+
+ +- 示例 + + ``` + ctx.fillStyle = 'rgb(0,0,0)'; + ctx.fillRect(0, 0, 100, 100) + ctx.transform(1, 0.5, -0.5, 1, 10, 10); + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(0, 0, 100, 100); + ctx.transform(1, 0.5, -0.5, 1, 10, 10); + ctx.fillStyle = 'rgb(0,0,255)'; + ctx.fillRect(0, 0, 100, 100); + ``` + + ![](figures/zh-cn_image_0000001214623227.png) + + +### setTransform + +setTransform\(scaleX: number, skewX: number, skewY: number, scale: number, translateX: number, translateY: number\): void + +setTransfrom方法使用的参数和transform\(\)方法相同，但setTransform\(\)方法会重置现有的变换矩阵并创建新的变换矩阵。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

scaleX

+

number

+

指定水平缩放值。

+

skewX

+

number

+

指定水平倾斜值。

+

skewY

+

number

+

指定垂直倾斜值。

+

scaleY

+

number

+

指定垂直缩放值。

+

translateX

+

number

+

指定水平移动值。

+

translateY

+

number

+

指定垂直移动值。

+
+ +- 示例 + + ``` + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(0, 0, 100, 100) + ctx.setTransform(1,0.5, -0.5, 1, 10, 10); + ctx.fillStyle = 'rgb(0,0,255)'; + ctx.fillRect(0, 0, 100, 100); + ``` + + ![](figures/zh-cn_image_0000001168984880.png) + + +### translate + +translate\(x: number, y: number\): void + +移动当前坐标系的原点。 + +- 参数 + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

x

+

number

+

设置水平平移量。

+

y

+

number

+

设置竖直平移量。

+
+ +- 示例 + + ``` + ctx.fillRect(10, 10, 50, 50); + ctx.translate(70, 70); + ctx.fillRect(10, 10, 50, 50); + ``` + + ![](figures/zh-cn_image_0000001169144864.png) + + +### createPath2D6+ + +createPath2D\(path: Path2D, cmds: string\): Path2D + +创建一个Path2D对象。 + +- 参数 + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

path

+

Path2D

+

Path2D对象。

+

cmds

+

string

+

SVG的Path描述字符串。

+
+ +- 返回值 + + [Path2D对象](js-components-canvas-path2d.md) + +- 示例 + + ``` + 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_0000001214824709.png) + + +### drawImage + +drawImage\(image: Image, sx: number, sy: number, sWidth: number, sHeight: number, dx: number, dy: number, dWidth: number, dHeight: number\):void + +进行图像绘制。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

image

+

Image

+

图片资源，请参考Image对象。

+

sx

+

number

+

裁切源图像时距离源图像左上角的x坐标值。

+

sy

+

number

+

裁切源图像时距离源图像左上角的y坐标值。

+

sWidth

+

number

+

裁切源图像时需要裁切的宽度。

+

sHeight

+

number

+

裁切源图像时需要裁切的高度。

+

dx

+

number

+

绘制区域左上角在x轴的位置。

+

dy

+

number

+

绘制区域左上角在y 轴的位置。

+

dWidth

+

number

+

绘制区域的宽度。

+

dHeight

+

number

+

绘制区域的高度。

+
+ +- 示例 + + ``` + var test = this.$element('drawImage'); + var ctx = test.getContext('2d'); + var img = new Image(); + img.src = 'common/image/test.jpg'; + ctx.drawImage(img, 50, 80, 80, 80); + ``` + + ![](figures/zh-cn_image_0000001214704759.png) + + +### restore + +restore\(\): void + +对保存的绘图上下文进行恢复。 + +- 示例 + + ``` + ctx.restore(); + ``` + + +### save + +save\(\): void + +对当前的绘图上下文进行保存。 + +- 示例 + + ``` + ctx.save(); + ``` + + +### createLinearGradient6+ + +createLinearGradient\(x0: number, y0: number, x1: number, y1: number\): Object + +创建一个线性渐变色，返回CanvasGradient对象，请参考[CanvasGradient对象](js-components-canvas-canvasgradient.md)。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

x0

+

number

+

起点的x轴坐标。

+

y0

+

number

+

起点的y轴坐标。

+

x1

+

number

+

终点的x轴坐标。

+

y1

+

number

+

终点的y轴坐标。

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

类型

+

说明

+

Object

+

返回创建的CanvasGradient对象。

+
+ +- 示例 + + ``` + + + + ``` + + ``` + // xxx.js + export default { + handleClick() { + const el = this.$refs.canvas; + const ctx = el.getContext('2d'); + // Linear gradient: start(50,0) end(300,100) + var gradient = ctx.createLinearGradient(50,0, 300,100); + // 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_0000001169303416.png) + + +### createRadialGradient6+ + +createRadialGradient\(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number\): 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_0000001169463370.png) + + +### createImageData + +createImageData\(width: number, height: number, imageData: Object\): Object + +创建新的ImageData 对象，请参考[ImageData对象](js-components-canvas-imagedata.md)。 + +- 参数 + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

width

+

number

+

ImageData的宽度。

+

height

+

number

+

ImageData的高度。

+

imagedata

+

Object

+

复制现有的ImageData对象。

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

类型

+

说明

+

Object

+

返回创建的ImageData对象。

+
+ +- 示例 + + ``` + imageData = ctx.createImageData(50, 100); // Create ImageData with 50px width and 100px height + newImageData = ctx.createImageData(imageData); // Create ImageData using the input imageData + ``` + + +### getImageData + +getImageData\(sx: number, sy: number, sw: number, sh: number\): Object + +以当前canvas指定区域内的像素创建ImageData对象。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

sx

+

number

+

需要输出的区域的左上角x坐标。

+

sy

+

number

+

需要输出的区域的左上角y坐标。

+

sw

+

number

+

需要输出的区域的宽度。

+

sh

+

number

+

需要输出的区域的高度。

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

类型

+

说明

+

Object

+

返回包含指定区域像素的ImageData对象。

+
+ +- 示例 + + ``` + var test = this.$element('getImageData'); + var ctx = test.getContext('2d'); + var imageData = ctx.getImageData(0, 0, 280, 300); + ``` + + +### putImageData + +putImageData\(imageData: Object, dx: number, dy: number, dirtyX: number, dirtyY: number, dirtyWidth: number, dirtyHeight: number\): void + +使用ImageData数据填充新的矩形区域。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

imagedata

+

Object

+

包含像素值的ImageData对象。

+

dx

+

number

+

填充区域在x轴方向的偏移量。

+

dy

+

number

+

填充区域在y轴方向的偏移量。

+

dirtyX

+

number

+

源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。

+

dirtyY

+

number

+

源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。

+

dirtyWidth

+

number

+

源图像数据矩形裁切范围的宽度。

+

dirtyHeight

+

number

+

源图像数据矩形裁切范围的高度。

+
+ +- 示例 + + ``` + var test = this.$element('putImageData'); + var ctx = test.getContext('2d'); + var imgData = ctx.createImageData(100, 100); + for (var i = 0; i < imgData.data.length; i += 4) { + imgData.data[i + 0] = 255; + imgData.data[i + 1] = 0; + imgData.data[i + 2] = 0; + imgData.data[i + 3] = 255; + } + ctx.putImageData(imgData, 10, 10); + ``` + + ![](figures/zh-cn_image_0000001214463283.png) + + +### setLineDash + +setLineDash\(segments: Array\): void + +设置画布的虚线样式。 + +- 参数 + + + + + + + + + + + + +

参数

+

类型

+

描述

+

segments

+

Array

+

作为数组用来描述线段如何交替和间距长度。

+
+ +- 示例 + + ``` + ctx.arc(100, 75, 50, 0, 6.28); + ctx.setLineDash([10,20]); + ctx.stroke(); + ``` + + ![](figures/zh-cn_image_0000001214623229.png) + + +### getLineDash + +getLineDash\(\): Array + +获得当前画布的虚线样式。 + +- 返回值 + + + + + + + + + + +

类型

+

说明

+

Array

+

返回数组，该数组用来描述线段如何交替和间距长度。。

+
+ +- 示例 + + ``` + var info = ctx.getLineDash(); + ``` + + +### transferFromImageBitmap7+ + +transferFromImageBitmap\(bitmap: ImageBitmap\): void + +显示给定的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_0000001168984882.png) + + diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-image.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-image.md new file mode 100644 index 0000000000000000000000000000000000000000..57fcaecc1c7f0050c280f4df30dd395d359be0c4 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-image.md @@ -0,0 +1,94 @@ +# Image对象 + +图片对象。 + +## 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

属性

+

类型

+

默认值

+

必填

+

描述

+

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/js-based-web-like-development-paradigm/js-components-canvas-imagebitmap.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-imagebitmap.md new file mode 100644 index 0000000000000000000000000000000000000000..5ae5ef24c488991fa66e16f9bb332918653cd78a --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-imagebitmap.md @@ -0,0 +1,35 @@ +# ImageBitmap对象 + +>![](../../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/js-based-web-like-development-paradigm/js-components-canvas-imagedata.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-imagedata.md new file mode 100644 index 0000000000000000000000000000000000000000..96184e222adadc239c02f338dfb03e716373603d --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-imagedata.md @@ -0,0 +1,39 @@ +# ImageData对象 + +ImageData对象可以存储canvas渲染的像素数据。 + +## 属性 + + + + + + + + + + + + + + + + + + + + +

属性

+

类型

+

描述

+

width

+

number

+

矩形区域实际像素宽度。

+

height

+

number

+

矩形区域实际像素高度。

+

data

+

<Uint8ClampedArray>

+

一维数组，保存了相应的颜色数据，数据值范围为0到255。

+
+ diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-offscreencanvas.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-offscreencanvas.md new file mode 100644 index 0000000000000000000000000000000000000000..0ea82bfafffc7fab634515abb98bd9c1d4ef0c00 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-offscreencanvas.md @@ -0,0 +1,91 @@ +# OffscreenCanvas对象 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 7 开始支持。 + +可以离屏渲染的canvas对象。 + +## 属性 + + + + + + + + + + + + + + + + +

属性

+

类型

+

描述

+

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/js-based-web-like-development-paradigm/js-components-canvas-path2d.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-path2d.md new file mode 100644 index 0000000000000000000000000000000000000000..5d3b6d7dab5d310464cf787fcdf3a82c1bff4141 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas-path2d.md @@ -0,0 +1,666 @@ +# Path2D对象 + +路径对象，支持通过对象的接口进行路径的描述，并通过Canvas的stroke接口进行绘制。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从 API Version 6 开始支持。 + +## addPath + +addPath\(path: Object\): void + +将另一个路径添加到当前的路径对象中。 + +- 参数 + + + + + + + + + + + + +

参数

+

类型

+

描述

+

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 + +setTransform\(scaleX: number, skewX: number, skewY: number, scaleY: number, translateX: number, translateY: number\): void + +依据圆弧经过的点和圆弧半径创建圆弧路径。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

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 + +closePath\(\): void + +将路径的当前点移回到路径的起点，当前点到起点间画一条直线。如果形状已经闭合或只有一个点，则此功能不执行任何操作。 + +- 示例 + + ![](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 + +moveTo\(x: number, y: number\): void + +将路径的当前坐标点移动到目标点，移动过程中不绘制线条。 + +- 参数 + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

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 + +lineTo\(x: number, y: number\): void + +从当前点绘制一条直线到目标点。 + +- 参数 + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

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 + +bezierCurveTo\(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number\): void + +创建三次贝赛尔曲线的路径。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

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 + +quadraticCurveTo\(cpx: number, cpy: number, x: number ,y: number\): void + +创建二次贝赛尔曲线的路径。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

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 + +arc\(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise: number\): void + +绘制弧线路径。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

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 + +arcTo\(x1: number, y1: number, x2: number, y2: number, radius: number\): void + +依据圆弧经过的点和圆弧半径创建圆弧路径。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

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 + +ellipse\(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise: number\): void + +在规定的矩形区域绘制一个椭圆。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

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 + +rect\(x: number, y: number, width: number, height: number\): void + +创建矩形路径。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + +

参数

+

类型

+

描述

+

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/js-based-web-like-development-paradigm/js-components-canvas.md similarity index 76% rename from zh-cn/application-dev/js-reference/component/js-components-canvas.md rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas.md index 441a497e85eb99677957259295dbd4cb743f4726..283c3b0aba8d368368f6d50565c40da31bb80326 100644 --- a/zh-cn/application-dev/js-reference/component/js-components-canvas.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-canvas.md @@ -1,4 +1,4 @@ -# 画布组件 +# 画布组件 - **[canvas组件](js-components-canvas-canvas.md)** @@ -16,6 +16,6 @@ - **[OffscreenCanvas对象](js-components-canvas-offscreencanvas.md)** -- **[OffscreenCanvasRenderingContext2D对象](js-components-canvas-offscreencanvasrenderingcontext2d.md)** +- **[OffscreenCanvasRenderingContext2D对象](js-offscreencanvasrenderingcontext2d.md)** diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-animation.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-animation.md new file mode 100644 index 0000000000000000000000000000000000000000..f5140639774bc14361d40e42387961fda7d7bfe9 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/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/js-based-web-like-development-paradigm/js-components-common-atomic-layout.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-atomic-layout.md new file mode 100644 index 0000000000000000000000000000000000000000..232f04c32e699dbc787a5c843a37463bb28fe74a --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-atomic-layout.md @@ -0,0 +1,90 @@ +# 原子布局 + +在屏幕形态和规格不同等情况下，布局效果需要实现自适应，因此系统提供了面向不同屏幕尺寸界面自适应适配的布局能力，称为原子布局。设计师可以考虑使用原子能力，定义元素在不同形态的尺寸界面上体现的自适应规则。开发者可以使用原子布局能力，快速实现让应用在多形态屏幕上有与设计效果相匹配的自适应效果。 + +>![](../../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/js-based-web-like-development-paradigm/js-components-common-attributes.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-attributes.md new file mode 100644 index 0000000000000000000000000000000000000000..3f5927d0d93f09e1d418648f9790d67121db753a --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-attributes.md @@ -0,0 +1,172 @@ +# 通用属性 + +## 常规属性 + +常规属性指的是组件普遍支持的用来设置组件基本标识和外观显示特征的属性。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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/component/js-components-common-customizing-font.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-customizing-font.md similarity index 69% rename from zh-cn/application-dev/js-reference/component/js-components-common-customizing-font.md rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-customizing-font.md index faaf4df6667d910a3170998a0a3dc9199b54edfa..a8d8cb2d8e441f581974c47d2cc8b4b544a9d7bd 100644 --- a/zh-cn/application-dev/js-reference/component/js-components-common-customizing-font.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-customizing-font.md @@ -1,7 +1,4 @@ -# 自定义字体样式 - -- [定义font-face](#zh-cn_topic_0000001173324599_section185107316712) -- [使用font-face](#zh-cn_topic_0000001173324599_section713052011710) +# 自定义字体样式 font-face用于定义字体样式。应用可以在style中定义font-face来指定相应的字体名和字体资源，然后在font-family样式中引用该字体。 @@ -10,7 +7,7 @@ font-face用于定义字体样式。应用可以在style中定义font-face来指 >![](../../public_sys-resources/icon-note.gif) **说明：** >字体格式支持ttf和otf。 -## 定义font-face +## 定义font-face ``` @font-face { @@ -27,11 +24,11 @@ font-face用于定义字体样式。应用可以在style中定义font-face来指 自定义字体的来源，支持如下类别： -- 项目中的字体文件：通过url指定项目中的字体文件路径\(只支持绝对路径，详见[资源和文件访问规则](../js-framework-file.md#zh-cn_topic_0000001127125012_section6620355202117)章节\)。 +- 项目中的字体文件：通过url指定项目中的字体文件路径\(只支持绝对路径，详见[资源和文件访问规则](js-framework-file.md#section6620355202117)章节\)。 - 不支持设置多个src。 -## 使用font-face +## 使用font-face 可以在style中定义font-face，然后在font-family样式中指定该font-face的名称，从而应用font-face定义的字体。 diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-events.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-events.md new file mode 100644 index 0000000000000000000000000000000000000000..704c9f3b77df0241da2dd94d7f7734eebac14b23 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-events.md @@ -0,0 +1,477 @@ +# 通用事件 + +## 事件说明 + +- 事件绑定在组件上，当组件达到事件触发条件时，会执行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#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/component/js-components-common-gradient.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-gradient.md similarity index 30% rename from zh-cn/application-dev/js-reference/component/js-components-common-gradient.md rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-gradient.md index ef5126ad17c9871c488cb540969f5e4e2488a7ba..d93a609f0a40140cba95c6d42c965f009304648d 100644 --- a/zh-cn/application-dev/js-reference/component/js-components-common-gradient.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-gradient.md @@ -1,12 +1,10 @@ -# 渐变样式 - -- [线性渐变/重复线性渐变](#zh-cn_topic_0000001127284866_s9fb0b2412d2843e4b06e05acc39dc394) +# 渐变样式 组件普遍支持的在style或css中设置的 可以平稳过渡两个或多个指定的颜色。 开发框架支持线性渐变 \(linear-gradient\)和重复线性渐变 \(repeating-linear-gradient\)两种渐变效果。 -## 线性渐变/重复线性渐变 +## 线性渐变/重复线性渐变 使用渐变样式，需要定义过渡方向和过渡颜色。 @@ -24,51 +22,51 @@ - 参数 - -

名称

+ + - - - - - - - - - - - - - - - - - - - @@ -83,7 +81,7 @@ } ``` - **图 1** 默认渐变方向为从上向下渐变 + **图 1** 默认渐变方向为从上向下渐变 ![](figures/默认渐变方向为从上向下渐变.png "默认渐变方向为从上向下渐变") ``` @@ -91,7 +89,7 @@ background: linear-gradient(red, #00ff00); ``` - **图 2** 45度夹角渐变 + **图 2** 45度夹角渐变 ![](figures/45度夹角渐变.png "45度夹角渐变") ``` @@ -99,7 +97,7 @@ background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); ``` - **图 3** 设置方向为to right为从左向右渐变 + **图 3** 设置方向为to right为从左向右渐变 ![](figures/设置方向为to-right为从左向右渐变.png "设置方向为to-right为从左向右渐变") ``` @@ -107,7 +105,7 @@ 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/js-based-web-like-development-paradigm/js-components-common-mediaquery.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-mediaquery.md new file mode 100644 index 0000000000000000000000000000000000000000..1deb5c073a56773141af25ce672b8cee61b6c0bc --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-mediaquery.md @@ -0,0 +1,303 @@ +# 媒体查询 + +媒体查询（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/js-based-web-like-development-paradigm/js-components-common-methods.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-methods.md new file mode 100644 index 0000000000000000000000000000000000000000..39d327372ca8ef7061b30055bae26988fc1e409c --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-methods.md @@ -0,0 +1,666 @@ +# 通用方法 + +当组件通过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/js-based-web-like-development-paradigm/js-components-common-styles.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-styles.md new file mode 100644 index 0000000000000000000000000000000000000000..735f5fdeab6cb607f95ca2b1fa32cf5817b6a5fc --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-styles.md @@ -0,0 +1,627 @@ +# 通用样式 + +组件普遍支持的可以在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：平铺图像。当不能整数次平铺时，根据情况放大或缩小图像。

+

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/component/js-components-common-transition.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-transition.md similarity index 31% rename from zh-cn/application-dev/js-reference/component/js-components-common-transition.md rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-transition.md index 403606a58f53fac5c1373fcd0c29e00b6187c498..890c098562d8cc1b8d501c388f6cd6255f697943 100644 --- a/zh-cn/application-dev/js-reference/component/js-components-common-transition.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common-transition.md @@ -1,35 +1,27 @@ -# 转场样式 +# 转场样式 -- [共享元素转场](#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 +29,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 +88,7 @@ 5. 动态修改shareid：组件A的shareid被组件B的shareid覆盖，则组件A的共享元素效果失效，即使组件B的shareid被修改，此时组件A的共享元素效果也不会恢复。5+ -## 共享元素示例代码 +## 共享元素示例代码 PageA跳转到PageB，跳转的共享元素为image， shareid为“shareImage”。 @@ -167,27 +159,27 @@ export default { } ``` -## 卡片转场样式 +## 卡片转场样式 - -

名称

+ + - - - - - - - @@ -196,7 +188,7 @@ export default { >![](../../public_sys-resources/icon-note.gif) **说明：** >卡片转场无法和其他转场\(包括共享元素转场和自定义转场\)共同使用。 -## 示例 +## 示例 source\_page包含顶部内容以及卡片列表，点击卡片可以跳转到target\_page。 @@ -208,8 +200,7 @@ source\_page包含顶部内容以及卡片列表，点击卡片可以跳转到ta MAIN TITLE - + {{$item.title}} @@ -259,9 +250,9 @@ export default {
-
- this is detail -
+
+ this is detail +
``` @@ -282,61 +273,61 @@ export default { ![](figures/卡片转场.gif) -## 页面转场样式 +## 页面转场样式 **表 3** 页面转场样式 - -

名称

类型

+

类型

默认值

+

默认值

描述

+

描述

transition-effect

+

transition-effect

string

+

string

-

+

-

用于配置当前页面中的某个组件在卡片转场过程中是否进行转场动效，当前支持如下配置：

-
  • unfold：配置这个属性的组件，如在卡片的上方，则向上移动一个卡片的高度，如在卡片的下方，则向下移动一个卡片的高度。
  • none：转场过程中没有动效。
+

用于配置当前页面中的某个组件在卡片转场过程中是否进行转场动效，当前支持如下配置：

+
  • unfold：配置这个属性的组件，如在卡片的上方，则向上移动一个卡片的高度，如在卡片的下方，则向下移动一个卡片的高度。
  • none：转场过程中没有动效。

名称

+ + - - - - - - - - - - - - - - - - - - -

名称

类型

+

类型

默认值

+

默认值

描述

+

描述

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可单独配置，没有配置时使用系统默认的参数； diff --git a/zh-cn/application-dev/js-reference/component/js-components-common.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common.md similarity index 92% rename from zh-cn/application-dev/js-reference/component/js-components-common.md rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common.md index f60e2960f370e548b520ab2c192ef728342fa677..44ae48f1a10f5c7d26c5295ffa70408a2a826448 100644 --- a/zh-cn/application-dev/js-reference/component/js-components-common.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-common.md @@ -1,4 +1,4 @@ -# 通用 +# 通用 - **[通用属性](js-components-common-attributes.md)** diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-badge.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-badge.md new file mode 100644 index 0000000000000000000000000000000000000000..3b6adb4e57e3366fb7beb7f821464892320d7392 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-badge.md @@ -0,0 +1,238 @@ +# badge + +应用中如果有需用户关注的新事件提醒，可以采用新事件标记来标识。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 5 开始支持。 + +## 权限列表 + +无 + +## 子组件 + +支持单个子组件。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>仅支持单子组件节点，如果使用多子组件节点，默认使用第一个子组件节点。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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)。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>badge组件的子组件大小不能超过badge组件本身的大小，否则子组件不会绘制。 + +## 事件 + +支持[通用事件](js-components-common-events.md)。 + +## 方法 + +支持[通用方法](js-components-common-methods.md)。 + +## 示例 + +``` + +
+ + 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/js-based-web-like-development-paradigm/js-components-container-dialog.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-dialog.md new file mode 100644 index 0000000000000000000000000000000000000000..2f8377c7a3f86896846fcf7143f9f05b97d2a14f --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-dialog.md @@ -0,0 +1,225 @@ +# dialog + +自定义弹窗容器。 + +## 权限列表 + +无 + +## 子组件 + +支持单个子组件。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md)外，支持如下属性： + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

dragable7+

+

boolean

+

false

+

否

+

设置对话框是否支持拖拽。

+
+ +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- 弹窗类组件不支持focusable、click-effect属性。 + +## 样式 + +仅支持[通用样式](js-components-common-styles.md)中的width、height、margin、margin-\[left|top|right|bottom\]、margin-\[start|end\]样式。 + +## 事件 + +不支持[通用事件](js-components-common-events.md)，仅支持如下事件： + + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

cancel

+

-

+

用户点击非dialog区域触发取消弹窗时触发的事件。

+

show7+

+

-

+

对话框弹出时触发该事件。

+

close7+

+

-

+

对话框关闭时触发该事件。

+
+ +## 方法 + +不支持[通用方法](js-components-common-methods.md)，仅支持如下方法。 + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

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' + }) + }, + doubleclick(e){ + prompt.showToast({ + message: 'doubleclick' + }) + } +} +``` + +![](figures/4.gif) + diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-div.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-div.md new file mode 100644 index 0000000000000000000000000000000000000000..5abe97635374263ec4a1f6b99a42aedd5a60e3c3 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-div.md @@ -0,0 +1,705 @@ +# div + +基础容器，用作页面结构的根节点或将内容进行分组。 + +## 权限列表 + +无 + +## 子组件 + +支持。 + +## 属性 + +支持[通用属性](js-components-common-attributes.md)。 + +## 样式 + +除支持[组件通用样式](js-components-common-styles.md)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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)外，还支持如下事件： + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

reachstart6+

+

-

+

当页面滑动到最开始的点时触发的事件回调，当flex-direction: row时才会触发。

+

reachend6+

+

-

+

当页面滑动到最末尾的点时触发的事件回调，当flex-direction: row时才会触发。

+

reachtop6+

+

-

+

当页面滑动到最上部的点时触发的事件回调，当flex-direction: column时才会触发。

+

reachbottom6+

+

-

+

当页面滑动到最下部的点时触发的事件回调，当flex-direction: column时才会触发。

+
+ +## 方法 + +除支持[通用方法](js-components-common-methods.md)外，还支持如下方法： + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

返回值

+

描述

+

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/22.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/11.png) + +4. 拖拽7+ + + ``` + +
+
+
+
+ ``` + + ``` + /* xxx.css */ + .container { + flex-direction: column; + } + .content{ + width: 200px; + height: 200px; + background-color: red; + } + ``` + + ``` + // xxx.js + import prompt from '@system.prompt'; + export default { + data:{ + left:0, + top:0, + }, + dragstart(e){ + prompt.showToast({ + message: 'Start to be dragged' + }) + }, + drag(e){ + this.left = e.dragevent.globalX; + this.top = e.dragevent.globalY; + }, + dragend(e){ + prompt.showToast({ + message: 'End Drag' + }) + }, + } + ``` + + ![](figures/9.gif) + + ``` + +
+
+
+
+
+ ``` + + ``` + /* xxx.css */ + .container { + flex-direction: column; + width: 100%; + position: relative; + max-width: 100%; + } + .content{ + width: 200px; + height: 200px; + background-color: red; + position: absolute; + } + ``` + + ``` + // xxx.js + import prompt from '@system.prompt'; + export default { + data:{ + left:0, + top:0, + }, + drag(e){ + this.left = e.dragevent.globalX; + this.top = e.dragevent.globalY; + }, + dragenter(e){ + prompt.showToast({ + message: 'enter' + }) + }, + dragover(e){ + prompt.showToast({ + message: 'over' + }) + }, + dragleave(e){ + prompt.showToast({ + message: 'leave' + }) + }, + drop(e){ + prompt.showToast({ + message: 'drop' + }) + } + } + ``` + + ![](figures/6.gif) + +5. 手指捏合7+ + + ``` + +
+
+
+
+ ``` + + ``` + /* xxx.css */ + .container { + flex-direction: column; + justify-content: center; + align-items: center; + width: 454px; + height: 454px;} + .content{ + width: 400px; + height: 400px; + background-color: aqua; + margin:30px + } + ``` + + ``` + // xxx.js + import prompt from '@system.prompt'; + export default { + pinchstart(e){ + prompt.showToast({ + message: 'pinchstart!!!' + }) + }, + pinchupdate(e){ + prompt.showToast({ + message: 'Two-finger pinch update' + }) + }, + pinchend(e){ + prompt.showToast({ + message: 'Finished with two fingers pinching' + }) + }, + pinchcancel(e){ + prompt.showToast({ + message: 'Finger pinching is interrupted' + }) + } + } + ``` + + ![](figures/5.gif) + + diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-form.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-form.md new file mode 100644 index 0000000000000000000000000000000000000000..2e5ba7d9ef3d92dadefcc6608870039da0e305a4 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-form.md @@ -0,0 +1,107 @@ +# form + +表单容器，支持容器内input元素的内容提交和重置。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从 API Version 6 开始支持。 + +## 权限列表 + +无 + +## 子组件 + +支持。 + +## 属性 + +支持[通用属性](js-components-common-attributes.md)。 + +## 样式 + +支持[组件通用样式](js-components-common-styles.md)。 + +## 事件 + +处支持[通用事件](js-components-common-events.md)外，还支持如下事件： + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

submit

+

FormResult

+

点击提交按钮，进行表单提交时，触发该事件。

+

reset

+

-

+

点击重置按钮后，触发该事件。

+
+ +**表 1** FormResult + + + + + + + + + + + + +

名称

+

类型

+

描述

+

value

+

Object

+

input元素的name和value的值。

+
+ +## 方法 + +支持[通用方法](js-components-common-methods.md)。 + +## 示例 + +``` + +
+ + + + + 输入文本 + + 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/js-based-web-like-development-paradigm/js-components-container-list-item-group.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-list-item-group.md new file mode 100644 index 0000000000000000000000000000000000000000..49414c243c0814628f62c16a42017efddc4d3930 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-list-item-group.md @@ -0,0 +1,251 @@ +# list-item-group + +<[list](js-components-container-list.md)\>的子组件，用来展示分组，宽度默认充满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)\>。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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)外，还支持如下事件： + + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

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)。 + +## 示例 + +``` + +
+ + +
+
+ + +
+
+ + +
+
+ + + +
+ 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/js-based-web-like-development-paradigm/js-components-container-list-item.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-list-item.md new file mode 100644 index 0000000000000000000000000000000000000000..cb3dfc1504453711ec30e0127073b950264f43b9 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-list-item.md @@ -0,0 +1,168 @@ +# list-item + +<[list](js-components-container-list.md)\>的子组件，用来展示列表具体item。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>由于父元素list组件的align-items默认样式为stretch，该组件宽度默认充满list组件。设置父元素list组件的align-items样式为非stretch来生效自定义宽度。 + +## 权限列表 + +无 + +## 子组件 + +支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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)外，还支持如下样式： + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

column-span

+

<number>

+

1

+

否

+

当前的list-item需要在list中占据的列的数量，默认占一列，仅在list为多列时生效。

+
+ +## 事件 + +除支持[通用事件](js-components-common-events.md)外，还支持如下事件： + + + + + + + + + + + + +

名称

+

参数

+

描述

+

sticky

+

{ state: boolean }

+

吸顶组件回调事件。

+

value: false表示当前item处于非吸顶状态；

+

value: true表示当前item处于吸顶状态；

+

说明：仅当item设置sticky属性时支持注册此事件。

+
+ +## 方法 + +支持[通用方法](js-components-common-methods.md)。 + +## 示例 + +详见[List示例](js-components-container-list.md#section24931424488)。 + diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-list.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-list.md new file mode 100644 index 0000000000000000000000000000000000000000..80d741abdccda0bb6293dd758b898d249ae7ca42 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-list.md @@ -0,0 +1,716 @@ +# list + +列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。 + +## 权限列表 + +无 + +## 子组件 + +仅支持<[list-item-group](js-components-container-list-item-group.md)\>和<[list-item](js-components-container-list-item.md)\>。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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)外，还支持如下事件： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

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时，会触发该事件。

+

rotate7+

+

{ rotateValue: number }

+

返回表冠旋转角度增量值，仅智能穿戴支持。

+
+ +## 方法 + +支持[通用方法](js-components-common-methods.md)外，还支持如下方法： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

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/33.png) + diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-panel.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-panel.md new file mode 100644 index 0000000000000000000000000000000000000000..e09678bd0879165203687d03cbe730966f3b4a3f --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-panel.md @@ -0,0 +1,540 @@ +# panel + +可滑动面板。提供一种轻量的内容展示的窗口，可方便的在不同尺寸中切换。属于弹出式组件。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 5 开始支持。 + +## 子组件 + +支持 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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/js-based-web-like-development-paradigm/js-components-container-popup.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-popup.md new file mode 100644 index 0000000000000000000000000000000000000000..f4ccffc48d6297ec280e84f4ca5868ae3402bf5d --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-popup.md @@ -0,0 +1,240 @@ +# popup + +气泡指示。在点击绑定的控件后会弹出相应的气泡提示来引导用户进行操作。 + +## 权限列表 + +无 + +## 子组件 + +支持单个子组件节点5+。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性：↵ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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)外，还支持如下样式： + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

mask-color

+

<color>

+

-

+

否

+

遮罩层的颜色，默认值为全透明。

+
+ +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- 不支持position相关样式。 + +## 事件 + +除支持[通用事件](js-components-common-events.md)外，还支持如下事件： + + + + + + + + + + + + +

名称

+

参数

+

描述

+

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/js-based-web-like-development-paradigm/js-components-container-refresh.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-refresh.md new file mode 100644 index 0000000000000000000000000000000000000000..f8946083336227633bb55603a896119c2e5f690c --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-refresh.md @@ -0,0 +1,264 @@ +# refresh + +下拉刷新容器。 + +## 权限列表 + +无 + +## 子组件 + +支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

background-color

+

<color>

+

white

+

否

+

用于设置刷新组件的背景颜色。

+

progress-color

+

<color>

+

black

+

否

+

用于设置刷新组件的loading颜色。

+
+ +## 事件 + +仅支持如下事件： + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

refresh

+

{ refreshing: refreshingValue }

+

下拉刷新状态变化时触发。可能值：

+
  • false：当前处于下拉刷新过程中。
  • true：当前未处于下拉刷新过程中。
+

pulldown

+

{ state: string }

+

下拉开始和松手时触发。可能值：

+
  • start：表示开始下拉。
  • end：表示结束下拉。
+
+ +## 方法 + +不支持[通用方法](js-components-common-methods.md)。 + +## 示例 + +``` + +
+ + + +
+ {{$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/js-based-web-like-development-paradigm/js-components-container-stack.md similarity index 36% rename from zh-cn/application-dev/js-reference/component/js-components-container-stack.md rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-stack.md index e7d3365a446a1f133a87b7b3d6959ac144e53ccc..efeb410e1f73ce35b0e919641377d49468689b03 100644 --- a/zh-cn/application-dev/js-reference/component/js-components-container-stack.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-stack.md @@ -1,40 +1,32 @@ -# 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) +# stack 堆叠容器，子组件按照顺序依次入栈，后一个子组件覆盖前一个子组件。 -## 权限列表 +## 权限列表 无 -## 子组件 +## 子组件 支持。 -## 属性 +## 属性 -支持[通用属性](js-components-common-attributes.md#ZH-CN_TOPIC_0000001163812208)。 +支持[通用属性](js-components-common-attributes.md)。 -## 样式 +## 样式 -支持[通用样式](js-components-common-styles.md#ZH-CN_TOPIC_0000001163932190)。 +支持[通用样式](js-components-common-styles.md)。 -## 事件 +## 事件 -支持[通用事件](js-components-common-events.md#ZH-CN_TOPIC_0000001209412119)。 +支持[通用事件](js-components-common-events.md)。 -## 方法 +## 方法 -支持[通用方法](js-components-common-methods.md#ZH-CN_TOPIC_0000001209252157)。 +支持[通用方法](js-components-common-methods.md)。 -## 示例 +## 示例 ``` diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-stepper-item.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-stepper-item.md new file mode 100644 index 0000000000000000000000000000000000000000..17dc2bc46733112867a8ae249c468f037cad9942 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-stepper-item.md @@ -0,0 +1,233 @@ +# stepper-item + +步骤导航器子组件，作为步骤导航器某一个步骤的内容展示组件。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 5 开始支持。 + +## 权限列表 + +无 + +## 子组件 + +支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

label

+

Label

+

-

+

否

+

自定义步骤导航器底部步骤提示文本按钮属性，不支持动态修改。如果没有定义该属性，步骤导航器在中文语言环境下，使用“返回”和“下一步”文本按钮，在非中文语言环境下，使用“BACK”和“NEXT”文本按钮。针对第一个步骤，没有回退文本按钮，针对最后一个步骤，下一步文本按钮文本使用“开始”（中文语言）或者“START”（非中文语言）。

+
+ +**表 1** Label对象定义 + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

描述

+

prevLabel

+

string

+

-

+

步骤导航器底部回退文本按钮的描述文本。

+

nextLabel

+

string

+

-

+

步骤导航器底部下一步文本按钮的描述文本。

+

status

+

string

+

normal

+

步骤导航器当前步骤的初始状态，可选值为：

+
  • normal：正常状态，右侧文本按钮正常显示，可点击进入下一个步骤。
+
  • disabled：不可用状态，右侧文本按钮灰度显示，不可点击进入下一个步骤。
+
  • waiting：等待状态，右侧文本按钮不显示，使用等待进度条，不可点击进入下一个步骤。
+
+ +## 样式 + +除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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)外，还支持如下事件： + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

appear

+

-

+

当该步骤出现时触发。

+

disappear

+

-

+

当该步骤消失时触发。

+
+ +## 方法 + +不支持[通用方法](js-components-common-methods.md)。 + +## 示例 + +详见[stepper示例](js-components-container-stepper.md)。 + diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-stepper.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-stepper.md new file mode 100644 index 0000000000000000000000000000000000000000..75be6aec15a52048d66958618c34a781e8aebcbe --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-stepper.md @@ -0,0 +1,222 @@ +# stepper + +步骤导航器。当完成一个任务需要多个步骤时，可以使用步骤导航器展示当前进展。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>从API Version 5 开始支持。 + +## 权限列表 + +无 + +## 子组件 + +仅支持子组件。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>步骤导航器内的步骤顺序按照子组件的顺序进行排序。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

描述

+

index

+

number

+

-

+

设置步骤导航器步骤显示第几个stepper-item子组件。

+
+ +## 样式 + +支持[通用样式](js-components-common-styles.md)。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>stepper组件默认占满父容器大小，建议父组件使用应用窗口大小（或者父组件为根节点）来优化体验。 + +## 事件 + +除支持[通用事件](js-components-common-events.md)外，还支持如下事件： + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

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)外，支持如下方法： + + + + + + + + + + + + +

名称

+

参数

+

描述

+

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/js-based-web-like-development-paradigm/js-components-container-swiper.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-swiper.md new file mode 100644 index 0000000000000000000000000000000000000000..314fc8d970a22187ee2e3c9b1123353c580d07f9 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-swiper.md @@ -0,0 +1,418 @@ +# swiper + +滑动容器，提供切换子组件显示的能力。 + +## 权限列表 + +无 + +## 子组件 + +支持除之外的子组件。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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：滑动到边缘后无效果。
    说明：

    该属性仅在loop属性为false时生效。

    +
    +
+
+ +## 样式 + +除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

indicator-color

+

<color>

+

-

+

否

+

导航点指示器的填充颜色。

+

indicator-selected-color

+

<color>

+

#ff007dff

+

否

+

导航点指示器选中的颜色。

+

indicator-size

+

<length>

+

4px

+

否

+

导航点指示器的直径大小。

+

indicator-top|left|right|bottom

+

<length> | <percentage>

+

-

+

否

+

导航点指示器在swiper中的相对位置。

+

next-margin7+

+

<length> | <percentage>

+

-

+

否

+

后边距，用于露出后一项的一小部分。

+

previous-margin7+

+

<length> | <percentage>

+

-

+

否

+

前边距，用于露出前一项的一小部分。

+
+ +## 事件 + +除支持[通用事件](js-components-common-events.md)外，还支持如下事件： + + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

change

+

{ index: currentIndex }

+

当前显示的组件索引变化时触发该事件。

+

rotation

+

{ value: rotationValue }

+

智能穿戴表冠旋转事件触发时的回调。

+

animationfinish7+

+

-

+

动画结束时触发该事件。

+
+ +## 方法 + +除支持[通用方法](js-components-common-methods.md)外，还支持如下方法： + + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

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; + next-margin:20px; + previous-margin:20px; +} +.swiperContent1{ + height: 100%; + justify-content: center; + background-color: #007dff; +} +.swiperContent2{ + height: 100%; + justify-content: center; + background-color: #ff7500; +} +.swiperContent3{ + height: 100%; + justify-content: center; + background-color: #41ba41; +} +.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/4-0.gif) + diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-tab-bar.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-tab-bar.md new file mode 100644 index 0000000000000000000000000000000000000000..fd3a81385a3f9bd0848351e5a8cf91c40c4076ba --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-tab-bar.md @@ -0,0 +1,60 @@ +# tab-bar + +<[tabs](js-components-container-tabs.md)\>的子组件，用来展示tab的标签区，子组件排列方式为横向排列。 + +## 权限列表 + +无 + +## 子组件 + +支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

mode

+

string

+

scrollable

+

否

+

设置组件宽度的可延展性。可选值为：

+
  • scrollable：子组件宽度为实际设置的宽度，当宽度之和（包括margin边距）大于tab-bar的宽度时，子组件可以横向滑动。
  • fixed：子组件宽度均分tab-bar的宽度。
+
+ +## 样式 + +支持[通用样式](js-components-common-styles.md)。 + +## 事件 + +支持[通用事件](js-components-common-events.md)。 + +## 方法 + +支持[通用方法](js-components-common-methods.md)。 + +## 示例 + +详见[tabs示例](js-components-container-tabs.md#section14993155318710)。 + diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-tab-content.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-tab-content.md new file mode 100644 index 0000000000000000000000000000000000000000..825ba2c74ed23998c4b245b4cdeeff67f64b0ef1 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-tab-content.md @@ -0,0 +1,55 @@ +# tab-content + +<[tabs](js-components-container-tabs.md)\>的子组件，用来展示tab的内容区，高度默认充满tabs剩余空间，子组件排列方式为横向排列，当作为容器组件的子元素时在主轴方向需要设置tab-content的确定长度，否则无法显示。 + +## 权限列表 + +无 + +## 子组件 + +支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

scrollable

+

boolean

+

true

+

否

+

是否可以通过左右滑动进行页面切换。默认为true，设置为false后，页面的切换只能通过tab-bar的点击实现。

+
+ +## 样式 + +支持[通用样式](js-components-common-styles.md)。 + +## 事件 + +支持[通用事件](js-components-common-events.md)。 + +## 示例 + +详见[tabs示例](js-components-container-tabs.md#section14993155318710)。 + diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-tabs.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-tabs.md new file mode 100644 index 0000000000000000000000000000000000000000..4878075de0d04afb977a8ef54511b4d9254c8547 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container-tabs.md @@ -0,0 +1,155 @@ +# tabs + +tab页签容器。 + +## 权限列表 + +无 + +## 子组件 + +仅支持最多一个<[tab-bar](js-components-container-tab-bar.md)\>和最多一个<[tab-content](js-components-container-tab-content.md)\>。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

index

+

number

+

0

+

否

+

当前处于激活态的tab索引。

+

vertical

+

boolean

+

false

+

否

+

是否为纵向的tab，默认为false，可选值为：

+
  • false：tabbar和tabcontent上下排列。
  • true：tabbar和tabcontent左右排列。
+
+ +## 样式 + +支持[通用样式](js-components-common-styles.md)。 + +## 事件 + +除支持[通用事件](js-components-common-events.md)外，还支持如下事件： + + + + + + + + + + + + +

名称

+

参数

+

描述

+

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/js-based-web-like-development-paradigm/js-components-container.md similarity index 94% rename from zh-cn/application-dev/js-reference/component/js-components-container.md rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container.md index 7d8b93a558741d70e285704ad8770a2f5aa92cfc..99afacd50843e05e926f5e3d30edc33e4cbac539 100644 --- a/zh-cn/application-dev/js-reference/component/js-components-container.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-container.md @@ -1,4 +1,4 @@ -# 容器组件 +# 容器组件 - **[badge](js-components-container-badge.md)** diff --git a/zh-cn/application-dev/js-reference/component/js-components-custom-basic-usage.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-basic-usage.md similarity index 35% rename from zh-cn/application-dev/js-reference/component/js-components-custom-basic-usage.md rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-basic-usage.md index baafe60345b3be4cca738be8de2a24e098c374d5..95755c164980d45f3f566b72b8153a76fd890feb 100644 --- a/zh-cn/application-dev/js-reference/component/js-components-custom-basic-usage.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-basic-usage.md @@ -1,6 +1,4 @@ -# 基本用法 - -- [对象](#zh-cn_topic_0000001127284892_section7681164881014) +# 基本用法 自定义组件是用户根据业务需求，将已有的组件组合，封装成的新组件，可以在工程中多次调用，从而提高代码的可读性。自定义组件通过element引入到宿主页面，使用方法如下： @@ -29,37 +27,37 @@ >子组件中使用驼峰命名法命名的事件，在父组件中绑定时需要使用短横线分隔命名形式，例如：@children-event表示绑定子组件的childrenEvent事件，如 @children-event="bindParentVmMethod"。 -## 对象 +## 对象 - -

属性

+ + - - - - - - - - - - - diff --git a/zh-cn/application-dev/js-reference/component/js-components-custom-event-parameter.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-event-parameter.md similarity index 93% rename from zh-cn/application-dev/js-reference/component/js-components-custom-event-parameter.md rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-event-parameter.md index d12ab7154e5ae3e3c510bc65615a094cb10e916a..2d90c7f8884e0d71c2bab15c203d06291630c969 100644 --- a/zh-cn/application-dev/js-reference/component/js-components-custom-event-parameter.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-event-parameter.md @@ -1,4 +1,4 @@ -# 事件参数 +# 事件参数 子组件也可以通过绑定的事件向上传递参数，在自定义事件上添加传递参数的示例如下： diff --git a/zh-cn/application-dev/js-reference/component/js-components-custom-events.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-events.md similarity index 94% rename from zh-cn/application-dev/js-reference/component/js-components-custom-events.md rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-events.md index 31b84378bcaac2f83bde2f670f14d9b71901bad5..37859f0bdc844ce60933aa8af7f9567866f2b68d 100644 --- a/zh-cn/application-dev/js-reference/component/js-components-custom-events.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-events.md @@ -1,4 +1,4 @@ -# 自定义事件 +# 自定义事件 子组件comp定义如下： diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-lifecycle.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-lifecycle.md new file mode 100644 index 0000000000000000000000000000000000000000..0b4c5afdf8f0d00e595a21ba7587e28ee081ce24 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-lifecycle.md @@ -0,0 +1,117 @@ +# 生命周期定义 + +>![](../../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/component/js-components-custom-props.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-props.md similarity index 83% rename from zh-cn/application-dev/js-reference/component/js-components-custom-props.md rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-props.md index 9a6d7a1f8b290eec0522159c2e572ad7b4235e1a..6e48255e0e20b5e727d291c39dd00f9039ffa75b 100644 --- a/zh-cn/application-dev/js-reference/component/js-components-custom-props.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-props.md @@ -1,9 +1,4 @@ -# Props - -- [添加默认值](#zh-cn_topic_0000001173164675_section448655843113) -- [数据单向性](#zh-cn_topic_0000001173164675_section9681151218247) -- [$watch 感知数据改变](#zh-cn_topic_0000001173164675_section205821113182114) -- [computed 计算属性](#zh-cn_topic_0000001173164675_section1088954011234) +# Props 自定义组件可以通过props声明属性，父组件通过设置属性向子组件传递参数，props支持类型包括：String，Number，Boolean，Array，Object，Function。camelCase \(驼峰命名法\) 的 prop 名，在外部父组件传递参数时需要使用 kebab-case \(短横线分隔命名\) 形式，即当属性compProp在父组件引用时需要转换为comp-prop。给自定义组件添加props，通过父组件向下传递参数的示例如下： @@ -32,7 +27,7 @@ export default { >![](../../public_sys-resources/icon-note.gif) **说明：** >自定义属性命名时禁止以on、@、on:、grab: 等保留关键字为开头。 -## 添加默认值 +## 添加默认值 子组件可以通过固定值default设置默认值，当父组件没有设置该属性时，将使用其默认值。此情况下props属性必须为对象形式，不能用数组形式，示例如下： @@ -64,7 +59,7 @@ export default { ``` -## 数据单向性 +## 数据单向性 父子组件之间数据的传递是单向的，只能从父组件传递给子组件，子组件不能直接修改父组件传递下来的值，可以将props传入的值用data接收后作为默认值，再对data的值进行修改。 @@ -83,7 +78,7 @@ export default { } ``` -## $watch 感知数据改变 +## $watch 感知数据改变 如果需要观察组件中属性变化，可以通过$watch方法增加属性变化回调。使用方法如下： @@ -100,7 +95,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/js-based-web-like-development-paradigm/js-components-custom-slot.md similarity index 81% rename from zh-cn/application-dev/js-reference/component/js-components-custom-slot.md rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-slot.md index 2737e862f5b195755c71a2db1dcfd4da8a8f3ebb..c06026e572ade470cbb8c6a3439a89f61c7e9adf 100644 --- a/zh-cn/application-dev/js-reference/component/js-components-custom-slot.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom-slot.md @@ -1,12 +1,9 @@ -# slot插槽 - -- [默认插槽](#zh-cn_topic_0000001127284840_section68133181214) -- [具名插槽](#zh-cn_topic_0000001127284840_section18337143291211) +# slot插槽 >![](../../public_sys-resources/icon-note.gif) **说明：** >从API Version 7 开始支持。 -## 默认插槽 +## 默认插槽 自定义组件中通过slot标签来承载父组件中定义的内容，使用slot标签可以更加灵活的控制自定义组件的内容元素，使用方式如下： @@ -30,7 +27,7 @@ ``` -## 具名插槽 +## 具名插槽 当自定义组件中需要使用多个插槽时，可通过对插槽命名的方式进行区分，当填充插槽内容时，通过声明插槽名称，将内容加到对应的插槽中。 diff --git a/zh-cn/application-dev/js-reference/component/js-components-custom.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom.md similarity index 85% rename from zh-cn/application-dev/js-reference/component/js-components-custom.md rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom.md index b0af690a9d122cecefefac47f9c6f81d9eb956e9..4b91521dce6e38f3a24b4c9c4b172fa90ede5602 100644 --- a/zh-cn/application-dev/js-reference/component/js-components-custom.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-custom.md @@ -1,4 +1,4 @@ -# 自定义组件 +# 自定义组件 - **[基本用法](js-components-custom-basic-usage.md)** diff --git a/zh-cn/application-dev/js-reference/component/js-components-grid-basic-concepts.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-grid-basic-concepts.md similarity index 90% rename from zh-cn/application-dev/js-reference/component/js-components-grid-basic-concepts.md rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-grid-basic-concepts.md index 9496288e8b37d29c60132f310912c665552d9c2f..cb05b4d883a5b1ff2853d8caaa4633970837b9f0 100644 --- a/zh-cn/application-dev/js-reference/component/js-components-grid-basic-concepts.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-grid-basic-concepts.md @@ -1,6 +1,4 @@ -# 基本概念 - -- [栅格系统的概念](#zh-cn_topic_0000001127284864_section1429110563714) +# 基本概念 提供栅格布局效果，通过栅格系统进行元素布局，主要提供栅格容器组件。 @@ -16,7 +14,7 @@ >![](../../public_sys-resources/icon-note.gif) **说明：** >从API Version 5 开始支持。 -## 栅格系统的概念 +## 栅格系统的概念 栅格系统有Margins、Gutters、Columns三个属性。 diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-grid-col.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-grid-col.md new file mode 100644 index 0000000000000000000000000000000000000000..684c959120c3ae752d4680b181d3b79b798a64a8 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-grid-col.md @@ -0,0 +1,304 @@ +# grid-col + +grid-col是栅格布局容器grid-row的子容器组件。 + +## 权限列表 + +无 + +## 子组件 + +支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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)。 + +## 方法 + +支持[通用方法](js-components-common-methods.md)。 + +## 示例 + +``` + +
+ + + +
+ 內容元素 +
+ + +
+ 內容元素 +
+ + + +
+``` + +``` +/* 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/js-based-web-like-development-paradigm/js-components-grid-container.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-grid-container.md new file mode 100644 index 0000000000000000000000000000000000000000..0676cf588622003beecf62a9e8a4763e0bed0bae --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-grid-container.md @@ -0,0 +1,278 @@ +# grid-container + +栅格布局容器根节点，使用grid-row与gird-col进行栅格布局。 + +## 权限列表 + +无 + +## 子组件 + +仅支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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)。 + +## 方法 + +除支持[通用方法](js-components-common-methods.md)外，还支持如下方法： + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

getColumns

+

-

+

返回栅格容器列数

+

getColumnWidth

+

-

+

返回栅格容器column宽度

+

getGutterWidth

+

-

+

返回栅格容器gutter宽度

+

getSizeType

+

-

+

返回当前容器响应尺寸类型（xs|sm|md|lg）

+
+ +## 示例 + +详见[grid-col示例](js-components-grid-col.md#section2021865273710)。 + diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-grid-row.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-grid-row.md new file mode 100644 index 0000000000000000000000000000000000000000..f6b490ecdb4d82889fb3ce39d7726e7d060be375 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-grid-row.md @@ -0,0 +1,99 @@ +# grid-row + +grid-row是栅格布局容器grid-container的子容器组件，使用flex横向布局，排列每个grid-col容器，justify-content与align-items默认为flex-start，支持折行显示。 + +## 权限列表 + +无 + +## 子组件 + +仅支持。 + +## 属性 + +支持[通用属性](js-components-common-attributes.md)。 + +## 样式 + +除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

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)。 + +## 方法 + +支持[通用方法](js-components-common-methods.md)。 + +## 示例 + +详见[grid-col示例](js-components-grid-col.md#section2021865273710)。 + diff --git a/zh-cn/application-dev/js-reference/component/js-components-grid.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-grid.md similarity index 79% rename from zh-cn/application-dev/js-reference/component/js-components-grid.md rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-grid.md index 9b34b04dbb30c7ced82e45b3023cceb2fdc48af9..f0657b7133f688ba305e6bd005ccb00dd156d078 100644 --- a/zh-cn/application-dev/js-reference/component/js-components-grid.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-grid.md @@ -1,4 +1,4 @@ -# 栅格组件 +# 栅格组件 - **[基本概念](js-components-grid-basic-concepts.md)** diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-media-video.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-media-video.md new file mode 100644 index 0000000000000000000000000000000000000000..ad219bdef770ba35888857396cea90db6959288b --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-media-video.md @@ -0,0 +1,237 @@ +# video + +视频播放组件。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- 需要在config.json配置 +> ``` +> "configChanges": ["orientation"] +> ``` + +## 权限列表 + +## 子组件 + +不支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md)外，还支持如下样式： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

muted

+

boolean

+

false

+

否

+

视频是否静音播放。

+

src

+

string

+

-

+

否

+

播放视频内容的路径。

+

autoplay

+

boolean

+

false

+

否

+

视频是否自动播放。

+

controls

+

boolean

+

true

+

否

+

控制视频播放的控制栏是否显示，如果设置为false，则不显示控制栏。默认为true，由系统决定显示或隐藏控制栏。

+
+ +## 样式 + +除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

object-fit

+

string

+

contain

+

否

+

视频源的缩放类型，如果poster设置了值，那么此配置还会影响视频海报的缩放类型，可选值参考表1。

+
+ +**表 1** object-fit 类型说明 + + + + + + + + + + +

类型

+

描述

+

fill

+

不保持宽高比进行放大缩小，使得图片填充满显示边界。

+
+ +## 事件 + +除支持[通用事件](js-components-common-events.md)外，还支持如下事件： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

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)外，还支持如下方法： + + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

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/js-based-web-like-development-paradigm/js-components-media.md similarity index 46% rename from zh-cn/application-dev/js-reference/component/js-components-media.md rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-media.md index 3861d7f6b975640145f1aad87db7a479042a10eb..3f561002ae7651e323b68aebb88077649738e20c 100644 --- a/zh-cn/application-dev/js-reference/component/js-components-media.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-media.md @@ -1,4 +1,4 @@ -# 媒体组件 +# 媒体组件 - **[video](js-components-media-video.md)** diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-animate.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-animate.md new file mode 100644 index 0000000000000000000000000000000000000000..8cfd911e7f6ecfa1c6e23edf4a1837a1703a5414 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-animate.md @@ -0,0 +1,270 @@ +# animate + +设置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。

+
+ +## 示例 + +``` + +
+ + + + + + +
+``` + +![](figures/animate-1.gif) + +``` + +
+ + + + + + +
+``` + +![](figures/1-1.gif) + +``` + +
+ + + + + +
+``` + +![](figures/animate-3.gif) + +``` + +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+``` + +![](figures/animate-4.gif) + diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-animatemotion.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-animatemotion.md new file mode 100644 index 0000000000000000000000000000000000000000..2f134e3079d957584b9eabf9b5b04eb50a3dfdfd --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-animatemotion.md @@ -0,0 +1,94 @@ +# animateMotion + +路径动效。 + +>![](../../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

+

-

+

设置动画对象的旋转方向

+
+ +## 示例 + +``` + +
+ + + + + + + + + + + + + + + + +
+``` + +![](figures/2-2.gif) + diff --git a/zh-cn/application-dev/js-reference/component/js-components-svg-animate-transform.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-animatetransform.md similarity index 64% rename from zh-cn/application-dev/js-reference/component/js-components-svg-animate-transform.md rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-animatetransform.md index 334cb51e05f9a58a6c815ca38637f910e9cc9b78..4d8138c1ab9d69cb59c5a5bc2593d4efaaaa8156 100644 --- a/zh-cn/application-dev/js-reference/component/js-components-svg-animate-transform.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-animatetransform.md @@ -1,9 +1,4 @@ -# animateTransform - -- [权限列表](#zh-cn_topic_0000001173324667_section11257113618419) -- [子组件](#zh-cn_topic_0000001173324667_section9288143101012) -- [属性](#zh-cn_topic_0000001173324667_section2907183951110) -- [示例](#zh-cn_topic_0000001173324667_section360556124815) +# animateTransform transform动效，支持的组件范围： @@ -12,46 +7,46 @@ transform动效，支持的组件范围： >![](../../public_sys-resources/icon-note.gif) **说明：** >从API Version 7 开始支持。 -## 权限列表 +## 权限列表 无 -## 子组件 +## 子组件 不支持。 -## 属性 +## 属性 支持animate属性和以下表格中的属性。 - -

名称

+ + - - - - - - - - -

名称

类型

+

类型

默认值

+

默认值

必填

+

必填

描述

+

描述

type

+

type

[translate | scale | rotate | skewX | skewY]

+

[translate | scale | rotate | skewX | skewY]

-

+

-

是

+

是

设置transform动画的类型

+

设置transform动画的类型
-## 示例 +## 示例 ``` @@ -59,46 +54,35 @@ transform动效，支持的组件范围：
- + - + - + - + - + - + - - + + - + - + - +
@@ -169,7 +153,6 @@ transform动效，支持的组件范围： align-items: flex-start; background-color: #f8f8ff; } - .back_container { flex-direction: row; justify-content: flex-start; @@ -237,7 +220,6 @@ transform动效，支持的组件范围： align-items: flex-start; background-color: #f8f8ff; } - .back_container { flex-direction: row; justify-content: flex-start; diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-circle.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-circle.md new file mode 100644 index 0000000000000000000000000000000000000000..ccbb050818bc5659094a21a657ef6261d60dc21f --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-circle.md @@ -0,0 +1,93 @@ +# circle + +圆形形状。 + +>![](../../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/js-based-web-like-development-paradigm/js-components-svg-common-attributes.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-common-attributes.md new file mode 100644 index 0000000000000000000000000000000000000000..802bbae6d67aafe69894790c41c704fc1ae64707 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/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/js-based-web-like-development-paradigm/js-components-svg-ellipse.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-ellipse.md new file mode 100644 index 0000000000000000000000000000000000000000..8ce3eff8396a353499a6163cb8947b084a656ee8 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-ellipse.md @@ -0,0 +1,104 @@ +# ellipse + +椭圆形状。 + +>![](../../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/js-based-web-like-development-paradigm/js-components-svg-line.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-line.md new file mode 100644 index 0000000000000000000000000000000000000000..7b824185e4e17c645cdeac384108031aacbf4d17 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-line.md @@ -0,0 +1,108 @@ +# line + +绘制线条。 + +>![](../../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/js-based-web-like-development-paradigm/js-components-svg-path.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-path.md new file mode 100644 index 0000000000000000000000000000000000000000..199d652de93289e7b304df27f587b1beef95f17c --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-path.md @@ -0,0 +1,74 @@ +# path + +绘制路径。 + +>![](../../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/js-based-web-like-development-paradigm/js-components-svg-polygon.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-polygon.md new file mode 100644 index 0000000000000000000000000000000000000000..217b8cd5dc5fe1f8e418f807120d6f26e73a1a23 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-polygon.md @@ -0,0 +1,73 @@ +# polygon + +绘制多边形。 + +>![](../../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/js-based-web-like-development-paradigm/js-components-svg-polyline.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-polyline.md new file mode 100644 index 0000000000000000000000000000000000000000..21b464a7d32c9b28908d589e0a98b7249a8ce719 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-polyline.md @@ -0,0 +1,73 @@ +# polyline + +绘制折线。 + +>![](../../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/js-based-web-like-development-paradigm/js-components-svg-rect.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-rect.md new file mode 100644 index 0000000000000000000000000000000000000000..7f707a26d93a089ae4dda6ffd5e0f9a5f1663eef --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-rect.md @@ -0,0 +1,129 @@ +# rect + +用于绘制矩形、圆角矩形。 + +>![](../../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/0.png) + diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-text.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-text.md new file mode 100644 index 0000000000000000000000000000000000000000..2c7983941fb30fa4f25f9e8ad2d24f4de095f4e8 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-text.md @@ -0,0 +1,277 @@ +# text + +文本，用于呈现一段信息。 + +>![](../../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

+

否

+

字体边框透明度

+
+ +## 示例 + +``` +/* xxx.css */ +.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 + +
+``` + +![](figures/text-part1.png) + +属性动画示例 + +``` +/* xxx.css */ +.container { + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + height: 3000px; + width: 1080px; +} +``` + +``` + +
+ + + + + + text attribute x|opacity|rotate + + +
+``` + +![](figures/text-animate-part1.gif) + +``` + +
+ + + text attribute font-size + + + + +
+``` + +![](figures/text-animate-part2.gif) + +``` + +
+ + + text attribute stroke + + + + text attribute stroke-width-opacity + + + + +
+``` + +![](figures/text-animate-part3.gif) + diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-textpath.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-textpath.md new file mode 100644 index 0000000000000000000000000000000000000000..00d71cf9c5df3432a4d7940d51b0ec3a149f38f5 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-textpath.md @@ -0,0 +1,381 @@ +# textPath + +沿路径绘制文本。 + +>![](../../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长度。（绘制的元素曲线仅做参照）。 + +``` +/* xxx.css */ +.container { + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + height: 1200px; + width: 600px; +} +``` + +``` + +
+ + + + + This is textpath test. + + + +
+``` + +![](figures/textPath-part1.png) + +textpath与tspan组合示例与效果图 + +``` + +
+ + + + + This is tspan onTextPath. + Let's play. + 12345678912354567891234567891234567891234567891234567890 + + + +
+``` + +![](figures/textPath-part2.png) + +``` + +
+ + + + + This is TextPath. + This is tspan onTextPath. + Let's play. + 12345678912354567891234567891234567891234567891234567890 + + + + +
+``` + +![](figures/textPath-part3.png) + +``` + +
+ + + + + + + This is TextPath. + This is first tspan. + This is second tspan. + 12345678912354567891234567891234567891234567891234567890 + + + +
+``` + +![](figures/textPath-part4.png) + +startOffset属性动画，文本绘制时起点偏移从10%运动到40%，不绘制超出path长度范围的文本。 + +``` +/* xxx.css */ +.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/js-based-web-like-development-paradigm/js-components-svg-tspan.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-tspan.md new file mode 100644 index 0000000000000000000000000000000000000000..4d820f028dae798118c3c1ff1705d5b38fcdcd71 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg-tspan.md @@ -0,0 +1,305 @@ +# tspan + +>![](../../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

+

否

+

字体边框透明度

+
+ +## 示例 + +``` +/* xxx.css */ +.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. + + +
+``` + +![](figures/tspan-part1.png) + +属性动画示例 + +``` +/* xxx.css */ +.container { + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + height: 3000px; + width: 1080px; +} +``` + +``` + +
+ + + + tspan attribute x|opacity|rotate + + + + + + + + + tspan attribute dx + + + + +
+``` + +![](figures/tspan-animate-part1.gif) + +``` + +
+ + + + tspan attribute fill|fill-opacity + + + + + +
+``` + +![](figures/tspan-animate-part2.gif) + +``` + +
+ + + + tspan attribute font-size + + + + +
+``` + +![](figures/tspan-animate-part3.gif) + +``` + +
+ + + + tspan attribute stroke + + + + + + tspan attribute stroke-width-opacity + + + + + +
+``` + +![](figures/tspan-animate-part4.gif) + diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg.md new file mode 100644 index 0000000000000000000000000000000000000000..2a79e09071500c735e0f611068264f8de1c13f6c --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components-svg.md @@ -0,0 +1,123 @@ +# svg + +基础容器，主要作为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/js-based-web-like-development-paradigm/js-components.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components.md new file mode 100644 index 0000000000000000000000000000000000000000..611910fda1fbd94fb415ad74e628255f01c1b5bf --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-components.md @@ -0,0 +1,17 @@ +# 组件 + +- **[通用](js-components-common.md)** + +- **[容器组件](js-components-container.md)** + +- **[基础组件](js-components-basic.md)** + +- **[媒体组件](js-components-media.md)** + +- **[画布组件](js-components-canvas.md)** + +- **[栅格组件](js-components-grid.md)** + +- **[svg组件](js-svg.md)** + + diff --git a/zh-cn/application-dev/js-reference/js-framework-file.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-file.md similarity index 34% rename from zh-cn/application-dev/js-reference/js-framework-file.md rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-file.md index 9557f03c134d4af641922f073b24756e02b1dda1..1e44ae628c629760b5106137a2416e6a4da04166 100644 --- a/zh-cn/application-dev/js-reference/js-framework-file.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-file.md @@ -1,19 +1,15 @@ -# 文件组织 +# 文件组织 -- [目录结构](#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,19 +20,19 @@ JS FA应用的JS模块\(entry/src/main/js/module\)的典型开发目录结构如 各个文件夹的作用： -- app.js文件用于全局JavaScript逻辑和应用生命周期管理，详见[app.js](js-framework-js-file.md#ZH-CN_TOPIC_0000001209210691)说明。 +- app.js文件用于全局JavaScript逻辑和应用生命周期管理，详见[app.js](js-framework-js-file.md)说明。 - pages目录用于存放所有组件页面。 - common目录用于存放公共资源文件，比如：媒体资源，自定义组件和JS文件。 -- resources目录用于存放资源配置文件，比如：多分辨率加载等配置文件，详见[资源限定与访问](js-framework-resource-restriction.md#ZH-CN_TOPIC_0000001164130752)章节。 +- resources目录用于存放资源配置文件，比如：多分辨率加载等配置文件，详见[资源限定与访问](js-framework-resource-restriction.md)章节。 - share目录5+用于配置多个实例共享的资源内容，比如：share中的图片和JSON文件可被default1和default2实例共享。 ->![](../public_sys-resources/icon-note.gif) **说明：** +>![](../../public_sys-resources/icon-note.gif) **说明：** >- i18n和resources是开发保留文件夹，不可重命名。 >- 如果share目录中的资源和实例\(default\)中的资源文件同名且目录一致时，实例中资源的优先级高于share中资源的优先级。 >- share目录当前不支持i18n。 >- 在使用DevEco Studio进行应用开发时，目录结构中的可选文件夹需要开发者根据实际情况自行创建。 -## 文件访问规则 +## 文件访问规则 应用资源可通过绝对路径或相对路径的方式进行访问，本开发框架中绝对路径以"/"开头，相对路径以"./"或"../"。具体访问规则如下： @@ -45,58 +41,58 @@ JS FA应用的JS模块\(entry/src/main/js/module\)的典型开发目录结构如 - 公共代码文件和资源文件推荐放在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文件中通过数据绑定的方式指定资源文件路径时，必须使用绝对路径。 -## 媒体文件格式 +## 媒体文件格式 **表 1** 支持的图片格式 - -

格式

+ + - - - - - - - - - - - - - - - - - @@ -104,22 +100,22 @@ JS FA应用的JS模块\(entry/src/main/js/module\)的典型开发目录结构如 **表 2** 支持的视频格式 - -

格式

支持版本

+

支持版本

支持的文件类型

+

支持的文件类型

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

格式

+ + - - - - - diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-js-file.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-js-file.md new file mode 100644 index 0000000000000000000000000000000000000000..3d9f1cd3bbaae8676e86ae80d957de43a88e8fdb --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-js-file.md @@ -0,0 +1,62 @@ +# app.js + +## 应用生命周期 + +每个应用可以在app.js自定义应用级[生命周期](js-framework-lifecycle.md)的实现逻辑，以下示例仅在生命周期函数中打印对应日志： + +``` +// app.js +export default { + onCreate() { + console.info('Application onCreate'); + }, + + onDestroy() { + console.info('Application onDestroy'); + }, +} +``` + +## 应用对象6+ + + +

格式

支持版本

+

支持版本

支持的文件类型

+

支持的文件类型

H.264 AVC

-

Baseline Profile (BP)

+

H.264 AVC

+

Baseline Profile (BP)

API Version 3+

+

API Version 3+

.3gp

-

.mp4

+

.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-framework-js-tag.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-js-tag.md similarity index 30% rename from zh-cn/application-dev/js-reference/js-framework-js-tag.md rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-js-tag.md index 0cf141d834fc98b8e0679af136d972e83fc7c88d..834f0a58f7231bb117b53e3c8f425684825cbc0e 100644 --- a/zh-cn/application-dev/js-reference/js-framework-js-tag.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-js-tag.md @@ -1,64 +1,60 @@ -# js标签配置 - -- [pages](#zh-cn_topic_0000001173324643_section3239252133513) -- [window](#zh-cn_topic_0000001173324643_section728811177376) -- [示例](#zh-cn_topic_0000001173324643_section19421142983812) +# js标签配置 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等标签配置需在配置文件（config.json)中的“js”标签中完成设置。 +>![](../../public_sys-resources/icon-note.gif) **说明：** +>name、pages和window等标签配置需在配置文件（config.json）中的“js”标签中完成设置。 -## pages +## pages 定义每个页面的路由信息，每个页面由页面路径和页面名组成，页面的文件名就是页面名。比如： @@ -73,55 +69,55 @@ js标签中包含了实例名称、页面路由和窗口样式信息。 } ``` ->![](../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的设置不影响默认值计算方式和绘制结果。 - -

属性

+ + - - - - - - - - - - - - - - @@ -140,7 +136,7 @@ window用于定义与显示窗口相关的配置。对于屏幕适配问题， } ``` -## 示例 +## 示例 ``` { diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-lifecycle.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-lifecycle.md new file mode 100644 index 0000000000000000000000000000000000000000..9defa70e3b623dce493d3d4c734da61bf56c09d8 --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-lifecycle.md @@ -0,0 +1,167 @@ +# 生命周期 + +## 应用生命周期 + +在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-based-web-like-development-paradigm/js-framework-multiple-languages.md similarity index 31% rename from zh-cn/application-dev/js-reference/js-framework-multiple-languages.md rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-multiple-languages.md index f61245d8f021448a0bf0f3c18dbec26c748cdb2b..3c0dea7ea9270e0a693bdee5ff5a9183e5194487 100644 --- a/zh-cn/application-dev/js-reference/js-framework-multiple-languages.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-multiple-languages.md @@ -1,16 +1,12 @@ -# 多语言支持 - -- [定义资源文件](#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)。 +开发者仅需要通过[定义资源文件](#section733935013515)和[引用资源](#section522111116527)两个步骤，就可以使用开发框架的多语言能力；如果需要在应用中获取当前系统语言，请参考[获取语言](#section2872192475310)。 -## 定义资源文件 +## 定义资源文件 -资源文件用于存放应用在多种语言场景下的资源内容，开发框架使用JSON文件保存资源定义。在[文件组织](js-framework-file.md#ZH-CN_TOPIC_0000001164130750)中指定的i18n文件夹内放置语言资源文件，其中语言资源文件的命名是由语言、文字、国家或地区的限定词通过中划线连接组成，其中文字和国家或地区可以省略，如zh-Hant-HK（中国香港地区使用的繁体中文）、zh-CN（中国使用的简体中文）、zh（中文）。命名规则如下： +资源文件用于存放应用在多种语言场景下的资源内容，开发框架使用JSON文件保存资源定义。在[文件组织](js-framework-file.md)中指定的i18n文件夹内放置语言资源文件，其中语言资源文件的命名是由语言、文字、国家或地区的限定词通过中划线连接组成，其中文字和国家或地区可以省略，如zh-Hant-HK（中国香港地区使用的繁体中文）、zh-CN（中国使用的简体中文）、zh（中文）。命名规则如下： ``` language[-script-region].json @@ -20,29 +16,29 @@ language[-script-region].json **表 1** 限定词取值要求 - -

限定词类型

+ + - - - - - - - @@ -103,7 +99,7 @@ ar-AE.json } ``` -## 引用资源 +## 引用资源 在应用开发的页面中使用多语言的语法，包含简单格式化和单复数格式化两种，都可以在hml或js中使用。 @@ -113,28 +109,28 @@ ar-AE.json **表 2** 简单格式化 - -

限定词类型

含义与取值说明

+

含义与取值说明

语言

+

语言

表示设备使用的语言类型，由2~3个小写字母组成。例如：zh表示中文，en表示英语，mai表示迈蒂利语。

-

详细取值范围，请查阅ISO 639（ISO制定的语言编码标准）。

+

表示设备使用的语言类型，由2~3个小写字母组成。例如：zh表示中文，en表示英语，mai表示迈蒂利语。

+

详细取值范围，请查阅ISO 639（ISO制定的语言编码标准）。

文字

+

文字

表示设备使用的文字类型，由1个大写字母（首字母）和3个小写字母组成。例如：Hans表示简体中文，Hant表示繁体中文。

-

详细取值范围，请查阅ISO 15924（ISO制定的文字编码标准）。

+

表示设备使用的文字类型，由1个大写字母（首字母）和3个小写字母组成。例如：Hans表示简体中文，Hant表示繁体中文。

+

详细取值范围，请查阅ISO 15924（ISO制定的文字编码标准）。

国家或地区

+

国家或地区

表示用户所在的国家或地区，由2~3个大写字母或者3个数字组成。例如：CN表示中国，GB表示英国。

-

详细取值范围，请查阅ISO 3166-1（ISO制定的国家和地区编码标准）。

+

表示用户所在的国家或地区，由2~3个大写字母或者3个数字组成。例如：CN表示中国，GB表示英国。

+

详细取值范围，请查阅ISO 3166-1（ISO制定的国家和地区编码标准）。

属性

+ + - - - - - - - - - @@ -142,34 +138,34 @@ ar-AE.json **表 3** $t参数说明 - -

属性

类型

+

类型

参数

+

参数

必填

+

必填

描述

+

描述

$t

+

$t

Function

+

Function

请见表3

+

请见表3

是

+

是

根据系统语言完成简单的替换：this.$t('strings.hello')

+

根据系统语言完成简单的替换：this.$t('strings.hello')

参数

+ + - - - - - - - - - - - @@ -223,29 +219,29 @@ ar-AE.json **表 4** 单复数格式化 - -

参数

类型

+

类型

必填

+

必填

描述

+

描述

path

+

path

string

+

string

是

+

是

资源路径

+

资源路径

params

+

params

Array|Object

+

Array|Object

否

+

否

运行时用来替换占位符的实际内容，占位符分为两种：

-
  • 具名占位符，例如{name}。实际内容必须用Object类型指定，例如：$t('strings.object', { name: 'Hello world' })。
  • 数字占位符，例如{0}。实际内容必须用Array类型指定，例如：$t('strings.array', ['Hello world'])。
+

运行时用来替换占位符的实际内容，占位符分为两种：

+
  • 具名占位符，例如{name}。实际内容必须用Object类型指定，例如：$t('strings.object', { name: 'Hello world' })。
  • 数字占位符，例如{0}。实际内容必须用Array类型指定，例如：$t('strings.array', ['Hello world'])。

属性

+ + - - - - - - - - - @@ -254,33 +250,33 @@ ar-AE.json **表 5** $tc参数说明 - -

属性

类型

+

类型

参数

+

参数

必填

+

必填

描述

+

描述

$tc

+

$tc

Function

+

Function

请见表5

+

请见表5

是

+

是

根据系统语言完成单复数替换：this.$tc('strings.people')

-
说明：

定义资源的内容通过json格式的key为“zero”、“one”、“two”、“few”、“many”和“other”区分。

+

根据系统语言完成单复数替换：this.$tc('strings.people')

+
说明：

定义资源的内容通过json格式的key为“zero”、“one”、“two”、“few”、“many”和“other”区分。

参数

+ + - - - - - - - - - - - @@ -307,7 +303,7 @@ ar-AE.json ``` -## 获取语言 +## 获取语言 -获取语言功能请参考[应用配置](apis/js-apis-system-configuration.md#ZH-CN_TOPIC_0000001164130782)。 +获取语言功能请参考[应用配置](../apis/js-apis-basic-features-configuration.md)。 diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-resource-restriction.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-resource-restriction.md new file mode 100644 index 0000000000000000000000000000000000000000..2d3ffa75e12fe5997c892a8e85a1aa66f54d948d --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-resource-restriction.md @@ -0,0 +1,128 @@ +# 资源限定与访问 + +>![](../../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** 资源限定词 + + +

参数

类型

+

类型

必填

+

必填

描述

+

描述

path

+

path

string

+

string

是

+

是

资源路径

+

资源路径

count

+

count

number

+

number

是

+

是

要表达的值

+

要表达的值
+ + + + + + + + + + + + + + + + +

类型

+

含义与取值说明

+

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/js-framework-syntax-css.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-syntax-css.md similarity index 36% rename from zh-cn/application-dev/js-reference/js-framework-syntax-css.md rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-syntax-css.md index 5240dd6f90498da0e7813e7630c09341e339fbd0..07b89065f28e67c690a5af160fe39ff2d6af9936 100644 --- a/zh-cn/application-dev/js-reference/js-framework-syntax-css.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-syntax-css.md @@ -1,29 +1,20 @@ -# CSS语法参考 - -- [尺寸单位](#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语法参考 CSS是描述HML页面结构的样式语言。所有组件均存在系统默认样式，也可在页面CSS样式文件中对组件、页面自定义不同的样式。 -## 尺寸单位 +## 尺寸单位 1. 逻辑像素px（文档中以表示）： - 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物理像素。应用需要适配多种设备时，建议采用此方法。 + 1. 默认屏幕具有的逻辑宽度为720px（配置见[配置文件](js-framework-js-tag.md)中的window小节），实际显示时会将页面布局缩放至屏幕实际宽度，如100px在实际宽度为1440物理像素的屏幕上，实际渲染为200物理像素（从720px向1440物理像素，所有尺寸放大2倍）。 + 2. 额外配置autoDesignWidth为true时（配置见[配置文件](js-framework-js-tag.md)中的window小节），逻辑像素px将按照屏幕密度进行缩放，如100px在屏幕密度为3的设备上，实际渲染为300物理像素。应用需要适配多种设备时，建议采用此方法。 2. 百分比（文档中以表示）：表示该组件占父组件尺寸的百分比，如组件的width设置为50%，代表其宽度为父组件的50%。 -## 样式导入 +## 样式导入 为了模块化管理和代码复用，CSS样式文件支持 @import 语句，导入css文件。 -## 声明样式 +## 声明样式 每个页面目录下存在一个与布局hml文件同名的css文件，用来描述该hml页面中组件的样式，决定组件应该如何显示。 @@ -61,52 +52,52 @@ CSS是描述HML页面结构的样式语言。所有组件均存在系统默认 ``` -## 选择器 +## 选择器 css选择器用于选择需要添加样式的元素，支持的选择器如下表所示： - -

选择器

+ + - - - - - - - - - - - - - - - - - @@ -156,55 +147,55 @@ div { ![](figures/sample_css.png) -其中“.container text”将“标题”和“内容”设置为蓝色，而“.container \> text”直接后代选择器将“标题”设置为红色。2者优先级相同，但直接后代选择器声明顺序靠后，将前者样式覆盖（优先级计算见[选择器优先级](#zh-cn_topic_0000001127125112_section1460102134415)）。 +其中“.container text”将“标题”和“内容”设置为蓝色，而“.container \> text”直接后代选择器将“标题”设置为红色。2者优先级相同，但直接后代选择器声明顺序靠后，将前者样式覆盖（优先级计算见[选择器优先级](#section1460102134415)）。 -## 选择器优先级 +## 选择器优先级 选择器的优先级计算规则与w3c规则保持一致（只支持：内联样式，id，class，tag，后代和直接后代），其中内联样式为在元素style属性中声明的样式。 当多条选择器声明匹配到同一元素时，各类选择器优先级由高到低顺序为：内联样式 \> id \> class \> tag。 -## 伪类 +## 伪类 css伪类是选择器中的关键字，用于指定要选择元素的特殊状态。例如，:disabled状态可以用来设置元素的disabled属性变为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。

名称

+ + - - - - - - - - - - - - - - @@ -226,10 +217,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。 @@ -264,11 +255,11 @@ css伪类是选择器中的关键字，用于指定要选择元素的特殊状 } ``` - >![](../public_sys-resources/icon-note.gif) **说明：** + >![](../../public_sys-resources/icon-note.gif) **说明：** >引用的预编译文件建议放在common目录进行管理。 -## CSS样式继承6+ +## CSS样式继承6+ css样式继承提供了子节点继承父节点样式的能力，继承下来的样式在多选择器样式匹配的场景下，优先级排最低，当前支持以下样式的继承： diff --git a/zh-cn/application-dev/js-reference/js-framework-syntax-hml.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-syntax-hml.md similarity index 81% rename from zh-cn/application-dev/js-reference/js-framework-syntax-hml.md rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-syntax-hml.md index e93119376e0d41bd6eedc4db49d12fbe78b9220e..eed9ce1a45411174e74fe1eae9aa1afa77d9a310 100644 --- a/zh-cn/application-dev/js-reference/js-framework-syntax-hml.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-syntax-hml.md @@ -1,18 +1,8 @@ -# 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语法参考 HML（OpenHarmony Markup Language）是一套类HTML的标记语言，通过组件，事件构建出页面的内容。页面具备数据绑定、事件绑定、列表渲染、条件渲染和逻辑控制等高级能力。 -## 页面结构 +## 页面结构 ``` @@ -24,7 +14,7 @@ HML（OpenHarmony Markup Language）是一套类HTML的标记语言，通过组 ``` -## 数据绑定 +## 数据绑定 ``` @@ -45,11 +35,11 @@ export default { } ``` ->![](../public_sys-resources/icon-note.gif) **说明：** +>![](../../public_sys-resources/icon-note.gif) **说明：** >- 针对数组内的数据修改，请使用splice方法生效数据绑定变更。 >- hml文件中的js表达式不支持ES6语法。 -## 普通事件绑定 +## 普通事件绑定 事件通过'on'或者'@'绑定在组件上，当组件触发事件时会执行JS文件中对应的事件处理函数。 @@ -58,7 +48,7 @@ export default { - "funcName"：funcName为事件回调函数名（在JS文件中定义相应的函数实现）。 - "funcName\(a,b\)"：函数参数例如a，b可以是常量，或者是在JS文件中的data中定义的变量（前面不用写this.）。 -- **示例** +- 示例 ``` @@ -127,15 +117,15 @@ export default { ``` -## 冒泡事件绑定5+ +## 冒泡事件绑定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)章节。 + >![](../../public_sys-resources/icon-note.gif) **说明：** + >详细冒泡事件说明参见[通用事件](js-components-common-events.md)章节。 - **示例** @@ -170,10 +160,10 @@ export default { ``` ->![](../public_sys-resources/icon-note.gif) **说明：** +>![](../../public_sys-resources/icon-note.gif) **说明：** >- 采用旧写法\(onclick\)的事件绑定在最小API版本6以下时采用不冒泡处理，在最小API版本为6及6以上时采用冒泡处理。 -## 捕获事件绑定5+ +## 捕获事件绑定5+ Touch触摸类事件支持捕获，捕获阶段位于冒泡阶段之前，捕获事件先到达父组件然后达到子组件。 @@ -182,7 +172,7 @@ Touch触摸类事件支持捕获，捕获阶段位于冒泡阶段之前，捕获 - 绑定捕获事件：on:\{event\}.capture。 - 绑定并阻止事件向下传递：grab:\{event\}.capture。 -- **示例** +- 示例 ```
@@ -203,7 +193,7 @@ Touch触摸类事件支持捕获，捕获阶段位于冒泡阶段之前，捕获 ``` -## 列表渲染 +## 列表渲染 ``` @@ -249,12 +239,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写法时，节点必须是兄弟节点，否则编译无法通过。实例如下： @@ -333,10 +323,10 @@ export default { } ``` ->![](../public_sys-resources/icon-note.gif) **说明：** +>![](../../public_sys-resources/icon-note.gif) **说明：** >禁止在同一个元素上同时设置for和if属性。 -## 逻辑控制块 +## 逻辑控制块 控制块使得循环渲染和条件渲染变得更加灵活；block在构建时不会被当作真实的节点编译。注意block标签只支持for和if属性。 @@ -368,9 +358,9 @@ export default { } ``` -## 模板引用 +## 模板引用 -HML可以通过element引用模板文件，详细介绍可参考[自定义组件](component/js-components-custom-basic-usage.md#ZH-CN_TOPIC_0000001163932218)章节。 +HML可以通过element引用模板文件，详细介绍可参考[自定义组件](js-components-custom-basic-usage.md)章节。 ``` diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-syntax-js.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-syntax-js.md new file mode 100644 index 0000000000000000000000000000000000000000..154a0c770e0ef64ea65c5b8159b6ac6a022ed92f --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-syntax-js.md @@ -0,0 +1,522 @@ +# JS语法参考 + +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-based-web-like-development-paradigm/js-framework-syntax.md similarity index 76% rename from zh-cn/application-dev/js-reference/js-framework-syntax.md rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-syntax.md index 11a63eca728169ebfbd85fae47c12d68bce14508..dfcfef1c2498872ecb5c595b4d2d83328533412c 100644 --- a/zh-cn/application-dev/js-reference/js-framework-syntax.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework-syntax.md @@ -1,4 +1,4 @@ -# 语法 +# 语法 - **[HML语法参考](js-framework-syntax-hml.md)** diff --git a/zh-cn/application-dev/js-reference/js-framework.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework.md similarity index 86% rename from zh-cn/application-dev/js-reference/js-framework.md rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework.md index 86e6da84724f53aacc1409d408416f9a565939b7..ad12f09171ad5b49d2f64cccffa9338dd31ec6c5 100644 --- a/zh-cn/application-dev/js-reference/js-framework.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-framework.md @@ -1,4 +1,4 @@ -# 框架说明 +# 框架说明 - **[文件组织](js-framework-file.md)** diff --git a/zh-cn/application-dev/js-reference/component/js-components-canvas-offscreencanvasrenderingcontext2d.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-offscreencanvasrenderingcontext2d.md similarity index 39% rename from zh-cn/application-dev/js-reference/component/js-components-canvas-offscreencanvasrenderingcontext2d.md rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-offscreencanvasrenderingcontext2d.md index 1ffa1152074672ac7d06e90ca1ff89d77343c0f1..a8a40172a2ff3657dcda34c85daf4ab41b7d1f94 100644 --- a/zh-cn/application-dev/js-reference/component/js-components-canvas-offscreencanvasrenderingcontext2d.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-offscreencanvasrenderingcontext2d.md @@ -1,33 +1,30 @@ -# OffscreenCanvasRenderingContext2D对象 - -- [属性](#zh-cn_topic_0000001180864495_section661391987) -- [方法](#zh-cn_topic_0000001180864495_section47669296127) +# OffscreenCanvasRenderingContext2D对象 >![](../../public_sys-resources/icon-note.gif) **说明：** >从API Version 7 开始支持。 使用OffscreenCanvasRenderingContext2D在offscreen canvas上进行绘制，绘制对象可以是矩形、文本、图片等 -## 属性 +## 属性 除支持与CanvasRenderingContext2D对象相同的属性外，还支持如下属性： - -

属性

+ + - - - - - @@ -77,45 +74,45 @@ ctx.transferFromImageBitmap(bitmap); ![](figures/zh-cn_image_0000001152773860.png) -## 方法 +## 方法 除支持与CanvasRenderingContext2D对象相同的方法外，还支持如下方法： - -

属性

类型

+

类型

描述

+

描述

filter

+

filter

string

+

string

设置图像的滤镜。

-

支持的滤镜效果如下：

-
  • blur：给图像设置高斯模糊
  • brightness：给图片应用一种线性乘法，使其看起来更亮或更暗
  • contrast：调整图像的对比度
  • drop-shadow：给图像设置一个阴影效果
  • grayscale：将图像转换为灰度图像
  • hue-rotate：给图像应用色相旋转
  • invert：反转输入图像
  • opacity：转化图像的透明程度
  • saturate：转换图像饱和度
  • sepia：将图像转换为深褐色
+

设置图像的滤镜。

+

支持的滤镜效果如下：

+
  • blur：给图像设置高斯模糊
  • brightness：给图片应用一种线性乘法，使其看起来更亮或更暗
  • contrast：调整图像的对比度
  • drop-shadow：给图像设置一个阴影效果
  • grayscale：将图像转换为灰度图像
  • hue-rotate：给图像应用色相旋转
  • invert：反转输入图像
  • opacity：转化图像的透明程度
  • saturate：转换图像饱和度
  • sepia：将图像转换为深褐色

名称

+ + - - - - - - - - - - - diff --git a/zh-cn/application-dev/js-reference/component/js-svg.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-svg.md similarity index 77% rename from zh-cn/application-dev/js-reference/component/js-svg.md rename to zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-svg.md index c5803b40ab16956542b49f48fad9783e96842b38..b308a4d49cffb56963874cb9f9c5643d83da14bf 100644 --- a/zh-cn/application-dev/js-reference/component/js-svg.md +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-svg.md @@ -1,4 +1,4 @@ -# svg组件 +# svg组件 - **[通用属性](js-components-svg-common-attributes.md)** @@ -26,8 +26,8 @@ - **[animate](js-components-svg-animate.md)** -- **[animateMotion](js-components-svg-animate-motion.md)** +- **[animateMotion](js-components-svg-animatemotion.md)** -- **[animateTransform](js-components-svg-animate-transform.md)** +- **[animateTransform](js-components-svg-animatetransform.md)** diff --git a/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-web-development-like.md b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-web-development-like.md new file mode 100644 index 0000000000000000000000000000000000000000..173e920568d788f45f757d023e9aa7472c3629dc --- /dev/null +++ b/zh-cn/application-dev/js-reference/js-based-web-like-development-paradigm/js-web-development-like.md @@ -0,0 +1,11 @@ +# 基于JS扩展的类Web开发范式 + +- **[框架说明](js-framework.md)** + +- **[组件](js-components.md)** + +- **[自定义组件](js-components-custom.md)** + +- **[附录](js-appendix.md)** + + 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 deleted file mode 100644 index 55d603dc4c69b3f18c32ebb73cb21193e5c5c408..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/js-framework-js-file.md +++ /dev/null @@ -1,65 +0,0 @@ -# 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+ - - -

名称

参数

+

参数

描述

+

描述

isPointInPath

-

+

isPointInPath

+

path?: Path2D, x: number, y: number

+

path?: Path2D, x: number, y: number

判断指定点是否在路径的区域内。

-

path：可选对象，指定用来判断的路径。若没有设置，则使用当前路径

-

x：待判断点的x轴坐标

-

y：待判断点的y轴坐标

+

判断指定点是否在路径的区域内。

+

path：可选对象，指定用来判断的路径。若没有设置，则使用当前路径

+

x：待判断点的x轴坐标

+

y：待判断点的y轴坐标

isPointInStroke

+

isPointInStroke

path?: Path2D, x: number, y: number

+

path?: Path2D, x: number, y: number

判断指定点是否在路径的边缘线上。

-

path：可选对象，指定用来判断的路径。若没有设置，则使用当前路径

-

x：待判断点的x轴坐标

-

y：待判断点的y轴坐标

+

判断指定点是否在路径的边缘线上。

+

path：可选对象，指定用来判断的路径。若没有设置，则使用当前路径

+

x：待判断点的x轴坐标

+

y：待判断点的y轴坐标

resetTransform

+

resetTransform

无

+

无

将当前变换重置为单位矩阵。

+

将当前变换重置为单位矩阵。
- - - - - - - - - -

属性

-

类型

-

描述

-

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-framework-lifecycle.md b/zh-cn/application-dev/js-reference/js-framework-lifecycle.md deleted file mode 100644 index 59741fe12b20b34de8a6391d9afcb5436689ae67..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/js-framework-lifecycle.md +++ /dev/null @@ -1,170 +0,0 @@ -# 生命周期 - -- [应用生命周期](#zh-cn_topic_0000001173164671_section9779102014714) -- [页面生命周期](#zh-cn_topic_0000001173164671_section921934910481) - -## 应用生命周期 - -在app.js中可以定义如下应用生命周期函数： - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

属性

-

类型

-

描述

-

触发时机

-

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-resource-restriction.md b/zh-cn/application-dev/js-reference/js-framework-resource-restriction.md deleted file mode 100644 index 5f2be8d411a369edca91b16700819f8b92dc890b..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/js-framework-resource-restriction.md +++ /dev/null @@ -1,134 +0,0 @@ -# 资源限定与访问 - -- [资源限定词](#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/js-framework-syntax-js.md b/zh-cn/application-dev/js-reference/js-framework-syntax-js.md deleted file mode 100644 index ad369995d2279c66b81e902e7f251b32e9c174c2..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/js-reference/js-framework-syntax-js.md +++ /dev/null @@ -1,528 +0,0 @@ -# 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'; - ``` - - -## 对象 - -- 应用对象 - - - - - - - - - - - - -

属性

-

类型

-

描述

-

$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/ts-based-declarative-development-paradigm/figures/000000-5.png b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/000000-5.png new file mode 100644 index 0000000000000000000000000000000000000000..58293d5e874f2aa36ecaf7282ca9e4736318092f Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/000000-5.png differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/1-19.png b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/1-19.png new file mode 100644 index 0000000000000000000000000000000000000000..3c6e9c72046d14a46ed93a1075ee580510e64f92 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/1-19.png differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/1111.png b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/1111.png new file mode 100644 index 0000000000000000000000000000000000000000..3fbc152bb27dc98b9db8ace65a5b820c72f77879 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/1111.png differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/222.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/222.gif new file mode 100644 index 0000000000000000000000000000000000000000..0befd736af77db15c203c4a5578929baf1d83e08 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/222.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/2222.png b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/2222.png new file mode 100644 index 0000000000000000000000000000000000000000..3b1d0fd10bd28897bf3b1103e5bdba0fdb9d17f1 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/2222.png differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/5-20.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/5-20.gif new file mode 100644 index 0000000000000000000000000000000000000000..587269a1e0647be0acb21deced4722037bb07013 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/5-20.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/AlertDialog.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/AlertDialog.gif new file mode 100644 index 0000000000000000000000000000000000000000..30e89347337d9e358d4b823c7658490e032eb435 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/AlertDialog.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/AnimateTo.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/AnimateTo.gif new file mode 100644 index 0000000000000000000000000000000000000000..864e3a39a57b7a45f63a07fe50545629db3527c4 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/AnimateTo.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/AttrAnimation.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/AttrAnimation.gif new file mode 100644 index 0000000000000000000000000000000000000000..69cc497191325216c394de0ce00328a7c5c5fc8c Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/AttrAnimation.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Button.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Button.gif new file mode 100644 index 0000000000000000000000000000000000000000..bb1dd72311c866d5bf31a706d75fc1e107a5a946 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Button.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Click.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Click.gif new file mode 100644 index 0000000000000000000000000000000000000000..20a61f7c3daa0e4225a7421803948c073fb9fe31 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Click.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/ColumnSplit.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/ColumnSplit.gif new file mode 100644 index 0000000000000000000000000000000000000000..ac096bd0f149b02d46013420a9c323fe8aa5805a Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/ColumnSplit.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/CoreSpec_figures_state-mgmt-overview.png b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/CoreSpec_figures_state-mgmt-overview.png new file mode 100644 index 0000000000000000000000000000000000000000..37ae5324808a0ab50f210907ca65a09e4456a371 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/CoreSpec_figures_state-mgmt-overview.png differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Counter.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Counter.gif new file mode 100644 index 0000000000000000000000000000000000000000..a8c10650641ca05ec76b2ff74621506bba7034f4 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Counter.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/DisplayPriorityExample.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/DisplayPriorityExample.gif new file mode 100644 index 0000000000000000000000000000000000000000..5bd33e278c8c9edccf66470d2c3585792fceb4ff Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/DisplayPriorityExample.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Flex01.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Flex01.gif new file mode 100644 index 0000000000000000000000000000000000000000..8da8a4adcc50c16eafb2378f0bbab0706471ae8b Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Flex01.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Flex03.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Flex03.gif new file mode 100644 index 0000000000000000000000000000000000000000..1be92ae9b4a61f304b91c5b03f7b0e799ac679fa Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Flex03.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Flex04-16.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Flex04-16.gif new file mode 100644 index 0000000000000000000000000000000000000000..18e5eef8f04c15625f4e3ae3ab050083b3acc962 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Flex04-16.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Flex04.jpg b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Flex04.jpg new file mode 100644 index 0000000000000000000000000000000000000000..bf5c3a49c58818ec9dec43db3c2d4c5e16949a94 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Flex04.jpg differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Flex05.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Flex05.gif new file mode 100644 index 0000000000000000000000000000000000000000..791930fb1f2f681dac85167f646dbcf88d121882 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Flex05.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/GestureGroup.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/GestureGroup.gif new file mode 100644 index 0000000000000000000000000000000000000000..0213b777e0352ac7830bde7d9bff40edf69a1a51 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/GestureGroup.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/GestureSetting.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/GestureSetting.gif new file mode 100644 index 0000000000000000000000000000000000000000..d8e941ae58c68666c04183756b9549cef9d9d3b0 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/GestureSetting.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Image1.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Image1.gif new file mode 100644 index 0000000000000000000000000000000000000000..6bc2dfa331eb3b39fc32aa6c1fa131684dff3220 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Image1.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Image2.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Image2.gif new file mode 100644 index 0000000000000000000000000000000000000000..e4ac98cf8925e5ae93206fb663bef01e4d929169 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Image2.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Image3.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Image3.gif new file mode 100644 index 0000000000000000000000000000000000000000..209112f1e4c14478df3f44390732d4b2c70755f4 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Image3.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/ImageAnimator.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/ImageAnimator.gif new file mode 100644 index 0000000000000000000000000000000000000000..8b877c7bedb4021440eeac2b0a9a9c5d28377da3 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/ImageAnimator.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/KeyEvent.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/KeyEvent.gif new file mode 100644 index 0000000000000000000000000000000000000000..acbeb39682258aa37a6162230fa5b5bd1ed6a226 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/KeyEvent.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/ListItem.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/ListItem.gif new file mode 100644 index 0000000000000000000000000000000000000000..557213e5ff5c63c5f3b3db7ffbd56e80eef688f1 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/ListItem.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/LongPressGesture.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/LongPressGesture.gif new file mode 100644 index 0000000000000000000000000000000000000000..41a08cbcc0e58aadc12328ab72a8ec3f01a375ad Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/LongPressGesture.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/MediaQuery.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/MediaQuery.gif new file mode 100644 index 0000000000000000000000000000000000000000..6150bbeae602c3522416fc9a6ec9fe49f55ebd2c Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/MediaQuery.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Navigator.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Navigator.gif new file mode 100644 index 0000000000000000000000000000000000000000..0faae458a1e97e2806130a05d9154af7a2a6d2e3 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Navigator.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/PageTransition1.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/PageTransition1.gif new file mode 100644 index 0000000000000000000000000000000000000000..93c0edf4c20f9d29725065f5bdf7a5208da2e2fd Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/PageTransition1.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/PageTransition2.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/PageTransition2.gif new file mode 100644 index 0000000000000000000000000000000000000000..4770183525428b6df03bf1b3eb8cc4160a1568a1 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/PageTransition2.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/PanGesture.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/PanGesture.gif new file mode 100644 index 0000000000000000000000000000000000000000..d98a4ebc55b1fbc7c598a08095f871f4c3ab8678 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/PanGesture.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Panel.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Panel.gif new file mode 100644 index 0000000000000000000000000000000000000000..1cd6ff13714a55e253e9649c007080b47f02f791 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Panel.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/PinchGesture.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/PinchGesture.gif new file mode 100644 index 0000000000000000000000000000000000000000..d5b827457bbb9fbb12c8d1cbee4886dede46a048 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/PinchGesture.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Rating.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Rating.gif new file mode 100644 index 0000000000000000000000000000000000000000..49922f7f7d934216dcbf8837c697d13063d101a4 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Rating.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/RotationGesture.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/RotationGesture.gif new file mode 100644 index 0000000000000000000000000000000000000000..323cd3b5bf1913f6740db4ce2203a07fcb30fb5e Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/RotationGesture.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/RowSplit.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/RowSplit.gif new file mode 100644 index 0000000000000000000000000000000000000000..0ea18f82170eb3309aefb8af24ef89f886718bdd Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/RowSplit.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/SharedTransition.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/SharedTransition.gif new file mode 100644 index 0000000000000000000000000000000000000000..3c81f8cfffb0c4d064335c9ebc0e8c918d10035a Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/SharedTransition.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Span.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Span.gif new file mode 100644 index 0000000000000000000000000000000000000000..3a2f5de773fed90a3c0c058d0b27bc0edd1f1904 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Span.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Tabs.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Tabs.gif new file mode 100644 index 0000000000000000000000000000000000000000..49a1503a776598da93f4089bb079c61125a71a2e Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Tabs.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/TapGesture.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/TapGesture.gif new file mode 100644 index 0000000000000000000000000000000000000000..33a9b7c1a5a408a94cd58261742a29dc7519d880 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/TapGesture.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Text1.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Text1.gif new file mode 100644 index 0000000000000000000000000000000000000000..627fff6c85420f981d9ae844d0e53a77d254ac7c Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Text1.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Text2.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Text2.gif new file mode 100644 index 0000000000000000000000000000000000000000..8b359a2d036a69fd442145d55e23031755c925c1 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Text2.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Touch.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Touch.gif new file mode 100644 index 0000000000000000000000000000000000000000..021c8dfc90ce80c3ee16acbcb4e06c0ddec6e21e Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Touch.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Transition.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Transition.gif new file mode 100644 index 0000000000000000000000000000000000000000..e7dc2d19afd049c44c75e1288063df96326e524c Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/Transition.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/alphabetindexer.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/alphabetindexer.gif new file mode 100644 index 0000000000000000000000000000000000000000..438c67b65f13bfcd1ee3eb19e4f0c1265ae16278 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/alphabetindexer.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/appear.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/appear.gif new file mode 100644 index 0000000000000000000000000000000000000000..c18ae783333765788db1b8bf6107ee0c117ec9e6 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/appear.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/back.png b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/back.png new file mode 100644 index 0000000000000000000000000000000000000000..4e556034506103bd7e7b491d72ef74b9eccde52c Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/back.png differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/badge.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/badge.gif new file mode 100644 index 0000000000000000000000000000000000000000..016da55bb5d98a3d2787d870bf2575fbaf383990 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/badge.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/blank_h.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/blank_h.gif new file mode 100644 index 0000000000000000000000000000000000000000..6f3a05c4fa0ac29097cc25d6021fa33f069f6175 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/blank_h.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/blank_v.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/blank_v.gif new file mode 100644 index 0000000000000000000000000000000000000000..04e09206185deb61233c3bf51a302cc0ccc9c080 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/blank_v.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/blue-6.png b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/blue-6.png new file mode 100644 index 0000000000000000000000000000000000000000..e370a44cf043fc34bd8891f57faad2cd2ca05707 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/blue-6.png differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/border.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/border.gif new file mode 100644 index 0000000000000000000000000000000000000000..89da584f60db920d0801f9e40138a56fd4242fd3 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/border.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/brown-7.png b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/brown-7.png new file mode 100644 index 0000000000000000000000000000000000000000..0d22570503febc7a7dcba0d1e870f49f32fe489a Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/brown-7.png differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/circle.png b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/circle.png new file mode 100644 index 0000000000000000000000000000000000000000..d34ba19a667f40c8dc3b4e668095bda1bd4868aa Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/circle.png differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/clip.png b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/clip.png new file mode 100644 index 0000000000000000000000000000000000000000..c1bfde1c57599f8cc40d0dc50179c71f4dfc2978 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/clip.png differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/colorGradient.png b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/colorGradient.png new file mode 100644 index 0000000000000000000000000000000000000000..2c20e6d28a0636b8122f6377052933c33cfcffaf Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/colorGradient.png differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/column.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/column.gif new file mode 100644 index 0000000000000000000000000000000000000000..3213fc124d255584be8f21a3074806c304953e7b Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/column.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/customdialog.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/customdialog.gif new file mode 100644 index 0000000000000000000000000000000000000000..17ae76b8141d65147f9774d130711f46bf332d02 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/customdialog.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/datapanel.png b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/datapanel.png new file mode 100644 index 0000000000000000000000000000000000000000..6b8ac87fce6a2b4aebc98304db6ed2fd7d14cb82 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/datapanel.png differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/datatype.png b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/datatype.png new file mode 100644 index 0000000000000000000000000000000000000000..fde616c73000d3f58fd98eea59088177221127a5 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/datatype.png differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/divider.png b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/divider.png new file mode 100644 index 0000000000000000000000000000000000000000..f2deeb8445fe0f3b66d2b0facbf9e0f0ed9911ca Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/divider.png differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/ellipse-18.png b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/ellipse-18.png new file mode 100644 index 0000000000000000000000000000000000000000..b85ac72fcec0f4b2eb752307d4abe05ef4795ef2 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/ellipse-18.png differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/enabled.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/enabled.gif new file mode 100644 index 0000000000000000000000000000000000000000..c48a9fa7aca3a160a68868d06d48f6af22ce6d87 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/enabled.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/flex.png b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/flex.png new file mode 100644 index 0000000000000000000000000000000000000000..884eb29ed12c00641fec55f358a41f15f581c335 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/flex.png differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/flex02.png b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/flex02.png new file mode 100644 index 0000000000000000000000000000000000000000..f27757afb281875f5cd4fca0e4b86684cdf0f1a8 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/flex02.png differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/green-9.png b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/green-9.png new file mode 100644 index 0000000000000000000000000000000000000000..bc28f5056c679e189543c8ad6fba67fb56db7655 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/green-9.png differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/grey-8.png b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/grey-8.png new file mode 100644 index 0000000000000000000000000000000000000000..dfcb0c5e259b3f8d7375c21712249c1e847edd67 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/grey-8.png differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/grid-17.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/grid-17.gif new file mode 100644 index 0000000000000000000000000000000000000000..9ead4d671531532629b2fbf2f411ce4008dde3ba Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/grid-17.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/grid.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/grid.gif new file mode 100644 index 0000000000000000000000000000000000000000..1868b355aac470977ff1b36a5c1b3adf007dbfda Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/grid.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/griditem.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/griditem.gif new file mode 100644 index 0000000000000000000000000000000000000000..07a8d81674d244e6ec76c0b43558890caf53062e Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/griditem.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/line.jpg b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/line.jpg new file mode 100644 index 0000000000000000000000000000000000000000..e3d3e1023746c03c9ad426328de0114321ac3f66 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/line.jpg differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/list.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/list.gif new file mode 100644 index 0000000000000000000000000000000000000000..cc49b51652e53b6caa3888b054dbea94c2f498eb Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/list.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/menu.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/menu.gif new file mode 100644 index 0000000000000000000000000000000000000000..f30a8d85e898213691abd5369c9c1008d399274b Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/menu.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/motion.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/motion.gif new file mode 100644 index 0000000000000000000000000000000000000000..ec293bafaf6cd7204ebb231c4eee7daa504b78c3 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/motion.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/opacity.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/opacity.gif new file mode 100644 index 0000000000000000000000000000000000000000..b0e5e55e1af19bb46a74300bf2ae60f95225a874 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/opacity.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/orange-10.png b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/orange-10.png new file mode 100644 index 0000000000000000000000000000000000000000..9c43caf5fdfd466eafc37b793f509a6bde2b885d Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/orange-10.png differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/overlay.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/overlay.gif new file mode 100644 index 0000000000000000000000000000000000000000..4cce6cb6a529cffef01d5b7d1f6ce5f02d63210e Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/overlay.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/path.png b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/path.png new file mode 100644 index 0000000000000000000000000000000000000000..b7c6998d7f55a75562fbf709aa84b4bd12922ae6 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/path.png differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/pink-11.png b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/pink-11.png new file mode 100644 index 0000000000000000000000000000000000000000..5c5e360f249a2002ba68ad9b94bd7f66f5d6aab1 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/pink-11.png differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/polygon.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/polygon.gif new file mode 100644 index 0000000000000000000000000000000000000000..78e7436bf654889a3a04e9d2e5dd53f5fb562906 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/polygon.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/polyline.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/polyline.gif new file mode 100644 index 0000000000000000000000000000000000000000..49167ceae5eb50a96334c73496ed534d25bbecf4 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/polyline.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/popup.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/popup.gif new file mode 100644 index 0000000000000000000000000000000000000000..3bbb23f623eb1163af382d30bc32c1c4cbe524dd Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/popup.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/position.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/position.gif new file mode 100644 index 0000000000000000000000000000000000000000..3174da059167d3560a99d50cca06ec678cabed96 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/position.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/position2.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/position2.gif new file mode 100644 index 0000000000000000000000000000000000000000..ee69d15a36eda3047be045a3d037fd27a37166fe Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/position2.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/progress-15.png b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/progress-15.png new file mode 100644 index 0000000000000000000000000000000000000000..0ff7595bc619e62c05376cd7b57a473dde3e9386 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/progress-15.png differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/q1.png b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/q1.png new file mode 100644 index 0000000000000000000000000000000000000000..cdb53d971cbadb6479cc755ae0a95cd4c0c3bff1 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/q1.png differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/qrcode.png b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/qrcode.png new file mode 100644 index 0000000000000000000000000000000000000000..6b2c6040690cebf054da6dbc70c87d14c82be9d6 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/qrcode.png differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/rect.png b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/rect.png new file mode 100644 index 0000000000000000000000000000000000000000..ad2c71e4bcc008c0d286a05b2e969103aa06236d Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/rect.png differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/red-12.png b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/red-12.png new file mode 100644 index 0000000000000000000000000000000000000000..309d1c46f8bc396df5eaed381a5ffa2f0389d602 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/red-12.png differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/row.png b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/row.png new file mode 100644 index 0000000000000000000000000000000000000000..3b44b9a41cb0fa78afcde81f82e0ad63c90de58d Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/row.png differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/s1.png b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/s1.png new file mode 100644 index 0000000000000000000000000000000000000000..15e3b57fbcadac9e9c6f4c1446bd16c53845f888 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/s1.png differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/s3.png b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/s3.png new file mode 100644 index 0000000000000000000000000000000000000000..3b2e35a9a29c6f849cd4e766c8fac0016b95365d Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/s3.png differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/s4-(1).png b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/s4-(1).png new file mode 100644 index 0000000000000000000000000000000000000000..4f6f99db3df495c744c612e3a2dff20d2a757a43 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/s4-(1).png differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/scroll.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/scroll.gif new file mode 100644 index 0000000000000000000000000000000000000000..fa6a5f8e639b2b8b73bdae505da6b67800c5eb63 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/scroll.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/shape.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/shape.gif new file mode 100644 index 0000000000000000000000000000000000000000..467de1302c615f93709c266f3d5a47ecb941fc53 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/shape.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/sider.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/sider.gif new file mode 100644 index 0000000000000000000000000000000000000000..733585b5ca3cbb4fdf690e596b622f56393700d0 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/sider.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/size.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/size.gif new file mode 100644 index 0000000000000000000000000000000000000000..dffa33c4389c4576d2492cd98499b71715b8ead8 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/size.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/stack.jpg b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/stack.jpg new file mode 100644 index 0000000000000000000000000000000000000000..b0e1a1070b2bdbb158e1ba66caa2269626acd1ef Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/stack.jpg differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/swiper.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/swiper.gif new file mode 100644 index 0000000000000000000000000000000000000000..bf8d1335752f51258920d0cfc1b65190e2f53011 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/swiper.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/textstyle.png b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/textstyle.png new file mode 100644 index 0000000000000000000000000000000000000000..5499902761b534f84a0405094afe2fb5d4724322 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/textstyle.png differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/visibility.gif b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/visibility.gif new file mode 100644 index 0000000000000000000000000000000000000000..fe69ab973cfd17f540dd1da4fd04de890af95c74 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/visibility.gif differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/white-13.png b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/white-13.png new file mode 100644 index 0000000000000000000000000000000000000000..56d32d4cd371c5374b133cb81c9c077aaf7b110d Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/white-13.png differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/yellow-14.png b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/yellow-14.png new file mode 100644 index 0000000000000000000000000000000000000000..b54dbc2391d1a8f16312dd02dc3d65a35ea2626f Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/yellow-14.png differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/zIndex.png b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/zIndex.png new file mode 100644 index 0000000000000000000000000000000000000000..92ddc7d5d9ee2f87128ed8951b2294ea3c07f650 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/zIndex.png differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/zh-cn_image_0000001182200571.png b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/zh-cn_image_0000001182200571.png new file mode 100644 index 0000000000000000000000000000000000000000..c3d760c6d3f6c1e377ff2e42c0b3fb9e547ac140 Binary files /dev/null and b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/zh-cn_image_0000001182200571.png differ diff --git "a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/\345\203\217\347\264\240\345\215\225\344\275\215.gif" "b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/\345\203\217\347\264\240\345\215\225\344\275\215.gif" new file mode 100644 index 0000000000000000000000000000000000000000..391353977d32956cde03890e501d11766dae2648 Binary files /dev/null and "b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/\345\203\217\347\264\240\345\215\225\344\275\215.gif" differ diff --git "a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/\346\250\252\345\261\217\346\230\276\347\244\272.gif" "b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/\346\250\252\345\261\217\346\230\276\347\244\272.gif" new file mode 100644 index 0000000000000000000000000000000000000000..b4c58da1a241d9d4ea1534b67bb7cd5050e90bf6 Binary files /dev/null and "b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/\346\250\252\345\261\217\346\230\276\347\244\272.gif" differ diff --git "a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/\347\253\226\345\261\217\346\230\276\347\244\272.gif" "b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/\347\253\226\345\261\217\346\230\276\347\244\272.gif" new file mode 100644 index 0000000000000000000000000000000000000000..67ccf57fd6c267e8c420b43c309c143a2dd56a45 Binary files /dev/null and "b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/\347\253\226\345\261\217\346\230\276\347\244\272.gif" differ diff --git "a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/\350\256\276\345\244\207\345\256\275\345\272\246\344\270\272LG.png" "b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/\350\256\276\345\244\207\345\256\275\345\272\246\344\270\272LG.png" new file mode 100644 index 0000000000000000000000000000000000000000..6e003ab973198f6d52e559654e0848fa0aacb79e Binary files /dev/null and "b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/\350\256\276\345\244\207\345\256\275\345\272\246\344\270\272LG.png" differ diff --git "a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/\350\256\276\345\244\207\345\256\275\345\272\246\344\270\272MD.png" "b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/\350\256\276\345\244\207\345\256\275\345\272\246\344\270\272MD.png" new file mode 100644 index 0000000000000000000000000000000000000000..e0c21d7388daa4fe32803436b7fb1630f99c2dbc Binary files /dev/null and "b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/\350\256\276\345\244\207\345\256\275\345\272\246\344\270\272MD.png" differ diff --git "a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/\350\256\276\345\244\207\345\256\275\345\272\246\344\270\272SM.png" "b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/\350\256\276\345\244\207\345\256\275\345\272\246\344\270\272SM.png" new file mode 100644 index 0000000000000000000000000000000000000000..9ef495d81128387b6b41c813bcfda52f6b7dff87 Binary files /dev/null and "b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/figures/\350\256\276\345\244\207\345\256\275\345\272\246\344\270\272SM.png" differ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-a-deep-dive-into-component.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-a-deep-dive-into-component.md new file mode 100644 index 0000000000000000000000000000000000000000..1b3126e6fbe94b76fac6b76b6a3565253f3f23b7 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-a-deep-dive-into-component.md @@ -0,0 +1,11 @@ +# 深入理解组件化 + +- **[build函数](ts-function-build.md)** + +- **[自定义组件初始化](ts-custom-component-initialization.md)** + +- **[自定义组件生命周期回调函数](ts-custom-component-lifecycle-callbacks.md)** + +- **[组件创建和重新初始化示例](ts-component-creation-re-initialization.md)** + + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-animation.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-animation.md new file mode 100644 index 0000000000000000000000000000000000000000..5157f99b38396f4839cfd38b73cdc7c1e68cba8a --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-animation.md @@ -0,0 +1,15 @@ +# 动画 + +- **[属性动画](ts-animatorproperty.md)** + +- **[显式动画](ts-explicit-animation.md)** + +- **[转场动画](ts-transition-animation.md)** + +- **[路径动画](ts-motion-path-animation.md)** + +- **[矩阵变换](ts-matrix-transformation.md)** + +- **[插值计算](ts-interpolation-calculation.md)** + + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-animatorproperty.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-animatorproperty.md new file mode 100644 index 0000000000000000000000000000000000000000..34d0a5abc86f43f293ec20904b56b0313a3a9802 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-animatorproperty.md @@ -0,0 +1,179 @@ +# 属性动画 + +组件的通用属性发生变化时，可以创建属性动画进行渐变，提升用户体验。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

duration

+

number

+

1000

+

单位为毫秒，默认动画时长为1000毫秒。

+

curve

+

Curve

+

Linear

+

默认曲线为线性，有效值参见Curve说明。

+

delay

+

number

+

0

+

单位为毫秒，默认不延时播放。

+

iterations

+

number

+

1

+

默认播放一次，设置为-1时表示无限次播放。

+

playMode

+

PlayMode

+

Normal

+

设置动画播放模式，默认播放完成后重头开始播放。

+
+ +- Curve枚举说明 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

描述

+

Linear

+

表示动画从头到尾的速度都是相同的。

+

Ease

+

表示动画以低速开始，然后加快，在结束前变慢，CubicBezier(0.25, 0.1, 0.25, 1.0)。

+

EaseIn

+

表示动画以低速开始，CubicBezier(0.42, 0.0, 1.0, 1.0)。

+

EaseOut

+

表示动画以低速结束，CubicBezier(0.0, 0.0, 0.58, 1.0)。

+

EaseInOut

+

表示动画以低速开始和结束，CubicBezier(0.42, 0.0, 0.58, 1.0)。

+

FastOutSlowIn

+

标准曲线，cubic-bezier(0.4, 0.0, 0.2, 1.0)。

+

LinearOutSlowIn

+

减速曲线，cubic-bezier(0.0, 0.0, 0.2, 1.0)。

+

FastOutLinearIn

+

加速曲线，cubic-bezier(0.4, 0.0, 1.0, 1.0)。

+

ExtremeDeceleration

+

急缓曲线，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)。

+

Friction

+

阻尼曲线，CubicBezier(0.2, 0.0, 0.2, 1.0)。

+
+ + +## 示例 + +``` +@Entry +@Component +struct AttrAnimationExample { + @State widthSize: number = 200 + @State heightSize: number = 100 + @State flag: boolean = true + + build() { + Column() { + Button('click me') + .onClick((event: ClickEvent) => { + if (this.flag) { + this.widthSize = 100 + this.heightSize = 50 + } else { + this.widthSize = 200 + this.heightSize = 100 + } + this.flag = !this.flag + }) + .width(this.widthSize).height(this.heightSize).backgroundColor(0x317aff) + .animation({ + duration: 2000, // 动画时长 + curve: Curve.EaseOut, // 动画曲线 + delay: 500, // 动画延迟 + iterations: 1, // 播放次数 + playMode: PlayMode.Normal // 动画模式 + }) // 对Button组件的宽高属性进行动画配置 + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/AttrAnimation.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-appendix-enums.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-appendix-enums.md new file mode 100644 index 0000000000000000000000000000000000000000..a49deb322b8e6e4c85838a094e89804cc83cbdf9 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-appendix-enums.md @@ -0,0 +1,278 @@ +# 文档中涉及到的内置枚举值 + +## Alignment枚举说明 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

描述

+

TopStart

+

顶部起始端。

+

Top

+

顶部横向居中。

+

TopEnd

+

顶部尾端。

+

Start

+

起始端纵向居中。

+

Center

+

横向和纵向居中。

+

End

+

尾端纵向居中。

+

BottomStart

+

底部起始端。

+

Bottom

+

底部横向居中。

+

BottomEnd

+

底部尾端。

+
+ +## ItemAlign枚举说明 + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

描述

+

Auto

+

使用Flex容器中默认配置。

+

Start

+

元素在Flex容器中，交叉轴方向首部对齐。

+

Center

+

元素在Flex容器中，交叉轴方向居中对齐。

+

End

+

元素在Flex容器中，交叉轴方向底部对齐。

+

Stretch

+

元素在Flex容器中，交叉轴方向拉伸填充，在未设置尺寸时，拉伸到容器尺寸。

+

Baseline

+

元素在Flex容器中，交叉轴方向文本基线对齐。

+
+ +## LineCapStyle枚举说明 + + + + + + + + + + + + + + + + +

名称

+

描述

+

Butt

+

分割线两端为平行线。

+

Round

+

分割线两端为半圆。

+

Square

+

分割线两端为平行线。

+
+ +## PlayMode枚举值说明 + + + + + + + + + + + + + + + + + + + +

名称

+

描述

+

Normal

+

动画按正常播放。

+

Reverse

+

动画反向播放。

+

Alternate

+

动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。

+

AlternateReverse

+

动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。

+
+ +## ImageRepeat枚举说明 + + + + + + + + + + + + + + + + + + + +

名称

+

描述

+

X

+

只在水平轴上重复绘制图片。

+

Y

+

只在竖直轴上重复绘制图片。

+

XY

+

在两个轴上重复绘制图片。

+

NoRepeat

+

不重复绘制图片。

+
+ +## TextDecorationType枚举说明 + + + + + + + + + + + + + + + + + + + +

名称

+

描述

+

Underline

+

文字下划线修饰。

+

LineThrough

+

穿过文本的修饰线。

+

Overline

+

文字上划线修饰。

+

None

+

不使用文本装饰线。

+
+ +## TextCase枚举说明 + + + + + + + + + + + + + + + + +

名称

+

描述

+

Normal

+

保持文本原有大小写。

+

LowerCase

+

文本采用全小写。

+

UpperCase

+

文本采用全大写。

+
+ +## BarState枚举说明 + + + + + + + + + + + + + + + + +

名称

+

描述

+

Off

+

不显示。

+

On

+

常驻显示。

+

Auto

+

按需显示(触摸时显示，2s后消失)。

+
+ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-appendix.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-appendix.md new file mode 100644 index 0000000000000000000000000000000000000000..f1bebc1efcd4eb9d725e00bbd1e3fcf44578af4a --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-appendix.md @@ -0,0 +1,5 @@ +# 附录 + +- **[文档中涉及到的内置枚举值](ts-appendix-enums.md)** + + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-application-states-apis-environment.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-application-states-apis-environment.md new file mode 100644 index 0000000000000000000000000000000000000000..a522af65fa87da26aaaea5615ee270db0ba26446 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-application-states-apis-environment.md @@ -0,0 +1,118 @@ +# 环境变量 + +**Environment**是框架在应用程序启动时创建的单例对象，它为**AppStorage**提供了一系列应用程序需要的环境状态属性，这些属性描述了应用程序运行的设备环境。**Environment**及其属性是不可变的，所有属性值类型均为简单类型。 + +如下示例展示了从**Environment**获取语音环境： + +``` +Environment.EnvProp("accessibilityEnabled", "default"); +var enable = AppStorageGet("accessibilityEnabled"); +``` + +**accessibilityEnabled**是**Environment**提供默认系统变量识别符。首先需要将对应系统属性绑定到**Appstorage**中，后可以通过AppStorage中的方法或者装饰器，访问对应系统属性数据。 + +## Environment接口 + + + + + + + + + + + + + + + + + + + + + + + + +

key

+

参数

+

返回值

+

说明

+

EnvProp

+

key : string

+

defaultValue: any

+

boolean

+

关联此系统项到Appstorage中。建议在app启动时使用此Api。如果此属性在Appstorage已经存在则返回false。请勿使用AppStorage中的变量，在调用此方法关联环境变量。

+

EnvProps

+

keys: {

+

key: string,

+

defaultValue: any

+

}[]

+

void

+

关联此系统项数组到Appstorage中。

+

Keys

+

Array<string>

+

number

+

返回关联的系统项。

+
+ +## Environment内置的环境变量 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

key

+

类型

+

说明

+

accessibilityEnabled

+

boolean

+

无障碍屏幕朗读是否启用。

+

colorMode

+

ColorMode

+

深浅色模式，选项值为：

+
  • ColorMode.LIGHT：浅色模式；
  • ColorMode.DARK：深色模式。
+

fontScale

+

number

+

字体大小比例，范围为：[0.85, 1.45]。

+

fontWeightScale

+

number

+

字体权重比例，取值范围：[0.6, 1.6]。

+

layoutDirection

+

LayoutDirection

+

布局方向类型，可选值为：

+
  • LayoutDirection.LTR：从左到右；
  • LayoutDirection.RTL：从右到左。
+

languageCode

+

string

+

当前系统语言值，小写字母，例如zh。

+
+ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-application-states-apis-persistentstorage.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-application-states-apis-persistentstorage.md new file mode 100644 index 0000000000000000000000000000000000000000..ed86b2870d6f656769fde6bfb2b524a1d8b9feb7 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-application-states-apis-persistentstorage.md @@ -0,0 +1,94 @@ +# 持久化数据管理 + +**PersistentStorage**用于管理应用持久化数据。此对象可以将特定标记的持久化数据链接到AppStorage中，并由AppStorage接口访问对应持久化数据，或者通过@StorageLink修饰器来访问对应key的变量。 + +## PersistentStorage接口 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

方法

+

参数说明

+

返回值

+

定义

+

PersistProp

+

key : string

+

defaultValue: T

+

void

+

关联命名的属性在AppStorage变为持久化数据。赋值覆盖顺序

+

首先 如果此属性在AppStorage中存在，并且将Persistent中的数据复写为AppStorage中的属性值。

+

其次Persistent中有此命名的属性，使用Persistent中的属性值。

+

最后 以上条件不满足使用defaultValue，不支持null和undefined。

+

DeleteProp

+

key: string

+

void

+

取消双向数据绑定，该属性值将从持久存储中删除。

+

PersistProps

+

keys: {

+

key: string,

+

defaultValue: any

+

}[]

+

void

+

关联多个命名的属性绑定。

+

Keys

+

void

+

Array<string>

+

返回所有持久化属性的标记。

+
+ +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- PersistProp接口使用时，需要保证输入对应的key应当在Appstorage存在。 +>- DeleteProp接口使用时，只能对本次启动已经link过的数据生效。 + +``` +PersistentStorage.PersistProp("highScore", "0"); + +@Entry +@Component +struct PersistentComponent { + @StorageLink('highScore') highScore: string = '0' + @State currentScore: number = 0 + build() { + Column() { + if (this.currentScore === Number(this.highScore)) { + Text(`new highScore : ${this.highScore}`) + } + Button() { + Text(`goal!, currentScore : ${this.currentScore}`) + .fontSize(10) + }.onClick(() => { + this.currentScore++ + if (this.currentScore > Number(this.highScore)) { + this.highScore = this.currentScore.toString() + } + }) + } + } +} +``` + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-application-states-appstorage.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-application-states-appstorage.md new file mode 100644 index 0000000000000000000000000000000000000000..a6a65f680815d01b82807ec90966cf015fac8db4 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-application-states-appstorage.md @@ -0,0 +1,153 @@ +# 应用程序的数据存储 + +**AppStorage**是应用程序中的单例对象，由UI框架在应用程序启动时创建。它的目的是为可变应用程序状态属性提供中央存储。**AppStorage**包含整个应用程序中需要访问的所有状态属性。只要应用程序保持运行，**AppStorage**存储就会保留所有属性及其值，属性值可以通过唯一的键值进行访问。 + +UI组件可以通过装饰器将应用程序状态数据与**AppStorage**进行同步。应用业务逻辑的实现也可以通过接口访问**AppStorage**。 + +AppStorage的选择状态属性可以与不同的数据源或数据接收器同步。这些数据源和接收器可以是设备上的本地或远程，并具有不同的功能，如数据持久性。这样的数据源和接收器可以独立于UI在业务逻辑中实现。 + +默认情况下，**AppStorage**中的属性是可变的，**AppStorage**还可使用不可变（只读）属性。 + +## AppStorage接口说明 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

方法

+

参数说明

+

返回值

+

定义

+

Link

+

key: string

+

@Link

+

如果存在具有给定键的数据，则返回到此属性的双向数据绑定，该双向绑定意味着变量或者组件对数据的更改将同步到AppStorage，通过AppStorage对数据的修改将同步到变量或者组件。如果具有此键的属性不存在或属性为只读，则返回undefined。

+

SetAndLink

+

key : String

+

defaultValue: T

+

@Link

+

与Link接口类似。如果当前的key在AppStorage有保存，则返回此key对应的value。如果此key未被创建，则创建一个对应default值的Link返回。

+

Prop

+

key: string

+

@Prop

+

如果存在具有给定键的属性，则返回到此属性的单向数据绑定。该单向绑定意味着只能通过AppStorage将属性的更改同步到变量或者组件。该方法返回的变量为不可变变量，适用于可变和不可变的状态属性，如果具有此键的属性不存在则返回undefined。

+
说明：

prop方法对应的属性值类型为简单类型。

+
+

SetAndProp

+

key : string

+

defaultValue: S

+

@Prop

+

与Prop接口类似。如果当前的key在AppStorage有保存，则返回此key对应的value。如果此key未被创建，则创建一个对应default值的Prop返回。

+

Has

+

key: string

+

boolean

+

判断对应键值的属性是否存在。

+

Keys

+

void

+

array<string>

+

返回包含所有键的字符串数组。

+

Get

+

string

+

T或undefined

+

通过此接口获取对应此key值的value

+

Set

+

string, newValue ：T

+

void

+

对已保存的key值，替换其value值。

+

SetOrCreate

+

string, newValue ：T

+

boolean

+

如果相同名字的属性存在：如果此属性可以被更改返回true，否则返回false

+

如果相同名字的属性不存在：创建第一个赋值为defaultValue的属性，不支持null和undefined

+

Delete

+

key : string

+

boolean

+

删除属性，如果存在返回true，不存在返回false

+

Clear

+

none

+

boolean

+

删除所有的属性，如果当前有状态变量依旧引用此属性，则返回false

+

IsMutable

+

key: string

+		  

返回此属性是否存在并且是否可以改变。

+
+ +>![](../../public_sys-resources/icon-note.gif) **说明：** +>当前接口当前仅可以处理基础类型数据，对于修改object中某一个值尚未支持。 + +## 示例 + +``` +let link1 = AppStorage.Link('PropA') +let link2 = AppStorage.Link('PropA') +let prop = AppStorage.Prop('PropA') + +link1 = 47 // causes link1 == link2 == prop == 47 +link2 = link1 + prop // causes link1 == link2 == prop == 94 +prop = 1 // error, prop is immutable +``` + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-application-states-storagelink-storageprop.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-application-states-storagelink-storageprop.md new file mode 100644 index 0000000000000000000000000000000000000000..381a0550939f77b445bc48db1e4817cdd5f5c77d --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-application-states-storagelink-storageprop.md @@ -0,0 +1,54 @@ +# AppStorage与组件同步 + +在[管理组件拥有的状态](ts-component-states-state.md)中，我们已经定义了如何将组件的状态变量与父组件或祖先组件中的**@State**装饰的状态变量同步，主要包括**@Prop**、**@Link**、**@Consume**。 + +本章节将定义如何将组件变量与**AppStorage**同步，主要提供**@StorageLink**和**@StorageProp**装饰器。 + +## @StorageLink装饰器 + +组件通过使用**@StorageLink\(key\)**装饰的状态变量，将于**AppStorage**建立双向数据绑定，**key**为**AppStorage**中的属性键值。当创建包含**@StorageLink**的状态变量的组件时，该状态变量的值将使用**AppStorage**中的值进行初始化。在UI组件中对**@StorageLink**的状态变量所做的更改将同步到**AppStorage**，并从**AppStorage**同步到任何其他绑定实例中，如**PersistentStorage**或其他绑定的UI组件。 + +## @StorageProp装饰器 + +组件通过使用**@StorageProp\(key\)**装饰的状态变量，将于**AppStorage**建立单向数据绑定，**key**标识AppStorage中的属性键值。当创建包含**@StoageProp**的状态变量的组件时，该状态变量的值将使用**AppStorage**中的值进行初始化。**AppStorage**中的属性值更改会导致绑定的UI组件进行状态更新。 + +## 示例 + +``` +let varA = AppStorage.Link('varA') +let envLang = AppStorage.Prop('languageCode') + +@Entry +@Component +struct ComponentA { + @StorageLink('varA') varA: number = 2 + @StorageProp('languageCode') lang: string = 'en' + private label: string = 'count' + + private aboutToAppear() { + this.label = (this.lang === 'zh') ? '数' : 'Count' + } + + build() { + Row({ space: 20 }) { + + Button(`${this.label}: ${this.varA}`) + .onClick(() => { + AppStorage.Set('varA', AppStorage.Get('varA') + 1) + }) + Button(`lang: ${this.lang}`) + .onClick(() => { + if (this.lang === 'zh') { + AppStorage.Set('languageCode', 'en') + } else { + AppStorage.Set('languageCode', 'zh') + } + this.label = (this.lang === 'zh') ? '数' : 'Count' + }) + } + } +} +``` + +每次用户单击Count按钮时，this.varA变量值都会增加，此变量与AppStorage中的varA同步。每次用户单击当前语言按钮时，修改AppStorage中的languageCode，此修改会同步给this.lang变量。 + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-attribution-configuration.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-attribution-configuration.md new file mode 100644 index 0000000000000000000000000000000000000000..89afab04a3078700258b8096d1e76fe96af681bc --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-attribution-configuration.md @@ -0,0 +1,46 @@ +# 属性配置 + +使用属性方法配置组件的属性。属性方法紧随组件，并用“**.**”运算符连接。 + +配置**Text**组件的字体大小属性示例： + +``` +Text('123') + .fontSize(12) +``` + +此外，您还可以使用“**.**”操作进行链式调用并同时配置组件的多个属性。 + +您可以同时配置**Image**组件的多个属性，如下所示： + +``` +Image('a.jpg') + .alt('error.jpg') + .width(100) + .height(100) +``` + +除了直接传递常量参数外，还可以传递变量或表达式，如下所示： + +``` +// Size, count, and offset are private variables defined in the component. +Text('hello') + .fontSize(this.size) +Image('a.jpg') + .width(this.count % 2 === 0 ? 100 : 200) + .height(this.offset + 100) +``` + +对于内置组件，框架还为其属性预定义了一些枚举类型，供开发人员调用，枚举值可以作为参数传递。 + +枚举类型必须满足参数类型要求，有关特定属性的枚举类型定义的详细信息。 + +您可以按以下方式配置**Text**组件的颜色和字重属性： + +``` +Text('hello') + .fontSize(20) + .fontColor(Color.Red) + .fontWeight(FontWeight.Bold) +``` + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-blank.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-blank.md new file mode 100644 index 0000000000000000000000000000000000000000..6abb1a1483067fec2fa265a7dbc42fac0f9c873b --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-blank.md @@ -0,0 +1,103 @@ +# Blank + +空白填充组件，在容器主轴方向上，空白填充组件具有自动填充容器空余部分的能力。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- 仅当父组件为Row/Column时生效。 + +## 权限列表 + +无 + +## 子组件 + +无 + +## 接口 + +Blank\(min?: Length\) + +- 参数 + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

min

+

Length

+

否

+

0

+

空白填充组件在容器主轴上的最小大小。

+
+ + +## 属性 + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

color

+

Color

+

0x00000000

+

设置空白填充的填充颜色。

+
+ +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- 不支持通用属性方法。 + +## 示例 + +``` +@Entry +@Component +struct BlankExample { + build() { + Column() { + Row() { + Text('Bluetooth').fontSize(18) + Blank() + Text('on/off').fontSize(18).height(60) + }.width('100%').backgroundColor(0xFFFFFF).borderRadius(15).padding(12) + }.backgroundColor(0xEFEFEF).padding(20) + } +} +``` + +竖屏状态 + +![](figures/blank_v.gif) + +横屏状态 + +![](figures/blank_h.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-button.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-button.md new file mode 100644 index 0000000000000000000000000000000000000000..956a8ba2ff3cdd4af8837c341e13ff1c59db1871 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-button.md @@ -0,0 +1,221 @@ +# Button + +提供按钮组件。 + +## 权限列表 + +无 + +## 子组件 + +可以包含子组件。 + +## 接口 + +- Button\(options?: \{type?: ButtonType, stateEffect?: boolean\}\) + + **表 1** options参数说明 + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

type

+

ButtonType

+

否

+

Capsule

+

描述按钮风格。

+

stateEffect

+

boolean

+

否

+

true

+

按钮按下时是否开启切换效果，当状态置为false时，点击效果关闭。

+
+ + +- Button\(label?: string, options?: \{ type?: ButtonType, stateEffect?: boolean \}\) + + 使用文本内容创建相应的按钮组件，此时Button无法包含子组件。 + + **表 2** value参数说明 + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

label

+

string

+

否

+

-

+

按钮文本内容。

+

options

+

Object

+

否

+

-

+

见options参数说明。

+
+ + +## 属性 + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

type

+

ButtonType

+

Capsule

+

设置Button样式。

+

stateEffect

+

boolean

+

true

+

状态切换时是否开启切换效果，当状态置为false时，点击效果关闭。

+
+ +- ButtonType枚举说明 + + + + + + + + + + + + + + + + +

名称

+

描述

+

Capsule

+

胶囊型按钮（圆角默认为高度的一半）。

+

Circle

+

圆形按钮。

+

Normal

+

普通按钮（默认不带圆角）。

+
+ + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- 按钮圆角通过[通用属性borderRadius设置](ts-universal-attributes-border.md)（不支持通过border接口设置圆角）。 +>- 按钮文本通过[通用文本样式](ts-universal-attributes-text-style.md)进行设置。 + +## 示例 + +``` +@Entry +@Component +struct ButtonExample { + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { + Text('Common button').fontSize(9).fontColor(0xCCCCCC) + Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { + Button('Ok', { type: ButtonType.Normal, stateEffect: true }).borderRadius(8).backgroundColor(0x317aff).width(90) + Button({ type: ButtonType.Normal, stateEffect: true }) { + Row() { + Image($r('app.media.loading')).width(20).height(20).margin({ left: 12 }) + Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 }) + }.alignItems(VerticalAlign.Center) + }.borderRadius(8).backgroundColor(0x317aff).width(90) + Button('Disable', { type: ButtonType.Normal, stateEffect: false }).opacity(0.5) + .borderRadius(8).backgroundColor(0x317aff).width(90) + } + + Text('Capsule button').fontSize(9).fontColor(0xCCCCCC) + Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { + Button('Ok', { type: ButtonType.Capsule, stateEffect: true }).backgroundColor(0x317aff).width(90) + Button({ type: ButtonType.Capsule, stateEffect: true }) { + Row() { + Image($r('app.media.loading')).width(20).height(20).margin({ left: 12 }) + Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 }) + }.alignItems(VerticalAlign.Center).width(90) + }.backgroundColor(0x317aff) + .onClick((event: ClickEvent) => { + AlertDialog.show({ message: 'The login is successful' }) + }) + Button('Disable', { type: ButtonType.Capsule, stateEffect: false }).opacity(0.5) + .backgroundColor(0x317aff).width(90) + } + + Text('Circle button').fontSize(9).fontColor(0xCCCCCC) + Flex({ alignItems: ItemAlign.Center, wrap: FlexWrap.Wrap }) { + Button({ type: ButtonType.Circle, stateEffect: true }) { + Image($r('app.media.ic_public_app_filled')).width(20).height(20) + }.width(55).height(55).backgroundColor(0x317aff) + Button({ type: ButtonType.Circle, stateEffect: true }) { + Image($r('app.media.ic_public_delete_filled')).width(30).height(30) + }.width(55).height(55).margin({ left: 20 }).backgroundColor(0xF55A42) + } + }.height(400).padding({ left: 35, right: 35, top: 35 }) + } +} +``` + +![](figures/Button.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-datapanel.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-datapanel.md new file mode 100644 index 0000000000000000000000000000000000000000..1b887defe01b450f56afb20b8edc32406912d69d --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-datapanel.md @@ -0,0 +1,73 @@ +# DataPanel + +数据面板组件，用于将多个数据占比情况使用环形占比图进行展示。 + +## 子组件 + +无 + +## 接口 + +DataPanel\(value:\{values: number\[\], max?: number\}\) + +- 参数 + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

values

+

number[]

+

是

+

-

+

数据值列表，最大支持9个数据。

+

max

+

number

+

否

+

100

+

数据的最大值。

+
+ + +## 示例 + +``` +@Entry +@Component +struct DataPanelExample { + public values1: number[] = [40, 20, 20, 10, 10] + + build() { + Column({ space: 5 }) { + DataPanel({ values: this.values1, max: 100 }) + .width(150) + .height(150) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/datapanel.png) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-divider.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-divider.md new file mode 100644 index 0000000000000000000000000000000000000000..786b32f943ea9392351c604d9306960dd9777ac4 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-divider.md @@ -0,0 +1,105 @@ +# Divider + +提供分隔器组件，分隔不同内容块/内容元素。 + +## 权限列表 + +无 + +## 子组件 + +无 + +## 接口 + +Divider\(\) + +## 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

vertical

+

boolean

+

false

+

使用水平分割线还是垂直分割线，false: 水平分割线， true:垂直分割线。

+

color

+

Color

+

-

+

设置分割线颜色。

+

strokeWidth

+

Length

+

1

+

设置分割线宽度。

+

lineCap

+

LineCapStyle

+

Butt

+

设置分割线条的端点样式，默认为Butt。

+
+ +## 事件 + +不支持通用事件。 + +## 示例 + +``` +@Entry +@Component +struct DividerExample { + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { + Text('Horizontal divider').fontSize(9).fontColor(0xCCCCCC) + Row().width('100%').height(40).backgroundColor(0xF1F3F5) + Divider() + Row().width('100%').height(40).backgroundColor(0xF1F3F5) + + Text('Vertical divider').fontSize(9).fontColor(0xCCCCCC) + Flex({ alignItems: ItemAlign.Center, wrap: FlexWrap.Wrap }) { + Text('bravery') + Divider().vertical(true).margin(20).height(15) + Text('effort') + Divider().vertical(true).margin(20).height(15) + Text('upward') + }.width(250) + + Text('Custom Styles').fontSize(9).fontColor(0xCCCCCC) + Row().width('100%').height(40).backgroundColor(0xF1F3F5) + Divider().vertical(false).strokeWidth(5).color(0x2788D9).lineCap(LineCapStyle.Round) + Row().width('100%').height(40).backgroundColor(0xF1F3F5) + }.width('100%').height(350).padding({ left: 35, right: 35, top: 35 }) + } +} +``` + +![](figures/divider.png) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-image.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-image.md new file mode 100644 index 0000000000000000000000000000000000000000..f43d3a0fe78fa57edeba8af861397b332774d20f --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-image.md @@ -0,0 +1,448 @@ +# Image + +图片组件，用来渲染展示图片。 + +## 权限列表 + +ohos.permission.INTERNET（使用网络图片） + +## 子组件 + +无 + +## 接口 + +Image\(src: string | PixelMap\) + +- 参数 + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

src

+

string

+

是

+

-

+

图片的URI，支持本地图片和网络路径。

+
+ + +## 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

alt

+

string

+

-

+

加载时显示的占位图。支持本地图片和网络路径。

+

objectFit

+

ImageFit

+

Cover

+

设置图片的缩放类型。

+

objectRepeat

+

ImageRepeat

+

NoRepeat

+

设置图片的重复样式。

+
说明：
  • SVG类型图源不支持该属性。
+
+

interpolation

+

ImageInterpolation

+

None

+

设置图片的插值效果，仅针对图片放大插值。

+
说明：
  • SVG类型图源不支持该属性。
  • PixelMap资源不支持该属性。
+
+

renderMode

+

ImageRenderMode

+

Original

+

设置图片渲染的模式。

+
说明：
  • SVG类型图源不支持该属性。
+
+

sourceSize

+

{

+

width: number,

+

height: number

+

}

+

-

+

设置图片解码尺寸，将原始图片解码成指定尺寸的图片，number类型单位为px。

+
说明：

PixelMap资源不支持该属性。

+
+
+ +- ImageFit枚举说明 + + + + + + + + + + + + + + + + + + + + + + +

名称

+

描述

+

Cover

+

保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。

+

Contain

+

保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。

+

Fill

+

不保持宽高比进行放大缩小，使得图片填充满显示边界。

+

None

+

保持原有尺寸显示。通常配合objectRepeat属性一起使用。

+

ScaleDown

+

保持宽高比显示，图片缩小或者保持不变。

+
+ + +- ImageInterpolation枚举说明 + + + + + + + + + + + + + + + + + + + +

名称

+

描述

+

None

+

不使用插值图片数据。

+

High

+

高度使用插值图片数据，可能会影响图片渲染的速度。

+

Medium

+

中度使用插值图片数据。

+

Low

+

低度使用插值图片数据。

+
+ + +- ImageRenderMode枚举说明 + + + + + + + + + + + + + +

名称

+

描述

+

Original

+

按照原图进行渲染，包括颜色。

+

Template

+

将图像渲染为模板图像，忽略图片的颜色信息。

+
+ + +## 事件 + + + + + + + + + + + + + + + + +

名称

+

功能描述

+

onComplete(callback: (event?: { width: number, height: number, componentWidth: number, componentHeight: number, loadingStatus: number }) => void)

+

图片成功加载时触发该回调，返回成功加载的图源尺寸。

+

onError(callback: (event?: { componentWidth: number, componentHeight: number }) => void)

+

图片加载出现异常时触发该回调。

+

onFinish(callback: () => void)

+

当加载的源文件为带动效的svg图片时，当svg动效播放完成时会触发这个回调，如果动效为无限循环动效，则不会触发这个回调。

+
+ +## 示例 + +``` +// Image1 +@Entry +@Component +struct ImageExample1 { + private on: string = 'http://uxd.rnd.huawei.com/uxIcon/file/2021-08/d2d6e6c6-043f-471e-80e3-57199142201e.svg' + @State src: string = this.on + + build() { + Column() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) { + Text('default').fontSize(16).fontColor(0xcccccc).height(30) + Row({ space: 5 }) { + Image($r('app.media.ic_png')) + .width(110).height(110).border({ width: 1 }).borderStyle(BorderStyle.Dashed) + .overlay('png', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) + Image($r('app.media.ic_gif')) + .width(110).height(110).border({ width: 1 }).borderStyle(BorderStyle.Dashed) + .overlay('gif', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) + Image($r('app.media.ic_svg')) + .width(110).height(110).border({ width: 1 }).borderStyle(BorderStyle.Dashed) + .overlay('svg', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) + } + Row({ space: 5 }) { + Image($r('app.media.img_example')) + .width(110).height(110).border({ width: 1 }).borderStyle(BorderStyle.Dashed) + .overlay('jpg', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) + Image(this.src) + .width(110).height(110).border({ width: 1 }).borderStyle(BorderStyle.Dashed) + .overlay('network', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) + }.margin({ top: 25, bottom: 10 }) + } + + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) { + Text('objectFit').fontSize(16).fontColor(0xcccccc).height(30) + Row({ space: 5 }) { + Image($r('app.media.img_example')) + .border({ width: 1 }).borderStyle(BorderStyle.Dashed) + .objectFit(ImageFit.None).width(110).height(110) + .overlay('None', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) + Image($r('app.media.img_example')) + .border({ width: 1 }).borderStyle(BorderStyle.Dashed) + .objectFit(ImageFit.Fill).width(110).height(110) + .overlay('Fill', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) + Image($r('app.media.img_example')) + .border({ width: 1 }).borderStyle(BorderStyle.Dashed) + .objectFit(ImageFit.Cover).width(110).height(110) + .overlay('Cover', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) + } + Row({ space: 5 }) { + Image($r('app.media.img_example_w250')) + .border({ width: 1 }).borderStyle(BorderStyle.Dashed) + .objectFit(ImageFit.Contain).width(110).height(110) + .overlay('Contain', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) + Image($r('app.media.img_example_w250')) + .border({ width: 1 }).borderStyle(BorderStyle.Dashed) + .objectFit(ImageFit.ScaleDown).width(110).height(110) + .overlay('ScaleDown', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) + }.margin({ top: 25 }) + } + }.height(320).width(360).padding({ right: 10, top: 10 }) + } +} +``` + +![](figures/Image1.gif) + +``` +// Image2 +@Entry +@Component +struct ImageExample2 { + @State width: number = 100 + @State height: number = 100 + + build() { + Column({ space: 10 }) { + Text('renderMode').fontSize(12).fontColor(0xcccccc).width('96%').height(30) + Row({ space: 50 }) { + Image($r('app.media.img_example')) + .renderMode(ImageRenderMode.Original).width(100).height(100) + .border({ width: 1 }).borderStyle(BorderStyle.Dashed) + .overlay('Original', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) + Image($r('app.media.img_example')) + .renderMode(ImageRenderMode.Template).width(100).height(100) + .border({ width: 1 }).borderStyle(BorderStyle.Dashed) + .overlay('Template', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) + } + + Text('alt').fontSize(12).fontColor(0xcccccc).width('96%').height(30) + Image('') + .alt($r('app.media.Image_none')) + .width(100).height(100).border({ width: 1 }).borderStyle(BorderStyle.Dashed) + + Text('sourceSize').fontSize(12).fontColor(0xcccccc).width('96%') + Row({ space: 50 }) { + Image($r('app.media.img_example')) + .sourceSize({ + width: 150, + height: 150 + }) + .objectFit(ImageFit.ScaleDown).width('25%').aspectRatio(1) + .border({ width: 1 }).borderStyle(BorderStyle.Dashed) + .overlay('w:150 h:150', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) + Image($r('app.media.img_example')) + .sourceSize({ + width: 200, + height: 200 + }) + .objectFit(ImageFit.ScaleDown).width('25%').aspectRatio(1) + .border({ width: 1 }).borderStyle(BorderStyle.Dashed) + .overlay('w:200 h:200', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) + } + + Text('objectRepeat').fontSize(12).fontColor(0xcccccc).width('96%').height(30) + Row({ space: 5 }) { + Image($r('app.media.ic_health_heart')) + .width(120).height(125).border({ width: 1 }).borderStyle(BorderStyle.Dashed) + .objectRepeat(ImageRepeat.XY).objectFit(ImageFit.ScaleDown) + .overlay('ImageRepeat.XY', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) + Image($r('app.media.ic_health_heart')) + .width(110).height(125).border({ width: 1 }).borderStyle(BorderStyle.Dashed) + .objectRepeat(ImageRepeat.Y).objectFit(ImageFit.ScaleDown) + .overlay('ImageRepeat.Y', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) + Image($r('app.media.ic_health_heart')) + .width(110).height(125).border({ width: 1 }).borderStyle(BorderStyle.Dashed) + .objectRepeat(ImageRepeat.X).objectFit(ImageFit.ScaleDown) + .overlay('ImageRepeat.X', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) + } + }.height(150).width('100%').padding({ right: 10 }) + } +} +``` + +![](figures/Image2.gif) + +``` +// Image3 +@Entry +@Component +struct ImageExample3 { + @State width: number = 0 + @State height: number = 0 + private on: Resource = $r('app.media.wifi_on') + private off: Resource = $r('app.media.wifi_off') + private on2off: Resource = $r('app.media.wifi_on2off') + private off2on: Resource = $r('app.media.wifi_off2on') + @State src: Resource = this.on + + build() { + Column() { + Row({ space: 20 }) { + Column() { + Image($r('app.media.img_example1')) + .alt($r('app.media.ic_public_picture')) + .sourceSize({ + width: 900, + height: 900 + }) + .objectFit(ImageFit.Cover) + .height(180).width(180) + .onComplete((msg: { width: number,height: number }) => { + this.width = msg.width + this.height = msg.height + }) + .onError(() => { + console.log('load image fail') + }) + .overlay('\nwidth: ' + String(this.width) + ' height: ' + String(this.height), { + align: Alignment.Bottom, + offset: { x: 0, y: 20 } + }) + } + + Image(this.src) + .width(120).height(120) + .onClick(() => { + if (this.src == this.on || this.src == this.off2on) { + this.src = this.on2off + } else { + this.src = this.off2on + } + }) + .onFinish(() => { + if (this.src == this.off2on) { + this.src = this.on + } else { + this.src = this.off + } + }) + } + }.width('100%') + } +} +``` + +![](figures/Image3.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-imageanimator.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-imageanimator.md new file mode 100644 index 0000000000000000000000000000000000000000..f59aacefdbca375540ef1bcaa20b212fcd58d7f6 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-imageanimator.md @@ -0,0 +1,328 @@ +# ImageAnimator + +提供帧动画组件来实现逐帧播放图片的能力，可以配置需要播放的图片列表，每张图片可以配置时长。 + +## 子组件 + +无 + +## 接口 + +ImageAnimator\(\) + +## 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名称

+

参数类型

+

默认值

+

必填

+

参数描述

+

images

+

Array<{

+

src:string,

+

width?:Length,

+

height?:Length,

+

top?:Length,

+

left?:Length,

+

duration?:number

+

}>

+

[]

+

是

+

设置图片帧信息集合。每一帧的帧信息包含图片路径、图片大小、图片位置和图片播放时长信息。详细说明如下：

+

src：图片路径，图片格式为svg，png和jpg。

+

width：图片宽度。

+

height：图片高度。

+

top：图片相对于组件左上角的纵向坐标。

+

left：图片相对于组件左上角的横向坐标。

+

duration：每一帧图片的播放时长，单位毫秒。

+

state

+

AnimationStatus

+

Initial

+

否

+

默认为初始状态，用于控制播放状态。

+

duration

+

number

+

1000

+

否

+

单位为毫秒，默认时长为1000ms；duration为0时，不播放图片；值的改变只会在下一次循环开始时生效；当images中设置了单独的duration后，该属性设置无效。

+

reverse

+

boolean

+

false

+

否

+

设置播放顺序。false表示从第1张图片播放到最后1张图片； true表示从最后1张图片播放到第1张图片。

+

fixedSize

+

boolean

+

true

+

否

+

设置图片大小是否固定为组件大小。 true表示图片大小与组件大小一致，此时设置图片的width 、height 、top 和left属性是无效的。false表示每一张图片的 width 、height 、top和left属性都要单独设置。

+

preDecode

+

number

+

0

+

否

+

是否启用预解码，默认值为0，即不启用预解码，如该值设为2，则播放当前页时会提前加载后面两张图片至缓存以提升性能。

+

fillMode

+

FillMode

+

Forwards

+

否

+

设置动画开始前和结束后的状态，可选值参见FillMode说明。

+

iterations

+

number

+

1

+

否

+

默认播放一次，设置为-1时表示无限次播放。

+
+ +- AnimationStatus枚举说明 + + + + + + + + + + + + + + + + + + + +

名称

+

描述

+

Initial

+

动画初始状态。

+

Running

+

动画处于播放状态。

+

Paused

+

动画处于暂停状态。

+

Stopped

+

动画处于停止状态。

+
+ + +- FillMode枚举值说明 + + + + + + + + + + + + + + + + + + + +

名称

+

描述

+

None

+

播放完成后恢复初始状态。

+

Forwards

+

播放完成后保持动画结束时的状态。

+

Backwards

+

在animation-delay所指定的一段时间内，在动画显示之前，应用开始属性值。

+

Both

+

向前和向后填充模式都被应用。

+
+ + +## 事件 + + + + + + + + + + + + + + + + + + + + + + +

名称

+

功能描述

+

onStart() => void

+

状态回调，动画开始播放时触发。

+

onPause() => void

+

状态回调，动画暂停播放时触发。

+

onRepeat() => void

+

状态回调，动画重新播放时触发。

+

onCancel() => void

+

状态回调，动画取消播放时触发。

+

onFinish() => void

+

状态回调，动画播放完成时触发。

+
+ +## 示例 + +``` +@Entry +@Component +struct ImageAnimatorExample { + @State state: AnimationStatus = AnimationStatus.Initial + @State reverse: boolean = false + @State iterations: number = 1 + + build() { + Column({ space:5 }) { + ImageAnimator() + .images([ + { + src: '/comment/bg1.jpg', + duration: 500, + width: 325, + height: 200, + top: 0, + left: 0 + }, + { + src: '/comment/bg2.jpg', + duration: 500, + width: 325, + height: 200, + top: 0, + left: 0 + }, + { + src: '/comment/bg3.jpg', + duration: 500, + width: 325, + height: 200, + top: 0, + left: 0 + }, + { + src: '/comment/bg4.jpg', + duration: 500, + width: 325, + height: 200, + top: 0, + left: 0 + } + ]) + .state(this.state).reverse(this.reverse).fixedSize(false).preDecode(2) + .fillMode(FillMode.None).iterations(this.iterations).width(325).height(210) + .margin({top:100}) + .onStart(() => { // 当帧动画开始播放后触发 + console.info('Start') + }) + .onPause(() => { + console.info('Pause') + }) + .onRepeat(() => { + console.info('Repeat') + }) + .onCancel(() => { + console.info('Cancel') + }) + .onFinish(() => { // 当帧动画播放完成后触发 + console.info('Finish') + }) + Row() { + Button('start').width(100).padding(5).onClick(() => { + this.state = AnimationStatus.Running + }) + Button('pause').width(100).padding(5).onClick(() => { + this.state = AnimationStatus.Paused + }) + Button('stop').width(100).padding(5).onClick(() => { + this.state = AnimationStatus.Stopped + }) + } + Row() { + Button('reverse').width(100).padding(5).onClick(() => { + this.reverse = !this.reverse + }) + Button('once').width(100).padding(5).onClick(() => { + this.iterations = 1 + }) + Button('iteration').width(100).padding(5).onClick(() => { + this.iterations = -1 + }) + } + }.width('100%').height('100%').backgroundColor(0xF1F3F5) + } +} +``` + +![](figures/ImageAnimator.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-progress.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-progress.md new file mode 100644 index 0000000000000000000000000000000000000000..efde2b6fc9dfffb4221555839a26d4c6ab8ee459 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-progress.md @@ -0,0 +1,167 @@ +# Progress + +进度条，用于显示内容加载或操作处理进度。 + +## 支持设备 + + + + + + + + + + + + + + + + +

手机

+

平板

+

车机

+

智慧屏

+

智能穿戴

+

支持

+

支持

+

支持

+

不支持

+

不支持

+
+ +## 子组件 + +无 + +## 接口说明 + +Progress\(value: \{value: number, total?: number, style?: ProgressStyle\}\) + +创建有明确进度的进度条。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

value

+

number

+

是

+

-

+

指定当前进度值。

+

total

+

number

+

否

+

100

+

指定进度总长。

+

style

+

ProgressStyle

+

否

+

Linear

+

指定进度条样式。

+
+ + +- ProgressStyle枚举说明 + + + + + + + + + + +

名称

+

描述

+

Linear

+

线性进度条样式。

+
+ + +## 属性 + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

value

+

number

+

-

+

设置当前进度值。

+

color

+

Color

+

-

+

设置进度条前景色。

+
+ +## 示例 + +``` +@Entry +@Component +struct ProgressExample { + build() { + Column({ space: 5 }) { + Text('Linear Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') + Progress({ value: 10, style: ProgressStyle.Linear }).width(200) + + Text('Linear Progress Color').fontSize(9).fontColor(0xCCCCCC).width('90%') + Progress({ value: 20, total: 150, style: ProgressStyle.Linear }).color(Color.Red).value(50).width(200) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/progress-15.png) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-qrcode.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-qrcode.md new file mode 100644 index 0000000000000000000000000000000000000000..9a387f1d6fce3941cf9ba80fede01236d65b0079 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-qrcode.md @@ -0,0 +1,97 @@ +# QRCode + +显示二维码信息。 + +## 权限类别 + +无 + +## 子组件 + +无 + +## 接口 + +QRCode\(value: string\) + +- 参数 + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

value

+

string

+

是

+

-

+

二维码内容字符串。

+
+ + +## 属性 + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

color

+

Color

+

Black

+

设置二维码颜色。

+
+ +## 事件 + +通用事件仅支持点击事件。 + +## 示例 + +``` +@Entry +@Component +struct QRCodeExample { + private value: string = 'hello world' + + build() { + Column({ space: 5 }) { + Text('normal').fontSize(9).width('90%').fontColor(0xCCCCCC) + QRCode(this.value).width(200).height(200) + + Text('color').fontSize(9).width('90%').fontColor(0xCCCCCC) + QRCode(this.value).color(0xF7CE00).width(200).height(200) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/qrcode.png) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-rating.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-rating.md new file mode 100644 index 0000000000000000000000000000000000000000..c1945d5168e597d28d24e381fc6c0096525deb82 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-rating.md @@ -0,0 +1,144 @@ +# Rating + +评分条组件。 + +## 子组件 + +无 + +## 接口说明 + +Rating\(options?: \{ rating: number, indicator?: boolean \}\) + +- 参数 + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

rating

+

number

+

是

+

0

+

设置并接收评分值。

+

indicator

+

boolean

+

否

+

false

+

仅作为指示器使用，不可操作。

+
+ + +## 属性 + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

stars

+

number

+

5

+

设置评星总数。

+

stepSize

+

number

+

0.5

+

操作评级的步长。

+

starStyle

+

{

+

backgroundUri: string,

+

foregroundUri: string,

+

secondaryUri?: string

+

}

+

-

+

backgroundSrc：未选中的星级的图片链接，可由用户自定义或使用系统默认图片，仅支持本地。

+

foregroundSrc：选中的星级的图片路径，可由用户自定义或使用系统默认图片，仅支持本地。

+

secondarySrc：部分选中的星级的图片路径，可由用户自定义或使用系统默认图片，仅支持本地。

+
+ +## 事件 + + + + + + + + + + +

名称

+

功能描述

+

onChange(callback:(value: number) => void)

+

操作评分条的评星发生改变时触发该回调。

+
+ +## 示例 + +``` +@Entry +@Component +struct RatingExample { + @State rating: number = 1 + @State indicator: boolean = false + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { + Text('current score is ' + this.rating).fontSize(20) + Rating({ rating: this.rating, indicator: this.indicator }) + .stars(5) + .stepSize(0.5) + .onChange((value: number) => { + this.rating = value + }) + }.width(350).height(200).padding(35) + } +} +``` + +![](figures/Rating.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-slider.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-slider.md new file mode 100644 index 0000000000000000000000000000000000000000..7565735c249d870abfebeb474a5206d4e5c5c200 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-slider.md @@ -0,0 +1,280 @@ +# Slider + +滑动条组件，用来快速调节设置值，如音量、亮度等。 + +## 子组件 + +无 + +## 接口 + +Slider\(value:\{value?: number, min?: number, max?: number, step?: number, style?: SliderStyle\}\) + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

value

+

number

+

否

+

0

+

当前进度值。

+

min

+

number

+

否

+

0

+

设置最小值。

+

max

+

number

+

否

+

100

+

设置最大值

+

step

+

number

+

否

+

1

+

设置Slider滑动跳动值，当设置相应的step时，Slider为间歇滑动。

+

style

+

SliderStyle

+

否

+

Outset

+

设置Slider的滑块样式。

+
+ +- SliderStyle枚举说明 + + + + + + + + + + + + + +

名称

+

描述

+

OutSet

+

滑块在滑轨上。

+

InSet

+

滑块在滑轨内。

+
+ + +## 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

blockColor

+

Color

+

-

+

设置滑块的颜色。

+

trackColor

+

Color

+

-

+

设置滑轨的背景颜色。

+

selectedColor

+

Color

+

-

+

设置滑轨的已滑动颜色。

+

showSteps

+

boolean

+

false

+

设置当前是否显示步长刻度值。

+

showTips

+

boolean

+

false

+

设置滑动时是否显示气泡提示百分比。

+
+ +## 事件 + +通用事件仅支持：OnAppear，OnDisAppear。 + + + + + + + + + + +

名称

+

功能描述

+

onChange(callback: (value: number, mode: SliderChangeMode) => void）

+

Slider滑动时触发事件回调。

+

value：当前进度值。

+

mode：拖动状态。

+
+ +- SliderChangeMode枚举说明 + + + + + + + + + + + + + + + + +

名称

+

描述

+

Begin

+

用户开始拖动滑块。

+

Moving

+

用户拖动滑块中。

+

End

+

用户结束拖动滑块。

+
+ + +## 示例 + +``` +@Entry +@Component +struct SliderExample { + @State outSetValue: number = 40 + @State inSetValue: number = 40 + + build() { + Column({ space: 5 }) { + Text('slider out set').fontSize(9).fontColor(0xCCCCCC).width('90%') + Row() { + Slider({ + value: this.outSetValue, + min: 0, + max: 100, + step: 1, + style: SliderStyle.OutSet + }) + .blockColor(Color.Blue) + .trackColor(Color.Gray) + .selectedColor(Color.Blue) + .showSteps(true) + .showTips(true) + .onChange((value: number, mode: SliderChangeMode) => { + this.outSetValue = value + console.info('value:' + value + 'mode:' + mode.toString()) + }) + Text(this.outSetValue.toFixed(0)).fontSize(16) + } + .padding({ top: 50 }) + .width('80%') + + Text('slider in set').fontSize(9).fontColor(0xCCCCCC).width('90%') + Row() { + Slider({ + value: this.inSetValue, + min: 0, + max: 100, + step: 1, + style: SliderStyle.InSet + }) + .blockColor(0xCCCCCC) + .trackColor(Color.Black) + .selectedColor(0xCCCCCC) + .showSteps(false) + .showTips(false) + .onChange((value: number, mode: SliderChangeMode) => { + this.inSetValue = value + console.info('value:' + value + 'mode:' + mode.toString()) + }) + Text(this.inSetValue.toFixed(0)).fontSize(16) + } + .width('80%') + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/sider.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-span.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-span.md new file mode 100644 index 0000000000000000000000000000000000000000..37f9f9b5acbdc86f762fca41c4defe440c3cd3a7 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-span.md @@ -0,0 +1,132 @@ +# Span + +文本段落，只能作为Text子组件，呈现一段文本信息。 + +## 权限列表 + +无 + +## 子组件 + +无 + +## 接口 + +Span\(content: string\) + +- 参数 + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

content

+

string

+

是

+

-

+

文本内容。

+
+ + +## 属性 + +通用属性方法仅支持通用文本样式。 + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

decoration

+

{

+

type: TextDecorationType,

+

color?: Color

+

}

+

{

+

type: TextDecorationType.None

+

}

+

设置文本装饰线样式及其颜色。

+

textCase

+

TextCase

+

Normal

+

设置文本大小写。

+
+ +## 事件 + +通用事件仅支持点击事件。 + +## 示例 + +``` +@Entry +@Component +struct SpanExample { + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { + Text('Basic Usage').fontSize(9).fontColor(0xCCCCCC) + Text() { + Span('This is the Span component').fontSize(12).textCase(TextCase.Normal) + .decoration({ type: TextDecorationType.None, color: Color.Red }) + } + + Text('Text Decoration').fontSize(9).fontColor(0xCCCCCC) + Text() { + Span('I am Underline-span').decoration({ type: TextDecorationType.Underline, color: Color.Red }).fontSize(12) + } + Text() { + Span('I am LineThrough-span').decoration({ type: TextDecorationType.LineThrough, color: Color.Red }).fontSize(12) + } + Text() { + Span('I am Overline-span').decoration({ type: TextDecorationType.Overline, color: Color.Red }).fontSize(12) + } + + Text('Text Case').fontSize(9).fontColor(0xCCCCCC) + Text() { + Span('I am Lower-span').textCase(TextCase.LowerCase).fontSize(12) + .decoration({ type: TextDecorationType.None, color: Color.Red }) + } + Text() { + Span('I am Upper-span').textCase(TextCase.UpperCase).fontSize(12) + .decoration({ type: TextDecorationType.None, color: Color.Red }) + } + }.width('100%').height(250).padding({ left: 35, right: 35, top: 35 }) + } +} +``` + +![](figures/Span.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-text.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-text.md new file mode 100644 index 0000000000000000000000000000000000000000..3740bbec0f17203a9ec6da90513200492750c637 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components-text.md @@ -0,0 +1,333 @@ +# Text + +文本，用于呈现一段信息。 + +## 权限列表 + +无 + +## 子组件 + +可以包含[Span](ts-basic-components-span.md)子组件。 + +## 接口 + +Text\(content?: string\) + +- 参数 + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

content

+

string

+

否

+

''

+

文本内容，包含子组件Span时不生效，显示Span内容。

+
+ + +## 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

textAlign

+

TextAlign

+

Start

+

设置多行文本的文本对齐方式。

+

textOverflow

+

{overflow: TextOverflow}

+

{overflow: TextOverflow.Clip}

+

设置文本超长时的显示方式。

+

maxLines

+

number

+

Infinity

+

设置文本的最大行数。

+

lineHeight

+

Length

+

-

+

设置文本的文本行高，设置值不大于0时，不限制文本行高，自适应字体大小，Length为number类型时单位为fp。

+

decoration

+

{

+

type: TextDecorationType,

+

color?: Color

+

}

+

{

+

type: TextDecorationType.None,

+

color：Color.Black

+

}

+

设置文本装饰线样式及其颜色。

+

baselineOffset

+

Length

+

-

+

设置文本基线的偏移量。

+

textCase

+

TextCase

+

Normal

+

设置文本大小写。

+
+ +- TextAlign枚举说明 + + + + + + + + + + + + + + + + +

名称

+

描述

+

Center

+

文本居中对齐。

+

Start

+

根据文字书写相同的方向对齐。

+

End

+

根据文字书写相反的方向对齐。

+
+ + +- TextOverflow枚举说明 + + + + + + + + + + + + + + + + +

名称

+

描述

+

Clip

+

文本超长时进行裁剪显示。

+

Ellipsis

+

文本超长时显示不下的文本用省略号代替。

+

None

+

文本超长时不进行裁剪。

+
+ + +- TextDecorationType枚举说明 + + + + + + + + + + + + + + + + + + + +

名称

+

描述

+

Underline

+

文字下划线修饰。

+

LineThrough

+

穿过文本的修饰线。

+

Overline

+

文字上划线修饰。

+

None

+

不使用文本装饰线。

+
+ + +- TextCase枚举说明 + + + + + + + + + + + + + + + + +

名称

+

描述

+

Normal

+

保持文本原有大小写。

+

LowerCase

+

文本采用全小写。

+

UpperCase

+

文本采用全大写。

+
+ + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>不支持Text内同时存在文本内容和Span子组件。（如果同时存在，只显示Span内的内容\)。 + +## 示例 + +``` +@Entry +@Component +struct TextExample1 { + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { + Text('lineHeight').fontSize(9).fontColor(0xCCCCCC) + Text('This is the text with the line height set This is the text with the line height set This is the text with the line height set.') + .lineHeight(25).fontSize(12).border({ width: 1 }).padding(10) + + Text('TextOverflow').fontSize(9).fontColor(0xCCCCCC) + Text('This is the setting of textOverflow to none text content This is the setting of textOverflow to none text content.') + .textOverflow({ overflow: TextOverflow.None }) + .fontSize(12).border({ width: 1 }).padding(10) + Text('This is the setting of textOverflow to Clip text content This is the setting of textOverflow to Clip text content.') + .textOverflow({ overflow: TextOverflow.Clip }) + .maxLines(1).fontSize(12).border({ width: 1 }).padding(10) + Text('This is set textOverflow to Ellipsis text content This is set textOverflow to Ellipsis text content.') + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .maxLines(1).fontSize(12).border({ width: 1 }).padding(10) + + Text('decoration').fontSize(9).fontColor(0xCCCCCC) + Text('This is the text content with the decoration set to Underline and the color set to Red.') + .decoration({ type: TextDecorationType.Underline, color: Color.Red }) + .fontSize(12).border({ width: 1 }).padding(10) + Text('This is the text content with the decoration set to LineThrough and the color set to Red.') + .decoration({ type: TextDecorationType.LineThrough, color: Color.Red }) + .fontSize(12).border({ width: 1 }).padding(10) + Text('This is the text content with the decoration set to Overline and the color set to Red.') + .decoration({ type: TextDecorationType.Overline, color: Color.Red }) + .fontSize(12).border({ width: 1 }).padding(10) + }.height(600).width(350).padding({ left: 35, right: 35, top: 35 }) + } +} +``` + +![](figures/Text1.gif) + +``` +@Entry +@Component +struct TextExample2 { + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { + Text('textCase').fontSize(9).fontColor(0xCCCCCC) + Text('This is the text content with textCase set to Normal.') + .textCase(TextCase.Normal) + .fontSize(12).border({ width: 1 }).padding(10).width('100%') + Text('This is the text content with textCase set to LowerCase.') + .textCase(TextCase.LowerCase) + .fontSize(12).border({ width: 1 }).padding(10).width('100%') + Text('This is the text content with textCase set to UpperCase.') + .textCase(TextCase.UpperCase) + .fontSize(12).border({ width: 1 }).padding(10) + + Text('textAlign').fontSize(9).fontColor(0xCCCCCC) + Text('This is the text content with textAlign set to Center.') + .textAlign(TextAlign.Center) + .fontSize(12).border({ width: 1 }).padding(10).width('100%') + Text('This is the text content with textAlign set to Start.') + .textAlign(TextAlign.Start) + .fontSize(12).border({ width: 1 }).padding(10).width('100%') + Text('This is the text content with textAlign set to End.') + .textAlign(TextAlign.End) + .fontSize(12).border({ width: 1 }).padding(10).width('100%') + + Text('baselineOffset').fontSize(9).fontColor(0xCCCCCC) + Text('This is the text content with baselineOffset set to 10.') + .baselineOffset(10).fontSize(12).border({ width: 1 }).padding(10).width('100%') + Text('This is the text content with baselineOffset set to 30.') + .baselineOffset(30).fontSize(12).border({ width: 1 }).padding(10).width('100%') + Text('This is the text content with baselineOffset set to -10.') + .baselineOffset(-10).fontSize(12).border({ width: 1 }).padding(10).width('100%') + }.height(700).width(350).padding({ left: 35, right: 35, top: 35 }) + } +} +``` + +![](figures/Text2.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components.md new file mode 100644 index 0000000000000000000000000000000000000000..07630c3249e75d41fcac76b8ea174a42f7b5706a --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-components.md @@ -0,0 +1,27 @@ +# 基础组件 + +- **[Blank](ts-basic-components-blank.md)** + +- **[Button](ts-basic-components-button.md)** + +- **[DataPanel](ts-basic-components-datapanel.md)** + +- **[Divider](ts-basic-components-divider.md)** + +- **[Image](ts-basic-components-image.md)** + +- **[ImageAnimator](ts-basic-components-imageanimator.md)** + +- **[Progress](ts-basic-components-progress.md)** + +- **[QRCode](ts-basic-components-qrcode.md)** + +- **[Rating](ts-basic-components-rating.md)** + +- **[Span](ts-basic-components-span.md)** + +- **[Slider](ts-basic-components-slider.md)** + +- **[Text](ts-basic-components-text.md)** + + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-gestures-longpressgesture.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-gestures-longpressgesture.md new file mode 100644 index 0000000000000000000000000000000000000000..17348946ded3ae8477ebcde4d56a619d68f612f5 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-gestures-longpressgesture.md @@ -0,0 +1,115 @@ +# LongPressGesture + +## 接口 + +LongPressGesture\(options?: \{ fingers?: number, repeat?: boolean, duration?: number \}\) + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名称

+

参数类型

+

必填

+

默认值

+

参数描述

+

fingers

+

number

+

否

+

1

+

触发长按的最少手指数，最小为1指， 最大取值为10指。

+

repeat

+

boolean

+

否

+

false

+

是否连续触发事件回调。

+

duration

+

number

+

否

+

500

+

最小触发长按的时间，单位为毫秒（ms）。

+
+ + +## 事件 + + + + + + + + + + + + + + + + +

名称

+

功能描述

+

onAction((event?: GestureEvent) => void)

+

LongPress手势识别成功回调。

+

onActionEnd((event?: GestureEvent) => void)

+

LongPress手势识别成功，手指抬起后触发回调。

+

onActionCancel(event: () => void)

+

LongPress手势识别成功，接收到触摸取消事件触发回调。

+
+ +## 示例 + +``` +@Entry +@Component +struct LongPressGestureExample { + @State count: number = 0 + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { + Text('LongPress onAction:' + this.count) + } + .height(200).width(300).padding(60).border({ width:1 }).margin(30) + .gesture( + LongPressGesture({ repeat: true }) + //长按动作存在会连续触发 + .onAction((event: GestureEvent) => { + if (event.repeat) { this.count++ } + }) + //长按动作一结束触发 + .onActionEnd(() => { + this.count = 0 + }) + ) + } +} +``` + +![](figures/LongPressGesture.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-gestures-pangesture.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-gestures-pangesture.md new file mode 100644 index 0000000000000000000000000000000000000000..3570dc7a224ca4514dd2e4e692b3b9a409c6d430 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-gestures-pangesture.md @@ -0,0 +1,215 @@ +# PanGesture + +## 接口 + +PanGesture\(options?: \{ fingers?: number, direction?: PanDirection, distance?: number \} | [PanGestureOption](#section14214195212149)\) + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名称

+

参数类型

+

必填

+

默认值

+

参数描述

+

fingers

+

number

+

否

+

1

+

触发滑动的最少手指数，最小为1指， 最大取值为10指。

+

direction

+

PanDirection

+

否

+

All

+

设置滑动方向，此枚举值支持逻辑与(&)和逻辑或（|）运算。

+

distance

+

number

+

否

+

5.0

+

最小滑动识别距离，单位为vp。

+
+ +- PanDirection枚举说明 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

描述

+

All

+

所有方向可滑动。

+

Horizontal

+

水平方向可滑动。

+

Vertical

+

竖直方向可滑动。

+

Left

+

向左滑动。

+

Right

+

向右滑动。

+

Up

+

向上滑动。

+

Down

+

向下滑动。

+

None

+

任何方向都不可滑动。

+
+ + +### PanGestureOption + +通过PanGestureOption对象接口可以动态修改滑动手势识别器的属性，从而避免通过状态变量修改属性（状态变量修改会导致UI刷新）。 + +PanGestureOption\(options?: \{ fingers?: number, direction?: PanDirection, distance?: number \}\) + +- 参数 + + 同[PanGesture](#li118312377710)参数说明。 + + +- 接口 + + + + + + + + + + + + + + + + +

名称

+

功能描述

+

setDirection(value: PanDirection)

+

设置direction属性。

+

setDistance(value: number)

+

设置distance属性。

+

setFingers(value: number)

+

设置fingers属性。

+
+ + +## 事件 + + + + + + + + + + + + + + + + + + + +

名称

+

功能描述

+

onActionStart((event?: GestureEvent) => void)

+

Pan手势识别成功回调。

+

onActionUpdate((event?: GestureEvent) => void)

+

Pan手势移动过程中回调。

+

onActionEnd((event?: GestureEvent) => void)

+

Pan手势识别成功，手指抬起后触发回调。

+

onActionCancel(event: () => void)

+

Pan手势识别成功，接收到触摸取消事件触发回调。

+
+ +## 示例 + +``` +@Entry +@Component +struct PanGestureExample { + @State offsetX: number = 0 + @State offsetY: number = 0 + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { + Text('PanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY) + } + .height(100).width(200).padding(20).border({ width: 1 }).margin(80) + .translate({ x: this.offsetX, y: this.offsetY, z: 5 }) + .gesture( + PanGesture({}) + .onActionStart((event: GestureEvent) => { + console.info('Pan start') + }) + .onActionUpdate((event: GestureEvent) => { + this.offsetX = event.offsetX + this.offsetY = event.offsetY + }) + .onActionEnd(() => { + console.info('Pan end') + }) + ) + } +} +``` + +![](figures/PanGesture.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-gestures-pinchgesture.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-gestures-pinchgesture.md new file mode 100644 index 0000000000000000000000000000000000000000..a12f5f7d4a747aeca5048d703006c51de47d1f29 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-gestures-pinchgesture.md @@ -0,0 +1,111 @@ +# PinchGesture + +## 接口 + +PinchGesture\(options?: \{ fingers?: number, distance?: number \}\) + +- 参数 + + + + + + + + + + + + + + + + + + + + + + +

参数名称

+

参数类型

+

必填

+

默认值

+

参数描述

+

fingers

+

number

+

否

+

2

+

触发捏合的最少手指数, 最小为2指，最大为5指。

+

distance

+

number

+

否

+

3.0

+

最小识别距离，单位为vp。

+
+ + +## 事件 + + + + + + + + + + + + + + + + + + + +

名称

+

功能描述

+

onActionStart((event?: GestureEvent) => void)

+

Pinch手势识别成功回调。

+

onActionUpdate((event?: GestureEvent) => void)

+

Pinch手势移动过程中回调。

+

onActionEnd((event?: GestureEvent) => void)

+

Pinch手势识别成功，手指抬起后触发回调。

+

onActionCancel(event: () => void)

+

Pinch手势识别成功，接收到触摸取消事件触发回调。

+
+ +## 示例 + +``` +@Entry +@Component +struct PinchGestureExample { + @State scale: number = 1 + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { + Text('PinchGesture scale:' + this.scale) + } + .height(100).width(200).padding(20).border({ width: 1 }).margin(80) + .scale({ x: this.scale, y: this.scale, z: this.scale }) + .gesture( + PinchGesture() + .onActionStart((event: GestureEvent) => { + console.info('Pinch start') + }) + .onActionUpdate((event: GestureEvent) => { + this.scale = event.scale + }) + .onActionEnd(() => { + console.info('Pinch end') + }) + ) + } +} +``` + +![](figures/PinchGesture.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-gestures-rotationgesture.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-gestures-rotationgesture.md new file mode 100644 index 0000000000000000000000000000000000000000..dc7939977e0948894e77152277e2fe9520729631 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-gestures-rotationgesture.md @@ -0,0 +1,111 @@ +# RotationGesture + +## 接口 + +RotationGesture\(options?: \{ fingers?: number, angle?: number \}\) + +- 参数 + + + + + + + + + + + + + + + + + + + + + + +

参数名称

+

参数类型

+

必填

+

默认值

+

参数描述

+

fingers

+

number

+

否

+

2

+

触发旋转的最少手指数, 最小为2指，最大为5指。

+

angle

+

number

+

否

+

1.0

+

触发旋转手势的最小改变度数，单位为度数。

+
+ + +## 事件 + + + + + + + + + + + + + + + + + + + +

名称

+

功能描述

+

onActionStart((event?: GestureEvent) => void)

+

Rotation手势识别成功回调。

+

onActionUpdate((event?: GestureEvent) => void)

+

Rotation手势移动过程中回调。

+

onActionEnd((event?: GestureEvent) => void)

+

Rotation手势识别成功，手指抬起后触发回调。

+

onActionCancel(event: () => void)

+

Rotation手势识别成功，接收到触摸取消事件触发回调。

+
+ +## 示例 + +``` +@Entry +@Component +struct RotationGestureExample { + @State angle: number = 0 + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { + Text('RotationGesture angle:' + this.angle) + } + .height(100).width(200).padding(20).border({ width:1 }) + .margin(80).rotate({ x:1, y:2, z:3, angle: this.angle }) + .gesture( + RotationGesture() + .onActionStart((event: GestureEvent) => { + console.log('Rotation start') + }) + .onActionUpdate((event: GestureEvent) => { + this.angle = event.angle + }) + .onActionEnd(() => { + console.log('Rotation end') + }) + ) + } +} +``` + +![](figures/RotationGesture.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-gestures-tapgesture.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-gestures-tapgesture.md new file mode 100644 index 0000000000000000000000000000000000000000..3fd5a5e1ec8fc75e8dc2d5ee6d6aac40bc2abc69 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-gestures-tapgesture.md @@ -0,0 +1,95 @@ +# TapGesture + +## 接口 + +TapGesture\(options?: \{ count?: number, fingers?: number \}\) + +- 参数 + + + + + + + + + + + + + + + + + + + + + + +

参数名称

+

参数类型

+

必填

+

默认值

+

参数描述

+

count

+

number

+

否

+

1

+

识别的连续点击次数。如果设置小于1，会被转化为默认值。

+
说明：

如配置多击，上一次抬起和下一次按下的超时时间为300毫秒（ms）。

+
+

fingers

+

number

+

否

+

1

+

触发点击的最少手指数，最小为1指， 最大为10指。

+
说明：

1. 当配置多指时，第一根手指按下后300毫秒（ms）内未有足够的手指数按下，手势识别失败。

+

2. 实际点击手指数超过配置值，手势识别失败。

+
+
+ + +## 事件 + + + + + + + + + + +

名称

+

功能描述

+

onAction((event?: GestureEvent) => void)

+

Tap手势识别成功回调。

+
+ +## 示例 + +``` +@Entry +@Component +struct TapGestureExample { + @State value: string = '' + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { + Text('Click twice') + Text(this.value) + } + .height(200).width(300).padding(60).border({ width: 1 }).margin(30) + .gesture( + TapGesture({ count: 2 }) + .onAction(() => { + this.value = 'TapGesture onAction' + }) + ) + } +} +``` + +![](figures/TapGesture.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-gestures.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-gestures.md new file mode 100644 index 0000000000000000000000000000000000000000..b3431ee4b61ce7d8425d48ba6d2b60310f02b4d7 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-basic-gestures.md @@ -0,0 +1,13 @@ +# 基础手势 + +- **[TapGesture](ts-basic-gestures-tapgesture.md)** + +- **[LongPressGesture](ts-basic-gestures-longpressgesture.md)** + +- **[PanGesture](ts-basic-gestures-pangesture.md)** + +- **[PinchGesture](ts-basic-gestures-pinchgesture.md)** + +- **[RotationGesture](ts-basic-gestures-rotationgesture.md)** + + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-child-component-configuration.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-child-component-configuration.md new file mode 100644 index 0000000000000000000000000000000000000000..22fd3f45d2aa3eac98fe0abf0fb1841dffdef84f --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-child-component-configuration.md @@ -0,0 +1,47 @@ +# 子组件配置 + +对于支持子组件配置的组件，例如容器组件，在“**\{ ... \}**”里为组件添加子组件的UI描述。**Column**、**Row**、**Stack**、**Button**、**Grid**和**List**组件都是容器组件。 + +以下是简单的**Column**示例： + +``` +Column() { + Text('Hello') + .fontSize(100) + Divider() + Text(this.myText) + .fontSize(100) + .fontColor(Color.Red) +} +``` + +可以嵌套多个子组件： + +``` +Column() { + Column() { + Button() { + Text('+ 1') + }.type(ButtonType.Capsule) + .onClick(() => console.log ('+1 clicked!')) + Image('1.jpg') + } + Divider() + Column() { + Button() { + Text('+ 2') + }.type(ButtonType.Capsule) + .onClick(() => console.log ('+2 clicked!')) + Image('2.jpg') + } + Divider() + Column() { + Button() { + Text('+ 3') + }.type(ButtonType.Capsule) + .onClick(() => console.log('+3 clicked!')) + Image('3.jpg') + } +}.alignItems(HorizontalAlign.Center) // center align components inside Column +``` + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-combined-gestures.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-combined-gestures.md new file mode 100644 index 0000000000000000000000000000000000000000..56172a550ec27fe8e5717b42fbe82cd9ede3f544 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-combined-gestures.md @@ -0,0 +1,142 @@ +# 组合手势 + +## 接口 + +GestureGroup\(mode: GestureMode, ...gesture: GestureType\[\]\) + +- 参数 + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

mode

+

GestureMode

+

是

+

-

+

设置组合手势识别模式。

+

gesture

+

TapGesture

+

| LongPressGesture

+

| PanGesture

+

| PinchGesture

+

| RotationGesture

+

是

+

-

+

可变长参数，1个或者多个基础手势类型，这些手势会被组合识别。

+
+ +- GestureMode枚举说明 + + + + + + + + + + + + + + + + +

名称

+

描述

+

Sequence

+

顺序识别，按照手势的注册顺序识别手势，直到所有手势识别成功。当有一个手势识别失败时，所有手势识别失败。

+

Parallel

+

并发识别，注册的手势同时识别，直到所有手势识别结束，手势识别互相不影响。

+

Exclusive

+

互斥识别，注册的手势同时识别，若有一个手势识别成功，则结束手势识别。

+
+ + +## 事件 + + + + + + + + + + +

名称

+

功能描述

+

onCancel(event: () => void)

+

顺序组合手势（GestureMode.Sequence）取消后触发回调。

+
+ +## 示例 + +``` +@Entry +@Component +struct GestureGroupExample { + @State count: number = 0 + @State offsetX: number = 0 + @State offsetY: number = 0 + @State borderStyle: BorderStyle = BorderStyle.Solid + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { + Text('sequence gesture\n' + 'LongPress onAction:' + this.count + '\nPanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY) + }.translate({ x: this.offsetX, y: this.offsetY, z: 5 }) + .height(100).width(200).padding(10).margin(80).border({ width: 1, style: this.borderStyle }) + .gesture( + GestureGroup(GestureMode.Sequence, + LongPressGesture({ repeat: true }) + .onAction((event: GestureEvent) => { + if (event.repeat) {this.count++} + console.log('LongPress onAction') + }) + .onActionEnd(() => { + console.log('LongPress end') + }), + PanGesture({}) + .onActionStart(() => { + this.borderStyle = BorderStyle.Dashed + console.log('pan start') + }) + .onActionUpdate((event: GestureEvent) => { + this.offsetX = event.offsetX + this.offsetY = event.offsetY + console.log('pan update') + }) + ) + .onCancel(() => { + console.log('sequence gesture canceled') + }) + ) + } +} +``` + +![](figures/GestureGroup.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-based-builder.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-based-builder.md new file mode 100644 index 0000000000000000000000000000000000000000..983bbd0e43ae332702b0892bad91df7ee88ba416 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-based-builder.md @@ -0,0 +1,44 @@ +# @Builder + +@Builder装饰器定义了一个如何渲染自定义组件的方法。此装饰器提供了一个修饰方法，其目的是和[build函数](ts-function-build.md)一致。@Builder装饰器装饰的方法的语法规范与build函数也保持一致。 + +通过@Builder装饰器可以在一个自定义组件内快速生成多个布局内容。 + +``` +@Entry +@Component +struct CompA { + size : number = 100; + + @Builder SquareText(label: string) { + Text(label) + .width(1 * this.size) + .height(1 * this.size) + } + + @Builder RowOfSquareTexts(label1: string, label2: string) { + Row() { + this.SquareText(label1) + this.SquareText(label2) + } + .width(2 * this.size) + .height(1 * this.size) + } + + build() { + Column() { + Row() { + this.SquareText("A") + this.SquareText("B") + // or as long as tsc is used + } + .width(2 * this.size) + .height(1 * this.size) + this.RowOfSquareTexts("C", "D") + } + .width(2 * this.size) + .height(2 * this.size) + } +} +``` + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-based-component.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-based-component.md new file mode 100644 index 0000000000000000000000000000000000000000..1c892277959ec243a2dad0dfc3b922c11c41e83a --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-based-component.md @@ -0,0 +1,88 @@ +# @Component + +**@Component**装饰的**struct**表示该结构体具有组件化能力，能够成为一个独立的组件，这种类型的组件也称为自定义组件。 + +该组件可以组合其他组件，它通过实现**build**方法来描述UI结构，其必须符合**Builder**的接口约束，该接口定义如下： + +``` +interface Builder { + build: () => void +} +``` + +用户定义的组件具有以下特点： + +- **可组合：**允许开发人员组合使用内置组件和其他组件，以及公共属性和方法； +- **可重用：**可以被其他组件重用，并作为不同的实例在不同的父组件或容器中使用； +- **有生命周期：**生命周期的回调方法可以在组件中配置，用于业务逻辑处理； +- **数据驱动更新：**可以由状态数据驱动，实现UI自动更新。 + +组件生命周期主要包括**aboutToAppear**和**aboutToDisappear**回调函数，有关规范，请参见“[组件生命周期回调函数](ts-custom-component-lifecycle-callbacks.md)”章节。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- 组件必须遵循上述**Builder**接口约束，其他组件在内部的**build**方法中以声明式方式进行组合，在组件的第一次创建和更新场景中都会调用**build**方法。 +>- 组件禁止自定义构造函数。 + +## 示例 + +如下代码定义了**MyComponent**组件**：** + +``` +@Component +struct MyComponent { + build() { + Column() { + Text('my component') + .fontColor(Color.Red) + }.alignItems(HorizontalAlign.Center) // center align Text inside Column + } +} +``` + +**MyComponent**的**build**方法会在初始渲染时执行，此外，当组件中的状态发生变化时，**build**方法将再次执行。 + +以下代码使用了**MyComponent**组件： + +``` +@Component +struct ParentComponent { + build() { + Column() { + MyComponent() + Text('we use component') + .fontSize(20) + } + } +} +``` + +可以多次嵌入**MyComponent**，并嵌入到不同的组件中进行重用： + +``` +@Component +struct ParentComponent { + build() { + Row() { + Column() { + MyComponent() + Text('first column') + .fontSize(20) + } + Column() { + MyComponent() + Text('second column') + .fontSize(20) + } + } + } + + private aboutToAppear() { + console.log('ParentComponent: Just created, about to become rendered first time.') + } + + private aboutToDisappear() { + console.log('ParentComponent: About to be removed from the UI.') + } +} +``` + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-based-customdialog.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-based-customdialog.md new file mode 100644 index 0000000000000000000000000000000000000000..7cefbc4f80f1b40cf3e8a713c316f40afc80e2ba --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-based-customdialog.md @@ -0,0 +1,49 @@ +# @CustomDialog + +**@CustomDialog**装饰器用于装饰自定义弹窗。 + +``` +// custom-dialog-demo.ets +@CustomDialog +struct DialogExample { + controller: CustomDialogController; + action: () => void; + + build() { + Row() { + Button ("Close CustomDialog") + .onClick(() => { + this.controller.close(); + this.action(); + }) + }.padding(20) + } +} + +@Entry +@Component +struct CustomDialogUser { + dialogController : CustomDialogController = new CustomDialogController({ + builder: DialogExample({action: this.onAccept}), + cancel: this.existApp, + autoCancel: true + }); + + onAccept() { + console.log("onAccept"); + } + existApp() { + console.log("Cancel dialog!"); + } + + build() { + Column() { + Button("Click to open Dialog") + .onClick(() => { + this.dialogController.open() + }) + } + } +} +``` + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-based-entry.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-based-entry.md new file mode 100644 index 0000000000000000000000000000000000000000..b84dd545b39605e2d3e9df53d018592d6243d5e1 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-based-entry.md @@ -0,0 +1,35 @@ +# @Entry + +用**@Entry**装饰的自定义组件用作页面的默认入口组件，加载页面时，将首先创建并呈现**@Entry**装饰的自定义组件。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>在单个源文件中，最多可以使用**@Entry**装饰一个自定义组件。 + +## 示例 + +**@Entry**的用法如下： + +``` +// Only MyComponent decorated by @Entry is rendered and displayed. "hello world" is displayed, but "goodbye" is not displayed. +@Entry +@Component +struct MyComponent { + build() { + Column() { + Text('hello world') + .fontColor(Color.Red) + } + } +} + +@Component +struct HideComponent { + build() { + Column() { + Text('goodbye') + .fontColor(Color.Blue) + } + } +} +``` + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-based-extend.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-based-extend.md new file mode 100644 index 0000000000000000000000000000000000000000..036813fb8444ea476ae62522ffbaaf0cef40d7a0 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-based-extend.md @@ -0,0 +1,28 @@ +# @Extend + +**@Extend**装饰器将新的属性函数添加到内置组件上，如**Text**、**Column**、**Button**等。通过**@Extend**装饰器可以快速定义并复用组件的自定义样式。 + +``` +@Extend(Text) function fancy(color: number) { + .fontColor(color) + .fontSize(24) + .fontStyle(FontStyle.Italic) +} + +@Entry +@Component +struct FancyUse { + build() { + Row({ space: 10 }) { + Text("Fancy") + .fancy(Color.Blue) + Text("Fancy") + .fancy(Color.Red) + } + } +} +``` + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>@Extend装饰器不能用在自定义组件struct定义框内。 + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-based-preview.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-based-preview.md new file mode 100644 index 0000000000000000000000000000000000000000..0588784d0d6635dcfbd5fdfddd22d55334941be6 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-based-preview.md @@ -0,0 +1,60 @@ +# @Preview + +用**@Preview**装饰的自定义组件可以在DevEco的PC预览上进行单组件预览，加载页面时，将创建并呈现**@Preview**装饰的自定义组件。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>在单个源文件中，最多可以使用**@Preview**装饰一个自定义组件。 + +## 示例 + +**@Preview**的用法如下： + +``` +// Display only Hello Component1 on the PC preview. The content under MyComponent is displayed on the real device. +@Entry +@Component +struct MyComponent { + build() { + Column() { + Row() { + Text('Hello World!') + .fontSize("50lpx") + .fontWeight(FontWeight.Bold) + } + Row() { + Component1() + } + Row() { + Component2() + } + } + } +} +@Preview +@Component +struct Component1 { + build() { + Column() { + Row() { + Text('Hello Component1') + .fontSize("50lpx") + .fontWeight(FontWeight.Bold) + } + } + } +} + +@Component +struct Component2 { + build() { + Column() { + Row() { + Text('Hello Component2') + .fontSize("50lpx") + .fontWeight(FontWeight.Bold) + } + } + } +} +``` + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-based.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-based.md new file mode 100644 index 0000000000000000000000000000000000000000..fec4b7a92e43a9840e697c2aeccd0e25374ad3df --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-based.md @@ -0,0 +1,15 @@ +# 组件化 + +- **[@Component](ts-component-based-component.md)** + +- **[@Entry](ts-component-based-entry.md)** + +- **[@Preview](ts-component-based-preview.md)** + +- **[@Builder](ts-component-based-builder.md)** + +- **[@Extend](ts-component-based-extend.md)** + +- **[@CustomDialog](ts-component-based-customdialog.md)** + + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-creation-re-initialization.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-creation-re-initialization.md new file mode 100644 index 0000000000000000000000000000000000000000..36a09e5b7418e00de905f62995682bed3f22ab1c --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-creation-re-initialization.md @@ -0,0 +1,90 @@ +# 组件创建和重新初始化示例 + +``` +@Entry +@Component +struct ParentComp { + @State isCountDown: boolean = true + build() { + Column() { + Text(this.isCountDown ? 'Count Down' : 'Stopwatch') + if (this.isCountDown) { + Image('countdown.png') + TimerComponent({counter: 10, changePerSec: -1, showInColor: Color.Red}) + } else { + Image('stopwatch.png') + TimerComponent({counter: 0, changePerSec: +1, showInColor: Color.Black }) + } + Button(this.isCountDown ? 'Swtich to Stopwatch' : 'Switch to Count Down') + .onClick(() => {this.isCountDown = !this.isCountDown}) + } + } +} + +// Manage and display a count down / stop watch timer +@Component +struct TimerComponent { + @State counter: number = 0 + private changePerSec: number = -1 + private showInColor: Color = Color.Black + private timerId : number = -1 + + build() { + Text(`${this.counter}sec`) + .fontColor(this.showInColor) + } + + aboutToAppear() { + this.timerId = setInterval(() => {this.counter += this.changePerSec}, 1000) + } + + aboutToDisappear() { + if (this.timerId > 0) { + clearTimeout(this.timerId) + this.timerId = -1 + } + } +} +``` + +## 初始创建和渲染 + +1. 创建父组件**ParentComp**； +2. 本地初始化**ParentComp**的状态变量**isCountDown**； +3. 执行**ParentComp**的**build**函数； +4. 创建**Column**内置组件； + 1. 创建**Text**内置组件，设置其文本展示内容，并将**Text**组件实例添加到**Column**中； + 2. 判断if条件，创建**true**分支上的组件； + 1. 创建**Image**内置组件，并设置其图片源地址； + 2. 使用给定的构造函数创建**TimerComponent**； + 1. 创建**TimerComponent**对象； + 2. 本地初始化成员变量初始值； + 3. 使用**TimerComponent**构造函数提供的参数更新成员变量的值； + 4. 执行**TimerComponent**的**aboutToAppear**函数； + 5. 执行**TimerComponent**的**build**函数，创建相应的UI描述结构； + + 3. 创建**Button**内置组件，设置相应的内容。 + + +## 状态更新 + +用户单击按钮时： + +1. **ParentComp**的**isCountDown**状态变量的值更改为false； +2. 执行**ParentComp**的**build**函数； +3. **Column**内置组件会被框架重用并执行重新初始化； +4. **Column**的子组件会重用内存中的对象，但会进行重新初始化； + 1. **Text**内置组件会被重用，但使用新的文本内容进行重新初始化； + 2. 判断if条件，使用false分支上的组件； + 1. 原来true分支上的组件不在使用，这些组件会进行销毁； + 1. 创建的**Image**内置组件实例进行销毁； + 2. **TimerComponent**组件实例进行销毁，**aboutToDisappear**函数被调用； + + 2. 创建false分支上的组件； + 1. 创建**Image**内置组件，并设置其图片源地址； + 2. 使用给定的构造函数重新创建**TimerComponent**； + 3. 新创建的**TimerComponent**进行初始化，并调用**aboutToAppear**函数和**build**函数。 + + 3. **Button**内置组件会被重用，但使用新的图片源地址。 + + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-states-link.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-states-link.md new file mode 100644 index 0000000000000000000000000000000000000000..d4b122ad24753cc5735883a7b73b6e22599bb7a6 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-states-link.md @@ -0,0 +1,125 @@ +# @Link + +**@Link**装饰的变量可以和父组件的**@State**变量建立双向数据绑定： + +- **支持多种类型：@Link**变量的值与**@State**变量的类型相同，即class、number、string、boolean或这些类型的数组； +- **私有：**仅在组件内访问； +- **单个数据源：**初始化**@Link**变量的父组件的变量必须是**@State**变量； +- **双向通信：**子组件对**@Link**变量的更改将同步修改父组件的**@State**变量； +- **创建自定义组件时需要将变量的引用传递给@Link变量：**在创建组件的新实例时，必须使用命名参数初始化所有**@Link**变量。**@Link**变量可以使用**@State**变量或**@Link**变量的引用进行初始化。**@State**变量可以通过'**$**'操作符创建引用。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>**@Link**变量不能在组件内部进行初始化。 + +## 简单类型示例 + +``` +@Entry +@Component +struct Player { + @State isPlaying: boolean = false + build() { + Column() { + PlayButton({buttonPlaying: $isPlaying}) + Text(`Player is ${this.isPlaying? '':'not'} playing`) + } + } +} + +@Component +struct PlayButton { + @Link buttonPlaying: boolean + build() { + Column() { + Button() { + Image(this.buttonPlaying? 'play.png' : 'pause.png') + }.onClick(() => { + this.buttonPlaying = !this.buttonPlaying + }) + } + } +} +``` + +**@Link**语义是从'**$**'操作符引出，即**$isPlaying**是**this.isPlaying**内部状态的双向数据绑定。当您单击**PlayButton**时，PlayButton 的**Image**组件和**Text**组件将同时进行刷新。 + +## 复杂类型示例 + +``` +@Entry +@Component +struct Parent { + @State arr: number[] = [1, 2, 3] + build() { + Column() { + Child({items: $arr}) + ForEach(this.arr, + item => Text(`${item}`), + item => item.toString()) + } + } +} + +@Component +struct Child { + @Link items: number[] + build() { + Column() { + Button() { + Text('Button1: push') + }.onClick(() => { + this.items.push(100) + }) + Button() { + Text('Button2: replace whole item') + }.onClick(() => { + this.items = [100, 200, 300] + }) + } + } +} +``` + +在上面的示例中，点击**Button1**和**Button2**以更改父组件中显示的文本项目列表。 + +## @Link和@State、@Prop结合使用示例 + +``` +@Entry +@Component +struct ParentView { + @State counter: number = 0 + build() { + Column() { + ChildA({counterVal: this.counter}) // pass by value + ChildB({counterRef: $counter}) // $ creates a Reference that can be bound to counterRef + } + } +} + +@Component +struct ChildA { + @Prop counterVal: number + build() { + Button() { + Text(`ChildA: (${this.counterVal}) + 1`) + }.onClick(() => {this.counterVal+= 1}) + } +} + +@Component +struct ChildB { + @Link counterRef: number + build() { + Button() { + Text(`ChildB: (${this.counterRef}) + 1`) + }.onClick(() => {this.counterRef+= 1}) + } +} +``` + +上述示例中，ParentView包含ChildA和ChildB两个子组件，ParentView的状态变量**counter**分别初始化ChildA和ChildB： + +- ChildB使用**@Link**建立双向状态绑定。当**ChildB**修改**counterRef**状态变量值时，该更改将同步到**ParentView**和**ChildA**共享； +- ChildA使用**@Prop**建立从**ParentView**到自身的单向状态绑定。当**ChildA**修改状态时，**ChildA**将重新渲染，但该更改不会传达给**ParentView**和**ChildB。** + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-states-prop.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-states-prop.md new file mode 100644 index 0000000000000000000000000000000000000000..e7ae42c1ae6cae06a0dd9e9108d4554321ccb246 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-states-prop.md @@ -0,0 +1,68 @@ +# @Prop + +**@Prop**具有与**@State**相同的语义，但初始化方式不同。**@Prop**装饰的变量必须使用其父组件提供的**@State**变量进行初始化，允许组件内部修改**@Prop**变量，但上述更改不会通知给父组件，即**@Prop**属于单向数据绑定。 + +**@Prop**状态数据具有以下特征： + +- **支持简单类型：**仅支持简单类型：number、string、boolean； +- **私有：**仅在组件内访问； +- **支持多个实例：**一个组件中可以定义多个标有**@Prop**的属性； +- **创建自定义组件时将值传递给@Prop变量进行初始化：**在创建组件的新实例时，必须初始化所有@Prop变量，不支持在组件内部进行初始化。 + +## 示例 + +``` +@Entry +@Component +struct ParentComponent { + @State countDownStartValue: number = 10 // 10 Nuggets default start value in a Game + build() { + Column() { + Text(`Grant ${this.countDownStartValue} nuggets to play.`) + Button() { + Text('+1 - Nuggets in New Game') + }.onClick(() => { + this.countDownStartValue += 1 + }) + Button() { + Text('-1 - Nuggets in New Game') + }.onClick(() => { + this.countDownStartValue -= 1 + }) + + // when creatng ChildComponent, the initial value of its @Prop variable must be supplied + // in a named constructor parameter + // also regular costOfOneAttempt (non-Prop) variable is initialied + CountDownComponent({ count: this.countDownStartValue, costOfOneAttempt: 2}) + } + } +} + +@Component +struct CountDownComponent { + @Prop count: number + private costOfOneAttempt: number + + build() { + Column() { + if (this.count > 0) { + Text(`You have ${this.count} Nuggets left`) + } else { + Text('Game over!') + } + + Button() { + Text('Try again') + }.onClick(() => { + this.count -= this.costOfOneAttempt + }) + } + } +} +``` + +在上述示例中，当按“+1”或“-1”按钮时，父组件状态发生变化，重新执行**build**方法，此时将创建一个新的**CountDownComponent**组件。父组件的**countDownStartValue**状态属性被用于初始化子组件的**@Prop**变量。当按下子组件的“Try again”按钮时，其**@Prop**变量**count**将被更改，这将导致**CountDownComponent**重新渲染。但是，**count**值的更改不会影响父组件的**countDownStartValue**值。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>创建新组件实例时，必须初始化其所有**@Prop**变量。 + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-states-state.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-states-state.md new file mode 100644 index 0000000000000000000000000000000000000000..29e286f14e551f1540790124e7539fc58103fffa --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-component-states-state.md @@ -0,0 +1,94 @@ +# @State + +**@State**装饰的变量是组件内部的状态数据，当这些状态数据被修改时，将会调用所在组件的**build**方法进行UI刷新。 + +**@State**状态数据具有以下特征： + +- **支持多种类型：**允许如下强类型的按值和按引用类型：**class**、**number**、**boolean**、**string**，以及这些类型的数组，即**Array**、**Array**、**Array**、**Array**。不允许**object**和**any。** +- **支持多实例：**组件不同实例的内部状态数据独立。 +- **内部私有：**标记为**@State**的属性不能直接在组件外部修改。它的生命周期取决于它所在的组件。 +- **需要本地初始化：**必须为所有**@State**变量分配初始值，将变量保持未初始化可能导致框架行为未定义。 +- **创建自定义组件时支持通过状态变量名设置初始值：**在创建组件实例时，可以通过变量名显式指定**@State**状态属性的初始值**。** + +## 简单类型的状态属性示例 + +``` +@Entry +@Component +struct MyComponent { + @State count: number = 0 + // MyComponent provides a method for modifying the @State status data member. + private toggleClick() { + this.count += 1 + } + + build() { + Column() { + Button() { + Text(`click times: ${this.count}`) + .fontSize(10) + }.onClick(this.toggleClick.bind(this)) + } + } +} +``` + +## 复杂类型的状态变量示例 + +``` +// Customize the status data class. +class Model { + value: string + constructor(value: string) { + this.value = value + } +} + +@Entry +@Component +struct EntryComponent { + build() { + Column() { + MyComponent({count: 1, increaseBy: 2}) // MyComponent1 in this document + MyComponent({title: {value: 'Hello, World 2'}, count: 7}) //MyComponent2 in this document + } + } +} + +@Component +struct MyComponent { + @State title: Model = {value: 'Hello World'} + @State count: number = 0 + private toggle: string = 'Hello World' + private increaseBy: number = 1 + + build() { + Column() { + Text(`${this.title.value}`) + Button() { + Text(`Click to change title`).fontSize(10) + }.onClick(() => { + this.title.value = this.toggle ? 'Hello World' : 'Hello UI' + }) // Modify the internal state of MyComponent using the anonymous method. + + Button() { + Text(`Click to increase count=${this.count}`).fontSize(10) + }.onClick(() => { + this.count += this.increaseBy + }) // Modify the internal state of MyComponent using the anonymous method. + } + } +} +``` + +在上述示例中： + +- 用户定义的组件**MyComponent**定义了**@State**状态变量**count**和**title**。如果**count**或**title**的值发生变化，则执行**MyComponent**的**build**方法来重新渲染组件； +- **EntryComponent**中有多个**MyComponent**组件实例，第一个**MyComponent**内部状态的更改不会影响第二个**MyComponent**； +- 创建**MyComponent**实例时通过变量名给组件内的变量进行初始化，如： + + ``` + MyComponent({title: {value: 'Hello, World 2'}, count: 7}) + ``` + + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-components-container.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-components-container.md new file mode 100644 index 0000000000000000000000000000000000000000..c82dcb2bdfdb787e537368c09da65c29be9c3945 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-components-container.md @@ -0,0 +1,43 @@ +# 容器组件 + +- **[AlphabetIndexer](ts-container-alphabet-indexer.md)** + +- **[Badge](ts-container-badge.md)** + +- **[Column](ts-container-column.md)** + +- **[ColumnSplit](ts-container-columnsplit.md)** + +- **[Counter](ts-container-counter.md)** + +- **[Flex](ts-container-flex.md)** + +- **[GridContainer](ts-container-gridcontainer.md)** + +- **[Grid](ts-container-grid.md)** + +- **[GridItem](ts-container-griditem.md)** + +- **[List](ts-container-list.md)** + +- **[ListItem](ts-container-listitem.md)** + +- **[Navigator](ts-container-navigator.md)** + +- **[Panel](ts-container-panel.md)** + +- **[Row](ts-container-row.md)** + +- **[RowSplit](ts-container-rowsplit.md)** + +- **[Scroll](ts-container-scroll.md)** + +- **[Stack](ts-container-stack.md)** + +- **[Swiper](ts-container-swiper.md)** + +- **[Tabs](ts-container-tabs.md)** + +- **[TabContent](ts-container-tabcontent.md)** + + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-components.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-components.md new file mode 100644 index 0000000000000000000000000000000000000000..6421384c610afe894a075c620d0da64ffb10c74b --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-components.md @@ -0,0 +1,11 @@ +# 组件 + +- **[通用](ts-universal-components.md)** + +- **[基础组件](ts-basic-components.md)** + +- **[容器组件](ts-components-container.md)** + +- **[绘制组件](ts-drawing-components.md)** + + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-configuration-with-mandatory-parameters.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-configuration-with-mandatory-parameters.md new file mode 100644 index 0000000000000000000000000000000000000000..e0e0f44cf2ab773db1342f03bae3ce622f3bb6d4 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-configuration-with-mandatory-parameters.md @@ -0,0 +1,32 @@ +# 必选参数构造配置 + +如果组件的接口定义中包含必选构造参数，则在组件后面的“**\(\)**”中必须配置参数。参数可以使用常量进行赋值。 + +例如： + +**Image**组件的必选参数**src**： + +``` +Image('http://xyz/a.jpg') +``` + +**Text**组件的必选参数**content**： + +``` +Text('123') +``` + +变量或表达式也可以用于参数赋值，其中表达式返回的结果类型必须满足参数类型要求。 + +传递变量或表达式来构造**Image**和**Text**组件的参数示例如下： + +``` +// imagePath, where imageUrl is a private data variable defined in the component. +Image(this.imagePath) +Image('http://' + this.imageUrl) +// count is a private data variable defined in the component. +// (``) and (${}) are the template character string features supported by the TS language and comply with the +// features of the corresponding language. This specification is not limited. +Text(`count: ${this.count}`) +``` + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-alphabet-indexer.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-alphabet-indexer.md new file mode 100644 index 0000000000000000000000000000000000000000..a76b944a7f1fd2340df8d5a9de0cf0b308160fee --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-alphabet-indexer.md @@ -0,0 +1,250 @@ +# AlphabetIndexer + +字母索引条。 + +## 支持设备 + + + + + + + + + + + + + + + + +

手机

+

平板

+

车机

+

智慧屏

+

智能穿戴

+

支持

+

支持

+

支持

+

不支持

+

不支持

+
+ +## 子组件 + +无 + +## 接口 + +AlphabetIndexer\(value: \{arrayValue : Array, selected : number\}\) + +- 参数 + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

arrayValue

+

Array<string>

+

是

+

-

+

字母索引字符串数组。

+

selected

+

number

+

是

+

-

+

选中项编号。

+
+ + +## 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

描述

+

selectedColor

+

Color

+

选中文本文字颜色。

+

popupColor

+

Color

+

弹出提示文本字体颜色。

+

selectedBackgroundColor

+

Color

+

选中文本背景颜色。

+

popupBackground

+

Color

+

弹窗索引背景色。

+

usingPopup

+

boolean

+

是否使用弹出索引提示。

+

selectedFont

+

{

+

size?: number,

+

weight?: FontWeight,

+

family?: string,

+

style?: FontStyle

+

}

+

选中文本文字样式。

+

popupFont

+

{

+

size?: number,

+

weight?: FontWeight,

+

family?: string,

+

style?: FontStyle

+

}

+

弹出提示文本字体样式。

+

font

+

{

+

size?: number,

+

weight?: FontWeight,

+

family?: string,

+

style?: FontStyle

+

}

+

字母索引条默认文本字体样式。

+

itemSize

+

Length

+

字母索引条字母区域大小，字母区域为正方形，设置正方形边长。

+

alignStyle

+

IndexerAlign

+

字母索引条对齐样式，支持左侧对齐样式与右侧对齐样式，影响弹窗弹出位置。

+
+ +- IndexerAlign枚举说明 + + + + + + + + + + + + + +

名称

+

描述

+

Left

+

弹框显示在索引条右侧。

+

Right

+

弹框显示在索引条左侧。

+
+ + +## 事件 + + + + + + + + + + +

名称

+

功能描述

+

onSelected(index: number) => void

+

索引条选中回调。

+
+ +## 示例 + +``` +@Entry +@Component +struct AlphabetIndexerComponent { + private value: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'] + + build() { + AlphabetIndexer({ ArrayValue: this.value, selected: 0 }) + .selectedColor(0xffffff) // 选中颜色 + .popupColor(0xFFFAF0) // 弹出框颜色 + .selectedBackgroundColor(0xCCCCCC) // 选中背景颜色 + .popupBackground(0xD2B48C) // 弹出框背景颜色 + .usingPopup(true) // 是否显示弹出框 + .selectedFont({ size: 16, weight: FontWeight.Bolder }) // 选中的样式 + .popupFont({ size: 30, weight: FontWeight.Bolder }) // 弹出框的演示 + .itemSize(28) // 每一项的大小正方形 + .alignStyle(IndexerAlign.Left) // 左对齐 + .onSelected((index: number) => { + console.info(this.value[index] + '被选中了') // 选中的事件 + }) + .margin({ left: 50 }) + } +} +``` + +![](figures/alphabetindexer.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-badge.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-badge.md new file mode 100644 index 0000000000000000000000000000000000000000..a6565770b515c958390b13d65496f61f1fe9afa8 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-badge.md @@ -0,0 +1,270 @@ +# Badge + +新事件标记组件，在组件上提供事件信息展示能力。 + +## 子组件 + +支持单个子组件。 + +## 接口 + +Badge\(value: \{count: number, position?: BadgePosition, maxCount?: number, style?: BadgeStyle\}\) + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

count

+

number

+

是

+

-

+

设置提醒消息数。

+

position

+

BadgePosition

+

否

+

RightTop

+

设置提示点显示位置。

+

maxCount

+

number

+

否

+

99

+

最大消息数，超过最大消息时仅显示maxCount+。

+

style

+

BadgeStyle

+

否

+

-

+

Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。

+
+ + +Badge\(value: \{value: string, position?: BadgePosition, style?: BadgeStyle\}\) + +根据字符串创建提醒组件。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

value

+

string

+

是

+

-

+

提示内容的文本字符串。

+

position

+

BadgePosition

+

否

+

RightTop

+

设置提示点显示位置。

+

style

+

BadgeStyle

+

否

+

-

+

Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。

+
+ + +- BadgeStyle对象说明 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

必填

+

默认值

+

描述

+

color

+

Color

+

否

+

White

+

文本颜色。

+

fontSize

+

number | string

+

否

+

10

+

文本大小。

+

badgeSize

+

number | string

+

是

+

-

+

badge的大小。

+

badgeColor

+

Color

+

否

+

Red

+

badge的颜色。

+
+ + +- BadgePosition枚举说明 + + + + + + + + + + + + + + + + +

名称

+

描述

+

Right

+

圆点显示在右侧纵向居中。

+

RightTop

+

圆点显示在右上角。

+

Left

+

圆点显示在左侧纵向居中。

+
+ + +## 示例 + +``` +@Entry +@Component +struct BadgeExample { + @State counts: number = 1 + @State message: string = 'new' + + build() { + Flex({ justifyContent: FlexAlign.SpaceAround }) { + Badge({ + count: this.counts, + maxCount: 99, + style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red } + }) { + Button('message') + .onClick(() => { + this.counts++ + }) + .width(100).height(50).backgroundColor(0x317aff) + }.width(100).height(50) + + Badge({ + value: this.message, + style: { color: 0xFFFFFF, fontSize: 9, badgeSize: 20, badgeColor: Color.Blue } + }) { + Text('message') + .width(80).height(50).fontSize(16).lineHeight(37) + .borderRadius(10).textAlign(TextAlign.Center).backgroundColor(0xF3F4ED) + }.width(80).height(50) + + Badge({ + value: '', + position: 1, + style: { badgeSize: 6, badgeColor: Color.Red } + }) { + Text('message') + .width(90).height(50).fontSize(16).lineHeight(37) + .borderRadius(10).textAlign(TextAlign.Center).backgroundColor(0xF3F4ED) + }.width(90).height(50) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/badge.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-column.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-column.md new file mode 100644 index 0000000000000000000000000000000000000000..4cd60bd7e59747882a6a90b5ff3be9e479b023f2 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-column.md @@ -0,0 +1,131 @@ +# Column + +沿垂直方向布局的容器。 + +## 权限列表 + +无 + +## 子组件 + +可以包含子组件。 + +## 接口 + +Column\(options?: \{ space?: Length \}\) + +- 参数 + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

space

+

Length

+

否

+

0

+

纵向布局元素间距。

+
+ + +## 属性 + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

alignItems

+

HorizontalAlign

+

Center

+

设置子组件在水平方向上的对齐格式。

+
+ +- HorizontalAlign枚举说明 + + + + + + + + + + + + + + + + +

名称

+

描述

+

Start

+

按照语言方向起始端对齐。

+

Center

+

居中对齐，默认对齐方式。

+

End

+

按照语言方向末端对齐。

+
+ + +## 示例 + +``` +@Entry +@Component +struct ColumnExample { + build() { + Column({ space: 5 }) { + Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%') + Column({ space: 5 }) { + Column().width('100%').height(50).backgroundColor(0xAFEEEE) + Column().width('100%').height(50).backgroundColor(0x00FFFF) + }.width('90%').height(107).border({ width: 1 }) + + Text('alignItems(Start)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Column() { + Column().width('50%').height(50).backgroundColor(0xAFEEEE) + Column().width('50%').height(50).backgroundColor(0x00FFFF) + }.alignItems(HorizontalAlign.Start).width('90%').border({ width: 1 }) + + Text('alignItems(End)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Column() { + Column().width('50%').height(50).backgroundColor(0xAFEEEE) + Column().width('50%').height(50).backgroundColor(0x00FFFF) + }.alignItems(HorizontalAlign.End).width('90%').border({ width: 1 }) + }.width('100%').padding({ top: 5 }) + } +} +``` + +![](figures/column.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-columnsplit.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-columnsplit.md new file mode 100644 index 0000000000000000000000000000000000000000..566ba819871205309d0f02841adf4d2fb141f54b --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-columnsplit.md @@ -0,0 +1,61 @@ +# ColumnSplit + +将子组件纵向布局，并在每个子组件之间插入一根横向的分割线。 + +## 子组件 + +可以包含子组件。 + +## 接口 + +ColumnSplit\(\) + +## 属性 + + + + + + + + + + + + +

名称

+

参数类型

+

描述

+

resizeable

+

boolean

+

分割线是否可拖拽，默认为false。

+
+ +>![](../../public_sys-resources/icon-note.gif) **说明：** +>与RowSplit相同，ColumnSplit的分割线最小能拖动到刚好包含子组件。 + +## 示例 + +``` +@Entry +@Component +struct ColumnSplitExample { + build() { + Column(){ + Text('The secant line can be dragged').fontSize(9).fontColor(0xCCCCCC).width('90%') + ColumnSplit() { + Text('1').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + Text('2').width('100%').height(50).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) + Text('3').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + Text('4').width('100%').height(50).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) + Text('5').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + } + .resizeable(true) + .width('90%').height('60%') + }.width('100%') + } +} +``` + +![](figures/ColumnSplit.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-counter.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-counter.md new file mode 100644 index 0000000000000000000000000000000000000000..dc87742e9d9406c5b9fc600ea433fd7da77dd9a5 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-counter.md @@ -0,0 +1,62 @@ +# Counter + +计数器组件，提供相应的增加或者减少的计数操作。 + +## 子组件 + +可以包含子组件。 + +## 接口 + +Counter\(\) + +## 事件 + +不支持通用事件和手势， 仅支持如下事件： + + + + + + + + + + + + + +

名称

+

功能描述

+

onInc(callback: () => void)

+

监听数值增加事件。

+

onDec(callback: () => void)

+

监听数值减少事件。

+
+ +## 示例 + +``` +@Entry +@Component +struct CounterExample { + @State value: number = 0 + + build() { + Column() { + Counter() { + Text(this.value.toString()) + }.margin(100) + .onInc(() => { + this.value++ + }) + .onDec(() => { + this.value-- + }) + }.width("100%") + } +} +``` + +![](figures/Counter.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-flex.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-flex.md new file mode 100644 index 0000000000000000000000000000000000000000..d2c019b8f0c350957a493bf4c15af1fe98094caa --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-flex.md @@ -0,0 +1,455 @@ +# Flex + +弹性布局组件。 + +## 权限列表 + +无 + +## 子组件 + +可以包含子组件。 + +## 接口 + +Flex\(options?: \{ direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign \}\) + +标准Flex布局容器。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

direction

+

FlexDirection

+

否

+

Row

+

子组件在Flex容器上排列的方向，即主轴的方向。

+

wrap

+

FlexWrap

+

否

+

NoWrap

+

Flex容器是单行/列还是多行/列排列。

+

justifyContent

+

FlexAlign

+

否

+

Start

+

子组件在Flex容器主轴上的对齐格式。

+

alignItems

+

ItemAlign

+

否

+

Stretch

+

子组件在Flex容器交叉轴上的对齐格式。

+

alignContent

+

FlexAlign

+

否

+

Start

+

交叉轴中有额外的空间时，多行内容的对齐方式。仅在wrap为Wrap或WrapReverse下生效。

+
+ +- FlexDirection枚举说明 + + + + + + + + + + + + + + + + + + + +

名称

+

描述

+

Row

+

主轴与行方向一致作为布局模式。

+

RowReverse

+

与Row方向相反方向进行布局。

+

Column

+

主轴与列方向一致作为布局模式。

+

ColumnReverse

+

与Column相反方向进行布局。

+
+ + +- FlexWrap枚举说明 + + + + + + + + + + + + + + + + +

名称

+

描述

+

NoWrap

+

Flex容器的元素单行/列布局，子项允许超出容器。

+

Wrap

+

Flex容器的元素多行/列排布，子项允许超出容器。

+

WrapReverse

+

Flex容器的元素反向多行/列排布，子项允许超出容器。

+
+ + +- FlexAlign枚举说明 + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

描述

+

Start

+

元素在主轴方向首端对齐, 第一个元素与行首对齐，同时后续的元素与前一个对齐。

+

Center

+

元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。

+

End

+

元素在主轴方向尾部对齐, 最后一个元素与行尾对齐，其他元素与后一个对齐。

+

SpaceBetween

+

Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。

+

SpaceAround

+

Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离时相邻元素之间距离的一半。

+

SpaceEvenly

+

Flex主轴方向元素等间距布局， 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

+
+ + +## 示例 + +``` +// Example 01 +@Entry +@Component +struct FlexExample1 { + build() { + Column() { + Column({ space: 5 }) { + Text('direction:Row').fontSize(9).fontColor(0xCCCCCC).width('90%') + Flex({ direction: FlexDirection.Row }) { + Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) + Text('2').width('20%').height(50).backgroundColor(0xD2B48C) + Text('3').width('20%').height(50).backgroundColor(0xF5DEB3) + Text('4').width('20%').height(50).backgroundColor(0xD2B48C) + } + .height(70) + .width('90%') + .padding(10) + .backgroundColor(0xAFEEEE) + + Text('direction:RowReverse').fontSize(9).fontColor(0xCCCCCC).width('90%') + Flex({ direction: FlexDirection.RowReverse }) { + Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) + Text('2').width('20%').height(50).backgroundColor(0xD2B48C) + Text('3').width('20%').height(50).backgroundColor(0xF5DEB3) + Text('4').width('20%').height(50).backgroundColor(0xD2B48C) + } + .height(70) + .width('90%') + .padding(10) + .backgroundColor(0xAFEEEE) + + Text('direction:Column').fontSize(9).fontColor(0xCCCCCC).width('90%') + Flex({ direction: FlexDirection.Column }) { + Text('1').width('100%').height(40).backgroundColor(0xF5DEB3) + Text('2').width('100%').height(40).backgroundColor(0xD2B48C) + Text('3').width('100%').height(40).backgroundColor(0xF5DEB3) + Text('4').width('100%').height(40).backgroundColor(0xD2B48C) + } + .height(160) + .width('90%') + .padding(10) + .backgroundColor(0xAFEEEE) + + Text('direction:ColumnReverse').fontSize(9).fontColor(0xCCCCCC).width('90%') + Flex({ direction: FlexDirection.ColumnReverse }) { + Text('1').width('100%').height(40).backgroundColor(0xF5DEB3) + Text('2').width('100%').height(40).backgroundColor(0xD2B48C) + Text('3').width('100%').height(40).backgroundColor(0xF5DEB3) + Text('4').width('100%').height(40).backgroundColor(0xD2B48C) + } + .height(160) + .width('90%') + .padding(10) + .backgroundColor(0xAFEEEE) + }.width('100%').margin({ top: 5 }) + }.width('100%') + } +} +``` + +![](figures/Flex01.gif) + +``` +// Example 02 +@Entry +@Component +struct FlexExample2 { + build() { + Column() { + Column({ space: 5 }) { + Text('Wrap').fontSize(9).fontColor(0xCCCCCC).width('90%') + Flex({ wrap: FlexWrap.Wrap }) { + Text('1').width('50%').height(50).backgroundColor(0xF5DEB3) + Text('2').width('50%').height(50).backgroundColor(0xD2B48C) + Text('3').width('50%').height(50).backgroundColor(0xD2B48C) + } + .width('90%') + .padding(10) + .backgroundColor(0xAFEEEE) + + Text('NoWrap').fontSize(9).fontColor(0xCCCCCC).width('90%') + Flex({ wrap: FlexWrap.NoWrap }) { + Text('1').width('50%').height(50).backgroundColor(0xF5DEB3) + Text('2').width('50%').height(50).backgroundColor(0xD2B48C) + Text('3').width('50%').height(50).backgroundColor(0xF5DEB3) + } + .width('90%') + .padding(10) + .backgroundColor(0xAFEEEE) + + Text('WrapReverse').fontSize(9).fontColor(0xCCCCCC).width('90%') + Flex({ wrap: FlexWrap.WrapReverse , direction:FlexDirection.Row }) { + Text('1').width('50%').height(50).backgroundColor(0xF5DEB3) + Text('2').width('50%').height(50).backgroundColor(0xD2B48C) + Text('3').width('50%').height(50).backgroundColor(0xD2B48C) + } + .width('90%') + .height(120) + .padding(10) + .backgroundColor(0xAFEEEE) + }.width('100%').margin({ top: 5 }) + }.width('100%') + } +} +``` + +![](figures/flex02.png) + +``` +// Example 03 +@Component +struct JustifyContentFlex { + @Prop justifyContent : number + + build() { + Flex({ justifyContent: this.justifyContent }) { + Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) + Text('2').width('20%').height(50).backgroundColor(0xD2B48C) + Text('3').width('20%').height(50).backgroundColor(0xF5DEB3) + } + .width('90%') + .padding(10) + .backgroundColor(0xAFEEEE) + } +} + +@Entry +@Component +struct FlexExample3 { + build() { + Column() { + Column({ space: 5 }) { + Text('justifyContent:Start').fontSize(9).fontColor(0xCCCCCC).width('90%') + JustifyContentFlex({ justifyContent: FlexAlign.Start }) + + Text('justifyContent:Center').fontSize(9).fontColor(0xCCCCCC).width('90%') + JustifyContentFlex({ justifyContent: FlexAlign.Center }) + + Text('justifyContent:End').fontSize(9).fontColor(0xCCCCCC).width('90%') + JustifyContentFlex({ justifyContent: FlexAlign.End }) + + Text('justifyContent:SpaceBetween').fontSize(9).fontColor(0xCCCCCC).width('90%') + JustifyContentFlex({ justifyContent: FlexAlign.SpaceBetween }) + + Text('justifyContent:SpaceAround').fontSize(9).fontColor(0xCCCCCC).width('90%') + JustifyContentFlex({ justifyContent: FlexAlign.SpaceAround }) + + Text('justifyContent:SpaceEvenly').fontSize(9).fontColor(0xCCCCCC).width('90%') + JustifyContentFlex({ justifyContent: FlexAlign.SpaceEvenly }) + }.width('100%').margin({ top: 5 }) + }.width('100%') + } +} +``` + +![](figures/Flex03.gif) + +``` +// Example 04 +@Component +struct AlignItemsFlex { + @Prop alignItems : number + + build() { + Flex({ alignItems: this.alignItems }) { + Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) + Text('2').width('33%').height(40).backgroundColor(0xD2B48C) + Text('3').width('33%').height(50).backgroundColor(0xF5DEB3) + } + .size({width: '90%', height: 80}) + .padding(10) + .backgroundColor(0xAFEEEE) + } +} + +@Entry +@Component +struct FlexExample4 { + build() { + Column() { + Column({ space: 5 }) { + Text('alignItems:Auto').fontSize(9).fontColor(0xCCCCCC).width('90%') + AlignItemsFlex({ alignItems: ItemAlign.Auto }) + + Text('alignItems:Start').fontSize(9).fontColor(0xCCCCCC).width('90%') + AlignItemsFlex({ alignItems: ItemAlign.Start }) + + Text('alignItems:Center').fontSize(9).fontColor(0xCCCCCC).width('90%') + AlignItemsFlex({ alignItems: ItemAlign.Center }) + + Text('alignItems:End').fontSize(9).fontColor(0xCCCCCC).width('90%') + AlignItemsFlex({ alignItems: ItemAlign.End }) + + Text('alignItems:Stretch').fontSize(9).fontColor(0xCCCCCC).width('90%') + AlignItemsFlex({ alignItems: ItemAlign.Stretch }) + + Text('alignItems:Baseline').fontSize(9).fontColor(0xCCCCCC).width('90%') + AlignItemsFlex({ alignItems: ItemAlign.Baseline }) + }.width('100%').margin({ top: 5 }) + }.width('100%') + } +} +``` + +![](figures/Flex04.jpg) + +![](figures/Flex04-16.gif) + +``` +// Example 05 +@Component +struct AlignContentFlex { + @Prop alignContent: number + + build() { + Flex({ wrap: FlexWrap.Wrap, alignContent: this.alignContent }) { + Text('1').width('50%').height(20).backgroundColor(0xF5DEB3) + Text('2').width('50%').height(20).backgroundColor(0xD2B48C) + Text('3').width('50%').height(20).backgroundColor(0xD2B48C) + } + .size({ width: '90%', height: 90 }) + .padding(10) + .backgroundColor(0xAFEEEE) + } +} + +@Entry +@Component +struct FlexExample5 { + build() { + Column() { + Column({ space: 5 }) { + Text('alignContent:Start').fontSize(9).fontColor(0xCCCCCC).width('90%') + AlignContentFlex({ alignContent: FlexAlign.Start }) + + Text('alignContent:Center').fontSize(9).fontColor(0xCCCCCC).width('90%') + AlignContentFlex({ alignContent: FlexAlign.Center }) + + Text('alignContent:End').fontSize(9).fontColor(0xCCCCCC).width('90%') + AlignContentFlex({ alignContent: FlexAlign.End }) + + Text('alignContent:SpaceBetween').fontSize(9).fontColor(0xCCCCCC).width('90%') + AlignContentFlex({ alignContent: FlexAlign.SpaceBetween }) + + Text('alignContent:SpaceAround').fontSize(9).fontColor(0xCCCCCC).width('90%') + AlignContentFlex({ alignContent: FlexAlign.SpaceAround }) + + Text('alignContent:SpaceEvenly').fontSize(9).fontColor(0xCCCCCC).width('90%') + AlignContentFlex({ alignContent: FlexAlign.SpaceEvenly }) + }.width('100%').margin({ top: 5 }) + }.width('100%') + } +} +``` + +![](figures/Flex05.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-grid.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-grid.md new file mode 100644 index 0000000000000000000000000000000000000000..5a1014c3aee29078999b85c45566a876067d87b0 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-grid.md @@ -0,0 +1,148 @@ +# Grid + +网格容器，二维布局，将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以任意组合不同的网格，做出各种各样的布局。 + +## 权限类别 + +无 + +## 子组件 + +包含[GridItem](ts-container-griditem.md)子组件。 + +## 接口说明 + +Grid\(\) + +## 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

columnsTemplate

+

string

+

'1fr'

+

用于设置当前网格布局列的数量，不设置时默认1列 示例, '1fr 1fr 2fr' 分三列，将父组件允许的宽分为4等份，第一列占1份，第二列占一份，第三列占2份。

+

rowsTemplate

+

string

+

'1fr'

+

用于设置当前网格布局行的数量，不设置时默认1行 示例, '1fr 1fr 2fr'分三行，将父组件允许的高分为4等份，第一行占1份，第二行占一份，第三行占2份。

+

columnsGap

+

Length

+

0

+

用于设置列与列的间距。

+

rowsGap

+

Length

+

0

+

用于设置行与行的间距。

+
+ +## 事件 + + + + + + + + + + +

名称

+

功能描述

+

onScrollIndex(first: number) => void

+

当前列表显示的起始位置item发生变化时触发。

+
+ +## 示例 + +``` +@Entry +@Component +struct GridExample { + @State Number: String[] = ['0', '1', '2', '3', '4'] + + build() { + Column({ space: 5 }) { + Grid() { + ForEach(this.Number, (day: string) => { + ForEach(this.Number, (day: string) => { + GridItem() { + Text(day) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width('100%') + .height('100%') + .textAlign(TextAlign.Center) + } + }, day => day) + }, day => day) + } + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .rowsTemplate('1fr 1fr 1fr 1fr 1fr') + .columnsGap(10) + .rowsGap(10) + .width('90%') + .backgroundColor(0xFAEEE0) + .height(300) + + Text('scroll').fontColor(0xCCCCCC).fontSize(9).width('90%') + Grid() { + ForEach(this.Number, (day: string) => { + ForEach(this.Number, (day: string) => { + GridItem() { + Text(day) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + } + }, day => day) + }, day => day) + } + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .columnsGap(10) + .rowsGap(10) + .onScrollIndex((first: number) => { + console.info(first.toString()) + }) + .width('90%') + .backgroundColor(0xFAEEE0) + .height(300) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/grid-17.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-gridcontainer.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-gridcontainer.md new file mode 100644 index 0000000000000000000000000000000000000000..664967ecb0c89583edaa91b5fdc5c360cd923f49 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-gridcontainer.md @@ -0,0 +1,193 @@ +# GridContainer + +纵向排布栅格布局容器，仅在栅格布局场景中使用。 + +## 子组件 + +可以包含子组件。 + +## 接口 + +GridContainer\(options? :\{ columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length \}\) + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

默认值

+

说明

+

columns

+

number

+

否

+

'auto'

+

设置当前布局总列数。

+

sizeType

+

SizeType

+

否

+

Auto

+

选用设备宽度类型。

+

gutter

+

Length

+

否

+

-

+

栅格布局列间距。

+

margin

+

Length

+

否

+

-

+

栅格布局两侧间距。

+
+ +- SizeType枚举说明 + + + + + + + + + + + + + + + + + + + + + + +

名称

+

描述

+

XS

+

最小宽度类型设备。

+

SM

+

小宽度类型设备。

+

MD

+

中等宽度类型设备。

+

LG

+

大宽度类型设备。

+

Auto

+

根据设备类型进行选择。

+
+ + +## 属性 + +支持通用属性和Column组件的[属性方法](ts-container-column.md#section358284262918)。 + +## 事件 + +支持通用事件。 + +## 示例 + +``` +@Entry +@Component +struct GridContainerExample { + @State sizeType: SizeType = SizeType.XS + + build() { + Column({ space: 5 }) { + GridContainer({ columns: 12, sizeType: this.sizeType, gutter: 10, margin: 20 }) { + Row() { + Text('1') + .useSizeType({ + xs: { span: 6, offset: 0 }, + sm: { span: 2, offset: 0 }, + md: { span: 2, offset: 0 }, + lg: { span: 2, offset: 0 } + }) + .height(50).backgroundColor(0x4682B4).textAlign(TextAlign.Center) + Text('2') + .useSizeType({ + xs: { span: 2, offset: 6 }, + sm: { span: 6, offset: 2 }, + md: { span: 2, offset: 2 }, + lg: { span: 2, offset: 2 } + }) + .height(50).backgroundColor(0x00BFFF).textAlign(TextAlign.Center) + Text('3') + .useSizeType({ + xs: { span: 2, offset: 8 }, + sm: { span: 2, offset: 8 }, + md: { span: 6, offset: 4 }, + lg: { span: 2, offset: 4 } + }) + .height(50).backgroundColor(0x4682B4).textAlign(TextAlign.Center) + Text('4') + .useSizeType({ + xs: { span: 2, offset: 10 }, + sm: { span: 2, offset: 10 }, + md: { span: 2, offset: 10 }, + lg: { span: 6, offset: 6 } + }) + .height(50).backgroundColor(0x00BFFF).textAlign(TextAlign.Center) + } + }.width('90%') + + Text('Click Simulate to change the device width').fontSize(9).width('90%').fontColor(0xCCCCCC) + Row() { + Button('XS') + .onClick(() => { + this.sizeType = SizeType.XS + }).backgroundColor(0x317aff) + Button('SM') + .onClick(() => { + this.sizeType = SizeType.SM + }).backgroundColor(0x317aff) + Button('MD') + .onClick(() => { + this.sizeType = SizeType.MD + }).backgroundColor(0x317aff) + Button('LG') + .onClick(() => { + this.sizeType = SizeType.LG + }).backgroundColor(0x317aff) + } + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/grid.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-griditem.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-griditem.md new file mode 100644 index 0000000000000000000000000000000000000000..861ab99671378ba7b14158a6f12a7a00f1e063a5 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-griditem.md @@ -0,0 +1,118 @@ +# GridItem + +网格容器中单项内容容器。 + +## 权限列表 + +无 + +## 子组件 + +可以包含子组件。 + +## 接口 + +GridItem\(\) + +## 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

rowStart

+

number

+

-

+

用于指定当前元素起始行号。

+

rowEnd

+

number

+

-

+

用于指定当前元素终点行号。

+

columnStart

+

number

+

-

+

用于指定当前元素起始列号。

+

columnEnd

+

number

+

-

+

用于指定当前元素终点列号。

+

forceRebuild

+

boolean

+

false

+

用于设置在触发组件build时是否重新创建此节点。

+
+ +## 示例 + +``` +@Entry +@Component +struct GridItemExample { + @State numbers: string[] = Array.apply(null, Array(16)).map(function (item, i) { return i.toString() }) + + build() { + Column() { + Grid() { + GridItem() { + Text('4') + .fontSize(16).backgroundColor(0xFAEEE0) + .width('100%').height('100%').textAlign(TextAlign.Center) + }.rowStart(1).rowEnd(4) + + ForEach(this.numbers, (item) => { + GridItem() { + Text(item) + .fontSize(16).backgroundColor(0xF9CF93) + .width('100%').height('100%').textAlign(TextAlign.Center) + }.forceRebuild(false) + }, item => item) + + GridItem() { + Text('5') + .fontSize(16).backgroundColor(0xDBD0C0) + .width('100%').height('100%').textAlign(TextAlign.Center) + }.columnStart(1).columnEnd(5) + } + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .rowsTemplate('1fr 1fr 1fr 1fr 1fr') + .width('90%').height(300) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/griditem.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-list.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-list.md new file mode 100644 index 0000000000000000000000000000000000000000..84d29c074aa9caa2bacb7caac0621fe5e665468b --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-list.md @@ -0,0 +1,252 @@ +# List + +列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。 + +## 权限列表 + +无 + +## 子组件 + +包含[ListItem](ts-container-listitem.md)子组件。 + +## 接口 + +List\(options?: \{ space?: number, initialIndex?: number \}\) + +- 参数 + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

space

+

number

+

否

+

0

+

列表项间距。

+

initialIndex

+

number

+

否

+

0

+

设置当前List初次加载时视口起始位置显示的item，即显示第一个item，如设置的序号超过了最后一个item的序号，则设置不生效。

+
+ + +## 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

listDirection

+

Axis

+

Vertical

+

设置List组件排列方向参照Axis枚举说明。

+

divider

+

{

+

strokeWidth: Length,

+

color?:Color,

+

startMargin?: Length,

+

endMargin?: Length

+

}

+

-

+

用于设置ListItem分割线样式，默认无分割线。

+

strokeWidth: 分割线的线宽。

+

color: 分割线的颜色。

+

startMargin： 分割线距离列表侧边起始端的距离。

+

endMargin: 分割线距离列表侧边结束端的距离。

+

editMode

+

boolean

+

false

+

声明当前List组件是否处于可编辑模式。

+

edgeEffect

+

EdgeEffect

+

Spring

+

滑动效果，目前支持的滑动效果参见EdgeEffect的枚举说明。

+

chainAnimation

+

boolean

+

false

+

用于设置当前list是否启用链式联动动效，开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果：list内的list-item间隔一定距离，在基本的滑动交互行为下，主动对象驱动从动对象进行联动，驱动效果遵循弹簧物理动效。

+
  • false：不启用链式联动。
  • true：启用链式联动。
+
+ +- Axis枚举说明 + + + + + + + + + + + + + +

名称

+

描述

+

Vertical

+

纵向排列。

+

Horizontal

+

横向排列。

+
+ + +- EdgeEffect枚举说明 + + + + + + + + + + + + + +

名称

+

描述

+

Spring

+

弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹。

+

None

+

滑动到边缘后无效果。

+
+ + +## 事件 + + + + + + + + + + + + + +

名称

+

功能描述

+

onItemDelete(index: number) => boolean

+

列表项删除时触发。

+

onScrollIndex(firstIndex: number, lastIndex: number) => void

+

当前列表显示的起始位置和终止位置发生变化时触发。

+
+ +>![](../../public_sys-resources/icon-note.gif) **说明：** +>List使能可编辑模式需配合事件方法onItemDelete和ListItem的editable属性，即可编辑模式实现删除列表项功能，需满足下列三个条件： +>- 配置editMode\(true\)； +>- 绑定onItemDelete回调，回调中return true； +>- ListItem属性editable\(true\)。 + +## 示例 + +``` +@Entry +@Component +struct ListExample { + private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] + @State editFlag: boolean = false + + build() { + Stack({ alignContent: Alignment.TopStart }) { + Column() { + List({ space: 20, initialIndex: 0 }) { + ForEach(this.arr, (item) => { + ListItem() { + Text('' + item) + .width('100%').height(100).fontSize(16) + .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF) + }.editable(true) + }, item => item) + } + .listDirection(Axis.Vertical) // 排列方向 + .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线 + .edgeEffect(EdgeEffect.None) // 滑动到边缘无效果 + .chainAnimation(false) // 联动特效关闭 + .onScrollIndex((firstIndex: number, lastIndex: number) => { + console.info('first' + firstIndex) + console.info('last' + lastIndex) + }) + .editMode(this.editFlag) + .onItemDelete((index: number) => { + console.info(this.arr[index] + 'Delete') + this.arr.splice(index, 1) + console.info(JSON.stringify(this.arr)) + this.editFlag = false + return true + }).width('90%') + }.width('100%') + + Button('edit list') + .onClick(() => { + this.editFlag = !this.editFlag + }).margin({ top: 5, left: 20 }) + }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 }) + } +} +``` + +![](figures/list.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-listitem.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-listitem.md new file mode 100644 index 0000000000000000000000000000000000000000..907643b092ddb532e44ad1c7c97bfb93f7aafd7d --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-listitem.md @@ -0,0 +1,116 @@ +# ListItem + +用来展示列表具体item，宽度默认充满List组件，必须配合List来使用。 + +## 权限列表 + +无 + +## 子组件 + +可以包含单个子组件。 + +## 接口 + +ListItem\(\) + +## 属性 + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

sticky

+

Sticky

+

None

+

设置ListItem吸顶效果，参见Sticky枚举描述。

+

editable

+

boolean

+

false

+

声明当前ListItem元素是否可编辑，进入编辑模式后可删除。

+
+ +- Sticky枚举说明 + + + + + + + + + + + + + +

名称

+

描述

+

None

+

无吸顶效果。

+

Normal

+

当前item吸顶，滑动消失。

+
+ + +## 示例 + +``` +@Entry +@Component +struct ListItemExample { + private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] + @State editFlag: boolean = false + + build() { + Column() { + List({ space: 20, initialIndex: 0 }) { + ListItem() { + Text('sticky:Normal , click me edit list') + .width('100%').height(40).fontSize(12).fontColor(0xFFFFFF) + .textAlign(TextAlign.Center).backgroundColor(0x696969) + .onClick(() => { + this.editFlag = !this.editFlag + }) + }.sticky(Sticky.Normal) + + ForEach(this.arr, (item) => { + ListItem() { + Text('' + item) + .width('100%').height(100).fontSize(16) + .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF) + }.editable(this.editFlag) + }, item => item) + } + .editMode(true) + .onItemDelete((index: number) => { + console.info(this.arr[index - 1] + 'Delete') + this.arr.splice(index - 1,1) + this.editFlag = false + return true + }).width('90%') + }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 }) + } +} +``` + +![](figures/ListItem.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-navigator.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-navigator.md new file mode 100644 index 0000000000000000000000000000000000000000..d9de3e22e0165b94c0e5225c06445f89d4052818 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-navigator.md @@ -0,0 +1,187 @@ +# Navigator + +路由容器组件，提供路由跳转能力。 + +## 权限列表 + +无 + +## 子组件 + +可以包含子组件。 + +## 接口 + +Navigator\(value?: \{target: string, type?: NavigationType\}\) + +创建路由组件。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

target

+

string

+

是

+

-

+

指定跳转目标页面的路径。

+

type

+

NavigationType

+

否

+

Push

+

指定路由方式。

+
+ +- NavigationType枚举说明 + + + + + + + + + + + + + + + + +

名称

+

描述

+

Push

+

跳转到应用内的指定页面。

+

Replace

+

用应用内的某个页面替换当前页面，并销毁被替换的页面。

+

Back

+

返回上一页面或指定的页面。

+
+ + +## 属性 + + + + + + + + + + + + + + + + + + + +

名称

+

参数

+

默认值

+

描述

+

active

+

boolean

+

-

+

当前路由组件是否处于激活状态，处于激活状态时，会生效相应的路由操作。

+

params

+

Object

+

undefined

+

跳转时要同时传递到目标页面的数据，可在目标页面使用router.getParams()获得。

+
+ +## 示例 + +``` +// Navigator Page +@Entry +@Component +struct NavigatorExample { + @State active: boolean = false + @State Text: string = 'news' + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { + Navigator({ target: 'pages/container/navigator/Detail', type: NavigationType.Push }) { + Text('Go to ' + this.Text + ' page').width('100%').textAlign(TextAlign.Center) + }.params({ text: this.Text }) + + Navigator() { + Text('Back to previous page').width('100%').textAlign(TextAlign.Center) + }.active(this.active) + .onClick(() => { + this.active = true + }) + }.height(150).width(350).padding(35) + } +} +``` + +``` +// Detail Page +import router from '@system.router' + +@Entry +@Component +struct DetailExample { + @State text: string = router.getParams().text + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { + Navigator({ target: 'pages/container/navigator/Back', type: NavigationType.Push }) { + Text('Go to back page').width('100%').height(20) + } + + Text('This is ' + this.text + ' page').width('100%').textAlign(TextAlign.Center) + } + .width('100%').height(200).padding({ left: 35, right: 35, top: 35 }) + } +} + +``` + +``` +// Back Page +@Entry +@Component +struct BackExample { + build() { + Column() { + Navigator({ target: 'pages/container/navigator/Navigator', type: NavigationType.Back }) { + Text('Return to Navigator Page').width('100%').textAlign(TextAlign.Center) + } + }.width('100%').height(200).padding({ left: 35, right: 35, top: 35 }) + } +} +``` + +![](figures/Navigator.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-panel.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-panel.md new file mode 100644 index 0000000000000000000000000000000000000000..f9dec07ce7ec94bde6694ba9623ce45df6da812c --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-panel.md @@ -0,0 +1,225 @@ +# Panel + +可滑动面板。提供一种轻量的内容展示的窗口，可方便的在不同尺寸中切换，属于弹出式组件。 + +## 权限列表 + +无 + +## 子组件 + +可以包含子组件。 + +## 接口 + +Panel\(value:\{show：boolean\}\) + +- 参数 + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

show

+

boolean

+

是

+

-

+

控制Panel显示或隐藏。

+
+ + +## 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

type

+

PanelType

+

Foldable

+

设置可滑动面板的类型。

+

mode

+

PanelMode

+

-

+

设置可滑动面板的初始状态。

+

dragBar

+

boolean

+

true

+

设置是否存在dragbar，true表示存在，false表示不存在。

+

fullHeight

+

Length

+

-

+

指定PanelMode.Full状态下的高度。

+

halfHeight

+

Length

+

-

+

指定PanelMode.Half状态下的高度，默认为屏幕尺寸的一半。

+

miniHeight

+

Length

+

-

+

指定PanelMode.Mini状态下的高度。

+
+ +- PanelType枚举说明 + + + + + + + + + + + + + + + + +

名称

+

描述

+

Minibar

+

提供minibar和类全屏展示切换效果。

+

Foldable

+

内容永久展示类，提供大（类全屏）、中（类半屏）、小三种尺寸展示切换效果。

+

Temporary

+

内容临时展示区，提供大（类全屏）、中（类半屏）两种尺寸展示切换效果。

+
+ + +- PanelMode枚举说明 + + + + + + + + + + + + + + + + +

名称

+

描述

+

Mini

+

类型为minibar和foldable时，为最小状态；类型为temporary，则不生效。

+

Half

+

类型为foldable和temporary时，为类半屏状态；类型为minibar，则不生效。

+

Full

+

类全屏状态。

+
+ + +## 事件 + + + + + + + + + + +

名称

+

功能描述

+

onChange(callback: (width: number, height: number, mode: PanelMode) => void)

+

当可滑动面板发生状态变化时触发， 返回的height值为内容区高度值，当dragbar属性为true时，panel本身的高度值为dragbar高度加上内容区高度。

+
+ +## 示例 + +``` +@Entry +@Component +struct PanelExample { + @State show: boolean = false + + build() { + Column() { + Text('2021-09-30 Today Calendar: 1.afternoon......Click for details') + .width('90%').height(50).borderRadius(10) + .backgroundColor(0xFFFFFF).padding({ left: 20 }) + .onClick(() => { + this.show = !this.show + }) + Panel(this.show) { // 展示日程 + Column() { + Text('Today Calendar') + Divider() + Text('1. afternoon 4:00 The project meeting') + } + } + .type(PanelType.Foldable).mode(PanelMode.Half) + .dragBar(true) // 默认开启 + .halfHeight(500) // 默认一半 + .onChange((value: any) => { + console.info(`width:${value.width},height:${value.height},mode:${value.mode}`) + }) + }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 }) + } +} +``` + +![](figures/Panel.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-row.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-row.md new file mode 100644 index 0000000000000000000000000000000000000000..0db2e12ad42774de1e645380e90b1df5334bb6e7 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-row.md @@ -0,0 +1,131 @@ +# Row + +沿水平方向布局容器。 + +## 权限列表 + +无 + +## 子组件 + +可以包含子组件。 + +## 接口 + +Row\(options?: \{ space?: Length \}\) + +- 参数 + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

space

+

Length

+

否

+

0

+

横向布局元素间距。

+
+ + +## 属性 + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

alignItems

+

VerticalAlign

+

Center

+

在垂直方向上子组件的对齐格式。

+
+ +- VerticalAlign枚举说明 + + + + + + + + + + + + + + + + +

名称

+

描述

+

Top

+

顶部对齐。

+

Center

+

居中对齐，默认对齐方式。

+

Bottom

+

底部对齐。

+
+ + +## 示例 + +``` +@Entry +@Component +struct RowExample { + build() { + Column({ space: 5 }) { + Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%') + Row({ space: 20 }) { + Row().width(150).height(50).backgroundColor(0xAFEEEE) + Row().width(150).height(50).backgroundColor(0x00FFFF) + }.width(321).height(52).border({ width: 1 }) + + Text('alignItems(Bottom)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Row() { + Row().width('50%').height(50).backgroundColor(0xAFEEEE) + Row().width('50%').height(50).backgroundColor(0x00FFFF) + }.alignItems(VerticalAlign.Bottom).width('90%').height(100).border({ width: 1 }) + + Text('alignItems(Top)').fontSize(9).fontColor(0xCCCCCC).width('90%') + Row() { + Row().width('50%').height(50).backgroundColor(0xAFEEEE) + Row().width('50%').height(50).backgroundColor(0x00FFFF) + }.alignItems(VerticalAlign.Top).width('90%').height(100).border({ width: 1 }) + }.width('100%') + } +} +``` + +![](figures/row.png) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-rowsplit.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-rowsplit.md new file mode 100644 index 0000000000000000000000000000000000000000..37fd14038b260b072633111b9e6aff5b3c6ccb45 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-rowsplit.md @@ -0,0 +1,61 @@ +# RowSplit + +将子组件横向布局，并在每个子组件之间插入一根纵向的分割线。 + +## 子组件 + +可以包含子组件 + +## 接口 + +RowSplit\(\) + +## 属性 + + + + + + + + + + + + +

名称

+

参数类型

+

描述

+

resizeable

+

boolean

+

分割线是否可拖拽，默认为false。

+
+ +>![](../../public_sys-resources/icon-note.gif) **说明：** +>RowSplit的分割线最小能拖动到刚好包含子组件。 + +## 示例 + +``` +@Entry +@Component +struct RowSplitExample { + build() { + Column() { + Text('The secant line can be dragged').fontSize(9).fontColor(0xCCCCCC).width('90%') + RowSplit() { + Text('1').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + Text('2').width('10%').height(100).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) + Text('3').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + Text('4').width('10%').height(100).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) + Text('5').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + } + .resizeable(true) // 可拖动 + .width('90%').height(100) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/RowSplit.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-scroll.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-scroll.md new file mode 100644 index 0000000000000000000000000000000000000000..440edb1163bb7117669fbd4a3d21e5493b2b5839 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-scroll.md @@ -0,0 +1,385 @@ +# Scroll + +可滚动的容器组件，当子组件的布局尺寸超过父组件的视口时，内容可以滚动。 + +## 权限列表 + +无 + +## 子组件 + +支持单个子组件。 + +## 接口 + +Scroll\(scroller?: Scroller\) + +## 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

scrollable

+

ScrollDirection

+

Vertical

+

设置滚动方法。

+

scrollBar

+

BarState

+

Auto

+

设置滚动条状态。

+

scrollBarColor

+

Color

+

-

+

设置滚动条的颜色。

+

scrollBarWidth

+

Length

+

-

+

设置滚动条的宽度。

+
+ +- ScrollDirection枚举说明 + + + + + + + + + + + + + + + + +

名称

+

描述

+

Horizontal

+

仅支持水平方向滚动。

+

Vertical

+

仅支持竖直方向滚动。

+

None

+

不可滚动。

+
+ + +## Scroller + +可滚动容器组件的控制器，可以将此组件绑定至容器组件，然后通过它控制容器组件的滚动，目前支持绑定到List和Scroll组件上。 + +### 导入对象 + +``` +scroller: Scroller = new Scroller() +``` + +### scroller.scrollTo + +scrollTo\(value: \{ xOffset: number | string, yOffset: number | string, animation?: \{ duration: number, curve: Curve \} \}\): void + +滑动到指定位置。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

xOffset

+

Length

+

是

+

-

+

水平滑动偏移。

+

yOffset

+

Length

+

是

+

-

+

竖直滑动偏移。

+

animation

+

{

+

duration: number,

+

curve: Curve | CubicBezier | SpringCurve

+

}

+

否

+ 		  

动画配置：

+
  • duration: 滚动时长设置。
  • curve: 滚动曲线设置。
+
+ + +### scroller.scrollEdge + +scrollEdge\(value: Edge\): void + +滚动到容器边缘。 + +- 参数 + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

value

+

Edge

+

是

+

-

+ 		 
+ + +### scroller.scrollPage + +scrollPage\(value: \{ next: boolean, direction?: Axis \}\): void + +- 参数 + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

next

+

boolean

+

是

+

-

+

是否向下翻页。

+
+ + +### scroller.currentOffset + +scroller.currentOffset\(\): Object + +返回当前的滚动偏移量。 + +- 返回值 + + + + + + + + + + +

类型

+

描述

+

{

+

xOffset: number,

+

yOffset: number

+

}

+

xOffset: 水平滑动偏移;

+

yOffset: 竖直滑动偏移。

+
+ + +### scroller.scrollToIndex + +scroller.scrollToIndex\(value: number\): void + +滑动到指定Index。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>仅支持list组件。 + +- 参数 + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

value

+

number

+

是

+

-

+

要滑动到的列表项在列表中的索引值。

+
+ + +## 事件 + + + + + + + + + + + + + + + + +

名称

+

功能描述

+

onScroll(xOffset: number, yOffset: number) => void

+

滚动事件回调, 返回滚动时水平、竖直方向偏移量。

+

onScrollEdge(side: Edge) => void

+

滚动到边缘事件回调。

+

onScrollEnd() => void

+

滚动已经停止。

+
+ +## 示例 + +``` +@Entry +@Component +struct ScrollExample { + scroller: Scroller = new Scroller() + private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] + + build() { + Stack({ alignContent: Alignment.TopStart }) { + Scroll(this.scroller) { + Column() { + ForEach(this.arr, (item) => { + Text(item.toString()) + .width('90%').height(150).backgroundColor(0xFFFFFF) + .borderRadius(15).fontSize(16).textAlign(TextAlign.Center) + .margin({ top: 10 }) + }, item => item) + }.width('100%') + } + .scrollable(ScrollDirection.Vertical).scrollBar(BarState.On) + .scrollBarColor(Color.Gray).scrollBarWidth(30) + .onScroll((xOffset: number, yOffset: number) => { + console.info(xOffset + ' ' + yOffset) + }) + .onScrollEdge((side: Edge) => { + console.info('To the edge') + }) + .onScrollEnd(() => { + console.info('Scroll Stop') + }) + + Button('scroll 100') + .onClick(() => { // 点击后下滑100.0距离 + this.scroller.scrollTo({ xOffset: 0, yOffset: this.scroller.currentOffset().yOffset + 100 }) + }) + .margin({ top: 10, left: 20 }) + Button('back top') + .onClick(() => { // 点击后回到顶部 + this.scroller.scrollEdge(Edge.Top) + }) + .margin({ top: 60, left: 20 }) + Button('next page') + .onClick(() => { // 点击后下滑到底部 + this.scroller.scrollPage({ next: true }) + }) + .margin({ top: 110, left: 20 }) + }.width('100%').height('100%').backgroundColor(0xDCDCDC) + } +} +``` + +![](figures/scroll.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-stack.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-stack.md new file mode 100644 index 0000000000000000000000000000000000000000..fbfd0e7aece08fc15bb60a4ea5234b6e461433a7 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-stack.md @@ -0,0 +1,63 @@ +# Stack + +堆叠容器，子组件按照顺序依次入栈，后一个子组件覆盖前一个子组件。 + +## 权限列表 + +无 + +## 子组件 + +可以包含子组件。 + +## 接口 + +Stack\(options?: \{ alignContent?: Alignment \}\) + +- 参数 + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

alignContent

+

Alignment

+

否

+

Center

+

设置子组件在容器内的对齐方式。

+
+ + +## 示例 + +``` +@Entry +@Component +struct StackExample { + build() { + Stack({ alignContent: Alignment.Bottom }) { + Text('First child, show in bottom').width('90%').height('100%').backgroundColor(0xd2cab3).align(Alignment.Top) + Text('Second child, show in top').width('70%').height('60%').backgroundColor(0xc1cbac).align(Alignment.Top) + }.width('100%').height(150).margin({ top: 5 }) + } +} +``` + +![](figures/stack.jpg) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-swiper.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-swiper.md new file mode 100644 index 0000000000000000000000000000000000000000..3f17b80e4689842a6db810dea2d317c72a84dead --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-swiper.md @@ -0,0 +1,221 @@ +# Swiper + +滑动容器，提供切换子组件显示的能力。 + +## 权限列表 + +无 + +## 子组件 + +可以包含子组件。 + +## 接口 + +Swiper\(value:\{controller?: SwiperController\}\) + +- 参数 + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

controller

+

SwiperController

+

否

+

null

+

给组件绑定一个控制器，用来控制组件翻页。

+
+ + +## 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

index

+

number

+

0

+

设置当前在容器中显示的子组件的索引值。

+

autoPlay

+

boolean

+

false

+

子组件是否自动播放，自动播放状态下，导航点不可操作。

+

interval

+

number

+

3000

+

使用自动播放时播放的时间间隔，单位为毫秒。

+

indicator

+

boolean

+

true

+

是否启用导航点指示器。

+

loop

+

boolean

+

true

+

是否开启循环。

+

duration

+

number

+

400

+

子组件切换的动画时长，单位为毫秒。

+

vertical

+

boolean

+

false

+

是否为纵向滑动。

+

itemSpace

+

Length

+

0

+

设置子组件与子组件之间间隙。

+
+ +### SwiperController + +Swiper容器组件的控制器，可以将此对象绑定至Swiper组件，然后通过它控制翻页。 + + + + + + + + + + + + + +

接口名称

+

功能描述

+

showNext():void;

+

翻至下一页。

+

showPrevious():void;

+

翻至上一页。

+
+ +## 事件 + + + + + + + + + + +

名称

+

功能描述

+

onChange( index: number) => void

+

当前显示的组件索引变化时触发该事件。

+
+ +## 示例 + +``` +@Entry +@Component +struct SwiperExample { + private swiperController: SwiperController = new SwiperController() + + build() { + Column({ space: 5 }) { + Swiper(this.swiperController) { + Text('1').width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(20) + Text('2').width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(20) + Text('3').width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(20) + Text('4').width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(20) + Text('5').width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(20) + } + .index(1) + .autoPlay(true) + .interval(4000) + .indicator(true) // 默认开启指示点 + .loop(false) // 默认开启循环播放 + .duration(1000) + .vertical(false) // 默认横向切换 + .itemSpace(0) + .onChange((index: number) => { + console.info(index.toString()) + }) + + Flex({ justifyContent: FlexAlign.SpaceAround }) { + Button('next') + .onClick(() => { + this.swiperController.showNext() + }) + Button('preview') + .onClick(() => { + this.swiperController.showPrevious() + }) + } + }.margin({ top: 5 }) + } +} +``` + +![](figures/swiper.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-tabcontent.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-tabcontent.md new file mode 100644 index 0000000000000000000000000000000000000000..d105b121067dfa0e267faf25479b42426fb9fbe4 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-tabcontent.md @@ -0,0 +1,54 @@ +# TabContent + +仅在Tabs中使用，对应一个切换页签的内容视图。 + +## 权限列表 + +无 + +## 子组件 + +支持单个子组件。 + +## 接口 + +TabContent\(\) + +## 属性 + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

tabBar

+

string | {

+

icon?: string,

+

text?: string

+

}

+

-

+

设置TabBar上显示内容。

+
说明：

如果icon采用svg格式图源，则要求svg图源删除其自有宽高属性值。如采用带有自有宽高属性的svg图源，icon大小则是svg本身内置的宽高属性值大小。

+
+
+ +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- TabContent组件不支持设置通用宽度属性，其宽度默认撑满Tabs父组件。 +>- TabContent组件不支持设置通用高度属性，其高度由Tabs父组件高度与TabBar组件高度决定。 + +## 示例 + +见[Tabs](ts-container-tabs.md#section1131255321814)。 + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-tabs.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-tabs.md new file mode 100644 index 0000000000000000000000000000000000000000..43b4e2446c2737925a673a45aa38b1bb1eced548 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-container-tabs.md @@ -0,0 +1,283 @@ +# Tabs + +一种可以通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图。 + +## 支持设备 + + + + + + + + + + + + + + +

手机

+

平板

+

智慧屏

+

智能穿戴

+

支持

+

支持

+

不支持

+

不支持

+
+ +## 权限列表 + +无 + +## 子组件 + +包含子组件[TabContent](ts-container-tabcontent.md)。 + +## 接口说明 + +Tabs\(value: \{barPosition?: BarPosition, index?: number, controller?: [TabsController](#section104288910399)\}\) + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

barPosition

+

BarPosition

+

否

+

Start

+

指定页签位置来创建Tabs容器组件。

+

index

+

number

+

否

+

0

+

指定初次初始页签索引。

+

controller

+

TabsController

+

否

+ 		  

设置Tabs控制器。

+
+ +- BarPosition枚举说明 + + + + + + + + + + + + + +

名称

+

描述

+

Start

+

vertical属性方法设置为true时，页签位于容器左侧；vertical属性方法设置为false时，页签位于容器顶部。

+

End

+

vertical属性方法设置为true时，页签位于容器右侧；vertical属性方法设置为false时，页签位于容器底部。

+
+ + +### TabsController + +Tabs组件的控制器，用于控制Tabs组件进行页签切换。 + + + + + + + + + + +

接口名称

+

功能描述

+

changeIndex(value: number): void

+

控制Tabs切换到指定页签，index: 页签在Tabs里的索引值，索引值从0开始。

+
+ +## 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

vertical

+

boolean

+

是否为纵向Tab，默认为false。

+

是否为纵向Tab，默认为false。

+

scrollable

+

boolean

+

是否可以通过左右滑动进行页面切换，默认为true。

+

是否可以通过左右滑动进行页面切换，默认为true。

+

barMode

+

BarMode

+

TabBar布局模式。

+

TabBar布局模式。

+

barWidth

+

number

+

TabBar的宽度值，不设置时使用系统主题中的默认值。

+

TabBar的宽度值，不设置时使用系统主题中的默认值。

+

barHeight

+

number

+

TabBar的高度值，不设置时使用系统主题中的默认值。

+

TabBar的高度值，不设置时使用系统主题中的默认值。

+

animationDuration

+

number

+

200

+

TabContent滑动动画时长。

+
+ +- BarMode枚举说明 + + + + + + + + + + + + + +

名称

+

描述

+

Scrollable

+

TabBar使用实际布局宽度, 超过总长度后可滑动。

+

Fixed

+

所有TabBar平均分配宽度。

+
+ + +## 事件 + + + + + + + + + + +

名称

+

功能描述

+

onChange(callback: (index: number) => void)

+

Tab页签切换后触发的事件。

+
+ +## 示例 + +``` +@Entry +@Component +struct TabsExample { + private controller: TabsController = new TabsController() + + build() { + Column() { + Tabs({ barPosition: BarPosition.Start, index: 1, controller: this.controller }) { + TabContent() { + Column().width('100%').height('100%').backgroundColor(Color.Pink) + }.tabBar('pink') + + TabContent() { + Column().width('100%').height('100%').backgroundColor(Color.Yellow) + }.tabBar('yellow') + + TabContent() { + Column().width('100%').height('100%').backgroundColor(Color.Blue) + }.tabBar('blue') + + TabContent() { + Column().width('100%').height('100%').backgroundColor(Color.Green) + }.tabBar('green') + } + .vertical(true).scrollable(true).barMode(BarMode.Fixed) + .barWidth(70).barHeight(150).animationDuration(400) + .onChange((index: number) => { + console.info(index.toString()) + }) + .width('90%').backgroundColor(0xF5F5F5) + }.width('100%').height(150).margin({ top: 5 }) + } +} +``` + +![](figures/Tabs.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-custom-component-initialization.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-custom-component-initialization.md new file mode 100644 index 0000000000000000000000000000000000000000..027c5166881c3b522f5c77901c2d4103e3eb0fa9 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-custom-component-initialization.md @@ -0,0 +1,237 @@ +# 自定义组件初始化 + +本节介绍自定义组件状态变量的初始化规则。 + +组件的成员变量可以通过两种方式初始化： + +- 本地初始化，例如： + + ``` + @State counter: Counterr = new Counter() + ``` + +- 在构造组件时通过构造参数初始化，例如： + + ``` + MyComponent(counter: $myCounter) + ``` + + +具体允许哪种方式取决于状态变量的装饰器： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

装饰器类型

+

本地初始化

+

通过构造函数参数初始化

+

@State

+

必须

+

可选

+

@Prop

+

禁止

+

必须

+

@Link

+

禁止

+

必须

+

@StorageLink

+

必须

+

禁止

+

@StorageProp

+

必须

+

禁止

+

@Provide

+

必须

+

可选

+

@Consume

+

禁止

+

禁止

+

@ObjectLink

+

禁止

+

必须

+

常规成员变量

+

推荐

+

可选

+
+ +从上表中： + +- **@State**变量需要本地初始化，初始化的值可以被构造参数覆盖； +- **@Prop**和**@Link**变量必须且仅通过构造函数参数进行初始化。 + +通过构造函数方法初始化成员变量，需要遵循如下规则： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

从父组件中的变量（下）到子组件中的变量（右）

+

@state

+

@Link

+

@Prop

+

常规变量

+

@State

+

允许

+

允许

+

允许

+

允许

+

@Link

+

不允许

+

允许

+

不推荐

+

允许

+

@Prop

+

不允许

+

不允许

+

允许

+

允许

+

@StorageLink

+

不允许

+

允许

+

不允许

+

允许

+

@StorageProp

+

不允许

+

不允许

+

不允许

+

允许

+

常规变量

+

允许

+

不允许

+

不允许

+

允许

+
+ +从上表中： + +- 父组件的常规变量可以用于初始化子组件的**@State**变量，但不能用于初始化**@Link**或**@Prop**变量； +- 父组件的**@State**变量可以初始化子组件的**@Prop**、**@Link（通过$）**或常规变量，但不能初始化子组件的**@State**变量； +- 父组件的**@Link**变量可以初始化子组件的@Link或常规变量。但是初始化子组件的**@State**成员是语法错误，此外不建议初始化**@prop；** +- 父组件的**@Prop**变量可以初始化子组件的常规变量或**@Prop**变量，但不能初始化子组件的**@State**或**@Link**变量。 +- @StorageLink和@StorageProp不允许由父组件中传递到子组件。 +- 除了上述规则外，还需要遵循TS的强类型规则。 + +## 示例 + +``` +@Entry +@Component +struct Parent { + @State parentState: ClassA = new ClassA() + build() { + Row() { + CompA({aState: new ClassA, aLink: $parentState}) // valid + CompA({aLink: $parentState}) // valid + CompA() // invalid, @Link aLink remains uninitialized + CompA({aLink: new ClassA}) // invalid, @Link aLink must be a reference ($) to either @State or @Link variable + } + } +} + +@Component +struct CompA { + @State aState: boolean = false // must initialize locally + @Link aLink: ClassA // must not initialize locally + + build() { + Row() { + CompB({bLink: $aLink, // valid init a @Link with reference of another @Link, + bProp: this.aState}) // valid init a @Prop with value of a @State + CompB({aLink: $aState, // invalid: type missmatch expected ref to ClassA, provided reference to boolean + bProp: false}) // valid init a @Prop by constants value + } + } +} + +@Component +struct CompB { + @Link bLink: ClassA = new ClassA() // invalid, must not initialize locally + @Prop bProp: boolean = false // invalid must not initialize locally + + build() { + ... + } +} +``` + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-custom-component-lifecycle-callbacks.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-custom-component-lifecycle-callbacks.md new file mode 100644 index 0000000000000000000000000000000000000000..6ac4fd3581abf3bca796448c42a5ce263bd2c192 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-custom-component-lifecycle-callbacks.md @@ -0,0 +1,80 @@ +# 自定义组件生命周期回调函数 + +自定义组件的生命周期回调函数用于通知用户该自定义组件的生命周期，这些回调函数是私有的，在运行时由开发框架在特定的时间进行调用，不能从应用程序中手动调用这些回调函数。 + +## 生命周期回调函数定义 + + + + + + + + + + + + + + + + + + + + + + +

函数名

+

描述

+

aboutToAppear

+

函数在创建自定义组件的新实例后，在执行其build函数之前执行。

+

允许在aboutToAppear函数中改变状态变量，这些更改将在后续执行build函数中生效。

+

aboutToDisappear

+

函数在自定义组件析构消耗之前执行。

+

不允许在aboutToDisappear函数中改变状态变量，特别是@Link变量的修改可能会导致应用程序行为不稳定。

+

onPageShow

+

当此页面显示时触发一次。包括路由过程、应用进入前后台等场景，仅@Entry修饰的自定义组件生效。

+

onPageHide

+

当此页面消失时触发一次。包括路由过程、应用进入前后台等场景，仅@Entry修饰的自定义组件生效。

+

onBackPress

+

当用户点击返回按钮时触发，，仅@Entry修饰的自定义组件生效。

+
  • 返回true表示页面自己处理返回逻辑, 不进行页面路由。
  • 返回false表示使用默认的返回逻辑。
  • 不返回值会作为false处理。
+
+ +## 示例 + +``` +@Component +struct CountDownTimerComponent { + @State countDownFrom: number = 10 + private timerId: number = -1 + + private aboutToAppear(): void { + this.timerId = setInterval(() => { + if (this.countDownFrom <= 1) { + clearTimeout(this.timerId) + } + this.countDownFrom -= 1 + }, 1000) // decr counter by 1 every second + } + + private aboutToDisappear(): void { + if (this.timerId > 0) { + clearTimeout(this.timerId) + this.timerId = -1 + } + } + + build() { + Text(`${this.countDownFrom} sec left`) + } +} +``` + +上述示例表明，生命周期函数对于允许CountDownTimerComponent管理其计时器资源至关重要，类似的函数也包括异步从网络请求加载资源。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- 允许在生命周期函数中使用**Promise**和异步回调函数，比如网络资源获取，定时器设置等； +>- 不允许在生命周期函数中使用**async await**。 + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-declarative-syntax.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-declarative-syntax.md new file mode 100644 index 0000000000000000000000000000000000000000..8d62653ef1e808c14c8a06c7fd816221dd0736c0 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-declarative-syntax.md @@ -0,0 +1,15 @@ +# 声明式语法 + +- **[描述规范使用说明](ts-syntax-intro.md)** + +- **[通用UI描述规范](ts-general-ui-description-specifications.md)** + +- **[UI状态管理](ts-ui-state-management.md)** + +- **[渲染控制语法](ts-rending-control-syntax.md)** + +- **[深入理解组件化](ts-a-deep-dive-into-component.md)** + +- **[语法糖](ts-syntactic-sugar.md)** + + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-declarative-ui-description-specifications.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-declarative-ui-description-specifications.md new file mode 100644 index 0000000000000000000000000000000000000000..ecb6cdf8fa38ff10f34844541fbd2372240db307 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-declarative-ui-description-specifications.md @@ -0,0 +1,13 @@ +# 声明式UI描述规范 + +- **[无构造参数配置](ts-parameterless-configuration.md)** + +- **[必选参数构造配置](ts-configuration-with-mandatory-parameters.md)** + +- **[属性配置](ts-attribution-configuration.md)** + +- **[事件配置](ts-event-configuration.md)** + +- **[子组件配置](ts-child-component-configuration.md)** + + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-declarative.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-declarative.md new file mode 100644 index 0000000000000000000000000000000000000000..233c23c5f8646ae33b4eb4d42006d872de459102 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-declarative.md @@ -0,0 +1,15 @@ +# 基于TS扩展的声明式开发范式 + +- **[框架说明](ts-framework-framework.md)** + +- **[声明式语法](ts-declarative-syntax.md)** + +- **[组件](ts-components.md)** + +- **[动画](ts-animation.md)** + +- **[全局UI方法](ts-global-ui-methods.md)** + +- **[附录](ts-appendix.md)** + + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-circle.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-circle.md new file mode 100644 index 0000000000000000000000000000000000000000..1bb250d3f6cd15a16b61e00763c43e128c6074a3 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-circle.md @@ -0,0 +1,141 @@ +# Circle + +圆形绘制组件。 + +## 子组件 + +无 + +## 接口 + +Circle\(options?: \{width: Length, height: Length\}\) + +- 参数 + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

options

+

Object

+

否

+

-

+

见options参数说明。

+
+ +- options参数说明 + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

width

+

Length

+

是

+

-

+

宽度。

+

height

+

Length

+

是

+

-

+

高度。

+
+ + +## 属性 + + + + + + + + + + + + + + + + + + + + + + +

参数名称

+

参数类型

+

默认值

+

必填

+

参数描述

+

width

+

Length

+

0

+

否

+

圆所在矩形的宽度。

+

height

+

Length

+

0

+

否

+

圆所在矩形的高度。

+
+ +## 示例 + +``` +@Entry +@Component +struct CircleExample { + build() { + Flex({ justifyContent: FlexAlign.SpaceAround }) { + // 绘制一个直径为150的圆 + Circle({ width: 150, height: 150 }) + // 绘制一个直径为150的圆 + Circle().width(150).height(150) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/circle.png) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-ellipse.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-ellipse.md new file mode 100644 index 0000000000000000000000000000000000000000..9b39ecebd49726358db5414e5ccf3e05d37443df --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-ellipse.md @@ -0,0 +1,141 @@ +# Ellipse + +椭圆绘制组件。 + +## 子组件 + +无 + +## 接口 + +ellipse\(options?: \{width: Lenght, height: Length\}\) + +- 参数 + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

options

+

Object

+

否

+

-

+

见options参数说明。

+
+ +- options参数说明 + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

width

+

Length

+

是

+

-

+

宽度。

+

height

+

Length

+

是

+

-

+

高度。

+
+ + +## 属性 + + + + + + + + + + + + + + + + + + + + + + +

参数名称

+

参数类型

+

默认值

+

必填

+

参数描述

+

width

+

Length

+

0

+

否

+

椭圆所在矩形的宽度。

+

height

+

Length

+

0

+

否

+

椭圆所在矩形的高度。

+
+ +## 示例 + +``` +@Entry +@Component +struct EllipseExample { + build() { + Flex({ justifyContent: FlexAlign.SpaceAround }) { + // 在一个 150 * 70 的矩形框中绘制一个椭圆 + Ellipse({ width: 150, height: 80 }) + // 在一个 150 * 70 的矩形框中绘制一个椭圆 + Ellipse().width(150).height(80) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/ellipse-18.png) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-line.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-line.md new file mode 100644 index 0000000000000000000000000000000000000000..116472f467ed6cc04cec66431ba01c6820ca2899 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-line.md @@ -0,0 +1,161 @@ +# Line + +直线绘制组件。 + +## 子组件 + +无 + +## 接口 + +Line\(options?: \{width: Lenght, height: Length\}\) + +- 参数 + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

options

+

Object

+

否

+

-

+

见options参数说明。

+
+ +- options参数说明 + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

width

+

Length

+

是

+

-

+

宽度。

+

height

+

Length

+

是

+

-

+

高度。

+
+ + +## 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名称

+

参数类型

+

默认值

+

必填

+

参数描述

+

width

+

Length

+

0

+

否

+

直线所在矩形的宽度。

+

height

+

Length

+

0

+

否

+

直线所在矩形的高度。

+

startPoint

+

Point

+

[0, 0]

+

是

+

直线起点坐标(相对坐标)。

+

endPoint

+

Point

+

[0, 0]

+

是

+

直线终点坐标(相对坐标)。

+
+ +## 示例 + +``` +@Entry +@Component +struct LineExample { + build() { + Column() { + Line({ width: 50, height: 100 }).startPoint([0, 0]).endPoint([50, 100]) + Line().width(200).height(200).startPoint([50, 50]).endPoint([150, 150]) + }.margin({ top: 5 }) + } +} +``` + +![](figures/line.jpg) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-path.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-path.md new file mode 100644 index 0000000000000000000000000000000000000000..cc93b8f56698b094d83169b10994b32ad5df3bf1 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-path.md @@ -0,0 +1,109 @@ +# Path + +路径绘制组件。 + +## 子组件 + +无 + +## 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名称

+

参数类型

+

默认值

+

必填

+

参数描述

+

width

+

Length

+

0

+

否

+

路径所在矩形的宽度。

+

height

+

Length

+

0

+

否

+

路径所在矩形的高度。

+

commands

+

string

+

''

+

是

+

路径绘制的命令字符串。

+
+ +支持的绘制命令如下： + +- 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 + +如 commands\('M0 20 L50 50 L50 100 Z'\)定义了一条路径，开始于位置（0，20），到达位置（50，50）后再到（50，100），最后在（0，20）处关闭路径。 + +## 示例 + +``` +@Entry +@Component +struct PathExample { + build() { + Column({ space: 5 }) { + Text('Straight line').fontSize(9).fontColor(0xCCCCCC).width('90%') + Path().width(300).height(10).commands('M0 0 L900 0').stroke(Color.Black).strokeWidth(3) + + Text('Straight line graph').fontSize(9).fontColor(0xCCCCCC).width('90%') + Flex({ justifyContent: FlexAlign.SpaceAround }) { + // 先后执行MoveTo(150, 0), LineTo(300, 300), LineTo(0, 300), ClosePath() + Path().width(100).height(100).commands('M150 0 L300 300 L0 300 Z') + // 先后执行MoveTo(0, 0), HorizontalLineto(300), VerticalLineto(300), HorizontalLineto(0), ClosePath() + Path().width(100).height(100).commands('M0 0 H300 V300 H0 Z') + // 先后执行MoveTo(150, 0), LineTo(0, 150), LineTo(60, 300), LineTo(240, 300), LineTo(300, 150), ClosePath() + Path().width(100).height(100).commands('M150 0 L0 150 L60 300 L240 300 L300 150 Z') + }.width('100%') + + Text('Curve graphics').fontSize(9).fontColor(0xCCCCCC).width('90%') + Flex({ justifyContent: FlexAlign.SpaceAround }) { + // 先后执行MoveTo(0, 300),(150, 0)(300, 300)两点之间画曲线, ClosePath() + Path().width(100).height(100).commands("M0 300 S150 0 300 300 Z") + // 先后执行MoveTo(0, 150),(0, 150)(150, 0)(300, 150)三点之间依次画曲线, LineTo(150, 300),ClosePath() + Path().width(100).height(100).commands('M0 150 C0 150 150 0 300 150 L150 300 Z') + } + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/path.png) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-polygon.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-polygon.md new file mode 100644 index 0000000000000000000000000000000000000000..b085f3cc582000ba1c57872905b34f1e271c0350 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-polygon.md @@ -0,0 +1,156 @@ +# Polygon + +多边形绘制组件。 + +## 子组件 + +无 + +## 接口 + +Polygon\(value:\{options?: \{width: Lenght, height: Length\}\}\) + +- 参数 + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

options

+

Object

+

否

+

-

+

见options参数说明。

+
+ +- options参数说明 + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

width

+

Length

+

是

+

-

+

宽度。

+

height

+

Length

+

是

+

-

+

高度。

+
+ + +## 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名称

+

参数类型

+

默认值

+

必填

+

参数描述

+

width

+

Length

+

0

+

否

+

多边形所在矩形的宽度。

+

height

+

Length

+

0

+

否

+

多边形所在矩形的高度。

+

points

+

Array<Point>

+

-

+

是

+

多边形的顶点坐标列表。

+
+ +## 示例 + +``` +@Entry +@Component +struct PolygonExample { + build() { + Column({ space: 5 }) { + Flex({ justifyContent: FlexAlign.SpaceAround }) { + // 在 100 * 100 的矩形框中绘制一个三角形，起点(0, 0)，经过(50, 100)，终点(100, 0) + Polygon({ width: 100, height: 100 }).points([[0, 0], [50, 100], [100, 0]]) + // 在 100 * 100 的矩形框中绘制一个四边形，起点(0, 0)，经过(0, 100)和(100, 100)，终点(100, 0) + Polygon().width(100).height(100).points([[0, 0], [0, 100], [100, 100], [100, 0]]) + // 在 100 * 100 的矩形框中绘制一个五边形，起点(50, 0)，依次经过(0, 50)、(20, 100)和(80, 100)，终点(100, 50) + Polygon().width(100).height(100).points([[50, 0], [0, 50], [20, 100], [80, 100], [100, 50]]) + }.width('100%') + }.margin({ top: 5 }) + } +} +``` + +![](figures/polygon.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-polyline.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-polyline.md new file mode 100644 index 0000000000000000000000000000000000000000..0e689a00c3c8e7291b4d623bf7727539461e6240 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-polyline.md @@ -0,0 +1,154 @@ +# Polyline + +折线绘制组件。 + +## 子组件 + +无 + +## 接口 + +Polyline\(options?: \{width: Lenght, height: Length\}\) + +- 参数 + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

options

+

Object

+

否

+

-

+

见options参数说明。

+
+ +- options参数说明 + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

width

+

Length

+

是

+

-

+

宽度。

+

height

+

Length

+

是

+

-

+

高度。

+
+ + +## 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名称

+

参数类型

+

默认值

+

必填

+

参数描述

+

width

+

Length

+

0

+

否

+

折线所在矩形的宽度。

+

height

+

Length

+

0

+

否

+

折线所在矩形的高度。

+

points

+

Array<Point>

+

-

+

是

+

折线经过坐标点列表。

+
+ +## 示例 + +``` +@Entry +@Component +struct PolylineExample { + build() { + Column({ space: 5 }) { + Flex({ justifyContent: FlexAlign.SpaceAround }) { + // 在 100 * 100 的矩形框中绘制一段折线，起点(0, 0)，经过(20,60)，到达终点(100, 100) + Polyline({ width: 100, height: 100 }).points([[0, 0], [20, 60], [100, 100]]) + // 在 100 * 100 的矩形框中绘制一段折线，起点(0, 0)，经过(0,100)，到达终点(100, 100) + Polyline().width(100).height(100).points([[0, 0], [0, 100], [100, 100]]) + }.width('100%') + }.margin({ top: 5 }) + } +} +``` + +![](figures/polyline.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-rect.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-rect.md new file mode 100644 index 0000000000000000000000000000000000000000..fa70561c54fd53650d9c54c4ed0d7ae677f9940c --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-rect.md @@ -0,0 +1,214 @@ +# Rect + +矩形绘制组件。 + +## 子组件 + +无 + +## 接口 + +Rect\(value:\{options?: \{width: Length,height: Length,radius?: Length | Array\} | \{width: Length,height: Length,radiusWidth?: Length,radiusHeight?: Length\}\}\) + +- 参数 + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

options

+

Object

+

否

+

-

+

见options参数说明。

+
+ +- options参数说明 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

width

+

Length

+

是

+

-

+

宽度。

+

height

+

Length

+

是

+

-

+

高度。

+

radius

+

Length | Array<Length>

+

否

+

0

+

圆角半径，支持分别设置四个角的圆角度数。

+

radiusWidth

+

Length

+

否

+

0

+

圆角宽度。

+

radiusHeight

+

Length

+

否

+

0

+

圆角高度。

+
+ + +## 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名称

+

参数类型

+

默认值

+

必填

+

参数描述

+

width

+

Length

+

0

+

否

+

宽度。

+

height

+

Length

+

0

+

否

+

高度。

+

radiusWidth

+

Length

+

0

+

否

+

圆角的宽度，仅设置宽时宽高一致。

+

radiusHeight

+

Length

+

0

+

否

+

圆角的高度，仅设置高时宽高一致。

+

radius

+

Length | Array<Length>

+

0

+

否

+

圆角大小。

+
+ +## 示例 + +``` +@Entry +@Component +struct RectExample { + build() { + Column({ space: 5 }) { + Text('normal').fontSize(9).fontColor(0xCCCCCC).width('90%') + // 绘制90% * 50矩形 + Rect({ width: '90%', height: 50 }) + // 绘制90% * 50矩形 + Rect().width('90%').height(50) + + Text('with rounded corners').fontSize(9).fontColor(0xCCCCCC).width('90%') + // 绘制90% * 50矩形, 圆角宽高20 + Rect({ width: '90%', height: 50 }).radiusHeight(20).radiusWidth(20) + // 绘制90% * 50矩形, 圆角宽高20 + Rect({ width: '90%', height: 50 }).radius(20) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/rect.png) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-shape.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-shape.md new file mode 100644 index 0000000000000000000000000000000000000000..1360b77eb9a3ada7608632bb09b9647a385708c1 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components-shape.md @@ -0,0 +1,284 @@ +# Shape + +绘制组件的父组件，父组件中会描述所有绘制组件均支持的通用属性。 + +1、绘制组件使用Shape作为父组件，实现类似SVG的效果。 + +2、绘制组件单独使用，用于在页面上绘制指定的图形。 + +## 子组件 + +可以包含子组件。 + +## 接口 + +Shape\(target?: PixelMap\) + +- 参数 + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

target

+

PixelMap

+

否

+

null

+

绘制目标，可将图形绘制在指定的PixelMap对象中，若未设置，则在当前绘制目标中进行绘制。

+
+ + +## 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名称

+

参数类型

+

默认值

+

必填

+

参数描述

+

viewPort

+

{

+

x: Length,

+

y: Length,

+

width: Length,

+

height: Length

+

}

+

-

+

是

+

形状的视口。

+

fill

+

Color

+

Black

+

否

+

填充颜色。

+

stroke

+

Color

+

-

+

否

+

边框颜色。

+

strokeDashArray

+

Array<Length>

+

[]

+

否

+

设置边框的间隙。

+

strokeDashOffset

+

Length

+

0

+

否

+

边框绘制起点的偏移量。

+

strokeLineCap

+

LineCapStyle

+

Butt

+

否

+

路径端点绘制样式。

+

strokeLineJoin

+

LineJoinStyle

+

Miter

+

否

+

边框拐角绘制样式。

+

strokeMiterLimit

+

number

+

4

+

否

+

锐角绘制成斜角的极限值。

+

strokeOpacity

+

number

+

1

+

否

+

设置边框的不透明度。

+

strokeWidth

+

Length

+

1

+

否

+

设置边框的宽度。

+

antiAlias

+

boolean

+

true

+

否

+

是否开启抗锯齿。

+
+ +- LineJoinStyle枚举说明 + + + + + + + + + + + + + + + + +

名称

+

描述

+

Bevel

+

使用斜角连接路径段。

+

Miter

+

使用尖角连接路径段。

+

Round

+

使用圆角连接路径段。

+
+ + +## 示例 + +``` +@Entry +@Component +struct ShapeExample { + build() { + Column({ space: 5 }) { + Text('basic').fontSize(9).fontColor(0xCCCCCC).width(320) + // 在Shape的(-2, -2)点绘制一个 300 * 50 带边框的矩形,颜色0x317Af7,边框颜色黑色,边框宽度4,边框间隙20,向左偏移10,尖端样式圆角,拐角样式圆角,抗锯齿(默认开启) + // 在Shape的(-2, 58)点绘制一个 300 * 50 带边框的椭圆,颜色0x317Af7,边框颜色黑色,边框宽度4,边框间隙20,向左偏移10,尖端样式圆角,拐角样式圆角,抗锯齿(默认开启) + // 在Shape的(-2, 118)点绘制一个 300 * 10 线段,颜色0x317Af7,边框颜色黑色,宽度4,间隙20,向左偏移10,尖端样式圆角,拐角样式圆角,抗锯齿(默认开启) + Shape() { + Rect().width(300).height(50) + Ellipse().width(300).height(50).offset({ x: 0, y: 60 }) + Path().width(300).height(10).commands('M0 0 L900 0').offset({ x: 0, y: 120 }) + } + .viewPort({ x: -2, y: -2, width: 304, height: 124 }) + .fill(0x317Af7).stroke(Color.Black).strokeWidth(4) + .strokeDashArray([20]).strokeDashOffset(10).strokeLineCap(LineCapStyle.Round) + .strokeLineJoin(LineJoinStyle.Round).antiAlias(true) + // 在Shape的(-1, -1)点绘制一个 300 * 50 带边框的矩形,颜色0x317Af7,边框颜色黑色,边框宽度2 + Shape() { + Rect().width(300).height(50) + }.viewPort({ x: -1, y: -1, width: 302, height: 52 }).fill(0x317Af7).stroke(Color.Black).strokeWidth(2) + + Text('border').fontSize(9).fontColor(0xCCCCCC).width(320) + // 在Shape的(0, -5)点绘制一个 300 * 10 直线,颜色0xEE8443,边框宽度10,边框间隙20 + Shape() { + Path().width(300).height(10).commands('M0 0 L900 0') + }.viewPort({ x: 0, y: -5, width: 300, height: 10 }).stroke(0xEE8443).strokeWidth(10).strokeDashArray([20]) + // 在Shape的(0, -5)点绘制一个 300 * 10 直线,颜色0xEE8443,边框宽度10,边框间隙20,向左偏移10 + Shape() { + Path().width(300).height(10).commands('M0 0 L900 0') + } + .viewPort({ x: 0, y: -5, width: 300, height: 10 }) + .stroke(0xEE8443).strokeWidth(10).strokeDashArray([20]).strokeDashOffset(10) + // 在Shape的(0, -5)点绘制一个 300 * 10 直线,颜色0xEE8443,边框宽度10,透明度0.5 + Shape() { + Path().width(300).height(10).commands('M0 0 L900 0') + }.viewPort({ x: 0, y: -5, width: 300, height: 10 }).stroke(0xEE8443).strokeWidth(10).strokeOpacity(0.5) + // 在Shape的(0, -5)点绘制一个 300 * 10 直线,颜色0xEE8443,边框宽度10,边框间隙20,向左偏移10,尖端样式圆角 + Shape() { + Path().width(300).height(10).commands('M0 0 L900 0') + } + .viewPort({ x: 0, y: -5, width: 300, height: 10 }) + .stroke(0xEE8443).strokeWidth(10).strokeDashArray([20]).strokeLineCap(LineCapStyle.Round) + // 在Shape的(-5, -5)点绘制一个 300 * 50 带边框的矩形,颜色0x317Af7,边框宽度10,边框颜色0xEE8443,拐角样式圆角 + Shape() { + Rect().width(300).height(50) + } + .viewPort({ x: -5, y: -5, width: 310, height: 60 }) + .fill(0x317Af7).stroke(0xEE8443).strokeWidth(10).strokeLineJoin(LineJoinStyle.Round) + Shape() { + Path().width(300).height(60).commands('M0 0 L400 0 L400 200 Z') + } + .viewPort({ x: -80, y: -5, width: 310, height: 100 }) + .fill(0x317Af7).stroke(0xEE8443).strokeWidth(10) + .strokeLineJoin(LineJoinStyle.Miter).strokeMiterLimit(5) + }.width('100%').margin({ top: 15 }) + } +} +``` + +![](figures/shape.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components.md new file mode 100644 index 0000000000000000000000000000000000000000..de447a92abe2690386737526da62d743e1bb43e7 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-drawing-components.md @@ -0,0 +1,19 @@ +# 绘制组件 + +- **[Circle](ts-drawing-components-circle.md)** + +- **[Ellipse](ts-drawing-components-ellipse.md)** + +- **[Line](ts-drawing-components-line.md)** + +- **[Polyline](ts-drawing-components-polyline.md)** + +- **[Polygon](ts-drawing-components-polygon.md)** + +- **[Path](ts-drawing-components-path.md)** + +- **[Rect](ts-drawing-components-rect.md)** + +- **[Shape](ts-drawing-components-shape.md)** + + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-event-configuration.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-event-configuration.md new file mode 100644 index 0000000000000000000000000000000000000000..645eaa8fe72eb182fb2dd9765a4b141e6660640d --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-event-configuration.md @@ -0,0 +1,42 @@ +# 事件配置 + +通过事件方法可以配置组件支持的事件。 + +- 使用lambda表达式配置组件的事件方法： + + ``` + // Counter is a private data variable defined in the component. + Button('add counter') + .onClick(() => { + this.counter += 2 + }) + ``` + + +- 使用匿名函数表达式配置组件的事件方法： + + 此时要求我们使用**bind**，以确保函数体中的this引用包含的组件。 + + ``` + // Counter is a private data variable defined in the component. + Button('add counter') + .onClick(function () { + this.counter += 2 + }.bind(this)) + ``` + + +- 使用组件的成员函数配置组件的事件方法： + + ``` + myClickHandler(): void { + // do something + } + + ... + + Button('add counter') + .onClick(this.myClickHandler) + ``` + + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-explicit-animation.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-explicit-animation.md new file mode 100644 index 0000000000000000000000000000000000000000..87607d1338b53ea25838850a90d52dd873114190 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-explicit-animation.md @@ -0,0 +1,166 @@ +# 显式动画 + + + + + + + + + + +

接口名称

+

功能描述

+

animateTo(value: AnimationOption, event: ()=> void) : void

+

提供全局animateTo显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效。

+

event指定显示动效的闭包函数，在闭包函数中导致的状态变化系统会自动插入过渡动画。

+
+ +## AnimationOption对象说明 + +- 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

属性名称

+

属性类型

+

默认值

+

描述

+

duration

+

number

+

1000

+

动画持续时间，单位为毫秒。

+

tempo

+

number

+

1.0

+

动画的播放速度，值越大动画播放越快，值越小播放越慢，为0时无动画效果。

+

curve

+

Curve | Curves

+

Linear

+

动画曲线。

+

delay

+

number

+

0

+

单位为ms(毫秒)，默认不延时播放。

+

iterations

+

number

+

1

+

默认播放一次，设置为-1时表示无限次播放。

+

playMode

+

PlayMode

+

Normal

+

设置动画播放模式，默认播放完成后重头开始播放。

+
+ + +- 接口 + + + + + + + + + + +

名称

+

功能描述

+

onFinish() => void

+

动效播放完成回调。

+
+ + +## 示例 + +``` +@Entry +@Component +struct AnimateToExample { + @State widthSize: number = 200 + @State heightSize: number = 100 + private flag: boolean = true + + build() { + Column() { + Button('click me') + .width(this.widthSize) + .height(this.heightSize) + .backgroundColor(0x317aff) + .onClick((event: ClickEvent) => { + // 对Button组件的宽高属性进行动画配置 + if (this.flag) { + animateTo({ + duration: 1000, // 动画时长 + tempo: 0.5, // 播放速率 + curve: Curve.EaseInOut, // 动画曲线 + delay: 200, // 动画延迟 + iterations: 1, // 播放次数 + playMode: PlayMode.Normal, // 动画模式 + onFinish: () => { + console.info('play end') + } + }, () => { + this.widthSize = 100 + this.heightSize = 50 + }) + } else { + animateTo({ + duration: 200, // 动画时长 + curve: Curve.Ease, // 动画曲线 + delay: 200, // 动画延迟 + iterations: 1, // 播放次数 + playMode: PlayMode.Normal, // 动画模式 + onFinish: () => { + console.info('play end') + } + }, () => { + this.widthSize = 200 + this.heightSize = 100 + }) + } + this.flag = !this.flag + }) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/AnimateTo.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-framework-directory.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-framework-directory.md new file mode 100644 index 0000000000000000000000000000000000000000..e06ec5e37c99862c71d6087fbd90e170fdcb02ee --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-framework-directory.md @@ -0,0 +1,19 @@ +# 目录结构 + +FA应用的ets模块\(entry/src/main\)的典型开发目录结构如下： + +![](figures/zh-cn_image_0000001182200571.png) + +**目录结构中文件分类如下：** + +- .ets结尾的ETS（Extended TypeScript）文件，这个文件用于描述UI布局、样式、事件交互和页面逻辑。 + +**各个文件夹和文件的作用：** + +- **app.ets**文件用于全局应用逻辑和应用生命周期管理。 +- **pages**目录用于存放所有组件页面。 +- **common**目录用于存放公共代码文件，比如：自定义组件和公共方法。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- 页面支持导入TypeScript和JavaScript文件。 + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-framework-file-access-rules.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-framework-file-access-rules.md new file mode 100644 index 0000000000000000000000000000000000000000..664016a0554cc9feeeb4c33e4d6386875aee336e --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-framework-file-access-rules.md @@ -0,0 +1,67 @@ +# 应用代码文件访问规则 + +应用代码文件可通过如下方式访问： + +- 使用相对路径引用代码文件，比如：上一级目录：../common/utils/utils.ets，当前目录：./common/utils/utils.ets。 +- 使用当前模块根路径引用代码文件，比如：common/utils/utils.ets。 +- 公共代码文件推荐放在**common**目录下。 + +## 示例 + +``` +import { FoodData, FoodList } from "../common/utils/utils.ets"; + +@Entry +@Component +struct FoodCategoryList { + private foodItems: FoodData[] = [ + new FoodData("Tomato"), + new FoodData("Strawberry"), + new FoodData("Cucumber") + ] + build() { + Column() { + FoodList({ foodItems: this.foodItems }) + } + } +} +``` + +导入文件示例： + +``` +//common/utils/utils.ets + +export class FoodData { + name: string; + constructor(name: string) { + this.name = name; + } +} + +@Component +export struct FoodList { + private foodItems: FoodData[] + + build() { + Column() { + Flex({justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center}) { + Text('Food List') + .fontSize(20) + } + .width(200) + .height(56) + .backgroundColor('#FFf1f3f5') + List() { + ForEach(this.foodItems, item => { + ListItem() { + Text(item.name) + .fontSize(14) + } + }, item => item.toString()) + } + } + } +} +``` + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-framework-file.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-framework-file.md new file mode 100644 index 0000000000000000000000000000000000000000..525caf67e173f4717fb25a4066627ecf7c0dac56 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-framework-file.md @@ -0,0 +1,7 @@ +# 文件组织 + +- **[目录结构](ts-framework-directory.md)** + +- **[应用代码文件访问规则](ts-framework-file-access-rules.md)** + + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-framework-framework.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-framework-framework.md new file mode 100644 index 0000000000000000000000000000000000000000..0611691cfe97c4bb1794cfe48b7e9ed68bc8fade --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-framework-framework.md @@ -0,0 +1,13 @@ +# 框架说明 + +- **[文件组织](ts-framework-file.md)** + +- **[js标签配置](ts-framework-js-tag.md)** + +- **[资源访问](ts-resource-access.md)** + +- **[像素单位](ts-pixel-units.md)** + +- **[类型定义](ts-types.md)** + + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-framework-js-tag.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-framework-js-tag.md new file mode 100644 index 0000000000000000000000000000000000000000..f0ac1329d52723342781f485af314ccf358dc8a2 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-framework-js-tag.md @@ -0,0 +1,186 @@ +# js标签配置 + +开发框架需要应用的[config.json](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/basic-config-file-overview-0000000000011951)中配置相关的js标签，其中包含了实例名称、页面路由、视图窗口配置信息。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

标签

+

类型

+

默认值

+

必填

+

描述

+

name

+

string

+

default

+

是

+

标识ETS实例的名字。

+

pages

+

Array

+

-

+

是

+

页面路由信息，详见pages说明。

+

window

+

Object

+

-

+

否

+

视图窗口配置信息，详见window说明。

+

mode

+

Object

+

-

+

否

+

配置Js Component运行类型与语法风格，详见mode说明。

+
+ +## pages + +定义每个页面入口组件的路由信息，每个页面由页面路径和页面名组成，页面的文件名就是页面名。比如： + +``` +{ + "pages": [ + "pages/index", + "pages/detail" + ] +} +``` + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- pages列表中第一个页面为应用的首页入口。 +>- 页面文件名不能使用组件名称，比如：Text.ets、Button.ets等。 +>- 每个页面文件中必须包含[页面入口组件](ts-component-based-entry.md)\(@Entry装饰\)。 + +## window + +window用于配置相关视图显示窗口，支持配置如下属性： + + + + + + + + + + + + +

类型

+

默认值

+

说明

+

designWidth

+

-

+

配置视图显示的逻辑宽度，缺省默认720（智能穿戴默认454）。视图显示的逻辑宽度决定了lpx像素单位大小，如designWidth配置720时，在视图宽度为1440物理像素时，1lpx为2物理像素。详见lpx像素单位说明。

+
+ +``` +{ + ... + "window": { + "designWidth": 720 + } + ... +} +``` + +## mode + +mode用于配置JS Component的运行类型与语法风格，支持如下属性： + + + + + + + + + + + + + + + + +

类型

+

默认值

+

说明

+

type

+

-

+

配置该JS Component的运行类型，可选值为：

+
  • pageAbility：以ability的方式运行该JS Component。
  • form：以卡片的方式运行该JS Component。
+

syntax

+

-

+

配置该JS Component的语法风格，可选值为：

+
  • hml：以hml/css/js风格进行编写。
  • ets：以声明式语法风格进行编写。
+
+ +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- 不支持同时配置type类型为form，syntax类型为ets。 + +## 示例 + +config.json: + +``` +{ + "app": { + "bundleName": "com.example.player", + "version": { + "code": 1, + "name": "1.0" + }, + "vendor": "example" + }, + "module": { + "js": [{ + "name": "default", + "pages": [ + "pages/index", + "pages/detail" + ], + "window": { + "designWidth": 720 + }, + "mode": { + "type": "pageAbility", + "syntax": "ets" + }, + }], + "abilities": [{ + ... + }] + } +} +``` + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-function-build.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-function-build.md new file mode 100644 index 0000000000000000000000000000000000000000..d7729bbdff87429d9a95907cb770d6c71fabdc9d --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-function-build.md @@ -0,0 +1,10 @@ +# build函数 + +**build**函数满足**Builder**构造器接口定义，用于定义组件的声明式UI描述。 + +``` +interface Builder { + build: () => void +} +``` + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-general-ui-concepts.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-general-ui-concepts.md new file mode 100644 index 0000000000000000000000000000000000000000..73590b6ae11b1db5dd65f3cfc56fa2bf5f67e262 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-general-ui-concepts.md @@ -0,0 +1,43 @@ +# 基本概念 + +基于TS扩展的声明式开发范式提供了一系列基本组件，这些组件以声明方式进行组合和扩展来描述应用程序的UI界面，并且还提供了基本的数据绑定和事件处理机制，帮助开发者实现应用交互逻辑。 + +## HelloWorld基本示例 + +``` +// An example of displaying Hello World. After you click the button, Hello UI is displayed. +@Entry +@Component +struct Hello { + @State myText: string = 'World' + build() { + Column() { + Text('Hello') + .fontSize(30) + Text(this.myText) + .fontSize(32) + Divider() + Button() { + Text('Click me') + .fontColor(Color.Red) + }.onClick(() => { + this.myText = 'UI' + }) + .width(500) + .height(200) + } + } +} +``` + +## 基本概念描述 + +上述示例代码描述了简单页面的结构，并介绍了以下基本概念： + +- **装饰器：**装饰类、结构、方法和变量，并为它们赋予特殊含义。例如，上例中的**@Entry**、**@Component**和**@State**都是装饰器； +- **自定义组件：**可重用的UI单元，可以与其他组件组合，如**@Component**装饰的**struct Hello**； +- **UI描述：**声明性描述UI结构，例如**build\(\)**方法中的代码块； +- **内置组件：**框架中默认内置的基本组件和布局组件，开发者可以直接调用，如**Column**、**Text**、**Divider**、**Button**等； +- **属性方法：**用于配置组件属性，如**fontSize\(\)**、**width\(\)**、**height\(\)**、**color\(\)**等； +- **事件方法：**用于将组件响应逻辑添加到事件中。逻辑是通过事件方法设置的。例如，按钮后面的**onClick\(\)**。 + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-general-ui-description-specifications.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-general-ui-description-specifications.md new file mode 100644 index 0000000000000000000000000000000000000000..664bd7b5c75d5b53f19436a29e5e116b6dbd3008 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-general-ui-description-specifications.md @@ -0,0 +1,9 @@ +# 通用UI描述规范 + +- **[基本概念](ts-general-ui-concepts.md)** + +- **[声明式UI描述规范](ts-declarative-ui-description-specifications.md)** + +- **[组件化](ts-component-based.md)** + + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-gesture-processing.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-gesture-processing.md new file mode 100644 index 0000000000000000000000000000000000000000..a8323a10762d7676f59f1652f2b8b12322b0e08c --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-gesture-processing.md @@ -0,0 +1,9 @@ +# 手势处理 + +- **[绑定手势方法](ts-gesture-settings.md)** + +- **[基础手势](ts-basic-gestures.md)** + +- **[组合手势](ts-combined-gestures.md)** + + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-gesture-settings.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-gesture-settings.md new file mode 100644 index 0000000000000000000000000000000000000000..332b4beb52238776d91f2d23d561377ba2150fd5 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-gesture-settings.md @@ -0,0 +1,247 @@ +# 绑定手势方法 + +可以通过如下属性给组件绑定手势识别，手势识别成功后可以通过事件回调通知组件。 + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

gesture

+

gesture: GestureType,

+

mask?: GestureMask

+

gesture: -，

+

mask: GestureMask.Normal

+

绑定手势识别。

+

gesture: 绑定的手势类型， mask: 事件响应设置。

+

priorityGesture

+

gesture: GestureType,

+

mask?: GestureMask

+

gesture: -，

+

mask: GestureMask.Normal

+

绑定优先识别手势。

+

gesture: 绑定的手势类型， mask: 事件响应设置。

+
说明：
  • 默认情况下，子组件优先于父组件识别手势，当父组件配置priorityGesture时，父组件优先于子组件进行识别。
+
+

parallelGesture

+

gesture: GestureType,

+

mask?: GestureMask

+

gesture: -，

+

mask: GestureMask.Normal

+

绑定可与子组件手势同时触发的手势。

+

gesture: 绑定的手势类型， mask: 事件响应设置。

+
说明：
  • 手势事件为非冒泡事件。父组件设置parallelGesture时，父子组件相同的手势事件都可以触发，实现类似冒泡效果。
+
+
+ +- GestureMask枚举说明 + + + + + + + + + + + + + +

名称

+

描述

+

Normal

+

不屏蔽子组件的手势，按照默认手势识别顺序进行识别。

+

IgnoreInternal

+

屏蔽子组件的手势，仅当前容器的手势进行识别。

+
说明：
  • 子组件上系统内置的手势不会被屏蔽，如子组件为List组件时，内置的滑动手势仍然会触发。
+
+
+ + +- 系统提供如下Gesture类型 + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

描述

+

TapGesture

+

点击手势，支持单次点击、多次点击识别。

+

LongPressGesture

+

长按手势。

+

PanGesture

+

平移手势。

+

PinchGesture

+

捏合手势。

+

RotationGesture

+

旋转手势。

+

GestureGroup

+

手势识别组，多种手势组合为复合手势，支持连续识别、并行识别和互斥识别。

+
+ + +## 响应手势事件 + +组件通过gesture方法绑定手势对象，可以通过手势对象提供的事件相应响应手势操作。如通过TapGesture对象的onAction事件响应点击事件。具体事件定义见各个手势对象章节。 + +- TapGesture事件说明 + + + + + + + + + + +

名称

+

功能描述

+

onAction((event?: GestureEvent) => void)

+

Tap手势识别成功回调。

+
+ + +- GestureEvent对象说明 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

属性名称

+

属性类型

+

描述

+

repeat

+

boolean

+

事件是否为重复触发事件，用于LongPressGesture场景。

+

offsetX

+

number

+

手势事件偏移量，用于PanGesture手势触发场景，单位为vp。

+

offsetY

+

number

+

手势事件偏移量，用于PanGesture手势触发场景，单位为vp。

+

scale

+

number

+

缩放比例，用于PinchGesture手势触发场景。

+

pinchCenterX

+

number

+

捏合手势中心点X轴坐标，用于PinchGesture手势触发场景，单位为px。

+

pinchCenterY

+

number

+

捏合手势中心点Y轴坐标，用于PinchGesture手势触发场景，单位为px。

+

angle

+

number

+

旋转角度，用于RotationGesture手势触发场景。

+

timestamp

+

number

+

事件时间戳。

+
+ + +## 示例 + +``` +@Entry +@Component +struct GestureSettingsExample { + @State value: string = '' + + build() { + Column() { + Text('Click\n' + this.value).gesture(TapGesture() + .onAction(() => { + this.value = 'gesture onAction' + })) + }.height(200).width(300).padding(60).border({ width: 1 }).margin(30) + //设置为priorityGesture时，会优先识别该绑定手势忽略内部gesture手势 + .priorityGesture( + TapGesture() + .onAction(() => { + this.value = 'priorityGesture onAction' + }), GestureMask.IgnoreInternal + ) + } +} +``` + +![](figures/GestureSetting.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-global-ui-methods.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-global-ui-methods.md new file mode 100644 index 0000000000000000000000000000000000000000..fd8062a4ae8b5a66f88004d9de2ed86671858706 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-global-ui-methods.md @@ -0,0 +1,11 @@ +# 全局UI方法 + +- **[警告弹窗](ts-methods-alert-dialog-box.md)** + +- **[自定义弹窗](ts-methods-custom-dialog-box.md)** + +- **[图片缓存](ts-methods-image-cache.md)** + +- **[媒体查询](ts-methods-media-query.md)** + + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-instantiating-a-struct-without-new-keyword.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-instantiating-a-struct-without-new-keyword.md new file mode 100644 index 0000000000000000000000000000000000000000..7031c70ff7f202523e19cf41311dc5e2073610ae --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-instantiating-a-struct-without-new-keyword.md @@ -0,0 +1,23 @@ +# 在实例化过程中省略"new" + +对于**struct**的实例化，可以省略**new**。 + +``` +// 定义 +@Component +struct MyComponent { + build() { + } +} + +// 使用 +Column() { + MyComponent() +} + +// 等价于 +new Column() { + new MyComponent() +} +``` + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-interpolation-calculation.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-interpolation-calculation.md new file mode 100644 index 0000000000000000000000000000000000000000..369194579f0be341f19d145a3492d302fdd17f87 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-interpolation-calculation.md @@ -0,0 +1,296 @@ +# 插值计算 + +## 导入模块 + +``` +import curves from '@ohos.curves' +``` + +## 权限 + +无 + +## curves.init + +init\(curve?: Curve\): Object + +插值曲线的初始化函数，可以根据入参创建一个插值曲线对象。 + +- 参数 + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

默认值

+

说明

+

curve

+

Curve

+

否

+

Linear

+

曲线对象。

+
+ +- 返回值 + + 曲线对象Object。 + + +## curves.steps + +steps\(count: number, end: boolean\): Object + +构造阶梯曲线对象。 + +- 参数： + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

默认值

+

说明

+

count

+

number

+

是

+

-

+

阶梯的数量，需要为正整数。

+

end

+

boolean

+

否

+

true

+

在每个间隔的起点或是终点发生阶跃变化 ，默认值为true，即在终点发生阶跃变化。

+
+ +- 返回值 + + 曲线对象Object。 + + +## curves.cubicBezier + +cubicBezier\(x1: number, y1: number, x2: number, y2: number\): Object + +构造三阶贝塞尔曲线对象，曲线的值必须处于0-1之间。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

x1

+

number

+

是

+

确定贝塞尔曲线第一点横坐标。

+

y1

+

number

+

是

+

确定贝塞尔曲线第一点纵坐标。

+

x2

+

number

+

是

+

确定贝塞尔曲线第二点横坐标。

+

y2

+

number

+

是

+

确定贝塞尔曲线第二点纵坐标。

+
+ +- 返回值 + + 曲线对象Object。 + + +## curves.spring + +spring\(velocity: number, mass: number, stiffness: number, damping: number\): Object + +构造弹簧曲线对象。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

velocity

+

number

+

是

+

初始速度。

+

mass

+

number

+

是

+

质量。

+

stiffness

+

number

+

是

+

刚度。

+

damping

+

number

+

是

+

阻尼。

+
+ +- 返回值 + + 曲线对象Object。 + + +## 示例 + +``` +import Curves from '@ohos.curves' +let curve1 = Curves.init() // 创建一个默认线性插值曲线 +let curve2 = Curves.init(Curve.EaseIn) // 创建一个默认先慢后快插值曲线 +let curve3 = Curves.spring(100, 1, 228, 30) // 创建一个弹簧插值曲线 +let curve3 = Curves.cubicBezier(0.1, 0.0, 0.1, 1.0) // 创建一个三阶贝塞尔曲线 +``` + +曲线对象只能通过上面的接口创建。 + + + + + + + + + + +

接口名称

+

功能描述

+

interpolate(time: number): number

+

插值曲线的插值计算函数，可以通过传入的归一化时间参数返回当前的插值。

+

time: 当前的归一化时间参数，有效值范围0到1。

+

返回归一化time时间点对应的曲线插值。

+
+ +- 示例 + + ``` + import Curves from '@ohos.curves' + let curve = Curves.init(Curve.EaseIn) // 创建一个默认先慢后快插值曲线 + let value: number = curve.interpolate(0.5) // 计算得到时间到一半时的插值 + ``` + + +## 整体示例 + +``` +import Curves from '@ohos.curves' +@Entry +@Component +struct ImageComponent { + @State widthSize: number = 200 + @State heightSize: number = 200 + build() { + Column() { + Text() + .margin({top:100}) + .width(this.widthSize) + .height(this.heightSize) + .backgroundColor(Color.Red) + .onClick(()=> { + let curve = Curves.cubicBezier(0.25, 0.1, 0.25, 1.0); + this.widthSize = curve.interpolate(0.5) * this.widthSize; + this.heightSize = curve.interpolate(0.5) * this.heightSize; + }) + .animation({duration: 2000 , curve: Curves.spring(0.25, 0.1, 0.25, 1.0)}) + }.width("100%").height("100%") + } +} +``` + +![](figures/5-20.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-managing-application-states-apis.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-managing-application-states-apis.md new file mode 100644 index 0000000000000000000000000000000000000000..76c840fbbeb71f09b53fa50ed7b91b3bfaefbf2c --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-managing-application-states-apis.md @@ -0,0 +1,9 @@ +# 接口 + +- **[应用程序的数据存储](ts-application-states-appstorage.md)** + +- **[持久化数据管理](ts-application-states-apis-persistentstorage.md)** + +- **[环境变量](ts-application-states-apis-environment.md)** + + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-managing-application-states.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-managing-application-states.md new file mode 100644 index 0000000000000000000000000000000000000000..5d1df374e641f880d375c9c8b57f6f0aa6fe490c --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-managing-application-states.md @@ -0,0 +1,7 @@ +# 管理应用程序的状态 + +- **[接口](ts-managing-application-states-apis.md)** + +- **[AppStorage与组件同步](ts-application-states-storagelink-storageprop.md)** + + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-managing-component-states.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-managing-component-states.md new file mode 100644 index 0000000000000000000000000000000000000000..3432c79f2d34fe7dda48e8bb9cb83000fd90060e --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-managing-component-states.md @@ -0,0 +1,9 @@ +# 管理组件拥有的状态 + +- **[@State](ts-component-states-state.md)** + +- **[@Prop](ts-component-states-prop.md)** + +- **[@Link](ts-component-states-link.md)** + + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-managing-other-states.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-managing-other-states.md new file mode 100644 index 0000000000000000000000000000000000000000..a3a2768f1e056fb67ef7b8f3b688a0fd67322c6d --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-managing-other-states.md @@ -0,0 +1,9 @@ +# 其他类目的状态管理 + +- **[Observed和ObjectLink数据管理](ts-other-states-observed-objectlink.md)** + +- **[@Consume和@Provide数据管理](ts-other-states-consume-provide.md)** + +- **[@Watch](ts-other-states-watch.md)** + + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-matrix-transformation.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-matrix-transformation.md new file mode 100644 index 0000000000000000000000000000000000000000..9174218ba0e41de5428223fe2fa56636ca0ed279 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-matrix-transformation.md @@ -0,0 +1,857 @@ +# 矩阵变换 + +## 导入模块 + +``` +import matrix4 from '@ohos.matrix4' +``` + +## 权限 + +无 + +## matrix4.init + +init\(array: Array\): Object + +Matrix的构造函数，可以通过传入的参数创建一个四阶矩阵，矩阵为列优先。 + +- 参数 + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

默认值

+

说明

+

array

+

Array<number>

+

是

+

[1, 0, 0, 0,

+

0, 1, 0, 0,

+

0, 0, 1, 0,

+

0, 0, 0, 1]

+

参数为长度为16（4*4）的number数组, 详情见参数描述。

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

类型

+

说明

+

Object

+

根据入参创建的四阶矩阵对象。

+
+ +- 参数描述 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

m00

+

number

+

是

+

x轴缩放值，单位矩阵默认为1。

+

m01

+

number

+

是

+

第2个值，xyz轴旋转会影响这个值。

+

m02

+

number

+

是

+

第3个值，xyz轴旋转会影响这个值。

+

m03

+

number

+

是

+

无实际意义。

+

m10

+

number

+

是

+

第5个值，xyz轴旋转会影响这个值。

+

m11

+

number

+

是

+

y轴缩放值，单位矩阵默认为1。

+

m12

+

number

+

是

+

第7个值，xyz轴旋转会影响这个值。

+

m13

+

number

+

是

+

无实际意义。

+

m20

+

number

+

是

+

第9个值，xyz轴旋转会影响这个值。

+

m21

+

number

+

是

+

第10个值，xyz轴旋转会影响这个值。

+

m22

+

number

+

是

+

z轴缩放值，单位矩阵默认为1。

+

m23

+

number

+

是

+

无实际意义。

+

m30

+

number

+

是

+

x轴平移值，单位px，单位矩阵默认为0。

+

m31

+

number

+

是

+

y轴平移值，单位px，单位矩阵默认为0。

+

m32

+

number

+

是

+

z轴平移值，单位px，单位矩阵默认为0。

+

m33

+

number

+

是

+

齐次坐标下生效，产生透视投影效果。

+
+ +- 示例 + + ``` + import Matrix4 from '@ohos.matrix4' + // 创建一个四阶矩阵 + let matrix = Matrix4.init([1.0, 0.0, 0.0, 0.0, + 0.0, 1.0, 0.0, 0.0, + 0.0, 0.0, 1.0, 0.0, + 0.0, 0.0, 0.0, 1.0]) + ``` + + +## matrix4.identity + +identity\(\): Object + +Matrix的初始化函数，可以返回一个单位矩阵对象。 + +- 返回值 + + + + + + + + + + +

类型

+

说明

+

Object

+

单位矩阵对象。

+
+ +- 示例 + + ``` + // matrix1 和 matrix2 效果一致 + import Matrix4 from '@ohos.matrix4' + let matrix = Matrix4.init([1.0, 0.0, 0.0, 0.0, + 0.0, 1.0, 0.0, 0.0, + 0.0, 0.0, 1.0, 0.0, + 0.0, 0.0, 0.0, 1.0]) + let matrix2 = Matrix4.identity() + ``` + + +## matrix4.copy + +copy\(\): Object + +Matrix的拷贝函数，可以拷贝一份当前的矩阵对象。 + +- 返回值 + + + + + + + + + + +

类型

+

说明

+

Object

+

当前矩阵的拷贝对象。

+
+ +- 示例 + + ``` + import Matrix4 from '@ohos.matrix4' + @Entry + @Component + struct Test { + private matrix1 = Matrix4.identity().translate({x:100}) + private matrix2 = this.matrix1.copy().scale({x:2}) + build() { + Column() { + Image($r("app.media.bg1")) + .width("40%") + .height(100) + .transform(this.matrix1) + Image($r("app.media.bg2")) + .width("40%") + .height(100) + .margin({top:50}) + .transform(this.matrix2) + } + } + } + ``` + + ![](figures/s1.png) + + +## Matrix4 + +### combine + +combine\(matrix: Matrix4\): Object + +Matrix的叠加函数，可以将两个矩阵的效果叠加起来生成一个新的矩阵对象。 + +- 参数 + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

默认值

+

说明

+

matrix

+

Matrix4

+

是

+

-

+

待叠加的矩阵对象。

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

类型

+

说明

+

Object

+

矩阵叠加后的对象。

+
+ +- 示例 + + ``` + import Matrix4 from '@ohos.matrix4' + @Entry + @Component + struct Test { + private matrix1 = Matrix4.identity().translate({x:200}).copy() + private matrix2 = Matrix4.identity().scale({x:2}).copy() + build() { + Column() { + // 先平移x轴100px，再缩放两倍x轴 + Image($r("app.media.bg1")).transform(this.matrix1.combine(this.matrix2)) + .width("40%") + .height(100) + .margin({top:50}) + } + } + } + ``` + + ![](figures/q1.png) + + +### invert + +invert\(\): Object + +Matrix的逆函数，可以返回一个当前矩阵对象的逆矩阵，即效果正好相反。 + +- 返回值 + + + + + + + + + + +

类型

+

说明

+

Object

+

当前矩阵的逆矩阵对象。

+
+ +- 示例 + + ``` + import Matrix4 from '@ohos.matrix4' + // matrix1(宽放大2倍) 和 matrix2(宽缩小2倍) 效果相反 + let matrix1 = Matrix4.identity().scale({x:2}) + let matrix2 = matrix1.invert() + ``` + + +### translate + +translate\(\{x?: number, y?: number, z?: number\}\): Object + +Matrix的平移函数，可以为当前矩阵增加x轴/Y轴/Z轴平移效果。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

默认值

+

说明

+

x

+

number

+

否

+

0

+

x轴的平移距离，单位px。

+

y

+

number

+

否

+

0

+

y轴的平移距离，单位px。

+

z

+

number

+

否

+

0

+

z轴的平移距离，单位px。

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

类型

+

说明

+

Object

+

增加好平移效果后的矩阵对象。

+
+ +- 示例 + + ``` + import Matrix4 from '@ohos.matrix4' + @Entry + @Component + struct Test { + private matrix1 = Matrix4.identity().translate({x:100, y:200, z:30}) + build() { + Column() { + Image($r("app.media.bg1")).transform(this.matrix1) + .width("40%") + .height(100) + } + } + } + ``` + + ![](figures/s3.png) + + +### scale + +scale\(\{x?: number, y?: number, z?: number, centerX?: number, centerY?: number\}\): Object + +Matrix的缩放函数，可以为当前矩阵增加x轴/Y轴/Z轴缩放效果。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

默认值

+

说明

+

x

+

number

+

否

+

1

+

x轴的缩放倍数。

+

y

+

number

+

否

+

1

+

y轴的缩放倍数。

+

z

+

number

+

否

+

1

+

z轴的缩放倍数。

+

centerX

+

number

+

否

+

0

+

变换中心点x轴坐标。

+

centerY

+

number

+

否

+

0

+

变换中心点y轴坐标。

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

类型

+

说明

+

Object

+

增加好缩放效果后的矩阵对象。

+
+ +- 示例 + + ``` + import Matrix4 from '@ohos.matrix4' + @Entry + @Component + struct Test { + private matrix1 = Matrix4.identity().scale({x:2, y:3, z:4, centerX:50, centerY:50}) + build() { + Column() { + Image($r("app.media.bg1")).transform(this.matrix1) + .width("40%") + .height(100) + } + } + } + ``` + + ![](figures/s4-(1).png) + + +### rotate + +rotate\(\{x?: number, y?: number, z?: number, angle?: number, centerX?: Length, centerY?: Length\}\): Object + +Matrix的旋转函数，可以为当前矩阵增加x轴/Y轴/Z轴旋转效果。 + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

默认值

+

说明

+

x

+

number

+

否

+

1

+

旋转轴向量x坐标。

+

y

+

number

+

否

+

1

+

旋转轴向量y坐标。

+

z

+

number

+

否

+

1

+

旋转轴向量z坐标。

+

angle

+

number

+

否

+

0

+

旋转角度。

+

centerX

+

number

+

否

+

0

+

变换中心点x轴坐标。

+

centerY

+

number

+

否

+

0

+

变换中心点y轴坐标。

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

类型

+

说明

+

Object

+

增加好旋转效果后的矩阵对象。

+
+ +- 示例 + + ``` + import Matrix4 from '@ohos.matrix4' + @Entry + @Component + struct Test { + private matrix1 = Matrix4.identity().rotate({x:1, y:1, z:2, angle:30}) + build() { + Column() { + Image($r("app.media.bg1")).transform(this.matrix1) + .width("40%") + .height(100) + }.width("100%").margin({top:50}) + } + } + ``` + + ![](figures/1-19.png) + + +### transformPoint + +transformPoint\(point: Point\): Point + +Matrix的坐标点转换函数，可以将当前的变换效果作用到一个坐标点上。 + +- 参数 + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

默认值

+

说明

+

point

+

Point

+

是

+

-

+

需要转换的坐标点。

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

类型

+

说明

+

Point

+

返回矩阵变换后的Point对象。

+
+ +- 示例 + + ``` + import Matrix4 from '@ohos.matrix4' + import prompt from '@system.prompt' + + @Entry + @Component + struct Test { + private matrix1 = Matrix4.identity().transformPoint([100, 10]) + build() { + Column() { + Button("get Point") + .onClick(() => { + prompt.showToast({message:JSON.stringify(this.matrix1),duration:2000}) + }).backgroundColor(0x2788D9) + }.width("100%").padding(50) + } + } + ``` + + ![](figures/222.gif) + + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-media-resource-type.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-media-resource-type.md new file mode 100644 index 0000000000000000000000000000000000000000..cb772ed7639e3cbe866198d61923bcbffe7be45a --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-media-resource-type.md @@ -0,0 +1,45 @@ +# 媒体资源类型说明 + +- 开发框架支持的图片资源类型说明 + + + + + + + + + + + + + + + + + + + + + + + + + +

格式

+

文件后缀名

+

JPEG

+

.jpg

+

PNG

+

.png

+

GIF

+

.gif

+

SVG

+

.svg

+

WEBP

+

.webp

+

BMP

+

.bmp

+
+ + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-methods-alert-dialog-box.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-methods-alert-dialog-box.md new file mode 100644 index 0000000000000000000000000000000000000000..fda03c8acfa5266d76b8a9a3abaa677c14730f7c --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-methods-alert-dialog-box.md @@ -0,0 +1,334 @@ +# 警告弹窗 + +显示警告弹窗组件，可设置文本内容与响应回调。 + +## 属性 + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

参数描述

+

show

+

options: { paramObject1| paramObject2}

+

-

+

定义并显示AlertDialog组件。

+
+ +- paramObject1参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

title

+

string | Resource

+

否

+

-

+

弹窗标题。

+

message

+

string | Resource

+

是

+

-

+

弹窗内容。

+

autoCancel

+

boolean

+

否

+

true

+

点击遮障层时，是否关闭弹窗。

+

confirm

+

{

+

value: string | Resource,

+

fontColor?: Color | number | string | Resource,

+

backgroundColor?: Color | number | string | Resource,

+

action: () => void

+

}

+

否

+

-

+

确认按钮的文本内容、文本色、按钮背景色和点击回调。

+

cancel

+

() => void

+

否

+

-

+

点击遮障层关闭dialog时的回调。

+

alignment

+

DialogAlignment

+

否

+

DialogAlignment.Default

+

弹窗在竖直方向上的对齐方式。

+

offset

+

{

+

dx: Length | Resource,

+

dy: Length | Resource

+

}

+

否

+

-

+

弹窗相对alignment所在位置的偏移量。

+

gridCount

+

number

+

否

+

-

+

弹窗容器宽度所占用栅格数。

+
+ + +- paramObject2参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

title

+

string | Resource

+

否

+

-

+

弹窗标题。

+

message

+

string | Resource

+

是

+

-

+

弹窗内容。

+

autoCancel

+

boolean

+

否

+

true

+

点击遮障层时，是否关闭弹窗。

+

primaryButton

+

{

+

value: string | Resource,

+

fontColor?: Color | number | string | Resource,

+

backgroundColor?: Color | number | string | Resource,

+

action: () => void;

+

}

+

否

+

-

+

按钮的文本内容、文本色、按钮背景色和点击回调。

+

secondaryButton

+

+

{

+

value: string | Resource,

+

fontColor?: Color | number | string | Resource,

+

backgroundColor?: Color | number | string | Resource,

+

action: () => void;

+

}

+

否

+

-

+

按钮的文本内容、文本色、按钮背景色和点击回调。

+

cancel

+

() => void

+

否

+

-

+

点击遮障层关闭dialog时的回调。

+

alignment

+

DialogAlignment

+

否

+

DialogAlignment.Default

+

弹窗在竖直方向上的对齐方式。

+

offset

+

{

+

dx: Length | Resource,

+

dy: Length | Resource

+

}

+

否

+

-

+

弹窗相对alignment所在位置的偏移量。

+

gridCount

+

number

+

否

+

-

+

弹窗容器宽度所占用栅格数。

+
+ + +## 示例 + +``` +@Entry +@Component +struct AlertDialogExample { + build() { + Column({ space: 5 }) { + Button('one button dialog') + .onClick(() => { + AlertDialog.show( + { + title: 'title', + message: 'text', + confirm: { + value: 'button', + action: () => { + console.info('Button-clicking callback') + } + }, + cancel: () => { + console.info('Closed callbacks') + } + } + ) + }) + .backgroundColor(0x317aff) + Button('two button dialog') + .onClick(() => { + AlertDialog.show( + { + title: 'title', + message: 'text', + primaryButton: { + value: 'cancel', + action: () => { + console.info('Callback when the first button is clicked') + } + }, + secondaryButton: { + value: 'ok', + action: () => { + console.info('Callback when the second button is clicked') + } + }, + cancel: () => { + console.info('Closed callbacks') + } + } + ) + }).backgroundColor(0x317aff) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/AlertDialog.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-methods-custom-dialog-box.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-methods-custom-dialog-box.md new file mode 100644 index 0000000000000000000000000000000000000000..9d8a94db3cbf96f35a8729bb26634dc218c13260 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-methods-custom-dialog-box.md @@ -0,0 +1,206 @@ +# 自定义弹窗 + +通过CustomDialogController类显示自定义弹窗。 + +## 接口 + +CustomDialogController\(value:\{builder: CustomDialog, cancel?: \(\) =\> void, autoCancel?: boolean\}\) + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

builder

+

CustomDialog

+

是

+

-

+

自定义弹窗内容构造器。

+

cancel

+

() => void

+

否

+

-

+

点击遮障层退出时的回调。

+

autoCancel

+

boolean

+

否

+

true

+

是否允许点击遮障层退出。

+

alignment

+

DialogAlignment

+

否

+

DialogAlignment.Default

+

弹窗在竖直方向上的对齐方式。

+

offset

+

{

+

dx: Length | Resource,

+

dy: Length | Resource

+

}

+

否

+

-

+

弹窗相对alignment所在位置的偏移量。

+

customStyle

+

boolean

+

否

+

false

+

弹窗容器样式是否自定义。

+
+ +- DialogAlignment枚举说明 + + + + + + + + + + + + + + + + + + + +

名称

+

描述

+

Top

+

垂直顶部对齐。

+

Center

+

垂直居中对齐。

+

Bottom

+

垂直底部对齐。

+

Default

+

默认对齐。

+
+ + +### CustomDialogController + +创建对象 + +``` +dialogController : CustomDialogController = new CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean}) +``` + +open\(\) + +显示自定义弹窗内容，若已显示，则不生效。 + +close\(\) + +关闭显示的自定义弹窗，若已关闭，则不生效。 + +## 示例 + +``` +@CustomDialog +struct CustomDialogExample { + controller: CustomDialogController + cancel: () => void + confirm: () => void + + build() { + Column() { + Text('Software uninstall').width('70%').fontSize(20).margin({ top: 10, bottom: 10 }) + Image($r('app.media.icon')).width(80).height(80) + Text('Whether to uninstall a software?').fontSize(16).margin({ bottom: 10 }) + Flex({ justifyContent: FlexAlign.SpaceAround }) { + Button('cancel') + .onClick(() => { + this.controller.close() + this.cancel() + }).backgroundColor(0xffffff).fontColor(Color.Black) + Button('confirm') + .onClick(() => { + this.controller.close() + this.confirm() + }).backgroundColor(0xffffff).fontColor(Color.Red) + }.margin({ bottom: 10 }) + } + } +} + +@Entry +@Component +struct CustomDialogUser { + dialogController: CustomDialogController = new CustomDialogController({ + builder: CustomDialogExample({ cancel: this.onCancel, confirm: this.onAccept }), + cancel: this.existApp, + autoCancel: true + }) + + onCancel() { + console.info('Callback when the first button is clicked') + } + onAccept() { + console.info('Callback when the second button is clicked') + } + existApp() { + console.info('Click the callback in the blank area') + } + + build() { + Column() { + Button('click me') + .onClick(() => { + this.dialogController.open() + }).backgroundColor(0x317aff) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/customdialog.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-methods-image-cache.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-methods-image-cache.md new file mode 100644 index 0000000000000000000000000000000000000000..f91df6cc9f0d65d386e9fa1dd6c93244277a28bc --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-methods-image-cache.md @@ -0,0 +1,159 @@ +# 图片缓存 + +## 导入模块 + +``` +import app from '@system.app' +``` + +## 权限 + +无 + +## app.setImageCacheCount + +setImageCacheCount\(value: number\): void + +设置内存中缓存解码后图片的数量上限，提升再次加载同源图片的加载速度。如果不设置则默认为0，不进行缓存。缓存采用内置的LRU策略，新图片加载后，如果超过缓存上限，会删除最久未再次加载的缓存。建议根据应用内存需求，设置合理缓存数量，数字过大可能导致内存使用过高。 + +- 参数 + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

value

+

number

+

是

+

内存中解码后图片的缓存数量。

+
+ +- 示例 + + ``` + // app.ets + import app from '@system.app'; + + export default { + onCreate() { + app.setImageCacheCount(100) // 设置解码后图片内存缓存上限为100张 + console.info('Application onCreate') + }, + onDestroy() { + console.info('Application onDestroy') + }, + } + ``` + + +## app.setImageRawDataCacheSize + +setImageRawDataCacheSize\(value: number\): void + +设置内存中缓存解码前图片数据的大小上限，单位为字节，提升再次加载同源图片的加载速度。如果不设置则默认为0，不进行缓存。缓存采用内置的LRU策略，新图片加载后，如果解码前数据超过缓存上限，会删除最久未再次加载的图片数据缓存。建议根据应用内存需求，设置合理缓存上限，过大可能导致应用内存使用过高。 + +- 参数 + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

value

+

number

+

是

+

内存中解码前图片数据的缓存大小，单位为字节。

+
+ +- 示例 + + ``` + // app.ets + import app from '@system.app'; + + export default { + onCreate() { + app.setImageRawDataCacheSize(104,857,600) // 设置解码前图片数据内存缓存上限为100MB + console.info('Application onCreate') + }, + onDestroy() { + console.info('Application onDestroy') + }, + } + ``` + + +## app.setImageFileCacheSize + +setImageFileCacheSize\(value: number\): void + +设置图片文件缓存的大小上限，单位为字节，提升再次加载同源图片的加载速度，特别是对网络图源、缩略图会有较明显提升。如果不设置则默认为100MB。缓存采用内置的LRU策略，新图片加载后，如果超过文件缓存上限，会按照时间由远到近删除缓存图片文件直到缓存图片大小满足缓存上限。建议根据应用实际需求，设置合理文件缓存上限，数字过大可能导致磁盘空间占用过高。 + +- 参数 + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

value

+

number

+

是

+

图片文件的缓存大小，单位为字节。

+
+ +- 示例 + + ``` + // app.ets + import app from '@system.app'; + + export default { + onCreate() { + app.setImageFileCacheSize(209,715,200) // 设置图片文件数据缓存上限为200MB + console.info('Application onCreate') + }, + onDestroy() { + console.info('Application onDestroy') + }, + } + ``` + + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-methods-media-query.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-methods-media-query.md new file mode 100644 index 0000000000000000000000000000000000000000..803445fddfcda98be942581830e324a217e90221 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-methods-media-query.md @@ -0,0 +1,294 @@ +# 媒体查询 + +## 导入模块 + +``` +import mediaquery from '@ohos.mediaquery' +``` + +## 权限 + +无 + +## mediaquery.matchMediaSync + +matchMediaSync\(condition: string\): MediaQueryListener + +设置媒体查询的查询条件，并返回对应的监听句柄。 + +- 参数 + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

condition

+

string

+

是

+

媒体事件的匹配条件。条件字符串格式: 参考媒体查询。

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

类型

+

说明

+

MediaQueryListener

+

媒体事件监听句柄，用于注册和去注册监听回调。

+
+ +- 示例 + + ``` + listener = mediaquery.matchMediaSync('(orientation: landscape)'); //监听横屏事件 + ``` + + +## MediaQueryListener + +媒体查询的句柄，并包含了申请句柄时的首次查询结果。 + +### 属性 + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

matches

+

boolean

+

是

+

否

+

是否符合匹配条件。

+

media

+

string

+

是

+

否

+

媒体事件的匹配条件。

+
+ +### on + +on\(type: 'change', callback: Callback\): void + +通过句柄向对应的查询条件注册回调，当媒体属性发生变更时会触发该回调。 + +- 参数 + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

boolean

+

是

+

必须填写字符串'change'。

+

callback

+

Callback<MediaQueryResult>

+

是

+

向媒体查询注册的回调

+
+ +- 示例 + + 详见[off示例](#li16426122219256)。 + + +### off + +off\(type: 'change', callback?: Callback\): void + +通过句柄向对应的查询条件去注册回调，当媒体属性发生变更时不在触发指定的回调。 + +- 参数 + + + + + + + + + + + + + + + + + + + +

参数名

+

类型

+

必填

+

说明

+

type

+

boolean

+

是

+

必须填写字符串'change'。

+

callback

+

Callback<MediaQueryResult>

+

否

+

需要去注册的回调，如果参数缺省则去注册该句柄下所有的回调。

+
+ +- 示例 + + ``` + listener = mediaquery.matchMediaSync('(orientation: landscape)'); //监听横屏事件 + onPortrait(mediaQueryResult) { + if (mediaQueryResult.matches) { + // do something here + } else { + // do something here + } + } + listener.on('change', onPortrait) // 注册回调 + listener.off('change', onPortrait) // 去注册回调 + ``` + + +## MediaQueryResult + +### 属性 + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

可读

+

可写

+

说明

+

matches

+

boolean

+

是

+

否

+

是否符合匹配条件。

+

media

+

string

+

是

+

否

+

媒体事件的匹配条件。

+
+ +### 示例 + +``` +import mediaquery from '@ohos.mediaquery' + +let portraitFunc = null + +@Entry +@Component +struct MediaQueryExample { + @State color: string = '#DB7093' + @State text: string = 'Portrait' + listener = mediaquery.matchMediaSync('(orientation: landscape)') + + onPortrait(mediaQueryResult) { + if (mediaQueryResult.matches) { + this.color = '#FFD700' + this.text = 'Landscape' + } else { + this.color = '#DB7093' + this.text = 'Portrait' + } + } + + aboutToAppear() { + portraitFunc = this.onPortrait.bind(this) //bind current js instance + this.listener.on('change', portraitFunc) + } + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Text(this.text).fontSize(24).fontColor(this.color) + } + .width('100%').height('100%') + } +} +``` + +![](figures/MediaQuery.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-motion-path-animation.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-motion-path-animation.md new file mode 100644 index 0000000000000000000000000000000000000000..af57fa6f86ba2e4bfca68161558c15d3040fc5c8 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-motion-path-animation.md @@ -0,0 +1,69 @@ +# 路径动画 + +设置组件进行位移动画时的运动路径。 + +## 属性 + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

motionPath

+

{

+

path: string,

+

from?: number,

+

to?: number,

+

rotatable?: boolean

+

}

+
说明：

path中支持通过start和end进行起点和终点的替代，如：

+

'Mstart.x start.y L50 50 Lend.x end.y Z'。

+
+

{

+

"",

+

0.0,

+

1.0,

+

false

+

}

+

设置组件的运动路径，入参说明如下：

+
  • path：位移动画的运动路径，使用svg路径字符串。
  • from：运动路径的起点，默认为0.0。
  • to：运动路径的终点，默认为1.0。
  • rotatable：是否跟随路径进行旋转。
+
+ +## 示例 + +``` +@Entry +@Component +struct MotionPathExample { + @State offsetX: number = 0 + @State offsetY: number = 0 + @State toggle: boolean = true + + build() { + Column() { + Button('click me') + .motionPath({ path: 'Mstart.x start.y L300 200 L300 500 Lend.x end.y', from: 0.0, to: 1.0, rotatable: true }) + .onClick((event: ClickEvent) => { + animateTo({ duration: 4000, curve: Curve.Linear }, () => { + this.toggle = !this.toggle; + }) + }).backgroundColor(0x317aff) + }.width('100%').height('100%').alignItems(this.toggle ? HorizontalAlign.Start : HorizontalAlign.Center) + } +} +``` + +![](figures/motion.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-other-states-consume-provide.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-other-states-consume-provide.md new file mode 100644 index 0000000000000000000000000000000000000000..655b82f654d556c841e6ea0ab84a9d02a681e3c8 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-other-states-consume-provide.md @@ -0,0 +1,106 @@ +# @Consume和@Provide数据管理 + +Provide作为数据的提供方，可以更新其子孙节点的数据，并触发页面渲染。Consume在感知到Provide数据的更新后，会触发当前view的重新渲染。 + +**表 1** @Provide + + + + + + + + + + + + + + + + + + + +

类型

+

说明

+

装饰器参数

+

别名：是一个string类型的常量。如果规定别名，则提供对应别名的数据更新。如果没有，则使用变量名作为别名。推荐使用@Provide("alias")这种形式。

+

同步机制

+

@Provide的变量类似@state，可以修改对应变量进行页面重新渲染。也可以修改@Consume装饰的变量，反向修改@State变量。

+

初始值

+

必须制定初始值

+

页面重渲染场景

+

1. 基础类型 boolean，string，number

+

2. observed class，修改其中的属性

+

3. Array：添加，删除，更新数组中的元素

+
+ +**表 2** @Consume + + + + + + + + + + +

类型

+

说明

+

初始值

+

不可设置默认值

+
+ +>![](../../public_sys-resources/icon-note.gif) **说明：** +>使用@Provide 和@Consume时避免循环引用导致死循环。 + +其他属性说明与Provide一致。 + +``` +@Entry +@Component +struct CompA { + @Provide("reviewVote") reviewVotes : number = 0; + + build() { + Column() { + CompB() + Button() { + Text(`${this.reviewVotes}`) + .fontSize(30) + } + .onClick(() => { + this.reviewVotes += 1; + }) + } + } +} + +@Component +struct CompB { + build() { + Column() { + CompC() + } + } +} + +@Component +struct CompC { + @Consume("reviewVote") reviewVotes : number; + build() { + Column() { + Button() { + Text(`${this.reviewVotes}`) + .fontSize(30) + } + .onClick(() => { + this.reviewVotes += 1; + }) + } + } +} +``` + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-other-states-observed-objectlink.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-other-states-observed-objectlink.md new file mode 100644 index 0000000000000000000000000000000000000000..73db0f412423622156083ae33abdc551d3e89e2b --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-other-states-observed-objectlink.md @@ -0,0 +1,71 @@ +# Observed和ObjectLink数据管理 + +@observed是用来class的修饰器，表示此对象中的数据变更将被UI页面管理。@objectLink用来修饰被@observed装饰的变量。 + +``` +// 需要监控的对象 +@Observed class ClassA { + static nextID : number = 0; + public id : number; + public c: number; + + constructor(c: number) { + this.id = ClassA.nextID++; + this.c = c; + } +} + +@Observed class ClassB { + public a: ClassA; + + constructor(a: ClassA) { + this.a = a; + } +} +``` + +``` +@Component +struct ViewA { + @ObjectLink a : ClassA; + label : string = "ViewA1"; + build() { + Row() { + Button(`ViewA [${this.label}] this.a.c=${this.a.c} +1`) + .onClick(() => { + this.a.c += 1; + }) + Button(`ViewA [${this.label}] reset this.a =new ClassA(0)`) + .onClick(() => { + this.a = new ClassA(0); // ERROR, this.a is immutable + }) + } + } +} + +@Entry +@Component +struct ViewB { + @State b : ClassB = new ClassB(new ClassA(0)); + + build() { + Column() { + ViewA({label: "ViewA #1", a: this.b.a}) + ViewA({label: "ViewA #2", a: this.b.a}) + + Button(`ViewB: this.b.a = new ClassA(0)`) + .onClick(() => { + this.b.a = new ClassA(0); + }) + Button(`ViewB: this.b = new ClassB(ClassA(0))`) + .onClick(() => { + this.b = new ClassB(new ClassA(0)); + }) + } + } +} +``` + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>@ObjectLink用于修饰变量，并且不可以初始化。@Observed用于修饰类。 + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-other-states-watch.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-other-states-watch.md new file mode 100644 index 0000000000000000000000000000000000000000..b2fe7954cd8414f386fabaf4f745e73eafe3c0c0 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-other-states-watch.md @@ -0,0 +1,34 @@ +# @Watch + +应用可以注册回调方法。当一个被@State, @Prop, @Link, @ObjectLink, @Provide, @Consume, @StorageProp, 以及 @StorageLink中任意一个装饰器修饰的变量改变时，均可触发此回调。@Watch中的变量一定要使用（“”）进行包装。 + +``` +@Entry +@Component +struct CompA { + @State @Watch("onBasketUpdated") shopBasket : Array = [ 7, 12, 47, 3 ]; + @State totalPurchase : number = 0; + + updateTotal() : number { + let sum = 0; + this.shopBasket.forEach((i) => { sum += i; }); + // calculate new total shop basket value and apply discount if over 100RMB + this.totalPurchase = (sum < 100) ? sum : 0.9 * sum; + return this.totalPurchase; + } + + // @Watch cb + onBasketUpdated(propName: string) : void { + this.updateTotal(); + } + + build() { + Column() { + Button("add to basket").onClick(() => { this.shopBasket.push(Math.round(100 * Math.random())) }) + Text(`${this.totalPurchase}`) + .fontSize(30) + } + } +} +``` + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-page-transition-animation.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-page-transition-animation.md new file mode 100644 index 0000000000000000000000000000000000000000..b50b6ca216d61ef5ce7e23522c95167dda1e4a90 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-page-transition-animation.md @@ -0,0 +1,384 @@ +# 页面间转场 + +页面转场通过在全局pageTransition方法内配置页面入场组件和页面退场组件来自定义页面转场动效。 + + + + + + + + + + + + + + + + +

组件名称

+

参数

+

参数描述

+

PageTransitionEnter

+

Object

+

页面入场组件，用于自定义当前页面的入场效果，详见动效参数说明。

+

PageTransitionExit

+

Object

+

页面退场组件，用于自定义当前页面的退场效果，详见动效参数说明。

+
+ +- 动效参数说明 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名称

+

参数类型

+

默认值

+

必填

+

参数描述

+

type

+

RouteType

+

-

+

否

+

不配置时表明pop为push时效果的逆播。

+

duration

+

number

+

1000

+

否

+

动画时长，单位为毫秒。

+

curve

+

Curve | Curves

+

Linear

+

否

+

动画曲线，有效值参见Curve 说明。

+

delay

+

number

+

0

+

否

+

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

+
+ + +- RouteType枚举说明 + + + + + + + + + + + + + +

名称

+

描述

+

Pop

+

PageA跳转到PageB时，PageA为Exit+Push，PageB为Enter+Push。

+

Push

+

PageB返回至PageA时，PageA为Enter+Pop，PageB为Exit+Pop。

+
+ + +## 属性 + +PageTransitionEnter和PageTransitionExit组件支持的属性： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名称

+

参数类型

+

默认值

+

必填

+

参数描述

+

slide

+

SlideEffect

+

Right

+

否

+

设置转场的滑入效果，有效值参见SlideEffect说明。

+

translate

+

{

+

x? : number,

+

y? : number,

+

z? : number

+

}

+

-

+

否

+

设置页面转场时的平移效果，为入场时起点和退场时终点的值，和slide同时设置时默认生效slide。

+

scale

+

{

+

x? : number,

+

y? : number,

+

z? : number,

+

centerX? : number,

+

centerY? : number

+

}

+

-

+

否

+

设置页面转场时的缩放效果，为入场时起点和退场时终点的值。

+

opacity

+

number

+

1

+

否

+

设置入场的起点透明度值或者退场的终点透明度值。

+
+ +- SlideEffect枚举说明 + + + + + + + + + + + + + + + + + + + +

名称

+

描述

+

Left

+

设置到入场时表示从左边滑入，出场时表示滑出到左边。

+

Right

+

设置到入场时表示从右边滑入，出场时表示滑出到右边。

+

Top

+

设置到入场时表示从上边滑入，出场时表示滑出到上边。

+

Bottom

+

设置到入场时表示从下边滑入，出场时表示滑出到下边。

+
+ + +## 事件 + +PageTransitionEnter和PageTransitionExit组件支持的事件： + + + + + + + + + + + + + +

事件

+

功能描述

+

onEnter(type: RouteType, progress: number) => void

+

回调入参为当前入场动画的归一化进度[0 - 1]。

+

onExit(type: RouteType, progress: number) => void

+

回调入参为当前退场动画的归一化进度[0 - 1]。

+
+ +## 示例 + +自定义方式1：配置了当前页面的入场动画为淡入，退场动画为缩小。 + +``` +// index.ets +@Entry +@Component +struct PageTransitionExample1 { + @State scale: number = 1 + @State opacity: number = 1 + @State active: boolean = false + build() { + Column() { + Navigator({ target: 'pages/page1', type: NavigationType.Push }) { + Image($r('app.media.bg1')).width("100%").height("100%") + } + .onClick(() => { + this.active = true + }) + }.scale({ x: this.scale }).opacity(this.opacity) + } +// 自定义方式1：完全自定义转场过程的效果 + pageTransition() { + PageTransitionEnter({ duration: 1200, curve: Curve.Linear }) + .onEnter((type: RouteType, progress: number) => { + this.scale = 1 + this.opacity = progress + }) // 进场过程中会逐帧触发onEnter回调，入参为动效的归一化进度(0% -- 100%) + PageTransitionExit({ duration: 1500, curve: Curve.Ease }) + .onExit((type: RouteType, progress: number) => { + this.scale = 1 - progress + this.opacity = 1 + }) // 退场过程中会逐帧触发onExit回调，入参为动效的归一化进度(0% -- 100%) + } +} +``` + +``` +// page1.ets +@Entry +@Component +struct AExample { + @State scale: number = 1 + @State opacity: number = 1 + @State active: boolean = false + build() { + Column() { + Navigator({ target: 'pages/index' ,type: NavigationType.Push}) { + Image($r('app.media.bg2')).width("100%").height("100%") + } + }.height("100%").width("100%").scale({ x: this.scale }).opacity(this.opacity) + } +// 自定义方式1：完全自定义转场过程的效果 + pageTransition() { + PageTransitionEnter({ duration: 1200, curve: Curve.Linear }) + .onEnter((type: RouteType, progress: number) => { + this.scale = 1 + this.opacity = progress + }) // 进场过程中会逐帧触发onEnter回调，入参为动效的归一化进度(0% -- 100%) + PageTransitionExit({ duration: 1500, curve: Curve.Ease }) + .onExit((type: RouteType, progress: number) => { + this.scale = 1 - progress + this.opacity = 1 + }) // 退场过程中会逐帧触发onExit回调，入参为动效的归一化进度(0% -- 100%) + } +} +``` + +![](figures/PageTransition1.gif) + +自定义方式2：配置了当前页面的入场动画为从左侧滑入，退场为缩小加透明度变化。 + +``` +// index.ets +@Entry +@Component +struct PageTransitionExample { + @State scale: number = 1 + @State opacity: number = 1 + @State active: boolean = false + + build() { + Column() { + Navigator({ target: 'pages/page1', type: NavigationType.Push }) { + Image($r('app.media.bg1')).width("100%").height("100%") + } + .onClick(() => { + this.active = true + }) + }.scale({ x: this.scale }).opacity(this.opacity) + } + +// 自定义方式2：使用系统提供的多种默认效果(平移、缩放、透明度等) + pageTransition() { + PageTransitionEnter({ duration: 1200 }) + .slide(SlideEffect.Left) + PageTransitionExit({ delay: 100 }) + .translate({ x: 100.0, y: 100.0 }) + .opacity(0) + } +} +``` + +``` +// page1.ets +@Entry +@Component +struct PageTransitionExample1 { + @State scale: number = 1 + @State opacity: number = 1 + @State active: boolean = false + + build() { + Column() { + Navigator({ target: 'pages/index', type: NavigationType.Push }) { + Image($r('app.media.bg2')).width ("100%").height("100%") + } + .onClick(() => { + this.active = true + }) + }.scale({ x: this.scale }).opacity(this.opacity) + } + +// 自定义方式2：使用系统提供的多种默认效果(平移、缩放、透明度等) + pageTransition() { + PageTransitionEnter({ duration: 1200 }) + .slide(SlideEffect.Left) + PageTransitionExit({ delay: 100 }) + .translate({ x: 100.0, y: 100.0 }) + .opacity(0) + } +} +``` + +![](figures/PageTransition2.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-parameterless-configuration.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-parameterless-configuration.md new file mode 100644 index 0000000000000000000000000000000000000000..0230e89b07340baf16d66a1545d0c5f020e84ed3 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-parameterless-configuration.md @@ -0,0 +1,14 @@ +# 无构造参数配置 + +组件的接口定义不包含必选构造参数，组件后面的“**\(\)**”中不需要配置任何内容。 + +例如，以下**Divider**组件不包含构造参数： + +``` +Column() { + Text('item 1') + Divider() // No parameter configuration of the divider component + Text('item 2') +} +``` + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-pixel-units.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-pixel-units.md new file mode 100644 index 0000000000000000000000000000000000000000..e8d75d3b1273ab078f4f79cd7be9fb61dd26dceb --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-pixel-units.md @@ -0,0 +1,125 @@ +# 像素单位 + +为开发者提供4种像素单位，框架采用vp为基准数据单位。 + + + + + + + + + + + + + + + + + + + +

名称

+

描述

+

px

+

屏幕物理像素单位。

+

vp

+

屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素。

+

fp

+

字体像素，与vp类似适用屏幕密度变化，随系统字体大小设置变化。

+

lpx

+

视窗逻辑像素单位，lpx单位为实际屏幕宽度与逻辑宽度（通过designWidth配置）的比值。如配置designWidth为720时，在实际宽度为1440物理像素的屏幕上，1lpx为2px大小。

+
+ +## 像素单位转换 + +提供其他单位与px单位互相转换的方法。 + + + + + + + + + + + + + + + + + + + + + + + + + +

接口

+

描述

+

vp2px(value : number) : number

+

将vp单位的数值转换为以px为单位的数值。

+

px2vp(value : number) : number

+

将px单位的数值转换为以vp为单位的数值。

+

fp2px(value : number) : number

+

将fp单位的数值转换为以px为单位的数值。

+

px2fp(value : number) : number

+

将px单位的数值转换为以fp为单位的数值。

+

lpx2px(value : number) : number

+

将lpx单位的数值转换为以px为单位的数值。

+

px2lpx(value : number) : number

+

将px单位的数值转换为以lpx为单位的数值。

+
+ +## 示例 + +``` +@Entry +@Component +struct Example { + build() { + Column() { + Flex({ wrap: FlexWrap.Wrap }) { + Column() { + Text("width(220)") + .width(220).height(40).backgroundColor(0xF9CF93) + .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp') + }.margin(5) + Column() { + Text("width('220px')") + .width('220px').height(40).backgroundColor(0xF9CF93) + .textAlign(TextAlign.Center).fontColor(Color.White) + }.margin(5) + Column() { + Text("width('220vp')") + .width('220vp').height(40).backgroundColor(0xF9CF93) + .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp') + }.margin(5) + Column() { + Text("width('220lpx') designWidth:720") + .width('220lpx').height(40).backgroundColor(0xF9CF93) + .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp') + }.margin(5) + Column() { + Text("width(vp2px(220) + 'px')") + .width(vp2px(220) + 'px').height(40).backgroundColor(0xF9CF93) + .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp') + }.margin(5) + Column() { + Text("fontSize('12fp')") + .width(220).height(40).backgroundColor(0xF9CF93) + .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12fp') + }.margin(5) + }.width('100%') + } + } +} +``` + +![](figures/像素单位.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-rending-control-syntax-foreach.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-rending-control-syntax-foreach.md new file mode 100644 index 0000000000000000000000000000000000000000..f405c57f767bb9ff2bfba597a1d8903979c6927d --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-rending-control-syntax-foreach.md @@ -0,0 +1,124 @@ +# 循环渲染 + +开发框架提供**ForEach**组件来迭代数组，并为每个数组项创建相应的组件。**ForEach**定义如下： + +``` +ForEach( + arr: any[], // Array to be iterated + itemGenerator: (item: any) => void, // child component generator + keyGenerator?: (item: any) => string // (optional) Unique key generator, which is recommended. +) +``` + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- 循环渲染使用ForEach从提供的数组中自动生成子组件； +>- 必须在容器组件内使用； +>- 第一个参数必须是数组：允许空数组，空数组场景下不会创建子组件。同时允许设置返回值为数组类型的函数，例如**arr.slice\(1, 3\)**，设置的函数不得改变包括数组本身在内的任何状态变量，如**Array.splice**、**Array.sort**或**Array.reverse**这些原地修改数组的函数； +>- 第二个参数用于生成子组件的lambda函数。它为给定数组项生成一个或多个子组件。单个组件和子组件列表必须括在大括号“**\{....\}**”中； +>- 可选的第三个参数是用于键值生成的匿名函数。它为给定数组项生成唯一且稳定的键值。当子项在数组中的位置更改时，子项的键值不得更改，当数组中的子项被新项替换时，被替换项的键值和新项的键值必须不同。键值生成器的功能是可选的。但是，出于性能原因，强烈建议提供，这使开发框架能够更好地识别数组更改。如单击进行数组反向时，如果没有提供键值生成器，则ForEach中的所有节点都将重建。 +>- 生成的子组件必须允许在**ForEach**的父容器组件中，允许子组件生成器函数中包含**if/else**条件渲染，同时也允许**ForEach**包含在**if/else**条件渲染语句中。 +>- 子项生成器函数的调用顺序不一定和数组中的数据项相同，在开发过程中不要假设子项生成器和键值生成器函数是否执行以及执行顺序。如下示例可能无法正常工作： +> ``` +> ForEach(anArray, item => {Text(`${++counter}. item.label`)}) +> ``` +> 正确的示例如下： +> ``` +> ForEach(anArray.map((item1, index1) => { return { i: index1 + 1, data: item1 }; }), +> item => Text(`${item.i}. item.data.label`), +> item => item.data.id.toString()) +> ``` + +## 示例 + +简单类型数组示例： + +``` +@Entry +@Component +struct MyComponent { + @State arr: number[] = [10, 20, 30] + build() { + Column() { + Button() { + Text('Reverse Array') + }.onClick(() => { + this.arr.reverse() + }) + + ForEach(this.arr, // Parameter 1: array to be iterated + (item: number) => { // Parameter 2: item generator + Text(`item value: ${item}`) + Divider() + }, + (item: number) => item.toString() // Parameter 3: unique key generator, which is optional but recommended. + ) + } + } +} +``` + +复杂类型数组示例： + +``` +class Month { + year: number + month: number + days: Array + + constructor(year, month, days) { + this.year = year; + this.month = month; + this.days = days; + } +} + +@Entry +@Component +struct Calendar1 { +// simulate with 6 months + @State calendar: Month[] = [ + new Month(2020, 1, [...Array(31).keys()]), + new Month(2020, 2, [...Array(28).keys()]), + new Month(2020, 3, [...Array(31).keys()]), + new Month(2020, 4, [...Array(30).keys()]), + new Month(2020, 5, [...Array(31).keys()]), + new Month(2020, 6, [...Array(30).keys()]), + ] + + build() { + Column() { + Button('next month') + .onClick(() => { + this.calendar.shift() + this.calendar.push({ + year: 2020, + month: 7, + days: [...Array(31) + .keys()] + }) + }) + ForEach(this.calendar, + (item: Month) => { + Text('month:' + item.month) + .fontSize(30) + .padding(20) + Grid() { + ForEach(item.days, + (day: number) => { + GridItem() { + Text((day + 1).toString()) + .fontSize(30) + } + }, + (day: number) => day.toString()) + } + .columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr') + .rowsGap(20) + }, + // field is used together with year and month as the unique ID of the month. + (item: Month) => (item.year * 12 + item.month).toString()) + } + } +} +``` + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-rending-control-syntax-if-else.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-rending-control-syntax-if-else.md new file mode 100644 index 0000000000000000000000000000000000000000..adf71a1bc97b7695c87394815e407309a13b748c --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-rending-control-syntax-if-else.md @@ -0,0 +1,38 @@ +# 条件渲染 + +使用**if/else**进行条件渲染。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- if条件语句可以使用状态变量； +>- 使用if可以使子组件的渲染依赖条件语句； +>- 必须在容器组件内使用。 +>- 某些容器组件限制子组件的类型或数量。当将if放置在这些组件内时，这些限制将应用于if和else语句内创建的组件：如当在Grid组件内使用if时，则仅允许if条件语句内使用GridItem组件，而在List组件内则仅允许ListItem组件。 + +## 示例 + +使用if条件语句： + +``` +Column() { + if (this.count > 0) { + Text('count is positive') + } +} +``` + +使用if、else if、else条件语句： + +``` +Column() { + if (this.count < 0) { + Text('count is negative') + } else if (this.count % 2 === 0) { + Divider() + Text('even') + } else { + Divider() + Text('odd') + } +} +``` + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-rending-control-syntax-lazyforeach.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-rending-control-syntax-lazyforeach.md new file mode 100644 index 0000000000000000000000000000000000000000..f2446c7756f92e61ba3ab42417be4dd893f3c630 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-rending-control-syntax-lazyforeach.md @@ -0,0 +1,144 @@ +# 数据懒加载 + +开发框架提供**LazyForEach**组件按需迭代数据，并在每次迭代过程中创建相应的组件。**LazyForEach**定义如下： + +``` +interface DataChangeListener { + onDataReloaded(): void; // Called while data reloaded + onDataAdded(index: number): void; // Called while single data added + onDataMoved(from: number, to: number): void; // Called while single data moved + onDataDeleted(index: number): void; // Called while single data deleted + onDataChanged(index: number): void; // Called while single data changed +} +interface IDataSource { + totalCount(): number; // Get total count of data + getData(index: number): any; // Get single data by index + registerDataChangeListener(listener: DataChangeListener): void; // Register listener to listening data changes + unregisterDataChangeListener(listener: DataChangeListener): void; // Unregister listener +} +LazyForEach( + dataSource: IDataSource, // Data source to be iterated + itemGenerator: (item: any) => void, // child component generator + keyGenerator?: (item: any) => string // (optional) Unique key generator, which is recommended. +): void +``` + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- 通过LazyForEach的onDataChanged更新数据时，如果itemGenerator里面包含一个全静态（此view中不包含状态变量）的view，此view将不会更新 +>- 数据懒加载组件使用LazyForEach从提供的数据源中自动生成子组件； +>- 必须在容器组件内使用，且仅有List、Grid以及Swiper组件支持数据的按需加载（即只加载可视部分以及其前后少量数据用于缓冲），其他组件仍然是一次加载所有数据； +>- 第一个参数必须是继承自IDataSource的对象，需要开发者实现相关接口； +>- 第二个参数用于生成子组件的lambda函数。它为给定数组项生成一个或多个子组件。单个组件和子组件列表必须括在大括号“**\{....\}**”中； +>- 可选的第三个参数是用于键值生成的匿名函数。它为给定数组项生成唯一且稳定的键值。当子项在数组中的位置更改时，子项的键值不得更改，当数组中的子项被新项替换时，被替换项的键值和新项的键值必须不同。键值生成器的功能是可选的。但是，出于性能原因，强烈建议提供，这使开发框架能够更好地识别数组更改。如单击进行数组反向时，如果没有提供键值生成器，则ForEach中的所有节点都将重建。 +>- 生成的子组件必须允许在**LazyForEach**的父容器组件中，允许**LazyForEach**包含在**if/else**条件渲染语句中。 +>- **LazyForEach**在每次迭代中，必须创建一个且只允许创建一个子组件。 +>- **ForEach**不允许作为**LazyForEach**的子组件，**LazyForEach**也不支持嵌套。 +>- **LazyForEach**中不允许出现**if/else**条件渲染语句。 +>- 子项生成器函数的调用顺序不一定和数据源中的数据项相同，在开发过程中不要假设子项生成器和键值生成器函数是否执行以及执行顺序。如下示例可能无法正常工作： +> ``` +> ForEach(dataSource, item => {Text(`${++counter}. item.label`)}) +> ``` +> 正确的示例如下： +> ``` +> ForEach(dataSource, +> item => Text(`${item.i}. item.data.label`)), +> item => item.data.id.toString()) +> ``` + +## 示例 + +``` +// Basic implementation of IDataSource to handle data listener +class BasicDataSource implements IDataSource { + private listeners: DataChangeListener[] = [] + + public totalCount(): number { + return 0 + } + public getData(index: number): any { + return undefined + } + + registerDataChangeListener(listener: DataChangeListener): void { + if (this.listeners.indexOf(listener) < 0) { + console.info('add listener') + this.listeners.push(listener) + } + } + unregisterDataChangeListener(listener: DataChangeListener): void { + const pos = this.listeners.indexOf(listener); + if (pos >= 0) { + console.info('remove listener') + this.listeners.splice(pos, 1) + } + } + + notifyDataReload(): void { + this.listeners.forEach(listener => { + listener.onDataReloaded() + }) + } + notifyDataAdd(index: number): void { + this.listeners.forEach(listener => { + listener.onDataAdded(index) + }) + } + notifyDataChange(index: number): void { + this.listeners.forEach(listener => { + listener.onDataChanged(index) + }) + } + notifyDataDelete(index: number): void { + this.listeners.forEach(listener => { + listener.onDataDeleted(index) + }) + } + notifyDataMove(from: number, to: number): void { + this.listeners.forEach(listener => { + listener.onDataMoved(from, to) + }) + } +} + +class MyDataSource extends BasicDataSource { + private dataArray: string[] = ['/path/image0', '/path/image1', '/path/image2', '/path/image3'] + + public totalCount(): number { + return this.dataArray.length + } + public getData(index: number): any { + return this.dataArray[index] + } + + public addData(index: number, data: string): void { + this.dataArray.splice(index, 0, data) + this.notifyDataAdd(index) + } + public pushData(data: string): void { + this.dataArray.push(data) + this.notifyDataAdd(this.dataArray.length - 1) + } +} + +@Entry +@Component +struct MyComponent { + private data: MyDataSource = new MyDataSource() + build() { + List({space: 3}) { + LazyForEach(this.data, (item: string) => { + ListItem() { + Row() { + Image(item).width("30%").height(50) + Text(item).fontSize(20).margin({left:10}) + }.margin({left: 10, right: 10}) + } + .onClick(()=>{ + this.data.pushData('/path/image' + this.data.totalCount()) + }) + }, item => item) + } + } +} +``` + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-rending-control-syntax.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-rending-control-syntax.md new file mode 100644 index 0000000000000000000000000000000000000000..f054d5dbb18d9b4ecd8dfb21ce93c1993d8b8163 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-rending-control-syntax.md @@ -0,0 +1,9 @@ +# 渲染控制语法 + +- **[条件渲染](ts-rending-control-syntax-if-else.md)** + +- **[循环渲染](ts-rending-control-syntax-foreach.md)** + +- **[数据懒加载](ts-rending-control-syntax-lazyforeach.md)** + + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-resource-access.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-resource-access.md new file mode 100644 index 0000000000000000000000000000000000000000..a929357dad34cd118a7c969502798a89647eebec --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-resource-access.md @@ -0,0 +1,5 @@ +# 资源访问 + +- **[媒体资源类型说明](ts-media-resource-type.md)** + + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-restrictions-for-generators.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-restrictions-for-generators.md new file mode 100644 index 0000000000000000000000000000000000000000..15fbb03a26639b8bd46811cc57696c068e5dc902 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-restrictions-for-generators.md @@ -0,0 +1,26 @@ +# 生成器函数内使用TS语言的限制 + +TS语言的使用在生成器函数中存在一定的限制： + +- 表达式仅允许在字符串\($\{expression\}\)、if条件、ForEach的参数和组件的参数中使用； +- 这些表达式中的任何一个都不能导致任何应用程序状态变量（@State、@Link、@Prop）的改变，否则会导致未定义和潜在不稳定的框架行为； +- 允许在生成器函数体的第一行使用console.log，以便开发人员更容易跟踪组件重新渲染。对日志字符串文字中表达式仍遵循上述限制。 +- 生成器函数内部不能有局部变量。 + +上述限制都不适用于事件处理函数（例如**onClick**）的匿名函数实现，它们也不适用于UI组件描述外的其余部分。 + +非法示例： + +``` +build() { + let a: number = 1 // invalid: variable declaration not allowed + console.log(`a: ${a}`) // invalid: console.log only allowed in first line of build + Column() { + Text('Hello ${this.myName.toUpperCase()}') // ok. + ForEach(this.arr.reverse(), ..., ...) // invalid: Array.reverse modifies the @State array varible in place + } + buildSpecial() // invalid: no function calls + Text(this.calcTextValue()) // this function call is ok. +} +``` + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-syntactic-sugar-chaining.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-syntactic-sugar-chaining.md new file mode 100644 index 0000000000000000000000000000000000000000..1a0d60c5a7bd7951e9065303e01297ac73a9ae92 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-syntactic-sugar-chaining.md @@ -0,0 +1,13 @@ +# 链式调用 + +允许开发者以“.”链式调用的方式配置UI结构及其属性、事件等。 + +``` +Column() { + Image('1.jpg') + .alt('error.jpg') + .width(100) + .height(100) +}.padding(10) +``` + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-syntactic-sugar-decorator.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-syntactic-sugar-decorator.md new file mode 100644 index 0000000000000000000000000000000000000000..7a67e943d2d7b31502323b9f0418195013b05959 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-syntactic-sugar-decorator.md @@ -0,0 +1,80 @@ +# 装饰器 + +装饰器**@Decorator**，被装饰的元素可以是变量声明，类定义，结构体定义，方法定义等，赋予其特殊的含义。 + +多个装饰器实现可以叠加到目标元素，书写在同一行上或者在多行上，推荐书写在多行上。 + +如下**@Component**和**@State**的使用，被**@Component**装饰的元素具备了组件化的含义，使用**@State**装饰的变量具备了状态数据的含义： + +``` +@Component +struct MyComponent { + @State count: number = 0 +} +``` + +装饰器可以书写在同一行上： + +``` +@Entry @Component struct MyComponent { +} +``` + +但更推荐书写在多行上： + +``` +@Entry +@Component +struct MyComponent { +} +``` + +## 支持的装饰器列表 + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

装饰器

+

装饰内容

+

说明

+

@Component

+

struct

+

结构体在装饰后具有基于组件的能力，需要实现build方法来更新UI。

+

@Entry

+

struct

+

组件被装饰后作为页面的入口，页面加载时将被渲染显示。

+

@State

+

基本数据类型，类，数组

+

修饰的状态数据被修改时会触发组件的build方法进行UI界面更新。

+

@Prop

+

基本数据类型

+

修改后的状态数据用于在父组件和子组件之间建立单向数据依赖关系。修改父组件关联数据时，更新当前组件的UI。

+

@Link

+

基本数据类型，类，数组

+

父子组件之间的双向数据绑定。父组件的内部状态数据作为数据源。任何一方所做的修改都会反映给另一方。

+
+ diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-syntactic-sugar-struct.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-syntactic-sugar-struct.md new file mode 100644 index 0000000000000000000000000000000000000000..a7294e8269e75db436f58f6375afc3d9a53d52dc --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-syntactic-sugar-struct.md @@ -0,0 +1,14 @@ +# struct对象 + +组件可以基于**struct**实现，组件不能有继承关系，**struct**可以比**class**更加快速的创建和销毁。 + +``` +@Component +struct MyComponent { + @State data: string = '' + + build() { + } +} +``` + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-syntactic-sugar.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-syntactic-sugar.md new file mode 100644 index 0000000000000000000000000000000000000000..0eebe6f115bc4d8d7679b584e8721b44c7e1cd0f --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-syntactic-sugar.md @@ -0,0 +1,15 @@ +# 语法糖 + +- **[装饰器](ts-syntactic-sugar-decorator.md)** + +- **[链式调用](ts-syntactic-sugar-chaining.md)** + +- **[struct对象](ts-syntactic-sugar-struct.md)** + +- **[在实例化过程中省略"new"](ts-instantiating-a-struct-without-new-keyword.md)** + +- **[组件创建使用独立一行](ts-using-a-separate-line-for-new-component.md)** + +- **[生成器函数内使用TS语言的限制](ts-restrictions-for-generators.md)** + + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-syntax-intro.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-syntax-intro.md new file mode 100644 index 0000000000000000000000000000000000000000..c707a3b3b3bc7ddf36101901c6ea33102f96203e --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-syntax-intro.md @@ -0,0 +1,11 @@ +# 描述规范使用说明 + +本节定义了基于TS扩展的声明式开发范式的核心机制和功能。讲述了声明式UI描述、组件化机制、UI状态管理、渲染控制语法和语法糖。 + +本节为应用开发人员开发UI提供了参考规范。有关组件的详细信息，请参考[组件说明](ts-universal-events-click.md)。 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- 所有示例都以TypeScript \(TS\)语言为例，请遵循相应语言的语法要求。 +>- 示例中的**Image**、**Button**、**Text**、**Divider**、**Row**和**Column**等组件是UI框架中预置的组件控件，仅用于解释UI描述规范。 +>- 通用属性方法和事件方法通常支持所有组件，而组件内的属性方法和事件方法仅对当前组件有效。 + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-transition-animation-component.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-transition-animation-component.md new file mode 100644 index 0000000000000000000000000000000000000000..f02f406edb8d9897079f8eec785607e6decae0e6 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-transition-animation-component.md @@ -0,0 +1,187 @@ +# 组件内转场 + +组件转场主要通过transition属性进行配置转场参数，在组件插入和删除时进行过渡动效，主要用于容器组件子组件插入删除时提升用户体验（需要配合animateTo才能生效，动效时长、曲线、延时跟随animateTo中的配置）。 + +## 属性 + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

参数描述

+

transition

+

Object

+

-

+

所有参数均为可选参数，详细描述见transition入参说明。

+
+ +- transition入参说明 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名称

+

参数类型

+

默认值

+

必填

+

参数描述

+

type

+

TransitionType

+

All

+

否

+

默认包括组件新增和删除。

+
说明：

不指定Type时说明插入删除使用同一种效果。

+
+

opacity

+

number

+

1

+

否

+

设置组件转场时的透明度效果，为插入时起点和删除时终点的值。

+

translate

+

{

+

x? : number,

+

y? : number,

+

z? : number

+

}

+

-

+

否

+

设置组件转场时的平移效果，为插入时起点和删除时终点的值。

+

scale

+

{

+

x? : number,

+

y? : number,

+

z? : number,

+

centerX? : number,

+

centerY? : number

+

}

+

-

+

否

+

设置组件转场时的缩放效果，为插入时起点和删除时终点的值。

+

rotate

+

{

+

x?: number,

+

y?: number,

+

z?: number,

+

angle?: Angle,

+

centerX?: Length,

+

centerY?: Length

+

}

+

-

+

否

+

设置组件转场时的旋转效果，为插入时起点和删除时终点的值。

+
+ + +- TransitionType枚举说明 + + + + + + + + + + + + + + + + +

名称

+

描述

+

All

+

指定当前的Transition动效生效在组件的所有变化场景。

+

Insert

+

指定当前的Transition动效生效在组件的插入场景。

+

Delete

+

指定当前的Transition动效生效在组件的删除场景。

+
+ + +## 示例 + +示例功能通过一个Button控制第二个Button的出现和消失，并通过transition配置第二个Button出现和消失的过场动画。 + +``` +@Entry +@Component +struct TransitionExample { + @State btn1: boolean = false + @State show: string = "show" + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center,}) { + Button(this.show).width(80).height(30).backgroundColor(0x317aff).margin({bottom:50}) + .onClick(() => { + animateTo({ duration: 1000 }, () => { + this.btn1 = !this.btn1 + if(this.btn1){ + this.show = "hide" + }else{ + this.show = "show" + } + }) + }) + if (this.btn1) { + // 插入和删除配置为不同的过渡效果 + Button() { + Image($r('app.media.bg1')).width("80%").height(300) + }.transition({ type: TransitionType.Insert, scale : {x:0,y:1.0} }) + .transition({ type: TransitionType.Delete, scale: { x: 1.0, y: 0.0 } }) + } + }.height(400).width("100%").padding({top:100}) + } +} +``` + +![](figures/Transition.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-transition-animation-shared-elements.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-transition-animation-shared-elements.md new file mode 100644 index 0000000000000000000000000000000000000000..ff2c7bf63dd72cb72e0af86349956ed1cc088355 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-transition-animation-shared-elements.md @@ -0,0 +1,129 @@ +# 共享元素转场 + +共享元素转场支持页面间的转场，如当前页面的图片转场至下一页面中。 + +## 属性 + + + + + + + + + + + + + + +

名称

+

参数

+

默认值

+

参数描述

+

sharedTransition

+

id: string,

+

options?: Object

+

-

+

两个页面的组件配置为同一个id，则转场过程中会进行共享元素转场，配置为空字符串时不会有共享元素转场效果。

+
+ +- options参数说明 + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名称

+

参数类型

+

默认值

+

必填

+

参数描述

+

duration

+

number

+

1000

+

否

+

单位为毫秒，默认动画时长为1000毫秒。

+

curve

+

Curve | Curves

+

Linear

+

否

+

默认曲线为线性，有效值参见Curve说明。

+

delay

+

number

+

0

+

否

+

单位为毫秒，默认不延时播放。

+
+ + +## 示例 + +示例功能为两个页面，共享元素转场页面图片点击后转场至页面B的图片。 + +``` +@Entry +@Component +struct SharedTransitionExample { + @State scale: number = 1 + @State opacity: number = 1 + @State active: boolean = false + + build() { + List() { + ListItem() { + Row() { + Navigator({ target: 'pages/common/Animation/transAnimation/PageB', type: NavigationType.Push }) { + Image($r('app.media.ic_health_heart')).width(50).height(50) + .sharedTransition('sharedImage1', { duration: 800, curve: Curve.Linear, delay: 100 }) + }.padding({ left: 10 }) + .onClick(() => { + this.active = true + }) + + Text('SharedTransition').width(80).height(80).textAlign(TextAlign.Center) + } + } + } + } +} +``` + +``` +// PageB +@Entry +@Component +struct BExample { + build() { + Stack() { + Image($r('app.media.ic_health_heart')).width(150).height(150).sharedTransition('sharedImage1') + }.width('100%').height(400) + } +} +``` + +![](figures/SharedTransition.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-transition-animation.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-transition-animation.md new file mode 100644 index 0000000000000000000000000000000000000000..0f1ae9e6f11c358d5158cdf04fb2400c034c2a10 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-transition-animation.md @@ -0,0 +1,9 @@ +# 转场动画 + +- **[页面间转场](ts-page-transition-animation.md)** + +- **[组件内转场](ts-transition-animation-component.md)** + +- **[共享元素转场](ts-transition-animation-shared-elements.md)** + + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-types.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-types.md new file mode 100644 index 0000000000000000000000000000000000000000..913fca4001b22a7e6140cb8a65e6943a94fcc41e --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-types.md @@ -0,0 +1,257 @@ +# 类型定义 + +## 长度类型 + + + + + + + + + + + + +

名称

+

类型定义

+

描述

+

Length

+

string | number

+

用于描述尺寸单位，输入为number类型时，使用vp单位；输入为string类型时，需要显式指定像素单位，如'10px'，也可设置百分比字符串，如'100%'。

+
+ +## 角度类型 + + + + + + + + + + + + +

名称

+

类型定义

+

描述

+

Angle

+

string | number

+

用于角度单位，输入为number类型时，使用deg单位；输入为string类型时需要显示指定角度单位，支持以下两种角度单位：

+
  • deg：如'100deg'。
  • rad：如'3.14rad'。
+
+ +## 点类型 + + + + + + + + + + + + +

名称

+

类型定义

+

描述

+

Point

+

[Length, Length]

+

用于描述点坐标，第一个值为x轴坐标，第二个值为y坐标。

+
+ +## 颜色类型 + +组件属性方法使用的颜色Color说明如下： + + + + + + + + + + + + +

名称

+

类型定义

+

描述

+

Color

+

string | number | Color

+

用于描述颜色信息，输入为string类型时，使用rgb或者rgba进行描述；输入为number类型是，使用HEX格式颜色；输入类型为Color枚举时，使用颜色枚举值。

+
  • 'rgb(255, 255, 255)'。
  • 'rgba(255, 255, 255, 1.0)'。
  • HEX格式：0xrrggbb，0xaarrggbb，'#FFFFFF'。
  • 枚举格式：Color.Black，Color.White等。
+
+ +当前支持的Color颜色枚举： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

颜色名称

+

颜色值

+

颜色示意

+

Black

+

0x000000

+

+

Blue

+

0x0000ff

+

+

Brown

+

0xa52a2a

+

+

Gray

+

0x808080

+

+

Green

+

0x008000

+

+

Orange

+

0xffa500

+

+

Pink

+

0xffc0cb

+

+

Red

+

0xff0000

+

+

White

+

0xffffff

+

+

Yellow

+

0xffff00

+

+
+ +## ColorStop类型 + +颜色断点类型，用于描述渐进色颜色断点。 + + + + + + + + + + + + +

名称

+

类型定义

+

描述

+

ColorStop

+

[Color, number]

+

描述渐进色颜色断点类型，第一个参数为颜色值，第二个参数为0~1之间的比例值。

+
+ +## 示例 + +``` +@Entry +@Component +struct dataTypeExample { + build() { + Column({ space: 5 }) { + Text('Length').fontColor(0xCCCCCC).fontSize(9).width('90%') + Text('90%').width('90%').height(40).backgroundColor(0xF9CF93) + .textAlign(TextAlign.Center).fontColor(Color.White) + Text('320').width(320).height(40).backgroundColor(0xF9CF93) + .textAlign(TextAlign.Center).fontColor(Color.White) + Text('1000px').width('1000px').height(40).backgroundColor(0xF9CF93) + .textAlign(TextAlign.Center).fontColor(Color.White) + + Text('Angle').fontColor(0xCCCCCC).fontSize(9).width('90%') + Text('45deg') + .width(40).height(40) + .rotate({ x: 0, y: 0, z: 1, angle: 45, centerX: '50%', centerY: '50%' }) + .fontColor(Color.White) + .backgroundColor(0xF9CF93).textAlign(TextAlign.Center) + + Text('45rad') + .width(40).height(40) + .rotate({ x: 0, y: 0, z: 1, angle: '45rad', centerX: '50%', centerY: '50%' }) + .fontColor(Color.White) + .backgroundColor(0xF9CF93).textAlign(TextAlign.Center).margin({ top: 30 }) + + Text('Point').fontColor(0xCCCCCC).fontSize(9).width('90%') + Line().width(300).height(40).startPoint([0, 20]).endPoint([300, 20]) + + Text('Color').fontColor('#CCCCCC').fontSize(9).width('90%') + Text('0xF9CF93') + .fontColor(Color.White).textAlign(TextAlign.Center) + .width('90%').height(40).backgroundColor(0xF9CF93) + + Text('#F9CF93') + .fontColor(Color.White).textAlign(TextAlign.Center) + .width('90%').height(40).backgroundColor('#F9CF93') + + Text('rgb(249, 207, 147)') + .fontColor(Color.White).textAlign(TextAlign.Center) + .width('90%').height(40).backgroundColor('rgb(249, 207, 147)') + + Text('rgba(249, 207, 147, 1.0)') + .fontColor(Color.White).textAlign(TextAlign.Center) + .width('90%').height(40).backgroundColor('rgba(249, 207, 147, 1.0)') + + Text('Color.Yellow') + .textAlign(TextAlign.Center) + .width('90%').height(40).backgroundColor(Color.Yellow) + } + .width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/datatype.png) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-ui-state-management.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-ui-state-management.md new file mode 100644 index 0000000000000000000000000000000000000000..98a1b5c20488ebd827e533abbd43df7c3e1115d3 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-ui-state-management.md @@ -0,0 +1,11 @@ +# UI状态管理 + +- **[基本概念](ts-ui-state-mgmt-concepts.md)** + +- **[管理组件拥有的状态](ts-managing-component-states.md)** + +- **[管理应用程序的状态](ts-managing-application-states.md)** + +- **[其他类目的状态管理](ts-managing-other-states.md)** + + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-ui-state-mgmt-concepts.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-ui-state-mgmt-concepts.md new file mode 100644 index 0000000000000000000000000000000000000000..129c7dbb095cadb3269907b9da2e7ebcc50f378c --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-ui-state-mgmt-concepts.md @@ -0,0 +1,22 @@ +# 基本概念 + +在声明式UI编程范式中，UI是应用程序状态的函数，开发人员通过修改当前应用程序状态来更新相应的UI界面。 + +开发框架提供了多种应用程序状态管理的能力。 + +![](figures/CoreSpec_figures_state-mgmt-overview.png) + +## 状态变量装饰器 + +- **@State：**组件拥有的状态属性。每当**@State**装饰的变量更改时，组件会重新渲染更新UI。 +- **@Link：**组件依赖于其父组件拥有的某些状态属性。每当任何一个组件中的数据更新时，另一个组件的状态都会更新，父子组件都会进行重新渲染。 +- **@Prop：**工作原理类似**@Link**，只是子组件所做的更改不会同步到父组件上，属于单向传递。 + +## 应用程序状态数据 + +**AppStorage**是整个UI中使用的应用程序状态的中心“数据库”，UI框架会针对应用程序创建单例**AppStorage**对象，并提供相应的装饰器和接口供应用程序使用。 + +- **@StorageLink：@StorageLink\(name\)**的工作原理类似于**@Consume\(name\)**，不同的是，该给定名称的链接对象是从**AppStorage**中获得的，它在**UI组件**和**AppStorage**之间建立双向绑定同步数据。 +- **@StorageProp：@StorageProp\(name\)**将UI组件属性与**AppStorage**进行单向同步。**AppStorage**中的值更改会更新组件中的属性，但UI组件无法更改**AppStorage**中的属性值。 +- **AppStorage**还提供用于业务逻辑实现的API，用于添加、读取、修改和删除应用程序的状态属性，通过此API所做的更改会导致修改的状态数据同步到UI组件上进行UI更新。 + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-background.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-background.md new file mode 100644 index 0000000000000000000000000000000000000000..2c364e5f8534b1211506c2cc996adf1f5e640fc5 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-background.md @@ -0,0 +1,161 @@ +# 背景设置 + +设置组件的背景色。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

backgroundColor

+

Color

+

-

+

设置组件的背景色。

+

backgroundImage

+

src: string,

+

repeat?: ImageRepeat

+

-

+

src参数：图片地址，支持网络图片资源和本地图片资源地址(不支持svg类型的图片)。

+

repeat参数：设置背景图片的重复样式，默认不重复。

+

backgroundImageSize

+

{

+

width?: Length,

+

height?: Length

+

} | ImageSize

+

Auto

+

设置背景图像的高度和宽度。当输入为{width: Length, height: Length}对象时，如果只设置一个属性，则第二个属性保持图片原始宽高比进行调整。默认保持原图的比例不变。

+

backgroundImagePosition

+

{

+

x?: Length,

+

y?: Length

+

} | Alignment

+

{

+

x: 0,

+

y: 0

+

}

+

设置背景图在组件中显示位置。

+
+ +- ImageSize枚举说明 + + + + + + + + + + + + + + + + +

类型

+

描述

+

Cover

+

默认值，保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。

+

Contain

+

保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。

+

Auto

+

保持原图的比例不变。

+
+ + +## 示例 + +``` +@Entry +@Component +struct BackgroundExample { + build() { + Column({ space: 5 }) { + Text('background color').fontSize(9).width('90%').fontColor(0xCCCCCC) + Row().width('90%').height(50).backgroundColor(0xE5E5E5).border({ width: 1 }) + + Text('background image repeat along X').fontSize(9).width('90%').fontColor(0xCCCCCC) + Row() + .backgroundImage('/comment/bg.jpg', ImageRepeat.X) + .backgroundImageSize({ width: '250px', height: '140px' }) + .width('90%') + .height(70) + .border({ width: 1 }) + + Text('background image repeat along Y').fontSize(9).width('90%').fontColor(0xCCCCCC) + Row() + .backgroundImage('/comment/bg.jpg', ImageRepeat.Y) + .backgroundImageSize({ width: '500px', height: '120px' }) + .width('90%') + .height(100) + .border({ width: 1 }) + + Text('background image size').fontSize(9).width('90%').fontColor(0xCCCCCC) + Row() + .width('90%').height(150) + .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat) + .backgroundImageSize({ width: 1000, height: 500 }) + .border({ width: 1 }) + + Text('background fill the box(Cover)').fontSize(9).width('90%').fontColor(0xCCCCCC) + // 不保准图片完整的情况下占满盒子 + Row() + .width(200) + .height(50) + .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat) + .backgroundImageSize(ImageSize.Cover) + .border({ width: 1 }) + + Text('background fill the box(Contain)').fontSize(9).width('90%').fontColor(0xCCCCCC) + // 保准图片完整的情况下放到最大 + Row() + .width(200) + .height(50) + .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat) + .backgroundImageSize(ImageSize.Contain) + .border({ width: 1 }) + + Text('background image position').fontSize(9).width('90%').fontColor(0xCCCCCC) + Row() + .width(100) + .height(50) + .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat) + .backgroundImageSize({ width: 1000, height: 560 }) + .backgroundImagePosition({ x: -500, y: -300 }) + .border({ width: 1 }) + } + .width('100%').height('100%').padding({ top: 5 }) + } +} +``` + +![](figures/back.png) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-border.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-border.md new file mode 100644 index 0000000000000000000000000000000000000000..84663e3c502590a5bea3878ac2681f41b4a28c47 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-border.md @@ -0,0 +1,119 @@ +# 边框设置 + +设置组件边框样式。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

border

+

{

+

width?: Length,

+

color?: Color,

+

radius?: Length,

+

style?: BorderStyle

+

}

+

-

+

统一边框样式设置接口。

+

borderStyle

+

BorderStyle

+

Solid

+

设置元素的边框样式。

+

borderWidth

+

Length

+

0

+

设置元素的边框宽度。

+

borderColor

+

Color

+

-

+

设置元素的边框颜色。

+

borderRadius

+

Length

+

0

+

设置元素的边框圆角半径。

+
+ +- BorderStyle枚举说明 + + + + + + + + + + + + + + + + +

名称

+

描述

+

Dotted

+

显示为一系列圆点，圆点半径为borderWidth的一半。

+

Dashed

+

显示为一系列短的方形虚线。

+

Solid

+

显示为一条实线。

+
+ + +## 示例 + +``` +@Entry +@Component +struct BorderExample { + build() { + Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) { + // 线段 + Text('dashed') + .borderStyle(BorderStyle.Dashed).borderWidth(5).borderColor(0xAFEEEE).borderRadius(10) + .width(120).height(120).textAlign(TextAlign.Center).fontSize(16) + // 点线 + Text('dotted') + .border({ width: 5, color: 0x317AF7, radius: 10, style: BorderStyle.Dotted }) + .width(120).height(120).textAlign(TextAlign.Center).fontSize(16) + }.width('100%').height(150) + } +} +``` + +![](figures/border.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-enable.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-enable.md new file mode 100644 index 0000000000000000000000000000000000000000..161c1a5b34c9353ee5f64780cd0e155a94beec87 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-enable.md @@ -0,0 +1,45 @@ +# 禁用控制 + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

enabled

+

boolean

+

true

+

值为true表示组件可用，可响应点击等操作；值为false时，不响应点击等操作。

+
+ +## 示例 + +``` +@Entry +@Component +struct EnabledExample { + build() { + Flex({ justifyContent: FlexAlign.SpaceAround }) { + // 点击没有反应 + Button('disable').enabled(false).backgroundColor(0x317aff).opacity(0.4) + Button('enable').backgroundColor(0x317aff) + } + .width('100%') + .padding({ top: 5 }) + } +} +``` + +![](figures/enabled.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-flex-layout.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-flex-layout.md new file mode 100644 index 0000000000000000000000000000000000000000..edb397c70fec81531a2efdaedbd31172d52cccbd --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-flex-layout.md @@ -0,0 +1,119 @@ +# Flex布局 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>- 仅当父组件是Flex组件时生效。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数说明

+

默认值

+

描述

+

flexBasis

+

'auto' | Length

+

'auto'

+

此属性所在的组件在Flex容器中主轴方向上基准尺寸。

+

flexGrow

+

number

+

0

+

Flex容器的剩余空间分配给给此属性所在的组件的比例。

+

flexShrink

+

number

+

1

+

Flex容器压缩尺寸分配给此属性所在的组件的比例。

+

alignSelf

+

ItemAlign

+

Auto

+

覆盖Flex布局容器中alignItems默认配置。

+
+ +## 示例 + +``` +@Entry +@Component +struct FlexExample { + build() { + Column({ space: 5 }) { + Text('flexBasis').fontSize(9).fontColor(0xCCCCCC).width('90%') + // 基于主轴基准尺寸 + // flexBasis()值可以是'auto'(默认值)元素本来的大小 ,如果是数字则类似于.width()/.height() ,基于主轴 + Flex() { + Text('flexBasis(100)') + .flexBasis('100').height(100).lineHeight(70) + .backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + Text('flexBasis("auto")') + .flexBasis('auto').width('60%').height(100).lineHeight(70) + .backgroundColor(0xD2B48C).textAlign(TextAlign.Center) + }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE) + + Text('flexGrow').fontSize(9).fontColor(0xCCCCCC).width('90%') + // 剩余空间所占比例 + // flexGrow()剩余空间分配给该元素的比例 + Flex() { + Text('flexGrow(2)') + .flexGrow(2).height(100).lineHeight(70) + .backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + Text('flexGrow(1)') + .flexGrow(1).height(100).lineHeight(70) + .backgroundColor(0xD2B48C).textAlign(TextAlign.Center) + }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE) + + Text('flexShrink').fontSize(9).fontColor(0xCCCCCC).width('90%') + // flexShrink()此属性所在的组件的比例 + // text1比例是0,其他都是默认值1,放不下时直接等比例缩放后两个,第一个不缩放 + Flex({ direction: FlexDirection.Row }) { + Text('flexShrink(0)') + .flexShrink(0).width('50%').height(100).lineHeight(70) + .backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + Text('no flexShrink') + .width('40%').height(100).lineHeight(70).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) + Text('flexShrink(2)') + .flexShrink(2).width('40%').height(100) .lineHeight(70) + .backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE) + + Text('alignSelf').fontSize(9).fontColor(0xCCCCCC).width('90%') + // alignSelf()覆盖Flex布局容器中alignItems默认配置 + Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { + Text('no alignSelf,height:80').width('33%').height(80) + .backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + Text('alignSelf stretch') + .alignSelf(ItemAlign.Stretch).width('33%').height(80).lineHeight(70) + .backgroundColor(0xD2B48C).textAlign(TextAlign.Center) + Text('no alignSelf,height:100').width('34%').height(100) + .backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/flex.png) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-gradient-color.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-gradient-color.md new file mode 100644 index 0000000000000000000000000000000000000000..9f8221e9f4aca569ad9eefeb3edac6d35f63f0a7 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-gradient-color.md @@ -0,0 +1,177 @@ +# 颜色渐变 + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

linearGradient

+

{

+

angle?: Angle,

+

direction?:GradientDirection,

+

colors: Array<ColorStop>

+

repeating?: boolean

+

}

+

-

+

线性渐变。

+

angle: 线性渐变的角度。

+

direction: 线性渐变的方向。

+

colors: 为渐变的颜色描述。

+

repeating: 为渐变的颜色重复着色。

+

sweepGradient

+

{

+

center: Point,

+

start?: angle,

+

end?: angle,

+

colors: Array<ColorStop>

+

repeating?: boolean

+

}

+

-

+

角度渐变。

+

center：为角度渐变的中心点。

+

start：角度渐变的起点。

+

end：角度渐变的终点。

+

colors: 为渐变的颜色描述。

+

repeating: 为渐变的颜色重复着色。

+

radialGradient

+

{

+

center: Point,

+

radius: Length,

+

colors: Array<ColorStop>

+

repeating: boolean

+

}

+

-

+

径向渐变。

+

center：径向渐变的中心点。

+

radius：径向渐变的半径。

+

colors: 为渐变的颜色描述。

+

repeating: 为渐变的颜色重复着色。

+
+ +- GradientDirection枚举说明 + + GradientDirection用于描述渐变方向。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

描述

+

Left

+

从右向左。

+

Top

+

从下向上。

+

Right

+

从左向右。

+

Bottom

+

从上向下。

+

LeftTop

+

左上。

+

LeftBottom

+

左下。

+

RightTop

+

右上。

+

RightBottom

+

右下。

+

None

+

无。

+
+ + +## 示例 + +``` +@Entry +@Component +struct ColorGradientExample { + build() { + Column({ space: 5 }) { + Text('linearGradient').fontSize(12).width('90%').fontColor(0xCCCCCC) + Row() + .width('90%') + .height(50) + .linearGradient({ + angle: 90, + direction: GradientDirection.Left, + colors: [[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]] + }) + Text('sweepGradient').fontSize(12).width('90%').fontColor(0xCCCCCC) + Row() + .width(100) + .height(100) + .sweepGradient({ + center: [50, 50], + start: 0, + end: 359, + colors: [[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]] + }) + Text('radialGradient').fontSize(12).width('90%').fontColor(0xCCCCCC) + Row() + .width(100) + .height(100) + .radialGradient({ + center: [50, 50], + radius: 60, + colors:[[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]] + }) + } + .width('100%') + .padding({ top: 5 }) + } +} +``` + +![](figures/colorGradient.png) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-grid.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-grid.md new file mode 100644 index 0000000000000000000000000000000000000000..9247770a418457631917b8648cb19b9fec843d3d --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-grid.md @@ -0,0 +1,114 @@ +# 栅格设置 + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>栅格布局的列宽、列间距由距离最近的GridContainer父组件决定。使用栅格属性的组件树上至少需要有1个GridContainer容器组件。 + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

useSizeType

+

{

+

xs?: number | { span: number, offset: number },

+

sm?: number | { span: number, offset: number },

+

md?: number | { span: number, offset: number },

+

lg?: number | { span: number, offset: number }

+

}

+

-

+

设置在特定设备宽度类型下的占用列数和偏移列数，span: 占用列数; offset: 偏移列数。

+

当值为number类型时，仅设置列数， 当格式如{"span": 1, "offset": 0}时，指同时设置占用列数与偏移列数。

+
  • xs: 指设备宽度类型为SizeType.XS时的占用列数和偏移列数。
  • sm: 指设备宽度类型为SizeType.SM时的占用列数和偏移列数。
+
  • md: 指设备宽度类型为SizeType.MD时的占用列数和偏移列数。
  • lg: 指设备宽度类型为SizeType.LG时的占用列数和偏移列数。
+

gridSpan

+

number

+

1

+

默认占用列数，指useSizeType属性没有设置对应尺寸的列数（span)时，占用的栅格列数。

+
说明：

设置了栅格span属性，组件的宽度由栅格布局决定。

+
+

gridOffset

+

number

+

0

+

默认偏移列数，指useSizeType属性没有设置对应尺寸的偏移(offset)时， 当前组件沿着父组件Start方向，偏移的列数，也就是当前组件位于第n列。

+
说明：

1. 配置该属性后，当前组件在父组件水平方向的布局不再跟随父组件原有的布局方式，而是沿着父组件的Start方向偏移一定位移。

+

2. 偏移位移 = （列宽 + 间距）* 列数。

+

3. 设置了偏移(gridOffset)的组件之后的兄弟组件会根据该组件进行相对布局，类似相对布局。

+
+
+ +## 示例 + +``` +@Entry +@Component +struct GridContainerExample1 { + build(){ + GridContainer() { + Row({}) { + Row() { + Text('Left').fontSize(25) + } + .useSizeType({ + xs: { span: 1, offset: 0 }, sm: { span: 1, offset: 0 }, + md: { span: 1, offset: 0 }, lg: { span: 2, offset: 0 } + }) + .height("100%") + .backgroundColor(0x66bbb2cb) + Row() { + Text('Center').fontSize(25) + } + .useSizeType({ + xs: { span: 1, offset: 0 }, sm: { span: 2, offset: 1 }, + md: { span: 5, offset: 1 }, lg: { span: 7, offset: 2 } + }) + .height("100%") + .backgroundColor(0x66b6c5d1) + Row() { + Text('Right').fontSize(25) + } + .useSizeType({ + xs: { span: 1, offset: 0 }, sm: { span: 1, offset: 3 }, + md: { span: 2, offset: 6 }, lg: { span: 3, offset: 9 } + }) + .height("100%") + .backgroundColor(0x66bbb2cb) + } + .height(200) + } + .backgroundColor(0xf1f3f5) + .margin({ top: 10 }) + } +} +``` + +**图 1** 设备宽度为SM +![](figures/设备宽度为SM.png "设备宽度为SM") + +**图 2** 设备宽度为MD +![](figures/设备宽度为MD.png "设备宽度为MD") + +**图 3** 设备宽度为LG +![](figures/设备宽度为LG.png "设备宽度为LG") + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-image-effect.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-image-effect.md new file mode 100644 index 0000000000000000000000000000000000000000..aad81a1f89a18bec3b0b37302ba4f4e1295b7804 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-image-effect.md @@ -0,0 +1,158 @@ +# 图像效果 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

blur

+

number

+

-

+

为当前组件添加内容模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。

+

backdropBlur

+

number

+

-

+

为当前组件添加背景模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。

+

shadow

+

{

+

radius: number,

+

color?: Color,

+

offsetX?: number,

+

offsetY?: number

+

}

+

-

+

为当前组件添加阴影效果，入参为模糊半径(必填)、阴影的颜色(可选，默认为灰色)、X轴的偏移量(可选，默认为0)，Y轴的偏移量(可选，默认为0)，偏移量单位为px。

+

grayscale

+

number

+

0.0

+

为当前组件添加灰度效果。值定义为灰度转换的比例，入参1.0则完全转为灰度图像，入参则0.0图像无变化，入参在0.0和1.0之间时，效果呈线性变化。（百分比)

+

brightness

+

number

+

1.0

+

为当前组件添加高光效果，入参为高光比例，值为1时没有效果，小于1时亮度变暗，0为全黑；大于1时亮度增加，数值越大亮度越大。

+

saturate

+

number

+

1.0

+

为当前组件添加饱和度效果，饱和度为颜色中的含色成分和消色成分(灰)的比例，入参为1时，显示原图像，大于1时含色成分越大，饱和度越大；小于1时消色成分越大，饱和度越小。（百分比）

+

contrast

+

number

+

1.0

+

为当前组件添加对比度效果，入参为对比度的值，值为1时，显示原图；大于1时，值越大对比度越高，图像越清晰醒目；小于1时，值越小对比度越低；当对比度为0时，图像变为全灰。（百分比）

+

invert

+

number

+

0

+

反转输入的图像。入参为图像反转的比例。值为1时完全反转。值为0则图像无变化。（百分比）

+

sepia

+

number

+

0

+

将图像转换为深褐色。入参为图像反转的比例。值为1则完全是深褐色的，值为0图像无变化。 （百分比）

+

hueRotate

+

Angle

+

0deg

+

为当前组件添加色相旋转效果，入参为旋转的角度值。当入参为0deg时图像无变化(默认值是0deg)，入参没有最大值，超过360deg的值相当于又绕一圈。

+
+ +## 示例 + +``` +@Entry +@Component +struct ImageEffectsExample { + build() { + Column({space：10}) { + // 对字体进行模糊 + Text('font blur').fontSize(15).fontColor(0xCCCCCC).width('90%') + Text('text').blur(3).width('90%').height(40) + .fontSize(16).backgroundColor(0xF9CF93).padding({ left: 5 }) + + // 对背景进行模糊 + Text('backdropBlur').fontSize(15).fontColor(0xCCCCCC).width('90%') + Text().width('90%').height(40).fontSize(16).backdropBlur(3) + .backgroundImage('/comment/bg.jpg') + .backgroundImageSize({ width: 1200, height: 160 }) + + Text('shadow').fontSize(15).fontColor(0xCCCCCC).width('90%') + Image($r('app.media.bg')).width('90%').height(40) + .shadow({ radius: 10, color: Color.Gray, offsetX: 5, offsetY: 5 }) + + Text('grayscale').fontSize(15).fontColor(0xCCCCCC).width('90%') + Image($r('app.media.bg')).width('90%').height(40).grayscale(0.6) + + Text('brightness').fontSize(15).fontColor(0xCCCCCC).width('90%') + Image($r('app.media.bg')).width('90%').height(40).brightness(2.0) + + Text('saturate').fontSize(15).fontColor(0xCCCCCC).width('90%') + Image($r('app.media.bg')).width('90%').height(40).saturate(2.0) + + Text('contrast').fontSize(15).fontColor(0xCCCCCC).width('90%') + Image($r('app.media.bg')).width('90%').height(40).contrast(2.0) + + Text('invert').fontSize(15).fontColor(0xCCCCCC).width('90%') + Image($r('app.media.bg')).width('90%').height(40).invert(1) + + Text('hueRotate').fontSize(15).fontColor(0xCCCCCC).width('90%') + Image($r('app.media.bg')).width('90%').height(40).hueRotate(90) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/2222.png) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-layout-constraints.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-layout-constraints.md new file mode 100644 index 0000000000000000000000000000000000000000..75b0ae3549f3cfc83d2921f2b2cc26befd3a0170 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-layout-constraints.md @@ -0,0 +1,145 @@ +# 布局约束 + + + + + + + + + + + + + + + + + + + +

名称

+

参数说明

+

默认值

+

描述

+

aspectRatio

+

number

+

-

+

指定当前组件的宽高比。

+

displayPriority

+

number

+

-

+

设置当前组件在布局容器中显示的优先级，当父容器空间不足时，低优先级的组件会被隐藏。

+
说明：
  • 仅在Row/Column/Flex(单行)容器组件中生效。
+
+
+ +## 示例 + +``` +@Entry +@Component +struct AspectRatioExample { + private children : string[] = ['1', '2', '3', '4', '5', '6'] + + build() { + Column({space: 20}) { + Text('using container: row').fontSize(14).fontColor(0xCCCCCC).width('100%') + Row({space: 10}) { + ForEach(this.children, (item) => { + Text(item) + .backgroundColor(0xbbb2cb) + .fontSize(20) + .aspectRatio(1.5) + .height(60) + Text(item) + .backgroundColor(0xbbb2cb) + .fontSize(20) + .aspectRatio(1.5) + .width(60) + }, item=>item) + } + .size({width: "100%", height: 100}) + .backgroundColor(0xd2cab3) + .clip(true) + + Text('using container: grid').fontSize(14).fontColor(0xCCCCCC).width('100%') + Grid() { + ForEach(this.children, (item) => { + GridItem() { + Text(item) + .backgroundColor(0xbbb2cb) + .fontSize(40) + .aspectRatio(1.5) + } + }, item=>item) + } + .columnsTemplate('1fr 1fr 1fr') + .columnsGap(10) + .rowsGap(10) + .size({width: "100%", height: 165}) + .backgroundColor(0xd2cab3) + }.padding(10) + } +} +``` + +**图 1** 竖屏显示 +![](figures/竖屏显示.gif "竖屏显示") + +**图 2** 横屏显示 +![](figures/横屏显示.gif "横屏显示") + +``` +class ContainerInfo { + label : string = '' + size : string = '' +} + +class ChildInfo { + text : string = '' + priority : number = 0 +} + +@Entry +@Component +struct DisplayPriorityExample { + private container : ContainerInfo[] = [ + {label: 'Big container', size: '90%'}, + {label: 'Middle container', size: '50%'}, + {label: 'Small container', size: '30%'}] + private children : ChildInfo[] = [ + {text: '1\n(priority:2)', priority: 2}, + {text: '2\n(priority:1)', priority: 1}, + {text: '3\n(priority:3)', priority: 3}, + {text: '4\n(priority:1)', priority: 1}, + {text: '5\n(priority:2)', priority: 2}] + @State currentIndex : number = 0 + + build() { + Column({space: 10}) { + Button(this.container[this.currentIndex].label).backgroundColor(0x317aff) + .onClick((event: ClickEvent) => { + this.currentIndex = (this.currentIndex + 1) % this.container.length + }) + Flex({justifyContent: FlexAlign.SpaceBetween}) { + ForEach(this.children, (item)=>{ + Text(item.text) + .width(120) + .height(60) + .fontSize(24) + .textAlign(TextAlign.Center) + .backgroundColor(0xbbb2cb) + .displayPriority(item.priority) + }, item=>item.text) + } + .width(this.container[this.currentIndex].size) + .backgroundColor(0xd2cab3) + }.width("100%").margin({top:50}) + } +} + +``` + +![](figures/DisplayPriorityExample.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-location.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-location.md new file mode 100644 index 0000000000000000000000000000000000000000..6d1f0fd62ebdb6479258b3b0a0a26685624ed432 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-location.md @@ -0,0 +1,192 @@ +# 位置设置 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

align

+

Alignment

+

Center

+

设置元素内容的对齐方式，只有当设置的width和height大小超过元素本身内容大小时生效。

+

direction

+

Direction

+

Auto

+

设置元素水平方向的布局，可选值参照Direction枚举说明。

+

position

+

{

+

x: Length,

+

y: Length

+

}

+

-

+

使用绝对定位，设置元素锚点相对于父容器顶部起点偏移位置。在布局容器中，设置该属性不影响父容器布局，仅在绘制时进行位置调整。

+

markAnchor

+

{

+

x: Length,

+

y: Length

+

}

+

{

+

x: 0,

+

y: 0

+

}

+

设置元素在位置定位时的锚点，以元素顶部起点作为基准点进行偏移。

+

offset

+

{

+

x: Length,

+

y: Length

+

}

+

{

+

x: 0,

+

y: 0

+

}

+

相对布局完成位置坐标偏移量，设置该属性，不影响父容器布局，仅在绘制时进行位置调整。

+
+ +- Direction枚举说明 + + + + + + + + + + + + + + + + +

名称

+

描述

+

Ltr

+

元素从左到右布局。

+

Rtl

+

元素从右到左布局。

+

Auto

+

使用系统默认布局方向。

+
+ + +## 示例 + +``` +@Entry +@Component +struct PositionExample { + build() { + Column() { + Column({space: 10}) { + Text('align').fontSize(9).fontColor(0xCCCCCC).width('90%') + Text('top start') + .align(Alignment.TopStart) + .height(50) + .width('90%') + .fontSize(16) + .backgroundColor(0xFFE4C4) + + Text('direction').fontSize(9).fontColor(0xCCCCCC).width('90%') + Row() { + Text('1').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3) + Text('2').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C) + Text('3').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3) + Text('4').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C) + } + .width('90%') + .direction(Direction.Rtl) + } + } + .width('100%').margin({ top: 5 }).direction(Direction.Rtl) + } +} +``` + +![](figures/position.gif) + +``` +@Entry +@Component +struct PositionExample2 { + build() { + Column({ space: 20 }) { + Text('position').fontSize(12).fontColor(0xCCCCCC).width('90%') + Row({ space: 20 }) { + Text('1').size({ width: '45%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }) .fontSize(16) + Text('2 position(25, 15)') + .size({ width: '60%', height: '30' }).backgroundColor(0xbbb2cb).border({ width: 1 }) + .fontSize(16).align(Alignment.Start) + .position({ x: 25, y: 15 }) + Text('3').size({ width: '45%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) + Text('4 position(50%, 70%)') + .size({ width: '50%', height: '50' }).backgroundColor(0xbbb2cb).border({ width: 1 }).fontSize(16) + .position({ x: '50%', y: '70%' }) + }.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed }) + + Text('markAnchor').fontSize(12).fontColor(0xCCCCCC).width('90%') + Stack({ alignContent: Alignment.TopStart }) { + Row() + .size({ width: '100', height: '100' }) + .backgroundColor(0xdeb887) + Image($r('app.media.ic_health_heart')) + .size({ width: 25, height: 25 }) + .markAnchor({ x: 25, y: 25 }) + Image($r('app.media.ic_health_heart')) + .size({ width: 25, height: 25 }) + .markAnchor({ x: 25, y: 25 }) + .position({ x: '100%', y: '100%' }) + }.margin({ top: 25 }).border({ width: 1, style: BorderStyle.Dashed }) + + Text('offset').fontSize(12).fontColor(0xCCCCCC).width('90%') + Row() { + Text('1').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) + Text('2\noffset(15, 15)') + .size({ width: 120, height: '50' }).backgroundColor(0xbbb2cb).border({ width: 1 }) + .fontSize(16).align(Alignment.Start) + .offset({ x: 15, y: 15 }) + Text('3').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) + Text('4\noffset(-10%, 20%)') + .size({ width: 150, height: '50' }) .backgroundColor(0xbbb2cb).border({ width: 1 }).fontSize(16) + .offset({ x: '-10%', y: '20%' }) + }.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed }) + } + .width('100%').margin({ top: 25 }) + } +} +``` + +![](figures/position2.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-menu.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-menu.md new file mode 100644 index 0000000000000000000000000000000000000000..778b429ce710e09cbf025bf17ea98cec264444f5 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-menu.md @@ -0,0 +1,86 @@ +# Menu控制 + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

bindMenu

+

Array<MenuItem>

+

-

+

给组件绑定菜单，点击后弹出菜单。

+
+ +- MenuItem + + + + + + + + + + + + + + + + +

名称

+

类型

+

描述

+

value

+

string

+

菜单项文本。

+

action

+

() => void

+

点击菜单项的事件回调。

+
+ + +## 示例 + +``` +@Entry +@Component +struct menuExample { + build() { + Column() { + Text('click for Menu') + } + .width('100%') + .margin({ top: 5 }) + .bindMenu([ + { + value: 'Menu1', + action: () => { + console.info('handle Menu1 select') + } + }, + { + value: 'Menu2', + action: () => { + console.info('handle Menu2 select') + } + }, + ]) + } +} +``` + +![](figures/menu.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-opacity.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-opacity.md new file mode 100644 index 0000000000000000000000000000000000000000..167cd5b618dba2deb993a8467333855478244f3b --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-opacity.md @@ -0,0 +1,50 @@ +# 透明度设置 + +设置组件的透明度。 + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

opacity

+

number

+

1

+

元素的不透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。

+
+ +## 示例 + +``` +@Entry +@Component +struct OpacityExample { + build() { + Column({ space: 5 }) { + Text('opacity(1)').fontSize(9).width('90%').fontColor(0xCCCCCC) + Text().width('90%').height(50).opacity(1).backgroundColor(0xAFEEEE) + Text('opacity(0.7)').fontSize(9).width('90%').fontColor(0xCCCCCC) + Text().width('90%').height(50).opacity(0.7).backgroundColor(0xAFEEEE) + Text('opacity(0.4)').fontSize(9).width('90%').fontColor(0xCCCCCC) + Text().width('90%').height(50).opacity(0.4).backgroundColor(0xAFEEEE) + } + .width('100%') + .padding({ top: 5 }) + } +} +``` + +![](figures/opacity.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-overlay.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-overlay.md new file mode 100644 index 0000000000000000000000000000000000000000..2e2ec02f8c5df1b1f9f669805b5ef3783a831e61 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-overlay.md @@ -0,0 +1,56 @@ +# 浮层 + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

overlay

+

title: string,

+

options: {

+

align?: Alignment,

+

offset?: {x: number, y: number}

+

}

+

{

+

align: Alignment.Center,

+

offset: {0, 0}

+

}

+

在当前组件上，增加遮罩文本，布局与当前组件相同。

+
+ +## 示例 + +``` +@Entry +@Component +struct OverlayExample { + build() { + Column() { + Column() { + Text('floating layer') + .fontSize(12).fontColor(0xCCCCCC).maxLines(1) + Column() { + Image($r('app.media.img')) + .width(240).height(240) + .overlay("Don't walk and play with your phone.", { align: Alignment.Bottom, offset: { x: 0, y: -15 } }) + }.border({ color: Color.Black, width: 2 }) + }.width('100%') + }.padding({ top: 20 }) + } +} +``` + +![](figures/overlay.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-popup.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-popup.md new file mode 100644 index 0000000000000000000000000000000000000000..3528f97238f219fb30791b757c310e0259239cfe --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-popup.md @@ -0,0 +1,99 @@ +# Popup控制 + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

参数描述

+

bindPopup

+

{

+

show: boolean,

+

popup: {

+

message: string,

+

placementOnTop: boolean,

+

primaryButton?: {

+

value: string,

+

action: ()=>void

+

},

+

secondaryButton?:{

+

value: string,

+

action: () =>void

+

},

+

onStateChange?: (isVisible: boolean) => void

+

}

+

}

+

-

+

show: 当前弹窗提示是否显示，默认值为false。

+

message: 弹窗信息内容。

+

placementOnTop：是否在组件上方显示，默认值为false。

+

primaryButton: 第一个按钮。

+

secondaryButton: 第二个按钮。

+

onStateChange: 弹窗状态变化事件回调，参数为弹窗当前的显示状态。

+
+ +## 示例 + +``` +@Entry +@Component +struct PopupExample { + @State noHandlePopup: boolean = false + @State handlePopup: boolean = false + + build() { + Column({ space: 160 }) { + Button('no handle popup') + .onClick(() => { + this.noHandlePopup = !this.noHandlePopup + }) + .bindPopup(this.noHandlePopup, { + + message: 'content content content ...', + placementOnTop: false, + onStateChange: (e) => { + console.info(e.isVisible.toString()) + if (!e.isVisible) { + this.noHandlePopup = false + } + } + }) + + Button('with handle popup') + .onClick(() => { + this.handlePopup = !this.handlePopup + }) + .bindPopup(this.handlePopup, { + + message: 'content content content ...', + placementOnTop: true, + secondaryButton: { + + value: 'ok', + action: () => { + this.handlePopup = !this.handlePopup + console.info('secondaryButton click') + } + }, + onStateChange: (e) => { + console.info(e.isVisible.toString()) + } + }) + }.width('100%').padding({ top: 5 }) + } +} +``` + +![](figures/popup.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-sharp-clipping.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-sharp-clipping.md new file mode 100644 index 0000000000000000000000000000000000000000..4255b0081698d73c4741a2b3f75dbcc736739e09 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-sharp-clipping.md @@ -0,0 +1,73 @@ +# 形状裁剪 + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

clip

+

Shape | boolean

+

false

+

参数为Shape类型时，按指定的形状对当前组件进行裁剪；参数为boolean类型时，设置是否按照边缘轮廓进行裁剪。

+

mask

+

Shape

+

-

+

在当前组件上加上指定形状的遮罩。

+
+ +## 示例 + +``` +@Entry +@Component +struct ClipAndMaskExample { + build() { + Column({ space: 5 }) { + Text('clip').fontSize(9).width('90%').fontColor(0xCCCCCC) + // 用一个280px直径的圆对图像进行裁剪 + Image('/comment/bg.jpg') + .clip(new Circle({ width: 80, height: 80 })) + .width('500px').height('280px') + + Row() { + Image('/comment/bg.jpg').width('500px').height('280px') + } + .clip(true) + .borderRadius(20) + + Text('mask').fontSize(9).width('90%').fontColor(0xCCCCCC) + // 给图像添加了一个500px*280px的遮罩 + Image('/comment/bg.jpg') + .mask(new Rect({ width: '500px', height: '280px' }).fill(Color.Gray)) + .width('500px').height('280px') + + // 给图像添加了一个280px*280px的圆遮罩 + Image('/comment/bg.jpg') + .mask(new Circle({ width: '280px', height: '280px' }).fill(Color.Gray)) + .width('500px').height('281px') + } + .width('100%') + .margin({ top: 5 }) + } +} +``` + +![](figures/clip.png) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-size.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-size.md new file mode 100644 index 0000000000000000000000000000000000000000..7a4372c077ae8f8c34b4c04199f61a7a59467c38 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-size.md @@ -0,0 +1,147 @@ +# 尺寸设置 + +设置组件尺寸相关信息。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数说明

+

默认值

+

描述

+

width

+

Length

+

-

+

设置组件自身的宽度，缺省时使用元素自身内容需要的宽度。

+

height

+

Length

+

-

+

设置组件自身的高度，缺省时使用元素自身内容需要的高度。

+

size

+

{

+

width?: Length,

+

height?: Length

+

}

+

-

+

设置高宽尺寸。

+

padding

+

{

+

top?: Length,

+

right?: Length,

+

bottom?: Length,

+

left?: Length

+

} | Length

+

0

+

设置内边距属性。

+

参数为Length类型时，四个方向内边距同时生效。

+

margin

+

{

+

top?: Length,

+

right?: Length,

+

bottom?: Length,

+

left?: Length

+

}

+

| Length

+

0

+

设置外边距属性。

+

参数为Length类型时，四个方向外边距同时生效。

+

constraintSize

+

{

+

minWidth?: Length,

+

maxWidth?: Length,

+

minHeight?: Length,

+

maxHeight?: Lenght

+

}

+

{

+

minWidth: 0,

+

maxWidth: Infinity,

+

minHeight: 0,

+

maxHeight: Infinity

+

}

+

设置约束尺寸，组件布局时，进行尺寸范围限制。

+

layoutWeight

+

number

+

0

+

容器尺寸确定时，元素与兄弟节点主轴布局尺寸按照权重进行分配，忽略本身尺寸设置。

+
说明：

仅在Row/Column/Flex布局中生效。

+
+
+ +## 示例 + +``` +@Entry +@Component +struct SizeExample { + build() { + Column({ space: 10 }) { + Text('margin and padding:').fontSize(12).fontColor(0xCCCCCC).width('90%') + // 宽度80 ,高度80 ,内外边距20 + Row() { + Row() { + Row().size({ width: '100%', height: '100%' }).backgroundColor(0xAFEEEE) + }.width(80).height(80).padding(20).margin(20).backgroundColor(0xFDF5E6) + }.backgroundColor(0xFFA500) + + Text('layoutWeight').fontSize(12).fontColor(0xCCCCCC).width('90%') + // 容器尺寸确定时，元素与兄弟节点主轴布局尺寸按照权重进行分配，忽略本身尺寸设置。 + Row() { + // 权重1 + Text('layoutWeight(1)') + .size({ width: '30%', height: 110 }).backgroundColor(0xFFEFD5).textAlign(TextAlign.Center) + .layoutWeight(1) + // 权重0 + Text('layoutWeight(2)') + .size({ width: '30%', height: 110 }).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + .layoutWeight(2) + // 权重默认0 + Text('no layoutWeight') + .size({ width: '30%', height: 110 }).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) + }.size({ width: '90%', height: 140 }).backgroundColor(0xAFEEEE) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/size.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-text-style.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-text-style.md new file mode 100644 index 0000000000000000000000000000000000000000..c0cd5707f1c43405a8c03c15c68eadb5f536e046 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-text-style.md @@ -0,0 +1,177 @@ +# 文本样式设置 + +针对包含文本元素的组件，设置文本样式。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

fontColor

+

Color

+

-

+

设置文本颜色。

+

fontSize

+

Length

+

-

+

设置文本尺寸，Length为number类型时，使用fp单位。

+

fontStyle

+

FontStyle

+

Normal

+

设置文本的字体样式。

+

fontWeight

+

number | FontWeight

+

Normal

+

设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。

+

提供常用枚举值，参考：FontWeight。

+

fontFamily

+

string

+

-

+

设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial, sans-serif'。

+
+ +- FontStyle枚举说明 + + + + + + + + + + + + + +

名称

+

描述

+

Normal

+

标准的字体样式。

+

Italic

+

斜体的字体样式。

+
+ + +- FontWeight枚举说明 + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

描述

+

Lighter

+

字体较细。

+

Normal

+

字体粗细正常。

+

Regular

+

字体粗细正常。

+

Medium

+

字体粗细适中。

+

Bold

+

字体较粗。

+

Bolder

+

字体非常粗。

+
+ + +## 示例 + +``` +@Entry +@Component +struct TextStyleExample { + build() { + Column({ space: 5 }) { + Text('default text') + + Text('text font color red') + .fontColor(Color.Red) + + Text('text font size 20') + .fontSize(20) + + Text('text font style Italic') + .fontStyle(FontStyle.Italic) + + Text('text fontWeight bold') + .fontWeight(700) + + Text('text fontFamily sans-serif') + .fontFamily('sans-serif') + + Text('red 20 Italic bold cursive text') + .fontColor(Color.Red) + .fontSize(20) + .fontStyle(FontStyle.Italic) + .fontWeight(700) + .fontFamily('cursive') + .textAlign(TextAlign.Center) + .width('90%') + + Text('Orange 18 Normal source-sans-pro text') + .fontColor(Color.Orange) + .fontSize(18) + .fontStyle(FontStyle.Normal) + .fontWeight(400) + .fontFamily('source-sans-pro,cursive,sans-serif') + }.width('100%') + } +} +``` + +![](figures/textstyle.png) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-transformation.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-transformation.md new file mode 100644 index 0000000000000000000000000000000000000000..112f7c5f51d0afbefd5c348c85f79fecab9e3065 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-transformation.md @@ -0,0 +1,129 @@ +# 图形变换 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

rotate

+

{

+

x?: number,

+

y?: number,

+

z?: number,

+

angle?: Angle,

+

centerX?: Length,

+

centerY?: Length

+

}

+

{

+

x: 0,

+

y: 0,

+

z: 0,

+

angle: 0,

+

centerX: '50%',

+

centerY: '50%'

+

}

+

(x, y, z)指定一个矢量，表示旋转轴，正角度为顺时针转动，负角度为逆时针转动，默认值为0，同时可以通过centerX和centerY设置旋转的中心点。

+

translate

+

{

+

x?: Length,

+

y?: Length,

+

z? : Length

+

}

+

{

+

x: 0,

+

y: 0,

+

z: 0

+

}

+

可以分别设置X轴、Y轴、Z轴的平移距离，距离的正负控制平移的方向，默认值为0。

+

scale

+

{

+

x?: number,

+

y?: number,

+

z?: number,

+

centerX?: Length,

+

centerY?: Length

+

}

+

{

+

x: 1,

+

y: 1,

+

z: 1,

+

centerX:'50%',

+

centerY:'50%'

+

}

+

可以分别设置X轴、Y轴、Z轴的缩放比例，默认值为1，同时可以通过centerX和centerY设置缩放的中心点。

+

transform

+

matrix: Matrix4

+

-

+

设置当前组件的变换矩阵。

+
+ +## 示例 + +``` +import Matrix4 from '@ohos.matrix4' + +@Entry +@Component +struct TransformExample { + build() { + Column() { + Text('rotate').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(30) + Row() + .rotate({ + x: 1, + y: 1, + z: 1, + centerX: '50%', + centerY: '50%', + angle: 300 + }) // 组件以(1,1,1)为旋转轴，中心点顺时针旋转 300度 + .width(100).height(100).backgroundColor(0xAFEEEE) + + Text('translate').width('90%').fontColor(0xCCCCCC).padding(10).fontSize(30) + Row() + .translate({ x: 100, y: 5 }) // x轴平移100，y轴平移5 + .width(100).height(100).backgroundColor(0xAFEEEE).margin({bottom:10}) + + Text('scale').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(30) + Row() + .scale({ x: 2, y: 0.5 }) // 高度缩小一倍，宽度放大一倍，z轴在2D下无效果 + .width(100).height(100).backgroundColor(0xAFEEEE) + + Text('Matrix4').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(30) + Row() + .width(100).height(100).backgroundColor(0xAFEEEE) + .transform(Matrix4.identity().translate({ x: 100, y: 100, z: 30 })) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/1111.png) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-visibility.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-visibility.md new file mode 100644 index 0000000000000000000000000000000000000000..8d0dc54ba15477b9f4296a73ca1c4a96a199a9e1 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-visibility.md @@ -0,0 +1,80 @@ +# 显隐控制 + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

visibility

+

Visibility

+

Visible

+

控制当前组件显示或隐藏。

+
+ +- Visibility枚举说明 + + + + + + + + + + + + + + + + +

名称

+

描述

+

Hidden

+

隐藏，但参与布局进行占位。

+

Visible

+

显示。

+

None

+

隐藏，但不参与布局，不进行占位。

+
+ + +## 示例 + +``` +@Entry +@Component +struct VisibilityExample { + build() { + Column() { + Column() { + Text('Visible').fontSize(9).width('90%').fontColor(0xCCCCCC) + Row().visibility(Visibility.Visible).width('90%').height(80).backgroundColor(0xAFEEEE) + + Text('None').fontSize(9).width('90%').fontColor(0xCCCCCC) + // 隐藏不参与占位 + Row().visibility(Visibility.None).width('90%').height(80).backgroundColor(0xAFEEEE) + + Text('Hidden').fontSize(9).width('90%').fontColor(0xCCCCCC) + // 隐藏参与占位 + Row().visibility(Visibility.Hidden).width('90%').height(80).backgroundColor(0xAFEEEE) + }.width('90%').border({ width: 1 }) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures/visibility.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-z-order.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-z-order.md new file mode 100644 index 0000000000000000000000000000000000000000..6a01c0478eb3170d1b793891cd40fe69db3cc0b6 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes-z-order.md @@ -0,0 +1,52 @@ +# Z序控制 + + + + + + + + + + + + + + +

名称

+

参数类型

+

默认值

+

描述

+

zIndex

+

number

+

0

+

同一容器中兄弟组件显示层级关系，z值越大，显示层级越高。

+
+ +## 示例 + +``` +@Entry +@Component +struct ZIndexExample { + build() { + Column() { + Stack() { + // stack会重叠组件, 默认后定义的在最上面 + Text('first child, zIndex(2)') + .size({width: '40%', height: '30%'}).backgroundColor(0xbbb2cb) + .zIndex(2) + // 默认值0 + Text('second child, default zIndex(0)') + .size({width: '90%', height: '80%'}).backgroundColor(0xd2cab3).align(Alignment.TopStart) + Text('third child, zIndex(1)') + .size({width: '70%', height: '50%'}).backgroundColor(0xc1cbac).align(Alignment.TopStart) + .zIndex(1) + } + }.width('100%').height(200) + } +} +``` + +![](figures/zIndex.png) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes.md new file mode 100644 index 0000000000000000000000000000000000000000..25dfcb01389e66e7118d9437d495195f5bc1bacb --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-attributes.md @@ -0,0 +1,41 @@ +# 通用属性 + +- **[尺寸设置](ts-universal-attributes-size.md)** + +- **[位置设置](ts-universal-attributes-location.md)** + +- **[布局约束](ts-universal-attributes-layout-constraints.md)** + +- **[Flex布局](ts-universal-attributes-flex-layout.md)** + +- **[边框设置](ts-universal-attributes-border.md)** + +- **[背景设置](ts-universal-attributes-background.md)** + +- **[透明度设置](ts-universal-attributes-opacity.md)** + +- **[显隐控制](ts-universal-attributes-visibility.md)** + +- **[禁用控制](ts-universal-attributes-enable.md)** + +- **[浮层](ts-universal-attributes-overlay.md)** + +- **[Z序控制](ts-universal-attributes-z-order.md)** + +- **[图形变换](ts-universal-attributes-transformation.md)** + +- **[图像效果](ts-universal-attributes-image-effect.md)** + +- **[形状裁剪](ts-universal-attributes-sharp-clipping.md)** + +- **[文本样式设置](ts-universal-attributes-text-style.md)** + +- **[栅格设置](ts-universal-attributes-grid.md)** + +- **[颜色渐变](ts-universal-attributes-gradient-color.md)** + +- **[Popup控制](ts-universal-attributes-popup.md)** + +- **[Menu控制](ts-universal-attributes-menu.md)** + + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-components.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-components.md new file mode 100644 index 0000000000000000000000000000000000000000..5a2eead75a19e91a1c96d37a14d76e5164a78a09 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-components.md @@ -0,0 +1,9 @@ +# 通用 + +- **[通用事件](ts-universal-events.md)** + +- **[通用属性](ts-universal-attributes.md)** + +- **[手势处理](ts-gesture-processing.md)** + + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-events-click.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-events-click.md new file mode 100644 index 0000000000000000000000000000000000000000..cb5b20aebe655b2803d06e09803751017add6389 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-events-click.md @@ -0,0 +1,93 @@ +# 点击事件 + + + + + + + + + + + + +

名称

+

支持冒泡

+

功能描述

+

onClick(callback: (event?: ClickEvent) => void)

+

否

+

点击动作触发该方法调用，event参数见ClickEvent介绍。

+
+ +- ClickEvent对象说明 + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

属性名称

+

属性类型

+

描述

+

screenX

+

number

+

点击点相对于设备屏幕左边沿的X坐标。

+

screenY

+

number

+

点击点相对于设备屏幕上边沿的Y坐标。

+

x

+

number

+

点击点相对于被点击元素左边沿的X坐标。

+

y

+

number

+

点击点相对于被点击元素上边沿的Y坐标。

+

timestamp

+

number

+

事件时间戳。

+
+ + +## 示例 + +``` +@Entry +@Component +struct ClickExample { + @State text: string = '' + + build() { + Column() { + Button('Click').backgroundColor(0x2788D9) + .onClick((event: ClickEvent) => { + console.info(this.text = 'Button clicked!\n X:' + event.x + '\n' + ' Y:' + event.y) + }) + Text(this.text).padding(15) + }.height(300).width('100%').padding(35) + } +} +``` + +![](figures/Click.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-events-key.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-events-key.md new file mode 100644 index 0000000000000000000000000000000000000000..f4ebbc6907545c3ca8f122cb267c6f35f1ee9005 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-events-key.md @@ -0,0 +1,242 @@ +# 按键事件 + + + + + + + + + + + + +

名称

+

支持冒泡

+

功能描述

+

onKeyEvent(event: (event?: KeyEvent) => void)

+

是

+

按键动作触发该方法调用，event参数见KeyEvent介绍。

+
+ +## KeyEvent对象说明 + +- 属性 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

属性名称

+

属性类型

+

描述

+

type

+

KeyType

+

按键的类型。

+

keyCode

+

number

+

按键的键码。

+

keyText

+

string

+

按键的键值。

+

keySource

+

KeySource

+

触发当前按键的输入设备类型。

+

deviceId

+

number

+

触发当前按键的输入设备ID。

+

metaKey

+

number

+

按键发生时元键的状态，1表示按压态，0表示未按压态。

+

timestamp

+

number

+

按键发生时的时间戳。

+
+ + +- 接口 + + + + + + + + + + +

接口名称

+

功能描述

+

stopPropagation(): void

+

阻塞事件冒泡传递。

+
+ +- KeyType枚举说明 + + + + + + + + + + + + + +

名称

+

描述

+

Down

+

按键按下。

+

Up

+

按键松开。

+
+ + +- KeySource枚举说明 + + + + + + + + + + + + + +

名称

+

描述

+

Unknown

+

输入设备类型未知。

+

Keyboard

+

输入设备类型为键盘。

+
+ +- 常用KeyCode说明 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

数值

+

行为

+

物理按键

+

19

+

上

+

向上方向键。

+

20

+

下

+

向下方向键。

+

21

+

左

+

向左方向键。

+

22

+

右

+

向右方向键。

+

23

+

确定

+

遥控器的确认键。

+

66

+

确定

+

键盘的回车键。

+

160

+

确定

+

键盘的小键盘回车键。

+
+ + +## 示例 + +``` +@Entry +@Component +struct KeyEventExample { + @State text: string = '' + @State eventType: string = '' + + build() { + Column() { + Button('KeyEvent').backgroundColor(0x2788D9) + .onKeyEvent((event: KeyEvent) => { + if (event.type === KeyType.Down) { + this.eventType = 'Down' + } + if (event.type === KeyType.Up) { + this.eventType = 'Up' + } + console.info(this.text = 'KeyType:' + this.eventType + '\nkeyCode:' + event.keyCode + '\nkeyText:' + event.keyText) + }) + Text(this.text).padding(15) + }.height(300).width('100%').padding(35) + } +} +``` + +![](figures/KeyEvent.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-events-show-hide.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-events-show-hide.md new file mode 100644 index 0000000000000000000000000000000000000000..711581f98f421dc26d8705c06d9d5b10ba041550 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-events-show-hide.md @@ -0,0 +1,64 @@ +# 挂载卸载事件 + + + + + + + + + + + + + + + + +

名称

+

支持冒泡

+

功能描述

+

onAppear(callback: () => void)

+

否

+

组件挂载显示时触发此回调。

+

onDisappear(callback: () => void)

+

否

+

组件卸载消失时触发此回调。

+
+ +## 示例 + +``` +import prompt from '@system.prompt' + +@Entry +@Component +struct AppearExample { + @State isShow: boolean = true + private myText: string = 'Text for onAppear' + private changeAppear: string = 'Hide Text' + + build() { + Column() { + Button(this.changeAppear) + .onClick(() => { + this.isShow = !this.isShow + }).margin(3).backgroundColor(0x2788D9) + if (this.isShow) { + Text(this.myText) + .onAppear(() => { + this.changeAppear = 'Show Text' + prompt.showToast({ message: 'The text is shown', duration: 2000 }) + }) + .onDisAppear(() => { + this.changeAppear = 'Hide Text' + prompt.showToast({ message: 'The text is hidden', duration: 2000 }) + }) + } + }.padding(30).width('100%') + } +} +``` + +![](figures/appear.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-events-touch.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-events-touch.md new file mode 100644 index 0000000000000000000000000000000000000000..2ce3cc0ffdf87e14e36e8076a63b948354c81184 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-events-touch.md @@ -0,0 +1,206 @@ +# 触摸事件 + + + + + + + + + + + + +

名称

+

是否冒泡

+

功能描述

+

onTouch(callback: (event?: TouchEvent) => void)

+

是

+

触摸动作触发该方法调用，event参数见TouchEvent介绍。

+
+ +## TouchEvent对象说明 + +- 属性 + + + + + + + + + + + + + + + + + + + + + + + + +

属性名称

+

属性类型

+

描述

+

type

+

TouchType

+

触摸事件的类型。

+

touches

+

Array<TouchObject>

+

全部手指信息。

+

changedTouches

+

Array<TouchObject>

+

当前发生变化的手指信息。

+

timestamp

+

number

+

事件时间戳。

+
+ + +- 接口 + + + + + + + + + + +

接口名称

+

功能描述

+

stopPropagation()：void

+

阻塞事件冒泡。

+
+ + +- TouchObject对象说明 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

属性名称

+

属性类型

+

描述

+

type

+

TouchType

+

触摸事件的类型。

+

id

+

number

+

手指唯一标识符。

+

screenX

+

number

+

触摸点相对于设备屏幕左边沿的X坐标。

+

screenY

+

number

+

触摸点相对于设备屏幕上边沿的Y坐标。

+

x

+

number

+

触摸点相对于被触摸元素左边沿的X坐标。

+

y

+

number

+

触摸点相对于被触摸元素上边沿的Y坐标。

+
+ + +- TouchType枚举说明 + + + + + + + + + + + + + + + + + + + +

名称

+

描述

+

Down

+

手指按下时触发。

+

Up

+

手指抬起时触发。

+

Move

+

手指按压态在屏幕上移动时触发。

+

Cancel

+

触摸事件取消时触发。

+
+ + +## 示例 + +``` +@Entry +@Component +struct TouchExample { + @State text: string = '' + @State eventType: string = '' + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { + Button('Touch').backgroundColor(0x2788D9) + .onTouch((event: TouchEvent) => { + if (event.type === TouchType.Down) { + this.eventType = 'Down' + } + if (event.type === TouchType.Up) { + this.eventType = 'Up' + } + if (event.type === TouchType.Move) { + this.eventType = 'Move' + } + console.info(this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: ' + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y) + }) + Text(this.text) + }.height(200).width(350).padding({ left: 35, right: 35, top: 35 }) + } +} +``` + +![](figures/Touch.gif) + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-events.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-events.md new file mode 100644 index 0000000000000000000000000000000000000000..bec20ee420ef0eb2a713df6c8be453dda8208f72 --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-universal-events.md @@ -0,0 +1,11 @@ +# 通用事件 + +- **[点击事件](ts-universal-events-click.md)** + +- **[触摸事件](ts-universal-events-touch.md)** + +- **[挂载卸载事件](ts-universal-events-show-hide.md)** + +- **[按键事件](ts-universal-events-key.md)** + + diff --git a/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-using-a-separate-line-for-new-component.md b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-using-a-separate-line-for-new-component.md new file mode 100644 index 0000000000000000000000000000000000000000..d35c43e5f2204fa66d30d5cac363d1edd277ad6c --- /dev/null +++ b/zh-cn/application-dev/js-reference/ts-based-declarative-development-paradigm/ts-using-a-separate-line-for-new-component.md @@ -0,0 +1,50 @@ +# 组件创建使用独立一行 + +**每行代码末尾可以省略分号";"** + +``` +Column() { + Image('icon.png') + Text('text') +} +``` + +等同于： + +``` +Column() { + Image('icon.png'); + Text('text'); +} +``` + +**每行只允许创建一个组件。if, else, else if, ForEach语句单独一行。** + +无效示例： + +``` +Column() { + Image('icon.png') Text('text') // invalid, creation of two components in same line +} + +if (this.condi) {Image('icon.png')} // invalid, if and creation a components in same line +``` + +**内置容器组件、if和ForEach项生成器函数必须在单个子项的情况下使用封闭括号"\{\}"。** + +无效示例： + +``` +if (this.condi) +Image('icon.png'), // invalid, missing {} +else + Text('text'); +``` + +``` +ForEach(this.arr, + (item) => Image('icon.png'), // invalid, missing {} + (item) => item.id.toString() +} +``` + diff --git a/zh-cn/application-dev/quick-start/Readme-CN.md b/zh-cn/application-dev/quick-start/Readme-CN.md index ee2c9cdf2ab33a7709abfc3cc4ca0a86a3fb2b1b..510edabac9fd8b92be1fe7ee59e343a63766fe2b 100755 --- a/zh-cn/application-dev/quick-start/Readme-CN.md +++ b/zh-cn/application-dev/quick-start/Readme-CN.md @@ -13,3 +13,4 @@ - 快速入门 - [开发准备](start-overview.md) - [使用JS语言开发](start-with-js.md) + - [使用eTS语言开发](start-with-ets.md) diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001172123966.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001172123966.png new file mode 100644 index 0000000000000000000000000000000000000000..b62a4291cbe98e250fd9dcc65e9f91ba67445575 Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001172123966.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001172283938.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001172283938.png new file mode 100644 index 0000000000000000000000000000000000000000..a4ddc8ef114b973936dc354fc5ea628b87aae9f3 Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001172283938.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001172442490.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001172442490.png new file mode 100644 index 0000000000000000000000000000000000000000..85345789b60927729e9243798fe122c64ca92687 Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001172442490.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001172442492.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001172442492.png new file mode 100644 index 0000000000000000000000000000000000000000..2d8dd786a91b784794a19f8b2975616912586286 Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001172442492.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001172602436.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001172602436.png new file mode 100644 index 0000000000000000000000000000000000000000..b196bc42a1cb0dd57a382dc1f9315c30074f4952 Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001172602436.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001217402315.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001217402315.png new file mode 100644 index 0000000000000000000000000000000000000000..afdab82267fcd7d5eacae76eba500baa3bbecd40 Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001217402315.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001217523751.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001217523751.png new file mode 100644 index 0000000000000000000000000000000000000000..469ca774dde99530329d5e7bd62a5a40fb16237b Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001217523751.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001217602267.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001217602267.png new file mode 100644 index 0000000000000000000000000000000000000000..7f99945dc6e30516a6084896b3f146af89dc2f23 Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001217602267.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001217683803.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001217683803.png new file mode 100644 index 0000000000000000000000000000000000000000..cb05a7cb0fa33a9d9074f4424a3851478935ff33 Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001217683803.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001217683805.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001217683805.png new file mode 100644 index 0000000000000000000000000000000000000000..c44bd561803aa0dc4cafcf0db68bf38f5ba43013 Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001217683805.png differ diff --git a/zh-cn/application-dev/quick-start/installing-openharmony-app.md b/zh-cn/application-dev/quick-start/installing-openharmony-app.md index 15e637f83a195f1c861cdfeb74cc98398b9fefba..d7ece1e0766c046ab77b76938eef3153fcedc19f 100644 --- a/zh-cn/application-dev/quick-start/installing-openharmony-app.md +++ b/zh-cn/application-dev/quick-start/installing-openharmony-app.md @@ -3,19 +3,28 @@ 安装OpenHarmony应用需要使用hdc工具，通过手动执行命令行完成应用的安装。 -hdc工具本身需要手动从开源仓中获取。然后通过工具命令将应用安装到设备上。 +hdc工具本身需要手动从开源仓中获取。然后使用工具将编译后的hap包发送至设备侧，然后通过hdc命令完成app的安装。 相关命令如下： -- 安装命令。支持直接将本地应用的hap包安装到终端设备上。 +- 文件发送命令 + **file send *localpath remotepath*** + + 命令示例： + + ``` + hdc_std file send E:\hwadmin.hap /data/local/tmp/hwadmin.hap + ``` + +- 安装命令 **install [-r/-d/-g] *package*** 命令示例： ``` - hdc_std install E:\hwadmin.hap + hdc_std install hwadmin.hap ``` - 日志抓取命令 @@ -28,5 +37,5 @@ hdc工具本身需要手动从开源仓中获取。然后通过工具命令将 ``` -完整的hdc工具使用指导及命令格式请参见[hdc_std使用指导](../../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/start-overview.md b/zh-cn/application-dev/quick-start/start-overview.md index 85d00dcd6ceb9390f4557529f4fec8d24176b62e..5080c3b6c4117e0eb2ef9478074abb72645d0f69 100644 --- a/zh-cn/application-dev/quick-start/start-overview.md +++ b/zh-cn/application-dev/quick-start/start-overview.md @@ -1,26 +1,33 @@ # 开发准备 -- [任务说明](#任务说明) -- [开发准备](#开发准备) - ## 任务说明 本文档适用于OpenHarmony应用开发的初学者。通过构建一个简单的具有页面跳转功能的应用（如下图[预览器](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/previewer-0000001054328973#ZH-CN_TOPIC_0000001056725592__section16523172216252)运行效果所示），熟悉OpenHarmony应用开发流程。 -为确保运行效果，请使用最新版本的 **DevEco Studio**完成本任务，点击[此处](https://developer.harmonyos.com/cn/develop/deveco-studio#download)获取下载链接。 +为确保运行效果，本文以使用**DevEco Studio 3.0.0.601 Beta1**版本为例，点击[此处](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta)获取下载链接。 + +![zh-cn_image_0000001172442490](figures/zh-cn_image_0000001172442490.png) -![zh-cn_image_0000001166904552](figures/zh-cn_image_0000001166904552.png) +**表1** 方舟开发框架的对比 +| 比较项 | 基于JS扩展的类Web开发范式 | 基于TS扩展的声明式开发范式 | +| -------- | -------- | -------- | +| 语言生态 | JS | eTS | +| 接口方式 | 类Web范式 | 声明式 | +| 执行方式 | 框架层处理，基于数据驱动的UI自动变更 | 框架层处理，基于数据驱动的UI自动变更 | +| 相对优势 | 轻量化，开发更简便 | 极简开发，内存占用更少、运行性能更高 | + +接下来，分别使用JS语言、eTS语言实现上述两个页面跳转的功能。 ## 开发准备 -1. 开始前请参考[配置OpenHarmony SDK](../quick-start/configuring-openharmony-sdk.md)，完成 **DevEco Studio**的安装和开发环境配置。 +1. 开始前请参考[配置OpenHarmony SDK](../quick-start/configuring-openharmony-sdk.md)，完成**DevEco Studio**的安装和开发环境配置。 2. 开发环境配置完成后，请参考[创建OpenHarmony工程](../quick-start/use-wizard-to-create-project.md)创建工程。 - - 使用JS语言开发，模板选择Empty Ability，Language选择Js。 - + - 使用JS语言开发，模板选择Empty Ability，Language选择JS。 + - 使用eTS语言开发，模板选择Empty Ability，Language选择eTS。 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语言开发](../quick-start/start-with-js.md)继续下一步的学习。 +完成上述操作后，请参考[使用JS语言开发](../quick-start/start-with-js.md)、[使用eTS语言开发](../quick-start/start-with-ets.md)继续下一步的学习。 diff --git a/zh-cn/application-dev/quick-start/start-with-ets.md b/zh-cn/application-dev/quick-start/start-with-ets.md new file mode 100644 index 0000000000000000000000000000000000000000..f2ec55c09b591bf4a91701fec42152a3e8cdb6d3 --- /dev/null +++ b/zh-cn/application-dev/quick-start/start-with-ets.md @@ -0,0 +1,114 @@ +# 使用eTS语言开发 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 请使用DevEco Studio V3.0.0.601 Beta1及更高版本。本文以使用**DevEco Studio 3.0.0.601 Beta1**版本为例，点击[此处](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta)获取下载链接。 +> +> 使用模拟器运行时请选择API7及以上的设备。 + + +## 创建eTS工程 + +1. 打开DevEco Studio，创建一个新工程，选择模板，如Empty Ability： + ![zh-cn_image_0000001172602436](figures/zh-cn_image_0000001172602436.png) + +2. 进入配置工程界面，Project Type选择Application，Language选择eTS，其他参数根据实际需要设置即可。 + ![zh-cn_image_0000001172283938](figures/zh-cn_image_0000001172283938.png) + + +## 编写第一个页面 + +1. 工程创建完成后，在“Project“窗口，点击entry > src > main > ets > default > pages，打开index.ets文件。 + ![zh-cn_image_0000001217602267](figures/zh-cn_image_0000001217602267.png) + +2. 第一个页面由Flex容器组件、Text组件和Button组件构成。在index.ets中编写并设置页面组件的属性和样式，示例代码如下所示： + ``` + @Entry + @Component + struct Index { + build() { + //Flex容器组件 + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + //Text组件 + Text('Hello World') + .fontSize(60) + .fontWeight(500) + //Button组件 + Button('Next') + .fontSize(40) + .fontWeight(500) + .width(280) + .height(60) + } + //容器整体宽高 + .width('100%') + .height('100%') + } + } + ``` + +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)运行项目，效果如下图所示： + ![zh-cn_image_0000001172123966](figures/zh-cn_image_0000001172123966.png) + + +## 创建第二个页面 + +1. 在“Project“窗口，打开entry > src > main > etsdefault，右键点击pages文件夹，选择New > eTS Page，命名为details，单击回车键。创建完成后，可以看到pages文件夹下的文件目录结构如下： + ![zh-cn_image_0000001172442492](figures/zh-cn_image_0000001172442492.png) + +2. 第二个页面由Flex容器组件、Text组件构成。在details.ets中编写并设置页面组件的属性和样式，示例代码如下所示： + ``` + @Entry + @Component + struct Details { + build() { + //Flex容器组件 + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + //Text组件 + Text('Hi there') + .fontSize(60) + .fontWeight(500) + } + //容器整体宽高 + .width('100%') + .height('100%') + } + } + ``` + + +## 实现页面跳转 + +1. 打开第一个页面的index.ets文件，导入router模块，页面路由router根据页面的uri来找到目标页面，从而实现跳转。示例代码如下： + ``` + //导入router模块 + import router from '@system.router'; + @Entry + @Component + struct Index { + build() { + //Flex容器组件 + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + //Text组件 + Text('Hello World') + .fontSize(60) + .fontWeight(500) + //Button组件 + Button('Next') + .fontSize(40) + .fontWeight(500) + .width(280) + .height(60) + //点击Button实现页面跳转 + .onClick(() => { router.push({ uri: 'pages/details' }) }) + } + //容器整体宽高 + .width('100%') + .height('100%') + } + } + ``` + +2. 再次使用[预览器](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)运行项目，效果如下图所示： + ![zh-cn_image_0000001217683805](figures/zh-cn_image_0000001217683805.png) + +恭喜你，至此已成功完成OpenHarmony快速入门-使用eTS语言开发。 diff --git a/zh-cn/application-dev/quick-start/start-with-js.md b/zh-cn/application-dev/quick-start/start-with-js.md index db2d8e402932cef0bbf80b23fbfd9402c89cbbd8..161556d1910ff1bf73dfd017bb3b0271ef772759 100644 --- a/zh-cn/application-dev/quick-start/start-with-js.md +++ b/zh-cn/application-dev/quick-start/start-with-js.md @@ -1,28 +1,26 @@ # 使用JS语言开发 -- [编写第一个页面](#编写第一个页面) -- [创建另一个页面](#创建另一个页面) -- [实现页面跳转](#实现页面跳转) +为确保运行效果，本文以使用**DevEco Studio 3.0.0.601 Beta1**版本为例，点击[此处](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta)获取下载链接。 ## 编写第一个页面 1. 第一个页面内有一个文本和一个按钮，通过text和button组件来实现。 - 在 “Project“窗口，选择“entry > src > main > js > default > pages > index”，打开”index.hml“文件，添加一个文本和一个按钮，示例代码如下： + 在“Project“窗口，选择entry > src > main > js > default > pages > index，打开index.hml文件，添加一个文本和一个按钮，示例代码如下： - ``` - -
- - - Hello World - - - -
- ``` - -2. 打开“index.css”文件，设置文本和按钮的样式，示例代码如下： ``` + +
+ + + Hello World + + + +
+ ``` + +2. 打开index.css文件，设置文本和按钮的样式，示例代码如下： + ``` /* index.css */ .container { flex-direction: column; /* 设置容器内的项目纵向排列 */ @@ -44,20 +42,20 @@ text-color: white; margin-top: 20px; } - ``` + ``` 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)运行项目，效果如下图所示： - ![zh-cn_image_0000001212066021](figures/zh-cn_image_0000001212066021.png) + ![zh-cn_image_0000001217683803](figures/zh-cn_image_0000001217683803.png) ## 创建另一个页面 -1. 在 “Project“窗口，打开“entry > src > main > js > default”，右键点击“pages”文件夹，选择“New > JS Page”，命名为“details”，单击回车键。 +1. 在“Project“窗口，打开entry > src > main > js > default，右键点击pages文件夹，选择New > JS Page，命名为details，单击回车键。 创建完成后，可以看到pages文件夹下的文件目录结构如下： - ![zh-cn_image_0000001166744640](figures/zh-cn_image_0000001166744640.png) + ![zh-cn_image_0000001217523751](figures/zh-cn_image_0000001217523751.png) -2. 打开“details.hml”文件，添加一个文本，示例代码如下： +2. 打开details.hml文件，添加一个文本，示例代码如下： ```
@@ -67,7 +65,7 @@
``` -3. 打开“details.css”文件，设置文本的样式，示例代码如下： +3. 打开details.css文件，设置文本的样式，示例代码如下： ``` /* details.css */ .container { @@ -86,11 +84,11 @@ ## 实现页面跳转 -1. 打开第一个页面的“index.js”文件，导入router模块，页面路由router根据页面的uri来找到目标页面，从而实现跳转。示例代码如下： +1. 打开第一个页面的index.js文件，导入router模块，页面路由router根据页面的uri来找到目标页面，从而实现跳转。示例代码如下： ``` // index.js import router from '@system.router'; - + export default { launch() { router.push ({ @@ -101,6 +99,6 @@ ``` 2. 再次使用[预览器](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)运行项目，效果如下图所示： - ![zh-cn_image_0000001166904582](figures/zh-cn_image_0000001166904582.png) + ![zh-cn_image_0000001217402315](figures/zh-cn_image_0000001217402315.png) -恭喜你，至此已成功完成OpenHarmony快速入门-使用JS语言开发。 +恭喜你，至此已成功完成OpenHarmony快速入门-使用JS语言开发。 \ No newline at end of file diff --git a/zh-cn/application-dev/quick-start/start.md b/zh-cn/application-dev/quick-start/start.md index f48551a3206f044d676d12b3777ec23d2e37bce7..6123c3612898bc1579a80a8465ccf2f0702e19cc 100644 --- a/zh-cn/application-dev/quick-start/start.md +++ b/zh-cn/application-dev/quick-start/start.md @@ -5,3 +5,4 @@ - **[使用JS语言开发](start-with-js.md)** +- **[使用eTS语言开发](start-with-ets.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/ui/Readme-CN.md b/zh-cn/application-dev/ui/Readme-CN.md index 17013f840646b2e9f7009457609d2570654002c6..998a5d8e0d06e4c1b1f19cecdb26477dcb270d4e 100755 --- a/zh-cn/application-dev/ui/Readme-CN.md +++ b/zh-cn/application-dev/ui/Readme-CN.md @@ -1,17 +1,53 @@ # UI -- JS UI框架 - - [JS UI框架概述](ui-js-overview.md) - - 构建用户界面 - - [组件介绍](ui-js-building-ui-component.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) - - [添加交互](ui-js-building-ui-interactions.md) - - [动画](ui-js-building-ui-animation.md) - - [事件](ui-js-building-ui-event.md) - - [页面路由](ui-js-building-ui-routes.md) - - [自定义组件](ui-js-custom-components.md) +- 方舟开发框架（ArkUI） + - 基于JS扩展的类Web开发范式 + - [概述](ui-js-overview.md) + - 构建用户界面 + - [组件介绍](ui-js-building-ui-component.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) + - [添加交互](ui-js-building-ui-interactions.md) + - [动画](ui-js-building-ui-animation.md) + - [事件](ui-js-building-ui-event.md) + - [页面路由](ui-js-building-ui-routes.md) + - 常见组件开发指导 + - [Text](ui-js-components-text.md) + - [Input](ui-js-components-input.md) + - [Button](ui-js-components-button.md) + - [List](ui-js-components-list.md) + - [Picker](ui-js-components-picker.md) + - [Dialog](ui-js-components-dialog.md) + - [Form](ui-js-components-form.md) + - [Stepper](ui-js-components-stepper.md) + - [Tabs](ui-js-component-tabs.md) + - [Image](ui-js-components-images.md) + - 动效开发指导 + - [CSS动画](ui-js-animate-css.md) + - [属性样式动画](ui-js-animate-attribute-style.md) + - [transform样式动画](ui-js-animate-transform.md) + - [background-position样式动画](ui-js-animate-background-position-style.md) + - [JS动画](ui-js-animate-javascript.md) + - [组件动画](ui-js-animate-component.md) + - [插值器动画](ui-js-animate-interpolator.md) + - [动画动效](ui-js-animate-dynamic-effects.md) + - [动画帧](ui-js-animate-frame.md) + +- [自定义组件](ui-js-custom-components.md) + +- 基于TS扩展的声明式开发范式 + - [概述](ui-ts-overview.md) + - [开发说明](ui-ts-developing-intro.md) + - 体验声明式UI + - [创建声明式UI工程](ui-ts-creating-project.md) + - [初识Component](ui-ts-components.md) + - [创建简单视图](ui-ts-creating-simple-page.md) + - 页面布局与连接 + - [构建食物数据模型](ui-ts-building-data-model.md) + - [构建食物列表List布局](ui-ts-building-category-list-layout.md) + - [构建食物分类Grid布局](ui-ts-building-category-grid-layout.md) + - [页面跳转与数据传递](ui-ts-page-redirection-data-transmission.md) diff --git a/zh-cn/application-dev/ui/figures/1-0.gif b/zh-cn/application-dev/ui/figures/1-0.gif new file mode 100644 index 0000000000000000000000000000000000000000..c7779b378c80842817091bedf62d74378bfff055 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/1-0.gif differ diff --git a/zh-cn/application-dev/ui/figures/1-2.gif b/zh-cn/application-dev/ui/figures/1-2.gif new file mode 100644 index 0000000000000000000000000000000000000000..27f8177c1c626565ce53f409bbf5a4e2f7cdba01 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/1-2.gif differ diff --git a/zh-cn/application-dev/ui/figures/1.gif b/zh-cn/application-dev/ui/figures/1.gif new file mode 100644 index 0000000000000000000000000000000000000000..5cfb969baf3a36e231a311ca11ca538c248f6da1 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/1.gif differ diff --git a/zh-cn/application-dev/ui/figures/111-1.gif b/zh-cn/application-dev/ui/figures/111-1.gif new file mode 100644 index 0000000000000000000000000000000000000000..d669cf40b97891ba3853be28574dceae172fe138 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/111-1.gif differ diff --git a/zh-cn/application-dev/ui/figures/111.png b/zh-cn/application-dev/ui/figures/111.png new file mode 100644 index 0000000000000000000000000000000000000000..664e50e404e5e7f6e4c4823bf1099391bfa45e33 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/111.png differ diff --git a/zh-cn/application-dev/ui/figures/1111.gif b/zh-cn/application-dev/ui/figures/1111.gif new file mode 100644 index 0000000000000000000000000000000000000000..90898288928277467db40c5eb11b4ff7ae082e6e Binary files /dev/null and b/zh-cn/application-dev/ui/figures/1111.gif differ diff --git a/zh-cn/application-dev/ui/figures/22.gif b/zh-cn/application-dev/ui/figures/22.gif new file mode 100644 index 0000000000000000000000000000000000000000..b1038b5da74612ac1911e1dae9d3a1de24ee46c7 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/22.gif differ diff --git a/zh-cn/application-dev/ui/figures/3.gif b/zh-cn/application-dev/ui/figures/3.gif new file mode 100644 index 0000000000000000000000000000000000000000..ff991f2899c847c433e41ccafd6798a386540369 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/3.gif differ diff --git a/zh-cn/application-dev/ui/figures/3333.gif b/zh-cn/application-dev/ui/figures/3333.gif new file mode 100644 index 0000000000000000000000000000000000000000..d1288776a8086fbb9e66691b0e882784db243aba Binary files /dev/null and b/zh-cn/application-dev/ui/figures/3333.gif differ diff --git a/zh-cn/application-dev/ui/figures/4444.gif b/zh-cn/application-dev/ui/figures/4444.gif new file mode 100644 index 0000000000000000000000000000000000000000..16a2d3f912b23349a5c416e5c5b74f4fd05a12aa Binary files /dev/null and b/zh-cn/application-dev/ui/figures/4444.gif differ diff --git a/zh-cn/application-dev/ui/figures/d1.gif b/zh-cn/application-dev/ui/figures/d1.gif new file mode 100644 index 0000000000000000000000000000000000000000..f470f5261becb6c2d7b30f691a0794db2b1feb93 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/d1.gif differ diff --git a/zh-cn/application-dev/ui/figures/d2.gif b/zh-cn/application-dev/ui/figures/d2.gif new file mode 100644 index 0000000000000000000000000000000000000000..365dbc42e583335f32de863120fd80ae0e7d59e5 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/d2.gif differ diff --git a/zh-cn/application-dev/ui/figures/d3.gif b/zh-cn/application-dev/ui/figures/d3.gif new file mode 100644 index 0000000000000000000000000000000000000000..b7808565202cf12474f1282e67fde3a9c85d0e9c Binary files /dev/null and b/zh-cn/application-dev/ui/figures/d3.gif differ diff --git a/zh-cn/application-dev/ui/figures/d4.gif b/zh-cn/application-dev/ui/figures/d4.gif new file mode 100644 index 0000000000000000000000000000000000000000..3fe0cd60d60a0c5d29c2625ebade3d8b0bd0cdf8 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/d4.gif differ diff --git a/zh-cn/application-dev/ui/figures/q2.gif b/zh-cn/application-dev/ui/figures/q2.gif new file mode 100644 index 0000000000000000000000000000000000000000..5eb149620499c0d1d363d274ad88a741095fc922 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/q2.gif differ diff --git a/zh-cn/application-dev/ui/figures/q3.gif b/zh-cn/application-dev/ui/figures/q3.gif new file mode 100644 index 0000000000000000000000000000000000000000..5a297661641d1714ebc95116592a97a693293e0a Binary files /dev/null and b/zh-cn/application-dev/ui/figures/q3.gif differ diff --git a/zh-cn/application-dev/ui/figures/q8.gif b/zh-cn/application-dev/ui/figures/q8.gif new file mode 100644 index 0000000000000000000000000000000000000000..5e38a4068976c9b5e298ff33ad4cfc711de4b2a6 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/q8.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001166744904.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001063148757.gif old mode 100755 new mode 100644 similarity index 100% rename from zh-cn/application-dev/ui/figures/zh-cn_image_0000001166744904.gif rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001063148757.gif diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001166586348.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001063442797.png old mode 100755 new mode 100644 similarity index 100% rename from zh-cn/application-dev/ui/figures/zh-cn_image_0000001166586348.png rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001063442797.png diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001063442799.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001063442799.png new file mode 100644 index 0000000000000000000000000000000000000000..019361f8d68242d48914c56efdeac8cfdbbece50 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001063442799.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001212146221.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001064068638.gif old mode 100755 new mode 100644 similarity index 100% rename from zh-cn/application-dev/ui/figures/zh-cn_image_0000001212146221.gif rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001064068638.gif diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001166426374.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001070558189.png old mode 100755 new mode 100644 similarity index 100% rename from zh-cn/application-dev/ui/figures/zh-cn_image_0000001166426374.png rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001070558189.png diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001212146243.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001070693737.png old mode 100755 new mode 100644 similarity index 100% rename from zh-cn/application-dev/ui/figures/zh-cn_image_0000001212146243.png rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001070693737.png diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001166904852.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001070707559.png old mode 100755 new mode 100644 similarity index 100% rename from zh-cn/application-dev/ui/figures/zh-cn_image_0000001166904852.png rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001070707559.png diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001212066279.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001071134933.png old mode 100755 new mode 100644 similarity index 100% rename from zh-cn/application-dev/ui/figures/zh-cn_image_0000001212066279.png rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001071134933.png diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001212066259.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001110628230.png similarity index 100% rename from zh-cn/application-dev/ui/figures/zh-cn_image_0000001212066259.png rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001110628230.png diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001166426358.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001117452952.png similarity index 100% rename from zh-cn/application-dev/ui/figures/zh-cn_image_0000001166426358.png rename to zh-cn/application-dev/ui/figures/zh-cn_image_0000001117452952.png diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001148858818.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001148858818.png new file mode 100644 index 0000000000000000000000000000000000000000..345a2be66315d210a86c20d30c56b8b5f487c325 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001148858818.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001158896538.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001158896538.png new file mode 100644 index 0000000000000000000000000000000000000000..89c8accb2a567d32f056cbbb1158c51f3baf013d Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001158896538.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001162586456.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001162586456.gif new file mode 100644 index 0000000000000000000000000000000000000000..38b7d7b5233d51d4ff96b8852eb3d29e0d1dfb55 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001162586456.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001162911958.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001162911958.gif new file mode 100644 index 0000000000000000000000000000000000000000..067268949d47e1cbefdc51b0d736200a4eee443f Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001162911958.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163212628.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163212628.gif new file mode 100644 index 0000000000000000000000000000000000000000..81c69fd269e744e1247e9db9b034f2d427e5b069 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163212628.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163212630.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163212630.gif new file mode 100644 index 0000000000000000000000000000000000000000..ee77fe426618b91da8203ab9efb4b9c4f0dbc191 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163212630.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163212980.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163212980.gif new file mode 100644 index 0000000000000000000000000000000000000000..f333c9666cf9ba259ff2e5d0d883c4988659e877 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163212980.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163214740.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163214740.gif new file mode 100644 index 0000000000000000000000000000000000000000..5b53dc71f7212ebe031ec5c9d19a41267afc448a Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163214740.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163228602.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163228602.gif new file mode 100644 index 0000000000000000000000000000000000000000..fc1eab30eb6a87308eaf399a89f1a755223f3995 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163228602.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163228638.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163228638.gif new file mode 100644 index 0000000000000000000000000000000000000000..b2097084b8dda33575a19b7c97d0555dcd5c04f9 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163228638.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163229150.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163229150.gif new file mode 100644 index 0000000000000000000000000000000000000000..d3453785e39354ba12ba98483ca3d332da070680 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163229150.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163372568.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163372568.png new file mode 100644 index 0000000000000000000000000000000000000000..24908708ecdc45a01ed06334f67171bca9d553ef Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163372568.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163372620.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163372620.gif new file mode 100644 index 0000000000000000000000000000000000000000..ccd5021baf4d3fa2ab124f4033e7d36f78249729 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163372620.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163372646.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163372646.gif new file mode 100644 index 0000000000000000000000000000000000000000..b007605e58eb671665d4441b967f0e61de0e0493 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163372646.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163375178.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163375178.gif new file mode 100644 index 0000000000000000000000000000000000000000..b9cfac61024e39647871b85b72d57bc4dbd1bfa9 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163375178.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163388642.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163388642.gif new file mode 100644 index 0000000000000000000000000000000000000000..d536b946b814de3d5b822611ac5c91c749a9d254 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163388642.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163489068.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163489068.png new file mode 100644 index 0000000000000000000000000000000000000000..ac085642762d13eddbdab4a96ad6f629057d3d8e Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163489068.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163515416.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163515416.gif new file mode 100644 index 0000000000000000000000000000000000000000..1167b5ba7a0c503e2e22bc3d643c16c29cd77efe Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163515416.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163531184.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163531184.gif new file mode 100644 index 0000000000000000000000000000000000000000..996c64e58b34c78058c80ee8f54713e78b7fb373 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163531184.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163531210.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163531210.gif new file mode 100644 index 0000000000000000000000000000000000000000..8d5a07d1ff67011de5d0ec6bc0c2e552db9e5cd0 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163531210.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163532072.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163532072.png new file mode 100644 index 0000000000000000000000000000000000000000..2ca7c5488fb83a122e7f8ea1fba1e2d59324e513 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163532072.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163547244.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163547244.gif new file mode 100644 index 0000000000000000000000000000000000000000..a670318ef033221cf4df47b2f4740218a1fb8727 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163547244.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163656706.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163656706.png new file mode 100644 index 0000000000000000000000000000000000000000..5877e6f9966eb4eee0b738ee7356985f9a819714 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163656706.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163691126.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163691126.gif new file mode 100644 index 0000000000000000000000000000000000000000..7c5b1398a0b639f19a40fa679fa84d311c42d156 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163691126.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163691154.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163691154.png new file mode 100644 index 0000000000000000000000000000000000000000..b6f0ae015c5957a86d2bf8c583406461a8c4f293 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001163691154.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001165191390.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001165191390.gif new file mode 100644 index 0000000000000000000000000000000000000000..82123adf27f2c782fe882a2c3399646ed3763629 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001165191390.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001165344988.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001165344988.png new file mode 100644 index 0000000000000000000000000000000000000000..5b8b2d36da4a14abee57a064898fce0899743751 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001165344988.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001166432552.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001166432552.png new file mode 100644 index 0000000000000000000000000000000000000000..72c1ad1e7e1c2100b85be89be4f0648c5ab19d57 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001166432552.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001167746622.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001167746622.png new file mode 100644 index 0000000000000000000000000000000000000000..f7b8012da47797dfd3909843cba9af1468fb4e89 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001167746622.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001168059158.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001168059158.png new file mode 100644 index 0000000000000000000000000000000000000000..1b9259dc9c0a7cb3530e3f7d9b0225e5160b92c8 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001168059158.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001168064524.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001168064524.png new file mode 100644 index 0000000000000000000000000000000000000000..1e72a0d3345d40b4bb9308ac8367d08c2c3632cd Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001168064524.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001168410342.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001168410342.png new file mode 100644 index 0000000000000000000000000000000000000000..3a97ead3b625041b9a3a33c8db8cd7cb79276a2d Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001168410342.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001168570318.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001168570318.png new file mode 100644 index 0000000000000000000000000000000000000000..5e855312aef77f5badc0c0b0b4d5cbeac23b802f Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001168570318.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001168728272.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001168728272.png new file mode 100644 index 0000000000000000000000000000000000000000..411cc11b2ac16047c5e2c8a24b3d572b9e24f768 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001168728272.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001168728872.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001168728872.png new file mode 100644 index 0000000000000000000000000000000000000000..d1dc59cd8ac1b5dc7da2f57d16d9a080bb449114 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001168728872.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001168888224.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001168888224.png new file mode 100644 index 0000000000000000000000000000000000000000..4487bdcb98a9b1f912be17041859d7a7a246f183 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001168888224.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001168888822.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001168888822.png new file mode 100644 index 0000000000000000000000000000000000000000..f33eb296f27701a00461cd9231f7d9af014a3814 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001168888822.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001168956332.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001168956332.png new file mode 100644 index 0000000000000000000000000000000000000000..15a7e0bdc38655a23f64bfa56c4adad9a6a199a0 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001168956332.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001169372212.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001169372212.png new file mode 100644 index 0000000000000000000000000000000000000000..e1b0324575a6087fee482b17d273c4ff9235a705 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001169372212.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001169532276.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001169532276.png new file mode 100644 index 0000000000000000000000000000000000000000..eca2b53342a2bf63d089c835bfdae16b2608e70f Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001169532276.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001169599582.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001169599582.png new file mode 100644 index 0000000000000000000000000000000000000000..a4eb400dcd217074d6e76902723e9fffd34fd4bd Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001169599582.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001169678922.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001169678922.png new file mode 100644 index 0000000000000000000000000000000000000000..fad940f7f4fba442aa1b267c66cdc21c5d3a1d2c Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001169678922.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001169759552.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001169759552.png new file mode 100644 index 0000000000000000000000000000000000000000..2a2376e7e953d35b7d0fb1f6d53314bc0d7cb6b5 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001169759552.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001169852428.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001169852428.png new file mode 100644 index 0000000000000000000000000000000000000000..4fd767ccef460fa7ae5f0f65c64ab92c14346042 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001169852428.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001169918548.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001169918548.gif new file mode 100644 index 0000000000000000000000000000000000000000..220d14e0637e2808211cec10173c6c4a7552b64c Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001169918548.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001170008198.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001170008198.gif new file mode 100644 index 0000000000000000000000000000000000000000..d4b3de8f257c571e6fec3ff51795936b2d94d2f0 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001170008198.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001170167520.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001170167520.gif new file mode 100644 index 0000000000000000000000000000000000000000..d69156cdc0d1f1f33560148c1161618f97acb21d Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001170167520.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001170411978.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001170411978.gif new file mode 100644 index 0000000000000000000000000000000000000000..218be7ed11ffd1f1f199c347f0fa90e6f6b64b53 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001170411978.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001173950938.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001173950938.png new file mode 100644 index 0000000000000000000000000000000000000000..62c786d7dacd69bae17ebe4074a2d429cd7f6851 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001173950938.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001195058395.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001195058395.png new file mode 100644 index 0000000000000000000000000000000000000000..aac1cb93dbd33f7cc54be6f25cab06b7d12034c0 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001195058395.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001195117633.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001195117633.png new file mode 100644 index 0000000000000000000000000000000000000000..00964c1cfa5f006f2e8ac064133e23a2d8fc92aa Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001195117633.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001195119619.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001195119619.png new file mode 100644 index 0000000000000000000000000000000000000000..d5bed5e4ae3a322db0e4f05482913fdbd828cbed Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001195119619.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001204537865.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001204537865.png new file mode 100644 index 0000000000000000000000000000000000000000..7eb0d2cc3f3dd8e239e9232e655344c864cbf679 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001204537865.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001204538065.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001204538065.png new file mode 100644 index 0000000000000000000000000000000000000000..514bc6e8fcdab7ae01de64d16d92a0541954c458 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001204538065.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001204776353.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001204776353.png new file mode 100644 index 0000000000000000000000000000000000000000..883981a250b68a29db2027dee82a9a19c34c8e1a Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001204776353.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208393581.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208393581.gif new file mode 100644 index 0000000000000000000000000000000000000000..a20dc90cfeff09cc98ce1e36e2f032af60f9777e Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208393581.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208636379.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208636379.gif new file mode 100644 index 0000000000000000000000000000000000000000..e0d0662622fa12506072961b407ed888c2478d90 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208636379.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208691071.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208691071.gif new file mode 100644 index 0000000000000000000000000000000000000000..04a29d4fceaccc3123869721338dd9236e9961c0 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208691071.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208693047.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208693047.gif new file mode 100644 index 0000000000000000000000000000000000000000..ee4cb1581041fef7c9cd7ecaf8631934004bf682 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208693047.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208703849.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208703849.gif new file mode 100644 index 0000000000000000000000000000000000000000..ee7bb97af0e5f571b684408cf5d6bec4192eefd2 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208703849.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208771093.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208771093.png new file mode 100644 index 0000000000000000000000000000000000000000..c07a237f3bff7acbb5adbe7ca0d142aa204f7f13 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208771093.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208771113.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208771113.gif new file mode 100644 index 0000000000000000000000000000000000000000..bca4a03308a47deb0538aec9b93fe0df9addacb0 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208771113.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208787005.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208787005.gif new file mode 100644 index 0000000000000000000000000000000000000000..80a6d574da0827642f85fd34d1acd11caade21cf Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208787005.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208787965.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208787965.gif new file mode 100644 index 0000000000000000000000000000000000000000..ce6ebb1996cffd5111e0ebc811a4c79c4e9aa35c Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208787965.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208892613.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208892613.gif new file mode 100644 index 0000000000000000000000000000000000000000..54f3a3ade4c3d1b35eddc7d92522c7d83ee50e6b Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208892613.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208892929.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208892929.gif new file mode 100644 index 0000000000000000000000000000000000000000..4cf6b5a0fbfa3b5b9b9e66944dcc49806d5738c4 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208892929.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208908643.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208908643.gif new file mode 100644 index 0000000000000000000000000000000000000000..40f7c00741880a81530581d5488c2ff96e0e7bf2 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208908643.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208975737.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208975737.png new file mode 100644 index 0000000000000000000000000000000000000000..5be6a14c5f547453bc6a9d3c4f31d2019e9f905a Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001208975737.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001209028575.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001209028575.gif new file mode 100644 index 0000000000000000000000000000000000000000..014958726f3f42a6bd92b341695c8ed03b3fd211 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001209028575.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001209033195.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001209033195.png new file mode 100644 index 0000000000000000000000000000000000000000..09f170afc5fac1513c0e453a6562a4670b3750f8 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001209033195.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001210358571.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001210358571.gif new file mode 100644 index 0000000000000000000000000000000000000000..b5a529405d396af8c87d45cdaefc8fe87a6af85b Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001210358571.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001210951235.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001210951235.gif new file mode 100644 index 0000000000000000000000000000000000000000..c065efe3b76f9ae8ab48cc394d8d591cd3a00b54 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001210951235.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001210951541.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001210951541.gif new file mode 100644 index 0000000000000000000000000000000000000000..883453582802ecbb94916aaefd120123c9128625 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001210951541.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001211069339.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001211069339.png new file mode 100644 index 0000000000000000000000000000000000000000..f835c8abc0dfbfb3b52480d31c12bfd6e77c278b Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001211069339.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001211071477.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001211071477.png new file mode 100644 index 0000000000000000000000000000000000000000..4f33bfa94e4e8d0a6e70e6f8332126757b320560 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001211071477.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001211225091.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001211225091.png new file mode 100644 index 0000000000000000000000000000000000000000..f4ac33ba8eea89d257a3ff8f5947b007abdf4215 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001211225091.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001211227617.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001211227617.png new file mode 100644 index 0000000000000000000000000000000000000000..4d26b5ba589c8b9126c51b54ff4d67476771cdf2 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001211227617.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001211246571.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001211246571.gif new file mode 100644 index 0000000000000000000000000000000000000000..4232ddc088cfaf7015aa3bca6622c39bbd5624a6 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001211246571.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001211383427.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001211383427.png new file mode 100644 index 0000000000000000000000000000000000000000..7b8e28967b4af0d0a3e10093b0b2dfab043da52c Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001211383427.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001213462329.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001213462329.png new file mode 100644 index 0000000000000000000000000000000000000000..99a2f37ce14924c6c2d91f828d7ffaa8c87ec77f Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001213462329.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001213705519.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001213705519.png new file mode 100644 index 0000000000000000000000000000000000000000..cdf8aca0c176007c24326fe6258b038ee5af95bd Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001213705519.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001213968747.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001213968747.png new file mode 100644 index 0000000000000000000000000000000000000000..f125f44d4a956c717f3bf1481f7161cf41e79a39 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001213968747.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001214128687.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001214128687.png new file mode 100644 index 0000000000000000000000000000000000000000..e42b6a7b9c128f9de2217c988fa34cd385742044 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001214128687.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001214210217.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001214210217.png new file mode 100644 index 0000000000000000000000000000000000000000..4e6560056b15b9c570758670eb65311168df7e9a Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001214210217.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001214330169.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001214330169.png new file mode 100644 index 0000000000000000000000000000000000000000..19ee7009247945887ceb0f8f6f471e45f3116b70 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001214330169.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001214595111.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001214595111.png new file mode 100644 index 0000000000000000000000000000000000000000..0a44a65c48f7f334e5d77e400495d455dc1283d1 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001214595111.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001214998349.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001214998349.png new file mode 100644 index 0000000000000000000000000000000000000000..9c9be43d1fedfbd8660965190865110f007d8161 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001214998349.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001215079443.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001215079443.png new file mode 100644 index 0000000000000000000000000000000000000000..032c5bae7d3269bd4a3bb813e9d69c9271ac9843 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001215079443.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001215113569.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001215113569.png new file mode 100644 index 0000000000000000000000000000000000000000..c7b4a7dfc70a6ee3ce7a837d1e8e91acc7d05d22 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001215113569.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001215199399.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001215199399.png new file mode 100644 index 0000000000000000000000000000000000000000..3834601d70a5121e18af408bb6a12bbdbf54a28c Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001215199399.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001215318403.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001215318403.gif new file mode 100644 index 0000000000000000000000000000000000000000..5643eb93241bf15f6cb75ffaf463ada35ba13201 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001215318403.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001215433095.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001215433095.png new file mode 100644 index 0000000000000000000000000000000000000000..d015869874aecf7235aa892993d3d872a4cfe9df Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001215433095.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001219237131.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001219237131.png new file mode 100644 index 0000000000000000000000000000000000000000..cc39aec87bb14a36eb6214a2ef39d45c631d4a2b Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001219237131.png differ diff --git a/zh-cn/application-dev/ui/ui-arkui-js.md b/zh-cn/application-dev/ui/ui-arkui-js.md new file mode 100644 index 0000000000000000000000000000000000000000..48eea89a4e7f09fe105c25ddf6e7f59c8ef92666 --- /dev/null +++ b/zh-cn/application-dev/ui/ui-arkui-js.md @@ -0,0 +1,10 @@ +# 基于JS扩展的类Web开发范式 + + +- **[概述](ui-js-overview.md)** + +- **[构建用户界面](ui-js-building-ui.md)** + +- **[常见组件开发指导](ui-js-components.md)** + +- **[自定义组件](ui-js-custom-components.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ui-arkui-ts.md b/zh-cn/application-dev/ui/ui-arkui-ts.md new file mode 100644 index 0000000000000000000000000000000000000000..fbb639a85c35ff3f3cfb97d214481b7b8aa72f0e --- /dev/null +++ b/zh-cn/application-dev/ui/ui-arkui-ts.md @@ -0,0 +1,10 @@ +# 基于TS扩展的声明式开发范式 + + +- **[概述](ui-ts-overview.md)** + +- **[开发说明](ui-ts-developing-intro.md)** + +- **[体验声明式UI](ui-ts-experiencing-declarative--u.md)** + +- **[页面布局与连接](ui-ts-page-layout-connections.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ui-arkui.md b/zh-cn/application-dev/ui/ui-arkui.md new file mode 100644 index 0000000000000000000000000000000000000000..31fba7d15448ee5d8dec0a101bcf0f202332db50 --- /dev/null +++ b/zh-cn/application-dev/ui/ui-arkui.md @@ -0,0 +1,6 @@ +# 方舟开发框架（ArkUI） + + +- **[基于JS扩展的类Web开发范式](ui-arkui-js.md)** + +- **[基于TS扩展的声明式开发范式](ui-arkui-ts.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ui-js-animate-attribute-style.md b/zh-cn/application-dev/ui/ui-js-animate-attribute-style.md new file mode 100644 index 0000000000000000000000000000000000000000..a91688a0af6dca66926d4cbb44d8249192fc56b9 --- /dev/null +++ b/zh-cn/application-dev/ui/ui-js-animate-attribute-style.md @@ -0,0 +1,86 @@ +# 属性样式动画 + +在关键帧（Keyframes）中动态设置父组件的width和height，实现组件变大缩小。子组件设置scale属性使父子组件同时缩放，再设置opacity实现父子组件的显示与隐藏。 + +``` + +
+
+ fading away +
+
+ getting bigger +
+
+``` + +``` +/* xxx.css */ +.container { + background-color:#F1F3F5; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} +.fade{ + width: 30%; + height: 200px; + left: 35%; + top: 25%; + position: absolute; + animation: 2s change infinite friction; +} +.bigger{ + width: 20%; + height: 100px; + background-color: blue; + animation: 2s change1 infinite linear-out-slow-in; +} +text{ + width: 100%; + height: 100%; + text-align: center; + color: white; + font-size: 35px; + animation: 2s change2 infinite linear-out-slow-in; +} +/* 颜色变化 */ +@keyframes change{ + from { + background-color: #f76160; + opacity: 1; + } + to { + background-color: #09ba07; + opacity: 0; + } +} +/* 父组件大小变化 */ +@keyframes change1{ + 0% { + width: 20%; + height: 100px; + } + 100% { + width: 80%; + height: 200px; + } +} +/* 子组件文字缩放 */ +@keyframes change2{ + 0%{ + transform: scale(0); + } + 100% { + transform: scale(1.5); + } +} +``` + +![](figures/d1.gif) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +>1. animation取值不区分先后，duration （动画执行时间）/ delay （动画延迟执行时间）按照出现的先后顺序解析。 +>2. 必须设置animation-duration样式，否则时长为0则不会有动画效果。当设置animation-fill-mode属性为forwards时，组件直接展示最后一帧的样式。 + diff --git a/zh-cn/application-dev/ui/ui-js-animate-background-position-style.md b/zh-cn/application-dev/ui/ui-js-animate-background-position-style.md new file mode 100644 index 0000000000000000000000000000000000000000..ed5fc97b0b30ad53048c7d824c87d89c15dd7e0f --- /dev/null +++ b/zh-cn/application-dev/ui/ui-js-animate-background-position-style.md @@ -0,0 +1,81 @@ +# background-position样式动画 + +通过改变background-position属性（第一个值为X轴的位置，第二个值为Y轴的位置）移动背景图片位置，若背景图位置超出组件则超出部分的背景图不显示。 + +``` + +
+
+
+
+``` + +``` +/* xxx.css */ +.container { + background-color:#F1F3F5; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; +} +.content{ + width: 400px; + height: 400px; + background-image: url('common/images/bg-tv.jpg'); + background-size: 100%; + background-repeat: no-repeat; + animation: change 3s infinite; + border: 1px solid black; +} +.content1{ + margin-top:50px; + width: 400px; + height: 400px; + background-image: url('common/images/bg-tv.jpg'); + background-size: 50%; + background-repeat: no-repeat; + animation: change1 5s infinite; + border: 1px solid black; +} +/* 背景图片移动出组件 */ +@keyframes change{ + 0%{ + background-position:0px top; + } + 25%{ + background-position:400px top; + } + 50%{ + background-position:0px top; + } + 75%{ + background-position:0px bottom; + } + 100%{ + background-position:0px top; + } +} +/* 背景图片在组件内移动 */ +@keyframes change1{ + 0%{ + background-position:left top; + } + 25%{ + background-position:50% 50%; + } + 50%{ + background-position:right bottom; + } + 100%{ + background-position:left top;; + } +} +``` + +![](figures/q8.gif) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +>background-position仅支持背景图片的移动，不支持背景颜色（background-color)。 + diff --git a/zh-cn/application-dev/ui/ui-js-animate-component.md b/zh-cn/application-dev/ui/ui-js-animate-component.md new file mode 100644 index 0000000000000000000000000000000000000000..c846ec108de5d927b5b3bd751fd4a013c3321047 --- /dev/null +++ b/zh-cn/application-dev/ui/ui-js-animate-component.md @@ -0,0 +1,467 @@ +# 组件动画 + +在组件上创建和运行动画的快捷方式。具体用法请参考[通用方法](../js-reference/js-based-web-like-development-paradigm/js-components-common-methods.md)。 + +## 获取动画对象 + +通过调用animate方法获得animation对象，animation对象支持动画属性、动画方法和动画事件。 + +``` + +
+
+
+``` + +``` +/* 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; +} +``` + +``` +/* xxx.js */ +export default { + data: { + animation: '', + }, + onInit() { + }, + onShow() { + var options = { + duration: 1500, + }; + var frames = [ + { + width:200,height:200, + }, + { + width:300,height:300, + } + ]; + this.animation = this.$element('content').animate(frames, options); //获取动画对象 + }, + Show() { + this.animation.play(); + } +} +``` + +![](figures/1.gif) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +>- 使用animate方法时必须传入Keyframes和Options参数。 +>- 多次调用animate方法时，采用replace策略，即最后一次调用时传入的参数生效。 + +## 设置动画参数 + +在获取动画对象后，通过设置参数Keyframes设置动画在组件上的样式。 + +``` + +
+
+
+``` + +``` +/* 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; +} +``` + +``` +/* xxx.js */ +export default { + data: { + animation: '', + keyframes:{}, + options:{} + }, + onInit() { + this.options = { + duration: 4000, + }; + this.keyframes = [ + { + transform: { + translate: '-120px -0px', + scale: 1, + rotate: 0 + }, + transformOrigin: '100px 100px', + offset: 0.0, + width: 200, + height: 200 + }, + { + transform: { + translate: '120px 0px', + scale: 1.5, + rotate: 90 + }, + transformOrigin: '100px 100px', + offset: 1.0, + width: 300, + height: 300 + } + ]; + }, + Show() { + this.animation = this.$element('content').animate(this.keyframes, this.options); + this.animation.play(); + } +} +``` + +![](figures/1-0.gif) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +>- translate、scale和totate的先后顺序会影响动画效果。 +>- transformOrigin只对scale和totate起作用。 + +在获取动画对象后，通过设置参数Options来设置动画的属性。 + +``` + +
+
+
+``` + +``` +/* 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; +} +``` + +``` +/* xxx.js */ +export default { + data: { + animation: '', + }, + onInit() { + }, + onShow() { + var options = { + duration: 1500, + easing: 'ease-in', + delay: 5, + iterations: 2, + direction: 'normal', + }; + var frames = [ + { + transform: { + translate: '-150px -0px' + } + }, + { + transform: { + translate: '150px 0px' + } + } + ]; + this.animation = this.$element('content').animate(frames, options); + }, + Show() { + this.animation.play(); + } +} +``` + +![](figures/3.gif) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +>direction：指定动画的播放模式。 +>normal： 动画正向循环播放。 +>reverse： 动画反向循环播放。 +>alternate：动画交替循环播放，奇数次正向播放，偶数次反向播放。 +>alternate-reverse：动画反向交替循环播放，奇数次反向播放，偶数次正向播放。 + +## 添加事件和调用方法 + +animation对象支持动画事件和动画方法。可以通过添加开始和取消事件，调用播放、暂停、倒放和结束方法实现预期动画。 + +``` + +
+
+
+
+ + +
+
+ + +
+
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + align-items: center; + justify-content: center; +} +button{ + width: 200px; +} +.row{ + width: 65%; + height: 100px; + align-items: center; + justify-content: space-between; + margin-top: 40px; + position: fixed; + top: 65%; + left: 120px; +} +.row1{ + width: 65%; + height: 100px; + align-items: center; + justify-content: space-between; + margin-top: 30px; + position: fixed; + top: 75%; + left: 120px; +} +``` + +``` +/* xxx.js */ +import prompt from '@system.prompt'; +export default { + data: { + animation: '', + }, + onInit() { + }, + onShow() { + var options = { + duration: 1500, + easing:'ease-in', + elay:5, + direction:'normal', + iterations:2 + }; + var frames = [ + { + transform: { + translate: '-150px -0px' + }, + opacity: 0.1, + offset: 0.0, + width: 200, + height: 200, + }, + { + transform: { + translate: '150px 0px' + }, + opacity: 1.0, + offset: 1.0, + width: 300, + height: 300, + } + ]; + this.animation = this.$element('content').animate(frames, options); + this.animation.onstart = function(){ + prompt.showToast({ + message: "start" + }); + }; //添加开始事件 + this.animation.onrepeat = function(){ + prompt.showToast({ + message: " repeated" + }); + };//添加重播事件 + this.animation.oncancel = function(){ + prompt.showToast({ + message: "canceled" + }); + };//添加取消事件 + this.animation.onfinish = function(){ + prompt.showToast({ + message: "finish" + }); + };//添加完成事件 + }, + playAnimation() { + this.animation.play();//调用播放开始的方法 + }, + pauseAnimation() { + this.animation.pause();//调用播放暂停的方法 + }, + reverseAnimation() { + this.animation.reverse();//调用播放倒放的方法 + }, + cancelAnimation() { + this.animation.cancel();//调用播放取消的方法 + } +} +``` + +![](figures/111-1.gif) + +通过改变playStat的属性实现动画状态的改变。 + +``` + +
+
+
+
+ +
+
+ +
+
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + align-items: center; + justify-content: center; +} +button{ + width: 200px; +} +.row{ + width: 65%; + height: 100px; + align-items: center; + justify-content: space-between; + margin-top: 50px; + margin-left: 260px; + position: fixed; + top: 65%; +} +.row1{ + width: 65%; + height: 100px; + align-items: center; + justify-content: space-between; + margin-top: 50px; + margin-left: 260px; + position: fixed; + top: 75%; +} +``` + +``` +/* xxx.js */ +import prompt from '@system.prompt'; +export default { + data: { + animation: '', + state:'play', + state1:'play' + }, + onInit() { + }, + onShow() { + var options = { + duration: 1500, + easing:'ease-in', + elay:5, + direction:'normal', + iterations:2, + }; + var frames = [ + { + transform: { + translate: '-150px -0px' + }, + opacity: 0.1, + offset: 0.0, + width: 200, + height: 200, + }, + { + transform: { + translate: '150px 0px' + }, + opacity: 1.0, + offset: 1.0, + width: 300, + height: 300, + } + ]; + this.animation = this.$element('content').animate(frames, options); + this.animation.onstart = function(){ + prompt.showToast({ + message: "start" + }); + }; + this.animation.onrepeat = function(){ + prompt.showToast({ + message: " repeated" + }); + }; + this.animation.onfinish = function(){ + prompt.showToast({ + message: " finished" + }); + }; + }, + playStateClick(){ + if(this.animation.playState != 'running'){ + this.animation.playState = 'running';//设置playState为running，动画运行。 + this.state = 'pause' + }else{ + this.animation.playState = 'paused';//设置playState为paused，动画暂停。 + this.state = 'play' + } + }, + playStateClick1(){ + if(this.animation.playState != 'running'){ + this.animation.playState = 'running'; + this.state1 = 'finish' + }else{ + this.animation.playState = 'finished';//设置playState为finished，动画结束。 + this.state1 = 'play' + } + } +} +``` + +![](figures/1111.gif) + diff --git a/zh-cn/application-dev/ui/ui-js-animate-css.md b/zh-cn/application-dev/ui/ui-js-animate-css.md new file mode 100644 index 0000000000000000000000000000000000000000..8d4db2cd7f381f907bc0f95d21fb0b9f6cc0a92c --- /dev/null +++ b/zh-cn/application-dev/ui/ui-js-animate-css.md @@ -0,0 +1,6 @@ +# CSS动画 + +- **[属性样式动画](ui-js-animate-attribute-style.md)** +- **[transform样式动画](ui-js-animate-transform.md)** +- **[background-position样式动画](ui-js-animate-background-position-style.md)** + diff --git a/zh-cn/application-dev/ui/ui-js-animate-dynamic-effects.md b/zh-cn/application-dev/ui/ui-js-animate-dynamic-effects.md new file mode 100644 index 0000000000000000000000000000000000000000..ac5252dcb9d52b332ed80d8e0ea6313cb364fa5b --- /dev/null +++ b/zh-cn/application-dev/ui/ui-js-animate-dynamic-effects.md @@ -0,0 +1,237 @@ +# 动画动效 + +通过设置插值器来实现动画效果。具体用法请参考[动画](../js-reference/apis/js-apis-basic-features-animator.md)。 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +>从API Version 6 开始支持。 + +## 创建动画对象 + +通过createAnimator创建一个动画对象，通过设置参数options来设置动画的属性。 + +``` + +
+
+
+
+ +
+
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + align-items: center; + justify-content: center; +} +button{ + width: 200px; +} +.row{ + width: 65%; + height: 100px; + align-items: center; + justify-content: space-between; + margin-top: 50px; + margin-left: 260px; +} +``` + +``` +/* xxx.js */ +import animator from '@ohos.animator'; +export default { + data: { + translateVal: 0, + animation: null + }, + onInit() {}, + onShow(){ + var options = { + duration: 3000, + easing:"friction", + delay:"1000", + fill: 'forwards', + direction:'alternate', + iterations: 2, + begin: 0, + end: 180 + };//设置参数 + this.animation = animator.createAnimator(options)//创建动画 + }, + playAnimation() { + var _this = this; + this.animation.onframe = function(value) { + _this.translateVal= value + }; + this.animation.play(); + } +} +``` + +![](figures/22.gif) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +>- 使用createAnimator创建动画对象时必须传入options参数。 +>- begin插值起点，不设置时默认为0。 +>- end插值终点，不设置时默认为1。 + +## 添加动画事件和调用接口 + +animator支持事件和接口，可以通过添加frame、cancel、repeat、finish事件和调用update、play、pause、cancel、reverse、finish接口自定义动画效果。animator支持的事件和接口具体见animator支持的事件和animator支持的接口。 + +``` + +
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + align-items: center; + justify-content: center; +} +button{ + width: 200px; +} +.row{ + width: 65%; + height: 100px; + align-items: center; + justify-content: space-between; + margin-top: 150px; + position: fixed; + top: 55%; + left: 120px; +} +.row1{ + width: 65%; + height: 100px; + align-items: center; + justify-content: space-between; + margin-top: 120px; + position: fixed; + top: 65%; + left: 120px; +} +.row2{ + width: 65%; + height: 100px; + align-items: center; + justify-content: space-between; + margin-top: 100px; + position: fixed; + top: 75%; + left: 120px; +} +``` + +``` +/* xxx.js */ +import animator from '@ohos.animator'; +import prompt from '@system.prompt'; +export default { + data: { + scaleVal:1, + DivWidth:200, + DivHeight:200, + translateVal:0, + animation: null + }, + onInit() { + var options = { + duration: 3000, + fill: 'forwards', + begin: 200, + end: 270 + }; + this.animation = animator.createAnimator(options); + }, + onShow() { + var _this= this; + //添加动画重放事件 + this.animation.onrepeat = function() { + prompt.showToast({ + message: 'repeat' + }); + var repeatoptions = { + duration: 2000, + iterations: 1, + direction: 'alternate', + begin: 180, + end: 240 + }; + _this.animation.update(repeatoptions); + _this.animation.play(); + }; + }, + playAnimation() { + var _this= this; + //添加动画逐帧插值回调事件 + this.animation.onframe = function(value) { + _this. scaleVal= value/150, + _this.DivWidth = value, + _this.DivHeight = value, + _this.translateVal = value-180 + }; + this.animation.play(); + }, + updateAnimation() { + var newoptions = { + duration: 5000, + iterations: 2, + begin: 120, + end: 180 + }; + this.animation.update(newoptions); + this.animation.play();//调用动画播放接口 + }, + pauseAnimation() { + this.animation.pause();//调用动画暂停接口 + }, + finishAnimation() { + var _this= this; + //添加动画完成事件 + this.animation.onfinish = function() { + prompt.showToast({ + message: 'finish' + }) + }; + this.animation.finish(); //调用动画完成接口 + }, + cancelAnimation() { + this.animation.cancel(); //调用动画取消接口 + }, + reverseAnimation() { + this.animation.reverse(); //调用动画倒放接口 + } +} +``` + +![](figures/1-2.gif) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +>在调用update接口的过程中可以使用这个接口更新动画参数，入参与createAnimator一致。 + diff --git a/zh-cn/application-dev/ui/ui-js-animate-frame.md b/zh-cn/application-dev/ui/ui-js-animate-frame.md new file mode 100644 index 0000000000000000000000000000000000000000..d7f8c2d3ef4c9d3a779380d4993898c76819a381 --- /dev/null +++ b/zh-cn/application-dev/ui/ui-js-animate-frame.md @@ -0,0 +1,188 @@ +# 动画帧 + +## 请求动画帧 + +请求动画帧时通过requestAnimationFrame函数逐帧回调，在调用该函数时传入一个回调函数。 + +runframe在调用requestAnimationFrame时传入带有timestamp参数的回调函数step，将step中的timestamp赋予起始的startTime。当timestamp与startTime的差值小于规定的时间时将再次调用requestAnimationFrame，最终动画将会停止。 + +``` + +
+ + +
+ + + +
+
+ + +
+ + +
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; +} +button{ + width: 300px; +} +``` + +``` +/* xxx.js */ +export default { + data: { + timer: null, + left: 0, + top: 0, + flag: true, + animation: null, + startTime: 0, + }, + onShow() { + var test = this.$element("mycanvas"); + var ctx = test.getContext("2d"); + ctx.beginPath(); + ctx.moveTo(0, 0); + ctx.lineTo(300, 300); + ctx.lineWidth = 5; + ctx.strokeStyle = "red"; + ctx.stroke(); + }, + runframe() { + this.left = 0; + this.top = 0; + this.flag = true; + this.animation = requestAnimationFrame(this.step); + }, + step(timestamp) { + if (this.flag) { + this.left += 5; + this.top += 5; + if (this.startTime == 0) { + this.startTime = timestamp; + } + var elapsed = timestamp - this.startTime; + if (elapsed < 500) { + console.log('callback step timestamp: ' + timestamp); + this.animation = requestAnimationFrame(this.step); + } + } else { + this.left -= 5; + this.top -= 5; + this.animation = requestAnimationFrame(this.step); + } + if (this.left == 250 || this.left == 0) { + this.flag = !this.flag + } + }, + onDestroy() { + cancelAnimationFrame(this.animation); + } +} +``` + +![](figures/3333.gif) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +>requestAnimationFrame函数在调用回调函数时在第一个参数位置传入timestamp时间戳，表示requestAnimationFrame开始去执行回调函数的时刻。 + +## 取消动画帧 + +通过cancelAnimationFrame函数取消逐帧回调，在调用cancelAnimationFrame函数时取消requestAnimationFrame函数的请求。 + +``` + +
+ + +
+ + + +
+
+ + +
+ + +
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; +} +button{ + width: 300px; +} +``` + +``` +/* xxx.js */ +export default { + data: { + timer: null, + left: 0, + top: 0, + flag: true, + animation: null + }, + onShow() { + var test = this.$element("mycanvas"); + var ctx = test.getContext("2d"); + ctx.beginPath(); + ctx.moveTo(0, 0); + ctx.lineTo(300, 300); + ctx.lineWidth = 5; + ctx.strokeStyle = "red"; + ctx.stroke(); + }, + runframe() { + this.left = 0; + this.top = 0; + this.flag = true; + this.animation = requestAnimationFrame(this.step); + }, + step(timestamp) { + if (this.flag) { + this.left += 5; + this.top += 5; + this.animation = requestAnimationFrame(this.step); + } else { + this.left -= 5; + this.top -= 5; + this.animation = requestAnimationFrame(this.step); + } + if (this.left == 250 || this.left == 0) { + this.flag = !this.flag + } + }, + onDestroy() { + cancelAnimationFrame(this.animation); + } +} +``` + +![](figures/4444.gif) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +>在调用该函数时需传入一个具有标识id的参数。 + diff --git a/zh-cn/application-dev/ui/ui-js-animate-interpolator.md b/zh-cn/application-dev/ui/ui-js-animate-interpolator.md new file mode 100644 index 0000000000000000000000000000000000000000..dbaf6581dd7b070c491d84ca07506da00eecd4e5 --- /dev/null +++ b/zh-cn/application-dev/ui/ui-js-animate-interpolator.md @@ -0,0 +1,7 @@ +# 插值器动画 + +- **[动画动效](ui-js-animate-dynamic-effects.md)** + +- **[动画帧](ui-js-animate-frame.md)** + + diff --git a/zh-cn/application-dev/ui/ui-js-animate-javascript.md b/zh-cn/application-dev/ui/ui-js-animate-javascript.md new file mode 100644 index 0000000000000000000000000000000000000000..fbe4901c930db172eab1c2a598240740baecbb97 --- /dev/null +++ b/zh-cn/application-dev/ui/ui-js-animate-javascript.md @@ -0,0 +1,7 @@ +# JS动画 + +- **[组件动画](ui-js-animate-component.md)** + +- **[插值器动画](ui-js-animate-interpolator.md)** + + diff --git a/zh-cn/application-dev/ui/ui-js-animate-transform.md b/zh-cn/application-dev/ui/ui-js-animate-transform.md new file mode 100644 index 0000000000000000000000000000000000000000..eb11e5bbe0bf4cb89b105e4fb48dc9ff64a64cd9 --- /dev/null +++ b/zh-cn/application-dev/ui/ui-js-animate-transform.md @@ -0,0 +1,568 @@ +# transform样式动画 + +设置transform属性对组件进行旋转、缩放、移动和倾斜。 + +## 设置静态动画 + +创建一个正方形并旋转90°变成菱形，并用下方的长方形把菱形下半部分遮盖形成屋顶，设置长方形translate属性值为\(150px,-150px\)确定坐标位置形成门，再使用position属性使横纵线跟随父组件（正方形）移动到指定坐标位置，接着设置scale属性使父子组件一起变大形成窗户大小，最后使用skewX属性使组件倾斜后设置坐标translate\(200px,-830px\)得到烟囱。 + +``` + +
+
+
+
+ +
+
+
+
+
+
+``` + +``` +/* xxx.css */ +.container { + background-color:#F1F3F5; + align-items: center; + flex-direction: column; +} +.top{ + z-index: -1; + position: absolute; + width: 428px; + height: 428px; + background-color: #860303; + transform: rotate(45deg); + margin-top: 230px; + margin-left: 266px; +} +.content{ + margin-top: 500px; + width: 600px; + height: 400px; + background-color: white; + border: 1px solid black; +} +.door{ + width: 100px; + height: 150px; + background-color: #1033d9; + transform: translate(150px,-150px); +} +.window{ + z-index: 1; + position: relative; + width: 100px; + height: 100px; + background-color: white; + border: 1px solid black; + transform: translate(-150px,-400px) scale(1.5); +} +/* 窗户的横轴 */ +.horizontal{ + position: absolute; + top: 50%; + width: 100px; + height: 5px; + background-color: black; +} +/* 窗户的纵轴 */ +.vertical{ + position: absolute; + left: 50%; + width: 5px; + height: 100px; + background-color: black; +} +.chimney{ + z-index: -2; + width: 40px; + height: 100px; + border-radius: 15px; + background-color: #9a7404; + transform: translate(200px,-830px) skewX(-5deg); +} +``` + +![](figures/111.png) + +## 设置平移动画 + +小球下降动画，改变小球的Y轴坐标实现小球下落，在下一段是时间内减小Y轴坐标实现小球回弹，让每次回弹的高度逐次减小直至回弹高度为0，就模拟出了小球下降的动画。 + +``` + +
+
+
+
+``` + +``` +/* xxx.css */ +.container { + background-color:#F1F3F5; + display: flex; + justify-content: center; +} +.circle{ + width: 100px; + height: 100px; + border-radius: 50px; + background-color: red; + /* forwards停在动画的最后一帧 */ + animation: down 3s fast-out-linear-in forwards; +} +.flower{ + position: fixed; + width: 80%; + margin-left: 10%; + height: 5px; + background-color: black; + top: 1000px; +} +@keyframes down { + 0%{ + transform: translate(0px,0px); + } + /* 下落 */ + 15%{ + transform: translate(10px,900px); + } + /* 开始回弹 */ + 25%{ + transform: translate(20px,500px); + } + /* 下落 */ + 35%{ + transform: translate(30px,900px); + } + /* 回弹 */ + 45%{ + transform: translate(40px,700px); + } + 55%{ + transform: translate(50px,900px); + } + 65%{ + transform: translate(60px,800px); + } + 80%{ + transform: translate(70px,900px); + } + 90%{ + transform: translate(80px,850px); + } + /* 停止 */ + 100%{ + transform: translate(90px,900px); + } +} +``` + +![](figures/q2.gif) + +## 设置旋转动画 + +设置不同的原点位置（transform-origin）改变元素所围绕的旋转中心。rotate3d属性前三个参数值分别为X轴、Y轴、Z轴的旋转向量，第四个值为旋转角度，旋转向角度可为负值，负值则代表旋转方向为逆时针方向。 + +``` + +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + background-color:#F1F3F5; + display: flex; + align-items: center; + justify-content: center; +} +.rect{ + width: 100px; + height: 100px; + animation: rotate 3s infinite; + margin-left: 100px; +} +.rect1{ + background-color: #f76160; +} +.rect2{ + background-color: #60f76f; + /* 改变原点位置*/ + transform-origin: 10% 10px; +} +.rect3{ + background-color: #6081f7; + /* 改变原定点置*/ + transform-origin: right bottom; +} +@keyframes rotate { + from { + transform: rotate(0deg) + } + to { + transform: rotate(360deg); + } +} +/* 3d示例样式 */ +.rotate3d{ + margin-top: 150px; + flex-direction: column; + background-color:#F1F3F5; + display: flex; + align-items: center; + width: 80%; + height: 600px; + border-radius: 300px; + border: 1px solid #ec0808; +} +.content{ + padding-top: 150px; + display: flex; + align-items: center; + justify-content: center; +} +/* react4 react5 翻转形成眼睛 */ +.rect4{ + width: 100px; + height: 100px; + animation: rotate3d1 17ms infinite; + background: linear-gradient(#e6c4ec, #be15d9) +} +.rect5{ + width: 100px; + height: 100px; + animation: rotate3d1 17ms infinite; + margin-left: 100px; + background: linear-gradient(#e6c4ec, #be15d9) +} +.mouse{ + margin-top: 150px; + width: 200px; + height: 100px; + border-radius: 50px; + border: 1px solid #e70303; + animation: rotate3d2 17ms infinite; +} +/* 眼睛的动效 */ +@keyframes rotate3d1{ + 0% { + transform:rotate3d(0,0,0,0deg) + } + 50% { + transform:rotate3d(20,20,20,360deg); + } + 100% { + transform:rotate3d(0,0,0,0deg); + } +} +/* 嘴的动效 */ +@keyframes rotate3d2{ + 0% { + transform:rotate3d(0,0,0,0deg) + } + 33% { + transform:rotate3d(0,0,10,30deg); + } + 66% { + transform:rotate3d(0,0,10,-30deg); + } + 100% { + transform:rotate3d(0,0,0,0deg); + } +} +``` + +![](figures/d2.gif) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +>transform-origin变换对象的原点位置，如果仅设置一个值，另一个值为50%，若设置两个值第一个值表示X轴的位置，第二个值表示Y轴的位置。 + +## 设置缩放动画 + +设置scale样式属性实现涟漪动画，先使用定位确定元素的位置，确定坐标后创建多个组件实现重合效果，再设置opacity属性改变组件不透明度实现组件隐藏与显示，同时设置scale值使组件可以一边放大一边隐藏，最后设置两个组件不同的动画执行时间，实现扩散的效果。 + +设置sacle3d中X轴、Y轴、Z轴的缩放参数实现动画。 + +``` + +
+
+ ripple +
+
+
+ +
+ spring +
+
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + background-color:#F1F3F5; + width: 100%; + position: relative; +} +.circle{ + margin-top: 400px; + margin-left: 40%; + width: 100px; + height: 100px; + border-radius: 50px; + background:linear-gradient(#dcaec1, #d3a8e3); + z-index: 1; + position: absolute; +} +.ripple{ + margin-top: 400px; + margin-left: 40%; + position: absolute; + z-index: 0; + width: 100px; + height: 100px; + border-radius: 50px; + background:linear-gradient(#dcaec1,#d3a8e3); + animation: ripple 5s infinite; +} +/* 设置不同的动画时间 */ +.ripple2{ + animation-duration: 2.5s; +} +@keyframes ripple{ + 0%{ + transform: scale(1); + opacity: 0.5; + } + 50%{ + transform: scale(3); + opacity: 0; + } + 100%{ + transform: scale(1); + opacity: 0.5; + } +} +text{ + color: white; + text-align: center; + height: 100%; + width: 100%; +} +.content { + margin-top: 700px; + margin-left: 33%; + width: 200px; + height: 100px; + animation:rubberBand 1s infinite; + /* 设置渐变色 */ + background:linear-gradient(#e276aa,#ec0d66); + position: absolute; +} +@keyframes rubberBand { + 0% { + transform: scale3d(1, 1, 1); + } + 30% { + transform: scale3d(1.25, 0.75, 1.1); + } + 40% { + transform: scale3d(0.75, 1.25, 1.2); + } + 50% { + transform: scale3d(1.15, 0.85, 1.3); + } + 65% { + transform: scale3d(.95, 1.05, 1.2); + } + 75% { + transform: scale3d(1.05, .95, 1.1); + } + 100%{ + transform: scale3d(1, 1, 1); + } +} +``` + +![](figures/d3.gif) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +>设置transform属性值后，子元素会跟着父元素一起改变，若只改变父元素其他属性值时（如：height，width)，子元素不会改变。 + +## 设置matrix属性 + +matrix是一个入参为六个值的矩阵，6个值分别代表：scaleX, skewY, skewX, scaleY, translateX, translateY。下面示例中设置 了matrix属性为matrix\(1,0,0,1,0,200\)使组件移动和倾斜。 + +``` + +
+
+
+``` + +``` +/* xxx.css */ +.container{ + background-color:#F1F3F5; + display: flex; + justify-content: center; +} +.rect{ + width: 100px; + height: 100px; + background-color: red; + animation: down 3s infinite forwards; +} +@keyframes down{ + 0%{ + transform: matrix(1,0,0,1,0,0); + } + 10%{ + transform: matrix(1,0,0,1,0,200); + } + 60%{ + transform: matrix(2,1.5,1.5,2,0,700); + } + 100%{ + transform: matrix(1,0,0,1,0,0); + } +} +``` + +![](figures/q3.gif) + +## 整合transform属性 + +transform可以设置多个值并且多个值可同时设置，下面案例中展示同时设置缩放（scale），平移（translate），旋转（rotate）属性时的动画效果。 + +``` + +
+
+
+
+
+
+
+``` + +``` +/* xxx.css */ +.container{ + flex-direction:column; + background-color:#F1F3F5; + padding:50px; +} +.rect1{ + width: 100px; + height: 100px; + background:linear-gradient(#e77070,#ee0202); + animation: change1 3s infinite forwards; +} +.rect2{ + margin-top: 50px; + width: 100px; + height: 100px; + background:linear-gradient(#95a6e8, #2739de); + animation: change2 3s infinite forwards; +} +.rect3{ + margin-top: 50px; + width: 100px; + height: 100px; + background:linear-gradient(#142ee2, #8cb1e5); + animation: change3 3s infinite; +} +.rect4{ + align-self: center; + margin-left: 50px; + margin-top: 200px; + width: 100px; + height: 100px; + background:linear-gradient(#e2a8df, #9c67d4,#8245d9,#e251c3); + animation: change4 3s infinite; +} +.rect5{ + margin-top: 300px; + width: 100px; + height: 100px; + background:linear-gradient(#e7ded7, #486ccd, #94b4d2); + animation: change5 3s infinite; +} +/* change1 change2 对比 */ +@keyframes change1{ + 0%{ + transform: translate(0,0); + transform: rotate(0deg) + } + 100%{ + transform: translate(0,500px); + transform: rotate(360deg) + } +} +/* change2 change3 对比属性顺序不同的动画效果 */ +@keyframes change2{ + 0%{ + transform:translate(0,0) rotate(0deg) ; + } + 100%{ + transform: translate(300px,0) rotate(360deg); + } +} +@keyframes change3{ + 0%{ + transform:rotate(0deg) translate(0,0); + } + 100%{ + transform:rotate(360deg) translate(300px,0); + } +} +/* 属性值不对应的情况 */ +@keyframes change4{ + 0%{ + transform: scale(0.5); + } + 100%{ + transform:scale(2) rotate(45deg); + } +} +/* 多属性的写法 */ +@keyframes change5{ + 0%{ + transform:scale(0) translate(0,0) rotate(0); + } + 100%{ + transform: scale(1.5) rotate(360deg) translate(200px,0); + } +} +``` + +![](figures/d4.gif) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +>1. 当设置多个transform时，后续的transform值会把前面的覆盖掉。若想同时使用多个动画样式可用复合写法，例：transform: scale\(1\) rotate\(0\) translate\(0,0\)。 +>2. transform进行复合写法时，变化样式内多个样式值顺序的不同会呈现不一样的动画效果。 +>3. transform属性设置的样式值要一一对应，若前后不对应，则该动画不生效。若设置多个样式值则只会呈现出已对应值的动画效果。 + diff --git a/zh-cn/application-dev/ui/ui-js-building-ui-animation.md b/zh-cn/application-dev/ui/ui-js-building-ui-animation.md index 2a472cdc9b6779132a457f01bb94319db55d8912..9164b1c5cf6faf6770d98d49f9202edc8be35850 100755 --- a/zh-cn/application-dev/ui/ui-js-building-ui-animation.md +++ b/zh-cn/application-dev/ui/ui-js-building-ui-animation.md @@ -1,8 +1,5 @@ # 动画 -- [静态动画](#静态动画) -- [连续动画](#连续动画) - 动画分为[静态动画](#静态动画)和[连续动画](#连续动画)。 @@ -16,7 +13,7 @@ - **rotate**：将指定组件沿横轴或纵轴或中心点旋转指定的角度。 -具体的使用示例如下。 +具体的使用示例如下，更多信息请参考[组件方法](../js-reference/js-based-web-like-development-paradigm/js-components-common-methods.md)。 ``` @@ -58,8 +55,8 @@ ``` -**图1** 静态动画效果图
-![zh-cn_image_0000001212066279](figures/zh-cn_image_0000001212066279.png) +**图1** 静态动画效果图 +![zh-cn_image_0000001071134933](figures/zh-cn_image_0000001071134933.png) ## 连续动画 @@ -70,7 +67,7 @@ - **animation-name**：设置动画执行后应用到组件上的背景颜色、透明度、宽高和变换类型。 -- **animation-delay**和 **animation-duration**：分别设置动画执行后元素延迟和持续的时间。 +- **animation-delay**和**animation-duration**：分别设置动画执行后元素延迟和持续的时间。 - **animation-timing-function**：描述动画执行的速度曲线，使动画更加平滑。 @@ -159,6 +156,5 @@ export default { } ``` -**图2** 连续动画效果图
-![zh-cn_image_0000001166744904](figures/zh-cn_image_0000001166744904.gif) - +**图2** 连续动画效果图 +![zh-cn_image_0000001063148757](figures/zh-cn_image_0000001063148757.gif) diff --git a/zh-cn/application-dev/ui/ui-js-building-ui-component.md b/zh-cn/application-dev/ui/ui-js-building-ui-component.md index 49d2a1ef3f2024b1f8e41924c63fc3ba907085ea..e5a8371c06d4c918c8cdf7ccbd2fc6d6d83a4e17 100755 --- a/zh-cn/application-dev/ui/ui-js-building-ui-component.md +++ b/zh-cn/application-dev/ui/ui-js-building-ui-component.md @@ -1,21 +1,20 @@ # 组件介绍 -- [组件分类](#组件分类) +组件（Component）是构建页面的核心，每个组件通过对数据和方法的简单封装，实现独立的可视、可交互功能单元。组件之间相互独立，随取随用，也可以在需求相同的地方重复使用。关于组件的详细参考文档请参见[组件](../js-reference/js-based-web-like-development-paradigm/js-components-common-attributes.md)。 -组件（Component）是构建页面的核心，每个组件通过对数据和方法的简单封装，实现独立的可视、可交互功能单元。组件之间相互独立，随取随用，也可以在需求相同的地方重复使用。关于组件的详细参考文档请参见[组件](../js-reference/component/Readme-CN.md)。 -开发者还可以通过组件间合理的搭配定义满足业务需求的新组件，减少开发量，自定义组件的开发方法请参见[自定义组件](../js-reference/component/js-components-custom.md)。 +开发者还可以通过组件间合理的搭配定义满足业务需求的新组件，减少开发量，自定义组件的开发方法请参见[自定义组件](../ui/ui-js-custom-components.md)。 + ## 组件分类 -根据组件的功能，可以分为以下四大类： +根据组件的功能，可以分为以下六大类： | 组件类型 | 主要组件 | | -------- | -------- | -| 基础组件 | button、chart、divider、image、image-animator、input、label、marquee、menu、option、picker、picker-view、piece、progress、qrcode、rating、richtext、search、select、slider、span、switch、text、textarea、toolbar、toolbar-item、toggle | | 容器组件 | badge、dialog、div、form、list、list-item、list-item-group、panel、popup、refresh、stack、stepper、stepper-item、swiper、tabs、tab-bar、tab-content | -|媒体组件|video| -| 画布组件 | canvas | -|栅格组件|grid-container、grid-row、grid-col| -|svg组件|svg、rect、circle、ellipse、path、line、polyline、polygon、text、tspan、textPath、animate、animateMotion、animateTransform| - +| 基础组件 | button、chart、divider、image、image-animator、input、label、marquee、menu、option、picker、picker-view、piece、progress、qrcode、rating、richtext、search、select、slider、span、switch、text、textarea、toolbar、toolbar-item、toggle | +| 媒体组件 | video | +| 画布组件 | canvas | +| 栅格组件 | grid-container、grid-row、grid-col | +| svg组件 | svg、rect、circle、ellipse、path、line、polyline、polygon、text、tspan、textPath、animate、animateMotion、animateTransform | diff --git a/zh-cn/application-dev/ui/ui-js-building-ui-event.md b/zh-cn/application-dev/ui/ui-js-building-ui-event.md index 2d6f82caacff7bdb61e57dfadfe7a2e20a9f5efe..a4c3320873f45bae9609cb0b224d04240f631fd3 100755 --- a/zh-cn/application-dev/ui/ui-js-building-ui-event.md +++ b/zh-cn/application-dev/ui/ui-js-building-ui-event.md @@ -1,16 +1,13 @@ # 事件 -- [手势事件](#手势事件) -- [按键事件](#按键事件) - 事件主要为手势事件。手势事件主要用于具有触摸屏的设备。 ## 手势事件 -手势表示由单个或多个事件识别的语义动作（例如：点击、拖动和长按）。一个完整的手势也可能由多个事件组成，对应手势的生命周期。JS UI框架支持的手势事件有： +手势表示由单个或多个事件识别的语义动作（例如：点击、拖动和长按）。一个完整的手势也可能由多个事件组成，对应手势的生命周期。支持的事件有： - **触摸** +**触摸** - touchstart：手指触摸动作开始。 - touchmove：手指触摸后移动。 @@ -107,4 +104,3 @@ export default { }, } ``` - diff --git a/zh-cn/application-dev/ui/ui-js-building-ui-interactions.md b/zh-cn/application-dev/ui/ui-js-building-ui-interactions.md index d569f7970c9583886008c372a7a4531fa9fc4f6a..0c392b1eb16e2be080f8dfe0e153faa8a82243eb 100755 --- a/zh-cn/application-dev/ui/ui-js-building-ui-interactions.md +++ b/zh-cn/application-dev/ui/ui-js-building-ui-interactions.md @@ -3,7 +3,7 @@ 添加交互可以通过在组件上关联事件实现。本节将介绍如何用div、text、image组件关联click事件，构建一个如下图所示的点赞按钮。 **图1** 点赞按钮效果 -![zh-cn_image_0000001212146221](figures/zh-cn_image_0000001212146221.gif) +![zh-cn_image_0000001064068638](figures/zh-cn_image_0000001064068638.gif) 点赞按钮通过一个div组件关联click事件实现。div组件包含一个image组件和一个text组件： @@ -77,4 +77,4 @@ export default { ``` -JS UI框架还提供了很多表单组件，例如开关、标签、滑动选择器等，以便于开发者在页面布局时灵活使用和提高交互性。 +除此之外，还提供了很多表单组件，例如开关、标签、滑动选择器等，以便于开发者在页面布局时灵活使用和提高交互性，详见[容器组件](../js-reference/js-based-web-like-development-paradigm/js-components-container-badge.md)。 diff --git a/zh-cn/application-dev/ui/ui-js-building-ui-layout-external-container.md b/zh-cn/application-dev/ui/ui-js-building-ui-layout-external-container.md index 65cdb858892ec484962eefd36a447336ce08c90f..9745b4d08ffa54470ec8c3150601b1450e686b43 100755 --- a/zh-cn/application-dev/ui/ui-js-building-ui-layout-external-container.md +++ b/zh-cn/application-dev/ui/ui-js-building-ui-layout-external-container.md @@ -1,8 +1,5 @@ # 添加容器 -- [List组件](#list组件) -- [Tabs组件](#tabs组件) - 要将页面的基本元素组装在一起，需要使用容器组件。在页面布局中常用到三种容器组件，分别是div、list和tabs。在页面结构相对简单时，可以直接用div作为容器，因为div作为单纯的布局容器，可以支持多种子组件，使用起来更为方便。 diff --git a/zh-cn/application-dev/ui/ui-js-building-ui-layout-image.md b/zh-cn/application-dev/ui/ui-js-building-ui-layout-image.md index d0fbeb8983f1a7980f8e50aef4bdd3bfe1bd5f29..e6b3971ec69112afccfee04461294d827d74946c 100755 --- a/zh-cn/application-dev/ui/ui-js-building-ui-layout-image.md +++ b/zh-cn/application-dev/ui/ui-js-building-ui-layout-image.md @@ -1,9 +1,9 @@ # 添加图片区域 -添加图片区域通常用image组件来实现，使用的方法和text组件类似。 +添加图片区域通常用[image](../js-reference/js-based-web-like-development-paradigm/js-components-basic-image.md)组件来实现，使用的方法和text组件类似。 -图片资源建议放在jsdefaultcommon目录下，common目录需自行创建。代码示例如下： +图片资源建议放在jsdefaultcommon目录下，common目录需自行创建，详细的目录结构见[目录结构](../js-reference/js-based-web-like-development-paradigm/js-framework-file.md#目录结构)。代码示例如下： ``` diff --git a/zh-cn/application-dev/ui/ui-js-building-ui-layout-intro.md b/zh-cn/application-dev/ui/ui-js-building-ui-layout-intro.md index 74ed1ef084efa7c5517b9a3f99b8ab9f4ef11dfe..c52c5d8ecb747242a6abd8f76b4dd044a7a692b0 100644 --- a/zh-cn/application-dev/ui/ui-js-building-ui-layout-intro.md +++ b/zh-cn/application-dev/ui/ui-js-building-ui-layout-intro.md @@ -1,6 +1,6 @@ # 布局说明 -JS UI框架中，设备的基准宽度为720px（px为逻辑像素，非物理像素），实际显示效果会根据实际屏幕宽度进行缩放。 +设备的基准宽度为720px（px为逻辑像素，非物理像素），实际显示效果会根据实际屏幕宽度进行缩放。 其换算关系如下： @@ -22,10 +22,10 @@ JS UI框架中，设备的基准宽度为720px（px为逻辑像素，非物理 - 是否需要容器组件及其类型 -将页面中的元素分解之后再对每个基本元素按顺序实现，可以减少多层嵌套造成的视觉混乱和逻辑混乱，提高代码的可读性，方便对页面做后续的调整。以下图为例进行分解：
-**图1** 页面布局分解
-![zh-cn_image_0000001166426374](figures/zh-cn_image_0000001166426374.png) +将页面中的元素分解之后再对每个基本元素按顺序实现，可以减少多层嵌套造成的视觉混乱和逻辑混乱，提高代码的可读性，方便对页面做后续的调整。以下图为例进行分解： +**图1** 页面布局分解 +![zh-cn_image_0000001070558189](figures/zh-cn_image_0000001070558189.png) -**图2** 留言区布局分解
+**图2** 留言区布局分解 -![zh-cn_image_0000001166586348](figures/zh-cn_image_0000001166586348.png) +![zh-cn_image_0000001063442797](figures/zh-cn_image_0000001063442797.png) diff --git a/zh-cn/application-dev/ui/ui-js-building-ui-layout-text.md b/zh-cn/application-dev/ui/ui-js-building-ui-layout-text.md index 4dd5e395201944005b15a5d93d52b3d8755d5179..1cf2a0a761f1a80787d0ce8d8cdb0bc3c4ad2b39 100755 --- a/zh-cn/application-dev/ui/ui-js-building-ui-layout-text.md +++ b/zh-cn/application-dev/ui/ui-js-building-ui-layout-text.md @@ -1,6 +1,6 @@ # 添加标题行和文本区域 -实现标题和文本区域最常用的是基础组件text。text组件用于展示文本，可以设置不同的属性和样式，文本内容需要写在标签内容区。在页面中插入标题和文本区域的示例如下： +实现标题和文本区域最常用的是基础组件text。text组件用于展示文本，可以设置不同的属性和样式，文本内容需要写在标签内容区，完整属性和样式信息请参考[text](../js-reference/js-based-web-like-development-paradigm/js-components-basic-text.md)。在页面中插入标题和文本区域的示例如下： ``` diff --git a/zh-cn/application-dev/ui/ui-js-building-ui-routes.md b/zh-cn/application-dev/ui/ui-js-building-ui-routes.md index 5d1a79323a04243747b8e6f0106e0bf8f1b13ee1..7f2f6fb16d031823df447c6f2983bf1386ab6885 100644 --- a/zh-cn/application-dev/ui/ui-js-building-ui-routes.md +++ b/zh-cn/application-dev/ui/ui-js-building-ui-routes.md @@ -1,16 +1,12 @@ # 页面路由 -- [构建页面布局](#构建页面布局) -- [构建页面样式](#构建页面样式) -- [实现跳转](#实现跳转) - 很多应用由多个页面组成，比如用户可以从音乐列表页面点击歌曲，跳转到该歌曲的播放界面。开发者需要通过页面路由将这些页面串联起来，按需实现跳转。 页面路由router根据页面的uri找到目标页面，从而实现跳转。以最基础的两个页面之间的跳转为例，具体实现步骤如下： -1. 在 “Project“窗口，打开“entry > src > main > js > default”，右键点击“pages”文件夹，选择“New > JS Page”，创建一个详情页。 +1. 在“Project“窗口，打开entry > src > mainjsdefault，右键点击pages文件夹，选择NewJS Page，创建一个详情页。 2. 调用router.push()路由到详情页。 @@ -86,5 +82,5 @@ export default { 运行效果如下图所示： -**图1** 页面路由效果
-![zh-cn_image_0000001166904852](figures/zh-cn_image_0000001166904852.png) +**图1** 页面路由效果 +![zh-cn_image_0000001070707559](figures/zh-cn_image_0000001070707559.png) diff --git a/zh-cn/application-dev/ui/ui-js-building-ui.md b/zh-cn/application-dev/ui/ui-js-building-ui.md index ccb63dde2ef41ce0f39f66460b1caf7f0669faa6..bc6c708daa1e38ae4119875e8e0c73c93fb32509 100644 --- a/zh-cn/application-dev/ui/ui-js-building-ui.md +++ b/zh-cn/application-dev/ui/ui-js-building-ui.md @@ -11,4 +11,4 @@ - **[事件](ui-js-building-ui-event.md)** -- **[页面路由](ui-js-building-ui-routes.md)** \ No newline at end of file +- **[页面路由](ui-js-building-ui-routes.md)** diff --git a/zh-cn/application-dev/ui/ui-js-component-tabs.md b/zh-cn/application-dev/ui/ui-js-component-tabs.md new file mode 100644 index 0000000000000000000000000000000000000000..e8da9dac133433b93816be8f274e11accae2edd9 --- /dev/null +++ b/zh-cn/application-dev/ui/ui-js-component-tabs.md @@ -0,0 +1,304 @@ +# Tabs + +Tabs是一种常见的界面导航结构。通过页签容器，用户可以快捷地访问应用的不同模块。具体用法请参考[Tabs API](../js-reference/js-based-web-like-development-paradigm/js-components-container-tabs.md)。 + + +## 创建Tabs + +在pages/index目录下的hml文件中创建一个Tabs组件。 + +``` + +
+ + item1 + item2 + + +
+ content1 +
+
+ content2 +
+ + +
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +.text{ + width: 100%; + height: 100%; + justify-content: center; + align-items: center; +} +``` + +![zh-cn_image_0000001165191390](figures/zh-cn_image_0000001165191390.gif) + + +## 设置Tabs方向 + +Tabs默认展示索引为index的标签及内容。通过设置vertical属性使组件纵向展示。 + +``` + +
+ + + item1 + item2 + + +
+ +
+
+ +
+ + +
+``` + +![zh-cn_image_0000001208908643](figures/zh-cn_image_0000001208908643.gif) + +设置mode属性使tab-bar的子组件均分，设置scrollable属性使tab-content不可进行左右滑动切换内容。 + +``` + +
+ + + item1 + item2 + + +
+ +
+
+ +
+ + +
+``` + +![zh-cn_image_0000001209028575](figures/zh-cn_image_0000001209028575.gif) + + +## 设置样式 + +设置Tabs背景色及边框和tab-content布局。 +``` + +
+ + + item1 + item2 + + +
+ content1 +
+
+ content2 +
+ + +
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: flex-start; + align-items: center; + background-color:#F1F3F5; +} +.tabs{ + margin-top: 20px; + border: 1px solid #2262ef; + width: 99%; + padding: 10px; +} +.tabBar{ + width: 100%; + border: 1px solid #78abec; +} +.tabContent{ + width: 100%; + margin-top: 10px; + height: 300px; + color: blue; + justify-content: center; align-items: center; +} +``` + +![zh-cn_image_0000001163388642](figures/zh-cn_image_0000001163388642.gif) + + +## 显示页签索引 + +开发者可以为Tabs添加change事件，实现页签切换后显示当前页签索引的功能。 + +``` + +
+ + + item1 + item2 + + +
+ +
+
+ +
+ + +
+``` + +``` +/* index.js */ +import prompt from '@system.prompt'; +export default { + tabChange(e){ + prompt.showToast({ + message: "Tab index: " + e.index + }) + } +} +``` + +![zh-cn_image_0000001163228638](figures/zh-cn_image_0000001163228638.gif) + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> - tabs子组件仅支持一个[](../js-reference/js-based-web-like-development-paradigm/js-components-container-tab-bar.md)和一个[](../js-reference/js-based-web-like-development-paradigm/js-components-container-tab-content.md)。 + + +## 场景示例 + +在本场景中，开发者可以点击标签切换内容，选中后标签文字颜色变红，并显示下划线。 + +用tabs、tab-bar和tab-content实现点击切换功能，再定义数组，设置属性。使用change事件改变数组内的属性值实现变色及下划线的显示。 + +``` + +
+ + +
+
+ +
+
+ +
+
+ +
+
+ + +
+ {{$item.title}} +
+
+
+ + +
+``` + +``` +/* xxx.css */ +.container{ +background-color:#F1F3F5; +} +.tab_bar { + width: 100%; +} +.tab_item { + flex-direction: column; + align-items: center; +} +.tab_item text { + font-size: 32px; +} +.item-container { + justify-content: center; + flex-direction: column; +} +.underline-show { + height: 2px; + width: 160px; + background-color: #FF4500; + margin-top: 7.5px; +} +.underline-hide { + height: 2px; + margin-top: 7.5px; + width: 160px; +} +``` + +``` +/* index.js */ +import prompt from '@system.prompt'; +export default { + data() { + return { + datas: { + color_normal: '#878787', + color_active: '#ff4500', + show: true, + list: [{ + i: 0, + color: '#ff4500', + show: true, + title: 'List1' + }, { + i: 1, + color: '#878787', + show: false, + title: 'List2' + }, { + i: 2, + color: '#878787', + show: false, + title: 'List3' + }] + } + } + }, + changeTabactive (e) { + for (let i = 0; i < this.datas.list.length; i++) { + let element = this.datas.list[i]; + element.show = false; + element.color = this.datas.color_normal; + if (i === e.index) { + element.show = true; + element.color = this.datas.color_active; + } + } + } +} +``` + +![zh-cn_image_0000001163228602](figures/zh-cn_image_0000001163228602.gif) diff --git a/zh-cn/application-dev/ui/ui-js-components-button.md b/zh-cn/application-dev/ui/ui-js-components-button.md new file mode 100644 index 0000000000000000000000000000000000000000..5c99706e50eba54dc0277e1e02802f19052ed022 --- /dev/null +++ b/zh-cn/application-dev/ui/ui-js-components-button.md @@ -0,0 +1,281 @@ +# Button + +Button是按钮组件，其类型包括胶囊按钮、圆形按钮、文本按钮、弧形按钮、下载按钮。具体用法请参考[Button API](../js-reference/js-based-web-like-development-paradigm/js-components-basic-button.md)。 + + +## 创建Button组件 + +在pages/index目录下的hml文件中创建一个Button组件。 + +``` + +
+ +
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +``` + +![zh-cn_image_0000001211225091](figures/zh-cn_image_0000001211225091.png) + + +## 设置Button类型 + +通过设置Button的type属性来选择按钮类型，如定义Button为圆形按钮、文本按钮等。 + + +``` + +
+ + +
+``` + + +``` +/* xxx.css */ +.container { + background-color: #F1F3F5; + flex-direction: column; + align-items: center; + justify-content: center; +} +.circle { + font-size: 120px; + background-color: blue; + radius: 72px; +} +.text { + margin-top: 30px; + text-color: white; + font-size: 30px; + font-style: normal; + background-color: blue; + width: 50%; + height: 100px; +} +``` + + +![zh-cn_image_0000001208771093](figures/zh-cn_image_0000001208771093.png) + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> - 胶囊按钮（type=capsule）不支持border相关样式。 +> +> - 圆形按钮（type=circle）不支持文本相关样式。 +> +> - 文本按钮（type=text），自适应文本大小，不支持尺寸样式设置（radius，width，height），背景透明不支持background-color样式。 +> +> - Button组件使用的icon图标如果来自云端路径，需要添加网络访问权限 ohos.permission.INTERNET。 + + +如果需要添加ohos.permission.INTERNET权限，则在resources文件夹下的config.json文件里进行权限配置。 + + +``` + +"module": { + "reqPermissions": [{ + "name": "ohos.permission.INTERNET" + }], +} +``` + + +## 显示下载进度 + +为Button组件添加progress方法，来实时显示下载进度条的进度。 + +``` + +
+ +
+``` + +``` +/* xxx.css */ +.container { + background-color: #F1F3F5; + flex-direction: column; + align-items: center; + justify-content: center; +} +.download { + width: 280px; + text-color: white; + background-color: #007dff; +} +``` + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + data: { + percent: 0, + downloadText: "Download", + isPaused: true, + intervalId : null, + }, + star(){ + this.intervalId = setInterval(()=>{ + if(this.percent <100){ + this.percent += 1; + this.downloadText = this.percent+ "%"; + } else{ + prompt.showToast({ + message: "Download succeeded." + }) + this.paused() + this.downloadText = "Download"; + this.percent = 0; + this.isPaused = true; + } + },100) + }, + paused(){ + clearInterval(this.intervalId); + this.intervalId = null; + }, + setProgress(e) { + if(this.isPaused){ + prompt.showToast({ + message: "Download started" + }) + this.star(); + this.isPaused = false; + }else{ + prompt.showToast({ + message: "Paused." + }) + this.paused(); + this.isPaused = true; + } + } +} +``` + +![zh-cn_image_0000001208393581](figures/zh-cn_image_0000001208393581.gif) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> - setProgress方法只支持button的类型为download。 + + +## 场景示例 + +在本场景中，开发者可根据输入的文本内容进行Button类型切换。 + + +``` + +
+
+ +
+
+
+ + +
+
+
+``` + + +``` +/* xxx.css */ +.container { + flex-direction: column; + align-items: center; + background-color: #F1F3F5; +} +.input-item { + margin-bottom: 80px; + flex-direction: column; +} +.doc-row { + justify-content: center; + margin-left: 30px; + margin-right: 30px; + justify-content: space-around; +} +.input-text { + height: 80px; + line-height: 80px; + padding-left: 30px; + padding-right: 30px; + margin-left: 30px; + margin-right: 30px; + margin-top:100px; + border: 3px solid; + border-color: #999999; + font-size: 30px; + background-color: #ffffff; + font-weight: 400; +} +.select-button { + width: 35%; + text-align: center; + height: 70px; + padding-top: 10px; + padding-bottom: 10px; + margin-top: 30px; + font-size: 30px; + color: #ffffff; +} +.color-3 { + background-color: #0598db;; +} +``` + + +``` +// xxx.js +export default { + data: { + myflex: '', + myholder: 'Enter text.', + myname: '', + mystyle1: "#ffffff", + mystyle2: "#ff0000", + mytype: 'text', + myvalue: '', + }, + onInit() { + }, + changetype3() { + this.myflex = ''; + this.myholder = 'Enter text.'; + this.myname = ''; + this.mystyle1 = "#ffffff"; + this.mystyle2 = "#FF0000"; + this.mytype = 'text'; + this.myvalue = ''; + }, + changetype4() { + this.myflex = ''; + this.myholder = 'Enter a date.'; + this.myname = ''; + this.mystyle1 = "#ffffff"; + this.mystyle2 = "#FF0000"; + this.mytype = 'date'; + this.myvalue = ''; + }, +} +``` + + +![zh-cn_image_0000001163212628](figures/zh-cn_image_0000001163212628.gif) diff --git a/zh-cn/application-dev/ui/ui-js-components-dialog.md b/zh-cn/application-dev/ui/ui-js-components-dialog.md new file mode 100644 index 0000000000000000000000000000000000000000..d83a6b7d062586214ff9b343f3c4e510f291f48f --- /dev/null +++ b/zh-cn/application-dev/ui/ui-js-components-dialog.md @@ -0,0 +1,304 @@ +# Dialog + +Dialog组件用于创建自定义弹窗，通常用来展示用户当前需要或用户必须关注的信息或操作。具体用法请参考[Dialog API](../js-reference/js-based-web-like-development-paradigm/js-components-container-dialog.md)。 + + +## 创建Dialog组件 + +在pages/index目录下的hml文件中创建一个Dialog组件，并添加Button组件来触发Dialog，当dragable为true时Dialog组件可进行拖拽。。Dialog组件仅支持width、height、margin、margin-[left|top|right|bottom]、margin-[start|end]样式。。 +``` + +
+
+ this is a dialog +
+ + +
+``` + +``` +/* xxx.css */ +.doc-page { + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +.dialogClass{ + width: 80%; + height: 250px; + margin-start: 1%; +} +.content{ + width: 100%; + height: 250px; + justify-content: center; + background-color: #e8ebec; + border-radius: 20px; +} +text{ + width: 100%; + height: 100%; + text-align: center; +} +button{ + width: 70%; + height: 60px; +} +``` + +``` +/* xxx.js */ +export default { + //Touch to open the dialog box. + openDialog(){ + this.$element('dialogId').show() + }, +} +``` + +![zh-cn_image_0000001211246571](figures/zh-cn_image_0000001211246571.gif)![zh-cn_image_0000001211246571](figures/zh-cn_image_0000001211246571.gif) + + +## 设置弹窗响应 + +开发者点击页面上非Dialog的区域时，将触发cancel事件而关闭弹窗，。同时也可以通过对Dialog添加show和close方法来显示和关闭弹窗，当弹窗显示时触发show事件，关闭则触发close事件。。 + + +``` + +
+ +
+ dialog + +
+ + +
+``` + + +``` +/* xxx.css */ +.doc-page { + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +.dialogClass{ + width: 80%; + height: 300px; + margin-start: 1%; +} +.dialogDiv{ + width: 100%; + flex-direction: column; + justify-content: center; + align-self: center; +} +text{ + height: 100px; + align-self: center; +} +button{ + align-self: center; + margin-top: 20px; + width: 60%; + height: 80px; +} +``` + + +``` +/* xxx.js */ +import prompt from '@system.prompt'; +export default { + openDialog(){ + this.$element('dialogId').show() + }, + confirmClick(e) { + this.$element('dialogId').close() prompt.showToast({ message: 'Confirmed.' })}, }, show(){ prompt.showToast({duration:2000,message:'dialogShow'}) }, close(){ prompt.showToast({duration:2000,message:'dialogClose'}) }, cancel(){ prompt.showToast({duration:2000,message:'dialogCancel'}) }, +} +``` + + +![zh-cn_image_0000001163229150](figures/zh-cn_image_0000001163229150.gif)![zh-cn_image_0000001163229150](figures/zh-cn_image_0000001163229150.gif) + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> - 仅支持单个子组件。 +> +> - Dialog属性、样式均不支持动态更新。 +> +> - Dialog组件不支持focusable、click-effect属性。 + + +## 场景示例 + + +在本场景中，开发者可以通过Dialog组件实现一个日程表。弹窗在打开状态下，利用[Textarea组件](../js-reference/js-based-web-like-development-paradigm/js-components-basic-textarea.md)输入当前日程，点击确认按钮后获取当前时间并保存输入文本。最后以列表形式将各日程进行展示。 + + +``` + +
+ + {{date}} events + +
+ +
+ + + +
+ {{date}} event + {{$item.schedule}} +
+ + + +
+
+ {{date}} + New event +
+ +
+ + +
+
+ +
+``` + + +``` +/* xxx.css */ +.doc-page { + flex-direction: column; + background-color: #F1F3F5; +} +.btndiv { + width: 100%; + height: 200px; + flex-direction: column; + align-items: center; + justify-content: center; +} +.btn { + radius:60px; + font-size: 100px; + background-color: #1E90FF; +} +.schedulediv { + width: 100%; + height: 200px; + flex-direction: column; + justify-content: space-around; + padding-left: 55px; +} +.text1 { + color: #000000; + font-weight: bold; + font-size: 39px; +} +.text2 { + color: #a9a9a9; + font-size: 30px; +} +.dialogdiv { + flex-direction: column; + align-items: center; +} +.innertxt { + width: 320px; + height: 160px; + flex-direction: column; + align-items: center; + justify-content: space-around; +} +.text3 { + font-family: serif; + color: #1E90FF; + font-size: 38px; +} +.text4 { + color: #a9a9a9; + font-size: 33px; +} +.area { + width: 320px; + border-bottom: 1px solid #1E90FF; +} +.innerbtn { + width: 320px; + height: 120px; + justify-content: space-around; +} +.btntxt { + text-color: #1E90FF; +} +``` + + +``` +/* xxx.js */ +var info = null; +import prompt from '@system.prompt'; +import router from '@system.router'; +export default { + data: { + curYear:'', + curMonth:'', + curDay:'', + date:'', + schedule:'', + schedulelist:[] + }, + onInit() { + // Obtain the current date. + var date = new Date(); + this.curYear = date.getFullYear(); + this.curMonth = date.getMonth() + 1; + this.curDay = date.getDate(); + this.date = this.curYear + '-' + this.curMonth + '-' + this.curDay; + this.schedulelist = [] + }, + addschedule(e) { + this.$element('datedialog').show() + }, + canceldialog(e) { + prompt.showToast({ + message: 'Event setting canceled.' + }) + }, + getschedule(e) { + info = e.value + }, + cancelschedule(e) { + this.$element('datedialog').close() + prompt.showToast({ + message: 'Event setting canceled.' + }) + }, +// Touch OK to save the data. + setschedule(e) { + if (e.text === '') { + this.schedule = info + } else { + this.schedule = info + var addItem = {schedule: this.schedule,} + this.schedulelist.push(addItem) + } + this.$element('datedialog').close() + } +} +``` + + +![zh-cn_image_0000001163531184](figures/zh-cn_image_0000001163531184.gif) diff --git a/zh-cn/application-dev/ui/ui-js-components-form.md b/zh-cn/application-dev/ui/ui-js-components-form.md new file mode 100644 index 0000000000000000000000000000000000000000..2c1ee6edcc107b59c7a9755ff883ef36d0008864 --- /dev/null +++ b/zh-cn/application-dev/ui/ui-js-components-form.md @@ -0,0 +1,191 @@ +# Form + +Form是一个表单容器，支持容器内[Input](../js-reference/js-based-web-like-development-paradigm/js-components-basic-input.md)组件内容的提交和重置。具体用法请参考[Form API](../js-reference/js-based-web-like-development-paradigm/js-components-container-form.md)。 + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从 API Version 6 开始支持。 + + +## 创建Form组件 + +在pages/index目录下的hml文件中创建一个Form组件。 +``` + +
+
+
+
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +``` + +![zh-cn_image_0000001211069339](figures/zh-cn_image_0000001211069339.png) + + +## 实现表单缩放 + +为Form组件添加click-effect属性，实现点击表单后的缩放效果，click-effect枚举值请参考[通用属性](../js-reference/js-based-web-like-development-paradigm/js-components-common-attributes.md)。 +``` + +
+
+ +
+
+``` + + +## 设置Form样式 + + +通过为Form添加background-color和border属性，来设置表单的背景颜色和边框。 + + +``` +/* xxx.css */ +.container { + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +.formClass{ + width: 80%; + padding: 10px; + border: 1px solid #c3d3e7; +} +``` + + +![zh-cn_image_0000001208771113](figures/zh-cn_image_0000001208771113.gif) + + +## 添加响应事件 + +为Form组件添加submit和reset事件，来提交表单内容或重置表单选项。 +``` + +
+
+
+
+ + + + +
+
+ + +
+
+
+
+``` + +``` +/* xxx.js */ +import prompt from '@system.prompt'; +export default{ + onSubmit(result) { + prompt.showToast({ + message: result.value.radioGroup + }) + }, + onReset() { + prompt.showToast({ + message: 'Reset All' + }) + } +} +``` + + +![zh-cn_image_0000001163691126](figures/zh-cn_image_0000001163691126.gif) + + +## 场景示例 + +在本场景中，开发者可以选择相应选项并提交或重置数据。 + +创建[Input](../js-reference/js-based-web-like-development-paradigm/js-components-basic-input.md)组件，分别设置type属性为checkbox（多选框）和radio（单选框），再使用Form组件的onsubmit和onreset事件实现表单数据的提交与重置。 + +``` + +
+
+ + Form + +
+ Select 1 or more options +
+ + + + +
+ + Select 1 option +
+ + + + +
+ + Text box + +
+ Submit + Reset +
+
+
+
+``` + +``` +/* index.css */ +.container { + flex-direction:column; + align-items:center; + background-color:#F1F3F5; +} +.txt { + font-size:33px; + font-weight:bold; + color:darkgray; +} +label{ + font-size: 20px; +} +``` + +``` +/* xxx.js */ +import prompt from '@system.prompt'; +export default { + formSubmit() { + prompt.showToast({ + message: 'Submited.' + }) + }, + formReset() { + prompt.showToast({ + message: 'Reset.' + }) + } +} +``` + +![zh-cn_image_0000001163372646](figures/zh-cn_image_0000001163372646.gif) diff --git a/zh-cn/application-dev/ui/ui-js-components-images.md b/zh-cn/application-dev/ui/ui-js-components-images.md new file mode 100644 index 0000000000000000000000000000000000000000..66fe712fe1211ebb985f79bd9ed017feef438e1c --- /dev/null +++ b/zh-cn/application-dev/ui/ui-js-components-images.md @@ -0,0 +1,267 @@ +# Image + +Image是图片组件，用来渲染展示图片。具体用法请参考[Image API](../js-reference/js-based-web-like-development-paradigm/js-components-basic-image.md)。 + + +## 创建Image组件 + +在pages/index目录下的hml文件中创建一个Image组件。 +``` + +
+ +
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +``` + +![zh-cn_image_0000001211227617](figures/zh-cn_image_0000001211227617.png) + + +## 设置Image样式 + +通过设置width、height和object-fit属性定义图片的宽、高和缩放样式。 + + +``` + +
+ +
+``` + + +``` +/* xxx.css */ +.container { + flex-direction: column; + align-items: center; + justify-content: center; +background-color:#F1F3F5; +} +image{ + width: 80%; height: 500px; + border: 5px solid saddlebrown; + border-radius: 20px; + object-fit: contain; + match-text-direction:true; + object-position: center center; +} +``` + + +![zh-cn_image_0000001163532072](figures/zh-cn_image_0000001163532072.png) + + +## 显示多张图 + +定义for循环展示多张图片，同时定义option选择图片的展示方式，选择方式请参考object-fit类型说明。 +``` + +
+ + + +
+ image{{$idx}} + content +
+ + +
+ +
+
+``` + +``` +/* xxx.css */ +.page-container { + flex-direction:column; + background-color:#F1F3F5; +} +.text-container { + width: 300px; + flex-direction: column; + justify-content: center; +} +.item-container { + flex-direction: row; + align-items: center; + justify-content:center; + margin-top:200px; +} +.testimage { + width: 175px; + height: 220px; + border: 5px solid #add8e6; + padding: 5px 5px 5px 5px; + margin: 5px 5px 5px 5px; +} +.testicon { + width: 50px; + height: 50px; + margin-left: 150px; + border-radius: 25px; + background-color: orange; +} +``` + +``` +/* index.js */ +export default { + data: { + url:['common/images/bg-tv.jpg','common/images/img2.jpg'], + list:[0,1], + fit:'cover', + fit_list:['cover','contain','fill','none','scale-down'] + }, + setfit(e) { + this.fit = e.newValue + } +} +``` + + +![zh-cn_image_0000001208787005](figures/zh-cn_image_0000001208787005.gif) + + +## 加载图片 + +图片成功加载时触发complete事件，返回加载的图源尺寸。加载失败则触发error事件，打印图片加载失败。 + +``` + +
+
+ +
+
+ +
+
+``` + +``` +/* xxx.css */ +.container{ + flex-direction: column; + justify-content: center; + align-self: center; + background-color: #F1F3F5; +} +.container div{ + margin-left: 10%; + width: 80%; + height: 300px; + margin-bottom: 40px; +} +``` + +``` +/* index.js */ +import prompt from '@system.prompt'; +export default { + imageComplete(i,e){ + prompt.showToast({ + message: "Image "+i+"'s width"+ e.width+"----Image "+i+"'s height"+e.height, + duration: 3000, + }) + }, + imageError(i,e){ + setTimeout(()=>{ + prompt.showToast({ + message: "Failed to load image "+i+".", + duration: 3000, + }) + },3000) + } +} +``` + +![zh-cn_image_0000001210358571](figures/zh-cn_image_0000001210358571.gif) + + +## 场景示例 + +在本场景中，开发者长按图片后将慢慢隐藏图片，当完全隐藏后再重新显示原始图片。定时器setInterval每隔一段时间改变图片透明度,实现慢慢隐藏的效果，当透明度为0时清除定时器，设置透明度为1。 +``` + +
+
+
+ +
+
+ Touch and hold the image +
+
+
+``` + +``` +/* xxx.css */ +.page-container { + flex-direction:column; + align-self: center; + justify-content: center; + background-color:#F1F3F5; +} +.content{ + flex-direction:column; +} +.image-container { + width: 100%; + height: 300px; + align-items: center; + justify-content: center; +} +.text-container { + margin-top:50px; + width: 100%; + height: 60px; + flex-direction: row; + justify-content: space-between; +} +.testimage { + width: 100%; height: 400px; object-fit: scale-down; border-radius: 20px;} +``` + +``` +/* index.js */ +import prompt from '@system.prompt'; +export default { + data: { + testuri: 'common/images/bg-tv.jpg', + imageopacity:1, + timer: null + }, + changeopacity: function () { + prompt.showToast({ + message: 'Touch and hold the image.' + }) + var opval = this.imageopacity * 20 + clearInterval(this.timer); + this.timer = setInterval(()=>{ + opval--; + this.imageopacity = opval / 20 + if (opval===0) { + clearInterval(this.timer) + this.imageopacity = 1 + } + },100); + } +} +``` + +![zh-cn_image_0000001208892929](figures/zh-cn_image_0000001208892929.gif) diff --git a/zh-cn/application-dev/ui/ui-js-components-input.md b/zh-cn/application-dev/ui/ui-js-components-input.md new file mode 100644 index 0000000000000000000000000000000000000000..57b3a57e80a394d778a49f46f264be26afbc9ce1 --- /dev/null +++ b/zh-cn/application-dev/ui/ui-js-components-input.md @@ -0,0 +1,309 @@ +# Input + +Input是交互式组件，用于接收用户数据。其类型可设置为日期、多选框和按钮等。具体用法请参考[Input API](../js-reference/js-based-web-like-development-paradigm/js-components-basic-input.md)。 + + +## 创建Input组件 + +在pages/index目录下的hml文件中创建一个Input组件。 + +``` + +
+ Please enter the content +
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +``` + +![zh-cn_image_0000001165344988](figures/zh-cn_image_0000001165344988.png) + + +## 设置Input类型 + +通过设置type属性来定义Input类型，如将Input设置为button、date等。 + +``` + +
+
+ +
+ this is a dialog +
+ + +
+
+ +
+
+ +
+
+``` + +``` +/* xxx.css */ +.container { + align-items: center; + flex-direction: column; + justify-content: center; + background-color: #F1F3F5 ; +} +.div-button { + flex-direction: column; + align-items: center; +} +.dialogClass{ + width:80%; + height: 200px; +} +.button { + margin-top: 30px; + width: 50%; +} +.content{ + width: 90%; + height: 150px; + align-items: center; + justify-content: center; +} +.flex { + width: 80%; + margin-bottom:40px; +} +``` + +``` +// xxx.js +export default { + btnclick(){ + this.$element('dialogId').show() + }, +} +``` + + +![zh-cn_image_0000001163375178](figures/zh-cn_image_0000001163375178.gif) + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> - 智能穿戴仅支Input类型设置为button、radio、checkbox。 +> +> - 仅当Input类型为checkbox和radio时，当前组件是否选中的属性checked才生效，默认值为false。 + + +## 事件绑定 + +向Input组件添加search和translate事件。 +``` + +
+ + Enter text and then touch and hold what you've entered + + + +
+``` + +``` +/* xxx.css */ +.content { + width: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +.input { + margin-top: 50px; + width: 60%; + placeholder-color: gray; +} +text{ + width:100%; + font-size:25px; + text-align:center; +} +``` + +``` +// xxx.js +import prompt from '@system.prompt' +export default { + search(e){ + prompt.showToast({ + message: e.value, + duration: 3000, + }); + }, + translate(e){ + prompt.showToast({ + message: e.value, + duration: 3000, + }); + } +} +``` + +![zh-cn_image_0000001208787965](figures/zh-cn_image_0000001208787965.gif) + + +## 设置输入提示 + +通过对Input组件添加showError方法来提示输入的错误原因。 + +``` + +
+ + + +
+``` + +``` +/* xxx.css */ +.content { + width: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +.input { + width: 80%; + placeholder-color: gray; +} +.button { + width: 30%; + margin-top: 50px; +} +``` + +``` +// xxx.js +import prompt from '@system.prompt' + export default { + data:{ + value:'', + }, + change(e){ + this.value = e.value; + prompt.showToast({ + message: "value: " + this.value, + duration: 3000, + }); + }, + buttonClick(e){ + if(this.value.length > 6){ + this.$element("input").showError({ error: 'Up to 6 characters are allowed.' }); + }else if(this.value.length == 0){ + this.$element("input").showError({ error:this.value + 'This field cannot be left empty.' }); + }else{ + prompt.showToast({ + message: "success " + }); + } + }, + } +``` + +![zh-cn_image_0000001208691071](figures/zh-cn_image_0000001208691071.gif) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> - 该方法在Input类型为text、email、date、time、number和password时生效。 + + +## 场景示例 + + +根据场景选择不同类型的Input输入框，完成信息录入。 + + +``` + +
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+``` + + +``` +/* xxx.css */ +.container { + flex-direction: column; + background-color: #F1F3F5; +} +.label-item { + align-items: center; + border-bottom-width: 1px;border-color: #dddddd; +} +.lab { + width: 400px;} +label { + padding: 30px; + font-size: 30px; + width: 320px; + font-family: serif; + color: #9370d8; + font-weight: bold; +} +.flex { + flex: 1; +} +.textareaPadding { + padding-left: 100px; +} +``` + + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + data: { + }, + onInit() { + }, + btnclick(e) { + prompt.showToast({ + message:'Saved successfully!' + }) + } +} +``` + + +![zh-cn_image_0000001162586456](figures/zh-cn_image_0000001162586456.gif) diff --git a/zh-cn/application-dev/ui/ui-js-components-list.md b/zh-cn/application-dev/ui/ui-js-components-list.md new file mode 100644 index 0000000000000000000000000000000000000000..37951eff8941b04a4858b62fb44afaefec0a3715 --- /dev/null +++ b/zh-cn/application-dev/ui/ui-js-components-list.md @@ -0,0 +1,279 @@ +# List + +List是用来显示列表的组件，包含一系列相同宽度的列表项，适合连续、多行地呈现同类数据。具体用法请参考[List API](../js-reference/js-based-web-like-development-paradigm/js-components-container-list.md)。 + + +## 创建List组件 + +在pages/index目录下的hml文件中创建一个List组件。 + +``` +
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + align-items: center; + background-color: #F1F3F5; +} +.listItem{ + height: 20%; + background-color:#d2e0e0; + margin-top: 20px; +} +``` + +![zh-cn_image_0000001211071477](figures/zh-cn_image_0000001211071477.png) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> - <list-item-group>是<list>的子组件，实现列表分组功能，不能再嵌套<list>，可以嵌套<list-item>。 +> +> - <list-item>是<list>的子组件，展示列表的具体项。 + + +## 添加滚动条 + +设置scrollbar属性为on即可在屏幕右侧生成滚动条，实现长列表或者屏幕滚动等效果。 + +``` +
+``` + +``` +/* index.css */ +.container { + flex-direction: column; + background-color: #F1F3F5; +} +.listItem{ + height: 20%; + background-color:#d2e0e0; + margin-top: 20px; +} +.listCss{ + height: 100%; + scrollbar-color: #8e8b8b; + scrollbar-width: 50px; +} +``` + +![zh-cn_image_0000001163212980](figures/zh-cn_image_0000001163212980.gif) + + +## 添加侧边索引栏 + +设置indexer属性为自定义索引时，索引栏会显示在列表右边界处，indexer属性设置为true,默认为字母索引表。 + +``` +
+``` + +``` +/* index.css */.container{ flex-direction: column; + background-color: #F1F3F5; + } .listCss{ height: 100%; flex-direction: column; columns: 1} +``` + +![zh-cn_image_0000001166432552](figures/zh-cn_image_0000001166432552.png) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> - indexer属性生效需要flex-direction属性配合设置为column，且columns属性设置为1。 +> +> - indexer可以自定义索引表，自定义时"\#"必须要存在。 + + +## 实现列表折叠和展开 + +为List组件添加groupcollapse和groupexpand事件实现列表的折叠和展开。 + +``` + +
+ + + +
+ One---{{listgroup.value}} +
+ + +
+ Primary---{{listgroup.value}} +
+ + + +
+``` + +``` +/* index.css */ +.doc-page { + flex-direction: column; + background-color: #F1F3F5; +} +list-item{ +margin-top:30px; +} +.top-list-item { + width:100%; + background-color:#D4F2E7; +} +.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 <= 2; i++) { + var dataItem = { + value: 'GROUP' + i, + }; + this.list.push(dataItem); + } + }, + collapse(e) { + prompt.showToast({ + message: 'Close ' + e.groupid + }) + }, + expand(e) { + prompt.showToast({ + message: 'Open ' + e.groupid + }) + } +} +``` + +![zh-cn_image_0000001162911958](figures/zh-cn_image_0000001162911958.gif) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> - groupcollapse和groupexpand事件仅支持list-item-group组件使用。 + + +## 场景示例 + + +在本场景中，开发者可以根据字母索引表查找对应联系人。 + + +``` + +``` + + +``` +
+ + Contacts + + + +
+
+ {{$item.name}} + 18888888888 +
+
+ + +
+ Total: 10 +
+ + +
+``` + + +``` +/* index.css */ +.doc-page { + flex-direction: column; + background-color: #F1F3F5; +} +.list { + width: 100%; + height: 100%; +} +.item { + height: 120px; + padding-left: 10%; + border-top: 1px solid #dcdcdc; +} +.name { + color: #000000; + font-size: 39px; +} +.phone { + color: black; + font-size: 25px; +} +.container { + flex-direction: row; + align-items: center; +} +.in-container { + flex-direction: column; + justify-content: space-around; +} +``` + + +``` +// xxx.js +export default { + data: { + namelist:[{ + name: 'Zoey', + section:'Z' + },{ + name: 'Quin', + section:'Q' + },{ + name:'Sam', + section:'S' + },{ + name:'Leo', + section:'L' + },{ + name:'Zach', + section:'Z' + },{ + name:'Wade', + section:'W' + },{ + name:'Zoe', + section:'Z' + },{ + name:'Warren', + section:'W' + },{ + name:'Kyle', + section:'K' + },{ + name:'Zaneta', + section:'Z' + }] + }, + onInit() { + } + } +``` + + +![zh-cn_image_0000001208693047](figures/zh-cn_image_0000001208693047.gif) diff --git a/zh-cn/application-dev/ui/ui-js-components-picker.md b/zh-cn/application-dev/ui/ui-js-components-picker.md new file mode 100644 index 0000000000000000000000000000000000000000..7c6803633183f2fc0641413d8222c622fe8d5c8f --- /dev/null +++ b/zh-cn/application-dev/ui/ui-js-components-picker.md @@ -0,0 +1,292 @@ +# Picker + +Picker是滑动选择器组件，类型支持普通选择器、日期选择器、时间选择器、时间日期选择器和多列文本选择器。具体用法请参考[Picker API](../js-reference/js-based-web-like-development-paradigm/js-components-basic-picker.md)。 + + +## 创建Picker组件 + +在pages/index目录下的hml文件中创建一个Picker组件。 + +``` + +
+ picker +
+``` + +``` +/* index.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +``` + +![zh-cn_image_0000001210951541](figures/zh-cn_image_0000001210951541.gif) + + +## 设置Picker类型 + +通过设置Picker的type属性来选择滑动选择器类型，如定义Picker为日期选择器。 + +``` + +
+ + +
+``` + +``` +/* index.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +.pickertext{ + margin-bottom: 30px; +} +``` + +``` +// xxx.js +export default { + data: { + rangetext:['15', "20", "25"], + textvalue:'Select text', + datevalue:'Select date', + } +} +``` + +![zh-cn_image_0000001163515416](figures/zh-cn_image_0000001163515416.gif) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> - 普通选择器设置取值范围时，需要使用数据绑定的方式。 +> +> - 日期选择器的lunarswitch属性只支持手机和平板设备。 + + +## 设置时间展现格式 + +Picker的hours属性定义时间的展现格式，可选类型有12小时制和24小时制。 + +``` + +
+ + +
+``` + +``` +/* index.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +.pickertime { + margin-bottom:50px; + width: 300px; + height: 50px; +} +``` + +![zh-cn_image_0000001163212630](figures/zh-cn_image_0000001163212630.gif) + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> - hours属性为12：按照12小时制显示，用上午和下午进行区分； +> +> - hours属性为24：按照24小时制显示。 + + +## 添加响应事件 + +对Picker添加change和cancel事件，来对选择的内容进行确定和取消。 + +``` + +
+ +
+``` + +``` +/* index.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +.pickermuitl { + margin-bottom:20px; + width: 600px; + height: 50px; + font-size: 25px; + letter-spacing:15px; +} +``` + +``` +// xxx.js +import prompt from '@system.prompt'; +export default { + data: { + multitext:[["a", "b", "c"], ["e", "f", "g"], ["h", "i"]], + multitextvalue:'Select multi-line text', + multitextselect:[0,0,0], + }, + multitextonchange(e) { + this.multitextvalue=e.newValue; + prompt.showToast({ message:"Multi-column text changed to:" + e.newValue }) + }, + multitextoncancel() { + prompt.showToast({ message:"multitextoncancel" }) + }, +} +``` + +![zh-cn_image_0000001163372620](figures/zh-cn_image_0000001163372620.gif) + + +## 场景示例 + + +在本场景中，开发者可以自定义填写当前的健康情况来进行打卡。 + + +``` + +
+ Health check-in +
+ Office: + +
+ +
+ Office hours: + +
+ +
+ Having fever or cold symptoms + +
+ +
+ Close contact with someone with COVID-19 + +
+
+ +
+
+``` + + +``` +/* index.css */ +.doc-page { + flex-direction: column; + background-color: #F1F3F5; +} +.title { + margin-top: 30px; + margin-bottom: 30px; + margin-left: 50px; + font-weight: bold; + color: #0000ff; + font-size: 38px; +} +.out-container { + flex-direction: column; + align-items: center; +} +.pick { + width: 80%; + height: 76px; + border: 1px solid #0000ff; + border-radius: 20px; + padding-left: 12px; +} +.txt { + width: 80%; + font-size: 18px; + text-align: left; + margin-bottom: 12px; + margin-left: 12px; +} +.dvd { + margin-top: 30px; + margin-bottom: 30px; + margin-left: 80px; + margin-right: 80px; + color: #6495ED; + stroke-width: 6px; +} +``` + + +``` +// xxx.js +import pmt from '@system.prompt' +export default { + data: { + yorn1:'No', + yorn2:'No', + pos:'Home', + yesno:['Yes', 'No'], + posarr:['Home', 'Company'], + datevalue:'Select time', + datetimeselect:'2012-5-6-11-25', + dateselect:'2021-9-17', + showbuild:true + }, + onInit() { + }, + isFever(e) { + this.yorn1 = e.newValue + }, + isTouch(e) { + this.yorn2 = e.newValue + }, + setPos(e) { + this.pos = e.newValue + if (e.newValue === 'Non-research center') { + this.showbuild = false + } else { + this.showbuild = true + } + }, + setbuild(e) { + this.build = e.newValue + }, + dateonchange(e) { + this.datevalue = e.year + "-" + e.month + "-" + e.day; + pmt.showToast({ message:"date:"+e.year+"-"+e.month+"-"+e.day }) }, + datetimeonchange(e) { + this.datetimevalue=e.year+"-"+e.month+"-"+e.day+" "+e.hour+":"+e.minute; + pmt.showToast({ message:"Time:"+e.month+"-"+e.day+" "+e.hour+":"+e.minute }) + }, + showtoast() { + pmt.showToast({ + message: 'Submitted.', + duration: 2000, + gravity: 'center' + }) + } +} +``` + + +![zh-cn_image_0000001208703849](figures/zh-cn_image_0000001208703849.gif) diff --git a/zh-cn/application-dev/ui/ui-js-components-stepper.md b/zh-cn/application-dev/ui/ui-js-components-stepper.md new file mode 100644 index 0000000000000000000000000000000000000000..a27263135a4f093a9cd3134878971797299bb019 --- /dev/null +++ b/zh-cn/application-dev/ui/ui-js-components-stepper.md @@ -0,0 +1,343 @@ +# Stepper + +当一个任务需要多个步骤时，可以使用stepper组件展示当前进展。具体用法请参考[Stepper API](../js-reference/js-based-web-like-development-paradigm/js-components-container-stepper.md)。 + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 从API Version 5 开始支持。 + + +## 创建Stepper组件 + +在pages/index目录下的hml文件中创建一个Stepper组件。 + +``` +
Step 1 Step 2
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #F1F3F5; +} +text{ + width: 100%; + height: 100%; + text-align: center; +} +``` + +![zh-cn_image_0000001210951235](figures/zh-cn_image_0000001210951235.gif) + + +## 设置index属性 + +页面默认显示索引值为index的步骤。 + +``` +
stepper-item1 stepper-item2 stepper-item3
+``` + +``` +/* index.css */ +.container { + flex-direction: column; + background-color:#F1F3F5; +} +text{ + width: 100%; + height: 100%; + text-align: center; +} +``` + +![zh-cn_image_0000001208892613](figures/zh-cn_image_0000001208892613.gif) + +通过设置label属性，自定义stepper-item的提示按钮。 + +``` +
stepper-item1 stepper-item2 stepper-item3 stepper-item4
+``` + +``` +/* index.css */ +.container { + flex-direction: column; + background-color:#F1F3F5; +} +text{ + width: 100%; + height: 100%; + text-align: center; +} +``` + +``` +/* index.js */ +export default { + data: { + label_1:{ nextLabel: 'NEXT', status: 'normal' }, + label_2:{ + prevLabel: 'BACK', + nextLabel: 'NEXT', + status: 'normal' + }, + label_3:{ + prevLabel: 'BACK', + nextLabel: 'END', + status: 'disabled' + }, + }, +} +``` + +![zh-cn_image_0000001163531210](figures/zh-cn_image_0000001163531210.gif) + + +## 设置样式 + +Stepper组件默认填充父容器，通过border和background-color设置边框、背景色。 +``` +
+
+ stepper-item1 +
+
+``` + +``` +/* index.css */ +.container { + flex-direction: column; + align-items: center; + justify-content: center; + background-color:#F1F3F5; +} +.stepperContent{ + width: 300px; + height: 300px; +} +.stepperClass{ + border:1px solid silver ; background-color: white; +} +text{ + width: 100%; + height: 100%; + text-align: center; +} +``` + +![zh-cn_image_0000001163691154](figures/zh-cn_image_0000001163691154.png) + + +## 添加事件 + +Stepper分别添加finish，change，next，back，skip事件。 + +- 当change与next或back同时存在时，会先执行next或back事件再去执行change事件。 + +- 重新设置index属性值时要先清除index的值再重新设置，否则检测不到值的改变。 + +``` + +
+
+ + + stepper-item1 + + + + stepper-item2 + + + + stepper-item3 + + +
+
+``` + +``` +/* xxx.css */ +.doc-page { + flex-direction: column; + align-items: center; + justify-content: center; +} +stepper-item{ + width: 100%; + flex-direction: column; + align-self: center; + justify-content: center; +} +text{ + margin-top: 45%; + justify-content: center; + align-self: center; + margin-bottom: 50px; +} +button{ + width: 80%; + height: 60px; + margin-top: 20px; +} +``` + +``` +/* index.js */ +import prompt from '@system.prompt'; +export default { + data: { + index:0, + }, + stepperSkip(){ + this.index = null; + this.index=2; + }, + skipClick(){ + this.$element('stepperId').setNextButtonStatus({status: 'skip', label: 'SKIP'}); + }, + stepperFinish(){ + prompt.showToast({ + message: 'All Finished' + }) + }, + stepperChange(e){ + console.log("stepperChange"+e.index) + prompt.showToast({ + message: 'Previous step: '+e.prevIndex+"-------Current step:"+e.index + }) + }, + stepperNext(e){ + console.log("stepperNext"+e.index) + prompt.showToast({ + message: 'Current step:'+e.index+"-------Next step:"+e.pendingIndex + }) + var index = {pendingIndex:e.pendingIndex } + return index; + }, + stepperBack(e){ + console.log("stepperBack"+e.index) + var index = {pendingIndex: e.pendingIndex } + return index; + } +} +``` + +![zh-cn_image_0000001163547244](figures/zh-cn_image_0000001163547244.gif) + + +## 场景示例 + +在本场景中，开发者可以在界面上点击选择并实时显示选择结果，点击下一步按钮后可动态修改页面的字体颜色和字体大小。 + +用Stepper组件实现分步，再创建[Toggle](../js-reference/js-based-web-like-development-paradigm/js-components-basic-toggle.md)组件实现选择显示功能，再使用[Select](../js-reference/js-based-web-like-development-paradigm/js-components-basic-select.md)组件实现改变选中值动态修改字体颜色或大小。 + +``` +
+ + +
+ Select error types: + + {{error}} + +
+ +
+
+ + +
+ Toggle +
+ + +
+
+
+ text-color + +
+
+ font-size + +
+
+
+ + +
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + align-items: center; + justify-content: center; + background-color:#F1F3F5; +} +.dvd { + stroke-width: 8px; + color: orangered; + margin: 65px; +} +.tog{ + margin-right: 20px; + margin-top: 30px; +} +``` + +``` +/* index.js */ +import prompt from '@system.prompt'; +import router from '@system.router'; +let myset = new Set(); +export default { + data: { + error: '', + tcolor:'#FF4500', + color_list:['#FF4500','#5F9EA0','#0000FF'], + tsize: '12px', + size_list: ['12px', '30px', '8px', '50px'], + label1: { + prevLabel: 'The text on the left of the starting step is invalid.', + nextLabel: 'Toggle' + }, + label2: { + prevLabel: 'toggle', + nextLabel: 'END' + }, + togglelist1:['Program error', 'Software', 'System', 'Application'], + }, + multiTog(arg, e) { + this.error = ' ' + if (e.checked) { + myset.add(arg) + } else { + myset.delete(arg) + } + for (let item of myset) { + this.error += item + ' ' + } + }, + settcolor(e) { + this.tcolor = e.newValue + }, + settsize(e) { + this.tsize = e.newValue + } +} +``` + +![zh-cn_image_0000001163214740](figures/zh-cn_image_0000001163214740.gif) diff --git a/zh-cn/application-dev/ui/ui-js-components-text.md b/zh-cn/application-dev/ui/ui-js-components-text.md new file mode 100644 index 0000000000000000000000000000000000000000..0188a284173e07afc8e87858f3414a5db9443d9d --- /dev/null +++ b/zh-cn/application-dev/ui/ui-js-components-text.md @@ -0,0 +1,268 @@ +# Text + +Text是文本组件，用于呈现一段文本信息。具体用法请参考[Text API](../js-reference/js-based-web-like-development-paradigm/js-components-basic-text.md)。 + + +## 创建Text组件 + +在pages/index目录下的hml文件中创建一个Text组件。 + +``` + +
+ Hello World +
+``` + +``` +/* xxx.css */ +.container { + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; +} +``` + +![zh-cn_image_0000001211383427](figures/zh-cn_image_0000001211383427.png) + + +## 设置Text组件样式和属性 + +- 添加文本样式 + + +设置color、font-size、allow-scale、word-spacing、text-valign属性分别为文本添加颜色、大小、和缩放、文本之间的间距和文本在垂直方向的对齐方式。 + + +``` + +
+ + This is a passage + + This is a passage +
+``` + + +![zh-cn_image_0000001163489068](figures/zh-cn_image_0000001163489068.png) + + +![zh-cn_image_0000001173950938](figures/zh-cn_image_0000001173950938.png) + + +- 添加划线 + + +设置text-decoration和text-decoration-colo属性为文本添加划线和划线颜色，text-decoration枚举值请参考Text自有样式。 + + +``` + +
+ + This is a passage + + + This is a passage + +
+``` + + +``` +/* xxx.css */ +.container { + flex-direction: column; + align-items: center; + justify-content: center; +} +text{ +font-size: 50px; +} +``` + + +![zh-cn_image_0000001208975737](figures/zh-cn_image_0000001208975737.png) + + +![zh-cn_image_0000001219237131](figures/zh-cn_image_0000001219237131.png) + + +- 隐藏文本内容 + + +当文本内容过多而显示不全时，添加text-overflow属性将隐藏内容以省略号的形式展现。 + + +``` + +
+ + This is a passage + +
+``` + + +``` +/* xxx.css */ +.container { + flex-direction: column; + align-items: center; + background-color: #F1F3F5; + justify-content: center; +} +.text{ + width: 200px; + max-lines: 1; + text-overflow:ellipsis; +} +``` + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> - text-overflow样式需要与max-lines样式配套使用，设置了最大行数的情况下生效。 +> +> - max-lines属性设置文本最多可以展示的行数。 + + +![zh-cn_image_0000001163656706](figures/zh-cn_image_0000001163656706.png) + + +- 设置文本折行 + + +设置word-break属性对文本内容做断行处理，word-break枚举值请参考Text自有样式。 + + +``` + +
+
+ + Welcome to the world + + + Welcome to the world + +
+
+``` + + +``` +/* xxx.css */ +.container { + background-color: #F1F3F5; + flex-direction: column; + align-items: center; + justify-content: center; +} +.content{ + width: 50%; + flex-direction: column; + align-items: center; + justify-content: center; +} +.text1{ + height: 200px; + border:1px solid #1a1919; + margin-bottom: 50px; + text-align: center; + word-break: break-word; + font-size: 40px; +} +.text2{ + height: 200px; + border:1px solid #0931e8; + text-align: center; + word-break: break-all; + font-size: 40px; +} +``` + + +![zh-cn_image_0000001209033195](figures/zh-cn_image_0000001209033195.png) + + +- Text组件支持[Span](../js-reference/js-based-web-like-development-paradigm/js-components-basic-span.md)子组件 + + +``` + +
+ + This is a passage + + + This 1 is a 1 passage + +
+``` + + +![zh-cn_image_0000001163372568](figures/zh-cn_image_0000001163372568.png) + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> - 当使用Span子组件组成文本段落时，如果Span属性样式异常（例如：font-weight设置为1000），将导致文本段落显示异常。 +> +> - 在使用Span子组件时，注意Text组件内不能存在文本内容，如果存在文本内容也只会显示子组件Span里的内容。 + + +## 场景示例 + +Text组件通过数据绑定展示文本内容，Span组件通过设置show属性来实现文本内容的隐藏和显示。 + +``` + +
+
+ + {{ content }} + + +
+ + {{ content }} + + 1 + + Hide clip + +
+``` + +``` +/* xxx.css */ +.container { + align-items: center; + flex-direction: column; + justify-content: center; + background-color: #F1F3F5; +} +.title { + font-size: 26px; + text-align:center; + width: 200px; + height: 200px; +} +``` + +``` +// xxx.js +export default { + data: { + isShow:true, + content: 'Hello World' + }, + onInit(){ }, + test(e) { + this.isShow = e.checked + } +} +``` + +![zh-cn_image_0000001208636379](figures/zh-cn_image_0000001208636379.gif) diff --git a/zh-cn/application-dev/ui/ui-js-components.md b/zh-cn/application-dev/ui/ui-js-components.md new file mode 100644 index 0000000000000000000000000000000000000000..922bf9de627589d50031352f5508f1497e72901d --- /dev/null +++ b/zh-cn/application-dev/ui/ui-js-components.md @@ -0,0 +1,25 @@ +# 常见组件开发指导 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 本篇指导涉及到的示例代码，在手机端的适配屏宽为720px。 + + +- **[Text](ui-js-components-text.md)** + +- **[Input](ui-js-components-input.md)** + +- **[Button](ui-js-components-button.md)** + +- **[List](ui-js-components-list.md)** + +- **[Picker](ui-js-components-picker.md)** + +- **[Dialog](ui-js-components-dialog.md)** + +- **[Form](ui-js-components-form.md)** + +- **[Stepper](ui-js-components-stepper.md)** + +- **[Tabs](ui-js-component-tabs.md)** + +- **[Image](ui-js-components-images.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ui-js-custom-components.md b/zh-cn/application-dev/ui/ui-js-custom-components.md index 05f8bf0164f9424be192d9273f942a001d43d7f0..4cd1078b045a6651bb658593692c848b3c4bed62 100755 --- a/zh-cn/application-dev/ui/ui-js-custom-components.md +++ b/zh-cn/application-dev/ui/ui-js-custom-components.md @@ -1,6 +1,6 @@ # 自定义组件 -JS UI框架支持自定义组件，用户可根据业务需求将已有的组件进行扩展，增加自定义的私有属性和事件，封装成新的组件，方便在工程中多次调用，提高页面布局代码的可读性。具体的封装方法示例如下： +使用基于JS扩展的类Web开发范式的方舟开发框架支持自定义组件，用户可根据业务需求将已有的组件进行扩展，增加自定义的私有属性和事件，封装成新的组件，方便在工程中多次调用，提高页面布局代码的可读性。具体的封装方法示例如下： - **构建自定义组件** @@ -92,8 +92,8 @@ JS UI框架支持自定义组件，用户可根据业务需求将已有的组件 ``` -本示例中父组件通过添加自定义属性向子组件传递了名称为title的参数，子组件在props中接收。同时子组件也通过事件绑定向上传递了参数text，接收时通过e.detail获取。要绑定子组件事件，父组件事件命名必须遵循事件绑定规则。自定义组件效果如下图所示： +本示例中父组件通过添加自定义属性向子组件传递了名称为title的参数，子组件在props中接收。同时子组件也通过事件绑定向上传递了参数text，接收时通过e.detail获取。要绑定子组件事件，父组件事件命名必须遵循事件绑定规则，详见[自定义组件开发规范](../js-reference/js-based-web-like-development-paradigm/js-components-custom-basic-usage.md)。自定义组件效果如下图所示： **图1** 自定义组件的效果 -![zh-cn_image_0000001212146243](figures/zh-cn_image_0000001212146243.png) +![zh-cn_image_0000001070693737](figures/zh-cn_image_0000001070693737.png) diff --git a/zh-cn/application-dev/ui/ui-js-overview.md b/zh-cn/application-dev/ui/ui-js-overview.md index d373b1e91023fc3c59cdf9a13bbcd62dedfb0095..779d51af65eb802e42edf405376ec1256d216270 100755 --- a/zh-cn/application-dev/ui/ui-js-overview.md +++ b/zh-cn/application-dev/ui/ui-js-overview.md @@ -1,31 +1,32 @@ -# JS UI框架概述 +# 概述 -- [基础能力](#基础能力) -- [整体架构](#整体架构) +方舟开发框架是OpenHarmony UI开发框架，提供基础类、容器类、画布类等UI组件和标准CSS动画能力，支持类Web范式编程。 -JS UI框架是OpenHarmony UI开发框架，提供基础类、容器类、画布类等UI组件和标准CSS动画能力，支持类Web范式编程。 ## 基础能力 -- **类Web范式编程**
- JS UI框架采用类HTML和CSS Web编程语言作为页面布局和页面样式的开发语言，页面业务逻辑则支持ECMAScript规范的JavaScript语言。JS UI框架提供的类Web编程范式，可以让开发者避免编写UI状态切换的代码，视图配置信息更加直观。 + +- **类Web范式编程** + 采用类HTML和CSS Web编程语言作为页面布局和页面样式的开发语言，页面业务逻辑则支持ECMAScript规范的JavaScript语言。方舟开发框架提供的类Web编程范式，可以让开发者避免编写UI状态切换的代码，视图配置信息更加直观。 + ## 整体架构 -JS UI框架包括应用层（Application）、前端框架层（Framework）、引擎层（Engine）和平台适配层（Porting Layer）。 +方舟开发框架提供两种开发范式：基于JS扩展的类Web开发范式、基于TS扩展的声明式开发范式。 +使用基于JS扩展的类Web开发范式的方舟开发框架，包括应用层（Application）、前端框架层（Framework）、引擎层（Engine）和平台适配层（Porting Layer）。 -![zh-cn_image_0000001166426358](figures/zh-cn_image_0000001166426358.png) -- **Application**
- 应用层表示开发者使用JS UI框架开发的FA应用，这里的FA应用特指JS FA应用。 +![zh-cn_image_0000001117452952](figures/zh-cn_image_0000001117452952.png) -- **Framework**
+- **Application** + 应用层表示开发者开发的FA应用，这里的FA应用特指JS FA应用。 + +- **Framework** 前端框架层主要完成前端页面解析，以及提供MVVM（Model-View-ViewModel）开发模式、页面路由机制和自定义组件等能力。 -- **Engine**
+- **Engine** 引擎层主要提供动画解析、DOM（Document Object Model）树构建、布局计算、渲染命令构建与绘制、事件管理等能力。 -- **Porting Layer**
+- **Porting Layer** 适配层主要完成对平台层进行抽象，提供抽象接口，可以对接到系统平台。比如：事件对接、渲染管线对接和系统生命周期对接等。 - diff --git a/zh-cn/application-dev/ui/ui-js.md b/zh-cn/application-dev/ui/ui-js.md deleted file mode 100644 index 88a6092003a039f8510205f4dac9d34821f63d83..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/ui/ui-js.md +++ /dev/null @@ -1,9 +0,0 @@ -# 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/ui-ts-building-category-grid-layout.md b/zh-cn/application-dev/ui/ui-ts-building-category-grid-layout.md new file mode 100644 index 0000000000000000000000000000000000000000..7ee81eafcea7c313ebc71ba00fbea32b9cd6e47c --- /dev/null +++ b/zh-cn/application-dev/ui/ui-ts-building-category-grid-layout.md @@ -0,0 +1,359 @@ +# 构建食物分类Grid布局 + +健康饮食应用在主页提供给用户两种食物显示方式：列表显示和网格显示。开发者将实现通过页签切换不同食物分类的网格布局。 + + +1. 将Category枚举类型引入FoodCategoryList页面。 + ``` + import { Category, FoodData } from '../model/FoodData' + ``` + +2. 创建FoodCategoryList和FoodCategory组件，其中FoodCategoryList作为新的页面入口组件，在入口组件调用initializeOnStartup方法。 + ``` + @Component + struct FoodList { + private foodItems: FoodData[] + build() { + ...... + } + } + + @Component + struct FoodCategory { + private foodItems: FoodData[] + build() { + ...... + } + } + + @Entry + @Component + struct FoodCategoryList { + private foodItems: FoodData[] = initializeOnStartup() + build() { + ...... + } + } + ``` + +3. 在FoodCategoryList组件内创建showList成员变量，用于控制List布局和Grid布局的渲染切换。需要用到条件渲染语句if...else...。 + ``` + @Entry + @Component + struct FoodCategoryList { + private foodItems: FoodData[] = initializeOnStartup() + private showList: boolean = false + + build() { + Stack() { + if (this.showList) { + FoodList({ foodItems: this.foodItems }) + } else { + FoodCategory({ foodItems: this.foodItems }) + } + } + } + } + ``` + +4. 在页面右上角创建切换List/Grid布局的图标。设置Stack对齐方式为顶部尾部对齐TopEnd，创建Image组件，设置其点击事件，即showList取反。 + ``` + @Entry + @Component + struct FoodCategoryList { + private foodItems: FoodData[] = initializeOnStartup() + private showList: boolean = false + + build() { + Stack({ alignContent: Alignment.TopEnd }) { + if (this.showList) { + FoodList({ foodItems: this.foodItems }) + } else { + FoodCategory({ foodItems: this.foodItems }) + } + Image($r('app.media.Switch')) + .height(24) + .width(24) + .margin({ top: 15, right: 10 }) + .onClick(() => { + this.showList = !this.showList + }) + }.height('100%') + } + } + ``` + +5. 添加\@State装饰器。点击右上角的switch标签后，页面没有任何变化，这是因为showList不是有状态数据，它的改变不会触发页面的刷新。需要为其添加\@State装饰器，使其成为状态数据，它的改变会引起其所在组件的重新渲染。 + ``` + @Entry + @Component + struct FoodCategoryList { + private foodItems: FoodData[] = initializeOnStartup() + @State private showList: boolean = false + + build() { + Stack({ alignContent: Alignment.TopEnd }) { + if (this.showList) { + FoodList({ foodItems: this.foodItems }) + } else { + FoodCategory({ foodItems: this.foodItems }) + } + Image($r('app.media.Switch')) + .height(24) + .width(24) + .margin({ top: 15, right: 10 }) + .onClick(() => { + this.showList = !this.showList + }) + }.height('100%') + } + } + + ``` + + 点击切换图标，FoodList组件出现，再次点击，FoodList组件消失。 + + ![zh-cn_image_0000001170411978](figures/zh-cn_image_0000001170411978.gif) + +6. 创建显示所有食物的页签（All）。在FoodCategory组件内创建Tabs组件和其子组件TabContent，设置tabBar为All。设置TabBars的宽度为280，布局模式为Scrollable，即超过总长度后可以滑动。Tabs是一种可以通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图TabContent。 + ``` + @Component + struct FoodCategory { + private foodItems: FoodData[] + build() { + Stack() { + Tabs() { + TabContent() {}.tabBar('All') + } + .barWidth(280) + .barMode(BarMode.Scrollable) + } + } + } + ``` + + ![zh-cn_image_0000001204538065](figures/zh-cn_image_0000001204538065.png) + +7. 创建FoodGrid组件，作为TabContent的子组件。 + ``` + @Component + struct FoodGrid { + private foodItems: FoodData[] + build() {} + } + + @Component + struct FoodCategory { + private foodItems: FoodData[] + build() { + Stack() { + Tabs() { + TabContent() { + FoodGrid({ foodItems: this.foodItems }) + }.tabBar('All') + } + .barWidth(280) + .barMode(BarMode.Scrollable) + } + } + } + ``` + +8. 实现2 \* 6的网格布局（一共12个食物数据资源）。创建Grid组件，设置列数columnsTemplate('1fr 1fr')，行数rowsTemplate('1fr 1fr 1fr 1fr 1fr 1fr')，行间距和列间距rowsGap和columnsGap为8。创建Scroll组件，使其可以滑动。 + ``` + @Component + struct FoodGrid { + private foodItems: FoodData[] + build() { + Scroll() { + Grid() { + ForEach(this.foodItems, (item: FoodData) => { + GridItem() {} + }, (item: FoodData) => item.id.toString()) + } + .rowsTemplate('1fr 1fr 1fr 1fr 1fr 1fr') + .columnsTemplate('1fr 1fr') + .columnsGap(8) + .rowsGap(8) + } + .scrollBar(BarState.Off) + .padding({left: 16, right: 16}) + } + } + ``` + +9. 创建FoodGridItem组件，展示食物图片、名称和卡路里，实现其UI布局，为GridItem的子组件。每个FoodGridItem高度为184，行间距为8，设置Grid总高度为(184 + 8) \* 6 - 8 = 1144。 + ``` + @Component + struct FoodGridItem { + private foodItem: FoodData + build() { + Column() { + Row() { + Image(this.foodItem.image) + .objectFit(ImageFit.Contain) + .height(152) + .width('100%') + }.backgroundColor('#FFf1f3f5') + Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { + Text(this.foodItem.name) + .fontSize(14) + .flexGrow(1) + .padding({ left: 8 }) + Text(this.foodItem.calories + 'kcal') + .fontSize(14) + .margin({ right: 6 }) + } + .height(32) + .width('100%') + .backgroundColor('#FFe5e5e5') + } + .height(184) + .width('100%') + } + } + + @Component + struct FoodGrid { + private foodItems: FoodData[] + build() { + Scroll() { + Grid() { + ForEach(this.foodItems, (item: FoodData) => { + GridItem() { + FoodGridItem({foodItem: item}) + } + }, (item: FoodData) => item.id.toString()) + } + .rowsTemplate('1fr 1fr 1fr 1fr 1fr 1fr') + .columnsTemplate('1fr 1fr') + .columnsGap(8) + .rowsGap(8) + .height(1144) + } + .scrollBar(BarState.Off) + .padding({ left: 16, right: 16 }) + } + } + ``` + + ![zh-cn_image_0000001170167520](figures/zh-cn_image_0000001170167520.gif) + +10. 创建展示蔬菜（Category.Vegetable）、水果（Category.Fruit）、坚果（Category.Nut）、海鲜（Category.SeaFood）和甜品（Category.Dessert）分类的页签。 + ``` + @Component + struct FoodCategory { + private foodItems: FoodData[] + build() { + Stack() { + Tabs() { + TabContent() { + FoodGrid({ foodItems: this.foodItems }) + }.tabBar('All') + + TabContent() { + FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Vegetable)) }) + }.tabBar('Vegetable') + + TabContent() { + FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Fruit)) }) + }.tabBar('Fruit') + + TabContent() { + FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Nut)) }) + }.tabBar('Nut') + + TabContent() { + FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Seafood)) }) + }.tabBar('Seafood') + + TabContent() { + FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Dessert)) }) + }.tabBar('Dessert') + } + .barWidth(280) + .barMode(BarMode.Scrollable) + } + } + } + ``` + +11. 设置不同食物分类的Grid的行数和高度。因为不同分类的食物数量不同，所以不能用'1fr 1fr 1fr 1fr 1fr 1fr '常量来统一设置成6行。 + 创建gridRowTemplate和HeightValue成员变量，通过成员变量设置Grid行数和高度。 + + ``` + @Component + struct FoodGrid { + private foodItems: FoodData[] + private gridRowTemplate : string = '' + private heightValue: number + build() { + Scroll() { + Grid() { + ForEach(this.foodItems, (item: FoodData) => { + GridItem() { + FoodGridItem({foodItem: item}) + } + }, (item: FoodData) => item.id.toString()) + } + .rowsTemplate(this.gridRowTemplate) + .columnsTemplate('1fr 1fr') + .columnsGap(8) + .rowsGap(8) + .height(this.heightValue) + } + .scrollBar(BarState.Off) + .padding({left: 16, right: 16}) + } + } + ``` + + 调用aboutToAppear接口计算行数（gridRowTemplate ）和高度（heightValue）。 + + ``` + aboutToAppear() { + var rows = Math.round(this.foodItems.length / 2); + this.gridRowTemplate = '1fr '.repeat(rows); + this.heightValue = rows * 192 - 8; + } + ``` + + 自定义组件提供了两个生命周期的回调接口aboutToAppear和aboutToDisappear。aboutToAppear的执行时机在创建自定义组件后，执行自定义组件build方法之前。aboutToDisappear在自定义组件的去初始化的时机执行。 + + ![zh-cn_image_0000001215113569](figures/zh-cn_image_0000001215113569.png) + + ``` + @Component + struct FoodGrid { + private foodItems: FoodData[] + private gridRowTemplate : string = '' + private heightValue: number + + aboutToAppear() { + var rows = Math.round(this.foodItems.length / 2); + this.gridRowTemplate = '1fr '.repeat(rows); + this.heightValue = rows * 192 - 8; + } + + build() { + Scroll() { + Grid() { + ForEach(this.foodItems, (item: FoodData) => { + GridItem() { + FoodGridItem({foodItem: item}) + } + }, (item: FoodData) => item.id.toString()) + } + .rowsTemplate(this.gridRowTemplate) + .columnsTemplate('1fr 1fr') + .columnsGap(8) + .rowsGap(8) + .height(this.heightValue) + } + .scrollBar(BarState.Off) + .padding({left: 16, right: 16}) + } + } + ``` + + ![zh-cn_image_0000001170008198](figures/zh-cn_image_0000001170008198.gif) diff --git a/zh-cn/application-dev/ui/ui-ts-building-category-list-layout.md b/zh-cn/application-dev/ui/ui-ts-building-category-list-layout.md new file mode 100644 index 0000000000000000000000000000000000000000..d954bb60cb6232f806e272c946f5ee664546a59e --- /dev/null +++ b/zh-cn/application-dev/ui/ui-ts-building-category-list-layout.md @@ -0,0 +1,250 @@ +# 构建食物列表List布局 + +使用List组件和ForEach循环渲染，构建食物列表布局。 + + +1. 在pages目录新建页面FoodCategoryList.ets，将index.ets改名为FoodDetail.ets，并将其添加到config.json文件下的pages标签，位于第一序位的页面为首页。 + ``` + "js": [ + { + "pages": [ + "pages/FoodCategoryList", + "pages/FoodDetail" + ], + ] + ``` + +2. 新建FoodList组件作为页面入口组件，FoodListItem为其子组件。List组件是列表组件，适用于重复同类数据的展示，其子组件为ListItem，适用于展示列表中的单元。 + ``` + @Component + struct FoodListItem { + build() {} + } + + @Entry + @Component + struct FoodList { + build() { + List() { + ListItem() { + FoodListItem() + } + } + } + } + ``` + +3. 引入FoodData类和initializeOnStartup方法。 + ``` + import { FoodData } from '../model/FoodData' + import { initializeOnStartup } from '../model/FoodDataModels' + ``` + +4. FoodList和FoodListItem组件数值传递。在FoodList组件内创建类型为FoodData[]成员变量foodItems，调用initializeOnStartup方法为其赋值。在FoodListItem组件内创建类型为FoodData的成员变量foodItem。将父组件foodItems数组的第一个元素的foodItems[0]作为参数传递给FoodListItem。 + ``` + import { FoodData } from '../model/FoodData' + import { initializeOnStartup } from '../model/FoodDataModels' + + @Component + struct FoodListItem { + private foodItem: FoodData + build() {} + } + + @Entry + @Component + struct FoodList { + private foodItems: FoodData[] = initializeOnStartup() + build() { + List() { + ListItem() { + FoodListItem({ foodItem: this.foodItems[0] }) + } + } + } + } + ``` + +5. 声明子组件FoodListItem 的UI布局。创建Flex组件，包含食物图片缩略图，食物名称，和食物对应的卡路里。 + ``` + import { FoodData } from '../model/FoodData' + import { initializeOnStartup } from '../model/FoodDataModels' + + @Component + struct FoodListItem { + private foodItem: FoodData + build() { + Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { + Image(this.foodItem.image) + .objectFit(ImageFit.Contain) + .height(40) + .width(40) + .backgroundColor('#FFf1f3f5') + .margin({ right: 16 }) + Text(this.foodItem.name) + .fontSize(14) + .flexGrow(1) + Text(this.foodItem.calories + ' kcal') + .fontSize(14) + } + .height(64) + .margin({ right: 24, left:32 }) + } + } + + @Entry + @Component + struct FoodList { + private foodItems: FoodData[] = initializeOnStartup() + build() { + List() { + ListItem() { + FoodListItem({ foodItem: this.foodItems[0] }) + } + } + } + } + ``` + + ![zh-cn_image_0000001204776353](figures/zh-cn_image_0000001204776353.png) + +6. 创建两个FoodListItem。在List组件创建两个FoodListItem，分别给FoodListItem传递foodItems数组的第一个元素this.foodItems[0]和第二个元素foodItem: this.foodItems[1]。 + ``` + import { FoodData } from '../model/FoodData' + import { initializeOnStartup } from '../model/FoodDataModels' + + @Component + struct FoodListItem { + private foodItem: FoodData + build() { + Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { + Image(this.foodItem.image) + .objectFit(ImageFit.Contain) + .height(40) + .width(40) + .backgroundColor('#FFf1f3f5') + .margin({ right: 16 }) + Text(this.foodItem.name) + .fontSize(14) + .flexGrow(1) + Text(this.foodItem.calories + ' kcal') + .fontSize(14) + } + .height(64) + .margin({ right: 24, left:32 }) + } + } + + @Entry + @Component + struct FoodList { + private foodItems: FoodData[] = initializeOnStartup() + build() { + List() { + ListItem() { + FoodListItem({ foodItem: this.foodItems[0] }) + } + ListItem() { + FoodListItem({ foodItem: this.foodItems[1] }) + } + } + } + } + ``` + + ![zh-cn_image_0000001204537865](figures/zh-cn_image_0000001204537865.png) + +7. 单独创建每一个FoodListItem肯定是不合理的。这就需要引入ForEach循环渲染，ForEach语法如下。 + ``` + ForEach( + arr: any[], // Array to be iterated + itemGenerator: (item: any) => void, // child component generator + keyGenerator?: (item: any) => string // (optional) Unique key generator, which is recommended. + ) + ``` + + ForEach组有三个参数，第一个参数是需要被遍历的数组，第二个参数为生成子组件的lambda函数，第三个参数是键值生成器。出于性能原因，即使第三个参数是可选的，强烈建议开发者提供。keyGenerator使开发框架能够更好地识别数组更改，而不必因为item的更改重建全部节点。 + + 遍历foodItems数组循环创建ListItem组件，foodItems中每一个item都作为参数传递给FoodListItem组件。 + + ``` + ForEach(this.foodItems, item => { + ListItem() { + FoodListItem({ foodItem: item }) + } + }, item => item.id.toString()) + ``` + + 整体的代码如下。 + + ``` + import { FoodData } from '../model/FoodData' + import { initializeOnStartup } from '../model/FoodDataModels' + + @Component + struct FoodListItem { + private foodItem: FoodData + build() { + Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { + Image(this.foodItem.image) + .objectFit(ImageFit.Contain) + .height(40) + .width(40) + .backgroundColor('#FFf1f3f5') + .margin({ right: 16 }) + Text(this.foodItem.name) + .fontSize(14) + .flexGrow(1) + Text(this.foodItem.calories + ' kcal') + .fontSize(14) + } + .height(64) + .margin({ right: 24, left:32 }) + } + } + + @Entry + @Component + struct FoodList { + private foodItems: FoodData[] = initializeOnStartup() + build() { + List() { + ForEach(this.foodItems, item => { + ListItem() { + FoodListItem({ foodItem: item }) + } + }, item => item.id.toString()) + } + } + } + ``` + +8. 添加FoodList标题。 + ``` + @Entry + @Component + struct FoodList { + private foodItems: FoodData[] = initializeOnStartup() + build() { + Column() { + Flex({justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center}) { + Text('Food List') + .fontSize(20) + .margin({ left:20 }) + } + .height('7%') + .backgroundColor('#FFf1f3f5') + List() { + ForEach(this.foodItems, item => { + ListItem() { + FoodListItem({ foodItem: item }) + } + }, item => item.id.toString()) + } + .height('93%') + } + } + } + ``` + + ![zh-cn_image_0000001169678922](figures/zh-cn_image_0000001169678922.png) diff --git a/zh-cn/application-dev/ui/ui-ts-building-data-model.md b/zh-cn/application-dev/ui/ui-ts-building-data-model.md new file mode 100644 index 0000000000000000000000000000000000000000..401ba84c4072e2ccf8238acb539f9817b30d7adc --- /dev/null +++ b/zh-cn/application-dev/ui/ui-ts-building-data-model.md @@ -0,0 +1,95 @@ +# 构建食物数据模型 + +在创建视图中，我们逐一去表述食物的各个信息，如食物名称、卡路里、蛋白质、脂肪、碳水和维生素C。这样的编码形式在实际的开发中肯定是不切实际的，所以要创建食物数据模型来统一存储和管理数据。 + + +![zh-cn_image_0000001215433095](figures/zh-cn_image_0000001215433095.png) + + +1. 新建model文件夹，在model目录下创建FoodData.ets。 + ![zh-cn_image_0000001195119619](figures/zh-cn_image_0000001195119619.png) + +2. 定义食物数据的存储模型FoodData和枚举变量Category，FoodData类包含食物id、名称（name）、分类（category）、图片（image）、热量（calories）、蛋白质（protein）、脂肪（fat）、碳水（carbohydrates）和维生素C（vitaminC）属性。 + eTS语言是在ts语言的基础上的扩展，同样支持ts语法。 + + ``` + enum Category { + Fruit, + Vegetable, + Nut, + Seafood, + Dessert + } + + let NextId = 0; + class FoodData { + id: string; + name: string; + image: Resource; + category: Category; + calories: number; + protein: number; + fat: number; + carbohydrates: number; + vitaminC: number; + + constructor(name: string, image: Resource, category: Category, calories: number, protein: number, fat: number, carbohydrates: number, vitaminC: number) { + this.id = `${ NextId++ }`; + this.name = name; + this.image = image; + this.category = category; + this.calories = calories; + this.protein = protein; + this.fat = fat; + this.carbohydrates = carbohydrates; + this.vitaminC = vitaminC; + } + } + ``` + +3. 存入食物图片资源。在resources > phone > media目录下存入食物图片资源，图片名称为食物名称。 + ![zh-cn_image_0000001195117633](figures/zh-cn_image_0000001195117633.png) + +4. 创建食物资源数据。在model文件夹下创建FoodDataModels.ets，在该页面中声明食物成分数组FoodComposition。 + 以12个食物数据为例，实际开发中，开发者可以自定义更多的数据资源，当食物资源很多时，建议使用数据懒加载LazyForEach。以下营养数据均来自网络。 + + ``` + const FoodComposition: any[] = [ + { 'name': 'Tomato', 'image': $r('app.media.Tomato'), 'category': Category.Vegetable, 'calories': 17, 'protein': 0.9, 'fat': 0.2, 'carbohydrates': 3.9, 'vitaminC': 17.8 }, + { 'name': 'Walnut', 'image': $r('app.media.Walnut'), 'category': Category.Nut, 'calories': 654 , 'protein': 15, 'fat': 65, 'carbohydrates': 14, 'vitaminC': 1.3 }, + { 'name': 'Cucumber', 'image': $r('app.media.Cucumber'), 'category': Category.Vegetable, 'calories': 30, 'protein': 3, 'fat': 0, 'carbohydrates': 1.9, 'vitaminC': 2.1 }, + { 'name': 'Blueberry', 'image': $r('app.media.Blueberry'), 'category': Category.Fruit, 'calories': 57, 'protein': 0.7, 'fat': 0.3, 'carbohydrates': 14, 'vitaminC': 9.7 }, + { 'name': 'Crab', 'image': $r('app.media.Crab'), 'category': Category.Seafood, 'calories': 97, 'protein': 19, 'fat': 1.5, 'carbohydrates': 0, 'vitaminC': 7.6 }, + { 'name': 'IceCream', 'image': $r('app.media.IceCream'), 'category': Category.Dessert, 'calories': 207, 'protein': 3.5, 'fat': 11, 'carbohydrates': 24, 'vitaminC': 0.6 }, + { 'name': 'Onion', 'image': $r('app.media.Onion'), 'category': Category.Vegetable, 'calories': 39, 'protein': 1.1, 'fat': 0.1, 'carbohydrates': 9, 'vitaminC': 7.4 }, + { 'name': 'Mushroom', 'image': $r('app.media.Mushroom'), 'category': Category.Vegetable, 'calories': 22, 'protein': 3.1, 'fat': 0.3, 'carbohydrates': 3.3, 'vitaminC': 2.1 }, + { 'name': 'Kiwi', 'image': $r('app.media.Kiwi'), 'category': Category.Fruit, 'calories': 60 , 'protein': 1.1, 'fat': 0.5, 'carbohydrates': 15, 'vitaminC': 20.5 }, + { 'name': 'Pitaya', 'image': $r('app.media.Pitaya'), 'category': Category.Fruit, 'calories': 60, 'protein': 1.2, 'fat': 0, 'carbohydrates': 10, 'vitaminC': 60.9 }, + { 'name': 'Avocado', 'image': $r('app.media.Avocado'), 'category': Category.Fruit, 'calories': 160, 'protein': 2, 'fat': 15, 'carbohydrates': 9, 'vitaminC': 10 }, + { 'name': 'Strawberry', 'image': $r('app.media.Strawberry'), 'category': Category.Fruit, 'calories': 32, 'protein': 0.7, 'fat': 0.3, 'carbohydrates': 8, 'vitaminC': 58.8 } + ] + ``` + +5. 创建initializeOnStartUp方法来初始化FoodData的数组。在FoodDataModels.ets中使用了定义在FoodData.ets的FoodData和Category，所以要将FoodData.ets的FoodData类export，在FoodDataModels.ets内import FoodData和Category。 + ``` + // FoodData.ets + export enum Category { + ...... + } + export class FoodData { + ...... + } + // FoodDataModels.ets + import { Category, FoodData } from './FoodData' + + export function initializeOnStartup(): Array { + let FoodDataArray: Array = [] + FoodComposition.forEach(item => { + FoodDataArray.push(new FoodData(item.name, item.image, item.category, item.calories, item.protein, item.fat, item.carbohydrates, item.vitaminC )); + }) + return FoodDataArray; + } + ``` + + +已完成好健康饮食应用的数据资源准备，接下来将通过加载这些数据来创建食物列表页面。 diff --git a/zh-cn/application-dev/ui/ui-ts-components.md b/zh-cn/application-dev/ui/ui-ts-components.md new file mode 100644 index 0000000000000000000000000000000000000000..88c26b9eff9d12724db743192818c8c43ecab29a --- /dev/null +++ b/zh-cn/application-dev/ui/ui-ts-components.md @@ -0,0 +1,77 @@ +# 初识Component + +在自定义组件之前，需要先了解什么是[组件和装饰器](#组件和装饰器)，并进行初始化组件。然后通过[修改组件属性和构造参数](#修改组件属性和构造参数)，实现一个自定义组件。 + + +## 组件和装饰器 + +在声明式UI中，所有的页面都是由组件构成。组件的数据结构为struct，装饰器[@Component](../js-reference/ts-based-declarative-development-paradigm/ts-component-based-component.md)是组件化的标志。用@Component修饰的struct表示这个结构体有了组件化的能力。 + +自定义组件的声明方式为： + +``` +@Component +struct MyComponent {} +``` + +在IDE创建工程模板中，MyComponent就是一个可以居中显示文字的自定义组件。开发者可以在Component的build方法里描述自己的UI结构，但需要遵循Builder的接口约束。 + +``` +interface Builder { + build: () => void +} +``` + +[@Entry](../js-reference/ts-based-declarative-development-paradigm/ts-component-based-entry.md)修饰的Component表示该Component是页面的总入口，也可以理解为页面的根节点。值得注意的是，一个页面有且仅能有一个@Entry，只有被@Entry修饰的组件或者其子组件，才会在页面上显示。 + +@Component和@Entry都是基础且十分重要的装饰器。简单地理解，装饰器就是某一种修饰，给被装饰的对象赋予某一种能力，比如@Entry就是页面入口的能力，@Component就是组件化能力。 + +在了解了组件和装饰器这两个重要概念后，接下来可以开始开发健康饮食应用。 + + +## 修改组件属性和构造参数 + +开发者创建系统组件时，会显示其默认样式。开发者可以通过更改组件的属性样式来改变组件的视图显示。 + +1. 修改Text组件的fontSize属性来更改组件的字体大小，将字体大小设置为26，fontWeight字体的粗细为500。fontWeight支持两种设置方式： + 1. number类型的取值范围为100到900，默认为400，取值越大，字体越粗。 + 2. fontWeight为内置枚举类型，取值支持Lighter、Normal、Bold、Bolder。 + + 属性方法要紧随组件，通过“.”运算符连接，也可以通过链式调用的方式配置组件的多个属性。 + + ``` + @Entry + @Component + struct MyComponent { + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Text('Hello World') + .fontSize(26) + .fontWeight(500) + } + .width('100%') + .height('100%') + } + } + ``` + + ![zh-cn_image_0000001168728272](figures/zh-cn_image_0000001168728272.png) + +2. 修改Text组件的显示内容“Hello World”为“Tomato”，通过修改Text组件的构造参数来实现。 + ``` + @Entry + @Component + struct MyComponent { + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Text('Tomato') + .fontSize(26) + .fontWeight(500) + } + .width('100%') + .height('100%') + } + } + ``` + + ![zh-cn_image_0000001168888224](figures/zh-cn_image_0000001168888224.png) diff --git a/zh-cn/application-dev/ui/ui-ts-creating-project.md b/zh-cn/application-dev/ui/ui-ts-creating-project.md new file mode 100644 index 0000000000000000000000000000000000000000..df4ffbf86b46e2f46809f2f48106976e148d117c --- /dev/null +++ b/zh-cn/application-dev/ui/ui-ts-creating-project.md @@ -0,0 +1,64 @@ +# 创建声明式UI工程 + +创建工程之前，首先需要安装DevEco Studio，[下载安装教程](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/quick-start/deveco-studio-overview.md)。 + + +1. 打开DevEco Studio，点击Create Project。如果已有一个工程，则点击File>New>New project。 + ![zh-cn_image_0000001168956332](figures/zh-cn_image_0000001168956332.png) + +2. + 进入选择ability template界面，选择[Standard]Empty Ability。 + + ![zh-cn_image_0000001168059158](figures/zh-cn_image_0000001168059158.png) + +3. + 安装OpenHarmony sdk + + ![zh-cn_image_0000001213462329](figures/zh-cn_image_0000001213462329.png) + +4. 进入配置工程界面，将工程名字改为HealthyDiet，Project Type选择Application，Device Type选择Phone，Language选择eTS，选择兼容API Version 7。DevEco Studio会默认将工程保存在C盘，如果要更改工程保存位置，点击Save Location的文件夹图标，自行指定工程创建位置。配置完成后点击Finish。 + + + ![zh-cn_image_0000001167746622](figures/zh-cn_image_0000001167746622.png) + +5. 工程创建完成后，打开app.ets。 + app.ets提供了应用生命周期的接口：onCreate和onDestroy，分别在应用创建之初和应用被销毁时调用。在app.ets里可以声明全局变量，并且声明的数据和方法是整个应用共享的。 + ``` + export default { + onCreate() { + console.info('Application onCreate') + }, + onDestroy() { + console.info('Application onDestroy') + }, + } + ``` + +6. 在工程导航栏里，打开index.ets。该页面展示了当前的UI描述，声明式UI框架会自动生成一个组件化的struct，这个struct遵循Builder接口声明，在build方法里面声明当前的布局和组件。 + ``` + @Entry + @Component + struct MyComponent { + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Text('Hello World') + .fontSize(50) + .fontWeight(FontWeight.Bold) + } + .width('100%') + .height('100%') + } + } + ``` + +7. 点击右侧的Previewer按钮，打开预览窗口。可以看到在手机设备类型的预览窗口中“Hello World”居中加粗显示。 + 如果没有Previewer按钮，点击settings > SDK Manager > OpenHarmony SDK> Tools 查看是否安装了Previewer。 + + ![zh-cn_image_0000001214595111](figures/zh-cn_image_0000001214595111.png) + +8. 应用安装到手机上运行应用。将手机连接电脑，等IDE识别到物理设备后，点击Run 'entry'按钮。 + ![zh-cn_image_0000001148858818](figures/zh-cn_image_0000001148858818.png) + + 在安装之前，需要[配置应用签名](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/quick-start/configuring-openharmony-app-signature.md)，安装成功后，点击屏幕上的Run图标打开应用，可以看到居中加粗显示的“Hello World”。 + + ![zh-cn_image_0000001158896538](figures/zh-cn_image_0000001158896538.png) diff --git a/zh-cn/application-dev/ui/ui-ts-creating-simple-page.md b/zh-cn/application-dev/ui/ui-ts-creating-simple-page.md new file mode 100644 index 0000000000000000000000000000000000000000..4d52f9a847b47cfb19626f65ae9c4a68637fbe08 --- /dev/null +++ b/zh-cn/application-dev/ui/ui-ts-creating-simple-page.md @@ -0,0 +1,541 @@ +# 创建简单视图 + +在这一小节中，我们将开始食物详情页的开发，学习如何通过容器组件Stack、Flex和基本组件Image、Text，构建用户自定义组件，完成图文并茂的食物介绍。 + + +## 构建Stack布局 + +1. 创建食物名称。 + 删掉工程模板的build方法的代码，创建Stack组件，将Text组件放进Stack组件的花括号中，使其成为Stack组件的子组件。Stack组件为堆叠组件，可以包含一个或多个子组件，其特点是后一个子组件覆盖前一个子组件。 + ``` + @Entry + @Component + struct MyComponent { + build() { + Stack() { + Text('Tomato') + .fontSize(26) + .fontWeight(500) + } + } + } + ``` + + ![zh-cn_image_0000001214128687](figures/zh-cn_image_0000001214128687.png) + +2. 食物图片展示。 + 创建Image组件，指定Image组件的url，Image组件和Text组件都是必选构造参数组件。为了让Text组件在Image组件上方显示，所以要先声明Image组件。图片资源放在resources下的rawfile文件夹内，引用rawfile下资源时使用“$rawfile('filename')”的形式**，**filename为rawfile目录下的文件相对路径。当前$rawfile仅支持Image控件引用图片资源。 + ``` + @Entry + @Component + struct MyComponent { + build() { + Stack() { + Image($rawfile('Tomato.png')) + Text('Tomato') + .fontSize(26) + .fontWeight(500) + } + } + } + ``` + + ![zh-cn_image_0000001168410342](figures/zh-cn_image_0000001168410342.png) + +3. 通过资源访问图片。 + 除指定图片路径外，也可以使用引用媒体资源符$r引用资源，需要遵循resources文件夹的资源限定词的规则。右键resources文件夹，点击New>Resource Directory，选择Resource Type为Media（图片资源），选择资源限定词为Device-Phone（目前开发设备为手机）。 + + ![zh-cn_image_0000001168570318](figures/zh-cn_image_0000001168570318.png) + + 点击OK后，resources文件夹下生成phone.media文件夹。将Tomato.png放入该文件夹内。 + + ![zh-cn_image_0000001214330169](figures/zh-cn_image_0000001214330169.png) + + 就可以通过“$r('app.type.name')”的形式引用应用资源，即$r('app.media.Tomato')。 + + ``` + @Entry + @Component + struct MyComponent { + build() { + Stack() { + Image($r('app.media.Tomato')) + .objectFit(ImageFit.Contain) + .height(357) + Text('Tomato') + .fontSize(26) + .fontWeight(500) + } + } + } + ``` + +4. 设置Image宽高，并且将image的objectFit属性设置为ImageFit.Contain，即保持图片长宽比的情况下，使得图片完整地显示在边界内。 + 如果Image填满了整个屏幕，原因如下： + 1. Image没有设置宽高。 + + 2. Image的objectFit默认属性是ImageFit.Cover，即在保持长宽比的情况下放大或缩小，使其填满整个显示边界。 + + ``` + @Entry + @Component + struct MyComponent { + build() { + Stack() { + Image($r('app.media.Tomato')) + .objectFit(ImageFit.Contain) + .height(357) + Text('Tomato') + .fontSize(26) + .fontWeight(500) + } + } + } + ``` + + ![zh-cn_image_0000001214210217](figures/zh-cn_image_0000001214210217.png) + +5. 设置食物图片和名称布局。设置Stack的对齐方式为底部起始端对齐，Stack默认为居中对齐。设置Stack构造参数alignContent为Alignment.BottomStart。其中Alignment和FontWeight一样，都是框架提供的内置枚举类型。 + ``` + @Entry + @Component + struct MyComponent { + build() { + Stack({ alignContent: Alignment.BottomStart }) { + Image($r('app.media.Tomato')) + .objectFit(ImageFit.Contain) + .height(357) + Text('Tomato') + .fontSize(26) + .fontWeight(500) + } + } + } + ``` + + ![zh-cn_image_0000001168728872](figures/zh-cn_image_0000001168728872.png) + +6. 通过设置Stack的背景颜色来改变食物图片的背景颜色，设置颜色有两种方式： + 1. 通过框架提供的Color内置枚举值来设置，比如backgroundColor(Color.Red)，即设置背景颜色为红色。 + 2. string类型参数，支持的颜色格式有：rgb、rgba和HEX颜色码。比如backgroundColor('\#0000FF')，即设置背景颜色为蓝色，backgroundColor('rgb(255, 255, 255)')，即设置背景颜色为白色。 + + ``` + @Entry + @Component + struct MyComponent { + build() { + Stack({ alignContent: Alignment.BottomStart }) { + Image($r('app.media.Tomato')) + .objectFit(ImageFit.Contain) + .height(357) + Text('Tomato') + .fontSize(26) + .fontWeight(500) + } + .backgroundColor('#FFedf2f5') + } + } + ``` + + ![zh-cn_image_0000001168888822](figures/zh-cn_image_0000001168888822.png) + +7. 调整Text组件的外边距margin，使其距离左侧和底部有一定的距离。margin是简写属性，可以统一指定四个边的外边距，也可以分别指定。具体设置方式如下： + 1. 参数为Length时，即统一指定四个边的外边距，比如margin(20)，即上、右、下、左四个边的外边距都是20。 + 2. 参数为{top?: Length, right?: Length, bottom?: Length, left?:Length}，即分别指定四个边的边距，比如margin({ left: 26, bottom: 17.4 })，即左边距为26，下边距为17.4。 + + ``` + @Entry + @Component + struct MyComponent { + build() { + Stack({ alignContent: Alignment.BottomStart }) { + Image($r('app.media.Tomato')) + .objectFit(ImageFit.Contain) + .height(357) + Text('Tomato') + .fontSize(26) + .fontWeight(500) + .margin({left: 26, bottom: 17.4}) + } + .backgroundColor('#FFedf2f5') + } + } + ``` + + ![zh-cn_image_0000001213968747](figures/zh-cn_image_0000001213968747.png) + +8. 调整组件间的结构，语义化组件名称。创建页面入口组件为FoodDetail，在FoodDetail中创建Column，设置水平方向上居中对齐 alignItems(HorizontalAlign.Center)。MyComponent组件名改为FoodImageDisplay，为FoodDetail的子组件。 + Column是子组件竖直排列的容器组件，本质为线性布局，所以只能设置交叉轴方向的对齐。 + + ``` + @Component + struct FoodImageDisplay { + build() { + Stack({ alignContent: Alignment.BottomStart }) { + Image($r('app.media.Tomato')) + .objectFit(ImageFit.Contain) + Text('Tomato') + .fontSize(26) + .fontWeight(500) + .margin({ left: 26, bottom: 17.4 }) + } + .height(357) + .backgroundColor('#FFedf2f5') + } + } + + @Entry + @Component + struct FoodDetail { + build() { + Column() { + FoodImageDisplay() + } + .alignItems(HorizontalAlign.Center) + } + } + ``` + + +## 构建Flex布局 + +开发者可以使用Flex弹性布局来构建食物的食物成分表，弹性布局在本场景的优势在于可以免去多余的宽高计算，通过比例来设置不同单元格的大小，更加灵活。 + +1. 创建ContentTable组件，使其成为页面入口组件FoodDetail的子组件。 + ``` + @Component + struct FoodImageDisplay { + build() { + Stack({ alignContent: Alignment.BottomStart }) { + Image($r('app.media.Tomato')) + .objectFit(ImageFit.Contain) + .height(357) + Text('Tomato') + .fontSize(26) + .fontWeight(500) + .margin({ left: 26, bottom: 17.4 }) + } + .backgroundColor('#FFedf2f5') + } + } + + @Component + struct ContentTable { + build() {} + } + + @Entry + @Component + struct FoodDetail { + build() { + Column() { + FoodImageDisplay() + ContentTable() + } + .alignItems(HorizontalAlign.Center) + } + } + ``` + +2. 创建Flex组件展示Tomato两类成分。 + 一类是热量Calories，包含卡路里（Calories）；一类是营养成分Nutrition，包含蛋白质（Protein）、脂肪（Fat）、碳水化合物（Carbohydrates）和维生素C（VitaminC）。 + + 先创建热量这一类。创建Flex组件，高度为280，上、右、左内边距为30，包含三个Text子组件分别代表类别名（Calories），含量名称（Calories）和含量数值（17kcal）。Flex组件默认为水平排列方式。 + + 已省略FoodImageDisplay代码，只针对ContentTable进行扩展。 + + ``` + @Component + struct ContentTable { + build() { + Flex() { + Text('Calories') + .fontSize(17.4) + .fontWeight(FontWeight.Bold) + Text('Calories') + .fontSize(17.4) + Text('17kcal') + .fontSize(17.4) + } + .height(280) + .padding({ top: 30, right: 30, left: 30 }) + } + } + + @Entry + @Component + struct FoodDetail { + build() { + Column() { + FoodImageDisplay() + ContentTable() + } + .alignItems(HorizontalAlign.Center) + } + } + ``` + + ![zh-cn_image_0000001169759552](figures/zh-cn_image_0000001169759552.png) + +3. 调整布局，设置各部分占比。分类名占比（layoutWeight）为1，成分名和成分含量一共占比（layoutWeight）2。成分名和成分含量位于同一个Flex中，成分名占据所有剩余空间flexGrow(1)。 + ``` + @Component + struct FoodImageDisplay { + build() { + Stack({ alignContent: Alignment.BottomStart }) { + Image($m('Tomato.png')) + .objectFit(ImageFit.Contain) + .height(357) + Text('Tomato') + .fontSize(26) + .fontWeight(500) + .margin({ left: 26, bottom: 17.4 }) + } + .backgroundColor('#FFedf2f5') + } + } + + @Component + struct ContentTable { + build() { + Flex() { + Text('Calories') + .fontSize(17.4) + .fontWeight(FontWeight.Bold) + .layoutWeight(1) + Flex() { + Text('Calories') + .fontSize(17.4) + .flexGrow(1) + Text('17kcal') + .fontSize(17.4) + } + .layoutWeight(2) + } + .height(280) + .padding({ top: 30, right: 30, left: 30 }) + } + } + + @Entry + @Component + struct FoodDetail { + build() { + Column() { + FoodImageDisplay() + ContentTable() + } + .alignItems(HorizontalAlign.Center) + } + } + ``` + + ![zh-cn_image_0000001215079443](figures/zh-cn_image_0000001215079443.png) + +4. 仿照热量分类创建营养成分分类。营养成分部分（Nutrition）包含：蛋白质（Protein）、脂肪（Fat）、碳水化合物（Carbohydrates）和维生素C（VitaminC）四个成分，后三个成分在表格中省略分类名，用空格代替。 + 设置外层Flex为竖直排列FlexDirection.Column， 在主轴方向（竖直方向）上等距排列FlexAlign.SpaceBetween，在交叉轴方向（水平轴方向）上首部对齐排列ItemAlign.Start。 + + ``` + @Component + struct ContentTable { + build() { + Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Start }) { + Flex() { + Text('Calories') + .fontSize(17.4) + .fontWeight(FontWeight.Bold) + .layoutWeight(1) + Flex() { + Text('Calories') + .fontSize(17.4) + .flexGrow(1) + Text('17kcal') + .fontSize(17.4) + } + .layoutWeight(2) + } + Flex() { + Text('Nutrition') + .fontSize(17.4) + .fontWeight(FontWeight.Bold) + .layoutWeight(1) + Flex() { + Text('Protein') + .fontSize(17.4) + .flexGrow(1) + Text('0.9g') + .fontSize(17.4) + } + .layoutWeight(2) + } + Flex() { + Text(' ') + .fontSize(17.4) + .fontWeight(FontWeight.Bold) + .layoutWeight(1) + Flex() { + Text('Fat') + .fontSize(17.4) + .flexGrow(1) + Text('0.2g') + .fontSize(17.4) + } + .layoutWeight(2) + } + Flex() { + Text(' ') + .fontSize(17.4) + .fontWeight(FontWeight.Bold) + .layoutWeight(1) + Flex() { + Text('Carbohydrates') + .fontSize(17.4) + .flexGrow(1) + Text('3.9g') + .fontSize(17.4) + } + .layoutWeight(2) + } + Flex() { + Text(' ') + .fontSize(17.4) + .fontWeight(FontWeight.Bold) + .layoutWeight(1) + Flex() { + Text('vitaminC') + .fontSize(17.4) + .flexGrow(1) + Text('17.8mg') + .fontSize(17.4) + } + .layoutWeight(2) + } + } + .height(280) + .padding({ top: 30, right: 30, left: 30 }) + } + } + + @Entry + @Component + struct FoodDetail { + build() { + Column() { + FoodImageDisplay() + ContentTable() + } + .alignItems(HorizontalAlign.Center) + } + } + ``` + +5. 使用自定义构造函数\@Builder简化代码。可以发现，每个成分表中的成分单元其实都是一样的UI结构。 + ![zh-cn_image_0000001169599582](figures/zh-cn_image_0000001169599582.png) + + 当前对每个成分单元都进行了声明，造成了代码的重复和冗余。可以使用\@Builder来构建自定义方法，抽象出相同的UI结构声明。\@Builder修饰的方法和Component的build方法都是为了声明一些UI渲染结构，遵循一样的eTS语法。开发者可以定义一个或者多个\@Builder修饰的方法，但Component的build方法必须只有一个。 + + 在ContentTable内声明\@Builder修饰的IngredientItem方法，用于声明分类名、成分名称和成分含量UI描述。 + + ``` + @Component + struct ContentTable { + @Builder IngredientItem(title:string, colorValue: string, name: string, value: string) { + Flex() { + Text(title) + .fontSize(17.4) + .fontWeight(FontWeight.Bold) + .layoutWeight(1) + Flex({ alignItems: ItemAlign.Center }) { + Circle({width: 6, height: 6}) + .margin({right: 12}) + .fill(colorValue) + Text(name) + .fontSize(17.4) + .flexGrow(1) + Text(value) + .fontSize(17.4) + } + .layoutWeight(2) + } + } + } + ``` + + 在ContentTable的build方法内调用IngredientItem接口，需要用this去调用该Component作用域内的方法，以此来区分全局的方法调用。 + + ``` + @Component + struct ContentTable { + ...... + build() { + Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Start }) { + this.IngredientItem('Calories', 'Calories', '17kcal') + this.IngredientItem('Nutrition', 'Protein', '0.9g') + this.IngredientItem('', 'Fat', '0.2g') + this.IngredientItem('', 'Carbohydrates', '3.9g') + this.IngredientItem('', 'VitaminC', '17.8mg') + } + .height(280) + .padding({ top: 30, right: 30, left: 30 }) + } + } + ``` + + ContentTable组件整体代码如下。 + + ``` + @Component + struct ContentTable { + @Builder IngredientItem(title:string, name: string, value: string) { + Flex() { + Text(title) + .fontSize(17.4) + .fontWeight(FontWeight.Bold) + .layoutWeight(1) + Flex() { + Text(name) + .fontSize(17.4) + .flexGrow(1) + Text(value) + .fontSize(17.4) + } + .layoutWeight(2) + } + } + + build() { + Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Start }) { + this.IngredientItem('Calories', 'Calories', '17kcal') + this.IngredientItem('Nutrition', 'Protein', '0.9g') + this.IngredientItem('', 'Fat', '0.2g') + this.IngredientItem('', 'Carbohydrates', '3.9g') + this.IngredientItem('', 'VitaminC', '17.8mg') + } + .height(280) + .padding({ top: 30, right: 30, left: 30 }) + } + } + + @Entry + @Component + struct FoodDetail { + build() { + Column() { + FoodImageDisplay() + ContentTable() + } + .alignItems(HorizontalAlign.Center) + } + } + ``` + + ![zh-cn_image_0000001215199399](figures/zh-cn_image_0000001215199399.png) + +通过学习Stack布局和Flex布局已完成食物的图文展示和营养成分表，构建出第一个普通视图的食物详情页。在下一个章节中，将开发食物分类列表页，并完成食物分类列表页面和食物详情页面的跳转和数据传递，现在我们就进入下一个章节的学习吧。 + +## 相关实例 + +针对创建简单视图，有以下示例工程可供参考： + +- [eTSBuildCommonView](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSBuildCommonView) + 本示例为构建了简单页面展示食物番茄的图片和营养信息，主要为了展示简单页面的Stack布局和Flex布局。 diff --git a/zh-cn/application-dev/ui/ui-ts-developing-intro.md b/zh-cn/application-dev/ui/ui-ts-developing-intro.md new file mode 100644 index 0000000000000000000000000000000000000000..5ed7b9600a31b2889020defa5fd1d530bcc1af21 --- /dev/null +++ b/zh-cn/application-dev/ui/ui-ts-developing-intro.md @@ -0,0 +1,15 @@ +# 开发说明 + +本指导将从以下三个部分介绍构建健康饮食应用，其主要功能为查看食物的营养信息。具体信息如下： + + +1. Food Detail：[构建食物基本信息页面](../ui/ui-ts-creating-simple-page.md)。 + +2. Food Category/List：[构建食物列表和分类展示页面](../ui/ui-ts-building-data-model.md)。 + + + +从工程创建，构建普通视图开始，逐步学习学习组件、布局、动效和数据状态管理，在了解到这些知识后，开发者将有能力自主设计和开发应用。简单的学习成本，功能完备的UI开发，我们现在就开始吧。 + + +![zh-cn_image_0000001169852428](figures/zh-cn_image_0000001169852428.png) diff --git a/zh-cn/application-dev/ui/ui-ts-experiencing-declarative--u.md b/zh-cn/application-dev/ui/ui-ts-experiencing-declarative--u.md new file mode 100644 index 0000000000000000000000000000000000000000..dfabcc644cab28a592efe18f3f406d5345a9c3cd --- /dev/null +++ b/zh-cn/application-dev/ui/ui-ts-experiencing-declarative--u.md @@ -0,0 +1,8 @@ +# 体验声明式UI + + +- **[创建声明式UI工程](ui-ts-creating-project.md)** + +- **[初识Component](ui-ts-components.md)** + +- **[创建简单视图](ui-ts-creating-simple-page.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ui-ts-overview.md b/zh-cn/application-dev/ui/ui-ts-overview.md new file mode 100644 index 0000000000000000000000000000000000000000..d7809066b8ae413c45d4fc0c77743103e789ae49 --- /dev/null +++ b/zh-cn/application-dev/ui/ui-ts-overview.md @@ -0,0 +1,46 @@ +# 概述 + +基于TS扩展的声明式开发范式的方舟开发框架是为OpenHarmony平台开发极简、高性能、跨设备应用设计研发的UI开发框架，支持开发者高效的构建跨设备应用UI界面。 + + +## 基础能力 + +使用基于TS扩展的声明式开发范式的方舟开发框架，采用更接近自然语义的编程方式，让开发者可以直观地描述UI界面，不必关心框架如何实现UI绘制和渲染，实现极简高效开发。从组件、动效和状态管理三个维度来提供UI能力，还提供了系统能力接口，实现系统能力的极简调用。 + + +- **开箱即用的组件** + 框架提供丰富的系统预置组件，可以通过链式调用的方式设置系统组件的渲染效果。开发者可以组合系统组件为自定义组件，通过这种方式将页面组件化为一个个独立的UI单元，实现页面不同单元的独立创建、开发和复用，使页面具有更强的工程性。 + + +- **丰富的动效接口** + 提供svg标准的绘制图形能力，同时开放了丰富的动效接口，开发者可以通过封装的物理模型或者调用动画能力接口来实现自定义动画轨迹。 + + +- **状态与数据管理** + 状态数据管理作为基于TS扩展的声明式开发范式的特色，通过功能不同的装饰器给开发者提供了清晰的页面更新渲染流程和管道。状态管理包括UI组件状态和应用程序状态，两者协作可以使开发者完整地构建整个应用的数据更新和UI渲染。 + + +- **系统能力接口** + 使用基于TS扩展的声明式开发范式的方舟开发框架，还封装了丰富的系统能力接口，开发者可以通过简单的接口调用，实现从UI设计到系统能力调用的极简开发。 + + +## 整体架构 + + + +![zh-cn_image_0000001169532276](figures/zh-cn_image_0000001169532276.png) + +- **声明式UI前端** + 提供了UI开发范式的基础语言规范，并提供内置的UI组件、布局和动画，提供了多种状态管理机制，为应用开发者提供一系列接口支持。 + +- **语言运行时** + 选用方舟语言运行时，提供了针对UI范式语法的解析能力，提供了跨语言调用支持，提供了TS语言高性能运行环境。 + +- **声明式UI后端引擎** + 后端引擎提供了兼容不同开发范式的UI渲染管线，提供多种基础组件、布局计算、动效、交互事件，提供了状态管理和绘制能力。 + +- **渲染引擎** + 提供了高效的绘制能力，将渲染管线收集的渲染指令，绘制到屏幕能力。 + +- **平台适配层** + 提供了对系统平台的抽象接口，具备接入不同系统的能力，如系统渲染管线、生命周期调度等。 diff --git a/zh-cn/application-dev/ui/ui-ts-page-layout-connections.md b/zh-cn/application-dev/ui/ui-ts-page-layout-connections.md new file mode 100644 index 0000000000000000000000000000000000000000..48fdec658a6ef1271f586d1c3784c9b43c500ecd --- /dev/null +++ b/zh-cn/application-dev/ui/ui-ts-page-layout-connections.md @@ -0,0 +1,10 @@ +# 页面布局与连接 + + +- **[构建食物数据模型](ui-ts-building-data-model.md)** + +- **[构建食物列表List布局](ui-ts-building-category-list-layout.md)** + +- **[构建食物分类Grid布局](ui-ts-building-category-grid-layout.md)** + +- **[页面跳转与数据传递](ui-ts-page-redirection-data-transmission.md)** \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ui-ts-page-redirection-data-transmission.md b/zh-cn/application-dev/ui/ui-ts-page-redirection-data-transmission.md new file mode 100644 index 0000000000000000000000000000000000000000..e834ed7542abf5b876167b70b7455aedd38fe437 --- /dev/null +++ b/zh-cn/application-dev/ui/ui-ts-page-redirection-data-transmission.md @@ -0,0 +1,271 @@ +# 页面跳转与数据传递 + +本节将学习页面跳转和数据传递，实现： + + +1. 页面跳转：点击食物分类列表页面的食物条目后，跳转到食物详情页；点击食物详情页的返回按钮，返回到食物列表页。 + +2. 页面间数据传递：点击不同的食物条目后，FoodDetail接受前一个页面的数据，渲染对应的食物详情页。 + + +## 页面跳转 + +声明式UI范式提供了两种机制来实现页面间的跳转： + +1. 路由容器组件Navigator，包装了页面路由的能力，指定页面target后，使其包裹的子组件都具有路由能力。 + +2. 路由RouterAPI接口，通过在页面上引入router，可以调用router的各种接口，从而实现页面路由的各种操作。 + +下面我们就分别学习这两种跳转机制来实现食物分类列表页面和食物详情页的链接。 + +1. 点击FoodListItem后跳转到FoodDetail页面。在FoodListItem内创建Navigator组件，使其子组件都具有路由功能，目标页面target为'pages/FoodDetail'。 + ``` + @Component + struct FoodListItem { + private foodItem: FoodData + build() { + Navigator({ target: 'pages/FoodDetail' }) { + Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { + Image(this.foodItem.image) + .objectFit(ImageFit.Contain) + .height(40) + .width(40) + .backgroundColor('#FFf1f3f5') + .margin({ right: 16 }) + Text(this.foodItem.name) + .fontSize(14) + .flexGrow(1) + Text(this.foodItem.calories + ' kcal') + .fontSize(14) + } + .height(64) + } + .margin({ right: 24, left:32 }) + } + } + ``` + + ![zh-cn_image_0000001215318403](figures/zh-cn_image_0000001215318403.gif) + +2. 点击FoodGridItem后跳转到FoodDetail页面。调用页面路由router模块的push接口，将FoodDetail页面推到路由栈中，实现页面跳转。使用router路由API接口，需要先引入router。 + ``` + import router from '@system.router' + + @Component + struct FoodGridItem { + private foodItem: FoodData + build() { + Column() { + ...... + } + .height(184) + .width('100%') + .onClick(() => { + router.push({ uri: 'pages/FoodDetail' }) + }) + } + } + ``` + + ![zh-cn_image_0000001169918548](figures/zh-cn_image_0000001169918548.gif) + +3. 在FoodDetail页面增加回到食物列表页面的图标。在resources > phone > media文件夹下存入回退图标Back.png。新建自定义组件PageTitle，包含后退的图标和Food Detail的文本，调用路由的router.back()接口，弹出路由栈最上面的页面，即返回上一级页面。 + ``` + // FoodDetail.ets + import router from '@system.router' + + @Component + struct PageTitle { + build() { + Flex({ alignItems: ItemAlign.Start }) { + Image($r('app.media.Back')) + .width(21.8) + .height(19.6) + Text('Food Detail') + .fontSize(21.8) + .margin({left: 17.4}) + } + .height(61) + .backgroundColor('#FFedf2f5') + .padding({ top: 13, bottom: 15, left: 28.3 }) + .onClick(() => { + router.back() + }) + } + } + ``` + +4. 在FoodDetail组件内创建Stack组件，包含子组件FoodImageDisplay和PageTitle子组件，设置其对齐方式为左上对齐TopStart。 + ``` + @Entry + @Component + struct FoodDetail { + build() { + Column() { + Stack( { alignContent: Alignment.TopStart }) { + FoodImageDisplay() + PageTitle() + } + ContentTable() + } + .alignItems(HorizontalAlign.Center) + } + } + ``` + + ![zh-cn_image_0000001214998349](figures/zh-cn_image_0000001214998349.png) + + +## 页面间数据传递 + +我们已经完成了FoodCategoryList页面和FoodDetail页面的跳转和回退，但是点击不同的FoodListItem/FoodGridItem，跳转的FoodDetail页面都是西红柿Tomato的详细介绍，这是因为没有构建起两个页面的数据传递，需要用到携带参数（parameter）路由。 + +1. 在FoodListItem组件的Navigator设置其params属性，params属性接受key-value的Object。 + ``` + // FoodList.ets + @Component + struct FoodListItem { + private foodItem: FoodData + build() { + Navigator({ target: 'pages/FoodDetail' }) { + ...... + } + .params({ foodData: this.foodItem }) + } + } + ``` + + FoodGridItem调用的routerAPI同样有携带参数跳转的能力，使用方法和Navigator类似。 + + ``` + router.push({ + uri: 'pages/FoodDetail', + params: { foodData: this.foodItem } + }) + ``` + +2. FoodDetail页面引入FoodData类，在FoodDetail组件内添加foodItem成员变量。 + ``` + // FoodDetail.ets + import { FoodData } from '../model/FoodData' + + @Entry + @Component + struct FoodDetail { + private foodItem: FoodData + build() { + ...... + } + } + ``` + +3. 获取foodData对应的value。调用router.getParams().foodData来获取到FoodCategoryList页面跳转来时携带的foodDate对应的数据。 + ``` + @Entry + @Component + struct FoodDetail { + private foodItem: FoodData = router.getParams().foodData + + build() { + ...... + } + } + ``` + +4. 重构FoodDetail页面的组件。在构建视图时，FoodDetail页面的食物信息都是直接声明的常量，现在要用传递来的FoodData数据来对其进行重新赋值。整体的FoodDetail.ets代码如下。 + ``` + @Component + struct PageTitle { + build() { + Flex({ alignItems: ItemAlign.Start }) { + Image($r('app.media.Back')) + .width(21.8) + .height(19.6) + Text('Food Detail') + .fontSize(21.8) + .margin({left: 17.4}) + } + .height(61) + .backgroundColor('#FFedf2f5') + .padding({ top: 13, bottom: 15, left: 28.3 }) + .onClick(() => { + router.back() + }) + } + } + + @Component + struct FoodImageDisplay { + private foodItem: FoodData + build() { + Stack({ alignContent: Alignment.BottomStart }) { + Image(this.foodItem.image) + .objectFit(ImageFit.Contain) + Text(this.foodItem.name) + .fontSize(26) + .fontWeight(500) + .margin({ left: 26, bottom: 17.4 }) + } + .height(357) + .backgroundColor('#FFedf2f5') + } + } + + @Component + struct ContentTable { + private foodItem: FoodData + + @Builder IngredientItem(title:string, name: string, value: string) { + Flex() { + Text(title) + .fontSize(17.4) + .fontWeight(FontWeight.Bold) + .layoutWeight(1) + Flex() { + Text(name) + .fontSize(17.4) + .flexGrow(1) + Text(value) + .fontSize(17.4) + } + .layoutWeight(2) + } + } + + build() { + Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Start }) { + this.IngredientItem('Calories', 'Calories', this.foodItem.calories + 'kcal') + this.IngredientItem('Nutrition', 'Protein', this.foodItem.protein + 'g') + this.IngredientItem('', 'Fat', this.foodItem.fat + 'g') + this.IngredientItem('', 'Carbohydrates', this.foodItem.carbohydrates + 'g') + this.IngredientItem('', 'VitaminC', this.foodItem.vitaminC + 'mg') + } + .height(280) + .padding({ top: 30, right: 30, left: 30 }) + } + } + + @Entry + @Component + struct FoodDetail { + private foodItem: FoodData = router.getParams().foodData + + build() { + Column() { + Stack( { alignContent: Alignment.TopStart }) { + FoodImageDisplay({ foodItem: this.foodItem }) + PageTitle() + } + ContentTable({ foodItem: this.foodItem }) + } + .alignItems(HorizontalAlign.Center) + } + } + ``` + +## 相关实例 + +针对页面布局与连接，有以下示例工程可供参考： + +- [eTSDefiningPageLayoutAndConnection](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSDefiningPageLayoutAndConnection) + 本示例构建了食物分类列表页面和食物详情页，向开发者展示了List布局、Grid布局以及页面路由的基本用法。