# uts插件 - 组件开发

uts插件的组件开发，简称uts组件，是uts插件的一个分支。uts插件提供了原生API的扩展，而uts组件提供了原生UI组件的开发模式。

组件是一种独立、可复用的UI单元，用于单独封装和承担一定的代码逻辑。

组件与插件的区别在于：前者以标签的形式，对外提供UI封装；后者则只提供API，虽然API可能涉及UI，但仍然是API，无法以标签方式在页面模板中引用。

比如<video>是组件；uni.showModal 或 uni.chooseVideo 虽然有UI，但属于API。

组件一般适用于封装非全屏的场景，即在页面中内嵌一个区域。如果需要你需要封装的UI是全屏界面，那没必要使用组件，通过uts开发原生页面更简单。 uts开发原生页面示例

当然uts组件是多端的，一个uts组件作为一个uni_modules，可同时支持app-Android、app-iOS、web、以及各家小程序组件。

# uts组件开发模式

app平台如何将原生UI扩展成一个组件，嵌入在页面中？有以下开发模式：

开发模式对比表

	uni-app兼容模式	标准模式
支持平台	uni-app的app-nvue和uni-app x的app-uvue	仅支持uni-app x，但uni-app x中app、web、小程序全平台支持
组件规范	参考vue的模仿，是子集、也有扩充定制，不支持组合式API	完全vue组件规范，标准easycom
使用native-view	否	是
学习成本	低	无

一般来讲，我们推荐开发者使用标准模式。这种模式就是写一个标准的vue组件，没有学习和认知门槛。

因为uni-app下只有nvue页面才能放置原生扩展的组件，而nvue已经不再维护，我们推荐开发者在uni-app上使用web组件。除非你的组件无法使用web实现，可以接受在uni-app的app-nvue中使用，才需要使用uni-app兼容模式。

从HBuilderX4.31起，uni-app x内置组件里新增了 native-view 组件，它就是为了扩展原生组件而提供的一个内置组件。

首先在页面或组件中，放置 native-view 组件，它作为内置组件，可以正常的参与排版布局。

在uts插件中，可以通过 uni.getElementById 方法获取到 native-view 的 UniElement 对象，再通过 UniElement 的 getAndroidView/getIOSView方法，可以获取到 uvue 界面上的一个 native-view 组件的原生view。

当插件开发者拿到一个原生的Android或iOS的view后，就可以使用UTS或原生混编代码随意操作这个原生view。比如绘制地图、绘制摄像头内容。

如果开发者想要对外封装为一个组件，暴露组件的属性、方法、事件，只需要按照标准vue组件的做法，使用easycom的方式，把 native-view 组件包在一个vue组件中。