小程序学习 1 结构框架&配置

detail

框架

| 视图描述语言 | 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"
}