微信小程序 跳转传递数据的方法

1. 简介

微信小程序是一种类似于App的小型应用程序，用户可以通过微信扫描二维码或搜索小程序名称，即可使用该应用程序。在微信小程序中，页面跳转是经常使用的操作，而且还需要传递数据，那么在小程序中如何进行页面跳转和传递数据呢？以下将详细介绍。

2. 页面跳转

2.1 关于页面跳转

在小程序中，页面之间的跳转可以使用wx.navigateTo或wx.redirectTo方法来实现。两者的区别在于：wx.navigateTo是保留当前页面，跳转到新页面，而wx.redirectTo则是关闭当前页面，跳转到新页面。

2.2 代码示例

下面是使用wx.navigateTo跳转到新页面的代码示例：

wx.navigateTo({
  url: '/pages/newPage/newPage'
})

下面是使用wx.redirectTo跳转到新页面的代码示例：

wx.redirectTo({
  url: '/pages/newPage/newPage'
})

3. 传递数据

3.1 关于传递数据

在小程序中，页面跳转的同时还需要传递数据，最常用的是url传参。传参方式有两种：

query参数传递

url + 参数传递

query参数传递是指将数据放在url后面，以?key=value&key1=value1的形式传递。url + 参数传递则是将数据放在url中。

3.2 代码示例

以下代码示例展示了url + 参数传递的实现方式：

wx.navigateTo({
  url: '/pages/newPage/newPage?name=张三&age=18'
})

在被跳转的新页面中，我们可以使用wx.getStorageSync或wx.getStorage方法获取传递过来的数据。

var name = wx.getStorageSync('name');
var age = wx.getStorageSync('age');

如果使用的是query参数传递，则可以使用wx.getStorageSync或wx.getStorage方法获取传递过来的数据，方法如下：

var name = options.query.name;
var age = options.query.age;

其中，options为页面的参数对象。传递过来的数据也可以在页面的onLoad方法中获取。

onLoad: function (options) {
  //获取传递过来的参数
  var name = options.name;
  var age = options.age;
}

4. 小结

本文主要介绍了在微信小程序中实现页面跳转和传递数据的方法，通过对页面跳转和参数传递两个方面的介绍，相信大家已经掌握了在微信小程序中实现页面跳转和传递数据的方法。