微信代码片段点这里 , 该功能需要添加 在小程序的文档中我们得知, wx.saveImageToPhotosAlbum 是用来保存图片到相册的。 但是仔细一看会发现这个接口的 因此先需要把该文件下载至本地,使用 wx.downloadFile 。 但值得注意的是 小程序只可以跟指定的域名与进行网络通信 ,也就是说下载图片之前,我们需要先去 微信公众者平台 的开发设置里设置 示例代码如下: <!-- 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 . 但是经过测试后发现,使用
emmm... 那这样效果当然不符合我们预期,只能在换一种方式。这时就想到了使用 <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
})
}
})
最后这样就完成啦~ |
温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。
- 微信扫描二维码关注官方微信
- ▲长按图片识别二维码