微信小程序 — 二维码海报分享到好友功能

 上一篇文章有微信里面生成二维码功能。微信小程序 — 生成二维码功能_棒怡情的博客-CSDN博客

下面把生成的二维码加上对应的文字，分享给微信好友功能。

第一步：把内容进行绘制生成图片。用到canvasdrawer

第二步：把图片分享出去。

把 components 中的 canvasdrawer 拷贝到自己项目下。

json文件中：引入组件

{
  "usingComponents": {
    "canvasdrawer": "../../components/canvasdrawer/canvasdrawer"
  }
}

wxml中：

<canvasdrawer painting="{{painting}}" bind:getImage="eventGetImage"  class="canvasdrawer"/>
<button bindtap='eventDraw' style="margin-top: 10rpx;">2.绘制</button>
<button bindtap="share"  style="margin-top: 10rpx;">3.分享</button> 

painting 是需要传入的 json。 getImage 方法是绘图完成之后的回调函数，再次回调里面获取绘制生成的图片地址

js文件代码如下：

 data: {
    painting: {},
    shareImage: '',
    wxappName: "测试分享标题",
    text1: "测试分享的二维码如下", 
    text2: "", //小程序名称
    qrcodePath: ''
   
  },
  eventDraw() {
    var self = this;
    wx.showLoading({
      title: '绘制分享图片中',
      mask: true
    })
    /**
     * 店铺
     */
    this.setData({
      painting: {
        width: 750,
        height: 1000,
        clear: true,
        views: [{
            type: 'rect',
            // url: '../../images/bg.png', //背景图
            top: 0,
            left: 0,
            width: 750,
            height: 1000,
            background:'#EDF5FD'
          },
          {
            type: 'text',
            content: this.data.wxappName, //公司名字  center起作用。left设置375 750的一半就行
            fontSize: 32,
            textAlign: 'left',
            color: "#1a1a1a",
            top: 80,
            left:240,
            width:400,
            bolder: true
          },
          {
            type: 'text',
            content: this.data.text1, //金额
            fontSize: 28,
            textAlign: 'left',
            color: "#1a1a1a",
            top: 150,
            left: 180,
            bolder: true
          },
          {
            type: 'image',
            url: this.data.qrcodePath,
            top: 200,
            left: 180,
            width: 300,
            height: 300
          },
          {
            type: 'text',
            content: this.data.text2, //订单编号
            fontSize: 23,
            textAlign: 'left', //居中，但是还是要left 自己left到居中 然后不管什么型号的都会居中了center必须要有
            color: "#1a1a1a",
            top: 620,
            left: 180,
            bolder: true
          }
        ]
      }
    })

  },
  //  //绘图完成之后的回调函数
  eventGetImage(event) {
    console.log("绘制完成")
    console.log(event.detail.tempFilePath)
    wx.hideLoading()
    const {
      tempFilePath,
      errMsg
    } = event.detail
    if (errMsg === 'canvasdrawer:ok') {
      this.setData({
        shareImage: tempFilePath
      })
    }
  },
  share() {
    console.log(this.data.shareImage)
    //分享
    wx.showShareImageMenu({
      path: this.data.shareImage
    })
  },