微信小程序|小程序开发
微信开发,微信小程序,小程序
微信小程序-小程序开发
本篇文章给大家带来的内容是关于微信小程序中保存网络图片的方法介绍（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
浪漫表白视频网站源码,ubuntu如何卸载包,java爬虫网页请求,php date 数字,seo营销专家lzw
该功能需要添加appid才能进行正常的测试。
html5小游戏源码 ,ubuntu国内最快源,淘宝爬虫ip池,php ascii(),云seo 运营lzw
在小程序的文档中我们得知，wx.saveImageToPhotosAlbum 是用来保存图片到相册的。
凡科源码 免费源代码,vscode7个必备插件,ubuntu ssh乱码,tomcat请求转发代理,防止爬虫手段,php学习交流,濮阳企业抖音seo获客,phpweb网站后台怎么添加关键词lzw
但是仔细一看会发现这个接口的filePath参数只接受临时文件路径或永久文件路径，不支持网络图片路径，意味着我们不能直接调用这个接口。。
因此先需要把该文件下载至本地，使用 wx.downloadFile 。
但值得注意的是小程序只可以跟指定的域名与进行网络通信，也就是说下载图片之前，我们需要先去微信公众者平台的开发设置里设置uploadFile合法域名。
示例代码如下：
// index.jsconst app = getApp()Page({ data: { url: /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: one });}).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 的错误。然后经过查阅资料得知：
emmm… 那这样效果当然不符合我们预期，只能在换一种方式。这时就想到了使用，在交互上做一个提示弹框，引导用户重新授权：
这是一段提示用户授权的提示语
const app = getApp()Page({ data: { url: /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: one, });}).catch(({ errMsg }) => { console.log(errMsg) // if (~errMsg.indexOf(cancel)) return; if (!~errMsg.indexOf(auth)) {wx.showToast({ title: 图片保存失败，稍后再试, icon: one }); } 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 }) }})
最后这样就完成啦~
本文参考：微信小程序开发基础教学 /study/20.html
