框架
| 视图描述语言 | WXML&WXSS |
|逻辑层框架|基于Java Script|
框架提供了视图与逻辑层两层间的数据传输和事件系统
一个小程序的完整结构
主体
文件名 | 是否必要 | 功能 |
---|---|---|
app.js | Y | 逻辑 |
app.json | Y | 公共设置 |
app.wxss | N | 公共样式表 |
页面
文件名 | 是否必要 | 功能 |
---|---|---|
js | Y | 页面逻辑 |
wxml | Y | 页面结构 |
wxss | N | 页面样式表 |
json | N | 页面配置 |
这四个文件需要相同的文件名个路径
配置-json
app.json———全局配置
{
#pages--string_arry设置页面路径,必要
"pages": [
"pages/index/index",
"pages/logs/index"
],
#window--Object设置默认窗口(状态栏,导航条,标题,窗口背景色),非必要
"window": {
"navigationBarTitleText": "Demo"
},
#tabBar--Object设置底部tab,非必要
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
}, {
"pagePath": "pages/logs/logs",
"text": "日志"
}]
},
#networkTimeout--Object设置网络超时时间
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
#debug--Boolean设置是否开启debug模式
"debug": true
}
pages
{
"pages":[
"pages/index/index"
"pages/logs/logs"
]
}
- Pages 接受一个数组,每一项是字符串,代表小程序的一个页面,包括【路径+文件名】(不用加后缀,框架会自动寻找)
- 第一项表示小程序的初始页面
- 上面程序代表如下开发目录
pages/
pages/index/index.wxml
pages/index/index.js
pages/index/index.wxss
pages/logs/logs.wxml
pages/logs/logs.js
app.js
app.json
app.wxss
window
通过各种属性,设置小程序的状态栏,导航条,标题,窗口背景色
tip: HexColor 十六进制颜色#ff0ff 表示255,0,255~
{
"window":{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
}
tabBar
客户端窗口底部顶端可以切换页面,2-5个tab可通过list配置
page.json
用.json文件对本页面窗口进行配置,直设置window相关选项
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}