小編給大家分享一下微信小程序中如何保存網(wǎng)絡(luò)圖片，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

站在用戶的角度思考問題，與客戶深入溝通，找到長(zhǎng)葛網(wǎng)站設(shè)計(jì)與長(zhǎng)葛網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、申請(qǐng)域名、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋長(zhǎng)葛地區(qū)。

該功能需要添加appid才能進(jìn)行正常的測(cè)試。

在小程序的文檔中我們得知，wx.saveImageToPhotosAlbum 是用來保存圖片到相冊(cè)的。

但是仔細(xì)一看會(huì)發(fā)現(xiàn)這個(gè)接口的filePath參數(shù)只接受臨時(shí)文件路徑或永久文件路徑，不支持網(wǎng)絡(luò)圖片路徑，意味著我們不能直接調(diào)用這個(gè)接口。。

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

但值得注意的是小程序只可以跟指定的域名與進(jìn)行網(wǎng)絡(luò)通信，也就是說下載圖片之前，我們需要先去微信公眾者平臺(tái)的開發(fā)設(shè)置里設(shè)置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 轉(zhuǎn)為易讀的 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)
        }
      })
    });
  },
})

然后理論上就可以保存圖片了... 用戶第一次在我們的小程序使用保存圖片這個(gè)功能是會(huì)彈出一個(gè)授權(quán)彈框，如果用戶手滑點(diǎn)了拒絕授權(quán)后再點(diǎn)一次保存圖片，然后就會(huì)發(fā)現(xiàn)什么反應(yīng)都沒有了。。。

出現(xiàn)這樣的原因是因?yàn)檫@個(gè)授權(quán)彈框只會(huì)出現(xiàn)一次，所以我們得想辦法再讓用戶重新授權(quán)一次。這時(shí)就想到使用 wx.authorize .

但是經(jīng)過測(cè)試后發(fā)現(xiàn)，使用 wx.authorize 后，會(huì)報(bào) authorize:fail auth deny 的錯(cuò)誤。然后經(jīng)過查閱資料得知：

如果用戶未接受或拒絕過此權(quán)限，會(huì)彈窗詢問用戶，用戶點(diǎn)擊同意后方可調(diào)用接口；

如果用戶已授權(quán)，可以直接調(diào)用接口；

如果用戶已拒絕授權(quán)，則不會(huì)出現(xiàn)彈窗，而是直接進(jìn)入接口 fail 回調(diào)。請(qǐng)開發(fā)者兼容用戶拒絕授權(quán)的場(chǎng)景。

emmm... 那這樣效果當(dāng)然不符合我們預(yù)期，只能在換一種方式。這時(shí)就想到了使用<button open-type="openSetting"/>，在交互上做一個(gè)提示彈框，引導(dǎo)用戶重新授權(quán)：

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

<!-- 簡(jiǎn)陋版提示 -->
<view wx:if="{{showDialog}}" class="dialog-wrap">
  <view class="dialog">
    這是一段提示用戶授權(quán)的提示語
    <view class="dialog-footer">
      <button
        class="btn"
        open-type="openSetting"
        bindtap="confirm" >
         授權(quán)
      </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 {
          // 調(diào)用授權(quán)提示彈框
          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
    })
  }
})

最后這樣就完成啦~

看完了這篇文章，相信你對(duì)“微信小程序中如何保存網(wǎng)絡(luò)圖片”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)站欄目：微信小程序中如何保存網(wǎng)絡(luò)圖片
文章網(wǎng)址：http://aaarwkj.com/article46/gpiehg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)、虛擬主機(jī)、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)