微信小程序的动态传参

什么是微信小程序的动态传参？

在微信小程序中，传递参数的方式有两种，一种是通过页面路径传递参数，另一种是通过动态传参的方式来传递参数。本文将重点介绍微信小程序的动态传参，包括什么是动态传参以及如何使用动态传参。

动态传参是什么？

简单来说，动态传参就是在页面跳转的时候，将参数动态地传递给下一个页面。这个过程中，我们需要用到小程序提供的navigator组件，具体实现方法如下：

navigator.goToPage({
  url: '/pages/detail/detail?id=123&name=test',
})

如何在跳转的目标页面中获取参数？

获取参数的方式比较简单，在目标页面的onLoad()函数中，我们可以通过options对象来获取传递的参数：

onLoad: function(options) {
  console.log(options.id) // 输出 123
  console.log(options.name) // 输出 test
}

如何在动态传参时传递复杂类型的参数？

在动态传参时，我们可以传递字符串、数字、布尔值等基本类型的参数，但是如果需要传递复杂类型的参数，我们需要将其转换成字符串，并通过encodeURIComponent()函数进行编码。在目标页面中，我们需要通过decodeURIComponent()函数进行解码得到原始数据。

var obj = { name: 'test', age: 18 }
var str = JSON.stringify(obj)
var encodedStr = encodeURIComponent(str)
navigator.goToPage({
  url: '/pages/detail/detail?data=' + encodedStr
});
onLoad: function(options) {
  var decodedStr = decodeURIComponent(options.data)
  var obj = JSON.parse(decodedStr)
  console.log(obj) // 输出 { name: 'test', age: 18 }
}

小结

动态传参是微信小程序中非常重要的一种传参方式，通过该方式可以方便地在不同的页面之间传递参数。需要注意的是，在传递复杂类型的参数时，需要进行相应的编码和解码操作。希望本文能够让读者对微信小程序的动态传参有更深入的了解。