二次封装保存图片到相册(button-opeansetting的

2018-06-26  本文已影响0人  付出的前端路

小程序版本库更新后,wx.openSetting({ })即将废弃,改用button组件实现。


openSetting即将废弃.png

button按钮只在拒绝的时候显示一次;

<!--Wxml-->
<view>
  <image class='share-btn-friends-img' src='../../assets/img/pyq.png'></image>
  <text class='share-btn-friend-text' bindtap='toShareFiends' wx:if="{{!isOpenSetting}}">分享到朋友圈</text>  
  <button class='share-btn-friend-text text-btn' open-type="openSetting" bindopensetting="toShareFiends" wx:else>分享到朋友圈</button>  
</view>

<!--js-->
toShareFiends(e) {
    let imgUrl = this.data.imgUrl
    var self = this
    // wx.getSetting 先查询一下用户是否授权了
    wx.getSetting({
      success(res) {
        console.log("getSetting: success")
        if (!res.authSetting['scope.writePhotosAlbum']) {
          console.log("1-没有授权《保存图片》权限")
          // 接口调用询问  
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success() {
              console.log("2-授权《保存图片》权限成功")
              utils.downloadImage(imgUrl)
            },
            fail() {
              console.log(this)
              // 用户拒绝了授权  
              console.log("2-授权《保存图片》权限失败")
              wx.showModal({
                title: '提示',
                content: '江楠优店需要您的授权才能保存图片',
                showCancel: false,
                confirmText: '我知道了',
                confirmColor: '#FCA800'
              })
              //  button-openSetting按钮只在拒绝的时候显示一次
              self.setData({
                isOpenSetting: true
              })
            }
          })
        } else {
          console.log("1-已经授权《保存图片》权限")
          self.setData({
            isOpenSetting: false
          })
          utils.downloadImage(imgUrl)
        }
      },
      fail(res) {
        console.log("getSetting: success")
        console.log(res)
      }
    })
  }
}

附:utils.downloadImage 下载保存图片方法封装

// 下载保存图片
  downloadImage(imgUrl) {
    wx.downloadFile({
      url: imgUrl,
      success: function (res) {
        console.log(res.tempFilePath)
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: function (res) {
            wx.showToast({
              title: '保存成功',
            });
          },
          fail: function (res) {
            console.log('保存图片fail', res)
          }
        })
      },
      fail: function () {
        console.log('下载图片fail', res)
      }
    })
  }

参考链接:

上一篇下一篇

猜你喜欢

热点阅读