小程序页面跳转时传参如何传对象

最新推荐文章于 2025-01-10 01:25:52 发布

aiduang

最新推荐文章于 2025-01-10 01:25:52 发布

阅读量617

点赞数

分类专栏： MiniProgram 文章标签： javascript 小程序

本文链接：https://blog.youkuaiyun.com/ZQD666/article/details/103589719

版权

MiniProgram 专栏收录该内容

12 篇文章

订阅专栏

本文探讨了在小程序中进行页面跳转时如何传递对象参数。通过将对象转换为字符串并利用URL进行传递，然后在目标页面使用JSON.parse进行解析。然而，需要注意的是，这种方法可能遇到特殊字符导致的解析问题，需要进行适当的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序中页面跳转传参对象问题

简单的参数传递

使用url传递参数

wx.navigateTo({
	url:'/pages/detail/detail?query='+ encodeQuery    // 拼接
    url: `/pages/detail/detail?query=${encodeQuery}`   // 模板字符串
});

在页面的onLoad生命周期中接收

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

对象传递

将对象转换为字符串

页面接收传递过来的字符串将其转为对象

对象传递问题

JSON.parse 方法无法解析包含“？“、”&”之类的字符

拼接或者使用es6模板字符串的写法，通过url传递

const query = JSON.stringify(item);
//直接转字符串 ，在下个页面转对象的时候会报错,
// 使用encodeURIComponent转码
const encodeQuery = encodeURIComponent(query);
wx.navigateTo({
	url:'/pages/detail/detail?query='+ encodeQuery    // 拼接
    url: `/pages/detail/detail?query=${encodeQuery}`   // 模板字符串
});

在跳转到的页面的onLoad生命周期里，接收传递的参数

onLoad: function (options) {
  console.log(options);
  const query = decodeURIComponent(options.query);
  const decodeQuery = JSON.parse(query);
  console.log(decodeQuery);
}