⼩程序-结构⽬录配置介绍
结构⽬录
⼩程序框架提供了⾃⼰的视图层描述语⾔WXML和WXSS，以及JavaScript，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。⼀.⼩程序⽂件结构和传统web对⽐
结构传统web⼩程序
结构HTML WXML
样式CSS WXSS
逻辑Javascript Javascript
配置⽆JSON
通过以上对⽐得出，传统web 是三层结构。⽽⼩程序是四层结构，多了⼀层配置.json
⼆.基本的项⽬⽬录
配置介绍
⼀个⼩程序应⽤程序会包括最基本的两种配置⽂件。⼀种是全局的app.json和页⾯⾃⼰的page.json
⼀.全局配置app.json
app.json是当前⼩程序的全局配置，包括了⼩程序的所有页⾯路径、界⾯表现、⽹络超时时间、底部 tab 等。普通快速启动项⽬⾥边的app.json配置
app.json
{
"pages": [
"pages/test/test",  # 新增页⾯，第⼀位代表⾸页
"pages/index/index",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "⼩程序",
"navigationBarTextStyle": "white"
},
"sitemapLocation": "sitemap.json"
}
字段的含义
1. pages字段 —— ⽤于描述当前⼩程序所有页⾯路径，这是为了让客户端知道当前你的⼩程序页⾯定义在哪个⽬录。
2. window字段 —— 定义⼩程序所有页⾯的顶部背景颜⾊，⽂字颜⾊定义等。
局部配置page.json
page.json
这⾥的page.json其实⽤来表⽰页⾯⽬录下的page.json这类和⼩程序页⾯相关的配置。
开发者可以独⽴定义每个页⾯的⼀些属性，如顶部颜⾊、是否允许下拉刷新等等。
页⾯的配置只能设置app.json中部分window配置项的内容，页⾯中配置项会覆盖app.json的window中相同的配置项。
属性类型默认值描述
navigationBarBackgroundColor HexColor#000000导航栏背景颜⾊，如#000000
属性类型默认值描述
navigationBarTextStyle String white导航栏标题颜⾊，仅⽀持black / white
navigationBarTitleText String导航栏标题⽂字内容
backgroundColor HexColor#ffffff窗⼝的背景⾊
backgroundTextStyle String dark下拉 loading 的样式，仅⽀持dark / light
enablePullDownRefresh Boolean false是否全局开启下拉刷新。详见
onReachBottomDistance Number50页⾯上拉触底事件触发时距页⾯底部距离，单位为px。详见
disableScroll Boolean false设置为true则页⾯整体不能上下滚动；只在页⾯配置中有效，⽆法在app.json中设置该项
补充:
⼩程序底边栏
app.json
{
"tabBar": {
"color": "#456",
"selectedColor": "#444444",
"backgroundColor": "#ffffff",
"borderStyle": "white",
"list": [
{
"pagePath": "pages/test/test",  // 路径
"text": "⾸页",
"iconPath": "images/icon1.png",  // 默认前图⽚
"selectedIconPath": "images/icon1-active.png"  // 点击后图⽚
},
{
"pagePath": "pages/index/index",
"text": "test1",
"iconPath": "images/icon2.png",
"selectedIconPath": "images/icon2-active.png"
}selectediconpath什么意思
]
},
}
注：内容摘⾃

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。