长风破浪会有时
直挂云帆济沧海

小程序之如何获取微信授权

    由于之前微信授权登录时是直接可以通过微信开放接口getUserInfo弹出授权弹窗。由于近期微信官方修改了getUserInfo接口,为优化用户体验,使用 wx.getUserInfo接口直接弹出授权框的开发方式将逐步不再支持。所以现在无法一进入微信小程序就弹出授权窗口,只能通过button去触发。

     为改善小程序用户体验,建议用户进入小程序之后,可以浏览那些不需要授权的页面以及接口,然后需要获取微信用户权限时,通过个人信息页面中去点击授权登录而获取微信授权。

  wxml : <button open-type='getUserInfo' bindgetuserinfo='bindGetUserInfo'>授权登录</button>
  
  js : bindGetUserInfo: function (e) {
            //用户点击了授权
            if (e.detail.userInfo) {
                util.showBusy('正在登录');
                wx.redirectTo({
                    url: "../index/index"
                })
            } else {
                //用户按了拒绝按钮
                util.showBusy('取消授权');
                    wx.navigateBack({
                })
            }
        }

获取到user_info信息,跳转首页,首页获取微信正式授权,因为授权,后端必须获取到前端的code才能进行授权。

wx.getSetting({
  success: function(res) {
     //如果用户点击了授权
    if (res.authSetting['scope.userInfo']) {
        //如果已经存了userInfo等信息,code在qclound里面也会存在缓存里面,所以就不需要再重新获取code
        if (wx.getStorageSync("userInfo")) {
            // loginWithCode
            qcloud.loginWithCode({
                success: res => {
                    wx.setStorageSync("token", res.token);
                    wx.setStorageSync("userInfo", res);
                },
                fail: err => {
                    console.error(err)
                    util.showModel('登录错误', err.message)
                }
             })
        } else {
        //没有存用户信息,需要传code和校验参数到后端进行操作。
            qcloud.login({
                success: res => {
                    //存获取到的用户信息
                    wx.setStorageSync("userInfo", res);
                    util.showSuccess('登录成功');
                },
                fail: err => {
                    console.error(err)
                    util.showModel('登录错误', err.message)
                }
            })
        }
        }
      }
    });

至此,小程序用户授权就完成了。可以愉快的玩耍了。

赞(3)
未经允许不得转载:阿锋哥前端开发经验分享 » 小程序之如何获取微信授权
分享到: 更多 (0)

相关推荐

  • 暂无文章

几百块就能做营销型企业网站?

查看详情