小程序页面路由与导航架构：页面栈、tabBar 与自定义导航

// 查看当前页面栈
const pages = getCurrentPages();
console.log('当前栈深度：', pages.length);
console.log('栈底（首页）：', pages[0].route);
console.log('栈顶（当前页）：', pages[pages.length - 1].route);

// 典型场景
wx.navigateTo({ url: '/pages/detail/detail?id=1001' });

wx.redirectTo({ url: '/pages/result/result' });

wx.switchTab({ url: '/pages/home/home' });

wx.reLaunch({ url: '/pages/index/index' });

wx.navigateBack({ delta: 1 });   // 返回上一页，delta 支持多级

function safeNavigate(url) {
  const pages = getCurrentPages();
  if (pages.length >= 10) {
    wx.redirectTo({ url });   // 栈满时用替换代替压栈
  } else {
    wx.navigateTo({ url });
  }
}

// A 页跳转
wx.navigateTo({ url: `/pages/detail/detail?id=${id}&from=home` });

// B 页接收
Page({
  onLoad(options) {
    console.log(options.id, options.from);   // 所有参数均为字符串
  }
});

// 打开页面，并监听目标页的事件
wx.navigateTo({
  url: '/pages/editor/editor?type=avatar',
  events: {
    // 目标页通过 eventChannel.emit 触发
    onSaved(data) {
      console.log('编辑结果已回传：', data);
    }
  }
});

// 目标页 editor.js
Page({
  onLoad() {
    this._eventChannel = this.getOpenerEventChannel();
  },

  save() {
    const result = { url: this.data.previewUrl };
    this._eventChannel.emit('onSaved', result);   // 回传给来源页
    wx.navigateBack();
  }
});

// utils/router.js
const WHITE_PAGES = ['/pages/index/index', '/pages/order/order'];

function safeRedirect(raw) {
  if (!raw) return '/pages/index/index';
  const decoded = decodeURIComponent(raw);
  // 只允许站内路径：以 / 开头、不含协议跳转、且在页面白名单中
  const valid = decoded.startsWith('/') &&
    !decoded.includes('//') &&
    (WHITE_PAGES.includes(decoded) || isValidPage(decoded));
  return valid ? decoded : '/pages/index/index';
}

// 页面级配置，仅对当前页生效
{
  "navigationStyle": "custom"
}

// utils/navbar.js
function getNavBarMetrics() {
  const win = wx.getWindowInfo();           // 基础库 2.20.1+ 推荐
  const capsule = wx.getMenuButtonBoundingClientRect();
  const statusBarHeight = win.statusBarHeight;

  const navBarHeight = (capsule.top - statusBarHeight) * 2 + capsule.height;
  return {
    statusBarHeight,
    navBarHeight,
    capsuleWidth: capsule.width,
    navBarRight: win.windowWidth - capsule.left,   // 标题可用宽度
  };
}

<!-- 自定义导航模板 -->
<view class="navbar" style="padding-top: {{statusBarHeight}}px; height: {{navBarHeight}}px;">
  <view class="navbar-title">{{title}}</view>
</view>

.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: #ffffff;
}
.navbar-title {
  text-align: center;
  line-height: 44px;
  font-weight: 600;
}

// utils/router.js
const { isLoggedIn } = require('./auth');

function requireLogin(url) {
  if (!isLoggedIn()) {
    wx.navigateTo({ url: '/pages/login/login?redirect=' + encodeURIComponent(url) });
    return false;
  }
  wx.navigateTo({ url });
  return true;
}

// 登录成功后按 redirect 回跳
const redirect = options.redirect ? decodeURIComponent(options.redirect) : '/pages/index/index';

let lastNavTime = 0;
function navigateWithLock(url) {
  const now = Date.now();
  if (now - lastNavTime < 300) return;   // 300ms 内忽略重复点击
  lastNavTime = now;
  wx.navigateTo({ url });
}

// app.json 示例
{
  "pages": ["pages/index/index"],
  "tabBar": {
    "list": [
      { "pagePath": "pages/index/index", "text": "首页" },
      { "pagePath": "pages/user/user", "text": "我的" }
    ]
  },
  "subpackages": [
    { "root": "package-detail", "pages": ["pages/detail/detail"] }
  ],
  "preloadRule": {
    "pages/index/index": { "network": "all", "packages": ["package-detail"] }
  }
}

{
  "tabBar": {
    "color": "#999999",
    "selectedColor": "#ff5500",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [
      { "pagePath": "pages/home/home", "text": "首页", "iconPath": "img/home.png", "selectedIconPath": "img/home_active.png" }
    ]
  }
}

{
  "tabBar": {
    "custom": true,
    "list": [
      { "pagePath": "pages/home/home", "text": "首页" },
      { "pagePath": "pages/mine/mine", "text": "我的" }
    ]
  }
}