随着小程序的不断更新,发现目前的小程序版本使用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. 【SpringBoot】还不会SpringBoot项目模块分层?来这手把手教你

    前言 缘由 经常看到网上很多优秀的开源项目中,代码简洁,模块分层完美.反观自己代码层级混乱,,却不知如何整理分层.此文手把手教你一步一步创建模块,左手右手一个慢动作.结合本人实际开发及个人项目中分层思 ...

  2. 分布式 WEB应用中Session(会话管理)的变迁之路

    一.Session 介绍 Session 一词直译为 "会话",意指有始有终的一系列动作/消息.Session 是 Web 应用蓬勃发展的产物之一.在 Web 应用中隐含有&quo ...

  3. Java 遍历方式

    一.遍历方式 迭代器 增强for循环 普通for循环 二.使用 迭代器: public class IteratorMethod { public static void main(String[] ...

  4. new做了哪些事情,手写一个new

    1)创建一个空对象,将构造函数中的this指向这个空对象 2)将空对象的__proto__指向构造函数的prototype原型 3)执行构造函数里面的代码,为这个空对象添加属性和方法 4)返回一个新的 ...

  5. [C++STL教程]2.queue队列容器,小白都能看懂的讲解!

    在学习数据结构的时候我们会听到这样一个词:队列. 本文将介绍STL中的队列:queue 本文仅从入门和实用角度介绍queue的用法,主要针对初学者或竞赛向.如有不严谨的地方欢迎指正!本文长度约2000 ...

  6. PHP微信三方平台-微信支付(扫码支付)

    1.官方文档地址: https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=6_1 2.逻辑分析: 生成支付二维码->用户扫码支付-& ...

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

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

  8. ACM-DP-数塔问题

    Description 在讲述DP算法的时候,一个经典的例子就是数塔问题,它是这样描述的: 有如下所示的数塔,要求从顶层走到底层,若每一步只能走到相邻的结点,则经过的结点的数字之和最大是多少? 已经告 ...

  9. 成为钢铁侠!只需一块RTX3090,微软开源贾维斯(J.A.R.V.I.S.)人工智能AI助理系统

    梦想照进现实,微软果然不愧是微软,开源了贾维斯(J.A.R.V.I.S.)人工智能助理系统,贾维斯(jarvis)全称为Just A Rather Very Intelligent System(只是 ...

  10. 【LeetCode动态规划#06】分割等和子集(01背包问题一维写法实战)

    分割等和子集 分割等和子集 给你一个 只包含正整数 的 非空 数组 nums .请你判断是否可以将这个数组分割成两个子集,使得两个子集的元素和相等. 示例 1: 输入:nums = [1,5,11,5 ...