app.json
必须有一个对象,用{}表示一个对象
不要粘贴这些代码,粘贴上去会报错,因为json文件不支持注释
{
//pages所有的页面都要在此处说明路径
"pages":[
"pages/home/home",
"pages/about/about"
],
//设置全局窗口的颜色、背景之类
"window":{
//导航栏背景颜色 颜色必须用十六进制表示
"navigationBarBackgroundColor": "#ff5777" ,
//导航栏的文本颜色 如上面的三点标志,电量标志之类 只支持白色和黑色
"navigationBarTextStyle":"black"
//导航栏为小程序加标题
"navigationBarTitleText":"Hello"
//ios系统时,下拉整个页面露出的背景色
"backgroundColor": "#000000",
//安卓系统,设置界面可以下拉,一般不进行全局设置,而是对于某个页面单独设置
"enablePullDownRefresh": true,
//下拉界面时,显示的加载图标的样式,只有light和dark值可选
"backgroundTextStyle": "light"
},
//底部tabBar的相关设置 alt+shift+f可以对代码进行格式化,使代码结构清晰
//list可以看作一个数组,最少需要两个项目,每个项目可以看作是一个超链接
"tabBar": {
//修改图标下显示的文字颜色 与list是同级的
"selectedColor": "#000000",
"list": [
//item1
{
//点击图标后,需要跳转的页面路径
"pagePath": "pages/home/home",
//图标下方显示的文字
"text": "主菜单",
//图标路径,需要自己找图片 图片大小不能超过40kb 81*81px
"iconPath": "assets/tabbar/home.png",
//选中图标后图标进行改变的图片
"selectedIconPath": "assets/tabbar/home_act.png"
},
//item2
{
"pagePath": "pages/about/about",
"text": "选择",
"iconPath": "assets/tabbar/select.png",
"selectedIconPath": "assets/tabbar/select__act.png"
}
]
}
}
上述操作完成后,效果如下:
page.json
可以独立设置导航栏的标题,颜色之类
页面配置优先级大于全局配置,和局部变量与全局变量的性质一样
{
"usingComponents": {},
//对于导航栏的设置不用使用app.json中的window关键字
"navigationBarTitleText":"分类",
"navigationBarBackgroundColor":"#ff0000"
}
page.json完成后,跳转页面显示如下: