概述

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

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

生成效果

快速预览

点击 导入代码片段 即可在微信开发者工具中运行和预览。需注意，由于引用插件，需要先申请接入权限，快速预览可填写 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字段

blocks字段

texts字段

images字段

lines字段

事件

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，发消息“小程序”进讨论群。