目录结构和配置

目录结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

描述整体程序的 app 部分由三个文件组成，必须放在项目的根目录，如下：

app.js
app.json     
app.wxss      //非必填

描述页面的 page 由四个文件组成，分别如下：

js
wxml
wxss    //非必填
json    //非必填

为了方便开发者减少配置项，小程序规定描述页面的这四个文件必须具有相同的路径与文件名。

配置

配置分为 app.json 和 page.json 两种

app.json

app.json 配置项列表如下（pages项为必需，其他项非必需）：

pages          //设置页面路径。 必填，type 为 Array
window         //设置默认页面的窗口表现。 type 为 Object
tabBar         //设置底部tab 的表现。 type 为 Object
networkTimeout //设置网络超时时间。 type 为 Object
debug          //设置是否开启 debug 模式

pages项 接受一个数组，每一项都是字符串，代表对应页面的【路径+文件名】信息，来指定小程序由哪些页面组成。

文件名不需要写文件后缀，因为框架会自动去寻找路径.json,.js,.wxml,.wxss的四个文件进行整合。

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

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

navigationBarBackgroundColor         //导航栏背景色，默认值"#000"
navigationBarTextStyle               //导航栏标题颜色，仅支持 black/white
navigationBarTitleText               //导航栏标题文字内容

backgroundColor                      //下拉刷新时 loading 外部区域的背景色，默认值#fff
backgroundTextStyle                  //下拉刷新的样式，仅支持 dark/light，默认值dark
enablePullDownRefre                  //是否开启下拉刷新, 默认为false

tabBar

我们可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

tabBar 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

通过页面跳转（wx.navigateTo）或者页面重定向（wx.redirectTo）所到达的页面，即使它是定义在 tabBar 配置中的页面，也不会显示底部的 tab 栏。

color                        //tab上的文字颜色， 必填
selectedColor                //tab上文字选中时的颜色，必填
backgroundColor              //tab的背景色
borderStyle                  //tab上边框的的颜色， 仅支持 white/black，默认值 black
position                     //可选值为 bottom/top，默认值 bottom。应该可以自定义

list                         //一个数组，表示 tab 的列表，最少2个、最多5个 tab

//list 接受一个数组，数组中的每个项都是一个对象，每个对象有四个属性值，都是必填。
pagePath                 //页面路径，必须在 pages 中先定义
text                     //tab上按钮文字
iconPath                 //图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px
selectedPath             //选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px

{
    "tabBar" : {
        "color" : "#999",
        "selectedColor" : "#f60",
        "backgroundColor" : "#fff",
        "borderStyle" : "black",
        "position" : "bottom",
        "list" : [
             {
                 "pagePath" : "/pages/index/index",
                 "text" : "首页",
                 "iconPath" : "",
                 "selectedPath" : ""
             },
             {
                 "pagePath" : "/pages/logs/logs",
                 "text" : "日志",
                 "iconPath" : "",
                 "selectedPath" : ""
             }
         ] 
    }
}

networkTimeout 可以设置各种网络请求的超时时间。

networkTimeout 对象具有四个属性，这四个属性都是number，默认值都为 60000ms

request         //wx.request的超时时间
connectSocket   //wx.connectSocket的超时时间
uploadFile      //wx.uploadFile的超时时间
downloadFile    //wx.downloadFile的超时时间

debug

可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有Page的注册，页面路由，数据更新，事件触发 。 可以帮助开发者快速定位一些常见的问题。

page.json

page.json 只能设置 window 相关的配置项，以决定本页面的窗口表现，所以无需写 window 这个键。

相同的配置项，page.json 会覆盖 app.json，只对本页面有效。

page.json 扩展了一个配置项，这个配置项不能在 app.json 的 window属性 中使用

disableScroll   //默认值 false。设置为 true 则页面整体不能上下滚动；只在 page.json 中有效，无法在 app.json 中设置该项。