百度智能小程序 開發(fā).json文件

2020-09-05 15:05 更新

小程序頁面可以使用 .json 文件來對(duì)本頁面的窗口表現(xiàn)進(jìn)行配置。

頁面的配置只能設(shè)置 app.json 中部分 window 配置項(xiàng)的內(nèi)容,頁面中配置項(xiàng)會(huì)覆蓋 app.json 的 window 中相同的配置項(xiàng)。

配置示例

代碼示例

{
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "智能小程序接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
}

頁面配置項(xiàng)列表

屬性類型默認(rèn)值描述最低版本
navigationBarBackgroundColorHexColor#000000導(dǎo)航欄背景顏色,如 #000000
navigationBarTextStyleStringwhite導(dǎo)航欄標(biāo)題顏色,有效值 black / white
navigationBarTitleTextString--導(dǎo)航欄標(biāo)題文字內(nèi)容
navigationStyleStringdefault導(dǎo)航欄樣式,有效值:default(默認(rèn)樣式) custom(自定義導(dǎo)航欄),只保留右上角膠囊按鈕,在頁面級(jí)配置優(yōu)先級(jí)高于全局配置iOS 基礎(chǔ)庫版本 3.0.39, Android 基礎(chǔ)庫版本 2.10.34
backgroundColorHexColor#ffffff窗口的背景色
backgroundTextStyleStringdark下拉 loading 的樣式,有效值 dark / light
backgroundColorTopHexColor#ffffff頂部窗口的背景色,僅 iOS 支持
backgroundColorBottomHexColor#ffffff底部窗口的背景色,僅 iOS 支持
enablePullDownRefreshBooleanfalse是否全局開啟下拉刷新。詳見 Page.onPullDownRefresh
onReachBottomDistanceNumber50頁面上拉觸底事件觸發(fā)時(shí)距頁面底部距離,單位為 px。詳見Page.onReachBottom。
disableScrollBooleanfalse設(shè)置為 true 則頁面整體不能上下滾動(dòng)。只在頁面配置中有效,無法在 app.json 中設(shè)置Android 暫不支持

說明:

  • 頁面的.json 只能設(shè)置 window 相關(guān)的配置項(xiàng),以決定本頁面的窗口表現(xiàn),所以無需寫 window 這個(gè)鍵;
  • navigationStyle 全局配置Android和iOS從基礎(chǔ)庫版本 2.10.34 開始支持, 但子頁面配置支持情況Android從基礎(chǔ)庫版本2.10.34開始支持,iOS從基礎(chǔ)庫版本 3.0.39開始支持, 做低版本兼容時(shí),通過 swan.getSystemInfo 或者 swan.getSystemInfoSync 獲取百度 APP 版本號(hào)進(jìn)行兼容判斷,具體見下表;
  • 無其它特殊說明,請(qǐng)使用SWAN基礎(chǔ)庫版本進(jìn)行兼容判斷。

navigationStyle 配置

頂 bar 設(shè)置iOSAndroidWebView 組件頁面備注
百度 APP 定義的頂 bar無版本限制無版本限制無版本限制
頂 bar 全局透明設(shè)置基礎(chǔ)庫版本 2.10.34基礎(chǔ)庫版本 2.10.34不生效
頂 bar 子頁面透明設(shè)置基礎(chǔ)庫版本 3.0.39基礎(chǔ)庫版本 2.10.34不生效每個(gè) page 的 json 文件可以單獨(dú)配置 navigationStyle

適配提示

原生頂bar高度=狀態(tài)欄高度(statusBarHeight)+頂部導(dǎo)航欄高度(navigationBarHeight);可通過 swan.getSystemInfo 或者 swan.getSystemInfoSync 獲取。


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)