在微信小程序中保存网络图片
(编辑:jimmy 日期: 2024/11/29 浏览:3 次 )
微信代码片段点这里, 该功能需要添加appid才能进行正常的测试。
在小程序的文档中我们得知,wx.saveImageToPhotosAlbum 是用来保存图片到相册的。
但是仔细一看会发现这个接口的filePath参数只接受临时文件路径或永久文件路径,不支持网络图片路径,意味着我们不能直接调用这个接口。。
因此先需要把该文件下载至本地,使用 wx.downloadFile 。
但值得注意的是小程序只可以跟指定的域名与进行网络通信,也就是说下载图片之前,我们需要先去微信公众者平台的开发设置里设置uploadFile合法域名。
示例代码如下:
<!-- index.wxml --> <image class="qr-code" src="/UploadFiles/2021-04-02/{{url}}">上一篇:Vue 动态组件与 v-once 指令的实现// index.js const app = getApp() Page({ data: { url: 'https://avatars3.githubusercontent.com/u/23024075"_blank" href="https://developers.weixin.qq.com/miniprogram/dev/api/wx.authorize.html" rel="external nofollow" >wx.authorize .但是经过测试后发现,使用 wx.authorize 后,会报 authorize:fail auth deny 的错误。然后经过查阅资料得知:
- 如果用户未接受或拒绝过此权限,会弹窗询问用户,用户点击同意后方可调用接口;
- 如果用户已授权,可以直接调用接口;
- 如果用户已拒绝授权,则不会出现弹窗,而是直接进入接口 fail 回调。请开发者兼容用户拒绝授权的场景。
emmm... 那这样效果当然不符合我们预期,只能在换一种方式。这时就想到了使用<button open-type="openSetting"/>,在交互上做一个提示弹框,引导用户重新授权:
<image class="qr-code" src="/UploadFiles/2021-04-02/{{url}}">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 }) } })以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:总结4个方面优化Vue项目