一文读懂微信小程序页面导航

一，页面导航

首先，我们先来了解一下什么叫页面导航，其实就是通过识别用户点击来进行页面的跳转。

这一点有点类似于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"

今天的小程序文章到这里就结束啦，如果觉得对您有帮助的话，可以关注牛牛接下来的文章，感谢您对支持，您的支持是我创作的最大动力！！！

总结

到此这篇关于微信小程序页面导航的文章就介绍到这了,更多相关微信小程序页面导航内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！