小程序包含一个描述整体的APP和多个描述各自页面的pages
小程序的主体部分由三个文件组成,必须放在根目录下面
① app.js 小程序逻辑
② app.json 小程序公共配置
③ app.wxss 小程序的公共样式
app.json: 是当前小程序的全局配置,包括了小程序的所有页面路径(pages)、界面表现(window)、网络超时时间(networkTimeout)、底部 tab (tabBbar)等
页面路径(pages):页面路径列表
用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径+文件名 信息。文件名不需要写文件后缀,框架会自动去寻找对于位置的
window
用于设置小程序的状态栏、导航条、标题、窗口背景色。
tabBar
如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。
{
"pages": [
"pages/index/index",
"pages/news/news",
"pages/news/news-detail/news-detail",
"pages/movie/moviv",
"pages/movie/moviv-more/movie-more",
"pages/movie/moviv-detail/movie-detail"
],
"window": {
"backgroundTextStyle": "light"
},
"tabBar": {
"list": [
{
"pagePath": "pages/news/news",
"text": "新闻",
"iconPath":"pages/images/star-1.png",
"selectedIconPath":"pages/images/star-2.png"
},
{
"pagePath": "pages/movie/moviv",
"text": "电影",
"iconPath": "pages/images/star-1.png",
"selectedIconPath": "pages/images/star-2.png"
}
],
"borderStyle":"white",
"backgroundColor":"#109D57",
"color":"white"
}
}
一个小程序的页面由四个文件组成
① index.js 页面自己的逻辑层
② index.json 页面自己的配置
③ index.wxml 就是相当于html页面
④ index.wxss 页面自己的样式
注意:每个页面必须包含这四个文件,四个文件的名称必须一致。如果app.json中的配置信息和页面的配置信息一致,则会被全局配置覆盖,样式也一样。