pages.json

最新推荐文章于 2024-04-25 21:15:00 发布

JWbonze

最新推荐文章于 2024-04-25 21:15:00 发布

阅读量5.3k

点赞数 2

本文链接：https://blog.csdn.net/JWbonze/article/details/121562987

版权

uni-app 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

pages.json概述

pages.json 文件用来对uni-app进行全局配置，决定页面文件的路径、窗口表现、设置多tab页（底部导航）等。

pages.json 配置内容

（1）globalStyle Object
可选，设置默认页面的窗口表现。
（2）pages Object Array
必选，设置页面路径及窗口表现。
（3）tabBar Object
可选，设置底部tab（底部导航）的表现。
（4）condition Object
可选，启动模式配置

创建uni-app程序

下面通过新创建一个uni-app项目来记录pages.json文件的配置。
如果有uni-app项目，可以跳过该步骤，直接查看pages.json文件即可。

创建项目

目标是在多平台运行，选择uni-app(U)
在这里插入图片描述
项目创建完毕，会在根目录自动生成pages.json文件。

创建页面-pages

在这里插入图片描述
选中pages目录，右键“新建页面”，创建的页面会自动在page.json文件的pages里注册。
如下图新增了list、publish、me页面等。

此时pages.json文件会自动添加新增的页面信息。

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	    ,{
            "path" : "pages/publish/publish",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/list/list",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/me/me",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
    ],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}

配置pages

上面介绍的是新增页面时自动注册pages.json文件，下面对pages进行个性化修改。
pages接收一个数组，来指定应用由哪些页面组成。每一项代表对应页面的信息，应用中新增/减少页面，都需要对 pages 数组进行修改。
文件名不需要写后缀，如“.vue”，框架会自动寻找路径下的页面资源。
注意：pages节点的第一项为应用入口页（即首页）。
pages结构：

"pages":[
	{
	// 每个页面
	},
	{
	// 每个页面
	},
]

pages.style

用于设置每个页面的状态栏、导航条、标题、窗口背景色等。

navigationBarBackgroundColor

HexColor #000000 导航栏背景颜色，如"#000000"

navigationBarTextStyle

String white 导航栏标题颜色，仅支持 black/white

navigationBarTitleText

String 导航栏标题文字内容

backgroundColor

HexColor #ffffff 窗口的背景色微信小程序

backgroundTextStyle

String dark 下拉 loading 的样式，仅支持 dark/light

enablePullDownRefresh

Boolean false 是否开启下拉刷新，详见页面相关事件处理函数

onReachBottomDistance

Number 50 页面上拉触底事件触发时距页面底部距离，单位为px

navigationStyle

设置导航栏样式。String类型，默认default，仅支持 default/custom。
custom模式可自定义导航栏，只保留右上角胶囊状的按钮。
注意当值为custom时，会产生uniapp移除原生导航栏后页面与手机状态栏重叠问题。也就是页面会直通手机顶部状态栏，页面与手机状态栏重叠。
解决：配置mainfest.json来关闭沉浸式，打开应用的manifest.json文件，打开源码视图，如下代码所示，在 app-plus 下添加 statusbar ，并将其下 immersed 的值设为 false。

    "app-plus" : {
        //"usingComponents" : true,
        //"nvueStyleCompiler" : "uni-app",
        //"compilerVersion" : 3,
		 "statusbar": {  
		    "immersed": false  
		},
	}

backgroundColorTop

String #ffffff 顶部窗口的背景色。微信小程序且为 iOS

backgroundColorBottom

String #ffffff 底部窗口的背景色。微信小程序且为 iOS

	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				// 导航栏标题文字内容
				"navigationBarTitleText": "自由写作网",
				// 导航栏样式，仅支持 default/custom,custom就会取消导航栏
				"navigationStyle": "custom"
			}
		}
	    ,{
            "path" : "pages/publish/publish",
            "style" :                                                                                    
            {	// 导航栏标题文字内容
                "navigationBarTitleText": "发布",
				// 是否开启下拉刷新,true开启
                "enablePullDownRefresh": false,
				// 导航栏样式，仅支持 default/custom,custom就会取消导航栏
				"navigationStyle": "custom"
            }
            
        }
        ,{
            "path" : "pages/list/list",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "列表",
                "enablePullDownRefresh": false,
				// 导航栏样式，仅支持 default/custom,custom就会取消导航栏
				"navigationStyle": "custom"
            }
            
        }
        ,{
            "path" : "pages/me/me",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "我的",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/login/login",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "登录",
                "enablePullDownRefresh": false,
				// 导航栏样式，仅支持 default/custom,custom就会取消导航栏
				"navigationStyle": "custom"
            }
            
        }
    ],

配置全局样式-globalStyle

	"globalStyle": {
		// 导航栏标题颜色,仅支持 black/white 
		"navigationBarTextStyle": "black",
		// 导航栏标题文字内容
		"navigationBarTitleText": "uni-app",
		// 导航栏背景颜色
		"navigationBarBackgroundColor": "#F8F8F8",
		// 窗口的背景色
		"backgroundColor": "#F8F8F8"
	}

配置底部导航-tabBar

tabBar 中的list是一个数组，只能配置最少2个、最多5个 tab，tab按数组的顺序排序。
配置导航栏需要先准备导航的页面，上面已创建了publish、list、me等页面。
需要准备导航每一个按钮的两个图标：默认图标和选中图标。
结构：

	"tabBar": {
		//tabBar属性
		"list": [
			{
				// 每个导航按钮
			},
			{
				// 每个导航按钮
			},
		]
	}

tabBar整体属性

color HexColor 是 tab 上的文字默认颜色
selectedColor HexColor 是 tab 上的文字选中时的颜色
backgroundColor HexColor 是 tab 的背景色
borderStyle String 否 black tabbar 上边框的颜色，仅支持 black/white
list Array 是 tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
position String 否 bottom 可选值 bottom、top

每个导航按钮属性

pagePath String 是页面路径，必须在 pages 中先定义
text String 是 tab 上按钮文字
iconPath String 否图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片
selectedIconPath String 否选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效
tabBar示例：

	"tabBar": {
		// 导航按钮文字默认颜色
		"color": "#A6A6A6",
		// 导航按钮文字被选中颜色
		"selectedColor": "#74ADFC",
		// 导航栏上边框的颜色，仅支持 black/white
		"borderStyle": "black",
		// 导航栏背景色
		"backgroundColor": "#F8F8F8",
		// 导航栏列表
		"list": [{
				// 页面路径，必须在pages内已经定义
				"pagePath": "pages/index/index",
				// 导航默认按钮，图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，不支持网络图片
				"iconPath": "static/images/tabBarImg/index.png",
				// 导航选中时按钮
				"selectedIconPath": "static/images/tabBarImg/index_select.png",
				// 导航按钮文字
				"text": "首页"
			},
			{
				"pagePath": "pages/list/list",
				"iconPath": "static/images/tabBarImg/list.png",
				"selectedIconPath": "static/images/tabBarImg/list_select.png",
				"text": "列表"
			},
			{
				"pagePath": "pages/publish/publish",
				"iconPath": "static/images/tabBarImg/publish.png",
				"selectedIconPath": "static/images/tabBarImg/publish_select.png",
				"text": "发布"
			},
			{
				"pagePath": "pages/me/me",
				"iconPath": "static/images/tabBarImg/me.png",
				"selectedIconPath": "static/images/tabBarImg/me_select.png",
				"text": "我的"
			}
		]
	}