!22131 master： Codelabs链接添加/更新引用：无需翻译

Merge pull request !22131 from 葛亚芳/master

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)

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

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

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

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

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

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

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

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) | 声明式开发范式 | 基于自适应布局和响应式布局能力，实现了常见的视频播放应用的主界面。 |
 

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

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

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

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

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)

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)

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

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

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

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

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

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

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

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

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

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。 |
 | 占比        | 占比能力是指子组件的宽高按照预设的比例，随父容器组件发生变化。          | 基于通用属性的两种实现方式：<br/>1.&nbsp;将子组件的宽高设置为父组件宽高的百分比。<br/>2.&nbsp;[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

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)

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

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

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

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)

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

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

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

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)

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