微信小程序登录按钮遮罩浮层效果的实现方法


Posted in Javascript onDecember 16, 2018

前言

近期在写一点小东西,碰到遮罩...所以将实现的过程分享出来,供大家参考学习,下面话不多说了,来一起看看详细的介绍吧

逻辑如下:

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

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

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

效果如下:

微信小程序登录按钮遮罩浮层效果的实现方法

代码如下:

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);
  }
 });
 },
})

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jquery+ajax请求且带返回值的代码
Aug 12 Javascript
原生js实现自由拖拽弹窗代码demo
Jun 29 Javascript
jquery仿ps颜色拾取功能
Mar 08 Javascript
老生常谈jacascript DOM节点获取
Apr 17 Javascript
Angular6笔记之封装http的示例代码
Jul 27 Javascript
js事件on动态绑定数据,绑定多个事件的方法
Sep 15 Javascript
JavaScript创建防篡改对象的方法分析
Dec 30 Javascript
jQuery中使用validate插件校验表单功能
May 24 jQuery
js+canvas实现两张图片合并成一张图片的方法
Nov 01 Javascript
基于vue+element实现全局loading过程详解
Jul 10 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
Aug 14 Javascript
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
微信小程序 JS动态修改样式的实现方法
Dec 16 #Javascript
Echart折线图手柄触发事件示例详解
Dec 16 #Javascript
vue使用pdfjs显示PDF可复制的实现方法
Dec 14 #Javascript
antd Upload 文件上传的示例代码
Dec 14 #Javascript
Vue源码解析之Template转化为AST的实现方法
Dec 14 #Javascript
JavaScript模板引擎实现原理实例详解
Dec 14 #Javascript
Angular2 自定义表单验证器的实现方法
Dec 14 #Javascript
You might like
社区(php&amp;&amp;mysql)五
2006/10/09 PHP
php线性表顺序存储实现代码(增删查改)
2012/02/16 PHP
redis 队列操作的例子(php)
2012/04/12 PHP
php多文件上传功能实现原理及代码
2013/04/18 PHP
PHP生成指定长度随机数最简洁的方法
2014/07/14 PHP
PHP动态输出JavaScript代码实例
2015/02/12 PHP
js动态添加onload、onresize、onscroll事件(另类方法)
2012/12/26 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
2013/04/08 Javascript
9行javascript代码获取QQ群成员具体实现
2013/10/16 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
JavaScript判断数字是否为质数的方法汇总
2016/06/02 Javascript
jQuery插件 Jqplot图表实例
2016/06/18 Javascript
vue指令以及dom操作详解
2017/03/04 Javascript
Ext JS 实现建议词模糊动态搜索功能
2017/05/13 Javascript
在Js页面通过POST传递参数跳转到新页面详解
2017/08/25 Javascript
Puppeteer环境搭建的详细步骤
2018/09/21 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
2018/10/25 Javascript
jQuery分组选择器简单用法示例
2019/04/04 jQuery
利用d3.js制作连线动画图与编辑器的方法实例
2019/09/05 Javascript
微信小程序开发摇一摇功能
2019/11/22 Javascript
jQuery实现简单弹幕效果
2019/11/28 jQuery
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
[43:18]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
Python中dictionary items()系列函数的用法实例
2014/08/21 Python
Python数据类型详解(一)字符串
2016/05/08 Python
利用Python破解斗地主残局详解
2017/06/30 Python
浅析Python数据处理
2018/05/02 Python
在Python中表示一个对象的方法
2019/06/25 Python
使用Python计算玩彩票赢钱概率
2019/06/26 Python
Python 解决相对路径问题:&quot;No such file or directory&quot;
2020/06/05 Python
给全校老师的建议书
2014/03/13 职场文书
婚前协议书标准版
2014/10/19 职场文书
物流业务员岗位职责
2015/04/03 职场文书
python 如何做一个识别率百分百的OCR
2021/05/29 Python
详解JavaScript的计时器和按钮效果设置
2022/02/18 Javascript
Python中request的基本使用解决乱码问题
2022/04/12 Python