微信小程序结构说明
小程序框架提供了自己的视图层描述语言wxml和wxss以及JavaScript,并在视图层和逻辑层之间提供了数据传输和事件系统,让开发者专注数据与逻辑
1、小程序文件结构和传统web文件结构进行对比
结构 | 传统web | 微信小程序 |
结构 | HTML | WXML |
样式 | CSS | WXSS |
逻辑 | JavaScript | JavaScript |
配置 | 无 | json |
通过上面对比可以看出,传统的web是三个文件结构,而微信是四个
2、基本的项目目录结构
3、小程序配置文件
小程序应用程序包括最基本的两个配置文件,一种是全局的配置文件app.json和页面自己的page.json
4、全局配置文件app.json
里面包括了小程序的页面路径、界面表现、网络延迟时间、底部tab等,普通快速启动项目里面的app.json
{
"pages": [
"pages/index/index",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
pages:用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录
window:定义小程序所有页面的顶部背景颜色,文字颜色定义等
5、利用app.json新建页面
第一步写完之后,会自动帮你创建好页面,如果想将新加的页面变成首页,仅需放到最前面就ok
6、app.json中window属性
7、app.json中tabBar属性
8、page.json属性
9、sitemap.json文件