小程序json怎么传值

小程序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字符串是常用方案。

实现步骤：

1. 发送方：序列化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解析。

2. 接收方：解析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对象（无需序列化）。

实现步骤：

1. 定义全局数据
   在app.js中globalData中存储JSON对象：

   // app.js
   App({
     globalData: {
       cartList: [], // 购物车数据（JSON数组）
       userInfo: null // 用户信息（JSON对象）
     }
   });

2. 发送方：修改全局数据
   在任意页面或组件中获取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 }
   ];

3. 接收方：读取全局数据
   在目标页面中直接访问globalData：

   // 页面B：读取全局数据
   const app = getApp();
   const cartList = app.globalData.cartList;
   console.log("购物车数据：", cartList);

优缺点：

• 优点：实时性强，无需序列化/反序列化，适合高频访问的共享数据（如用户状态、购物车）。
• 缺点：数据生命周期与小程序实例绑定，若小程序被销毁（如冷启动），数据会丢失；需注意数据同步问题（如多页面同时修改数据时需加锁）。

场景3：通过本地存储传递JSON数据（持久化存储）

若数据需要在小程序关闭后仍能保留（如用户登录状态、历史记录），可通过本地存储（wx.setStorage）传递JSON数据。

实现步骤：

1. 发送方：存储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);
   // }

2. 接收方：读取JSON数据
   使用wx.getStorage从本地读取数据：

   // 页面B：读取数据
   wx.getStorage({
     key: "currentOrder",
     success(res) {
       const orderInfo = res.data;
       console.log("订单信息：", orderInfo);
     },
     fail(err) {
       console.error("读取失败：", err);
     }
   });

本地存储类型对比：

注意事项：

• 存储容量限制：单个小程序默认存储上限为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: {