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


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 相关文章推荐
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
Apr 27 Javascript
js change,propertychange,input事件小议
Dec 20 Javascript
javascript实现table表格隔行变色的方法
May 13 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
Oct 15 Javascript
jQuery Easyui实现左右布局
Jan 26 Javascript
Bootstrap table两种分页示例
Dec 23 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
Jan 20 Javascript
JS html时钟制作代码分享
Mar 03 Javascript
js eval函数使用,js对象和字符串互转实例
Mar 06 Javascript
移动web开发之touch事件实例详解
Jan 17 Javascript
详解ES6中的Map与Set集合
Mar 22 Javascript
js实现弹窗效果
Aug 09 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
PHP 类商品秒杀计时实现代码
2010/05/05 PHP
Codeigniter通过SimpleXML将xml转换成对象的方法
2015/03/19 PHP
PHP中返回引用类型的方法
2015/04/03 PHP
使用Codeigniter重写insert的方法(推荐)
2017/03/23 PHP
Laravel框架路由管理简单示例
2019/05/07 PHP
Windows服务器中PHP如何安装redis扩展
2019/09/27 PHP
对YUI扩展的Gird组件 Part-1
2007/03/10 Javascript
一些不错的js函数ajax
2008/08/20 Javascript
Microsoft Ajax Minifier 压缩javascript的方法
2010/03/05 Javascript
Jquery实现搜索框提示功能示例代码
2013/08/13 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
2014/06/15 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
2014/08/08 Javascript
浅谈重写window对象的方法
2014/12/29 Javascript
使用js画图之饼图
2015/01/12 Javascript
setTimeout内不支持jquery的选择器的解决方案
2015/04/28 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
2015/09/15 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
获取当前按钮或者html的ID名称实例(推荐)
2017/06/23 Javascript
原生JavaScript实现remove()和recover()功能示例
2018/07/24 Javascript
javascript canvas检测小球碰撞
2020/04/17 Javascript
[01:14:41]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第一场 1月8日
2021/03/11 DOTA
对Python新手编程过程中如何规避一些常见问题的建议
2015/04/01 Python
python发送HTTP请求的方法小结
2015/07/08 Python
pandas多级分组实现排序的方法
2018/04/20 Python
解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题
2018/10/17 Python
Python3.7 基于 pycryptodome 的AES加密解密、RSA加密解密、加签验签
2019/12/04 Python
python 实现简单的FTP程序
2019/12/27 Python
使用Bazel编译TensorBoard教程
2020/02/15 Python
Crabtree & Evelyn欧盟:豪华洗浴、身体和护发
2021/03/09 全球购物
Happy Socks英国官网:购买五颜六色的袜子
2020/11/03 全球购物
店长助理岗位职责
2013/12/13 职场文书
2014年重阳节老干部座谈会上的讲话稿
2014/09/25 职场文书
党的群众路线教育实践活动个人整改措施
2014/10/27 职场文书
2014年安全员工作总结
2014/11/13 职场文书
教师创先争优承诺书
2015/04/27 职场文书
PyTorch中permute的使用方法
2022/04/26 Python