随着小程序的不断更新,发现目前的小程序版本使用navigator无法跳转到加了tabBar的页面;后来使用redirectTo进行跳转也不行;在刚开始也是纠结了好久一直找不到解决办法。最后从官方文档中找到了答案,在这记录一下(不熟悉文档有多坑)。

官方对wx.navigateTo的解释

官方对wx.redirectTo的解释

解决办法使用wx.switchTab

官方文档地址 https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.redirectTo.html

页面跳转实例


Page({
onTap: function() {
// 这个跳转无效
// wx.navigateTo({
// url: '../posts/post',
// })
// 这个跳转也无效
// wx.redirectTo({
// url: '../posts/post',
// });
// 使用这个就可以跳转
wx.switchTab({
url: '../posts/post',
})
}
})

tabBar配置参考官方 https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

另一种是使用 open-type

官方案例:

<!-- sample.wxml -->
<view class="btn-area">
<navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
<navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>
<navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator>
<navigator target="miniProgram" open-type="navigate" app-id="" path="" extra-data="" version="release">打开绑定的小程序</navigator>
</view>

官方文档地址 https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

小程序使用wx.navigateTo无法跳转到加了tabBar的页面的更多相关文章

  1. 微信小程序:wx.navigateTo中url无法跳转问题(app.json中配置的tabBar与wx.navigateTo中url引用相同页面导致)

    今天在做微信小程序时,设置wx.navigateTo页面跳转并传参数,点击始终没有效果,代码如下: //事件处理函数 newsDetail: function (event) { console.lo ...

  2. 小程序中 wx.navigateTo 页面跳转没有反应?

    页面js文件中加入 show: function () {wx.navigateTo({url: ‘/pages/show/show’})} 这个函数 目的在于要做跳转到新的页面,但是你可能会遇到一个 ...

  3. 小程序 公众号/h5相互跳转-webview

    小程序与h5的跳转 前提小程序管理后台配置域名白名单,并且h5页面是嵌在小程序里面(相互跳的前提条件) 在业务域名中设置好访问的h5地址 微信官方web-view 介绍地址 https://devel ...

  4. 微信小程序 从含有tabbar的页面跳转到不含有tabbar的页面

    如何离开含有tabbar的页面 在微信小程序开发过程中,我们会碰到从某页跳转到一个含有tabbar的页面的需求, 用 wx.navigateTo({url: '...',})  不起作用,需要使用 w ...

  5. 微信小程序:wx.navigateBack页面返回传参

    场景(比如:商城选地址,选优惠券): 在[页面A]中调用wx.navigateTo方法跳转到[页面B] 然后从[页面B]返回[页面A], 并将[页面B]中的一些数据传回[页面A] wx.navigat ...

  6. 微信小程序 confirm(删除提示)提示框,询问框,小程序操作成功提示后跳转

    微信小程序删除处理 没有 confrim 那怎么实现这个效果呢 可以使用小程序里的模态框 代码: wx.showModal({ title: '提示', content: '确定要删除吗?', suc ...

  7. 今天微信小程序发现wx.request不好使了,调试报错: 小程序要求的 TLS 版本必须大于等于 1.2

    今天微信小程序发现wx.request不好使了,调试报错: 小程序要求的 TLS 版本必须大于等于 1.2 查官方文档 解决方法 在 PowerShell中运行以下内容, 然后重启服务器 # Enab ...

  8. 微信小程序遍历wx:for,wx:for-item,wx:key

    微信小程序中wx:for遍历默认元素为item,但是如果我们设计多层遍历的时候我们就需要自定义item的字段名以及key的键名 wx:for="{{item.goodsList}}" ...

  9. 小程序调用wx.chooseLocation接口的时候无法获取权限(ios)

    ios手机小程序调用wx.chooseLocation接口的时候,获取权限的时候报authorize:fail:require permission desc这样子的错误,这是由于苹果的安全机制导致需 ...

  10. 微信小程序~设置tabBar后,wx.navigateTo不能跳转

    当wx.navigateTo跳转链接跟app.json中设置的tabbar中跳转链接一样时,wx.navigateTo就不能跳转可以改为wx.switchTab 1.当app.json中设置了tabb ...

随机推荐

  1. RTE2021 回顾丨HDR 技术产品实践与探索

    本文整理自 OPPO HDR 研发负责人熊磊,在 RTE2021 实时互联网大会上的演讲.他通过介绍 HDR 视频标准与生态.关键技术.发展方向三部分,分享了在移动端 HDR 视频的落地情况以及技术细 ...

  2. java多线程--3 线程状态、线程方法、线程类型

    java多线程--3 线程状态.线程方法.线程类型 线程状态 创建状态: **就绪状态: ** 进入状态: 创建状态:启动线程 阻塞状态:阻塞解除 运行状态:释放CPU资源 阻塞状态: 进入状态: 运 ...

  3. Ubuntu18.04二进制安装elasticsearch

    1. 什么是Elasticsearch Elasticsearch 是位于 Elastic Stack 核心的分布式搜索和分析引擎.Logstash 和 Beats 有助于收集.聚合和丰富您的数据并将 ...

  4. Spring AOP面向切面编程案例 (注解驱动开发)

    AOP(动态代理):指在程序运行期间动态的将某段代码切入到指定方法指定位置进行运行的编程方式:[1]导入 aop 模块:Spring AOP:(spring-aspects):[2]定义一个业务逻辑类 ...

  5. 使用Electron-packager打包已有的web项目,发布客户端

    1.先拉electron代码 git clone https://github.com/electron/electron-quick-start 2.将web项目拷贝到electron-quick- ...

  6. STM32F407 学习 (0) 各种外设功能 (上)

      本文对正点原子STM32F4探索者的基本功能及外设作最基本的介绍,随笔者本人的学习进程(基本按照正点原子)而不定时更新,起到总结的作用. 一.HAL库编写程序的运行逻辑   HAL库函数(如stm ...

  7. Thread 线程中的 Synchronized block and lock

    Thread Definition of Synchronized Synchronized block in java are marked with the synchronized keywor ...

  8. 51nod 1153 选择子序列

    51nod 选择子序列 这道题是\(Bunny\)学长在给我们的模拟赛中的一道题. 食用单调栈,处理每个数\(a_i\)左右第一个比自己大的数的下标\(left_i\),\(right_i\),并且建 ...

  9. Disruptor-简单使用

    前言 Disruptor是一个高性能的无锁并发框架,其主要应用场景是在高并发.低延迟的系统中,如金融领域的交易系统,游戏服务器等.其优点就是非常快,号称能支撑每秒600万订单.需要注意的是,Disru ...

  10. 随手记:redis 开发注意事项

    Redis开发建议 1.冷热数据分离,不要将所有数据全部都放到Redis中 虽然Redis支持持久化,但是Redis的数据存储全部都是在内存中的,成本昂贵.建议根据业务只将高频热数据存储到Redis中 ...