微信小程序navigate/navigator不能跳转到tabbar页面的解决技巧

这种处理方式没什么难度，只是逻辑上处理了一下，之前自己没想到，今天突然想到的，记一下

通常我们使用navigate或navigator都不能跳转到tabbar设置的几个页面，但是页面内的逻辑有时候又需要，并且逻辑内是循环输出，又有需要navigate跳转的，又有需要switchTab进行跳转的。

类似下面这样

wxml：

1
<view wx:for="{{array}}">
2

3
          <navigator url="{{item}}">
4
            <image src="{{index}}" />
5

6
          </navigator>
7
</view>

这种是没办法跳转tabbar链接的。

其实只要改成下面的方式就可以了： wxml：

1
<view wx:for="{{array}}">
2

3
          <view bindtap='banner_navigateTo' url="{{item}}" data-url="{{item}}">
4

5
            <image src="{{index}}"/>
6

7
          </view>
8

9
</view>

js:

1
   banner_navigateTo: function (e) {
2
    var that = this;
3
    console.log('href', e.currentTarget.dataset.url)
4
    var href = e.currentTarget.dataset.url;
5
    wx.navigateTo({
6
      url: href,
7
      success: function (res) { },
8
      fail: function (res) {
9

10
        if (res.errMsg && (res.errMsg == 'navigateTo:fail can not navigateTo a tabbar page' || res.errMsg == 'navigateTo:fail can not navigate to a tabbar page') ) {
11

12
          wx.switchTab({
13

14
            url: href
15
          })
7 collapsed lines
16
        }
17
      },
18
      complete: function (res) {
19
        console.log('res', res)
20
      },
21
    })
22
  },

主要思路就是在 wx.navigateTo 报错提示不能跳转tabbar的页面时进行处理，再使用wx.switchTab进行跳转就行了。

更新：经测试，小程序开发工具与手机上返回的errMsg不相同，略作处理