小程序JSON传值全攻略:从基础到实践
在小程序开发中,数据传递是连接页面、组件与业务逻辑的核心环节,而JSON(JavaScript Object Notation)凭借其轻量级、易读、跨语言兼容的特性,成为小程序传值的首选格式之一,无论是页面跳转时携带参数、组件间通信,还是与后端接口交互,JSON传值都扮演着重要角色,本文将从基础概念到实际场景,详细解析小程序中JSON传值的实现方法与最佳实践。
JSON传值的基础:什么是JSON传值?
JSON传值,本质上是将数据以JSON格式序列化(字符串化)后,在不同作用域(如页面、组件、全局)之间传递,接收方再通过反序列化(解析)还原为原始数据对象的过程,在小程序中,JSON传值的核心优势在于:
- 结构清晰:支持嵌套对象、数组等复杂数据结构,便于组织多维度数据;
- 兼容性强:小程序原生API(如
wx.navigateTo、wx.setStorage)均支持JSON格式数据; - 易于调试:JSON字符串可读性高,方便开发者打印和排查问题。
常见场景与实现方法
场景1:页面跳转时传递JSON参数(路由传值)
页面跳转是小程序中最常见的传值需求,例如从列表页跳转详情页时,需传递ID、标题等参数,通过路由URL的query参数传递JSON字符串是常用方案。
实现步骤:
-
发送方:序列化JSON并拼接URL
使用JSON.stringify()将对象转为JSON字符串,通过wx.navigateTo的url参数传递(需注意URL长度限制,通常不超过1024字节)。// 页面A:传递数据 const userInfo = { id: 1001, name: "张三", age: 25, hobby: ["篮球", "阅读"] }; const userInfoStr = JSON.stringify(userInfo); // 序列化为JSON字符串 wx.navigateTo({ url: `/pages/detail/detail?data=${encodeURIComponent(userInfoStr)}` // 注意编码 });- 关键点:需使用
encodeURIComponent()对JSON字符串进行编码,避免特殊字符(如&、)干扰URL解析。
- 关键点:需使用
-
接收方:解析URL参数并反序列化
在目标页面的onLoad生命周期中,通过options获取URL参数,再用JSON.parse()还原对象。// 页面B:接收数据 Page({ onLoad(options) { const { data } = options; if (data) { const userInfo = JSON.parse(decodeURIComponent(data)); // 解码并反序列化 console.log("接收到的用户信息:", userInfo); // {id: 1001, name: "张三", age: 25, hobby: Array(2)} } } });
注意事项:
- URL长度限制:
query参数仅适合传递少量数据,若数据较大(如图片Base64、长文本),建议改用全局变量或本地存储。 - 安全性:避免在URL中传递敏感信息(如密码、token),防止被恶意截获。
场景2:通过全局变量传递JSON数据(全局共享)
若多个页面或组件需要共享同一份数据,可通过小程序的App()实例定义全局变量,直接传递JSON对象(无需序列化)。
实现步骤:
-
定义全局数据
在app.js中globalData中存储JSON对象:// app.js App({ globalData: { cartList: [], // 购物车数据(JSON数组) userInfo: null // 用户信息(JSON对象) } }); -
发送方:修改全局数据
在任意页面或组件中获取App实例,修改globalData:// 页面A:设置全局数据 const app = getApp(); app.globalData.cartList = [ { id: 1, name: "商品A", price: 29.9, count: 2 }, { id: 2, name: "商品B", price: 39.9, count: 1 } ]; -
接收方:读取全局数据
在目标页面中直接访问globalData:// 页面B:读取全局数据 const app = getApp(); const cartList = app.globalData.cartList; console.log("购物车数据:", cartList);
优缺点:
- 优点:实时性强,无需序列化/反序列化,适合高频访问的共享数据(如用户状态、购物车)。
- 缺点:数据生命周期与小程序实例绑定,若小程序被销毁(如冷启动),数据会丢失;需注意数据同步问题(如多页面同时修改数据时需加锁)。
场景3:通过本地存储传递JSON数据(持久化存储)
若数据需要在小程序关闭后仍能保留(如用户登录状态、历史记录),可通过本地存储(wx.setStorage)传递JSON数据。
实现步骤:
-
发送方:存储JSON数据
使用wx.setStorage将JSON对象存入本地(支持同步/异步方式):// 页面A:存储数据 const orderInfo = { orderId: "ORD202310001", amount: 99.9, products: [{ id: 1, name: "商品A" }, { id: 2, name: "商品B" }], createTime: "2023-10-01 12:00:00" }; // 异步存储 wx.setStorage({ key: "currentOrder", data: orderInfo }); // 同步存储(不推荐,可能阻塞UI线程) // try { // wx.setStorageSync("currentOrder", orderInfo); // } catch (e) { // console.error("存储失败:", e); // } -
接收方:读取JSON数据
使用wx.getStorage从本地读取数据:// 页面B:读取数据 wx.getStorage({ key: "currentOrder", success(res) { const orderInfo = res.data; console.log("订单信息:", orderInfo); }, fail(err) { console.error("读取失败:", err); } });
本地存储类型对比:
| API | 类型 | 特点 | 适用场景 |
|---|---|---|---|
wx.setStorage |
异步 | 不阻塞UI线程,支持回调 | 大多数异步存储场景 |
wx.setStorageSync |
同步 | 阻塞UI线程,代码更简洁 | 少量数据、无需等待的场景 |
wx.removeStorage |
异步 | 删除单个数据 | 清理特定缓存 |
wx.clearStorage |
异步 | 清空所有本地数据 | 重置小程序状态 |
注意事项:
- 存储容量限制:单个小程序默认存储上限为10MB,超出需申请扩容。
- 数据类型:
wx.setStorage直接支持JSON对象,无需手动序列化(底层自动处理)。
场景4:组件间传递JSON数据(父子/兄弟组件)
自定义组件是模块化开发的核心,组件间传值可通过properties(父传子)、triggerEvent(子传父)、全局事件等方式实现JSON数据传递。
父组件向子组件传JSON(properties)
父组件通过properties定义接收的JSON数据,子组件直接使用。
父组件(WXML):
<!-- 父组件 -->
<view>
<child-component user-info="{{parentUserInfo}}"></child-component>
</view>
父组件(JS):
// 父组件
Page({
data: {
parentUserInfo: {
id: 1002,
name: "李四",
role: "admin"
}
}
});
子组件(JS):
// 子组件
Component({
properties: {
userInfo: {
type: Object, // 指定数据类型为Object(JSON对象)
value: {} // 默认值
}
},
lifetimes: {
attached() {
console.log("父组件传递的用户信息:", this.properties.userInfo);
}
}
});
子组件向父组件传JSON(triggerEvent)
子组件通过triggerEvent触发事件,携带JSON数据,父组件通过bind事件监听接收。
子组件(JS):
// 子组件
Component({
methods: {


还没有评论,来说两句吧...