Cordova Android读写文件操作插件使用——cordova-plugin-file

1,314 阅读2分钟

由于公司项目需求,我这里打算的是把后台服务api以文件读写的方式存在本地(项目还是用的Vue),怎么引入cordova以及搭建cordova我这里就省略了。

怎么使用

import { cordovaReadFile } from '@/utils/cordovaplugins'
//deviceready加载完毕 才能访问cordova
document.addEventListener('deviceready', () => {
  cordovaReadFile()
}, false)

cordovaplugins.js 封装的读写工具js 大概就是读写文件操作,如果没有访问到文件 就创建并写入,访问到直接就读取。

image.png

看官网得知 配置 <preference name="AndroidPersistentFileLocation" value="Internal" />安装的持久化文件在安卓/data/data/<packageId>目录下。

/* eslint-disable */
//配置文件名
const SETTING_FILE_NAME = "setting.json"
const SETTING_FILE_CONTENT = JSON.stringify({
  api: process.env.VUE_APP_BASE_API
})
/**
 *@desc 写入文件
 *@path /data/data/appId/file/file/config
 *@author Bob
 *@date 2021/04/28 19:07:31
 */
function createWriter(fileEntry, content) {
  fileEntry.createWriter(function (fileWriter) {
      //文件写入成功
      fileWriter.onwriteend = function () {
        console.log("Successful file write...");
      };
      //文件写入失败
      fileWriter.onerror = function (e) {
        console.log("Failed file write: " + e.toString());
      };
      //写入文件
      fileWriter.write(content)
  })
}
/**
 *@desc 读取文件
 *@path /data/data/appId/file/file/config
 *@author Bob
 *@date 2021/04/28 19:09:54
 */
function readFile(fileEntry) {
  fileEntry.file(function (file) {
    const reader = new FileReader()
    reader.onloadend = function () {
      console.log("file read success:" + this.result);
    }
    reader.readAsText(file)
  })
}

/**
 *@desc 判断配置文件是否存在
 *@author Bob
 *@date 2021/04/28 19:27:26
 */
function settingFileIsExist(dirEntry, fileName) {
  return new Promise((resolve, reject) => {
    dirEntry.getFile(fileName, {create: false, exclusive: false}, function () {
      resolve(true)
    }, function () {
      resolve(false)
    })
  })
}
/**
 *@desc 创建配置文件
 *@author Bob
 *@date 2021/04/28 19:40:05
 */
function createSettingFile(dirEntry, fileName, content) {
  dirEntry.getFile(fileName, {create: true, exclusive: false}, function (fileEntry) {
    createWriter(fileEntry, content)
  }, function () {
    console.log(fileName + "创建失败")
  })
}

/**
 *@desc 读取配置文件内容
 *@author Bob
 *@date 2021/04/28 19:48:15
 */
function readSettingFile(dirEntry, fileName) {
  dirEntry.getFile(fileName, {create: false, exclusive: false}, function (fileEntry) {
    readFile(fileEntry)
  }, function () {
    console.log(fileName + "读取失败")
  })
}
export function cordovaReadFile () {
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs){
      fs.root.getDirectory('config', {create: true}, async function(dirEntry) {
        //是否存在
        const isExist = await settingFileIsExist(dirEntry, SETTING_FILE_NAME)
        if(!isExist) {
          createSettingFile(dirEntry, SETTING_FILE_NAME, SETTING_FILE_CONTENT)
        } else {
          readSettingFile(dirEntry, SETTING_FILE_NAME)
        }
        }, function () {
            console.log("config文件夹创建失败")
        })
      }, function () {
        console.log("文件空间读取失败!")
      })
}

运行截图

  • 文件读取成功

image.png

  • 文件写入成功

image.png