Uniapp（4）登录页静态+https请求前置配置

       在我的页面点击进行登录跳转登录页面进行

登录页的点击登录按钮为u-button

<u-button type="primary" class="InfoSubmit" @getphonenumber="getPhone" openType="getPhoneNumber"   id="getPhone">微信一键登录</u-button>

点击调用    uni.login({
                    success: res => {
                        //获取用户登录的code值
                        if (res.code) {
                            this.params = {
                                code: res.code
                            }
                            console.log(res.code);
                            this.codestatus=false
                        }
                    }
                })

在通过getphonenumber手动唤起用户同意获取登录用手机号

----------------------------

1、安装 luch-request封装请求

luch-request - DCloud 插件市场

2、配置环境变量config.js

// 环境变量类型,值为：dev、test、beta、prod
export const ENVIRONMENT_TYPE = 'prod' // 只需有手动修改环境
export const XCXVERSION = '0.0.1' // 小程序版本号
const environmentObj = {
	dev: {
		XCXVERSION,
		ENVIRONMENT_TYPE: 'dev', // 开发站
		BASE_URL: '', // 开发地址
		OSS_URL: '' // oss地址
	},
	test: {
		XCXVERSION,
		ENVIRONMENT_TYPE: 'test', // 测试站
		BASE_URL: '', // 测试环境 
		OSS_URL: '' // oss地址
	},
	prod: {
		XCXVERSION,
		ENVIRONMENT_TYPE: 'prod', // 正式站
		BASE_URL: '', // 接口请求地址
		OSS_URL: '' // oss地址
	}
}

export const {
	BASE_URL,
	OSS_URL
} = environmentObj[ENVIRONMENT_TYPE]

const config = {
	base_url: BASE_URL
}

export {
	config
}

3、创建httpServer文件 创建基础请求体

// 局部修改配置，局部配置优先级高于全局配置
import {
	config
} from './config.js'


// luch-request封装请求
// import Request from '@/utils/luch-request/index.js'
import Request from '@/utils/luch-request/luch-request/index.js'
export const requestHttp = new Request()

class HTTP {
	constructor() {
		this.baseUrl = config.base_url
		this.loadingCount = 0 
// 多个接口同时请求 关闭loading
	}

	request({
		url,
		data = {},
		contentType,
		method = 'POST'
	}) {
		uni.showLoading({
			icon: 'loading',
			title: '加载中'
		})
		this.loadingCount++
		return new Promise((resolve, reject) => {
			this._request(url, resolve, reject, 
data, contentType, method)
		})
	}

	/**
	 * @func 封装请求函数
	 * @param {*} url 请求地址 可以是restful 也可以是graphql
	 * @param {*} data 请求参数
	 * @param {*} method 请求方式
	 * @author fbl
	 */
	_request(url, resolve, reject, data = {}, contentType, method = 'GET') 
{
		let header = {}
		let authToken = uni.getStorageSync("authToken") 
// 在本地缓存中获取token
		header['Content-Type'] = contentType
		if (authToken) {
			if (!header || !header["token"]) {
				header["token"] = authToken
			}
		}
		// 登录接口特殊处理
		if (url === '') {
			if (authToken) {
				if (!header || !header["token"]) {
					header["token"] = authToken
				}
			} else {
				header["token"] = '123'
				header['Content-Type'] = contentType
			}
			console.log('请求头', header);
		}
		requestHttp.request({
			method: method, // 请求方法必须大写
			url: `${this.baseUrl}${url}`,
			data: data,
			timeout: 15000, // 15秒超时 仅微信小程序（2.10.0）、支付宝小程序支持
			header: header
		}).then(res => {
			uni.hideLoading()
			// console.log(res);
			if (+res.statusCode === 200) {
				if (res.data.success == true) {
					setTimeout(() => {
						if (res.data.data) {
							resolve(res.data.data)
						} else {
							resolve(res.data)
						}
					}, 20)
				} else if (+res.data.code == 4002) {
					uni.showModal({
						title: '提示',
						content: '未检测到账号信息,请先登录!',
						success: function(res) {
							if (res.confirm) {
								uni.login({
									success(res) {
										uni.setStorageSync('wxCode', res.code);
									}
								})
								uni.redirectTo({
									url: '/pages/login/loginIndex'
								})
							} else if (res.cancel) {
								uni.showToast({
									title: '您点击了取消',
									icon: 'none',
									duration: 2000
								})
							}
						}
					})
				} else {
					setTimeout(() => { 
// 真机 防止关闭hideloading 把toast也一同关闭
						uni.showToast({
							title: res.data.msg || '网络繁忙',
							icon: 'none'
						})
					}, 500)
					reject(res)
				}
			} else {
				reject()
				this._show_error('网络繁忙')
			}
		}).catch((err) => {
			reject()
			console.log(err, 'catch接口异常！！！')
			// 请求超时
			if (err.data === 'loginTimeOut') {
				uni.hideLoading()
				this._show_error('请求超时！')
			}
			if (err.errMsg == "request:fail timeout") {
				uni.hideLoading()
			}
		}).finally(() => {
			this.loadingCount--
			if (!this.loadingCount) {
				// console.log('item1')
				uni.hideLoading()
			}
		})
	}
	_show_error(_message) {
		uni.showToast({
			title: `${_message}`,
			icon: 'none',
			duration: 2000
		})
	}
}

const http = new HTTP()
export default http