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


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 相关文章推荐
AngularJS入门教程之Hello World!
Dec 06 Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 Javascript
jquery事件的ready()方法使用详解
Nov 11 Javascript
AngularJS ng-bind-template 指令详解
Jul 30 Javascript
JavaScript自定义文本框光标
Mar 05 Javascript
vue Render中slots的使用的实例代码
Jul 19 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
Sep 04 Javascript
还不懂递归?读完这篇文章保证你会懂
Jul 29 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
JavaScript展开操作符(Spread operator)详解
Jul 20 Javascript
jQuery实现带进度条的轮播图
Sep 13 jQuery
JavaScript实现4位随机验证码的生成
Jan 28 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
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
PHP的一个完美GIF等比缩放类,附带去除缩放黑背景
2014/04/01 PHP
php调用云片网接口发送短信的实现方法
2017/10/25 PHP
PHP强制转化的形式整理
2020/05/22 PHP
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
2009/05/21 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
2011/10/13 Javascript
JS判断当前日期是否大于某个日期的实现代码
2012/09/02 Javascript
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
一个简单的瀑布流效果(主体形式自写)
2013/05/27 Javascript
jquery easyui使用心得
2014/07/07 Javascript
jQuery操作基本控件方法实例分析
2015/12/31 Javascript
JS显示日历和天气的方法
2016/03/01 Javascript
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
angular中使用Socket.io实例代码
2017/06/03 Javascript
通俗解释JavaScript正则表达式快速记忆
2017/08/23 Javascript
JS实现合并json对象的方法
2017/10/10 Javascript
angularjs实现时间轴效果的示例代码
2017/11/29 Javascript
Vuex模块化应用实践示例
2020/02/03 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
2020/02/14 Javascript
js实现小星星游戏
2020/03/23 Javascript
[55:47]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第三局
2016/02/27 DOTA
pyqt5自定义信号实例解析
2018/01/31 Python
使用python批量读取word文档并整理关键信息到excel表格的实例
2018/11/07 Python
Django框架model模型对象验证实现方法分析
2019/10/02 Python
利用matplotlib实现根据实时数据动态更新图形
2019/12/13 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
品质主管的岗位职责
2013/12/04 职场文书
生产部厂长职位说明书
2014/03/03 职场文书
中国好声音广告词
2014/03/18 职场文书
2015暑假打工实践报告
2015/07/13 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python
MySQL数据库压缩版本安装与配置详细教程
2021/05/21 MySQL
JavaScript中MutationObServer监听DOM元素详情
2021/11/27 Javascript
frg-100简单操作(设置)说明
2022/04/05 无线电
MySQL数据库安装方法与图形化管理工具介绍
2022/05/30 MySQL