专栏首页编程微刊小程序登录按钮遮罩浮层效果

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

逻辑如下: 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);
      }
    });
  },
})

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小程序搜索弹出搜索内容功能(模糊查询)

    祈澈菇凉
  • 【组件】微信小程序input搜索框的实现

    祈澈菇凉
  • 微信小程序模仿分类导航实现多个tab 页

    祈澈菇凉
  • 小程序搜索弹出搜索内容功能(模糊查询)

    祈澈菇凉
  • 微信小程序搜索框代码组件

    达达前端
  • 小程序 — 展开/收起

    (1)首先我们应该在data中定义一个变量isShow用来控制样式的切换,默认为收起状态(即不展示)。

    Ewall
  • Vue部署服务器,刷新页面 404/502 报错

    在vue项目中,部署项目到服务器的时候报404/502的错误 一般可以用hash()和history.pushState() 作为路由跳转,就下面这样滴 如果...

    〆 千寻、
  • 回斯坦福之后研究成果曝光,李飞飞团队用机器学习教机械臂做动作

    此次李飞飞团队结合了AI及深度学习等相关技术,让机械臂拥有模仿和学习的功能,是一次技术进步。

    镁客网
  • css渲染(一) 字体

    一、字体属性 1.默认字体系列   chrome/opera:"宋体"   firefox:"微软雅黑"   safari/IE:Times,"宋体" 2.字体...

    柴小智
  • uni-app渲染商品列表

    祈澈菇凉

扫码关注云+社区

领取腾讯云代金券