微信小程序 调用微信授权窗口相关问题解决

引言

微信小程序为了优化用户体验，取消了在进入小程序时立马出现授权窗口。需要用户主动点击按钮，触发授权窗口。

那么，在我实践过程中，出现了以下问题。

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中添加授权按钮（具体的页面根据大家的实际情况）。这里的button组件必须按照如下的形式。

<button open-type="getUserInfo" bindgetuserinfo="你自己定义函数"></button>

<block wx:if="{{!hasUserInfo}}">  <image 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    })    app.data.userInfo = this.userInfo    app.data.hasUserInfo = true  }}

2. 无法弹出授权窗口

这里一定要注意

授权窗口只会在用户第一次授权时出现，也就是，只会出现一次！！

在微信小程序开发工具里，需要我们清除所有缓存