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

#2:8:1:e:6:d:e:8:6:8:1:2:2:6:b:4:4:4:0:3:9:a:a:4:7:6:3:c:0:9:6:6#

#6:1:7:8:d:d:c:0:2:5:b:3:6:9:3:1:f:4:c:6:8:4:d:5:3:6:2:9:3:c:7:f#

这里我就只说一下点击生成海报的方法，这里调用了第三方插件，直接下载，

代码下载好了，直接拷贝到自己的项目目录，我是这样放的就是下载好的组件包

#e:8:9:9:2:8:5:3:3:a:9:7:a:9:0:1:f:5:3:0:6:7:6:3:f:8:a:5:9:2:2:2#

在需要的页面引入组件

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'
            })
          }
        })
      }
    })
  },

()生成海报成功的函数，e.就是生成的海报，是一个网路链接，可以直接下载也可以预览微信生成推广海报，()是点击保存的方法，()是生成错误的方法，至于二维码携带参数也很简单，看官方文档微信生成推广海报，按文档传参，在里面即可获取

这里调用的第三方插件，如果这个海报不能满足你的需求，或者是样式不是那就想要的微信生成推广海报，请移步插件文档：

免责声明：本文系转载，版权归原作者所有；旨在传递信息，不代表本站的观点和立场和对其真实性负责。如需转载，请联系原作者。如果来源标注有误或侵犯了您的合法权益或者其他问题不想在本站发布，来信即删。