# UTS 组件开发 本文旨在帮助开发者,使用UTS开发Uni-App平台组件功能。 ## 前置条件 继续阅读文档前,开发者需要了解以下前置条件: + HBuilderX 3.6.15 及之后版本 + 了解Vue 组件基本概念 + 目前仅支持nvue ## UTS组件简介 #### 为什么使用组件 组件是一种独立,可复用的UI单元,用于单独封装和承担一定的代码逻辑,组件化可以降低项目的工程复杂度,提升可维护性 组件与插件的区别在于:前者倾向于以标签的形式 对外提供UI封装,后者倾向于以函数/类 的形式 对外提供功能封装。如果你的需求更倾向于封装能力,请移步 [UTS插件开发](https://uniapp.dcloud.net.cn/plugin/uts-plugin.html) 组件一般适用于封装非全屏的场景,如果需要你需要封装的UI始终是全屏,那么可以考虑通过UTS开发原生页面来实现。 [UTS开发原生页面示例](https://gitcode.net/dcloud/hello-uts/-/tree/master/uni_modules/uts-nativepage) #### 为什么使用UTS开发组件 UTS组件,即:使用UTS语言在uni平台进行组件开发的技术。 UTS组件的优势在于,它秉承了UTS的跨平台特性,统一的UTS语法,各终端不同的本地产出物。 在Android平台会被编译为会被渲染为Android原生View实例,IOS或其他终端平台也是如此。 | |uts组件 |uni原生组件 |Vue组件 | |:------ |:-------- |:-------- |:------- | |开发语言 |uts |java/object-c |js/ts | |组件载体 |系统原生View对象 |系统原生View对象 |WebView内部标签 | 为了降低前端开发者的开发门槛,UTS组件采用了类Vue组件的语法,[关于Vue组件](https://cn.vuejs.org/guide/essentials/component-basics.html),但是具体的函数上会有定制,我们会在下一个章节详细介绍 ## UTS组件结构解析 #### UTS组件目录结构
┌─common // 可跨端公用的uts代码。推荐,不强制
├─static // 静态资源
├─utssdk
│ ├─app-android //Android平台目录
│ │ ├─assets //Android原生assets资源目录,可选
│ │ ├─libs //Android原生库目录,可选
│ │ ├─res //Android原生res资源目录,可选
│ │ ├─AndroidManifest.xml //Android原生应用清单文件,可选
│ │ ├─config.json //Android原生配置文件
│ │ ├─index.uts //Android原生插件能力实现,可选
| | └─index.vue //Android原生组件能力实现,必选
│ ├─app-ios //iOS平台目录
│ │ ├─Frameworks //iOS原生依赖的第三方 framework 依赖库存放目录,可选
│ │ ├─Resources //iOS原生所依赖的资源文件存放目录,可选
│ │ ├─info.plist //iOS原生所需要添加到主 info.plist 文件中的配置文件,可选
│ │ ├─UTS.entitlements //iOS原生所需要添加到主工程 .entitlements 文件中的配置文件,可选
│ │ ├─config.json //iOS原生配置文件
│ │ ├─index.uts //iOS原生插件能力实现,可选
| | └─index.vue //iOS原生组件能力实现,必选
│ ├─web //web平台目录
│ │ └─index.uts
│ ├─mp-alipay // 支付宝小程序平台,可选
│ ├─mp-baidu // 百度小程序平台,可选
│ ├─mp-jd // 京东小程序平台(仅限vue2),可选
│ ├─mp-kuaishou // 快手小程序平台,可选
│ ├─mp-lark // 飞书小程序平台,可选
│ ├─mp-qq // QQ小程序平台,可选
│ ├─mp-toutiao // 字节跳动小程序平台,可选
│ ├─mp-weixin // 微信小程序平台,可选
│ ├─mp-xhs // 小红书小程序平台(仅限vue2),可选
│ ├─index.d.ts // 插件能力声明,可选
│ └─index.uts // 跨平台插件能力实现,可选
└─package.json // 插件清单文件
如上所示,UTS组件的目录结构与UTS插件基本相同
唯一的差别在于,UTS组件入口文件有两个,一个必选的index.vue 组件入口,和一个可选的index.uts 函数能力入口
用户如果在开发组件的同时,存在一些与组件无关的能力需要对外暴露,可以在index.uts中进行实现
大多数情况下,我们只需要开发一个index.vue 即可,如果存在多个组件,可以新建多个 *.vue文件
关于index.vue 的源码规范会在下一个章节介绍
#### UTS组件源码解析
下面是一个组件源码 index.vue 完整示例:
```ts