百度智能小程序 頁面布局

頁面布局

基礎(chǔ)布局

基于寬度 750px（iPhone 6）輸出視覺方案，我們在布局智能小程序信息時，為信息內(nèi)容區(qū)至少留出左右邊距 34px（17pt），限制內(nèi)容寬度以獲得最佳的可讀性。

透明框架布局適配

當(dāng)開發(fā)者使用小程序的原生頂部導(dǎo)航欄時，開發(fā)者只需要在頂部導(dǎo)航欄下方開始布局頁面即可。

智能小程序在百度 APP v11.1 及以上版本，可以 自定義頂部導(dǎo)航欄 ，使其只保留框架控制功能區(qū)，后文簡稱為“透明框架”。

1. 默認(rèn)框架，使用小程序頂部導(dǎo)航欄；

2. 透明框架。

透明框架下，頁面布局從屏幕頂部開始，請注意頁面內(nèi)容應(yīng)布局在安全區(qū)內(nèi)，否則會導(dǎo)致信息閱讀體驗(yàn)差，或可點(diǎn)擊元素功能不可用。

小程序透明框架的安全區(qū) = 屏幕 -（系統(tǒng)狀態(tài)欄（1） + 框架控制功能區(qū)（2））

上滑頁面時，為保證元素正常顯示，可以為系統(tǒng)狀態(tài)欄區(qū)域單獨(dú)賦予背景顏色。

頁面上滑時，內(nèi)容可能與系統(tǒng)狀態(tài)欄上的內(nèi)容交疊，建議此時為系統(tǒng)狀態(tài)欄加上背景色。

全面屏頂部導(dǎo)航欄適配

原生頂部導(dǎo)航欄適配策略

當(dāng)開發(fā)者使用小程序的頂部導(dǎo)航欄時，我們會針對不同劉海屏機(jī)型進(jìn)行適配，開發(fā)者只需要在頂部導(dǎo)航欄下方開始布局頁面即可。

自定義頂部導(dǎo)航欄適配

但如果使用自定義頂部導(dǎo)航欄（透明框架），此時開發(fā)者需要自行適配。

左：全面屏iPhone 安全區(qū) = 屏幕 -（系統(tǒng)狀態(tài)欄（1） + 框架控制功能區(qū)（2）+ 底部指示區(qū)（3））右：全面屏安卓手機(jī) 安全區(qū) = 屏幕 -（系統(tǒng)狀態(tài)欄（1） + 框架控制功能區(qū)（2））

全面屏手機(jī)的劉海高度等同于系統(tǒng)狀態(tài)欄的高度。通過系統(tǒng)信息接口getSystemInfoSync獲得系統(tǒng)狀態(tài)欄的高度（statusBarHeight），在全面屏手機(jī)頁面布局中增加系統(tǒng)狀態(tài)欄的高度。

注意：全面屏 iPhone 底部適配

在布局上，全面屏 iPhone 需要格外關(guān)注底部橫條（Home Indicator）的配置。全面屏 iPhone 的底部橫條默認(rèn)透明，如開發(fā)者使用小程序底部標(biāo)簽欄，底部橫條會自動適配底部標(biāo)簽欄的背景顏色。

1. 默認(rèn)底部橫條透明；

2. 使用底部標(biāo)簽欄，自動適配底部橫條。

當(dāng)開發(fā)者未使用底部標(biāo)簽欄組件，而是自主開發(fā)底部欄（如購物欄，評論欄），需注意此區(qū)域不可布局可操作元素，避免誤操作。可以調(diào)用小程序提供的.view_css適配全面屏 iPhone，把底部橫條顏色適配為與底部欄一致。