微信小程序导航 API 使用方法及示例

在前面的章节中，我们知道按钮可以触发事件，和用户进行交互。在微信小程序中还提供了一系列导航 API，用于在页面间跳转。本文将介绍微信小程序导航 API 的各种使用方法，并提供示例代码。

1. 基本页面跳转

使用 wx.navigateTo 实现基本的页面跳转。

示例

<view>
  <button bindtap="navigateToPage">跳转到新页面</button>
</view>

Page({
  navigateToPage() {
    wx.navigateTo({
      url: "/pages/newPage/newPage",
    });
  },
});

2. 关闭当前页面跳转

使用 wx.redirectTo 关闭当前页面并跳转到新的页面。

示例

<view>
  <button bindtap="redirectToPage">重定向到新页面</button>
</view>

Page({
  redirectToPage() {
    wx.redirectTo({
      url: "/pages/newPage/newPage",
    });
  },
});

3. 跳转到 Tab 页面

使用 wx.switchTab 跳转到 Tab 页面（需在 app.json 中配置 Tab）。

示例

<view>
  <button bindtap="switchToTab">切换到Tab页面</button>
</view>

Page({
  switchToTab() {
    wx.switchTab({
      url: "/pages/tabPage/tabPage",
    });
  },
});

4. 返回上一页面

使用 wx.navigateBack 返回上一页面。

示例

<view>
  <button bindtap="navigateBack">返回上一页面</button>
</view>

Page({
  navigateBack() {
    wx.navigateBack();
  },
});

5. 关闭所有页面跳转

使用 wx.reLaunch 关闭所有页面并跳转到新的页面。

示例

<view>
  <button bindtap="reLaunchPage">重新启动到新页面</button>
</view>

Page({
  reLaunchPage() {
    wx.reLaunch({
      url: "/pages/newPage/newPage",
    });
  },
});

6. 页面跳转带参数

在跳转页面时传递参数，并在新页面获取参数。

示例

<view>
  <button bindtap="navigateToPageWithParams">跳转带参数</button>
</view>

Page({
  navigateToPageWithParams() {
    wx.navigateTo({
      url: "/pages/newPage/newPage?param1=value1&param2=value2",
    });
  },
});

Page({
  onLoad(options) {
    console.log(options.param1); // 输出value1
    console.log(options.param2); // 输出value2
  },
});

7. 页面跳转动画

可以在跳转页面时设置动画效果。

示例

<view>
  <button bindtap="navigateWithAnimation">带动画跳转</button>
</view>

Page({
  navigateWithAnimation() {
    wx.navigateTo({
      url: "/pages/newPage/newPage",
      animationType: "slide-in-right",
      animationDuration: 300,
    });
  },
});

结论

以上就是微信小程序中导航 API 的各种使用方法及示例。通过设置不同的方法和参数，可以实现各类页面跳转操作，提升用户体验。希望本文对您有所帮助。