一、开发文件结构
1.根目录下有三个文件:app.js,app.json和app.wxss。一个小程序项目必须有的三个描述App的文件。这三个文件是应用程序级别的文件。这3个文件的意义:
文件 | 必填 | 作用 |
app.js | 是 | 小程序逻辑文件 |
app.json | 是 | 小程序配置文件 |
app.wxss | 否 | 全局公共样式文件 |
2.和这三个应用程序级别文件平行的pages文件夹。一个小程序由若干个页面文件构成。每个页面由4个文件构成,分别是:.js,.json,.wxml和.wxss文件。这4个文件意义:
文件 | 必填 | 作用 |
.js | 是 | 页面逻辑 |
.json | 否 | 页面配置 |
.wxml | 是 | 页面结构 |
.wxss | 否 | 页面样式表 |
二、配置程序:
1.app.json文件是小程序最基本的全局配置文件,它决定页面文件的路径(路由)、窗口表现、设置网络超时时间、设置多Tab等。对于app.json的具体配置如下表:
属性 | 类型 | 必填 | 描述 |
pages | String Array | 是 | 设置页面路径 |
window | Object | 否 | 设置默认页面的窗口表现 |
tabBar | Object | 否 | 设置底部tab表现 |
networkTimeout | Object | 否 | 设置网络超时时间 |
debug | Boolean | 否 | 设置是否开启debug模式 |
1).pages:
pages接受一个数组,每一项都是字符串,来指定小程序由哪些页面组成。每一项代表对应页面的(路径+文件名)信息,数组的第一项代表小程序的初始页面。例如:在app.json配置:
{ "pages":[ "pages/index/index" "pages/logs/logs" ] }
2).window
window属性用于设置小程序的状态栏、导航条、标题、窗口背景色、具体含义及配置如表2.2
属性 | 类型 | 默认值 | 描述 |
navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色 |
navigationBarTextStyle | String | white | 导航栏标题颜色,仅支持dark/white |
navigationBarTitleText | String | 无 | 导航栏标题文字内容 |
backgroundColor | HexColor | #ffffff | 窗口的背景色 |
backgroundTextStyle | String | dark | 下拉背景字体、loading图的样式、仅支持dark/white |
enablePullDownRefresh | Boolean | false | 是否开启下拉刷新 |
3).tabBar
tabBar
用于配置小程序的菜单选项。tabBar是一个数组,只能配置最少2个、最多5个tab,tab按数组的顺序排序,其具体配置属性如表2.3
属性 | 类型 | 必填 | 默认值 | 描述 |
color | HexColor | 是 | tab上的文字默认颜色 | |
selectedColor | HexColor | 是 | tab上的文字选中时颜色 | |
backgroundColor | HexColor | 是 | tab的背景颜色 | |
borderStyle | String | 否 | black | tabBar上边框的颜色,仅支持black/white |
list | Array | 是 | tab的列表,详见表2.4 | |
position | String | 否 | bottom | 可选值bottom、top |
tabBar的属性list是一个数组,数组中的每一项都是一个对象,属性表如表2.4
属性 | 类型 | 必填 | 说明 |
pagePath | String | 是 | 页面路径,必须在pages中先定义 |
text | String | 是 | tab上按钮的文字 |
iconPath | String | 是 | 图片路径,icon大小限制为40KB,建议尺寸为81px * 81px |
selectediconPath | String | 是 | 选中时的图片路径,icon大小限制为40KB,建议尺寸为81px * 81px |
例如:将两个页面链接指向首页和日志页:
"tabBar":{ "list":[{ "pagePath":"pages/index/index", "text":"首页" },{ "pagePath":"pages/logs/logs", "text":"日志" }] }
4).networkTimeout
networkTimeout属性可以设置各种网络请求的超时时间,具体属性如表2.5
属性 | 类型 | 必填 | 说明 |
request | Number | 否 | wx.request的超时时间,单位毫秒,默认为:60000 |
connectSocket | Number | 否 | wx.connectSocket的超时时间,单位毫秒,默认为:60000 |
uploadFile | Number | 否 | wx.uploadFile的超时时间,单位毫秒,默认为:60000 |
downloadFile | Number | 否 | wx.downloadFile的超时时间,单位毫秒,默认为:60000 |
2.page.json
每一个小程序页面可以使用.json文件来对本页面的窗口表现进行配置,页面中配置项会覆盖app.json的window中相同的配置项。page.json配置属性如表2.6
属性 | 类型 | 默认值 | 描述 |
navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色 |
navigationBarTextStyle | String | white | 导航栏标题颜色,仅支持dark/white |
enablePullDownRefresh | Boolean | false | 是否开启下拉刷新 |
backgroundTextStyle | String | dark | 下拉背景字体、loading图的样式、仅支持dark/white |
backgroundColor | HexColor | #ffffff | 窗口的背景色 |
navigationBarTitleText | String | 无 | 导航栏标题文字内容 |
diaableScroll | Boolean | false | 设置为true,则页面整体不能上下滚动 |
仅是自己在学微信小程序的笔记。