微信小程序 app.json文件配置

https://developers.weixin.qq.com/miniprogram/dev/index.html  起步

https://developers.weixin.qq.com/miniprogram/dev/component/view.html  標簽

https://developers.weixin.qq.com/miniprogram/dev/framework/config.html  配置

 

app.json文件里的配置

屬性	描述
pages	頁面路徑列表(所有頁面路徑)
window	全局的默認窗口表現
tabBar	底部 tab
networkTimeout	網絡超時時間
debug	是否開啟 debug 模式，默認關閉
functionalPages	是否啟用插件功能頁，默認關閉
subpackages	分包結構配置
workersWorker	代碼放置的目錄
requiredBackgroundModes	需要在后台使用的能力，如「音樂播放」
plugins	使用到的插件
preloadRule	分包預下載規則
resizableiPad	小程序是否支持屏幕旋轉，默認關閉
navigateToMiniProgramAppIdList	需要跳轉的小程序列表，詳見 wx.navigateToMiniProgram
usingComponents	全局自定義組件配置
permission	小程序接口權限相關設置

 pages 設置默認首頁路徑（頁面路徑列表）

用於描述當前小程序所有頁面路徑,這是為了讓微信客戶端當前你的小程序頁面定義在那個目錄

默認配置:(所有的頁面路徑都要寫在這個配置下)

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],

　　

 

window 的配置

定義小程序多有頁面的頂部背景顏色、文字顏色定義等

　　 　　　　　　屬性　　　　　　　　　　　　　　　　描述

navigationBarBackgroundColor 導航欄背景顏色 不支持英文單詞 navigationBarTextStyle 導航欄標題顏色 進支持 black / white 兩種顏色 navigationBarTitleText 導航欄標題文字內容 navigationStyle 導航欄樣式 僅支持 default(默認樣式) custom(自定義導航欄 只保留右上角膠囊按鈕) backgroundColor 窗口的背景色 backgroundTexrStyle 下拉 loading的樣式 僅支持 dark/light backgroundColorTop 頂部窗口的背景色，僅 iOS 支持 backgroundColorBottom 底部窗口的背景色，僅 iOS 支持 enablePullDownRefresh 是否開啟當前頁面的下拉刷新。 onReachBottomDistance 頁面上拉觸底事件觸發時距頁面底部距離，單位為px。 pageOrientation 屏幕旋轉設置，支持 auto / portrait / landscape

 

 

tabBar  設置底部導航 

　　　　屬性　　　　　　　描述　　　　　　　　　　　默認 color　　　　　　　　tab上的文字默認顏色 selectedColor 　　tab上的文字選中是的顏色 backgroundColor　　tab的背景色 borderStyle　　　　tabBar上版塊的顏色 　　僅支持 black(黑色)/white(白色) position　　　　　　可選值 bottom、top
custom　　　　　　　自定義tabBar list　　　　　　　　tab的列表 最少2個 最多5個 　　list接受的是一個數組 　　　　屬性　　　　　　　　　　描述 　　　　pagePath　　　　　　頁面路徑，必須在pages中先定義 　　　　text　　　　　　 　　tab上按鈕文字 　　　　iconPath　　　　　　圖片路徑，icon大小限制為40kb 建議尺寸為81px*81px 不支持網絡圖片 　　　　selectedIconPath　選中的圖片路徑。當position 為top是，不顯示icon

示例 : 
"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首頁"
      },
      {
        "pagePath": "pages/tab/index",
        "text": "日志"
      },
     {
        "pagePath": "pages/shopping/index",
        "text":"設置"
     }
    ],
    "custom": true,
    "color": "#fff",
    "selectedColor": "#000000",
    "backgroundColor": "red"
  }