用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

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

Rolan 2018-12-17 00:14

逻辑如下:1:第一次登陆的时候会有一个登录按钮遮罩浮层提示去授权登录2:在弹出的授权框里,拒绝授权按钮的时候,界面的数据没有办法加载出来,允许授权的时候,界面就能渲染从后端拿过来的数据3:判断是否授过权 ...

逻辑如下:

  1. 1:第一次登陆的时候会有一个登录按钮遮罩浮层提示去授权登录
  2. 2:在弹出的授权框里,拒绝授权按钮的时候,界面的数据没有办法加载出来,允许授权的时候,界面就能渲染从后端拿过来的数据
  3. 3:判断是否授过权(判断是第一次登录还是第n次),如果用户第一次已经登录授权,后面继续登录的时候悬浮框就不会再出现

效果如下:

index.html

  1. <!-- 授权弹框提示 -->
  2. <view class="container">
  3. <view class="float" hidden='{{viewShowed}}'>
  4. <view class='floatContent'>
  5. <view class='floatText'>
  6. <text>获取微信授权信息</text>
  7. <button open-type="getUserInfo" bindgetuserinfo="getUserInfo">去设置</button>
  8. </view>
  9. </view>
  10. </view>
  11. </view>

index.wxss

  1. .float {
  2. height: 100%;
  3. width: 100%;
  4. position: fixed;
  5. background-color: rgba(0, 0, 0, 0.5);
  6. z-index: 2;
  7. top: 0;
  8. left: 0;
  9. }
  10. .floatContent {
  11. padding: 20rpx 0;
  12. width: 80%;
  13. background: #fff;
  14. margin: 40% auto;
  15. border-radius: 20rpx;
  16. display: flex;
  17. flex-direction: column;
  18. justify-content: space-around;
  19. align-items: center;
  20. position: relative;
  21. height: 332rpx;
  22. }
  23. .floatText text {
  24. color: #000;
  25. font-size: 40rpx;
  26. display: block;
  27. text-align: center;
  28. line-height: 90rpx;
  29. border-radius: 30rpx;
  30. margin-right: 10rpx;
  31. }

index.js

  1. js代码,与后台数据库交互,授权的信息存入了数据库,可根据自己的需要做出相应的修改。
  2. //index.js
  3. //获取应用实例
  4. var app = getApp()
  5. Page({
  6. data: {
  7. carList: [], //车辆数据集合
  8. viewShowed: true, //控制授权是否显示
  9. },
  10. onLoad: function () {
  11. var that = this;
  12. app.getOpenid().then(function (res) {
  13. if (res.status == 200) {
  14. //判断是否授权
  15. wx.getSetting({
  16. success(e) {
  17. if (e.authSetting['scope.userInfo']) { //已经授权
  18. that.getCars(res.data);
  19. } else { //没有授权,显示授权框
  20. that.setData({
  21. viewShowed: false,
  22. })
  23. }
  24. }
  25. })
  26. }
  27. })
  28. },
  29. getUserInfo: function (e) {
  30. var that = this;
  31. that.setData({
  32. viewShowed: true,
  33. });
  34. var userinfo = e.detail.userInfo;
  35. wx.request({
  36. url: "http://localhost:8081/wpDeboServer/wx.do",
  37. data: {
  38. "openid": app.globalData.openid,
  39. "nickname": userinfo.nickName
  40. },
  41. method: 'PUT',
  42. header: {
  43. 'Content-type': 'application/json'
  44. },
  45. success: function (res) {
  46. //查询绑定车辆
  47. that.getCars(app.globalData.openid);
  48. }
  49. });
  50. },
  51. })
  1. 原文作者:祈澈姑娘。 技术博客:https://www.jianshu.com/u/05f416aefbe1
  2. 90后前端妹子一枚,爱编程,爱运营,爱折腾。长期坚持总结工作中遇到的技术问题。
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 祈澈菇凉 来自: 简书