微信小程式------全域性配置設定

昨夜小楼听风雨發表於2024-05-26
微信小程式

1、常用配置

專案跟目錄下app.json就是應用級配置檔案

屬性　 說明
pages 頁面路徑列表
window　 全域性預設視窗表現　
tabBar 底部tab欄的實現
networkTimeout 網路超時時間
debug 是否開啟除錯模式。預設為false
requiredBackgroundModes 需要在後臺使用的能力，如音樂播放
plugins 使用到的外掛

2、pages配置

　　用來儲存和新建頁面，首先展示的是第一個設定的頁面內容

  "pages": [
    "pages/index/index",
    "pages/picture/picture",
    "pages/video/video",
    "pages/map/map",
    "pages/guest/guest"
  ],

3、window

　　用於設定全域性配置

  "window": {
    "backgroundTextStyle":"light",   //設定下拉重新整理時的loading樣式
    "navigationBarBackgroundColor": "#ff4c91",  //設定導航欄背景色
    "navigationBarTextStyle": "white",   //設定導航欄的標題顏色
    "enablePullDownRefresh": false,     //全域性開啟下拉重新整理
    "navigationStyle": "custom"   //設定右上角膠囊按鈕，預設為default 
  },

4、tabBar

　　用於配置頁面底部的標籤欄

屬性 說明
color 未選擇時，底部導航文字的顏色
selectedColor 選擇時，底部導航文字的顏色
borderStyle 底部導航邊框的顏色(如果沒有寫入樣式會出現淺灰色線條)
backgroundColor 底部導航背景色
list 導航配置陣列

　　 list是一個陣列，陣列的每一個元素是一個標籤按鈕物件，透過該物件的屬性可以配置標籤欄中每個標籤按鈕

屬性 說明
pagePath 頁面訪問地址
iconPath 未選擇時，圖片路徑
selectedIconPath 選中時，圖片路徑
text 導航圖示下方文字

案例

  "tabBar": {
    "color": "#ccc",
    "selectedColor": "#ff4c91",
    "borderStyle":"white",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "/pages/images/invite.png",
        "selectedIconPath": "/pages/images/invite.png",
        "text": "邀請函"
      },
      {
        "pagePath": "pages/picture/picture",
        "iconPath": "/pages/images/marry.png",
        "selectedIconPath": "/pages/images/marry.png",
        "text": "照片"
      },
      {
        "pagePath": "pages/video/video",
        "iconPath": "/pages/images/video.png",
        "selectedIconPath": "/pages/images/video.png",
        "text": "美好時光"
      },
      {
        "pagePath": "pages/map/map",
        "iconPath": "/pages/images/map.png",
        "selectedIconPath": "/pages/images/map.png",
        "text": "婚禮地點"
      },
      {
        "pagePath": "pages/guest/guest",
        "iconPath": "/pages/images/guest.png",
        "selectedIconPath": "/pages/images/guest.png",
        "text": "賓客資訊"
      }
    ]
  },

5、requireBackgroundModes

  "requireBackgroundModes": [
　　　　　　　　　　　　　　　　　　　　"audio"   //音樂
　　　　　　　　　　　　　　　　　　],

　　

相關文章