小程序跳坑 --- navigator 和 API中wx.系列的跳转(如 wx.navigateTo、wx.reLaunch等)

    工作之余，想着帮老妈开发个小程序，一是宣传一下她的业务，二是学习使用一下微信小程序的开发，哈哈。在此过程中遇到了navigator跳转的问题，最终还是成功解决了，下面就记录下来，并做个系列总结以作记录分享，话不多说，下边进入正题😝 ~

 

 我的需求：     点击地址区域，跳转至地址页。

 遇到的问题： 点击之后不跳转。

 

contact.wxml 中：

<view style="margin-top:26rpx;height:100rpx;">
        <text class="contact">地址:</text>
        <a class="contact-num" href="javascript:void(0);" bindtap="map">地址BLABLA</a>
</view>

 

contact.js 中：

 map: function () {
        wx.navigateTo({
            url:'../address/address'
        })
  }

 

contact.js 更改后：

 map: function () {
        wx.switchTab({
            url:'../address/address'
        })
 }

　

   入坑结论：　navigateTo跳转链接不生效？ 若想在跳转链接中使用 TabBar中的list项的配置pagePath，要使用 wx.switchTab。

 

下边我总结了navigator 和 各种跳转API的区别：

<navigator url="../index/index">点击跳转不关闭当前页面</navigator>

<navigator url="../logs/logs" redirect="true" >点击跳转关闭当前页面</navigator>

 

• wx.navigateTo  用于保留当前页面、跳转到应用内的某个页面，使用 wx.navigateBack可以返回到原页面。对于页面不是特别多的小程序，通常推荐使用 wx.navigateTo进行跳转， 以便返回原页面，以提高加载速度。当页面特别多时，则不推荐使用。

 

• wx.redirectTo  当页面过多时，被保留页面会挤占微信分配给小程序的内存，或是达到微信所限制的 5 层页面栈。这时，我们应该考虑选择 wx.redirectTo。wx.redirectTo()用于关闭当前页面，跳转到应用内的某个页面。这样的跳转，可以避免跳转前页面占据运行内存，但返回时页面需要重新加载，增加了返回页面的显示时间。

 

• wx.reLaunch   wx.reLaunch()与 wx.redirectTo()的用途基本相同， 只是 wx.reLaunch()先关闭了内存中所有保留的页面，再跳转到目标页面。

 

• wx.switchTab  对于跳转到 tab bar 的页面，最好选择 wx.switchTab()，它会先关闭所有非 tab bar 的页面。其次，也可以选择 wx.reLaunch()，它也能实现从非 tab bar 跳转到 tab bar，或在 tab bar 间跳转，效果等同 wx.switchTab()。使用其他跳转 API 来跳转到 tab bar，则会跳转失败。

 

• wx.navigateBack  用于关闭当前页面，并返回上一页面或多级页面。开发者可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。这个 API 需要填写的参数只有 delta，表示要返回的页面数。若 delta 的取值大于现有可返回页面数时，则返回到用户进入小程序的第一个页面。当不填写 delta 的值时，就默认其为 1（注意，默认并非取 0），即返回上一页面。

 如若有误，欢迎指正哦~ 😘