小程序模板網(wǎng)

小程序登錄按鈕遮罩浮層效果

發(fā)布時間:2018-12-19 09:32 所屬欄目:小程序開發(fā)教程

邏輯如下:

 

  1. 1:第一次登陸的時候會有一個登錄按鈕遮罩浮層提示去授權登錄
  2. 2:在彈出的授權框里,拒絕授權按鈕的時候,界面的數(shù)據(jù)沒有辦法加載出來,允許授權的時候,界面就能渲染從后端拿過來的數(shù)據(jù)
  3. 3:判斷是否授過權(判斷是第一次登錄還是第n次),如果用戶第一次已經(jīng)登錄授權,后面繼續(xù)登錄的時候懸浮框就不會再出現(xiàn)
 

效果如下:

index.html

 

  1. <!-- 授權彈框提示 -->
    <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

 

  1. .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

 

  1. js代碼,與后臺數(shù)據(jù)庫交互,授權的信息存入了數(shù)據(jù)庫,可根據(jù)自己的需要做出相應的修改。
    //index.js
    //獲取應用實例
    
    var app = getApp()
    
    Page({
    data: {
    carList: [], //車輛數(shù)據(jù)集合
    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']) { //已經(jīng)授權
    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);
    }
    });
    },
    })


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/25033.html 復制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢