admin管理员组文章数量:1633779
页面与路由
目录导航
- 页面路由√
- 页面栈√
- 页面通讯√
- 路由跳转√
- 返回上一页√
- 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 、使用组件 <navigator open-type="navigate"/> |
页面重定向 | 当前页面出栈,新页面入栈 | 调用 API uni.redirectTo 、使用组件 <navigator open-type="redirectTo"/> |
页面返回 | 页面不断出栈,直到目标返回页 | 调用 API uni.navigateBack 、使用组件 、用户按左上角返回按钮、安卓用户点击物理back按键 |
Tab 切换 | 页面全部出栈,只留下新的 Tab 页面 | 调用 API uni.switchTab 、使用组件 <navigator open-type="switchTab"/> 、用户切换 Tab |
重加载 | 页面全部出栈,只留下新的页面 | 调用 API uni.reLaunch 、使用组件 <navigator open-type="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.页面通讯的简单示例?
- 触发add事件,携带data参数为2
- 监听add事件,触发add方法
- 移除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跳转?
组件跳转。即用组件代替功能,内嵌按钮以达到跳转的效果。
举一个简单的示例。
<!-- open-type为navigate,如果不写open-type跳转方式默认为navigate -->
<navigator :url="url" open-type="navigate">
<button type="default">跳转到新页面</button>
</navigator>
<!-- open-type为redirect -->
<navigator :url="url" open-type="redirect">
<button type="default">在当前页打开</button>
</navigator>
<!-- open-type为switchTab -->
<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">navigator</navigator>
<navigator animation-type="pop-out" animation-duration="300" open-type="navigateBack" >navigator</navigator>
pages.json
"style": {
"app-plus": {
"animationType": "fade-in",
"animationDuration": 300
}
}
版权声明:本文标题:[小程序开发之uniapp]页面与路由 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1729175740a1188690.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论