小程序 - 保存图片到相册

马丁路德 等级 363 1 0

在做小程序项目的时候,有需求要做一个开票功能,开票之后自然就需要查看发票,在让后台做成图片返回之后,我想了一下,查看发票除了需要看发票图片,提供预览图片可以放大缩小看外,最好应该还要有一个保存图片的功能吧。
刚好微信小程序提供了预览和保存相册两个API,就正好用上。因为预览比较简单,我就只是把保存相册的开发流程写下来,供大家也供自己往后参考了,有什么问题大家可以直接指正。

步骤一:编写HTML布局结构:

<button class="default-btn" hover-class="default-btn-active" bindtap="saveInvoice">保存</button> 

布局里一个按钮,是调起保存相册API的,也就保存功能的按钮。

步骤二:编写调用保存相册API的逻辑代码:

 /*下载发票图片*/
  saveInvoice: function () {
    var self = this,
    timestamp = new Date().getTime(),
    file = wx.getFileSystemManager();
    file.writeFile({
      filePath: `${wx.env.USER_DATA_PATH}/invoice_${timestamp}.jpeg`,
      data: self.data.invoiceImg,
      encoding: 'base64',
      success: res => {
        self.saveToAlbum(timestamp);
      },
      fail: err => {
        showMsg('保存失败');
      }
    });
  },
  /*保存发票图片到用户相册,调用小程序API*/
  saveToAlbum: function (timestamp) {
    var self = this;
    wx.saveImageToPhotosAlbum({
      filePath: `${wx.env.USER_DATA_PATH}/invoice_${timestamp}.jpeg`,
      success: res => {
        showMsg('图片已保存至相册');
      },
      fail: err => {
        console.log(err);
      }
    });
  }, 

因为保存相册API中的filePath参数是需要图片文件路径的,而我拿到的是图片的base64数据,所以需要结合writeFile()的API先把图片文件写入设置的用户路径,再用路径去调用保存相册API来完成保存操作。

是不是大家觉得这样写完就完事啦?当初我也以为是这样的,写完之后我自测了一下,一点按钮就会弹出“允许保存相册”的授权框,允许后图片就保存下来啦,爽歪歪~~

但是,在我再次自测的时候,点了按钮发现没有任何反应,然后通过fail的监听失败事件发现原来是因为我之前授权的时候选择了拒绝,然后点保存按钮,它就再也没询问我授权而是直接获取了之前拒绝的授权记录跳到失败去了。

好吧,掉进一个坑里,只能撸起袖子填了。既然拒绝授权被记录了,那有没有办法在每次点保存的时候查一下授权,如果未允许的就主动调起授权弹窗,这样就能保证未授权的会再次弹出授权弹窗,已授权的就正常调用API。

方法一:

使用wx.getSetting获取用户当前的授权状态,如果是未授权的,就使用 wx.authorize 向用户发起授权请求,这样是不是就能达到目的了。
很遗憾,经过实践之后发现在拒绝授权后使用这个方法,依然是不可行的,没有再重新调起授权弹窗了。(既然不成功,代码就不展示了)

再次经过百度,发现可以通过调用 wx.openSetting 打开设置界面,引导用户开启授权,这样拒绝的授权就可以调整过来啦。

方法二:

先附上代码:

<button hidden='{{!openSettingBtnHidden}}' class="default-btn" hover-class="default-btn-active" bindtap="saveInvoice">保存</button>
<button hidden='{{openSettingBtnHidden}}' class="default-btn" hover-class="default-btn-active" open-type="openSetting" bindopensetting='handleSetting'>去授权</button> 
 /*下载发票图片*/
  saveInvoice: function () {
    var self = this,
    timestamp = new Date().getTime(),
    file = wx.getFileSystemManager();
    file.writeFile({
      filePath: `${wx.env.USER_DATA_PATH}/invoice_${timestamp}.jpeg`,
      data: self.data.invoiceImg,
      encoding: 'base64',
      success: res => {
        self.saveToAlbum(timestamp);
      },
      fail: err => {
        showMsg('保存失败');
      }
    });
  },
  /*保存发票图片到用户相册,调用小程序API*/
  /*要考虑处理用户拒绝授权之后如何重新调起授权请求的问题*/
  saveToAlbum: function (timestamp) {
    var self = this;
    wx.saveImageToPhotosAlbum({
      filePath: `${wx.env.USER_DATA_PATH}/invoice_${timestamp}.jpeg`,
      success: res => {
        showMsg('图片已保存至相册');
      },
      fail: err => {
        console.log(err);
        if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny' || err.errMsg === 'saveImageToPhotosAlbum:fail:auth denied') {
          self.setData({
            openSettingBtnHidden: false
          });
          showMsg('已拒绝授权,请点击重新授权');
        } else {
          showMsg('保存失败');
        }
      }
    });
  },

  /*用户手动重新授权*/
  handleSetting: function(e) {
    var self = this;
    if (!e.detail.authSetting['scope.writePhotosAlbum']) {
      wx.showModal({
        title: '提示',
        content: '若不打开授权,则无法将图片保存在相册中!',
        showCancel: false
      });
      self.setData({
        openSettingBtnHidden: true
      })
    } else {
      wx.showModal({
        title: '提示',
        content: '您已授权,赶紧将图片保存在相册中吧!',
        showCancel: false
      })
      self.setData({
        openSettingBtnHidden: true
      })
    }
  } 

思路:

  1. 首先成功的逻辑还是保留,也就是如果第一次授权用户允许了,基本上逻辑还是一样的;
  2. 在调用wx.saveImageToPhotosAlbum()API中fail监听中添加判断逻辑,如果是因拒绝授权而失败的情况,就会提供重新授权的按钮。按钮使用open-type="openSetting"开放能力,点击就能调起打开授权设置界面,用户就可以修改授权。
    3.用户手动重新授权之后的处理逻辑,查询用户是否真的允许了某个授权,若是,则提示成功,让用户重新点击保存即可;若否,则提醒用户因其未授权导致无法使用保存功能。
收藏
评论区

相关推荐

Java中的浮点数四舍五入到小数点后2位的几种方法
前言 四舍五入到2或3个小数位是我们Java程序员日常开发中肯定会遇到。幸运的是,Java API提供了几种在Java中舍入数字的方法 我们可以使用Math.round(),BigDecimal或DecimalFormat将Java中的任何浮点数四舍五入到n个位置。我个人更喜欢使用BigDecimal在Java中四舍五入任何数字,因为它具有便捷的API并
微信小程序支付功能全流程实践
前言 微信小程序为电商类小程序,提供了非常完善、优秀、安全的支付功能。在小程序内可调用微信的API完成支付功能,方便、快捷。小程序开发者在开发小程序时,支付流程是必然要接触到,今天胡哥就小程序支付的全流程为大家一一细说,让小伙伴能快速得掌握小程序支付能力,避免踩坑! 知己知彼,方能百战不殆 小程序支付流程图 小程序支付交互流程图(https:/
Node.js爬虫实战 - 爬你喜欢的
前言 今天没有什么前言,就是想分享些关于爬虫的技术,任性。来吧,各位客官,里边请... 开篇第一问:爬虫是什么嘞? 首先咱们说哈,爬虫不是“虫子”,姑凉们不要害怕。 爬虫 一种通过一定方式按照一定规则抓取数据的操作或方法。 开篇第二问:爬虫能做什么嘞? 来来来,谈谈需求 产品MM: 1. 爱豆的新电影上架了,整体电影评价如何呢? 2. 暗
H5游戏开发:FC小蜜蜂 | Aotu.io「凹凸实验室」
H5游戏开发:FC小蜜蜂 by TH(https://github.com/ONESUNDAY) on 20180128 使用 Phaser 游戏引擎开发,主要
微信小程序部分api 会触发 onShow onHide
解决部分api触发小程序 onShow onHide 首先要明白 微信小程序的 onShow() onHide()分为页面级的和应用级的,应用级的就是app.js里面的那几个,页面级的就是pages里的 当使用了下列api时,均会触发页面级和应用级的onShow onHide 1. 点击右上角小圆点关闭小程序。 2. 图片预览:wx.preview
笔趣阁小说api
笔趣阁api小说api,提供小说相关api接口,目前支持笔趣阁(https://m.bqkan.com/)。ip地址:http://49.234.123.245:8082 笔趣阁(https://m.bqkan.com/) 1. 首页 ip/getHome 2. 小说分类 ip/
微信小程序 - 路由实践
欢迎来到我博客阅读:1\. 前言在微信小程序由一个 App()实例,和众多Page()组成。而在小程序中所有页面的路由全部由框架进行管理,框架以栈的形式维护了所有页面,然后提供了以下 API 来进行路由之间的跳转:1. wx.navigateTo2. wx.redirectTo3. wx.navigateBack4.
小程序 - 保存图片到相册
在做小程序项目的时候,有需求要做一个开票功能,开票之后自然就需要查看发票,在让后台做成图片返回之后,我想了一下,查看发票除了需要看发票图片,提供预览图片可以放大缩小看外,最好应该还要有一个保存图片的功能吧。 刚好微信小程序提供了预览和保存相册两个API,就正好用上。因为预览比较简单,我就只是把保存相册的开发流程写下来,供大家也供自己往后参考了,有什
uni-app - 实现热更新及时提醒用户更新
1.原因分析在小程序更新开发版本之后,用户本地并没有对之前版本的小程序进行删除,那么再进入小程序的时候的版本是不会发生变化的,这是由于发版是异步执行,因此新版本将会覆盖的比较慢,本质是小程序的启动方式分为两种,冷启动与热启动。冷启动:指的是用户首次打开或小程序被微信主动销毁后再次打开的情况,此时小程序需要重新加载启动。 热启动:指用户已经打开过某
微信小程序 - 生命周期篇
为什么需要掌握小程序的生命周期当你的领导张小三给你说: 这个请求应该在应用启动的时候发起呢 页面跳转的时候就要取消异步任务哦 应用隐藏的时候记得关闭一下定时器哈那时候的你会一脸懵逼和不知所措还无从下手吗综上所述:我们理所当然的要对微信小程序的生命周期做到滚瓜烂熟,只有这样才能让领
小程序静默登录与维护自定义登录态
1.背景在小程序中,openid是一个用户对于一个小程序/公众号的标识,开发者可以通过这个标识识别出用户,就如同你的身份证一样。2.什么是静默登录?在普通的应用中,用户通过表单验证登录建立用户体系,这种常见的登录方式一般是通过登录页面表单进行登录,对用户来说是有感的。 在小程序中,由于是基于微信,可以通过微信官方提供的API能力,使我们能够无感知得获取
微信小程序体验composition-api(类似vue3)
微信小程序compositionapi用该是什么样子? 使用使用起来应该像是这个样子wxue(options) setup配置应该是包含一个setup选项是一个函数,返回的函数可以this.xxx调用,返回的数据可以this.data.xxx用到,如下import wxue, reactive from 'wxue'wxue( setup(option
Frida在windows上的玩法
一、目标frida玩了很久,andriod和ios下都玩的不错。不过飞哥其实是混windows出道的,那frida能不能分析winPE呢?今天介绍下Windows下的玩法,要点如下: Hook Windows Api 修改参数和返回值 主动调用Windows Api 二、步骤 打开心爱的MFC写个demo小程序,密码是 1234 ,输入正确提示 "密码正确"
JAVA回调机制(CallBack)之小红是怎样买到房子的??
JAVA回调机制CallBack 序言最近学习java,接触到了回调机制(CallBack)。初识时感觉比较混乱,而且在网上搜索到的相关的讲解,要么一言带过,要么说的比较单纯的像是给CallBack做了一个定义。当然了,我在理解了回调之后,再去看网上的各种讲解,确实没什么问题。但是,对于初学的我来说,缺了一个循序渐进的过程。此处,将我对回调机制的个人理解,按
小红书很难爬?最新爬取方法教给你啦~
Python进击者第184篇原创文章前言大家好,我是Kuls。之前写的那篇App抓包软件charles的配置说过,超过30在看,马上更下一篇。所以加班加点给大家写了今天这篇文章。本文将会带着大家完完整整的爬取小红书的全过程 小红书需要做的前提工作就是装配好mitmproxy具体的配置过程,我建议大家参照崔大写的来进行安装https://zhuanlan.z