技術標籤：javascript小程式

最近專案碰到一種需求——小程式提供下載儲存pdf途徑。平時小程式專案用到下載檔案的api（wx.downloadFile）僅僅是用來下載圖片，並使用小程式儲存圖片到本地的api完成儲存操作。好在小程式提供了儲存檔案到本地的pai（wx.saveFile），一番操作之後，我查看了手機上的檔案，納尼！下載的檔案儲存在哪？

通過不斷的查詢資料（微信社群），我終於找到了檔案儲存的路徑：

真實路徑：手機\內部儲存\tencent\MicroMsg\wxanewfiles\xxxx\abc.txt
xxxx：是一個很長的由英文數字組成的資料夾，這個資料夾的命名規則，尚不清楚

好傢伙！我都找不到檔案的儲存路徑，還指望使用者找到？更何況ios不能查詢檔案，所以只能使用其他方法解決問題：微信提供了開啟文件的api（wx.openopenDocument）,通過設定showMenu屬性為true實現可以分享操作，可以讓使用者快速找到檔案。具體實現如下：

定義下載好的檔案儲存到的系統路徑：

wx.env.USER_DATA_PATH是專門獲取檔案系統中的使用者目錄路徑的常量值。

const CACHE_PATH = wx.env.USER_DATA_PATH + '/資料夾'

因為不知道本地是否存在該資料夾，所以需要判斷本地是否存在該目錄：

		accessSync(
 
) {
			return new Promise((resolve, reject) => {
				const file = wx.getFileSystemManager()
				try {
					file.accessSync(CACHE_PATH)
					resolve()
				} catch (error) {
					resolve(error)
				}
			});
		},

如果本地不存在該資料夾，建立：

		mkdirSync() {
			return new Promise((resolve, reject) => {
				const file
 
 = wx.getFileSystemManager()
				try {
					file.mkdirSync(CACHE_PATH, true)
					resolve()
				} catch (error) {
					resolve(error)
				}
			});
		},

解決了儲存的途徑，可以開始下載儲存：

wx.showLoading({
				title: '正在下載檔案',
			})
			wx.downloadFile({
				url: 'https://xxxx/aa880655000886d62cf424424db25229.pdf', //僅為示例，並非真實的資源
				success(res) {
					// 獲取所下載的檔案型別
					const file_type = res.header['Content-Type'].split('/')[1]
					const file_path = res.tempFilePath

					// ios和安卓系統儲存和開啟文件有不同，根據不同系統做不同處理
					if (app.globalData.systemInfo.platform === 'ios') {
						// ios系統沒有提供檔案搜尋，所以直接開啟文件分享（間接下載）
						wx.openDocument({
							filePath: file_path,
							fileType: file_type,
							showMenu: true,
							success: function (res) {
								console.log('開啟文件成功')
							}
						})
						return
					}

					wx.saveFile({
						tempFilePath: file_path,
						filePath: CACHE_PATH + `/${new Date().getTime()}.${file_type}`,
						success(res) {
							wx.hideLoading()
							wx.showToast({
								title: '儲存成功',
								icon: 'none'
							})

							// 開啟pdf下載,可轉發
							wx.openDocument({
								filePath: res.savedFilePath,
								fileType: file_type,
								showMenu: true,
								success: function (res) {
									console.log('開啟文件成功')
								}
							})
						},
						fail(error) {
							console.log('儲存失敗', error)
							wx.hideLoading()
							wx.showToast({
								title: '儲存失敗',
								icon: 'none'
							})
						}
					})
				},
				fail(error) {
					console.log('下載失敗', error)
					wx.hideLoading()
					wx.showToast({
						title: '下載失敗',
						icon: 'none'
					})

				}
			})

本來開啟文件的時候，我是沒有區分ios和安卓的，但是測試發現ios打不開下載儲存到本地的文件，多次測試才發現，下載完之後開啟檔案，在ios是行得通的。

在多次測試過程中，我還發現安卓端下載完之後不經過儲存，直接開啟文件分享給好友，分享出來的檔案是這樣的：

好傢伙，看來小程式這條路還有得走！