【uni-app从入门到实战】get请求、数据缓存、图片上传预览

get请求

uni-app发起请求

<button @click="get">发送请求button>

<script>
	export default {
		data() {
			return {
				......
			}
		},
		methods: {
			get(){
				uni.request({
					url:"https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",
					success(res) {
						console.log(res)
					}
				})
			}
		}
	}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

这样点击按钮会发送一个 get 请求，打印下结果：

数据缓存

三个异步接口

数据缓存官方文档

【存储数据】

<button @click="setStorage">存储数据button>
<script>
	export default {
		......
		methods: {
			setStorage(){
				uni.setStorage({
					key: 'storage_key',
					data: 'hello',
					success: function () {
						console.log('success');
					}
				});
			}
		}
	}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

如果运行在小程序上，在微信开发者工具里，存储的数据在 storage 中查看

如果运行在浏览器中，可以在应用-本地存储空间中查看

同时都会在控制台输出 success

【获取数据】

<button @click="getStorage">获取数据button>
<script>
	export default {
		......
		methods: {
			getStorage(){
				uni.getStorage({
					key: 'storage_key',
					success: function (res) {
						console.log(res.data);
					}
				});
			}
		}
	}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

点击获取数据按钮，调用 uni.getStorage()方法，传入存储的 key，然后在成功回调中使用res.data就可以拿到存储数据 hello

【移除数据】

<button @click="removeStorage">移除数据button>
<script>
	export default {
		......
		methods: {
			removeStorage(){
				uni.removeStorage({
					key: 'storage_key',
					success: function (res) {
						console.log('success');
					}
				});
			}
		}
	}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

以上说的三个接口setStorage，getStorage，removeStorage都是异步接口

三个同步接口

【存储数据】

uni.setStorageSync('id',80)
1

【获取数据】

const res = uni.getStorageSync('id')
console.log(res)
1
2

【移除数据】

uni.removeStorageSync('id')
1

图片上传和预览

uni-app 媒体-图片 官方文档

【选择图片】

我们增加一个按钮，增加选择图片方法

<button @click="chooseImg">上传图片button>
<script>
	export default {
		......
		methods: {
			chooseImg(){
				uni.chooseImage({
					count: 3,
					success: function (res) {
						console.log(res.tempFilePaths);
					}
				});
			}
		}
	}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

其中count为最多可以选择的图片张数，默认9。这里我们设置 最多选择 3 张，下面是运行在小程序上的表现：我们选择 5 张，上传成功后，成功则返回图片的本地文件路径列表 tempFilePaths，可以看到确实是限制的 3 张

【图片展示】

我们可以把获得的本地图片路径保存起来

<script>
	export default {
		data() {
			return {
				imgArr: []
			}
		},
		methods: {
			chooseImg(){
				uni.chooseImage({
					count: 3, //默认9
					success: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

运行在小程序中，可以在 AppData 中查看：

得到图片路径后，我们就可以把图片显示在页面上了

<image v-for="item in imgArr" :src="item">image>
1

【图片预览】

给图片增加一个点击事件来预览图片

<image v-for="item in imgArr" :src="item" @click="previewImg(item)">image>

<script>
	export default {
		data() {
			return {
				imgArr: []
			}
		},
		methods: {
			......
			previewImg(current){
				uni.previewImage({
					urls:this.imgArr,
					current
				})
			}
		}
	}
script>

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