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

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

今天，我们提交了第一版，刚刚通过微信审核，现在让我开始说一说怎么使用我们刚新鲜出炉的小程序插件 —— 「爸妈搜海报 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`	`右对齐`

如图：

set-text-align

实例

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

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;}