記一次 Weex 的 iPhone X 適配

前言

iPhone X 上市也一月有餘了，「齊劉海」的設計給全世界的 IOS 和 M 站開發人員出了一道兼容題目，默認效果問題雖不嚴重，可是足以逼瘋強迫症患者。幸得項目「空窗期」，實踐下 iPhone X 的適配。還記得以前的一篇文章嗎？《【Weex】網易嚴選 App 感覺 Weex 開發》，此處將以此 demo 爲基礎作展開 Weex 適配。Native 和 H5 的適配此處就再也不作贅述了。「專業 IOS 開發同窗就當個笑話看看吧，反正你都會，此文是寫給不會原生的朋友的」

默認的樣子

若是不仔細看，還覺得是 iPhone 7 的效果，這也是官方「故意爲之」的。

若是你用慣了 iPhone X，無心識地打開了一個相似上圖的 app，着實會有點難以接受。

全屏操做

打開 iPhone X 的全屏模式其實很簡單，只須要在 Xcode 裏配置 iPhone X 的 LaunchImage 便可，也能夠直接改配置文件。

可能 Weex Toolkit 構建出來的 Platform 內不含這兩個配置圖片，不過不要緊，右擊選擇「Show in Finder」，更改 「Contents.json」 配置文件。

{
    "images" : [
        {
            "extent" : "full-screen",
            "idiom" : "iphone",
            "subtype" : "2436h",
            "filename" : "Default2@3x-1.png",
            "minimum-system-version" : "11.0",
            "orientation" : "portrait",
            "scale" : "3x"
        },
        {
            "extent" : "full-screen",
            "idiom" : "iphone",
            "subtype" : "2436h",
            "filename" : "Default2@3x.png",
            "minimum-system-version" : "11.0",
            "orientation" : "landscape",
            "scale" : "3x"
        },
        {
            // other conf
        }
    ],
    "info" : {
        "version" : 1,
        "author" : "xcode"
    }
}

複製代碼

再添加兩張 1125×2436 的圖片，記得名字須要和 filename 匹配，而後從新構建，你就會發現，他全屏啦！

同 native 適配有何不一樣

Weex 針對 iPhone X 的兼容直接發生在前端開發層面。

「不會搞 Native 是前提」,有了這個前提，咱們就只能本身動手了。

動手的原則就是，「合理利用每寸空間，將內容展現在安全區內」。

什麼是安全區

安全區是蘋果用來描述 iPhone X 的合理顯示區域。

手機縱向持握狀態下，安全區是從屏幕最頂端往下 44 pt 開始計算的，要注意的是，它並非和「齊劉海」徹底齊平的，而是要再往下一點。「下巴」位置上，從下往上推 34 pt 以上的部分開始才被視爲安全區。

至於橫向就很差描述了，直接上圖吧。

更多關於 iPhone X UI 適配的概念能夠看看這篇文章

方向

原則上，咱們是將內容顯示在安全區內，但必定是在「天然過分」的前提下。

此 demo 沒有橫屏模式，全部，惟一須要適配的就是，豎屏模式下安全區外的界面遮擋處理。

也就是上下兩個部份內收處理。空出來的部分用同色色塊填充。

識別 iPhone X

既要適配 iPhone X 又不能影響其餘系統，那就須要作「特殊識別處理」。

怎麼識別 iPhone X？

幸運的是，Weex 官方有 API 提供平臺消息，weex.config，

weex.config

該變量包含了當前 Weex 頁面的全部環境信息，包括不只限於：

bundleUrl: JS bundle 的 URL，和頁面的 URL 一致。

env: Object: 環境對象。

• weexVersion: string: Weex sdk 版本。
• appName: string: 應用名字。
• appVersion: string: 應用版本。
• platform: string: 平臺信息，是 iOS、Android 仍是 Web。
• osName: string: iOS或者android，表示操做系統的名稱.
• osVersion: string: 系統版本。
• deviceModel: string: 設備型號 (僅原生應用) 。
• deviceWidth: number: 設備寬度。Weex 默認以寬度爲 750px 作適配渲染，要得到750px下的屏幕高度，能夠經過height = 750/deviceWidth*deviceHeight 公式得到，可使用到 CSS 中，用來設置全屏尺寸
• deviceHeight: number: 設備高度。

iPhone X 環境下，weex.config.env.deviceModel 將返回 iPhone X 的特有標識 'iPhone10,3 or iPhone10,6'，「注意 Xcode 虛擬機拿到的未必是正確的標識」

iPhone 5 - X 的標示

iPhone	models
5	iPhone5,1 和 iPhone5,2
5c	iPhone5,3 和 iPhone5,4
5s	iPhone6,1 和 iPhone6,2
6	iPhone7,2
6 Plus	iPhone7,1
6s	iPhone8,1
6s Plus	iPhone8,2
SE	iPhone8,4
7	iPhone9,1 和 iPhone9,3
7 Plus	iPhone9,2 和 iPhone9,4
8	iPhone10,1 和 iPhone10,4
8 Plus	iPhone10,2 和 iPhone10,5
X	iPhone10,3 和 iPhone10,6

更多關於 iPhone 的信息可參考這裏

或者根據 操做系統 & 像素比 & 屏幕尺寸 組合判斷是不是「劉海屏」。

留白

在識別到 iPhone X 的標識後，作相應的留白便可，就這麼簡單，複雜度由你的項目決定，通常狀況下，Weex 構建的項目仍是很好適配的。

計算屬性和 class 綁定

最基本的作法就是使用計算屬性獲得是否爲 iPhone X 標記，在配合 class 綁定的「數組語法」能夠輕鬆實現適配。

<template>
    <div :class="['wrapper', isipx?'w-ipx':'']">
    </div>
</template>
<script> export default { data () {}, computed:{ isipx:function () { return weex && (weex.config.env.deviceModel === 'iPhone10,3' || weex.config.env.deviceModel === 'iPhone10,6'); } }, } </script>
<style scoped> .wrapper{ /* 正常樣式 */ } .w-ipx{ /* iPhone X 樣式 */ } </style>
複製代碼

此處須要注意，在初始化時計算屬性的做用域內未必每次都能拿到 weex 實例，因此必須作好容錯。

mixin 配合 router

若是是使用了 vue-router 可使用 mixin 函數混入，很是方便。

<template>
    <div :class="['wrapper', isIpxFuc()?'w-ipx':'']">
    </div>
</template>
<script> export default { data () {} } </script>
<style scoped> .wrapper{ /* 正常樣式 */ } .w-ipx{ /* iPhone X 樣式 */ } </style>
複製代碼

總結

從最終效果圖上看，還能夠，至少知足了個人需求。只不過實現起來有些麻煩，Weex 是單頁的結構，每一個頁面都須要單獨作適配，若是從 Native 上作處理，就須要有必定的 Native 開發技能，加之良好的架構和協議設計。可是，Native 的處理遠沒有 UI 處理來的靈活。

總的來說，Native 層和 UI 層的方法各有利弊，具體實施還需結合項目。

「沒有最好的錘子，只有最適合釘子的錘子🔨」

轉載請標明出處

做者： 木羽 zwwill

首發地址：github.com/zwwill/blog…