最新【微信小程序】一文读懂页面导航_微信小程序分类导航(4)，2024年最新程序员翻身之路

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

你还可以在里面嵌套其他组件，比如嵌套一个`button`。


  

##### 1.1.2 导航到非tarBar页面


非`tarBar`页面就是你在`page`文件夹已经定义的页面，但是没有在`app.json`中的`tarBar`配置。


在实际开发中，这种场景也是非常多见了，一个比较复杂的小程序都会有比较多的页面，而这么多页面又不会都在`tarBar`中配置，所有这么页面的跳转就得靠这个方法来实现啦。


与上文一样，也是需要`url`和`open-type`两个属性，`url`的写法不变，有变化的是`open-type`的值需要该为`navigate`。

  

##### 1.1.3 后退导航


`<navigator>`还可以实现页面后退功能。


这时候我们就不用设置`url`属性了，需要更改的是，设置`open-type`的值为`navigateBack`。


我们可以通过设置`delta`设置回退的层级，如果不设置，那么默认值将会为1。

  

#### 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”

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



![img](https://img-blog.csdnimg.cn/img_convert/f7fead2f12b7ced10bfc24cb37f9844e.png)
![img](https://img-blog.csdnimg.cn/img_convert/62aa547d8dee91eb2b53562cce365ab4.png)
![img](https://img-blog.csdnimg.cn/img_convert/bdd82a54b1e14262957c5e2e27ce8de1.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**

知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**