首页 > 编程知识 正文

微信 小程序 如何授权,微信小程序前端登录授权如何实现

时间:2023-05-03 18:05:25 阅读:270693 作者:1414

小程序最新版本 微信授权登录小程序 预计自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

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。