小程序跳转页面的方法以及传参

其实在网上也看到很多人发的帖子,有的写得很详细了,但是自己还想总结一下我认识的跳转:

我们很常用的页面中写url的就是

1、navigator  关于它官方文档给了很详细的说明,我们也可以去参考一下官方的文档:https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

<navigatorurl="/page/navigate/navigate?title=navigate"hover-class="navigator-hover">跳转到新页面</navigator><navigatorurl="../../redirect/redirect/redirect?title=redirect"open-type="redirect"hover-class="other-navigator-hover">在当前页打开</navigator><navigatorurl="/page/index/index"open-type="switchTab"hover-class="other-navigator-hover">切换 Tab</navigator><navigatortarget="miniProgram"open-type="navigate"app-id=""path=""extra-data=""version="release">打开绑定的小程序</navigator>

我们常用的可能也就是上面的这几种方式,加一个点击时候触发的样式

.navigator-hover{color:blue;}

2、wx.redirectTo

关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面

其它的不多说,重点都在粗体,我曾经因为写了这个不跳转,纠结了一个多小时,最后才出坑

3、wx.navigateTo

页面中大部分的跳转我都用了这个,但是后来发现,根据项目的不同需求,这个跳转方式也是有局限性的。

保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

这个里面我想说的是注意刷新问题,返回上一页只是返回上一页,上一页如果在栈中,注意需不需要刷新

4、wx.switchTab

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

5、wx.reLaunch

关闭所有页面,打开到应用内的某个页面


说一下除了第一种其他页面跟参数的问题

wx.navigateTo({

      url: '../../pages/detail/index?id=' + e.currentTarget.dataset.id

    })

跳转到的页面获取参数,此处需要注意,接收参数是在小程序生命周期的onLoad函数中接收数据

onLoad: function (options) {

    var itemid=options.id;

     console.log(itemid);//打印接受的值

}

推荐阅读更多精彩内容