小程序模板网

微信小程序图片保存到本地

发布时间:2021-06-21 09:53 所属栏目:小程序开发教程

微信小程序图片保存到本地是一个常用功能:

这里讲解下完整实现思路:

  因为微信官方的授权只弹一次,用户拒绝后再次调用,就需要结合button组件的微信开放能力来调起,以下方案在微信各种授权中可参考。

  wxml部分:一个保存图片按钮(A),一个button组件(B)用来触发授权,B透明度为0,盖在A上,用一个变量来控制是否存在页面中。
 

<view class='btn ' bindtap='saveImg'>保存</view>
<button class='openSetting' open-type="openSetting" bindopensetting='handleSetting' hidden='{{openSettingBtnHidden}}'>授权</button>

 js中:
 
data:{
  openSettingBtnHidden: true,//是否授权
  imgUrl: '图片地址'
},

// 保存图片
  saveImg:function(e){
    let that = this;

    //获取相册授权
    wx.getSetting({
      success(res) {
        if (!res.authSetting['scope.writePhotosAlbum']) {
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success() {
              //这里是用户同意授权后的回调
              that.saveImgToLocal();
            },
            fail() {//这里是用户拒绝授权后的回调
              that.setData({
                openSettingBtnHidden: false
              })
            }
          })
        } else {//用户已经授权过了
          that.saveImgToLocal();
        }
      }
    })

  },
  saveImgToLocal: function (e) {
    let that = this;
 
    let imgSrc = that.data.imgUrl;
    wx.downloadFile({
      url: imgSrc,
      success: function (res) {
        console.log(res);
        //图片保存到本地
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: function (data) {
            wx.showToast({
              title: '保存成功',
              icon: 'success',
              duration: 2000
            })
          },
        })
      }
    })

  },

  // 授权
  handleSetting: function (e) {
    let that = this;
    // 对用户的设置进行判断,如果没有授权,即使用户返回到保存页面,显示的也是“去授权”按钮;同意授权之后才显示保存按钮

    if (!e.detail.authSetting['scope.writePhotosAlbum']) {
      // wx.showModal({
      //   title: '警告',
      //   content: '若不打开授权,则无法将图片保存在相册中!',
      //   showCancel: false
      // })
      that.setData({
        openSettingBtnHidden: false
      })
    } else {
      // wx.showModal({
      //   title: '提示',
      //   content: '您已授权,赶紧将图片保存在相册中吧!',
      //   showCancel: false
      // })
      that.setData({
        openSettingBtnHidden: true
      })
    }
  },


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/26643.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询