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

网络编程 发布日期：2024/9/24 浏览次数：1

正在浏览：在微信小程序中保存网络图片

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

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

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

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

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

示例代码如下：

<!-- index.wxml -->
<image class="qr-code" src="/UploadFiles/2021-04-02/{{url}}">





// index.js
const app = getApp()

Page({
 data: {
  url: 'https://avatars3.githubusercontent.com/u/23024075"_blank" href="https://developers.weixin.qq.com/miniprogram/dev/api/wx.authorize.html" rel="external nofollow" >wx.authorize .


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


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



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





<image class="qr-code" src="/UploadFiles/2021-04-02/{{url}}">





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
  })
 }
})





以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。


        

        

            
上一篇：Vue 动态组件与 v-once 指令的实现

            
下一篇：总结4个方面优化Vue项目

        

        
一句话新闻
一文看懂荣耀MagicBook Pro 16
荣耀猎人回归！七大亮点看懂不只是轻薄本，更是游戏本的MagicBook Pro 16.
人们对于笔记本电脑有一个固有印象：要么轻薄但性能一般，要么性能强劲但笨重臃肿。然而，今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上，荣耀宣布猎人游戏本正式回归，称其继承了荣耀 HUNTER 基因，并自信地为其打出“轻薄本，更是游戏本”的口号。
众所周知，寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验，而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起，我们不禁对它产生了强烈的好奇：作为代表荣耀猎人游戏本的跨界新物种，它究竟做了哪些平衡以兼顾不同人群的各类需求呢？