diff --git a/zh-cn/application-dev/database/database-mdds-overview.md b/zh-cn/application-dev/database/database-mdds-overview.md index 246117ea6c4f9241ad1140695615df6e2ef476c4..613f20f6eb82f4c0216136abbd6122505a08bda4 100644 --- a/zh-cn/application-dev/database/database-mdds-overview.md +++ b/zh-cn/application-dev/database/database-mdds-overview.md @@ -27,8 +27,8 @@ 分布式数据服务提供了两种同步方式：**手动同步**和**自动同步**。 - - **手动同步：**由应用程序调用sync接口来触发，需要指定同步的设备列表和同步模式。同步模式分为PULL_ONLY（将远端数据拉到本端）、PUSH_ONLY（将本端数据推送到远端）和PUSH_PULL（将本端数据推送到远端同时也将远端数据拉取到本端）。内部接口支持按条件过滤同步，将符合条件的数据同步到远端。 - - **自动同步：**包括全量同步和按条件订阅同步。全量同步由分布式数据库自动将本端数据推送到远端，同时也将远端数据拉取到本端来完成数据同步，同步时机包括设备上线、应用程序更新数据等，应用不需要主动调用sync接口；内部接口支持按条件订阅同步，将远端符合订阅条件的数据自动同步到本端。 + - **手动同步**：由应用程序调用sync接口来触发，需要指定同步的设备列表和同步模式。同步模式分为PULL_ONLY（将远端数据拉到本端）、PUSH_ONLY（将本端数据推送到远端）和PUSH_PULL（将本端数据推送到远端同时也将远端数据拉取到本端）。内部接口支持按条件过滤同步，将符合条件的数据同步到远端。 + - **自动同步**：包括全量同步和按条件订阅同步。全量同步由分布式数据库自动将本端数据推送到远端，同时也将远端数据拉取到本端来完成数据同步，同步时机包括设备上线、应用程序更新数据等，应用不需要主动调用sync接口；内部接口支持按条件订阅同步，将远端符合订阅条件的数据自动同步到本端。 - **单版本分布式数据库** 单版本是指数据在本地保存是以单个KV条目为单位的方式保存，对每个Key最多只保存一个条目项，当数据在本地被用户修改时，不管它是否已经被同步出去，均直接在这个条目上进行修改。同步也以此为基础，按照它在本地被写入或更改的顺序将当前最新一次修改逐条同步至远端设备。 diff --git a/zh-cn/application-dev/quick-start/use-wizard-to-create-project.md b/zh-cn/application-dev/quick-start/use-wizard-to-create-project.md index c5e42eb8cca617848e35fe77bed313ba0482fc8e..cff2af6350fa1ded27ab98651bd391615d360379 100644 --- a/zh-cn/application-dev/quick-start/use-wizard-to-create-project.md +++ b/zh-cn/application-dev/quick-start/use-wizard-to-create-project.md @@ -38,9 +38,10 @@ - **Development mode**：选择开发模式，部分模板支持低代码开发，可选择Super Visual。 - **Language：**支持的开发语言。 - **Compatible API Version**：兼容的SDK最低版本。 + > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > OpenHarmony工程如果配置了compileSdkVersion 7以上，对应模块默认使用方舟编译器进行编译，如果要修改编译方式为非方舟编译，在模块级build.gradle的**ohos**闭包中添加**arkEnable false**字段。 - **Device Type**：该工程模板支持的设备类型。 ![zh-cn_image_0000001196050928](figures/zh-cn_image_0000001196050928.png) - + 4. 点击**Finish**，工具会自动生成示例代码和相关资源，等待工程创建完成。 diff --git a/zh-cn/application-dev/reference/apis/Readme-CN.md b/zh-cn/application-dev/reference/apis/Readme-CN.md index 35f6c6cbda9e622d18ffdfbfac7fce9f654c96c8..a1cff331823c590334d245e6b898abe7c94f0220 100644 --- a/zh-cn/application-dev/reference/apis/Readme-CN.md +++ b/zh-cn/application-dev/reference/apis/Readme-CN.md @@ -67,5 +67,7 @@ - [URL字符串解析](js-apis-url.md) - [URI字符串解析](js-apis-uri.md) - [util工具函数](js-apis-util.md) - - [xml文本转换](js-apis-xml.md) - - [启动一个worker](js-apis-worker.md) \ No newline at end of file + - [xml解析与生成](js-apis-xml.md) + - [xml转换JavaScript](js-apis-convertxml.md) + - [启动一个worker](js-apis-worker.md) + diff --git a/zh-cn/application-dev/reference/apis/js-apis-convertxml.md b/zh-cn/application-dev/reference/apis/js-apis-convertxml.md new file mode 100644 index 0000000000000000000000000000000000000000..66aa53a291fb54817dbc86fb8dd80744b0a5f277 --- /dev/null +++ b/zh-cn/application-dev/reference/apis/js-apis-convertxml.md @@ -0,0 +1,80 @@ +# xml转换JavaScript + +> ![icon-note.gif](D:\gitee\docs\zh-cn\application-dev\reference\apis\public_sys-resources\icon-note.gif) **说明：** +> 本模块首批接口从API version 8开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。 + + +## 导入模块 + +``` +import convertXml from '@ohos.convertxml' +``` + + +## 权限 + +无 + +## ConvertXML + + +### convert + +convert(xml: string, options?: ConvertOptions) : Object + +转化xml文本为JavaScript对象。 + + +- 参数： + + | 参数名 | 类型 | 必填 | 说明 | + | ------- | --------------------------------- | ---- | ------------------ | + | xml | string | 是 | 传入的xml文本。 | + | options | [ConvertOptions](#convertoptions) | 否 | 用户可进行的选项。 | + +- 返回值： + + | 类型 | 说明 | + | ------ | ---------------------------- | + | string | 处理后返回的JavaScript对象。 | + +- 示例： + + ``` + import convertXml from '@ohos.convertxml' + var xml = + '' + + '' + + ' Happy' + + ' Work' + + ' Play' + + ''; + var convertxml = new convertXml.ConvertXML(); + var result1 = convertxml.convert(xml, {compact: false, spaces: 0}); + console.log(result1) + ``` + + +## ConvertOptions + +| 名称 | 参数类型 | 必填 | 说明 | +| ----------------- | -------- | ---- | ----------------------------------------------------------- | +| trim | boolean | 否 | 是否修剪位于文本前后的空白字符，默认false。 | +| ignoreDeclaration | boolean | 否 | 是否忽略xml写入声明指示，默认false。 | +| ignoreInstruction | boolean | 否 | 是否忽略xml的写入处理指令，默认false。 | +| ignoreAttributes | boolean | 否 | 是否跨多行打印属性并缩进属性，默认false。 | +| ignoreComment | boolean | 否 | 是否忽略元素的注释信息，默认false。 | +| ignoreCdata | boolean | 否 | 是否忽略元素的CData信息，默认false。 | +| ignoreDoctype | boolean | 否 | 是否忽略元素的Doctype信息，默认false。 | +| ignoreText | boolean | 否 | 是否忽略元素的文本信息，默认false。 | +| declarationKey | string | 否 | 用于输出对象中declaration的属性键的名称，默认_declaration。 | +| instructionKey | string | 否 | 用于输出对象中instruction的属性键的名称，默认_instruction。 | +| attributesKey | string | 否 | 用于输出对象中attributes的属性键的名称，默认_attributes。 | +| textKey | string | 否 | 用于输出对象中text的属性键的名称，默认_text。 | +| cdataKey | string | 否 | 用于输出对象中cdata的属性键的名称，默认_cdata。 | +| doctypeKey | string | 否 | 用于输出对象中doctype的属性键的名称，默认_doctype。 | +| commentKey | string | 否 | 用于输出对象中comment的属性键的名称，默认_comment。 | +| parentKey | string | 否 | 用于输出对象中parent的属性键的名称，默认_parent。 | +| typeKey | string | 否 | 用于输出对象中type的属性键的名称，默认_type。 | +| nameKey | string | 否 | 用于输出对象中name的属性键的名称，默认_name。 | +| elementsKey | string | 否 | 用于输出对象中elements的属性键的名称，默认_elements。 | \ No newline at end of file diff --git a/zh-cn/application-dev/reference/apis/js-apis-xml.md b/zh-cn/application-dev/reference/apis/js-apis-xml.md index ab941b90410da1cfc263da8c126cd8c1f2037d98..d27c2acd6cab7fe4ac58b1f88bd099c02cf88c4f 100644 --- a/zh-cn/application-dev/reference/apis/js-apis-xml.md +++ b/zh-cn/application-dev/reference/apis/js-apis-xml.md @@ -1,4 +1,4 @@ -# xml文本转换 +# xml解析与生成 > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > 本模块首批接口从API version 8开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。 @@ -7,7 +7,7 @@ ## 导入模块 ``` -import convertXml from '@ohos.convertxml' +import xml from '@ohos.xml'; ``` @@ -16,68 +16,6 @@ import convertXml from '@ohos.convertxml' 无 -## ConvertXML - - -### convert - -convert(xml: string, options?: ConvertOptions) : Object - -转化xml文本为JavaScript对象。 - - -- 参数： - | 参数名 | 类型 | 必填 | 说明 | - | -------- | -------- | -------- | -------- | - | xml | string | 是 | 传入的xml文本, | - | options | [ConvertOptions](#convertoptions) | 否 | 用户可进行的选项 | - -- 返回值： - | 类型 | 说明 | - | -------- | -------- | - | string | 处理后返回的JavaScript对象。 | - -- 示例： - ``` - import convertXml from '@ohos.convertxml' - var xml = - '' + - '' + - ' Happy' + - ' Work' + - ' Play' + - ''; - var convertxml = new convertXml.ConvertXML(); - var result1 = convertxml.convert(xml, {compact: false, spaces: 0}); - console.log(result1) - ``` - - -## ConvertOptions - -| 名称 | 参数类型 | 必填 | 说明 | -| -------- | -------- | -------- | -------- | -| trim | boolean | 否 | 是否修剪位于文本前后的空白字符，默认false。 | -| ignoreDeclaration | boolean | 否 | 是否忽略xml写入声明指示，默认false。 | -| ignoreInstruction | boolean | 否 | 是否忽略xml的写入处理指令，默认false。 | -| ignoreAttributes | boolean | 否 | 是否跨多行打印属性并缩进属性，默认false。 | -| ignoreComment | boolean | 否 | 是否忽略元素的注释信息，默认false。 | -| ignoreCdata | boolean | 否 | 是否忽略元素的CData信息，默认false。 | -| ignoreDoctype | boolean | 否 | 是否忽略元素的Doctype信息，默认false。 | -| ignoreText | boolean | 否 | 是否忽略元素的文本信息，默认false。 | -| declarationKey | string | 否 | 用于输出对象中declaration的属性键的名称，默认_declaration。 | -| instructionKey | string | 否 | 用于输出对象中instruction的属性键的名称，默认_instruction。 | -| attributesKey | string | 否 | 用于输出对象中attributes的属性键的名称，默认_attributes。 | -| textKey | string | 否 | 用于输出对象中text的属性键的名称，默认_text。 | -| cdataKey | string | 否 | 用于输出对象中cdata的属性键的名称，默认_cdata。 | -| doctypeKey | string | 否 | 用于输出对象中doctype的属性键的名称，默认_doctype。 | -| commentKey | string | 否 | 用于输出对象中comment的属性键的名称，默认_comment。 | -| parentKey | string | 否 | 用于输出对象中parent的属性键的名称，默认_parent。 | -| typeKey | string | 否 | 用于输出对象中type的属性键的名称，默认_type。 | -| nameKey | string | 否 | 用于输出对象中name的属性键的名称，默认_name。 | -| elementsKey | string | 否 | 用于输出对象中elements的属性键的名称，默认_elements。 | - - ## XmlSerializer @@ -97,7 +35,7 @@ XmlSerializer的构造函数。 ``` import xml form '@ohos.xml' new XmlSerializer(buffer: ArrayBuffer | DataView, encoding?: string) - + var arrayBuffer = new ArrayBuffer(1024); var bufView = new DataView(arrayBuffer); var thatSer = new xml.XmlSerializer(bufView); @@ -120,7 +58,7 @@ setAttributes(name: string, value: string)：void ``` import xml form '@ohos.xml' setAttributes(name: string, value: string) - + var thatSer = new xml.XmlSerializer(bufView); thatSer.setAttributes("importance", "high"); ``` @@ -141,7 +79,7 @@ addEmptyElement(name: string): void ``` import xml form '@ohos.xml' addEmptyElement(name: string): void - + var thatSer = new xml.XmlSerializer(bufView); thatSer.addEmptyElement("b"); // => ``` @@ -157,7 +95,7 @@ setDeclaration(): void ``` import xml form '@ohos.xml' setDeclaration()：void - + var thatSer = new xml.XmlSerializer(bufView); thatSer.setDeclaration() // => ; ``` @@ -178,7 +116,7 @@ XmlSerializer的构造函数。 ``` import xml form '@ohos.xml' startElement(name:string):void - + var arrayBuffer = new ArrayBuffer(1024); var thatSer = new xml.XmlSerializer(arrayBuffer); thatSer.startElement("notel"); @@ -196,7 +134,7 @@ endElement(): void ``` import xml form '@ohos.xml' endElement() - + var thatSer = new xml.XmlSerializer(bufView); thatSer.setNamespace("h", "http://www.w3.org/TR/html4/"); thatSer.startElement("table"); @@ -222,7 +160,7 @@ setNamespace(prefix: string, namespace: string): void ``` import xml form '@ohos.xml' setNamespace(prefix:string,namespace:string):void - + var arrayBuffer = new ArrayBuffer(1024); var thatSer = new xml.XmlSerializer(arrayBuffer); thatSer.setDeclaration(); @@ -246,7 +184,7 @@ setCommnet(text: string): void ``` import xml form '@ohos.xml' setCommnet(text: string):void - + var arrayBuffer = new ArrayBuffer(1024); var thatSer = new xml.XmlSerializer(arrayBuffer); thatSer.startElement("note"); @@ -270,7 +208,7 @@ setCData(text: string): void ``` import xml form '@ohos.xml' setCData(text: string) :void - + var arrayBuffer = new ArrayBuffer(1028); var thatSer = new xml.XmlSerializer(arrayBuffer); thatSer.setCData('root SYSTEM') // => ''; @@ -292,7 +230,7 @@ setText(text: string): void ``` import xml form '@ohos.xml' setText(text: string): void - + var arrayBuffer = new ArrayBuffer(1024); var thatSer = new xml.XmlSerializer(arrayBuffer); thatSer.startElement("note"); @@ -317,7 +255,7 @@ setDocType(text: string): void ``` import xml form '@ohos.xml' setDocType(text: string):void - + var arrayBuffer = new ArrayBuffer(1024); var thatSer = new xml.XmlSerializer(arrayBuffer); thatSer.setDocType('root SYSTEM'); // => ''; @@ -343,7 +281,7 @@ constructor(buffer: ArrayBuffer | DataView, encoding?: string) ``` import xml form '@ohos.xml' new (buffer: ArrayBuffer | DataView, encoding?: string) - + var strXml = '' + '' + @@ -376,7 +314,7 @@ parse(option: ParseOptions): void ``` import xml form '@ohos.xml' parse(option: ParseOptions): void - + var strXml = '' + '' + diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/Image1.gif b/zh-cn/application-dev/reference/arkui-ts/figures/Image1.gif index 05ad0a8aa0ae63ae9193aa1c9b3f943f060220da..21391680f6080b39cced050c88087a0d241952d9 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/Image1.gif and b/zh-cn/application-dev/reference/arkui-ts/figures/Image1.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/actionsheet.gif b/zh-cn/application-dev/reference/arkui-ts/figures/actionsheet.gif index bc2226ea26f489db1badf5749dba5b291ac02820..502888c25bb21b3803858f9c436cca23d9dc29d0 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/actionsheet.gif and b/zh-cn/application-dev/reference/arkui-ts/figures/actionsheet.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/divider.png b/zh-cn/application-dev/reference/arkui-ts/figures/divider.png index f2deeb8445fe0f3b66d2b0facbf9e0f0ed9911ca..857e773f72d0cd7cd9ae13f50aa843a11aae4f97 100644 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/divider.png and b/zh-cn/application-dev/reference/arkui-ts/figures/divider.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md index 2864a2f12e44e889da6d632f2cd9d977e08b6f75..16c26fd80771ea1586cad5815a211e04c1e43785 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md @@ -2827,7 +2827,7 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时 @Component struct Transform { private settings: RenderingContextSettings = new RenderingContextSettings(true,true) - private context: RenderingContext = new RenderingContext(this.settings) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md index a02c85282338c2af73265fdb24c8182f469674b4..5133d246a5ab8fe433a70e49eb1175f3d195f862 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md @@ -79,7 +79,7 @@ Canvas\(context: CanvasRenderingContext2D\) @Component struct CanvasExample { private settings: RenderingContextSettings = new RenderingContextSettings(true,true) - private context: RenderingContext = new RenderingContext(this.settings) + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-actionsheet.md b/zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-actionsheet.md index 90478697112b3ba0c8c70b30a159938b1f909024..7ccc91d0fcca230e729615ff877cefe7a11745f1 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-actionsheet.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-actionsheet.md @@ -204,9 +204,9 @@ struct ActionSheetExapmle { }, sheets: [ { - title: 'Apples', + title: 'apples', action: () => { - console.error('Apples') + console.error('apples') } }, { @@ -230,5 +230,5 @@ struct ActionSheetExapmle { } ``` -![](figures/actionsheet.gif) + diff --git a/zh-cn/application-dev/ui/arkui-overview.md b/zh-cn/application-dev/ui/arkui-overview.md index a0c44ea0bf989afe2625027f3ef44f6f4e9f6d9e..f55671fc3c5b3780750909004a6035636122969c 100644 --- a/zh-cn/application-dev/ui/arkui-overview.md +++ b/zh-cn/application-dev/ui/arkui-overview.md @@ -7,7 +7,7 @@ ## 基本概念 -- **组件：**组件是界面搭建与显示的最小单位。开发者通过多种组件的组合，构建出满足自身应用诉求的完整界面。 +- **组件**：组件是界面搭建与显示的最小单位。开发者通过多种组件的组合，构建出满足自身应用诉求的完整界面。 - **页面**：page页面是方舟开发框架最小的调度分割单位。开发者可以将应用设计为多个功能页面，每个页面进行单独的文件管理，并通过路由API实现页面的调度管理，以实现应用内功能的解耦。 @@ -16,15 +16,15 @@ - **多种组件**：方舟开发框架不仅提供了多种基础组件，如文本显示、图片显示、按键交互等，也提供了支持视频播放能力的媒体组件。并且针对不同类型设备进行了组件设计，提供了组件在不同平台上的样式适配能力，此种组件称为“多态组件”。 -- **布局计算：**UI界面设计离不开布局的参与。方舟开发框架提供了多种布局方式，不仅保留了经典的弹性布局能力，也提供了列表、宫格、栅格布局和适应多分辨率场景开发的原子布局能力。 +- **布局计算**：UI界面设计离不开布局的参与。方舟开发框架提供了多种布局方式，不仅保留了经典的弹性布局能力，也提供了列表、宫格、栅格布局和适应多分辨率场景开发的原子布局能力。 -- **动画能力：**方舟开发框架对于UI界面的美化，除了组件内置动画效果外，也提供了属性动画、转场动画和自定义动画能力。 +- **动画能力**：方舟开发框架对于UI界面的美化，除了组件内置动画效果外，也提供了属性动画、转场动画和自定义动画能力。 -- **UI交互：**方舟开发框架提供了多种交互能力，满足应用在不同平台通过不同输入设备均可正常进行UI交互响应，默认适配了触摸手势、遥控器、鼠标等输入操作，同时也提供事件通知能力。 +- **UI交互**：方舟开发框架提供了多种交互能力，满足应用在不同平台通过不同输入设备均可正常进行UI交互响应，默认适配了触摸手势、遥控器、鼠标等输入操作，同时也提供事件通知能力。 -- **绘制：**方舟开发框架提供了多种绘制能力，以满足开发者绘制自定义形状的需求，支持图形绘制、颜色填充、文本绘制、图片绘制等。 +- **绘制**：方舟开发框架提供了多种绘制能力，以满足开发者绘制自定义形状的需求，支持图形绘制、颜色填充、文本绘制、图片绘制等。 -- **平台API通道：**方舟开发框架提供了API扩展机制，平台能力通过此种机制进行封装，提供风格统一的JS接口。 +- **平台API通道**：方舟开发框架提供了API扩展机制，平台能力通过此种机制进行封装，提供风格统一的JS接口。 ## 选择方案 diff --git a/zh-cn/application-dev/ui/ts-component-based-component.md b/zh-cn/application-dev/ui/ts-component-based-component.md index c17df6e00a0c8aeceb367a49430597e5094df8b9..5c61df4dc74f5d83edf238b3046025b7c96bd601 100644 --- a/zh-cn/application-dev/ui/ts-component-based-component.md +++ b/zh-cn/application-dev/ui/ts-component-based-component.md @@ -1,6 +1,6 @@ # @Component -**@Component**装饰的**struct**表示该结构体具有组件化能力，能够成为一个独立的组件，这种类型的组件也称为自定义组件。 +**@Component** 装饰的**struct**表示该结构体具有组件化能力，能够成为一个独立的组件，这种类型的组件也称为自定义组件。 该组件可以组合其他组件，它通过实现**build**方法来描述UI结构，其必须符合**Builder**的接口约束，该接口定义如下： @@ -16,13 +16,13 @@ interface Builder { 用户定义的组件具有以下特点： -- **可组合：**允许开发人员组合使用内置组件和其他组件，以及公共属性和方法； +- **可组合**：允许开发人员组合使用内置组件和其他组件，以及公共属性和方法； -- **可重用：**可以被其他组件重用，并作为不同的实例在不同的父组件或容器中使用； +- **可重用**：可以被其他组件重用，并作为不同的实例在不同的父组件或容器中使用； -- **有生命周期：**生命周期的回调方法可以在组件中配置，用于业务逻辑处理； +- **有生命周期**：生命周期的回调方法可以在组件中配置，用于业务逻辑处理； -- **数据驱动更新：**可以由状态数据驱动，实现UI自动更新。 +- **数据驱动更新**：可以由状态数据驱动，实现UI自动更新。 组件生命周期主要包括**aboutToAppear**和**aboutToDisappear**回调函数，有关规范，请参见“[组件生命周期回调函数](../ui/ts-custom-component-lifecycle-callbacks.md)”章节。 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 09144056b6cf1ee64d27b09dbb800431186f78cd..29047e1ad759ffca2b18954484d845ad3eb29635 100644 --- a/zh-cn/application-dev/ui/ts-component-based-customdialog.md +++ b/zh-cn/application-dev/ui/ts-component-based-customdialog.md @@ -2,7 +2,7 @@ -**@CustomDialog**装饰器用于装饰自定义弹窗。 +**@CustomDialog** 装饰器用于装饰自定义弹窗。 ``` diff --git a/zh-cn/application-dev/ui/ts-component-based-entry.md b/zh-cn/application-dev/ui/ts-component-based-entry.md index 532cb628bdd120c3ec5b535cfb3b92954c6b451e..42a59ec1b7e82e71035c6987623a0665fce5bd22 100644 --- a/zh-cn/application-dev/ui/ts-component-based-entry.md +++ b/zh-cn/application-dev/ui/ts-component-based-entry.md @@ -1,15 +1,15 @@ # @Entry -用**@Entry**装饰的自定义组件用作页面的默认入口组件，加载页面时，将首先创建并呈现**@Entry**装饰的自定义组件。 +用 **@Entry** 装饰的自定义组件用作页面的默认入口组件，加载页面时，将首先创建并呈现 **@Entry** 装饰的自定义组件。 > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> 在单个源文件中，最多可以使用**\@Entry**装饰一个自定义组件。 +> 在单个源文件中，最多可以使用 **@Entry** 装饰一个自定义组件。 ## 示例 -**\@Entry**的用法如下： +**@Entry** 的用法如下： ``` // Only MyComponent decorated by @Entry is rendered and displayed. "hello world" is displayed, but "goodbye" is not displayed. diff --git a/zh-cn/application-dev/ui/ts-component-based-extend.md b/zh-cn/application-dev/ui/ts-component-based-extend.md index 5ce6ad41aa3142acf1f24b97b6d512b7ff85cee6..5475ffc379a9c34aa143a8ffb76934ba35b472d9 100644 --- a/zh-cn/application-dev/ui/ts-component-based-extend.md +++ b/zh-cn/application-dev/ui/ts-component-based-extend.md @@ -2,7 +2,7 @@ -**@Extend**装饰器将新的属性函数添加到内置组件上，如**Text**、**Column**、**Button**等。通过**@Extend**装饰器可以快速定义并复用组件的自定义样式。 +**@Extend** 装饰器将新的属性函数添加到内置组件上，如**Text**、**Column**、**Button**等。通过 **@Extend** 装饰器可以快速定义并复用组件的自定义样式。 ``` diff --git a/zh-cn/application-dev/ui/ts-component-based-preview.md b/zh-cn/application-dev/ui/ts-component-based-preview.md index fb685417725b0c113f2939f62e22170238373842..5a1fa133e891d95339ec424fcb6746beecea1b05 100644 --- a/zh-cn/application-dev/ui/ts-component-based-preview.md +++ b/zh-cn/application-dev/ui/ts-component-based-preview.md @@ -1,10 +1,10 @@ # @Preview -用**@Preview**装饰的自定义组件可以在DevEco的PC预览上进行单组件预览，加载页面时，将创建并呈现**@Preview**装饰的自定义组件。 +用 **@Preview** 装饰的自定义组件可以在DevEco的PC预览上进行单组件预览，加载页面时，将创建并呈现 **@Preview** 装饰的自定义组件。 > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> 在单个源文件中，最多可以使用**@Preview**装饰一个自定义组件。 +> 在单个源文件中，最多可以使用 **@Preview** 装饰一个自定义组件。 ## 示例 diff --git a/zh-cn/application-dev/ui/ts-component-states-link.md b/zh-cn/application-dev/ui/ts-component-states-link.md index 48e29e2bc4b8da77917da09828e859d2dfb3f06e..2eda79be5106c0bd1e40061b38f51456addee142 100644 --- a/zh-cn/application-dev/ui/ts-component-states-link.md +++ b/zh-cn/application-dev/ui/ts-component-states-link.md @@ -1,17 +1,17 @@ # @Link -**@Link**装饰的变量可以和父组件的**@State**变量建立双向数据绑定： +**@Link**装饰的变量可以和父组件的 **@State** 变量建立双向数据绑定： -- **支持多种类型：@Link**变量的值与**@State**变量的类型相同，即class、number、string、boolean或这些类型的数组； +- **支持多种类型：@Link**变量的值与 **@State** 变量的类型相同，即class、number、string、boolean或这些类型的数组； -- **私有：**仅在组件内访问； +- **私有：** 仅在组件内访问； -- **单个数据源：**初始化**@Link**变量的父组件的变量必须是**@State**变量； +- **单个数据源：** 初始化 **@Link** 变量的父组件的变量必须是 **@State** 变量； -- **双向通信：**子组件对**@Link**变量的更改将同步修改父组件的**@State**变量； +- **双向通信：** 子组件对 **@Link** 变量的更改将同步修改父组件的 **@State** 变量； -- **创建自定义组件时需要将变量的引用传递给@Link变量：**在创建组件的新实例时，必须使用命名参数初始化所有**@Link**变量。**@Link**变量可以使用**@State**变量或**@Link**变量的引用进行初始化。**@State**变量可以通过'**$**'操作符创建引用。 +- **创建自定义组件时需要将变量的引用传递给@Link变量：** 在创建组件的新实例时，必须使用命名参数初始化所有 **@Link** 变量。 **@Link** 变量可以使用 **@State** 变量或 **@Link** 变量的引用进行初始化。 **@State** 变量可以通过' **$** '操作符创建引用。 > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** @@ -48,7 +48,7 @@ struct PlayButton { } ``` -**@Link**语义是从'**$**'操作符引出，即**$isPlaying**是**this.isPlaying**内部状态的双向数据绑定。当您单击**PlayButton**时，PlayButton 的**Image**组件和**Text**组件将同时进行刷新。 +**@Link**语义是从' **$** '操作符引出，即 **$isPlaying** 是**this.isPlaying**内部状态的双向数据绑定。当您单击**PlayButton**时，PlayButton 的**Image**组件和**Text**组件将同时进行刷新。 ## 复杂类型示例 @@ -129,6 +129,6 @@ struct ChildB { 上述示例中，ParentView包含ChildA和ChildB两个子组件，ParentView的状态变量**counter**分别初始化ChildA和ChildB： -- ChildB使用**@Link**建立双向状态绑定。当**ChildB**修改**counterRef**状态变量值时，该更改将同步到**ParentView**和**ChildA**共享； +- ChildB使用 **@Link** 建立双向状态绑定。当**ChildB**修改**counterRef**状态变量值时，该更改将同步到**ParentView**和**ChildA**共享； - ChildA使用**@Prop**建立从**ParentView**到自身的单向状态绑定。当**ChildA**修改状态时，**ChildA**将重新渲染，但该更改不会传达给**ParentView**和**ChildB。** diff --git a/zh-cn/application-dev/ui/ts-component-states-prop.md b/zh-cn/application-dev/ui/ts-component-states-prop.md index f3c9a0de0fc33e62dbc316cdd388693ca089c70b..2a50aa808b5b5ac644ca00c11e292511da884986 100644 --- a/zh-cn/application-dev/ui/ts-component-states-prop.md +++ b/zh-cn/application-dev/ui/ts-component-states-prop.md @@ -1,18 +1,17 @@ # @Prop -**@Prop**具有与**@State**相同的语义，但初始化方式不同。**@Prop**装饰的变量必须使用其父组件提供的**@State**变量进行初始化，允许组件内部修改**@Prop**变量，但上述更改不会通知给父组件，即**@Prop**属于单向数据绑定。 +**@Prop** 具有与 **@State** 相同的语义，但初始化方式不同。 **@Prop** 装饰的变量必须使用其父组件提供的 **@State** 变量进行初始化，允许组件内部修改 **@Prop** 变量，但上述更改不会通知给父组件，即 **@Prop** 属于单向数据绑定。 +**@Prop** 状态数据具有以下特征： -**@Prop**状态数据具有以下特征： +- **支持简单类型：** 仅支持简单类型：number、string、boolean； -- **支持简单类型：**仅支持简单类型：number、string、boolean； +- **私有：** 仅在组件内访问； -- **私有：**仅在组件内访问； +- **支持多个实例：** 一个组件中可以定义多个标有 **@Prop** 的属性； -- **支持多个实例：**一个组件中可以定义多个标有**@Prop**的属性； - -- **创建自定义组件时将值传递给@Prop变量进行初始化：**在创建组件的新实例时，必须初始化所有@Prop变量，不支持在组件内部进行初始化。 +- **创建自定义组件时将值传递给 @Prop 变量进行初始化：** 在创建组件的新实例时，必须初始化所有 **@Prop** 变量，不支持在组件内部进行初始化。 ## 示例 @@ -67,7 +66,7 @@ struct CountDownComponent { } ``` -在上述示例中，当按“+1”或“-1”按钮时，父组件状态发生变化，重新执行**build**方法，此时将创建一个新的**CountDownComponent**组件。父组件的**countDownStartValue**状态属性被用于初始化子组件的**@Prop**变量。当按下子组件的“Try again”按钮时，其**@Prop**变量**count**将被更改，这将导致**CountDownComponent**重新渲染。但是，**count**值的更改不会影响父组件的**countDownStartValue**值。 +在上述示例中，当按“+1”或“-1”按钮时，父组件状态发生变化，重新执行**build**方法，此时将创建一个新的**CountDownComponent**组件。父组件的**countDownStartValue**状态属性被用于初始化子组件的 **@Prop** 变量。当按下子组件的“Try again”按钮时，其 **@Prop** 变量**count**将被更改，这将导致**CountDownComponent**重新渲染。但是，**count**值的更改不会影响父组件的**countDownStartValue**值。 > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** -> 创建新组件实例时，必须初始化其所有**@Prop**变量。 +> 创建新组件实例时，必须初始化其所有 **@Prop** 变量。 diff --git a/zh-cn/application-dev/ui/ts-component-states-state.md b/zh-cn/application-dev/ui/ts-component-states-state.md index 5cb677eb4fcc66adc8b34c9a2dbb887bf35dca28..7373d886fdde057a72322947f265711995223e33 100644 --- a/zh-cn/application-dev/ui/ts-component-states-state.md +++ b/zh-cn/application-dev/ui/ts-component-states-state.md @@ -1,20 +1,19 @@ # @State -**@State**装饰的变量是组件内部的状态数据，当这些状态数据被修改时，将会调用所在组件的**build**方法进行UI刷新。 +**@State** 装饰的变量是组件内部的状态数据，当这些状态数据被修改时，将会调用所在组件的**build**方法进行UI刷新。 +**@State** 状态数据具有以下特征： -**@State**状态数据具有以下特征： +- **支持多种类型：** 允许如下强类型的按值和按引用类型：**class**、**number**、**boolean**、**string**，以及这些类型的数组，即 **Array<class>**、**Array<string>**、**Array<boolean>**、**Array<number>** 。不允许**object**和**any。** -- **支持多种类型：**允许如下强类型的按值和按引用类型：**class**、**number**、**boolean**、**string**，以及这些类型的数组，即**Array<class>**、**Array<string>**、**Array<boolean>**、**Array<number>**。不允许**object**和**any。** +- **支持多实例：** 组件不同实例的内部状态数据独立。 -- **支持多实例：**组件不同实例的内部状态数据独立。 +- **内部私有：** 标记为 **@State** 的属性不能直接在组件外部修改。它的生命周期取决于它所在的组件。 -- **内部私有：**标记为**@State**的属性不能直接在组件外部修改。它的生命周期取决于它所在的组件。 +- **需要本地初始化：** 必须为所有 **@State** 变量分配初始值，将变量保持未初始化可能导致框架行为未定义。 -- **需要本地初始化：**必须为所有**@State**变量分配初始值，将变量保持未初始化可能导致框架行为未定义。 - -- **创建自定义组件时支持通过状态变量名设置初始值：**在创建组件实例时，可以通过变量名显式指定**@State**状态属性的初始值**。** +- **创建自定义组件时支持通过状态变量名设置初始值：** 在创建组件实例时，可以通过变量名显式指定 **@State** 状态属性的初始值**。** ## 简单类型的状态属性示例 @@ -92,7 +91,7 @@ struct MyComponent { 在上述示例中： -- 用户定义的组件**MyComponent**定义了**@State**状态变量**count**和**title**。如果**count**或**title**的值发生变化，则执行**MyComponent**的**build**方法来重新渲染组件； +- 用户定义的组件**MyComponent**定义了 **@State** 状态变量**count**和**title**。如果**count**或**title**的值发生变化，则执行**MyComponent**的**build**方法来重新渲染组件； - **EntryComponent**中有多个**MyComponent**组件实例，第一个**MyComponent**内部状态的更改不会影响第二个**MyComponent**； diff --git a/zh-cn/application-dev/ui/ts-general-ui-concepts.md b/zh-cn/application-dev/ui/ts-general-ui-concepts.md index bd50940fc128faa8ffaafbc20b31fa9fa089c50a..e3d73e432318c6256a714762cef6267ee8583e46 100644 --- a/zh-cn/application-dev/ui/ts-general-ui-concepts.md +++ b/zh-cn/application-dev/ui/ts-general-ui-concepts.md @@ -36,14 +36,14 @@ struct Hello { 上述示例代码描述了简单页面的结构，并介绍了以下基本概念： -- **装饰器：**装饰类、结构、方法和变量，并为它们赋予特殊含义。例如，上例中的**\@Entry**、**\@Component**和**\@State**都是装饰器； +- **装饰器**：装饰类、结构、方法和变量，并为它们赋予特殊含义。例如，上例中的 **@Entry**、 **@Component** 和 **@State** 都是装饰器； -- **自定义组件：**可重用的UI单元，可以与其他组件组合，如**\@Component**装饰的**struct Hello**； +- **自定义组件**：可重用的UI单元，可以与其他组件组合，如 **@Component** 装饰的**struct Hello**； -- **UI描述：**声明性描述UI结构，例如**build()**方法中的代码块； +- **UI描述**：声明性描述UI结构，例如 **build()** 方法中的代码块； -- **内置组件：**框架中默认内置的基本组件和布局组件，开发者可以直接调用，如**Column**、**Text**、**Divider**、**Button**等； +- **内置组件**：框架中默认内置的基本组件和布局组件，开发者可以直接调用，如**Column**、**Text**、**Divider**、**Button**等； -- **属性方法：**用于配置组件属性，如**fontSize()**、**width()**、**height()**、**color()**等； +- **属性方法**：用于配置组件属性，如 **fontSize()**、**width()**、**height()**、**color()** 等； -- **事件方法：**用于将组件响应逻辑添加到事件中。逻辑是通过事件方法设置的。例如，按钮后面的**onClick()**。 +- **事件方法**：用于将组件响应逻辑添加到事件中。逻辑是通过事件方法设置的。例如，按钮后面的 **onClick()** 。 diff --git a/zh-cn/application-dev/ui/ui-arkui-js.md b/zh-cn/application-dev/ui/ui-arkui-js.md index c48bfe2aa7f86a758f3934bf4e79e22a079fa0a2..d4a8d20777d09874a9e0e029670fa4c2a049a052 100644 --- a/zh-cn/application-dev/ui/ui-arkui-js.md +++ b/zh-cn/application-dev/ui/ui-arkui-js.md @@ -6,8 +6,6 @@ - **[框架说明](js-framework.md)** -- **[初步体验JS FA应用](ui-js-fa.md)** - - **[构建用户界面](ui-js-building-ui.md)** - **[常见组件开发指导](ui-js-common-components.md)**