详解基于mpvue微信小程序下载远程图片到本地解决思路
2019-05-16 18:02
876 查看
说明
最近有些空余时间开始着手优化我那个吉他自学小助手的微信小程序,其中有一个功能是下载吉他谱到本地,开始以为只是很简单的拿到图片url然后down下来就好了,其实不然...最终通过google解决了这个问题,现在记录一下,以便后续翻阅。
少废话先看东西
演示.gif
流程梳理
获取图片远程地址数组-->遍历拿到图片缓存(临时地址)(wx.getImageInfo)-->保存缓存图片到本地(wx.saveImageToPhotosAlbum)
完整代码
子组件代码逻辑
//子组件download-file.vue <template> <div></div> </template> <script> export default { props: { urls: { default: ""//通过父组件传递远程图片路径数组 } }, watch: { urls() { if (this.urls.length > 0) { this.downLoadImage(this.urls);//监听变化 } } }, methods: { //拿到图片的临时路径 getImageInfo(url) { var cache = {}; return new Promise((resolve, reject) => { /* 获得要在画布上绘制的图片 */ if (cache在父组件中引用
//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; },以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- DEDE不能远程保存(下载)图片到本地的解决方法
- php完美实现下载远程图片保存到本地(保存微信头像)
- 关于DEDE解决无法下载远程图片(远程抓图、存图)到本地?
- 微信小程序教程之本地图片上传(leancloud)实例详解
- 微信小程序 图片加载(本地,网路)实例详解
- php程序获取远程图片进行下载到本地方法的总结
- 微信小程序教程之本地图片上传(leancloud)实例详解
- Silverlight:xap包(或本地缓存)下载版本更新的解决思路
- ASP.NET下载远程图片保存到本地的方法、保存抓取远程图片
- 微信开发之调起摄像头、本地展示图片、上传下载图片
- ASP.NET下载远程图片保存到本地的方法、保存抓取远程图片
- PHP通过url下载远程图片到本地
- 微信小程序 网络API 上传、下载详解
- mac本地后台调试微信小程序(思路:dmz+端口转发+https+域名解析)
- java把远程图片下载到本地
- ASP.NET下载远程图片保存到本地的方法、保存抓取远程图片
- php正则匹配文章中的远程图片地址并下载图片到本地
- 异步将远程链接上的内容(图片或内容)写到本地--微信头像
- 下载远程图片到本地
- 微信小程序 省市区选择器实例详解(附源码下载)