鸿蒙5.0开发进阶：JS组件-基础组件（xcomponent）

往期鸿蒙5.0全套实战文章必看：（文中附带全栈鸿蒙5.0学习资料）

• 鸿蒙开发核心知识点，看这篇文章就够了

• 最新版！鸿蒙HarmonyOS Next应用开发实战学习路线

• 鸿蒙HarmonyOS NEXT开发技术最全学习路线指南

• 鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）

---

xcomponent

说明

该组件从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

用于显示写入了EGL/OpenGLES或媒体数据的组件。

权限列表

无

子组件

不支持。

属性

除支持通用属性外，还支持如下属性：

名称	参数类型	必填	描述
id	string	是	组件的唯一标识，支持最大的字符串长度128。
type	string	是	用于指定xcomponent组件类型，可选值为： - surface：组件内容单独送显，直接合成到屏幕。 - component：组件内容与其他组件合成后统一送显。
libraryname	string	否	应用Native层编译输出动态库名称。

样式

支持通用样式。

事件

除支持通用事件外，还支持如下事件：

名称	功能描述
onLoad(context?: object) => void	插件加载完成时回调事件。 context：开发者扩展的xcomponent方法的实例对象，context对象的接口由开发者自定义。
onDestroy() => void	插件卸载完成时回调事件。

方法

除支持通用方法外，还支持如下方法：

名称	参数	返回值类型	描述
getXComponentSurfaceId	-	string	获取xcomponent对应Surface的ID，供@ohos接口使用，比如camera相关接口。
setXComponentSurfaceSize	{ surfaceWidth: number, surfaceHeight: number }	-	设置xcomponent持有Surface的宽度和高度。
getXComponentContext	-	object	获取开发者扩展的xcomponent方法的实例对象。

示例

提供surface类型xcomponent，支持相机预览等能力。

<!-- xxx.hml -->
<div style="height: 500px; width: 500px; flex-direction: column; justify-content: center; align-items: center;">
 <text id = 'camera' class = 'title'>camera_display</text>
 <xcomponent id = 'xcomponent' type = 'surface' onload = 'onload' ondestroy = 'ondestroy'></xcomponent>
</div>

// 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');
     })
 }
}