说明

最近有些空余时间开始着手优化我那个吉他自学小助手的微信小程序，其中有一个功能是下载吉他谱到本地，开始以为只是很简单的拿到图片全球资源定位器(统一资源定位符)然后向下下来就好了，其实不然.最终通过谷歌解决了这个问题，现在记录一下，以便后续翻阅。

少废话先看东西

演示。可交换的图像格式

流程梳理

获取图片远程地址数组-遍历拿到图片缓存（临时地址)(wx.getImageInfo) -保存缓存图片到本地(wx.saveImageToPhotosAlbum)

完整代码

子组件代码逻辑

//子组件下载文件。vuetemplate div/div/templatescript export default { prop s : { URLs : { default : ' '//通过父组件传递远程图片路径数组} }，观看： { URLs(){ if(this。网址。长度0){ this。下载图片(这。网址)；//监听变化} } }，methods: { //拿到图片的临时路径getImageInfo(URL){ var cache={ }；返回新的承诺((解决，拒绝)={ /*获得要在画布上绘制的图片*/if(缓存[url]) { resolve(缓存[URL])；} else { const objexp=新regexp(/^http(s)？//([w-] .)[ w-](/[ w-]./?%=]*)?/);if(ObJexP。测试(网址)){ wx。GetImageInfo({ src : URL，完成： RES={ if(RES . errmsg==' GetImageInfo : ok '){ cache[URL]=RES . path；解析(RES . path)；} else { reject(新错误(“getImageInfo失败”)；} } });} else { this。缓存[URL]=URL；解析(网址)；} } });}，下载图像(URL){ const VM=this；让temp=[]；if(URL。长度0){ URL。map((项目，索引)={ vm.getImageInfo(项目)).然后(RES={ temp。推送(RES)；虚拟机。savegimagetolocal(RES)；});});} }，saveImageToLocal(路径){ //保存临时图片到本地wx。savegimagetopotsalbum({ file path :路径，成功(RES){控制台。日志(“成功”)；}，fail:函数(RES){控制台。日志(RES)；} });} }};/脚本风格/样式在父组件中引用

//news/detail.vue//省略代码.按钮@点击='下载'下载/button//省略代码.下载-文件： URL='下载URL ' ref='我的下载'/下载-文件/省略代码.异步下载(){ 0让VM=this const temp=[]；让数据=等待vm .$net.get(vm .$ apis.articleDetails，{ id : VM。项目。id })；if(数据。文章。尸体。长度0){数据。文章。尸体。map((项，索引)={ if(项。type==' img '){ temp。推送(项目。数据)；} });} vm.downLoadUrls=temp}，以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。