iPhone X 適配

由于iPhone X的特殊造型，為了方便開發(fā)者對iPhone X進行適配，蘋果在iOS 11中引入了Safe Area的概念，引擎也在api對象下添加了safeArea屬性和safeareachanged事件，UI設(shè)計準則是頁面重要的元素需要在安全區(qū)域以內(nèi)，避免被遮擋。

對于大多數(shù)應用，通過以下幾步基本就可以完成iPhone X的適配，其它的特殊情況如橫豎屏切換等則需要結(jié)合使用場景另外處理。

注：如果沒有iPhone X真機，有需求的開發(fā)者可以到這里下載iOS的模塊開發(fā)工程，使用Xcode9及更高版本將項目運行在iPhone X模擬器上面調(diào)試。

一、上傳iPhone X啟動圖

進入控制臺端設(shè)置，上傳iPhone X啟動圖，圖片尺寸為1125*2436，運行效果如下圖。若未上傳對應的iPhone X啟動圖或者啟動圖格式不正確，應用運行在iPhone X上面時上下將有大黑邊，不能全屏運行。

image

二、解決頂部header被遮擋

由于iPhone X頂部的特殊形狀，狀態(tài)欄高度不再是以前的20px，而是變成了44px，如果應用開啟了沉浸式效果，那么頁面頂部會被遮住部分，如圖：

image

找到api.js中的fixIos7Bar、fixStatusBar方法，用以下代碼替換即可。

u.fixIos7Bar = function(el){
    return u.fixStatusBar(el);
};
u.fixStatusBar = function(el){
    if(!u.isElement(el)){
        console.warn('$api.fixStatusBar Function need el param, el param must be DOM Element');
        return 0;
    }
    el.style.paddingTop = api.safeArea.top + 'px';
    return el.offsetHeight;
};

修改過后的頂部效果如圖：

image

三、解決底部標簽欄被虛擬home鍵遮擋

由上面的圖可以看到，頁面底部的標簽欄也被虛擬home鍵遮擋住了部分。對于虛擬home鍵，可以通過openWin和setWinAttr方法的hideHomeIndicator參數(shù)來控制顯示隱藏，這對于沉浸式體驗較高的場景很有用（比如觀看視頻）。而一般的頁面通常的做法是避開虛擬home鍵，這里參考header的處理，我們在api.js中添加一個fixTabBar方法：

u.fixTabBar = function(el){
    if(!u.isElement(el)){
        console.warn('$api.fixTabBar Function need el param, el param must be DOM Element');
        return 0;
    }
    el.style.paddingBottom = api.safeArea.bottom + 'px';
    return el.offsetHeight;
}

然后在需要的地方進行調(diào)用：$api.fixTabBar($api.byId('footer'))，修改后的效果如圖：

image

PS: 入坑說明

• Apicloud 里面的App沒有全屏模式
  云編譯要求上傳iPhoneX的啟動頁，不傳不全屏
• 沒有iPhoneX手機，開發(fā)調(diào)試怎么玩
  更新IOS 10.3 安裝新版Xcode，不更新，新的Xcode安裝不了，不是新Xcode 沒有iPhoneX的模擬器，
  Apicloud 下載模塊開發(fā)示例項目，在Xcode里跑起來
  沒有蘋果電腦，那就算了
• 蘋果宣布，四月份全部App適配 iPhoneX
  商店審核不過，如果不更新，不影響