微信代碼片段點這里, 該功能需要添加appid才能進行正常的測試。
在小程序的文檔中我們得知，wx.saveImageToPhotosAlbum 是用來保存圖片到相冊的。
但是仔細一看會發現這個接口的filePath參數只接受臨時文件路徑或永久文件路徑，不支持網絡圖片路徑，意味著我們不能直接調用這個接口。。
因此先需要把該文件下載至本地，使用 wx.downloadFile 。
但值得注意的是小程序只可以跟指定的域名與進行網絡通信，也就是說下載圖片之前，我們需要先去微信公眾者平臺的開發設置里設置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 轉為易讀的 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 }) }})以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
