uts-component.md 43.6 KB
Newer Older
杜庆泉's avatar
杜庆泉 已提交
1 2
# UTS 组件开发

DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
3
> 需HBuilderX 3.6.18 及之后版本
杜庆泉's avatar
杜庆泉 已提交
4

W
x  
wanganxp 已提交
5
> app平台目前支持nvue/uvue,暂不支持vue
杜庆泉's avatar
杜庆泉 已提交
6

DCloud_Heavensoft's avatar
DCloud_Heavensoft 已提交
7
UTS组件,是UTS插件的一个分支。UTS插件提供了原生API的扩展,而UTS组件提供了原生UI组件的开发模式。
杜庆泉's avatar
杜庆泉 已提交
8

DCloud_Heavensoft's avatar
DCloud_Heavensoft 已提交
9
组件是一种独立,可复用的UI单元,用于单独封装和承担一定的代码逻辑。
杜庆泉's avatar
杜庆泉 已提交
10

DCloud_Heavensoft's avatar
DCloud_Heavensoft 已提交
11
组件与插件的区别在于:前者以标签的形式,对外提供UI封装;后者则只提供API,虽然API可能涉及UI,但仍然是API,无法以标签方式在页面模板中引用。
杜庆泉's avatar
杜庆泉 已提交
12

DCloud_Heavensoft's avatar
DCloud_Heavensoft 已提交
13
比如`<video>`是组件;`uni.showModal``uni.chooseVideo` 虽然有UI,但属于API。
杜庆泉's avatar
杜庆泉 已提交
14

DCloud_Heavensoft's avatar
DCloud_Heavensoft 已提交
15
组件一般适用于封装非全屏的场景,即在页面中内嵌一个区域。如果需要你需要封装的UI是全屏界面,那没必要使用组件,通过UTS开发原生页面更简单。 [UTS开发原生页面示例](https://gitcode.net/dcloud/hello-uts/-/tree/master/uni_modules/uts-nativepage)
杜庆泉's avatar
杜庆泉 已提交
16

DCloud_Heavensoft's avatar
DCloud_Heavensoft 已提交
17
当然UTS组件是多端的,一个UTS组件作为一个`uni_modules`,可同时支持app-Android、app-iOS、web、以及各家小程序组件。
杜庆泉's avatar
杜庆泉 已提交
18

DCloud_Heavensoft's avatar
DCloud_Heavensoft 已提交
19
本文重点在于讲述如何在app-android和app-ios上,将一个原生UI封装为UTS组件,供使用者在页面template中以组件的方式调用。
杜庆泉's avatar
杜庆泉 已提交
20

DCloud_Heavensoft's avatar
DCloud_Heavensoft 已提交
21
## 前置条件
杜庆泉's avatar
杜庆泉 已提交
22

DCloud_Heavensoft's avatar
DCloud_Heavensoft 已提交
23
继续阅读文档前,开发者需要了解以下前置条件:
杜庆泉's avatar
杜庆泉 已提交
24

D
DCloud_LXH 已提交
25
- 了解 [uts语法](/uts/)[uts原生插件](uts-plugin.md)
DCloud_Heavensoft's avatar
DCloud_Heavensoft 已提交
26
- 了解 [Vue组件](../tutorial/vue3-components.md)
杜庆泉's avatar
杜庆泉 已提交
27

杜庆泉's avatar
杜庆泉 已提交
28

DCloud_Heavensoft's avatar
DCloud_Heavensoft 已提交
29 30
## UTS组件简介

杜庆泉's avatar
杜庆泉 已提交
31
#### 为什么使用UTS开发组件
杜庆泉's avatar
杜庆泉 已提交
32

杜庆泉's avatar
杜庆泉 已提交
33
UTS组件,即:使用UTS语言在uni平台进行组件开发的技术。
杜庆泉's avatar
杜庆泉 已提交
34

DCloud_Heavensoft's avatar
DCloud_Heavensoft 已提交
35
UTS组件的优势在于,它秉承了UTS的跨平台特性,统一的UTS语法,各终端不同的原生产出物。
杜庆泉's avatar
杜庆泉 已提交
36

DCloud_Heavensoft's avatar
DCloud_Heavensoft 已提交
37
在Android平台会被编译渲染为Android原生View实例,IOS或其他终端平台也是如此。
杜庆泉's avatar
杜庆泉 已提交
38

杜庆泉's avatar
杜庆泉 已提交
39

杜庆泉's avatar
杜庆泉 已提交
40 41 42
|				|uts组件					|uni原生组件				|Vue组件				|
|:------		|:--------				|:-------- 				|:-------			|
|开发语言		|uts					|java/object-c			|js/ts				|
DCloud_Heavensoft's avatar
DCloud_Heavensoft 已提交
43
|组件载体		|App平台为系统原生View对象		|系统原生View对象		|WebView内部标签		|
杜庆泉's avatar
杜庆泉 已提交
44 45


DCloud_Heavensoft's avatar
DCloud_Heavensoft 已提交
46
为了统一开发规范、降低使用门槛,UTS原生组件采用了Vue组件的语法,但会根据实际情况略有定制。
杜庆泉's avatar
杜庆泉 已提交
47

DCloud_Heavensoft's avatar
DCloud_Heavensoft 已提交
48
即,您可以像写vue组件一样,使用uts语言来写一个UTS组件。
杜庆泉's avatar
杜庆泉 已提交
49

杜庆泉's avatar
杜庆泉 已提交
50
## UTS组件结构解析
杜庆泉's avatar
杜庆泉 已提交
51 52


杜庆泉's avatar
杜庆泉 已提交
53
#### UTS组件目录结构
杜庆泉's avatar
杜庆泉 已提交
54 55


杜庆泉's avatar
杜庆泉 已提交
56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84
<pre v-pre="" data-lang="">
	<code class="lang-" style="padding:0">
┌─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小程序平台,可选
85
│	├─mp-toutiao                  // 抖音小程序平台,可选
杜庆泉's avatar
杜庆泉 已提交
86 87 88 89 90 91 92 93
│	├─mp-weixin                   // 微信小程序平台,可选
│	├─mp-xhs                      // 小红书小程序平台(仅限vue2),可选
│	└─index.uts                   // 跨平台插件能力实现,可选
└─package.json                    // 插件清单文件
</code>
</pre>


杜庆泉's avatar
杜庆泉 已提交
94
如上所示,UTS组件的目录结构与UTS插件基本相同
杜庆泉's avatar
杜庆泉 已提交
95

杜庆泉's avatar
杜庆泉 已提交
96 97 98 99 100 101
唯一的差别在于,UTS组件入口文件有两个:

+ 必选的index.vue 组件入口

+ 可选的index.uts 函数能力入口

杜庆泉's avatar
杜庆泉 已提交
102

杜庆泉's avatar
杜庆泉 已提交
103
用户如果在开发组件的同时,存在一些与组件无关的能力需要对外暴露,可以在index.uts中进行实现
杜庆泉's avatar
杜庆泉 已提交
104

杜庆泉's avatar
杜庆泉 已提交
105
大多数情况下,我们只需要开发一个index.vue 即可,如果存在多个组件,可以新建多个 xxx.vue文件
杜庆泉's avatar
杜庆泉 已提交
106

杜庆泉's avatar
杜庆泉 已提交
107
关于 index.vue 源码如何编写,我们会在下一个章节介绍
杜庆泉's avatar
杜庆泉 已提交
108 109 110



杜庆泉's avatar
杜庆泉 已提交
111
#### index.vue源码结构
杜庆泉's avatar
杜庆泉 已提交
112

杜庆泉's avatar
杜庆泉 已提交
113 114 115

下面是一个组件源码 index.vue 完整示例:

fxy060608's avatar
fxy060608 已提交
116 117 118 119
**注意**

- 目前UTS组件仅支持`export default {}`的选项式API,vue3的组合式API暂未支持。

DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
120 121 122 123
::: preview

> Android

D
DCloud_LXH 已提交
124
```ts
杜庆泉's avatar
杜庆泉 已提交
125

杜庆泉's avatar
杜庆泉 已提交
126
<template>
杜庆泉's avatar
杜庆泉 已提交
127
	<view >
杜庆泉's avatar
杜庆泉 已提交
128 129 130 131 132 133 134 135 136 137

	</view>
</template>
<script lang="uts">
	import TextUtils from 'android.text.TextUtils'
	import Button from 'android.widget.Button'
	import LinearLayout from 'android.widget.LinearLayout'
	import View from 'android.view.View'

	class ButtonClickListsner extends View.OnClickListener {
杜庆泉's avatar
杜庆泉 已提交
138 139 140
		constructor() {
			super()
		}
杜庆泉's avatar
杜庆泉 已提交
141 142 143 144 145
		override onClick(v ? : View) {
			console.log(v)
		}
	}

D
DCloud_LXH 已提交
146
	//原生提供以下属性或方法的实现
杜庆泉's avatar
杜庆泉 已提交
147
	export default {
杜庆泉's avatar
杜庆泉 已提交
148 149 150
		/**
		 * 组件名称,也就是开发者使用的标签
		 */
杜庆泉's avatar
杜庆泉 已提交
151 152 153 154 155
		name: "uts-hello-view",
		/**
		 * 组件涉及的事件声明,只有声明过的事件,才能被正常发送
		 */
		emits: ['buttonClick'],
杜庆泉's avatar
杜庆泉 已提交
156 157 158
		/**
		 * 属性声明,组件的使用者会传递这些属性值到组件
		 */
杜庆泉's avatar
杜庆泉 已提交
159 160 161 162 163 164 165 166 167
		props: {
			/**
			 * 字符串类型 属性:buttonText  需要设置默认值
			 */
			"buttonText": {
				type: String,
				default: "点击触发"
			}
		},
杜庆泉's avatar
杜庆泉 已提交
168 169 170
		/**
		 * 组件内部变量声明
		 */
杜庆泉's avatar
杜庆泉 已提交
171 172 173
		data() {
			return {}
		},
杜庆泉's avatar
杜庆泉 已提交
174 175 176
		/**
		 * 属性变化监听器实现
		 */
杜庆泉's avatar
杜庆泉 已提交
177 178 179 180 181 182 183 184 185 186 187 188 189
		watch: {
			"buttonText": {
				/**
				 * 这里监听属性变化,并进行组件内部更新
				 */
				handler(newButtonText: string) {
					if (this.$el != null) {
						let button = this.$el!.findViewWithTag("centerButton") as Button
						if (!TextUtils.isEmpty(newButtonText)) {
							button.setText(newButtonText)
						}
					}
				},
D
DCloud_LXH 已提交
190
				immediate: false //创建时是否通过此方法更新属性,默认值为false
杜庆泉's avatar
杜庆泉 已提交
191 192
			},
		},
杜庆泉's avatar
杜庆泉 已提交
193 194 195 196
		/**
		 * 规则:如果没有配置expose,则methods中的方法均对外暴露,如果配置了expose,则以expose的配置为准向外暴露
		 * ['publicMethod'] 含义为:只有 `publicMethod` 在实例上可用
		 */
杜庆泉's avatar
杜庆泉 已提交
197 198
		expose: ['doSth'],
		methods: {
杜庆泉's avatar
杜庆泉 已提交
199 200 201
			/**
			 * 对外公开的组件方法
			 */
杜庆泉's avatar
杜庆泉 已提交
202 203
			doSth(paramA: string) {
				// 这是组件的自定义方法
杜庆泉's avatar
杜庆泉 已提交
204
				console.log("paramA",paramA)
杜庆泉's avatar
杜庆泉 已提交
205
			},
杜庆泉's avatar
杜庆泉 已提交
206 207 208
			/**
			 * 内部使用的组件方法
			 */
杜庆泉's avatar
杜庆泉 已提交
209
			privateMethod() {
杜庆泉's avatar
杜庆泉 已提交
210

杜庆泉's avatar
杜庆泉 已提交
211
			}
杜庆泉's avatar
杜庆泉 已提交
212 213
		},

杜庆泉's avatar
杜庆泉 已提交
214 215 216 217 218
		/**
		 * 组件被创建,组件第一个生命周期,
		 * 在内存中被占用的时候被调用,开发者可以在这里执行一些需要提前执行的初始化逻辑
		 * [可选实现]
		 */
杜庆泉's avatar
杜庆泉 已提交
219
		created() {
杜庆泉's avatar
杜庆泉 已提交
220

杜庆泉's avatar
杜庆泉 已提交
221
		},
杜庆泉's avatar
杜庆泉 已提交
222
		/**
D
DCloud_LXH 已提交
223
		 * 对应平台的view载体即将被创建,对应前端beforeMount
杜庆泉's avatar
杜庆泉 已提交
224 225
		 * [可选实现]
		 */
杜庆泉's avatar
杜庆泉 已提交
226 227 228
		NVBeforeLoad() {

		},
杜庆泉's avatar
杜庆泉 已提交
229 230 231
		/**
		 * 创建原生View,必须定义返回值类型
		 * 开发者需要重点实现这个函数,声明原生组件被创建出来的过程,以及最终生成的原生组件类型
D
DCloud_LXH 已提交
232
		 * (Android需要明确知道View类型,需特殊校验)
杜庆泉's avatar
杜庆泉 已提交
233
		 * todo 补充IOS平台限制
杜庆泉's avatar
杜庆泉 已提交
234
	  * [必须实现]
杜庆泉's avatar
杜庆泉 已提交
235
		 */
杜庆泉's avatar
杜庆泉 已提交
236
		NVLoad(): LinearLayout {
D
DCloud_LXH 已提交
237
			//必须实现
杜庆泉's avatar
杜庆泉 已提交
238 239
			let contentLayout = new LinearLayout(this.$androidContext!)
			let button = new Button(this.$androidContext!)
杜庆泉's avatar
杜庆泉 已提交
240 241
			button.setText("点击触发");
			button.setTag("centerButton");
杜庆泉's avatar
杜庆泉 已提交
242
			contentLayout.addView(button, new LinearLayout.LayoutParams(500, 500));
杜庆泉's avatar
杜庆泉 已提交
243 244 245 246
			button.setOnClickListener(new ButtonClickListsner())
			return contentLayout
		},

杜庆泉's avatar
杜庆泉 已提交
247
		/**
D
DCloud_LXH 已提交
248
		 * 原生View已创建
杜庆泉's avatar
杜庆泉 已提交
249 250
		 * [可选实现]
		 */
杜庆泉's avatar
杜庆泉 已提交
251 252 253
		NVLoaded() {

		},
杜庆泉's avatar
杜庆泉 已提交
254
		/**
D
DCloud_LXH 已提交
255
		 * 原生View布局完成
杜庆泉's avatar
杜庆泉 已提交
256 257
		 * [可选实现]
		 */
杜庆泉's avatar
杜庆泉 已提交
258 259 260
		NVLayouted() {

		},
杜庆泉's avatar
杜庆泉 已提交
261
		/**
D
DCloud_LXH 已提交
262
		 * 原生View将释放
杜庆泉's avatar
杜庆泉 已提交
263 264
		 * [可选实现]
		 */
杜庆泉's avatar
杜庆泉 已提交
265
		NVBeforeUnload() {},
杜庆泉's avatar
杜庆泉 已提交
266
		/**
D
DCloud_LXH 已提交
267
		 * 原生View已释放,这里可以做释放View之后的操作
杜庆泉's avatar
杜庆泉 已提交
268 269
		 * [可选实现]
		 */
杜庆泉's avatar
杜庆泉 已提交
270 271 272
		NVUnloaded() {

		},
杜庆泉's avatar
杜庆泉 已提交
273
		/**
D
DCloud_LXH 已提交
274
		 * 组件销毁
杜庆泉's avatar
杜庆泉 已提交
275 276
		 * [可选实现]
		 */
杜庆泉's avatar
杜庆泉 已提交
277
		unmounted() {},
杜庆泉's avatar
杜庆泉 已提交
278
		/**
D
DCloud_LXH 已提交
279
		 * 自定组件布局尺寸
杜庆泉's avatar
杜庆泉 已提交
280 281
		 * [可选实现]
		 */
杜庆泉's avatar
杜庆泉 已提交
282
		NVMeasure(size: UTSSize): UTSSize {
杜庆泉's avatar
杜庆泉 已提交
283 284 285 286
			size.width = 120.0.toFloat()
			size.height = 800.0.toFloat()
			return size
		}
杜庆泉's avatar
杜庆泉 已提交
287 288 289
	}
</script>
<style>
D
DCloud_LXH 已提交
290

杜庆泉's avatar
杜庆泉 已提交
291
</style>
杜庆泉's avatar
杜庆泉 已提交
292

杜庆泉's avatar
杜庆泉 已提交
293

DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
294
```
杜庆泉's avatar
杜庆泉 已提交
295

DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
296 297 298
> iOS

```ts
D
DCloud_LXH 已提交
299 300 301 302 303 304 305 306 307 308
<template>
	<view class="defaultStyles">
	</view>
</template>
<script lang="uts">
	import {
		UIButton
	} from "UIKit"

	// 定义按钮点击后触发回调的类
DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
309
	class ButtonClickListsner {
D
DCloud_LXH 已提交
310 311 312 313 314 315
		// 按钮点击回调方法
		@objc buttonClick() {
			console.log("按钮被点击")
		}
	}

D
DCloud_LXH 已提交
316
	//原生提供以下属性或方法的实现
D
DCloud_LXH 已提交
317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354
	export default {
		/**
		 * 组件名称,也就是开发者使用的标签
		 */
		name: "uts-hello-view",
		/**
		 * 组件涉及的事件声明,只有声明过的事件,才能被正常发送
		 */
		emits: ['buttonClick'],
		/**
		 * 属性声明,组件的使用者会传递这些属性值到组件
		 */
		props: {
			/**
			 * 字符串类型 属性:buttonText  需要设置默认值
			 */
			"buttonText": {
				type: String,
				default: "点击触发"
			}
		},
		/**
		 * 组件内部变量声明
		 */
		data() {
			return {}
		},
		/**
		 * 属性变化监听器实现
		 */
		watch: {
			"buttonText": {
				/**
				 * 这里监听属性变化,并进行组件内部更新
				 */
				handler(newButtonText: string, oldButtonText) {
					this.$el.setTitle(newButtonText, for = UIControl.State.normal)
				},
D
DCloud_LXH 已提交
355
				immediate: false //创建时是否通过此方法更新属性,默认值为false
D
DCloud_LXH 已提交
356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385
			},
		},
		/**
		 * 规则:如果没有配置expose,则methods中的方法均对外暴露,如果配置了expose,则以expose的配置为准向外暴露
		 * ['publicMethod'] 含义为:只有 `publicMethod` 在实例上可用
		 */
		expose: ['doSth'],
		methods: {
			/**
			 * 对外公开的组件方法
			 */
			doSth(paramA: string) {
				// 这是组件的自定义方法
				console.log("paramA")
			},
			/**
			 * 内部使用的组件方法
			 */
		},


		/**
		 * 组件被创建,组件第一个生命周期,
		 * 在内存中被占用的时候被调用,开发者可以在这里执行一些需要提前执行的初始化逻辑
		 * [可选实现]
		 */
		created() {

		},
		/**
D
DCloud_LXH 已提交
386
		 * 对应平台的view载体即将被创建,对应前端beforeMount
D
DCloud_LXH 已提交
387 388 389 390 391 392 393 394 395 396 397
		 * [可选实现]
		 */
		NVBeforeLoad() {

		},
		/**
		 * 创建原生View,必须定义返回值类型
		 * 开发者需要重点实现这个函数,声明原生组件被创建出来的过程,以及最终生成的原生组件类型
		 * [必须实现]
		 */
		NVLoad(): UIButton {
D
DCloud_LXH 已提交
398
			//必须实现
D
DCloud_LXH 已提交
399 400 401 402 403 404 405 406 407
			let button = new UIButton()
			button.setTitle(this.buttonText, for = UIControl.State.normal)
			const target = new ButtonClickListsner()
			const method = Selector("buttonClick")
			button.addTarget(target, action = method, for = UIControl.Event.touchUpInside)
			return button
		},

		/**
D
DCloud_LXH 已提交
408
		 * 原生View已创建
D
DCloud_LXH 已提交
409 410 411 412 413 414
		 * [可选实现]
		 */
		NVLoaded() {

		},
		/**
D
DCloud_LXH 已提交
415
		 * 原生View布局完成
D
DCloud_LXH 已提交
416 417 418 419 420 421
		 * [可选实现]
		 */
		NVLayouted() {

		},
		/**
D
DCloud_LXH 已提交
422
		 * 原生View将释放
D
DCloud_LXH 已提交
423 424 425 426
		 * [可选实现]
		 */
		NVBeforeUnload() {},
		/**
D
DCloud_LXH 已提交
427
		 * 原生View已释放,这里可以做释放View之后的操作
D
DCloud_LXH 已提交
428 429 430 431 432 433
		 * [可选实现]
		 */
		NVUnloaded() {

		},
		/**
D
DCloud_LXH 已提交
434
		 * 组件销毁
D
DCloud_LXH 已提交
435 436 437 438
		 * [可选实现]
		 */
		unmounted() {}
		/**
D
DCloud_LXH 已提交
439
		 * 自定组件布局尺寸
D
DCloud_LXH 已提交
440 441 442 443 444 445
		 * [可选实现]
		 */
		NVMeasure(size: UTSSize): UTSSize {
			return new UTSSize(120, 45);
		}
	}
DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
446
</script>
杜庆泉's avatar
杜庆泉 已提交
447 448
```

DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
449
:::
杜庆泉's avatar
杜庆泉 已提交
450

杜庆泉's avatar
杜庆泉 已提交
451
index.vue 要素可以分为以下几类:
杜庆泉's avatar
杜庆泉 已提交
452

杜庆泉's avatar
杜庆泉 已提交
453
+ 配置:
杜庆泉's avatar
杜庆泉 已提交
454

杜庆泉's avatar
杜庆泉 已提交
455
	name:组件的使用标签,可以省略,若省略则默认为组件名称
D
DCloud_LXH 已提交
456

杜庆泉's avatar
杜庆泉 已提交
457
	emits:组件允许的消息事件名称,如果没有组件消息,不需要配置
杜庆泉's avatar
杜庆泉 已提交
458

杜庆泉's avatar
杜庆泉 已提交
459
+ 属性:
D
DCloud_LXH 已提交
460

杜庆泉's avatar
杜庆泉 已提交
461
	props:需要由组件的使用者提供,比如一个Image组件,会需要一个path属性作为图像路径来源
D
DCloud_LXH 已提交
462

杜庆泉's avatar
杜庆泉 已提交
463
	watch:属性的监听实现,用来监听属性数据更新。
D
DCloud_LXH 已提交
464 465

+ 数据:
杜庆泉's avatar
杜庆泉 已提交
466 467 468 469 470 471

	data:组件内部数据定义,用于组件内部逻辑处理,不对外暴露

+ 方法:

	methods:组件方法定义,可以通过与expose组合使用,区分对内方法和对外方法
D
DCloud_LXH 已提交
472

杜庆泉's avatar
杜庆泉 已提交
473 474 475 476 477
	expose:与methods 字段配合使用,用以区分组件对内方法和对外方法


+ 生命周期:

杜庆泉's avatar
杜庆泉 已提交
478
	组件需要重点处理 内存创建/销毁,View载体创建/销毁 过程中的资源管理,具体参考生命周期章节
D
DCloud_LXH 已提交
479

杜庆泉's avatar
杜庆泉 已提交
480
+ 内置对象:
D
DCloud_LXH 已提交
481

杜庆泉's avatar
杜庆泉 已提交
482
	为了方便组件开发者,UTS组件内置了部分变量与函数,具体参考内置对象与函数章节
杜庆泉's avatar
杜庆泉 已提交
483 484


D
DCloud_LXH 已提交
485
#### 生命周期
杜庆泉's avatar
杜庆泉 已提交
486

杜庆泉's avatar
杜庆泉 已提交
487
组件开发者需要重点关注组件的生命周期,以便进行资源的初始化和回收
杜庆泉's avatar
杜庆泉 已提交
488

D
DCloud_LXH 已提交
489
```mermaid
杜庆泉's avatar
杜庆泉 已提交
490 491 492 493 494 495 496 497 498
graph TD;
		Create-->NVBeforeLoad;
	subgraph View生命周期
		NVBeforeLoad-->NVLoad;
		NVLoad-->NVLoaded;
		NVLoaded-->NVLayouted;
		NVLayouted-->NVBeforeUnload;
	end
		NVBeforeUnload-->unmounted;
D
DCloud_LXH 已提交
499

杜庆泉's avatar
杜庆泉 已提交
500
```
杜庆泉's avatar
杜庆泉 已提交
501

杜庆泉's avatar
杜庆泉 已提交
502 503 504 505 506 507 508 509 510
|函数名			|描述				|建议行为		|是否可选	|
|:----			|:---				|:---			|:---		|
|created		|组件在内存中被创建	|开发者可以在这里执行一些需要最早执行的初始化逻辑|可选|
|NVBeforeLoad	|组件对应平台的view载体,即将被创建|开发者可以在这里执行一些需要在View创建前初始化的逻辑|可选|
|NVLoad			|组件view载体正在被创建实现|开发者需要重点实现这个函数,声明原生组件被创建出来的过程,以及最终生成的原生组件类型|必须实现|
|NVLayouted		|组件对应平台的view载体已布局结束	|需要在view布局结束后执行的逻辑	|可选|
|NVBeforeUnload	|view载体即将被卸载				|View卸载前,需要回收资源的逻辑	|可选|
|NVUnloaded		|view载体已经被卸载				|View卸载后,需要回收资源的逻辑	|可选|
|unmounted		|组件在内存被销毁				|资源回收逻辑					|可选|
杜庆泉's avatar
杜庆泉 已提交
511 512


杜庆泉's avatar
杜庆泉 已提交
513
除上述生命周期外,还存在下列可选周期函数:
杜庆泉's avatar
杜庆泉 已提交
514

杜庆泉's avatar
杜庆泉 已提交
515
+ NVMeasure
杜庆泉's avatar
杜庆泉 已提交
516

杜庆泉's avatar
杜庆泉 已提交
517
NVMeasure 用于告诉排版系统,组件自身需要的宽高,具体的调用时机由排版系统决定。
杜庆泉's avatar
杜庆泉 已提交
518

杜庆泉's avatar
杜庆泉 已提交
519
一般情况下,组件的宽高应该是由终端系统的排版引擎决定,组件开发者不需要实现此函数。
杜庆泉's avatar
杜庆泉 已提交
520

DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
521
但是部分场景下,组件开发者需要自己维护宽高,则需要开发者重写此函数
杜庆泉's avatar
杜庆泉 已提交
522

杜庆泉's avatar
杜庆泉 已提交
523

杜庆泉's avatar
杜庆泉 已提交
524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540
+ NVUpdateStyles

需要HBuilder X 3.96版本

NVUpdateStyles 用来监听组件的外部style 变化,通常用来写响应外部的css样式变化从而动态更新组件内部状态场景

我们可以在组件内部这样实现:

```uts
NVUpdateStyles(styles: Map<String, any>){
	console.log("NVUpdateStyles",styles)
}
```




杜庆泉's avatar
杜庆泉 已提交
541 542
**注意:只有非容器组件生效,容器组件不应该重写此函数**

杜庆泉's avatar
杜庆泉 已提交
543
[vue3 生命周期暂不支持](https://uniapp.dcloud.net.cn/tutorial/vue3-api.html#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90)
杜庆泉's avatar
杜庆泉 已提交
544 545


杜庆泉's avatar
杜庆泉 已提交
546
#### 内置对象和函数
杜庆泉's avatar
杜庆泉 已提交
547

杜庆泉's avatar
杜庆泉 已提交
548
为了方便组件开发者使用,UTS 组件内部内置了下列对象:
杜庆泉's avatar
杜庆泉 已提交
549

杜庆泉's avatar
杜庆泉 已提交
550 551 552
|变量名			|类型		|简介				|平台限制	|方法&属性	|
|:-------		|:--------	|:--------			|:---		|:---			|
|$el			|对象		|当前View实例对象	|全部平台	|开发者在NVLoad返回的对象类型|
杜庆泉's avatar
杜庆泉 已提交
553
|$androidContext|对象		|当前组件上下文(可为空)		|仅android	|android平台对应Context对象|
杜庆泉's avatar
杜庆泉 已提交
554
|$emit("event",Any)|函数		|发送已注册的事件	|全部平台	|$emit(事件名称-必选,事件参数可选)|
杜庆泉's avatar
杜庆泉 已提交
555 556


杜庆泉's avatar
杜庆泉 已提交
557
#### 通用事件
杜庆泉's avatar
杜庆泉 已提交
558

杜庆泉's avatar
杜庆泉 已提交
559
对于UTS组件来说,除了通过 $emit/emits 函数来自定义组件事件外,UTS组件还内置了下列通用事件:
杜庆泉's avatar
杜庆泉 已提交
560 561


D
DCloud_LXH 已提交
562 563
|事件名称			|简介
|:-------			|:--------
杜庆泉's avatar
杜庆泉 已提交
564 565 566
|click				|组件点击事件响应
|longpress			|组件长按事件响应

杜庆泉's avatar
杜庆泉 已提交
567

杜庆泉's avatar
杜庆泉 已提交
568 569
通用事件,组件的使用者无需实现,直接使用

D
DCloud_LXH 已提交
570
```html
杜庆泉's avatar
杜庆泉 已提交
571 572 573
<uts-hello-view buttonClick="自定义事件处理函数" click="通用点击事件处理函数" longpress="通用长按事件处理函数"/>
```

杜庆泉's avatar
杜庆泉 已提交
574

杜庆泉's avatar
杜庆泉 已提交
575
## 简单View的示例
杜庆泉's avatar
杜庆泉 已提交
576

杜庆泉's avatar
杜庆泉 已提交
577 578 579 580

本章节以 一个极简的组件开发为例,介绍说明UTS组件开发流程


杜庆泉's avatar
杜庆泉 已提交
581
#### 创建插件
杜庆泉's avatar
杜庆泉 已提交
582

杜庆泉's avatar
杜庆泉 已提交
583
在HBuilder X 中选中Uni-App项目下 uni_modules目录,右键选择新建`uni_modules插件`
杜庆泉's avatar
杜庆泉 已提交
584

杜庆泉's avatar
杜庆泉 已提交
585
![创建界面](https://native-res.dcloud.net.cn/images/uts/component/image0.png)
杜庆泉's avatar
杜庆泉 已提交
586 587


杜庆泉's avatar
杜庆泉 已提交
588
这是创建后的目录结构
杜庆泉's avatar
杜庆泉 已提交
589

DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
590
![目录结构](https://native-res.dcloud.net.cn/images/uts/component/image1.jpg)
杜庆泉's avatar
杜庆泉 已提交
591 592


杜庆泉's avatar
杜庆泉 已提交
593
#### 编写逻辑
杜庆泉's avatar
杜庆泉 已提交
594

杜庆泉's avatar
杜庆泉 已提交
595
打开index.vue,键入下面的组件源码:
杜庆泉's avatar
杜庆泉 已提交
596

DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
597 598 599 600
::: preview

> Android

D
DCloud_LXH 已提交
601
```html
杜庆泉's avatar
杜庆泉 已提交
602

杜庆泉's avatar
杜庆泉 已提交
603
<template>
杜庆泉's avatar
杜庆泉 已提交
604
	<view >
杜庆泉's avatar
杜庆泉 已提交
605 606 607 608 609 610 611 612 613 614

	</view>
</template>
<script lang="uts">
	import TextUtils from 'android.text.TextUtils'
	import Button from 'android.widget.Button'
	import LinearLayout from 'android.widget.LinearLayout'
	import View from 'android.view.View'

	class ButtonClickListsner extends View.OnClickListener {
杜庆泉's avatar
杜庆泉 已提交
615
		constructor() {
杜庆泉's avatar
杜庆泉 已提交
616
			super()
杜庆泉's avatar
杜庆泉 已提交
617
		}
杜庆泉's avatar
杜庆泉 已提交
618 619 620 621
		override onClick(v ? : View) {
			console.log(v)
		}
	}
杜庆泉's avatar
杜庆泉 已提交
622

杜庆泉's avatar
杜庆泉 已提交
623
	//原生提供以下属性或方法的实现  
杜庆泉's avatar
杜庆泉 已提交
624
	export default {
杜庆泉's avatar
杜庆泉 已提交
625 626 627
		/**
		 * 组件名称,也就是开发者使用的标签
		 */
杜庆泉's avatar
杜庆泉 已提交
628
		name: "uts-hello-view",
杜庆泉's avatar
杜庆泉 已提交
629 630 631 632 633 634 635
		/**
		 * 组件涉及的事件声明,只有声明过的事件,才能被正常发送
		 */
		emits: ['buttonClick'],
		/**
		 * 属性声明,组件的使用者会传递这些属性值到组件
		 */
杜庆泉's avatar
杜庆泉 已提交
636
		props: {
杜庆泉's avatar
杜庆泉 已提交
637 638 639
			/**
			 * 字符串类型 属性:buttonText  需要设置默认值
			 */
杜庆泉's avatar
杜庆泉 已提交
640 641 642 643 644
			"buttonText": {
				type: String,
				default: "点击触发"
			}
		},
杜庆泉's avatar
杜庆泉 已提交
645 646 647 648 649 650 651 652 653
		/**
		 * 组件内部变量声明
		 */
		data() {
			return {}
		},
		/**
		 * 属性变化监听器实现
		 */
杜庆泉's avatar
杜庆泉 已提交
654 655
		watch: {
			"buttonText": {
杜庆泉's avatar
杜庆泉 已提交
656 657 658
				/**
				 * 这里监听属性变化,并进行组件内部更新
				 */
杜庆泉's avatar
杜庆泉 已提交
659 660 661 662 663 664 665
				handler(newButtonText: string) {
					if (this.$el != null) {
						let button = this.$el!.findViewWithTag("centerButton") as Button
						if (!TextUtils.isEmpty(newButtonText)) {
							button.setText(newButtonText)
						}
					}
杜庆泉's avatar
杜庆泉 已提交
666 667
				},
				immediate: false //创建时是否通过此方法更新属性,默认值为false  
杜庆泉's avatar
杜庆泉 已提交
668 669
			},
		},
杜庆泉's avatar
杜庆泉 已提交
670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696
		/**
		 * 规则:如果没有配置expose,则methods中的方法均对外暴露,如果配置了expose,则以expose的配置为准向外暴露
		 * ['publicMethod'] 含义为:只有 `publicMethod` 在实例上可用
		 */
		expose: ['doSth'],
		methods: {
			/**
			 * 对外公开的组件方法
			 */
			doSth(paramA: string) {
				// 这是组件的自定义方法
				console.log("paramA",paramA)
			},
			/**
			 * 内部使用的组件方法
			 */
			privateMethod() {

			}
		},

		/**
		 * 组件被创建,组件第一个生命周期,
		 * 在内存中被占用的时候被调用,开发者可以在这里执行一些需要提前执行的初始化逻辑
		 * [可选实现]
		 */
		created() {
D
DCloud_LXH 已提交
697

杜庆泉's avatar
杜庆泉 已提交
698 699 700 701 702 703 704 705 706 707 708 709 710 711 712
		},
		/**
		 * 对应平台的view载体即将被创建,对应前端beforeMount  
		 * [可选实现]
		 */
		NVBeforeLoad() {

		},
		/**
		 * 创建原生View,必须定义返回值类型
		 * 开发者需要重点实现这个函数,声明原生组件被创建出来的过程,以及最终生成的原生组件类型
		 * (Android需要明确知道View类型,需特殊校验) 
		 * todo 补充IOS平台限制
	  * [必须实现]
		 */
杜庆泉's avatar
杜庆泉 已提交
713
		NVLoad(): LinearLayout {
杜庆泉's avatar
杜庆泉 已提交
714
			//必须实现  
杜庆泉's avatar
杜庆泉 已提交
715 716
			let contentLayout = new LinearLayout(this.$androidContext)
			let button = new Button(this.$androidContext)
杜庆泉's avatar
杜庆泉 已提交
717
			button.setText("点击触发");
杜庆泉's avatar
杜庆泉 已提交
718
			button.setTag("centerButton");
杜庆泉's avatar
杜庆泉 已提交
719
			contentLayout.addView(button, new LinearLayout.LayoutParams(500, 500));
杜庆泉's avatar
杜庆泉 已提交
720 721
			button.setOnClickListener(new ButtonClickListsner())
			return contentLayout
杜庆泉's avatar
杜庆泉 已提交
722
		}
D
DCloud_LXH 已提交
723

杜庆泉's avatar
杜庆泉 已提交
724
		
杜庆泉's avatar
杜庆泉 已提交
725 726 727
	}
</script>
<style>
杜庆泉's avatar
杜庆泉 已提交
728
	
杜庆泉's avatar
杜庆泉 已提交
729
</style>
杜庆泉's avatar
杜庆泉 已提交
730

杜庆泉's avatar
杜庆泉 已提交
731 732
```

DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
733 734
> iOS

D
DCloud_LXH 已提交
735
```html
杜庆泉's avatar
杜庆泉 已提交
736 737 738 739 740 741
<template>
	<view class="defaultStyles">
	</view>
</template>
<script lang="uts">
	import {
DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
742 743
		UIButton,
		UIControl
杜庆泉's avatar
杜庆泉 已提交
744 745 746
	} from "UIKit"

	// 定义按钮点击后触发回调的类
DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
747
	class ButtonClickListsner {
杜庆泉's avatar
杜庆泉 已提交
748 749 750 751 752 753
		// 按钮点击回调方法
		@objc buttonClick() {
			console.log("按钮被点击")
		}
	}

D
DCloud_LXH 已提交
754
	//原生提供以下属性或方法的实现
杜庆泉's avatar
杜庆泉 已提交
755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771
	export default {
		name: "uts-hello-view",
		emits: ['buttonClick'],
		props: {
			"buttonText": {
				type: String,
				default: "点击触发"
			}
		},
		watch: {
			"buttonText": {
				/**
				 * 这里监听属性变化,并进行组件内部更新
				 */
				handler(newButtonText: string, oldButtonText) {
					this.$el.setTitle(newButtonText, for = UIControl.State.normal)
				},
D
DCloud_LXH 已提交
772
				immediate: false //创建时是否通过此方法更新属性,默认值为false
杜庆泉's avatar
杜庆泉 已提交
773 774
			},
		},
DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
775 776 777 778 779
		data() {
			return {
				buttonClickListsner : new ButtonClickListsner()
			}
		},
杜庆泉's avatar
杜庆泉 已提交
780 781 782 783 784 785 786 787 788 789 790 791 792 793
		expose: ['doSth'],
		methods: {
			/**
			 * 对外公开的组件方法
			 */
			doSth(paramA: string) {
				// 这是组件的自定义方法
				console.log("paramA")
			}
		},
		/**
		 * 创建原生View,必须定义返回值类型
		 */
		NVLoad(): UIButton {
D
DCloud_LXH 已提交
794
			//必须实现
杜庆泉's avatar
杜庆泉 已提交
795 796 797
			let button = new UIButton()
			button.setTitle(this.buttonText, for = UIControl.State.normal)
			const method = Selector("buttonClick")
DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
798
			button.addTarget(this.buttonClickListsner, action = method, for = UIControl.Event.touchUpInside)
杜庆泉's avatar
杜庆泉 已提交
799 800 801
			return button
		}
	}
DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
802 803 804 805
</script>
```

:::
杜庆泉's avatar
杜庆泉 已提交
806

DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
807
上面的代码,我们自定义了一个  名为 "uts-hello-view" 的UTS 组件,该组件对外提供了一个包含按钮的简单UI实现,并且对外暴露了一个名为 `buttonText`字符串属性,用来构建按钮上的文案
D
DCloud_LXH 已提交
808

杜庆泉's avatar
杜庆泉 已提交
809
接下来,我们介绍在uni-app项目中如何使用它
杜庆泉's avatar
杜庆泉 已提交
810

杜庆泉's avatar
杜庆泉 已提交
811 812
#### 使用组件

杜庆泉's avatar
杜庆泉 已提交
813
> 注意:UTS组件默认全局注册,无需使用者手动配置
杜庆泉's avatar
杜庆泉 已提交
814

杜庆泉's avatar
杜庆泉 已提交
815 816 817
我们在uni-app项目中新建 helloView.nvue 页面,

![](https://native-res.dcloud.net.cn/images/uts/component/helloview_use_file.jpg)
杜庆泉's avatar
杜庆泉 已提交
818 819 820

直接使用`uts-hello-view`标签,并且定义`buttonText`文本内容即可看到效果。

杜庆泉's avatar
杜庆泉 已提交
821
点击组件内置按钮,可以在控制台看到组件内部实现的日志输出
杜庆泉's avatar
杜庆泉 已提交
822

杜庆泉's avatar
杜庆泉 已提交
823 824
点击`调用组件的方法`按钮,可以看到组件内置方法被调用

杜庆泉's avatar
杜庆泉 已提交
825

D
DCloud_LXH 已提交
826
```html
杜庆泉's avatar
杜庆泉 已提交
827 828
<template>
	<div>
杜庆泉's avatar
杜庆泉 已提交
829 830
		<uts-hello-view ref="helloView" buttonText="点击按钮内容" style="width:375px;height: 375px;background-color: aqua;"></uts-hello-view>
    	<button @tap="callComponentMethod">调用组件的方法</button>
杜庆泉's avatar
杜庆泉 已提交
831
	</div>
杜庆泉's avatar
杜庆泉 已提交
832
	
杜庆泉's avatar
杜庆泉 已提交
833 834 835
</template>

<script>
杜庆泉's avatar
杜庆泉 已提交
836 837 838 839 840 841 842 843 844 845 846 847 848 849
  export default {
      data() {
          return {
              
          }
      },
      methods: {
		  // 调用组件内的方法
          callComponentMethod: function() {
              this.$refs["helloView"].doSth("param doSth");
          },
      }
      
  }
杜庆泉's avatar
杜庆泉 已提交
850 851 852 853
</script>

<style>
</style>
杜庆泉's avatar
杜庆泉 已提交
854 855 856
```


杜庆泉's avatar
杜庆泉 已提交
857 858 859 860 861 862 863

#### 运行和测试

在当前示例中,不涉及第三方依赖,使用标准基座直接运行即可



杜庆泉's avatar
杜庆泉 已提交
864
## 包含第三方SDK的示例
杜庆泉's avatar
杜庆泉 已提交
865

杜庆泉's avatar
杜庆泉 已提交
866 867
本章节以lottie动画组件为例,介绍包含三方SDK的UTS组件开发过程

杜庆泉's avatar
杜庆泉 已提交
868
#### 创建插件
杜庆泉's avatar
杜庆泉 已提交
869

D
DCloud_LXH 已提交
870
在HBuilder X 中选中Uni-App项目下 uni_modules目录
杜庆泉's avatar
杜庆泉 已提交
871

DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
872
todo  目前还没有创建界面
杜庆泉's avatar
杜庆泉 已提交
873 874 875

这是创建后的目录结构

DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
876
![目录结构](https://native-res.dcloud.net.cn/images/uts/component/image3.jpg)
杜庆泉's avatar
杜庆泉 已提交
877 878


DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
879
#### Android 平台引入依赖
杜庆泉's avatar
杜庆泉 已提交
880 881 882 883 884 885 886 887 888 889

打开 ~/uni_modules/uts-animation-view/utssdk/app-android/config.json

键入如下代码:

```
"dependencies": [
	"com.airbnb.android:lottie:3.4.0"
]
```
杜庆泉's avatar
杜庆泉 已提交
890

杜庆泉's avatar
杜庆泉 已提交
891
UTS组件建议使用远程依赖的方式集成,如果需要以AAR的形式添加SDK,可以添加到
杜庆泉's avatar
杜庆泉 已提交
892

杜庆泉's avatar
杜庆泉 已提交
893
~/uni_modules/uts-animation-view/utssdk/app-android/libs目录
杜庆泉's avatar
杜庆泉 已提交
894

杜庆泉's avatar
杜庆泉 已提交
895 896
依赖的配置原则与UTS插件一致 [UTS插件依赖说明](https://uniapp.dcloud.net.cn/plugin/uts-for-android.html#_3-4-%E5%A2%9E%E5%8A%A0libs%E4%BE%9D%E8%B5%96%E8%B5%84%E6%BA%90)

DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
897 898 899 900
#### iOS 平台引入依赖库

iOS 平台需要将三方依赖库放到 组件目录下 app-ios/Frameworks 中

杜庆泉's avatar
杜庆泉 已提交
901
#### 编写逻辑
杜庆泉's avatar
杜庆泉 已提交
902 903


杜庆泉's avatar
杜庆泉 已提交
904
打开index.vue,键入下面的组件源码:
杜庆泉's avatar
杜庆泉 已提交
905

DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
906 907 908 909
::: preview

> Android

杜庆泉's avatar
杜庆泉 已提交
910 911
```ts
<template>
杜庆泉's avatar
杜庆泉 已提交
912
    <view>
杜庆泉's avatar
杜庆泉 已提交
913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935

    </view>
</template>
<script lang="uts">
    import Animator from 'android.animation.Animator'
    import TextUtils from 'android.text.TextUtils'
    import View from 'android.view.View'
    import LottieAnimationView from 'com.airbnb.lottie.LottieAnimationView'
    import LottieDrawable from 'com.airbnb.lottie.LottieDrawable'
	import FileInputStream from 'java.io.FileInputStream'
	import { UTSAndroid } from "io.dcloud.uts";

    class CustomAnimListener extends Animator.AnimatorListener {

        comp: UTSComponent < LottieAnimationView >
            constructor(com: UTSComponent < LottieAnimationView > ) {
                super();
                this.comp = com
            }

        override onAnimationStart(animation: Animator | null) {}

        override onAnimationEnd(animation: Animator | null, isReverse: Boolean) {
杜庆泉's avatar
杜庆泉 已提交
936
            this.comp.$emit("bindended")
杜庆泉's avatar
杜庆泉 已提交
937 938 939 940 941 942 943 944 945
        }

        override onAnimationEnd(animation: Animator | null) {}

        override onAnimationCancel(animation: Animator | null) {}

        override onAnimationRepeat(animation: Animator | null) {}
    }

D
DCloud_LXH 已提交
946
    //原生提供以下属性或方法的实现
杜庆泉's avatar
杜庆泉 已提交
947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 997 998 999
    export default {
        name: "uts-animation-view",
        /**
         * 当播放到末尾时触发 ended 事件(自然播放结束会触发回调,循环播放结束及手动停止动画不会触发)
         */
        emits: ['bindended'],
        props: {
            /**
             * 动画资源地址,目前只支持绝对路径
             */
            "path": {
                type: String,
                default: ""
            },
            /**
             * 动画是否循环播放
             */
            "autoplay": {
                type: Boolean,
                default: false
            },
            /**
             * 动画是否自动播放
             */
            "loop": {
                type: Boolean,
                default: false
            },
            /**
             * 是否隐藏动画
             */
            "hidden": {
                type: Boolean,
                default: false
            },
            /**
             * 动画操作,可取值 play、pause、stop
             */
            "action": {
                type: String,
                default: "stop"
            }

        },
        data() {
            return {

            }
        },
        watch: {
            "path": {
                handler(newPath: string) {

D
DCloud_LXH 已提交
1000

杜庆泉's avatar
杜庆泉 已提交
1001 1002 1003
					if(this.$el != null){
						let lottieAnimationView = this.$el!
						if (!TextUtils.isEmpty(newPath)) {
D
DCloud_LXH 已提交
1004 1005


杜庆泉's avatar
杜庆泉 已提交
1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018
						    if (newPath.startsWith("http://") || newPath.startsWith("https://")) {
						        lottieAnimationView.setAnimationFromUrl(newPath)
						    } else {
						        // 默认是static了
								var realJsonPath = UTSAndroid.getResourcePath(newPath)
						        lottieAnimationView.setAnimation(new FileInputStream(realJsonPath),newPath)
						    }
						}
						if (this.autoplay) {
						    lottieAnimationView.playAnimation()
						}
					}
                },
D
DCloud_LXH 已提交
1019
                immediate: false //创建时是否通过此方法更新属性,默认值为false
杜庆泉's avatar
杜庆泉 已提交
1020 1021 1022 1023 1024 1025 1026 1027 1028 1029
            },
            "loop": {
                handler(newLoop: Boolean) {
					if(this.$el != null){
						if (newLoop) {
						    this.$el!.repeatCount = Int.MAX_VALUE
						} else {
						    // 不循环则设置成1次
						    this.$el!.repeatCount = 0
						}
D
DCloud_LXH 已提交
1030

杜庆泉's avatar
杜庆泉 已提交
1031 1032 1033 1034
						if (this.autoplay) {
						    this.$el!.playAnimation()
						}
					}
D
DCloud_LXH 已提交
1035

杜庆泉's avatar
杜庆泉 已提交
1036
                },
D
DCloud_LXH 已提交
1037
                immediate: false //创建时是否通过此方法更新属性,默认值为false
杜庆泉's avatar
杜庆泉 已提交
1038 1039 1040 1041 1042 1043 1044 1045 1046
            },

            "autoplay": {
                handler(newValue: boolean) {
					if(this.$el != null){
						if (newValue) {
						    this.$el!.playAnimation()
						}
					}
D
DCloud_LXH 已提交
1047

杜庆泉's avatar
杜庆泉 已提交
1048
                },
D
DCloud_LXH 已提交
1049
                immediate: false //创建时是否通过此方法更新属性,默认值为false
杜庆泉's avatar
杜庆泉 已提交
1050 1051 1052 1053 1054 1055 1056 1057 1058 1059 1060 1061 1062 1063 1064 1065 1066
            },

            "action": {
                handler(newAction: string) {

                    if (newAction == "play" || newAction == "pause" || newAction == "stop") {

						if(this.$el != null){
							if (this.action == "play") {
							    this.$el!.playAnimation()
							} else if (this.action == "pause") {
							    this.$el!.pauseAnimation()
							} else if (this.action == "stop") {
							    this.$el!.cancelAnimation()
							    this.$el!.clearAnimation()
							}
						}
D
DCloud_LXH 已提交
1067

杜庆泉's avatar
杜庆泉 已提交
1068 1069 1070 1071 1072

                    } else {
                        // 非法入参,不管
                    }
                },
D
DCloud_LXH 已提交
1073
                immediate: false //创建时是否通过此方法更新属性,默认值为false
杜庆泉's avatar
杜庆泉 已提交
1074 1075 1076 1077 1078 1079 1080 1081 1082 1083 1084 1085
            },

            "hidden": {
                handler(newValue: boolean) {
					if(this.$el != null){
						if (newValue) {
						    this.$el!.visibility = View.GONE
						} else {
						    this.$el!.visibility = View.VISIBLE
						}
					}
                },
D
DCloud_LXH 已提交
1086
                immediate: false //创建时是否通过此方法更新属性,默认值为false
杜庆泉's avatar
杜庆泉 已提交
1087 1088 1089 1090 1091 1092 1093 1094 1095 1096 1097 1098 1099
            },

        },
        methods: {
            setRepeatMode(repeat: string) {
				if(this.$el != null){
					if ("RESTART" == repeat) {
					    this.$el!.repeatMode = LottieDrawable.RESTART
					} else if ("REVERSE" == repeat) {
					    this.$el!.repeatMode = LottieDrawable.RESTART
					}
				}
            },
D
DCloud_LXH 已提交
1100
            privateMethod() { //如何定义不对外暴露的API? 暂不支持,需在export外写
杜庆泉's avatar
杜庆泉 已提交
1101 1102
            }
        },
D
DCloud_LXH 已提交
1103
        created() { //创建组件,替换created
杜庆泉's avatar
杜庆泉 已提交
1104 1105

        },
D
DCloud_LXH 已提交
1106 1107
        NVBeforeLoad() { //组件将要创建,对应前端beforeMount
            //可选实现,这里可以提前做一些操作
杜庆泉's avatar
杜庆泉 已提交
1108
        },
D
DCloud_LXH 已提交
1109 1110
        NVLoad(): LottieAnimationView { //创建原生View,必须定义返回值类型(Android需要明确知道View类型,需特殊校验)
            //必须实现
杜庆泉's avatar
杜庆泉 已提交
1111 1112 1113
            let lottieAnimationView = new LottieAnimationView($androidContext)
            return lottieAnimationView
        },
D
DCloud_LXH 已提交
1114 1115

        NVLoaded() { //原生View已创建
杜庆泉's avatar
杜庆泉 已提交
1116 1117 1118 1119 1120 1121 1122
			//可选实现,这里可以做后续操作
			if(this.$el != null){
				this.$el!.repeatMode = LottieDrawable.RESTART;
				this.$el!.visibility = View.GONE
				this.$el!.repeatCount = 0
				this.$el!.addAnimatorListener(new CustomAnimListener(this))
			}
D
DCloud_LXH 已提交
1123

杜庆泉's avatar
杜庆泉 已提交
1124
        },
D
DCloud_LXH 已提交
1125 1126
        NVLayouted() { //原生View布局完成
            //可选实现,这里可以做布局后续操作
杜庆泉's avatar
杜庆泉 已提交
1127
        },
D
DCloud_LXH 已提交
1128 1129
        NVBeforeUnload() { //原生View将释放
            //可选实现,这里可以做释放View之前的操作
杜庆泉's avatar
杜庆泉 已提交
1130
        },
D
DCloud_LXH 已提交
1131 1132
        NVUnloaded() { //原生View已释放
            //可选实现,这里可以做释放View之后的操作
杜庆泉's avatar
杜庆泉 已提交
1133
        },
D
DCloud_LXH 已提交
1134 1135
        unmounted() { //组件销毁
            //可选实现
杜庆泉's avatar
杜庆泉 已提交
1136 1137 1138 1139
        }
    }
</script>
<style>
D
DCloud_LXH 已提交
1140

杜庆泉's avatar
杜庆泉 已提交
1141
</style>
杜庆泉's avatar
杜庆泉 已提交
1142

杜庆泉's avatar
杜庆泉 已提交
1143
```
杜庆泉's avatar
杜庆泉 已提交
1144

DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
1145 1146 1147
> iOS

```ts
D
DCloud_LXH 已提交
1148
<template>
杜庆泉's avatar
杜庆泉 已提交
1149
	<view>
D
DCloud_LXH 已提交
1150 1151 1152 1153 1154 1155 1156 1157 1158 1159 1160 1161 1162 1163 1164 1165 1166

	</view>
</template>
<script lang="uts">
	import {
		LottieAnimationView,
		LottieAnimation,
		LottieLoopMode
	} from 'Lottie'
	import {
		URL
	} from 'Foundation'
	import {
		UTSiOS
	} from "DCloudUTSFoundation"


D
DCloud_LXH 已提交
1167
	//原生提供以下属性或方法的实现
D
DCloud_LXH 已提交
1168 1169 1170 1171 1172 1173 1174 1175 1176 1177 1178 1179 1180 1181 1182 1183 1184 1185 1186 1187 1188 1189 1190 1191 1192 1193 1194 1195 1196 1197 1198 1199 1200 1201 1202 1203 1204 1205 1206 1207 1208 1209 1210 1211 1212 1213 1214 1215 1216 1217 1218 1219 1220 1221 1222 1223 1224 1225
	export default {
		/**
		 * 组件名称,也就是开发者使用的标签
		 */
		name: "uts-animation-view",
		/**
		 * 组件涉及的事件声明,只有声明过的事件,才能被正常发送
		 */
		emits: ['bindended'], // 当播放到末尾时触发 ended 事件(自然播放结束会触发回调,循环播放结束及手动停止动画不会触发)
		/**
		 * 属性声明,组件的使用者会传递这些属性值到组件
		 */
		props: {
			/**
			 * 动画资源地址,支持远程 URL 地址和本地绝对路径
			 */
			"path": {
				type: String,
				default: ""
			},
			/**
			 * 动画是否循环播放
			 */
			"autoplay": {
				type: Boolean,
				default: false
			},
			/**
			 * 动画是否自动播放
			 */
			"loop": {
				type: Boolean,
				default: false
			},
			/**
			 * 是否隐藏动画
			 */
			"hidden": {
				type: Boolean,
				default: false
			},
			/**
			 * 动画操作,可取值 play、pause、stop
			 */
			"action": {
				type: String,
				default: "stop"
			}

		},
		data() {
			return {

			}
		},
		watch: {
			"path": {
				handler(newValue: string, oldValue: string) {
杜庆泉's avatar
杜庆泉 已提交
1226 1227
					if (this.autoplay) {
						this.playAnimation()
D
DCloud_LXH 已提交
1228 1229
					}
				},
D
DCloud_LXH 已提交
1230
				immediate: false //创建时是否通过此方法更新属性,默认值为false
D
DCloud_LXH 已提交
1231 1232 1233 1234 1235 1236 1237 1238 1239
			},
			"loop": {
				handler(newValue: boolean, oldValue: boolean) {
					if (newValue) {
						this.$el.loopMode = LottieLoopMode.loop
					} else {
						this.$el.loopMode = LottieLoopMode.playOnce
					}
				},
D
DCloud_LXH 已提交
1240
				immediate: false //创建时是否通过此方法更新属性,默认值为false
D
DCloud_LXH 已提交
1241 1242 1243 1244 1245 1246 1247
			},
			"autoplay": {
				handler(newValue: boolean, oldValue: boolean) {
					if (newValue) {
						this.playAnimation()
					}
				},
D
DCloud_LXH 已提交
1248
				immediate: false //创建时是否通过此方法更新属性,默认值为false
D
DCloud_LXH 已提交
1249 1250 1251 1252 1253 1254 1255 1256 1257 1258 1259 1260 1261 1262 1263 1264 1265 1266 1267 1268 1269 1270
			},
			"action": {
				handler(newValue: string, oldValue: string) {
					const action = newValue
					if (action == "play" || action == "pause" || action == "stop") {
						switch (action) {
							case "play":
								this.playAnimation()
								break;
							case "pause":
								this.$el.pause()
								break;
							case "stop":
								this.$el.stop()
								break;
							default:
								break;
						}
					} else {
						// 非法入参,不管
					}
				},
D
DCloud_LXH 已提交
1271
				immediate: false //创建时是否通过此方法更新属性,默认值为false
D
DCloud_LXH 已提交
1272 1273 1274 1275 1276 1277
			},

			"hidden": {
				handler(newValue: boolean, oldValue: boolean) {
					this.$el.isHidden = this.hidden
				},
D
DCloud_LXH 已提交
1278
				immediate: false //创建时是否通过此方法更新属性,默认值为false
D
DCloud_LXH 已提交
1279 1280 1281 1282 1283 1284
			},

		},
		expose: ['setRepeatMode'],
		methods: {
			// 需要对外暴露的方法
D
DCloud_LXH 已提交
1285
			// 设置 RepeatMode
D
DCloud_LXH 已提交
1286 1287 1288 1289 1290 1291 1292 1293 1294 1295 1296 1297 1298 1299 1300 1301
			setRepeatMode(repeatMode: string) {
				if (repeatMode == "RESTART") {
					if (this.loop) {
						this.$el.loopMode = LottieLoopMode.loop
					} else {
						this.$el.loopMode = LottieLoopMode.playOnce
					}
				} else if (repeatMode == "REVERSE") {
					if (this.loop) {
						this.$el.loopMode = LottieLoopMode.autoReverse
					} else {
						this.$el.loopMode = LottieLoopMode.repeatBackwards(1)
					}
				}
			},
			// 不对外暴露的方法
D
DCloud_LXH 已提交
1302
			// 播放动画
D
DCloud_LXH 已提交
1303 1304 1305 1306 1307 1308 1309 1310 1311 1312 1313 1314 1315 1316 1317 1318 1319 1320 1321 1322 1323 1324 1325 1326 1327 1328 1329 1330 1331 1332 1333
			playAnimation() {
				// 构建动画资源 url
				var animationUrl: URL | null

				if (this.path.hasPrefix("http")) {
					animationUrl = new URL(string = this.path)
				} else {
					const filePath = UTSiOS.getResourcePath(this.path)
					animationUrl = new URL(fileURLWithPath = filePath)
				}

				if (animationUrl != null) {
					// 加载动画 LottieAnimation
					LottieAnimation.loadedFrom(url = animationUrl!, closure = (animation: LottieAnimation | null):
						void => {
							if (animation != null) {
								// 加载成功开始播放
								this.$el.animation = animation
								this.$el.play(completion = (isFinish: boolean): void => {
									if (isFinish) {
										// 播放完成回调事件
										this.fireEvent("bindended")
									}
								})
							}
						})
				} else {
					console.log("url 构建失败,请检查 path 是否正确")
				}
			}
		},
D
DCloud_LXH 已提交
1334
		created() { //创建组件,替换created
D
DCloud_LXH 已提交
1335 1336

		},
D
DCloud_LXH 已提交
1337 1338
		NVBeforeLoad() { //组件将要创建,对应前端beforeMount
			//可选实现,这里可以提前做一些操作
D
DCloud_LXH 已提交
1339
		},
D
DCloud_LXH 已提交
1340
		NVLoad(): LottieAnimationView { //创建原生View,必须定义返回值类型(Android需要明确知道View类型,需特殊校验)
D
DCloud_LXH 已提交
1341 1342 1343 1344 1345 1346
			// 初始化 Lottie$el
			const animationView = new LottieAnimationView()
			// 默认只播放一次动画
			animationView.loopMode = LottieLoopMode.playOnce
			return animationView
		},
D
DCloud_LXH 已提交
1347
		NVLoaded() { //原生View已创建
D
DCloud_LXH 已提交
1348 1349 1350 1351 1352 1353 1354 1355 1356 1357 1358 1359 1360 1361

			/// 更新 props 中定义的属性值

			if (this.loop) {
				this.$el.loopMode = LottieLoopMode.loop
			}

			this.$el.isHidden = this.hidden

			if (this.autoplay) {
				this.playAnimation()
			}
		},

D
DCloud_LXH 已提交
1362 1363
		NVLayouted() { //原生View布局完成
			//可选实现,这里可以做布局后续操作
D
DCloud_LXH 已提交
1364 1365
		},

D
DCloud_LXH 已提交
1366 1367
		NVBeforeUnload() { //原生View将释放
			//可选实现,这里可以做释放View之前的操作
D
DCloud_LXH 已提交
1368
		},
D
DCloud_LXH 已提交
1369 1370
		NVUnloaded() { //原生View已释放
			//可选实现,这里可以做释放View之后的操作
D
DCloud_LXH 已提交
1371
		},
D
DCloud_LXH 已提交
1372 1373
		unmounted() { //组件销毁
			//可选实现
D
DCloud_LXH 已提交
1374 1375 1376 1377
		}
	}
</script>
<style>
D
DCloud_LXH 已提交
1378

DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
1379 1380 1381 1382 1383
</style>
```

:::

杜庆泉's avatar
杜庆泉 已提交
1384
上面的代码我们实现了一个支持lottie动画播放的 UTS组件,标签名称为 `uts-animation-view`
杜庆泉's avatar
杜庆泉 已提交
1385

杜庆泉's avatar
杜庆泉 已提交
1386
对外提供了下列属性和方法
杜庆泉's avatar
杜庆泉 已提交
1387

杜庆泉's avatar
杜庆泉 已提交
1388 1389 1390 1391 1392 1393 1394 1395
|属性		|类型	|默认值	|描述	|
|:---		|:--	|:--	|:---	|
|`path`		|string	||`lottie`资源路径,支持本地地址和`http`协议下的网络地址|
|`loop`		|boolean|false	|动画是否循环播放|
|`autoplay`	|boolean|true	|动画是否自动播放|
|`action`	|string	|play	|动画操作,可取值 play、pause、stop|
|`hidden`	|boolean|true	|是否隐藏动画|
|`bindended`|event	|		|当播放到末尾时触发 ended 事件|
杜庆泉's avatar
杜庆泉 已提交
1396
|`setRepeatMode`|function|	|设置动画的重复方式,RESTART:重新开始播放,REVERSE,反向播放|
杜庆泉's avatar
杜庆泉 已提交
1397

杜庆泉's avatar
杜庆泉 已提交
1398

杜庆泉's avatar
杜庆泉 已提交
1399
#### 使用`uts-animation-view`组件
杜庆泉's avatar
杜庆泉 已提交
1400 1401 1402 1403

在uni-app项目中新建 lottie/index.nvue 页面

![](https://native-res.dcloud.net.cn/images/uts/component/lottie_use_file.jpg)
杜庆泉's avatar
杜庆泉 已提交
1404

杜庆泉's avatar
杜庆泉 已提交
1405
引用自定义 `uts-animation-view` 组件,并编写测试用例
杜庆泉's avatar
杜庆泉 已提交
1406 1407

```
杜庆泉's avatar
杜庆泉 已提交
1408 1409 1410 1411
<template>
    <div>
        <button @tap="changeUrl">播放本地动画资源</button>
		<button @tap="changeServerUrl">播放远程动画资源</button>
D
DCloud_LXH 已提交
1412

杜庆泉's avatar
杜庆泉 已提交
1413 1414 1415 1416 1417 1418 1419 1420 1421
        <button @tap="changeAutoPlay">测试AutoPlay</button>
        <button @tap="changeLoop">测试Loop</button>
        <button @tap="changeAction(1)">测试action play</button>
        <button @tap="changeAction(2)">测试action pause</button>
        <button @tap="changeAction(3)">测试action stop</button>
        <uts-animation-view ref="animView" :path="animUrl" :autoplay="autoplay" :loop="loop" :action="action"
            :hidden="hidden" @bindended="testAnimEnd" @click="lottieClickTest" @longpress="lottieLongpressTest"
            :style="{width:widthNum+'rpx',height:heightNum+'px',background:yanse}">
        </uts-animation-view>
D
DCloud_LXH 已提交
1422

杜庆泉's avatar
杜庆泉 已提交
1423 1424 1425 1426
    </div>
</template>

<script>
D
DCloud_LXH 已提交
1427

杜庆泉's avatar
杜庆泉 已提交
1428 1429 1430 1431 1432 1433 1434 1435 1436 1437 1438 1439 1440 1441
    export default {
        data() {
            return {
                hidden: false,
                autoplay: false,
                action: "play",
                loop: false,
                yanse: "red",
                widthNum: 750,
                heightNum: 200,
                comShow: true,
                animUrl: "/static/anim_a.json"
            }
        },
D
DCloud_LXH 已提交
1442

杜庆泉's avatar
杜庆泉 已提交
1443 1444 1445 1446 1447 1448 1449 1450 1451 1452 1453 1454 1455 1456 1457 1458 1459 1460 1461 1462 1463 1464 1465 1466 1467 1468 1469 1470 1471 1472 1473 1474 1475 1476 1477 1478 1479 1480 1481 1482 1483 1484 1485 1486 1487 1488 1489 1490 1491 1492 1493 1494 1495
        methods: {

            changeAutoPlay: function() {
                this.autoplay = !this.autoplay
            },
            changeUrl: function() {
                if (this.animUrl == "/static/anim_a.json") {
                    this.animUrl = "/static/anim_b.json"
                } else {
                    this.animUrl = "/static/anim_a.json"
                }
            },

			changeServerUrl: function() {
                this.animUrl = "https://b.bdstatic.com/miniapp/images/lottie_example_one.json"
            },
            changeAction: function(type) {
                if (type == 1) {
                    this.action = "play"
                } else if (type == 2) {
                    this.action = "pause"
                } else if (type == 3) {
                    this.action = "stop"
                }
            },
            changeLoop: function() {
                this.loop = !this.loop
            },
            testAnimEnd: function(res) {
                console.log("testAnimEnd");
            },

            changeRepeat: function(res) {
                let repeatConfig = {
                    count: 3,
                    mode: "restart"
                }
                this.$refs["animView"].updateRepeatConfig(repeatConfig, function(res) {
                    console.log(res);
                });

            },
            lottieClickTest: function(res) {
                console.log("lottieClickTest");
                console.log(res);
            },
            lottieLongpressTest: function(res) {
                console.log("lottieClickTest");
                console.log(res);
            },
        }
    }
</script>
杜庆泉's avatar
杜庆泉 已提交
1496 1497 1498

```

杜庆泉's avatar
杜庆泉 已提交
1499
以上,我们完成了 `uts-animation-view`组件的集成和使用工作
杜庆泉's avatar
杜庆泉 已提交
1500 1501


杜庆泉's avatar
杜庆泉 已提交
1502
#### 运行和测试
杜庆泉's avatar
杜庆泉 已提交
1503

杜庆泉's avatar
杜庆泉 已提交
1504 1505
在当前例子中,因为配置了额外的第三方依赖,需要自定义基座方能使用

杜庆泉's avatar
杜庆泉 已提交
1506

杜庆泉's avatar
杜庆泉 已提交
1507 1508
## UTS开发容器组件

DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
1509
## 简介
杜庆泉's avatar
杜庆泉 已提交
1510 1511

组件一般有两种场景,第一种是: 单标签组件
D
DCloud_LXH 已提交
1512
```html
杜庆泉's avatar
杜庆泉 已提交
1513 1514 1515 1516 1517 1518 1519
<uts-view style="xxxx"/>
```

我们上面介绍的 `uts-hello-view`或者`uts-animation-view`都是这种类型

第二种是 作为容器使用:

D
DCloud_LXH 已提交
1520
```html
杜庆泉's avatar
杜庆泉 已提交
1521 1522 1523 1524 1525
<uts-view >
	<text> 文字子组件</text>
	<image src="https://xxx">
<uts-view >
```
DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
1526
## 声明
杜庆泉's avatar
杜庆泉 已提交
1527 1528 1529

UTS组件作为容器组件与普通View组件遵循完全相同的规范,

D
DCloud_LXH 已提交
1530
唯一的区别在于 当组件布局中包含 `<solt>` 标签时,编译器会自动将其转换为容器组件
杜庆泉's avatar
杜庆泉 已提交
1531

DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
1532 1533 1534 1535
::: preview

> Android

杜庆泉's avatar
杜庆泉 已提交
1536 1537
```ts
<template>
杜庆泉's avatar
杜庆泉 已提交
1538
	<view>
杜庆泉's avatar
杜庆泉 已提交
1539 1540 1541 1542 1543 1544 1545
		<solt/>
	</view>
</template>
<script lang="uts">

	import LinearLayout from 'android.widget.LinearLayout'

D
DCloud_LXH 已提交
1546
	//原生提供以下属性或方法的实现
杜庆泉's avatar
杜庆泉 已提交
1547 1548
	export default {
		name: "uts-hello-container",
D
DCloud_LXH 已提交
1549

杜庆泉's avatar
杜庆泉 已提交
1550 1551 1552 1553
		NVLoad(): LinearLayout {
			let contentLayout = new LinearLayout($androidContext)
			return contentLayout
		}
D
DCloud_LXH 已提交
1554

杜庆泉's avatar
杜庆泉 已提交
1555 1556 1557
	}
</script>
<style>
D
DCloud_LXH 已提交
1558

杜庆泉's avatar
杜庆泉 已提交
1559 1560 1561 1562
</style>

```

DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
1563 1564 1565
> iOS

```ts
D
DCloud_LXH 已提交
1566 1567 1568 1569 1570 1571 1572 1573 1574
<template>
	<view>
		<slot></slot>
	</view>
</template>
<script lang="uts">
	import {
		UIView
	} from 'UIKit'
D
DCloud_LXH 已提交
1575
	//原生提供以下属性或方法的实现
D
DCloud_LXH 已提交
1576 1577 1578 1579 1580 1581 1582 1583
	export default {
		name: "uts-hello-container",
		NVLoad(): UIView {
			let view = new UIView()
			return view
		}

	}
DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
1584 1585 1586 1587 1588
</script>
```

:::

杜庆泉's avatar
杜庆泉 已提交
1589 1590 1591
如上,我们即可到了一个最简的UTS容器组件


DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
1592
## 使用容器组件
杜庆泉's avatar
杜庆泉 已提交
1593 1594 1595 1596 1597 1598 1599 1600 1601 1602 1603 1604 1605 1606 1607 1608 1609 1610 1611 1612 1613

UTS容器组件的使用与Vue等常见的前端容器组件一致。唯一要注意的是,目前UTS容器组件还不支持 具名插槽。

如下是一个容器组件的使用示例


```js
<template>
	<uts-hello-container>
		<text>UTS contianer组件</text>
		<button text="点击按钮内容" style="width:375px;height: 375px;background-color: aqua;"></button>
	</uts-hello-container>
</template>

<script>
</script>

<style>
</style>
```

lizhongyi_'s avatar
lizhongyi_ 已提交
1614 1615 1616
## 应用程序生命周期函数监听
 UTS 组件同样支持对应用程序生命周期函数的监听,方式和 UTS 插件中的完全一致。具体使用方法[详见](https://uniapp.dcloud.net.cn/plugin/uts-plugin.html#hooksClass)

杜庆泉's avatar
杜庆泉 已提交
1617

杜庆泉's avatar
杜庆泉 已提交
1618
## 快速体验
杜庆泉's avatar
杜庆泉 已提交
1619 1620


DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
1621
开发者可以使用[Hello UTS](https://gitcode.net/dcloud/hello-uts) 快速体验UTS 组件开发
杜庆泉's avatar
杜庆泉 已提交
1622 1623


DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
1624
Lottie动画示例,对应的源码实现:~/uni_modules/uts-animation-view
杜庆泉's avatar
杜庆泉 已提交
1625

DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
1626
`uts-animation-view`动画示例,对应的源码实现:~/uni_modules/uts-animation-view
杜庆泉's avatar
杜庆泉 已提交
1627 1628 1629 1630



## 常见问题
杜庆泉's avatar
杜庆泉 已提交
1631

杜庆泉's avatar
杜庆泉 已提交
1632
#### 1 使用者需要指定 组件宽高
杜庆泉's avatar
杜庆泉 已提交
1633 1634 1635 1636 1637

```
<uts-hello-view buttonText="点击按钮内容" style="width:375px;height: 375px;background-color: aqua;"></uts-hello-view>
```

杜庆泉's avatar
杜庆泉 已提交
1638
如果不通过style 指定组件宽高,会导致组件不显示
杜庆泉's avatar
杜庆泉 已提交
1639 1640


杜庆泉's avatar
杜庆泉 已提交
1641
#### 2 UTS-Android 插件涉及的像素单位说明: rpx,逻辑像素px,物理像素px
杜庆泉's avatar
杜庆泉 已提交
1642 1643 1644

|单位|说明|使用场景|
|----|---|---|
杜庆泉's avatar
杜庆泉 已提交
1645 1646
|逻辑像素px |逻辑像素 对应到 android中的 dp| 组件使用者 在页面css中使用 举例:`width:480px` |
|物理像素px |真实的设备像素,与dp 直接的换算关系是 dp * 屏幕密度 = 物理像素 px| android 原生api 传入和返回的单位均为物理像素,比如 设置layoutParam 参数,获取View宽高等 |
杜庆泉's avatar
杜庆泉 已提交
1647 1648 1649 1650 1651 1652 1653 1654 1655 1656 1657 1658 1659 1660 1661
|rpx |屏幕宽度固定750单位前提下的逻辑像素| 组件使用者 在页面css中使用 举例:`width:750rpx`,可以使用UTSAndroid.rpx2px() 函数进行rpx 和 逻辑像素 px的转换|



为了让组件使用者的有更好的体验,UTS 插件 应该以 **逻辑像素 px** 作为标准的像素单位:

+ 1 内置的UTS插件/组件,涉及对外交互时会自动进行单位转换,抹平相关差异。比如 `swiper`等组件监听滑动距离等场景

+ 2 建议 插件开发者的插件在设计对外像素单位时也进行单位的转换,以逻辑像素px 作为输出结果