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


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 保存数组到Cookie的代码
Apr 14 Javascript
js确认删除对话框效果的示例代码
Feb 20 Javascript
javascript中String对象的slice()方法分析
Dec 20 Javascript
jQuery替换textarea中换行的方法
Jun 10 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
Jul 18 Javascript
js实现网页多级级联菜单代码
Aug 20 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 Javascript
浅谈JS函数节流防抖
Oct 18 Javascript
给localStorage设置一个过期时间的方法分享
Nov 06 Javascript
JavaScript变量提升和严格模式实例分析
Jan 27 Javascript
微信小程序商品详情页底部弹出框
Nov 22 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
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
PHP 文件上传进度条的两种实现方法的代码
2007/11/25 PHP
php access 数据连接与读取保存编辑数据的实现代码
2010/05/12 PHP
php抓取网站图片并保存的实现方法
2015/10/29 PHP
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
用js生产批量批处理执行命令
2008/07/28 Javascript
几个比较实用的JavaScript 测试及效验工具
2010/04/18 Javascript
IE8 中使用加速器(Activities)
2010/05/14 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
2013/11/18 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
2013/12/13 Javascript
js实现编辑div节点名称的方法
2014/12/17 Javascript
jQuery EasyUI中DataGird动态生成列的方法
2016/04/05 Javascript
js添加绑定事件的方法
2016/05/15 Javascript
JS实现全屏的四种写法
2016/12/30 Javascript
详解angular中如何监控dom渲染完毕
2017/01/03 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
AngularJS constant和value区别详解
2017/02/28 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
微信小程序页面渲染实现方法
2019/11/06 Javascript
[01:10:27]DOTA2-DPC中国联赛正赛 SAG vs XG BO3 第二场 3月5日
2021/03/11 DOTA
Python设计模式中单例模式的实现及在Tornado中的应用
2016/03/02 Python
详解pandas.DataFrame中删除包涵特定字符串所在的行
2019/04/04 Python
python七夕浪漫表白源码
2019/04/05 Python
python2.7 安装pip的方法步骤(管用)
2019/05/05 Python
Django1.11配合uni-app发起微信支付的实现
2019/10/12 Python
有趣的Python图片制作之如何用QQ好友头像拼接出里昂
2020/04/22 Python
一篇文章教你用python画动态爱心表白
2020/11/22 Python
美国领先的家庭智能音响系统品牌:Sonos
2018/07/20 全球购物
医学院护理专业应届生求职信
2013/11/12 职场文书
妈妈的账单教学反思
2014/02/06 职场文书
先进事迹报告会主持词
2014/04/02 职场文书
幼儿园小班教师寄语
2014/04/03 职场文书
高三英语教学计划
2015/01/23 职场文书
2015年宣传思想工作总结
2015/05/22 职场文书
人力资源部工作计划
2019/05/14 职场文书
聊聊SpringBoot自动装配的魔力
2021/11/17 Java/Android