微信小程序怎么把对象json

微信小程序中如何处理对象与JSON的转换：完整指南

在微信小程序开发中，对象与JSON的转换是高频操作——无论是从服务器获取数据、存储到本地缓存，还是在组件间传递复杂参数，都离不开对对象的序列化（转为JSON字符串）和反序列化（将JSON字符串转回对象），本文将详细讲解微信小程序中对象与JSON转换的核心方法、注意事项及实战场景,帮你彻底这一关键技能。

核心方法：小程序内置的JSON工具函数

微信小程序没有直接复用浏览器端的JSON.stringify()和JSON.parse()，而是通过wx.getSystemInfoSync()获取系统信息后，使用全局对象JSON的stringify和parse方法，但更推荐直接使用小程序提供的原生API,兼容性更好。

将对象转为JSON字符串：JSON.stringify()

这是将JavaScript对象（Object）转换为JSON字符串的核心方法，适用于数据存储（如缓存）、网络请求（如POST请求体）等场景。

语法：

JSON.stringify(object, replacer, space)

• object：必填,要转换的对象。
• replacer：可选，函数或数组，用于控制哪些属性被转换（函数可对每个属性值处理，数组指定保留的属性名）。
• space：可选，格式化输出（数字为缩空格数，字符串为缩进字符串）。

示例：

// 定义一个用户对象
const user = {
  id: 1001,
  name: "张三",
  age: 25,
  hobbies: ["篮球", "编程"],
  isVIP: true
};
// 基本转换：对象转JSON字符串
const jsonString = JSON.stringify(user);
console.log(jsonString); 
// 输出：{"id":1001,"name":"张三","age":25,"hobbies":["篮球","编程"],"isVIP":true}
// 带replacer（只保留name和age）
const filteredJson = JSON.stringify(user, ["name", "age"]);
console.log(filteredJson); 
// 输出：{"name":"张三","age":25}
// 带space（格式化输出，方便调试）
const formattedJson = JSON.stringify(user, null, 2);
console.log(formattedJson);
/* 输出：
{
  "id": 1001,
  "name": "张三",
  "age": 25,
  "hobbies": [
    "篮球",
    "编程"
  ],
  "isVIP": true
}
*/

将JSON字符串转回对象：JSON.parse()

从服务器获取的数据、本地缓存读取的字符串，都需要通过JSON.parse()还原为JavaScript对象,才能访问其属性和方法。

语法：

JSON.parse(text, reviver)

• text：必填，要解析的JSON字符串（必须符合JSON格式，否则报错）。
• reviver：可选，函数，用于转换解析后的值（如日期字符串转Date对象）。

示例：

// 定义JSON字符串（模拟从服务器获取的数据）
const jsonString = '{"id":1001,"name":"李四","loginTime":"2023-10-01T12:00:00Z"}';
// 基本转换：JSON字符串转对象
const userObj = JSON.parse(jsonString);
console.log(userObj); 
// 输出：{id: 1001, name: "李四", loginTime: "2023-10-01T12:00:00Z"}
console.log(userObj.name); // 输出：李四
// 带reviver（将日期字符串转为Date对象）
const userWithDate = JSON.parse(jsonString, (key, value) => {
  if (key === "loginTime") {
    return new Date(value); // 将日期字符串转为Date对象
  }
  return value;
});
console.log(userWithDate.loginTime); 
// 输出：Mon Oct 01 2023 20:00:00 GMT+0800 (中国标准时间)

实战场景：小程序中的对象与JSON转换

数据缓存：wx.setStorageSync与wx.getStorageSync

小程序的本地缓存只能存储字符串类型，因此对象必须先转为JSON字符串才能存储,读取后再解析为对象。

示例代码：

// 1. 定义要缓存的对象
const cartData = {
  items: [
    { id: 1, name: "商品A", price: 29.9, count: 2 },
    { id: 2, name: "商品B", price: 19.9, count: 1 }
  ],
  totalPrice: 79.7
};
// 2. 存储到缓存（对象转JSON字符串）
wx.setStorageSync('cart', JSON.stringify(cartData));
// 3. 从缓存读取（JSON字符串转对象）
const cachedCartStr = wx.getStorageSync('cart');
const cachedCart = JSON.parse(cachedCartStr);
// 4. 使用缓存数据
console.log(cachedCart.items[0].name); // 输出：商品A
console.log(cachedCart.totalPrice);   // 输出：79.7

网络请求：服务器数据的JSON解析

小程序网络请求（wx.request）默认将响应数据解析为JSON对象，但若服务器返回的是纯JSON字符串,仍需手动解析。

示例代码：

wx.request({
  url: 'https://api.example.com/user',
  method: 'GET',
  success: (res) => {
    // 假设服务器返回纯JSON字符串：'{"id":1002,"name":"王五","score":95}'
    if (typeof res.data === 'string') {
      const userData = JSON.parse(res.data);
      console.log(userData.name); // 输出：王五
    } else {
      // 若服务器已返回对象，直接使用
      console.log(res.data.name);
    }
  },
  fail: (err) => {
    console.error('请求失败：', err);
  }
});

页面间传参：通过URL或全局变量传递复杂对象

页面跳转时，URL的query参数只能传递字符串，因此复杂对象需先转为JSON字符串,目标页面再解析。

示例：从pageA跳转到pageB并传递对象

// pageA.js - 跳转前
const complexData = {
  id: 2001,
  details: { address: "北京市朝阳区", phone: "13800138000" },
  tags: ["VIP", "新用户"]
};
// 转为JSON字符串并通过URL传递
const queryString = encodeURIComponent(JSON.stringify(complexData));
wx.navigateTo({
  url: `/pages/pageB/pageB?data=${queryString}`
});

// pageB.js - 跳转后接收
onLoad(options) {
  // 解析URL参数中的JSON字符串
  if (options.data) {
    const receivedData = JSON.parse(decodeURIComponent(options.data));
    console.log(receivedData.details.address); // 输出：北京市朝阳区
  }
}

常见问题与解决方案

转换后出现undefined或属性丢失

原因：对象中包含undefined、函数或循环引用，这些会被JSON.stringify()自动忽略。

示例：

const obj = {
  name: "测试",
  temp: undefined,
  fn: function() { console.log("hello"); }
};
const jsonStr = JSON.stringify(obj);
console.log(jsonStr); // 输出：{"name":"测试"}（temp和fn被忽略）

解决方案：

• 过滤掉不需要的属性：使用replacer函数排除undefined和函数。
• 循环引用：先转为JSON字符串会报错（"Converting circular structure to JSON"），需使用第三方库（如flatted）或手动处理。

解析时报错：Unexpected end of JSON input

原因：待解析的字符串不是有效的JSON格式（如缺少引号、逗号，或有多余字符）。

示例：

const invalidStr = "{ name: '张三', age: 30 }"; // 属性名必须用双引号
JSON.parse(invalidStr); // 报错：Unexpected token n in JSON at position 2

解决方案：

• 检查字符串格式：确保属性名、字符串值用双引号包裹,无多余逗号。
• 提前验证：用try-catch捕获解析错误,提示用户或重试。

const str = '{"name":"张三","age":30}';
try {
  const obj = JSON.parse(str);
  console.log(obj);
} catch (error) {
  console.error('JSON解析失败：', error);
  wx.showToast({ title: '数据格式错误', icon: 'none' });
}

日期、正则等特殊类型转换异常

**原因