小程序最新版本 微信授权登录小程序 预计自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()) 然后可以执行以下方法中的一种
用户已经授权的情况下调取后端接口获取用户信息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