wxml部分的代碼
<view class="footer-r" bindtap="save">
<image src="../../../images/icons/zhiwen.svg" />
<view class="footer-r-t">
<text>點擊保存到相冊</text>
<text class="t">享更多優惠</text>
</view>
</view>
wxsl部分的代碼
.footer-r {
width: 50%;
display: flex;
flex-direction: column;
}
.footer-r image {
margin: 0 auto;
width: 180rpx;
height: 180rpx;
}
.footer-r-t {
margin-left: 20rpx;
font-size: 26rpx;
padding-top: 20rpx;
display: flex;
flex-direction: column;
text-align: center;
}
js部分的代碼
//點擊保存圖片
save() {
let that = this
//若二維碼未加載完畢，加個動畫提高用戶體驗
wx.showToast({
icon: 'loading',
title: '正在保存圖片',
duration: 1000
})
//判斷用戶是否授權"保存到相冊"
wx.getSetting({
success(res) {
//沒有權限，發起授權
if (!res.authSetting['scope.writePhotosAlbum']) {
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() { //用戶允許授權，保存圖片到相冊
that.savePhoto();
},
fail() { //用戶點擊拒絕授權，跳轉到設置頁，引導用戶授權
wx.openSetting({
success() {
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() {
that.savePhoto();
}
})
}
})
}
})
} else { //用戶已授權，保存到相冊
that.savePhoto()
}
}
})
},
//下載圖片地址並保存到相冊，提示保存成功
savePhoto() {
let that = this
wx.downloadFile({
// 圖片下載地址
url: 'https://bhb.hvateng.com/public/static/baiheba/img/qrcode344.jpg',
// url: app.apiUrl.url + 'Userequity/poster',
success: function(res) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
wx.showToast({
title: '保存成功',
icon: "success",
duration: 1000
})
}
})
}
})
}