Native - Miniprogram页面跳转

wx.navigateTo

保留当前页面,跳转到应用内的某个页面,但不能跳转tabbar页面

wx.navigateBack可返回到原页面,小程序中页面栈最多十层
参考连接

wx.navigateTo({
url: '/goods/detail?id=312',
events: { 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
},
success: function(res) {
// 通过eventChannel向被打开页面传递数据
res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
}
}
//test.js
Page({
onLoad: function(option){
console.log(option.query)
const eventChannel = this.getOpenerEventChannel()
eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
eventChannel.emit('someEvent', {data: 'test'});
// 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据
eventChannel.on('acceptDataFromOpenerPage', function(data) {
console.log(data)
})
}
})

使用场景:跳转到新页面并保留原页面状态,eg: 从列表页面跳转到详情页面
缺点:每次跳转都会创建新页面,可能会占用较多的内存资源

wx.redirectTo

关闭当前页面,跳转到应用内的某个页面,但不允许跳转到tabbar页面

wx.redirectTo({
url: "../carDetails/carDetails"
})

场景:关闭当前页面并跳转新页面 eg: 登录成功跳转登录页
优点:直接关闭当前页面,减少内存占用,缺点:无法保留原页面的状态,用户返回时会重新加载页面

wx.reLaunch

需要跳转的应用内页面路径 (代码包路径),路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如
'path?key=value&key2=value2'

关闭所有页面,打开到应用内的某个页面
参考连接

wx.reLaunch({
url: 'test?id=1'
})
// test页面
Page({
onLoad(option) {
console.log(option.query)
}
})

wx.switchTab

跳转到tabBar页面,并关闭其他所有非tabBar页面,该方法只能跳转tabbar页面

wx.swtichTab({
url: '../install/install'
})

需要跳转到tabBar页面eg: 从其他页面跳转到首页
优点:可直接跳转到tabBar页面,无法保留原页面的状态,用户返回时会重新加载页面

<navigator url="../carDetails/carDetails"><button>我是A页面,点击跳转到B页面</button></navigator>

适用于需要在页面中添加跳转链接的情况,eg: 在列表页中点击某个项目跳转到详情页

组件只能跳转到小程序内的页面,无法跳转外部链接

posted @   Felix_Openmind  阅读(34)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具
*{cursor: url(https://files-cdn.cnblogs.com/files/morango/fish-cursor.ico),auto;}
点击右上角即可分享
微信分享提示