分享朋友圈

<style scoped>
  .page {
    height: 100%;
    width: 750rpx;
    border: 1rpx red solid;
  }
  .share{
    width:540rpx;
    height: 754rpx;
    position: fixed;
    left: 105rpx;
    right: 0;
    top: 242rpx;
    bottom: 200rpx;
    border: 1rpx blue solid;
  }
  .btn-box{
    padding: 10rpx 60rpx 0 60rpx;
  }
  .button{
    background: darkturquoise;
  }
  .bottom{
    width: 300rpx;
    height: 400rpx;
    background-color: black;
  }
  .bottom image{
    width:140rpx;
    height:140rpx;
  } 
</style>
<template>
  <div class="page">
    <div class='share'>
      <canvas canvas-id="shareCanvas" style="width:386rpx;height:438px;margin:0 72rpx 0;"></canvas>
      <!-- <div class='bottom'>
        <image src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2368475193,3363966820&fm=26&gp=0.jpg" bindtap='closeShare'></image>
      </div> -->
    </div>
  </div>
</template>
<script>
var app = getApp();
let timer = null;
export default {
  name: "home",
  components: {},
  data() {
    return {
      userInfo:{
        nickName:'王二',
        headImg:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1252441405,2189346925&fm=26&gp=0.jpg"
      },
      sharebg: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2368475193,3363966820&fm=26&gp=0.jpg', // 分享底部背景图
      shareTitle: '用户输入的内容', // 分享标题
      shareCoverImg: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1273423055,2066875544&fm=26&gp=0.jpg', 
      shareQrImg: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2482456912,1666703692&fm=26&gp=0.jpg', 
      seeDate: '2018-12-04', 
      current: 0,
      shareContent:'',
      swiperList: [
        {
          imageUrl:
            "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2368475193,3363966820&fm=26&gp=0.jpg"
        },
        {
          imageUrl:
            "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1273423055,2066875544&fm=26&gp=0.jpg"
        },
        {
          imageUrl:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586858273614&di=597a0c96dd5f7ab1ff5f97847c30ae3d&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F63%2F17%2F01300543322754145561176407987_s.jpg"
        }
      ],
      startPageImageUrl: "http://placekitten.com/750/1206"
    };
  },
  computed: {},
  onShareAppMessage() {
      return {
        title: '弹出分享时显示的分享标题',
        desc: this.shareContent,
        path: '/page/user?id=123' 
        }
    },
  onPageScroll(e) {},
  /**

   * 生命周期函数--监听页面加载

   */
  onLoad: function (options) {
    let that = this;
    var UserName = '张三'
    wx.setNavigationBarTitle({
      title: '分享到朋友圈',
    })
    var time = "2020-4-15";
    var UserImage = "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2368475193,3363966820&fm=26&gp=0.jpg";
    // 创建画布
    const ctx = wx.createCanvasContext('shareCanvas')
    // 白色背景
    ctx.setFillStyle('#fff')
    ctx.fillRect(0, 0, 198, 128)
    ctx.draw()
    // 下载底部背景图
//     wx.getImageInfo({
//       src: that.sharebg,
//       success: (res1) => {
//         ctx.drawImage(res1.path, 0, 250, 300, 130)
        // 下载视频封面图
        wx.getImageInfo({
          src: that.shareCoverImg,
          success: (res2) => {
            ctx.drawImage(res2.path, 0, 0, 198, 128)
            // 分享标题
            // ctx.setTextAlign('center')    // 文字居中
            ctx.setFillStyle('#000')  // 文字颜色：黑色
            ctx.setFontSize(20)         // 文字字号：20px
            if (that.shareTitle.length <= 14) {
              // 不用换行
              ctx.fillText(that.shareTitle, 10, 200, 280)
            } else if (that.shareTitle.length <= 28) {
              // 两行
              let firstLine = that.shareTitle.substring(0, 14);
              let secondLine = that.shareTitle.substring(14, 27);
              ctx.fillText(firstLine, 10, 200, 280)
              ctx.fillText(secondLine, 10, 224, 280)
            } else {
              // 超过两行
              let firstLine = that.shareTitle.substring(0, 14);
              let secondLine = that.shareTitle.substring(14, 27) + '...';
              ctx.fillText(firstLine, 10, 200, 280)
              ctx.fillText(secondLine, 10, 224, 280)
            }
              // 下载二维码
            wx.getImageInfo({
              src: that.shareQrImg,
              success: (res3) => {
                let qrImgSize = 70
                ctx.drawImage(res3.path, 212, 256, qrImgSize, qrImgSize)
                ctx.stroke()
                ctx.draw(true)
                // 用户昵称
                ctx.setFillStyle('#000')  // 文字颜色：黑色
                ctx.setFontSize(14) // 文字字号：16px
                ctx.fillText(that.userInfo.nickName, 38, 284)
                // 观看日期
                ctx.setFillStyle('#999')  // 文字颜色：黑色
                ctx.setFontSize(10)       // 文字字号：16px
                ctx.fillText('在' + that.seeDate + '分享到朋友圈', 38, 298)
                // 下载用户头像
                wx.getImageInfo({
                  src: that.userInfo.headImg,
                  success: (res4) => {
                    // 先画圆形，制作圆形头像(圆心x，圆心y，半径r)
                    ctx.arc(22, 284, 12, 0, Math.PI * 2, false)
                    ctx.clip()
                    // 绘制头像图片
                    let headImgSize = 24
                    ctx.drawImage(res4.path, 10, 272, headImgSize, headImgSize)
                    // ctx.stroke() // 圆形边框
                    ctx.draw(true)
                    // 保存到相册
                    wx.canvasToTempFilePath({
                      canvasId: 'shareCanvas',
                      success: function (res) {
                        wx.saveImageToPhotosAlbum({
                          filePath: res.tempFilePath,
                          success: function (res) {
                            wx.showToast({
                              title: '分享图片已保存到相册,请到朋友圈选择图片发布'
                            })
                          }
                        })
                      }
                    }, this)
                  }
                })
              }
            })
          }
        })
//       }
//     })
},
  methods: {
    change(e) {
      this.current = e.detail.current;
    },
   
  }
};
</script>