小程序结构目录
小程序文件结构和传统web对比
|
传统web |
微信小程序 |
结构 |
HTML |
WXML |
样式 |
CSS |
WXSS |
逻辑 |
JavaScript |
JavaScript |
配置 |
无 |
json |
- 通过以上对比,传统web是三层结构,而微信小程序是四层结构,多了一层配置文件。
基本的项目目录
小程序配置文件
- 一个小程序应用程序会包括基本的两种配置文件:
- 全局的 app.json
- 局部的(页面自己的)page.json
- 注:配置文件中不能出现注释
全局配置 app.json
- app.json 是当前小程序的全局配置,包括了小程序所有页面路径、界面表现、网络超时时间、底部 tab 等。
{
"pages": [
"pages/index/index"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#D8322E",
"navigationBarTitleText": "小微祝福",
"navigationBarTextStyle": "white"
},
"style": "v2",
"sitemapLocation": "sitemap.json",
"lazyCodeLoading": "requiredComponents"
}
- pages 属性:用于描述当前小程序所有页面路径。
- 这是为了让微信客户端知道当前你的小程序页面定义在了哪个目录。
- 路径的最后不用添加后缀名,会自动补全。
- 如果写的路径没有对应的文件夹,会自动帮你创建文件
- window 属性:定义小程序所有的公共样式。
- style 属性:指定使用升级后的weui样式
- sitemapLocation 属性:指明 sitemap.json 的位置
局部配置(页面配置)
- 每一个小程序页面也可以使用
.json
文件来对本页面的窗口表现进行配置。
- 页面中配置项在当前页面会覆盖
app.json
的 window
中相同的配置项。
sitemap (了解即可)
- 小程序根目录下的
sitemap.json
文件用于配置小程序及其页面是否允许被微信索引。