在微信小程式中儲存網路圖片
摘要：
微信程式碼片段點這裡
,該功能需要新增appid
才能進行正常的測試。
在小程式的文件中我們得知，wx.saveImageToPhotosAlbum
是用來儲存圖片到相簿的。
但是仔細一看會發現這個介面的filePath
引數只接受臨時...
微信程式碼片段點這裡
,該功能需要新增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
的錯誤。然後經過查閱資料得知：
- 如果使用者未接受或拒絕過此許可權，會彈窗詢問使用者，使用者點選同意後方可呼叫介面；
- 如果使用者已授權，可以直接呼叫介面；
- 如果使用者已拒絕授權，則不會出現彈窗，而是直接進入介面 fail 回撥。請開發者相容使用者拒絕授權的場景。
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
})
}
})
最後這樣就完成啦~