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
Weex 針對 iPhone X 的兼容直接發生在前端開發層面。android
「不會搞 Native 是前提」,有了這個前提,咱們就只能本身動手了。git
動手的原則就是,「合理利用每寸空間,將內容展現在安全區內」。github
安全區是蘋果用來描述 iPhone X 的合理顯示區域。vue-router
手機縱向持握狀態下,安全區是從屏幕最頂端往下 44 pt 開始計算的,要注意的是,它並非和「齊劉海」徹底齊平的,而是要再往下一點。「下巴」位置上,從下往上推 34 pt 以上的部分開始才被視爲安全區。
至於橫向就很差描述了,直接上圖吧。
更多關於 iPhone X UI 適配的概念能夠看看這篇文章
原則上,咱們是將內容顯示在安全區內,但必定是在「天然過分」的前提下。
此 demo 沒有橫屏模式,全部,惟一須要適配的就是,豎屏模式下安全區外的界面遮擋處理。
也就是上下兩個部份內收處理。空出來的部分用同色色塊填充。
既要適配 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 構建的項目仍是很好適配的。
最基本的作法就是使用計算屬性獲得是否爲 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 實例,因此必須作好容錯。
若是是使用了 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