微信小程序点击保存图片到相册

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

})

}

})

}

})

}