uni-app常用API

一、request请求

1、语法格式：uni.request(OBJECT)

uni.request({
            url: '',   //服务器接口地址
            data:  object , //请求的参数
            header: '', //设置请求的 header
            method: 'GET', //请求方式，必须是大写
            dataType：'参数类型',   //建议设置为json格式
            responseType：'响应数据的类型',
            success: (res)=>{} , //服务器成功返回的回调函数 ，参数res是服务器响应的数据
            fail: (err)=>{}  //接口调用失败的回调函数  ，参数err是失败的信息
})

2、二次封装

（1）在App.vue文件中定义接口的基础地址

globalData:{ //全局数据
	BASE_URL: 'https://diancan.glbuys.com/api', //服务器地址
	HEADER : { 'content-type': 'application/x-www-form-urlencoded' }  //请求头信息
}

（2）创建utils\api.js

export const httpRequest = (options)=>{
	return new Promise((resolve,reject)=>{
		uni.request({
			url:getApp().globalData.BASE_URL + options.url, //在基础地址后拼接接口地址
			method:options.method || 'GET', //设置请求方式，默认为GET
		        header:getApp().globalData.HEADER, //设置请求头
			data: options.data || { }, //设置请求参数，默认为空对象
			dataType:'json', //设置请求参数的格式
			success: (res) => { //请求成功，由resolve返回响应数据
				resolve(res)
			},
			fail: (err) => { //请求失败，由reject返回失败信息
				reject(err)
			}
		})
	})
}

强调：

在App.vue文件中的globalData全局数据的获取方式：getApp() .globalData.全局变量名

（3）在main.js文件中，配置全局的api

import { httpRequest } from './utils/api.js'
Vue.prototype.$api = httpRequest

(4)在页面中使用：

export default {
		data() {
			return {
				shopInfo: [ ]
			}
		},
		onLoad() {
			this.getStuInfo()
		},
		methods: {
			async getStuInfo() {
				let data = {
					page: 1,  //页码
					lng: 113.123762,  //经度
					lat: 39.836312  //纬度
				}
				const result = await this.$api({
					url: '/v1/business/shop',
					data
				})
				this.shopInfo = result.data.data
				console.log(result.data.data);
			}
		}
	}

二、从本地选择文件

语法格式：uni.chooseFile(OBJECT)

uni.chooseFile({
        count: 最多可选择的文件数量,
        type: '所选的文件的类型',
        sourceType: ['album','camera'],
        success: ()=>{ }，
        fail：()=>{ }
})

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

1、选择图片：uni.chooseImage(OBJECT)

uni.chooseImage({
	count: 6, //最多可以选择的图片张数，默认9
	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
	sourceType: ['album'], //album 从相册选图，camera 使用相机，默认二者都有
	success: function (res) {   //成功则返回图片的本地文件路径列表 tempFilePaths
		console.log(JSON.stringify(res.tempFilePaths));
	}
});

2、预览图片：uni.previewImage(OBJECT)

uni.chooseImage({
	count: 6,   //最多选择的图片个数，默认是9
	sizeType: ['original', 'compressed'], //original表示原图，compressed表示压缩图
	sourceType: ['album','camera'], //album 从相册选图，camera 使用相机
	success: function(res) {
		uni.previewImage({  // 预览图片
			urls: res.tempFilePaths, //需要预览的图片链接列表
			longPressActions: {   //长按图片显示操作菜单，如不填默认为保存相册
				itemList: ['发送给朋友', '保存图片', '收藏'], //操作菜单项
				success: function(data) {
				console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
				},
				fail: function(err) {
					console.log(err.errMsg);
				}
			}
		});
	}
});

四、文件上传：uni.uploadFile(OBJECT)

uni.uploadFile({
        url：‘服务器 url’,  //上传文件服务器的地址，必须的参数
        files: '需要上传的文件列表'，//可以上传多个文件
        fileType：'文件类型'，//上传文件的类型。例如图片文件：image/png
        file： '要上传的文件对象'，//类似于input的type=file
        filePath： '要上传文件资源的路径'，
        formData： 'HTTP 请求中其他额外的 form data'，
        success：()=>{ }，
        fail：()=>{ }
})

五、文件下载：uni.downloadFile(OBJECT)

const downloadTask = uni.downloadFile({
	url: 'http://www.example.com/file/test', //仅为示例，并非真实的资源
	success: (res) => {
		if (res.statusCode === 200) {
			console.log('下载成功');
		}
	}
});
downloadTask.onProgressUpdate((res) => {
	console.log('下载进度' + res.progress);
	console.log('已经下载的数据长度' + res.totalBytesWritten);
	console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);

	// 满足测试条件，取消下载任务。
	if (res.progress > 50) {
		downloadTask.abort();
	}
});