微信小程序3

页面导航

页面导航指的是页面之间的相互跳转。

例如，浏览器中实现页面导航的方式有如下两种：

• <a> 链接
• location.href

小程序中实现页面导航的两种方式：

1. 用navigator组件的方式

在页面上声明一个 <navigator> 导航组件，通过点击 <navigator> 组件实现页面跳转

导航到 tabBar 页面 不能传参

tabBar 页面指的是被配置为 tabBar 的页面。

eg：app.json–>pages中配置了4个页面：首页home，message消息，contact联系我们，info信息

而app.json–>tabBar–>list数组中配置了3个tabBar页面：首页home，message消息，contact联系我们

则info信息页为非tabBar页面

在使用 <navigator> 组件跳转到指定的 tabBar 页面时，需要指定 url 属性和 open-type 属性，其中：

• url 表示要跳转的页面的地址，必须以 / 开头
• open-type 表示跳转的方式，必须为 switchTab

<!--pages/home/home.wxml-->
<navigator url="/pages/message/message" open-type="switchTab">导航到tabBar页面--消息页</navigator>

导航到非 tabBar 页面 可传参

非 tabBar 页面指的是没有被配置为 tabBar 的页面。

在使用 <navigator> 组件跳转到普通的非 tabBar 页面时，则需要指定 url 属性和 open-type 属性，其中：

• url 表示要跳转的页面的地址，必须以 / 开头
• open-type 表示跳转的方式，必须为 navigate

注意：为了简便，在导航到非 tabBar 页面时，open-type=“navigate” 属性可以省略。

<!--pages/home/home.wxml-->
<navigator url="/pages/info/info" open-type="navigate">导航到非tabBar页面--info页</navigator>

传参

<!--pages/home/home.wxml-->

<!-- 因为message是tabBar页面，跳转到tabBar页面是不能携带参数的，所以以下传参无效 -->
<navigator url="/pages/message/message?name=zs&age=20" open-type="switchTab">导航到tabBar页面--消息页</navigator>

<!-- 跳转到非tabBar页面，可以正常传参 -->
<navigator url="/pages/info/info?name=zs&age=20" open-type="navigate">导航到非tabBar页面--info页</navigator>

接收传递的参数：

// pages/info/info.js
Page({
   
    /**
     * 页面的初始数据
     */
    data: {
   },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
   
        console.log(options); // {name: "zs", age: "20"}
    },
    
    // 返回上一级
    goBack() {
   
        wx.navigateBack(1)
    },
})

后退导航

如果要后退到上一页面或多级页面，则需要指定 open-type 属性和 delta 属性，其中：

• open-type 的值必须是 navigateBack，表示要进行后退导航
• delta 的值必须是数字，表示要后退的层级

注意：为了简便，如果只是后退到上一页面，则可以省略 delta 属性，因为其默认值就是 1。

<!--pages/info/info.wxml-->
<navigator open-type="navigateBack" delta="1">返回上一页</navigator>
// 之前从home页跳转到info页，点击此处则返回home页

2. 用js的方式

调用小程序的导航 API，实现页面的跳转。

wx.switchTab() 跳转到tabBar页面 不能传参

调用 wx.switchTab(Object object) 方法，可以跳转到 tabBar 页面。

(没有返回键，只能跳转到tabBar页面，不可以携带参数)

其中 Object 参数对象的属性列表如下：

属性	类型	是否必选	说明
url	string	是	需要跳转的 tabBar 页面的路径，路径后不能带参数
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

<!--pages/home/home.wxml-->
// 用navigator组件的方式：
<navigator url="/pages/message/message" open-type="switchTab">跳转到tabBar页面--信息页面</navigator>
// 用js的方式：
<button bindtap="jumpToMsg">跳转到tabBar页面--信息页面&l