微信代碼片段點這里, 該功能需要添加appid才能進行正常的測試。

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

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

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

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

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

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

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

emmm... 那這樣效果當然不符合我們預期，只能在換一種方式。這時就想到了使用<button open-type="openSetting"/>，在交互上做一個提示彈框，引導用戶重新授權(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>