wx.navigateTo/wx.redirectTo 无效

本文分析了微信小程序中wx.navigateTo及wx.redirectTo无法正常工作的原因,并提供了排查步骤,特别是针对tabBar页面跳转的正确方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

转载自:wx.navigateTo/wx.redirectTo 无效

在微信小程序开发过程中,如果你出现了在其他地方可以正常跳转,但是此时就是不行,不知道为什么。

分析原因:

1.你的页面在app.json文件中注册了吗? 
2.你的url地址写对了吗,目录层级没错吗? 
3.你要跳转到的页面是非tabBar的页面吗?如果是tabBar页面,恭喜你,找到问题了。 
wx.navigateTo/wx.redirectTo只能用在非tabBar页面的跳转,要跳转到tabBar页面,需要使用wx.switchTab

<!-- pages/newslist/index.wxml --> <view class="container"> <!-- Top Search Bar --> <input type="text" placeholder="输入关键词搜索..." bindinput="handleSearchInput"/> <!-- News Items List --> <scroll-view scroll-y style="height: calc(100vh - 60rpx);"> <block wx:for="{{filteredNews}}" wx:key="id"> <view class="item-box" catchtap="gotoDetail" data-id="{{item.id}}"> <image src="{{item.imageUrl}}" mode="aspectFill" class="newsimg"/> <text>{{item.title}}</text> </view> </block> </scroll-view> </view> const mockNewsData = require('../../util/data'); Page({ data: { searchKeyword: '', // 当前搜索关键字 filteredNews: [] // 已过滤后的新闻列表 }, onLoad() { this.setData({ filteredNews: mockNewsData // 加载初始数据 }); }, handleSearchInput(e) { const keyword = e.detail.value.trim(); // 获取用户输入的关键字 let result = []; if (keyword.length > 0) { // 如果有输入,则筛选符合条件的内容; result = mockNewsData.filter((item) => item.title.includes(keyword)); } else { // 否则恢复原始全量结果集; result = mockNewsData; } this.setData({ // 更新UI视图层显示的数据源信息 searchKeyword: keyword, filteredNews: result }); }, gotoDetail(e) { const newsId = e.currentTarget.dataset.id; wx.navigateTo({ url: `../detail/index?nid=${newsId}` }); } }) module.exports = [{ id: '001', title: 'navi比赛失利Aliksib难逃其咎', content: '近日,某知名战队NaVi比赛失利...', detail: 'https://www.bilibili.com/video/BV1WJo4YPE6s/?spm_id_from=333.337.search-card.all.click&vd_source=6a059e02dd60c4978d82844b0ccfb9b3', imageUrl: '/images/navi.png' }, { id: '002', title: '中国战队天禄重回世界赛场!', content: '天禄2/0完败世界强队永恒之火,惜败No.1绿龙...', detail: 'https://www.bilibili.com/video/BV1wD9aYqE6h/?spm_id_from=333.337.search-card.all.click&vd_source=6a059e02dd60c4978d82844b0ccfb9b3', imageUrl: '/images/tyloo.png' }, { id: '003', title: 'g2新阵容表现平平,Monesy对此的态度是。。。', content: '小孩怒喷队友不干事?原来是这样...', detail: 'https://www.bilibili.com/video/BV1rZQgYvEPk?spm_id_from=333.788.recommend_more_video.0&vd_source=6a059e02dd60c4978d82844b0ccfb9b3', imageUrl: '/images/g2.png' }, { id: '004', title: '知名赛事解说玩机器竟关闭直播间,背后原因令人深思', content: '...', detail: 'https://www.bilibili.com/video/BV1JBNDemE3Q/?spm_id_from=333.337.search-card.all.click&vd_source=6a059e02dd60c4978d82844b0ccfb9b3', imageUrl: '/images/wjq.png' }, { id: '005', title: 'ra算定时机,为亚洲赛区争夺两个世界赛名额!', content: '...', detail: 'https://www.bilibili.com/video/BV1NoosYcE6m/?spm_id_from=333.337.search-card.all.click&vd_source=6a059e02dd60c4978d82844b0ccfb9b3', imageUrl: '/images/ra.png' }, { id: '006', title: '禾和在绝密航天中无心一局千万撤离,震惊安信工所有玩家', content: '...', detail: '', imageUrl: '/images/hh.png' } ]; 根据上述代码设计以下功能:点击图片跳转至detail中的地址
03-26
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值