微信小程序不支持wx.getUserInfo授权的解决方法

Dax
• 阅读 1184

微信小程序最近被吐槽最多的一个更改,就是用户使用wx.getUserInfo(开发和体验版)时不会弹出授权,正式版不受影响。现在授权方式是需要引导用户点击一个授权按钮,然后再弹出授权。我最近围绕这个做了一些研究,来看看我是如何做好这个授权。 1.用户进来一个页面时,按照微信小程序的生命周期,开始解析onLoad里面的内容。 所以我们在第一步,就把代码放在这里,看看全局变量是否已经有值, 2.如果之前没有授权,则查看用户是否有请求一个授权登录的按钮, 3.最后查阅这个函数的授权结果,是成功返回还是失败。代码如下:

  onLoad: function () {

    if (app.globalData.userInfo) {
      console.log(1)
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      console.log(2)
      // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        console.log(12)
        app.globalData.userInfo = res.userInfo
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      console.log(3)
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        },
        fail:res=>{
          console.log(4);
          this.setData({
            getUserInfoFail:true
          })
        }
      })
    }
  },

第二步:通常我们这里会进入第二步,允许使用按钮提示用户授权。在onLoad周期里面我们没获取到用户是否有成功授权,我们下一周期onShow,在这里,我们就可以查阅授权的状态,如果进入了fail操作,说明还没有授权,在失败的时候,我们赋值告知授权失败,我们页面根据这个状态值,来显示需要用户点击授权。代码如下:

  login: function () {

    console.log(111)
    var that = this
    // if (typeof success == "function") {
    //   console.log(6);
    //   console.log('success');
    //   this.data.getUserInfoSuccess = success
    // }
    wx.login({
      success: function (res) {
        var code = res.code;
        console.log(code);
        wx.getUserInfo({
          success: function (res) {
            console.log(7);
            app.globalData.userInfo = res.userInfo
            that.setData({
              getUserInfoFail: false,
              userInfo: res.userInfo,
              hasUserInfo: true

            })
            //平台登录
          },
          fail: function (res) {
            console.log(8);
            console.log(res);
            that.setData({
              getUserInfoFail: true
            })
          }
        })
      }
    })
  },

页面xml中根据这个getUserInfoFail来显示按钮。

  <button wx:if="{{!hasUserInfo && canIUse && getUserInfoFail}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>

当用户点击授权后,弹出一个弹窗,提示他授权,这个时候调用的是getUserInfo这个函数,代码如下:

  getUserInfo: function(e) {
    console.log(5);
    console.log(e)
    if(e.detail.userInfo){
      app.globalData.userInfo = e.detail.userInfo
      this.setData({
        userInfo: e.detail.userInfo,
        hasUserInfo: true
      })
    }else{
      this.openSetting();
    }

  },

如果我们可以获取到detail.userInfo的值,说明参数正确,用户点击了允许授权。如果用户点击拒绝,这个时候我们就要调用openSetting这个函数。这个函数主要是打开授权的地方,有兼容性问题,低版本不支持。

  openSetting: function () {
    var that = this
    if (wx.openSetting) {
      wx.openSetting({
        success: function (res) {
          console.log(9);
          //尝试再次登录
          that.login()
        }
      })
    } else {
      console.log(10);
      wx.showModal({
        title: '授权提示',
        content: '小程序需要您的微信授权才能使用哦~ 错过授权页面的处理方法:删除小程序->重新搜索进入->点击授权按钮'
      })
    }
  }

如果用户进入了授权页后,点击允许我们获取用户信息,返回成功时,我们执行login这个函数,这时,我们就可以进入getuserInfo() 里面拿到授权的信息了。那么头像、用户信息和其它一些个人的资料都可以查到了。 完整的index.js如下:

  //index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    getUserInfoFail:false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onShow:function(){
    this.login();
  },
  onLoad: function () {

    if (app.globalData.userInfo) {
      console.log(1)
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      console.log(2)
      // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        console.log(12)
        app.globalData.userInfo = res.userInfo
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      console.log(3)
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        },
        fail:res=>{
          console.log(4);
          this.setData({
            getUserInfoFail:true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(5);
    console.log(e)
    if(e.detail.userInfo){
      app.globalData.userInfo = e.detail.userInfo
      this.setData({
        userInfo: e.detail.userInfo,
        hasUserInfo: true
      })
    }else{
      this.openSetting();
    }

  },
  login: function () {
    console.log(111)
    var that = this
    // if (typeof success == "function") {
    //   console.log(6);
    //   console.log('success');
    //   this.data.getUserInfoSuccess = success
    // }
    wx.login({
      success: function (res) {
        var code = res.code;
        console.log(code);
        wx.getUserInfo({
          success: function (res) {
            console.log(7);
            app.globalData.userInfo = res.userInfo
            that.setData({
              getUserInfoFail: false,
              userInfo: res.userInfo,
              hasUserInfo: true

            })
            //平台登录
          },
          fail: function (res) {
            console.log(8);
            console.log(res);
            that.setData({
              getUserInfoFail: true
            })
          }
        })
      }
    })
  },
  //跳转设置页面授权
  openSetting: function () {
    var that = this
    if (wx.openSetting) {
      wx.openSetting({
        success: function (res) {
          console.log(9);
          //尝试再次登录
          that.login()
        }
      })
    } else {
      console.log(10);
      wx.showModal({
        title: '授权提示',
        content: '小程序需要您的微信授权才能使用哦~ 错过授权页面的处理方法:删除小程序->重新搜索进入->点击授权按钮'
      })
    }
  }
})

index.xml如下

  <!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse && getUserInfoFail}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    <block wx:if="{{hasUserInfo}}">
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

至此,我们就完成了用户的流程了。

点赞
收藏
评论区
推荐文章
小森森 小森森
1年前
计划助手V1.0-微信小程序(QQ小程序)-源代码分享
疫情期间在家感觉好无聊啊,于是利用空闲时间做了一个用来记录和管理小目标时间的小程序,命名为《小沙漏》。QQ版本小程序同步上线,QQ小程序叫《时间小沙漏》,欢迎大家前来体验,后期也会添加其他的新功能哦【区别】:微信小程序的代码与QQ小程序的源码是不一样的。微信小程序的源码基于微信小程序云开发,需要在有网络的情况下使用,具有同步功能,所有记录在删除小
秃头王路飞 秃头王路飞
1年前
微信原生小程序如何修改第三方样式
一级标题微信原生小程序如何修改第三方样式env:1.微信原生小程序(基础库2.272)2.tdesignminiprogram(最低基础库版本^2.6.5)近期在写微信原生小程序,有一个需求就是去修改一个第三方的库的样式,在写的
马丁路德 马丁路德
2年前
小程序静默登录与维护自定义登录态
1.背景在小程序中,openid是一个用户对于一个小程序/公众号的标识,开发者可以通过这个标识识别出用户,就如同你的身份证一样。2.什么是静默登录?在普通的应用中,用户通过表单验证登录建立用户体系,这种常见的登录方式一般是通过登录页面表单进行登录,对用户来说是有感的。在小程序中,由于是基于微信,可以通过微信官方提供的API能力,使我们能够无感知得获取
梦
3年前
微信小程序new Date()转换时间异常问题
微信小程序苹果手机页面上显示时间异常,安卓机正常问题image(https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/b691e1230e2f15efbd81fe11ef734d4f.png)错误代码vardate'2021030617:00:00'vardateT
Easter79 Easter79
2年前
springboot+dubbo+vue+微信小程序实现的点单系统
后端:全部采用springbootdubbo提供接口前端:1.微信小程序    2.vueadmin管理后台,用于处理用户小程序下单信息,接单,拒单,菜单上架下架等等。特点:用户下单商家立马能够接单,websocket即时获取下单信息,并且拥有语音提示,网页页面弹出下单信息等等代码:①:后端:wec
Easter79 Easter79
2年前
Taro小程序自定义顶部导航栏
微信自带的顶部导航栏是无法支持自定义icon和增加元素的,在开发小程序的时候自带的根本满足不了需求,分享一个封装好的组件,支持自定义icon、扩展dom,适配安卓、ios、h5,全面屏。我用的是京东的Taro多端编译框架写的小程序,原生的也可以适用,用到的微信/taro的api做调整就行,实现效果如下。!在这里插入图片描述(https://i
Wesley13 Wesley13
2年前
5G消息与微信小程序互联互通?北京国都互联这么做……
最近微信小程序上线了一个超级流量的新入口URLScheme,据微信官网介绍,scheme码适用于短信、邮件、外部网页等拉起小程序的业务场景。通过小程序页面的URLScheme,可以在短信、邮件或微信外部的网页中打开微信小程序。意义在于将微信流量生态延伸到微信以外渠道,进一步完善了小程序和外部渠道互通的营销场景。北京国都互联第一时
Wesley13 Wesley13
2年前
C#开发——网站应用微信登录开发
1\.在微信开放平台注册开发者账号,并有一个审核已通过的网站应用,并获得相对应的AppID和AppSecret,申请通过登陆后,方可开始接入流程。2.微信OAuth2.0授权登录目前支持authorization\_code模式,适用于拥有server端的应用授权。该模式整体流程为:1.第三方发起微信授权登录请求,微信用户允许授权第三方应
笑面虎 笑面虎
3个月前
【15章】前端高手特训 从0到1带你手写一个微信小程序底层框架
【15章】前端高手特训从0到1带你手写一个微信小程序底层框架视频课程分享——前端高手特训从0到1带你手写一个微信小程序底层框架,课程包更新,附源码。大家下载学习。微信小程序实质上是一款基于web技术的应用程序,他和我们平常所接触到的前端网页是大同小异的。相
笑面虎 笑面虎
2个月前
【完结15章】深入学习小程序框架底层原理,培养双线程思维
【完结15章】深入学习小程序框架底层原理,培养双线程思维给大家分享一套课程——《深入学习小程序框架底层原理,培养双线程思维》,课程共15章,附源码下载。微信小程序在产品功能设计上给用户更多控制力。在微信小程序的设置页,为用户提供了数据权限开关,一旦用户授权