小程序快速开发海报图

由于小程序没有开放分享朋友圈的功能，所以直接走曲线救国的方法，生成一张带有小程序码或者其他二维码的海报图，然后将海报图保存至手机相册，通过分享海报图来实现目标。
海报图一般都是使用canvas进行绘制的，现在有很多的奖canvas封装好作为一个插件，通过使用插件可以快速开发海报图。

使用Painter快速开发

1.引入painter插件包

使用插件包

2.在main.js中配置插件，我放在了static目录下

usingComponents: {
      painter: '/static/painter/painter'
 },

3.在页面中直接使用标签

使用position: absolute; left: 9999rpx的目的是为了让画板不显示在屏幕范围内
paletteDataPainter是绘制的图片数据
@imgOK="onImgOK"是绘制成功后的回调函数

<painter 
	customStyle='position: absolute; left: 9999rpx;' 
	:palette="paletteDataPainter"
	 @imgOK="onImgOK" />

图片数据

json数据绘制图片，具体使用方式参看文档Painter

this.paletteDataPainter= {
          width: '580rpx',
          height: '1052rpx',
          background: this.sharePicBack,
          views: [
            {
              type: 'image',
              url: '头像'/consumer/default-head.png?${Math.random() / 9999}`,
              css: {
                top: '45rpx',
                left: '228rpx',
                width: '114rpx',
                height: '114rpx',
                shadow: '10rpx 10rpx 5rpx #888888',
                borderColor: '#e7f2e9',
                borderWidth: '6rpx',
                borderRadius: '100rpx'
              }
            },
            {
              type: 'text',
              text: await store.getters['user/getUser'].wxNickname || '昵称',
              css: {
                top: '183rpx',
                fontSize: '36rpx',
                left: '290rpx',
                align: 'center',
                color: '#FFFFFF'
              }
            },
            {
              type: 'text',
              text: '邀请您一起参与活动',
              css: {
                top: '237rpx',
                fontSize: '28rpx',
                left: '290rpx',
                width: '471rpx',
                lineHeight: '40rpx',
                MaxLineNumber: '2',
                align: 'center',
                color: '#FFFFFF'
              }
            },
            {
              type: 'image',
              url: '二维码路径’,
              css: {
                top: '798rpx',
                left: '290rpx',
                width: '200rpx',
                height: '200rpx',
                align: 'center',
                borderRadius: '16rpx'
              }
            }
          ]
        }