vue开发微信小程序用户授权和手机授权（UNI开发）

vue开小程序 用户授权，手机授权
**1.vue页面的两个点击事件 **

<view class="text-area">
			<button  open-type="getPhoneNumber" @click="getInfo" >微信用户授权一键绑定</button>//1.为用户授权点击事件
			<button  open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信手机号一键绑定</button>//2.为手机授权点击事件
			<view  v-show="isAuthFlag" >
			</view>
		</view>

2.vue逻辑中methods

	getInfo(){//用户授权获取个人信息弹框  
		console.log("获取个人信息")
		wx.getUserProfile({
			lang:"zh_CN",
		    desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
		    success: (res) => {
		         console.log(res,"res")
				 this.wxLogin(res, 1)//wxLogin（）调用的方法执行uni.login(OBJECT)授权登录
		    },
			fail:(err)=>{
				uni.showToast({
					title: "您取消了授权,登录失败",
					icon: "none"
				});
				return false;
				console.log(err,"err")
			}
		})
	},	

	getPhoneNumber(res){//手机授权获取手机弹框
			console.log("-------用户授权，手机号------");
			console.log(res);
			this.wxLogin(res.detail,2)//wxLogin（）调用的方法执行uni.login(OBJECT)授权登录
			if (!res.detail.iv) {
			 	uni.showToast({
					title: "您取消了，手机授权",
					icon: "none"
		 		});
			 	return false;
			}
	},
	
// 获取 jscode
	wxLogin(data, type) {
		 let that = this;
		uni.login({//uni.login是第三方登录的，需要自己提交到自己服务器然后自己服务器向微信服务器获取openid之类的用户信息
			provider: "weixin",
			success: function(loginRes) {
				console.log("-------获取code-------");
				console.log(loginRes.code);
				that.getUserProfile({//用户解密传参，可用与接口传参    原因后端需要获取登陆的，用户信息，手机信息两种方式
					encryptedData: data.encryptedData,
					iv: data.iv,
					jsCode: loginRes.code,
					type: type
				});
			}
		});
	},
	/*
		解码用户数据
		type : 1 解码用户信息   2 解码手机号信息  
	*/ 
	getUserProfile(data) {//解码方法
		console.log(data);//参数
		// appletAuth(data).then(res => {//appletAuth为vue封装的接口引入的 ，在此位置可以自行设置，自己需要调用的接口 
		// 	console.log("------解密后用户信息------", res);
		// 	console.log(res.data);
		// 	console.log(res.data.nickname);
		// 	this.userInfo.nickname=res.data.nickname;
		// 	this.userInfo.headImgUrl=res.data.headImgUrl;
		// 	console.log(this.userInfo.nickname);
		// 	console.log(this.userInfo.headImgUrl);
		// 	if (res && res.code == 0) {
		// 		uni.setStorageSync("userInfo", res.data);//uni数据缓存用户
		// 			if (data.type == 2) {
		// 			   uni.setStorageSync("phoneNumber", res.data.phoneNumber);//uni数据缓存手机
		// 			  }
		// 		this.isAuth();//isAuth为一个方法触发功能，用于遮盖层的点击事件触发，此方法在底部详解
		// 	} else {
		// 		this.isAuth();
		// 	}
			
		// });
	},
	
	isAuth() {//判断方法
		var that= this

		if (!uni.getStorageSync("userInfo")) {
			console.log("没有用户信息");
			this.isAuthFlag = true;
			this.isUser = true;
			console.log('this.canIUseGetUserProfile',this.canIUseGetUserProfile,this.isUser)
			
			this.isPhone = false;
		} else {
			if (!uni.getStorageSync("phoneNumber")) {
				console.log("有用户信息,没有手机号");
				this.isAuthFlag = true;
				this.isUser = false;
				this.isPhone = true;
				//that.isMemberFu(uni.getStorageSync("userInfo"));
				// 		that.$parent.userInfo =uni.getStorageSync("userInfo")
			} else {
				
				console.log("有用户信息,有手机号");
				 //this.getMemberFu(uni.getStorageSync("userInfo"));
				this.isAuthFlag = false;
				this.$parent.text=uni.getStorageSync("phoneNumber");
				that.isMemberFu(uni.getStorageSync("userInfo"));
			}

		}
	},

1.在页面中只会出现两个按钮功能分别是，

1.获取用户信息,有弹框需要选择
2.获取手机信息,有弹框需要选择
3.相互独立可以使用模态框，连接用户信息和手机信息
4.this.isAuth();可以使用模态框控制，用户信息和手机信息分别弹出，
5.并不完整需要自行添加，显示隐藏