Vue2 - 23-04-05

First Post:

Last Update:

uniapp - 23-04-05

配置相关

condition

配置项

pages配置项的第一个顺序为默认的首页

1
2
3
4
5
6
7
8
9
10
11
//list[0]=={"name": "详情页","path": "pages/detail/detail","query": "id=80"}
"condition": {
		"current": 0,
		"list": [
			{
				"name": "详情页",
				"path": "pages/detail/detail",
				"query": "id=80"
			}
		]
	}

微信开发者工具启动方式

缓存数据的异步方法与同步方法

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
//异步写法
uni.setStorage({
	key: 'id',
	data: 80,
	success(res) {
		console.log('存储成功',res);
	}
})
//同步写法
uni.setStorageSync('id',80)

//异步写法
uni.getStorage({
	key: 'id',
	success(res) {
		console.log('获取成功',res);
	}
})
//同步写法
console.log(uni.getStorageSync('id'));

//异步写法
uni.removeStorage({
	key:'id',
	success(res) {
		console.log('移除成功',res);
	}
})
//同步写法
uni.removeStorageSync('id');

上传图片以及预览

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
<template>
	<view>
		<button type="primary" @click="chooseImg">上传图片</button>
		<image
		v-for="(img,index) in imgArr"
		:key="index"
		:src="img"
		mode="aspectFit"
		@click="previewImg(img)"
		></image>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				imgArr:[]
			}
		},
		methods:{
			chooseImg() {
				uni.chooseImage({
					count:5,//实际上很多时候控制不了
					success:(imgs)=>{
						console.log(imgs);
						this.imgArr = imgs.tempFilePaths
					}//使用this的时候要改用箭头函数
				})
			},
			previewImg(img) {
				uni.previewImage({
					current:img,
					urls:this.imgArr,
					loop:true
				})
			}
		}
	}
</script>

<style>
</style>

多平台注释编译

参考官方文档->条件编译

1
2
#ifdef
#endif

声明式跳转及编程式跳转

声明式跳转（组件）
编程式跳转（API）

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
<template>
	<view>
		<view>导航跳转学习</view>
		<navigator url="/pages/detail/detail?id=80&age=19">跳转到详情页(默认可以返回)</navigator>
		<navigator url="/pages/message/message" open-type="switchTab">跳转到信息页</navigator>
		<navigator url="/pages/detail/detail" open-type="redirect">跳转到详情页（redirect不可返回）</navigator>
		<button @click="directToDetail">跳转到详情页</button>
		<button @click="directToMsg">跳转到tab页面，并关闭所有非tab页面</button>
		<button @click="redirectToDetail">跳转非tab但仅关闭当前页面</button>
	</view>
</template>

<script>
	export default {
		onUnload() {
			console.log('导航页面卸载了');
		},
		methods:{
			directToDetail() {
				uni.navigateTo({
					url:"/pages/detail/detail"
				})
			},
			directToMsg() {
				uni.switchTab({
					url:"/pages/message/message"
				})
			},
			redirectToDetail(){
				uni.redirectTo({
					url:"/pages/detail/detail"
				})
			}
		}
	}
</script>

<style>
</style>

传参的形式：query+onLoad(options)

≡