diff --git a/zh-cn/application-dev/ability-deprecated/fa-brief.md b/zh-cn/application-dev/ability-deprecated/fa-brief.md index 3b80798ea10b4fb89e75d074f2f1eace8276534b..932b7a95385410227764bf05369a71200eca860d 100644 --- a/zh-cn/application-dev/ability-deprecated/fa-brief.md +++ b/zh-cn/application-dev/ability-deprecated/fa-brief.md @@ -49,7 +49,6 @@ FA模型的应用包的工程目录结构，请参考[OpenHarmony工程介绍](h - [`ArkTSDistributedCalc`：分布式计算器（ArkTS）（API9）（Full SDK）](https://gitee.com/openharmony/applications_app_samples/tree/master/code/SuperFeature/DistributedAppDev/ArkTSDistributedCalc) - [`DistributedDataGobang`：分布式五子棋（ArkTS）（API9）（Full SDK）](https://gitee.com/openharmony/applications_app_samples/tree/master/code/Solutions/Game/DistributedDataGobang) - [分布式新闻客户端（JS）（API8）](https://gitee.com/openharmony/codelabs/tree/master/Distributed/NewsDemo) -- [分布式手写板（ArkTS）（Full SDK）（API8）](https://gitee.com/openharmony/codelabs/tree/master/Distributed/DistributeDatabaseDrawEts) - [分布式鉴权（JS）（API8）](https://gitee.com/openharmony/codelabs/tree/master/Distributed/GameAuthOpenH) - [分布式游戏手柄（ArkTS）（Full SDK）（API8）](https://gitee.com/openharmony/codelabs/tree/master/Distributed/HandleGameApplication) - [分布式邮件（ArkTS）（Full SDK）（API8）](https://gitee.com/openharmony/codelabs/tree/master/Distributed/OHMailETS) diff --git a/zh-cn/application-dev/application-models/js-ui-widget-development.md b/zh-cn/application-dev/application-models/js-ui-widget-development.md index 24a6abb2d41705f9b7c76141f79f5ad2c1d0c2fb..cefb047cf176a22c032b21aec8a6c8b64e94ee6f 100644 --- a/zh-cn/application-dev/application-models/js-ui-widget-development.md +++ b/zh-cn/application-dev/application-models/js-ui-widget-development.md @@ -611,3 +611,11 @@ onUpdateForm(formId) { ... }; ``` + +## 相关实例 + +针对卡片开发，有以下相关实例可供参考： + +- [电影卡片（JS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/Card/MovieCard) + +- [计步器卡片（JS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/Card/StepsCardJS) \ No newline at end of file diff --git a/zh-cn/application-dev/application-models/uiability-intra-device-interaction.md b/zh-cn/application-dev/application-models/uiability-intra-device-interaction.md index 0e150a9b5b42c13d24dd5229546534d58289a3dd..7fe91ec83c72f2c5a65b17ada0b21f06cd656b8f 100644 --- a/zh-cn/application-dev/application-models/uiability-intra-device-interaction.md +++ b/zh-cn/application-dev/application-models/uiability-intra-device-interaction.md @@ -732,3 +732,10 @@ Call功能主要接口如下表所示。具体的API详见[接口文档](../refe } } ``` + +## 相关实例 + +针对UIAbility组件间交互开发，有以下相关实例可供参考： + +- [UIAbility内和UIAbility间页面的跳转（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/Ability/StageAbility) +- [UIAbility内页面间的跳转（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/Ability/PagesRouter) \ No newline at end of file diff --git a/zh-cn/application-dev/application-models/uiability-lifecycle.md b/zh-cn/application-dev/application-models/uiability-lifecycle.md index 2d82b143c2cd7deb99d7c02b415076234bf1a088..f03a76d1c623919b5f86bde6d79a7060c196565c 100644 --- a/zh-cn/application-dev/application-models/uiability-lifecycle.md +++ b/zh-cn/application-dev/application-models/uiability-lifecycle.md @@ -164,3 +164,9 @@ export default class EntryAbility extends UIAbility { } } ``` + +## 相关实例 + +针对UIAbility生命周期，有以下相关实例可供参考： + +- [UIAbility和自定义组件生命周期（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/Ability/UIAbilityLifeCycle) \ No newline at end of file diff --git a/zh-cn/application-dev/connectivity/http-request.md b/zh-cn/application-dev/connectivity/http-request.md index e15970bc6cec746a1a0c613bf323c87d7ac8f0d2..0e265620a0b49f1663e0fff28def567172731684 100644 --- a/zh-cn/application-dev/connectivity/http-request.md +++ b/zh-cn/application-dev/connectivity/http-request.md @@ -166,4 +166,5 @@ httpRequest.request2( 针对HTTP数据请求，有以下相关实例可供参考： -- [`Http:`数据请求（ArkTS）（API9））](https://gitee.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/Connectivity/Http) \ No newline at end of file +- [`Http:`数据请求（ArkTS）（API9）](https://gitee.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/Connectivity/Http) +- [新闻数据加载（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/NetworkManagement/NewsDataArkTS) \ No newline at end of file diff --git a/zh-cn/application-dev/database/data-persistence-by-preferences.md b/zh-cn/application-dev/database/data-persistence-by-preferences.md index 1db3a864a3e2d2b1a64e30880b272c3da4a2a2ec..6557cbf7eb54e38604c38d308e4ae373e761b609 100644 --- a/zh-cn/application-dev/database/data-persistence-by-preferences.md +++ b/zh-cn/application-dev/database/data-persistence-by-preferences.md @@ -228,4 +228,12 @@ - [`Preferences`：首选项（ArkTS）（API9）](https://gitee.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/DataManagement/Preferences) -- [首选项（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/Data/Preferences) \ No newline at end of file +- [首选项（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/Data/Preferences) + +- [用户首选项（JS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/Data/PreferenceJS) + +- [备忘录（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/Data/NotePadOpenHarmony) + +- [应用的首次启动（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/Data/FirstStartDemo) + +- [应用内字体大小调节（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/Data/SetAppFontSize) \ No newline at end of file diff --git a/zh-cn/application-dev/database/data-persistence-by-rdb-store.md b/zh-cn/application-dev/database/data-persistence-by-rdb-store.md index d65b8bcd3fd56837fdbb708de37f151678566aa4..cf5497044e922d5a16b61bfbffa7f24458603dc5 100644 --- a/zh-cn/application-dev/database/data-persistence-by-rdb-store.md +++ b/zh-cn/application-dev/database/data-persistence-by-rdb-store.md @@ -294,3 +294,9 @@ console.info('Succeeded in deleting RdbStore.'); }); ``` + +## 相关实例 + +针对关系型数据库的开发，有以下相关实例可供参考： + +- [`Rdb`：关系型数据库（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/Data/Rdb) \ No newline at end of file diff --git a/zh-cn/application-dev/database/data-sync-of-kv-store.md b/zh-cn/application-dev/database/data-sync-of-kv-store.md index 97291fde787013eb44a7bb5ad3332fa5564130df..3dca8f745164ab33075f9d5eae262526a4f18ce5 100644 --- a/zh-cn/application-dev/database/data-sync-of-kv-store.md +++ b/zh-cn/application-dev/database/data-sync-of-kv-store.md @@ -276,3 +276,9 @@ } }); ``` + +## 相关实例 + +针对键值型数据库开发，有以下相关实例可供参考： + +- [分布式手写板（ArkTS）（Full SDK）（API10）](https://gitee.com/openharmony/codelabs/tree/master/Distributed/DistributeDraw) \ No newline at end of file diff --git a/zh-cn/application-dev/key-features/multi-device-app-dev/page-development-intro.md b/zh-cn/application-dev/key-features/multi-device-app-dev/page-development-intro.md index ae4281531fb55cf7d3beec872f2fc635127df189..18dc61660685447bba3e030fd7b1c20b7ba567ac 100644 --- a/zh-cn/application-dev/key-features/multi-device-app-dev/page-development-intro.md +++ b/zh-cn/application-dev/key-features/multi-device-app-dev/page-development-intro.md @@ -35,4 +35,6 @@ | [应用市场首页](https://gitee.com/openharmony/applications_app_samples/tree/master/code/SuperFeature/MultiDeviceAppDev/AppMarket) | 声明式开发范式 | 本章配套的示例代码，以应用市场首页为例，演示如何使用一多能力适配多设备（或多窗口尺寸）。 | | [音乐专辑页](https://gitee.com/openharmony/applications_app_samples/tree/master/code/SuperFeature/MultiDeviceAppDev/MusicAlbum) | 声明式开发范式 | 本章配套的示例代码，以音乐专辑页为例，演示如何使用一多能力适配多设备（或多窗口尺寸）。 | | [设置应用页面](https://gitee.com/openharmony/applications_app_samples/tree/master/code/SuperFeature/MultiDeviceAppDev/Settings) | 声明式开发范式 | 本章配套的示例代码，以设置应用页面为例，演示如何使用一多能力适配多设备（或多窗口尺寸）。 | +| [音乐专辑页](https://gitee.com/openharmony/codelabs/tree/master/ExcellentCase/MultiDeviceMusic) | 声明式开发范式 | 基于自适应和响应式布局，实现一次开发、多端部署音乐专辑页面。 | +| [视频应用](https://gitee.com/openharmony/codelabs/tree/master/ExcellentCase/Multi_device_V2) | 声明式开发范式 | 基于自适应布局和响应式布局能力，实现了常见的视频播放应用的主界面。 | diff --git a/zh-cn/application-dev/media/image-decoding.md b/zh-cn/application-dev/media/image-decoding.md index 9ae21c9fdfcc668d5a952621c97ad450db7169e6..05692fd8d4a6bf9428a8f1a58a533a6057d2fe86 100644 --- a/zh-cn/application-dev/media/image-decoding.md +++ b/zh-cn/application-dev/media/image-decoding.md @@ -149,3 +149,11 @@ ```ts pixelMap.release(); ``` + +## 相关实例 + +针对图片解码开发，有以下相关实例可供参考： + +- [图片编辑（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/Media/ImageEdit) + +- [图片编辑（JS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/Media/ImageEditorTemplate) \ No newline at end of file diff --git a/zh-cn/application-dev/media/video-playback.md b/zh-cn/application-dev/media/video-playback.md index 229bbbc3e2d12f2bacc596403252c84e0b9f5e3f..e5b68e731b58cc7f6dde3211fd97623c3bf01d7b 100644 --- a/zh-cn/application-dev/media/video-playback.md +++ b/zh-cn/application-dev/media/video-playback.md @@ -259,3 +259,9 @@ export class AVPlayerDemo { } } ``` + +## 相关实例 + +针对视频播放，有以下相关实例可供参考： + +- [`VideoPlayer`：视频播放器（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/Media/VideoPlayer) \ No newline at end of file diff --git a/zh-cn/application-dev/quick-start/arkts-basic-syntax-overview.md b/zh-cn/application-dev/quick-start/arkts-basic-syntax-overview.md index 90ed21eab7d7e62d963b0836802545845d270570..8537539eeb7db25025407120c79a3fea640853d6 100644 --- a/zh-cn/application-dev/quick-start/arkts-basic-syntax-overview.md +++ b/zh-cn/application-dev/quick-start/arkts-basic-syntax-overview.md @@ -38,3 +38,11 @@ - [@Extend](arkts-extend.md)/[@Style](arkts-style.md)：扩展内置组件和封装属性样式，更灵活地组合内置组件。 - [stateStyles](arkts-statestyles.md)：多态样式，可以依据组件的内部状态的不同，设置不同样式。 + +## 相关实例 + +针对ArkTS开发和基础知识，有以下相关实例可供参考： + +- [ArkTS基础知识（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/RankingDemo) + +- [目标管理（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/TargetManagement) \ No newline at end of file diff --git a/zh-cn/application-dev/quick-start/arkts-state-management-overview.md b/zh-cn/application-dev/quick-start/arkts-state-management-overview.md index 89446412258230fe190f73e4392c1497af30338b..ed7d43741eae5df53d697e46ec447562c84ed193 100644 --- a/zh-cn/application-dev/quick-start/arkts-state-management-overview.md +++ b/zh-cn/application-dev/quick-start/arkts-state-management-overview.md @@ -127,3 +127,9 @@ ArkUI提供了多种装饰器，通过使用这些装饰器，状态变量不仅 $$运算符：给内置组件提供TS变量的引用，使得TS变量和内置组件的内部状态保持同步。 + +## 相关实例 + +针对页面状态管理，有以下相关实例可供参考： + +- [目标管理（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/TargetManagement) \ No newline at end of file diff --git a/zh-cn/application-dev/security/accesstoken-guidelines.md b/zh-cn/application-dev/security/accesstoken-guidelines.md index abc7debd43d47b6822257730ba7d80ebf72c474b..9978828971c32bfbb31135ec30028fbc1ecd8add 100644 --- a/zh-cn/application-dev/security/accesstoken-guidelines.md +++ b/zh-cn/application-dev/security/accesstoken-guidelines.md @@ -368,3 +368,5 @@ user_grant权限可以通过预授权方式请求权限。预授权方式需要 针对访问控制，有以下相关实例可供参考： - [AbilityAccessCtrl：访问权限控制（ArkTS）（Full SDK）（API9）](https://gitee.com/openharmony/applications_app_samples/tree/master/code/SystemFeature/Security/AbilityAccessCtrl) + +- [为应用添加运行时权限（ArkTS）（Full SDK）（API9）](https://gitee.com/openharmony/codelabs/tree/master/Security/AccessPermission) diff --git a/zh-cn/application-dev/security/cryptoFramework-guidelines.md b/zh-cn/application-dev/security/cryptoFramework-guidelines.md index f5c9ff5007975a0122d09143b95cbdbf64d4e8de..c0dd86eae6a9f9bd3b29192f8e195bef2f78df3b 100644 --- a/zh-cn/application-dev/security/cryptoFramework-guidelines.md +++ b/zh-cn/application-dev/security/cryptoFramework-guidelines.md @@ -2566,3 +2566,9 @@ function doRandBySync() { } } ``` + +## 相关实例 + +针对加解密算法开发，有以下相关实例可供参考： + +- [字符串加解密（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/Security/StringCipherArkTS) diff --git a/zh-cn/application-dev/ui/arkts-animation.md b/zh-cn/application-dev/ui/arkts-animation.md index 17825b822695aeef46bf2542832ea2fa57d3d461..80de9162b5467d2d7db93d55d99572e653a07a31 100644 --- a/zh-cn/application-dev/ui/arkts-animation.md +++ b/zh-cn/application-dev/ui/arkts-animation.md @@ -30,3 +30,9 @@ ArkUI中提供多种动画接口（属性动画、转场动画等），用于驱 - 动画衔接：介绍如何实现动画与动画之间、手势与动画之间的自然过渡。 - 高阶动画效果：介绍模糊、大阴影和颜色渐变等高阶效果接口的使用方法。 + +## 相关实例 + +针对动画开发，有以下相关实例可供参考： + +- [动效示例（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/Animation) \ No newline at end of file diff --git a/zh-cn/application-dev/ui/arkts-common-components-custom-dialog.md b/zh-cn/application-dev/ui/arkts-common-components-custom-dialog.md index 5c66afe75251410303e165497e339b9b340fd007..b3c5f132ab7f3d4d3b482c22ed8e59e5366c03c1 100644 --- a/zh-cn/application-dev/ui/arkts-common-components-custom-dialog.md +++ b/zh-cn/application-dev/ui/arkts-common-components-custom-dialog.md @@ -98,3 +98,13 @@ ``` ![zh-cn_image_0000001511421320](figures/zh-cn_image_0000001511421320.png) + +## 相关实例 + +针对自定义弹窗开发，有以下相关实例可供参考： + +- [`CustomDialog`：自定义弹窗（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/CustomDialog) + +- [构建多种样式弹窗（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/MultipleDialog) + +- [目标管理（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/TargetManagement) \ No newline at end of file diff --git a/zh-cn/application-dev/ui/arkts-common-components-text-input.md b/zh-cn/application-dev/ui/arkts-common-components-text-input.md index c2c3ce7cd20bdc672e009150411f776334ea1890..2d19d6a1b325c1059970369353259983999740b6 100644 --- a/zh-cn/application-dev/ui/arkts-common-components-text-input.md +++ b/zh-cn/application-dev/ui/arkts-common-components-text-input.md @@ -147,3 +147,10 @@ struct TextInputSample { ![TextInputGIF](figures/TextInputGIF.gif) + + +## 相关实例 + +针对文本输入开发，有以下相关实例可供参考： + +- [简易计算器（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/SimpleCalculator) \ No newline at end of file diff --git a/zh-cn/application-dev/ui/arkts-common-components-video-player.md b/zh-cn/application-dev/ui/arkts-common-components-video-player.md index 8613a5bd732815e63c85bbd24436c87e6954fbb3..4caf36b0bc4a8bcc30fa7d38032ce592201eba19 100644 --- a/zh-cn/application-dev/ui/arkts-common-components-video-player.md +++ b/zh-cn/application-dev/ui/arkts-common-components-video-player.md @@ -266,3 +266,9 @@ Video控制器主要用于控制视频的状态，包括播放、暂停、停止 ## 其他说明 Video组件已经封装好了视频播放的基础能力，开发者无需进行视频实例的创建，视频信息的设置获取，只需要设置数据源以及基础信息即可播放视频，相对扩展能力较弱。如果开发者想自定义视频播放，还请参考[媒体系统播放音视频](../media/video-playback.md)。 + +## 相关实例 + +针对Video组件开发，有以下相关实例可供参考： + +- [简易视频播放器（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/Media/SimpleVideo) \ No newline at end of file diff --git a/zh-cn/application-dev/ui/arkts-custom-attribute-animation.md b/zh-cn/application-dev/ui/arkts-custom-attribute-animation.md index a2970ad55c20fb957e06a5f38f910221ea6560bb..8fd7df86d06369b5ba32ed71d894d7b0665177fc 100644 --- a/zh-cn/application-dev/ui/arkts-custom-attribute-animation.md +++ b/zh-cn/application-dev/ui/arkts-custom-attribute-animation.md @@ -249,3 +249,9 @@ struct AnimatedShape { ![zh-cn_image_0000001592669598](figures/zh-cn_image_0000001592669598.gif) + +## 相关实例 + +针对自定义属性动画开发，有以下相关实例可供参考： + +- [自定义下拉刷新动画（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/AnimateRefresh) \ No newline at end of file diff --git a/zh-cn/application-dev/ui/arkts-drawing-customization-on-canvas.md b/zh-cn/application-dev/ui/arkts-drawing-customization-on-canvas.md index 49275a7e53321c5db7d5c505dcb893641a4823ad..9dd34445b3926fa31ad932bfa1209dfdec52136f 100644 --- a/zh-cn/application-dev/ui/arkts-drawing-customization-on-canvas.md +++ b/zh-cn/application-dev/ui/arkts-drawing-customization-on-canvas.md @@ -347,3 +347,5 @@ OffscreenCanvasRenderingContext2D对象和CanvasRenderingContext2D对象提供 使用画布绘制自定义图形，有以下相关实例可供参考： - [Lottie动画](https://gitee.com/openharmony/applications_app_samples/tree/master/code/Solutions/Game/Lottie) + +- [自定义抽奖转盘（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/CanvasComponent) \ No newline at end of file diff --git a/zh-cn/application-dev/ui/arkts-layout-development-create-list.md b/zh-cn/application-dev/ui/arkts-layout-development-create-list.md index 33bc0a5675d644d87300854db41236954896dbde..5e83e43a3b2dd8892fbe7238cc47d8999748dcfb 100644 --- a/zh-cn/application-dev/ui/arkts-layout-development-create-list.md +++ b/zh-cn/application-dev/ui/arkts-layout-development-create-list.md @@ -839,3 +839,11 @@ List() { - [新闻数据加载](https://gitee.com/openharmony/codelabs/tree/master/NetworkManagement/NewsDataArkTS) - [音乐专辑页](../key-features/multi-device-app-dev/music-album-page.md) + +- [常用组件和容器低代码开发示例（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/EfficiencyEnhancementKit/SuperVisualSample) + +- [二级联动（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/SecondLevelLinkage) + +- [List组件的使用之商品列表（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/List) + +- [List组件的使用之设置项（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/List_HDC) \ No newline at end of file diff --git a/zh-cn/application-dev/ui/arkts-layout-development-create-looping.md b/zh-cn/application-dev/ui/arkts-layout-development-create-looping.md index e36a2d9f941f82282bd2aece94746a1bfa35cb55..ded226bb78e5940daecf6a1cfba5ecba3b7f9e10 100644 --- a/zh-cn/application-dev/ui/arkts-layout-development-create-looping.md +++ b/zh-cn/application-dev/ui/arkts-layout-development-create-looping.md @@ -316,3 +316,11 @@ Swiper(this.swiperController) { ``` ![two](figures/two.PNG) + +## 相关实例 + +针对Swiper组件开发，有以下相关实例可供参考： + +- [电子相册（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/ElectronicAlbum) + +- [Swiper的使用（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/SwiperArkTS) \ No newline at end of file diff --git a/zh-cn/application-dev/ui/arkts-layout-development-flex-layout.md b/zh-cn/application-dev/ui/arkts-layout-development-flex-layout.md index 964a6156ffdf8e063dbd030dc55a7fa8c51f13ab..20cd4da27de0365db69a3e60a155445fbde8bb27 100644 --- a/zh-cn/application-dev/ui/arkts-layout-development-flex-layout.md +++ b/zh-cn/application-dev/ui/arkts-layout-development-flex-layout.md @@ -597,7 +597,7 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { // 容器 ![zh-cn_image_0000001562820813](figures/zh-cn_image_0000001562820813.png) -## 相关实例 +## 场景示例 使用弹性布局，可以实现子组件沿水平方向排列，两端对齐，子组件间距平分，竖直方向上子组件居中的效果。 @@ -624,3 +624,9 @@ struct FlexExample { ``` ![zh-cn_image_0000001511900452](figures/zh-cn_image_0000001511900452.png) + +## 相关实例 + +针对Flex开发，有以下相关实例可供参考： + +- [弹性布局（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/FlexLayout) \ No newline at end of file diff --git a/zh-cn/application-dev/ui/arkts-layout-development-overview.md b/zh-cn/application-dev/ui/arkts-layout-development-overview.md index 9d0ff37710b8973ac70ad7fe800f86565986f729..71cc023c671501a99cdb79ac04c00b2ae44210ca 100644 --- a/zh-cn/application-dev/ui/arkts-layout-development-overview.md +++ b/zh-cn/application-dev/ui/arkts-layout-development-overview.md @@ -77,3 +77,11 @@ position、offset等属性影响了布局容器相对于自身或其他组件的 | 缩放 | 子组件的宽高按照预设的比例，随容器组件发生变化，且变化过程中子组件的宽高比不变。 | [aspectRatio](../reference/arkui-ts/ts-universal-attributes-layout-constraints.md)属性指定当前组件的宽高比来控制缩放，公式为：aspectRatio=width/height。 | | 占比 | 占比能力是指子组件的宽高按照预设的比例，随父容器组件发生变化。 | 基于通用属性的两种实现方式：
1. 将子组件的宽高设置为父组件宽高的百分比。
2. [layoutWeight](../reference/arkui-ts/ts-universal-attributes-size.md)属性，使得子元素自适应占满剩余空间。 | | 隐藏 | 隐藏能力是指容器组件内的子组件，按照其预设的显示优先级，随容器组件尺寸变化显示或隐藏，其中相同显示优先级的子组件同时显示或隐藏。 | 通过[displayPriority](../reference/arkui-ts/ts-universal-attributes-layout-constraints.md)属性来控制页面的显示和隐藏。 | + +## 相关实例 + +针对布局开发，有以下相关实例可供参考： + +- [ArkUI常用布局容器对齐方式（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/OHLayoutAlign) + +- [常用组件与布局（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/ArkTSComponents) \ No newline at end of file diff --git a/zh-cn/application-dev/ui/arkts-shared-element-transition.md b/zh-cn/application-dev/ui/arkts-shared-element-transition.md index 998b35934c26763fce849e3b15f29894513e3429..72ef52a8dbce225354ae7966b533321a63b6f18f 100644 --- a/zh-cn/application-dev/ui/arkts-shared-element-transition.md +++ b/zh-cn/application-dev/ui/arkts-shared-element-transition.md @@ -666,3 +666,8 @@ struct AutoAchieveShareTransitionDemo { ![zh-cn_image_0000001599374166](figures/zh-cn_image_0000001599374166.gif) +## 相关实例 + +针对共享元素转场开发，有以下相关实例可供参考： + +- [电子相册（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/ElectronicAlbum) diff --git a/zh-cn/application-dev/ui/arkts-transition-overview.md b/zh-cn/application-dev/ui/arkts-transition-overview.md index 9f4f14b1b3494a8d8481f3a7843959d5c6e99578..ef85c09096048c9fad674e225b9c321468072970 100644 --- a/zh-cn/application-dev/ui/arkts-transition-overview.md +++ b/zh-cn/application-dev/ui/arkts-transition-overview.md @@ -14,3 +14,9 @@ - [模态转场](arkts-modal-transition.md)：新的界面覆盖在旧的界面之上的动画，旧的界面不消失，新的界面出现，如弹框就是典型的模态转场动画。 - [共享元素转场](arkts-shared-element-transition.md)：共享元素转场是一种界面切换时对相同或者相似的元素做的一种位置和大小匹配的过渡动画效果。 + +## 相关实例 + +针对转场动画开发，有以下相关实例可供参考“ + +- [转场动画的使用（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/TransitionAnimation) \ No newline at end of file diff --git a/zh-cn/application-dev/ui/arkts-ui-development-overview.md b/zh-cn/application-dev/ui/arkts-ui-development-overview.md index b3cbcf59db23566369583b2302c70eec773b4ee5..0246efd070d1e8086d56ba2c07279f343e02dcc6 100644 --- a/zh-cn/application-dev/ui/arkts-ui-development-overview.md +++ b/zh-cn/application-dev/ui/arkts-ui-development-overview.md @@ -92,4 +92,8 @@ 基于ArkTS的声明式开发范式，可参考以下实例： -[ArkTS组件集](https://gitee.com/openharmony/applications_app_samples/tree/master/code/UI/ArkTsComponentCollection/ComponentCollection)：组件、通用方法、动画、全局方法的集合。 \ No newline at end of file +- [ArkTS组件集](https://gitee.com/openharmony/applications_app_samples/tree/master/code/UI/ArkTsComponentCollection/ComponentCollection)：组件、通用方法、动画、全局方法的集合。 + +- [像素转换（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/PixelConversion) + +- [购物应用（ArkTS）（API8）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/ShoppingEts) \ No newline at end of file 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 4bc69bc420d03a1e3bc557381020c6269c283dbd..a81dccf88e65b1728f491bdc21e27aed71727f8c 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 @@ -25,10 +25,12 @@ 针对组件开发，有以下相关实例可供参考： -- [`JsComponentCollection`：组件集合（JS）（API9）](https://gitee.com/openharmony/applications_app_samples/tree/master/code/UI/JsComponentClollection/JsComponentCollection) - -- [`MediaCollections`：媒体管理合集（eTS）（API9）](https://gitee.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/FileManagement/MediaCollections) +- [`JsComponentCollection`：组件集合（JS）（API9）](https://gitee.com/openharmony/applications_app_samples/tree/master/code/UI/JsComponentCollection/JsComponentCollection) - [rating组件的使用（JS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/RatingApplication) - [简易视频播放器（JS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/Media/VideoOpenHarmony) + +- [购物应用（JS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/ShoppingSample) + +- [图片常见操作（JS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/Media/ImageOperation) \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ui-js-components-canvas.md b/zh-cn/application-dev/ui/ui-js-components-canvas.md index e27cea75647cec20b0ccfcdf3658fc6c07431808..f3dfef764b3cca6716fb2863c97ba720762f91b4 100644 --- a/zh-cn/application-dev/ui/ui-js-components-canvas.md +++ b/zh-cn/application-dev/ui/ui-js-components-canvas.md @@ -146,4 +146,8 @@ export default { 针对Canvas开发，有以下相关实例可供参考： -- [`JsComponentCollection`：JS组件集合（JS）（API9）](https://gitee.com/openharmony/applications_app_samples/tree/master/code/UI/JsComponentClollection/JsComponentCollection) +- [`JsComponentCollection`：JS组件集合（JS）（API9）](https://gitee.com/openharmony/applications_app_samples/tree/master/code/UI/JsComponentCollection/JsComponentCollection) + +- [自定义抽奖转盘（JS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/JSCanvasComponent) + +- [图片编辑（JS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/Media/ImageEditorTemplate) diff --git a/zh-cn/application-dev/ui/ui-js-components-images.md b/zh-cn/application-dev/ui/ui-js-components-images.md index 3758aec93133f9215b5acd8aa7ce1d0cc3ae42af..e02dc7cc4a186267130dfcfdbc32fa22cf246714 100644 --- a/zh-cn/application-dev/ui/ui-js-components-images.md +++ b/zh-cn/application-dev/ui/ui-js-components-images.md @@ -210,4 +210,4 @@ export default { - [image、image-animator组件的使用（JS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/ClickableJs) -- [图片编辑模板（JS）（API8）](https://gitee.com/openharmony/codelabs/tree/master/Media/ImageEditorTemplate) \ No newline at end of file +- [图片编辑（JS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/Media/ImageOperation) \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ui-js-components-rating.md b/zh-cn/application-dev/ui/ui-js-components-rating.md index 379359f379612cb991438eff61b102077e24983a..0d9c6c71b6ffe8a5636e70933552e99cb5e200e0 100644 --- a/zh-cn/application-dev/ui/ui-js-components-rating.md +++ b/zh-cn/application-dev/ui/ui-js-components-rating.md @@ -257,3 +257,9 @@ export default { ``` ![zh-cn_image_0000001224086459](figures/zh-cn_image_0000001224086459.gif) + +## 相关实例 + +针对rating组件的开发，有以下相关实例可供参考： + +- [rating组件的使用（JS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/RatingApplication) \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ui-js-components-slider.md b/zh-cn/application-dev/ui/ui-js-components-slider.md index 2199b47bc4dc9039f5b05a14fd78211e52e8cd91..5f23f4dd01e1259d194e1c9e4e424f60d1cc71d7 100644 --- a/zh-cn/application-dev/ui/ui-js-components-slider.md +++ b/zh-cn/application-dev/ui/ui-js-components-slider.md @@ -217,6 +217,8 @@ export default{ 针对slider开发，有以下相关实例可供参考： -- [`JsComponentCollection`：组件集合（JS）（API9）](https://gitee.com/openharmony/applications_app_samples/tree/master/code/UI/JsComponentClollection/JsComponentCollection) +- [`JsComponentCollection`：JS组件集合（JS）（API9）](https://gitee.com/openharmony/applications_app_samples/tree/master/code/UI/JsComponentCollection/JsComponentCollection) -- [slider组件的使用（JS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/SliderApplication) \ No newline at end of file +- [slider组件的使用（JS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/SliderApplication) + +- [简易视频播放器（JS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/Media/VideoOpenHarmony) \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ui-js-components-swiper.md b/zh-cn/application-dev/ui/ui-js-components-swiper.md index 3568e0be6c664d73cd8fc95d9842930c6caef204..6cd5fbbc1bc375bfd0a49b2e857b9764a783683e 100644 --- a/zh-cn/application-dev/ui/ui-js-components-swiper.md +++ b/zh-cn/application-dev/ui/ui-js-components-swiper.md @@ -370,4 +370,6 @@ export default { 针对swiper开发，有以下相关实例可供参考： -- [`JsComponentCollection`：JS组件集合（JS）（API9）](https://gitee.com/openharmony/applications_app_samples/tree/master/code/UI/JsComponentClollection/JsComponentCollection) +- [`JsComponentCollection`：JS组件集合（JS）（API9）](https://gitee.com/openharmony/applications_app_samples/tree/master/code/UI/JsComponentCollection/JsComponentCollection) + +- [简易视频播放器（JS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/Media/VideoOpenHarmony) diff --git a/zh-cn/application-dev/web/web-component-overview.md b/zh-cn/application-dev/web/web-component-overview.md index ea04af59950fcc985cefe88ab569eb51dd756ee2..737b1037302a882dbdb6004f03df16455754dc67 100644 --- a/zh-cn/application-dev/web/web-component-overview.md +++ b/zh-cn/application-dev/web/web-component-overview.md @@ -12,3 +12,11 @@ Web组件用于在应用程序中显示Web页面内容，为开发者提供页 下面通过常见使用场景举例，来具体介绍Web组件功能特性。 + +## 相关实例 + +针对Web组件开发，有以下相关实例可供参考： + +- [Web组件的使用（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/WebCookie) + +- [Web组件抽奖案例（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/WebComponent) \ No newline at end of file