wx.getSetting:获取用户授权。
wx.downloadFile:下载文件资源到本地。客户端直接发起一个 HTTPS GET 请求,返回文件的本地临时路径 (本地路径),单次下载允许的最大文件为 200MB。
wx.saveImageToPhotosAlbum:保存文件到本地。
1.设置一个can_click参数,防止重复点击。
2.对图片数组进行处理,当选中图片之后,设置改项为选中状态,显示选中状态(蒙层+选中),并将选中项push进一个新数组。
3.点击保存,判断新数组长度,小于0 ,大于9提示,否则进行图片保存。
4.保存完毕(或保存出错),清空数组并清除选中状态。
<view class="img_box"> <block wx:for="{{img_list}}" wx:key="index"> <view class="img_item" catchtap="choseOne" data-index="{{index}}"> <image src="{{item.icon}}" class="img_img" /> <view class="item_check {{item.checked && 'checked'}}"></view> <!-- 蒙层 --> <view class=" {{item.checked && 'item_mask'}}"></view> </view> </block> </view> <view class="btn" catchtap="saveTo">保存到相册</view>
/* pages/wxCase/downFile/index.wxss */ page { background-color: #fff; } .img_box { padding: 0 20rpx; box-sizing: border-box; display: grid; width: 100%; /* 相当于 1fr 1fr 1fr */ grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); grid-auto-flow: row; /* grid-column-gap 和 grid-row-gap的简写 */ grid-column-gap: 26rpx; grid-row-gap: 23rpx; } .img_item { width: 220rpx; height: 220rpx; position: relative; } .img_img { width: 100%; height: 100%; } .item_check { position: absolute; width: 35rpx; height: 35rpx; border-radius: 50%; border: 3rpx solid #f5ecec; right: 10rpx; top: 10rpx; z-index: 11; } .checked { background: #acd0e0; border: none; position: absolute; } .checked::after { position: absolute; width: 4px; height: 8px; border-width: 0 2px 2px 0; border-color: #fff; border-style: solid; -webkit-transform: rotate(45deg); transform: rotate(45deg); content: ''; left: 31%; top: 10%; } .item_mask { position: absolute; z-index: 9; width: 100%; height: 100%; left: 0; top: 0; background-color: rgb(0, 0, 0, 0.4); } .btn { margin: 140rpx auto; width: 625rpx; height: 80rpx; background: linear-gradient(90deg, #dd8449 0%, #e28e74 52%, #dbb290 100%); border-radius: 6rpx; font-size: 30rpx; color: #fff; line-height: 80rpx; text-align: center; position: relative; overflow: hidden; } .btn:after { content: ""; background: #999; position: absolute; width: 750rpx; height: 750rpx; left: calc(50% - 375rpx); top: calc(50% - 375rpx); opacity: 0; margin: auto; border-radius: 50%; transform: scale(1); transition: all 0.4s ease-in-out; } .btn:active:after { transform: scale(0); opacity: 1; transition: 0s; }
// pages/wxCase/downFile/index.js import { writePhotosAlbum } from '../../../utils/util' Page({ data: { img_list: [{ icon: 'https://i.postimg.cc/mgsKJGLw/susu1.jpg' }, { icon: 'https://i.postimg.cc/qRRLS16Q/susu0.jpg' }, { icon: 'https://i.postimg.cc/pXDp6RXq/susu3.jpg' }, { icon: 'https://i.postimg.cc/XJmpTvCD/susu2.jpg' }, { icon: 'https://i.postimg.cc/mgsKJGLw/susu1.jpg' }, { icon: 'https://i.postimg.cc/qRRLS16Q/susu0.jpg' }, { icon: 'https://i.postimg.cc/pXDp6RXq/susu3.jpg' }, { icon: 'https://i.postimg.cc/XJmpTvCD/susu2.jpg' }, { icon: 'https://i.postimg.cc/mgsKJGLw/susu1.jpg' }, { icon: 'https://i.postimg.cc/qRRLS16Q/susu0.jpg' }, ], checkd_list: [], }, can_click:true, choseOne(e) { let { index } = e.currentTarget.dataset, { img_list, } = this.data; img_list[index].checked = !img_list[index].checked; let checkd_list = img_list.filter((item) => { return item.checked && item }) this.setData({ img_list, checkd_list }) }, saveTo() { if (this.data.checkd_list.length === 0) { return wx.showToast({ title: '请选择需要保存的图片', icon: 'none' }) } if (this.data.checkd_list.length > 9) { return wx.showToast({ title: '同时最多只能保存9张图片', icon: 'none' }) } if (this.can_click) { console.log(1111) this.can_click=false; var that = this; writePhotosAlbum( function success() { that.downForque(that.data.checkd_list).then(res => { wx.hideLoading() wx.showToast({ title: '下载完成', icon: 'none' }) that.data.img_list.forEach(item => { item.checked = false; }) that.setData({ img_list: that.data.img_list }) that.data.checkd_list = []; that.can_click=true; }).catch(err => { that.data.img_list.forEach(item => { item.checked = false; }) that.setData({ img_list: that.data.img_list }) that.data.checkd_list = [] wx.hideLoading(); that.can_click=true; }) }, function fail() { wx.showToast({ title: '您拒绝了保存到相册', icon: 'none' }) } ) } }, // 队列 downForque(urls) { let promise = Promise.resolve() urls.forEach((url, index) => { promise = promise.then(() => { return this.download(url.icon, index) }) }) return promise; }, download(url, index) { let length = this.data.checkd_list.length return new Promise((resolve, reject) => { wx.downloadFile({ url: url, success: function (res) { var temp = res.tempFilePath wx.saveImageToPhotosAlbum({ filePath: temp, success: function (res) { wx.showLoading({ title: '下载中(' + (index + 1) + '/' + length + ')' }) resolve(res) }, fail: function (err) { reject(res) } }) }, fail: function (err) { reject(err) } }) }) }, })