基于mpvue微信小程序下载远程图片到本地解决思路

说明

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

少废话先看东西

演示.gif

流程梳理

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

完整代码

子组件代码逻辑

//子组件download-file.vue

在父组件中引用

//news/detail.vue
//省略代码...
下载
//省略代码...

//省略代码...
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;
},