微信小程序获取胶囊的位置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);
    },
  },