小程序模板網(wǎng)

微信小程序app.json文件常用配置說明

發(fā)布時(shí)間:2021-07-09 10:03 所屬欄目:小程序開發(fā)教程

小程序根目錄下的 app.json 文件用來對微信小程序進(jìn)行全局配置,決定頁面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多 tab 等。

JOSN文件不允許注釋,下面為了學(xué)習(xí)加上注釋,粘貼需要的片段去掉注釋即可。小程序定義color建議使用16進(jìn)制顏色

1. pages定義頁面路徑列表

"pages": [
    "pages/news/news",
     "pages/index/index",
    "pages/movie/movie",
    "pages/logs/logs"
  ],

2. window 用于設(shè)置小程序的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色

"window": {
    "backgroundTextStyle": "light",  // 下拉 loading 的樣式,僅支持 dark / light
    "navigationBarBackgroundColor": "white",  // 導(dǎo)航欄背景顏色
    "navigationBarTitleText": "哈哈", // 導(dǎo)航欄標(biāo)題內(nèi)容
    "navigationBarTextStyle": "black",  // 導(dǎo)航欄標(biāo)題顏色 black / white
    "navigationStyle": "custom",  // 導(dǎo)航欄樣式 默認(rèn)為default  custom 表示自定義導(dǎo)航欄,只保留右上角
    "backgroundColor":"#ffffff"  // 窗口的背景顏色

  },

3. tabBar

如果小程序是一個(gè)多 tab 應(yīng)用(客戶端窗口的底部或頂部有 tab 欄可以切換頁面),可以通過 tabBar 配置項(xiàng)指定 tab 欄的表現(xiàn),以及 tab 切換時(shí)顯示的對應(yīng)頁面。

"tabBar": {
    "color": "#000",     // 文字默認(rèn)顏色 
    "borderStyle": "black",      //  tabBar上邊框的顏色  僅支持 black / white
    "selectedColor": "#ff6600",   // tab 上的文字選中時(shí)的顏色
     "position":"bottom",  // 位置 top | bottom,
     "custom": "false",    // 自定義tabBar  默認(rèn)false
    
    "list": [  // tab列表
      {
        "pagePath": "pages/news/news",  // 頁面路徑
        "text": "新聞",  // tab 上按鈕文字
        "iconPath": "pages/images/yuedu.png",  //  圖片路徑,icon 大小限制為 40kb,建議尺寸為 81px * 81px,不支持網(wǎng)絡(luò)圖片。
當(dāng) position 為 top 時(shí),不顯示 icon。
        "selectedIconPath": "pages/images/193.jpg"  //  選中時(shí)的圖片路徑,icon 大小限制為 40kb,建議尺寸為 81px * 81px,不支持網(wǎng)絡(luò)圖片。
當(dāng) position 為 top 時(shí),不顯示 icon。
      },
      {
        "pagePath": "pages/movie/movie",
        "text": "電影",
        "iconPath": "pages/images/diany.png",
        "selectedIconPath": "pages/images/506.jpg"
      }
    
    ]
  },

4. networkTimeout

各類網(wǎng)絡(luò)請求的超時(shí)時(shí)間,單位均為毫秒 默認(rèn)值60000

"networkTimeout": {
    "request": 10000,  //  wx.request 的超時(shí)時(shí)間
    "downloadFile": 10000,  // wx.downloadFile 的超時(shí)時(shí)間
    "connectSocket": 10000,  // wx.connectSocket 的超時(shí)時(shí)間
    "uploadFile": 10000  // wx.uploadFile 的超時(shí)時(shí)間
  },

5. debug

可以在開發(fā)者工具中開啟 debug 模式

"debug": true,

6. requiredBackgroundModes

申明需要后臺運(yùn)行的能力,類型為數(shù)組 目前支持audio后臺音樂播放 / location 后臺定位

"requiredBackgroundModes": ["audio", "location"],

7. permission

小程序接口權(quán)限相關(guān)設(shè)置。字段類型為 Object

"permission": {
    "scope.userLocation": {  // 位置相關(guān)權(quán)限聲明
      "desc": "你的位置信息將用于小程序位置接口的效果展示" // 高速公路行駛持續(xù)后臺定位
    }
  },

8. style

微信小程序基礎(chǔ)組件樣式升級

"style": "v2",

完整app.json文件

{
    "pages": [
        "pages/news/news",
        "pages/index/index",
        "pages/movie/movie",
        "pages/logs/logs"
    ],
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "white",
        "navigationBarTitleText": "哈哈",
        "navigationBarTextStyle": "black",
        "navigationStyle": "custom",
        "backgroundColor": "#ffffff"
    },
    "tabBar": {
        "color": "#000",
        "borderStyle": "black",
        "selectedColor": "#ff6600",
        "position": "bottom",
        "custom": "false",
        "list": [
            {
                "pagePath": "pages/news/news",
                "text": "新聞",
                "iconPath": "pages/images/yuedu.png",
                "selectedIconPath": "pages/images/193.jpg"
            },
            {
                "pagePath": "pages/movie/movie",
                "text": "電影",
                "iconPath": "pages/images/diany.png",
                "selectedIconPath": "pages/images/506.jpg"
            }
        ]
    },
 
    "networkTimeout": {
        "request": 6000, 
        "downloadFile": 60000, 
        "connectSocket": 60000 ,
        "uploadFile": 60000 
    },
    "debug": true,
    "requiredBackgroundModes": [
        "audio",
        "location"
    ],
    "permission": {
        "scope.userLocation": { 
            "desc": "你的位置信息將用于小程序位置接口的效果展示" 
        }
    },
    "style": "v2"
}



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/27089.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢