小程序登录按钮遮罩浮层效果

王小婷

发布于 2025-05-18 07:33:16

4500

代码可运行

文章被收录于专栏：编程微刊编程微刊

运行总次数：0

代码可运行

逻辑如下： 1：第一次登陆的时候会有一个登录按钮遮罩浮层提示去授权登录

2：在弹出的授权框里，拒绝授权按钮的时候，界面的数据没有办法加载出来，允许授权的时候，界面就能渲染从后端拿过来的数据

3：判断是否授过权（判断是第一次登录还是第n次），如果用户第一次已经登录授权，后面继续登录的时候悬浮框就不会再出现

效果如下：

fDpAfv9qJw.gif

index.html

  <!--  授权弹框提示  -->
 <view class="container">
  <view class="float" hidden='{{viewShowed}}'>
    <view class='floatContent'>
      <view class='floatText'>
        <text>获取微信授权信息</text>
        <button open-type="getUserInfo" bindgetuserinfo="getUserInfo">去设置</button>
      </view>
    </view>
  </view>
</view>

index.wxss

.float {
  height: 100%;
  width: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
  top: 0;
  left: 0;
}

.floatContent {
  padding: 20rpx 0;
  width: 80%;
  background: #fff;
  margin: 40% auto;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: relative;
  height: 332rpx;
}

.floatText text {
  color: #000;
  font-size: 40rpx;
  display: block;
  text-align: center;
  line-height: 90rpx;
  border-radius: 30rpx;
  margin-right: 10rpx;
}

index.js js代码，与后台数据库交互，授权的信息存入了数据库，可根据自己的需要做出相应的修改。

//index.js
//获取应用实例

var app = getApp()

Page({
  data: {
    carList: [], //车辆数据集合
    viewShowed: true, //控制授权是否显示

  },

  onLoad: function () {
    var that = this;
   

    app.getOpenid().then(function (res) {
      if (res.status == 200) {
        //判断是否授权
        wx.getSetting({
          success(e) {
            if (e.authSetting['scope.userInfo']) { //已经授权
              that.getCars(res.data);
            } else { //没有授权，显示授权框
              that.setData({
                viewShowed: false,
              })
            }
          }
        })
      }
    })
  },

  getUserInfo: function (e) {
    var that = this;
    that.setData({
      viewShowed: true,
    });
    var userinfo = e.detail.userInfo;
    wx.request({
      url: "http://localhost:8081/wpDeboServer/wx.do",
      data: {
        "openid": app.globalData.openid,
        "nickname": userinfo.nickName
      },
      method: 'PUT',
      header: {
        'Content-type': 'application/json'
      },
      success: function (res) {
        //查询绑定车辆
        that.getCars(app.globalData.openid);
      }
    });
  },
})