[小程序开发之uniapp]页面与路由

页面与路由

目录导航

• 页面路由√
• 页面栈√
• 页面通讯√
• 路由跳转√
• 返回上一页√
• reLaunch√
• 窗口动画√

——————————————————————————————————————

页面路由

1.什么是路由？

路由：在前端，往往指代用不同地址请求不同页面。

2.uniapp如何管理页面及路由？

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

//pages.json
{
    "pages": [
        {
            "path": "pages/index/index", 
            "style": { ... }
        }, {
            "path": "pages/login/login", 
            "style": { ... }
        }
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12

3.如何配置pages.json？

pages：pages节点接收一个对象数组，数组中每一个对象分别指代一个页面。其中分别包含path、style属性。

注意事项：
1.应用入口页默认为第一项
2.在开发过程中，增加或删除页面都需同步对pages数组进行修改
3.path指向的文件不需要填写后缀，uniapp框架会自动寻找路径下的资源

——————————————————————————————————————

页面栈

1.什么是栈？

栈是一种数据结构，具有先进后出的存储性质。

以上图示表现了这种性质：向空栈里push数据的时候，将会被置于栈底，继续push的数据将在栈顶，pop操作会把栈顶的数据先读取。

2.什么是页面栈？

既然我们了解过栈了，页面栈其实就是用来存储页面的栈。
栈中的每个独立元素是一个个页面。

——————————————————————————————————————

页面通讯

1.什么是页面通讯？

页面通讯即页面与页面之间的信息传递。

2.uniapp页面通讯的方法有哪些？

• uni.$emit(eventName,OBJECT)

触发全局的自定义事件。附加参数都会传给监听器回调。

uni.$emit('update',{msg:'页面更新'})
1

• uni.$on(eventName,callback)

监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。

uni.$on('update',function(data){
	console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
})
1
2
3

• uni.$once(eventName,callback)

监听全局的自定义事件。事件可以由 uni.$emit 触发，但是只触发一次，在第一次触发之后移除监听器。

uni.$once('update',function(data){
		console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
	})
1
2
3

• uni.$off([eventName, callback])

移除全局自定义事件监听器。

3.页面通讯的简单示例？

1. 触发add事件，携带data参数为2
2. 监听add事件，触发add方法
3. 移除add事件，触发add方法

setInterval(()=>{    uni.$emit('add', {data: 2})   },1000)

uni.$on('add', this.add)

uni.$off('add', this.add)

add(e) {   this.val += e.data   }
1
2
3
4
5
6
7

——————————————————————————————————————

路由跳转

1.uniapp有几种路由跳转的方法？

两种：使用navigator组件跳转、调用API跳转

2.什么是navigator跳转？

组件跳转。即用组件代替功能，内嵌按钮以达到跳转的效果。
举一个简单的示例。

<navigator :url="url" open-type="navigate">
  <button type="default">跳转到新页面button>
navigator>

<navigator :url="url" open-type="redirect">
  <button type="default">在当前页打开button>
navigator>

<navigator :url="url" open-type="switchTab">
  <button type="default">跳转到tab页面button>
navigator>
1
2
3
4
5
6
7
8
9
10
11
12

3.open-type的默认值与有效值？
open-type 默认值为navigate、其他有效值如下。

3.什么是调用api跳转？
点击事件绑定方法的形式，以uni. 触发跳转方法，并携带对应的url。

navigateTo(){
  uni.navigateTo({
    url: this.url
  })
},
redirectTo(){
  uni.redirectTo({
  url: this.url
  });
},
switchTab(){
  uni.switchTab({
    url: this.url
  });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

——————————————————————————————————————

返回上一页

1.uniapp返回上一页的逻辑？

• uni.navigateBack(OBJECT)

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码

// 此处是A页面
uni.navigateTo({
	url: 'B?id=1'
});

// 此处是B页面
uni.navigateTo({
	url: 'C?id=1'
});

// 在C页面内 navigateBack，将返回A页面
// delta 指代返回的页面数。如果大于现有页面数则返回到首页。
uni.navigateBack({
	delta: 2    
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

页面栈：页面不断出栈，直到目标返回页

——————————————————————————————————————

reLaunch

1.什么是reLaunch？

uniapp 提供关闭所有页面，打开到应用内的某个页面的操作。

uni.reLaunch({
	url: 'test?id=1'
});
1
2
3

页面栈：页面栈销毁。

H5存在问题：无法完整控制浏览器的后退功能，js无法清理所有浏览历史
H5端调用之后虽然之前页面栈会销毁，但是无法清空浏览器之前的历史记录，此时navigateBack不能返回，但如果存在历史记录的话点击浏览器的返回按钮或者调用history.back()仍然可以导航到浏览器的其他历史记录。

贴一段关于reLaunch问题的问答：

——————————————————————————————————————

窗口动画

本API仅App支持。小程序自身不支持自定义动画。

1.在哪里能配置窗口动画？

• API
• 组件
• pages.json

优先级： API = 组件 > pages.json

2.窗口动画的配置方法？

API

uni.navigateTo({
	url: '../test/test',
	animationType: 'pop-in',
	animationDuration: 200
});
uni.navigateBack({
	delta: 1,
	animationType: 'pop-out',
	animationDuration: 200
});
1
2
3
4
5
6
7
8
9
10

组件

<navigator animation-type="pop-in" animation-duration="300" url="../test/test">navigatornavigator>
<navigator animation-type="pop-out" animation-duration="300" open-type="navigateBack" >navigatornavigator>
1
2

pages.json

"style": {
	"app-plus": {
		"animationType": "fade-in",
		"animationDuration": 300
	}
}
1
2
3
4
5
6