微信小程序系列3——页面跳转详解

前言

  首先，微信页面跳转的是一个页面栈进栈出栈的过程，也可以简单的理解对页面跳转的操作就是一个栈的操作。

微信小程序主要一下两类样式的跳转（JS、WXML控件）：

JS控制的跳转：

• navigation 栈的形式（导航栏）
• tabBar 标签栏
• 其他

WXML模板内控件控制的跳转方法

• navigator

一、navigation页面跳转

1.wx.navigateTo({ url: ‘pageA’ })

navigateTo方式 跳转的应用内非 tabBar 的页面的路径，页面之间不能像IOS或者Android对页面进行赋值进行传递对象，只能像Web的URL地址一样，在路径后可以带参数。

1）参数和路径之间使用？分隔，参数键与参数值用=相连。

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

2）不同参数用&分隔

wx.navigateTo({
  url: 'pageA?id=1&token=222'
})

navigateTo的导航栏默认有返回按钮，返回到上一个页面。

2.wx.navigateBack({})

navigateBack和navigateTo是一对，navigateTo是页面进栈操作，navigateBack是页面出栈操作。navigateBack默认返回到上一级页面（内部参数：delta：1）。

参数	类型	默认值	描述
delta	Number	1	返回的页面数；如果delta大于现在页面，则页面栈的第一个页面

// 此处是A页面    
wx.navigateTo({
  url: 'B'
})
 
// 此处是B页面
wx.navigateTo({
  url: 'C'
})
 
// 在C页面内 navigateBack，将返回A页面
wx.navigateBack({
  delta: 2
	// delta > 2 都会返回A页面    A页面之前没有navigate的页面
})

二、tabBar页面跳转

tabBar中的页面需要在app.json中配置，tabBar页面最少2页面，最多5个页面。tabBar之间的跳转采用wx.switchTab({ url: ‘’ })的方式，默认情况下tabBar之间的页面跳转，只需要点击tabBar上对应的控件就可以相互跳转。（注：tabBar之间的跳转，路径后不能带参数）

wx.switchTab({
      url: 'switchA',
  })

tabBar上的页面的跳转只能采用switchTab的方式。其他页面跳转到tabBar上也必须采用switchTab的方式跳转。

三、其他页面跳转

1.wx.redirectTo({url: ‘’})（跳转的下一个页面，存在默认返回按钮）

redirectTo跳转非tabBar页面的路径，路径后可以带参数。（带参数可以参考：navigateTo）

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

跳转下一个页面默认有返回按钮，返回到上一个页面的再上一层。

2.wx.reLaunch({url: ‘’})（跳转的下一个页面，有一个返回首页的按钮）

redirectTo跳转非tabBar页面的路径，路径后可以带参数。（带参数可以参考：navigateTo）

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

跳转下一个页面默认有返回首页，返回到首页。（页面栈的第一个页面）

四、navigator组件—页面跳转（WXML内组件，其他的都是JS中操作）

navigator作为一个跳转的WXML模板中的控件，其他几种的操作都是在JS中的操作。下边详细介绍navigator控件的属性和使用说明

属性	类型	默认值	描述说明
target	String	当前小程序	在哪个目标程序上发生跳转，默认当前小程序
url	String		当前小程序内的跳转链接 （后面可以携带参数，除switchTab之外）
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"时有效，跳转小程序成功
binderror	String		当target="miniProgram"时有效，跳转小程序失败
bindcomplete	String		当target="miniProgram"时有效，跳转小程序完成

target 的合法值

target值	描述说明
self	当前小程序
miniProgram	其它小程序

open-type 的合法值：

open-type值	描述说明
navigate	对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能
redirect	对应 wx.redirectTo 的功能
switchTab	对应 wx.switchTab 的功能
reLaunch	对应 wx.reLaunch 的功能
navigateBack	对应 wx.navigateBack 的功能
exit	退出小程序，target="miniProgram"时生效

version 的合法值

值	说明
develop	开发版
trial	体验版
release	正式版，仅在当前小程序为开发版或体验版时此参数有效；如果当前小程序是正式版，则打开的小程序必定是正式版。

下面是navigator的例子：

<!-- sample.wxml -->
<view class="btn-area">
  <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>
  <navigator target="miniProgram" open-type="navigate" app-id="" path="" extra-data="" version="release">打开绑定的小程序</navigator>
</view>

微信小程序页面跳转的功能基本就这些内容，微信小程序页面跳转方式和Android、iOS的方式非常相似之处，可以相互结合理解。

本文章的内容参考自《微信官方文档》

持续更新中……