#**

微信小程序如何开发图片下载功能

官方文档不够详细，因此写此博客，希望能解决初学者的一些问题

下面案例可供参考

一.所用到的api介绍（来自官方文档）

DownloadTask wx.downloadFile(Object object)
下载文件资源到本地。客户端直接发起一个 HTTPS GET 请求，返回文件的本地临时路径 (本地路径)，单次下载允许的最大文件为 200MB。使用前请注意阅读相关说明。
注意：请在服务端响应的 header 中指定合理的 Content-Type 字段，以保证客户端正确处理文件类型。
wx.saveImageToPhotosAlbum(Object object)
基础库 1.2.0 开始支持，低版本需做兼容处理。
调用前需要用户授权 scope.writePhotosAlbum
保存图片到系统相册。
url规则：服务器域名请在「小程序后台-开发-开发设置-服务器域名」中进行配置，配置时需要注意：
域名只支持 https (wx.request、wx.uploadFile、wx.downloadFile) 和 wss (wx.connectSocket) 协议；
域名不能使用 IP 地址（小程序的局域网 IP 除外）或 localhost；
可以配置端口，如 https://myserver.com:8080，但是配置后只能向 https://myserver.com:8080 发起请求。如果向 https://myserver.com、https://myserver.com:9091 等 URL 请求则会失败。
如果不配置端口。如 https://myserver.com，那么请求的 URL 中也不能包含端口，甚至是默认的 443 端口也不可以。如果向 https://myserver.com:443 请求则会失败。
域名必须经过 ICP 备案；
出于安全考虑，api.weixin.qq.com 不能被配置为服务器域名，相关API也不能在小程序内调用。开发者应将 AppSecret 保存到后台服务器中，通过服务器使用 getAccessToken 接口获取 access_token，并调用相关 API；
不支持配置父域名，使用子域名

二、使用步骤

1.写下标签

首先在index.wxml中写下按钮，用来触发保存图片的函数：

<button bindtap="picture">图片保存</button>

2.index.js代码部分

代码如下：这里采用的图片的URL地址是bilibili的一个图片链接，正好符合小程序开发文档中URL的请求规则，因此可以进行使用

picture:function(){wx.downloadFile({url: 'https://i0.hdslb.com/bfs/archive/f2bcc13613635be63786cad5480d95ca5a0fa4f6.png@880w_388h_1c_95q',//图片的地址type: 'audio',success:function(res){const tempFilePath = res.tempFilePath  //如果请求成功，则通过res中的tempFilePath 得到需要下载的图片地址console.log(tempFilePath); //方便查看，这里打印路径，并且提示请求成功console.log("请求到了");wx.saveImageToPhotosAlbum({filePath: tempFilePath,  //设置下载图片的地址success:function(){console.log("保存成功"); //保存成功后进行的提示}})}
})
}

当请求成功后，console将会显示以下内容，同时弹出下载框
真机调试，成功保存（这里可以发现其实真机中返回的URL地址和开发工具中返回的不同）

以上就是这块的全部内容了，有不对的地方希望可以得到指正

微信小程序实现图片下载功能相关推荐

微信小程序把图片下载到本地相册（附源码）
微信小程序保存网络图片到本地实现流程: 1.把图片下载到本地相册 2.检查用户的授权状态(三种状态:未授权,已授权,未同意授权),判断是否授权保存图片的能力,如果是用户点击了不同意授权给小程序保存图片 ...
微信小程序剪切图片的功能
全平台(Vue.React.微信小程序)任意角度旋转图片裁剪组件 | 微信开放社区 Simple-Crop/USAGE-wechat.md at master · newbieYoung/Simpl ...
小程序源码：强大的多功能图片处理器微信小程序源码下载图片画框合成-多玩法安装简单
大家好这是以开以图片为主题的一款小程序里面拥有了多种的图片处理功能,也算是比较强大的一款另外小编最喜欢的就是里面的图片画框合成这个功能该功能里面有N种画框模板,然后画框的尺寸根据您的图片自适应处 ...
图片拼图微信小程序源码下载支持多模板制作和流量主
该款小程序支持多种流量主另外支持多种图形模板制作切割另外也支持长图合成等功能安装简单,新手容易上手,具体就不多说了大家自行研究吧! 好了下面来看看小编的测试演示图! 小程序下载地址:(10条消息 ...
微信小程序：超强大微信小程序源码下载内含几十款功能王者战力查询,游戏扫码登录,王者巅峰信息查询等等支持流量主收益和CPS收益
这是一款特别强大的一款微信小程序源码初步算了一下,该款小程序目前包含了几十个功能具体功能如以下: 游戏扫码登录王者战力查询改名生成(多种生成方式) 头像框制作(N款模板) 王者巅峰数据查询王 ...
修复采集接口版云开发表情包微信小程序源码下载增加制作等功能
大家好,相信很多人对这个界面的表情包小程序肯定不陌生吧不错之前该款小程序是属于独立后端的,不管今天所发的这款是云开发的哟运营着这个表情包的用户应该发现了,最近很多表情包图片都失效了所以呢,今天小 ...
【小程序源码】精美UI强大娱乐功能组合微信小程序源码下载,安装简单
这是一个多娱乐功能的小程序具体由以下功能组合: 在线音乐短视频去印外卖CPS(外卖平台优惠劵) 打车CPS(打车平台优惠劵) 头像功能(多分类头像,另外还支持姓氏头像制作) 图片加水印表情包功 ...
小程序源码：图片拼图微信小程序源码下载
该款小程序支持多种流量主另外支持多种图形模板制作切割另外也支持长图合成等功能安装简单,新手容易上手,具体就不多说了大家自行研究吧! 小程序源码下载地址: 小程序源码:图片拼图微信小程序源码下载- ...
小程序源码：最新牛牛盲盒微信小程序源码下载·一元购升级款，全新流量变现程序，带图片完整素材
玩法介绍及功能 1·手办盲盒·数码盲盒等:都可以设置添加盲盒售卖; 2·可添加幸运盲盒进行额外的福利开奖;(不能内定) 3·用户拆盒如喜欢或不喜欢,可进行回收或赠送好友及发货; 4·可在盲盒添加线下商 ...
微信小程序实现图片是上传、预览功能
本文实例讲述了微信小程序实现图片上传.删除和预览功能的方法,分享给大家供大家参考,具体如下: 这里主要介绍一下微信小程序的图片上传图片删除和图片预览 1.可以调用相机也可以从本地相册选择 2.本地实现 ...

微信小程序实现图片下载功能