!7261 update docs

Merge pull request !7261 from 关明月/cherry-pick-1658974853

zh-cn/application-dev/reference/apis/js-apis-system-mediaquery.md

@@ -40,11 +40,7 @@ matchMedia(condition: string): MediaQueryList
 **示例：**
 
 ```
-export default {    
-  matchMedia() {        
-    var mMediaQueryList = mediaquery.matchMedia('(max-width: 466)');    
-  },
-}
+var mMediaQueryList = mediaquery.matchMedia('(max-width: 466)');    
 ```
 
 ## MediaQueryEvent
@@ -102,6 +98,11 @@ addListener(callback: (event: MediaQueryEvent) => void): void
 **示例：**
 
 ```
+function maxWidthMatch(e){
+  if(e.matches){
+    // do something
+  }
+}
 mMediaQueryList.addListener(maxWidthMatch);
 ```
 
@@ -123,6 +124,11 @@ removeListener(callback: (event: MediaQueryEvent) => void): void
 **示例：**
 
 ```
+function maxWidthMatch(e){
+  if(e.matches){
+    // do something
+  }
+}
 mMediaQueryList.removeListener(maxWidthMatch);
 ```
 

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-text.md

@@ -23,7 +23,7 @@ Text(content?: string)
 - 参数
   | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
   | -------- | -------- | -------- | -------- | -------- |
-  | content | string | 否 | '' | 文本内容，包含子组件Span时不生效，显示Span内容。 |
+  | content | string | 否 | '' | 文本内容。包含子组件Span时不生效，显示Span内容，并且此时text组件的样式不生效。 |
 
 
 ## 属性

zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md

@@ -258,7 +258,7 @@ struct MiterLimit {
 // xxx.ets
 @Entry
 @Component
-struct Font {
+struct Fonts {
   private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   

zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md

@@ -46,13 +46,13 @@ struct GestureGroupExample {
   @State count: number = 0
   @State offsetX: number = 0
   @State offsetY: number = 0
-  @State borderStyle: BorderStyle = BorderStyle.Solid
+  @State borderStyles: BorderStyle = BorderStyle.Solid
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
       Text('sequence gesture\n' + 'LongPress onAction:' + this.count + '\nPanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY)
     }.translate({ x: this.offsetX, y: this.offsetY, z: 5 })
-    .height(100).width(200).padding(10).margin(80).border({ width: 1, style: this.borderStyle })
+    .height(100).width(200).padding(10).margin(80).border({ width: 1, style: this.borderStyles })
     .gesture(
       GestureGroup(GestureMode.Sequence,
         LongPressGesture({ repeat: true })
@@ -65,7 +65,7 @@ struct GestureGroupExample {
           }),
         PanGesture({})
           .onActionStart(() => {
-            this.borderStyle = BorderStyle.Dashed
+            this.borderStyles = BorderStyle.Dashed
             console.log('pan start')
           })
           .onActionUpdate((event: GestureEvent) => {

zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md

@@ -266,7 +266,7 @@ struct MiterLimit {
 // xxx.ets
 @Entry
 @Component
-struct Font {
+struct Fonts {
   private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
@@ -1920,12 +1920,12 @@ getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap
 
 以当前canvas指定区域内的像素创建[PixelMap](../apis/js-apis-image.md#pixelmap7)对象。
 - 参数
-  | 参数 | 类型 | 必填 | 默认值 | 描述 | 
+  | 参数 | 类型 | 必填 | 默认值 | 描述 |
   | -------- | -------- | -------- | -------- | -------- |
-  | sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 | 
-  | sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 | 
-  | sw | number | 是 | 0 | 需要输出的区域的宽度。 | 
-  | sh | number | 是 | 0 | 需要输出的区域的高度。 | 
+  | sx | number | 是 | 0 | 需要输出的区域的左上角x坐标。 |
+  | sy | number | 是 | 0 | 需要输出的区域的左上角y坐标。 |
+  | sw | number | 是 | 0 | 需要输出的区域的宽度。 |
+  | sh | number | 是 | 0 | 需要输出的区域的高度。 |
 
 ### getImageData
 

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

@@ -68,8 +68,8 @@ PageTransitionEnter和PageTransitionExit组件支持的事件：
 @Entry
 @Component
 struct PageTransitionExample1 {
-  @State scale: number = 1
-  @State opacity: number = 1
+  @State scale1: number = 1
+  @State opacity1: number = 1
   @State active: boolean = false
   build() {
   Column() {
@@ -79,19 +79,19 @@ struct PageTransitionExample1 {
       .onClick(() => {
         this.active = true
       })
-    }.scale({ x: this.scale }).opacity(this.opacity)
+    }.scale({ x: this.scale1 }).opacity(this.opacity1)
   }
 // 自定义方式1：完全自定义转场过程的效果
   pageTransition() {
     PageTransitionEnter({ duration: 1200, curve: Curve.Linear })
       .onEnter((type: RouteType, progress: number) => {
-        this.scale = 1
-        this.opacity = progress
+        this.scale1 = 1
+        this.opacity1 = progress
       }) // 进场过程中会逐帧触发onEnter回调，入参为动效的归一化进度(0% -- 100%)
     PageTransitionExit({ duration: 1500, curve: Curve.Ease })
       .onExit((type: RouteType, progress: number) => {
-        this.scale = 1 - progress
-        this.opacity = 1
+        this.scale1 = 1 - progress
+        this.opacity1 = 1
       }) // 退场过程中会逐帧触发onExit回调，入参为动效的归一化进度(0% -- 100%)
   }
 }
@@ -102,27 +102,27 @@ struct PageTransitionExample1 {
 @Entry
 @Component
 struct AExample {
-  @State scale: number = 1
-  @State opacity: number = 1
+  @State scale2: number = 1
+  @State opacity2: number = 1
   @State active: boolean = false
   build() {
     Column() {
       Navigator({ target: 'pages/index' ,type: NavigationType.Push}) {
         Image($r('app.media.bg2')).width("100%").height("100%")
       }
-    }.height("100%").width("100%").scale({ x: this.scale }).opacity(this.opacity)
+    }.height("100%").width("100%").scale({ x: this.scale2 }).opacity(this.opacity2)
   }
 // 自定义方式1：完全自定义转场过程的效果
   pageTransition() {
     PageTransitionEnter({ duration: 1200, curve: Curve.Linear })
       .onEnter((type: RouteType, progress: number) => {
-        this.scale = 1
-        this.opacity = progress
+        this.scale2 = 1
+        this.opacity2 = progress
       }) // 进场过程中会逐帧触发onEnter回调，入参为动效的归一化进度(0% -- 100%)
     PageTransitionExit({ duration: 1500, curve: Curve.Ease })
       .onExit((type: RouteType, progress: number) => {
-        this.scale = 1 - progress
-        this.opacity = 1
+        this.scale2 = 1 - progress
+        this.opacity2 = 1
       }) // 退场过程中会逐帧触发onExit回调，入参为动效的归一化进度(0% -- 100%)
   }
 }
@@ -137,8 +137,8 @@ struct AExample {
 @Entry
 @Component
 struct PageTransitionExample {
-  @State scale: number = 1
-  @State opacity: number = 1
+  @State scale1: number = 1
+  @State opacity1: number = 1
   @State active: boolean = false
 
   build() {
@@ -149,7 +149,7 @@ struct PageTransitionExample {
       .onClick(() => {
         this.active = true
       })
-    }.scale({ x: this.scale }).opacity(this.opacity)
+    }.scale({ x: this.scale1 }).opacity(this.opacity1)
   }
 
 // 自定义方式2：使用系统提供的多种默认效果(平移、缩放、透明度等)
@@ -168,8 +168,8 @@ struct PageTransitionExample {
 @Entry
 @Component
 struct PageTransitionExample1 {
-  @State scale: number = 1
-  @State opacity: number = 1
+  @State scale2: number = 1
+  @State opacity2: number = 1
   @State active: boolean = false
 
   build() {
@@ -180,7 +180,7 @@ struct PageTransitionExample1 {
       .onClick(() => {
         this.active = true
       })
-    }.scale({ x: this.scale }).opacity(this.opacity)
+    }.scale({ x: this.scale2 }).opacity(this.opacity2)
   }
 
 // 自定义方式2：使用系统提供的多种默认效果(平移、缩放、透明度等)

zh-cn/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md

@@ -26,7 +26,7 @@
 @Component
 struct AreaExample {
   @State value: string = 'Text'
-  @State size: string = ''
+  @State size1: string = ''
 
   build() {
     Column() {
@@ -37,7 +37,7 @@ struct AreaExample {
         })
         .onAreaChange((oldValue: Area, newValue: Area) => {
           console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`)
-          this.size = JSON.stringify(newValue)
+          this.size1 = JSON.stringify(newValue)
         })
       Text('new area is: \n' + this.size).margin({ right: 30, left: 30 })
     }