一文读懂微信小程序页面导航
一,页面导航
首先,我们先来了解一下什么叫页面导航,其实就是通过识别用户点击来进行页面的跳转。
这一点有点类似于vue
中的vue-router
路由,我们可以通过<router-link>
标签实现单页面内分页面的渲染,只不过小程序的页面导航相对来说,比较简单。
小程序的页面导航分为两种,声明式导航和编程式导航,话不多说,我们现在正式开始。
1.1 声明式导航
声明式导航就是利用小程序的<navigator>
实现的,其中有url
属性,在效果上就类似浏览器的a
超链接标签。
1.1.1 导航到tarBar页面
还记得我们之前学到的tarBar
是啥不,底部的导航栏,点击后可以跳转到相对应的页面,而用<navigator>
也可以实现。
我们需要设置两个属性在navigator
组件中,url
和open-type
。
url
:设置需要跳转的页面所处的位置(页面地址),并且前面必须由/
开头,比如——url = '/pages/content/conten'
最后一个content不需要加文件后缀。
open-type
:设置navigator
的跳转方式,这里选择值为switchTab
,表示跳转的页面是被配置到tarBar
中的。tarBar
页面配置:
在app.json
文件中
这样我们就实现了点击跳转到tarBar
设置的页面中啦。
<navigator url="/pages/list/list">点击跳转</navigator>
你还可以在里面嵌套其他组件,比如嵌套一个button
。
1.1.2 导航到非tarBar页面
非tarBar
页面就是你在page
文件夹已经定义的页面,但是没有在app.json
中的tarBar
配置。
在实际开发中,这种场景也是非常多见了,一个比较复杂的小程序都会有比较多的页面,而这么多页面又不会都在tarBar
中配置,所有这么页面的跳转就得靠这个方法来实现啦。
与上文一样,也是需要url
和open-type
两个属性,url
的写法不变,有变化的是open-type
的值需要该为navigate
。
<navigator url="/pages/list/list" open-type='navigate'> </navigator>
1.1.3 后退导航
<navigator>
还可以实现页面后退功能。
这时候我们就不用设置url
属性了,需要更改的是,设置open-type
的值为navigateBack
。
我们可以通过设置delta
设置回退的层级,如果不设置,那么默认值将会为1。
<navigator open-type="navigateBack" delta='1'></navigator>
1.2 编程式导航
编程式导航是利用微信小程序顶级对象wx
下面的几个方法来实现,接下来我们来一一讲解。
1.2.1 导航到tarBar页面
我们将使用wx
下的switchTab(obj)
方法,其中obj
为对象。
对象中有四个属性,url
、success
、fail
、complete
。
其中`
url
是需要跳转的页面地址success
是接口调用成功执行的回调函数fail
是接口调用失败执行的回调函数complete
是完成调用执行的回调函数,无论成功与否,都会执行。
wx.swithTab({ url : '/pages/list/list', ... )}
1.2.2 导航到非tarBar页面
实现该功能我们需要调用wx
下的navigateTo(obj)
方法。
对象中的参数类型与1.2.1一致。
wx.navigateTo({ url : '/page/list/list', success : function(){console.log('success');} })
1.2.3 后退导航
这里的后退导航功能,同样的我们需要用到wx
顶级对象下的navigateBack(obj)
方法。
不过不同的是,obj
对象中的参数,url
改为delta
,表示会退的 层级,默认值为1,也就是后退一页。
1.3 导航传参
如果我们实现页面跳转之后,下一个页面想要调用前一个页面的参数时,我们该怎么办?
这时候就可以用到导航传参了,导航传参其实和在浏览器中使用GET请求很像,可以把参数设置在url
中,传递到下一个页面。
在格式上也是通过键值对的方法,路径跟参数之间用?
隔开,键与值之间用=
隔开,每个参数之间着用&
隔开。
如下所示:
url= "/pages/list/list?name=myname&pass=yes"
今天的小程序文章到这里就结束啦,如果觉得对您有帮助的话,可以关注牛牛接下来的文章,感谢您对支持,您的支持是我创作的最大动力!!!
总结
到此这篇关于微信小程序页面导航的文章就介绍到这了,更多相关微信小程序页面导航内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
javascript substr和substring用法比较
在js中substring和substr都是用来截取字符串的,那么substring和substr之间的具体区别在哪里,有没有区别呢,下面我来给各位详细引用一些实例来介绍这些问题2009-06-06纯javaScript、jQuery实现个性化图片轮播【推荐】
本文主要介绍了纯javaScript、jQuery实现个性化图片轮播的方法,并在文章结尾附上源码下载。具有很好的参考价值,下面跟着小编一起来看下吧2017-01-01微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
这篇文章主要给大家介绍了关于微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法,文中通过示例代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧2019-08-08
最新评论