合成海报的小程序插件

概述

裂变营销海报 是一个小程序内生成海报的插件,通过灵活简单的配置就可以生成精美的分享海报,适用于小程序裂变等场景。

可以绘制文字、图片、线条、色块到海报画布,支持设置宽高、透明度、层级甚至圆角等属性。

生成效果

预览截图

快速预览

点击 导入代码片段 即可在微信开发者工具中运行和预览。需注意,由于引用插件,需要先申请接入权限,快速预览可填写 AppID:wx39b27487b6a29fcf,确认适合自己后再发起插件接入申请。

接入指引

1、插件申请接入:

在微信公众平台中, “微信小程序官方后台-设置-第三方服务-插件管理” 里点击 “添加插件”,搜索 “裂变营销” ,申请通过后,小程序开发者可在小程序内使用该插件。

2、引入插件包:

1
2
3
4
5
6
7
8
9
// app.json
{
"plugins": {
"poster": {
"version": "1.0.4",
"provider": "wx39b27487b6a29fcf"
}
}
}

3、使用插件:

1
2
3
<poster id="poster" config="{{posterConfig}}" bind:success="onPosterSuccess" bind:fail="onPosterFail">
<button>点击生成海报</button>
</poster>

使用注意事项

  1. 图片的域名务必添加到downloadFile合法域名中(开发设置-服务器域名-downloadFile合法域名)

组件参数解释

config字段

字段 类型 必填 描述
width Number(单位:rpx) 画布宽度
height Number(单位:rpx) 画布高度
backgroundColor String 画布颜色
debug Boolean false隐藏canvas,true显示canvas,默认false
pixelRatio Number 1为一般,值越大越清晰
preload Boolean true:图片资源预下载 默认false
hide-loading Boolean true:隐藏loading 默认false
blocks Object Array(对象数组) 看下文
texts Object Array(对象数组) 看下文
images Object Array(对象数组) 看下文
lines Object Array(对象数组) 看下文

blocks字段

字段名 类型 必填 描述
x Number(单位:rpx) 块的坐标
y Number(单位:rpx) 块的坐标
width Number(单位:rpx) 如果内部有文字,由文字宽度和内边距决定
height Number(单位:rpx)
paddingLeft Number(单位:rpx) 内左边距
paddingRight Number(单位:rpx) 内右边距
borderWidth Number(单位:rpx) 边框宽度
borderColor String 边框颜色
backgroundColor String 背景颜色
borderRadius Number(单位:rpx) 圆角
text Object 块里面可以填充文字,参考texts字段解释
zIndex Int 层级,越大越高

texts字段

字段名 类型 必填 描述
x Number(单位:rpx) 坐标
y Number(单位:rpx) 坐标
text String|Object 当Object类型时,参数为text字段的参数,marginLeft、marginRight这两个字段可用(示例请看下文)
fontSize Number(单位:rpx) 文字大小
color String 颜色
opacity Int 1为不透明,0为透明
lineHeight Number(单位:rpx) 行高
lineNum Int 根据宽度换行,最多的行数
width Number(单位:rpx) 没有指定为画布宽度
marginLeft Number(单位:rpx) 当text字段为Object可以使用,用来控制多行文字间距
marginRight Number(单位:rpx) 当text字段为Object可以使用,用来控制多行文字间距
textDecoration String 目前只支持 line-through(贯穿线),默认为none
baseLine String top| middle|bottom基线对齐方式
textAlign String left|center|right对齐方式
zIndex Int 层级,越大越高
fontFamily String 小程序默认字体为’sans-serif’, 请输入小程序支持的字体,例如:’STSong’
fontWeight String ‘bold’加粗字体,目前小程序不支持 100 - 900 加粗
fontStyle String ‘italic’倾斜字体

images字段

字段 类型 必填 描述
x Number(单位:rpx) 右上角的坐标
y Number(单位:rpx) 右上角的坐标
url String 图片url(需要添加到下载白名单域名中)也支持本地图片
width Number(单位:rpx) 宽度(会根据图片的尺寸同比例缩放
height Number(单位:rpx) 高度(会根据图片的尺寸同比例缩放
borderRadius Number(单位:rpx) 圆角,跟css一样
borderWidth Number(单位:rpx) 边框宽度
borderColor String 边框颜色
zIndex Int 层级,越大越高

lines字段

字段 类型 必填 描述
startX Number(单位:rpx) 起始坐标
startY Number(单位:rpx) 起始坐标
endX Number(单位:rpx) 终结坐标
endY Number(单位:rpx) 终结坐标
width Number(单位:rpx) 线的宽度
color String 线的颜色
zIndex Int 层级,越大越高

事件

success

返回生成海报图片的本地url,一般做法是使用wx.previewImage预览海报,如下

1
2
3
4
5
6
7
onPosterSuccess(e) {
const { detail } = e;
wx.previewImage({
current: detail,
urls: [detail]
})
}

fail

返回错误信息

异步生成海报 (从基础库版本 2.2.3 开始提供支持)

有些场景可能需要发起ajax请求后才能获取生成海报的数据,这里提供了异步生成海报的方式。

只需要对组件的onCreate方法,如下调用就行了

1
2
3
4
5
6
7
8
9
10
11
Page({
/**
* 异步生成海报
*/
onCreatePoster() {
// setData配置数据
this.setData({ posterConfig: {...} }, () => {
this.selectComponent('#poster').onCreate(true)
});
}
})

问题反馈

有什么问题可以添加微信 wesiri,发消息“小程序”进讨论群。

分享到:

评论完整模式加载中...如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理