1. 数据分类存储
- 表单类数据 (定位坐标、偏差理由文字、打卡时间等结构化字段):用
uni.setStorageSync存成JSON对象,体积小,直接存没问题 - 图片类数据 :拍照后不直接转Base64存Storage(Storage一般有单条几MB的容量限制,图片转Base64体积还会膨胀约33%,容易超限)。更合理的做法是用
uni.saveFile把临时拍摄的图片保存到本地文件系统的持久化路径 ,Storage里只存这个文件的本地路径,减轻Storage的存储压力
2. 维护一个"待提交队列"
javascript
// 队列结构示例
{
queue: [
{
id: 'temp_001', // 本地临时ID
type: 'inspection_record',
data: { location: {...}, reason: '定位偏差原因', photoPath: 'xxx' },
status: 'pending', // pending | submitting | failed
createTime: 1234567890
}
]
}
每次用户在无网环境下提交一条记录,不直接发请求,而是追加进这个队列,存进Storage。
3. 监听网络恢复,触发队列处理
javascript
uni.onNetworkStatusChange((res) => {
if (res.isConnected) {
processOfflineQueue(); // 网络恢复,处理待提交队列
}
});
async function processOfflineQueue() {
const queue = uni.getStorageSync('offline_queue') || [];
for (const item of queue) {
if (item.status === 'pending') {
try {
item.status = 'submitting';
await submitToServer(item.data); // 真正发请求
// 提交成功,从队列移除
removeFromQueue(item.id);
} catch (err) {
item.status = 'failed'; // 失败保留,下次再试
}
}
}
uni.setStorageSync('offline_queue', queue);
}
4. 用户侧的感知设计(对应你提到的"提醒用户补充完整信息")
- 网络恢复后,弹一个轻提示:"检测到N条离线记录,正在为您同步",同步完成再提示"同步成功"
- 如果某条记录一直提交失败(比如数据本身有问题),做一个**"待同步"角标/列表**,让用户能主动查看、手动处理,而不是无声无息地一直失败
总结
"网络不好的情况下,我们会把数据先存到本地------结构化的表单数据用uniapp的本地存储API直接存,拍摄的照片存到本地文件系统,避免Storage空间不够。同时维护一个待提交队列,每条离线数据先进队列、标记为待提交状态。通过uniapp的网络状态监听API,检测到网络恢复后,自动遍历队列逐条重新提交,成功了从队列移除,失败了保留、下次再重试。用户侧会有提示,比如网络恢复时弹窗告知有几条数据正在同步,避免用户不知情。另外像定位偏差这种字段,我们也会让用户手动补充偏差原因,保证数据的可追溯性。"