//子組件download-file.vue<template> <div></div></template><script>export default { props: {  urls: {   default: ""http://通過父組件傳遞遠程圖片路徑數組  } }, watch: {  urls() {   if (this.urls.length > 0) {    this.downLoadImage(this.urls);//監聽變化   }  } }, methods: {  //拿到圖片的臨時路徑  getImageInfo(url) {   var cache = {};   return new Promise((resolve, reject) => {    /* 獲得要在畫布上繪制的圖片 */    if (cache[url]) {     resolve(cache[url]);    } else {     const objExp = new RegExp(      /^http(s)?:////([/w-]+/.)+[/w-]+(//[/w- .//?%&=]*)?/     );     if (objExp.test(url)) {      wx.getImageInfo({       src: url,       complete: res => {        if (res.errMsg === "getImageInfo:ok") {         cache[url] = res.path;         resolve(res.path);        } else {         reject(new Error("getImageInfo fail"));        }       }      });     } else {      this.cache[url] = url;      resolve(url);     }    }   });  },  downLoadImage(urls) {   const vm = this;   let temp = [];   if (urls.length > 0) {    urls.map((item, index) => {     vm.getImageInfo(item).then(res => {      temp.push(res);      vm.saveImageToLocal(res);     });    });   }  },  saveImageToLocal(path) {   //保存臨時圖片到本地   wx.saveImageToPhotosAlbum({    filePath: path,    success(res) {     console.log("success");    },    fail: function(res) {     console.log(res);    }   });  } }};</script><style></style>

//news/detail.vue//省略代碼...<button @click="download">下載</button>//省略代碼...<download-file :urls="downLoadUrls" ref="myDownload"></download-file>//省略代碼...async download() {  let vm = this;  const temp = [];  let data = await vm.$net.get(vm.$apis.articleDetails, {    id: vm.item.id  });  if (data.article.body.length > 0) {   data.article.body.map((item, index) => {    if (item.type == "img") {     temp.push(item.data);    }  }); } vm.downLoadUrls = temp;},