页面两种跳转方式
navigator和wxAPI
navigator组件
navigator组件主要是用于界面的跳转
属性:
target: 在哪个目标上发生跳转, 默认当前小程序
url 当前小程序内的跳转链接
open-type 跳转方式
delta 当 open-type 为 'navigateBack' 时有效，表示回退的层数
使用方式
基本使用方式
<navigator url="/pages/about/about">跳到关于页面</navigator>
跳转到关于页面, 左上角有返回按钮
open-type属性:
redurect
<navigator url="/pages/about/about" open-type="redirect">跳到关于页面(redirect)</navigator>
关闭当前页面, 跳到关于页面, 不允许跳转到tabbar页面, 不能反回, 安卓手机反回直接退出小程序
switchTab
switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。（需要在tabBar中定义的）
<navigator url="/pages/detail/detail" open-type="switchTab">跳到详情页面(switchTab)</navigator>
app.json:
"tabBar": {
"list": [
{
"pagePath": "pages/home/home",
"text": "首页"
},
{
"pagePath": "pages/detail/detail",
"text": "详情"
},
{
"pagePath": "pages/about/about",
"text": "关于"
}
]
}
reLaunch
关闭所有的页面，打开应用中某个页面。（直接展示某个页面，并且可以跳转到tabBar页面）
效果与redirect类似
navigateBack
关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。
当使用redirect和reLaunch关闭页面时, getCurrentPages无效
open-type：navigateBack（表示该navigator组件用于返回）
delta：返回的层级（指定返回的层级，open-type必须是navigateBack才生效）
about.wxml
<navigator open-type="navigateBack" delta="2">跳到关于页面</navigator>
数据传递-传递方式分析
如果在界面跳转过程中我们需要相互传递一些数据，应该如何完成呢？
- 首页 -> 详情页：使用URL中的query字段
- 详情页 -> 首页：在详情页内部拿到首页的页面对象，直接修改数据
数据传递过程
home页面传递数据给其他待跳转页面
home.wxml
<navigator url="/pages/about/about?key=hello"><button>跳到关于页面</button></navigator>
url参数后面的查询字符串会被子页面直接接收
about.js
onLoad:function(options){
console.log(options)
}
控制台会打印出: {key: "hello"}
子页面传递数据给home页面
如果是监听按钮或者navigator的点击来返回时, 可以通过bindtap调用函数完成.
但是这种方式不能监听左上角返回按钮的点击.所以我们选择在onUnload中修改数据
小程序并没有提供直接修改数据的方法.
可以通过getCurrentPages来获取所有的页面, 然后使用页面对象的setData({})函数来修改
about页面退出时, home页面message数据会被改变
home.js
data:{
message: '哈哈哈'
}
about.js
// 页面退出时调用
onUnload: function(){
let pages = getCurrentPages() // 获取当前所有的页面
let home = pages[pages.length - 2]
home.setData({
message: '嘿嘿嘿'
})
}
微信API跳转
使用微信提供的API也可以实现页面的跳转
- wx.navigateTo
- wx.switchTab
- wx.reLaunch
- wx.redirectTo
- wx.navigateBack
跳转:
home.wxml
<button bind:tap="handlePushAbout">wxAPI跳转</button>
home.js
handlePushAbout(){
wx.navigateTo({
url: '/pages/about/about?key=value',
})
}
返回:
about.wxml
<button bind:tap="backHome">返回主页</button>
about.js
backHome(){
wx.navigateBack({
delta: '1' // 返回的页面数，如果 delta 大于现有页面数，则返回到首页。
})
}
