当前位置:  开发笔记 > 编程语言 > 正文

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

这篇文章主要介绍了详解基于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;
},

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

推荐阅读
echo7111436
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有