微信小程序---强制用户授权登录-蒲公英云

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

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

wxml页面：

<!--index.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('用户点击了“返回授权”')
          }
        }
      })
    }
  }