本篇文章給大家?guī)淼膬?nèi)容是關(guān)于微信小程序中保存網(wǎng)絡(luò)圖片的方法介紹（代碼示例），有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對你有所幫助。

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

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

但是仔細(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.jsconst 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)過測試后發(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)。請開發(fā)者兼容用戶拒絕授權(quán)的場景。

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><!-- 簡陋版提示 --><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    })  }})              
              

            
微信開發(fā),微信小程序,小程序