小程序生成分享海报，带二维码可携带参数！

最近开发小程序遇到一个需求，后端提供一个二维码，携带分享参数，前端来生成一个分享海报，下面是部分截图

这里我就只说一下点击生成海报的方法，这里调用了第三方插件，直接下载，下载直通车
代码下载好了，直接拷贝到自己的项目目录，我是这样放的miniprogram_dist就是下载好的组件包

在需要的页面引入组件
JSON文件引入组件

{
  "usingComponents": {
    "poster": "/miniprogram_dist/poster"
  }
}

WXML

<view>
 <poster id="poster" config="{{posterConfig}}" bind:success="onPosterSuccess" bind:fail="onPosterFail">
    <view style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
      <image style="width:100rpx;height:100rpx;"
        src="图片就自己去找啦"></image>
      <button class="tx-14 cl-info">生成分享海报</button>
    </view>
  </poster>
</view>

JS

  const posterConfig = {
      width: 750,
      height: 1334,
      backgroundColor: '#ffffff',
      debug: false,
      pixelRatio: 1,
      blocks: [{
          width: 690,
          height: 808,
          x: 30,
          y: 183,
          borderWidth: 2,
          borderColor: '#ebebeb',
          borderRadius: 20,
        }
      ],
      texts: [{
          x: 113,
          y: 61,
          baseLine: 'middle',
          text: '草帽男孩',
          fontSize: 32,
          color: '#8d8d8d',
        },
        {
          x: 30,
          y: 125,
          baseLine: 'top',
          text: str,
          fontSize: 36,
          color: '#080808',
        },
        {
          x: 59,
          y: 895,
          baseLine: 'middle',
          text: [{
              text: '经营分类：',
              fontSize: 30,
              color: '#333333',
            },
            {
              text: '亿通建筑书店',
              fontSize: 30,
              color: '#6d6d6d',
              marginLeft: 10,
            }
          ]
        },
        {
          x: 59,
          y: 945,
          baseLine: 'middle',
          text: [{
              text: '地理位置：',
              fontSize: 30,
              color: '#333333',
            },
            {
              text: '湖北襄阳',
              fontSize: 28,
              color: '#6d6d6d',
              marginLeft: 10,
            }
          ]
        },
        {
          x: 360,
          y: 1105,
          baseLine: 'top',
          text: '长按识别小程序码',
          fontSize: 36,
          color: '#333333',
        },
        {
          x: 360,
          y: 1163,
          baseLine: 'top',
          text: '易享铺-共享您的店铺更赚钱',
          fontSize: 26,
          color: '#6d6d6d',
        },
      ],
      images: [{
          width: 62,
          height: 62,
          x: 30,
          y: 30,
          borderRadius: 62,
          url: '顶部头像照片',
        },
        {
          width: 634,
          height: 634,
          x: 59,
          y: 210,
          url: '中间大图链接',
        },
        {
          width: 280,
          height: 280,
          x: 50,
          y: 1000,
          url: '分享二维码',
        }
      ]
    }
  onPosterSuccess(e) { // 海报生成成功
    this.setData({
      posterSrc: e.detail,
      showpops: false,
      showPoster: true,
    })
    const {
      detail
    } = e;
    console.log(e.detail,'生成的海报')
  },
  
 onPosterFail(err) {
    app.ShowToast('生成失败！')
  },
  
  savePoster() { // 点击保存到手机相册
    wx.getImageInfo({
      src: this.data.posterSrc,
      success: function (res) {
        var path = res.path;
        //保存图片到本地
        wx.saveImageToPhotosAlbum({
          filePath: path,
          success: function () {
            wx.showToast({
              title: '保存成功'
            })
          },
          fail: function (res) {
            wx.showToast({
              title: '保存失败',
              icon: 'none'
            })
          }
        })
      }
    })
  },

onPosterSuccess()生成海报成功的函数，e.detail就是生成的海报，是一个https网路链接，可以直接下载也可以预览，savePoster()是点击保存的方法，onPosterFail()是生成错误的方法，至于二维码携带参数也很简单，看官方文档，按文档传参，在onLoad里面即可获取https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/qr-code.html

这里调用的第三方插件，如果这个海报不能满足你的需求，或者是样式不是那就想要的，请移步插件文档：戳我直达api