业务背景:实现在小程序原生页面中同时下载多张图片到本地
类似下图效果:
话不多说,上菜,粘过去直接用,亲测有效
wxml:
<view>
<view class="toast" wx:if="{{list_show}}">
下载中{{currentindex}}/{{list.length}}
<view class="prograss">
<progress class="pro" percent="{{percents}}" stroke-width="3"/>
</view>
</view>
<button bindtap="download">下载图片</button>
<view class="">
<image class="" wx:for="{{list}}" wx:key="index" style="width:250rpx;height:250rpx;" src="{{item}}">
</image>
</view>
</view>
wxss:
.toast{
position: fixed;
width: 260rpx;
height: 260rpx;
font-size: 35rpx;
z-index: 100;
background: rgba(0, 0, 0, .8);
color: skyblue;
left: 50%;
top: 50%;
margin-left: -130rpx;
margin-top: -130rpx;
line-height: 260rpx;
text-align: center;
}
.prograss{
position: fixed;
width: 260rpx;
height: 260rpx;
font-size: 35rpx;
color: skyblue;
left: 50%;
top: 50%;
margin-left: -130rpx;
margin-top: 62rpx;
line-height: 260rpx;
text-align: center;
}
.pro{
width: 200rpx;
margin: 0 auto;
}
js:
Page({
data: {
list: [
'https://img.miyabaobei.com/d1/p6/2020/12/31/43/0e/430e1e8565c04ad552d4a3b8e746e8aa051198951.png',
'http://img.miyabaobei.com/d1/p6/2020/12/31/7a/45/7a451174e6cfc9ae002aed1cd56689a8062286441.jpg',
'http://img.miyabaobei.com/d1/p6/2020/12/31/df/e3/dfe3b9db0030b463bbeb812848b4557d060606649.jpg',
'http://img.miyabaobei.com/d1/p6/2020/12/31/fc/57/fc57a81843502ce926c4aca75466d1ba061073348.jpg',
'http://img.miyabaobei.com/d1/p6/2020/12/31/6e/30/6e30f0e30b37d07b7c40a350721adee9061784632.jpg',
'http://img.miyabaobei.com/d1/p6/2020/12/31/d7/c7/d7c7d7391073186ab2464efa8991de86061457539.jpg',
'http://img.miyabaobei.com/d1/p6/2020/12/31/9e/39/9e394f0ad08b53ff85c00f4dd06973d0062045938.jpg',
'http://img.miyabaobei.com/d1/p6/2020/12/31/0a/24/0a24748279c5efb36b849d83f47e36eb062638187.jpg',
'http://img.miyabaobei.com/d1/p6/2020/12/31/11/64/11643b42380448a370e6713f7236fb91060873646.jpg',
],
list_show:false,
currentindex:0,
percents:0
},
onLoad: function (options) {
},
download:function(){
this.downloadFile(this.data.list).then(res => {
this.setData({
list_show:false,
})
wx.showToast({
title: '下载完成'
})
})
},
downloadFile(urls) {
this.setData({
list_show:true,
})
let promise = Promise.resolve()
urls.forEach((url, index) => {
promise = promise.then(() => {
var ever = (10/urls.length)*10
this.setData({
currentindex: index+1,
percents: (index+1)*ever
})
return this.downloads(url)
})
})
return promise
},
downloads:function(url){
let that = this
return new Promise((resolve, reject) => {
wx.downloadFile({
url: url,
success: function(res) {
var temp = res.tempFilePath
wx.saveImageToPhotosAlbum({
filePath: temp,
success: function(res) {
resolve(res)
},
fail: function(err) {
that.setData({
list_show:false,
})
}
})
},
fail: function(err) {
console.log(err,"err2222")
reject(err)
}
})
})
},
})
觉得不错,赏个关注呗,不胜感激Thanks♪(・ω・)ノ😀
说明:只是初步实现了效果,可能不是很完善,欢迎大佬讨论交流