微信小程序---强制用户授权登录

小鱼儿 2022-03-20 10:59 818阅读 0赞

wxml页面：

<view class="login" wx:if="{
       {!hasUserInfo && canIUse}}">
      <view wx:if="{
       {canIUse}}" class='login'>
        <view class='header'>
          <view class='title'>
            <text>授权未来偶像</text>
          </view>
          <image src='../../image/logo.jpg'></image>
        </view>
        <view class='content'>
          <view>申请获取以下权限：</view>
          <text>获得你的公开信息(昵称，头像地址及性别)</text>
        </view>
        <button class='bottom' type='primary' open-type="getUserInfo" bindgetuserinfo="getUserInfo">
          授权登录
        </button>
      </view>
      <view wx:else>请升级微信版本</view>
    </view>

wxss样式：

/* 授权登陆弹框 */
    .login {
        width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      background: rgba(000, 000, 000, 0.3);
        display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: -9;
    }
    
    .header {
      background: #fff;
      text-align: center;
      width: 90%;
      height: 500rpx;
      position: absolute;
      top:50%;
      left:50%;
      margin-left: -45%;
      margin-top: -200rpx;
      border-radius: 5px;
    }
    
    .header image {
      width: 80rpx;
      height: 80rpx;
      border-radius: 40rpx;
      
    }
    .header .title {
      font-size: 40rpx;
      font-weight: 800;
      padding: 35rpx 0;
    
      
    }

js:

getUserInfo: function(e) {
        if (e.detail.userInfo) {
          //获取number
          wx.login({
            success: res => {
              // 发送 res.code 到后台换取 openId, sessionKey, unionId
              // console.log(res.code);
            }
          })
        } else {
          //用户按了拒绝按钮
          wx.showModal({
            title: '警告',
            content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!',
            showCancel: false,
            confirmText: '返回授权',
            success: function(res) {
              if (res.confirm) {
                // console.log('用户点击了“返回授权”')
              }
            }
          })
        }
      }