微信小程序之授权登录篇

微信官方调整getUserInfo接口,无法直接弹窗授权。需通过button组件触发,检查用户授权状态,未授权时引导用户授权。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

之前微信授权登录时是直接可以通过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代码如下:

  <view class='headView'>
    <view class='headImageView'>
      <image class='headImage' src='../images/weixi.jpg' mode='scaleToFill'></image>
    </view>
    <view class='titleText'>申请获取以下权限</view>
    <view class='contentText'>获得你的公开信息(昵称,头像,手机等)</view>
    <button class='authBtn' type='primary' open-type='getUserInfo' bindgetuserinfo='bindGetUserInfo'>授权登录</button>
  </view>

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代码如下:

Page({
  /**
   * 页面的初始数据
   */
  data: {
  },

  /**
   * 生命周期函数--监听页面加载
   */
  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(res.detail.userInfo);
      //授权成功后,通过改变 isHide 的值,让实现页面显示出来,把授权页面隐藏起来
      that.setData({
        isHide: false
      });
    } else {
      //用户按了拒绝按钮
      wx.showModal({
        title: '警告',
        content: '您点击了拒绝授权,将无法进入小程序,请授权之后再进入!!!',
        showCancel: false,
        confirmText: '返回授权',
        success: function(res) {
          // 用户没有授权成功,不需要改变 isHide 的值
          if (res.confirm) {
            console.log('用户点击了“返回授权”');
          }
        }
      });
    }
  }
})

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值