!11732 文档整改 挑单--11680

Merge pull request !11732 from wangshuainan1/OpenHarmony-3.1-Release

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

@@ -108,9 +108,6 @@ export default {
       this.qr_type = 'circle'
     }
   },
-  setvalue(e) {
-    this.qr_value = e.newValue
-  },
   setcol(e) {
     this.qr_col = e.newValue
   },
@@ -122,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

@@ -92,20 +92,19 @@ animate( keyframes: Keyframes, options: Options)：void
   | repeat | 动画重播事件。 |
 
 - 示例
-  ```
-  <!-- xxx.hml -->
-  <div class="container">
-    <div id="idName" class="box"></div>
-    <div class="buttonBox">
-      <button @click="start">
-        start
-      </button>
-      <button @click="cancel">
-        cancels
-      </button>
-    </div>
+```html
+<!-- xxx.hml -->
+<div class="container">
+  <div id="idName" class="box"></div>
+  <div class="buttonBox">
+    <button @click="start">
+      start
+    </button>
+    <button @click="cancel">
+      cancel
+    </button>
   </div>
-  ```
+```
 
   ```
   /* xxx.css */

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

@@ -67,4 +67,3 @@
 
 > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
 > 通用样式都不是必填项。
-

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
 
    ```js
    <!-- 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'
            })
        }
    }
@@ -325,7 +329,7 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
 
    ```js
    <!-- xxx.js -->
-   import router from '@system.router';
+   import router from '@ohos.router';
    export default {
        data: {
    
@@ -334,9 +338,10 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
            router.back()
        }
    }
-   ```
-
-   ```css
+   
+```
+   
+```css
    <!-- xxx.css -->
    .container {
        flex-direction: column;
@@ -379,4 +384,4 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
    }
    ```
    
-   ![transition](figures/transition.gif)
+![transition](figures/transition.gif)

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

@@ -37,10 +37,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

@@ -73,6 +73,23 @@ struct AnimateToExample {
           }
           this.flag = !this.flag
         })
+      Button('change rotate angle')
+        .margin(50)
+        .rotate({ x: 0, y: 0, z: 1, angle: this.rotateAngle })
+        .onClick(() => {
+          animateTo({
+            duration: 1200,
+            curve: Curve.Friction,
+            delay: 500,
+            iterations: -1, // 设置-1表示动画无限循环
+            playMode: PlayMode.AlternateReverse,
+            onFinish: () => {
+              console.info('play end')
+            }
+          }, () => {
+            this.rotateAngle = 90
+          })
+        })
     }.width('100%').margin({ top: 5 })
   }
 }

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

@@ -42,15 +42,27 @@ extraParams是Json对象转换的string字符串，可以通过Json.parse转换
 
 ```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 appleVisible: Visibility = Visibility.Visible;
-  @State orangeVisible: Visibility = Visibility.Visible;
-  @State bananaVisible: Visibility = Visibility.Visible;
+  @State numbers: string[] = ['one', 'two', 'three', 'four', 'five', 'six']
+  @State text: string = ''
+  @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() {
@@ -74,46 +86,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')
@@ -142,21 +137,22 @@ struct DragExample {
       .padding(15)
       .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 })
       .onDragEnter((event: DragEvent, extraParams: string) => {
-        console.log('List onDragEnter, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY());
+        console.log('List onDragEnter, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY())
       })
       .onDragMove((event: DragEvent, extraParams: string) => {
-        console.log('List onDragMove, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY());
+        console.log('List onDragMove, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY())
       })
       .onDragLeave((event: DragEvent, extraParams: string) => {
-        console.log('List onDragLeave, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY());
+        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.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 })
   }