微信小程序-騷操做，自定義受權對話框，且遮蓋層遮住tabBar

首發帖， 如有不足或錯誤或更優的方式，請指出，感謝

假設場景

當用戶進入小程序以後， 須要在獲取到頭像暱稱等相關信息受權以後才容許他進行其它交互操做;

因爲微信小程序升級以後, 直接調用 wx.authorize({scope: "scope.userInfo"})，沒法再彈出受權窗口;

須要變相使用 <button open-type="getUserInfo"/>來引導用戶進行基本信息受權操做，

如自定義帶遮蓋層的對話框來引導用戶受權信息， 如這樣(請自動忽略打碼部分) 

圖中的肯定按鈕，即爲 <button open-type="getUserInfo"/>， 點擊後爲下圖

實現思路

咱們知道， 微信小程序原生的tabbar只提供了wx.hideTabBar wx.showTabBar來控制其隱藏或顯示， 而原生tabbar的層級老是在最頂層， 若tabbar處於顯示狀態， 那麼自定義的遮蓋層是沒法遮擋擋它的

所以個人想法是用wx.hideTabBar在app的onLauch中先隱藏掉tabbar導航欄， 再使用一張與導航欄相同的圖片佔用導航欄的空位， 並置於遮蓋層下層層級， 且隨着遮蓋層一塊兒顯示與隱藏

實現要點

剛開始，我覺得直接把佔位的tabbar圖片fixed後設置bottom爲0就能夠解決了， 雖然開發工具上沒有任何問題， 可是真機效果是這樣（iphone X）:

也就是說，真機中tabbar的位置並不是是位於整個頁面的最底部

因而我換了一種思路，經過微信小程序的wepy.getSystemInfoSync()來獲取屏幕實際高度screenHeight， 經過 query.select('#fake-tabbar').boundingClientRect();query.exec(function(res) {}) 來得到以前設置高度爲xx rpx的tabbar圖片所在節點實際渲染出的高度; 二者相減後的差值，即爲動態設置的佔位tabbar圖片的top值；

須要注意的地方： 佔位tabbar 圖片應該爲兩張， 一張爲底圖，一張爲tabbar圖， 以下：

底圖位置與tabbar圖的位置一致並位於它的下方， 爲防止趕上像iphoneX 這樣的長屏手機底端因tabbar高度不夠出現縫隙， 故打底的這張背景圖的高度稍微設置高一些

所有代碼

使用的wepy, 直接寫成了一個組件

<style lang="less" scoped>
/* 受權彈窗 */
.authorize_alert_wrapper {
  .cover {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #000000;
    opacity: 0.6;
    z-index: 110;
  }
  .authorize_alert {
    width: 506rpx;
    height: 232rpx;
    box-sizing: border-box;
    padding-top: 40rpx;
    background: #ffffff;
    border-radius: 16rpx;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    z-index: 120;
    .authorize_alert_describe {
      font-family: 'PingFangSC-Regular', 'Microsoft Yahei', sans-serif;
      font-size: 32rpx;
      color: #333333;
      letter-spacing: 0;
      text-align: center;
      margin-top: 18rpx;
    }
    .confirm_cancel {
      position: absolute;
      width: 506rpx;
      height: 72rpx;
      box-sizing: border-box;
      bottom: 0;
      left: 0;
      .confirm {
        width: 100%;
        height: 72rpx;
        line-height: 72rpx;
        padding: 0;
        margin: 0;
        text-align: center;
        font-size: 32rpx;
        color: #999;
        border: none;
        border-radius: 0;
        border-top: 2rpx solid #e1e1e2;
        background-color: #fff;
        font-family: 'PingFangSC-Regular', 'Microsoft Yahei', sans-serif;
        float: right;
        letter-spacing: 1px;
        color: #21b922;
        &:after {
          border-radius: 0;
          border: none;
        }
      }
      .confirm_hover {
        background-color: #eee;
      }
    }
  }
}
.pre-fake-tabbar, .pre-fake-tabbar-bg {
  width: 100%;
  height: 96rpx;
  position: fixed;
  left: 0;
}

.pre-fake-tabbar-bg {
  height: 150rpx;
}

.show {
  opacity: 1;
}

.hide {
  opacity: 0;
}

</style>
<template>
<!-- 使用 wx.getUserInfo從2018年4月30日開始，小程序與小遊戲的體驗版、開發版調用 wx.getUserInfo 接口，將沒法彈出受權詢問框，默認調用失敗, 如下爲變通辦法-->
    <view class="authorize_alert_wrapper {{showModal ? 'show' : 'hide'}}"  @touchmove.stop="catchTouchEvent">
        <image id="fake-tabbar_bg" class="pre-fake-tabbar-bg" src="{{fakeTabbarBgUrl}}" style="top:{{fakeTabbarTop}};"/>        
        <image id="fake-tabbar" class="pre-fake-tabbar" src="{{fakeTabbarUrl}}" style="top:{{fakeTabbarTop}};"/>
        <view id="cover" class='cover'></view>
        <view class="authorize_alert">
            <view class="authorize_alert_describe">前往受權才能繼續操做</view>
            <view class="confirm_cancel">
                <button class="confirm" hover-class="confirm_hover" @tap.stop="tap" data-btn-type="confirm" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">
                    肯定
                </button>
            </view>
        </view>
    </view>
</template>
<script>
import wepy from 'wepy';
const app = wepy.$instance;
export default class AuthModal extends wepy.component {
  data = {
    showModal: false,
    fakeTabbarUrl: '../images/index/fake_tabbar.png',
    fakeTabbarBgUrl: '../images/index/fake_tabbar_bg.png',
    fakeTabbarTop: null
  };
  methods = {
    tap() {
      this.hide();
    },

    onGotUserInfo(e) {
      const self = this;
      console.log('受權', e);
      if (e.detail.userInfo) {
        //受權成功
        console.log('受權成功', e);
        app.globalData.wxUserInfo = e.detail.userInfo;
        self.$apply();
        //通知主界面更新用戶消息
        self.$emit('userinfo-update', e.detail.userInfo);
      } else {
        self.show();
      }
    },

    catchTouchEvent() {
      console.log('阻止觸摸穿透')
    }
  };

  hide() {
    this.showModal = false;
    this.$apply();
    wepy.showTabBar();
  }

  show() {
    this.showModal = true;
    this.$apply();
    wepy.hideTabBar();
  }

  autoAdjustTabTop() {
    const res = wepy.getSystemInfoSync();
    const {screenHeight} = res;
    const self = this;
    const query = wepy.createSelectorQuery();
    query.select('#fake-tabbar').boundingClientRect();
    query.exec(function(res) {
      console.log('boundingClientRect', res);
      const resData = res[0];
      // 獲取全屏的高度 獲取fake-tabbar的實際高度 計算fake-tabbar距離頂端的真實距離
      const fakeTabbarTop = screenHeight- res[0].height;
      console.log('fakeTabbarTop', fakeTabbarTop)
      self.$apply();
    });
  }

  onLoad() {
    this.autoAdjustTabTop();
  }
}
</script>

複製代碼

探討

小程序原生tabbar的高度因手機型號不一樣而發生改變， 可是微信小程序官方卻並無給出一個可獲取tabbar高度的API， 這也使得在使用tabbar圖片進行佔位的效果與真實tabbar顯示以後的實際效果有所差別

是否有更優的方法來產生遮蓋層遮蓋住tabbar導航欄的效果， 並使用戶不會察覺到？

或者又有什麼方法來使自定義tabbar的高度兼容性更好更接近原生的顯示效果？

期待能獲得更多解決方案