感觉好久没写东西了最近一段时间也是事儿比较多。

而且我感觉自从AI开发以后好像很多东西我也不用了解的那么透彻了。

直接交给AI齐活了唉！技术人的喜讯还是悲哀，

不知道大家用没用过 uni-app 开发，我之前用 uni-app 开发的 Android App 一直感觉太慢了比较卡。最近发现uni-app的升级版本 uni-app x 迭代的比较快，所以搞一下。

正好最近有个App的小项目。直接用uni-app x实现的，感觉和原生相比，虽然还有一定的差距，但是已经不太明显了。

一、功能需求与技术亮点

. 主要需求

实现APP端本地JSON文件的两大主要能力：

• JSON导出读取本地Storage缓存数据。自动生成规范命名的JSON文件，保存至APP沙盒自定义目录。
• JSON导入选择本地JSON文件。校验文件格式、解析数据，支持「追加导入/覆盖导入」两种模式，兼容单对象、数组格式JSON。

. 技术亮点

• 纯前端实现，零后端接口依赖离线可用。
• 基于uni-app X原生文件程序API，适配Android、IOS双端。
• 的数据格式化、异常捕获、格式校验机制，避免脏数据。
• 支持导入模式选择，兼顾数据保留与全覆盖场景。
• 自动记录导入/导出时间、数据条数，可视化数据状态。

二、实现原理

痛点提示：

• 性能瓶颈： 在旧版 uni-app 中，对大规模缓存进行逐条读写会导致 UI 卡顿；使用 uni.getFileSystemManager 的批量操作可以显著体验更好。
• 易错环节： JSON 格式校验不严谨时容易导致解析失败；说起来，代码中加入统一校验逻辑可以避免此类错误。
• 方法管理： 不同网站沙盒方法差异需要统一处理，否则文件读写会报错。

uni-app X 操作本地文件主要依赖 uni.getFileSystemManager 文件管理器API，配合本地Storage实现数据流转：

1. 导出流程： 读取Storage缓存数据 → 格式化JSON字符串 → 创建本地目录 → 写入JSON文件 → 记录导出时间。说起来，
2. 导入流程： 选择本地文件 → 校验JSON格式 → 读取文件内容 → 解析标准化数据 → 按模式导入Storage → 记录导入时间。

三、代码实现

// 本地缓存key常量
const importMetaKey = 'setting__TYPE_lastImportTime';const exportMetaKey = 'setting__TYPE_lastExportTime';// 响应式状态
const dataCount = ref;const lastExportTime = ref;const lastImportTime = ref;// 文件程序实例
const fs = uni.getFileSystemManager;/**
* 获取业务相关缓存键
*/
function getContactStorageKeys: string {
const keys = uni.getStorageInfoSync.keys ||;return keys.filter);}
/**
* 格式化当前时间
*/
function formatNow: string {
const now = new Date;const pad = => v.toString.padStart;return `${now.getFullYear}-${pad + 1)}-${pad)} ${pad)}:${pad)}`;}
/**
* 构造唯一下载名
*/
function buildExportFileName: string {
const now = new Date;const pad = => v.toString.padStart;return `data_backup_${now.getFullYear}${pad +1)}${pad)}_${pad)}${pad)}${pad)}.json`;}
/**
* 确保目录存在
*/
function ensureExportDir: void {
try { fs.mkdirSync;} catch { /* 已存在 */ }
}
/**
* 校验是否为 JSON 文件
*/
function isJsonFileName: boolean {
return fileName.toLowerCase.endsWith;}
/**
* 标准化单条联系人对象
*/
type Contact = { id?: string,user?: string,password?: string,username?: string,or，: string };function normalizeImportContact: Contact | null {
if return null;不过，return {
再看id，generateUniqueId,user: String。password: String,username: String,or: String
};
}
/**
* 将 JSON 字符串解析为联系人数组
*/
function parseImportContacts: Contact {
let parsed:any=null;try{ parsed= JSON.parse;} catch{ console.warn;}
if return，const result:Array=;if ) {
for{
const c=normalizeImportContact;if result.push;}
} else {
const c=normalizeImportContact;话说回来，if result.push;
}
return result;
}
/**
* 获取所有存储联系人列表
*/
function getStoredContactList: Contact {
const keys=getContactStorageKeys;const res:Array=;for{
try{
const raw=uni.getStorageSync;if{
res.push);怎么说呢，}
}catch{ console.warn;}
}
return res;}
/**
* 保存联系人到 Storage
*/
export function saveImportedContacts: number{
let count=0;if{
getContactStorageKeys.forEach);}
for{
contact.id ||= generateUniqueId;uni.setStorageSync);count++，}
return count;}
/**
* 导入入口函数
*/
export function onImport: void{
uni.chooseFile({
type这方面。'all',count:1,success{
const file=res.tempFiles;if){ uni.showToast;return，不过，}
fs.readFile({
filePath:file.path,encoding:'utf-8'。success{ confirmImportContacts,file.name);},fail{ uni.showToast;},})，},fail{ uni.showToast;},})，}
export function onExport: void{
const contacts=getStoredContactList;if{ uni.showToast;return，}
const jsonText=JSON.stringify;const dir=uni.env.SANDBOX_PATH+'/data-backup';ensureExportDir;const fileName=buildExportFileName;fs.writeFile({
filePath:`${dir}/${fileName}`,data:jsonText。encoding:'utf-8',success{
lastExportTime.value=formatNow;uni.setStorageSync;uni.showModal({
title这方面，'已成功导出',content:`共 ${contacts.length} 条
再看方法。${dir}/${fileName}`,showCancel:false,});按理说，},fail{ uni.showToast;},})，}
/**
* 二次确认并执行最终保存
*/
export function confirmImportContacts: void{
if{ uni.showToast;return，}
// 模式切换弹窗
uni.showActionSheet({
itemList:,success{
const replace=sheetRes.tapIndex===1?true:false，// 最终确认弹窗
uni.showModal({
说到title，"确认"。content:`${fileName}
共 ${list.length} 条
将以${replace?'覆盖':'追加'}方式同步`,confirmText:"开始"。success{
if{
let savedCount=saveImportedContacts;lastImportTime.value=formatNow;uni.setStorageSync;uiNotify，}
},});},fail{},})，}

This snippet consolidates key logic for local JSON import/export in a Uni‑App X project. By leveraging native filesystem API and carefully handling storage operations you can avoid common pitfalls such as UI jank from synchronous storage access or accidental overwrite of critical data.

If you encounter platform‑specific quirks or need additional features,feel free to drop me a message.