小程序多种路由跳转,区别何在

前言

从Anjular转换到微信小程序,从功能丰富,便捷操做的WebStorm转换到十分难用,不是很人性的微信开发者工具,一开始真的特别不适应,也许是心理做用吧,从一开始就以为它很差用,后来也是写不下去,后来调整心态,说试试看吧,后来就是越写越顺手,感受也挺好的,初次接触小程序也是摸着石头过河,要啥就搜啥,期间要用到页面跳转(如今可能用不到了,当时对需求不是很了解,可是之后的功能应该会用到),而后找了不少资料,发现跳转也分不少种,当时就选了一个用上了,后来又试了试别的,发现真的是各有其用。git

wx.navigateTo(Object object)

navigateTo 是打开新界面,打开新界面以后,当前页处于什么状态呢,点击返回返回的又是哪一页呢,打开控制台试验一下,在此以前,先了解一下页面的生命周期:github

函数 功能
onLoad 监听页面加载
onReady 监听页面初次渲染完成
onShow 监听页面显示
onHide 监听页面隐藏
onUnload 监听页面关闭

咱们先给标签加跳转功能小程序

<van-sidebar active-key="{{ activeKey }}">

<van-sidebar-item class="menufont" bindtap="food" title="食材" />

<van-sidebar-item class="menufont" title="包装" />

<van-sidebar-item class="menufont" title="配送" />

</van-sidebar>

咱们给“食材”一项加跳转功能,在标签加入bindtap属性,定义的方法名是什么,它的值就是什么,而后在ts文件里添加方法:segmentfault

food(){
wx.navigateTo({
url:'../food/food'
  })
},

W8J15H3ODHH(K24[IY}7%3W.png
这样就实现了从index界面跳转到food界面,咱们对每一个界面添加了onLoad()、onShow()、onHide()、onUnload()方法监控他们的状态,index界面跳转到Page1界面,再由Page1界面跳转到Page2界面:
Peek 2020-05-16 11-17.gif
看一下控制台的信息:
J3code8V@^1QZFXHVX02/code16Q.png
经过以上信息咱们能够发现,跳转后以前的界面隐藏了起来,返回时当前界面被关闭。
20200516115209.png微信小程序

wx.redirectTo(Object object)

redirectTo是关闭当前界面,跳转到下一界面,那么此时我再返回,返回的是哪一个界面呢。
将以前Page1跳转到Page2的函数修改成redirectTo,而后看控制台:
20200516112700.png
跳转后,以前的界面关闭,再次返回返回的最近的隐藏的界面。
20200516115547.png微信

wx.reLaunch(Object object)

reLaunch 关闭全部页面,打开到应用内的某个页面,那么返回的又是哪一个界面呢。
将以前Page1跳转到Page2的函数修改成reLaunch,而后看控制台:
20200516113217.png
以前的全部界面关闭,返回时跳转回初始界面index。
20200516115749.png网络

总结

小程序的跳转种类真的挺多的,若是真正把握好隐藏仍是关闭,返回界面是哪一个,页面跳转真的能省力很多,一开始认为小程序挺难写的,后来才明白不是它难写,而是我认为它难写,心态真的挺重要的。微信开发

版权声明

本文保留全部权利,版权归河北工业大学梦云智软件开发团队全部。未经团队及做者事先书面赞成,您不得以任何方式将本文内容进行商业性使用或经过信息网络传播本文内容。本文做者:张文达ide

相关文章
相关标签/搜索