小程式專案中有時候需要根據“手機資訊”和“分享膠囊按鈕”的資訊，來設定頁面元素；
比如，自定義導航欄，要根據手機的狀態列和膠囊按鈕height、top來設定自定義導航欄；

獲取方法如下：

在app.vue中獲取存入store中

<script>
export default {
  methods: {
    getMobileInfo() {
      // 膠囊按鈕資訊
      const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
      // 手機資訊
      const mobileInfo = uni.getSystemInfoSync();
      /* 注
       * screenHeight是指手機屏的高度：對應圖中1
       * windowHeight是指頁面可用高度
       * 圖中導航欄是自定義的，windowHeight = screenHeight - tabbar高度：對應圖中2
       * 若導航欄不是自定義的，則windowHeight = screenHeight- tabbar高度 - 導航欄高度
       * 如頁面沒有tabbar， 則windowHeight = screenHeight- 導航欄高度
       */
      // 按鈕與手機狀態列之間的間隙： 對應圖中3
      const menuButtonMaginTopBottom =
        menuButtonInfo.top - mobileInfo.statusBarHeight;
      // 按鈕的border
      const border = 1;
      // 包含分享按鈕的容器高度：圖中藍色區域部分
      const menuButtonContainerHeight =
        menuButtonInfo.height + border * 2 + menuButtonMaginTopBottom * 2;
      //頁面頭的高度（包含手機狀態列）：圖中綠色區域+藍色區域部分
      const pageHeaderHeight =
        mobileInfo.statusBarHeight + menuButtonContainerHeight;
      this.$store.commit("setMobileInfo", {
        // 按鈕右側距離手機屏右側距離，圖中用於設定自定義導航欄的寬；這裡注意menuButtonInfo.right是指按鈕右邊界距離手機屏左側的位置
        menuButtonRight: mobileInfo.windowWidth - menuButtonInfo.right,
        // 按鈕左側距離手機屏左側距離
        menuButtonLeft: menuButtonInfo.left,
        // 按鈕寬
        menuButtonWidth: menuButtonInfo.width,
        // 螢幕寬
        windowWidth: mobileInfo.windowWidth,
        // 高度相關
        statusBarHeight: mobileInfo.statusBarHeight,
        menuButtonContainerHeight,
        pageHeaderHeight,
        windowHeightWhennoBar: mobileInfo.screenHeight - pageHeaderHeight,
      });
    },
  },
  onLaunch: function () {
    // 獲取手機資訊
    this.getMobileInfo();
  },
};
</script>

 

特別注意：

由於每個頁面可用高度windowHeight值可能不同，因為跟是否含有tabbar，是否自定義導航欄有關係，
所以如果有頁面需要使用windowHeight，在頁面的onReady生命週期中單獨獲取