微信小程序獲取膠囊的位置API wx.getMenuButtonBoundingClientRect()獲取失敗的處理

wx.getMenuButtonBoundingClientRect() ios手機偶爾復現是0

這個問題很早就有但是微信官方也一直沒有解決，下面給大家介紹一個兼容做法（wx.getMenuButtonBoundingClientRect()["top"]舉個例子）

1，步驟一 在app.js onLaunch生命周期中首次獲取(這段代碼在ios微信端有時候會返回0)

onLaunch: function (page) {
    // 獲取用戶信息
    let getMenuTop = wx.getMenuButtonBoundingClientRect()["top"];
    wx.setStorageSync('statusBarHeight', getMenuTop);
    if (getMenuTop == 0) {
      setTimeout(() => {
        getMenuTop = wx.getMenuButtonBoundingClientRect()["top"];
        wx.setStorageSync('statusBarHeight', getMenuTop);
      }, 400)
    }
  },
...

globalData: {
    statusBarHeight: wx.getMenuButtonBoundingClientRect()["top"]
  }

我們在用戶首次進入我們小程序時候，用wx.getMenuButtonBoundingClientRect()["top"]獲取一次手機膠囊top信息，這時候如果返回0

我們延遲400毫秒再獲取一次，這時候將獲取的值緩存起來。

*這里你問我為什么不是已經在globalData中，不用globalData，干嘛要寫進緩存？

　　答：實際項目上發現 如果在index.js（首頁）修改globalData了里面的statusBarHeight，在其他頁面拿globalData里的值還是原來的值。

　　所以緩存是最好的辦法

2，步驟二 在index.js onReady 里面再獲取一次（有了這一次保險，獲取就一點問題沒有）

onReady() {
    const _this = this;
    let getMenuTop = wx.getMenuButtonBoundingClientRect()["top"];
    if (wx.getStorageSync('statusBarHeight') == 0) {
      setTimeout(() => {
        wx.setStorageSync('statusBarHeight', getMenuTop);
        _this.setData({
          statusBarHeight: getMenuTop,
        });
      }, 400);
    }
  },

但是，這個方法是在首次進入就打開index（首頁）的是適用，如果你的需求是進入商品詳情，那么就在商品詳情（相對應的）頁面添加

3，特別注意，如果你是在組件 Component 中獲取高度，在 attached 組件生命周期中是最好的

lifetimes: {
    attached: function () {
      this.setData({
        statusBarHeight: wx.getStorageSync('statusBarHeight')
      })
      console.log(this);
    },
  },