0. 引言
微信小程序为了优化用户体验,取消了在进入小程序时立马出现授权窗口。需要用户主动点击按钮,触发授权窗口。
那么,在我实践过程中,出现了以下问题。
1. 无法弹出授权窗口 2. 希望在用户已经授权的情况下,不显示按钮
1. 具体实现
app.js的onLaunch()函数中,添加获取用户个人信息的代码段。实现在用户已经授权的情况(例如第二次打开小程序时)下,自动获取用户个人信息,而不需要用户的授权。
// 获取用户信息 wx.getSetting({ success: res => { if (res.authSetting['scope.userInfo']) { console.log("app: " + "用户已经授权") // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框 wx.getUserInfo({ success: res => { // 可以将 res 发送给后台解码出 unionId this.globalData.userInfo = res.userInfo console.log(this.globalData.userInfo) this.globalData.hasUserInfo = true // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回 // 所以此处加入 callback 以防止这种情况 if (this.userInfoReadyCallback) { this.userInfoReadyCallback(res) } }, fail: (res) => { console.log("app: " + "获取用户信息失败") } }) }else { console.log("app: " + "用户暂时未授权") } } })
me.wxml中添加授权按钮(具体的页面根据大家的实际情况)。
<block wx:if="{{!hasUserInfo}}"> <image class="userAvatar" src='../../images/icon/wechat.png'></image> <button open-type="getUserInfo" bindgetuserinfo="getUserInfo">微信授权登录</button> </block>
me.js中添加如下变量和方法,在用户之前没有授权的情况下,需要用户主动点击按钮。
data: { userInfo: null, hasUserInfo: false }, getUserInfo: function(e) { console.log("me: " + "用户点击授权") if(e.detail.userInfo){ this.setData({ userInfo: e.detail.userInfo, hasUserInfo: true }) } }
2. 无法弹出授权窗口
这里一定要注意
授权窗口只会在用户第一次授权时出现,也就是,只会出现一次!!
在微信小程序开发工具里,需要我们清除所有缓存
3. 已经授权的情况下,不显示按钮
由于用户已经授权的时候,app.js会获取用户个人信息(而不是在),但是这个过程是异步的