# 饿了么(25 题)

# 1. 小程序里面开页面最多多少

⚡ 30 秒速记

  • 微信小程序同时打开的页面栈通常最多 10 层,超过后不能继续通过 navigateTo 入栈
  • 返回用 navigateBack,切换 tabswitchTab
  • 这个值属于平台限制,面试时还应补一句:开发要以当前官方文档和实际基础库为准,页面层级过深本身也说明导航设计需要收敛

微信小程序同时打开的页面栈通常最多 10 层,超过后不能继续通过 navigateTo 入栈; 返回用 navigateBack,切换 tabswitchTab。这个值属于平台限制,面试时还应补一句:开发要以当前官方文档和实际基础库为准,页面层级过深本身也说明导航设计需要收敛。

原理拆开看

微信小程序同时打开的页面栈通常最多 10 层,超过后不能继续通过 navigateTo 入栈;返回用 navigateBack,切换 tabswitchTab。这个值属于平台限制,面试时还应补一句:开发要以当前官方文档和实际基础库为准,页面层级过深本身也说明导航设计需要收敛。 小程序页面栈可以理解为一段受平台管理的导航历史:navigateTo 新增普通页,navigateBack 回退,redirectTo 替换当前页,reLaunch 重建整条栈,switchTab 切换到 tabBar 页面。具体层数是平台能力,不应把“能开多少层”当作导航设计目标。

最小实现

function openDetail(id) {
  const pages = getCurrentPages()
  if (pages.length >= 9) {
    wx.redirectTo({ url: `/pages/detail/index?id=${id}` })
    return
  }
  wx.navigateTo({ url: `/pages/detail/index?id=${id}` })
}

// tabBar 页面必须使用 switchTab
function goHome() {
  wx.switchTab({ url: '/pages/home/index' })
}

普通情况下用 navigateTo 保留返回路径;当页面栈已经很深时,示例改用 redirectTo 替换当前页,避免继续入栈。tabBar 页面不能用普通入栈 API,必须 switchTab。生产还应根据流程语义决定是否替换,不能只按数字硬切。

边界与排查

开发时先区分普通页和 tabBar 页,再根据用户是否需要返回选择入栈、替换或重建。可以用 getCurrentPages 查看当前栈深度,在接近上限前收敛跳转;订单、支付等流程还要避免重复入栈并处理从分享卡片直接进入中间页的情况。 基础库版本、tabBar 限制、分享冷启动和业务流程过深,都会影响导航行为。

💬 面试官追问

  • 商品详情连续跳了 9 层,再点推荐商品时你会直接提示“不能打开”吗?

    不会只提示失败。先判断用户是否还需要返回当前详情;如果不需要,可 redirectTo 替换当前页,如果进入全新主流程可 reLaunch。更根本的是把同类详情改成当前页参数更新,避免导航结构无限增长。

  • 从微信分享卡片直接进入订单详情,页面栈里没有首页,点返回应该怎么处理?

    先用 getCurrentPages 判断是否有可返回页面;没有时 switchTab 到首页或 reLaunch 到业务入口。返回策略要按进入来源设计,不能假设用户一定从首页逐层进入。

  • 同事把 tabBar 首页也写成 navigateTo,为什么真机会失败?

    tabBar 页面由平台单独管理,不能通过 navigateTo 入普通页面栈,应该使用 switchTab。开发时要把路由表里的页面类型作为约束,不靠调用失败后再兜底。

  • 基础库升级后页面栈限制变化,你怎样避免代码里到处散落数字 10?

    把平台限制和导航策略集中封装,业务只表达“打开详情”或“回首页”。同时以当前官方文档和真机测试为准,边界值通过配置与自动化用例验证。

webapp
公众号
开发者导航
切换夜间模式
折叠侧边栏
收起全部