小程序页面跳转的几种方式

小程序官方文档

我们有两种方式实现小程序的页面跳转：用js的方式实现和用navigator组件的方式

1、wx.navigateTo(有返回键，不可以跳转到tabBar页面)

 //保留当前页面，跳转到应用内的某个页面
wx.navigateTo({url: '/pages/detail/detail?id=1'
})

2、wx.switchTab (没有返回键，只能跳转到tabBar页面，不可以携带参数)

wx.switchTab({  url: `/pages/detail/detail`,})

3、wx.reLaunch(跳转任意页面，没有返回键，有首页按钮)

 wx.reLaunch({url: '/pages/detail/detail'})

4、wx.redirectTo(关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面)

wx.redirectTo({url: `/pages/detail/detail`,
})

5、wx.navigateBack(关闭当前页面，返回上一页面或多级页面，data值为1，表示跳转上一页，2表示跳两级)

wx.navigateBack({delta:1})

区别：

1wx.navigateTo是开启一个新页面，那个页面是隐藏了，原页面是onHide,所以是可以返回的，但是返回之后，跳转的页面就unload了

2、wx.redirectTo是当前页面替换成新的页面，所以返回不去onunload(页面被销毁)

3、tabBar无论跳那个页面都是onHide

传参注意：

跳转页面传递数组参数必须序列化

 let  arr=[1,2,3,4,5]category = JSON.stringify(arr)        //取子集分类 数组传递需要序列化wx.navigateTo({url: `/pages/detail/detail/?cate= ${category} `,})

onLoad: function (options) {let   category = JSON.parse(options.cate);console.log(category)
}

参数值过长接受时候内容不全的问题

//传参
wx.navigateTo({//wx.redirectTo、wx.reLaunchurl: '/pages/details/details?id=' + encodeURIComponent(id)})

//接收
onLoad(options) {var id = decodeURIComponent(options.id);
}

二、navigator组件实现
小程序官方文档

<navigator url = "/pages/details/details">跳转到新页面</navigator>
<navigator url = "/pages/details/details" open-type = "redirect">跳转到新页面</navigator>
对应 wx.redirectTo 的功能
<navigator url = "/pages/details/details" open-type = "switchTab">跳转到新页面</navigator>
对应 wx.switchTab 的功能
<navigator url = "/pages/details/details" open-type = "reLaunch">跳转到新页面</navigator>
对应 wx.reLaunch 的功能
<navigator url = "/pages/details/details" open-type = "navigateBack">跳转到新页面</navigator>
对应 wx.navigateBack 的功能

小程序页面跳转的几种方式相关推荐

新版微信不停跳转到小程序_微信小程序页面跳转的几种方式
最近在做微信小程序,碰到页面跳转的问题,总结一下页面之间跳转的方式一.wx.navigateTo(OBJECT) 这是最普遍的一种跳转方式,其官方解释为:"保留当前页面,跳转到应用内的某个 ...
微信小程序页面跳转的6种方式和区别
1.wx.navigateTo(OBJECT) 需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数.参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔: ...
详解微信小程序页面间传递信息的三种方式
详解微信小程序页面间传递信息的三种方式在开发微信小程序的时候,经常会遇到在页面间传递信息的情况,有三种方法可以实现. 1. 使用数据缓存将要存储的数据使用以下方法放入缓存 wx.setStorag ...
微信小程序实现跳转的几种方式总结（推荐）
今天把实现微信页面的跳转的几种方法总结分享下 1.使用导航组件,标签,页面链接来实现(可以发现点击时有背景) <view class=&quo ...
微信小程序页面间通信的5种方式
微信小程序页面间通的5种方式 PageModel(页面模型)对小程序而言是很重要的一个概念,从app.json中也可以看到,小程序就是由一个个页面组成的. 如上图,这是一个常见结构的小程序:首页是一个 ...
微信小程序点击带id参数跳转_微信小程序页面跳转方法和携带参数详解
1.页面跳转方式 (1)标签跳转 open-type的属性值对应api里的用法即wx.的用法 1 跳转到新页面 (2)wx.navigateTo 方法跳转此方法能够从跳转的页面会回到当前页面 1 w ...
微信小程序页面跳转限制问题
微信小程序页面跳转,如果使用wx.navigateTo或者navigator标签进行跳转,最多只能跳转10次 (超过10次,在怎么点也不会跳转),这很不利于用户的体验.那么就来解决这个问题(小声比比) ...
h5跳转小程序页面url_微信小程序页面跳转方法
我所知道的,微信小程序页面跳转有以下方法,下面分情况说明下一.利用小程序提供的 API 跳转: 1.简单page页面之间跳转 // 保留当前页面,跳转到应用内的某个页面,使用wx.navigateB ...
微信小程序页面跳转方法总结
微信小程序页面跳转目前有以下方法(不全面的欢迎补充): 1. 利用小程序提供的 API 跳转: // 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. // ...
微信小程序页面跳转，url传参参数丢失问题
微信小程序页面跳转,url传参参数丢失问题 // pages/order/purchase/index.js// 跳转到采购订单详情toPurchaseOrderDetail(e) {// conso ...

小程序页面跳转的几种方式

小程序页面跳转的几种方式相关推荐

最新文章

热门文章