微信小程序跳转方式详解：实例演示及完整代码分享

 

微信小程序的跳转方式有以下几种：

1. 页面跳转：通过wx.navigateTo、wx.redirectTo、wx.reLaunch等方法实现页面之间的跳转。
2. TabBar跳转：通过wx.switchTab方法实现底部TabBar之间的切换。
3. 模态框跳转：通过wx.showModal方法实现弹出模态框，可以在模态框中放置跳转按钮。
4. 小程序内跳转：通过wx.navigateToMiniProgram方法实现小程序内部跳转至其他小程序。

下面我们以一个简单的示例来演示这几种跳转方式的实现。

首先，我们创建一个包含两个页面的小程序，一个是首页index，一个是详情页detail。

index页面：

// index.js
Page({
  goToDetail() {
    wx.navigateTo({
      url: '/pages/detail/detail'
    })
  }
})

<!-- index.wxml -->
<view>
  <button bindtap="goToDetail">跳转到详情页</button>
</view>

detail页面：

// detail.js
Page({
  goBack() {
    wx.navigateBack()
  }
})

<!-- detail.wxml -->
<view>
  <button bindtap="goBack">返回首页</button>
</view>

以上示例演示了页面跳转的方式，点击首页上的按钮可以跳转到详情页，详情页上的按钮可以返回首页。

接下来我们演示TabBar跳转的方式，我们在app.json中配置底部TabBar，并在index页面中添加跳转方法：

// app.json
{
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    },{
      "pagePath": "pages/detail/detail",
      "text": "详情"
    }]
  }
}

// index.js
Page({
  goToDetail() {
    wx.switchTab({
      url: '/pages/detail/detail'
    })
  }
})

以上示例演示了TabBar跳转的方式，点击首页上的按钮可以切换到详情页。

最后，我们演示模态框跳转的方式，我们在index页面中添加弹出模态框的方法：

// index.js
Page({
  showModal() {
    wx.showModal({
      title: '提示',
      content: '是否跳转到详情页？',
      success(res) {
        if (res.confirm) {
          wx.navigateTo({
            url: '/pages/detail/detail'
          })
        }
      }
    })
  }
})

<!-- index.wxml -->
<view>
  <button bindtap="showModal">弹出模态框</button>
</view>