小程序的三种跳转方式

为什么说这个跳转非常重要呢?

1、小程序的返回键。小程序不像手机APP,手机APP可以两次返回键才退出APP。小程序如果已经打开多个页面,返回键是返回上一个页面,如果是跳转的页面,也就是只有当前一个页面,只需要一个返回键就能退出。这有点坑,一不小心就退出了。还需要重新点进去,加载内容。

2、小程序的页面限制(只能打开5个页面)。上面说小程序的返回键不方便,那就都用新页面打开不就好了?!这里又要说:“NO”。小程序不像手机网站,浏览器打开手机网站,可以无限制打开网页。小程序一共只能同时打开5个页面。打开小程序,当前一个页面,再打开一个新页面,当前两个页面,如果在第二个页面上再跳转页面,当前还是两个页面。如果再新开页面,就是三个页面。这样,一共只能有5个。超过5个再点就不会有反应了。无论哪一种跳转方式都一样。

所以,是选择新页面打开,还是选择当前页面跳转。这个细节对用户体验非常重要。如果新打开页面,一共只能共存5个页面,如果选择当前页面跳转,按一下返回键就会退出小程序。一定要谨慎选择。

<view class=“btn-area”> <navigator url=“/page/navigate/navigate?title=navigate” hover-class=“navigator-hover”>跳转到新页面</navigator>

<navigator url=“../../redirect/redirect/redirect?title=redirect” open-type=“redirect” hover-class=“other-navigator-hover”>在当前页打开</navigator>

<navigator url=“/page/index/index” open-type=“switchTab” hover-class=“other-navigator-hover”>切换 Tab</navigator> </view>

 

三种跳转方式的使用方法:

一、navigator组件跳转方式(可以新页面也可以当前页面跳转)。

相当于html里的a标签。是个标签。和a标签使用方式也是一样的。

&lt;navigator open-type=”打开方式” url=“页面链接(/pages/news/news)”&gt;链接文字&lt;/navigator&gt;

打开方式:

① navigator 新页面打开,对应wx.navigatorTo

② redirect 当前页面跳转,对应wx.redirectTo

③ switchTab 对应wx.switchTab

④ reLaunch 对应wx.reLaunch ,关闭所有页面,打开应用内某个页面

⑤ navigateBack 对应wx.navigateBack

二、wx.navigatorTo(api方式,新页面跳转)

使用方法:在前台绑定事件,在js响应事件里:

wx.navigateTo({

url: ‘test?id=1’ //test是新打开的页面,问号后面的id是传的参数,到test页面用options接收。

})

三、wx.redirectTo(API方式,当前页面跳转)

wx.redirectTo({

url: ‘test?id=1’ //test是要跳转的页面,问号后面的id是传的参数,到test页面用options接收