在微信小程序中保存网络图片


Posted in Javascript onFebruary 12, 2019

微信代码片段点这里, 该功能需要添加appid才能进行正常的测试。

在小程序的文档中我们得知,wx.saveImageToPhotosAlbum 是用来保存图片到相册的。

但是仔细一看会发现这个接口的filePath参数只接受临时文件路径或永久文件路径,不支持网络图片路径,意味着我们不能直接调用这个接口。。

因此先需要把该文件下载至本地,使用 wx.downloadFile 。

但值得注意的是小程序只可以跟指定的域名与进行网络通信,也就是说下载图片之前,我们需要先去微信公众者平台的开发设置里设置uploadFile合法域名。

示例代码如下:

<!-- index.wxml -->
<image class="qr-code" src="{{url}}" mode="aspectFill" />
<button class="text" bindtap="saveImage">保存图片</button>
// index.js
const app = getApp()

Page({
 data: {
  url: 'https://avatars3.githubusercontent.com/u/23024075?s=460&v=4'
 },

 // 保存图片
 saveImage() {
  this.wxToPromise('downloadFile', {
    url: this.data.url
   })
   .then(res => this.wxToPromise('saveImageToPhotosAlbum', {
    filePath: res.tempFilePath
   }))
   .then(res => {
    // do something
    wx.showToast({ title: '保存成功~',icon: 'none' });
   })
   .catch(err) => {
    console.log(err);

    // 如果是用户自己取消的话保存图片的话
    // if (~err.errMsg.indexOf('cancel')) return;
   })
 },

 /**
  * 将 callback 转为易读的 promise
  * @returns [promise]
  */
 wxToPromise(method, opt) {
  return new Promise((resolve, reject) => {
   wx[method]({
    ...opt,
    success(res) {
     opt.success && opt.success();
     resolve(res)
    },
    fail(err) {
     opt.fail && opt.fail();
     reject(err)
    }
   })
  });
 },
})

然后理论上就可以保存图片了... 用户第一次在我们的小程序使用保存图片这个功能是会弹出一个授权弹框,如果用户手滑点了拒绝授权后再点一次保存图片,然后就会发现什么反应都没有了。。。

出现这样的原因是因为这个授权弹框只会出现一次,所以我们得想办法再让用户重新授权一次。这时就想到使用 wx.authorize .

但是经过测试后发现,使用 wx.authorize 后,会报 authorize:fail auth deny 的错误。然后经过查阅资料得知:

  • 如果用户未接受或拒绝过此权限,会弹窗询问用户,用户点击同意后方可调用接口;
  • 如果用户已授权,可以直接调用接口;
  • 如果用户已拒绝授权,则不会出现弹窗,而是直接进入接口 fail 回调。请开发者兼容用户拒绝授权的场景。

emmm... 那这样效果当然不符合我们预期,只能在换一种方式。这时就想到了使用<button open-type="openSetting"/>,在交互上做一个提示弹框,引导用户重新授权:

<image class="qr-code" src="{{url}}" mode="aspectFill" />
<button class="text" bindtap="saveImage">保存图片</button>

<!-- 简陋版提示 -->
<view wx:if="{{showDialog}}" class="dialog-wrap">
 <view class="dialog">
  这是一段提示用户授权的提示语
  <view class="dialog-footer">
   <button
    class="btn"
    open-type="openSetting"
    bindtap="confirm" >
     授权
   </button>
   <button class="btn" bindtap="cancel">取消</button>
  </view>
 </view>
</view>
const app = getApp()

Page({
 data: {
  url: 'https://avatars3.githubusercontent.com/u/23024075?s=460&v=4',
  showDialog: false,
 },

 saveImage() {
  this.wxToPromise('downloadFile', {
    url: this.data.url
   })
   .then(res => this.wxToPromise('saveImageToPhotosAlbum', {
    filePath: res.tempFilePath
   }))
   .then(res => {
    console.log(res);
    // this.hide();
    wx.showToast({
     title: '保存成功~',
     icon: 'none',
    });
   })
   .catch(({ errMsg }) => {
    console.log(errMsg)
    // if (~errMsg.indexOf('cancel')) return;
    if (!~errMsg.indexOf('auth')) {
     wx.showToast({ title: '图片保存失败,稍后再试', icon: 'none' });
    } else {
     // 调用授权提示弹框
     this.setData({
      showDialog: true
     })
    };
   })
 },

 // callback to promise
 wxToPromise(method, opt) {
  return new Promise((resolve, reject) => {
   wx[method]({
    ...opt,
    success(res) {
     opt.success && opt.success();
     resolve(res)
    },
    fail(err) {
     opt.fail && opt.fail();
     reject(err)
    }
   })
  });
 },

 confirm() {
  this.setData({
   showDialog:false
  })
 },

 cancel() {
  this.setData({
   showDialog: false
  })
 }
})

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

Javascript 相关文章推荐
一个javascript图片阅览组件
Nov 09 Javascript
jQuery Ajax()方法使用指南
Nov 19 Javascript
js获取当前时间显示在页面上并每秒刷新
Dec 24 Javascript
jQuery插件StickUp实现网页导航置顶
Apr 12 Javascript
ES6所改良的javascript“缺陷”问题
Aug 23 Javascript
Vue之Watcher源码解析(1)
Jul 19 Javascript
如何使用JS在HTML中自定义字符串格式化
Jul 20 Javascript
AngularJS实现注册表单验证功能
Oct 16 Javascript
AngularJS 教程及实例代码
Oct 23 Javascript
对layui中表单元素的使用详解
Aug 15 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
小程序实现横向滑动日历效果
Oct 21 Javascript
VUE中使用MUI方法
Feb 12 #Javascript
如何利用ES6进行Promise封装总结
Feb 11 #Javascript
在vue项目中引入vue-beauty操作方法
Feb 11 #Javascript
Vue表单控件绑定图文详解
Feb 11 #Javascript
图文讲解vue的v-if使用方法
Feb 11 #Javascript
ES6 如何改变JS内置行为的代理与反射
Feb 11 #Javascript
ES6 更易于继承的类语法的使用
Feb 11 #Javascript
You might like
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
php 可变函数使用小结
2018/06/12 PHP
让插入到 innerHTML 中的 script 跑起来的实现代码
2006/07/01 Javascript
借用Google的Javascript API Loader来加速你的网站
2009/01/28 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
2013/04/02 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
浅析JS中document对象的一些重要属性
2014/03/06 Javascript
jquery实现的省市区三级联动
2015/04/02 Javascript
Jquery全选与反选点击执行一次的解决方案
2015/08/14 Javascript
jQuery unbind 删除绑定事件详解
2016/05/24 Javascript
vue.js绑定class和style样式(6)
2016/12/09 Javascript
TypeScript入门-接口
2017/03/30 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
2017/04/01 Javascript
最基础的vue.js双向绑定操作
2017/08/23 Javascript
Three.js利用顶点绘制立方体的方法详解
2017/09/27 Javascript
vue计算属性无法监听到数组内部变化的解决方案
2019/11/06 Javascript
vue 项目软键盘回车触发搜索事件
2020/09/09 Javascript
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
[42:00]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第一场 12.13
2020/12/17 DOTA
python实现在控制台输入密码不显示的方法
2015/07/02 Python
python设计模式大全
2016/06/27 Python
pandas对dataFrame中某一个列的数据进行处理的方法
2019/07/08 Python
Python如何获取Win7,Win10系统缩放大小
2020/01/10 Python
Python TKinter如何自动关闭主窗口
2020/02/26 Python
浅谈Python线程的同步互斥与死锁
2020/03/22 Python
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
HTML5 在canvas中绘制文本附效果图
2014/06/23 HTML / CSS
Discard Protocol抛弃协议的作用是什么
2015/10/10 面试题
Linux如何压缩可执行文件
2014/03/27 面试题
食品行业求职人的自我评价
2014/01/19 职场文书
服务员自我评价
2014/01/25 职场文书
今冬明春火灾防控工作方案
2014/05/29 职场文书
五星级酒店前台接待岗位职责
2015/04/02 职场文书
工作失职自我检讨书
2015/05/05 职场文书
关于销售人员的年终工作总结要点
2019/08/15 职场文书
PHP使用非对称加密算法RSA
2021/04/21 PHP