微信小程序app.json文件常用全局配置

分手后的思念是犯贱 2021-10-19 04:50 329阅读 0赞

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

> JOSN文件不允许注释，下面为了学习加上注释，粘贴需要的片段去掉注释即可。小程序定义color建议使用16进制颜色

#### 1. pages定义页面路径列表 ####

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

#### 2. window 用于设置小程序的状态栏、导航条、标题、窗口背景色 ####

"window": {
        "backgroundTextStyle": "light",  // 下拉 loading 的样式，仅支持 dark / light
        "navigationBarBackgroundColor": "white",  // 导航栏背景颜色
        "navigationBarTitleText": "哈哈", // 导航栏标题内容
        "navigationBarTextStyle": "black",  // 导航栏标题颜色 black / white
        "navigationStyle": "custom",  // 导航栏样式 默认为default  custom 表示自定义导航栏，只保留右上角
        "backgroundColor":"#ffffff"  // 窗口的背景颜色
    
      },

#### 3. tabBar ####

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

"tabBar": {
        "color": "#000",     // 文字默认颜色 
        "borderStyle": "black",      //  tabBar上边框的颜色  仅支持 black / white
        "selectedColor": "#ff6600",   // tab 上的文字选中时的颜色
         "position":"bottom",  // 位置 top | bottom,
         "custom": "false",    // 自定义tabBar  默认false
        
        "list": [  // tab列表
          {
            "pagePath": "pages/news/news",  // 页面路径
            "text": "新闻",  // tab 上按钮文字
            "iconPath": "pages/images/yuedu.png",  //  图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。
    当 position 为 top 时，不显示 icon。
            "selectedIconPath": "pages/images/193.jpg"  //  选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。
    当 position 为 top 时，不显示 icon。
          },
          {
            "pagePath": "pages/movie/movie",
            "text": "电影",
            "iconPath": "pages/images/diany.png",
            "selectedIconPath": "pages/images/506.jpg"
          }
        
        ]
      },

#### 4. networkTimeout ####

各类网络请求的超时时间，单位均为毫秒 默认值60000

"networkTimeout": {
        "request": 10000,  //  wx.request 的超时时间
        "downloadFile": 10000,  // wx.downloadFile 的超时时间
        "connectSocket": 10000,  // wx.connectSocket 的超时时间
        "uploadFile": 10000  // wx.uploadFile 的超时时间
      },

#### 5. debug ####

可以在开发者工具中开启 debug 模式

"debug": true,

#### 6. requiredBackgroundModes ####

申明需要后台运行的能力，类型为数组 目前支持audio后台音乐播放 / location 后台定位

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

#### 7. permission ####

小程序接口权限相关设置。字段类型为 Object

"permission": {
        "scope.userLocation": {  // 位置相关权限声明
          "desc": "你的位置信息将用于小程序位置接口的效果展示" // 高速公路行驶持续后台定位
        }
      },

#### 8. style ####

微信小程序基础组件样式升级

"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"
    }

转载于:https://www.cnblogs.com/dobeco/p/11295697.html