diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-xcomponent.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-xcomponent.md new file mode 100644 index 0000000000000000000000000000000000000000..b7ca1199ab2c1086afbb416f375977494233cb36 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-xcomponent.md @@ -0,0 +1,135 @@ +# xcomponent + +xcomponent标签，提供surface图形渲染绘制能力 + +## 子组件 + +不支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称

+

类型

+

默认值

+

必填

+

描述

+

id

+

string

+

-

+

是

+

组件的唯一标识，支持的最大字符串长度：128。

+

type

+

string

+

-

+

是

+

用于指定XComponent组件类型，可选值为：

+
  • surface：组件内容单独送显，直接合成到屏幕。
+

libraryname

+

string

+

-

+

否

+

应用Native层编译输出动态库名称。

+
+ +## 样式 + +支持[通用样式](js-components-common-styles.md) + +## 事件 + +支持[通用事件](js-components-common-events.md)，还支持如下事件： + + + + + + + + + + + + + + + +

名称

+

参数

+

描述

+

load

+

-

+

插件加载完成时回调事件。

+

destroy

+

-

+

插件卸载完成时回调事件。

+
+ +## 方法 + +除支持[通用方法](js-components-common-methods.md)外，还支持如下方法： + + + + + + + + + + + +

名称

+

参数

+

描述

+

getXComponentSurfaceId

+

-

+

获取XComponent对应Surface的ID，供@ohos接口使用，比如camera相关接口。

+
+ +## 示例 + +1.提供surface类型XComponent，支持相机预览等能力。 +``` + + + + +// index.js +export default { + onload() { + var id = this.$element('xcomponent1').getXComponentSurfaceId(); + camera.setSurfaceId(id); + } +} +``` \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic.md index e03bcd63f036b44469709a344c7cb80b43b91422..1b70c5853d569c751f59b2cd9c1d896234ccf2bb 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic.md @@ -54,4 +54,4 @@ - **[toggle](js-components-basic-toggle.md)** - +- **[xcomponent](js-components-basic-xcomponent.md)** diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md new file mode 100644 index 0000000000000000000000000000000000000000..858f669f22b2ddfc84846833ecbdb082380c282b --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md @@ -0,0 +1,132 @@ +# XComponent + +>![](../../public_sys-resources/icon-note.gif) **说明：** +>该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + +xcomponent标签，提供surface图形渲染绘制能力 + +## 权限列表 + +无 + +## 子组件 + +不支持。 + +## 接口 + +XComponent\(value:{id:string, type:string, libraryname?: string, controller?:XComponentController}\) + +- 参数 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

参数名

+

参数类型

+

必填

+

默认值

+

参数描述

+

id

+

string

+

是

+

''

+

组件的唯一标识，支持的最大字符串长度：128。

+

type

+

string

+

是

+

''

+

用于指定XComponent组件类型，可选值为：

+
  • surface：组件内容单独送显，直接合成到屏幕。
+

libraryname

+

string

+

否

+

''

+

应用Native层编译输出动态库名称。

+

controller

+

XComponentController

+

否

+

''

+

给组件绑定一个控制器，通过控制器调用组件方法。

+
+ +## XComponentController + +XComponent组件的控制器，可以将此对象绑定至XComponent组件，然后通过控制器调用组件方法。 + + + + + + + + + +

接口名称

+

功能描述

+

getXComponentSurfaceId

+

获取XComponent对应Surface的ID，供@ohos接口使用，比如camera相关接口。

+
+ +## 事件 + + + + + + + + + + + + + + +

名称

+

功能描述

+

onLoad() => void

+

插件加载完成时触发该回调。

+

onDestroy() => void

+

插件卸载完成时触发该回调。

+
+ +## 示例 + +1.提供surface类型XComponent，支持相机预览等能力。 +``` +XComponent({id: 'idx', type: 'surface', controller: this.myXComponentController}) + .onLoad({} => { + var id = this.myXComponentController.getXComponentSurfaceId(); + camera.setSurfaceId(id); + }) +``` \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components.md index e41757c9660744647ab17a30e88c399f32508b11..857a2bbfdb8462af538c8a0a8db4a25fd7e53265 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components.md @@ -34,4 +34,4 @@ - **[Toggle](ts-basic-components-toggle.md)** - +- **[XComponent](ts-basic-components-xcomponent.md)**