weChat
一、微信小程序
.js 脚本文件
.json 配置文件
.wxss 样式表文件
二、文件结构
主体组成:
- 必须放在项目根目录
| 文件 | 说明 | 备注 |
|---|---|---|
| app.js | 小程序逻辑 | |
| app.json | 小程序公共设置 | |
| app.wxss | 小程序公共样式表 | . |
页面组成:
- 必须具有相同的路径与文件名
| 文件 | 说明 | 备注 |
|---|---|---|
| js | 页面逻辑 | |
| wxml | 页面结构 | |
| wxss | 页面样式表 | |
| json | 页面配置 | . |
三、配置
使用app.json文件来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
app.json
| 字段 | 类型 | 必填 | 说明 | 备注 |
|---|---|---|---|---|
| pages | String Array | 是 | 页面路径 | |
| window | Object | 否 | 默认页面的窗口 | |
| tabBar | Object | 否 | 底部tab | |
| networkTimeout | Object | 否 | 网络超时时间 | |
| dubug | Boolean | 否 | 是否开启debug模式 | . |
pages
指定页面组成。
//1.每一项代表对应页面的【路径+文件名】信息
//2.数组的第一项代表小程序的初始页面
//3.小程序中新增/减少页面，都需要对 pages 数组进行修改
//4.文件名不需要写文件后缀
{
"pages":[
"pages/index/index"
"pages/logs/logs"
]
}
window
设置小程序的状态栏、导航条、标题、窗口背景色。
{
"window":{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
}
| 属性 | 类型 | 默认值 | 说明 | 备注 |
|---|---|---|---|---|
| navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景�色 | |
| navigationBarTextStyle | String | white | 导航栏标题样式 | black/white |
| navigationBarTitleText | String | 导航栏标题 | ||
| backgroundColor | HexColor | #ffffff | 窗口背景颜色 | |
| backgroundTextStyle | String | dark | 下拉背景字体loading样式 | dark/light |
| enablePullDownRefresh | Boolean | false | 是否开启下拉刷新 | . |
tabBar
指定标签栏组成,以及切换时显示的页面
页面跳转（wx.navigateTo）
页面重定向（wx.redirectTo）
//只能配置最少2个、最多5个 tab
"tabBar":{
"color": "#ffffff",
"selectedColor": "#ffffff",
"backgroundColor": "#ffffff",
"borderStyle": "black",
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "",
"selectedIconPath": ""
},{
"pagePath": "pages/logs/logs",
"text": "我的",
"iconPath": "",
"selectedIconPath": ""
}],
"position": "bottom"
}
| 属性 | 类型 | 必填 | 默认值 | 说明 | 备注 |
|---|---|---|---|---|---|
| color | HexColor | 是 | 标题默认颜色 | ||
| selectedColor | HexColor | 是 | 标题选中颜色 | ||
| backgroundColor | HexColor | 是 | 背景色 | ||
| borderStyle | String | 否 | black | 边框的颜色 | black/white |
| list | Array | 是 | 标签配置 | 最少2个、最多5个 | |
| position | String | 否 | bottom | 可选值 bottom、top | bottom/top |
list
数组中的每个项都是一个对象
| 属性 | 类型 | 必填 | 说明 | 备注 |
|---|---|---|---|---|
| pagePath | String | 是 | 页面路径 | |
| text | String | 是 | 标题 | |
| iconPath | String | 是 | 默认图片 | 40KB, 81x81px |
| selectedIconPath | String | 是 | 选中图片 | 40KB, 81x81px |
networkTimeout
设置网络请求的超时时间
| 属性 | 类型 | 必填 | 默认值 | 说明 | 备注 |
|---|---|---|---|---|---|
| request | Number | 否 | 60000 | wx.request 超时时间 | 毫秒 |
| connectSocket | Number | 否 | 60000 | wx.connectSocket 超时时间 | 毫秒 |
| uploadFile | Number | 否 | 60000 | wx.uploadFile 超时时间 | 毫秒 |
| downloadFile | Number | 否 | 60000 | wx.downloadFile 超时时间 | 毫秒 |
debug
设置开发者工具中开启 debug 模式
Page的注册，页面路由，数据更新，事件触发
page.json
设置本页面的窗口
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
| 属性 | 类型 | 默认值 | 说明 | 备注 |
|---|---|---|---|---|
| navigationBarBackgroundColor | HexColor | # 000000 | 导航栏背景颜色 | |
| navigationBarTextStyle | String | white | 导航栏标题颜色 | black/white |
| navigationBarTitleText | String | 导航栏标题文字内容 | ||
| backgroundColor | HexColor | #ffffff | 窗口的背景色 | |
| backgroundTextStyle | String | dark | 下拉背景字体、loading 图的样式 | dark/light |
| enablePullDownRefresh | Boolean | false | 是否开启下拉刷新 | |
| disableScroll | Boolean | false | 页面整体不能上下滚动 | 只在 page.json 中有效 |
