uni-app入门教程（4）组件的基本使用_uni 组件别名的使用

前言

本文主要介绍了uni-app中的组件，包括四大类：基础组件（scroll-view、swiper、text等）、表单组件（button、checkbox、input等）、导航组件navigator和页面传参、媒体组件（audio、image和video等），详细说明了这些组件的常用属性和方法，并进行使用举例和演示。

一、基础组件

组件是视图层的基本组成单元，一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。
所有组件与属性名都是小写，单词之间以连字符-连接，根节点为<template>，其下只能有一个根组件。

框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。
常见的基础组件如下：

view是最基础的视图容器，类似于传统html中的div，用于包裹各种元素内容。

1.scroll-view

可滚动视图区域，用于区域滚动。
需注意在webview渲染的页面中，区域滚动的性能不及页面滚动。

常见的属性和含义如下：

常见的事件和含义如下：

hello uniapp项目中，index.vue如下：

<template>
	<view>
		<scroll-view class="scv" scroll-x="true">
			<view>1</view>
			<view>2</view>
			<view>3</view>
			<view>4</view>
			<view>5</view>
			<view>6</view>
		</scroll-view>
	</view>
</template>
<script>
	var _self;
	export default {
		data() {
			return {
			}
		},
		onLoad() {
			_self = this
		},
		onShow() {
		},
		onHide() {
		},
		methods: {
		}
	}
</script>

<style>
	scroll-view {
		display: flex;
	}
	.scv {
		width: 90%;
		margin: 0 auto;
		background: #F0AD4E;
		flex-wrap: nowrap;
		white-space: nowrap;
	}
	.scv view {
		width: 50%;
		height: 100px;
		background: #007AFF;
		display: inline-block;
	}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

显示：

显然，此时可以横向滚动。

2.swiper

滑块视图容器，一般用于左右滑动或上下滑动，比如banner轮播图。

说明：
滑动切换和滚动之间是有区别的，滑动切换是一屏一屏的切换，swiper下的每个swiper-item是一个滑动切换区域，不能停留在2个滑动区域之间，而滚动是允许停留在2个滚动区域之间的。

常见属性和含义如下：

常见事件如下：

更多可参考https://uniapp.dcloud.io/component/swiper。

index.vue如下：

<template>
	<view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="2000" :duration="1000" previous-margin="10px" next-margin="10px">
			<swiper-item>
				<view class="swiper-item uni-bg-red">A</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-green">B</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-blue">C</view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
	var _self;
	export default {
		data() {
			return {}
		},
		onLoad() {
			_self = this
		},
		onShow() {},
		onHide() {},
		methods: {}
	}
</script>

<style>
	swiper-item {
		background: #4CD964;
		height: 200px;
		width: 90%;
	}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

显示：

可以看到，达到了轮播图动态播放的效果。

3.text

文本组件，用于包裹文本内容，提供可被选择和复制的文本，而其他组件的文本都不能被选中、复制。

常见属性如下：

其中，space属性的可选值和含义如下：

4.rich-text

富文本。

常见属性如下：

index.vue如下：

<template>
	<view>
		<rich-text :nodes="nodes" @tap="tap"></rich-text>
	</view>
</template>
<script>
	var _self;
	export default {
		data() {
			return {
				nodes: [{
					name: 'div',
					attrs: {
						class: 'div-class',
						style: 'line-height: 60px; color: red; text-align:center;'
					},
					children: [{
						type: 'text',
						text: 'Hello&nbsp;uni-app!'
					}]
				}],
				strings: '<div style="text-align:center;"><img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png"/></div>'
			}
		},
		onLoad() {
			_self = this
		},
		onShow() {},
		onHide() {},
		methods: {}
	}
</script>

<style>
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

显示：

显然，渲染出了富文本。

5.process

进度条。

常见属性如下：

index.vue如下：

<template>
	<view>
		<view class="progress-box">
			<progress percent="20" show-info stroke-width="3" />
		</view>
		<view class="progress-box">
			<progress percent="40" active stroke-width="3" />
		</view>
		<view class="progress-box">
			<progress percent="60" active stroke-width="3" backgroundColor="#999" />
		</view>
		<view class="progress-box">
			<progress percent="80" activeColor="red" active stroke-width="8" />
		</view>
	</view>
</template>
<script>
	var _self;
	export default {
		data() {
			return {}
		},
		onLoad() {
			_self = this
		},
		onShow() {},
		onHide() {},
		methods: {}
	}
</script>

<style>
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

显示：

可以看到，显示出了进度的动态变化。

二、表单组件

表单组件很常用，主要用于数据的收集和提交。

1.button

按钮。

常见的属性和含义如下：

index.vue如下：

<template>
	<view>
		<button type="default" size="defaultSize" :loading="loading" :plain="plain" :disabled="disabled" @tap="defaultHandler" hover-class="other-button-hover">default</button>
		<button type="primary" size="primarySize" :loading="loading" :plain="plain" :disabled="disabled" @tap="primaryHandler">primary</button>
		<button type="warn" size="warnSize" :loading="loading" :plain="plain" :disabled="disabled" @tap="warnHandler">warn</button>
		<button @tap="setDisabled">点击设置以上按钮disabled属性</button>
		<button @tap="setPlain">点击设置以上按钮plain属性</button>
		<button @tap="setLoading">点击设置以上按钮loading属性</button>
	</view>
</template>
<script>
	var types = ['default', 'primary', 'warn']
	export default {
		data() {
			return {
				defaultSize: 'default',
				primarySize: 'default',
				warnSize: 'default',
				disabled: false,
				plain: false,
				loading: false
			}
		},
		onLoad() {
		},
		onShow() {
		},
		onUnload() {
		},
		methods: {
			setDisabled: function(e){
				this.disabled = !this.disabled
			},
			setPlain: function(e){
				this.plain = !this.plain
			},
			setLoading: function(e){
				this.loading = !this.loading
			}
		}
	}
</script>

<style>
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

显示：

可以看到，在点击button时，触发了相应的操作。

2.checkbox

checkbox-group是多项选择器，内部由多个 checkbox 组成。

属性如下：

checkbox是多选项目，即复选框。

常见属性如下：

index.vue如下：

<template>
	<view class="content">
		<checkbox-group name="" @change="checkboxChange">
			<label class="checkbox" v-for="item in items" :key="item">
				<checkbox :value="item" />{{item}}
			</label>
		</checkbox-group>
	</view>
</template>

<script>
	var _self;
	export default {
		data() {
			return {
				items: ['Reading', 'Running']
			}
		},
		onLoad() {
			_self = this;
			setTimeout(function(){
				_self.age = 20
			}, 3000);
		},
		onShow() {
			console.log('index onshow')
		},
		onHide() {
			console.log('index onhide')
		},
		methods: {
			checkboxChange: function(e) {
				console.log(e)
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

显示：

可以看到，已经渲染出页面元素，同时支持点选。

3.input

输入框。

常见的属性如下：

常见的事件如下：

4.label

用来改进表单组件的可用性，使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。
for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。
目前可以绑定的控件有<button>、<checkbox>、<radio>、<switch>。

属性如下：

5.picker

从底部弹起的滚动选择器。
支持五种选择器，通过mode来区分，分别是普通选择器、多列选择器、时间选择器、日期选择器和省市区选择器，默认是普通选择器。

（1）普通选择器，参数为mode = selector，常见属性和事件如下：

index.vue如下：

<template>
	<view>
		<picker :range="years" @change="yearChange">
			<view>
				{{years[yearIndex]}}
			</view>
		</picker>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				years: ["请选择年份", 2019, 2020, 2021],
				yearIndex: 0
			}
		},
		onLoad() {
		},
		onShow() {
		},
		onUnload() {
		},
		methods: {
			yearChange: function(e){
				console.log(e)
				this.yearIndex = e.detail.value
			}
		}
	}
</script>

<style>
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

显示：

可以看到，在选择值后，显示也会同步变化，被选择的值的下标存储在e.detail.value中。

（2）多列选择器，参数为mode = multiSelector，常见属性和事件如下：

index.vue如下：

<template>
	<view>
		<picker mode="multiSelector" :range="years" @change="yearChange">
			<view>
				{{years[0][yearIndex]}}-{{years[1][monthIndex]}}
			</view>
		</picker>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				years: [
					["请选择年份", 2019, 2020, 2021],
					["请选择月份 ", 3, 4, 5]
				],
				yearIndex: 0,
				monthIndex: 0
			}
		},
		onLoad() {
		},
		onShow() {
		},
		onUnload() {
		},
		methods: {
			yearChange: function(e){
				console.log(e)
				this.yearIndex = e.detail.value[0],
				this.monthIndex = e.detail.value[1]
			}
		}
	}
</script>

<style>
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

显示：

显然，可以进行多级选择，此时e.detail.value是一个数组，可以分别取值；
还可以通过ajax等方式实现先选择一级、再动态显示二级。

（3）时间选择器，参数为mode = time，常见属性和事件如下：

index.vue如下：

<template>
	<view>
		<picker mode="time" @change="yearChange">
			<view>
				{{timeText}}
			</view>
		</picker>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				timeText: "请选择时间"
			}
		},
		onLoad() {
		},
		onShow() {
		},
		onUnload() {
		},
		methods: {
			yearChange: function(e){
				console.log(e);
				this.timeText = e.detail.value
			}
		}
	}
</script>

<style>
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

显示：

（4）日期选择器，参数为mode = date，常见属性和事件如下：

（5）省市区选择器，参数为mode = region，常见属性和事件如下：

index.vue如下：

<template>
	<view>
		<picker mode="region" @change="regionChange">
			<view>
				{{regionText}}
			</view>
		</picker>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				regionText: "请选择地区"
			}
		},
		onLoad() {
		},
		onShow() {
		},
		onUnload() {
		},
		methods: {
			regionChange: function(e){
				console.log(e);
				this.regionText = e.detail.value
			}
		}
	}
</script>

<style>
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

显示：

显然，控制台输出了对应省市区的编码和文本。

6.radio

radio-group是单项选择器，内部由多个 <radio> 组成，通过把多个radio包裹在一个radio-group下，实现这些radio的单选。

属性如下：

radio即单选项目，常见属性如下：

7.slider

滑动选择器，常见属性和含义如下：

index.vue如下：

<template>
	<view>
		<slider @change="sliderChange" step="5"></slider>
	</view>
</template>
<script>
	export default {
		data() {
			return {
			}
		},
		onLoad() {
		},
		onShow() {
		},
		onUnload() {
		},
		methods: {
			sliderChange: function(e){
				console.log(e);
			}
		}
	}
</script>

<style>
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

显示：

可以看到，获取到了滑动选择器的值。

8.switch

开关选择器。

常见属性和含义如下：

index.vue如下：

<template>
	<view>
		<switch @change="switchChange"></switch>
	</view>
</template>
<script>
	export default {
		data() {
			return {
			}
		},
		onLoad() {
		},
		onShow() {
		},
		onUnload() {
		},
		methods: {
			switchChange: function(e){
				console.log(e);
			}
		}
	}
</script>

<style>
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

显示：

可以看到，在选择器处于打开状态时，value为true，处于关闭状态时，value为false。

9.textarea

多行输入框。

常见属性和事件如下：

10.form

表单，将组件内的用户输入的<switch>、<input>、<checkbox>、<slider>、<radio>和<picker>中的数据提交。
当点击 <form> 表单中 formType 为 submit 的 <button> 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

常见属性和含义如下：

index.vue如下;

<template>
	<view>
		<form @submit="formSubmit" @reset="formReset">
			<view class="section section_gap">
				<view class="section__title">switch</view>
				<switch name="switch" />
			</view>
			<view class="section section_gap">
				<view class="section__title">slider</view>
				<slider name="slider" show-value="" />
			</view>
			<view class="section">
				<view class="section__title">input</view>
				<input name="input" placeholder="please input here" />
			</view>
			<view class="section section_gap">
				<view class="section__title">radio</view>
				<radio-group name="radio-group">
					<label>
						<radio value="radio1" /><text>radio1</text>
					</label>
					<label>
						<radio value="radio2" /><text>radio2</text>
					</label>
				</radio-group>
			</view>
			<view class="section section_gap">
				<view class="section__title">checkbox</view>
				<checkbox-group name="checkbox">
					<label>
						<checkbox value="checkbox1" /><text>checkbox1</text>
					</label>
					<label>
						<checkbox value="checkbox2" /><text>checkbox2</text>
					</label>
				</checkbox-group>
				<input name="input" placeholder="please input here" />
			</view>
			<view class="btn-area">
				<button form-type="submit">Submit</button>
				<button form-type="reset">Reset</button>
			</view>
		</form>
	</view>
</template>
<script>
	export default {
		data() {
			return {}
		},
		onLoad() {},
		onShow() {},
		onUnload() {},
		methods: {
			formSubmit: function(e) {
				var formData = e.detail.value;
				console.log(formData);
				if (!formData.switch) {
					console.log('No Pass')
				}
			},
			formReset: function(e) {
				console.log(e)
			}
		}
	}
</script>

<style>
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

显示：

可以看到，在点击Submit按钮提交之后，会将数据全部提交，还可以对数据进行验证。

三、导航组件和页面传参

1.navigator

导航组件用于页面跳转，类似HTML中的<a>组件，但只能跳转本地页面，即目标页面必须在pages.json中注册。

常见的属性和含义如下：

其中， open-type对应的API接口及其含义如下：

index.vue如下：

<template>
	<view>
		<navigator url="../news" hover-class="navigator-hover">
			<button type="default">跳转到news页面</button>
		</navigator>
		<navigator url="../about/about" open-type="switchTab" hover-class="navigator-hover">
			<button type="default">跳转到about页面</button>
		</navigator>
	</view>
</template>
<script>
	export default {
		data() {
			return {}
		},
		onLoad() {},
		onShow() {},
		onUnload() {},
		methods: {
		}
	}
</script>

<style>
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

显示：

可以看到，实现了两种方式的跳转。

这是通过DOM进行页面跳转，还可以通过API进行跳转，如下：

<template>
	<view>
		<button type="default" @click="skip">跳转到新闻页面</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {}
		},
		onLoad() {},
		onShow() {
			setTimeout(function(){
				uni.navigateBack({
					delta: 1
				})
			}, 3000)			
		},
		onUnload() {},
		methods: {
			skip: function() {
				uni.navigateTo({
					url: '../news'
				})
			}
		}
	}
</script>

<style>
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

显示：

可以看到，也实现了页面跳转，并且可以定时跳转回原页面。

2.参数传递

在进行页面跳转时，向其他页面传递参数一般在组件或接口的url参数指定的地址后追加，以?开始，=连接参数名和参数值，&拼接不同的参数。

index.vue传递参数如下：

<template>
	<view>
		<button type="default" @click="skip">跳转到新闻页面</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {}
		},
		onLoad() {},
		onShow() {
			setTimeout(function(){
				uni.navigateBack({
					delta: 1
				})
			}, 5000)			
		},
		onUnload() {},
		methods: {
			skip: function() {
				uni.navigateTo({
					url: '../news?size=20&page=1'
				})
			}
		}
	}
</script>

<style>
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

news.vue接收参数如下：

<template>
	<view class="content">新闻页</view>
</template>

<script>
	export default {
		onLoad:function(options){
			console.log(options)
		}
	}
</script>

<style>
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

显示：

可以看到，参数值保存在options中。

四、媒体组件

1.audio

音频组件。

常见属性和事件如下：

index.vue如下：

<template>
	<view>
		<audio :src="audioSrc" :poster="posterSrc" :name="name" :author="author" controls style="text-align: center;"></audio>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				audioSrc: "https://m10.music.126.net/20201221165005/b4e7a310f6e3ffda9f12ab518201087c/yyaac/obj/wonDkMOGw6XDiTHCmMOi/2513074700/92fc/e94b/8333/c8592b8e05995aa1744976275eb09ab0.m4a",
				posterSrc: "https://y.gtimg.cn/music/photo_new/T002R300x300M000002npMQN1wN8nZ_1.jpg?max_age=2592000",
				name: "Blackheart",
				author: "Thomas Bergersen / Two Steps From Hell"
			}
		},
		onLoad() {},
		onShow() {
						
		},
		onUnload() {},
		methods: {
			
		}
	}
</script>

<style>
	audio {
		background: #007AFF;
		width: 100%;
	}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

显示：

可以看到，实现了音乐播放功能。

2.image

图片组件。

常见的属性和事件如下：

index.vue如下：

<template>
	<view>
		<image src="../../static/imgs/saying.png" style="width: 55%;"></image>
		<image src="../../static/imgs/saying.png" style="height: 200rpx;" mode="top right"></image>
		<image src="../../static/imgs/saying.png" style="width: 55%;" mode="widthFix"></image>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {},
		onShow() {
					
		},
		onUnload() {},
		methods: {
			
		}
	}
</script>

<style>
	
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

显示：

可以看到，mode属性值不同，图片显示的形式也会有所区别。

3.video

视频组件。

常见属性和事件如下：

index.vue如下：

<template>
	<view>
		<video id="myVideo" src="https://vodkgeyttp9.vod.126.net/cloudmusic/N0qR6445_2249845426_hd.mp4?ts=1608546147&rid=C127086D22ABA8524D81BF20C706B22B&rl=3&rs=WPEhneQzZWbNSeETGHhAruzsoNATDuXC&sign=80864b2eb815f570c9ce0ca4e31a9b72&ext=XHOm0M2rNgl%252BOsuwtVhiXa7BA9%252FkbvJfK84GXv1FFd7SvvDty%252BQ0GH9eXueIlfcwNUnGHRzfhbEYqUYBZ7ygZIdke%252Bg2SpJHDq4lJBw1rnmQ3PMGLXkM3%252BzAlTLvRhAxrxz0O5mQJ%252BELGODgy6G%252Bp7lrZ1TUmeJpqovjqqiZ3g%252Bq8iLxQWFUOajn5NyiEBuv18Eb9Z%252FfrLVHVrjYvXEBAR6M3eYxHG13DGON2%252F0sniI%252FWdCjmuGWL6wk8NtEzV32kPjquU4yMUiMBX%252B3NYu70c9OUnBc4npLNLG2qBCjKxA8qv2Zyn7UjC3n4rvTjyQBnmMrh8ey%252FffGWXHOsrge088Wr7oVoVcCWbHlGaFyTJ9hgVfe%252F6%252BddmLZVuYT0mZ%252Ft4JPaSdoVAoujK54TRcwW9i5T4toFrUWjn1b13qquz3s%252FySUUnvfEF65s7Z1AjCdvoCG6LrShGdY%252Fu2yre8HDZVyHVjeAoYtbvG5VXQDVm1W74z%252BdRSLxp0Bml7L27EsVZlXaSqn32KJlR4fr4%252FvrgW5GrjiflWoOoyOZ1RK0sk%253D" enable-danmu danmu-btn controls></video>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {},
		onShow() {
					
		},
		onUnload() {},
		methods: {
			
		}
	}
</script>

<style>
	
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

显示：

很明显，可以正常播放视频。

总结

uni-app为开发者提供的基础组件类似于HTML里的标签元素，并且更适合手机端使用，开发者可以通过组合这些组件、并在此基础上开发各种扩展组件来实现快速开发。