微信小程序的页面跳转传值的实现-猿码集

1. 前言

微信小程序是一款非常流行的小程序，在开发过程中页面跳转传值是一个非常重要的功能。在本文中，我们将会介绍如何通过微信小程序实现页面跳转传值。

在微信小程序中，我们可以通过navigateTo或redirectTo等API实现页面跳转。其中，navigateTo是保留当前页面，而redirectTo是关闭当前页面。下面我们来看看如何通过navigateTo实现页面跳转。

通过navigateTo跳转页面时，我们可以使用url参数来指定要跳转的页面路径，例如：


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

在跳转到新页面时，我们可以在onLoad生命周期函数中获取之前页面传递过来的参数。


Page({
  onLoad: function (options) {
    console.log(options)
  }
})

这里的options参数是一个对象，其中包含了所有之前页面传递过来的参数。

通过redirectTo跳转页面与navigateTo跳转页面类似，只是在跳转后新页面将会替换当前页面。


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

同时，在新页面的onLoad函数中依然可以获取之前页面传递过来的参数。

在页面跳转中，我们经常需要传递参数到被跳转的页面中。在微信小程序中，我们可以通过url参数来传递参数。下面我们来看看如何实现页面传值。

如果要在页面之间传递字符串，我们可以将字符串编码成URL参数的形式，在跳转时将其拼接到url中。例如：


wx.navigateTo({
  url: '/pages/detail/detail?id=' + encodeURIComponent('hello world')
})

在detail页面中，我们可以通过options.id来获取到之前页面传递过来的字符串值。


Page({
  onLoad: function (options) {
    console.log(decodeURIComponent(options.id))
  }
})

如果要在页面之间传递对象，我们可以将对象序列化为JSON字符串，再通过URL参数传递。例如：


var obj = {
  name: '张三',
  age: 18,
  sex: '男'
}
wx.navigateTo({
  url: '/pages/detail/detail?obj=' + encodeURIComponent(JSON.stringify(obj))
})

在detail页面中，我们可以通过options.obj来获取之前页面传递过来的JSON字符串，然后再对其进行JSON反序列化，得到传递的对象。


Page({
  onLoad: function (options) {
    console.log(JSON.parse(decodeURIComponent(options.obj)))
  }
})

如果要在页面之间传递数组，我们可以将数组序列化为JSON字符串，再通过URL参数传递。例如：


var arr = ['张三', '李四', '王五']
wx.navigateTo({
  url: '/pages/detail/detail?arr=' + encodeURIComponent(JSON.stringify(arr))
})

在detail页面中，我们可以通过options.arr来获取之前页面传递过来的JSON字符串，然后再对其进行JSON反序列化，得到传递的数组。


Page({
  onLoad: function (options) {
    console.log(JSON.parse(decodeURIComponent(options.arr)))
  }
})

在微信小程序中实现页面跳转传值是非常简单的，我们只需要在跳转时将参数通过url参数带过来，然后在onLoad函数中获取即可。但是需要注意的是，如果传递的参数包含特殊字符或中文字符，需要进行编码和解码操作。