Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
提交 5b2770a6 编写于 作者: H HelloCrease
浏览文件
操作

update docs 

Signed-off-by: NHelloCrease <lian15@huawei.com>
上级 41284935
显示空白变更内容
内联 并排
Showing with 465 addition and 301 deletion
zh-cn/application-dev/quick-start/Readme-CN.md
浏览文件 @ 5b2770a6
......@@ -9,7 +9,6 @@
- 开发基础知识
- [应用包结构说明(FA模型)](package-structure.md)
- [应用包结构说明(Stage模型)](stage-structure.md)
- [资源文件的分类](basic-resource-file-categories.md)
- [SysCap说明](syscap.md)
- [HarmonyAppProvision配置文件](app-provision-structure.md)
zh-cn/application-dev/reference/arkui-js/Readme-CN.md
浏览文件 @ 5b2770a6
# 基于JS扩展的类Web开发范式
- 组件
- 通用
- 组件通用信息
- [通用属性](js-components-common-attributes.md)
- [通用样式](js-components-common-styles.md)
- [通用事件](js-components-common-events.md)
......@@ -12,7 +11,7 @@
- [媒体查询](js-components-common-mediaquery.md)
- [自定义字体样式](js-components-common-customizing-font.md)
- [原子布局](js-components-common-atomic-layout.md)
- 容器组件
- 容器组件
- [badge](js-components-container-badge.md)
- [dialog](js-components-container-dialog.md)
- [div](js-components-container-div.md)
......@@ -30,7 +29,7 @@
- [tabs](js-components-container-tabs.md)
- [tab-bar](js-components-container-tab-bar.md)
- [tab-content](js-components-container-tab-content.md)
- 基础组件
- 基础组件
- [button](js-components-basic-button.md)
- [chart](js-components-basic-chart.md)
- [divider](js-components-basic-divider.md)
......@@ -60,9 +59,9 @@
- [toggle](js-components-basic-toggle.md)
- [web](js-components-basic-web.md)
- [xcomponent](js-components-basic-xcomponent.md)
- 媒体组件
- 媒体组件
- [video](js-components-media-video.md)
- 画布组件
- 画布组件
- [canvas组件](js-components-canvas-canvas.md)
- [CanvasRenderingContext2D对象](js-components-canvas-canvasrenderingcontext2d.md)
- [Image对象](js-components-canvas-image.md)
......@@ -72,12 +71,12 @@
- [ImageBitmap对象](js-components-canvas-imagebitmap.md)
- [OffscreenCanvas对象](js-components-canvas-offscreencanvas.md)
- [OffscreenCanvasRenderingContext2D对象](js-offscreencanvasrenderingcontext2d.md)
- 栅格组件
- 栅格组件
- [基本概念](js-components-grid-basic-concepts.md)
- [grid-container](js-components-grid-container.md)
- [grid-row](js-components-grid-row.md)
- [grid-col](js-components-grid-col.md)
- svg组件
- svg组件
- [通用属性](js-components-svg-common-attributes.md)
- [svg](js-components-svg.md)
- [rect](js-components-svg-rect.md)
......@@ -93,6 +92,8 @@
- [animate](js-components-svg-animate.md)
- [animateMotion](js-components-svg-animatemotion.md)
- [animateTransform](js-components-svg-animatetransform.md)
- 自定义组件
- [基本用法](js-components-custom-basic-usage.md)
- [继承样式](js-components-custom-style.md)
......@@ -101,5 +102,4 @@
- [事件参数](js-components-custom-event-parameter.md)
- [slot插槽](js-components-custom-slot.md)
- [生命周期定义](js-components-custom-lifecycle.md)
- 附录
- [类型说明](js-appendix-types.md)
- [数据类型说明](js-appendix-types.md)
zh-cn/application-dev/reference/arkui-js/js-appendix-types.md
浏览文件 @ 5b2770a6
# 类型说明
# 数据类型说明
## 长度类型
......@@ -11,7 +11,7 @@
## 颜色类型
| 名称 | 类型定义 | 描述 |
| ----- | --------------------- | ---------------------------------------- |
| ----- | --------------------------- | ---------------------------------------- |
| color | string&nbsp;\|&nbsp;颜色枚举字符串 | 用于描述颜色信息，JS脚本中不支持颜色枚举格式。<br/>字符串格式如下：<br/>-&nbsp;'rgb(255,&nbsp;255,&nbsp;255)'<br/>-&nbsp;'rgba(255,&nbsp;255,&nbsp;255,&nbsp;1.0)'<br/>-&nbsp;HEX格式：'\#rrggbb'，'\#aarrggbb'<br/>-&nbsp;枚举格式：'black'，'white'。 |
**表1** 当前支持的颜色枚举
......
zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
浏览文件 @ 5b2770a6
......@@ -1777,7 +1777,7 @@ getImageData(sx: number, sy: number, sw: number, sh: number): Object
```html
<!-- xxx.hml -->
<div>
<canvas style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
<canvas id="getImageData" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>
```
......@@ -1813,7 +1813,7 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX: number, dirtyY:
```html
<!-- xxx.hml -->
<div>
<canvas style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
<canvas id="getImageData" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
</div>
```
......
zh-cn/application-dev/reference/arkui-js/js-components-common-transition.md
浏览文件 @ 5b2770a6
......@@ -49,6 +49,8 @@ PageA跳转到PageB，跳转的共享元素为image， shareid为“shareImage
<list>
<list-item type="description">
<image src="item.jpg" shareid="shareImage" onclick="jump" class="shared-transition-style"></image>
</list-item>
<list-item>
<text onclick="jump">Click on picture to Jump to ths details</text>
</list-item>
</list>
......@@ -61,7 +63,8 @@ import router from '@system.router';
export default {
jump() {
router.push({
uri: 'detailpage',
// 路径要与config.json配置里面的相同
uri: 'pages/detailpage',
});
},
}
......
zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
浏览文件 @ 5b2770a6
# 基于TS扩展的声明式开发范式
- 组件
- 通用
- 组件通用信息
- 通用事件
- [点击事件](ts-universal-events-click.md)
- [触摸事件](ts-universal-events-touch.md)
......@@ -49,7 +48,7 @@
- [RotationGesture](ts-basic-gestures-rotationgesture.md)
- [SwipeGesture](ts-basic-gestures-swipegesture.md)
- [组合手势](ts-combined-gestures.md)
- 基础组件
- 基础组件
- [Blank](ts-basic-components-blank.md)
- [Button](ts-basic-components-button.md)
- [Checkbox](ts-basic-components-checkbox.md)
......@@ -88,7 +87,7 @@
- [Toggle](ts-basic-components-toggle.md)
- [Web](ts-basic-components-web.md)
- [XComponent](ts-basic-components-xcomponent.md)
- 容器组件
- 容器组件
- [AbilityComponent](ts-container-ability-component.md)
- [AlphabetIndexer](ts-container-alphabet-indexer.md)
- [Badge](ts-container-badge.md)
......@@ -113,9 +112,9 @@
- [Swiper](ts-container-swiper.md)
- [Tabs](ts-container-tabs.md)
- [TabContent](ts-container-tabcontent.md)
- 媒体组件
- 媒体组件
- [Video](ts-media-components-video.md)
- 绘制组件
- 绘制组件
- [Circle](ts-drawing-components-circle.md)
- [Ellipse](ts-drawing-components-ellipse.md)
- [Line](ts-drawing-components-line.md)
......@@ -124,7 +123,7 @@
- [Path](ts-drawing-components-path.md)
- [Rect](ts-drawing-components-rect.md)
- [Shape](ts-drawing-components-shape.md)
- 画布组件
- 画布组件
- [Canvas](ts-components-canvas-canvas.md)
- [CanvasRenderingContext2D对象](ts-canvasrenderingcontext2d.md)
- [OffscreenCanvasRenderingConxt2D对象](ts-offscreencanvasrenderingcontext2d.md)
......@@ -133,6 +132,8 @@
- [CanvasGradient对象](ts-components-canvas-canvasgradient.md)
- [ImageBitmap对象](ts-components-canvas-imagebitmap.md)
- [ImageData对象](ts-components-canvas-imagedata.md)
- 动画
- [属性动画](ts-animatorproperty.md)
- [显式动画](ts-explicit-animation.md)
......
zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
浏览文件 @ 5b2770a6
......@@ -25,7 +25,7 @@ RenderingContextSettings(antialias?: boolean)
- 参数
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------- | ---- | ---- | ----- | ---------------- |
| --------- | ------- | ---- | ----- | ---------------- |
| antialias | boolean | 否 | false | 表明canvas是否开启抗锯齿。 |
......@@ -1747,7 +1747,7 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sWidth: number,
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------- | ---------------------------------------- | ---- | ---- | ----------------------------- |
| ------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| image | [ImageBitmap](ts-components-canvas-imagebitmap.md)或[PixelMap](../apis/js-apis-image.md#pixelmap7) | 是 | null | 图片资源，请参考ImageBitmap或PixelMap。 |
| sx | number | 否 | 0 | 裁切源图像时距离源图像左上角的x坐标值。 |
| sy | number | 否 | 0 | 裁切源图像时距离源图像左上角的y坐标值。 |
......@@ -1755,8 +1755,8 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sWidth: number,
| sHeight | number | 否 | 0 | 裁切源图像时需要裁切的高度。 |
| dx | number | 是 | 0 | 绘制区域左上角在x轴的位置。 |
| dy | number | 是 | 0 | 绘制区域左上角在y&nbsp;轴的位置。 |
| dWidth | number | 否 | 0 | 绘制区域的宽度。 |
| dHeight | number | 否 | 0 | 绘制区域的高度。 |
| dWidth | number | 否 | 0 | 绘制区域的宽度。 当绘制区域的宽度和裁剪图像的宽度不一致时，将图像宽度拉伸或压缩为绘制区域的宽度。 |
| dHeight | number | 否 | 0 | 绘制区域的高度。 当绘制区域的高度和裁剪图像的高度不一致时，将图像高度拉伸或压缩为绘制区域的高度。 |
- 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md
浏览文件 @ 5b2770a6
......@@ -35,7 +35,7 @@ Swiper(value:{controller?: SwiperController})
| autoPlay | boolean | false | 子组件是否自动播放，自动播放状态下，导航点不可操作。 |
| interval | number | 3000 | 使用自动播放时播放的时间间隔，单位为毫秒。 |
| indicator | boolean | true | 是否启用导航点指示器。 |
| loop | boolean | true | 是否开启循环。 |
| loop | boolean | true | 是否开启循环。 <br>设置为true时表示开启循环，在LazyForEach懒循环加载模式下，加载的组件数量建议大于5个。 |
| duration | number | 400 | 子组件切换的动画时长，单位为毫秒。 |
| vertical | boolean | false | 是否为纵向滑动。 |
| itemSpace | Length | 0 | 设置子组件与子组件之间间隙。 |
......
zh-cn/application-dev/ui/Readme-CN.md
浏览文件 @ 5b2770a6
......@@ -80,10 +80,9 @@
- [目录结构](ts-framework-directory.md)
- [应用代码文件访问规则](ts-framework-file-access-rules.md)
- [js标签配置](ts-framework-js-tag.md)
- 资源访问
- [访问应用资源](ts-application-resource-access.md)
- [访问系统资源](ts-system-resource-access.md)
- [媒体资源类型说明](ts-media-resource-type.md)
- 资源管理
- [资源文件的分类](ui-ts-basic-resource-file-categories.md)
- [资源访问](ts-resource-access.md)
- [像素单位](ts-pixel-units.md)
- [类型定义](ts-types.md)
- 声明式语法
......
zh-cn/application-dev/ui/ts-media-resource-type.md 已删除 100644 → 0
浏览文件 @ 41284935
# 媒体资源类型说明
- 图片资源类型说明
| 格式 | 文件后缀名 |
| -------- | -------- |
| JPEG | .jpg |
| PNG | .png |
| GIF | .gif |
| SVG | .svg |
| WEBP | .webp |
| BMP | .bmp |
- 音视频资源类型说明
| 格式 | 支持的文件类型 |
| -------- | -------- |
| H.263 | .3gp <br>.mp4 |
| H.264 AVC <br> Baseline Profile (BP) | .3gp <br>.mp4 |
| MPEG-4 SP | .3gp |
| VP8 | .webm <br> .mkv |
zh-cn/application-dev/ui/ts-resource-access.md 0 → 100644
浏览文件 @ 5b2770a6
# 资源访问
## 访问应用资源
在工程中，通过```"$r('app.type.name')"```的形式引用应用资源。app代表是应用内resources目录中定义的资源；type代表资源类型（或资源的存放位置），可以取“color”、“float”、“string”、“plural”、“media”，name代表资源命名，由开发者定义资源时确定。
引用rawfile下资源时使用```"$rawfile('filename')"```的形式，当前$rawfile仅支持Image控件引用图片资源，filename需要表示为rawfile目录下的文件相对路径，文件名需要包含后缀，路径开头不可以以"/"开头。
> **说明：**
> 资源描述符不能拼接使用，仅支持普通字符串如`'app.type.name'`。
在xxx.ets文件中，可以使用在resources目录中定义的资源。
```ts
Text($r('app.string.string_hello'))
.fontColor($r('app.color.color_hello'))
.fontSize($r('app.float.font_hello'))
}
Text($r('app.string.string_world'))
.fontColor($r('app.color.color_world'))
.fontSize($r('app.float.font_world'))
}
Text($r('app.string.message_arrive', "five of the clock")) // 引用string资源，$r的第二个参数用于替换%s
.fontColor($r('app.color.color_hello'))
.fontSize($r('app.float.font_hello'))
}
Text($r('app.plural.eat_apple', 5, 5)) // plural$r引用，第一个指定plural资源，第二个参数指定单复数的数量，此处第三个数字为对%d的替换
.fontColor($r('app.color.color_world'))
.fontSize($r('app.float.font_world'))
}
Image($r('app.media.my_background_image')) // media资源的$r引用
Image($rawfile('test.png')) // rawfile$r引用rawfile目录下图片
Image($rawfile('newDir/newTest.png')) // rawfile$r引用rawfile目录下图片
```
## 访问系统资源
系统资源包含色彩、圆角、字体、间距、字符串及图片等。通过使用系统资源，不同的开发者可以开发出具有相同视觉风格的应用。
开发者可以通过```“$r('sys.type.resource_id')”```的形式引用系统资源。sys代表是系统资源；type代表资源类型，可以取“color”、“float”、“string”、“media”；resource_id代表资源id。
```ts
Text('Hello')
.fontColor($r('sys.color.ohos_id_color_emphasize'))
.fontSize($r('sys.float.ohos_id_text_size_headline1'))
.fontFamily($r('sys.string.ohos_id_text_font_family_medium'))
.backgroundColor($r('sys.color.ohos_id_color_palette_aux1'))
Image($r('sys.media.ohos_app_icon'))
.border({color: $r('sys.color.ohos_id_color_palette_aux1'), radius: $r('sys.float.ohos_id_corner_radius_button'), width: 2})
.margin({top: $r('sys.float.ohos_id_elements_margin_horizontal_m'), bottom: $r('sys.float.ohos_id_elements_margin_horizontal_l')})
.height(200)
.width(300)
```
## 资源文件示例
color.json文件的内容如下：
```
{
"color": [
{
"name": "color_hello",
"value": "#ffff0000"
},
{
"name": "color_world",
"value": "#ff0000ff"
}
]
}
```
float.json文件的内容如下：
```
{
"float":[
{
"name":"font_hello",
"value":"28.0fp"
},
{
"name":"font_world",
"value":"20.0fp"
}
]
}
```
string.json文件的内容如下：
```
{
"string":[
{
"name":"string_hello",
"value":"Hello"
},
{
"name":"string_world",
"value":"World"
},
{
"name":"message_arrive",
"value":"We will arrive at %s."
}
]
}
```
plural.json文件的内容如下：
```
{
"plural":[
{
"name":"eat_apple",
"value":[
{
"quantity":"one",
"value":"%d apple"
},
{
"quantity":"other",
"value":"%d apples"
}
]
}
]
}
```
## 相关实例
针对访问应用资源，有以下相关实例可供参考：
- [`ResourceManager`：资源管理器（eTS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/common/ResourceManager)
zh-cn/application-dev/ui/ts-system-resource-access.md 已删除 100644 → 0
浏览文件 @ 41284935
# 访问系统资源
系统资源包含色彩、圆角、字体、间距、字符串及图片等。通过使用系统资源，不同的开发者可以开发出具有相同视觉风格的应用。
开发者可以通过```“$r('sys.type.resource_id')”```的形式引用系统资源。sys代表是系统资源；type代表资源类型，可以取“color”、“float”、“string”、“media”；resource_id代表资源id。
```
Text('Hello')
.fontColor($r('sys.color.ohos_id_color_emphasize'))
.fontSize($r('sys.float.ohos_id_text_size_headline1'))
.fontFamily($r('sys.string.ohos_id_text_font_family_medium'))
.backgroundColor($r('sys.color.ohos_id_color_palette_aux1'))
Image($r('sys.media.ohos_app_icon'))
.border({color: $r('sys.color.ohos_id_color_palette_aux1'), radius: $r('sys.float.ohos_id_corner_radius_button'), width: 2})
.margin({top: $r('sys.float.ohos_id_elements_margin_horizontal_m'), bottom: $r('sys.float.ohos_id_elements_margin_horizontal_l')})
.height(200)
.width(300)
```
zh-cn/application-dev/quick-start/basic-resource-file-categories.md → zh-cn/application-dev/ui/ui-ts-basic-resource-file-categories.md
浏览文件 @ 5b2770a6
......@@ -72,7 +72,61 @@ 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。 |
| profile | 表示其他类型文件，以原始文件形式保存。 | 文件名可自定义。 |
### 媒体资源类型说明
表1 图片资源类型说明
| 格式 | 文件后缀名 |
| ---- | ----- |
| JPEG | .jpg |
| PNG | .png |
| GIF | .gif |
| SVG | .svg |
| WEBP | .webp |
| BMP | .bmp |
表2 音视频资源类型说明
| 格式 | 支持的文件类型 |
| ------------------------------------ | --------------- |
| H.263 | .3gp <br>.mp4 |
| H.264 AVC <br> Baseline Profile (BP) | .3gp <br>.mp4 |
| MPEG-4 SP | .3gp |
| VP8 | .webm <br> .mkv |
## 创建资源文件
在resources目录下，可按照限定词目录和资源组目录的说明创建子目录和目录内的文件。
同时，DevEco Studio也提供了创建资源目录和资源文件的界面。
- 创建资源目录及资源文件
在resources目录右键菜单选择“New > Resource File”，此时可同时创建目录和文件。
文件默认创建在base目录的对应资源组下。如果选择了限定词，则会按照命名规范自动生成限定词+资源组目录，并将文件创建在目录中。
目录名自动生成，格式固定为“限定词.资源组”，例如创建一个限定词为横竖屏类别下的竖屏，资源组为绘制资源的目录，自动生成的目录名称为“vertical.graphic”。
![create-resource-file-1](figures/create-resource-file-1.png)
- 创建资源目录
在resources目录右键菜单选择“New > Resource Directory”，此时可创建资源目录。
选择资源组类型，设置限定词，创建后自动生成目录名称。目录名称格式固定为“限定词.资源组”，例如创建一个限定词为横竖屏类别下的竖屏，资源组为绘制资源的目录，自动生成的目录名称为“vertical.graphic”。
![create-resource-file-2](figures/create-resource-file-2.png)
- 创建资源文件
在资源目录的右键菜单选择“New > XXX Resource File”，即可创建对应资源组目录的资源文件。
例如，在element目录下可新建Element Resource File。
![create-resource-file-3](figures/create-resource-file-3.png)
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或