未验证 提交 c8d92228 编写于 作者: O openharmony_ci 提交者: Gitee

!1156 ts文档刷新+xml接口文档刷新

Merge pull request !1156 from zengyawen/master
......@@ -27,8 +27,8 @@
分布式数据服务提供了两种同步方式:**手动同步****自动同步**
- **手动同步:**由应用程序调用sync接口来触发,需要指定同步的设备列表和同步模式。同步模式分为PULL_ONLY(将远端数据拉到本端)、PUSH_ONLY(将本端数据推送到远端)和PUSH_PULL(将本端数据推送到远端同时也将远端数据拉取到本端)。内部接口支持按条件过滤同步,将符合条件的数据同步到远端。
- **自动同步:**包括全量同步和按条件订阅同步。全量同步由分布式数据库自动将本端数据推送到远端,同时也将远端数据拉取到本端来完成数据同步,同步时机包括设备上线、应用程序更新数据等,应用不需要主动调用sync接口;内部接口支持按条件订阅同步,将远端符合订阅条件的数据自动同步到本端。
- **手动同步**由应用程序调用sync接口来触发,需要指定同步的设备列表和同步模式。同步模式分为PULL_ONLY(将远端数据拉到本端)、PUSH_ONLY(将本端数据推送到远端)和PUSH_PULL(将本端数据推送到远端同时也将远端数据拉取到本端)。内部接口支持按条件过滤同步,将符合条件的数据同步到远端。
- **自动同步**包括全量同步和按条件订阅同步。全量同步由分布式数据库自动将本端数据推送到远端,同时也将远端数据拉取到本端来完成数据同步,同步时机包括设备上线、应用程序更新数据等,应用不需要主动调用sync接口;内部接口支持按条件订阅同步,将远端符合订阅条件的数据自动同步到本端。
- **单版本分布式数据库**
单版本是指数据在本地保存是以单个KV条目为单位的方式保存,对每个Key最多只保存一个条目项,当数据在本地被用户修改时,不管它是否已经被同步出去,均直接在这个条目上进行修改。同步也以此为基础,按照它在本地被写入或更改的顺序将当前最新一次修改逐条同步至远端设备。
......
......@@ -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**,工具会自动生成示例代码和相关资源,等待工程创建完成。
......@@ -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)
# 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 =
'<?xml version="1.0" encoding="utf-8"?>' +
'<note importance="high" logged="true">' +
' <title>Happy</title>' +
' <todo>Work</todo>' +
' <todo>Play</todo>' +
'</note>';
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
# 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 =
'<?xml version="1.0" encoding="utf-8"?>' +
'<note importance="high" logged="true">' +
' <title>Happy</title>' +
' <todo>Work</todo>' +
' <todo>Play</todo>' +
'</note>';
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"); // => <b/>
```
......@@ -157,7 +95,7 @@ setDeclaration(): void
```
import xml form '@ohos.xml'
setDeclaration():void
var thatSer = new xml.XmlSerializer(bufView);
thatSer.setDeclaration() // => <?xml version="1.0" encoding="utf-8"?>;
```
......@@ -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') // => '<![CDATA[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'); // => '<!DOCTYPE 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 =
'<?xml version="1.0" encoding="utf-8"?>' +
'<note importance="high" logged="true">' +
......@@ -376,7 +314,7 @@ parse(option: ParseOptions): void
```
import xml form '@ohos.xml'
parse(option: ParseOptions): void
var strXml =
'<?xml version="1.0" encoding="utf-8"?>' +
'<note importance="high" logged="true">' +
......
......@@ -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 }) {
......
......@@ -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 }) {
......
......@@ -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)
<img src="figures/actionsheet.gif" style="zoom: 50%;" />
......@@ -7,7 +7,7 @@
## 基本概念
- **组件:**组件是界面搭建与显示的最小单位。开发者通过多种组件的组合,构建出满足自身应用诉求的完整界面。
- **组件**组件是界面搭建与显示的最小单位。开发者通过多种组件的组合,构建出满足自身应用诉求的完整界面。
- **页面**:page页面是方舟开发框架最小的调度分割单位。开发者可以将应用设计为多个功能页面,每个页面进行单独的文件管理,并通过路由API实现页面的调度管理,以实现应用内功能的解耦。
......@@ -16,15 +16,15 @@
- **多种组件**:方舟开发框架不仅提供了多种基础组件,如文本显示、图片显示、按键交互等,也提供了支持视频播放能力的媒体组件。并且针对不同类型设备进行了组件设计,提供了组件在不同平台上的样式适配能力,此种组件称为“多态组件”。
- **布局计算:**UI界面设计离不开布局的参与。方舟开发框架提供了多种布局方式,不仅保留了经典的弹性布局能力,也提供了列表、宫格、栅格布局和适应多分辨率场景开发的原子布局能力。
- **布局计算**UI界面设计离不开布局的参与。方舟开发框架提供了多种布局方式,不仅保留了经典的弹性布局能力,也提供了列表、宫格、栅格布局和适应多分辨率场景开发的原子布局能力。
- **动画能力:**方舟开发框架对于UI界面的美化,除了组件内置动画效果外,也提供了属性动画、转场动画和自定义动画能力。
- **动画能力**方舟开发框架对于UI界面的美化,除了组件内置动画效果外,也提供了属性动画、转场动画和自定义动画能力。
- **UI交互:**方舟开发框架提供了多种交互能力,满足应用在不同平台通过不同输入设备均可正常进行UI交互响应,默认适配了触摸手势、遥控器、鼠标等输入操作,同时也提供事件通知能力。
- **UI交互**方舟开发框架提供了多种交互能力,满足应用在不同平台通过不同输入设备均可正常进行UI交互响应,默认适配了触摸手势、遥控器、鼠标等输入操作,同时也提供事件通知能力。
- **绘制:**方舟开发框架提供了多种绘制能力,以满足开发者绘制自定义形状的需求,支持图形绘制、颜色填充、文本绘制、图片绘制等。
- **绘制**方舟开发框架提供了多种绘制能力,以满足开发者绘制自定义形状的需求,支持图形绘制、颜色填充、文本绘制、图片绘制等。
- **平台API通道:**方舟开发框架提供了API扩展机制,平台能力通过此种机制进行封装,提供风格统一的JS接口。
- **平台API通道**方舟开发框架提供了API扩展机制,平台能力通过此种机制进行封装,提供风格统一的JS接口。
## 选择方案
......
# @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)”章节。
......
......@@ -2,7 +2,7 @@
**@CustomDialog**装饰器用于装饰自定义弹窗。
**@CustomDialog** 装饰器用于装饰自定义弹窗。
```
......
# @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.
......
......@@ -2,7 +2,7 @@
**@Extend**装饰器将新的属性函数添加到内置组件上,如**Text****Column****Button**等。通过**@Extend**装饰器可以快速定义并复用组件的自定义样式。
**@Extend** 装饰器将新的属性函数添加到内置组件上,如**Text****Column****Button**等。通过 **@Extend** 装饰器可以快速定义并复用组件的自定义样式。
```
......
# @Preview
**@Preview**装饰的自定义组件可以在DevEco的PC预览上进行单组件预览,加载页面时,将创建并呈现**@Preview**装饰的自定义组件。
**@Preview** 装饰的自定义组件可以在DevEco的PC预览上进行单组件预览,加载页面时,将创建并呈现 **@Preview** 装饰的自定义组件。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> 在单个源文件中,最多可以使用**@Preview**装饰一个自定义组件。
> 在单个源文件中,最多可以使用 **@Preview** 装饰一个自定义组件。
## 示例
......
# @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。**
# @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** 变量。
# @State
**@State**装饰的变量是组件内部的状态数据,当这些状态数据被修改时,将会调用所在组件的**build**方法进行UI刷新。
**@State** 装饰的变量是组件内部的状态数据,当这些状态数据被修改时,将会调用所在组件的**build**方法进行UI刷新。
**@State** 状态数据具有以下特征:
**@State**状态数据具有以下特征:
- **支持多种类型:** 允许如下强类型的按值和按引用类型:**class****number****boolean****string**,以及这些类型的数组,即 **Array&lt;class&gt;****Array&lt;string&gt;****Array&lt;boolean&gt;****Array&lt;number&gt;** 。不允许**object****any。**
- **支持多种类型:**允许如下强类型的按值和按引用类型:**class****number****boolean****string**,以及这些类型的数组,即**Array&lt;class&gt;****Array&lt;string&gt;****Array&lt;boolean&gt;****Array&lt;number&gt;**。不允许**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**
......
......@@ -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()**
......@@ -6,8 +6,6 @@
- **[框架说明](js-framework.md)**
- **[初步体验JS FA应用](ui-js-fa.md)**
- **[构建用户界面](ui-js-building-ui.md)**
- **[常见组件开发指导](ui-js-common-components.md)**
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册