现在很多小程序都有生成海报，分享海报的功能。我们自己的几个小程序 (如：爸妈搜商城、爸妈搜云课堂、幼师大学、跟着外教学英语等) 也都有生成海报的功能。因此技术团队萌生出制作一个简单易用的微信小插件，只要传入简单图片和对应的坐标值，就可以拼接成一幅完整的宣传海报。今天，我们提交了第一版，刚刚通过微信审核，现在让我开始说一说怎么使用我们刚新鲜出炉的小程序插件 —— 「爸妈搜海报 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 Stringimage图片类型 url String 图片路径，为线上图片 left Number 距离画布的左边距topNumber 距离画布的顶部距离widthNumber 绘画图片的宽度heightNumber 绘画图片的高度circleBooleantrue、false是否是绘制圆形，默认为 false文字信息 属性名 类型 值 说明 type Stringtext文字类型 content String 绘图的文字内容 left Number 距离画布的左边距topNumber 距离画布的顶部距离widthNumber 文字绘画的宽度 color String 文字信息 textAlign String 文字水平对齐方式 fontSize Number默认为 26 rpx文字大小其中，textAlign 参数：属性名类型说明leftString 左对齐 centerString 居中对齐 rightString 右对齐 如图：实例页面传入的控件简单明了：<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;}注意： 样式的优先级！好了，我们可以看看效果了总结这是我们团队做的第三个微信小插件，每个插件制作的标准就是，把复杂的逻辑交给我们来做。使用者只要简单的引入，用最便捷的输入参数，以达到最好的效果。欢迎微信小程序开发者使用我们的插件：爸妈搜日历提供简约不简单的日历基本功能，自定义样式，考勤状态等功能。插件地址：https://mp.weixin.qq.com/wxopen/pluginbasicprofile?action=intro&appid=wx23a9cef3522e4f7c爸妈搜富文本小程序富文本处理 rich-text， 将无法识别的标签改为可识别的， 适配移动设备。插件地址：https://mp.weixin.qq.com/wxopen/pluginbasicprofile?action=intro&appid=wx54e7e5b0ebeda242爸妈搜海报Maker插件地址：https://mp.weixin.qq.com/wxopen/pluginbasicprofile?action=intro&appid=wxbf07f0f22c6c200d最后，放出我们的插件开发者的联系方式，有什么问题都可以联系她哦~