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

   日期:2020-07-03     浏览:1003    评论:0    
核心提示:最近看到微信小程序的保存/下载文件API,不禁一乐:官方在文档中说的有点简单啊...正巧遇到了一些使用问题,在这里慢慢给大家分享出来:

说到保存文件,在微信小程序里,本来是一件“令人愉快”的事情:毕竟刚看到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
 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
0相关评论

推荐图文
推荐资讯中心
点击排行
最新信息
新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服