記一次 Weex 的 iPhone X 適配

前言

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

默認的樣子

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

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

全屏操做

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

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

{
    "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 匹配,而後從新構建,你就會發現,他全屏啦!java

同 native 適配有何不一樣

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

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

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

什麼是安全區

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

手機縱向持握狀態下,安全區是從屏幕最頂端往下 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…

相關文章
相關標籤/搜索