!11680 整改docs

Merge pull request !11680 from wangshuainan1/master

zh-cn/application-dev/quick-start/arkts-restrictions-and-extensions.md

@@ -111,14 +111,14 @@ struct IndexPage {
 
 通过构造函数方法初始化成员变量，需要遵循如下规则：
 
-| 从父组件中的变量（下）到子组件中的变量（右） | @State | @Link | @Prop | 常规变量 |
-| ---------------------- | ------ | ----- | ----- | ---- |
-| @State                 | 不允许    | 允许    | 允许    | 允许   |
-| @Link                  | 不允许    | 允许    | 不推荐   | 允许   |
-| @Prop                  | 不允许    | 不允许   | 允许    | 允许   |
-| @StorageLink           | 不允许    | 允许    | 不允许   | 允许   |
-| @StorageProp           | 不允许    | 不允许   | 不允许   | 允许   |
-| 常规变量                   | 允许     | 不允许   | 不允许   | 允许   |
+| 从父组件中的变量（下）到子组件中的变量（右） | @State | @Link  | @Prop  | 常规变量 |
+| -------------------------------------------- | ------ | ------ | ------ | -------- |
+| @State                                       | 不允许 | 允许   | 允许   | 允许     |
+| @Link                                        | 不允许 | 允许   | 不推荐 | 允许     |
+| @Prop                                        | 不允许 | 不允许 | 允许   | 允许     |
+| @StorageLink                                 | 不允许 | 允许   | 不允许 | 不允许   |
+| @StorageProp                                 | 不允许 | 不允许 | 不允许 | 允许     |
+| 常规变量                                     | 允许   | 不允许 | 不允许 | 允许     |
 
 从上表中可以看出：
 

zh-cn/application-dev/reference/arkui-js/js-components-basic-chart.md

@@ -211,24 +211,24 @@
            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,
+           gradient: true
          }
        ],
        lineOps: {
          xAxis: {
            min: 0,
            max: 20,
-           display: false,
+           display: false
          },
          yAxis: {
            min: 0,
            max: 1000,
-           display: false,
+           display: false
          },
          series: {
            lineStyle: {
              width: "5px",
-             smooth: true,
+             smooth: true
            },
            headPoint: {
              shape: "circle",
@@ -236,14 +236,14 @@
              strokeWidth: 5,
              fillColor: '#ffffff',
              strokeColor: '#007aff',
-             display: true,
+             display: true
            },
            loop: {
              margin: 2,
-             gradient: true,
+             gradient: true
            }
          }
-       },
+       }
      },
      addData() {
        this.$refs.linechart.append({
@@ -294,15 +294,15 @@
        barData: [
          {
            fillColor: '#f07826',
-           data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628],
+           data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628]
          },
          {
            fillColor: '#cce5ff',
-           data: [535, 776, 615, 444, 694, 785, 677, 609, 562, 410],
+           data: [535, 776, 615, 444, 694, 785, 677, 609, 562, 410]
          },
          {
            fillColor: '#ff88bb',
-           data: [673, 500, 574, 483, 702, 583, 437, 506, 693, 657],
+           data: [673, 500, 574, 483, 702, 583, 437, 506, 693, 657]
          },
        ],
        barOps: {
@@ -310,14 +310,14 @@
            min: 0,
            max: 20,
            display: false,
-           axisTick: 10,
+           axisTick: 10
          },
          yAxis: {
            min: 0,
            max: 1000,
-           display: false,
-         },
-       },
+           display: false
+         }
+       }
      }
    }
    ```

zh-cn/application-dev/reference/arkui-js/js-components-basic-qrcode.md

@@ -94,7 +94,6 @@ select{
 /* index.js */
 export default {
   data: {
-    qr_value:'',
     qr_type: 'rect',
     qr_size: '300px',
     qr_col: '#87ceeb',
@@ -109,9 +108,6 @@ export default {
       this.qr_type = 'circle'
     }
   },
-  setvalue(e) {
-    this.qr_value = e.newValue
-  },
   setcol(e) {
     this.qr_col = e.newValue
   },
@@ -123,4 +119,3 @@ export default {
 
 ![zh-cn_image_0000001222948301](figures/zh-cn_image_0000001222948301.gif)
 
-

zh-cn/application-dev/reference/arkui-js/js-components-common-methods.md

@@ -102,7 +102,7 @@ animate( keyframes: Keyframes, options: Options)：void
       start
     </button>
     <button @click="cancel">
-      cancels
+      cancel
     </button>
   </div>
 </div>

zh-cn/application-dev/reference/arkui-js/js-components-common-styles.md

@@ -75,10 +75,10 @@
 
 ```html
 <div class="container" onswipe="touchMove">
-	<text style="margin: 10px; box-sizing: content-box; width: 300px;height: 300px; border: blue; border-width: 20px;">
+	<text style="margin: 10px; box-sizing: content-box; width: 300px;height: 300px; border-color: blue; border-width: 20px;">
 		contentBox
 	</text>
-	<text style="margin: 10px; box-sizing: border-box; width: 300px;height: 300px;border: blue; border-width: 20px;">
+	<text style="margin: 10px; box-sizing: border-box; width: 300px;height: 300px;border-color: blue; border-width: 20px;">
 		borderBox
 	</text>
 </div>

zh-cn/application-dev/reference/arkui-js/js-components-common-transition.md

@@ -59,12 +59,12 @@ PageA跳转到PageB，跳转的共享元素为image， shareid为“shareImage
 
 ```js
 // xxx.js
-import router from '@system.router';
+import router from '@ohos.router';
 export default {
   jump() {
     router.push({
       // 路径要与config.json配置里面的相同
-      uri: 'pages/detailpage',
+      url: 'pages/detailpage',
     });
   },
 }
@@ -92,7 +92,7 @@ export default {
 
 ```js
 // xxx.js
-import router from '@system.router';
+import router from '@ohos.router';
 export default {
   jumpBack() {
     router.back();
@@ -138,7 +138,7 @@ source_page包含顶部内容以及卡片列表，点击卡片可以跳转到tar
     <text style="font-size: 23px; margin-bottom: 20px" >MAIN TITLE</text>
   </div>
   <list style="width:340px;height:600px;flex-direction:column;justify-content:center;align-items:center">
-    <list-item type="listItem" class="item" card="true" for="list" id="{{$item.id}}" onclick="jumpPage({{$item.id}}, {{$item.uri}})">
+    <list-item type="listItem" class="item" card="true" for="list" id="{{$item.id}}" onclick="jumpPage({{$item.id}}, {{$item.url}})">
       <text style="margin-left: 10px; font-size: 23px;">{{$item.title}}</text>
     </list-item>
   </list>
@@ -147,19 +147,19 @@ source_page包含顶部内容以及卡片列表，点击卡片可以跳转到tar
 
 ```js
 // xxx.js
-import router from '@system.router'
+import router from '@ohos.router'
 export default {
   data: { list: [] },
   onInit() {
     for(var i = 0; i < 10; i++) {
-      var item = { uri: "pages/card_transition/target_page/index", 
+      var item = { url: "pages/card_transition/target_page/index", 
                    title: "this is title" + i, id: "item_" + i }
       this.list.push(item);
     }
   },
-  jumpPage(id, uri) {
+  jumpPage(id, url) {
     var cardId = this.$element(id).ref;
-    router.push({ uri: uri, params : { ref : cardId } });
+    router.push({ url: url, params : { ref : cardId } });
   }
 }
 ```
@@ -167,6 +167,8 @@ export default {
 ```css
 /* xxx.css */
 .container {
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   align-items: center;
   background-color: #ABDAFF;
@@ -197,6 +199,8 @@ export default {
 ```css
 /* xxx.css */
 .container {
+  width: 100%;
+  height: 100%; 
   flex-direction: column;
   align-items: center;
   background-color: #EBFFD7;
@@ -255,14 +259,14 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
 
    ```css
    // xxx.js
-   import router from '@system.router';
+   import router from '@ohos.router';
    export default {
        data: {
-
+   
        },
        jump() {
            router.push({
-               uri:'pages/transition2/transition2'
+               url:'pages/transition2/transition2'
            })
        }
    }
@@ -286,13 +290,13 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
        transition-duration: 5s;
        transition-timing-function: friction;
    }
-
+   
    @keyframes go_page {
        from {
            opacity: 0;
            transform: translate(0px) rotate(60deg) scale(1.0);
        }
-
+   
        to {
            opacity: 1;
            transform: translate(100px) rotate(360deg) scale(1.0);
@@ -303,7 +307,7 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
            opacity: 1;
            transform: translate(200px) rotate(60deg) scale(2);
        }
-
+   
        to {
            opacity: 0;
            transform: translate(200px) rotate(360deg) scale(2);
@@ -324,10 +328,10 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
 
    ```js
    // xxx.js
-   import router from '@system.router';
+   import router from '@ohos.router';
    export default {
        data: {
-
+   
        },
        jumpBack() {
            router.back()
@@ -344,7 +348,7 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
        width: 100%;
        height: 100%;
    }
-
+   
    .move_page {
        width: 100px;
        height: 100px;
@@ -354,7 +358,7 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
        transition-duration: 5s;
        transition-timing-function: ease;
    }
-
+   
    @keyframes go_page {
        from {
            opacity: 0;
@@ -365,7 +369,7 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
            transform:translate(100px) rotate(180deg) scale(2.0);
        }
    }
-
+   
    @keyframes exit_page {
        from {
            opacity: 1;

zh-cn/application-dev/reference/arkui-js/js-components-custom-lifecycle.md

@@ -38,10 +38,8 @@ export default {
     console.log("组件创建")
   },
   onAttached() {
-    this.value = "组件挂载"
-  },
-  onDetached() {
-    this.value = "组件卸载"
+    this.value = "组件挂载",
+    console.log("组件挂载")
   },
   onShow() {
     console.log("Page显示")

zh-cn/application-dev/reference/arkui-js/js-components-svg-animatemotion.md

@@ -37,7 +37,7 @@
     <path fill="none" stroke="blue" stroke-width="3" d="m40,130 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z"></path>
     <path fill="none" stroke="blue" stroke-width="3" d="m40,200 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z"></path>
     <path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z">
-      <animateMotion dur="2000" repeatCount="indefinite" rotate="auto" keyPoints="0;0.2;0.4;0.6;0.8;1" path="m40,60 c0,-100 160,160,100 160,0 c0,-100,-160,100 -160,0 z">
+      <animateMotion dur="2000" repeatCount="indefinite" rotate="auto" keyPoints="0;0.2;0.4;0.6;0.8;1" path="m40,60 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z">
       </animateMotion>
     </path>
     <path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z">

zh-cn/application-dev/reference/arkui-js/js-components-svg-animatetransform.md

@@ -193,6 +193,7 @@ transform动效，支持的组件范围：
           dur="3s" repeatCount="indefinite"></animateTransform>
       </rect>
       <text x="20" y="700" fill="#D2691E" font-size="40">
+        animate-transform
         <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="300"
           dur="3s" repeatCount="indefinite"></animateTransform>
       </text>

zh-cn/application-dev/reference/arkui-js/js-components-svg-textpath.md

@@ -97,9 +97,9 @@ textpath与tspan组合示例与效果图
 <!-- xxx.hml -->
 <div class="container">
   <svg fill="#00FF00" x="50">
-    <path d="M40,760 Q360,760 360,580 Q360,440 200,440 Q40,440 40,560 Q40,680 180,680 Q280,680 300,600" stroke="red" fill="none"></path>
+    <path d="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" stroke="red" fill="none"></path>
     <text>
-      <textpath fill="#D2691E" path="M40,760 Q360,760 360,580 Q360,440 200,440 Q40,440 40,560 Q40,680 180,680 Q280,680 300,600"font-size="30px" stroke="black" stroke-width="1" >
+      <textpath fill="#D2691E" path="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" font-size="30px" stroke="black" stroke-width="1" >
         This is TextPath.
         <tspan font-size="20px" fill="red">This is tspan onTextPath.</tspan>
         <tspan font-size="30px">Let's play.</tspan>
@@ -117,11 +117,11 @@ textpath与tspan组合示例与效果图
 <!-- xxx.hml -->
 <div class="container">
   <svg fill="#00FF00" x="50">
-    <path d="M40,1160 Q360,1160 360,980 Q360,840 200,840 Q40,840 40,960 Q40,1080 180,1080 Q280,1080 300,1000" stroke="red" fill="none">
+    <path d="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" stroke="red" fill="none">
     </path>
     <!--      数值百分比    -->
     <text>
-      <textpath fill="#D2691E" path="M40,1160 Q360,1160 360,980 Q360,840 200,840 Q40,840 40,960 Q40,1080 180,1080 Q280,1080 300,1000" font-size="30px">
+      <textpath fill="#D2691E" path="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" font-size="30px">
         This is TextPath.
         <tspan x="50" fill="blue">This is first tspan.</tspan>
         <tspan x="50%">This is second tspan.</tspan>
@@ -172,10 +172,10 @@ textpath与tspan组合属性动画与效果图
 <!-- xxx.hml -->
 <div class="container">
   <svg fill="#00FF00">
-    <path d="M40,1160 Q360,1160 360,980 Q360,840 200,840 Q40,840 40,960 Q40,1080 180,1080 Q280,1080 300,1000" stroke="red" fill="none">
+    <path d="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" stroke="red" fill="none">
     </path>
     <text>
-      <textpath fill="#D2691E" path="M40,1160 Q360,1160 360,980 Q360,840 200,840 Q40,840 40,960 Q40,1080 180,1080 Q280,1080 300,1000" font-size="30px">
+      <textpath fill="#D2691E" path="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" font-size="30px">
         This is TextPath.
         <tspan x="50" fill="blue">
           tspan attribute x|rotate
@@ -209,11 +209,11 @@ textpath与tspan组合属性动画与效果图
 <!-- xxx.hml -->
 <div class="container">
   <svg fill="#00FF00">
-    <path d="M40,1560 Q360,1560 360,1380 Q360,1240 200,1240 Q40,1240 40,1360 Q40,1480 180,1480 Q280,1480 300,1400" stroke="red" 
+    <path d="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" stroke="red" 
       fill="none">
     </path>
     <text>
-      <textpath fill="#D2691E" path="M40,1560 Q360,1560 360,1380 Q360,1240 200,1240 Q40,1240 40,1360 Q40,1480 180,1480 Q280,1480 300,1400" font-size="30px">
+      <textpath fill="#D2691E" path="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" font-size="30px">
         This is TextPath.
         <tspan dx="20" fill="blue">
           tspan attribute fill|fill-opacity
@@ -247,11 +247,11 @@ textpath与tspan组合属性动画与效果图
 <!-- xxx.hml -->
 <div class="container">
   <svg fill="#00FF00">
-    <path d="M40,1960 Q360,1960 360,1780 Q360,1640 200,1640 Q40,1640 40,1760 Q40,1880 180,1880 Q280,1880 300,1800" stroke="red" 
+    <path d="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" stroke="red" 
       fill="none">
     </path>
     <text>
-      <textpath fill="#D2691E" path="M40,1960 Q360,1960 360,1780 Q360,1640 200,1640 Q40,1640 40,1760 Q40,1880 180,1880 Q280,1880 300,1800" font-size="30px">
+      <textpath fill="#D2691E" path="M40,360 Q360,360 360,180 Q360,40 200,40 Q40,40 40,160 Q40,280 180,280 Q280,280 300,200" font-size="30px">
           This is TextPath.
           <tspan dx="20" fill="blue">
             tspan attribute stroke

zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md

@@ -69,7 +69,7 @@ struct AnimateToExample {
         })
       Button('change rotate angle')
         .margin(50)
-        .rotate({ angle: this.rotateAngle })
+        .rotate({ x: 0, y: 0, z: 1, angle: this.rotateAngle })
         .onClick(() => {
           animateTo({
             duration: 1200,

zh-cn/application-dev/reference/arkui-ts/ts-state-management.md

@@ -701,7 +701,7 @@ EnvProp\<S>(key: string, value: S): boolean
 
 | key          |       类型    |      说明            |
 | ------------ | ------------- | ------------------- |
-| accessibilityEnabled | boolean | 无障碍屏幕朗读是否启用。            |
+| accessibilityEnabled | string | 无障碍屏幕朗读是否启用。            |
 | colorMode | ColorMode | 深浅色模式，可选值为：<br>- ColorMode.LIGHT：浅色模式；<br>- ColorMode.DARK：深色模式。   |
 | fontScale | number | 字体大小比例。            |
 | fontWeightScale | number | 字重比例。            |

zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md

@@ -47,15 +47,27 @@
 
 ```ts
 // xxx.ets
+@Extend(Text) function textStyle () {
+  .width('25%')
+  .height(35)
+  .fontSize(16)
+  .textAlign(TextAlign.Center)
+  .backgroundColor(0xAFEEEE)
+}
+
 @Entry
 @Component
 struct DragExample {
   @State numbers: string[] = ['one', 'two', 'three', 'four', 'five', 'six']
   @State text: string = ''
-  @State bool: boolean = false
+  @State bool: boolean = true
+  @State eventType: string = ''
   @State appleVisible: Visibility = Visibility.Visible
   @State orangeVisible: Visibility = Visibility.Visible
   @State bananaVisible: Visibility = Visibility.Visible
+  private dragList: string[] = ['apple', 'orange', 'banana']
+  @State fruitVisible: Visibility[] = [Visibility.Visible, Visibility.Visible, Visibility.Visible]
+  @State index: number = 0
 
   // 自定义拖拽过程中显示的内容
   @Builder pixelMapBuilder() {
@@ -79,46 +91,29 @@ struct DragExample {
         .textAlign(TextAlign.Start)
         .margin(5)
       Row({ space: 15 }) {
-        Text('apple')
-          .width('25%')
-          .height(35)
-          .fontSize(16)
-          .textAlign(TextAlign.Center)
-          .backgroundColor(0xAFEEEE)
-          .visibility(this.appleVisible)
-          .onDragStart(() => {
-            this.bool = true
-            this.text = 'apple'
-            this.appleVisible = Visibility.None
-            return this.pixelMapBuilder
-          })
-        Text('orange')
-          .width('25%')
-          .height(35)
-          .fontSize(16)
-          .textAlign(TextAlign.Center)
-          .backgroundColor(0xAFEEEE)
-          .visibility(this.orangeVisible)
-          .onDragStart(() => {
-            this.bool = true
-            this.text = 'orange'
-            this.orangeVisible = Visibility.None
-            return this.pixelMapBuilder
-          })
-        Text('banana')
-          .width('25%')
-          .height(35)
-          .fontSize(16)
-          .textAlign(TextAlign.Center)
-          .backgroundColor(0xAFEEEE)
-          .visibility(this.bananaVisible)
-          .onDragStart((event: DragEvent, extraParams: string) => {
-            console.log('Text onDragStart, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY())
-            this.bool = true
-            this.text = 'banana'
-            this.bananaVisible = Visibility.None
-            return this.pixelMapBuilder
-          })
+        ForEach(this.dragList, (item, index) => {
+          Text(item)
+            .textStyle()
+            .visibility(this.fruitVisible[index])
+            .onDragStart(() => {
+              this.bool = true
+              this.text = item
+              this.fruitVisible[index] = Visibility.None
+              return this.pixelMapBuilder
+            })
+            .onTouch((event: TouchEvent) => {
+              if (event.type === TouchType.Down) {
+                this.eventType = 'Down'
+                this.index = index
+              }
+              if (event.type === TouchType.Up) {
+                this.eventType = 'Up'
+                if (this.bool) {
+                  this.fruitVisible[index] = Visibility.Visible
+                }
+              }
+            })
+        })
       }.padding({ top: 10, bottom: 10 }).margin(10)
 
       Text('This is a List element')
@@ -156,12 +151,13 @@ struct DragExample {
         console.log('List onDragLeave, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY())
       })
       .onDrop((event: DragEvent, extraParams: string) => {
-        var jsonString = JSON.parse(extraParams);
+        let jsonString = JSON.parse(extraParams);
         if (this.bool) {
           // 通过splice方法插入元素
           this.numbers.splice(jsonString.insertIndex, 0, this.text)
           this.bool = false
         }
+        this.fruitVisible[this.index] = Visibility.None
       })
     }.width('100%').height('100%').padding({ top: 20 }).margin({ top: 20 })
   }