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

逻辑如下：

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

效果如下：

index.html

6. 获取微信授权信息
7. 去设置
8.  
9.  
10.  
11.  

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.  
11. .floatContent {
12. padding: 20rpx 0;
13. width: 80%;
14. background: #fff;
15. margin: 40% auto;
16. border-radius: 20rpx;
17. display: flex;
18. flex-direction: column;
19. justify-content: space-around;
20. align-items: center;
21. position: relative;
22. height: 332rpx;
23. }
24.  
25. .floatText text {
26. color: #000;
27. font-size: 40rpx;
28. display: block;
29. text-align: center;
30. line-height: 90rpx;
31. border-radius: 30rpx;
32. margin-right: 10rpx;
33. }

index.js

1. js代码，与后台数据库交互，授权的信息存入了数据库，可根据自己的需要做出相应的修改。
2. //index.js
3. //获取应用实例
4.  
5. var app = getApp()
6.  
7. Page({
8. data: {
9. carList: [], //车辆数据集合
10. viewShowed: true, //控制授权是否显示
11.  
12. },
13.  
14. onLoad: function () {
15. var that = this;
16.  
17.  
18. app.getOpenid().then(function (res) {
19. if (res.status == 200) {
20. //判断是否授权
21. wx.getSetting({
22. success(e) {
23. if (e.authSetting['scope.userInfo']) { //已经授权
24. that.getCars(res.data);
25. } else { //没有授权，显示授权框
26. that.setData({
27. viewShowed: false,
28. })
29. }
30. }
31. })
32. }
33. })
34. },
35.  
36. getUserInfo: function (e) {
37. var that = this;
38. that.setData({
39. viewShowed: true,
40. });
41. var userinfo = e.detail.userInfo;
42. wx.request({
43. url: "http://localhost:8081/wpDeboServer/wx.do",
44. data: {
45. "openid": app.globalData.openid,
46. "nickname": userinfo.nickName
47. },
48. method: 'PUT',
49. header: {
50. 'Content-type': 'application/json'
51. },
52. success: function (res) {
53. //查询绑定车辆
54. that.getCars(app.globalData.openid);
55. }
56. });
57. },
58. })