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


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 相关文章推荐
基于Asp.net与Javascript控制的日期控件
May 22 Javascript
单击按钮显示隐藏子菜单经典案例
Jan 04 Javascript
js css后面所带参数含义介绍
Aug 18 Javascript
JSON+Jquery省市区三级联动
Jan 13 Javascript
js与jquery分别实现tab标签页功能的方法
Nov 18 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
Nov 26 Javascript
Vue.js实现价格计算器功能
Mar 30 Javascript
jquery实现楼层滚动效果
Jan 01 jQuery
vue实现简单loading进度条
Jun 06 Javascript
解决vue 绑定对象内点击事件失效问题
Sep 05 Javascript
用node开发并发布一个cli工具的方法步骤
Jan 03 Javascript
es6数组之扩展运算符操作实例分析
Apr 25 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
snoopy PHP版的网络客户端提供本地下载
2008/04/15 PHP
PHP的SQL注入过程分析
2012/01/06 PHP
PHP Warning: PHP Startup: Unable to load dynamic library \ D:/php5/ext/php_mysqli.dll\
2012/06/17 PHP
PHP实现把数字ID转字母ID
2013/08/12 PHP
YII使用url组件美化管理的方法
2015/12/28 PHP
php metaphone()函数的定义和用法
2016/05/15 PHP
php多文件打包下载的实例代码
2017/07/12 PHP
对laravel in 查询的使用方法详解
2019/10/09 PHP
基于jQuery的消息提示插件 DivAlert之旅(二)
2010/04/01 Javascript
轻轻松松学JS调试(不下载任何工具)
2010/04/14 Javascript
一个JavaScript去除字符串末尾的空白实例代码
2014/09/22 Javascript
微信QQ的二维码登录原理js代码解析
2016/06/23 Javascript
js插件dropload上拉下滑加载数据实例解析
2016/07/27 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
2017/12/26 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
使用express+multer实现node中的图片上传功能
2018/02/02 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
2018/09/21 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
jQuery实现的隔行变色功能【案例】
2019/02/18 jQuery
通过Py2exe将自己的python程序打包成.exe/.app的方法
2018/05/26 Python
pandas 使用均值填充缺失值列的小技巧分享
2019/07/04 Python
python实现大战外星人小游戏实例代码
2019/12/26 Python
在flask中使用python-dotenv+flask-cli自定义命令(推荐)
2020/01/05 Python
在keras中获取某一层上的feature map实例
2020/01/24 Python
python 插入日期数据到Oracle实例
2020/03/02 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
python statsmodel的使用
2020/12/21 Python
意大利婴儿产品网上商店:Mukako
2018/10/14 全球购物
荷兰浴室和卫浴网上商店:Badkamerxxl.nl
2020/10/06 全球购物
西班牙品牌鞋子、服装和配饰在线商店:Esdemarca
2021/02/17 全球购物
财务工作者先进事迹材料
2014/01/17 职场文书
车间主任岗位职责
2014/03/16 职场文书
2014年煤矿工作总结
2014/11/24 职场文书
交通事故和解协议书
2015/01/27 职场文书
商场营业员岗位职责
2015/04/14 职场文书
入党后的感想
2015/08/10 职场文书