概述

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

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

亮点

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

生成效果

快速预览

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

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

接入指引

1、插件申请接入：

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

2、引入插件包：

// app.json { "plugins": { "poster": { "version": "1.0.7", "provider": "wx8a6f7c4b3d410554" } } }

3、使用插件：

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

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

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

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

使用注意事项

图片的域名务必添加到downloadFile合法域名中（开发设置-服务器域名-downloadFile合法域名）「插件已处理跨域问题」，warming信息可忽略。

组件参数解释

config字段

字段	类型	必填	描述
showSavePopup	Boolean	否	是否展示保存海报弹窗，默认 false
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	否	层级，越大越高

事件绑定

以代码段为例

<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预览海报，如下

onPosterSuccess(e) { const { detail } = e; wx.previewImage({ current: detail, urls: [detail] }) }

失败回调 fail

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

保存弹层显隐切换回调 savePopShowChange

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

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

异步生成海报

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

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

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

Page({ /** * 异步生成海报 */ asyncCreatePoster() { // setData配置数据 this.setData({ posterConfig: {...} }, () => { this.selectComponent('#poster').onCreate(true) }); } })

问题反馈

有什么问题可以邮件 gt@Kainy.cn 。

合成海报的小程序插件－票圈海报相关推荐

小程序导出朋友圈海报详细记录
小程序提供了转发给好友的接口,但是没提供分享到朋友圈的接口.于是,只有引导用户保存图片分享到朋友圈. 两种方案:用微信 api 手动保存,用 painter. 微信 api 使用原生接口的话,大致是使 ...
小程序canvas绘制商品海报实现分享朋友圈
小程序canvas绘制商品海报实现分享朋友圈效果图: 实现步骤就是点击生成图片在canvas画布中画出一张海报然后保存在本地在imags标签中展示,此处尽可能的把canvas组件隐藏但是不能 ...
api工厂小程序好物圈插件使用教程
官方介绍微信小程序官方对好物圈的说明介绍: https://developers.weixin.qq.com/miniprogram/introduction/widget/wow/ 你可以简单理解 ...
uniapp开发微信小程序使用painter绘制海报
uniapp开发微信小程序使用painter绘制海报参考文章: 1.简书大佬文章https://www.jianshu.com/p/e9cab600cf6c 2.CSDN大佬文章https://bl ...
「微信同声传译」小程序插件：快速实现语音转文字、文本翻译、语音合成等能力...
上期,我们在<「医院 LBS 位置服务」插件:输出LBS室内位置能力,为改善就医服务提供解决方案>一文中介绍了「医院 LBS 位置服务」小程序插件的意义.使用场景以及使用方法. 今天我们为 ...
uni-App小程序、canvas 生成海报 +下载图片+分享微信好友
功能:分享弹窗,生成海报并支持保存,目前仅支持微信小程序 ·插件包链接 https://ext.dcloud.net.cn/plugin?id=586 代码: <template>< ...
微信小程序好物圈全新改版，小程序电商创业者新机遇
我们都知道,微信最近的一系列改版更新都是为了小程序这个新物种,当移动互联网人口红利逐渐减少甚至消失的时候,唯有从现有的功能条件下,开发出新的功能来拉动软件的活跃度,产品的更新迭代也是频繁发生,毕竟相对 ...
微信小程序插件功能页开发详细流程
有问题可以扫码加我微信,有偿解决问题.承接小程序开发. 微信小程序开发交流qq群 173683895 . 526474645 : 正文: 关于新出的微信小程序插件功能页做一下记录,希望能帮到大 ...
微信小程序插件新增能力
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: " 小程序插件能力升级:开放插件登录能力,帮助插件开发者更好地管理用户:支持在插件内使用微信 ...

合成海报的小程序插件－票圈海报

概述

亮点