As a result of the company’s project requirements, I plan to store the background service API locally in the way of file reading and writing (the project will still use Vue). How to introduce cordova and build cordova will be omitted here.

How to use

import { cordovaReadFile } from '@/utils/cordovaplugins'
Cordova can be accessed only after deviceready is loaded
document.addEventListener('deviceready'.() = > {
  cordovaReadFile()
}, false)
Copy the code

The read and write tool JS encapsulated by Cordovaplugins.js is basically the operation of reading and writing files. If the file is not accessed, it is created and written, and if it is accessed, it is read directly.

See the website that configuration < preference name = “AndroidPersistentFileLocation” value = “Internal” / > setup the persistence of files in the android/data/data / < packageId > directory.

/* eslint-disable */ // config file name const SETTING_FILE_NAME = "setting.json" const SETTING_FILE_CONTENT = json.stringify ({API: Process. The env. VUE_APP_BASE_API})/write file * * * * @ 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 ()); }; / / write file fileWriter. Write (content)})} / * * * * @ @ desc read file path/data/data/appId/file/file/config * @ author Bob * @ the 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); } read. readAsText(file)})} @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 create config file *@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 + "failed to create ")})} @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 + "error ")})} 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 folder created failed ")})}, function () {console.log(" file space read failed! ")}, function () {console.log(" file space read failed! )})}Copy the code

Run a screenshot

  • File reading succeeded

  • File writing succeeded