微信小程序分享好友 并保存本地

微信小程序分享给好友 以及下载到图库

最终实现效果

• 页面布局代码

	
		
			
		
		
			
				
					
						
							
						
						分享好友
					
				
				
					
						
					
					保存相册
				
			
		
	

css样式

/* components/share/share.wxss */

.panel { //遮罩层样式
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: #333333;
  display: flex;
  align-items: flex-end;
  align-content: center;
  z-index: 888;
}

.share-box {
  position: relative;
}

.canvas {
  width: 100%;
  position: absolute;
  top: 100rpx;
  left: 0;
  right: 0;
  z-index: 9999;
}

.share {
  width: 600rpx;
  height: 800rpx;
  margin: 0 auto;
  background-color: #629fb6;
}


.btn-box{
  position: absolute;
  bottom: 0;
  background-color:#fff;
  left: 0;
  right: 0;
  width: 100%;
  height: 200rpx;
}

.btn-panel{
  padding: 0 80rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.share-friend,.share-down{
  width: 100%;
  text-align: center;
  line-height: 160rpx;
  font-size: 26rpx;
}
.share-friend button{
  width: auto;
  font-weight: normal;
  background-color: #fff;
  font-size: 26rpx;
}

.btn-panel .img-box{
  width: 64rpx;
  height: 64rpx;
  margin: 0 auto;
}

.img-box image{
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

js代码

• 获取设备宽高 便于计算 小程序码是直接写死的 在本地 直接拿

    isShow: true,
    img: '../../static/code.jpg', //需要画到画布上的小程序码
    windowWidth: wx.getSystemInfoSync().windowWidth,  //设备屏幕宽度
    windowHeight: wx.getSystemInfoSync().windowHeight //获取当前设备屏幕高度

• 获取画布大小 然后开始画 x,y 轴位置自己计算

 canvasPanel(){ //开始画
    const ctx = wx.createCanvasContext('shareCanvas');
    ctx.rect(0, 0, this.data.windowWidth, this.data.windowHeight);
    ctx.setFillStyle('#fff');
    ctx.fill()

    //画文字
    ctx.setFillStyle('#629fb6')
    ctx.fillRect(0, 0, this.data.windowWidth, 70) //
    ctx.setFontSize(20)
    ctx.setFillStyle("#fff")
    let str = '布业电子色卡'
    ctx.fillText(str, this.data.windowWidth * 0.25, 70 * 0.6)

    //画图片

    ctx.drawImage(this.data.img, (this.data.windowWidth - 250) / 2 * 0.5, this.data.windowHeight / 250 + 120, 250, 250)
    ctx.draw();
  },

• 将画布的内容下载到相册

downCanavs() { //下载画布
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: this.data.windowWidth,
      height: this.data.windowWidth,
      destWidth: this.data.windowWidth * 3,  //值越大 像素越清晰
      destHeight: this.data.windowHeight * 3,
      canvasId: 'shareCanvas', //绑定画布id
      success(res) {
        console.log(res.tempFilePath)
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(res) {
            wx.showToast({
              title: '保存成功！',
            })
          }
        })
      }
    })

  },