uni-app知识点整理（5）- 网络请求、数据缓存、图片上传和预览

目录一、网络请求1.1 发送get请求二、数据缓存2.1uni.setStorage(OBJECT)2.2uni.setStorageSync(KEY,DATA)2.3uni.getStorage(OBJECT)2.4uni.getStorageSync(KEY)2.5uni.removeStorage(OBJECT)2.6uni.removeStorageSync(KEY)2.7 案例练习三、图

JHY97

1665人浏览 · 2022-05-03 18:30:00

JHY97 · 2022-05-03 18:30:00 发布

一、网络请求

1.1 发送get请求

二、数据缓存

2.1 uni.setStorage(OBJECT)

2.2 uni.setStorageSync(KEY,DATA)

2.3 uni.getStorage(OBJECT)

2.4 uni.getStorageSync(KEY)

2.5 uni.removeStorage(OBJECT)

2.6 uni.removeStorageSync(KEY)

2.7 案例练习

三、图片上传和预览

3.1 uni.chooseImage(OBJECT)

3.2 uni.previewImage(OBJECT)

3.3 案例练习

一、网络请求

在uni中可以调用uni.request方法进行网络请求

需要注意的是：小程序中网络相关API在使用前需要配置域名白名单

uni-app官方文档 - 发起网络请求

1.1 发送get请求

用 express创建api服务器（接口）用于测试 uni-app 中的 get请求

express创建api服务器可查看笔记：AJAX知识点整理 - 第一节和第二节内容

server.js

// 1. 引入express
const express = require('express');
 
// 2. 创建应用对象
const app = express();
 
// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server', (request,response)=>{
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
 
    // 设置响应体
    response.send('HELLO AJAX');
    
});
 
// 4. 监听端口启动服务
app.listen(8000, ()=>{ 
    console.log('服务已经启动, 8000端口监听中');
});

在 detail.vue 页面中为按钮配置点击事件，并点击按钮后发送get请求

<template>
	<view>
		<button @click="sendGet">发送Get请求</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			sendGet(){
				uni.request({
					// method不写的话，默认为GET请求
					method:"GET",
					url:"http://127.0.0.1:8000/server",
					success(res) {
						console.log(res);
					}
				})
			}
		}
	}
</script>

由图示可看出，点击按钮后成功向服务器发送了get请求

二、数据缓存

uni-app官方文档 - 数据缓存

2.1 uni.setStorage(OBJECT)

将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口

OBJECT 参数说明
参数名	类型	必填	说明
key	String	是	本地缓存中的指定的 key
data	Any	是	需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

2.2 uni.setStorageSync(KEY,DATA)

将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口

参数说明
参数	类型	必填	说明
key	String	是	本地缓存中的指定的 key
data	Any	是	需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象

2.3 uni.getStorage(OBJECT)

从本地缓存中异步获取指定 key 对应的内容

OBJECT 参数说明
参数名	类型	必填	说明
key	String	是	本地缓存中的指定的 key
success	Function	是	接口调用的回调函数，res = {data: key对应的内容}
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

success 返回参数说明
参数	类型	说明
data	Any	key 对应的内容

2.4 uni.getStorageSync(KEY)

从本地缓存中同步获取指定 key 对应的内容

参数说明
参数	类型	必填	说明
key	String	是	本地缓存中的指定的 key

2.5 uni.removeStorage(OBJECT)

从本地缓存中异步移除指定 key

OBJECT 参数说明
参数名	类型	必填	说明
key	String	是	本地缓存中的指定的 key
success	Function	是	接口调用的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行

2.6 uni.removeStorageSync(KEY)

从本地缓存中同步移除指定 key

参数说明
参数名	类型	必填	说明
key	String	是	本地缓存中的指定的 key

2.7 案例练习

在 detail.vue 页面中设置三个按钮，分别用于将 data 存储在本地缓存中、取指定 key 对应的内容、移除指定 key

<template>
	<view>
		<button @click="sendGet">发送Get请求</button>
		<button type="primary" @click="setStorage">存储数据</button>
		<button type="primary" @click="getStorage">获取数据</button>
		<button type="primary" @click="removeStorage">移除数据</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			sendGet(){
				// 异步
				uni.request({
					// method不写的话，默认为GET请求
					method:"GET",
					url:"http://127.0.0.1:8000/server",
					success(res) {
						console.log(res);
					}
				})
			},
			setStorage(){
				// 异步
				uni.setStorage({
					key:'id',
					data:'No.9527',
					success:function(){
						console.log('存储数据成功');
					}
				})
				
				// 同步
				// uni.setStorageSync('id','No.9527')
			},
			getStorage(){
				// 异步
				uni.getStorage({
					key:'id',
					success:function(res){
						console.log('获取数据成功',res.data);
					}
				})
				
				// 同步
				// const res = uni.getStorageSync('id')
				// console.log(res);
			},
			removeStorage(){
				// 异步
				uni.removeStorage({
					key:"id",
					success:function(){
						console.log('移除数据成功');
					}
				})
				
				// 同步
				// uni.removeStorageSync('id')
			}
		}
	}
</script>

三、图片上传和预览

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

3.1 uni.chooseImage(OBJECT)

从本地相册选择图片或使用相机拍照

OBJECT 参数说明
参数名	类型	必填	说明	平台差异说明
count	Number	否	最多可以选择的图片张数，默认9	见下方说明
sizeType	Array<String>	否	original 原图，compressed 压缩图，默认二者都有	App、微信小程序、支付宝小程序、百度小程序
extension	Array<String>	否	根据文件拓展名过滤，每一项都不能是空字符串。默认不过滤。	H5(HBuilder X2.9.9+)
sourceType	Array<String>	否	album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
crop	Object	否	图像裁剪参数，设置后 sizeType 失效
success	Function	是	成功则返回图片的本地文件路径列表 tempFilePaths
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

crop 参数说明
参数名	类型	必填	说明
quality	Number	否	取值范围为1-100，数值越小，质量越低（仅对jpg格式有效）。默认值为80。
width	Number	是	裁剪的宽度，单位为px，用于计算裁剪宽高比。
height	Number	是	裁剪的高度，单位为px，用于计算裁剪宽高比。
resize	Boolean	否	是否将width和height作为裁剪保存图片真实的像素值。默认值为true。注：设置为false时在裁剪编辑界面显示图片的像素值，设置为true时不显示

3.2 uni.previewImage(OBJECT)

预览图片

OBJECT 参数说明
参数名	类型	必填	说明	平台差异说明
current	String/Number	详见下方说明	详见下方说明
urls	Array<String>	是	需要预览的图片链接列表
indicator	String	否	图片指示器样式，可取值："default" - 底部圆点指示器； "number" - 顶部数字指示器； "none" - 不显示指示器。	App
loop	Boolean	否	是否可循环预览，默认值为 false	App
longPressActions	Object	否	长按图片显示操作菜单，如不填默认为保存相册	App 1.9.5+
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

current 参数说明

可直接查看 uni-app官方文档 - 媒体 - 图片，更为细致

3.3 案例练习

在 message.vue 页面添加上传图片按钮，并配置点击事件
上传图片后，图片会显示出来
点击图片可以预览图片

message.vue

<template>
	<view>
		message页面
		<button type="primary" @click="chooseImg">上传图片</button>
		<img v-for="img in imgArr" :src="img" @click="previewImg(img)">
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgArr:[]
			}
		},
		methods: {
			chooseImg(){
				uni.chooseImage({
					count:9,
					success: (res) => {
						console.log(res);
						this.imgArr = res.tempFilePaths;
					}
				})
			},
			previewImg(current){
				console.log(current);
				uni.previewImage({
					current,
					urls:this.imgArr
				})
			}
		}
	}
</script>