微信小程序點擊彈窗分享圖片長按圖片保存失敗則彈出授權

知識點：

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;
}