微信小程序长按实现保存图片到手机相册

---

前言

今天上午刚写出来的，网上搜的资料，主要是微信小程序中有支付的功能，但是微信小程序只能扫描小程序的二维码，对其他类型的二维码不起作用，所以就改变了一下方案:长按图片保存到手机，然后通过手机扫描二维码实现支付

提示：以下是本篇文章正文内容，下面案例可供参考

实现方法

wxml文件：在需要的地方添加长按事件bindlongpress，通过data-url将图片路径传到长按事件中

//wxml
<image src="{{url}}" data-url="{{url}}" bindlongpress="saveImage"></image>

注意事项：
1、文档中有说明，调用wx.saveImageToPhotosAlbum之前需要用户授权scope.writePhotosAlbum，如图一
2、图片文件路径不支持网络路径(如图一)，所以我们可以用支持网络路径的wx.getImageInfo(Object object)去获取图片的信息，并且它返回的图片路径是本地路径，这样就可以把返回的本地路径拿去给wx.saveImageToPhotosAlbum用(如图二)

图一：

图二：

下面，就是实现的代码了

Page({
  data: {
      url:"https://wechat.weixinzjit.com/costa/public/uploads/images/20190109/67b16149693920598435315fd0d5ab3e.jpg"
  },
  // 长按保存图片
  saveImg(e){
    let url = e.currentTarget.dataset.url;
    //用户需要授权
    wx.getSetting({
      success: (res) => {
        if (!res.authSetting['scope.writePhotosAlbum']) {
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success:()=> {
              // 同意授权
              this.saveImg1(url);
            },
            fail: (res) =>{
              console.log(res);
            }
          })
        }else{
          // 已经授权了
          this.saveImg1(url);//用户授权后，调用saveImg()方法，进行图片的保存
        }
      },
      fail: (res) =>{
        console.log(res);
      }
    })   
  },
  saveImg1(url){
    wx.getImageInfo({
      src: url,
      success:(res)=> {
        let path = res.path;
        wx.saveImageToPhotosAlbum({
          filePath:path,
          success:(res)=> { 
            console.log(res);
          },
          fail:(res)=>{
            console.log(res);
          }
        })
      },
      fail:(res)=> {
        console.log(res);
      }
    })
  },
})

总结

以上，就是本篇博客要分享的所有内容了，如果对你有用，欢迎在下方点赞或评论，如果有大佬有更好的方法，欢迎评论区畅所欲言哟~