随着小程序的不断更新,发现目前的小程序版本使用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. 文件的上传&预览&下载学习(三)

    0.参考博客 https://www.pianshen.com/article/18961690151/ (逻辑流程图讲得很清楚) https://www.cnblogs.com/xiahj/p/vu ...

  2. 【AI 全栈 SOTA 综述 】这些你都不知道,怎么敢说会 AI?【语音识别原理 + 实战】

    章目录 前言语音识别原理   信号处理,声学特征提取   识别字符,组成文本   声学模型   语言模型   词汇模型语音声学特征提取:MFCC和LogFBank算法的原理实战一 ASR语音识别模型 ...

  3. 接入HMS Core应用内支付服务过程中一些常见问题总结

    华为HMS Core应用内支付服务(In-App Purchases,IAP)为应用提供便捷的应用内支付体验和简便的接入流程.该服务支持客户端和服务端两种开发形式,具体可以参考官方文档. 往期文章:常 ...

  4. 最强分布式搜索引擎——ElasticSearch

    最强分布式搜索引擎--ElasticSearch 本篇我们将会介绍到一种特殊的类似数据库存储机制的搜索引擎工具--ES elasticsearch是一款非常强大的开源搜索引擎,具备非常多强大功能,可以 ...

  5. Conda in Windows under MSYS2 and Zsh 的问题解决

    Conda in Windows under MSYS2 and Zsh 的问题解决 在Window11上使用git bash 安装zsh,并配置p10k主题,主要问题就是prompt中无法显示con ...

  6. TCP三次握手,四次分手。个人感觉最容易理解的解释

    三次握手 名词解释 SYN,ACK,FIN存放在TCP的标志位,一共有6个字符,这里就介绍这三个: SYN:代表请求创建连接,所以在三次握手中前两次要SYN=1,表示这两次用于建立连接,至于第三次什么 ...

  7. SpringBoot 项目使用 Sa-Token 完成登录认证

    一.设计思路 对于一些登录之后才能访问的接口(例如:查询我的账号资料),我们通常的做法是增加一层接口校验: 如果校验通过,则:正常返回数据. 如果校验未通过,则:抛出异常,告知其需要先进行登录. 那么 ...

  8. PVE虚拟系统的安装

        上期有说到,会出一些具体的安装过程以及掉进去的坑.这集我就说一说PVE系统的安装. As mentioned in the previous issue, there will be some ...

  9. [网络/Java EE/Web]Tomcat/Nginx中配置全局的安全响应头(header)——X-Frame-Options / X-XSS-Protection / X-Content-Options

    Step1 配置Tomcat step1.1 查看是否已配置目标的HTTP网络安全头 方式1 – Tomcat / conf/web.xml cat /opt/myTomcat/conf/web.xm ...

  10. day107:MoFang:Python操作MongoDB数据库:PyMongo

    目录 PyMongo 1.PyMongo安装 2.数据库连接 3.数据库管理 4.集合管理 5.文档管理 PyMongo 1.PyMongo安装 pip install pymongo 2.数据库连接 ...