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


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 相关文章推荐
入门基础学习 ExtJS笔记(一)
Nov 11 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
jQuery使用之设置元素样式用法实例
Jan 19 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
Sep 06 Javascript
js中DOM三级列表(代码分享)
Mar 20 Javascript
JS验证input输入框(字母,数字,符号,中文)
Mar 23 Javascript
微信小程序实战之自定义抽屉菜单(7)
Apr 18 Javascript
JS动画定时器知识总结
Mar 23 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
Jul 28 Javascript
小程序实现多选框功能
Oct 30 Javascript
Vue的H5页面唤起支付宝支付功能
Apr 18 Javascript
NProgress显示顶部进度条效果及使用详解
Sep 21 Javascript
微信小程序 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短域名转换为实际域名函数
2011/01/17 PHP
ThinkPHP写第一个模块应用
2012/02/20 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十)
2014/06/24 PHP
php使用PDO执行SQL语句的方法分析
2017/02/16 PHP
PHP 二维关联数组根据其中一个字段排序(推荐)
2017/04/04 PHP
laravel 解决paginate查询多个字段报错的问题
2019/10/22 PHP
JQuery 选择器 xpath 语法应用
2010/05/13 Javascript
node.js中的buffer.toJSON方法使用说明
2014/12/14 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
2016/11/09 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
2017/08/22 Javascript
jQuery实现可兼容IE6的遮罩功能详解
2017/09/19 jQuery
JavaScript实现省市联动过程中bug的解决方法
2017/12/04 Javascript
vue2.0 资源文件assets和static的区别详解
2018/04/08 Javascript
Vue的H5页面唤起支付宝支付功能
2019/04/18 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
2019/06/10 Javascript
微信公众号网页分享功能开发的示例代码
2020/05/27 Javascript
jQuery 添加元素和删除元素的方法
2020/07/15 jQuery
详解阿里Node.js技术文档之process模块学习指南
2021/01/04 Javascript
利用Python实现命令行版的火车票查看器
2016/08/05 Python
在Python函数中输入任意数量参数的实例
2019/07/16 Python
flask 使用 flask_apscheduler 做定时循环任务的实现
2019/12/10 Python
python 实现图片上传接口开发 并生成可以访问的图片url
2019/12/18 Python
解决Python数据可视化中文部分显示方块问题
2020/05/16 Python
python自动化办公操作PPT的实现
2021/02/05 Python
Zavvi美国:英国娱乐之家
2017/03/19 全球购物
Origins悦木之源香港官网:雅诗兰黛集团高端植物护肤品牌
2018/03/21 全球购物
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
G-Form护具官方网站:美国运动保护装备
2019/09/04 全球购物
奢华的意大利皮革手袋:Bene Handbags
2019/10/29 全球购物
RealTek面试题
2016/06/28 面试题
初中科学教学反思
2014/01/21 职场文书
优秀教师演讲稿
2014/05/06 职场文书
省文明单位申报材料
2014/05/08 职场文书
幼儿园优秀班主任事迹材料
2014/05/14 职场文书
2014年有孩子的离婚协议书范本
2014/10/08 职场文书
小学生心理健康活动总结
2015/05/08 职场文书