小程序分享功能的图片上如何添加一些商品的详细信息？

Question

问题描述

如题。像苏宁的小程序一样，分享后出现的图片左下角会出现一些商品的详细信息，认真查看了，并不是截图，他是怎么做的啊，我也想实现这样的功能。

Answer 1

分享一个我们小程序中的分享图片 canvas 的自己定义内容的函数代码

// 画图
  drawImg: function (e) {
    console.log('draw')
    let val = e.currentTarget.dataset.cl
    this.getClassTask(val.classId)
    this.setData({
      shareWork: val
    })
    const ctx = wx.createCanvasContext('myCanvas')
    ctx.drawImage('../../../img/teacher/share_bac.png', 0, 0, 500, 400)
    ctx.setFontSize(24)
    ctx.setFillStyle('#fff')
    ctx.fillText(val.className + '今日作业', 40, 60)
    ctx.setFontSize(34)
    if (val.stepTaskNum === 0 && val.bookTaskNum === 0) {
      ctx.fillText('今日无作业', 40, 125)
    } else {
      if (val.stepTaskNum > 0) {
        ctx.setFontSize(34)
        ctx.setFillStyle('#fff')
        ctx.fillText('篇阶梯阅读', 80, 125)
        ctx.setFillStyle('#ffff33')
        ctx.setFontSize(38)
        ctx.fillText(val.stepTaskNum, 40, 125)
      }
      if (val.bookTaskNum > 0) {
        ctx.setFontSize(34)
        ctx.setFillStyle('#fff')
        ctx.fillText('篇课外书阅读', 80, 175)
        ctx.setFillStyle('#ffff33')
        ctx.setFontSize(38)
        ctx.fillText(val.bookTaskNum, 40, 175)
      }
    }
    ctx.setFontSize(22)
    ctx.setFillStyle('#fff')
    ctx.fillText('查看详情>>', 40, 260)
    ctx.setFontSize(24)
    ctx.fillText(this.timeGet(new Date().getTime()), 360, 60)
    ctx.draw()
    var _this = this
    setTimeout(() => {
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: 500,
        height: 400,
        destWidth: 500,
        destHeight: 400,
        canvasId: 'myCanvas',
        success: function (res) {
          _this.setData({
            path: res.tempFilePath,
            modalShare: true
          })
          console.log(res.tempFilePath)
        }
      })
    }, 300)
  }

可以在一个背景上进行绘制文字和图片
如果还有不太明白的可以私信我
~ps：最好在图片绘制函数调用后，下一个tick再打开分享，否则会有图片为空的情况出现

Answer 2

1. 用canvas画一个图片用来分享。2. 后台生成这样一张图，用来分享。总之左下角的东西和图片是一张图片。

Answer 3

小程序接口只支持标题+图片,图片可以不用默认截图, 而用自定义的图片,详细信息画在自定义图片里.