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>