【微信小程序授权】获取用户手机号，昵称

<template>
    <view>
        <view v-if="show == true">
            <view>
                <view class='header' style="padding-bottom: 80upx;">
                    <image src='@/static/images/index/logo.jpg'></image>
                </view>
                <view class='content'>
                    <view>申请获取以下权限</view>
                    <text>获得您的公开信息(昵称，头像、手机号等)</text>
                </view>
                <button class='bottom' 
				v-if="phoneBtn == false"
				@click="getUserProfile"
				withCredentials="true" lang="zh_CN">
                    授权登录
                </button>
				<button v-else class="rightBtn" type="primary" open-type="getPhoneNumber"
					@getphonenumber="getPhone">获取手机号</button>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				show:false,
				code:'',
				encryptedData:'',
				iv:'',
				avatar:'',
				nickName:'',
				phoneBtn:false
            };
        },
		created() {
			
		},
		onLoad(options) {
			let that = this
			if(uni.getStorageSync('userInfo')){
				uni.reLaunch({
					url:'/pages/index/index'
				})
			}else{
				uni.hideLoading()
				that.show = true
			}
			// #ifdef MP-WEIXIN
			uni.login({
				provider: 'weixin',
				success(res) {
					that.code = res.code
				}
			})
			// #endif
		},
        methods: {
            //授权获取用户信息
			getUserProfile(e) {
				let that = this
				uni.getUserProfile({
					desc: '用于完善会员资料', 
					success: (res) => {
						// console.log(res,'获取的信息')
						that.nickName = res.userInfo.nickName						
						that.avatar = res.userInfo.avatarUrl
						that.phoneBtn = true
					}
				})
			},
			getPhone(e){
				let that = this
				that.encryptedData = e.detail.encryptedData
				that.iv = e.detail.iv	
				that.login()
			},
			login() {				
				let that = this;								
				// 将用户信息和登录code传递到后台
				uni.request({
					url: 'http://47.111.146.137:8080/gq/' +'api/wechatLogin',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						code:that.code,
						nickName:that.nickName,
						encryptedData:that.encryptedData,
						iv:that.iv,
						avatar:that.avatar
					},
					success: res => {
						if(res.data.code == 0){
							// uni.showToast({
							// 	title:'登录成功',
							// 	icon:'success'
							// })
							uni.showLoading({
								title:'登录中...'
							})
							uni.setStorageSync('isLogin',true)
							uni.setStorage({
								key:'userInfo',
								data:res.data.data
							})
							setTimeout(()=>{
								uni.reLaunch({
									url:'./index'
								})
							},2000)
							
						}
					}
				});			
            }
        }       
    }
</script>

<style lang="scss">
    .header {
        margin: 220rpx 0 0 50rpx;
        text-align: center;
        width: 650rpx;
    }

    .header image {
        width: 200rpx;
        height: 200rpx;
		border-radius: 10rpx;
    }

    .content {  
		padding-top: 50upx;
		border-top: 1px solid #f5f5f5;
        width: 90%;
	    margin: 0 auto;
        margin-bottom: 90rpx;
    }

    .content text {
        display: block;
        color: #9d9d9d;
        margin-top: 20rpx;
		font-size: 28rpx;
    }

    .bottom {
        border-radius: 80rpx;
        margin: 70rpx 50rpx;
        font-size: 35rpx;
		background-color: $uni-color-main;
		color: #fff;
    }
	.rightBtn{
		border-radius: 80rpx;
		margin: 70rpx 50rpx;
		font-size: 35rpx;
		color: #fff;
	}
</style>

// 其他页面判断是否授权

onShow(){
		let token = uni.getStorageSync('userInfo')
		if (!token) {
			uni.showModal({				
				title:'请登录',
				content:"您还没有登录,将无法正常使用功能,是否登录？",				
				success:function(res){				
					if (res.confirm) {
						uni.navigateTo({
							url:"/pages/index/getCode"				
						});	
					} else if (res.cancel) {
						uni.navigateTo({
							url:"/pages/index/index"				
						});
					}	
				},
			})
		}
	},

第二种 微信授权 登录 和 苹果账号登录

<!-- 登录按钮 -->
	<view class="loginButton-box">
		<!-- 微信授权登录 -->
		<button class="login-weixin" hover-class="touchOpacity" @click="weixinlogin" open-type="getPhoneNumber"
			bindgetphonenumber="_wxlogin">
			微信授权登录>
		</button>
		<!-- 苹果账号登录 -->
		<view class="login-apple" v-show="isShow" @click="toApple">苹果账号登录</view>
	</view>

weixinlogin() {
	if (!this.isallow) {
		uni.showToast({
			title: '请先同意用户协议',
			icon: 'none'
		});
		
		return
	}else{
		
		/* uni.login({
		  provider: 'weixin',
		  success: function (loginRes) {
		    console.log(loginRes.code);
		  }
		}); */
		
		
	}
	var that = this
	uni.getProvider({
		service: 'oauth',
		success: function(res) {
			console.log(res.provider);
			//支持微信、qq和微博等
			if (~res.provider.indexOf('weixin')) {
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						console.log("App微信获取用户信息成功", loginRes);
						//调用后端接口做登陆操作
						//that.wechatLoginFun(loginRes.authResult)
						wxlogin({
							code: loginRes.authResult.openid
						}).then(res => {
							console.log(res)
							if(res.code==2000){
								console.log(res, 'login')
								var loginInfo = res.data.data.access
								var Authorization = 'JWT ' + loginInfo
								// console.log(Authorization,'Authorization')
								uni.setStorageSync('Authorization',Authorization)
								uni.switchTab({
									url:"/pages/home/home"
								})
							}else if(res.code==301){
								
								console.log(11)
								
								uni.reLaunch({
									url:"../login/userLogin",
									fail(err) {
										console.log(err)
									}
								})
								
							}
							
							
						})
						
					},
					fail: function(loginRes) {
						console.log("App微信获取用户信息失败", res);
						//调用后端接口做登陆操作
						//that.wechatLoginFun(loginRes)
					}
				})
			}
		}
	});

},
// 苹果账号登录
toApple() {
	if (!this.isallow) {
		uni.showToast({
			title: '请先同意用户协议',
			icon: 'none'
		});
		return
	}
	console.log('点击了苹果账号登录')
	uni.login({
		provider: 'apple',
		scopes: "auth_user",
		success: function(loginRes) {
			console.log(loginRes)
			//登录成功

			uni.getUserInfo({
				provider: 'apple',
				success(res) {
					//获取用户信息成功
					console.log("App苹果账号登录获取用户信息成功", res)
				}
			})
		},
		fail: function(res) {
			console.log('苹果账号登录失败', res)
		}
	})
},