From cb4034bb7140c793b030290b3bfb9ff5eac2e735 Mon Sep 17 00:00:00 2001 From: zzzsilenc Date: Wed, 25 May 2022 10:55:07 +0800 Subject: [PATCH] js-components-basic-xcomponent.md Signed-off-by: zzzsilenc --- .../reference/arkui-js/Readme-CN.md | 1 + .../js-components-basic-xcomponent.md | 72 +++++++++++++++++++ .../reference/arkui-ts/Readme-CN.md | 2 +- 3 files changed, 74 insertions(+), 1 deletion(-) create mode 100644 zh-cn/application-dev/reference/arkui-js/js-components-basic-xcomponent.md diff --git a/zh-cn/application-dev/reference/arkui-js/Readme-CN.md b/zh-cn/application-dev/reference/arkui-js/Readme-CN.md index a9f0f78cdf..4ef8ba58b6 100644 --- a/zh-cn/application-dev/reference/arkui-js/Readme-CN.md +++ b/zh-cn/application-dev/reference/arkui-js/Readme-CN.md @@ -59,6 +59,7 @@ - [toolbar-item](js-components-basic-toolbar-item.md) - [toggle](js-components-basic-toggle.md) - [web](js-components-basic-web.md) + - [xcomponent](js-components-basic-xcomponent.md) - 媒体组件 - [video](js-components-media-video.md) - 画布组件 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 0000000000..8a5093a046 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-xcomponent.md @@ -0,0 +1,72 @@ +# xcomponent + + > **说明：** + > 该组件从API Version 9 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + + 用于显示写入了EGL/OpenGLES或媒体数据的组件。 + +## 权限列表 + + 无 + +## 子组件 + + 不支持。 + +## 属性 + +除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： + +| 名称 | 参数类型 | 必填 | 描述 | +| ----------- | -------- | ---- | ------------------------------------------------------------ | +| id | string | 是 | 组件的唯一标识，支持最大的字符串长度128。 | +| type | string | 是 | 用于指定xcomponent组件类型，可选值为：
-surface：组件内容单独送显，直接合成到屏幕。
-component：组件内容与其他组件合成后统一送显。
| +| libraryname | string | 否 | 应用Native层编译输出动态库名称。 | + +## 样式 + +支持[通用样式](js-components-common-styles.md)。 + +## 事件 + +除支持[通用事件](js-components-common-events.md)外，还支持如下事件： + +| 名称 | 功能描述 | +| ------------------------------- | ------------------------------- | +| onLoad(context?: object) => void | 插件加载完成时回调事件。
context：开发者扩展的xcomponent方法的实例对象，context对象的接口由开发者自定义。 | +| onDestroy() => void | 插件卸载完成时回调事件。 | + +## 方法 + +除支持[通用方法](js-components-common-methods.md)外，还支持如下方法： + +| 名称 | 参数 | 返回值类型 | 描述 | +| ------------------------ | ------------------------------------------------------------ | ---------- | ------------------------------------------------------------ | +| getXComponentSurfaceId | - | string | 获取xcomponent对应Surface的ID，供@ohos接口使用，比如camera相关接口。 | +| setXComponentSurfaceSize | {
surfaceWidth: number,
surfaceHeight: number
} | - | 设置xcomponent持有Surface的宽度和高度。 | +| getXComponentContext | - | object | 获取开发者扩展的xcomponent方法的实例对象。 | + +## 示例 + +提供surface类型xcomponent，支持相机预览等能力。 + + ``` + +
+ camera_display + +
+ ``` + + ``` +// xxx.js +import camera from '@ohos.multimedia.camera'; +export default { + onload() { + var surfaceId = this.$element('xcomponent').getXComponentSurfaceId(); + camera.createPreviewOutput(surfaceId).then((previewOutput) => { + console.log('Promise returned with the PreviewOutput instance'); + }) + } +} + ``` \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md index daa7a83d5a..931411f102 100644 --- a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md +++ b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md @@ -84,7 +84,7 @@ - [TimePicker](ts-basic-components-timepicker.md) - [Toggle](ts-basic-components-toggle.md) - [Web](ts-basic-components-web.md) - - [Xcomponent](ts-basic-components-xcomponent.md) + - [XComponent](ts-basic-components-xcomponent.md) - 容器组件 - [AlphabetIndexer](ts-container-alphabet-indexer.md) - [Badge](ts-container-badge.md) -- GitLab