小程序分享（好友和海報）功能

點擊分享按鈕展示分享的彈框內容

<!-- 分享 -->
  <view class="share-modal" wx:if="{{isShare}}" catchtouchmove="true">
    <view class='close_mask' bindtap="closeMask">×</view>
    <view wx:if="{{!sharePoster}}" class="goods-info" style="width:{{windowW * 0.7}}px;margin-left:{{windowW * 0.1}}px">
      <image class="image" style="height:{{ windowW * 0.9 }}px;width:{{windowW * 0.6}}px;margin-left:{{windowW * 0.05}}px" src='{{goods_images[0].large}}' mode='aspectFit'></image>
      <view class="name" style="margin-left:{{windowW * 0.05}}px">{{goodsName}}</view>
      <view class="price" style="margin-left:{{windowW * 0.05}}px">￥{{price}}</view>
      <view class="share-list">
        <button open-type="share" class="item">
          <image class="icon" src='/resources/image/wechat.png'></image>
          <view>分享給朋友</view>
        </button>
        <view class="item" bindtap="sharePoster">
          <image class="icon" src='/resources/image/timeline.png'></image>
          <view>分享到朋友圈</view>
        </view>
      </view>
    </view>
    <view wx:else>
      <canvas style="width:99.9%;height:{{windowW * 1.1 + 40}}px;top:10px;" canvas-id="canvasBox" />
      <view class="share-poster" bindtap="saveShareImg">
        <button>點擊保存相冊分享朋友圈</button>
      </view>
    </view>
  </view>
  <view class="mask" catchtouchmove="preventTouchMove" wx:if="{{isShare}}"></view>

/* 點擊分享彈窗 */

.mask {
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 background: #000;
 z-index: 9000;
 opacity: 0.7;
}

.share-modal {
 width: 90%;
 position: fixed;
 top: 50%;
 transform: translateY(-50%);
 left: 0;
 z-index: 9999;
 margin: 0 5%;
 background-color: #fff;
 padding-top: 16px;
}

.share-poster {
 margin-top: 32px;
 text-align: center;
}
.share-poster button {
 display: inline-block;
 padding: 0 38px;
 background: #fff;
 font-size: 12px;
 border-radius: 0;
 border: 1px solid #333333;
}
.goods-info .image {
 display: flex;
 align-items: center;
}
.goods-info .name,
.goods-info .price {
 font-size: 12px;
 margin: 4px 0;
}
.share-list {
 display: flex;
 margin: 12px 0;
}
.share-list .item {
 flex: 1;
 text-align: center;
 font-size: 12px;
 color: #c4c3c3;
 line-height: normal;
 background: #ffffff;
}
.share-list .icon {
 width: 40px;
 height: 40px;
}
.close_mask {
 color: #c4c3c3;
 position: absolute;
 right: 6px;
 top: 0px;
 font-size: 20px;
}

/*彈窗結束 */

page({
  data:{
  	// 分享
    isShare: false, // 點擊分享按鈕展示彈框
    sharePoster: false, // 是否展示海報
    windowW: 0,
    isSquare: false
  },
  // 點擊分享彈窗
  share: function() {
    this.setData({
      isShare: true
    })
  },
  // 點擊關閉彈框按鈕
  closeMask: function() {
    this.setData({
      isShare: false,
      sharePoster: false
    })
  },
  // 分享到朋友圈
  sharePoster: function() {
    this.getMiniQRCode()
  },
  // 獲取小程序二維碼
  getMiniQRCode: function() {
    var that = this
    net.ckGetRequest('/share/getWxCode', param, function(data) {
      if (data.Status == 'false') {
        wx.showToast({
          title: data.Msg,
          icon: 'none'
        })
        return
      }
      var result = data.Result
      var url = result.url
      that.getAvaterInfo(url)
    })
  },

  //下載商品圖片
  getAvaterInfo: function(url) {
    var that = this
    var goodsImage = ''
    wx.showLoading({
      title: '生成中...',
      mask: true
    })
    wx.getImageInfo({
      src: that.data.goods_images[0].large,
      success: function(res) {
        var isSquare = false
        if (res.width == res.height) {
          isSquare = true
        }
        that.setData({
          isSquare: isSquare,
          sharePoster: true
        })
      }
    })
    wx.downloadFile({
      url: that.data.goods_images[0].large, //圖片路徑
      success: function(res) {
        if (res.statusCode === 200) {
          goodsImage = res.tempFilePath
          wx.downloadFile({
            url: url, //圖片路徑
            success: function(res) {
              wx.hideLoading()
              if (res.statusCode === 200) {
                var image = res.tempFilePath //下載成功返回結果
                that.sharePosteCanvas(goodsImage, image) //生成海報
              } else {
                wx.showToast({
                  title: '圖片下載失敗！',
                  icon: 'none',
                  duration: 2000,
                  success: function() {
                    var image = ''
                    that.sharePosteCanvas(goodsImage, image)
                  }
                })
              }
            }
          })
        }
      }
    })
  },
  //將金額繪製到canvas的固定
  setPrice: function(ctx) {
    let windowW = wx.getSystemInfoSync().windowWidth
    let price = this.data.price
    ctx.setFontSize(12)
    ctx.setFillStyle('#000')
    ctx.fillText('￥' + price, windowW * 0.15, windowW * 0.9 + 50)
    ctx.stroke()
  },
  //將標題繪製到canvas的固定
  setName: function(ctx) {
    let windowW = wx.getSystemInfoSync().windowWidth
    let name = this.data.goodsName
    ctx.setFontSize(12)
    ctx.setFillStyle('#000')
    ctx.fillText(name, windowW * 0.15, windowW * 0.9 + 30)
    ctx.stroke()
  },
  //將說明繪製到canvas固定
  setText: function(ctx) {
    let windowW = wx.getSystemInfoSync().windowWidth
    var text = '長按識別小程序碼訪問'
    ctx.setFontSize(12)
    ctx.setFillStyle('#000')
    ctx.fillText(text, windowW * 0.15, windowW * 0.9 + 100)
    ctx.stroke()
  },
  // 繪製canvas
  //將canvas轉換爲圖片保存到本地，然後將圖片路徑傳給image圖片的src
  sharePosteCanvas: function(image, qrcode) {
    let windowW = wx.getSystemInfoSync().windowWidth
    let windowH = wx.getSystemInfoSync().screenHeight
    const ctx = wx.createCanvasContext('canvasBox', this)
    // 設置背景顏色
    ctx.setFillStyle('#FFF')
    console.log(windowW, windowH)
    ctx.fillRect(0, 0, windowW, windowH)
    if (this.data.isSquare) {
      ctx.drawImage(
        image,
        windowW * 0.15,
        10 + 0.15 * windowW,
        windowW * 0.6,
        windowW * 0.6
      ) //這裏是商品圖片
    } else {
      ctx.drawImage(image, windowW * 0.15, 10, windowW * 0.6, windowW * 0.9) //這裏是商品圖片
    }
    ctx.drawImage(
      qrcode,
      windowW * 0.55,
      windowW * 0.9 + 20,
      windowW * 0.2,
      windowW * 0.2
    ) //這裏是商品圖片
    this.setName(ctx)
    this.setPrice(ctx)
    this.setText(ctx)
    ctx.draw()
  },
  //點擊保存到相冊
  saveShareImg: function() {
    var that = this
    wx.showLoading({
      title: '正在保存',
      mask: true
    })
    setTimeout(function() {
      wx.canvasToTempFilePath({
        canvasId: 'canvasBox',
        success: function(res) {
          wx.hideLoading()
          var tempFilePath = res.tempFilePath
          that.checkWritePhotosAlbum(tempFilePath)
        },
        fail: function(err) {
          console.log(err)
        }
      })
    }, 1000)
  },
  // 檢查是否有報錯相冊權限
  checkWritePhotosAlbum: function(filePath) {
    var that = this
    wx.getSetting({
      success(res) {
        if (!res.authSetting['scope.writePhotosAlbum']) {
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success() {
              that.saveToPhoto(filePath)
            },
            fail() {
              wx.openSetting({
                success(res) {
                  if (res.authSetting['scope.writePhotosAlbum']) {
                    that.saveToPhoto(filePath)
                  }
                },
                fail(res) {
                  wx.showToast({
                    title: '您沒有授權，無法保存到相冊',
                    icon: 'none'
                  })
                }
              })
            }
          })
        } else {
          that.saveToPhoto(filePath)
        }
      }
    })
  },
  // 保存到相冊
  saveToPhoto: function(filePath) {
    wx.saveImageToPhotosAlbum({
      filePath: filePath,
      success(res) {
        wx.showModal({
          content: '圖片已保存到相冊，趕緊曬一下吧~',
          showCancel: false,
          confirmText: '好的',
          confirmColor: '#333',
          success: function(res) {
            that.closeMask()
          },
          fail: function(res) {
            console.log(res)
          }
        })
      },
      fail: function(res) {
        wx.showToast({
          title: res.errMsg,
          icon: 'none',
          duration: 2000
        })
      }
    })
  },
})