Uni-app跟学笔记（四）：图片API、跨端兼容、组件注册、组件通信

本博客为 [uni-app]( 此门课的跟学笔记，目的是便于个人复习和对知识快速索引，源码素材可在均可在视频评论区找到

1）图片API

1：图片上传

• 从本地相册中选择图片(包括gif动图)上传或使用相机拍照的API是uni.chooseImage(OBJECT)，其中OBJECT中有下列参数

• 注意success和error等回调函数中的this不再指向Vue内置对象，所以success(res)函数中的this.imgArr语句不会成功赋值，此时可以改为Es6特性中的箭头函数来解决该问题

<template>
	<view>
		图片上传
		<button type="primary" @click="chooseImg">图片上传</button>
		<image v-for="item in imgArr" :src="item"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgArr: []
			}
		},
		methods: {
			chooseImg() {
                uni.chooseImage({
                    count: 5, // 最大选择图片的数量,默认为9
                    // 上传成功的回调函数
                    // 在success或error的回调函数中的this不再指向内置Vue对象
                    // 如果改成箭头函数就可以解决这个问题
                    // 或者利用上一篇博客中的方法,let self=this,记录一下Vue内置对象
                    success:res=> {
                        // 若成功返回的是本地文件路径列表tempFilePaths
                        console.log(res);
                        this.imgArr=res.tempFilePaths;
                    }
                })
			}
		}
	}
</script>
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：图片预览

• 图片预览的API是uni.previewImage，其参数如下，注意：某些参数的设置只能在APP上起作用，如loop(循环预览)、indicator(图片下方划动的指示器等)

• 在原有代码的基础上添加：

<template>
	<view>
		图片上传
		<button type="primary" @click="chooseImg">图片上传</button>
		<!-- 为每一张图片添加图片预览,传递自身路径参数 -->
		<image v-for="item in imgArr" :src="item" @click="previewImg(item)"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgArr: []
			}
		},
		methods: {
			chooseImg() {
				uni.chooseImage({
					count: 5, // 最大选择图片的数量,默认为9
					// 上传成功的回调函数
					// 在success或error的回调函数中的this不再指向内置Vue对象
					// 如果改成箭头函数就可以解决这个问题
					// 或者利用上一篇博客中的方法,let self=this,记录一下Vue内置对象
					success: res => {
						// 若成功返回的是本地文件路径列表tempFilePaths
						console.log(res);
						this.imgArr = res.tempFilePaths;
					}
				})
			},
			// 预览图片
			previewImg(itemPath) {
				console.log(itemPath);
				uni.previewImage({
					current: itemPath,
					urls: this.imgArr, // 要预览的图片列表
					loop: true, // 循环显示[只在APP中有效]
					indicator: 'default', // 图片指示器(圆点)[只在APP中有效]
					longPressActions: true // 长按图片显示操作菜单,不填写默认为保存相册
				})
			} 
			
		}
	}
</script>
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

2）跨端兼容

• 在uni-app中使用特殊的注释作为标记，在编译时，根据这些特殊的注释，将注释中的代码编译到不同平台
• 写法：以 #ifdef 加平台标识 开头，以 #endif 结尾（梦回STM32/C++）

<template>
	<view>
		跨端兼容
		<!-- #ifdef H5 -->
		<view>只在H5中显示</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view>只在微信小程序中显示</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			// 页面加载时触发
			onLoad() {
				// #ifdef H5
				console.log('在h5中打印')
				// #endif
				// #ifdef MP-WEIXIN
				console.log('在微信小程序中打印')
				// #endif
			}
		}
	}
</script>

<style>
    /* 在H5中的样式 */
	/* #ifdef H5 */
	view {
		color: hotpink;
	}
	/* #endif */
    /* 在微信小程序中的样式 */
	/* #ifdef MP-WEIXIN */
	view {
		color: skyblue;
	}
	/* #endif */
</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

3）导航跳转

• 有两种跳转方式，声明式(利用组件)和编程式(利用API)

  1. 声明式跳转，详细地址：navigator | uni-app官网 (dcloud.net.cn)
  2. 编程式跳转，详细地址：uni.navigateTo(OBJECT) | uni-app官网 (dcloud.net.cn)

• 下面案例的注释非常详细，需要注意的要点有：

  • 在tabBar中注册与未注册的页面需要用不同的代码来实现跳转
  • redirect是重定向，和在javaWeb中学习到的重定向相同，会卸载掉上一个页面
  • 在导航跳转时传参在url后按照get请求的方法加上参数即可，参数是在请求路径中的

<template>
	<view>
		<view>导航跳转</view>
		<!-- 1:组件式 -->
		<!-- 不带超链接的蓝色字体和下划线的效果 -->
		<!-- 不在tabbar中的页面可以直接跳 -->
		<navigator url="/pages/detail/detail">跳转至详情页(非tabBar页面用这个)</navigator>
		<!-- 在tabbar中的页面需要设置open-type -->
		<navigator url="/pages/message/message" open-type="switchTab">跳转至信息页(tabBar页面用这个)</navigator>
		
		
		<!-- 2:编程式 -->
		<button @click="goDetail">跳转至详情页(非tabBar页面用这个)</button>
		<button @click="goMessage">跳转至详情页(tabBar页面用这个)</button>
		<button @click="redirectDetail">跳转到详情页并关闭当前页面(tabBar页面用这个)</button>
	
		<!-- 3:导航跳转传参 -->
		<!-- 在编程式中同理 -->
		<navigator url="/pages/detail/detail?id=80&age=20">导航跳转+传递参数</navigator>
		<!-- 在detail页面中可以在onLoad方法中传递参数options来接受这个参数 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			goDetail() {
				// 只能跳转到非tbBar页面
				uni.navigateTo({
					url: '/pages/detail/detail'
				})
			},
			goMessage() {
				// 跳转到tabBar页面,并卸载所有其他非tabBar页面
				// 只要是非tabBar页面都卸载
				uni.switchTab({
					url: '/pages/message/message'
				})
			},
			redirectDetail() {
				// 跳转到tabBar页面,只卸载上一个页面
				uni.redirectTo({
					url: '/pages/detail/detail'
				})
			}
		}
	}
</script>
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

4）组件及其生命周期

1：注册组件

• 在项目中新建components目录与pages同级，右键新建组件

• 在test.vue中随便写点什么内容以作演示，在其他vue页面中将test.vue注册为主键并导入，和vue中注册主键的方式非常类似

2：组件生命周期

• uni-app中组件的生命周期函数有以下几个，与vue中的生命周期函数非常类似，但在vue中一共是10个

• 个人觉得在实际开发中只需要掌握的只有两个，一个是created，一个是mounted

<template>
	<view id="myView">
		<text>test组件</text>
	</view>
</template>

<script>
	export default {
		name:"test",
		data() {
			return {
				num: 3
			};
		},
		// 在实例创建完成后立即被调用
		created() {
			console.log('created 生命周期,数据刚被渲染',this.num)
			console.log('在此生命周期之前是拿不到这个数据的')
		},
		// 挂载到实例上去之后调用
		mounted() {
			console.log('挂载就是虚拟DOM转成真实DOM后渲染到页面')
			console.log('mounted 生命周期,此时可以通过DOM获取到id为myView的元素',document.getElementById('myView'))
		}
	}
</script>
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

5）组件的通信

1：父组件给子组件传值

• 传的时候父组件通过组件绑定的形式向子组件传递，子组件通过props的方式来接受

1-父组件

<template>
	<view>
		<test :val="title">父向子传值</test>
	</view>
</template>

<script>
	import test from '../../components/test.vue'
	export default {
		components: {
			test
		},
		data() {
			return {
				title: 'hello uni'
			}
		},
		methods: {
			
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

2-子组件

<template>
	<view id="myView">
		<text>test组件</text><br />
		<text>这是父组件传递过来的数据{{val}}</text>
	</view>
</template>

<script>
	export default {
		name:"test",
		data() {
			return {
				
			};
		},
		props: ['val'], // 子向父承接
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2：子组件向父组件传值

• 通过自定义事件$emit进行传递参数

1-子组件

<template>
	<view id="myView">
		<text>test组件</text><br />
		<button type="primary" @click="sendNum">给父组件传值</button>
	</view>
</template>

<script>
	export default {
		name:"test",
		data() {
			return {
				num: 5
			};
		},
		methods: {
			sendNum() {
				console.log('给父组件传值')
				this.$emit('myEvent',this.num)
			}
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

2-父组件

<template>
	<view>
		<!-- 父组件拿到值 -->
		<test @myEvent="getNum"></test>
		{{num}}
	</view>
</template>

<script>
	import test from '../../components/test.vue'
	export default {
		components: {
			test
		},
		data() {
			return {
				num: 0,
			}
		},
		methods: {
			getNum(num) {
				console.log(num);
				// 把num存到我们自己的num里面
				this.num=num
			}
		}
	}
</script>
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

3：兄弟组件传值

• 首先注册两个兄弟组件，组件a和组件b

• 在组件a中书写一个自定义函数，通过$emit方法向全局事件传递值

<template>
	<view>
		这是a组件<button size="mini" @click="addNum">修改b组件的数据</button>
	</view>
</template>

<script>
	export default {
		name:"a",
		data() {
			return {
				
			};
		},
		methods: {
			addNum() {
				uni.$emit('updateNum',10)
			}
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

• 在组件b中注册一个全局事件，以便被修改

<template>
	<view>
		这是b组件,b组件中的数据：{{num}}
	</view>
</template>

<script>
	export default {
		name:"b",
		data() {
			return {
				num: 0
			};
		},
		created() {
			// 注册一个全局事件
			uni.$on('updateNum',num=>{
				this.num+=num
			})
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

• 将这两个子组件注册到父组件中进行测试，毕竟组件a和组件b没法在内置浏览器中直接显示

<template>
	<view>
		<test-a></test-a>
		<test-b></test-b>
	</view>
</template>

<script>
	import testA from '../../components/a.vue'
	import testB from '../../components/b.vue'
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		},
		components: {
			"test-a": testA,
			"test-b": testB
		}
	}
</script>
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

6）uni-ui组件库

• 在真正开发中，uni中提供的组件可能不够我们使用并且使用起来比较繁琐

• 感觉官方给出的使用说明已经相当完善了：uni-app官网 (dcloud.net.cn)