微信小程式的底部使用

weixin_33890499發表於2018-06-07
{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

比較全點的配置

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首頁"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日誌"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}
屬性              型別      必填  描述
pages       String Array    是   設定頁面路徑
window          Object      否   設定預設頁面的視窗表現
tabBar          Object      否   設定底部 tab 的表現
networkTimeout  Object      否   設定網路超時時間
debug           Boolean     否   設定是否開啟 debug 模式
屬性                              型別          預設值     描述
navigationBarBackgroundColor    HexColor    #000000     導航欄背景顏色,如"#000000"
navigationBarTextStyle          String      white       導航欄標題顏色,僅支援 black/white
navigationBarTitleText          String                  導航欄標題文字內容
backgroundColor                 HexColor    #ffffff     視窗的背景色
backgroundTextStyle             String      dark        下拉背景字型、loading 圖的樣式,僅支援 dark/light
enablePullDownRefresh           Boolean     false       是否開啟下拉重新整理

tabBar 是一個陣列,只能配置最少2個、最多5個 tab,tab 按陣列的順序排序。

屬性說明:

屬性              型別      必填      預設值     描述
color           HexColor    是               tab 上的文字預設顏色
selectedColor   HexColor    是               tab 上的文字選中時的顏色
backgroundColor HexColor    是               tab 的背景色
borderStyle     String      否       black       tabbar上邊框的顏色, 僅支援 black/white
list            Array       是               tab 的列表,最少2個、最多5個 tab
position        String      否       bottom      可選值 bottom、top

其中 list 接受一個陣列,陣列中的每個項都是一個物件,其屬性值如下:

屬性              型別  必填      說明
pagePath        String  是   頁面路徑,必須在 pages 中先定義
text            String  是   tab 上按鈕文字
iconPath        String  是   圖片路徑,icon 大小限制為40kb,建議尺寸為 81px * 81px
selectedIconPath String 是   選中時的圖片路徑,icon 大小限制為40kb,建議尺寸為 81px * 81px

networkTimeout
可以設定各種網路請求的超時時間。

屬性說明:

屬性              型別      必填      說明
request         Number      否   wx.request的超時時間,單位毫秒,預設為:60000
connectSocket   Number      否   wx.connectSocket的超時時間,單位毫秒,預設為:60000
uploadFile      Number      否   wx.uploadFile的超時時間,單位毫秒,預設為:60000
downloadFile    Number      否   wx.downloadFile的超時時間,單位毫秒,預設為:60000

debug
可以在開發者工具中開啟 debug 模式,在開發者工具的控制檯皮膚,除錯資訊以 info 的形式給出,其資訊有Page的註冊,頁面路由,資料更新,事件觸發 。 可以幫助開發者快速定位一些常見的問題。

page.json
每一個小程式頁面也可以使用.json檔案來對本頁面的視窗表現進行配置。 頁面的配置比app.json全域性配置簡單得多,只是設定 app.json 中的 window 配置項的內容,頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。

頁面的.json只能設定 window 相關的配置項,以決定本頁面的視窗表現,所以無需寫 window 這個鍵,如:

屬性                              型別      預設值     描述
navigationBarBackgroundColor    HexColor    #000000 導航欄背景顏色,如"#000000"
navigationBarTextStyle          String      white   導航欄標題顏色,僅支援 black/white
navigationBarTitleText          String              導航欄標題文字內容
backgroundColor                 HexColor    #ffffff 視窗的背景色
backgroundTextStyle             String      dark    下拉背景字型、loading 圖的樣式,僅支援 dark/light
enablePullDownRefresh           Boolean     false   是否開啟下拉重新整理,詳見頁面相關事件處理函式。
disableScroll                   Boolean     false   設定為 true 則頁面整體不能上下滾動;只在 page.json 中有效,無法在 app.json 中設定該項
{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信介面功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

相關文章