共计 2764 个字符，预计需要花费 7 分钟才能阅读完成。
现在很多小程序都有生成海报，分享海报的功能。我们自己的几个小程序 (如：爸妈搜商城、爸妈搜云课堂、幼师大学、跟着外教学英语等) 也都有生成海报的功能。因此技术团队萌生出制作一个简单易用的微信小插件，只要传入简单图片和对应的坐标值，就可以拼接成一幅完整的宣传海报。
今天，我们提交了第一版，刚刚通过微信审核，现在让我开始说一说怎么使用我们刚新鲜出炉的小程序插件 ——「爸妈搜海报 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;
}
注意：样式的优先级！
好了，我们可以看看效果了
总结
这是我们团队做的第三个微信小插件，每个插件制作的标准就是，把复杂的逻辑交给我们来做。
使用者只要简单的引入，用最便捷的输入参数，以达到最好的效果。
欢迎微信小程序开发者使用我们的插件：
爸妈搜日历
提供简约不简单的日历基本功能，自定义样式，考勤状态等功能。
插件地址：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
最后，放出我们的插件开发者的联系方式，有什么问题都可以联系她哦~
