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

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

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

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

效果如下:


5640239-f69e17dbb37f9793.gif
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);
      }
    });
  },
})

原文作者:祈澈姑娘。 技术博客:https://www.jianshu.com/u/05f416aefbe1
90后前端妹子一枚,爱编程,爱运营,爱折腾。长期坚持总结工作中遇到的技术问题。

热门推荐:前端,Java,产品经理,微信小程序,Python等200G资源合集大放送

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值