微信小程序开发chaors的移动开发私房菜微信小程序开发

WX小程序navigateTo等跳转失灵Debug

2019-04-23  本文已影响1人  WallisW

缘起

找工作闲暇,在家也捣鼓起微信小程序开发。总体来说,倒是比iOS、Android简单不少,核心就是JS+XML(wxml)+CSS(wxss)+JSON,其实还是前端那一块。

知道小程序开发的,对其路由方式可谓是再熟悉不过了。

路由方式

这里我在使用navigateTo/redriectTo时跳转都会失效,而且使用navitor组件也是同样的问题。

wxml代码

但是呢,goTest/redirectToTest都是实现正确并正常调用过的。可就是不能跳转到test页面。

js代码及console输出

问道

查阅官档,接口调用也没问题。郁闷中……

后来发现,test界面已经出现在tabBar。什么逻辑,难道这样就不能通过自定义btn事件来跳转吗???

tabBar的test

在不明所以的情况下,超哥治好姑且一试。删除已经在tabbar的test后,重新编译运行。我去,还真成功了呢。

debug successed

综上,

navigateTo/redriectTo/navigator组件跳转的页面必须是没有出现在当前Tabbar的页面,否则失效!

拓展

那么问题来了,navigateTo和redriectTo跳转方式有什么区别呢?废话少说,跑起来看。

navigateTo redriectTo

显而易见,navigateTo自带返回按钮,它是保存当前页面跳转到新页面test;redriectTo则是关闭当前页面后跳转到test,没有返回功能。

那么,redriectTo跳转后不自带返回按钮是毋庸置疑的。我们手动写一个事件来调用wx.navigateBack()可以吗???答案是否定的,废话少说看程序!

redriectTo不能返回

已然,navigateTo/redriectTo不能跳转到Tabbar页面。但是,我就是有这种需求呢,怎么办???毕竟WX不是什么小厂,不能这么不近人情吧。当然也是有方法的。

switchTab使用

我们可以使用switchTab跳转到tabbar的页面,这种跳转同点击Tabbar的Item是一样的效果。

三言以蔽之

上面是一个探索与实践的过程,初学者这样的话想对印象会深刻一点。

现在总结一下这篇主要得出的经验:

1.navigateTo/redriectTo/navigator组件跳转的页面不能出现在app.json里tabbar的list中,否则失效!

2.要想实现1的跳转,可以使用switchTab。但目标页面必须是app.json里tabbar的list中存在的!

3. navigateTo跳转会保存当前页面,跳转后自带返回功能;redriectTo跳转会关闭当前页面,无返回功能(手动调用navigateBack也没用)!

.
.
.


择而为农,请码好你的码。一码不调,何以码天下!

.
.
.

--------------------------------------------------------------20190423午

image.png

从童年起,我便独自一人
仰望星辰,俯视大海
从触碰到键盘
我便独自经营着
这浩瀚代码
-----------------------------非著名程序猿诗人 charles

上一篇下一篇

猜你喜欢

热点阅读