智能小程序也是由一个一个的页面所组成的,所以,这就会涉及到一个页面切换的问题。那么,在传统的html里面,页面的切换一般都是使用链接a标签完成的。那么,在智能小程序中,链接a标签,是否还依然适用呢?这就是本文中,苏南大叔要讨论的问题。

苏南大叔:百度智能小程序,页面之间如何利用navigator进行切换? - smartapp-navigator
百度智能小程序,页面之间如何利用navigator进行切换?(图2-1)

本文测试环境:mac百度开发者工具@2.4.0。注意:本文中的navigator,并不仅仅相当于a标签。要比a标签强大复杂的多。当然,最简化使用navigator的时候,确实就是相当于a标签的。

概述

在苏南大叔的本地测试中,传统的链接a标签可以用。但是对于使用内部链接的情况,明显会出错。所以,大家还是尽量不要使用a标签,使用百度智能小程序官方推荐的navigator组件吧。

navigator组件的官方文档链接是:

官方文档里面,参数挺多的。不过,苏南大叔就推荐您记住下面的这个用法,就可以了,别的写法基本上用到的概率不大。最常见的用法是:

<navigator url="/pages/navigate/navigate" class="nav" hover-class="navigator-hover">跳转到新页面</navigator>

当然,这里可以改写classhover-class,来实现样式切换。注意,这里并不是使用伪类:hover进行定义的!因为这对于纯正的html来说,是个第三方组件!

基本范例

下面的更多使用方式例子,来自官方文档:
跳转到新页面:

<navigator class="nav" url="/pages/navigate/navigate" hover-class="navigator-hover">跳转到新页面</navigator>
<navigator class="nav" url="/pages/navigate/navigate" open-type="navigate" hover-class="navigator-hover">跳转到新页面</navigator>

在当前页打开:

<navigator class="nav" url="/pages/redirect/redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>
对于是否是新窗口打开,需要定义的参数是:open-type(类似于atarget属性),默认的是新窗口打开(navigate)!重要!尽量新窗口!新窗口的话,就是不设置open-type!因为涉及到tabbar的问题,在后续的文字中,苏南大叔会说明原因。

高级范例

切换Tab

<navigator class="nav" url="/pages/index/index" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator>

打开绑定的小程序:

<navigator class="nav" target="miniProgram" open-type="navigate" app-id="79RKhZ2BTvyyHitg4W3Xle4kkFgwwXyp" path="" extra-data="" version="release" bindsuccess="successHandler" bindfail="failHandler">打开绑定的小程序</navigator>

从上述例子中,大家可以看到,这个链接navigator在小程序中的作用,可不仅仅局限于链接a。还可以用于切换tab,可以用于打开其他小程序,甚至可以触发退出小程序事件。

但是,这些高级内容,并不是本篇文字里面讨论的。如果您需要更高级的功能,请参见下面的这篇文章:

可能存在的问题

当把一个已经存在的页面,设置为tabbar的项目后,那么原有的指向这个页面的navigator就可以会失效。错误提示如下:

{errCode: -1, errMsg: "不允许使用navigateTo方法打开一个tabbar页面"}

苏南大叔:百度智能小程序,页面之间如何利用navigator进行切换? - tabbar-switch-navigator
百度智能小程序,页面之间如何利用navigator进行切换?(图2-2)

解决方案就是:修改对应的navigator标签的open-type属性,切换为switchTab

<navigator url="/pages/next/next" open-type="switchTab"></navigator>

或者使用js进行切换:

swan.switchTab({
  url: '/pages/next/next'
});

对于这个错误的发生,说实话,苏南大叔表示无力吐槽,难以理解。

总结

链接a就这么变成了navigator,是不是还有些不习惯?更多经常智能小程序文章解析,请参见苏南大叔的博客:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   baidu    智能小程序

本站的忠实读者小伙伴,正在阅读下面这些文章: