移动端——uniapp开发记录(公共请求request封装)

移动端开发需要兼容各个端,技术栈选用vue2+uniApp；

1.项目初始化
可以使用IDE(HBuilderX)去初始化项目，也可以使用npm命令去构建实现不依赖uniapp去打包部署;【详细见官网】

2.移动端防止页面双击变大，在index.html页面使用：

   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

3.移动端CSS,使用flex布局
4.请求封装，uniapp.request()
公共请求封装：

import $store from '../../store/index.js';
export default {
	//全局配置
	common: {
		// #ifdef H5 
		//仅在H5使用
		baseUrl: "",
		// #endif
		baseUrl: "",
		header: {
			'Content-Type': 'application/json;charset=UTF-8',
		},
		data: {},
		method: 'GET',
		dataType: 'json', //设为 json，会尝试对返回的数据做一次 JSON.parse
		token: true
	},
	//请求返回Promise对象
	request(options = {}) {
		//参数处理整合
		options.url = this.common.baseUrl + options.url
		options.header = options.header || this.common.header
		options.data = options.data || this.common.data
		options.method = options.method || this.common.method
		options.dataType = options.dataType || this.common.dataType
		options.token = options.token == false ? false : this.common.token
		//请求
		return new Promise((res, rej) => {
			// 请求之前看下token标识，登录接口是不需要token(token=false)，此标识将token验证过滤
			if (options.token) {
				let token = $store.state.token
				// 往header头中添加token
				options.header["token"] = token
				if (!token) {
					uni.showToast({
						title: '请先登录并授权',
						icon: 'none'
					});
					// token不存在时跳转
					uni.navigateTo({
						url: '/pages/login/login',
					});
					return rej("请先登录")
				}
			}
			//发送请求
			uni.request({
				...options,
				success: (result) => {
					//因为后端返回结果不同意此处没法弄直接返回害
					return res(result)
				},
				fail: (error) => {
					uni.showToast({
						title: error.errMsg || '请求失败',
						icon: 'none'
					});
					return rej(error)
				}

			})
		})
	},
	// get请求
	get(url, data = {}, options = {}) {
		options.url = url
		options.data = data
		options.method = 'GET'
		return this.request(options)
	},
	// post请求
	post(url, data = {}, options = {}) {
		options.url = url
		options.data = data
		options.method = 'POST'
		return this.request(options)
	},
	// put请求
	put(url, data = {}, options = {}) {
		options.url = url
		options.data = data
		options.method = 'PUT'
		return this.request(options)
	},
	// delete请求
	delete(url, data = {}, options = {}) {
		options.url = url
		options.data = data
		options.method = 'DELETE'
		return this.request(options)
	},
}

公共请求使用：
main.js中引用

import $Http from './request.js'; //封装请求路径

Vue.prototype.$Http = $Http

    getData() {
      this.$Http
        .get(
          "你的url",
          {
            param:'需要传递的参数',
          },
          {
            header: {
              "Content-Type": "application/x-www-form-urlencoded",
            },
          }
        )
        .then((res) => {
       	  console.log(res)
          if (res.statusCode == 200) {
            //成功需要做的事情
          }
        });
    },

5.长按与单击事件，标记使事件变为互斥使事件独立不受影响；

主要代码如下：

<template>
	<view @longpress="longpress()" @click="click()" @touchend="touchend">
	<text>点击触发</text>
	</view>
</template>
<script>
export default {
data() {
		return {
			islongPress: false //长按记录变量
		};
	},
	methods: {
	longpress() {
				console.log('长按事件');
				this.islongPress = true;
				uni.showModal({
					title: '操作',
					content: '是否需要取消？',
					success: res => {
						if (res.confirm) {
							console.log('用户点击确认');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
		},
		click() {
			if (this.islongPress) return;
			//点击事件去跳转到视频播放页
			console.log();
		},
		touchend() {
			//延时执行为了防止 click() 还未判断 islongPress 的值就被置为 fasle
			setTimeout(() => {
				this.islongPress = false;
			}, 200);
		}
	}
</script>

多看官网文档，你想要的文档都有，后续有值得分享的在更新吧。