美文网首页
二次封装保存图片到相册(button-opeansetting的

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

作者: 付出的前端路 | 来源:发表于2018-06-26 19:48 被阅读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)
          }
        })
      }
    

    参考链接:

    相关文章

      网友评论

          本文标题:二次封装保存图片到相册(button-opeansetting的

          本文链接:https://www.haomeiwen.com/subject/goldyftx.html