收藏
评论

票圈海报——简单配置即可一键合成小程序分享海报的插件

最新文档,请查看: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)

使用注意事项

  1. 图片的域名务必添加到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,发消息“小程序”进讨论群。




赞 1
收藏
登录 后发表内容