mpvue或微信小程序實現獲取用戶登錄信息和openid

1. 在mpvue項目中實現獲取用戶登錄信息和openid：

<template>
<div class="home"  >	
	<div class="title" v-if="userName">
		歡迎登錄：<span class="name">{{userName}}</span>
	</div>	
	<div class="ceng" v-if="isCeng" @touchmove.stop.prevent="touchmovehandle">		
		<button @getuserinfo="getVxUserInfo" open-type="getUserInfo" v-if="!userName" class="btn">點擊微信授權</button>
	</div>
</div>
</template>

<script>
const appId="****"   //開發者appid
const secret="****"  //開發者AppSecret(小程序密鑰)	,登錄微信小程序平臺後-》開發-》開發設置-》開發者ID（AppSecret(小程序密鑰)	）生成

export default{
	data(){
		return{
			userName:"",
			isCeng:true,
			userinfo:{},  //存放用戶信息，保存在自己的數據庫中  		
		}
	},
	mounted(){
		this.isLogin()		
	},
	methods:{		
		getVxUserInfo(e){				
			if(e.target.userInfo){
				this.userName=e.target.userInfo.nickName;
				this.isCeng=false;
				this.isLogin()
			}else{
				this.userName="";
				this.isCeng=true;
			}	
		},		
		isLogin(){		
			var _this=this;
	        wx.getSetting({
	          success(res) {    	          	 
	            if (!res.authSetting['scope.userInfo']) {//未授權getUserInfo            	
	              wx.authorize({
	                scope: 'scope.getUserInfo',
	                success(res) {	                
	                  // 用戶已經同意小程序使用用戶信息，後續調用 wx.userInfo 接口不會彈窗詢問       
	                  console.log(res)
	                  _this.isCeng=false;
	                  _this.userName=res.target.userInfo.nickName;
	                  
	                },
	                fail(err){
	                 console.log(err)
	                }
	              })
	            }else{//已授權
	              wx.getUserInfo({
	                success(res) {	
	                	_this.loginOk(res)
	                },
	                fail(err) {
	                  console.log(err)
	                }
	              })
	            }
	          }
	        })
	    },
		touchmovehandle(){ //解決vue蒙層滑動穿透問題
			
		},		
		loginOk(res){  //登錄成功後的信息處理
			let _this=this;
			_this.userinfo.encryptedData=res.encryptedData;
	        _this.userinfo.iv=res.iv;
	        _this.userinfo.rawData=res.rawData;
	        _this.userinfo.signature=res.signature;
	        _this.userinfo.infos=res.userInfo;
	        _this.getOpenId()
	        _this.isCeng=false;
	        _this.userName=res.userInfo.nickName;
	        console.log(_this.userinfo)
		},
		getOpenId(){  //獲取用戶的openid
			let _this=this;
			wx.login({
			  success(res) {
			  	  	if (res.code) {
				      // 發起網絡請求
				      wx.request({
				        url: 'https://api.weixin.qq.com/sns/jscode2session',
				        data: {
				            appid:appId,  //開發者appid
				            secret:secret, //開發者AppSecret(小程序密鑰)	
				            grant_type:"authorization_code",  //默認authorization_code
				            js_code: res.code    //wx.login登錄獲取的code值
				        },
				        success(res) {
				        	_this.userinfo.openid=res.data.openid;
				        	_this.userinfo.session_key=res.data.session_key;						   
						}
				      })
				    } else {
				      console.log('登錄失敗！' + res.errMsg)
				    }
			  
			  }
			})
		}
	}
}
</script>

<style scoped>
.home{
	padding-bottom: 140rpx;
}
.btn{
	background:#CCCCCC;
	color: black;
	width: 60%;
}
	
.title{
	text-align: right;
	font-size: 15px;
	padding-right: 30rpx;
	padding-top: 30rpx;
}
.name{
	color: royalblue;
}
.ceng{
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0,0,0,0.8);
	z-index: 20;
	display: flex;
	align-items: center;	
	justify-content: center;
	flex-direction: column;
}

</style>