百度智能小程序設計指南-頁面布局
- 威海自媒體運營與推廣 威海百度智能小程序運營
- 1479
基礎布局
基于寬度 750px（iPhone 6）輸出視覺方案，我們在布局智能小程序信息時，為信息內容區至少留出左右邊距 34px（17pt），限制內容寬度以獲得最佳的可讀性。
正確
內容左右邊距應至少留出34px。
錯誤
邊距過寬，頁面元素過于集中。
錯誤
邊距過窄，頁面元素過于分散。
透明框架布局適配
當開發者使用小程序的原生頂部導航欄時，開發者只需要在頂部導航欄下方開始布局頁面即可。
智能小程序在基礎庫 2.10.7 及以上版本，可以自定義頂部導航欄，使其只保留框架控制功能區，后文簡稱為“透明框架”。
1. 默認框架，使用小程序頂部導航欄；
1. 透明框架。
透明框架下，頁面布局從屏幕頂部開始，請注意頁面內容應布局在安全區內，否則會導致信息閱讀體驗差，或可點擊元素功能不可用。
小程序透明框架的安全區 = 屏幕 -（系統狀態欄（1） + 框架控制功能區（2））
正確
頁面元素和功能均在安全區內展現。
錯誤
頁面元素和功能超出安全區，無法正常使用。
上滑頁面時，為保證元素正常顯示，可以為系統狀態欄區域單獨賦予背景顏色。
頁面上滑時，內容可能與系統狀態欄上的內容交疊，建議此時為系統狀態欄加上背景色。
全面屏頂部導航欄適配
原生頂部導航欄適配策略
當開發者使用小程序的頂部導航欄時，我們會針對不同劉海屏機型進行適配，開發者只需要在頂部導航欄下方開始布局頁面即可。
自定義頂部導航欄適配
但如果使用自定義頂部導航欄（透明框架），此時開發者需要自行適配。
左：全面屏iPhone 安全區 = 屏幕 -（系統狀態欄（1） + 框架控制功能區（2）+ 底部指示區（3））
右：全面屏安卓手機 安全區 = 屏幕 -（系統狀態欄（1） + 框架控制功能區（2））
全面屏手機的劉海高度等同于系統狀態欄的高度。
通過系統信息接口getSystemInfoSync獲得系統狀態欄的高度（statusBarHeight），在全面屏手機頁面布局中增加系統狀態欄的高度。
正確
正確考慮狀態欄高度
錯誤
元素被遮擋，顯示不全。
注意：全面屏 iPhone 底部適配
在布局上，全面屏 iPhone 需要格外關注底部橫條（Home Indicator）的配置。
全面屏 iPhone 的底部橫條默認透明，如開發者使用小程序底部標簽欄，底部橫條會自動適配底部標簽欄的背景顏色。
1. 默認底部橫條透明；
2. 使用底部標簽欄，自動適配底部橫條。
當開發者未使用底部標簽欄組件，而是自主開發底部欄（如購物欄，評論欄），需注意此區域不可布局可操作元素，避免誤操作。
可以調用小程序提供的.view_css適配全面屏 iPhone，把底部橫條顏色適配為與底部欄一致。
正確
底部橫條已正確配置，顏色與底部欄一致。
錯誤
底部橫條未正確配置。
來源：百度智能小程序
