微信小程序保存多张图片的实现方法


Posted in Javascript onMarch 05, 2019

前言

使用promise 队列,保存多张图片到手机相册

问题:有些手机会出现只能保存五张图片,报错信息:无法写入

promise需要好好学习

核心代码

// pages/saveImgs/index.js
import { writePhotosAlbum } from '../../utils/util'
Page({
 /**
  * 页面的初始数据
  */
 data: {
  list: [
   'https://timgs.top1buyer.com/admin/special/special_img_20190301160008479.jpg',
   'https://timgs.top1buyer.com/admin/special/special_img_20190301160013201.jpg',
   'https://timgs.top1buyer.com/admin/special/special_img_20190301160015969.jpg',
   'https://timgs.top1buyer.com/admin/special/special_img_20190301160025498.jpg',
   'https://timgs.top1buyer.com/admin/special/special_img_20190301160031519.jpg',
   'https://timgs.top1buyer.com/admin/special/special_img_20190301160042689.jpg',
   'https://timgs.top1buyer.com/admin/special/special_img_20190301160108243.jpg',
   'https://timgs.top1buyer.com/admin/special/special_img_20190301160111756.jpg',
   'https://timgs.top1buyer.com/admin/special/special_img_20190304160141454.jpg'
  ],
  loading:false
 },

 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function(options) {},
 // 下载图片
 downloadImgs() {
  var _this = this
  // 获取保存到相册权限
  writePhotosAlbum(
   function success() {
    wx.showLoading({
     title: '加载中',
     mask: true
    })
    // 调用保存图片promise队列
    _this
     .queue(_this.data.list)
     .then(res => {
      wx.hideLoading()
      wx.showToast({
       title: '下载完成'
      })
     })
     .catch(err => {
      wx.hideLoading()
      console.log(err)
     })
   },
   function fail() {
    wx.showToast({
     title: '您拒绝了保存到相册'
    })
   }
  )
 },
 // 队列
 queue(urls) {
  let promise = Promise.resolve()
  urls.forEach((url, index) => {
   promise = promise.then(() => {
    return this.download(url)
   })
  })
  return promise
 },
 // 下载
 download(url) {
  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) {
       reject(res)
      }
     })
    },
    fail: function(err) {
     reject(err)
    }
   })
  })
 }
})

微信小程序保存多张图片的实现方法

项目案例

github地址

git clone https://github.com/sunnie1992/soul-weapp.git

直接用微信小程序开发工具打开就可以看到案例了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery Study Notes 学习笔记(一)
Aug 04 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
Nov 30 Javascript
js传中文参数controller里获取参数乱码问题解决方法
Jan 03 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
Jan 27 Javascript
javascript中callee与caller的区别分析
Apr 20 Javascript
纯CSS3代码实现滑动开关效果
Aug 19 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
Sep 01 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
May 21 Javascript
p5.js实现动态图形临摹
Oct 23 Javascript
webpack打包html里面img后src为“[object Module]”问题
Dec 22 Javascript
js实现随机点名器精简版
Jun 29 Javascript
vue如何在项目中调用腾讯云的滑动验证码
Jul 15 Javascript
JS添加或删除HTML dom元素的方法实例分析
Mar 05 #Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
Mar 05 #Javascript
es6数据变更同步到视图层的方法
Mar 04 #Javascript
使用webpack构建应用的方法步骤
Mar 04 #Javascript
详解element-ui中form验证杂记
Mar 04 #Javascript
JS使用数组实现的队列功能示例
Mar 04 #Javascript
JS使用栈判断给定字符串是否是回文算法示例
Mar 04 #Javascript
You might like
提问的智慧
2006/10/09 PHP
利用PHP生成CSV文件简单示例
2016/12/21 PHP
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
2012/10/24 Javascript
JavaScript中getUTCSeconds()方法的使用详解
2015/06/11 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
2015/12/14 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
2016/11/02 Javascript
JS大坑之19位数的Number型精度丢失问题详解
2019/04/22 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
2020/11/06 Javascript
Python输出PowerPoint(ppt)文件中全部文字信息的方法
2015/04/28 Python
python处理二进制数据的方法
2015/06/03 Python
Python入门之后再看点什么好?
2018/03/05 Python
PyQt5每天必学之日历控件QCalendarWidget
2018/04/19 Python
Django组件cookie与session的具体使用
2019/06/05 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
python解决OpenCV在读取显示图片的时候闪退的问题
2021/02/23 Python
分享CSS3中必须要知道的10个顶级命令
2012/04/26 HTML / CSS
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
大唐电信科技股份有限公司java工程师面试经历
2016/12/09 面试题
Ruby如何定义一个类
2012/10/08 面试题
出纳员岗位责任制
2014/02/11 职场文书
班组长岗位职责
2014/03/03 职场文书
养生餐厅创业计划书范文
2014/03/26 职场文书
环保倡议书
2014/04/14 职场文书
群众路线教育党员自我剖析材料
2014/10/06 职场文书
语文复习计划
2015/01/19 职场文书
教师考核表个人总结
2015/02/12 职场文书
2015年幼儿园学前班工作总结
2015/05/18 职场文书
2015年网络舆情工作总结
2015/07/24 职场文书
物业管理交接协议书
2016/03/24 职场文书
导游词之青岛太清宫
2019/12/13 职场文书
MySQL主从复制断开的常用修复方法
2021/04/07 MySQL
python 标准库原理与用法详解之os.path篇
2021/10/24 Python
windows系统安装配置nginx环境
2022/06/28 Servers