最新文档，请查看：https://t.kainy.cn/pqhb/  概述票圈海报 是一个用于生成海报的小程序插件，通过灵活简单的配置就可以生成精美的分享海报，适用于小程序的朋友圈分享等营销裂变场景。 可以绘制文字、图片、线条、色块到海报画布，支持设置宽高、透明度、层级甚至圆角等属性。 生成效果[图片] 快速预览点击 导入代码片段 即可在微信开发者工具中运行和预览。需注意，由于引用插件，需要先申请接入权限，快速预览可填写 AppID： [代码]wx8a6f7c4b3d410554[代码]，确认适合自己后再发起插件接入申请。 接入指引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 属性接收插件配置对象。 1 2 3 <poster id="poster" config="{{posterConfig}}" bind:success="onPosterSuccess" bind:fail="onPosterFail"> <button>点击生成海报</button> </poster> 除此之外，可以通过 [代码]onCreate[代码] API，异步调用海报合成方法，详见文末 异步生成海报 部分 1 this.selectComponent('#poster').onCreate(true) 使用注意事项图片的域名务必添加到downloadFile合法域名中（开发设置-服务器域名-downloadFile合法域名） 「插件已处理跨域问题」组件参数解释config字段字段类型必填描述widthNumber(单位:rpx)是画布宽度heightNumber(单位:rpx)是画布高度backgroundColorString否画布颜色debugBoolean否false隐藏canvas，true显示canvas，默认falsepixelRatioNumber否1为一般，值越大越清晰preloadBoolean否true：图片资源预下载 默认falsehide-loadingBoolean否true：隐藏loading 默认falseblocksObject Array（对象数组）否看下文textsObject Array（对象数组）否看下文imagesObject Array（对象数组）否看下文linesObject Array（对象数组）否看下文 blocks字段字段名类型必填描述xNumber(单位:rpx)是块的坐标yNumber(单位:rpx)是块的坐标widthNumber(单位:rpx)否如果内部有文字，由文字宽度和内边距决定heightNumber(单位:rpx)是paddingLeftNumber(单位:rpx)否内左边距paddingRightNumber(单位:rpx)否内右边距borderWidthNumber(单位:rpx)否边框宽度borderColorString否边框颜色backgroundColorString否背景颜色borderRadiusNumber(单位:rpx)否圆角textObject否块里面可以填充文字，参考texts字段解释zIndexInt否层级，越大越高 texts字段字段名类型必填描述xNumber(单位:rpx)是坐标yNumber(单位:rpx)是坐标textString｜Object是当Object类型时，参数为text字段的参数，marginLeft、marginRight这两个字段可用（示例请看下文）fontSizeNumber(单位:rpx)是文字大小colorString否颜色opacityInt否1为不透明，0为透明lineHeightNumber(单位:rpx)否行高lineNumInt否根据宽度换行，最多的行数widthNumber(单位:rpx)否没有指定为画布宽度marginLeftNumber(单位:rpx)否当text字段为Object可以使用，用来控制多行文字间距marginRightNumber(单位:rpx)否当text字段为Object可以使用，用来控制多行文字间距textDecorationString否目前只支持 line-through（贯穿线），默认为nonebaseLineString否top｜ middle｜bottom基线对齐方式textAlignString否left｜center｜right对齐方式zIndexInt否层级，越大越高fontFamilyString否小程序默认字体为’sans-serif’, 请输入小程序支持的字体，例如：’STSong’fontWeightString否‘bold’加粗字体，目前小程序不支持 100 - 900 加粗fontStyleString否‘italic’倾斜字体 images字段字段类型必填描述xNumber(单位:rpx)是右上角的坐标yNumber(单位:rpx)是右上角的坐标urlString是图片url（需要添加到下载白名单域名中）也支持本地图片widthNumber(单位:rpx)是宽度（会根据图片的尺寸同比例缩放）heightNumber(单位:rpx)是高度（会根据图片的尺寸同比例缩放）borderRadiusNumber(单位:rpx)否圆角，跟css一样borderWidthNumber(单位:rpx)否边框宽度borderColorString否边框颜色zIndexInt否层级，越大越高 lines字段字段类型必填描述startXNumber(单位:rpx)是起始坐标startYNumber(单位:rpx)是起始坐标endXNumber(单位:rpx)是终结坐标endYNumber(单位:rpx)是终结坐标widthNumber(单位:rpx)是线的宽度colorString否线的颜色zIndexInt否层级，越大越高 事件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[代码]，发消息“小程序”进讨论群。