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

技术2022-07-15 83

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

使用wx.downloadFile() 下载docx文件后，使用fileSystemManager.saveFile API保存docx文件为图片格式保存成功后，再使用wx.saveImageToPhotosAlbum保存到相册，最终路径为：手机\内存\tencent\MicroMsg\WeiXin\xxxx.jpg

其中，xxxx是随机生成的时间戳。

但遗憾的是：这种方式对iOS似乎也不友好！