更新记录
1.0.0(2024-11-28) 下载此版本
1、实现自定义文件写入数据并保存到手机本地目录中
平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
app-vue | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
heyuan-writeFile
功能
- 保存/写入文件到本地目录中
我们在做原生App开发的时候,文件操作都是很方便的,但是在uni-app里面可能就头大了。
如果你像我一样项目里想要实现一个保存json文件到本地的功能,相信你也是到处找遍了资料,插件市场里相关资料也少的可怜, 可能最后也没整出个实现方法来。所以也是希望自己的整理能帮助到更多的开发者,大家觉得ok可以动动小手点个赞👍🏻
实现方式: 安卓端是通过native.js的方式,调用安卓原生的io操作api来写入和保存文件 iOS端是通过Html5+里的plus.io操作来实现写入和保存文件
本插件可以成功保存json和txt格式文件,如果想要保存excel等文件,需要自己额外处理下数据格式。
快速集成
- 点击右上角的 使用 HBuilder X 导入插件 按钮直接导入项目
- 点击 下载插件 ZIP 按钮下载插件包并解压到项目的 uni_modules 目录下
使用方法
- 在需要保存文件的页面,在js中定义本插件中的 writeFile方法
参数解释: data: 你需要保存的数据,这里是以String方式保存 fileName: 保存的文件名, 例如test.json、test.txt
writeFile(data, fileName) {
// #ifdef APP-PLUS
let isAndroid = plus.os.name === 'Android'
// 安卓端保存文件
// 需要通过native.js来实现文件的读写
// 同样通过native.js实现文件自定义位置保存
if (isAndroid) {
let filePath = '/storage/emulated/0/Download/' + fileName
// 只能用于安卓 导入java类
const File = plus.android.importClass('java.io.File')
const BufferedReader = plus.android.importClass('java.io.BufferedReader')
const FileReader = plus.android.importClass('java.io.FileReader')
const FileWriter = plus.android.importClass('java.io.FileWriter')
// 安卓11以下 /sdcard/自己的文件夹/文件名
// 安卓11 建议用 /storage/emulated/0/Download/文件名
// 写文件 writeFile("/sdcard/or/result.json",{"key":"value"})
const writeFile = (fileName, data) => {
try {
// 不加根目录创建文件(即用相对地址)的话directory.exists()这个判断一值都是false
const n = fileName.lastIndexOf('/')
if (n !== -1) {
const fileDirs = fileName.substring(0, n)
const directory = new File(fileDirs)
// 目录不存在的话,先创建目录
if (!directory.exists()) {
const a = directory.mkdirs()
}
}
const file = new File(fileName)
// 文件不存在的话,先创建文件
if (!file.exists()) {
file.createNewFile()
}
const fos = new FileWriter(fileName, false)
fos.write(data)
fos.close()
} catch (e) {
uni.showToast({
title: '保存失败',
icon: 'none'
})
}
}
// 写入文件
writeFile(filePath, data)
} else {
// iOS端保存文件
// 需要通过plus.io来实现文件读写
// 再通过uni.saveFile保存在应用沙盒目录中
// 最后调用uni.openDocument来打开文件,打开后自己选择保存位置,从而实现文件自定义位置保存
plus.io.requestFileSystem(
plus.io.PUBLIC_DOWNLOADS,
(fs) => {
let rootPath = fs.root.toURL()
let fileUrl = rootPath + '/' + fileName //文件目标位置
// 创建或打开文件, fs.root是根目录操作对象, 直接fs表示当前操作对象;
// create:true文件不存在则直接创建,false则不会自动创建
fs.root.getFile(
fileUrl, {
create: true
},
(fileEntry) => {
console.log('get file suc, path is', fileEntry.fullPath)
fileEntry.createWriter(
(writer) => {
// 写入文件成功完成的回调函数
writer.onwrite = (e) => {
let path = e.target.fileName
console.log('write suc, path is', path)
uni.saveFile({
tempFilePath: path,
success(res) {
console.log('saveFile suc')
uni.openDocument({
filePath: res.savedFilePath,
success() {
console.log('openDocument suc')
}
})
},
fail() {
console.log('1', error)
uni.showToast({
title: '保存失败',
icon: 'none'
})
}
})
}
writer.seek()
// 写入数据
writer.write(data)
},
(error) => {
console.log('2', error)
uni.showToast({
title: '保存失败',
icon: 'none'
})
}
)
},
(error) => {
console.log('3', error)
uni.showToast({
title: '保存失败',
icon: 'none'
})
}
)
},
(error) => {
console.log('4', error)
uni.showToast({
title: '保存失败',
icon: 'none'
})
}
)
}
// #endif
}