在mpvue中獲取openid
<template>
<div>
<div class='up' v-if="true">...
</div>
<div v-if="isCeng" @touchmove.stop.prevent="touchmovehandle">
<div class="modal-mask">
</div>
<div class="modal-dialog">
<div class="modal-content">
<img class="img" src="../../../static/icon/school.jpg">
<div class="content-text">
<p class="key-bold">歡迎來到--哈師大智行校園</p>
<p class="key-bold">哈師大智行校園</p>
<p class="little-tip">祝你有個愉快的體驗:</p>
<p class="little-content">
哈師大智行校園簡介
</p>
<p class="little-content">
</p>
</div>
</div>
<button
class="btn" open-type="getUserInfo" @getuserinfo="getUserInfo">
授權登錄
</button>
</div>
</div>
</div>
</template>
<script>
const appId="wxe6e2ddc060fa2387"
const secret="5cdc17198d139831e1e1011552deb43b"
export default {
data() {
return{
userName:"",
isCeng:true,
userinfo:{
avatarUrl:'',
nickName:'',
gender:'',
city:'',
country:''
},
}
},
mounted(){
this.isLogin()
},
methods:{
getVxUserInfo(e){
if(e.target.userInfo){
this.userName=e.target.userInfo.nickName;
this.isCeng=false;
this.isLogin()
const db = wx.cloud.database()
db.collection('user').add({
data: {
avatarUrl: userInfo.avatarUrl,
nickName: userInfo.nickName,
gender: userInfo.gender,
city: userInfo.city,
country: userInfo.country
}
})
}else{
this.userName="";
this.isCeng=true;
}
},
isLogin(){
var _this=this;
wx.getSetting({
success(res) {
if (!res.authSetting['scope.userInfo']) {
wx.authorize({
scope: 'scope.getUserInfo',
success(res) {
console.log(res)
_this.isCeng=false;
_this.userName=res.target.userInfo.nickName;
console.log(_this.userName)
},
fail(err){
console.log(err)
}
})
}else{
wx.getUserInfo({
success(res) {
_this.loginOk(res)
console.log(_this.userName)
},
fail(err) {
console.log(err)
}
})
}
}
})
},
touchmovehandle(){
},
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;
},
getOpenId(){
let _this=this;
wx.login({
success(res) {
if (res.code) {
wx.request({
url: 'https://api.weixin.qq.com/sns/jscode2session',
data: {
appid:appId,
secret:secret,
grant_type:"authorization_code",
js_code: res.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>
.modal-mask {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
opacity: 0.5;
overflow: hidden;
z-index: 9000;
color: #fff;
}
.modal-dialog {
box-sizing: border-box;
width: 560rpx;
overflow: hidden;
position: fixed;
top: 30%;
left: 0;
z-index: 9999;
background: #fff;
margin: -150rpx 95rpx;
border-radius: 16rpx;
}
.modal-content {
box-sizing: border-box;
display: flex;
padding: 0rpx 53rpx 50rpx 53rpx;
font-size: 32rpx;
align-items: center;
justify-content: center;
flex-direction: column;
}
.content-tip {
text-align: center;
font-size: 36rpx;
color: #333333;
}
.content-text {
height:130px;
padding:10px 0px 50px 0px;
font-size:14px;
}
.modal-footer {
box-sizing: border-box;
display: flex;
flex-direction: row;
border-top: 1px solid #e5e5e5;
font-size: 16px;
font-weight:bold;
height: 45px;
line-height: 45px;
text-align: center;
background: #FFB6C1;
}
button {
width: 100%;
background:#FFB6C1;
color:#FFFFFF;
font-weight:bold;
}
.img {
width: 280px;
height:90px;
}
.little-tip {
padding-top:15px;
padding-bottom:3px;
font-size: 14px;
font-weight:bold;
color: #feb600;
}
.little-content {
padding-top:5px;
font-size: 11px;
color:#606060;
}
.key-bold {
padding-top:5px;
font-size: 14px;
font-weight:bold;
}
</style>