uni-app知识点整理（2）- 全局配置和页面配置、tabbar、condition_globalstyle

目录

一、globalStyle全局外观配置

1.1 简介

1.2 简单案例练习

二、页面配置

2.1 简单案例练习

三、配置tabbar

3.1 简介

3.2 简单案例练习

四、condition

4.1 简介

4.2 简单案例练习

---

一、globalStyle全局外观配置

1.1 简介

通过 globalStyle 进行全局配置

官方文档：globalstyle

用于设置应用的状态栏、导航条、标题、窗口背景色等

1.2 简单案例练习

• 导航栏标题颜色修改为：white
• 导航栏标题修改：测试案例
• 导航栏背景色修改：#7bbfea
• 开启下拉刷新
• 下拉loading样式修改：light
• 下拉显示出来的窗口的背景色修改：#ffaa00

// pages.json
 
{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				// "navigationBarTitleText": "uni-app"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "white", // 导航栏标题颜色修改为：white
		"navigationBarTitleText": "测试案例", // 导航栏标题修改
		"navigationBarBackgroundColor": "#7bbfea", // 导航栏背景色修改
		"backgroundColor": "#ffaa00", // 下拉显示出来的窗口的背景色修改
		"backgroundTextStyle":"light", // 下拉loading样式修改
		"enablePullDownRefresh":true // 是否开启下拉刷新
		
	}
}

二、页面配置

uni-app官方文档 - pages

2.1 简单案例练习

创建一个message页面，代替原本index作为默认页面，修改单独修改 H5 样式

右键pages文件夹，选择创建创建页面，填写页面名称以及模板选择即可，同时会Hbuilder X会自动在pages.json中注册

message.vue

<template>
	<view>
		message页面
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>
 
<style>
 
</style>

pages.json

• 将message相关代码移动到index页面前即可代替为默认页面

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
		    "path" : "pages/message/message",
		    "style" :                                                                                    
		    {
				"navigationBarBackgroundColor": "#ff5500",
		        "h5": {	// H5特有配置
		        	"pullToRefresh": {	// 下拉刷新设置
		        		"color": "#ffaa00"
		        	},
					"titleNView": {	// 导航栏设置
						"titleText": "message页面" 
					}
		        }
		    }
		    
		},
		{
			"path": "pages/index/index",
			"style": {
				// "navigationBarTitleText": "uni-app"
			}
		}
    ],
	"globalStyle": {
		"navigationBarTextStyle": "white", // 导航栏标题颜色修改为：white
		"navigationBarTitleText": "测试案例", // 导航栏标题修改
		"navigationBarBackgroundColor": "#7bbfea", // 导航栏背景色修改
		"backgroundColor": "#ffaa00", // 下拉显示出来的窗口的背景色修改
		"backgroundTextStyle":"light", // 下拉loading样式修改
		"enablePullDownRefresh":true // 是否开启下拉刷新
		
	}
}

注意：页面中配置项会覆盖 globalStyle 中相同的配置项

三、配置tabbar

3.1 简介

uni-app官方文档 - tabbar

如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定一级导航栏，以及 tab 切换时显示的对应页。

注意：

• 当设置 position 为 top 时，将不会显示 icon
• tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

3.2 简单案例练习

• 新创建一个user页面
• 下载tabbar图标
• 配置tabbar

 

 图标下载 - 阿里巴巴矢量图标库

pages.json

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
		    "path" : "pages/message/message",
		    "style" :                                                                                    
		    {
				"navigationBarBackgroundColor": "#ff5500",
		        "h5": {	// H5特有配置
		        	"pullToRefresh": {	// 下拉刷新设置
		        		"color": "#ffaa00"
		        	},
					"titleNView": {	// 导航栏设置
						"titleText": "message页面" 
					}
		        }
		    }
		    
		},
		{
			"path": "pages/index/index",
			"style": {
				// "navigationBarTitleText": "uni-app"
			}
		}
        ,{
            "path" : "pages/user/user",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "user页面",
                "enablePullDownRefresh": false
            }
            
        }
    ],
	"globalStyle": {
		"navigationBarTextStyle": "white", // 导航栏标题颜色修改为：white
		"navigationBarTitleText": "测试案例", // 导航栏标题修改
		"navigationBarBackgroundColor": "#7bbfea", // 导航栏背景色修改
		"backgroundColor": "#ffaa00", // 下拉显示出来的窗口的背景色修改
		"backgroundTextStyle":"light", // 下拉loading样式修改
		"enablePullDownRefresh":true // 是否开启下拉刷新
		
	},
	// 配置tabbar
	"tabBar": {
		"list": [
			{
				"text": "首页",
				"pagePath": "pages/index/index",
				"iconPath": "./static/tabs/home.png",
				"selectedIconPath": "./static/tabs/home-tap.png"
			},
			{
				"text": "信息",
				"pagePath": "pages/message/message",
				"iconPath": "./static/tabs/message.png",
				"selectedIconPath": "./static/tabs/message-tap.png"
			},
			{
				"text": "用户中心",
				"pagePath": "pages/user/user",
				"iconPath": "./static/tabs/user.png",
				"selectedIconPath": "./static/tabs/user-tap.png"
			}
		]
	}
}

四、condition

4.1 简介

uni-app官方文档 - condition

启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面

注意： 在 App 里真机运行可直接打开配置的页面，微信开发者工具里需要手动改变编译模式

4.2 简单案例练习

• 添加一个detail.vue页面
• pages.json配置condition模拟跳转

创建一个detail.vue页面

<template>
	<view>
		Detail详情页
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

pages.json内添加以下代码段

	"condition": { //模式配置，仅开发期间生效
		"current": 0,  //当前激活的模式（list 的索引项）
		"list": [
			{
				"name": "详情页", //模式名称
				"path": "pages/detail/detail", //启动页面，必选
				"query": "id=97" //启动参数，在页面的onLoad函数里面得到。
			}
		]
	}

运行到微信小程序开发工具，由图示可看出微信小程序开发工具添加新的编译模式，选择跳转后可以看到传递的参数