1# xcomponent
2
3  > **说明：**
4  > 该组件从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
5
6  用于显示写入了EGL/OpenGLES或媒体数据的组件。
7
8## 权限列表
9
10  无
11
12## 子组件
13
14  不支持。
15
16## 属性
17
18除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性：
19
20| 名称          | 参数类型   | 必填   | 描述                                       |
21| ----------- | ------ | ---- | ---------------------------------------- |
22| id          | string | 是    | 组件的唯一标识，支持最大的字符串长度128。                   |
23| type        | string | 是    | 用于指定xcomponent组件类型，可选值为：<br/>- surface：组件内容单独送显，直接合成到屏幕。<br/>- component：组件内容与其他组件合成后统一送显。<br/> |
24| libraryname | string | 否    | 应用Native层编译输出动态库名称。                      |
25
26## 样式
27
28支持[通用样式](js-components-common-styles.md)。
29
30## 事件
31
32除支持[通用事件](js-components-common-events.md)外，还支持如下事件：
33
34| 名称                               | 功能描述                                     |
35| -------------------------------- | ---------------------------------------- |
36| onLoad(context?: object) => void | 插件加载完成时回调事件。<br/>context：开发者扩展的xcomponent方法的实例对象，context对象的接口由开发者自定义。 |
37| onDestroy() => void              | 插件卸载完成时回调事件。                             |
38
39## 方法
40
41除支持[通用方法](js-components-common-methods.md)外，还支持如下方法：
42
43| 名称                       | 参数                                       | 返回值类型  | 描述                                       |
44| ------------------------ | ---------------------------------------- | ------ | ---------------------------------------- |
45| getXComponentSurfaceId   | -                                        | string | 获取xcomponent对应Surface的ID，供@ohos接口使用，比如camera相关接口。 |
46| setXComponentSurfaceSize | {<br/>surfaceWidth: number,<br/>surfaceHeight: number  <br/>} | -      | 设置xcomponent持有Surface的宽度和高度。             |
47| getXComponentContext     | -                                        | object | 获取开发者扩展的xcomponent方法的实例对象。               |
48
49## 示例
50
51提供surface类型xcomponent，支持相机预览等能力。
52
53   ```html
54<!-- xxx.hml -->
55<div style="height: 500px; width: 500px; flex-direction: column; justify-content: center; align-items: center;">
56	<text id = 'camera' class = 'title'>camera_display</text>
57	<xcomponent id = 'xcomponent' type = 'surface' onload = 'onload' ondestroy = 'ondestroy'></xcomponent>
58</div>
59   ```
60
61   ```js
62// xxx.js
63import camera from '@ohos.multimedia.camera';
64export default {
65    onload() {
66        var surfaceId = this.$element('xcomponent').getXComponentSurfaceId();
67        camera.createPreviewOutput(surfaceId).then((previewOutput) => {
68            console.log('Promise returned with the PreviewOutput instance');
69        })
70    }
71}
72   ```