微信小程序异常:navigateTo:fail can not navigateTo a tabbar page

场景还原

微信小程序利用路径wx.navigateTo跳转界面时发送异常

跳转代码

js 复制代码
 showDetail(e){
    // 获取图片绑定的ID编号
    let id = e.currentTarget.dataset.id;
    // 指定编号查询  携带参数到详情界面  
    wx.navigateTo({
      url: '/pages/details/details?id=' + id,
    })
  }

异常代码

js 复制代码
WAServiceMainContext.js:2 Error: 
MiniProgramError {"errMsg":"navigateTo:fail can not navigateTo a tabbar page"}

原因分析

app.json中的tabBar关联了details详情界面产生冲突,而官方文档要求wx.navigateTo 无法跳转到 tabBar 中定义的界面,只需要把tabBar换成其他界面就可以!

app.json代码

js 复制代码
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/details/details",
        "text": "详情",
        "iconPath" : "images/b_1.png",
        "selectedIconPath" : "images/b_5.png"
      },
     ]
   }

核心原因

  • 保留当前页面,跳转到应用内的某个页面。
  • 但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。
  • 小程序中页面栈最多十层。

参考文档

微信小程序-API-路径-wx.navigateTo

相关推荐
知识分享小能手18 小时前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
韩立学长21 小时前
基于微信小程序的公益捐赠安全平台9hp4t247 包含完整开发套件(程序、源码、数据库、调试部署方案及开发环境)系统界面展示及获取方式置于文档末尾,可供参考。
数据库·微信小程序·小程序
亮子AI1 天前
【小程序】微信小程序点击效果(view、button、navigator)
微信小程序·小程序
Q_Q5110082851 天前
python+uniapp基于微信小程序团购系统
spring boot·python·微信小程序·django·uni-app·node.js·php
炒毛豆1 天前
uniapp微信小程序+vue3基础内容介绍~(含标签、组件生命周期、页面生命周期、条件编译(一码多用)、分包))
vue.js·微信小程序·uni-app
從南走到北1 天前
洗车小程序系统
微信小程序·小程序
namehu2 天前
前端性能优化之:图片缩放 🚀
前端·性能优化·微信小程序
dazhong20122 天前
微信小程序开发实战指南(三)-- Webview访问总结
微信小程序·小程序
盛夏绽放2 天前
关于 uni-app 与原生微信小程序中的生命周期 —— 一次“生命旅程”的解读
微信小程序·小程序·uni-app
流水线上的指令侠2 天前
使用C#写微信小程序后端——电商微信小程序
微信小程序·小程序·c#·visual studio