微信小程序带数组参数跳转页面,微信小程序跳转页面带数组参数

在微信小程序中,带数组参数跳转页面需要通过JSON序列化和URL编码处理,以下是具体实现方法

传递数组参数‌(发送页面)

c 复制代码
wx.navigateTo({
  url: '/pages/targetPage?arr=' + encodeURIComponent(JSON.stringify(yourArray))
});

接收数组参数‌(目标页面)

c 复制代码
Page({
  onLoad(options) {
    const arr = JSON.parse(decodeURIComponent(options.arr));
    this.setData({ receivedArray: arr });
  }
});

WXML中使用navigator组件传参

c 复制代码
<navigator 
  url="/pages/targetPage?arr={{encodeURIComponent(JSON.stringify(arrayData))}}">
  跳转带数组参数
</navigator>

关键注意事项:

  1. 必须使用JSON.stringify将数组转为字符串
  2. 建议配合encodeURIComponent处理特殊字符
  3. 接收参数时需反向操作JSON.parse+decodeURIComponent
  4. 单个URL参数长度限制为2KB,大数据建议使用全局变量或缓存
  5. tabBar页面跳转需使用wx.switchTab且不支持传参
相关推荐
黑客老李3 小时前
web渗透实战 | js.map文件泄露导致的通杀漏洞
安全·web安全·小程序·黑客入门·渗透测试实战
游戏开发爱好者813 小时前
日常开发与测试的 App 测试方法、查看设备状态、实时日志、应用数据
android·ios·小程序·https·uni-app·iphone·webview
2501_9151063215 小时前
app 上架过程,安装包准备、证书与描述文件管理、安装测试、上传
android·ios·小程序·https·uni-app·iphone·webview
2501_9151063215 小时前
使用 Sniffmaster TCP 抓包和 Wireshark 网络分析
网络协议·tcp/ip·ios·小程序·uni-app·wireshark·iphone
宠友信息16 小时前
2025社交+IM及时通讯社区APP仿小红书小程序
java·spring boot·小程序·uni-app·web app
“负拾捌”17 小时前
python + uniapp 结合腾讯云实现实时语音识别功能(WebSocket)
python·websocket·微信小程序·uni-app·大模型·腾讯云·语音识别
换日线°1 天前
NFC标签打开微信小程序
前端·微信小程序
光影少年2 天前
AIGC + Taro / 小程序
小程序·aigc·taro
2501_915918412 天前
在 iOS 环境下查看 App 详细信息与文件目录
android·ios·小程序·https·uni-app·iphone·webview
2501_916007472 天前
没有 Mac 用户如何上架 App Store,IPA生成、证书与描述文件管理、跨平台上传
android·macos·ios·小程序·uni-app·iphone·webview