微信小程序：第三天

配置文件详解

app.json位于项目的主目录中，用于对于当前项目进行全局配置，包括配置每个页面的文件路径，窗口表现，设置网络超时时间，设置多tab等。

配置文件如以下：

{
	//设置文件路径（也可设置路径，生成新的文件，是创建文件的好办法）
    "pages": [
        "pages/index/index",
        "pages/music/music",
        "pages/music/music-detail/music-detail",
        "pages/movie/movie",
        "pages/movie/movie-detail/movie-detail"
    ],
	//设置小程序的主体样式
    "window": {
        "navigationBarBackgroundColor": "#fff"
    },
	//设置tab选项卡
    "tabBar": {
        "borderStyle":"white",
        "selectedColor":"#109D59",
        "backgroundColor":"#fff",
        "list": [
            {
                "pagePath": "pages/music/music",
                "text": "音与文",
                "iconPath":"pages/images/yuedu.png",
                "selectedIconPath":"pages/images/yuedu.png"
            },
            {
                "pagePath": "pages/movie/movie",
                "text": "影与评",
                "iconPath":"pages/images/diany.png",
                "selectedIconPath":"pages/images/diany.png"
            }
        ]
    }
}

其实可以看出，app.json配置文件其实就是一个json对象，pages用来定义小程序页面文件，前面为目录。后面为文件，而window则是用来定义窗口的表现形式的，如上面的代码navigationBarBackgroundColor，定义窗体的颜色，当然，注配置文件的的配置项不可能是上面的这些东西，下面将会一一介绍个个配置项。

1.配置路径

pages，这是一个数组属性，每一项都是一个字符串，用来定义页面，有路径和文件名组成，其第一项为起始页面。
代码如下：

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

2.窗口状态配置

  • 2.1 navigationBarBackgroundColor 导航栏背景颜色，如"#000000"
  • 2.2 navigationBarTextStyle 导航栏标题颜色，仅支持 black/white
  • 2.3 navigationBarTitleText 导航栏标题文字内容
  • 2.4 backgroundColor 窗口的背景色
  • 2.5 backgroundTextStyle 下拉背景字体、loading 图的样式，仅支持 dark/light
  • 2.6 enablePullDownRefresh 是否开启下拉刷新

代码如下：

{
  "window":{
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }

3.配置底部窗口

微信小程序的底部有一个可以用于切换的tab栏，要使用，必须在配置文件中配置，并且其配置至少2个，最多5个。
其配置文件如下：

"tabBar": {
    "borderStyle":"white",
    "selectedColor":"#109D59",
    "backgroundColor":"#fff",
    "list": [
        {
            "pagePath": "pages/music/music",
            "text": "音与文",
            "iconPath":"pages/images/yuedu.png",
            "selectedIconPath":"pages/images/yuedu.png"
        },
        {
            "pagePath": "pages/movie/movie",
            "text": "影与评",
            "iconPath":"pages/images/diany.png",
            "selectedIconPath":"pages/images/diany.png"
        }
    ]
}

其具体的属性为：

  • 3.1color tab 上的文字默认颜色
  • 3.2selectedColor tab 上的文字选中时的颜色
  • 3.3backgroundColor tab 的背景色
  • 3.4borderStyle tabbar上边框的颜色， 仅支持 black/white
  • 3.5list tab 的列表 其最少2个、最多5个 tab
    • 3.5.1pagePath 页面路径，必须在 pages 中先定义
    • 3.5.2text tab 上按钮文字
    • 3.5.3iconPath 图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px
    • 3.5.4selectedIconPath 选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px
  • 3.6position bottom 可选值 bottom、top

4.其他配置networkTimeout

  • request wx.request的超时时间，单位毫秒，默认为：60000
  • connectSocket wx.connectSocket的超时时间，单位毫秒，默认为：60000
  • uploadFile wx.uploadFile的超时时间，单位毫秒，默认为：60000
  • downloadFile wx.downloadFile的超时时间，单位毫秒，默认为：60000

配置文件就是以上这些，如果需要更详细的，可阅读官方文档，微信小程序官方文档。