<image v-if="userInfo.photo!=''" mode="aspectFit" :src="userInfo.photo" class="avatar vam"/>
<image v-else mode="aspectFit" src="/static/images/avatar.png" class="avatar vam"/>
<text class="vam marl20 fz32">{{userInfo.nick_name}}
<van-button class="marl10 hide" type="default" v-if="canIUse&& !hasAvator" open-type="getUserInfo" size="mini" @getuserinfo="bindGetUserInfo">微信昵稱頭像</van-button>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
js部分:
getWxAvatar(){//獲取微信昵稱和頭像
? let that=this;
? let userInfo = wx.getStorageSync('userInfo');
? console.log(userInfo);
? if(userInfo && userInfo.hasOwnProperty('photo')){
this.userInfo=userInfo;
? ? if(userInfo.photo !=''){
this.hasAvator=true;
? ? }
}else if (this.canIUse){
// 由于 getUserInfo 是網(wǎng)絡(luò)請求颜及,可能會在 Page.onLoad 之后才返回
// 所以此處加入 callback 以防止這種情況
? ? app.userInfoReadyCallback = res => {
let userinfo=res.userInfo;
? ? ? console.log(userinfo);
? ? ? userinfo.photo=userinfo.avatarUrl;
? ? ? userinfo.nick_name=userinfo.nickName;
? ? ? that.userInfo=userinfo;
? ? ? that.hasAvator=true;
? ? ? wx.setStorageSync('userInfo',userinfo);
? ? }
}else{
// 查看是否授權(quán)
? ? wx.getSetting({
success (res){
if (res.authSetting['scope.userInfo']) {
// 已經(jīng)授權(quán)祸憋,可以直接調(diào)用 getUserInfo 獲取頭像昵稱
? ? ? ? ? wx.getUserInfo({
success:function(res) {
let userinfo=res.userInfo;
? ? ? ? ? ? ? console.log(userinfo);
? ? ? ? ? ? ? userinfo.photo=userinfo.avatarUrl;
? ? ? ? ? ? ? userinfo.nick_name=userinfo.nickName;
? ? ? ? ? ? ? that.userInfo=userinfo;
? ? ? ? ? ? ? that.hasAvator=true;
? ? ? ? ? ? ? wx.setStorageSync('userInfo',userinfo);
? ? ? ? ? ? }
})
}
}
})
}
},
bindGetUserInfo (event) {
let userinfo=event.mp.detail.userInfo;
? userinfo.photo=userinfo.avatarUrl;
? userinfo.nick_name=userinfo.nickName;
? this.userInfo=userinfo;
? this.hasAvator=true;
? wx.setStorageSync('userInfo',userinfo);
},