diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-span.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-span.md index 571a6dd406cb32dbe063708a03813b6eae3edee9..36bd2cae87bb31384245bd8f0bb9ace33d35f7a2 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-span.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-span.md @@ -12,7 +12,7 @@ ## 子组件 -支持子组件<span>。 +无 ## 属性 diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-toggle.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-toggle.md index 73eaf9b433414210b8c935c8f4452199fb578c30..45704a321874f48f2ff3ef4b5b7b9fe64c2e4ff2 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-toggle.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-toggle.md @@ -81,34 +81,51 @@ ```js // xxx.js export default { - data: { - toggle_list: [ - { "id":"1001", "name":"Living room", "checked":true }, - { "id":"1002", "name":"Bedroom", "checked":false }, - { "id":"1003", "name":"Second bedroom", "checked":false }, - { "id":"1004", "name":"Kitchen", "checked":false }, - { "id":"1005", "name":"Study", "checked":false }, - { "id":"1006", "name":"Garden", "checked":false }, - { "id":"1007", "name":"Bathroom", "checked":false }, - { "id":"1008", "name":"Balcony", "checked":false }, - ], - toggles: ["Living room","Bedroom","Kitchen","Study"], - idx: "" - }, - allclick(arg) { - this.idx = arg - }, - allchange(e) { - if (e.checked === true) { - for (var i = 0; i < this.toggle_list.length; i++) { - if (this.toggle_list[i].id === this.idx) { - this.toggle_list[i].checked = true - } else { - this.toggle_list[i].checked = false + data: { + toggle_list: [ + { + "id": "1001", "name": "Living room", "checked": true + }, + { + "id": "1002", "name": "Bedroom", "checked": false + }, + { + "id": "1003", "name": "Second bedroom", "checked": false + }, + { + "id": "1004", "name": "Kitchen", "checked": false + }, + { + "id": "1005", "name": "Study", "checked": false + }, + { + "id": "1006", "name": "Garden", "checked": false + }, + { + "id": "1007", "name": "Bathroom", "checked": false + }, + { + "id": "1008", "name": "Balcony", "checked": false + }, + ], + toggles: ["Living room", "Bedroom", "Kitchen", "Study"], + idx: "" + }, + allclick(arg) { + this.idx = arg; + }, + allchange(e) { + if (e.checked != true) { + return; + } + for (var i = 0; i < this.toggle_list.length; i++) { + if (this.toggle_list[i].id === this.idx) { + this.toggle_list[i].checked = true; + } else { + this.toggle_list[i].checked = false; + } } - } } - } } ``` diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-toolbar-item.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-toolbar-item.md index 14d552170a6fb1f46431b0bff81b55d68a67cddd..66ef1e82c5de238a67fde97adea3dc5ad6297ba2 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-toolbar-item.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-toolbar-item.md @@ -3,7 +3,7 @@ > **说明：** > 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -工具栏子组件。作为工具栏组件的子组件，用于展示工具栏上的一个操作选项。 +工具栏[toolbar](js-components-basic-toolbar.md)子组件。 用于展示工具栏上的一个操作选项。 ## 子组件 @@ -59,13 +59,13 @@ ```html - - - - - - - + + + + + + + ``` diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-swiper.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-swiper.md index 031a2d0c9a8a8a10c38d31db839304c52f899d92..c0db6e8c9ce3668558a09d4c6ffbc888d1b5d769 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-container-swiper.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-swiper.md @@ -12,7 +12,7 @@ ## 子组件 -支持除<list>之外的子组件。 +可以包含子组件。 ## 属性 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-row.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-row.md index 8376694073445f0b52b7f283be3a7b44cc2cb1e2..54c51fe6288d6b11bc989f0a1d5e0af02c3ec25f 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-row.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-row.md @@ -20,7 +20,7 @@ Row(value?:{space?: number | string }) | 参数名 | 参数类型 | 必填 | 参数描述 | | -------- | -------- | -------- | -------- | -| space | string \| number | 否 | 横向布局元素间距。
默认值：0 | +| space | string \| number | 否 | 横向布局元素间距。
默认值：0，单位vp | ## 属性 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-gesture-settings.md b/zh-cn/application-dev/reference/arkui-ts/ts-gesture-settings.md index 353f6ba375b7e5e05504a7ae0e41460151e4ef0b..dcc4bf1065fbf418faf35acfe9b4392ee82ee600 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-gesture-settings.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-gesture-settings.md @@ -38,7 +38,7 @@ ## 响应手势事件 -组件通过手势事件绑定不同GestureType的手势对象，各手势对象在响应手势操作的事件回调中提供手势相关信息。下面通过TapGesture手势对象的onAction事件响应点击事件，获取事件相关信息。其余手势对象的事件定义见各个手势对象章节。 +组件通过手势事件绑定不同GestureType的手势对象，各手势对象在响应手势操作的事件回调中提供手势相关信息。下面通过TapGesture手势对象的onAction事件响应点击事件，获取事件相关信息。其余手势对象的事件定义见各个手势对象章节。 若需绑定多种手势请使用 [组合手势](ts-combined-gestures.md)。 - TapGesture事件说明 | 名称 | 功能描述 | diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md index c89967bd0d471b0aefaa929337db50c57e4781a6..9a0caa9f125ab28009166ecebd0cf9d7dccc8eea 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md @@ -4,7 +4,7 @@ > 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -使用OffscreenCanvasRenderingContext2D在Canvas上进行离屏绘制，绘制对象可以是矩形、文本、图片等。离屏绘制是指将需要绘制的内容先绘制在缓存区，然后将其转换成图片，一次性绘制绘制到canvas上，加快了绘制速度。 +使用OffscreenCanvasRenderingContext2D在Canvas上进行离屏绘制，绘制对象可以是矩形、文本、图片等。离屏绘制是指将需要绘制的内容先绘制在缓存区，然后将其转换成图片，一次性绘制到canvas上，加快了绘制速度。 ## 接口 @@ -13,11 +13,11 @@ OffscreenCanvasRenderingContext2D(width: number, height: number, setting: Render **参数：** -| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | -| ------- | ---------------------------------------- | ---- | ---- | ------------------------------ | -| width | number | 是 | - | 离屏画布的宽度 | -| height | number | 是 | - | 离屏画布的高度 | -| setting | [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings) | 是 | - | 见RenderingContextSettings接口描述。 | +| 参数名 | 参数类型 | 必填 | 参数描述 | +| ------- | ------------------------------------------------------------ | ---- | ------------------------------------ | +| width | number | 是 | 离屏画布的宽度 | +| height | number | 是 | 离屏画布的高度 | +| setting | [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings) | 是 | 见RenderingContextSettings接口描述。 | ## 属性 @@ -846,7 +846,7 @@ fillText(text: string, x: number, y: number, maxWidth?: number): void | 参数 | 类型 | 必填 | 默认值 | 说明 | | -------- | ------ | ---- | ---- | --------------- | -| text | string | 是 | “” | 需要绘制的文本内容。 | +| text | string | 是 | "" | 需要绘制的文本内容。 | | x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 | | y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | | maxWidth | number | 否 | - | 指定文本允许的最大宽度。 | @@ -893,7 +893,7 @@ strokeText(text: string, x: number, y: number): void | 参数 | 类型 | 必填 | 默认值 | 描述 | | -------- | ------ | ---- | ---- | --------------- | -| text | string | 是 | “” | 需要绘制的文本内容。 | +| text | string | 是 | "" | 需要绘制的文本内容。 | | x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 | | y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | | maxWidth | number | 否 | - | 需要绘制的文本的最大宽度 。 | diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md b/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md index 62c664240b27b57982e3db85cfed4939589fb885..866b744c03c9ed21d9f270eb8462f1b8be433f67 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md @@ -12,7 +12,7 @@ | 名称 | 参数 | 参数描述 | | ---------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -| sharedTransition | id: string,
{
duration?: number,
curve?: Curve \| string,
delay?: number,
motionPath?:
{
path: string,
form?: number,
to?: number,
rotatable?: boolean
},
zIndex?: number,
type?: [SharedTransitionEffectType](ts-appendix-enums.md#sharedtransitioneffecttype)
} | 两个页面中id值相同且不为空字符串的组件即为共享元素，在页面转场时可显示共享元素转场动效。
-  id：设置组件的id。
-  duration：单位为毫秒，默认动画时长为1000毫秒。
- curve：默认曲线为Linear，有效值参见[Curve](ts-animatorproperty.md) 说明。
- delay：单位为毫秒，默认不延时播放。
- motionPath：运动路径信息。
- path：设置路径。
- from：设置起始值。
- to：设置终止值。
- rotatable：是否旋转。
- zIndex：设置Z轴。
- type：动画类型。 | +| sharedTransition | id: string,
{
 duration?: number,
 curve?: Curve \| string,
 delay?: number,
 motionPath?:
{
 path: string,
 form?: number,
 to?: number,
 rotatable?: boolean
},
zIndex?: number,
type?: [SharedTransitionEffectType](ts-appendix-enums.md#sharedtransitioneffecttype)
} | 两个页面中id值相同且不为空字符串的组件即为共享元素，在页面转场时可显示共享元素转场动效。
- id：设置组件的id。
- duration：单位为毫秒，默认动画时长为1000毫秒。
- curve：默认曲线为Linear，有效值参见[Curve](ts-animatorproperty.md) 说明。
- delay：单位为毫秒，默认不延时播放。
- motionPath：运动路径信息。
- path：设置路径。
- from：设置起始值。
- to：设置终止值。
- rotatable：是否旋转。
- zIndex：设置Z轴。
- type：动画类型。 | ## 示例 diff --git a/zh-cn/application-dev/ui/arkui-overview.md b/zh-cn/application-dev/ui/arkui-overview.md index b3244601362b918dda4d9666016607459dab4003..3d809b82f2c6fbc107a710376dc63b3fd2800b60 100644 --- a/zh-cn/application-dev/ui/arkui-overview.md +++ b/zh-cn/application-dev/ui/arkui-overview.md @@ -14,7 +14,7 @@ ## 主要特征 -- UI组件：方舟开发框架不仅提供了多种基础组件，如文本显示、图片显示、按键交互等，也提供了支持视频播放能力的媒体组件。并且针对不同类型设备进行了组件设计，提供了组件在不同平台上的样式适配能力，此种组件称为“多态组件”。 +- UI组件：方舟开发框架不仅提供了多种基础组件， 例如文本、图片、按钮等 ，也提供了支持视频播放能力的媒体组件。并且针对不同类型设备进行了组件设计，提供了组件在不同平台上的样式适配能力，此种组件称为“多态组件”。 - 布局：UI界面设计离不开布局的参与。方舟开发框架提供了多种布局方式，不仅保留了经典的弹性布局能力，也提供了列表、宫格、栅格布局和适应多分辨率场景开发的原子布局能力。 diff --git a/zh-cn/application-dev/ui/figures/custom-dialog-demo.gif b/zh-cn/application-dev/ui/figures/custom-dialog-demo.gif new file mode 100644 index 0000000000000000000000000000000000000000..8d0979823e13f959b2a4828f479af7bbc03f69f3 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/custom-dialog-demo.gif differ diff --git a/zh-cn/application-dev/ui/js-framework-syntax-js.md b/zh-cn/application-dev/ui/js-framework-syntax-js.md index 8233a1903b741f09f847ec542912db31c55bf8da..6a1484b0d9d49c295ff7c99390d547d4bc589c81 100644 --- a/zh-cn/application-dev/ui/js-framework-syntax-js.md +++ b/zh-cn/application-dev/ui/js-framework-syntax-js.md @@ -164,8 +164,8 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 images: [ { src: '/common/frame1.png' }, { src: '/common/frame2.png' }, - { src: '/common/frame3.png' }, - ], + { src: '/common/frame3.png' } + ] }, handleClick() { const animator = this.$refs.animator; // 获取ref属性为animator的DOM元素 @@ -196,8 +196,8 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语 images: [ { src: '/common/frame1.png' }, { src: '/common/frame2.png' }, - { src: '/common/frame3.png' }, - ], + { src: '/common/frame3.png' } + ] }, handleClick() { const animator = this.$element('animator'); // 获取id属性为animator的DOM元素 diff --git a/zh-cn/application-dev/ui/ts-component-based-customdialog.md b/zh-cn/application-dev/ui/ts-component-based-customdialog.md index 13082cfa353e705fcd464a21cfba17b7d0b61f21..f8b04e394c8a802479d0717b060142d8519ddb88 100644 --- a/zh-cn/application-dev/ui/ts-component-based-customdialog.md +++ b/zh-cn/application-dev/ui/ts-component-based-customdialog.md @@ -47,3 +47,5 @@ struct CustomDialogUser { } } ``` + +![custom-dialog-demo](figures/custom-dialog-demo.gif) \ No newline at end of file diff --git a/zh-cn/application-dev/ui/ui-js-components-path2d.md b/zh-cn/application-dev/ui/ui-js-components-path2d.md index da7e1bc8c413d116b1e31a3459ea5abf2ce014ad..636c694e48377be4ca33691f314ef53c0806e498 100644 --- a/zh-cn/application-dev/ui/ui-js-components-path2d.md +++ b/zh-cn/application-dev/ui/ui-js-components-path2d.md @@ -17,58 +17,62 @@ ```css /* xxx.css */ -.container{ - flex-direction: column; - background-color: #F1F3F5; - align-items: center; - justify-content: center; - width: 100%; +.container { + flex-direction: column; + background-color: #F1F3F5; + align-items: center; + justify-content: center; + width: 100%; } -canvas{ - width: 600px; - height: 600px; - background-color: #fdfdfd; - border: 5px solid red; + +canvas { + width: 600px; + height: 600px; + background-color: #fdfdfd; + border: 5px solid red; } ``` ```js // xxx.js import prompt from '@system.prompt'; + export default { - onShow(){ - let ctx = this.$refs.canvas.getContext('2d',{antialias: true}); - let path = ctx.createPath2D(); - // 房顶 - path.moveTo(10, 300); - path.lineTo(210,100); - path.lineTo(410, 300); - // 屋子 - path.moveTo(10, 300); - path.lineTo(410, 300); - path.lineTo(410, 600); - path.lineTo(10, 600); - path.closePath(); - // 窗子 - path.moveTo(50, 450); - path.bezierCurveTo(70, 350, 130, 350, 150, 450); - path.closePath(); - // 门 - path.moveTo(250, 450); - path.rect(250, 450, 350, 600); - path.closePath(); - // 烟囱 - path.moveTo(365, 250); - path.ellipse(310, 215, 30, 130,0, Math.PI * 0.04, Math.PI * 1.1, 1); - // 树 - path.moveTo(485, 450); - path.quadraticCurveTo(510, 500, 485, 600); - path.moveTo(550, 450); - path.quadraticCurveTo(525, 500, 550, 600); - path.moveTo(600, 535); - path.arc(520, 450, 85, 0, 6); - ctx.stroke(path); - }, + onShow() { + let ctx = this.$refs.canvas.getContext('2d', { + antialias: true + }); + let path = ctx.createPath2D(); + // 房顶 + path.moveTo(10, 300); + path.lineTo(210, 100); + path.lineTo(410, 300); + // 屋子 + path.moveTo(10, 300); + path.lineTo(410, 300); + path.lineTo(410, 600); + path.lineTo(10, 600); + path.closePath(); + // 窗子 + path.moveTo(50, 450); + path.bezierCurveTo(70, 350, 130, 350, 150, 450); + path.closePath(); + // 门 + path.moveTo(250, 450); + path.rect(250, 450, 350, 600); + path.closePath(); + // 烟囱 + path.moveTo(365, 250); + path.ellipse(310, 215, 30, 130, 0, Math.PI * 0.04, Math.PI * 1.1, 1); + // 树 + path.moveTo(485, 450); + path.quadraticCurveTo(510, 500, 485, 600); + path.moveTo(550, 450); + path.quadraticCurveTo(525, 500, 550, 600); + path.moveTo(600, 535); + path.arc(520, 450, 85, 0, 6); + ctx.stroke(path); + } } ``` @@ -84,46 +88,49 @@ export default { ```html
- -
- {{ isAdd }} - {{textName}} -
+ +
+ {{ isAdd }} + {{ textName }} +
``` ```css /* xxx.css */ -.container{ - flex-direction: column; - background-color: #F1F3F5; - align-items: center; - justify-content: center; - width: 100%; +.container { + flex-direction: column; + background-color: #F1F3F5; + align-items: center; + justify-content: center; + width: 100%; } -canvas{ - width: 600px; - height: 600px; - background-color: #fdfdfd; - border: 5px solid red; + +canvas { + width: 600px; + height: 600px; + background-color: #fdfdfd; + border: 5px solid red; } -.content{ - width: 80%; - margin-top: 50px; - margin-bottom: 50px; - display: flex; - flex-wrap: wrap; - justify-content: space-around; + +.content { + width: 80%; + margin-top: 50px; + margin-bottom: 50px; + display: flex; + flex-wrap: wrap; + justify-content: space-around; } -text{ - width: 150px; - height: 80px; - color: white; - border-radius: 20px; - text-align: center; - background-color: #6060e7; - margin-bottom: 30px; + +text { + width: 150px; + height: 80px; + color: white; + border-radius: 20px; + text-align: center; + background-color: #6060e7; + margin-bottom: 30px; } ``` @@ -131,58 +138,66 @@ text{ ```js // xxx.js import prompt from '@system.prompt'; + export default { - data:{ - ctx: null, - path1: null, - path2: null, - path3: null, - isAdd: "addPath2", - isChange: true, - textName: 'change' - }, - onShow(){ - this.ctx = this.$refs.canvas.getContext('2d',{antialias:true}); - this.path1 = this.ctx.createPath2D(); - this.path1.moveTo(200, 200); - this.path1.lineTo(400, 200); - this.path1.lineTo(400, 400); - this.path1.lineTo(200, 400); - this.path1.closePath(); - this.path2 = this.ctx.createPath2D(); - this.path2.arc(300, 300, 75, 0, 6.28) - this.ctx.stroke(this.path1); - }, - addPath(){ - if(this.isAdd == "addPath2"){ - this.ctx.clearRect(0,0,600,600) - this.ctx.beginPath(); - this.path2.addPath(this.path1) - this.ctx.stroke(this.path2); - this.isAdd = "clearPath2" - }else{ - this.ctx.clearRect(0,0,600,600) - this.ctx.stroke(this.path1); - this.isAdd = "addPath2" - } - }, - setTransform(){ - if(this.isChange){ - this.ctx.clearRect(0,0,600,600) - this.path3 = this.ctx.createPath2D(); - this.path3.arc(150, 150, 100, 0, 6.28) - this.path3.setTransform(2, 0.1, 0.1, 2, 0,0); - this.ctx.stroke(this.path3); - this.isChange = !this.isChange; - this.textName = "back" - }else{ - this.ctx.clearRect(0,0,600,600) - this.path3.setTransform(0.5, -0.1, -0.1, 0.5, 0,0); - this.ctx.stroke(this.path3); - this.isChange = !this.isChange; - this.textName = "change" + data: { + ctx: null, + path1: null, + path2: null, + path3: null, + isAdd: "addPath2", + isChange: true, + textName: 'change' + }, + onShow() { + this.ctx = this.$refs.canvas.getContext('2d', { + antialias: true + }); + this.path1 = this.ctx.createPath2D(); + // 正方形 + this.path1.moveTo(200, 200); + this.path1.lineTo(400, 200); + this.path1.lineTo(400, 400); + this.path1.lineTo(200, 400); + this.path1.closePath(); + this.path2 = this.ctx.createPath2D(); + // 圆形 + this.path2.arc(300, 300, 75, 0, 6.28); + this.ctx.stroke(this.path1); + }, + addPath() { + if (this.isAdd == "addPath2") { + // 删除指定指定区域的绘制内容 + this.ctx.clearRect(0, 0, 600, 600); + this.ctx.beginPath(); + // 将另一个的路径添加到当前路径对象中 + this.path2.addPath(this.path1); + this.ctx.stroke(this.path2); + this.isAdd = "clearPath2"; + } else { + this.ctx.clearRect(0, 0, 600, 600); + this.ctx.stroke(this.path1); + this.isAdd = "addPath2"; + } + }, + setTransform() { + if (this.isChange) { + this.ctx.clearRect(0, 0, 600, 600); + this.path3 = this.ctx.createPath2D(); + this.path3.arc(150, 150, 100, 0, 6.28); + // 重置现有的变换矩阵并创建新的变换矩阵 + this.path3.setTransform(2, 0.1, 0.1, 2, 0, 0); + this.ctx.stroke(this.path3); + this.isChange = !this.isChange; + this.textName = "back" + } else { + this.ctx.clearRect(0, 0, 600, 600); + this.path3.setTransform(0.5, -0.1, -0.1, 0.5, 0, 0); + this.ctx.stroke(this.path3); + this.isChange = !this.isChange; + this.textName = "change"; + } } - }, } ``` diff --git a/zh-cn/application-dev/ui/ui-ts-building-category-grid-layout.md b/zh-cn/application-dev/ui/ui-ts-building-category-grid-layout.md index 51ee15b3e6c18b9b51340a51c0b54f133ce6700d..1f8e88029e8a192fbed74060f3c72d1e21d2357b 100644 --- a/zh-cn/application-dev/ui/ui-ts-building-category-grid-layout.md +++ b/zh-cn/application-dev/ui/ui-ts-building-category-grid-layout.md @@ -320,7 +320,7 @@ } ``` - 自定义组件提供了两个生命周期的回调接口aboutToAppear和aboutToDisappear。aboutToAppear的执行时机在创建自定义组件后，执行自定义组件build方法之前。aboutToDisappear在自定义组件的去初始化的时机执行。 + 自定义组件提供了两个生命周期的回调接口aboutToAppear和aboutToDisappear。aboutToAppear的执行时机在创建自定义组件后，执行自定义组件build方法之前。aboutToDisappear在自定义组件销毁之前的时机执行。 ![zh-cn_image_0000001215113569](figures/zh-cn_image_0000001215113569.png) diff --git a/zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md b/zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md index add3021585976afbccfa75de3caf2761ef1bf50c..f6159c9d12c3b8a25232ef70b2a2339c6bba41a5 100644 --- a/zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md +++ b/zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md @@ -130,7 +130,7 @@ listener.on('change', onPortrait) } aboutToAppear() { - portraitFunc = this.onPortrait.bind(this) //bind current js instance + portraitFunc = this.onPortrait.bind(this) //绑定当前应用实例 this.listener.on('change', portraitFunc) }