前言
图片保存到手机相册的功能相信大家一定都用过吧，今天教你用微信小程序实现这个好玩的小功能。
实现效果如下：
实现思路：
首先我们需要调用wx.downloadFile方法下载文件资源到本地，然后利用wx.saveImageToPhotosAlbum方法保存图片到系统相册，需要注意的是这样写很可能会因为没有权限而导致下载不了图片，所以我们最后还需要给接口一个调用失败的回调函数，以此来获取权限，最后这个小功能就实现啦。
源码如下：
wxml文件
<!-- 按钮触发事件 --><button bindtap="downloadImg">点击下载图片</button>
js文件
const app = getApp(); //获取app实例Page({data: {modalType: false, //弹框默认不显示imgUrl: "//04/11/LV4c4J.jpg", //模拟图片},// 点击下载图片事件downloadImg() {wx.showLoading({title: '加载中...'});//wx.downloadFile方法：下载文件资源到本地wx.downloadFile({url: this.data.imgUrl, //图片地址success: function (res) {//wx.saveImageToPhotosAlbum方法：保存图片到系统相册wx.saveImageToPhotosAlbum({filePath: res.tempFilePath, //图片文件路径success: function (data) {wx.hideLoading(); //隐藏 loading 提示框wx.showModal({title: '提示',content: '保存成功',modalType: false,})},// 接口调用失败的回调函数fail: function (err) {if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {wx.showModal({title: '提示',content: '需要您授权保存相册',modalType: false,success: modalSuccess => {wx.openSetting({success(settingdata) {console.log("settingdata", settingdata)if (settingdata.authSetting['scope.writePhotosAlbum']) {wx.showModal({title: '提示',content: '获取权限成功,再次点击图片即可保存',modalType: false,})} else {wx.showModal({title: '提示',content: '获取权限失败，将无法保存到相册哦~',modalType: false,})}},fail(failData) {console.log("failData", failData)},complete(finishData) {console.log("finishData", finishData)}})}})}},complete(res) {wx.hideLoading(); //隐藏 loading 提示框}})}})}})
有关于微信小程序如何实现图片预览，大家可移步博主另一篇文章（微信小程序实现图片预览）
