微信小程序页面间的跳转及数据传递(二)

在微信小程序页面间的跳转及数据传递(一) 一文中，我们介绍了打开小程序的页面的三个方法wx.navigateTo、 wx.navigateBack 、 wx.redirectTo。本文将介绍另外两个方法 wx.switchTab 、 wx.reLaunch 。

1. 打开tabBar页面： wx.switchTab，URL不可传递数据

1）使用wx.switchTab ，将会跳转到参数 url 指定的 tabBar 页面，并关闭其他所有非 tabBar 页面。

参数说明：

参数	类型	必填	说明
url	String	是	需要跳转的 tabBar 页面的路径（需在 app.json 的 tabBar 字段定义的页面），路径后不能带参数
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

示例代码：

假设有 index 和 search 这两个 tabBar 页面。

// 配置文件 app.json

"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "img/home01.png",
        "selectedIconPath": "img/home02.png"
      },
      {
        "pagePath": "pages/search/search",
        "text": "查询",
        "iconPath": "img/2017121106.png",
        "selectedIconPath": "img/2017121105.png"
      },
    ]
  }

从 index 页跳转到 search 页

// index.js

wx.switchTab({
  url: '../search/search'
});

2) 由于wx.switchTab 的 url 不能带参数，无法通过 url 在页面间传递数据。这时候我们该怎么处理数据的传递呢？

我们可以使用 全局对象 App 的 globalData 属性来存储数据。

// app.js
App({
  // 全局变量
  globalData: {
    ticket: null , // 变量ticket，可以用于所有页面。
  },
  onLaunch: function () {
  });
});

假设跳转前的页面为 index , 使用全局变量来存储从 index 页面中的数据。要使用全局变量就必须先通过getApp()获取应用实例，再给app.globalData 赋值。

// index.js
//获取应用实例
const app = getApp();

Page({
  data: {},
  // 自定义的函数
  chooseShow: function(event) {
     // 需要传递的数据
    var ticket = {
      ticketId: 1001,
      account: '123456',
    };
    
    // 使用全局变量来存储数据 ticket
    app.globalData.ticket = ticket;
    
    // 跳转到 search 页面 (search 为 tabBar 页面 )
    wx.switchTab({
      url: '../search/search'
    });
  }
 });

跳转后的页面为 search 页。先通过getApp()获取应用实例，再通过 app.globalData 来读取数据。

//  search.js
//获取应用实例
const app = getApp();

// 获取全局变量中的数据 ticket
var ticket = app.globalData.ticket;

2.打开任意页面：wx.reLaunch()，URL可传递数据

使用 wx.reLaunch() 可以打开到应用内的任意的某个页面，同时关闭之前的所有页面（即清空了页面栈）。

参数说明：

参数	类型	必填	说明
url	String	是	需要跳转的应用内页面路径 , 路径后可以带参数。参数与路径之间使用`?`分隔，参数键与参数值用`=`相连，不同参数用`&`分隔；如 ‘path?key=value&key2=value2’，如果跳转的页面路径是 tabBar 页面则不能带参数
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

示例代码：

// 打开 test 页面，并通过 url 路径参数传递数据 id=1
wx.reLaunch({
  url: 'test?id=1'
})

//test.js
Page({
  // 
  onLoad: function(options){
    console.log(options.id);
  }
})

wx.reLaunch()使用的参数及页面间的数据传递方式与wx.navigateTo() 一样。

如果需要传递复杂的数据并非简单的字符串，而是 对象 或者数组，则需要用 JSON.stringify() 将原数据转换成 JSON 字符串。在目标页面的生命周期函数onLoad() 中，通过 JSON.parse() 将字符串解析成 对象或数组 。

3.总结：

方法	可通过 url 传递数据	保持当前页面到页面栈中	可打开tabBar页面
wx.navigateTo()	是	是	否
wx.navigateBack()	否	否	否
wx.redirectTo()	是	否	否
wx.switchTab()	否	否	是
wx.reLaunch()	是	否	是

文章目录

1. 打开tabBar页面： wx.switchTab，URL不可传递数据

2.打开任意页面：wx.reLaunch()，URL可传递数据

3.总结：