{ wx.getSetting({ success: res => { if (res.authSetting && res.authSetting['scope.userInfo']) { // 已经受权,能够直接调用 getUserInfo 获取头像昵称 wx.getUserInfo({ success: function (data) { console.log(data.userInfo); // { // avatarUrl: '微信头像img文件path' // nickname: '微信昵称' // } } }); } else { this.showShouquan = true; // 打开模态框进行受权 } } }); }
<template> <div> <!-- 这里采用vantui进行弹框,只不过把弹出框的button类型设置成了"getUserInfo",原理就是下面这个button <button wx:if="{{showShouquan}}" open-type="getUserInfo" bindgetuserinfo="getUserInfoFromWx">受权登陆</button> --> <van-dialog use-slot async-close :show="showShouquan" show-cancel-button confirm-button-open-type="getUserInfo" @close="cancelShouquan" @getuserinfo="getUserInfoFromWx"> <h4 class="wx-shouquan-title">微信受权</h4> <p class="wx-shouquan-content"> xxxxxxx小程序将得到您的微信头像、昵称等公开消息 </p> </van-dialog> <div> </template>
getUserInfoFromWx (e) { this.$store.state.user_userinfo = e.mp.detail.userInfo; this.showShouquan = false; }, cancelShouquan () { this.showShouquan = false; },