2022-09-07 uni-app学习笔记(四) uni-app路由配置和页面跳转,uni.navigateTo跳转失败的可能原因以及解决方法

1.路由配置

uniapp页面全部交给框架统一处理,开发者需要在pages.json里配置每个路由页面的路径和页面样式
(类似于小程序在app.json中配置路由)
如:

{
	"path": "pages/index/index",
	"style": {
		"navigationBarTitleText": "uni-app",
		"enablePullDownRefresh":true//可以下拉
	}
}

2.编程式导航和组件式导航

编程式导航:uni.navigateTo
组件式导航:<navigator></navigator>

组件式导航示例:index.vue

<view class="">
	<navigator url="/pages/404/404">返回404页面</navigator>
</view>

回顾:vue的声明式导航和编程式导航的定义和写法区别

2022-10-25 vue的声明式导航和编程式导航的定义和写法区别

3.使用pages.json中的tabBar进行底部选项卡的设置

step1:pages文件夹下新建四个选项卡文件(文件夹)

• index(首页,已存在),
• list(通讯录页),
• finder(发现页),
• center(个人中心页),

随便写点东西,保存后在pages.json的"pages"数组中生成相应路径

step2:在uniapp官网复制tabBar的配置代码

官网位置:https://uniapp.dcloud.net.cn/collocation/pages.html#配置项列表
把"tabBar": {...}粘贴进pages.json

step3:在iconfont上找上述页面对应的四个图标

每个图标分成未选择的和已选择的颜色,所以将会下载8张png,统一放进新建文件夹tabbarIcon中,并将此文件夹放到uniapp项目的static文件夹下

step4:调整tabbar的页面路径和图片路径

代码如下

"tabBar": {
	"color": "#7A7E83",
	"selectedColor": "#3cc51f",
	"borderStyle": "black",
	"backgroundColor": "#ffffff",
	"list": [{
		"pagePath": "pages/index/index",
		"iconPath": "static/tabbarIcon/weixin.png",
		"selectedIconPath": "static/tabbarIcon/weixin_s.png",
		"text": "微信"
	}, {
		"pagePath": "pages/list/list",
		"iconPath": "static/tabbarIcon/list.png",
		"selectedIconPath": "static/tabbarIcon/list_s.png",
		"text": "通讯录"
	} , {
		"pagePath": "pages/finder/finder",
		"iconPath": "static/tabbarIcon/faxian.png",
		"selectedIconPath": "static/tabbarIcon/faxian_s.png",
		"text": "发现"
	} , {
		"pagePath": "pages/center/center",
		"iconPath": "static/tabbarIcon/center.png",
		"selectedIconPath": "static/tabbarIcon/center_s.png",
		"text": "个人中心"
	}]
}

效果

4.【踩坑】uni.navigateTo跳转失败的可能原因以及解决方法

原因一:配置在tabBar中的路径(重点)

配置在tabBar中的路径不能被uni.navigateTo所跳转(如上例中的/pages/index/index)
这时候用uni.switchTo替代uni.navigateTo即可

原因二:URL路径格式错误

url格式一定要是"/pages/xxx"格式,即以"/“开头,不能省略也不能加”."

原因三:路径未配置

路径未配置,也就是还没创建就引用了,先去创建对应的文件

5.路由跳转:常用的组件式跳转api

uniapp有两种页面跳转方式,一个是navigator组件跳转,即标签式导航
另一个是使用api跳转,即组件式跳转(除了navigateTo还有navigateBack等等)

6.获取当前页面栈:getCurrentPages

getCurrentPages()函数用于获取当前页面栈的实例,以数组的形式按栈的顺序给出
第一个元素为首页,最后一个元素为当前页

*getCurrentPages()仅用于展示页面栈的情况,最好别修改页面栈,否则出现页面状态错误
示例:在index页的onLoad中打印getCurrentPages()函数

onLoad() {
	console.log("打印当前页:",getCurrentPages());
},

输出:

7.路由传参和接收

.7.1.onLoad()的参数(比如option)是上个页面传递的数据

页面生命周期onLoad()可以监听页面加载,这个生命周期的参数是上一个页面传递的数据
如:
上一个页面:

onLoad(){
	uni.navigateTo({
		url:"/page2?name=zs&password=123456"
	})
}

其中,URL是将要跳转的页面路径,该路径后面可以带参数,格式是:

• 参数与路径之间用"?"分隔
• 参数与参数之间用"&"分隔
• 参数中的键和值用"="相连

如:path?key1=value1&key2=value2,path是下一个页面的路径,下一页面的onLoad()函数可以得到传递的参数(即:key1和key2)

下一个页面:

onLoad:function(option){
	console.log(option..name,option.password);
}

*url有长度限制,太长的字符需要使用encodeURI和decodeURI进行处理

7.2.路由传参示例

index.vue

onLoad() {
	const timer=setTimeout(()=>{
		clearTimeout(timer);
		uni.navigateTo({
			url:"/pages/index2/index2?name='zhangsan'&msg='hello'"
		});
	},1000);
},

新建pages/index2/index2.vue

onLoad:function(option){
	console.log("获取index传过来的数据:",option.name,option.msg)
}

效果

注意:第二个页面不能是tabbar中的路径的页面

官网位置:https://uniapp.dcloud.net.cn/api/router.html#navigateto

8.小程序路由分包配置

为什么要进行分包?

由于小程序有体积和资源的加载限制,各家的小程序平台都提供了分包方式,以优化小程序的下载和启动速度]

什么是主包和分包?

• 主包:放置默认启动页面以及tabbar页面,小程序启动时,默认会下载主包并启动主包内的页面
• 分包:根据pages.json的配置进行划分,用户进入到分包某个页面时,会把对应分包自动下载下来,下载完毕后再进行展示,下载过程中终端界面会有等待提示信息

示例:创建一个分包

• step1:在根目录创建新目录"subpages",作为"pages"文件夹的兄弟文件夹
• step2:subpages文件夹下新建news.vue文件,随便写点东西
• step3:news.vue保存后会在pages.json里面自动生成路径
• step4:在pages.json中pages数组的下面新建一个subpackage数组,并把news页的路径剪切到此

pages.json

"pages":[{...}],
"subPackages":[{
	"root":"subpages",
	"pages":[{
           "path" : "news/news",
           "style" :                                                                                    
           {
               "navigationBarTitleText": "新闻中心",
               "enablePullDownRefresh": false
           }
           
       }]
}],