合成海报的小程序插件

概述

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

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

亮点

  1. 已上架到微信服务平台,一键接入,即插即用
  2. 提供异步调用方法,支持获取用户头像后合成海报的场景
  3. 无需设置图片downloadFile合法域名,再也不用担心 “downloadFile: fail url not in domain list” 问题
  4. 自带保存海报UI(开关参数:config.showSavePopup)

更新历史

1.0.13

支持配置用户头像和昵称 ,直接由插件调用用户信息功能页获取

1.0.12

内置 预览/保存 海报的弹层UI

1.0.7

非合法域名图片使用代理下载

1.0.5

支持异步调用

生成效果

wxa-plugin-canvas预览截图

快速预览

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

小技巧:首次导入代码段,会在小程序开发者工具的 console 中看到 “插件未授权使用”的提示,只要点击右边“添加插件”按钮即可申请添加,秒通过。

接入指引

1、插件申请接入:

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

2、引入插件包:

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

3、使用插件:

小程序插件通过组件的 bind:success、bind:fail 属性 对外暴露回调方法,通过 config 属性接收插件配置对象。

在使用插件的页面(假设为 index ),引入插件

1
2
3
4
// index.json
"usingComponents": {
"poster": "plugin://poster/poster"
}
1
2
3
4
<!-- index.html -->
<poster id="poster" config="{{posterConfig}}" hide-loading="{{false}}" preload="{{true}}" bind:success="onPosterSuccess" bind:fail="onPosterFail">
<button>点击生成海报</button>
</poster>

除此之外,可以通过 onCreate API,异步调用海报合成方法,详见文末 异步生成海报 部分

1
this.selectComponent('#poster').onCreate(true)

使用注意事项

  1. 图片的域名务必添加到downloadFile合法域名中(开发设置-服务器域名-downloadFile合法域名) 「插件已处理跨域问题」,warming信息可忽略。
  2. 布局原理不一样,不要和 css 的盒子模型混淆了。

组件参数解释

属性值

字段 类型 必填 描述
preload Boolean true:图片资源预下载 默认false
hide-loading Boolean true:隐藏loading 默认false

config字段

字段 类型 必填 描述
showSavePopup Boolean 是否展示保存海报弹窗,默认 false
width Number(单位:rpx) 画布宽度
height Number(单位:rpx) 画布高度
backgroundColor String 画布颜色
debug Boolean false隐藏canvas,true显示canvas,默认false
pixelRatio Number 1为一般,值越大越清晰
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 层级,越大越高

userinfo字段

配置该项后,用户点击生成海报时,会先通过用户信息功能页授权获取用户信息,绘制海报时可直接使用用户头像和昵称。

userinfo.avatar

可以把它看作特殊的 images 配置,url 属性值为用户头像,其他属性和 images 无异

字段 类型 必填 描述
x Number(单位:rpx) 图片左上角横轴坐标
y Number(单位:rpx) 图片左上角纵轴坐标
width Number(单位:rpx) 宽度(会根据图片的尺寸同比例缩放
height Number(单位:rpx) 高度(会根据图片的尺寸同比例缩放
borderRadius Number(单位:rpx) 圆角,跟css一样

userinfo.nickname

可以把它看作特殊的 texts 配置,text 属性值为用户昵称,其他属性和 texts 无异

字段名 类型 必填 描述
x Number(单位:rpx) 坐标
y Number(单位:rpx) 坐标
color String 颜色
width Number(单位:rpx) 没有指定为画布宽度
textAlign String left|center|right对齐方式

事件绑定

以代码段为例

1
2
3
<poster id="poster" config="{{posterConfig}}" bind:success="onPosterSuccess" hide-loading="{{false}}" bind:fail="onPosterFail" bind:savePopShowChange="popChange">
<button style="margin:40rpx;">点击生成海报(缓存|同步)</button>
</poster>

成功回调 success

返回 { detail }, detail 为生成海报图片的本地 url,可以使用wx.previewImage预览海报,如下

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

失败回调 fail

返回{ detail }, detail 为错误信息

保存弹层显隐切换回调 savePopShowChange

如果选项设置了 showSavePopuptrue,会在合成海报后,弹出保存海报的指引弹层。绑定 savePopShowChange 事件,可监听弹层显隐状态:

1
2
3
4
onPosterSuccess(e) {
const { detail } = e;
console.log(detail) // true or false
}

异步生成海报

从基础库版本 2.2.3 开始提供支持

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

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

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

问题反馈

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

分享到:

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