微信小程序之授权登录

之前微信授权登录时是直接可以通过getUserInfo接口 弹出授权弹窗。由于微信官方修改了 getUserInfo 接口，所以现在无法实现一进入微信小程序就弹出授权窗口，只能通过 button 去触发

微信的官方解释如下：

为优化用户体验，使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始，小程序的体验版、开发版调用 wx.getUserInfo 接口，将无法弹出授权询问框，默认调用失败。正式版暂不受影响。开发者可使用以下方式获取或展示用户信息：

一、小程序:

1、使用 button 组件，并将 open-type 指定为 getUserInfo 类型，获取用户基本信息。

详情参考文档:

https://developers.weixin.qq.com/miniprogram/dev/component/button.html

2、使用 open-data 展示用户基本信息。

详情参考文档:

https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html

然后是自己的实现思路是 通过点击button组件去触发 getUserInof 接口，在用户进入微信小程序的时候，判断用户是否授权了，未授权，弹出授权窗口，授权进入主界面，效果如图所示：

详细代码如下：

login.wxml代码如下：

 

   

     

   

    申请获取以下权限

    获得你的公开信息(昵称,头像,手机等)

    授权登录

 

请升级微信版本

login.wxss代码如下

.headView {

  margin: 90rpx 50rpx 90rpx 50rpx; /*上右下左*/

}

.headImageView {

  display: block;

  margin-left: 25px;

  margin-top: 25px;

  margin-right: 25px;

  margin-bottom: 0px;

  height: 50px;

}

.headImage{

  display: flex;

  width: 50px;

  height: 50px;

}

.titleText {

  margin-left: 25px;

  margin-top: 25px;

  margin-bottom: 10px;

  font-size: 14px;

  color: #020e0f;

  text-align: center;

}

.contentText {

  margin-left: 25px;

  margin-top: 0px;

  margin-bottom: 0px;

  font-size: 14px;

  color: #666;

  text-align: center;

}

.authBtn {

  margin-top: 35px;

  margin-left: 25px;

  margin-right: 25px;

  height: 45px;

 font-size: 17.5px;

}

---

---

login.js代码如下：

/**

  * 生命周期函数--监听页面加载

  */

  onLoad: function(options) {

    var that = this;

    //查看是否授权

    wx.getSetting({

      success: function(res) {

        if (res.authSetting['scope.userInfo']) {

          console.log("用户授权了");

        } else {

          //用户没有授权

          console.log("用户没有授权");

        }

      }

    });

  },

bindGetUserInfo: function(res) {

    if (res.detail.userInfo) {

      //用户按了允许授权按钮

      var that = this;

      // 获取到用户的信息了，打印到控制台上看下

      console.log("用户的信息如下：");

      console.log(e.detail.userInfo);

      //授权成功后,通过改变 isHide 的值，让实现页面显示出来，把授权页面隐藏起来

      that.setData({

        isHide: false

      });

    } else {

      //用户按了拒绝按钮

      wx.showModal({

        title: '警告',

        content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!!!',

        showCancel: false,

        confirmText: '返回授权',

        success: function(res) {

          // 用户没有授权成功，不需要改变 isHide 的值

          if (res.confirm) {

            console.log('用户点击了“返回授权”');

          }

        }

      });

    }

 }

},

然后就实现了 上面的效果。

如有其它问题请联系我，代码可以评论写下邮箱地址，私发给你们。