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

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

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

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

图片信息

文字信息

其中， textAlign 参数：

如图：

实例

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

<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{
  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…

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