微信小程式吸底區域適配iPhone X

原文連結：微信小程式吸底區域適配iPhone X

微信小程式適配iPhone X主要針對fix定位到底部的區域，比如詳情頁或購物車底部的按鈕欄，會與iPhone X的Home Indicator橫條重疊，這樣在點選下方按鈕時很容易誤觸發手勢操作，如下圖：

舊方法

1. 獲取裝置資訊

/**
 * 獲取裝置資訊
 * @returns {Promise<any>}
 */
export function wechatGetSystemInfo () {
  return new Promise((resolve, reject) => {
    wx.getSystemInfo({
      success: (res) => {
        resolve(res)
      }, fail: (err) => {
        reject(err)
      }
    })
  })
}

2. 設定css樣式

.view-fix-iphonex {
  bottom: ~'68rpx' !important;
}

.view-fix-iphonex::after {
  content: ' ';
  position: fixed;
  bottom: 0 !important;
  height: ~'68rpx' !important;
  width: 100%;
  background: #fff;
}

3. 設定一個識別符號isIpx存在vuex中，在小程式初始化完成時判斷

在 App.vue 中處理

<script>
  import wx from 'wx'
  import { mapGetters, mapActions } from 'vuex'
  import { wechatGetSystemInfo } from './utils/weappUtils'

  export default {
    onLaunch () {
      this.isIphoneX()
    },
    computed: {
      ...mapGetters(['isIpx'])
    },
    methods: {
      //判斷裝置是否是iphoneX
      isIphoneX() {
        wechatGetSystemInfo().then(res => {
          const deviceModel = 'iPhone X'
          let isIpx = false
          if (res.model.indexOf(deviceModel) > -1) {
            isIpx = true
          }
          if (this.isIpx !== isIpx) {
            this.setIsIpx(isIpx)
          }
        }).catch(err => {})
      },
      ...mapActions(['setIsIpx'])
    }
  }
</script>

4. 在需要適配的頁面中設定

如在 demo.vue 中處理

<template>
     <div class="fix-view"
         :class="isIpx?'view-fix-iphonex':''"
    >
     吸附在底部的區域
    </div>
</template>


<script>
  import wx from 'wx'
  import {mapGetters} from 'vuex'

  export default {
    computed: {
      ...mapGetters(['isIpx'])
    },
  }
</script>

<style lang="less">
    .fix-view {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      height: ~'100rpx';
      line-height: ~'100rpx';
      box-sizing: border-box;
      text-align: right;
      display: flex;
      justify-content: end;
      background: #fff;
    }
</style>

新方法

env() 和 constant()

iOS11 新增特性，Webkit 的一個 CSS 函式，用於設定安全區域與邊界的距離，有四個預定義的變數：

• safe-area-inset-left：安全區域距離左邊邊界距離
• safe-area-inset-right：安全區域距離右邊邊界距離
• safe-area-inset-top：安全區域距離頂部邊界距離
• safe-area-inset-bottom：安全區域距離底部邊界距離

這裡我們只需要關注 safe-area-inset-bottom 這個變數，因為它對應的就是小黑條的高度（橫豎屏時值不一樣）。

注意：當 viewport-fit=contain 時 env() 是不起作用的，必須要配合 viewport-fit=cover 使用。對於不支援env() 的瀏覽器，瀏覽器將會忽略它。

在這之前，筆者使用的是 constant()，後來，官方文件加了這麼一段註釋（坑）：

The env() function shipped in iOS 11 with the name constant(). Beginning with Safari Technology Preview 41 and the iOS 11.2 beta, constant() has been removed and replaced with env(). You can use the CSS fallback mechanism to support both versions, if necessary, but should prefer env() going forward.

這就意味著，之前使用的 constant() 在 iOS11.2 之後就不能使用的，但我們還是需要做向後相容，像這樣：

padding-bottom: constant(safe-area-inset-bottom); /* 相容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 相容 iOS >= 11.2 */

注意：env() 跟 constant() 需要同時存在，而且順序不能換。

更詳細說明，參考文件：Designing Websites for iPhone X

如何適配

瞭解了以上所說的幾個知識點，接下來我們適配的思路就很清晰了。

第一步：設定網頁在可視視窗的佈局方式

新增 viweport-fit 屬性，使得頁面內容完全覆蓋整個視窗：

<meta name="viewport" content="width=device-width, viewport-fit=cover">

前面也有提到過，只有設定了 viewport-fit=cover，才能使用 env()。

第二步：頁面主體內容限定在安全區域內

這一步根據實際頁面場景選擇，如果不設定這個值，可能存在小黑條遮擋頁面最底部內容的情況。

body {  
	padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

第三步：fixed 元素的適配

型別一：fixed 完全吸底元素（bottom = 0），比如下圖這兩種情況：

可以通過加內邊距 padding 擴充套件高度：

{  
	padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

或者通過計算函式 calc 覆蓋原來高度：

{  
	height: calc(60px(假設值) + constant(safe-area-inset-bottom));
    height: calc(60px(假設值) + env(safe-area-inset-bottom));
}

 

注意，這個方案需要吸底條必須是有背景色的，因為擴充套件的部分背景是跟隨外容器的，否則出現鏤空情況。

還有一種方案就是，可以通過新增一個新的元素（空的顏色塊，主要用於小黑條高度的佔位），然後吸底元素可以不改變高度只需要調整位置，像這樣：

{  
	margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
}

空的顏色塊：

{  
	position: fixed;
    bottom: 0;
    width: 100%;
    height: constant(safe-area-inset-bottom);
    height: env(safe-area-inset-bottom);
    background-color: #fff;
}

型別二：fixed 非完全吸底元素（bottom ≠ 0），比如 “返回頂部”、“側邊廣告” 等

像這種只是位置需要對應向上調整，可以僅通過外邊距 margin 來處理：

{  
	margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
}

或者，你也可以通過計算函式 calc 覆蓋原來 bottom 值：

{  
	bottom: calc(50px(假設值) + constant(safe-area-inset-bottom));
    bottom: calc(50px(假設值) + env(safe-area-inset-bottom));
}

你也可以使用 @supports 隔離相容樣式

寫到這裡，我們常見的兩種型別的 fixed 元素適配方案已經瞭解了吧。如果我們只希望 iPhoneX 才需要新增適配樣式，我們可以配合 @supports 來隔離相容樣式，當然這個處理對頁面展示實際不會有任何影響：

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) { 
	div {
    	margin-bottom: constant(safe-area-inset-bottom);
        margin-bottom: env(safe-area-inset-bottom);  
    }
}