专栏首页菲宇微信小程序页面路由

微信小程序页面路由

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://blog.csdn.net/bbwangj/article/details/101694124

在小程序中所有页面的路由全部由框架进行管理。框架以栈的形式维护了当前的所有页面。

当发生路由切换的时候,页面栈的表现如下:

路由方式

页面栈表现

初始化

新页面入栈

打开新页面

新页面入栈

页面重定向

当前页面出栈,新页面入栈

页面返回

页面不断出栈,直到目标返回页,新页面入栈

Tab 切换

页面全部出栈,只留下新的 Tab 页面

重加载

页面全部出栈,只留下新的页面

getCurrentPages()

getCurrentPages()函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。

路由方式

对于路由的触发方式以及页面生命周期函数如下:

路由方式

触发时机

路由前页面

路由后页面

初始化

小程序打开的第一个页面

onLoad, onSHow

打开新页面

调用 API wx.navigateTo 或使用组件 <navigator open-type="navigateTo"/>

onHide

onLoad, onShow

页面重定向

调用 API wx.redirectTo 或使用组件 <navigator open-type="redirectTo"/>

onUnload

onLoad, onShow

页面返回

调用 API wx.navigateBack 或使用组件<navigator open-type="navigateBack">或用户按左上角返回按钮

onUnload

onShow

Tab 切换

调用 API wx.switchTab 或使用组件 <navigator open-type="switchTab"/> 或用户切换 Tab

各种情况请参考下表

重启动

调用 API wx.reLaunch 或使用组件 <navigator open-type="reLaunch"/>

onUnload

onLoad,

wx.navigateTo(OBJECT)

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

OBJECT 参数说明:

参数

类型

必填

说明

url

String

需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2'

success

Function

接口调用成功的回调函数

fail

Function

接口调用失败的回调函数

complete

Function

接口调用结束的回调函数(调用成功、失败都会执行)

示例

wx.navigateTo({
  url: 'test?id=1'
})

wx.redirectTo(OBJECT)

关闭当前页面,跳转到应用内的某个页面。

OBJECT 参数说明:

参数

类型

必填

说明

url

String

需要跳转的应用内非 tabBar 的页面的路径,路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2'

success

Function

接口调用成功的回调函数

fail

Function

接口调用失败的回调函数

complete

Function

接口调用结束的回调函数(调用成功、失败都会执行)

示例代码:

wx.redirectTo({
  url: 'test?id=1'
})

wx.navigateBack(OBJECT)

关闭当前页面,返回上一页面或多级页面。可通过getCurrentPages() 获取当前的页面栈,决定需要返回几层。

OBJECT 参数说明:

参数

类型

默认值

说明

delta

Number

1

返回的页面数,如果 delta 大于现有页面数,则返回到首页。

wx.navigateBack({
  delta: 2
})

wx.switchTab(OBJECT)

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

OBJECT 参数说明:

参数

类型

必填

说明

url

String

需要跳转的 tabBar 页面的路径(需在 app.json 的 tabBar 字段定义的页面),路径后不能带参数

success

Function

接口调用成功的回调函数

fail

Function

接口调用失败的回调函数

complete

Function

接口调用结束的回调函数(调用成功、失败都会执行)

wx.switchTab({
  url: '/index'
})

wx.reLaunch(OBJECT)

关闭所有页面,打开到应用内的某个页面。

OBJECT 参数说明:

参数

类型

必填

说明

url

String

需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2',如果跳转的页面路径是 tabBar 页面则不能带参数

success

Function

接口调用成功的回调函数

fail

Function

接口调用失败的回调函数

complete

Function

接口调用结束的回调函数(调用成功、失败都会执行)

示例代码:

wx.reLaunch({
  url: 'test?id=1'
})

页面链接。

属性名

类型

默认值

说明

target

String

self

在哪个目标上发生跳转,默认当前小程序,可选值self/miniProgram

url

String

应用内的跳转链接

open-type

String

navigate

跳转方式

delta

Number

当 open-type 为 'navigateBack' 时有效,表示回退的层数

app-id

String

当target="miniProgram"时有效,要打开的小程序 appId

path

String

当target="miniProgram"时有效,打开的页面路径,如果为空则打开首页

extra-data

Object

当target="miniProgram"时有效,需要传递给目标小程序的数据,目标小程序可在 App.onLaunch() ,App.onShow() 中获取到这份数据。

version

version

release

当target="miniProgram"时有效,要打开的小程序版本,有效值 develop(开发版),trial(体验版),release(正式版),仅在当前小程序为开发版或体验版时此参数有效;如果当前小程序是正式版,则打开的小程序必定是正式版。

hover-class

String

navigator-hover

指定点击时的样式类,当hover-class="none"时,没有点击态效果

hover-stop-propagation

Boolean

false

指定是否阻止本节点的祖先节点出现点击态

hover-start-time

Number

50

按住后多久出现点击态,单位毫秒

hover-stay-time

Number

600

手指松开后点击态保留时间,单位毫秒

bindsuccess

String

当target="miniProgram"时有效,跳转小程序成功

bindfail

String

当target="miniProgram"时有效,跳转小程序失败

bindcomplete

String

当target="miniProgram"时有效,跳转小程序完成

open-type 有效值:

说明

navigate

对应wx.navigateTo的功能

redirect

对应wx.redirectTo的功能

switchTab

对应wx.switchTab的功能

reLaunch

对应wx.reLaunch的功能

navigateBack

对应wx.navigateBack的功能

exit

退出小程序,target="miniProgram"时生效

  <navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
  <navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>
  <navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator>

注意:

  • navigateTo,redirectTo只能打开非 tabBar 页面。
  • switchTab 只能打开 tabBar 页面。
  • reLaunch 可以打开任意页面。
  • 页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。
  • 调用页面路由带的参数可以在目标页面的onLoad中获取。

参考:https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • django之评论系统及多级评论

    相对来说,评论其实是另外一个比较独立的功能。Django 提倡,如果功能相对比较独立的话,最好是创建一个应用,把相应的功能代码写到这个应用里。我们的第一个应用叫...

    菲宇
  • Linux进程实时IO监控iotop命令详解

    Linux下的IO统计工具如iostat, nmon等大多数是只能统计到per设备的读写情况, 如果你想知道每个进程是如何使用IO的就比较麻烦.

    菲宇
  • Kubernetes配置flannel网络

    菲宇
  • Linux-3.14.12内存管理笔记【伙伴管理算法(3)】

    前面分析了伙伴管理算法的初始化,在切入分析代码实现之前,例行先分析一下其实现原理。

    233333
  • 微信小程序优化uni-app

    onLaunch 当uni-app初始化完成时触发 onShow 当uni-app启动,或从后台进入前台显示 onHide 当uni-app从前台进入后台

    达达前端
  • 我们平时是怎么写html和css的?

    文章的起因,我只是为了回复一个帖子,http://bbs.csdn.net/topics/390908928?page=1

    bear_fish
  • 效率类APP原型制作分享----Timeglass

    本原型由国产Mockplus(原型工具)和iDoc(智能标注,一键切图工具)提供。

    奔跑的小鹿
  • 《微信小程序七日谈》- 第四天:页面路径最多五层?导航可以这么玩

    《微信小程序七日谈》系列文章: 本系列的文章并非初学教程,而是笔者在具体开发过程中遇到的问题以及部分解决方案。 微信小程序提供导航相关的API: wx.nav...

    寒月十八
  • 小程序页面管理与跳转

    原文链接:https://godbasin.github.io/2018/09/08/wxapp-page-and-navigate/

    李成熙heyli
  • 微信小程序面试

    如何实现下拉刷新 app.json或者页面的json中配置enablePullDownRefresh为true 使用onPullDownRefresh 函数...

    达达前端

扫码关注云+社区

领取腾讯云代金券