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

本文 1642字,需要 4.11 分钟

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

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

右对齐

如图:

实例

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

<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;
}

注意: 样式的优先级!

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

总结

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

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

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

  • 爸妈搜日历

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

插件地址: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

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

原文发布于微信公众号 - coding01(coding01)

原文发表时间:2018-10-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏算法channel

Python-GUI|Tkinter模块

01 Tkinter Tkinter模块是Python的标准Tk GUI工具包的接口,它并不是必须掌握的,但是掌握一个Python的标准图形库还是非常有意思的...

674100
来自专栏GIS讲堂

CSS+JS实现tab标签切换

循环将所有的内容标签隐藏,并将tab标题栏的active样式清除,完了之后设置选中标签的内容显示,并给tab标题栏添加active样式。

76030
来自专栏编程

java基础知识,font属性css写法,代码详解!

CSS属性值 字体与文本 网页设计中有很多的文字要去处理,标题、段落、文章、列表以及表单中的文本。这一篇章我们讨论一下HTML中的字体与文本 字体 首先要有一...

20880
来自专栏HTML5学堂

标签的选择

这么多篇文章下来,大家对如何进行页面布局想必已经有了自己的一些想法,特别是上周的文本样式的介绍,让大家可以实现了对整个页面的搭建以及制作。所以基本的制作已经没有...

35990
来自专栏陈泽钦的专栏

页面性能优化的利器 — Timeline

网页中的重绘过程是影响整体性能下降的关键点之一,因而网站开发者应该更多地去避免在站点中进行不必要以及不适时的重绘步骤,本文主要讲述如何借助Inspector中的...

2.1K10
来自专栏Thinks

【译】W3C WAI-ARIA最佳实践 -- 布局

面包屑包含当前页面的父页面的链接列表,该列表是层级顺序的。它可以帮助用户在网站或网络应用程序中找到自己的位置。面包屑通常水平放置在页面的主要内容之前。

98350
来自专栏前端知识分享

第124天:移动web端-Bootstrap轮播图插件使用

> 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中 > 然后作出相应的样式调整

37040
来自专栏郭诗雅的专栏

css+js实现左右滑动卡片组件

最近的一个活动页面需要做一个可以左右滑动的抽签效果,故通过用css的transform属性和js结合来模拟可以无限滚动的效果。

2.1K90
来自专栏守候书阁

canvas入门实战--邀请卡生成与下载

写了很多的javascript和css3的文章,是时候写一篇canvas的了。canvas是html5提供的一个新的功能!至于作用,就是一个画布。然后画笔就是j...

12030
来自专栏韩东吉的Unity杂货铺

零基础入门 19: UGUI ScrollBar

通常在实际项目中,对ScrollBar的应用非常简单,主要用于配合TableView或者ScrollView来进行使用,下一节我们将说明一下Unity里的Scr...

29620

扫码关注云+社区

领取腾讯云代金券