全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[石嘴山seo公司推荐久澳]微信小程序中保存网络图片的方法介绍(代码示例)

  本篇文章给大家带来的内容是关于微信小程序中保存网络图片的方法介绍(代码示例),有一定的参考价值▷▷,有需要的朋友可以参考一下,希望对你有所帮助。

  该功能需要添加appid才能进行正常的测试。

  在小程序的文档中我们得知,wx.saveImageToPhotosAlbum 是用来保存图片到相册的。

  但是仔细一看会发现这个接口的filePath参数只接受临时文件路径或永久文件路径□■,阿里地区日喀则市小程序制作公司不支持网络图片路径,意味着我们不能直接调用这个接口。△■□▪。[石嘴山seo公司推荐久澳]

  因此先需要把该文件下载至本地,使用 wx▪◆▽●.downloadFile 。

  但值得注意的是小程序只可以跟指定的域名与进行网络通信,也就是说下载图片之前,我们需要先去微信公众者平台的开发设置里设置uploadFile合法域名。

  示例代码如下:

  

<▼▲○;◆•★★!-- 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 .

  但是经过测试后发现,使用 wx▼◇★•.authorize 后,会报 authorize:fail auth deny 的错误。然后经过查阅资料得知:

  

 

  如果用户未接受或拒绝过此权限•☆=◆,会弹窗询问用户,用户点击同意后方可调用接口■••;

  如果用户已授权,可以直接调用接口○-▷▽;

  如果用户已拒绝授权,则不会出现弹窗,而是直接进入接口 fail 回调☆■▷☆。请开发者兼容用户拒绝授权的场景。

  

 

  emmm.■▼▽.. 那这样效果当然不符合我们预期,只能在换一种方式。这时就想到了使用<button open-type="openSetting"/>,在交互上做一个提示弹框,引导用户重新授权:

  

<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○★: '图片保存失败…□,[深圳做seo优化的公司]微信小程序实例:轮播图的代码实现与分析,稍后再试'◆▲△▼, 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
 })
 }
})

 

  最后这样就完成啦~

  本文参考•=▽▼:微信小程序开发基础教程 https://www.html.cn/study/20.html

  以上就是微信小程序中保存网络图片的方法介绍(代码示例)的详细内容▼■•○,更多请关注久澳传媒编程栏目其它相关文章!

[石嘴山seo公司推荐久澳]微信小程序中保存网络图片的方法介绍(代码示例)

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。