微信小程序怎么调用微信授权窗口
创始人
2024-12-17 08:02:18
0次

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组件必须按照如下的形式。


  
  微信授权登录

效果这样,具体的样式根据大家的喜好更改

微信小程序怎么调用微信授权窗口

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. 无法弹出授权窗口

微信小程序怎么调用微信授权窗口

这里一定要注意

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

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

微信小程序怎么调用微信授权窗口

3. 已经授权的情况下,不显示按钮

由于用户已经授权的时候,app.js会获取用户个人信息(而不是在用户点击授权按钮时获取),但是这个过程是异步的。

可以看到我们的授权按钮的出现时根据{{!hasUserInfo}}的真值来判断,这个值可以通过app.js是否获取了信息来赋值。


  
  微信授权登录

但是,可能出现用户已经授权了,但是app.js获取个人信息时过慢,然而我们的授权按钮却错误的以为app.js没有获取到信息,所以将授权按钮渲染了出来。

这时,我们希望,在app.js判断用户已经授权且获取到信息后,告诉我们的授权按钮。

我们在me.js中添加如下代码段。

onLoad: function() {
  // 获取个人信息
  if(app.globalData.userInfo){
    this.setData({
      userInfo: app.globalData.userInfo,
      hasUserInfo: true
    })
  }else{
    // 在app.js没有获取到信息时,判断app.js的异步操作是否返回信息
    app.userInfoReadyCallback = res => {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    }
  }
}

为什么这里会有个app.userInfoReadyCallback函数呢,我们注意到在app.js的wx.getSetting里有一段回调函数,这个函数就是用来解决异步的问题。

微信小程序怎么调用微信授权窗口

相关内容

热门资讯

空调连续工作多久需要停机休息 空调连续工作的时间取决于多个因素,包括空调的型号、功率、使用环境和维护情况等。一般来说,空调可以连续...
空调哪个符号是除湿的 空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异,但一般来说,除湿...
格力空调多长时间加一次氟利昂 1、一般情况下,空调对氟利昂的使用量是非常小的,所以在空调使用了四年左右的时候再考虑加也没问题。2、...
空调用多长时间需要加氟一次 一般情况下是五年。当出现以下这几种情况时,空调才需要加氟。1、空调的室内机和室外机各有两个接口,当接...
格调生活·C标思享荟:卡萨帝在... 9月12日的郑州龙湖金融岛,夜风轻拂,灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...
品牌价值破千亿、高端份额持续领... 9月12日,“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...
空调主板坏了修800还是换新的 空调主板坏了是修还是换新,需要考虑多个因素,以下是一些建议:1. 维修成本:如果维修费用较低,比如 ...
空调开多久需要休息多长时间 问题:空调开多久需要休息多长时间回答:1、在使用空调的过程中,一般空调开7~8个小时左右需要休息2~...
中央空调多长时间清洗一次 1、一般空调开机前清洗一次即可,空调开机中间时段再清洗一次,空调关机时清洗一次,这样比较合理。2、空...
中央空调氟利昂多久加一次 看空调制热和制冷程度,很多人的观点认为氟利昂必须一年放一次,其实这个观点是错误的,理解上面有点偏差,...