提交 dfeeecfb 编写于 作者: H HelloCrease

update docs

Signed-off-by: NHelloCrease <lian15@huawei.com>
上级 6bb03c36
......@@ -6,11 +6,10 @@
>
> 该组件从API Version 8 开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 子组件
构造参数type为"surface"时不支持。\
构造参数type为"surface"时不支持。
从API version 9开始,构造参数type为"component"时可以包含子组件。
## 接口
......@@ -19,12 +18,12 @@
**参数:**
| 参数名 | 参数类型 | 必填 | 描述 |
| --------- | ------ | ---- | ----- |
| id | string | 是 | 组件的唯一标识,支持最大的字符串长度128。 |
| type | string | 是 | 用于指定XComponent组件类型,可选值为:<br/>-"surface":用于EGL/OpenGLES和媒体数据写入,组件内容单独送显,直接合成到屏幕。<br/>-"component"<sup>9+</sup> :XComponent将变成一个容器组件,并可在其中执行非UI逻辑以动态加载显示内容。 |
| libraryname | string | 否 | 应用Native层编译输出动态库名称,仅XComponent类型为"surface"时有效。 |
| controller | [XComponentcontroller](#xcomponentcontroller) | 否 | 给组件绑定一个控制器,通过控制器调用组件方法,仅XComponent类型为"surface"时有效。 |
| 参数名 | 参数类型 | 必填 | 描述 |
| ----------- | ---------------------------------------- | ---- | ---------------------------------------- |
| id | string | 是 | 组件的唯一标识,支持最大的字符串长度128。 |
| type | string | 是 | 用于指定XComponent组件类型,可选值为:<br/>-"surface":用于EGL/OpenGLES和媒体数据写入,组件内容单独送显,直接合成到屏幕。<br/>-"component"<sup>9+</sup> :XComponent将变成一个容器组件,并可在其中执行非UI逻辑以动态加载显示内容。 |
| libraryname | string | 否 | 应用Native层编译输出动态库名称,仅XComponent类型为"surface"时有效。 |
| controller | [XComponentcontroller](#xcomponentcontroller) | 否 | 给组件绑定一个控制器,通过控制器调用组件方法,仅XComponent类型为"surface"时有效。 |
> **说明:**
>
......@@ -46,7 +45,7 @@
## 事件
仅type为"surface"时以下事件有效。不支持[通用事件和手势](./Readme-CN.md)
仅type为"surface"时以下事件有效。不支持不支持[通用事件](ts-universal-events-click.md)[手势](ts-gesture-settings.md)
### onLoad
......@@ -56,9 +55,9 @@ onLoad(callback: (event?: object) => void )
**参数:**
| 参数名 | 参数类型 | 必填 | 描述 |
| ------------- | ------ | ---- | ----------------------- |
| event | object | 否 | 获取XComponent实例对象的context,context上挂载的方法由开发者在c++层定义。 |
| 参数名 | 参数类型 | 必填 | 描述 |
| ----- | ------ | ---- | ---------------------------------------- |
| event | object | 否 | 获取XComponent实例对象的context,context上挂载的方法由开发者在c++层定义。 |
### onDestroy
......@@ -99,7 +98,7 @@ setXComponentSurfaceSize(value: {surfaceWidth: number, surfaceHeight: number}):
**参数:**
| 参数名 | 参数类型 | 必填 | 描述 |
| 参数名 | 参数类型 | 必填 | 描述 |
| ------------- | ------ | ---- | ----------------------- |
| surfaceWidth | number | 是 | XComponent持有Surface的宽度。 |
| surfaceHeight | number | 是 | XComponent持有Surface的高度。 |
......
......@@ -22,12 +22,12 @@ Video(value: {src?: string | Resource, currentProgressRate?: number | string | P
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| src | string \| [Resource](ts-types.md) | 否 | 视频播放源的路径,支持本地视频路径和网络路径。<br>支持在resources下面的video或rawfile文件夹里放置媒体资源。<br>支持dataability://的路径前缀,用于访问通过Data Ability提供的视频路径,具体路径信息详见[DataAbility说明](../../ability/fa-dataability.md)<br/>**说明:**<br/>视频支持的格式是:mp4、mkv、webm、TS。 |
| currentProgressRate | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;PlaybackSpeed<sup>8+</sup> | 否 | 视频播放倍速。<br/>**说明:**<br/>number取值仅支持:0.75,1.0,1.25,1.75,2.0。<br/>默认值:1.0 \| PlaybackSpeed.Speed_Forward_1_00_X |
| previewUri | string&nbsp;\|&nbsp;PixelMap<sup>8+</sup>&nbsp;\|&nbsp;[Resource](ts-types.md) | 否 | 视频未播放时的预览图片路径。 |
| controller | [VideoController](#videocontroller) | 否 | 设置视频控制器。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------------------- | ---------------------------------------- | ---- | ---------------------------------------- |
| src | string \| [Resource](ts-types.md) | 否 | 视频播放源的路径,支持本地视频路径和网络路径。<br>支持在resources下面的video或rawfile文件夹里放置媒体资源。<br>支持dataability://的路径前缀,用于访问通过Data Ability提供的视频路径,具体路径信息详见 [DataAbility说明](../../application-models/dataability-overview.md)<br/>**说明:**<br/>视频支持的格式是:mp4、mkv、webm、TS。 |
| currentProgressRate | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;PlaybackSpeed<sup>8+</sup> | 否 | 视频播放倍速。<br/>**说明:**<br/>number取值仅支持:0.75,1.0,1.25,1.75,2.0。<br/>默认值:1.0 \| PlaybackSpeed.Speed_Forward_1_00_X |
| previewUri | string&nbsp;\|&nbsp;PixelMap<sup>8+</sup>&nbsp;\|&nbsp;[Resource](ts-types.md) | 否 | 视频未播放时的预览图片路径。 |
| controller | [VideoController](#videocontroller) | 否 | 设置视频控制器。 |
## PlaybackSpeed<sup>8+</sup>枚举说明
......@@ -43,29 +43,29 @@ Video(value: {src?: string | Resource, currentProgressRate?: number | string | P
除支持[通用属性](ts-universal-attributes-size.md)外,还支持以下属性:
| 名称 | 参数类型 | 描述 |
| --------- | ---------------------------------------- | ----------------------------------------------- |
| muted | boolean | 是否静音。<br/>默认值:false |
| autoPlay | boolean | 是否自动播放。<br/>默认值:false |
| 名称 | 参数类型 | 描述 |
| --------- | ---------------------------------------- | ---------------------------- |
| muted | boolean | 是否静音。<br/>默认值:false |
| autoPlay | boolean | 是否自动播放。<br/>默认值:false |
| controls | boolean | 控制视频播放的控制栏是否显示。<br/>默认值:true |
| objectFit | [ImageFit](ts-basic-components-image.md) | 设置视频显示模式。<br/>默认值:Cover |
| loop | boolean | 是否单个视频循环播放。<br/>默认值:false |
| objectFit | [ImageFit](ts-basic-components-image.md) | 设置视频显示模式。<br/>默认值:Cover |
| loop | boolean | 是否单个视频循环播放。<br/>默认值:false |
## 事件
除支持[通用事件](ts-universal-events-click.md)外,还支持以下事件:
| 名称 | 功能描述 |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| onStart(event:()&nbsp;=&gt;&nbsp;void) | 播放时触发该事件。 |
| onPause(event:()&nbsp;=&gt;&nbsp;void) | 暂停时触发该事件。 |
| onFinish(event:()&nbsp;=&gt;&nbsp;void) | 播放结束时触发该事件。 |
| onError(event:()&nbsp;=&gt;&nbsp;void) | 播放失败时触发该事件。 |
| 名称 | 功能描述 |
| ---------------------------------------- | ---------------------------------------- |
| onStart(event:()&nbsp;=&gt;&nbsp;void) | 播放时触发该事件。 |
| onPause(event:()&nbsp;=&gt;&nbsp;void) | 暂停时触发该事件。 |
| onFinish(event:()&nbsp;=&gt;&nbsp;void) | 播放结束时触发该事件。 |
| onError(event:()&nbsp;=&gt;&nbsp;void) | 播放失败时触发该事件。 |
| onPrepared(callback:(event?:&nbsp;{&nbsp;duration:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | 视频准备完成时触发该事件,通过duration可以获取视频时长,单位为秒(s)。 |
| onSeeking(callback:(event?:&nbsp;{&nbsp;time:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | 操作进度条过程时上报时间信息,单位为s。 |
| onSeeked(callback:(event?:&nbsp;{&nbsp;time:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | 操作进度条完成后,上报播放时间信息,单位为s。 |
| onUpdate(callback:(event?:&nbsp;{&nbsp;time:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | 播放进度变化时触发该事件,单位为s,更新时间间隔为250ms。 |
| onFullscreenChange(callback:(event?:&nbsp;{&nbsp;fullscreen:&nbsp;boolean&nbsp;})&nbsp;=&gt;&nbsp;void) | 在全屏播放与非全屏播放状态之间切换时触发该事件,返回值为true表示进入全屏播放状态,为false则表示非全屏播放。 |
| onSeeking(callback:(event?:&nbsp;{&nbsp;time:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | 操作进度条过程时上报时间信息,单位为s。 |
| onSeeked(callback:(event?:&nbsp;{&nbsp;time:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | 操作进度条完成后,上报播放时间信息,单位为s。 |
| onUpdate(callback:(event?:&nbsp;{&nbsp;time:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | 播放进度变化时触发该事件,单位为s,更新时间间隔为250ms。 |
| onFullscreenChange(callback:(event?:&nbsp;{&nbsp;fullscreen:&nbsp;boolean&nbsp;})&nbsp;=&gt;&nbsp;void) | 在全屏播放与非全屏播放状态之间切换时触发该事件,返回值为true表示进入全屏播放状态,为false则表示非全屏播放。 |
## VideoController
......@@ -106,9 +106,9 @@ setCurrentTime(value: number)
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | -------- | ---- | --------------------------- |
| value | number | 是 | 视频播放进度位置,单位为s。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ----- | ------ | ---- | -------------- |
| value | number | 是 | 视频播放进度位置,单位为s。 |
### requestFullscreen
......@@ -118,8 +118,8 @@ requestFullscreen(value: boolean)
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ----- | ------ | ---- | ------- |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ----- | ------- | ---- | --------------------- |
| value | boolean | 是 | 是否全屏播放。<br/>默认值:false |
### exitFullscreen
......@@ -136,10 +136,10 @@ setCurrentTime(value: number, seekMode: SeekMode)
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | ---- | ------------------ |
| value | number | 是 | 视频播放进度位置,单位为s。 |
| seekMode | SeekMode | 是 | 跳转模式。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | ---- | -------------- |
| value | number | 是 | 视频播放进度位置,单位为s。 |
| seekMode | SeekMode | 是 | 跳转模式。 |
## SeekMode<sup>8+</sup>枚举说明
......
......@@ -58,6 +58,6 @@ JS服务卡片(entry/src/main/js/Widget)的典型开发目录结构如下:
## 配置文件
FA卡片需要在应用配置文件config.json中进行配置。详细的配置内容请参考[FA卡片配置文件说明](../../ability/fa-formability.md#配置卡片配置文件)
FA卡片需要在应用配置文件config.json中进行配置。详细的配置内容请参考[FA卡片配置文件说明](../../application-models/widget-development-fa.md#配置卡片配置文件)
Stage卡片需要在应用配置文件module.json5中的extensionAbilities标签下,配置ExtensionAbility相关信息。详细的配置内容请参考[Stage卡片配置文件说明](../../ability/stage-formextension.md#配置卡片配置文件)
\ No newline at end of file
Stage卡片需要在应用配置文件module.json5中的extensionAbilities标签下,配置ExtensionAbility相关信息。详细的配置内容请参考[Stage卡片配置文件说明](../../application-models/widget-development-stage.md#配置卡片配置文件)
\ No newline at end of file
......@@ -27,7 +27,7 @@
| 开发范式名称 | 简介 | 适用场景 | 适用人群 |
| -------- | ---------------------------------------- | ---------------- | ------------------- |
| 声明式开发范式 | 采用基于TypeScript进行声明式UI语法扩展而来的[ArkTS语言](../quick-start/arkts-get-started.md),从组件、动画和状态管理三个维度提供了UI绘制能力。声明式开发范式更接近自然语义的编程方式,让开发者直观地描述UI界面,不必关心框架如何实现UI绘制和渲染,实现极简高效开发。 | 复杂度较大、团队合作度较高的应用 | 移动系统应用开发人员、系统应用开发人员 |
| 类Web开发范式 | 采用经典的HML、CSS、JavaScript三段式开发方式,使用HML标签文件进行布局搭建,使用CSS文件进行样式描述,使用JavaScript文件进行逻辑处理。UI组件与数据之间通过单向数据绑定的方式建立关联,当数据发生变化时,UI界面自动触发刷新。该开发方式更接近Web前端开发者的使用习惯,便于快速将已有的Web应用改造成方舟开发框架应用。 | 界面较简单的中小型应用和卡片 | Web前端开发人员 |
| 类Web开发范式 | 采用经典的HML、CSS、JavaScript三段式开发方式,使用HML标签文件进行布局搭建,使用CSS文件进行样式描述,使用JavaScript文件进行逻辑处理。UI组件与数据之间通过单向数据绑定的方式建立关联,当数据发生变化时,UI界面自动触发刷新。该开发方式更接近Web前端开发者的使用习惯,便于快速将已有的Web应用改造成方舟开发框架应用。 | 界面较简单的中小型应用和卡片 | Web前端开发人员 |
## 框架结构
......@@ -37,24 +37,24 @@
## UI与Ability框架的关系
Ability也是OpenHarmony应用的重要组成部分,[Ability框架](../ability/ability-brief.md)包括FA模型与Stage模型两种模型。下表给出了Ability框架的两种模型分别与方舟开发框架的两种开发范式的关系。
OpenHarmony提供了FA模型与Stage模型两种[应用模型](../application-models/application-model-description.md)。下表给出了两种模型分别与方舟开发框架的两种开发范式的关系。
**FA模型:**
| 类型 | UI开发范式 | 说明 |
| -------- | --------------------------- | --------------------------- |
| 应用 | 类web开发范式 | UI开发语言:使用hml/css/js <br>业务入口:使用固定文件名app.ets(Page类型Ability)/service.ts(Service类型Ability)/data.ts(Data类型Ability)<br>业务逻辑语言:js/ts |
| | 声明式开发范式 | UI开发语言:ArkTS <br>业务入口:使用固定文件名app.ets(Page类型Ability)/service.ts(Service类型Ability)/data.ts(Data类型Ability) <br>业务逻辑语言:js/ts |
| 服务卡片 | 类web开发范式 | UI开发语言:卡片显示使用hml+css+json(action) <br>业务入口:form.ts <br>卡片业务逻辑语言:js/ts |
| | 声明式开发范式 | 当前不支持 |
| 类型 | UI开发范式 | 说明 |
| ---- | -------- | ---------------------------------------- |
| 应用 | 类web开发范式 | UI开发语言:使用hml/css/js <br>业务入口:使用固定文件名app.ets(Page类型Ability)/service.ts(Service类型Ability)/data.ts(Data类型Ability)<br>业务逻辑语言:js/ts |
| | 声明式开发范式 | UI开发语言:ArkTS <br>业务入口:使用固定文件名app.ets(Page类型Ability)/service.ts(Service类型Ability)/data.ts(Data类型Ability) <br>业务逻辑语言:js/ts |
| 服务卡片 | 类web开发范式 | UI开发语言:卡片显示使用hml+css+json(action) <br>业务入口:form.ts <br>卡片业务逻辑语言:js/ts |
| | 声明式开发范式 | 当前不支持 |
**Stage模型:**
| 类型 | UI开发范式 | 说明 |
| -------- | --------------------------- | --------------------------- |
| 应用 | 类web开发范式 | 当前不支持 |
| | 声明式开发范式 | UI开发语言:ArkTS <br>业务入口:应用模型基于ohos.application.Ability/ExtensionAbility等派生 <br>业务逻辑语言:ts |
| 服务卡片 | 类web开发范式 | UI开发语言:卡片显示使用hml+css+json(action) <br>业务入口:从FormExtensionAbility派生 <br>业务逻辑语言:ts |
| | 声明式开发范式 | 当前不支持 |
| 类型 | UI开发范式 | 说明 |
| ---- | -------- | ---------------------------------------- |
| 应用 | 类web开发范式 | 当前不支持 |
| | 声明式开发范式 | UI开发语言:ArkTS <br>业务入口:应用模型基于ohos.application.Ability/ExtensionAbility等派生 <br>业务逻辑语言:ts |
| 服务卡片 | 类web开发范式 | UI开发语言:卡片显示使用hml+css+json(action) <br>业务入口:从FormExtensionAbility派生 <br>业务逻辑语言:ts |
| | 声明式开发范式 | 当前不支持 |
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册