微信小程序页面跳转方法总结

微信小程序页面跳转目前有以下方法(不全面的欢迎补充):

1. 利用小程序提供的 API 跳转:

// 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。
// 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,但是 redirectTo
wx.navigateTo({
  url: ‘page/home/home?user_id=111‘
})
// 关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。

wx.navigateTo({
  url: ‘page/home/home?user_id=111‘  // 页面 A
})
wx.navigateTo({
  url: ‘page/detail/detail?product_id=222‘  // 页面 B
})
// 跳转到页面 A
wx.navigateBack({
  delta: 2
})
// 关闭当前页面,跳转到应用内的某个页面。
wx.redirectTo({
  url: ‘page/home/home?user_id=111‘
})
// 跳转到tabBar页面(在app.json中注册过的tabBar页面),同时关闭其他非tabBar页面。
wx.switchTab({
  url: ‘page/index/index‘
})
// 关闭所有页面,打开到应用内的某个页面。
wx.reLanch({
  url: ‘page/home/home?user_id=111‘
})

2. wxml 页面组件跳转(可以通过设置open-type属性指明页面跳转方式):

// navigator 组件默认的 open-type 为 navigate
<navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
// redirect 对应 API 中的 wx.redirect 方法
<navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>
// switchTab 对应 API 中的 wx.switchTab 方法
<navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator>
// reLanch 对应 API 中的 wx.reLanch 方法
<navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">关闭所有页面,打开到应用内的某个页面</navigator>
// navigateBack 对应 API 中的 wx.navigateBack 方法
<navigator url="/page/index/index" open-type="navigateBack" hover-class="other-navigator-hover">关闭当前页面,返回上一级页面或多级页面</navigator>
 

原文地址:https://www.cnblogs.com/lhj-blog/p/11077065.html

时间: 2024-11-05 22:43:26

微信小程序页面跳转方法总结的相关文章

微信小程序页面跳转

wx.navigateTo(OBJECT) 不销毁当前页面,仅将其隐藏,使用wx.navigateBack可以返回到原页面. wx.redirectTo(OBJECT) 销毁当前页面,跳转到应用内的其他页面. 微信小程序页面不跳转: 我们有时候会发现,其他的地方都好好的能跳转,可是为啥突然就无效那呢? 原因: 检查你要跳转的位置是否在app.js中注册过. 检查你要跳转的地址是否有误.经常都是因为少写或者多写使得跳转无效. 检查你要跳转的位置是否位于TabBar中,如果是的话,要使用wx.swi

微信小程序页面跳转、逻辑层模块化

一.页面的跳转 微信小程序的页面跳转函数方法有两个,另外还有两种模块跳转方式. 函数跳转: 1.wx.navigateTo(OBJECT): wx.navigateTo({ url: 'test?id=1' })//保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. //问号后面的参数为传递至指定页面onload方法内的参数.id为自定义参数名,在跳转页面获取参数值时,也是通过这个设置的参数来获取的. 2.wx.redirectTo(OBJECT): wx

(uniapp和)微信小程序页面跳转首页报错:navigateTo:fail can not navigateTo a tabbar page

如果在这种情况下无法实现跳转并出现can not navigate to tabBar page错误, 很有可能是由于在底部tabbar里面定义乐同样连接地址的bar,如果在底部footer页面定义了相同地址的bar,则此页面无法跳转, 解决方法: 使用uniapp或微信小程序的 uni.switchTab({         url: '路径'}); wx.switchTab({         url: '路径'}); 原文地址:https://www.cnblogs.com/fanqiuz

微信小程序 页面跳转传递数据

点击view 跳转页面 <view class="album_image" data-album-obj="{{item}}" bindtap="imageclick"> <image style="width:98%;" src="{{item.data[0].url}}"></image> </view> 声明变量  data-album-obj 页面跳转

微信小程序页面跳转传参

1.传递参数方法 使用navigatior组件 <navigator url="/pages/pull/pull?title=lalla&name=cc" hover-class="navigator-hover">跳转到新页面</navigator> 使用跳转API wx.navigateTo({ url: '/pages/pull/pull?name=mc&age=22' }) 2.接收参数方法 在页面的onLoad方法的

微信小程序 页面跳转navigator与传递参数

页面之间跳转使用 navigator标签,wx.navigateTo ,wx.redirectTo 1.URL就是跳转的页面路径.上面代码中就是navigator目录下的navigator页面,title是参数. navigator下redirect属性是值在当前页打开.如果不加redirect就是跳转到新页面.都可以携带参数. 如果需要传多个参数, 用 & 链接即可 <navigator url="../navigator/navigator?title=我是navigate&q

微信小程序——页面跳转传值

比如从index.wxml跳转到aaa.wxml index.wml <navigator url="../aaa/aaa?id=1" > </navigator> 传到aaa.wxml的时候传过去的值为id=1,则需要在aaa.wxml 的js获取到id=1 aaa.js Page({ data: { id:'' }, onLoad: function (options){ var that = this; that.setData({ id: options

微信小程序页面跳转传参数

发送方 let data = event.currentTarget.dataset.id(要发送的参数) wx.navigateTo({ url: '../iteminfo/iteminfo?id=' + encodeURI(JSON.stringify(data)), }) //encodeURI:对传递的数据编码 (怕传递的数据被解析成代码) 接收方 //生命周期函数--监听页面加载 options接收传递过来的数据 data: { inid:"" }, onLoad: func

微信小程序页面

[转]微信小程序页面-页面跳转失败WAService.js:3 navigateTo:fail url not in app.json 微信小程序新建页面的要素一是新建的文件名称和其子文件的名称最好一致,不然容易出问题,在小程序页面跳转中如果出现WAService.js:3 navigateTo:fail url not in app.json错误 要在app.json(公共文件中)建立页面跳转page.如下图 不管是跳转到哪个页面,必须在json里的pages数组里面填写路径,不然跳转失败 跳