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


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 相关文章推荐
vs2003 js文件编码问题的解决方法
Mar 20 Javascript
深入理解jQuery之事件移除
Jun 02 Javascript
Javascript必知必会(四)js类型转换
Jun 08 Javascript
jQuery实现动态添加tr到table的方法
Dec 26 Javascript
javascript ASCII和Hex互转的实现方法
Dec 27 Javascript
微信小程序 商城开发(ecshop )简单实例
Apr 07 Javascript
简单实现js上传文件功能
Aug 21 Javascript
Vue项目分环境打包的实现步骤
Apr 02 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
Jul 29 Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 Javascript
js前端如何写一个精确的倒计时代码
Oct 25 Javascript
VUE.CLI4.0配置多页面入口的实现
Nov 25 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中通过ADODB库实现调用Access数据库之修正版本
2006/12/31 PHP
thinkphp使用phpmailer发送邮件的方法
2014/11/24 PHP
php实现产品加入购物车功能(1)
2020/07/23 PHP
Laravel中为什么不使用blpop取队列详析
2018/08/01 PHP
Yii使用DbTarget实现日志功能的示例代码
2020/07/21 PHP
JavaScript中Math对象方法使用概述
2014/01/02 Javascript
jQuery中add()方法用法实例
2015/01/08 Javascript
jQuery实现验证年龄简单思路
2016/02/24 Javascript
JS获取当前脚本文件的绝对路径
2016/03/02 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
NodeJS使用Range请求实现下载功能的方法示例
2018/10/12 NodeJs
详解JavaScript的内存空间、赋值和深浅拷贝
2019/04/17 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
2019/07/29 Javascript
python基础教程之获取本机ip数据包示例
2014/02/10 Python
python原始套接字编程示例分享
2014/02/21 Python
Python functools模块学习总结
2015/05/09 Python
Python的Django框架中使用SQLAlchemy操作数据库的教程
2016/06/02 Python
Python 爬虫学习笔记之单线程爬虫
2016/09/21 Python
Python 从一个文件中调用另一个文件的类方法
2019/01/10 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
python版百度语音识别功能
2019/07/09 Python
OpenCV 边缘检测
2019/07/10 Python
Django高并发负载均衡实现原理详解
2020/04/04 Python
Paradox London官方网站:英国新娘鞋婚礼鞋品牌
2019/08/29 全球购物
橄榄树药房:OLIVEDA
2019/09/01 全球购物
俄罗斯首家面向中国消费者的一站式购物网站:Wruru
2020/05/08 全球购物
函授大专自我鉴定
2013/11/01 职场文书
会计电算化应届生求职信
2013/11/03 职场文书
人力管理专业毕业生求职信
2014/02/27 职场文书
市场营销毕业生自荐信范文
2014/04/01 职场文书
授权委托书格式模板
2014/04/03 职场文书
优秀毕业生找工作自荐信
2014/06/23 职场文书
大学生就业协议书范本(适用于公司企业)
2014/10/07 职场文书
2014年应急工作总结
2014/12/11 职场文书
法人代表证明书范本
2015/06/18 职场文书
win10以太网连接不上怎么办?Win10连接以太网详细教程
2022/04/08 数码科技