uniapp pages.json介绍及使用

pages.json页面路由，是对uniapp的全局设置，如设置页面路径，页面标题名称，原生导航栏样式，窗口样式等。

配置项

globalStyle

globalStyle设置的是页面默认的窗口表现，也可以说是全局样式，如果在pages里面的style里面没有对页面设置窗口表现的话，默认使用的就是globalStyle的窗口表现样式，主要设置的就是应用的状态栏、导航条、标题、窗口背景色等一系列操作

常用属性

navigationBarBackgroundColor：参数类型：HexColor，默认值：#F8F8F8设置的导航栏的背景颜色，也是状态栏的背景颜色

navigationBarTextStyle：参数类型：String，默认值：black，设置的是导航栏的标题文字颜色，以及状态栏的前景色，只支持设置white和black

navigationBarTitleText：参数类型是：String，设置的是导航栏的标题文字

navigationStyle：参数类型：String，默认值：default，设置的是导航栏的样式，只支持设置default/custom，设置default表示的是使用原生的导航栏，设置custom表示的是取消使用默认的原生导航栏，如果需要使用的话，需要看注意事项：pages.json 页面路由 | uni-app官网

backgroundColor：参数类型：HexColor，默认值：#ffffff，设置的是下拉刷新时显示的窗口背景颜色，它只能在微信小程序有效，其他平台设置这个属性无效

backgroundTextStyle：参数类型：String，默认值：dark，下拉刷新时，loading的样式，只支持设置dark和light

enablePullDownRefresh：参数类型：Boolean，默认值：false，设置此属性表示是否开启下拉刷新

onReachBottomDistance：参数类型：Number，默认值：50，设置的是上拉滚动时触底的事件，通过设置参数，当上拉滚动时，距离页面尾部的距离达到设定的参数时就会触发该事件，通常用于触底时重新从数据库加载数据到页面上显示

更多的属性以及使用介绍见：pages.json 页面路由 | uni-app官网

使用示例

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页",
				"navigationBarBackgroundColor": "#09ae1e",
				"navigationBarTextStyle": "white"
			}
		},
		{
			"path" : "pages/index/demo2/demo2"
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "未知页",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#09ae1e"
	},
	"uniIdRouter": {}
}

 页面效果

通过这样的一个示例可以看出来，如果pages里面的style设置了和globalStyle一样的属性，那么style将会覆盖globalStyle的属性，也就是说pages里面的style权重比globalStyle的权重高。

 可以看到我们通过navigationBarBackgroundColor属性进行设置之后状态栏的背景颜色也是跟着一起改变的。

如果设置了"navigationStyle": "custom"属性会发生什么呢？

{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页",
				"navigationBarBackgroundColor": "#09ae1e",
				"navigationBarTextStyle": "black",
				"navigationStyle": "custom"
			}
		}

 可以通过这张效果图看到如果我们设置了"navigationStyle": "custom"的话，我们相应的设置导航栏的背景色、标题文字、标题文字颜色等属性都会失效

pages

pages设置的是页面的路径及窗口表现，pages是一个数组，数组中的每一项都是一个对象，这个对象包含的就是我们的一个页面的路径及窗口表现，如果想要一个新建的页面能够显示出来的话就必须再这里添加一个数组项并为其设置页面路径；pages中的属性有：

path：参数类型:String，使用来配置页面路径的

style：参数类型:Object，用来配置具体的窗口表现，其中style中的属性大致和globalStyle相同

needLogin：参数类型：Boolean，默认值是false，用来表示是否需要登录后才能访问此页面

使用示例

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页",
				"navigationBarBackgroundColor": "#09ae1e",
				"navigationBarTextStyle": "black",
				"navigationStyle": "custom"
			}
		}
	]

如果我想要运行demo2页面的话这是是运行不了的，因为pages里面没有注册demo2页面的信息

，我们只需要在pages里面注册demo2页面的信息即可，如：

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页",
				"navigationBarBackgroundColor": "#09ae1e",
				"navigationBarTextStyle": "black",
				"navigationStyle": "custom"
			}
		},{
			"path": "pages/index/demo2/demo2",
			"style": {
				"navigationBarTitleText": "demo2",
			}
		}
	]

如果想要让demo2作为项目首次运行时显示的页面，我们只需要把demo2的注册信息放到数组中的第一项即可，如：

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/demo2/demo2",
			"style": {
				"navigationBarTitleText": "demo2"
			}
		},{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页",
				"navigationBarBackgroundColor": "#09ae1e",
				"navigationBarTextStyle": "black",
				"navigationStyle": "custom"
			}
		}
	]

tabBar

底部导航栏，如果我们的应用时多个tab的应用的话，我们可以通过tabBar设置一级导航栏，以及tab切换时显示的页面

常用属性

color：参数类型：HexColor，tab上的文字默认颜色
selectedColor：参数类型：HexColor，tab选中的时候显示的文字颜色

backgroundColor：参数类型：HexColor，tab的背景颜色

borderStyle：参数类型：String，tabBar的上边框颜色，只支持white和black

list：参数类型：Array，tab的列表，最少要有2个，最多5个

position：参数类型：String，tab显示的位置，可选的值时bottom、top，top值只支持在微信小程序显示

更多的tabBar属性见：pages.json 页面路由 | uni-app官网

 list

接受一个数组值，数组中的每一项都是一个对象

常用属性

pagePath：参数类型：String，点击tab跳转的页面路径，首先得在pages里面注册，且是设置tabBar必填的属性

text：参数类型：String，tab上显示的按钮文字，在App和H5平台是必填的，如果实在不知道放什么字可以放一个没有文字的+号的图标

iconPath：参数类型：String，图标图片路径，图标的大小限制为40kb，且图标的尺寸建议是81px*81px，不能是网络图标，或带字体的图标，如果我们设置了postion的值为top时，这个属性就不起作用了

selectedIconPath：参数类型：String，选中的时候的图标图片路径，要求同上

使用示例

pages.json

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页"
			}
		},
		{
			"path" : "pages/classify/classify",
			"style" : 
			{
				"navigationBarTitleText" : "分类"
			}
		},
		{
			"path" : "pages/myInfo/myInfo",
			"style" : 
			{
				"navigationBarTitleText" : "我的"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": {
		"color": "#ccc",
		"backgroundColor": "#fffdf3",
		"selectedColor": "##00d064",
		"list": [
			{
				"pagePath": "pages/index/index",
				"iconPath": "static/images/tabBar/home.png",
				"selectedIconPath": "static/images/tabBar/home-h.png",
				"text": "首页"
			},
			{
				"pagePath": "pages/classify/classify",
				"iconPath": "static/images/tabBar/classify.png",
				"selectedIconPath": "static/images/tabBar/classify-h.png",
				"text": "分类"
			},
			{
				"pagePath": "pages/myInfo/myInfo",
				"iconPath": "static/images/tabBar/user.png",
				"selectedIconPath": "static/images/tabBar/user-h.png",
				"text": "我的"
			}
		]
	},
	"uniIdRouter": {}
}

页面效果

切换tab效果 

 

加上postion属性值为top后的页面效果

"position": "top",

 

可以看到设置了postion值为top时，我们设置的图标图标就不会起作用了