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

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

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

爸妈搜海报

自定义生成海报。

使用方法

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

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

"plugins": {
    "poster": {
        "version": "1.0.0",
        "provider": "wxbf07f0f22c6c200d"
    }
}
复制代码

三、在须要使用到该插件的小程序页面的 JSON 配置文件中，作如下配置：

{
  "usingComponents": {
    "poster": "plugin://poster/poster"
  }
}
复制代码

四、在相应的 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;
}
复制代码

注意： 样式的优先级！

好了，咱们能够看看效果了

总结

这是咱们团队作的第三个微信小插件，每一个插件制做的标准就是，把复杂的逻辑交给咱们来作。

使用者只要简单的引入，用最便捷的输入参数，以达到最好的效果。

欢迎微信小程序开发者使用咱们的插件：

• 爸妈搜日历

提供简约不简单的日历基本功能，自定义样式，考勤状态等功能。

插件地址：mp.weixin.qq.com/wxopen/plug…

• 爸妈搜富文本

小程序富文本处理 rich-text， 将没法识别的标签改成可识别的， 适配移动设备。

插件地址：mp.weixin.qq.com/wxopen/plug…

• 爸妈搜海报Maker

插件地址：mp.weixin.qq.com/wxopen/plug…

最后，放出咱们的插件开发者的联系方式，有什么问题均可以联系她哦~