宜春小程序开发,宜春软件开发,宜春网站设计,宜春公众号开发,宜春手机APP开发,宜春南软科技
当前位置:主页 > 新闻资讯 >

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

发表日期:2021-09-17 19:55文章编辑:宜春南软科技浏览次数: 标签:    

微信小程序app.json文件常用配置说明
小程序根目录下的 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"
}