微信小程序swiper点击轮播图实现跳转；其他页面跳转不成功的原因

微信小程序swiper点击轮播图实现跳转

用navigator的问题

昨晚写一个小程序的首页，涉及到轮播图，而我将所有的图片以数组的形式 放在js中的，官方文档只给出了navigator的超链接，但是我当时使用时整个页面会白一下，再跳转，会给人一种不舒服的感觉，于是我决定继续修改，改善代码在最终版：：

第一次代码如下，为找到原因：

 <swiper class="index-banner" indicator-dots="{{true}}" circular="{{true}}"
    autoplay="{{true}}" interval="{{2000}}" duration="{{500}}">
    <block wx:for="{{imgUrls}}" wx:key="{{item}}">
     <navigator class="index-menu-item"  url="{{item.url}}">
      <swiper-item >
        <image src="{{item.icon}}" mode="aspectFill"  class="slide-image"/> 
      </swiper-item>
      </navigator>
    </block>
  </swiper>

轮播图跳转最终版

写了一个函数changeURL,xtml如下：

<swiper class="index-banner" indicator-dots="{{true}}" circular="{{true}}"
    autoplay="{{true}}" interval="{{2000}}" duration="{{500}}">
    <block wx:for="{{imgUrls}}" wx:key="{{item}}">
      <swiper-item  data-url="{{item.url}}" bindtap="changeURL">
        <image src="{{item.icon}}" mode="aspectFill"  class="slide-image"/> 
      </swiper-item>
    </block>
  </swiper>

js如下,其中e.currentTarget.dataset.url即是data-url="{{item.url}}"传过来的参数：

changeURL: function (e) {
    wx.navigateTo({
      url: `${e.currentTarget.dataset.url}`,
      success: function (res) {
        // success
      },
      fail: function () {
        // fail
      },
      complete: function () {
        // complete
      }
    })
  },

微信小程序页面跳转不成功的原因

问题简述

在写一个navigator点击跳转时，无法跳转到index和item的页面，神奇的是可以跳转到当前页面，GAMEOVER，相当于没跳转。所以对navigator产生了一些好奇，去查看了官方文档，文档提示：

1.需要用户确认跳转 从 2.3.0 版本开始，在跳转至其他小程序前，将统一增加弹窗，询问是否跳转，用户确认后才可以跳转其他小程序。如果用户点击取消，则回调 fail cancel。
2.每个小程序可跳转的其他小程序数量限制为不超过 10 个 从 2.4.0 版本以及指定日期（具体待定）开始，开发者提交新版小程序代码时，如使用了跳转其他小程序功能，则需要在代码配置中声明将要跳转的小程序名单，限定不超过 10 个，否则将无法通过审核。该名单可在发布新版时更新，不支持动态修改。配置方法详见 配置。调用此接口时，所跳转的 appId 必须在配置列表中，否则回调 fail appId “${appId}” is not in navigateToMiniProgramAppIdList

这两个都不符合我的情况，后查看了其他教程，错误定位成功。

原因概述

• item跳转不成功

要跳转的路径未在app.js里注册过,或者路径写错了

• index跳转不成功

要跳转的路径位于TabBar中，必须使用wx.switchTab 来跳转界面