微信小程序一键保存多张图片
时间:2022-07-24
本文章向大家介绍微信小程序一键保存多张图片,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<view class="info">
<block wx:for="{{dynamic_list}}" wx:for-item="item" wx:key="index">
<view class="row">
<view class="tulie" wx:for="{{item.file}}" wx:for-item="row" wx:key="key" wx:for-index="i">
<image src="{{row.img_url}}"></image>
</view>
</view>
<button data-index="{{index}}" bindtap="download">一键保存到相册</button>
<view class="progress" wx:if="{{schedule}}">
<progress percent="{{percent}}" duration="1" activeColor="#4aad8f" border-radius="10" stroke-width="12"
show-info />
</view>
</block>
</view>
Page({
data: {
dynamic_list: [{
file: [{
img_url: 'https://sucai.suoluomei.cn/sucai_zs/images/20191123112141-2.png'
}, {
img_url: 'https://sucai.suoluomei.cn/sucai_zs/images/20191121151131-1.png'
}, {
img_url: 'https://sucai.suoluomei.cn/sucai_zs/images/20191121151131-2.png'
}, {
img_url: 'https://sucai.suoluomei.cn/sucai_zs/images/20191121100950-3.png'
}, {
img_url: 'https://sucai.suoluomei.cn/sucai_zs/images/20191121093322-2.png'
}]
}],
percent: 0,
schedule: false
},
// 下载图片到本地相册
download(e) {
let index = e.currentTarget.dataset.index
this.getsave(0, this.data.dynamic_list[index].file.length, index)
},
getsave(i, length, index) {
wx.showLoading({
title: '下载中(' + (i + 1) + '/' + length + ')',
})
const downloadTask = wx.downloadFile({
url: this.data.dynamic_list[index].file[i].img_url,
success: (res) => {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: (res) => {
if (i + 1 == length) {
wx.showToast({
title: '保存成功',
});
}
wx.hideLoading()
if (++i < length) {
this.getsave(i, length, index);
}
},
fail: (err) => {
wx.showToast({
title: '保存图片失败',
icon: 'none',
})
},
})
},
})
// 下载进度
downloadTask.onProgressUpdate((res) => {
console.log(res)
if (res.progress > 0) {
this.setData({
schedule: true,
percent: res.progress
})
}
if (res.progress == 100) {
this.setData({
schedule: false
})
}
})
},
})
- 如何实现微信小程序的滚动加载功能
- 分享微信小程序推送消息步骤
- 实例分享微信小程序项目搭建(下)
- 实例分享微信小程序项目搭建(上)
- Android6.0源码分析之蓝牙显示接收到的文件
- Android中应用调用系统权限
- Android5.0以后隐式启动ServiceBug
- Android6.0源码分析之录音功能(一)
- Android6.0源码开发之修改默认音量default及max和min
- Android源码开发之添加/删除系统应用
- 按键事件处理
- Android6.0锁屏源码分析之界面布局分析
- Android6.0源码分析之menu键弹出popupwindow菜单流程分析
- Android中初步自定义view
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP基于mcript扩展实现对称加密功能示例
- php和asp语法上的区别总结
- 解决python pandas读取excel中多个不同sheet表格存在的问题
- .img/.hdr格式转.nii格式的操作
- PHP实现的操作数组类库定义与用法示例
- python使用nibabel和sitk读取保存nii.gz文件实例
- PHP从尾到头打印链表实例讲解
- python如何写try语句
- python怎么判断素数
- php数组遍历类与用法示例
- PHP格式化显示时间date()函数代码
- python操作微信自动发消息的实现(微信聊天机器人)
- 使用ITK-SNAP进行抠图操作并保存mask的实例
- Yii2框架加载css和js文件的方法分析
- php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式