目錄

一、H5如何實(shí)現(xiàn)下載功能

二、微信小程序?qū)崿F(xiàn)下載資源功能方面與H5有很大的不同

三、?微信小程序?qū)崿F(xiàn)文件（doc,pdf等格式，非圖片）下載（下載->保存->預(yù)覽）功能

四、圖片預(yù)覽、保存、轉(zhuǎn)發(fā)、收藏：uni.previewImage()

五、 我當(dāng)前遇到‘關(guān)于文件預(yù)覽uni.openDocument()’API的問題，歡迎評(píng)論區(qū)討論

一、H5如何實(shí)現(xiàn)下載功能

1、是的，瀏覽器頁面實(shí)現(xiàn)資源下載是非常簡單的：只需要在資源外包裹一層<a href="#"></a>再往里里面添加鏈接就完事了！

二、微信小程序?qū)崿F(xiàn)下載資源功能方面與H5有很大的不同

1、剛開始uni-app中做下載資源功能時(shí)，單純以為和PC端一樣，放a標(biāo)簽就行。

然而，用微信開發(fā)者工具打包編譯出來時(shí)會(huì)報(bào)錯(cuò)，因?yàn)?，它把a(bǔ)標(biāo)簽打包編譯成了navigator標(biāo)簽。而該組件類似HTML中的<a>組件，但只能跳轉(zhuǎn)本地頁面。目標(biāo)頁面必須在pages.json中注冊(cè)。?

2、?放a標(biāo)簽，運(yùn)行在谷歌瀏覽器上，點(diǎn)擊來接便可以下載：

3、同樣的代碼運(yùn)行在微信開發(fā)者工具上，代碼變化且報(bào)錯(cuò)，那是因?yàn)殒溄硬⒎潜镜仨撁娑沁h(yuǎn)程服務(wù)獲取的圖片鏈接。

三、?微信小程序?qū)崿F(xiàn)文件（doc,pdf等格式，非圖片）下載（下載->保存->預(yù)覽）功能

1、下載(緩存，是個(gè)臨時(shí)文件，未保存)：uni.downloadFile()

2、保存至本地（下載后自動(dòng)保存）：uni.getFileSystemManager().saveFile()

3、預(yù)覽文件（預(yù)覽后，可以選擇手動(dòng)保存）：uni.openDocument()

1、uni.downloadFile()保存在臨時(shí)文件里

由該API下載的文件保存在一個(gè)臨時(shí)文件夾中，不手動(dòng)刪除，過段時(shí)間自己會(huì)被刪除。由微信開發(fā)者工具為例，下載的文件保存在：

......\微信開發(fā)者工具\(yùn)User Data\59e9af1112483f5e41772e86ada7c016\WeappSimulator\WeappFileSystem\o6zAJszSPKIKNM8ZZHjQ_ay2z8pg\wx0fbdc7498b76fad7\tmp

而tmp文件就是專門保存臨時(shí)文件的地方。

因此，需要其他的方法滿足長時(shí)間保存的需求。

?2、預(yù)覽臨時(shí)文件和預(yù)覽長久保存的文件

uni.downloadFile()+uni.openDocument()? ——? 預(yù)覽臨時(shí)文件下的文件（僅保存在tmp文件夾）；

uni.downloadFile()+uni.getFileSystemManager().saveFile()+uni.openDocument()

—— 預(yù)覽長久文件下的文件（僅保存在store文件夾）。

?3、代碼示例

	download(file) {
				uni.showLoading({
					title: '下載中'
				});
				//下載文件
				uni.downloadFile({ //只能是GET請(qǐng)求
					url: file, //請(qǐng)求地址(后臺(tái)返回的碼流地址)
					success: (res) => {
						//下載成功
						if (res.statusCode === 200) {
							//保存文件
							let tempFile = res.tempFilePath;
							//保存成功之后 打開文件
							uni.getFileSystemManager().saveFile({
							tempFilePath: tempFile,
				// filePath: wx.env.USER_DATA_PATH + '/' + '上傳成員.pdf',//自定義文件名
							success(res) {
							    console.log(res)
									uni.openDocument({
										filePath: res.savedFilePath,
										showMenu: true, //是否可以分享
										success: (res) => {
											uni.hideLoading()
											console.log(res);
										},
										fail: (e) => {
											uni.showToast({
												title: '打開失敗',
												icon: "error"
											})
										}
									})

								}
							})
						}
					},
					fail: (e) => {
						console.log(e, '文件下載失敗')
						uni.showToast({
							title: '文件下載失敗',
							icon: "error",
						})
					}
				});


			}

四、圖片預(yù)覽、保存、轉(zhuǎn)發(fā)、收藏：uni.previewImage()

1、同樣，在瀏覽器調(diào)試PC端過程中，圖片的預(yù)覽下載都可以通過a標(biāo)簽來實(shí)現(xiàn)，但是微信小程序完全不同，它要復(fù)雜一些。

2、代碼示例。?注意urls屬性類型是數(shù)組，放的某張圖片鏈接

	methods: {
			pictureReview(arr) {
				uni.previewImage({
					urls: [arr],
					longPressActions: {
						itemList: ['發(fā)送給朋友', '保存圖片', '收藏'],
						success: function(data) {
							console.log('選中了第' + (data.tapIndex + 1) + '個(gè)按鈕,第' + (data.index + 1) + '張圖片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			}
		}

五、 我當(dāng)前遇到‘關(guān)于文件預(yù)覽uni.openDocument()’API的問題，歡迎評(píng)論區(qū)討論

代碼打包編譯在微信開發(fā)者工具，調(diào)得通，手機(jī)（ios\安卓）真機(jī)調(diào)試也能調(diào)通，但是，PC端微信小程序真機(jī)調(diào)試的時(shí)候，能保存但是預(yù)覽失敗。找了很久的原因未果，有知道原因的大佬嗎？文章來源地址http://www.zghlxwxcb.cn/news/detail-612438.html

到了這里，關(guān)于uni-app之微信小程序?qū)崿F(xiàn)‘下載+保存至本地+預(yù)覽’功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！