uni-app微信小程序授权登录详解(带注释)

整体概括：引导用户点击授权获取用户信息.、微信一些规则请前往微信中查看，不做过多说明.

授权目的：1获取用户信息，2部分接口需要用户同意授权才可以调用。

方式：使用 button 组件，并将 open-type 指定为 getUserInfo 类型，获取用户基本信息。(还有一种open-type为getPhoneNumber可以获取用户手机号码,但是此方法需要用户授权两次，因为此方法只能获取用户电话号码，你如果需要获取用户头像和名称需要调用getUserInfo，这就导致用户会有2次授权的操作个人觉得体验不是很好，因此解决办法就是只获取用户头像和名称,手机号在用户登录后需要去修改资料页面自己填写，当然不填写也不影响对小程序的浏览，只是部分功能需要手机号而已.)
以上方式在每次做开发都会给客户说明并让其选择，所以这个问题不是大问题就不细说，如果有大佬能指教一二，不胜感激！

此处演示仅为button按钮的open-type为getUserInfo

特别说明：：获取登录临时code

为啥要特别说明呢 因为我第一次开发的时候后端开发就说我的数据不对，一直不知道啥情况，直到看见微信上的这句话，

我的解决办法就是直接在onload获取就完事了。

一 引导用户进行授权

引导用户进行授权，声明按钮并将open-type指定为getUserInfo

二 同意授权进入回调

当用户点击按钮后会进入getUserInfo的回调，回调携带参数
到这里就进入到关键了，不管用户点击同意授权还是拒绝授权都会进入到这个回调中。因此你需要获取用户设置来验证是否同意授权。

三 获取用户设置

如果用户已经授权返回true 反之没授权返回false。接下来就是同意授权的操作了，同意授权将你服务器需要的参数进行组装访问接口即可，将返回的数据保存本地，或者全局变量中，来确保登录状态。接下来附上全部代码.

<template>
	<view class="login">
		<button class="wxq-btn loginWx" open-type="getUserInfo" @getuserinfo="getUserInfo">一键登录</button>
		<button class="wxq-btn goback">取消登录</button>
		<button open-type=""></button>
	</view>
	
</template>

<script>
	 import {  
	        // mapState,  
	        mapMutations  
	    } from 'vuex';  
	export default{
		  // computed: {  
		  //           ...mapState(['userInfo'])
		  //       },
		data(){
			return{
				code:'',//微信临时登录凭证
			}
		},
		onLoad:function(){
			uni.login({
				success: (res) => {
					if (res.errMsg == "login:ok") {
						this.code = res.code;
					} else {
						uni.showToast({
							title: '系统异常，请联系管理员!'
						})
					}
				}
			})
		},
		methods:{
			...mapMutations(['login']),
			//微信授权登录
			getUserInfo(e){
				let that = this;
				var p = this.getSetting();
				p.then(function(isAuth) {
					console.log('是否已经授权', isAuth);
					if (isAuth) {
						console.log('用户信息，加密数据', e);
						//eData  包括//微信头像//微信名称 还有加密的数据.
						let eData = JSON.parse(e.detail.rawData);
						//接下来就是访问接口.
						uni.request({
							header: {
								'content-type': 'application/x-www-form-urlencoded'
							},
							url: '', //你的接口地址
							method: 'POST',//接口类型 
							data: '', //接口需要的数据
							success: function(res) {
								console.log(res);
								if (res.data.Success) {
									that.login(res.data); //将接口返回的数据保存在全局变量中.
									//登录成功跳转首页或者你想跳转的地方... 
									//注意：如果时导航页 请用uni.switchTab
									// 		其他页面建议使用uni.reLaunch
								} else {
									uni.showToast({
										title: '授权登录失败！',
										mask: true,
										icon: 'none'
									})
								}
				
				
							}
				
						})
					} else {
						uni.showToast({
							title: '授权失败，请确认授权已开启',
							mask: true,
							icon: 'none'
						})
					}
				});
			},
			//获取用户的当前设置
			getSetting() {
				return new Promise(function(resolve, reject) {
					uni.getSetting({
						success: function(res) {
							if (res.authSetting['scope.userInfo']) {
								console.log('存在');
								resolve(true);
							} else {
								console.log('不存在');
								resolve(false);
							}
						}
					})
				}).catch((e) => {
					console.log(e)
				});;
			},
		},
		
		
	}
</script>

<style>
	.login{
		width: 750rpx;
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.goback{
		width: 90%;
		background:#eee;
		color: #333;
		margin-bottom: 24rpx;
	}
	.loginWx{
		width: 90%;
		background: #04BE02;
		margin-bottom: 24rpx;
	}
</style>

这里面用到了登录成功后利用vuex全局保存登录状态，下篇文章就会说到全局保存的方式方法以及详解。

如代码有问题或错误，请在留言中指出问题，在此我先谢过了！