大家好,这是小程序系列的第五篇文章,前几篇我们都是在分享了关于小程序的一些基本知识,只有知道了一些基本知识我们才能有序的开展项目的开发,可能很多小伙伴会觉得枯燥,熬一下过去就好了,地址如下:
1.《微信小程序-基础篇》初识微信小程序
2.《微信小程序-基础篇》带你快速了解小程序的基础语法
3.《微信小程序-基础篇》什么是组件化以及如何封装小程序组件
4.《微信小程序-基础篇》带你了解小程序的路由系统(一)
这一篇文章分享的是关于小程序中路由系统的一些基本知识,通过本文我们可以了解到在小程序中如何进行页面的路由跳转,只有知道了这些,我们才能开发一个多页切换的小程序,毕竟不可能哪个小程序会只有一个页面,对吧~
介绍完基础以后会实际同步开发一个微信小程序的项目并开源,项目的主题暂定是原神的资料站~~~
–
最后,求关注,求收藏,求点赞,谢谢~
《微信小程序-基础篇》带你了解小程序的路由系统(二)
- 前言
- 阅读对象与难度
- 小程序中的路由系统
- API
- wx.navigateTo(Object object)
- wx.redirectTo(Object object)
- wx.navigateBack(Object object)
- wx.switchTab(Object object)
- wx.reLaunch(Object object)
- 小结
前言
在上一章节中我们主要分享了关于路由系统的一些基本知识,其目的是让刚接触的小伙伴知道 什么是路由系统 ,之后我们又分享了一下路由系统中的前端路由,我们知道虽然后端路由SEO等推广比较好,但是 对服务器、带宽等要求比较相对比较高,因此衍申出了前端路由,前端路由简单的说就是服务器在接到首次请求的时候就将所有资源一次性的发送给了前端,之后界面的切换,跳转通通前端自己搞定 …
而本章节,我们主要介绍的是 关于小程序的路由系统,耐心看完,你一定有所搜获~
阅读对象与难度
本文难度属于:初级,通过本文,你可以了解到 小程序中路由系统的基本用法,其各个API如何使用,以及如何携带参数进行页面跳转;
小程序中的路由系统
由于上一篇篇幅有限,导致介绍的优点仓促,这次补充一下,通过之前的文章我们知道,小程序可以在app.json中注册多个页面,如下图
这里注册了4个界面,分别是欢迎页,加载页,首页,和日志页,假设现在欢迎页结束后需要跳转到首页,这个跳转该怎么实现?这个就是本文的重点,小程序中的路由系统,该系统由小程序官方提供,官方原话:在小程序中所有页面的路由全部由框架进行管理。也就是说,小程序的路由系统它已经内置完了,并不能外界更改,我们作为使用者,跟着他提供的API用就行了;
API
官方提供的API,一共有几个,如下
路由方式 | 触发时机 | 路由前页面 | 路由后页面 |
---|---|---|---|
初始化 | 小程序打开的第一个页面 | onLoad, onShow | |
打开新页面 | wx.navigateTo | onHide | onLoad, onShow |
页面重定向 | wx.redirectTo | onUnload | onLoad, onShow |
页面返回 | wx.navigateBack | onUnload | onShow |
Tab 切换 | wx.switchTab | ||
重启动 | wx.reLaunch | onUnload | onLoad, onShow |
下面我们一个一个说…很简单,并不复杂…
wx.navigateTo(Object object)
保留当前页面,跳转到应用内的某个页面,但是 不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈 最多十层;什么意思呢?就是说通过wx.navigateTo跳转的页面,它是能被后退按钮返回的,并且它不能跳转到底部tabbar指向的页面;
这是最常用的路由跳转之一,用法非常简单,它就是一个函数,并且接收一个对象作为参数,参数有以下几种
属性 | 类型 | 必填 | 说明 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
url | string | 是 | 需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ” /><button bindtap=“bindButtonTap“ >点击我</button>
就这么简单,那如果要带参数呢?表格中已经告诉我们了,在url的后面可以拼接,比如
这里id的值可以 换成变量拼接 ,只要能是变量,那么值就可以自己随便获取替换了; wx.redirectTo(Object object)这个用法和wx.navigateTo几乎相同,这个方法也非常常用,最大的区别在于,通过wx.redirectTo跳转的界面不能被后退按钮返回,跳过去后,当前界面就 会被销毁 了,当然,这种跳转方式的页面 也不能是tabBar 的页面的路径;
参数的话也比wx.navigateTo少一个,主要是wx.navigateTo中的event是用来做页面通信的,而wx.redirectTo执行的跳转页面都已经被销毁了,自然也用不着通信;
wx.navigateBack(Object object)关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈,决定需要返回几层;
和上面wx.navigateTo等参数不同的地方在于,它接收的 对象中delta是一个数字类型,这个参数的意思是你要退回第几页,我们知道通过wx.navigateTo跳转的页面一共会缓存10页,超过10页的部分会被逐渐替换掉,因此,这里的
例子上面的注释还是挺清晰的,大致就是先从A页面跳转到了B页面,然后再从B页面跳转到了C页面,在C页面中有一个事件,这个事件触发后回退了2页,那么此时显示的页面A页,那假如回退delta的参数是3,会什么结果?答案 还是A页面,参数说明中说了,超出现有页面树的话就还是第一页; wx.switchTab(Object object)跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。 因此,官方把这个底部的tabBar给内置了,它可以在app.json中直接配置(具体怎么配置下次介绍,或者有兴趣的小伙伴可以自行到官网查阅),大致就是这种
看到参数应该明白了吧,具体用法和wx.navigateTo及wx.redirectTo一样
wx.reLaunch(Object object)关闭所有页面,打开到应用内的某个页面,这个怎么说呢,就是先将wx.navigateTo存储的10界面都给干掉,然后再进行跳转,使用频率相对没有wx.navigateTo等来的高;
|