uniapp -- 基础配置篇

初识 uniapp 配置

我们在 pages.json （页面路由） 文件中进行 uniapp 的相关配置，如果你已经自定义的创建了一个 uniapp 程序的话，那么你会看到该文件中有一个 pages 节点下面的每一个对象都是一个页面的相关信息，比如 path 配置页面的相关路径，style 配置该页面的样式，当然下面还有一个 globalStyle 节点

该节点阐述了全局的配置，在全局配置中的信息，所有的页面都将适用，如果其中有一个页面的配置信息与全局配置产生了冲突，那么会有一个就近原则，该页面的配置信息将会覆盖掉全局的配置

当然不仅仅是这俩个，还有很多的配置项，比如我们熟悉的 tabBar ,在 uniapp 中甚至我们都不需要自己去手写导航栏

---

globalStyle

进入uniapp 官网（与 globalStyle 相关）

globalStyle 用于设置应用的状态栏、导航条、标题、窗口背景色等，比如 navigationBarBackgroundColor 用来设置导航栏的背景颜色，它只支持 HexColor 格式的颜色配置

navigationBarTextStyle 配置文本颜色，只支持白色和黑色俩种颜色

navigationBarTitleText 配置标题文本的内容，当然这些配置相关我们可以在单个页面配置也可以在全局配置

当然它们还有不同的平台支持程度，比如 titleImage 导航栏的背景图片，这个功能只支持 支付宝小程序、H5、APP

我们还可以配置 h5 ，H5页面进行单独的配置

更多详见官网…

---

pages

官方说：uni-app 通过 pages 节点配置应用由哪些页面组成，pages 节点接收一个数组，数组每个项都是一个对象

也就是说 pages 节点是一个数组，在数组中的每一个对象都是一个页面

"pages": [
		// 第一页（启动页）配置
		{
			"path": "pages/message/new_file",
			"style": {
				"navigationBarTextStyle": "white",
				"h5": {
					"pullToRefresh" : {
						"color":"#ffaa7f"
					}
				}
			}
			
		},
		// 礼物页配置
		{
			"path": "pages/index/index"
		},
		// test测试详情页
		{
			"path": "pages/test_condition/test_condition"
		},
		// home页面
		{
			"path": "pages/home/new_file"
		}
	]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

没错，就是这样，pages 数组中有四个对象，那么就是四个页面，我们在每一个对象中使用 path 节点来对页面路径进行配置，而 style 则是对该页面进行单独的配置，pages 节点的第一项为应用入口页，我们之前说的是 globalStyle 是全局样式配置，而每一个页面对象中的 style 则是对该页面的单独配置，不会影响其他页面

---

tabBar

tabBar 不需要多说，真的是很方便呀，之前我们需要自己手动的书写 tabBar 组件，而 uniapp 为我们提供好了，我们直接进行相关的配置就好了，而官方页说了：在 pages.json 中提供 tabBar 配置，不仅仅是为了方便快速开发导航，更重要的是在App和小程序端提升性能。在这两个平台，底层原生引擎在启动时无需等待js引擎初始化，即可直接读取 pages.json 中配置的 tabBar 信息，渲染原生tab

🤔哦，原来是因为好处多多呀

对了，想要写（配置）好一个 tabBar组件，官方的 tips 不可不看 ：

当设置 position 为 top 时，将不会显示 icon
tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
tabbar 切换第一次加载时可能渲染不及时，可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花（hello uni-app使用了此方式）
tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的onShow，不会再触发onLoad。
顶部的 tabbar 目前仅微信小程序上支持。需要用到顶部选项卡的话，建议不使用 tabbar 的顶部设置，而是自己做顶部选项卡，可参考 hello uni-app->模板->顶部选项卡。
1
2
3
4
5

tabBar 中也是有一些必要属性的，比如选项卡文本默认颜色，被选中之后又是什么颜色，背景色，图标间距…跳转对应页面的路径、图标路径等等

当然，对于图标的选择，uniapp 还是很挑剔的：icon 大小限制为40kb，建议尺寸为 81px * 81px，当 position 为 top 时，此参数无效，不支持网络图片，不支持字体图标 😁

"tabBar": {
		"color": "#707070",
		"selectedColor":"#ad4531",
		"backgroundColor": "#1d1d1d",
		"list": [
			{
				"text": "我的",
				"pagePath": "pages/message/new_file"
				"iconPath": "static/tabs/我的初始.svg",
				"selectedIconPath": "static/tabs/我的.svg"
			},
			{
				"text": "礼物",
				"pagePath": "pages/index/index"
				"iconPath": "static/tabs/礼物初始.svg",
				"selectedIconPath": "static/tabs/礼物.svg"
			},{
				"text": "home",
				"pagePath": "pages/home/new_file"
			}
		]
	},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

就像我的这段配置，其实在 H5页面 是可以正常进行显示的，可是如果运行到微信小程序的就会报错了，因为在微信小程序中的 tabBar 是不支持 SVG 格式的图标的

---

condition

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

该节点有俩个属性值：

• current ： 当前激活的模式，list节点的索引值
• list ： 启动模式列表

而在 list 节点中我们仍然有三个属性的配置：

• name ： 启动模式名称
• path ： 启动页面路径
• query ： 启动参数，可在页面的 onLoad 函数里获得

	"condition": {
		"current": 0,
		"list": [
			{
			"name": "详情",
			"path": "pages/test_condition/test_condition",
			"query": "id=10"
			}
		]
	}
1
2
3
4
5
6
7
8
9
10

这个我们可以在微信小程序中进行查看：