小程序怎么修改本地json文件

小程序开发指南：如何修改本地JSON文件？

在小程序开发中，JSON文件扮演着至关重要的角色，它们常用于配置页面路径、窗口样式、tab栏设置以及存储一些简单的本地数据，与Web开发中可以直接读写服务器或本地文件不同，小程序的文件系统有其独特的安全性和沙盒机制，直接“修改”本地JSON文件（通常指项目包内的JSON配置文件）在运行时是不被允许的，但我们可以通过一些变通的方式来实现类似的效果，特别是针对存储在本地（如开发者工具的编译缓存目录或用户设备特定目录）的JSON数据文件。

本文将重点探讨如何在小程序中读取、修改并保存本地数据JSON文件（通常指wx.env.USER_DATA_PATH路径下的文件），因为项目包内的JSON文件（如app.json, page.json等）在运行时是只读的。

理解小程序的文件系统

小程序的文件系统主要分为两部分：

小程序包内文件：包括代码文件（.js, .json, .wxml, .wxss）、资源文件（图片、音频等），这些文件随小程序一起打包，在运行时位于只读的文件系统中，你无法在运行时修改这些文件，比如app.json的配置。
本地用户文件：存储在wx.env.USER_DATA_PATH（用户数据目录）中的文件，这是小程序可以读写操作的目录，适合存储用户数据、缓存等，我们通常说的“修改本地JSON文件”主要是指操作这里的文件。

修改本地JSON文件的步骤

假设我们有一个名为data.json的文件存储在用户数据目录中,内容如下：

{
  "name": "张三",
  "age": 25,
  "city": "北京"
}

我们的目标是修改age为26,并保存。

步骤1：确保文件存在或创建文件

如果文件不存在,你需要先创建它并写入初始JSON数据。

const fs = wx.getFileSystemManager();
const filePath = `${wx.env.USER_DATA_PATH}/data.json`;
// 示例初始数据
const initialData = {
  name: "张三",
  age: 25,
  city: "北京"
};
// 写入文件（如果不存在）
fs.writeFile({
  filePath: filePath,
  data: JSON.stringify(initialData),
  encoding: 'utf8',
  success(res) {
    console.log('文件创建/初始化成功', res);
  },
  fail(err) {
    console.error('文件创建/初始化失败', err);
  }
});

步骤2：读取JSON文件内容

使用fs.readFile读取文件内容，注意，读取到的是字符串，需要用JSON.parse()解析成对象。

fs.readFile({
  filePath: filePath,
  encoding: 'utf8',
  success(res) {
    console.log('文件读取成功', res.data);
    let jsonData;
    try {
      jsonData = JSON.parse(res.data);
      console.log('解析后的JSON对象', jsonData);
      // 修改数据
      jsonData.age = 26;
      // 调用保存函数
      saveJsonFile(jsonData);
    } catch (e) {
      console.error('JSON解析失败', e);
    }
  },
  fail(err) {
    console.error('文件读取失败', err);
  }
});
function saveJsonFile(data) {
  // 将对象转换回JSON字符串
  const dataString = JSON.stringify(data, null, 2); // null, 2 表示格式化输出，可选
  fs.writeFile({
    filePath: filePath,
    data: dataString,
    encoding: 'utf8',
    success(res) {
      console.log('文件写入成功', res);
      wx.showToast({
        title: '数据修改成功',
        icon: 'success'
      });
    },
    fail(err) {
      console.error('文件写入失败', err);
    }
  });
}

步骤3：修改JSON数据

在成功读取并解析JSON对象后,你可以像操作普通JavaScript对象一样修改其属性。

// 假设jsonData已经解析成功
jsonData.age = 26;
// 或者添加新属性
jsonData.gender = '男';
// 或者删除属性
// delete jsonData.city;

步骤4：将修改后的数据写回文件

修改完成后，需要将JavaScript对象重新转换为JSON字符串，然后使用fs.writeFile将其写回原文件。writeFile如果文件已则会覆盖,不存在则会创建。

// 如步骤2中调用的saveJsonFile函数
function saveJsonFile(data) {
  const dataString = JSON.stringify(data); // 可以加上null, 2进行格式化
  fs.writeFile({
    filePath: filePath,
    data: dataString,
    encoding: 'utf8',
    success(res) {
      console.log('数据保存成功', res);
    },
    fail(err) {
      console.error('数据保存失败', err);
    }
  });
}

完整示例代码

Page({
  data: {
    fileInfo: {}
  },
  onLoad: function() {
    this.initJsonFile();
  },
  // 初始化或创建JSON文件
  initJsonFile: function() {
    const fs = wx.getFileSystemManager();
    const filePath = `${wx.env.USER_DATA_PATH}/data.json`;
    const initialData = {
      name: "张三",
      age: 25,
      city: "北京"
    };
    fs.writeFile({
      filePath: filePath,
      data: JSON.stringify(initialData, null, 2),
      encoding: 'utf8',
      success: (res) => {
        console.log('文件初始化成功', res);
        this.readAndModifyJson();
      },
      fail: (err) => {
        console.error('文件初始化失败', err);
        // 如果文件已存在（比如真机缓存），尝试读取
        this.readAndModifyJson();
      }
    });
  },
  // 读取并修改JSON文件
  readAndModifyJson: function() {
    const fs = wx.getFileSystemManager();
    const filePath = `${wx.env.USER_DATA_PATH}/data.json`;
    fs.readFile({
      filePath: filePath,
      encoding: 'utf8',
      success: (res) => {
        console.log('文件读取成功', res.data);
        try {
          let jsonData = JSON.parse(res.data);
          // 修改数据
          jsonData.age += 1;
          jsonData.lastModified = new Date().toLocaleString();
          // 保存修改
          this.saveJsonFile(jsonData);
          // 更新页面数据（可选）
          this.setData({
            fileInfo: jsonData
          });
        } catch (e) {
          console.error('JSON解析失败', e);
        }
      },
      fail: (err) => {
        console.error('文件读取失败', err);
      }
    });
  },
  // 保存JSON文件
  saveJsonFile: function(data) {
    const fs = wx.getFileSystemManager();
    const filePath = `${wx.env.USER_DATA_PATH}/data.json`;
    fs.writeFile({
      filePath: filePath,
      data: JSON.stringify(data, null, 2),
      encoding: 'utf8',
      success: (res) => {
        console.log('数据保存成功', res);
        wx.showToast({
          title: '数据已更新',
          icon: 'success'
        });
      },
      fail: (err) => {
        console.error('数据保存失败', err);
        wx.showToast({
          title: '数据更新失败',
          icon: 'none'
        });
      }
    });
  },
  // 模拟一个修改操作（例如通过按钮触发）
  onModifyData: function() {
    this.readAndModifyJson();
  }
});

注意事项

文件路径：始终使用wx.env.USER_DATA_PATH来操作用户数据文件,不要尝试修改小程序包内的文件。
异步操作：fs.readFile和fs.writeFile都是异步API，注意处理好回调或使用Promise/async-await。
错误处理：文件操作可能会因为权限不足、磁盘满、路径错误等原因失败，务必添加fail回调进行错误处理。
数据格式：写入文件前确保数据是有效的JSON字符串，读取后用JSON.parse解析,注意处理JSON解析可能抛出的异常。
性能考虑：频繁读写大文件可能会影响性能,合理规划数据存储和读取策略。
清理缓存：开发者工具中的编译缓存有时会导致问题，如果遇到异常，可以尝试清理缓存重新编译,真机上则无此问题。
用户隐私与权限：虽然操作的是本地文件，但也应遵守相关法律法规,不滥用用户数据。

在小程序中“修改本地JSON文件”，实质上是读取用户数据目录下的JSON文件，解析为JavaScript对象进行修改，再将修改后的对象序列化为JSON字符串并写回原文件的过程，由于小程序的安全沙盒机制，我们无法直接修改项目包内的JSON配置文件，但对于本地数据存储，wx.getFileSystemManager()提供了完善的