阅读 2575

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

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

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

当然,只有这样,肯定不行,还需要给该插件控件传入对应的图片和文字属性。

属性

当前版本,传入的属性主要有两个:drawingsavebtnText

属性名 类型 默认值 说明
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;
}
复制代码

注意: 样式的优先级!

好了,我们可以看看效果了

anli

总结

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

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

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

  • 爸妈搜日历

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

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

  • 爸妈搜富文本

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

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

  • 爸妈搜海报Maker

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

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

erweima

关注下面的标签,发现更多相似文章
评论