• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

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

  因为微信官方的授权只弹一次,用户拒绝后再次调用,就需要结合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
      })
    }
  },

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序云开发-云存储-上传单个视频到云存储并显示到页面上 ...发布时间:2022-07-18
下一篇:
小程序重要资源大全发布时间:2022-07-18
热门推荐
    热门话题
    阅读排行榜

    扫描微信二维码

    查看手机版网站

    随时了解更新最新资讯

    139-2527-9053

    在线客服(服务时间 9:00~18:00)

    在线QQ客服
    地址:深圳市南山区西丽大学城创智工业园
    电邮:jeky_zhao#qq.com
    移动电话:139-2527-9053

    Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap