2021最新微信授权小程序登录 （仅前端 getUserProfile）

小程序最新版本 微信授权登录小程序 预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息 这也是为什么button的开放能力无法弹窗的原因。 取而代之的是用wx.getUserProfile来获取用户信息。如果你也遇到了这样的问题。请继续。如果这篇贴子对您有所帮助，也请您为我点个小赞。谢谢。

1.wx.getUserProfile 可以用任何标签 绑定bindtap事件来触发。 我这边里的是view

<!-- 用户昵称 -->
       <view bindtap="getUserProfile" class="btn">请登录~</view>

2.getUserProfile方法代码

data: {
    isAuth:false, //是否授权
    userInfo:{}//用户信息
  },

   // 获取授权
   getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息，
    // 开发者每次通过该接口获取用户个人信息均需用户确认，
    // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        this.setData({
          userInfo: res.userInfo,
          isAuth:true
        })
      }
    })
  },

3.到这里你就可以进行点击登录了 并可以看到弹窗

4.将wx.getUserProfile返回的res数据 赋值给一个自定义变量如 userInfo 并把之前的请登录和灰色头像隐藏 （设置 isAuth为true) 就可以展示用户的头像和昵称了。

wx.getUserProfile({
      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        this.setData({
          userInfo: res.userInfo,
          isAuth:true
        })
      }
    })

5.到这里还没有结束 还有最后一点需要做。每刷新一次小程序 用户头像和信息都会消失。这里我们需要在生命函数中1.判断用户是否授权过（wx.getSetting()） 然后可以执行以下方法中的一种

1. 用户已经授权的情况下调取后端接口获取用户信息

2. 2.如果不需要从后台取用户信息 可以把第二步中wx.getUserProfile 的结果放在缓存中 在这里拿出来 赋值给userInfo变量 建议必时要用 JSON.stringify() 与JSON.parse()哦

   /**

   • 生命周期函数–监听页面加载
     */
     onLoad: function (options) {
     var that=this;
     // 判断用户是否授权 如已授权直接从getuserinfo当中取信息
     wx.getSetting({
     success(res) {
     if (res.authSetting[‘scope.userInfo’]) { //为true 就是代表已授权

      //1. 用户已经授权的情况下调取后端接口
      //2.如果不需要从后台取用户信息  可以把第二步中wx.getUserProfile 的结束放在缓存中 在这里拿出来 赋值给userInfo变量 
         
       
      })
     

     }
     }
     })
     },

到这里就前端的获取用户信息的工作就做完了。如果您需要和后台进行对接。请使用wx.login的流程
原授权登陆流程不变,依旧是
wx.login > code > 请求接口换取openid > openid >自定义请求态 > uid