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

!2655 内源演练问题修改+组件英文多余目录删除

Merge pull request !2655 from LiAn/master
......@@ -60,6 +60,7 @@
- [toolbar](js-components-basic-toolbar.md)
- [toolbar-item](js-components-basic-toolbar-item.md)
- [toggle](js-components-basic-toggle.md)
- [web](js-components-basic-web.md)
- [Media Components](js-components-media.md)
- [video](js-components-media-video.md)
......
......@@ -2,7 +2,7 @@
- Components
- Universal Components
- Universal Events
- [Universal Events](ts-universal-event-index.md)
- [Click Event](ts-universal-events-click.md)
- [Touch Event](ts-universal-events-touch.md)
- [Show/Hide Event](ts-universal-events-show-hide.md)
......@@ -11,7 +11,7 @@
- [Focus Event](ts-universal-focus-event.md)
- [Mouse Event](ts-universal-mouse-key.md)
- [Component Area Change Event](ts-universal-component-area-change-event.md)
- Universal Attributes
- [Universal Attributes](ts-universal-attributes-index.md)
- [Size](ts-universal-attributes-size.md)
- [Location](ts-universal-attributes-location.md)
- [Layout Constraints](ts-universal-attributes-layout-constraints.md)
......@@ -48,38 +48,39 @@
- [SwipeGesture](ts-basic-gestures-swipegesture.md)
- [Combined Gestures](ts-combined-gestures.md)
- Basic Components
- [Blank](ts-basic-components-blank.md)
- [Button](ts-basic-components-button.md)
- [Checkbox](ts-basic-components-checkbox.md)
- [CheckboxGroup](ts-basic-components-checkboxgroup.md)
- [DataPanel](ts-basic-components-datapanel.md)
- [DatePicker](ts-basic-components-datepicker.md)
- [Divider](ts-basic-components-divider.md)
- [Gauge](ts-basic-components-gauge.md)
- [Image](ts-basic-components-image.md)
- [ImageAnimator](ts-basic-components-imageanimator.md)
- [Marquee](ts-basic-components-marquee.md)
- [LoadingProgress](ts-basic-components-loadingprogress.md)
- [Progress](ts-basic-components-progress.md)
- [QRCode](ts-basic-components-qrcode.md)
- [Radio](ts-basic-components-radio.md)
- [Rating](ts-basic-components-rating.md)
- [Search](ts-basic-components-search.md)
- [Select](ts-basic-components-select.md)
- [Slider](ts-basic-components-slider.md)
- [Span](ts-basic-components-span.md)
- [Text](ts-basic-components-text.md)
- [TextArea](ts-basic-components-textarea.md)
- [TextInput](ts-basic-components-textinput.md)
- [TextPicker](ts-basic-components-textpicker.md)
- [TextTimer](ts-basic-components-texttimer.md)
- [TimePicker](ts-basic-components-timepicker.md)
- [Toggle](ts-basic-components-toggle.md)
- [TextClock](ts-basic-components-textclock.md)
- [Web](ts-basic-components-web.md)
- [RichText](ts-basic-components-richtext.md)
- [Xcomponent](ts-basic-components-xcomponent.md)
- [PluginComponent](ts-basic-components-plugincomponent.md)
- [Blank](ts-basic-components-blank.md)
- [Button](ts-basic-components-button.md)
- [Checkbox](ts-basic-components-checkbox.md)
- [CheckboxGroup](ts-basic-components-checkboxgroup.md)
- [DataPanel](ts-basic-components-datapanel.md)
- [DatePicker](ts-basic-components-datepicker.md)
- [Divider](ts-basic-components-divider.md)
- [Gauge](ts-basic-components-gauge.md)
- [Image](ts-basic-components-image.md)
- [ImageAnimator](ts-basic-components-imageanimator.md)
- [LoadingProgress](ts-basic-components-loadingprogress.md)
- [Marquee](ts-basic-components-marquee.md)
- [PatternLock](ts-basic-components-patternlock.md)
- [PluginComponent](ts-basic-components-plugincomponent.md)
- [Progress](ts-basic-components-progress.md)
- [QRCode](ts-basic-components-qrcode.md)
- [Radio](ts-basic-components-radio.md)
- [Rating](ts-basic-components-rating.md)
- [RichText](ts-basic-components-richtext.md)
- [Search](ts-basic-components-search.md)
- [Select](ts-basic-components-select.md)
- [Slider](ts-basic-components-slider.md)
- [Span](ts-basic-components-span.md)
- [Text](ts-basic-components-text.md)
- [TextArea](ts-basic-components-textarea.md)
- [TextClock](ts-basic-components-textclock.md)
- [TextInput](ts-basic-components-textinput.md)
- [TextPicker](ts-basic-components-textpicker.md)
- [TextTimer](ts-basic-components-texttimer.md)
- [TimePicker](ts-basic-components-timepicker.md)
- [Toggle](ts-basic-components-toggle.md)
- [Web](ts-basic-components-web.md)
- [Xcomponent](ts-basic-components-xcomponent.md)
- Container Components
- [AlphabetIndexer](ts-container-alphabet-indexer.md)
- [Badge](ts-container-badge.md)
......@@ -95,18 +96,18 @@
- [Navigator](ts-container-navigator.md)
- [Navigation](ts-basic-components-navigation.md)
- [Panel](ts-container-panel.md)
- [Refresh](ts-container-refresh.md)
- [Row](ts-container-row.md)
- [RowSplit](ts-container-rowsplit.md)
- [Scroll](ts-container-scroll.md)
- [ScrollBar](ts-basic-components-scrollbar.md)
- [SideBarContainer](ts-container-sidebarcontainer.md)
- [Stack](ts-container-stack.md)
- [Stepper](ts-basic-components-stepper.md)
- [StepperItem](ts-basic-components-stepperitem.md)
- [Swiper](ts-container-swiper.md)
- [Tabs](ts-container-tabs.md)
- [TabContent](ts-container-tabcontent.md)
- [Refresh](ts-container-refresh.md)
- [Stepper](ts-basic-components-stepper.md)
- [StepperItem](ts-basic-components-stepperitem.md)
- Media Components
- [Video](ts-media-components-video.md)
- Drawing Components
......@@ -147,5 +148,4 @@
- [Time Picker Dialog Box](ts-methods-timepicker-dialog.md)
- [Text Picker Dialog Box](ts-methods-textpicker-dialog.md)
- [Menu](ts-methods-menu.md)
- Appendix
- [Built-in Enums](ts-appendix-enums.md)
- [Built-in Enums](ts-appendix-enums.md)
# Animation
- [AnimatorProperty](ts-animatorproperty.md)
- [Explicit Animation](ts-explicit-animation.md)
- Transition Animation
- [Page Transition](ts-page-transition-animation.md)
- [Component Transition](ts-transition-animation-component.md)
- [Transition of Shared Elements](ts-transition-animation-shared-elements.md)
- [Motion Path Animation](ts-motion-path-animation.md)
- [Matrix Transformation](ts-matrix-transformation.md)
- [Interpolation Calculation](ts-interpolation-calculation.md)
\ No newline at end of file
# Appendix
- **[Built-in Enums](ts-appendix-enums.md)**
\ No newline at end of file
# LoadingProgress
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **<LoadingProgress>** component is used to display the loading progress.
## Required Permissions
None
## Child Components
None
## APIs
LoadingProgress()
Creates a **LoadingProgress** instance.
## Attributes
| Name | Type | Default Value | Description |
| ----- | ----- | ------------- | ---------------------------------------- |
| color | Color | - | Foreground color of the loading progress bar. |
## Example
```
@Entry
@Component
struct LoadingProgressExample {
build() {
Column({ space: 5 }) {
Text('Orbital LoadingProgress ').fontSize(9).fontColor(0xCCCCCC).width('90%')
LoadingProgress()
.color(Color.Blue)
}.width('100%').margin({ top: 5 })
}
}
```
![zh-cn_image_0000001198839004](figures/loadingProgress.png)
\ No newline at end of file
# Basic Components
- [Blank](ts-basic-components-blank.md)
- [Button](ts-basic-components-button.md)
- [Checkbox](ts-basic-components-checkbox.md)
- [CheckboxGroup](ts-basic-components-checkboxgroup.md)
- [DataPanel](ts-basic-components-datapanel.md)
- [DatePicker](ts-basic-components-datepicker.md)
- [Divider](ts-basic-components-divider.md)
- [Gauge](ts-basic-components-gauge.md)
- [Image](ts-basic-components-image.md)
- [ImageAnimator](ts-basic-components-imageanimator.md)
- [Marquee](ts-basic-components-marquee.md)
- [LoadingProgress](ts-basic-components-loadingprogress.md)
- [Progress](ts-basic-components-progress.md)
- [QRCode](ts-basic-components-qrcode.md)
- [Radio](ts-basic-components-radio.md)
- [Rating](ts-basic-components-rating.md)
- [Search](ts-basic-components-search.md)
- [Select](ts-basic-components-select.md)
- [Slider](ts-basic-components-slider.md)
- [Span](ts-basic-components-span.md)
- [Text](ts-basic-components-text.md)
- [TextArea](ts-basic-components-textarea.md)
- [TextInput](ts-basic-components-textinput.md)
- [TextPicker](ts-basic-components-textpicker.md)
- [TextTimer](ts-basic-components-texttimer.md)
- [Toggle](ts-basic-components-toggle.md)
- [TextClock](ts-basic-components-textclock.md)
- [Web](ts-basic-components-web.md)
- [RichText](ts-basic-components-richtext.md)
- [Xcomponent](ts-basic-components-xcomponent.md)
- [PluginComponent](ts-basic-components-plugincomponent.md)
\ No newline at end of file
# Basic Gestures
- **[TapGesture](ts-basic-gestures-tapgesture.md)**
- **[LongPressGesture](ts-basic-gestures-longpressgesture.md)**
- **[PanGesture](ts-basic-gestures-pangesture.md)**
- **[PinchGesture](ts-basic-gestures-pinchgesture.md)**
- **[RotationGesture](ts-basic-gestures-rotationgesture.md)**
- **[SwipeGesture](ts-basic-gestures-swipegesture.md)**
\ No newline at end of file
# Canvas Components
- **[Canvas](ts-components-canvas-canvas.md)**
- **[CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md)**
- **[OffscreenCanvasRenderingConxt2D](ts-offscreencanvasrenderingcontext2d.md)**
- **[Lottie](ts-components-canvas-lottie.md)**
- **[Path2D](ts-components-canvas-path2d.md)**
- **[CanvasGradient](ts-components-canvas-canvasgradient.md)**
- **[ImageBitmap](ts-components-canvas-imagebitmap.md)**
- **[ImageData](ts-components-canvas-imagedata.md)**
\ No newline at end of file
# Container Components
- [AlphabetIndexer](ts-container-alphabet-indexer.md)
- [Badge](ts-container-badge.md)
- [Column](ts-container-column.md)
- [ColumnSplit](ts-container-columnsplit.md)
- [Counter](ts-container-counter.md)
- [Flex](ts-container-flex.md)
- [GridContainer](ts-container-gridcontainer.md)
- [Grid](ts-container-grid.md)
- [GridItem](ts-container-griditem.md)
- [List](ts-container-list.md)
- [ListItem](ts-container-listitem.md)
- [Navigator](ts-container-navigator.md)
- [Navigation](ts-basic-components-navigation.md)
- [Panel](ts-container-panel.md)
- [Row](ts-container-row.md)
- [RowSplit](ts-container-rowsplit.md)
- [Scroll](ts-container-scroll.md)
- [ScrollBar](ts-basic-components-scrollbar.md)
- [SideBarContainer](ts-container-sidebarcontainer.md)
- [Stack](ts-container-stack.md)
- [Swiper](ts-container-swiper.md)
- [Tabs](ts-container-tabs.md)
- [TabContent](ts-container-tabcontent.md)
- [Refresh](ts-container-refresh.md)
- [Stepper](ts-basic-components-stepper.md)
- [StepperItem](ts-basic-components-stepperitem.md)
\ No newline at end of file
# Components
- [Universal Components](ts-universal-components.md)
- [Basic Components](ts-basic-components.md)
- [Container Components](ts-components-container.md)
- [Drawing Components](ts-drawing-components.md)
- [Media Components](ts-media-components.md)
- [Canvas Components](ts-components-canvas.md)
\ No newline at end of file
# Drawing Components
- **[Circle](ts-drawing-components-circle.md)**
- **[Ellipse](ts-drawing-components-ellipse.md)**
- **[Line](ts-drawing-components-line.md)**
- **[Polyline](ts-drawing-components-polyline.md)**
- **[Polygon](ts-drawing-components-polygon.md)**
- **[Path](ts-drawing-components-path.md)**
- **[Rect](ts-drawing-components-rect.md)**
- **[Shape](ts-drawing-components-shape.md)**
\ No newline at end of file
# Gesture Processing
- **[Combined Gestures](ts-combined-gestures.md)**
- **[Gesture Binding Methods](ts-gesture-settings.md)**
- **[Basic Gestures](ts-basic-gestures.md)**
\ No newline at end of file
# Global UI Methods
- [Image Cache](ts-methods-image-cache.md)
- Pop-up Window
- [Alert Dialog Box](ts-methods-alert-dialog-box.md)
- [Action Sheet](ts-methods-action-sheet.md)
- [Custom Dialog Box](ts-methods-custom-dialog-box.md)
- [Date Picker Dialog Box](ts-methods-datepicker-dialog.md)
- [Text Picker Dialog Box](ts-methods-textpicker-dialog.md)
- [Menu](ts-methods-menu.md)
\ No newline at end of file
# Media Components
- **[Video](ts-media-components-video.md)**
\ No newline at end of file
# Pop-up Window
- **[Alert Dialog Box](ts-methods-alert-dialog-box.md)**
- **[Action Sheet](ts-methods-action-sheet.md)**
- **[Custom Dialog Box](ts-methods-custom-dialog-box.md)**
\ No newline at end of file
# Transition Animation
- **[Page Transition](ts-page-transition-animation.md)**
- **[Component Transition](ts-transition-animation-component.md)**
- **[Transition of Shared Elements](ts-transition-animation-shared-elements.md)**
\ No newline at end of file
# Universal Components
- **[Universal Events](ts-universal-events.md)**
- **[Universal Attributes](ts-universal-attributes.md)**
- **[Gesture Processing](ts-gesture-processing.md)**
\ No newline at end of file
# 资源文件的分类
应用开发中使用的各类资源文件,需要放入特定子目录中存储管理。
## resources目录
......@@ -24,11 +25,11 @@ resources
**表1** resources目录分类
| 分类 | base目录与限定词目录 | rawfile目录 |
| -------- | -------- | -------- |
| 组织形式 | 按照两级目录形式来组织,目录命名必须符合规范,以便根据设备状态去匹配相应目录下的资源文件。<br/>&nbsp;&nbsp;一级子目录为**base目录**和**限定词目录**。<br/>-&nbsp;base目录是默认存在的目录。当应用的resources资源目录中没有与设备状态匹配的限定词目录时,会自动引用该目录中的资源文件。<br/>-&nbsp;限定词目录需要开发者自行创建。目录名称由一个或多个表征应用场景或设备特征的限定词组合而成,具体要求参见[限定词目录](#限定词目录)<br/>二级子目录为**资源目录**,用于存放字符串、颜色、布尔值等基础元素,以及媒体、动画、布局等资源文件,具体要求参见[资源组目录](#资源组目录)。 | 支持创建多层子目录,目录名称可以自定义,文件夹内可以自由放置各类资源文件。<br/>rawfile目录的文件不会根据设备状态去匹配不同的资源。 |
| 编译方式 | 目录中的资源文件会被编译成二进制文件,并赋予资源文件ID。 | 目录中的资源文件会被直接打包进应用,不经过编译,也不会被赋予资源文件ID。 |
| 引用方式 | 通过指定资源类型(type)和资源名称(name)来引用。 | 通过指定文件路径和文件名来引用。 |
| 分类 | base目录与限定词目录 | 限定词目录 | rawfile目录 |
| ---- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
| 组织形式 | base目录是默认存在的目录。当应用的resources目录中没有与设备状态匹配的限定词目录时,会自动引用该目录中的资源文件。<br/>base目录的二级子目录为**资源组目录**,用于存放字符串、颜色、布尔值等基础元素,以及媒体、动画、布局等资源文件,具体要求参见[资源组目录](#资源组目录)。 | 限定词目录需要开发者自行创建。目录名称由一个或多个表征应用场景或设备特征的限定词组合而成,具体要求参见[限定词目录](#限定词目录)<br/>限定词目录的二级子目录为**资源组目录**,用于存放字符串、颜色、布尔值等基础元素,以及媒体、动画、布局等资源文件,具体要求参见[资源组目录](#资源组目录)。 | 支持创建多层子目录,目录名称可以自定义,文件夹内可以自由放置各类资源文件。<br/>rawfile目录的文件不会根据设备状态去匹配不同的资源。 |
| 编译方式 | 目录中的资源文件会被编译成二进制文件,并赋予资源文件ID。 | 目录中的资源文件会被编译成二进制文件,并赋予资源文件ID。 | 目录中的资源文件会被直接打包进应用,不经过编译,也不会被赋予资源文件ID。 |
| 引用方式 | 通过指定资源类型(type)和资源名称(name)来引用。 | 通过指定资源类型(type)和资源名称(name)来引用。 | 通过指定文件路径和文件名来引用。 |
## 限定词目录
......@@ -43,17 +44,17 @@ resources
- 限定词的取值范围:每类限定词的取值必须符合限定词取值要求表中的条件,否则,将无法匹配目录中的资源文件。
**表2** 限定词取值要求
| 限定词类型 | 含义与取值说明 |
| -------- | -------- |
| 移动国家码和移动网络码 | 移动国家码(MCC)和移动网络码(MNC)的值取自设备注册的网络。MCC后面可以跟随MNC,使用下划线(_)连接,也可以单独使用。例如:mcc460表示中国,mcc460_mnc00表示中国_中国移动。<br/>详细取值范围,请查阅**ITU-T&nbsp;E.212**(国际电联相关标准)。 |
| 语言 | 表示设备使用的语言类型,由2~3个小写字母组成。例如:zh表示中文,en表示英语,mai表示迈蒂利语。<br/>详细取值范围,请查阅**ISO&nbsp;639**(ISO制定的语言编码标准)。 |
| 文字 | 表示设备使用的文字类型,由1个大写字母(首字母)和3个小写字母组成。例如:Hans表示简体中文,Hant表示繁体中文。<br/>详细取值范围,请查阅**ISO&nbsp;15924**(ISO制定的文字编码标准)。 |
| 国家或地区 | 表示用户所在的国家或地区,由2~3个大写字母或者3个数字组成。例如:CN表示中国,GB表示英国。<br/>详细取值范围,请查阅**ISO&nbsp;3166-1**(ISO制定的国家和地区编码标准)。 |
| 横竖屏 | 表示设备的屏幕方向,取值如下:<br/>-&nbsp;vertical:竖屏<br/>-&nbsp;horizontal:横屏 |
| 设备类型 | 表示设备的类型,取值如下:<br/>-&nbsp;phone:手机<br/>-&nbsp;tablet:平板<br/>-&nbsp;car:车机<br/>-&nbsp;tv:智慧屏<br/>-&nbsp;wearable:智能穿戴 |
| 颜色模式 | 表示设备的颜色模式,取值如下:<br/>-&nbsp;dark:深色模式<br/>-&nbsp;light:浅色模式 |
| 屏幕密度 | 表示设备的屏幕密度(单位为dpi),取值如下:<br/>-&nbsp;sdpi:表示小规模的屏幕密度(Small-scale&nbsp;Dots&nbsp;Per&nbsp;Inch),适用于dpi取值为(0,&nbsp;120]的设备。<br/>-&nbsp;mdpi:表示中规模的屏幕密度(Medium-scale&nbsp;Dots&nbsp;Per&nbsp;Inch),适用于dpi取值为(120,&nbsp;160]的设备。<br/>-&nbsp;ldpi:表示大规模的屏幕密度(Large-scale&nbsp;Dots&nbsp;Per&nbsp;Inch),适用于dpi取值为(160,&nbsp;240]的设备。<br/>-&nbsp;xldpi:表示特大规模的屏幕密度(Extra&nbsp;Large-scale&nbsp;Dots&nbsp;Per&nbsp;Inch),适用于dpi取值为(240,&nbsp;320]的设备。<br/>-&nbsp;xxldpi:表示超大规模的屏幕密度(Extra&nbsp;Extra&nbsp;Large-scale&nbsp;Dots&nbsp;Per&nbsp;Inch),适用于dpi取值为(320,&nbsp;480]的设备。<br/>-&nbsp;xxxldpi:表示超特大规模的屏幕密度(Extra&nbsp;Extra&nbsp;Extra&nbsp;Large-scale&nbsp;Dots&nbsp;Per&nbsp;Inch),适用于dpi取值为(480,&nbsp;640]的设备。 |
| 限定词类型 | 含义与取值说明 |
| ----------- | ---------------------------------------- |
| 移动国家码和移动网络码 | 移动国家码(MCC)和移动网络码(MNC)的值取自设备注册的网络。MCC后面可以跟随MNC,使用下划线(_)连接,也可以单独使用。例如:mcc460表示中国,mcc460_mnc00表示中国_中国移动。<br/>详细取值范围,请查阅**ITU-T&nbsp;E.212**(国际电联相关标准)。 |
| 语言 | 表示设备使用的语言类型,由2~3个小写字母组成。例如:zh表示中文,en表示英语,mai表示迈蒂利语。<br/>详细取值范围,请查阅**ISO&nbsp;639**(ISO制定的语言编码标准)。 |
| 文字 | 表示设备使用的文字类型,由1个大写字母(首字母)和3个小写字母组成。例如:Hans表示简体中文,Hant表示繁体中文。<br/>详细取值范围,请查阅**ISO&nbsp;15924**(ISO制定的文字编码标准)。 |
| 国家或地区 | 表示用户所在的国家或地区,由2~3个大写字母或者3个数字组成。例如:CN表示中国,GB表示英国。<br/>详细取值范围,请查阅**ISO&nbsp;3166-1**(ISO制定的国家和地区编码标准)。 |
| 横竖屏 | 表示设备的屏幕方向,取值如下:<br/>-&nbsp;vertical:竖屏<br/>-&nbsp;horizontal:横屏 |
| 设备类型 | 表示设备的类型,取值如下:<br/>-&nbsp;phone:手机<br/>-&nbsp;tablet:平板<br/>-&nbsp;car:车机<br/>-&nbsp;tv:智慧屏<br/>-&nbsp;wearable:智能穿戴 |
| 颜色模式 | 表示设备的颜色模式,取值如下:<br/>-&nbsp;dark:深色模式<br/>-&nbsp;light:浅色模式 |
| 屏幕密度 | 表示设备的屏幕密度(单位为dpi),取值如下:<br/>-&nbsp;sdpi:表示小规模的屏幕密度(Small-scale&nbsp;Dots&nbsp;Per&nbsp;Inch),适用于dpi取值为(0,&nbsp;120]的设备。<br/>-&nbsp;mdpi:表示中规模的屏幕密度(Medium-scale&nbsp;Dots&nbsp;Per&nbsp;Inch),适用于dpi取值为(120,&nbsp;160]的设备。<br/>-&nbsp;ldpi:表示大规模的屏幕密度(Large-scale&nbsp;Dots&nbsp;Per&nbsp;Inch),适用于dpi取值为(160,&nbsp;240]的设备。<br/>-&nbsp;xldpi:表示特大规模的屏幕密度(Extra&nbsp;Large-scale&nbsp;Dots&nbsp;Per&nbsp;Inch),适用于dpi取值为(240,&nbsp;320]的设备。<br/>-&nbsp;xxldpi:表示超大规模的屏幕密度(Extra&nbsp;Extra&nbsp;Large-scale&nbsp;Dots&nbsp;Per&nbsp;Inch),适用于dpi取值为(320,&nbsp;480]的设备。<br/>-&nbsp;xxxldpi:表示超特大规模的屏幕密度(Extra&nbsp;Extra&nbsp;Extra&nbsp;Large-scale&nbsp;Dots&nbsp;Per&nbsp;Inch),适用于dpi取值为(480,&nbsp;640]的设备。 |
**限定词目录与设备状态的匹配规则**
......@@ -69,11 +70,11 @@ base目录与限定词目录下面可以创建资源组目录(包括element、
**表3** **资源组目录说明**
| 资源组目录 | 目录说明 | 资源文件 |
| -------- | -------- | -------- |
| element | 表示元素资源,以下每一类数据都采用相应的JSON文件来表征。<br/>-&nbsp;boolean,布尔型<br/>-&nbsp;color,颜色<br/>-&nbsp;float,浮点型<br/>-&nbsp;intarray,整型数组<br/>-&nbsp;integer,整型<br/>-&nbsp;pattern,样式<br/>-&nbsp;plural,复数形式<br/>-&nbsp;strarray,字符串数组<br/>-&nbsp;string,字符串 | element目录中的文件名称建议与下面的文件名保持一致。每个文件中只能包含同一类型的数据。<br/>-&nbsp;boolean.json<br/>-&nbsp;color.json<br/>-&nbsp;float.json<br/>-&nbsp;intarray.json<br/>-&nbsp;integer.json<br/>-&nbsp;pattern.json<br/>-&nbsp;plural.json<br/>-&nbsp;strarray.json<br/>-&nbsp;string.json |
| media | 表示媒体资源,包括图片、音频、视频等非文本格式的文件。 | 文件名可自定义,例如:icon.png。 |
| animation | 表示动画资源,采用XML文件格式。 | 文件名可自定义,例如:zoom_in.xml。 |
| layout | 表示布局资源,采用XML文件格式。 | 文件名可自定义,例如:home_layout.xml。 |
| graphic | 表示可绘制资源,采用XML文件格式。 | 文件名可自定义,例如:notifications_dark.xml。 |
| profile | 表示其他类型文件,以原始文件形式保存。 | 文件名可自定义。 |
| 资源组目录 | 目录说明 | 资源文件 |
| --------- | ---------------------------------------- | ---------------------------------------- |
| element | 表示元素资源,以下每一类数据都采用相应的JSON文件来表征。<br/>-&nbsp;boolean,布尔型<br/>-&nbsp;color,颜色<br/>-&nbsp;float,浮点型<br/>-&nbsp;intarray,整型数组<br/>-&nbsp;integer,整型<br/>-&nbsp;pattern,样式<br/>-&nbsp;plural,复数形式<br/>-&nbsp;strarray,字符串数组<br/>-&nbsp;string,字符串 | element目录中的文件名称建议与下面的文件名保持一致。每个文件中只能包含同一类型的数据。<br/>-&nbsp;boolean.json<br/>-&nbsp;color.json<br/>-&nbsp;float.json<br/>-&nbsp;intarray.json<br/>-&nbsp;integer.json<br/>-&nbsp;pattern.json<br/>-&nbsp;plural.json<br/>-&nbsp;strarray.json<br/>-&nbsp;string.json |
| media | 表示媒体资源,包括图片、音频、视频等非文本格式的文件。 | 文件名可自定义,例如:icon.png。 |
| animation | 表示动画资源,采用XML文件格式。 | 文件名可自定义,例如:zoom_in.xml。 |
| layout | 表示布局资源,采用XML文件格式。 | 文件名可自定义,例如:home_layout.xml。 |
| graphic | 表示可绘制资源,采用XML文件格式。 | 文件名可自定义,例如:notifications_dark.xml。 |
| profile | 表示其他类型文件,以原始文件形式保存。 | 文件名可自定义。 |
......@@ -24,7 +24,7 @@
- [添加容器](ui-js-building-ui-layout-external-container.md)
- [添加交互](ui-js-building-ui-interactions.md)
- [动画](ui-js-building-ui-animation.md)
- [事件](ui-js-building-ui-event.md)
- [手势事件](ui-js-building-ui-event.md)
- [页面路由](ui-js-building-ui-routes.md)
- 常见组件开发指导
- 容器组件
......
......@@ -2,52 +2,37 @@
## 框架介绍
方舟开发框架,是一套UI开发框架,提供开发者进行应用UI开发时所必须的能力。
方舟开发框架(简称:ArkUI),是一套UI开发框架,提供开发者进行应用UI开发时所必须的能力。
## 基本概念
- **组件**:组件是界面搭建与显示的最小单位。开发者通过多种组件的组合,构建出满足自身应用诉求的完整界面。
- 组件:组件是界面搭建与显示的最小单位。开发者通过多种组件的组合,构建出满足自身应用诉求的完整界面。
- **页面**:page页面是方舟开发框架最小的调度分割单位。开发者可以将应用设计为多个功能页面,每个页面进行单独的文件管理,并通过路由API实现页面的调度管理,以实现应用内功能的解耦。
- 页面:page页面是方舟开发框架最小的调度分割单位。开发者可以将应用设计为多个功能页面,每个页面进行单独的文件管理,并通过路由API实现页面的调度管理,以实现应用内功能的解耦。
## 主要能力
## 主要特征
- **多种组件**:方舟开发框架不仅提供了多种基础组件,如文本显示、图片显示、按键交互等,也提供了支持视频播放能力的媒体组件。并且针对不同类型设备进行了组件设计,提供了组件在不同平台上的样式适配能力,此种组件称为“多态组件”。
- UI组件:方舟开发框架不仅提供了多种基础组件,如文本显示、图片显示、按键交互等,也提供了支持视频播放能力的媒体组件。并且针对不同类型设备进行了组件设计,提供了组件在不同平台上的样式适配能力,此种组件称为“多态组件”。
- **布局计算**:UI界面设计离不开布局的参与。方舟开发框架提供了多种布局方式,不仅保留了经典的弹性布局能力,也提供了列表、宫格、栅格布局和适应多分辨率场景开发的原子布局能力。
- 布局:UI界面设计离不开布局的参与。方舟开发框架提供了多种布局方式,不仅保留了经典的弹性布局能力,也提供了列表、宫格、栅格布局和适应多分辨率场景开发的原子布局能力。
- **动画能力**:方舟开发框架对于UI界面的美化,除了组件内置动画效果外,也提供了属性动画、转场动画和自定义动画能力。
- 动画:方舟开发框架对于UI界面的美化,除了组件内置动画效果外,也提供了属性动画、转场动画和自定义动画能力。
- **UI交互**:方舟开发框架提供了多种交互能力,满足应用在不同平台通过不同输入设备均可正常进行UI交互响应,默认适配了触摸手势、遥控器、鼠标等输入操作,同时也提供事件通知能力
- 绘制:方舟开发框架提供了多种绘制能力,以满足开发者绘制自定义形状的需求,支持图形绘制、颜色填充、文本绘制、图片绘制等
- **绘制**:方舟开发框架提供了多种绘制能力,以满足开发者绘制自定义形状的需求,支持图形绘制、颜色填充、文本绘制、图片绘制等
- 交互事件:方舟开发框架提供了多种交互能力,满足应用在不同平台通过不同输入设备均可正常进行UI交互响应,默认适配了触摸手势、遥控器、鼠标等输入操作,同时也提供事件通知能力
- **平台API通道**:方舟开发框架提供了API扩展机制,平台能力通过此种机制进行封装,提供风格统一的JS接口。
- 平台API通道:方舟开发框架提供了API扩展机制,平台能力通过此种机制进行封装,提供风格统一的JS接口。
- 两种开发范式:方舟开发框架针对不同目的和技术背景的开发者提供了两种开发范式,分别是基于JS扩展的类Web开发范式(简称“类Web开发范式”)和基于TS扩展的声明式开发范式(简称“声明式开发范式”)。
## 选择方案
| 开发范式名称 | 简介 | 适用场景 | 适用人群 |
| -------- | ---------------------------------------- | ---------------- | ------------------- |
| 类Web开发范式 | 采用经典的HML、CSS、JavaScript三段式开发方式。使用HML标签文件进行布局搭建,使用CSS文件进行样式描述,使用JavaScript文件进行逻辑处理。UI组件与数据之间通过单向数据绑定的方式建立关联,当数据发生变化时,UI界面自动触发更新。此种开发方式,更接近Web前端开发者的使用习惯,快速将已有的Web应用改造成方舟开发框架应用。 | 界面较为简单的中小型应用和卡片 | Web前端开发人员 |
| 声明式开发范式 | 采用TS语言并进行声明式UI语法扩展,从组件、动效和状态管理三个维度提供了UI绘制能力。UI开发更接近自然语义的编程方式,让开发者直观地描述UI界面,不必关心框架如何实现UI绘制和渲染,实现极简高效开发。同时,选用有类型标注的TS语言,引入编译期的类型校验。 | 复杂度较大、团队合作度较高的程序 | 移动系统应用开发人员、系统应用开发人员 |
方舟开发框架针对不同目的和技术背景的开发者提供了两种开发范式,分别是基于JS扩展的类Web开发范式(简称“类Web开发范式”)和基于TS扩展的声明式开发范式(简称“声明式开发范式”)。下面我们对这两种开发范式进行对比与描述。
### 类Web开发范式
类Web开发范式,采用经典的HML、CSS、JavaScript三段式开发方式。使用HML标签文件进行布局搭建,使用CSS文件进行样式描述,使用JavaScript文件进行逻辑处理。UI组件与数据之间通过单向数据绑定的方式建立关联,当数据发生变化时,UI界面自动触发更新。此种开发方式,更接近Web前端开发者的使用习惯,快速将已有的Web应用改造成方舟开发框架应用。主要适用于界面较为简单的中小型应用开发。
### 声明式开发范式
声明式开发范式,采用TS语言并进行声明式UI语法扩展,从组件、动效和状态管理三个维度提供了UI绘制能力。UI开发更接近自然语义的编程方式,让开发者直观地描述UI界面,不必关心框架如何实现UI绘制和渲染,实现极简高效开发。同时,选用有类型标注的TS语言,引入编译期的类型校验,更适用大型的应用开发。
### 两种开发范式对比
| **开发范式名称** | **语言生态** | **UI更新方式** | **适用场景** | **适用人群** |
| -------- | -------- | -------- | -------- | -------- |
| 类Web开发范式 | JS语言 | 数据驱动更新 | 界面较为简单的程序应用和卡片 | Web前端开发人员 |
| 声明式开发范式 | 扩展的TS语言(eTS) | 数据驱动更新 | 复杂度较大、团队合作度较高的程序 | 移动系统应用开发人员、系统应用开发人员 |
### 框架结构
......
......@@ -101,7 +101,7 @@ ar-AE.json
| 参数 | 类型 | 必填 | 描述 |
| ------ | ------------- | ---- | ---------------------------------------- |
| path | string | 是 | 资源路径 |
| params | Array\|Object | 否 | 运行时用来替换占位符的实际内容,占位符分为两种:<br/>-&nbsp;具名占位符,例如{name}。实际内容必须用Object类型指定,例如:$t('strings.object',&nbsp;{&nbsp;name:&nbsp;'Hello&nbsp;world'&nbsp;})。<br/>-&nbsp;数字占位符,例如{0}。实际内容必须用Array类型指定,例如:$t('strings.array',&nbsp;['Hello&nbsp;world'])。 |
| params | Array\|Object | 否 | 运行时用来替换占位符的实际内容,占位符分为两种:<br/>- 具名占位符,例如{name}。实际内容必须用Object类型指定,例如:```$t('strings.object', {name:'Hello world'})```<br> - 数字占位符,例如{0}。实际内容必须用Array类型指定,例如:```$t('strings.array', [Hello world']``` |
- 简单格式化示例代码
```
......
# 事件
事件主要为手势事件。手势事件主要用于具有触摸屏的设备。
## 手势事件
# 手势事件
手势表示由单个或多个事件识别的语义动作(例如:点击、拖动和长按)。一个完整的手势也可能由多个事件组成,对应手势的生命周期。支持的事件有:
......
......@@ -12,13 +12,17 @@
![zh-cn_image_0000001117452952](figures/zh-cn_image_0000001117452952.png)
- **Application**
应用层表示开发者开发的FA应用,这里的FA应用特指JS FA应用。
- **Framework**
前端框架层主要完成前端页面解析,以及提供MVVM(Model-View-ViewModel)开发模式、页面路由机制和自定义组件等能力。
- **Engine**
引擎层主要提供动画解析、DOM(Document Object Model)树构建、布局计算、渲染命令构建与绘制、事件管理等能力。
- **Porting Layer**
适配层主要完成对平台层进行抽象,提供抽象接口,可以对接到系统平台。比如:事件对接、渲染管线对接和系统生命周期对接等。
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册