目前採用得是Uni-app框架,語法是vue語法,實現IO文件夾讀取採用得是H5+裏面得方法。
在項目中需求把數據存儲在本地,這樣可以減少網絡請求得次數。優化了用戶交互。
看了H5+得文檔後,首先我們得確定把文件存儲在那個目錄下。
文檔有四個目錄,我選擇得是用PUBLIC_DOCUMENTS目錄,把文件存放在這個目錄下。
首先通過:
plus.io.requestFileSystem(plus.io.PUBLIC_DOCUMENTS, function(success) {}
方法進入了documents目錄下,他給了我一個回調success,我需要在他得根目錄下建立一個txt文檔用於存放我得json數據
success.root.getFile('StorageQipu.txt', {create: true}, function(entry) {
},function(e){
console.log('創建出錯')
}
我通過getFile()方法在根目錄下查找並創建(其實就是找不到該文件就創建一個新的)了一個 StorageQipu.txt得文件,第三個function是成功得回調,第四個function是失敗得回調
創建成功後我就通過回調通過createWriter
方法來創建寫入對象。
entry.createWriter(
function(suc) {
},
function(err){
console.log("寫入失敗")
}
)
由於業務關係我採用 var a = {a:123,b:456} 對象得方法來存放我得數據
**
因爲txt文件夾裏存放得都是字符串形式得數據,所以我需要把對象 a轉換成字符串,js有已經固定得方法來把對象轉換成字符串,我通過var jsonArray =JSON.stringify(a)
把對象轉換成字符串。
**
接下來就是存入我們的數據。
因爲我們的寫入對象已經創建好了,所以可以用write(str)
方法來寫入我們的數據。具體代碼
if (suc.length == 0) { //如果沒有存放過長度應爲0直接添加
suc.write(JsonArray)
} else { //存放過就從最後開始添加
suc.seek(suc.length)
suc.write('^' + JsonArray)
}
suc有length屬性,可以查看文件內容的長度 ,seek()方法選擇需要寫入的地方(斷點\位置)這段代碼的意思就是 如果我是第一次進行寫入內容,那麼就直接寫入,如果不是那麼我門就從內容的最後進行寫入,有點數組中push的意思
我把寫入的文件夾的代碼封裝成一個函數進行全局調用
function StorageQipu(JsonArray) {
var JsonArray = JSON.stringify(JsonArray); //把jsons轉換成字符串
plus.io.requestFileSystem(plus.io.PUBLIC_DOCUMENTS, function(success) {
success.root.getFile('StorageQipu.txt', {
create: true
}, function(entry) {
//console.log(plus.io.convertLocalFileSystemURL(entry.toURL()));
entry.createWriter(function(suc) {
if (suc.length == 0) { //如果沒有存放過長度應爲0直接添加
suc.write(JsonArray)
} else { //存放過就從最後開始添加
suc.seek(suc.length)
suc.write('^' + JsonArray)
}
return 'ok'
}, function(eee) {
return '寫入失敗,' + ee.message
})
}, function(ee) {
return '創建失敗,'+ ee.message
})
}, function(e) {
return e.message + '獲取目錄'
});
}
封裝好後 export { StorageQipu } 出去,然後在main.js中進行全局註冊 ,先引入import {StorageQipu} from './js/CommonFun.js'
,再Vue.prototype.$StorageQipu = StorageQipu;
進行全局註冊,把該方法掛載在Vue原型上,
然後就可以在任意一個頁面通過 this.$StorageQipu(str)
進行調用了
接下來寫讀取文件的內容,需求是我在棋譜頁面開始之前需要加載文件中的內容。於是我在onLoad()( PS:uni-app中的onLoad等於Vue中的careated) 中寫讀取的方法
首先通過 *plus.io.resolveLocalFileSystemURL()
方法進入需要讀取的地址,這個方法是可以通過URL地址進行查找,具體代碼 _documents
就是代表的是documents目錄
plus.io.resolveLocalFileSystemURL('_documents/StorageQipu.txt', function(entry) {},function(err){})
//找到文件後,成功返回一個文件管理對象entry
其次創建讀取對象let reader = new plus.io.FileReader();
再通過readAsText
方法文件操作對象 reader.readAsText(entry);
接下來你就可以讀取你的文件了。
通過reader.onload
進行讀取, 具體代碼如下
onLoad() {
let item;
let _this = this;
plus.io.resolveLocalFileSystemURL('_documents/StorageQipu.txt', function(entry) {
let reader = new plus.io.FileReader();
reader.readAsText(entry);
reader.onload = function(e) {
console.log(e.target.result)
if (e.target.result.length == 0) {
_this.returnLen = false
} else {
_this.returnLen = true
item = 0
for (var i = 0; i <= e.target.result.length; i++) {
if (e.target.result[i] == '^') {
var a = e.target.result.slice(item, i) //把字符串轉爲對象
_this.content.push(JSON.parse(a));
item = i + 1;
console.log(_this.content)
}
if (i == e.target.result.length) {
var a = e.target.result.slice(item, i)
_this.content.push(JSON.parse(a));
console.log(_this.content)
}
}
}
}
}, function(ee) {
console.log(ee.message)
})
}
讀取之後可以通過e.target.result
獲取內容,也可以通過length屬性查看他的長度,接下來就是解析json字符串了,由於之前我們存入的不是一個正常的json數據格式,所以需要對字符串進行處理後,通過JSON.parse方法來把字符串轉換成對象。