Uniapp-笔记-Page.json的配置

这个配置文件主要配置页面的路由以及页面的全局局部效果

示例配置文件

主页，页面数组，以及tabBar导航配置

/// 这里是配置页面路由和信息的地方
{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/login/login",
			"style": {
				"navigationBarTitleText": "登录"
			}
		},
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "主页"
			}
		}
	    ,{
            "path" : "pages/setting/setting",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "个人设置",
                "enablePullDownRefresh": true /* 可下拉刷新 */
            }
            
        }
        ,{
            "path" : "pages/search/search",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "搜索",
                "enablePullDownRefresh": false
            }
            
        }
    ],
	"globalStyle": {
		"navigationBarTextStyle": "white",/* 标题字体颜色 */
		"navigationBarTitleText": "uni-app",/* 标题内容 */
		"navigationBarBackgroundColor": "#00aa00", /* 标题背景颜色 */
		"backgroundColor": "#b7ffd2",/* 背景颜色[刷新时可见] */
		"enablePullDownRefresh": true  /* 配置可刷新 */
	},
	/* 泰波霸配置 */
	"tabBar": {
		"color":"#00aa00", /*配置未选择状态文字的颜色*/
		"selectedColor":"#005500",/*配置选中后的颜色*/
		"backgroundColor":"#c5ffc5",/*tabBar的背景色*/
		"borderStyle":"white",/*上边框的颜色，仅支持黑白*/
		"position":"bottom",/*设置tabBar的位置，可以是top和bottom。一上一下[仅支持微信小程序]*/
		"list":[
			{
				"text":"登录",/* 按钮文字 */
				"pagePath":"pages/login/login",/* 按钮跳转地址 */
				"iconPath":"static/logo.png",/* 按钮图标 */
				"selectedIconPath":"static/logo.png"/* 按钮选中后图标 */
			},
			{
				"text":"初始页面",
				"pagePath":"pages/index/index",
				"iconPath":"static/logo.png",
				"selectedIconPath":"static/logo.png"
			},
			{
				"text":"设置",
				"pagePath":"pages/setting/setting",
				"iconPath":"static/logo.png",
				"selectedIconPath":"static/logo.png"
			}
		]
	},
	/*开发临时页面配置*/
	"condition":{
		"current":0,
		"list":[
			{
				"name":"搜索",/* 名称 */
				"path":"pages/search/search",/* 路由地址 */
				"query":"id=556"/* 启动参数，页面启动时传递的参数，类似组件传值 */
			}
		]
	}
	
}

tabBar 为top时的效果，仅微信小程序生效

为bottom时的效果。需要注意的是。如果为top在常规浏览器中将没有显示

condition启动模式

启动模式配置，仅仅开发期间生效，用于模拟只带页面的场景，比如小程序转发后，或者用户点击所打开的页面，缩进级别同tabBar
condition官方文档

使用

配置完成以后就能在小程序部分看到这个选项，这个搜索就是我们刚才配置的页面，我们点击就能直接进行跳转

跳转成功，并且我们的页面参数就会出现在下方

也可以在uniapp中使用

单独运行页面到浏览器或者手机或者模拟器