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

Posted 2022-05-28 恪愚

说到保存文件，在微信小程序里，本来是一件“令人愉快”的事情：毕竟刚看到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