---

歡迎關注 『uniapp』 專欄，持續更新中
歡迎關注 『uniapp』 專欄，持續更新中

預覽效果

思路分析

downloadTxt 方法

該方法主要完成兩個任務：

• 下載 txt 文件：通過 uni.downloadFile 方法從指定的 URL 下載文件，返回的是臨時文件路徑。
• 保存文件：使用 uni.saveFile 將臨時文件保存到本地。
• 讀取文件：文件保存完成后，調用 plus.io API 讀取文件內容，并將其轉換為 JSON 格式存儲到 resultData 中。

步驟：

1. 通過 uni.downloadFile 下載文件。
2. 使用 uni.saveFile 保存文件并獲取本地路徑。
3. 使用 plus.io.resolveLocalFileSystemURL 讀取本地文件，FileReader 將其內容讀取為文本并解析成 JSON 格式。

readTxt 方法

該方法用于讀取已下載并保存的本地 txt 文件。

首先檢查 savedFilePath 是否為空，確保文件已下載。如果文件路徑有效，調用 readFile 方法讀取文件并解析其內容。

if (!this.savedFilePath) {console.warn('路徑為空,請先下載后再讀取文件');return;
}
await this.readFile(this.savedFilePath);

---

完整代碼

<template><view><button @click="downloadTxt">下載本地txt</button><button @click="readTxt">讀取本地txt</button><button @click="consoleData">輸出txt內容</button><button @click="getSavedFileInfo">輸出txt文件信息</button></view>
</template><script>export default {data() {return {resultData: {}, //得到的數據savedFilePath: uni.getStorageSync('savedFilePath') || '', //文件保存路徑,每次啟動讀取這個路徑dateUrl: "http://t.weather.sojson.com/api/weather/city/101030100", //你的json格式api};},methods: {getSavedFileInfo() {uni.getSavedFileInfo({filePath: this.savedFilePath, //僅做示例用，非真正的文件路徑success: function(res) {console.log('文件大小',res.size);console.log('創建時間的時間戳 可以根據時間戳決定是否更新本地的txt',res.createTime);}});},// 輸出 txt 內容consoleData() {console.warn('resultData:', this.resultData);console.warn('savedFilePath:', this.savedFilePath);},// 下載并保存 txt 文件async downloadTxt() {try {const res = await this.downloadFile();if (res.statusCode === 200) {const savedFilePath = await this.saveFile(res.tempFilePath);this.savedFilePath = savedFilePath;await this.readFile(savedFilePath);} else {console.error('下載返回響應代碼錯誤:', res);}} catch (err) {console.error('下載或文件操作失敗:', err);}},// 讀取本地 txt 文件async readTxt() {if (!this.savedFilePath) {console.warn('路徑為空,請先下載后再讀取文件');return;}try {await this.readFile(this.savedFilePath);} catch (err) {console.error('讀取文件失敗:', err);}},// 文件下載函數downloadFile() {return new Promise((resolve, reject) => {uni.downloadFile({url: this.dateUrl,success: (res) => {if (res.statusCode === 200) {resolve(res);} else {reject(new Error('下載失敗，狀態碼: ' + res.statusCode));}},fail: (err) => reject(err),});});},// 文件保存函數saveFile(tempFilePath) {return new Promise((resolve, reject) => {uni.saveFile({tempFilePath,success: (saveRes) => {console.log('下載并保存txt成功');const filePath = plus.io.convertLocalFileSystemURL(saveRes.savedFilePath);uni.setStorageSync('savedFilePath',filePath)resolve(filePath);},fail: (err) => reject(err),});});},// 文件讀取函數readFile(filePath) {return new Promise((resolve, reject) => {plus.io.resolveLocalFileSystemURL(filePath, (entry) => {entry.file((file) => {const fileReader = new plus.io.FileReader();fileReader.onloadend = (evt) => {try {const jsonData = JSON.parse(evt.target.result);this.resultData = jsonData;console.log('成功讀取并轉為JSON:', this.resultData);resolve();} catch (e) {reject(new Error('解析文件失敗: ' + e.message));}};fileReader.readAsText(file, 'utf-8');}, (err) => reject(err));}, (err) => reject(err));});},},};
</script><style lang="scss" scoped>
</style>

---

總結

大家喜歡的話，給個👍，點個關注！給大家分享更多計算機專業學生的求學之路！

版權聲明：

發現你走遠了@mzh原創作品，轉載必須標注原文鏈接

Copyright 2024 mzh

Crated：2024-4-1

歡迎關注 『uniapp』 專欄，持續更新中
歡迎關注 『uniapp』 專欄，持續更新中
『未完待續』

---