微信小程序点击弹窗分享图片长按图片保存失败则弹出授权

知识点：

1、点击按钮弹出遮罩层

2、两个图片重叠（分享码与背景图合并）

3、长按保存图片到相册

4、点击按钮开关访问相册权限

 

图片准备

sharemain.png  --分享主图，中间挖空，放小程序码用，底部显示长按小程序码保存图片的按钮图样

sharemain_noshouquan.png   --分享主图，中间挖空，放小程序码用，底部放空

close.png  --一个打叉关闭按钮

 

wxml

<button  bindtap="share" size="mini"> 分享 </buttom>

 <view class="b1" hidden="{{flag}}">
        <view class="b2">      
            <image src="/images/sharemain.png" style="height: 390px;position: absolute;width: 302px;" wx:if="{{is_shouquan}}"/>     
            <image src="/images/sharemain_noshouquan.png" style="height: 390px;position: absolute;width: 302px;" wx:else />
            <image src="{{url}}"  bindlongpress="saveImg" style="width: 195px;height: 195px;margin: 100px 54px 54px 59px;"/>
        </view>        
        <button wx:if="{{!is_shouquan}}" type=\'primary\'  size=\'mini\' style="z-index:9999;margin-top:40rpx"  open-type="openSetting"   bindopensetting=\'handleSetting\'>去授权</button>  
         <view class="t_w" wx:if="{{!is_shouquan}}" style="margin-top:128rpx">
           <cover-view class="t_image" bindtap="closeMask">
             <cover-image  src="/images/icons/close.png"></cover-image>
            </cover-view>
          </view>   
          <view class="t_w" wx:else>
           <cover-view class="t_image" bindtap="closeMask">
             <cover-image  src="/images/icons/close.png"></cover-image>
            </cover-view>
          </view>   
           
    </view>    
</view>

js

flag: true,

share(){    
    var c=this;
    c.setData({
      is_shouquan:1
    })
    wx.showLoading({
      title: \'正在生成分享码，请稍后...\',
      mask:true
    })
    wx.cloud.callFunction({
      // 要调用的云函数名称
      name: \'getUnlimited\',
      data: { shop_id: c.data.shop_id}   
    }).then(res => {
      c.setData({
        url: res[\'result\'][0][\'fileID\'],        
        flag: false
      });            
      wx.hideLoading();
      //c.showMask();      
    }).catch(err => {
      // handle error
      console.log(err);
      wx.hideLoading();
    })

  },
  showMask: function () {
    var c=this;
    wx.cloud.callFunction({
      // 要调用的云函数名称
      name: \'getUnlimited\',
      data: { shop_id: c.data.shop_id }
    }).then(res => {
      console.log(res);      
      this.setData({ flag: false })
    }).catch(err => {
      // handle error
      console.log(err);
    })

    
  },
  closeMask: function () {
    this.setData({ flag: true })
  },
  saveImg() {          
    let url = this.data.url;   
    var c=this;
    //用户需要授权
    wx.getSetting({
      success: (res) => {
        if (!res.authSetting[\'scope.writePhotosAlbum\']) {
          wx.authorize({
            scope: \'scope.writePhotosAlbum\',
            success: () => { // 同意授权                            
              this.saveImg1(url);
            },
            fail: (res) => {
              //authorize:fail auth deny" 用户首次点拒绝
              //authorize:fail 系统错误，错误码：-12006,auth deny  用户点了拒绝后除非清缓存（用户删小程序），否则会默认这个选项
              //上述两个都要弹出引导说要授权相册              
              var string = res.errMsg;
              if (string.indexOf("auth deny")>0) {   //用户点了拒绝后，以后都会出现这个错误                                        
                 //c.handleSetting(c);
                wx.showModal({
                  title: \'提示\',
                  content: \'保存图片失败，请点击下方去授权按钮开启相册访问权限再点击保存\',
                  showCancel:false,
                  success(res) {
                    if (res.confirm) {
                      c.setData({
                        is_shouquan:0
                      })
                    }
                  }
                })
              }              
              
            }
          })
        } else {
          // 已经授权了
          this.saveImg1(url);
        }
      },
      fail: (res) => {
        console.log(res);
      }
    })
  },
  saveImg1(url){    
    wx.getImageInfo({
      src: url,
      success: (res) => {
        let path = res.path;
        wx.saveImageToPhotosAlbum({
          filePath: path,
          success: function (res) {
            wx.showToast({
              title: \'保存成功\',
              image: "../images/nologo.png",
              duration: 1500,
            })
          },
          fail: function (res) {         
          }
        })
      },
      fail: (res) => {        
      }
    })
    },
 
  handleSetting: function (e) {
    let that = this;
    wx.getSetting({
      success(res) {                
     
    // 对用户的设置进行判断，如果没有授权，即使用户返回到保存页面，显示的也是“去授权”按钮；同意授权之后才显示保存按钮
      if (!res.authSetting[\'scope.writePhotosAlbum\']) {
      wx.showModal({
        title: \'警告\',
        content: \'授权失败，请点击下方去授权按钮开启相册访问权限再点击保存！\',
        showCancel: false
      })
      that.setData({
        saveImgBtnHidden: false,
        openSettingBtnHidden: true
      })
    } else {
      wx.showModal({
        title: \'提示\',
        content: \'您已授权，请长按小程序码保存图片！\',
        showCancel: false
      })        
      that.setData({
        saveImgBtnHidden: true,
        openSettingBtnHidden: false,
        is_shouquan: 1
      })
    }
      }
    })
  },

 

云函数

函数名：getUnlimited

// 云调用~生成小程序二维码
const cloud = require(\'wx-server-sdk\')
cloud.init()
exports.main = async (event, context) => {

  var shop_id = event.shop_id;  

  try {
    // 1、通过云调用生成二维码
    const result = await cloud.openapi.wxacode.getUnlimited({      
      page:\'pages/页面地址/页面地址\',
      scene: shop_id
    })
    console.log(result)
    // 2、上传图片到云存储
    const upload = await cloud.uploadFile({
      cloudPath: \'shopInfo.jpg\',
      fileContent: result.buffer,
    })
    console.log(upload)
    // 3、返回图片地址
    var fileID = upload.fileID;
    console.log("fileId=" + fileID);

    const fileList = [fileID];
    
    const imgList = await cloud.getTempFileURL({
      fileList: fileList,
    })    
    return imgList.fileList
  } catch (err) {
    console.log(err)
    return err
  }
}

 

wxss

/*弹出分享遮罩层*/
/* 设置背景遮罩层样式 */
.b1 {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
/* 设置展示图片大小 */
.b2 {
  width: 300px;
  height: 300px;
}
/* 设置展示图片与关闭按钮图片的距离 */
.t_w {
  margin-top: 226rpx;
}
/* 设置关闭按钮图片显示的大小 */
.b2 image {
  width: 100%;
  height: 100%;
  z-index:9999;
}
/* 设置关闭按钮宽高 */
.t_image {
  width: 80rpx;
  height: 80rpx;
}