微信小程序如何保存文件到本地，並能打開看到？

說到保存文件，在微信小程序裏，本來是一件“令人愉快”的事情：畢竟剛看到API時會感覺wx啥都配好了，只需要調用即可：

wx.saveFile({
	tempFilePath: '臨時路徑',
	success:(res)=>{
		//...
	}
})

tempFilePath屬性在文檔中明確定義了：“需要保存的文件的臨時路徑（本地路徑）”，也就透漏了一個信號 —— 需要先下載！
這倒沒什麼，照着做就是了：

wx.downloadFile({
	url:'路徑',
	success:(res)=>{
		//...
	}
})

這裏的res中，有一個我們需要的東西：res.tempFilePath 臨時路徑。

現在看上去已經“完美”了，不過當我們真正使用時會發現：它打印了個什麼玩意…
其實，在wx.saveFile - API中，文檔中有一個沒有明確說明的路徑參數：filePath ，它的值可以改變success回調中res.sendFilePath臨時路徑最終保存路徑的值：

wx.downloadFile({
	url:'路徑',
	success:(res)=>{
		var saveFile=wx.env.USER_DATA_PATH+'/xxx.xx',
		wx.saveFile({
			tempFilePath: res.tempFilePath || res.filePath,
			filePath: savePath,
			success:(res)=>{
				//...
			}
		})
	}
})

代碼中res.filePath和res.tempFilePath路徑一致，這樣做是爲了防止IOS中報錯：No tempFilePath

大功告成！
然而我們打開一看，笑容逐漸凝固在臉上…沒有用啊感覺！找不到啊！

筆者去查了資料，發現並不是沒有下載，而是：
「 wx.env.USER_DATA_PATH 在真機上代表：wxfile://usr，也就是真實路徑：手機\內存\tencent\MicroMsg\wxanewfiles…\xxx.xx。
其中可怕的是：“…”是一個很長的、由英文數字組成的名字，至於其命名規則，emmmmmmm尚不清楚 」

在萬急之下，有了下面同事和我的對話：

“你下載文件時幹嘛的”
“看的啊”
“廢話，不過你要是隻是自己看的話有鏈接 何必佔內存把它下過來”
“肯定啊，但是我總是有一些文件要給別人看吧”
“那你既然用了微信小程序，幹嘛不整個頁面，直接分享過去…”
“橋的麻袋，然後 等別人一打開我分享的頁面，就讓這個文件自動打開？”

對啊。既然微信上下載這麼麻煩，如果只是【只讀】的文件的話，爲什麼非要下下來呢？
彷彿發現了“新大陸”一般，我急忙查找了文檔，發現了這個“打開文件”的API：

wx.openDocument({
	filePath: '本地文件路徑',
	success:(res)=>{
		//...
	}
})

我們可以把整個邏輯放到“被分享頁面”的onShow中：

onShow: function () {
  var that = this
  wx.showLoading({
    title: '加載中...',
  })
  wx.downloadFile({
    url: that.data.url,
    filePath: wx.env.USER_DATA_PATH + '/123.jpg',
    success: function (res) {
    	var filePath = res.filePath
    	wx.openDocument({
      		filePath: filePath,
      		success: function (res) {
      			wx.hideLoading();
      		}
    	})
    }
  })
},

---

微信小程序的坑目前還是有些多啊。。。
最近逛社區對於本文的問題還看到有人提出了另外一種“取巧”的方法：（對於PDF等格式文檔）

1. 使用wx.downloadFile() 下載docx文件後，使用fileSystemManager.saveFile API保存docx文件爲圖片格式
2. 保存成功後，再使用wx.saveImageToPhotosAlbum保存到相冊，最終路徑爲：手機\內存\tencent\MicroMsg\WeiXin\xxxx.jpg

其中，xxxx是隨機生成的時間戳。

但遺憾的是：這種方式對iOS似乎也不友好！

---

相關鏈接：

• https://developers.weixin.qq.com/community/develop/doc/000aa09ca30a9031462990b3b51000?jumpto=comment&commentid=00046880dfcdb09343294eabf514