uniapp简易封装request请求

一、创建httpRequest.js文件

// const baseUrl = "http://127.0.0.1:8080/";
const baseUrl = 'https://xxx.online/prod-api/'
export const request = (url,method,data) =>{
	return new Promise((resolve,reject) =>{
		uni.request({
			url: baseUrl + url,
			data: data,
			method: method,
			header: {
				token: uni.getStorageSync('token')!= null ? uni.getStorageSync('token'): ''
			},
			success: (res) => {
				resolve(res)
			},
			fail: (error) => {
				reject(error)
			}
		})
	})
}

export default request

二、main.js文件引入request

import Vue from 'vue'
//httpRequest,js文件创建在utils文件夹下
import {request} from "./utils/httpRequest.js"
Vue.prototype.request = request

三、页面调用(微信小程序最新登录方式—选择+填写昵称)

<template>
	<view>
		<view>
			<view style="margin-top: 100rpx;background-color: aquamarine;">
			</view>
		    <!-- 获取头像 -->
		    <view style="margin-top: 50rpx;">
		        <button class="avatar-button" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
		            <image :class="avatarUrl ==''?'avatar-img':'' " :src="avatarUrl"></image>
		        </button>
		    </view>
		    <!-- 输入用户名 -->
		    <view class="nickname-code">
		        <view class="nickname-title">昵称:</view>
		        <input style="text-align: center;width: 80%;" type="nickname" @blur="getNickName" placeholder="请输入微信昵称"/>
		    </view>
			<view class="login-btn">
			    <button  class="btn-normal" style="background: #4059f8;" :disabled="avatarUrl == ''? true:false" @click="doLogin()">授权登录</button>
			</view>
		</view>
		<view>
			<!-- 登录弹框 -->
			<u-popup :show="phoneModalShow" mode="center" border-radius="14" >
				<view class="sq_box">
					<view>授权登录</view>
					<view>授权获取您的手机号</view>
					<view>
						<view class="agreement_warp">
							<view>登录代表您已同意</view>
							<view @click="agreenmentDetailHandle" style="color: #ff431e;">隐私政策</view>
						</view>
						<u-button style="width: 100%;"  type="success"
							@getphonenumber="getphonenumber" open-type="getPhoneNumber">
							微信快捷授权登录
						</u-button>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
    export default {
        data() {
            return {
				userRawData:{},
				LoginCodeMsg:{},
				// 手机号隐藏层
				phoneModalShow: false, 
                // 头像
                avatarUrl: '',
                // 用户名
                nickname: '',
                // 登录 code
                logCode: "",
				isLogin: false,
				userInfo:{}
            }
        },
		
        onLoad() {
        },
        methods: {
			// 跳转到 隐私政策页面
			agreenmentDetailHandle() {
				uni.navigateTo({
					url: '/pages/mine/agreement'
				})
			},
			//获取用户昵称
			getNickName(e){
				console.log(e.target.value)
				this.nickname = e.target.value
				this.userInfo.nickName = this.nickname
			},
			//调用微信登录
            doLogin(){
				uni.login({
					provider:'weixin',
					success: (logRes) => {
						console.log(logRes.code)
						this.logCode = logRes.code
						let url = 'wx/code/' + logRes.code
						this.request(url,"POST",null).then(res =>{
							if(res.data.code == 200){
								this.userInfo.openId = res.data.openId
								this.LoginCodeMsg.openId = res.data.openId
								this.LoginCodeMsg.sessionKey = res.data.sessionKey
								this.phoneModalShow = true;
							}else{
								uni.showToast({
									title: '微信登录失败',
									icon: 'none'
								})
							}
						})
					},
				})
			},
            //获取用户头像
            onChooseAvatar(e) {
                this.avatarUrl = e.detail.avatarUrl
				console.log(e.detail.avatarUrl)
				this.userInfo.avatarUrl = e.detail.avatarUrl
            },
			//获取手机号
			getphonenumber(e){
				let phoneMsg = {
					encryptedData: e.detail.encryptedData,
					iv: e.detail.iv,
					openId: this.LoginCodeMsg.openId,
					sessionKey: this.LoginCodeMsg.sessionKey,
					avatar: this.userRawData.avatarUrl,
					nickName: this.userRawData.nickname,
					sex: ''
				}
				this.request('wx/login','POST',phoneMsg).then(res =>{
					this.phoneModalShow = false
					if(res.data.code == 200){
						this.isLogin = true
						uni.showToast({
							title:'登录成功',
							icon:'none'
						})
						this.userInfo.level = res.data.busInfo.userType
						console.log(JSON.stringify(this.userInfo))
						console.log(JSON.stringify(res.data.busInfo))
						//缓存登录状态和用户信息
						this.userInfo.token = res.data.token
						uni.setStorageSync('isLogin','true')
						// this.$store.state.busInfo = res.data.busInfo;
						// this.$store.state.hasLogin = this.isLogin;
						// this.$store.state.userInfo = this.userInfo;
						// this.$store.state.token = res.data.token;
						//将当前代理的个人信息存入缓存中
						uni.setStorageSync('busInfo',res.data.busInfo)
						setTimeout(function (){
							uni.navigateBack()
						},2000)
					}else{
						uni.showToast({
							title:'登录失败',
							icon:'error',
							duration:2000
						})
					}
				})
			},
        }
    }
</script>
<style>
    page {
        background-color: #fff;
    }
</style>
<style lang="scss" scoped>
	
    // 用户头像
    .avatar-button {
        width: 120rpx;
        padding: 0;
        border-radius: 50%;
        margin: 30rpx auto 0 auto;

        image {
            width: 120rpx;
            height: 120rpx;
            border-radius: 50%;
            display: block;
            border: 4rpx solid #d8bf9f;
        }
    }

    .avatar-img {
        z-index: 3;
        position: relative;

        &:before {
            content: '请选择头像';
            position: absolute;
            top: 0;
            left: 0;
            width: 120rpx;
            height: 120rpx;
            // line-height: 40rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-size: 25rpx;
            background-color: rgba(130, 128, 127, 0.5);
            z-index: 4;
        }
    }

    //用户昵称
    .nickname-code {
        display: flex;
        align-items: center;
        padding: 60rpx 20rpx 20rpx 20rpx;
        margin-top: 40rpx;
        background-color: #ffffff;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
        // border-radius: 50rpx 50rpx 0 0;

        .nickname-title {
            // font-size: 50rpx;
            // color: #9e794b;
            margin-right: 15rpx;
        }

        .weui-input {
            flex: 1;
            color: #9e794b;
            font-size: 40rpx;
        }
    }
	
	
	.login-btn {
	  padding: 0 20rpx;
	}
	
	.login-btn button {
	  background: #23ac3a;
	  border-radius: 999rpx;
	  color: rgb(255, 255, 255);
	  font-size: 30rpx;
	  height: 88rpx;
	  line-height: 88rpx;
	  text-align: center;
	  margin-top: 60rpx
	}
	
.sq_box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		margin: 5% 0;
		width: 700rpx;
		height: 300rpx;
	}

	.sq_name {
		margin: 40rpx;
		font-weight: bold;
		font-size: 32rpx;
	}

	.sq_msg {
		font-size: 30rpx;
		color: #606266;
		text-align: left;
	}

	.fontsize {
		font-size: 34rpx;
	}

	.btn_warp {
		position: absolute;
		bottom: 20rpx;
		left: 0;
		width: 100%;
		height: 150rpx;
		/* background-color: #7DCC7C; */
	}

	.agreement_warp {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #999999;
		margin: 20rpx 0;
	}

	
</style>