uni-app

 最近在做一个小项目，使用到了uniApp，也是新手一枚，记录踩到的一些坑

uni-app 是一个使用 Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

开始之前，开发者需先下载安装如下工具：

• HBuilderX：官方IDE下载地址

HBuilderX是通用的前端开发工具，相关教程官网写的非常清楚，有需要自行进去查看，这是他们的官网uniapp官网。

1.封装request

前端在调用接口的时候一个一个写很麻烦,所以使用封装比较方便

在根目录下创建request.js文件存放封装代码，如下：

request.js文件

let baseURL='https://xxx.com/' // 服务器地址

function myRequest(options) {
	let headers = {}
	var Token = uni.getStorageSync('token'); 
    // uni.getStorageSync(KEY) 从本地缓存中同步获取指定 key 对应的内容。
	headers['Authorization'] = Token; // 全局加上token
	headers["Content-Type"] = "application/json";
	return new Promise((res, rej) => {
		uni.request({
			url: baseURL + options.url,
			method: options.method || 'GET', // 默认是get请求
			data: options.data, // 需要传的参数
			header: headers, 
			success(data) {
				res(data)
			},
			fail() {
				rej()
			}
		})
	})

}
export default myRequest;

封装好就导出，在main.js文件导入，即可在全局使用

main.js文件

import Vue from 'vue'
import App from './App'
import myRequest from 'request.js' // 导入封装的request

Vue.config.productionTip = false
Vue.prototype.$myRequest = myRequest

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

在想要用接口的页面使用this.$myRequest调用即可，如下例子：

        onLoad() {
			this.publishEvent()
		},
		methods: {
			publishEvent() {
				this.$myRequest({
					method: 'POST',
					url: '/api/xxx',
					data: this.clubForm  // 传参 
				}).then(res=>{
					uni.showToast({
					    title: '成功',
					    duration: 5000
					})
					uni.switchTab({
						url:"../my/my"
					})
				})
			},
        }