微信小程序（一）-文件结构

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：
小程序主体文件

文件 必填 作用 app.js 是 小程序逻辑 app.json 是 小程序公共设置 app.wxss 否 小程序公共样式表

一个小程序页面由四个文件组成，分别是：
1.json 后缀的 JSON 配置文件
2.wxml 后缀的 WXML 模板文件
3.wxss 后缀的 WXSS 样式文件
4.js 后缀的 JS 脚本逻辑文件
小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

---

1. JSON 配置

在项目根目录可以看见两个配置文件app.json和project.config.json。

app. json

app.json 当前小程序的全局配置文件，包含两个字段，page字段和window字段。

{  "pages": [    "pages/index/index",    "pages/logs/index"  ],  "window": {    "navigationBarTitleText": "Demo"  },  "tabBar": {    "list": [{      "pagePath": "pages/index/index",      "text": "首页"    }, {      "pagePath": "pages/logs/logs",      "text": "日志"    }]  },  "networkTimeout": {    "request": 10000,    "downloadFile": 10000  },  "debug": true}   

page字段

接受一个数组，数组中每一项都是字符串，代表小程序的页面文件路径及名称。小程序从主入口启动时会加载数组的第一项，即小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。

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

window字段

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

window字段属性

属性 类型 默认值 描述 navigationBarBackgroundColor HexColor 000000 导航栏背景颜色，如”#000000” navigationBarTextStyle String white 导航栏标题颜色，仅支持 black/white navigationBarTitleText String 导航栏标题文字内容 backgroundColor HexColor ffffff 窗口的背景色 backgroundTextStyle String dark 下拉背景字体、loading 图的样式，仅支持 dark/light enablePullDownRefresh Boolean false 是否开启下拉刷新，详见页面相关事件处理函数。 onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离，单位为px

注：HexColor（十六进制颜色值），如”#ff00ff”

tabBar字段

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

Tip：

1、当设置 position 为 top 时，将不会显示 icon
2、tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

tabBar字段属性

属性 类型 必填 默认值 描述 color HexColor 是 tab 上的文字默认颜色 selectedColor HexColor 是 tab 上的文字选中时的颜色 backgroundColor HexColor 是 tab 的背景色 borderStyle String 否 black tabbar上边框的颜色， 仅支持 black/white list Array 是 tab 的列表，详见 list 属性说明，最少2个、最多5个 tab position String 否 bottom 可选值 bottom、top

其中 list 接受一个数组，数组中的每个项都是一个对象，其属性值如下：

属性 类型 必填 说明 pagePath String 是 页面路径，必须在 pages 中先定义 text String 是 tab 上按钮文字 iconPath String 否 图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片 selectedIconPath String 否 选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效

networkTimeout字段

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

属性说明：

属性 类型 必填 说明 request Number 否 wx.request的超时时间，单位毫秒，默认为：60000 connectSocket Number 否 wx.connectSocket的超时时间，单位毫秒，默认为：60000 uploadFile Number 否 wx.uploadFile的超时时间，单位毫秒，默认为：60000 downloadFile Number 否 wx.downloadFile的超时时间，单位毫秒，默认为：60000

debug字段

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

project.config.json

微信web开发工具的配置文件，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

page. json

每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多，只是设置 app.json 中的 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

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

属性 类型 默认值 描述 navigationBarBackgroundColor HexColor 000000 导航栏背景颜色，如”#000000” navigationBarTextStyle String white 导航栏标题颜色，仅支持 black/white navigationBarTitleText String 导航栏标题文字内容 backgroundColor HexColor ffffff 窗口的背景色 backgroundTextStyle String dark 下拉背景字体、loading 图的样式，仅支持 dark/light enablePullDownRefresh Boolean false 是否开启下拉刷新，详见页面相关事件处理函数。 disableScroll Boolean false 设置为 true 则页面整体不能上下滚动；只在 page.json 中有效，无法在 app.json 中设置该项 onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离，单位为px

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