微信小程序中保存网络图片的方法介绍（代码示例）

142 阅读 0 评论 94 点赞

我是靠谱客的博主单纯小熊猫，最近开发中收集的这篇文章主要介绍微信小程序中保存网络图片的方法介绍（代码示例），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本篇文章给大家带来的内容是关于微信小程序中保存网络图片的方法介绍（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

该功能需要添加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 的错误。然后经过查阅资料得知：

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
    })
  }
})
登录后复制

最后这样就完成啦~

本文参考：微信小程序开发基础教程 https://www.html.cn/study/20.html

以上就是微信小程序中保存网络图片的方法介绍（代码示例）的详细内容，更多请关注靠谱客其它相关文章！