小程序学习(三)
小程序总结(三)之目录结构和配置
本节知识点
1.目录结构
2.配置
(一) 目录结构
小程序包含一个描述整体程序的app和多个描述各自页面的page
一个小程序主体部分由三个文件组成，必须放在项目的根目录下。
(1) app.js
必须需要，他存放的是小程序的业务逻辑
(2) app.json
必须需要，他存放的是小程序的公共设置
(3) app.wxss
不是必须需要，他是小程序的公共样式表
总结: 一个小程序由4个文件组成，分别是:
| 文件类型 | 必填 | 作用 |
|---|---|---|
| JS文件 | 是 | 页面逻辑 |
| wxml | 是 | 页面结构 |
| wxss | 否 | 页面样式表 |
| json | 否 | 页面配置 |
为了方便开发者减少配置项，我们规定描述页面的这4个文件必须具有相同的路径与文件名。
（二）配置结构
我们使用app.json文件来对小程序进行全局配置，决定页面文件的路径，窗口表现，设置网络超时时间，设置多Tab等。
app.json配置项列表
| 属性 | 类型 | 必填 | 作用 |
|---|---|---|---|
| pages | 数组 | 是 | 设置页面路径 |
| window | object | 否 | 设置默认页面的窗口表现 |
| tabbar | object | 否 | 设置底部tab的表现 |
| networkTimeout | object | 否 | 设置网络的超时时间 |
| debug | boolean | 否 | 是否开启debug模式 |
pages
接受一个数组，每一项都是字符串，来制定小程序由哪些页面组成的。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对pages进行修改.
文件名不需要写文件后缀，因为框架会自动寻找路径.json ,.js ,.wxml,.wxss 的4个文件来整合。
如开发目录
pages/index/index.wxml
pages/index/index.js
pages/index/index.wxss
pages/index/index.json
pages/logs/logs.wxml
pages/logs/logs.js
pages/logs/logs.wxss
pages/logs/logs.json
则我们需要在pages中写
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”
如app.json
tabbar
如果我们的小程序是一个多tab应用(客户端串口的底部或者顶部有tab栏目可以切换页面) 那么我们可以通过tabbar配置指定tabbar配置指定tab栏目的表现。以及tab切换时候显示的对应页面。
PS： 当设置为position为top时，将不会显示icon
tabbar中的list是一个数组，只能配置最少2个,最多5个tab,tab按数组的顺序排序
| 属性 | 类型 | 必填 | 默认值 | 描述 |
|---|---|---|---|---|
| color | HexColor | 是 | tab上的文字默认颜色 | |
| selectedColor | HexColor | 是 | tab上的文字选中的颜色 | |
| backgroundColor | HexColor | 是 | tab的背景色 | |
| borderStyle | String | 否 | black | tabar上边框的颜色仅仅支持balck,white |
| list | 数组 | 是 | tab的列表，详见list的属性使用说明，最少2个，最多5个 | |
| position | String | 否 | bottom | 可选top或者bottom |
其中list是一个数组,数组中的每一个项都是一个对象，其属性值如下：
| 属性 | 类型 | 必填 | 说明 |
|---|---|---|---|
| pagePath | String | 是 | 页面路径，必须在pages中先定义 |
| text | String | 是 | tab上按钮的文字 |
| iconPath | String | 否 | 图片路径，icon限制为40KB ,建议尺寸81px*81px当position为top时候，icon无效 |
| selectediconPath | String | 否 | 选中时的图片路径，icon限制为40KB，建议尺寸是81px*81px,当position为top时候，无效 |
networkTimeout
可以设置各种网络请求的超时时间
| 属性 | 类型 | 必填 | 说明 |
|---|---|---|---|
| request | num | 否 | wx.request的超时时间，单位毫秒，默认为：60000 |
| connectSocket | num | 否 | wx.connectSocket的超时时间，单位毫秒，默认为：60000 |
| uploadFile | num | 否 | wx.uploadFile的超时时间，单位毫秒，默认为：60000 |
| downloadFile | num | 否 | wx.downloadFile的超时时间，单位毫秒，默认为：60000 |
debug
可以在调试模式里开启debug模式，这样在开发者工具面板，调试信息以info形式出现的，其包含的信息由page的注册，页面路由，数据更新，事件触发。可以帮助开发者快速定位
每一个页面的page.json
每一个小程序的页面也可以使用.json文件对本页面的窗口进行配置。页面的配置会覆盖掉app.json里面的内容
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| 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 |
