微信小程序適配 iPhone X 總結

原文連接

本文主要介紹咱們的知識小集小程序在適配 iPhone X 屏幕時遇到的一些問題以及總結，但願對你的小程序開發能有所幫助。

iPhone X 屏幕數據

在去年 9 月份 iPhone X 正式發佈後，引起了一波 iOS App 適配 iPhone X 的熱潮和技術文章，詳情能夠參考掘金技術社區的這個專題：《iPhone X 適配實踐》

咱們這裏先簡單總結一下 iPhone X 屏幕的基礎數據，方便後續在小程序開發中進行適配。

• 屏幕尺寸：5.8 英寸（對角線）

• 屏幕物理分辨率：1125px × 2436px，458 ppi

• 實際開發適配尺寸：375pt × 812pt，@3x

此外，因爲在 iPhone X 屏幕頂部狀態欄區域有「齊劉海」，以及在屏幕底部增長了「操做條」，以下圖所示，所以，咱們在開發中須要注意安全區域的問題。

根據蘋果官方的文檔，iPhone X 頂部狀態欄的適配安全區域的高度爲 44pt，底部操做條區域的高度爲 34pt。另外，在 iPhone X 中，一些系統 Bar 的默認高度相比於以前的設備也發生了變化，以下表所示。

因此在 iOS App 開發中，若是咱們使用系統默認的 UINavigationController 和 UITabBarController 時，則無需額外的適配工做，iOS 系統會自動適配好相關 Bar 的安全區域問題。若是咱們使用了自定義的導航欄和標籤欄，則須要注意根據設備類型區分設置這些 Bar 的不一樣高度。

小程序的尺寸單位

爲了解決不一樣屏幕尺寸的適配問題，小程序本身定了一個尺寸單位：rpx（responsive pixel），它能夠根據屏幕寬度進行自適應。小程序中規定，全部設備的屏幕寬度都爲 750rpx，根據設備屏幕實際寬度的不一樣，1rpx 所表明的實際像素值也不同。

根據微信開發文檔，在 4.7 英寸的 iPhone 設備上（iPhone 6/7/8），屏幕寬度爲 375px（此處應該理解爲 375 point），共有 750 個物理像素，則 750rpx = 375px = 750 物理像素，1rpx = 0.5px = 1物理像素。

小程序中如何判斷設備爲 iPhone X

上面咱們簡要介紹了 iPhone X 的屏幕數據和小程序中的尺寸單位做爲鋪墊，如今終於要切入正題了，要在小程序中適配 iPhone X 屏幕，首先咱們須要知道如何判斷設備類型。

微信的小程序 API 中提供了一個 wx.getSystemInfo(OBJECT) 方法用於獲取用戶手機的系統信息和設備信息，包含以下數據：

上述每一個字段的含義詳見文檔，咱們再也不一一贅述。

所以，咱們能夠根據該方法返回的手機型號字段 model 是否包含 iPhone X 字符串來判斷設備是否爲 iPhone X，也能夠根據 screenHeight 的高度是否等於 812 來判斷。

NOTE: 這裏有一個小坑須要注意，在微信開發者工具中的模擬器，若是選擇爲 iPhone X，此時獲取到的 model 值爲 iPhone X，致使我覺得真機也是這個值，因而直接用 if (model == 'iPhone X') 來判斷，但其實真機下 model 的值爲這種格式： iPhone X (GSM+CDMA)<iPhone10,3>，所以咱們須要用字符串檢索匹配進行判斷。

綜上，咱們能夠在 app.js 的 globalData 中添加一個字段 isIPX 用於標識當前設備是否爲 iPhone X，而後在小程序啓動時 onLaunch 中調用 wx.getSystemInfo(OBJECT) 方法並在其 success 回調中讀取 model 字段進行分析，代碼大體以下：

App({
  // 全局數據
  globalData: {
    // 其餘數據定義 ...
    
    isIPX: false, // 當前設備是否爲 iPhone X
  },
  
  // 小程序啓動入口
  onLaunch: function (options) {
    // 其餘啓動代碼...
    
    // 判斷設備是否爲 iPhone X
    this.checkIsIPhoneX()
  },
  
  checkIsIPhoneX: function() {
    const self = this
    wx.getSystemInfo({
      success: function (res) {
        // 根據 model 進行判斷
        if (res.model.search('iPhone X') != -1) {
          self.globalData.isIPX = true
        }
        // 或者根據 screenHeight 進行判斷
        // if (res.screenHeight == 812) {
        // self.globalData.isIPX = true
        // }
      }
    })
  },
複製代碼

若是須要小程序啓動時當即獲取設備相關信息，也能夠調 wx.getSystemInfoSync() 方法，它會同步獲取數據並當即返回。

頁面適配實戰

在小程序頁面開發中，涉及到須要適配 iPhone X 的地方主要有：導航欄（NavigationBar），標籤欄（TabBar）以及頁面底部的吸底按鈕。

• 導航欄和標籤欄適配

若是咱們使用微信小程序官方組件進行開發，沒有進行自定義，在 app.json 文件中設置 tabBar 頁面，且 window 的 navigationStyle 值爲 default，那麼咱們無需在 iPhone X 中對導航欄和標籤欄進行適配，微信會自動幫咱們適配好，以下圖爲知識小集小程序的首頁：

可是咱們若是是自定義導航欄（在 app.json 文件中設置 window 的 navigationStyle 爲 custom，此時只保留右上角膠囊狀的按鈕，須要開發者本身畫導航欄樣式）和標籤欄，則咱們須要在每一個頁面中判斷設備類型，並針對 iPhone X 屏幕在安全區域內進行佈局，而後修改相關 Bar 的高度值（見上述表格）。

以自定義導航欄適配爲例，步驟以下：

（1）在每一個頁面的 page.js 中先讀取 app.js 中的 isIPX 值，以下：

const app = getApp()

Page({
  data: {
    // 頁面其餘數據...
    
    isIPX: app.globalData.isIPX,
  },
  
  // 其餘代碼
複製代碼

（2）而後在 page.wxss 樣式文件中對某一個視圖 View 分別爲普通屏幕和 iPhone X 屏幕寫兩種樣式，以下：

.navi-bar-view {
  height: 64px;
  /* 其餘樣式值 */
}
.navi-bar-view-IPX {
  height: 88px;
  /* 其餘樣式值 */
}
複製代碼

（3）最後在 page.wxml 頁面結構佈局中根據 isIPX 的值給 View 設置不一樣的 class 樣式，以下：

<view class="{{isIPX ? 'navi-bar-view-IPX' : 'navi-bar-view'}}">
</view>
複製代碼

此外，對於自定義導航欄和標籤欄，我建議仍是要遵循 iPhone UI 的設計規範，樣式能夠參考蘋果官方的渲染圖：

• 吸底按鈕適配

在小程序頁面中，吸底按鈕是很常見的一種設計，咱們通常會把一些重要的按鈕放在頁面底部懸浮不動，例如咱們知識小集小程序的「小集詳情頁」底部的「收藏」和「轉發」按鈕：

在 iPhone X 中咱們須要把吸底按鈕往上偏移 34 像素，可經過在 CSS 樣式中設置 padding-bottom 爲 34px 實現，參考代碼以下：

.feed-bottom-view {
  width: 100%;
  height: 48px; /* 吸底按鈕的高度 */
  bottom: 0;
  opacity: 0.95;
  position: fixed;
  border-top-style: solid;
  border-top-width: 0.5px; /* 分割線的高度 */
  border-color: lightgrey;
  background-color: #F8F8F8;
}
.feed-bottom-view-IPX {
  /* iPhone X 內容往上偏移 34px */
  padding-bottom: 34px;
}
複製代碼

<view class="{{isIPX ? 'feed-bottom-view feed-bottom-view-IPX' : 'feed-bottom-view'}}">
<!-- 底部吸底按區域 -->
</view>
複製代碼

**備註：**如前面所述，對於不一樣設備寬度，1rpx 所表明的實際像素值也不同，而在不一樣尺寸的 iPhone 設備（3.5/4.0/4.7/5.5 英寸）中，雖然它們的寬度不一樣，但其導航欄+狀態欄的高度都爲 64pt（iPhone X 爲 88pt），標籤欄 TabBar 的高度都爲 49pt（iPhone X 爲 83pt）。因此在小程序開發中，當咱們須要自定義導航欄、標籤欄，或者適配 iPhone X 頂部和底部安全區域時，我建議此處的單位直接使用 px（在小程序中對應 iOS 開發中的點 pt）而不使用 rpx（固然頁面的其餘元素的尺寸描述仍是推薦使用 rpx），以確保最終渲染顯示的高度與 iOS 系統默認的一致。

總結

本文簡要介紹了在小程序開發中如何適配 iPhone X 屏幕，更多細節請查閱咱們在 GitHub 上開源的知識小集小程序的代碼：awesome-tips-wx-app

關注咱們

歡迎關注咱們的公衆號：iOS-Tips，也歡迎加入咱們的羣組討論問題。能夠公衆號留言 ios、flutter、web、pwa、小程序 等關鍵詞獲取入羣方式。

推薦閱讀

微信小程序「反編譯」實戰（一）：解包

微信小程序「反編譯」實戰（二）：源碼還原

淺析微信小程序 App() 和 Page() 函數的內部實現