推荐一款快速生成海报的微信小插件

2019年9月20日 120次阅读来源: Coding01

现在很多小程序都有生成海报，分享海报的功能。我们自己的几个小程序 (如：爸妈搜商城、爸妈搜云课堂、幼师大学、跟着外教学英语等) 也都有生成海报的功能。因此技术团队萌生出制作一个简单易用的微信小插件，只要传入简单图片和对应的坐标值，就可以拼接成一幅完整的宣传海报。

今天，我们提交了第一版，刚刚通过微信审核，现在让我开始说一说怎么使用我们刚新鲜出炉的小程序插件 —— 「爸妈搜海报 Maker」。

爸妈搜海报

自定义生成海报。

使用方法

1、在微信小程序管理后台——设置——第三方服务，按 AppID（wxbf07f0f22c6c200d）搜索到该插件并申请授权（ps：一般不会出现拒绝的情况。如果申请被拒绝了，请重新申请，有时候管理员手抽点错了，请见谅）。

2、在要使用该插件的小程序 app.json 文件中引入插件声明。

"plugins": {
    "poster": {
        "version": "1.0.0",
        "provider": "wxbf07f0f22c6c200d"
    }
}

3、在需要使用到该插件的小程序页面的 JSON 配置文件中，做以下配置：

{
  "usingComponents": {
    "poster": "plugin://poster/poster"
  }
}

4、在相应的 HTML 页面中添加以下语句即可完成插件的嵌入。

<poster />

当然，只有这样，肯定不行，还需要给该插件控件传入对应的图片和文字属性。

属性

当前版本，传入的属性主要有两个：drawing 和 savebtnText：

`属性名`	`类型`	`默认值`	`说明`
`drawing`	`Array`	`[]`	`画图的数据`
`savebtnText`	`String`	`"点击按钮进行图片保存"`	`按钮文字信息`

`drawing参数说明`

drawing 数据目前有两种数据类型，一种是图片信息，另一种是文字信息。

图片信息

`属性名`	`类型`	`值`	`说明`
`type`	`String`	`image`	`图片类型`
`url`	`String`		`图片路径，为线上图片`
`left`	`Number`		`距离画布的左边距`
`top`	`Number`		`距离画布的顶部距离`
`width`	`Number`		`绘画图片的宽度`
`height`	`Number`		`绘画图片的高度`
`circle`	`Boolean`	`true、false`	`是否是绘制圆形，默认为 false`

文字信息

`属性名`	`类型`	`值`	`说明`
`type`	`String`	`text`	`文字类型`
`content`	`String`		`绘图的文字内容`
`left`	`Number`		`距离画布的左边距`
`top`	`Number`		`距离画布的顶部距离`
`width`	`Number`		`文字绘画的宽度`
`color`	`String`		`文字信息`
`textAlign`	`String`		`文字水平对齐方式`
`fontSize`	`Number`	`默认为 26 rpx`	`文字大小`

其中，textAlign 参数：

`属性名`	`类型`	`说明`
`left`	`String`	`左对齐`
`center`	`String`	`居中对齐`
`right`	`String`	`右对齐`

如图：

《推荐一款快速生成海报的微信小插件》

实例

页面传入的控件简单明了：

<poster
  drawing='{{drawing}}'
  savebtnText='{{savebtnText}}'
  canvas-style='canvas-style'
  savebtn-style='savebtn-style' />

我们接着看传入的参数：

Page({
  data: {
    drawing: [

    ],
    savebtnText: '点击按钮，保存图片'
  },
  onLoad: function () {
    wx.showLoading({
      title: '绘图中..'
    })
  },
  onShow: function () {
    this.setData({
      drawing: [
        {
          type: 'image',
          url: 'https://i.loli.net/2018/10/30/5bd85117675b3.png',
          left: 0,
          top: 0,
          width: 650,
          height: 960,
        },
        {
          type: 'image',
          url: 'https://wx.qlogo.cn/mmopen/vi_32/M8cK5rMR16udYRpanaZiaYz2KHgibVVHhFqG01h3rZUAGDKQerZwNv9baVDeNicjZ1bZzs4hUribjLX9bNaAmhia7pQ/132',
          left: 72,
          top: 53,
          width: 78,
          height: 75,
        },
        {
          type: 'text',
          content: '咖啡',
          fontSize: 26,
          color: 'white',
          textAlign: 'left',
          left: 170,
          top: 50,
          width: 650,
        },
        {
          type: 'text',
          content: '这里是小程序码',
          fontSize: 30,
          color: 'red',
          textAlign: 'left',
          left: 390,
          top: 720,
          width: 200
        },
        {
          type: 'image',
          url: 'https://i.loli.net/2018/10/30/5bd851175ce40.jpg',
          left: 388,
          top: 660,
          width: 190,
          height: 190,
          circle: true
        }
      ]
    })
  }
})

样式也很简单：

类名	说明
`canvas-style`	`画布样式样式`
`savebtn-style`	`按钮样式`

/* 画布样式 */
.canvas-style{
  width: 650rpx !important;
  height: 960rpx  !important;
  margin: 0 auto;
  border: 1px solid orangered;
  margin-top: 10rpx;
}

/* 保存图片按钮样式 */
.savebtn-style{
  height: 70rpx;
  line-height: 70rpx;
}