开发 | 天天用小程序页面跳转接口,但你真的了解它们吗?

作者:邬泉

知晓程序注:

有关页面间跳转的许多接口,大概是小程序开发过程中,使用率最高的接口。

但是,你真的了解微信提供的四个页面跳转接口吗?

今天,知晓程序(微信号 zxcx0101)就来为你详细解析,小程序中有关页面跳转的 4 个接口,帮助你更有效地利用小程序的 5 层页面层级限制。

关注「知晓程序」微信公众号,回复「开发」,获取小程序开发全套经验。

对于两个或更多页面的微信小程序而言,页面之间的跳转是在所难免的

有关小程序页面间跳转的 API 函数,微信一共为我们提供了 4 个(另外,还有返回上一级或多级的 wx.navigateBack())。

下面,我将主要围绕这四个 API 函数,教你如何跳出页面跳转的大坑。

四个接口怎么用?

这四个 API 可接受的参数都是完全相同的,如下:

在小程序 JavaScript 逻辑代码中的用法,也完全相同,具体语法为:

虽然它们有这么多的相同点,但它们绝对一点都不多余, 因为它们的用法完全各不相同。

直接跳转:wx.navigateTo()

wx.navigateTo() 用于保留当前页面、跳转到应用内的某个页面,使用 wx.navigateBack() 可以返回到原页面。

对于页面不是特别多的小程序,通常推荐使用 wx.navigateTo() 进行跳转, 以便返回原页面,以提高加载速度。当页面特别多时,则不推荐使用。

重定向:wx.redirectTo()

当页面过多时,被保留页面会挤占微信分配给小程序的内存,或是达到微信所限制的 5 层页面栈。这时,我们应该考虑选择 wx.redirectTo()

wx.redirectTo() 用于关闭当前页面,跳转到应用内的某个页面。这样的跳转,可以避免跳转前页面占据运行内存,但返回时页面需要重新加载,增加了返回页面的显示时间。

清空页面栈再跳转:wx.reLaunch()

wx.reLaunch()wx.redirectTo() 的用途基本相同, 只是 wx.reLaunch() 先关闭了内存中所有保留的页面,再跳转到目标页面

跳转至 Tab Bar 页面:wx.switchTab()

对于跳转到 tab bar 的页面,最好选择 wx.switchTab(),它会先关闭所有非 tab bar 的页面。

其次,也可以选择 wx.reLaunch()它也能实现从非 tab bar 跳转到 tab bar,或在 tab bar 间跳转,效果等同 wx.switchTab()

使用其他跳转 API 来跳转到 tab bar,则会跳转失败。tab bar 如下所示(位于小程序底部):

关闭页面:wx.navigateBack()

wx.navigateBack() 用于关闭当前页面,并返回上一页面或多级页面。开发者可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。

这个 API 需要填写的参数只有 delta,表示要返回的页面数。若 delta 的取值大于现有可返回页面数时,则返回到用户进入小程序的第一个页面。

当不填写 delta 的值时,就默认其为 1(注意,默认并非取 0),即返回上一页面。

原文发布于微信公众号 - 知晓程序(zxcx0101)

原文发表时间:2017-10-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏我和未来有约会

基于Cairngorm的Silverlight开发 - part5

搭建完整的Cairngorm项目 到这里已经都知道了如何独立的运用Cairngorm中两个特殊的部分,ModelLocator模型和View视图,现在需要的就是...

3585
来自专栏网络

玩转 React 服务器端渲染

【编者按】React 生态提供了很多选择方案,这里我们选用 Redux 和 react-router 来做说 React 提供了两个方法renderToStri...

2498
来自专栏河湾欢儿的专栏

4.页面优化

为什么要优化? 优化的好处 1.提升网页响应速度 2.有利于搜索引擎搜索 3.对后期维护比较方便

1112
来自专栏闻道于事

IDEA使用

最重要的: Ctrl+Shift+A  打开搜索 定位代码: 项目之间的跳转: ? 文件之间的跳转: 打开最近文件列表  Ctrl + E     打开最近修改...

2844
来自专栏Python疯子

Selenium和PhantomJS 终极最全使用总结

1. 加载页面[image.png]PhantomJS 截取的是网页的完整页面,包括下拉进度条的内容

6323
来自专栏从零开始学 Web 前端

从零开始学 Web 之 Ajax(七)跨域

跨域这个概念来自一个叫 “同源策略” 的东西。同源策略是浏览器上为了安全考虑实施的非常重要的安全机制。

1294
来自专栏小白鼠

Ionic3 自定义指令

组件的概念比较大,本文讲解的是属性指令和结构指令的创建和使用,Angular官方文档

1273
来自专栏阮一峰的网络日志

Vim 配置入门

Vim 的配置不太容易,它有自己的语法,许许多多的命令。我总是记不清楚,所以就整理了下面这篇文章,列出主要配置项的含义。

1531
来自专栏网站源码

博客复制弹窗提示版权

CSS与JS文件配套下载:https://www.lanzous.com/i1j8ppi

2314
来自专栏闪电gogogo的专栏

sublime学习笔记

1 sublime的几个优点 1.操作简单上手快 2.支持多点编辑:ctrl + 光标 3.基于Package Control强大的包管理功能 4.闪电一样的查...

3146

扫码关注云+社区

领取腾讯云代金券