Uniapp-笔记-Page.json的配置

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

目录

  • 示例配置文件
      • 主页,页面数组,以及tabBar导航配置
      • condition启动模式
        • 使用

示例配置文件

主页,页面数组,以及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时的效果,仅微信小程序生效
Uniapp-笔记-Page.json的配置_第1张图片
为bottom时的效果。需要注意的是。如果为top在常规浏览器中将没有显示
Uniapp-笔记-Page.json的配置_第2张图片

condition启动模式

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

使用

Uniapp-笔记-Page.json的配置_第3张图片
配置完成以后就能在小程序部分看到这个选项,这个搜索就是我们刚才配置的页面,我们点击就能直接进行跳转
Uniapp-笔记-Page.json的配置_第4张图片

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

也可以在uniapp中使用
Uniapp-笔记-Page.json的配置_第5张图片
单独运行页面到浏览器或者手机或者模拟器

你可能感兴趣的:(vue,js,json,前端,uni-app)