小程序学习05——uniapp路由和菜单配置

目录

一、路由

二、如何管理页面及路由？

三、pages.json 页面路由

四、 tabBar

---

一、路由

路由：在前端，往往指代用不同地址请求不同页面，决定了用户如何在应用的不同页面之间导航。

菜单：对于每个路径（路由），跳转

二、如何管理页面及路由？

uniapp管理路由的方式：pages.json维护，框架统一管理。

uni-app 通过 pages 节点配置应用由哪些页面组成，pages 节点接收一个数组，数组每个项都是一个对象，其属性值如下：

 path： String类型，用于配置页面路径，（路由）
 style： Object类型，用于配置页面窗口表现，配置项参考uniapp中pageStyle，（样式）
 needLogin：Boolean类型 默认false，表示是否需要登录才可访问

Tips：

• pages节点的第一项为应用入口页（即首页）

• 应用中新增/减少页面，都需要对 pages 数组进行修改

• 文件名不需要写后缀，框架会自动寻找路径下的页面资源

代码示例：

开发目录为：

┌─pages
│  ├─index
│  │  └─index.vue
│  └─login
│     └─login.vue
├─static
├─main.js
├─App.vue
├─manifest.json
└─pages.json

三、pages.json 页面路由

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

导航栏高度为 44px (不含状态栏)，tabBar 高度为 50px (不含安全区)。

它类似微信小程序中app.json的页面管理部分。注意定位权限申请等原属于app.json的内容，在uni-app中是在manifest中配置。

pages.json文件中页面路由部分代码示意如下 ：

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
	{
		"path": "pages/index/index",
		"style": {
			"navigationBarTitleText": "uni-app"
		}
	},
	{
		"path": "pages/order/index",
		"style": {
			"navigationBarTitleText": "",
			"navigationBarBackgroundColor": "#FFFFFF"
		}
	},
	{
		"path": "pages/user/index",
		"style": {
			"navigationBarTitleText": "",
			"navigationBarBackgroundColor": "#FFFFFF"
		}
	}
]

四、 tabBar

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

代码示例

"tabBar": {
	"color": "#535353",  //字体颜色
	"selectedColor": "#0bb584",  //选中的颜色
	"borderStyle": "white",   //边框（默认为黑色（black）
	"backgroundColor": "#ffffff",
	"list": [{
			"pagePath": "pages/index/index",
			"iconPath": "static/resource/tab_index.png",
			"selectedIconPath": "static/resource/tab_index_seled.png",
			"text": "首页"
		}, {
			"pagePath": "pages/order/index",
			"iconPath": "static/resource/tab_pub.png",
			"selectedIconPath": "static/resource/tab_pub_seled.png",
			"text": "订单"
		}, {
			"pagePath": "pages/user/index",
			"iconPath": "static/resource/tab_user.png",
			"selectedIconPath": "static/resource/tab_user_seled.png",
			"text": "我的"
		}
	]
}