微信小程序功能实现：页面导航与跳转_导航发布页跳转-优快云博客

1. 声明式导航（navigator组件）

声明式导航通过在WXML页面中使用 <navigator> 组件来实现页面跳转，使用起来较为直观简便，语法格式如下：

<navigator url="目标页面路径" open-type="跳转类型">显示的跳转提示文本或内容</navigator>

其中关键属性说明如下：

url属性：指定要跳转到的页面路径，路径需以“/”开头，例如“/pages/detail/detail”，代表跳转到小程序根目录下的“pages/detail/detail”页面。

open-type属性：用于定义跳转的具体类型，常见的有以下几种：

（1）navigateTo：

功能：保留当前页面，新页面会被添加到页面栈中，用户可通过返回按钮返回之前的页面。常用于从列表页跳转到详情页等场景，例如：

<navigator url="/pages/productDetail/productDetail?id=123" open-type="navigateTo">查看商品详情</navigator>

在目标页面（productDetail.js）中，可以在 onLoad 生命周期函数里获取传递过来的参数：

Page({
  onLoad(options) {
    console.log(options.id); // 输出 123
  }
})

（2）redirectTo：

功能：关闭当前页面，然后跳转到指定页面，当前页面会从页面栈中移除，新页面入栈。适用于像表单提交成功后跳转到结果页这类不需要返回上一页的情况，例如：

<navigator url="/pages/submitSuccess/submitSuccess" open-type="redirectTo">提交成功，前往查看结果</navigator>

（3）switchTab：

功能：专门用于跳转到小程序底部 tabBar 配置的页面，跳转时会关闭所有非 tabBar 页面。比如从其他页面切换回首页（假设首页是 tabBar 页面），示例如下：

<navigator url="/pages/index/index" open-type="switchTab">返回首页</navigator>

需注意，使用此方式跳转的页面路径必须是在 app.json 中配置的 tabBar 页面路径。

（4）navigateBack：

功能：用于返回上一页或者多级页面，可通过 delta 属性指定返回的页面层数，默认值为 1。例如：

<navigator open-type="navigateBack">返回上一页</navigator>
<navigator open-type="navigateBack" delta="2">返回上两页</navigator>

2. 编程式导航（API调用）

编程式导航通过在 JavaScript 文件中调用相应的微信小程序 API 来实现页面跳转，这样可以在跳转前进行更多复杂的逻辑判断和操作，常用的 API 如下：

wx.navigateTo：功能与声明式导航中 open-type="navigateTo" 一致，通过传入包含 url 的对象参数来实现跳转，示例代码如下：

Page({
  goToDetail() {
    wx.navigateTo({
      url: "/pages/detail/detail"
    });
  }
})

在对应的 WXML 文件中绑定点击事件来触发这个函数，比如：

<button bind:tap="goToDetail">跳转到详情页</button>

wx.redirectTo：等同于声明式导航里的 open-type="redirectTo"，示例如下：

Page({
  goToNextPage() {
    wx.redirectTo({
      url: "/pages/nextPage/nextPage"
    });
  }
})

wx.switchTab：用于跳转到 tabBar 页面，使用方式如下：

Page({
  goToHome() {
    wx.switchTab({
      url: "/pages/index/index"
    });
  }
})

wx.navigateBack：与声明式导航的对应功能相同，可按指定层数返回页面，示例：

Page({
  goBack() {
    wx.navigateBack({
      delta: 1
    });
  }
})

并且，编程式导航在跳转前可以进行各种逻辑判断，比如判断用户是否登录，只有登录了才允许跳转到某些页面：

Page({
  jumpToPersonalPage() {
    const isLoggedIn = wx.getStorageSync('userToken'); // 假设从本地存储获取登录状态
    if (isLoggedIn) {
      wx.navigateTo({
        url: "/pages/personal/personal"
      });
    } else {
      wx.showToast({
        title: '请先登录',
        icon: 'none'
      });
      setTimeout(() => {
        wx.navigateTo({
          url: "/pages/login/login"
        });
      }, 2000);
    }
  }
})

3. 页面栈管理

微信小程序的页面栈用于记录用户访问过的页面顺序，每个小程序有一个页面栈，最多可容纳 10 个页面。可以通过 getCurrentPages() 函数获取当前页面栈的实例数组，例如：

const pages = getCurrentPages();
console.log(pages.length); // 输出当前页面栈的页面数量
const currentPage = pages[pages.length - 1]; // 获取当前页面实例
const prevPage = pages[pages.length - 2]; // 获取上一页面实例（常用于反向传递数据）

利用页面栈，在子页面返回父页面时，可以将数据传递回去，示例如下：

// 子页面（假设为 childPage.js）
Page({
  backToParentAndPassData() {
    const pages = getCurrentPages();
    const prevPage = pages[pages.length - 2];
    const dataToPass = { message: '这是从子页面传递的数据' };
    prevPage.setData({ receivedData: dataToPass });
    wx.navigateBack();
  }
})

// 父页面（假设为 parentPage.js）
Page({
  data: {
    receivedData: null
  }
})