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

页面与路由

目录导航

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

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

页面路由

1.什么是路由？

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

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

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

//pages.json
{
    "pages": [
        {
            "path": "pages/index/index", 
            "style": { ... }
        }, {
            "path": "pages/login/login", 
            "style": { ... }
        }
    ]
}

3.如何配置pages.json？

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

属性	类型	描述
path	String	配置页面路径
style	Object	配置页面窗口样式、表现形式
matchMedia	Object	配置显示该窗口的规则

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

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

页面栈

1.什么是栈？

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

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

2.什么是页面栈？

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

路由方式	页面栈表现	触发时机
初始化	新页面入栈	uni-app 打开的第一个页面
打开新页面	新页面入栈	调用 API uni.navigateTo 、使用组件
页面重定向	当前页面出栈，新页面入栈	调用 API uni.redirectTo 、使用组件
页面返回	页面不断出栈，直到目标返回页	调用 API uni.navigateBack 、使用组件 、用户按左上角返回按钮、安卓用户点击物理back按键
Tab 切换	页面全部出栈，只留下新的 Tab 页面	调用 API uni.switchTab 、使用组件 、用户切换 Tab
重加载	页面全部出栈，只留下新的页面	调用 API uni.reLaunch 、使用组件

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

页面通讯

1.什么是页面通讯？

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

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

• uni.$emit(eventName,OBJECT)

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

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

属性	类型	描述
eventName	String	事件名
OBJECT	Object	触发事件携带的附加参数

• uni.$on(eventName,callback)

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

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

属性	类型	描述
eventName	String	事件名
callback	Function	事件的回调函数

• uni.$once(eventName,callback)

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

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

属性	类型	描述
eventName	String	事件名
callback	Function	事件的回调函数

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

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

属性	类型	描述
eventName	Array＜String＞	事件名
callback	Function	事件的回调函数

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.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>

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

值	说明	平台差异说明
navigate	对应 uni.navigateTo 的功能
redirect	对应 uni.redirectTo 的功能
switchTab	对应 uni.switchTab 的功能
reLaunch	对应 uni.reLaunch 的功能	字节跳动小程序与飞书小程序不支持
navigateBack	对应 uni.navigateBack 的功能
exit	退出小程序，target="miniProgram"时生效	微信2.1.0+、百度2.5.2+、QQ1.4.7+

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

navigateTo(){
  uni.navigateTo({
    url: this.url
  })
},
redirectTo(){
  uni.redirectTo({
  url: this.url
  });
},
switchTab(){
  uni.switchTab({
    url: this.url
  });
}

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

返回上一页

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    
});

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

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

reLaunch

1.什么是reLaunch？

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

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

页面栈：页面栈销毁。

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
});

组件

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

pages.json

"style": {
	"app-plus": {
		"animationType": "fade-in",
		"animationDuration": 300
	}
}