!3348 sample/codelabs添加

Merge pull request !3348 from LiAn/OpenHarmony-3.1-Release

zh-cn/application-dev/application-dev-website.md

@@ -79,7 +79,7 @@
           - [CanvasRenderingContext2D对象](ui/ui-js-components-canvasrenderingcontext2d.md)
           - [Path2D对象](ui/ui-js-components-path2d.md)
           - [OffscreenCanvas对象](ui/ui-js-components-offscreencanvas.md)
-        - [栅格布局](ui/ui-js-components-calendar.md)
+        - [栅格布局](ui/ui-js-components-grid.md)
         - Svg开发指导
           - [基础知识](ui/ui-js-components-svg-overview.md)
           - [绘制图形](ui/ui-js-components-svg-graphics.md)

zh-cn/application-dev/background-agent-scheduled-reminder/background-agent-scheduled-reminder-guide.md

@@ -139,8 +139,12 @@ interface LocalDateTime：时间信息实例
 1. 定义一个倒计时实例
    ```
    import reminderAgent from '@ohos.reminderAgent';
-   import notification from '@ohos.notification';export default {
-       timer: {
+   import notification from '@ohos.notification';
+   export default {
+       // JS工程写法：
+       // timer: {
+       // eTS工程写法：
+       let timer : reminderAgent.ReminderRequestTimer = {
            reminderType: reminderAgent.ReminderType.REMINDER_TYPE_TIMER,
            triggerTimeInSeconds: 10,
            actionButton: [
@@ -186,7 +190,10 @@ interface LocalDateTime：时间信息实例
 日历实例定义：
 
 ```
-calendar: {
+// JS工程写法：
+// calendar: {
+// eTS工程写法：
+let calendar : reminderAgent.ReminderRequestCalendar = {
     reminderType: reminderAgent.ReminderType.REMINDER_TYPE_CALENDAR,
     dateTime: {
         year: 2050,
@@ -231,7 +238,10 @@ calendar: {
 闹钟实例定义：
 
 ```
-alarm: {
+// JS工程写法：
+// alarm: {
+// eTS工程写法：
+let alarm : reminderAgent.ReminderRequestAlarm = {
     reminderType: reminderAgent.ReminderType.REMINDER_TYPE_ALARM,
     hour: 11,
     minute: 14,
@@ -265,3 +275,11 @@ alarm: {
     slotType: notification.SlotType.SOCIAL_COMMUNICATION
 }
 ```
+
+
+## 相关实例
+
+基于后台代理提醒开发，有以下相关实例可供参考：
+
+- [`AlarmClock`：后台代理提醒（eTS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/Notification/AlarmClock)
+

zh-cn/application-dev/background-task-management/Readme-CN.md

 # 后台任务管理
 
-- 后台任务
   - [后台任务概述](background-task-overview.md)
   - [后台任务开发指导](background-task-dev-guide.md)
\ No newline at end of file

zh-cn/application-dev/internationalization/intl-guidelines.md

@@ -300,3 +300,9 @@
    ```
    var options = numberFormat.resolvedOptions();
    ```
+
+## 相关实例
+
+针对Intl开发，有以下相关实例可供参考：
+
+-[`International`：国际化（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/International)
\ No newline at end of file

zh-cn/application-dev/ui/Readme-CN.md

@@ -55,7 +55,7 @@
             - [CanvasRenderingContext2D对象](ui-js-components-canvasrenderingcontext2d.md)
             - [Path2D对象](ui-js-components-path2d.md)
             - [OffscreenCanvas对象](ui-js-components-offscreencanvas.md)
-        - [栅格布局](ui-js-components-calendar.md)
+        - [栅格布局](ui-js-components-grid.md)
         - Svg开发指导
             - [基础知识](ui-js-components-svg-overview.md)
             - [绘制图形](ui-js-components-svg-graphics.md)

zh-cn/application-dev/ui/ts-application-resource-access.md

@@ -162,3 +162,10 @@ Image($rawfile('test.png')) //rawfile$r引用rawfile目录下图片
 
 Image($rawfile('newDir/newTest.png')) //rawfile$r引用rawfile目录下图片
 ```
+
+
+## 相关实例
+
+针对访问应用资源，有以下相关实例可供参考：
+
+- [`ResourceManager`：资源管理器（eTS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/common/ResourceManager)

zh-cn/application-dev/ui/ui-js-animate-background-position-style.md

@@ -83,4 +83,11 @@
 > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
 > background-position仅支持背景图片的移动，不支持背景颜色（background-color）。
 
-![zh-cn_image_background_img.gif](figures/zh-cn_image_background_img.gif)
+![zh-cn_image_background_img.gif](figures/zh-cn_image_background_img.gif)
\ No newline at end of file
+
+
+## 相关实例
+
+针对background-position样式动画开发，有以下相关实例可供参考：
+
+- [`JsImage`：基本动画（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/JsImage)
\ No newline at end of file

zh-cn/application-dev/ui/ui-js-animate-transform.md

@@ -574,3 +574,18 @@ transform可以设置多个值并且多个值可同时设置，下面案例中
 > - transform进行复合写法时，变化样式内多个样式值顺序的不同会呈现不一样的动画效果。
 > 
 > - transform属性设置的样式值要一一对应，若前后不对应，则该动画不生效。若设置多个样式值则只会呈现出已对应值的动画效果。
+
+
+## 相关实例
+
+针对transform样式动画开发，有以下相关实例可供参考：
+
+- [`JsAnimation`：动效示例应用（JS）](https://gitee.com/openharmony/app_samples/tree/master/UI/JsAnimation)
+
+- [`JsAnimationStyle`：动画与自定义字体（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/JsAnimationStyle)
+
+- [`Clock`：时钟（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/common/Clock)
+
+- [动画样式（JS）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/AnimationDemo)
+
+- [图片常见操作](https://gitee.com/openharmony/codelabs/tree/master/Media/ImageJsDemo)

zh-cn/application-dev/ui/ui-js-building-ui-component.md

@@ -18,3 +18,27 @@
 | 画布组件 | canvas |
 | 栅格组件 | grid-container、grid-row、grid-col |
 | svg组件 | svg、rect、circle、ellipse、path、line、polyline、polygon、text、tspan、textPath、animate、animateMotion、animateTransform |
+
+
+
+## 相关实例
+
+针对组件开发，有以下相关实例可供参考：
+
+- [`JsPanel`：内容展示面板（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/JsPanel)
+
+- [`Popup`：气泡（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/Popup)
+
+- [`RefreshContainer`：下拉刷新容器（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/RefreshContainer)
+
+- [`JSComponments`：Js组件（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/JSComponments)
+
+- [`JsUserRegistration`：用户注册（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/JsUserRegistration)
+
+- [`ECG`：心率检测（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/common/ECG)
+
+- [`Badge`：事件标记控件（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/Badge)
+
+- [rating（JS）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/RatingApplication)
+
+- [简易视频播放器](https://gitee.com/openharmony/codelabs/tree/master/Media/VideoOpenHarmony)

zh-cn/application-dev/ui/ui-js-building-ui-routes.md

@@ -83,3 +83,10 @@ export default {
 运行效果如下图所示：
 
 ![zh-cn_image_0000001070707559](figures/zh-cn_image_0000001070707559.png)
+
+
+## 相关实例
+
+针对页面路由开发，有以下相关实例可供参考：
+
+- [`JsRouter`：页面路由（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/JsRouter)

zh-cn/application-dev/ui/ui-js-component-tabs.md

@@ -307,4 +307,11 @@ export default {
 }
 ```
 
-![zh-cn_image_tab.gif](figures/zh-cn_image_tab.gif)
+![zh-cn_image_tab.gif](figures/zh-cn_image_tab.gif)
\ No newline at end of file
+
+
+## 相关实例
+
+针对Tabs开发，有以下相关实例可供参考：
+
+- [`Tabs`：页签容器（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/Tabs)
\ No newline at end of file

zh-cn/application-dev/ui/ui-js-components-canvas.md

@@ -139,3 +139,9 @@ export default {
 
 > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
 > 画布不支持在onInit和onReady中进行创建。
+
+## 相关实例
+
+针对Canvas开发，有以下相关实例可供参考：
+
+- [`JsCanvas`：画布组件（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/JsCanvas)

zh-cn/application-dev/ui/ui-js-components-chart.md

@@ -612,3 +612,13 @@ export default {
 ```
 
 ![zh-cn_image_0000001179018876](figures/zh-cn_image_0000001179018876.gif)
+
+
+
+## 相关实例
+
+针对Chart开发，有以下相关实例可供参考：
+
+- [`Chart`：图表组件（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/chart)
+
+- [chart（JS）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/SwitchApplication)

zh-cn/application-dev/ui/ui-js-components-dialog.md

@@ -319,3 +319,12 @@ export default {
 
 
 ![zh-cn_image_0000001234329527](figures/zh-cn_image_0000001234329527.gif)
+
+
+## 相关实例
+
+针对Dialog开发，有以下相关实例可供参考：
+
+- [`JsDialog`：页面弹窗（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/JsDialog)
+
+- [dialog（JS）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/DialogDemo)

zh-cn/application-dev/ui/ui-js-components-calendar.md → zh-cn/application-dev/ui/ui-js-components-grid.md

@@ -242,3 +242,10 @@ export default {
 
 
 ![zh-cn_image_0000001263160403](figures/zh-cn_image_0000001263160403.gif)
+
+
+## 相关实例
+
+针对Grid开发，有以下相关实例可供参考：
+
+- [`JsGrid`：栅格组件（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/JsGrid)

zh-cn/application-dev/ui/ui-js-components-image-animator.md

@@ -333,3 +333,10 @@ export default {
 ```
 
 ![zh-cn_image_0000001218758816](figures/zh-cn_image_0000001218758816.gif)
+
+
+## 相关实例
+
+针对Image-animator开发，有以下相关实例可供参考：
+
+- [image、image-animator（JS）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/ClickableJsDemo)

zh-cn/application-dev/ui/ui-js-components-images.md

@@ -203,3 +203,11 @@ export default {
 ```
 
 ![zh-cn_image_0000001188771430](figures/zh-cn_image_0000001188771430.gif)
+
+## 相关实例
+
+针对Image开发，有以下相关实例可供参考：
+
+- [image、image-animator（JS）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/ClickableJsDemo)
+
+- [图片编辑模板](https://gitee.com/openharmony/codelabs/tree/master/Media/ImageEditorTemplate)
\ No newline at end of file

zh-cn/application-dev/ui/ui-js-components-input.md

@@ -312,3 +312,10 @@ export default {
 
 
 ![zh-cn_image_0000001188771358](figures/zh-cn_image_0000001188771358.gif)
+
+
+## 相关实例
+
+针对Input开发，有以下相关实例可供参考：
+
+- [input、label（JS）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/InputApplication)

zh-cn/application-dev/ui/ui-js-components-list.md

@@ -308,3 +308,10 @@ export default {
 
 
 ![zh-cn_image_0000001234287779](figures/zh-cn_image_0000001234287779.gif)
+
+
+## 相关实例
+
+针对List开发，有以下相关实例可供参考：
+
+- [`JsList`：商品列表（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/JsList)
\ No newline at end of file

zh-cn/application-dev/ui/ui-js-components-menu.md

@@ -278,3 +278,9 @@ export default {
 ```
 
 ![zh-cn_image_0000001226815403](figures/zh-cn_image_0000001226815403.gif)
+
+## 相关实例
+
+针对Menu开发，有以下相关实例可供参考：
+
+- [`JSMenu`：菜单（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/JSMenu)

zh-cn/application-dev/ui/ui-js-components-picker.md

@@ -295,3 +295,10 @@ export default {
 
 
 ![zh-cn_image_0000001234342189](figures/zh-cn_image_0000001234342189.gif)
+
+
+## 相关实例
+
+针对Picker开发，有以下相关实例可供参考：
+
+- [`Picker`：滑动选择器（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/Picker)

zh-cn/application-dev/ui/ui-js-components-slider.md

@@ -211,3 +211,12 @@ export default{
 ```
 
 ![zh-cn_image_0000001263038799](figures/zh-cn_image_0000001263038799.gif)
+
+
+## 相关实例
+
+针对Slider开发，有以下相关实例可供参考：
+
+- [`Slider`：滑动条（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/Slider)
+
+- [slider（JS）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/SliderApplication)
\ No newline at end of file

zh-cn/application-dev/ui/ui-js-components-stepper.md

@@ -401,3 +401,10 @@ export default {
 ```
 
 ![zh-cn_image_0000001189249862](figures/zh-cn_image_0000001189249862.gif)
+
+
+## 相关实例
+
+针对Stepper开发，有以下相关实例可供参考：
+
+- [`StepNavigator`：步骤导航器（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/StepNavigator)

zh-cn/application-dev/ui/ui-js-components-svg-overview.md

@@ -78,3 +78,10 @@ svg{
 > - x和y设置的的是当前Svg的x轴和y轴坐标，如果当前Svg为根节点，x轴和y轴属性无效。
 > 
 > - viewBox的宽高和svg的宽高不一致，会以中心对齐进行缩放。
+
+
+## 相关实例
+
+针对Svg开发，有以下相关实例可供参考：
+
+- [`JsSvg`：可缩放矢量图形（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/JsSvg)

zh-cn/application-dev/ui/ui-js-components-swiper.md

@@ -363,3 +363,10 @@ export default {
 ```
 
 ![zh-cn_image_0000001263359599](figures/zh-cn_image_0000001263359599.gif)
+
+
+## 相关实例
+
+针对Swiper开发，有以下相关实例可供参考：
+
+- [`Swiper`：内容滑动容器（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/Swiper)

zh-cn/application-dev/ui/ui-js-components-text.md

@@ -270,3 +270,10 @@ export default {
 ```
 
 ![zh-cn_image_0000001208636379](figures/zh-cn_image_0000001208636379.gif)
+
+
+## 相关实例
+
+针对Text开发，有以下相关实例可供参考：
+
+- [`JsTextComponents`：基础组件（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/JsBasicComponents)

zh-cn/application-dev/ui/ui-js-components-toolbar.md

@@ -229,3 +229,10 @@ export default {
 ```
 
 ![zh-cn_image_0000001263279105](figures/zh-cn_image_0000001263279105.gif)
+
+
+## 相关实例
+
+针对Toolbar开发，有以下相关实例可供参考：
+
+- [`Toolbar`：工具栏（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/Toolbar)

zh-cn/application-dev/ui/ui-js-custom-components.md

@@ -3,7 +3,7 @@
 使用基于JS扩展的类Web开发范式的方舟开发框架支持自定义组件，用户可根据业务需求将已有的组件进行扩展，增加自定义的私有属性和事件，封装成新的组件，方便在工程中多次调用，提高页面布局代码的可读性。具体的封装方法示例如下：
 
 
-- **构建自定义组件**
+- 构建自定义组件
   ```
   <!-- comp.hml -->
    <div class="item"> 
@@ -58,7 +58,7 @@
    }
   ```
 
-- **引入自定义组件**
+- 引入自定义组件
   ```
   <!-- xxx.hml -->
    <element name='comp' src='../../common/component/comp.hml'></element> 
@@ -97,3 +97,12 @@
 
 **图1** 自定义组件的效果
 ![zh-cn_image_0000001070693737](figures/zh-cn_image_0000001070693737.png)
+
+
+## 相关实例
+
+针对自定义组件开发，有以下相关实例可供参考：
+
+- [`JSUICustomComponent`：自定义组件（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/JSUICustomComponent)
+
+- [自定义组件（JS）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/JSCanvasComponet)

zh-cn/application-dev/ui/ui-js-overview.md

@@ -26,3 +26,28 @@
 - **Porting Layer**
 
   适配层主要完成对平台层进行抽象，提供抽象接口，可以对接到系统平台。比如：事件对接、渲染管线对接和系统生命周期对接等。
+
+
+## 相关实例
+
+基于JS扩展的类Web开发范式的方舟开发框架，有以下相关实例可供参考：
+
+- [`AtomicLayout`：原子布局（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/AtomicLayout)
+
+- [`JsFA`：FA示例应用（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/JsFA)
+
+- [`JsShopping`：购物示例应用（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/JsShopping)
+
+- [`Stack`：堆叠容器（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/Stack)
+
+- [`JsAdaptivePortalList`：多设备自适应的效率型首页（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/JsAdaptivePortalList)
+
+- [`JsAdaptivePortalPage`：多设备自适应的FA页面（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/JsAdaptivePortalPage)
+
+- [`JsGallery`：图库示例应用（JS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/UI/JsGallery)
+
+- [`AirQuality`：空气质量（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/common/AirQuality)
+
+- [`Badge`：事件标记控件（JS）（API7）](https://gitee.com/openharmony/app_samples/tree/master/UI/Badge)
+
+- [购物应用（JS）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/ShoppingOpenHarmony)

zh-cn/application-dev/ui/ui-ts-components-web.md

@@ -193,3 +193,9 @@ struct WebComponent {
   </body>
   </html>
   ```
+
+## 相关实例
+
+针对Web开发，有以下相关实例可供参考：
+
+- [`Web`：ArkUI-Web（eTS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/Web)
\ No newline at end of file

zh-cn/application-dev/ui/ui-ts-layout-flex.md

@@ -368,3 +368,10 @@ struct FlexExample {
 
 
 ![zh-cn_image_0000001261605867](figures/zh-cn_image_0000001261605867.png)
+
+
+## 相关实例
+
+针对弹性布局开发，有以下相关实例可供参考：
+
+- [弹性布局（eTS）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/FlowLayoutEts)

zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md

@@ -147,3 +147,10 @@ screen and (device-type: tv) or (resolution < 2) // 包含多个媒体特征
 
 非横屏下文本内容为Portrait，颜色为#DB7093。<br/>
 ![zh-cn_image_0000001263074739](figures/zh-cn_image_0000001263074739.png)
+
+## 相关实例
+
+针对媒体查询开发，有以下相关实例可供参考：
+
+- [`MediaQuery`：Ets媒体查询（eTS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/MediaQuery)
+

zh-cn/application-dev/ui/ui-ts-overview.md

@@ -53,3 +53,32 @@
 - **平台适配层**
 
   提供了对系统平台的抽象接口，具备接入不同系统的能力，如系统渲染管线、生命周期调度等。
+
+
+## 相关实例
+
+基于TS扩展的声明式开发范式的方舟开发框架，有以下相关实例可供参考：
+
+- [`Canvas`：画布组件（eTS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/Canvas)
+
+- [`Drag`：ArkUI-拖拽事件（eTS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/Drag)
+
+- [`ArkUIAnimation`：Ets动画（eTS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/ArkUIAnimation)
+
+- [`Xcomponent`：ArkUI-XComponent（eTS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/XComponent)
+
+- [`MouseEvent`：ArkUI-鼠标事件（eTS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/MouseEvent)
+
+- [极简声明式UI范式（eTS）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/SimpleGalleryEts)
+
+- [购物应用（eTS）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/ShoppingEts)
+
+- [转场动画的使用（eTS）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/TransitionAnimtaionEts)
+
+- [基础组件Slider的使用（eTS）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/SliderApplicationEts)
+
+- [弹窗（eTS）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/CustomDialogEts)
+
+- [一次开发多端部署（eTS）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/MultiDeploymentEts)
+
+- [CustomComponent:组件化（eTS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/CustomComponent)
\ No newline at end of file

zh-cn/application-dev/website.md

@@ -79,7 +79,7 @@
           - [CanvasRenderingContext2D对象](ui/ui-js-components-canvasrenderingcontext2d.md)
           - [Path2D对象](ui/ui-js-components-path2d.md)
           - [OffscreenCanvas对象](ui/ui-js-components-offscreencanvas.md)
-        - [栅格布局](ui/ui-js-components-calendar.md)
+        - [栅格布局](ui/ui-js-components-grid.md)
         - Svg开发指导
           - [基础知识](ui/ui-js-components-svg-overview.md)
           - [绘制图形](ui/ui-js-components-svg-graphics.md)