在小程序中生成海报是一种非常有效的推广方式

用户在使用小程序过程中，可以生成小程序海报，并与他人分享

通过海报的形式，让用户直观地了解产品或服务的特点和优势

绘制海报的常见方法

目前小程序海报的实现方式常见有两种：

· 制作海报

· 服务器绘制海报

两种方法各有优势

制作海报

绘制海报有几个步骤：

1. 创建

2.获取网络图片本地路径

3.绘制图片、文字等。

4.调用wx.导出图片

绘图功能虽然强大，但在实际使用中，这些操作看似简单，调试起来却比较麻烦

而且当面对一些复杂的布局时，使用绘图比使用CSS要困难得多。

另外，图像的宽度和高度都有最大限制，如果超出限制，就会绘制空白处。

服务器端绘图

小程序还可以通过调用服务端接口，将生成海报所需的数据传递给服务端。

服务端使用API​​等第三方库来生成图片。

但是这种绘制方式需要网络请求，如果体量很大的话会给服务器带来一定的成本压力。

另外，利用绘图来实现复杂的排版也有一定的难度。

小程序海报虽然使用方便，但是遇到要求较高的设计稿，需要还原海报时，就成了小程序开发者们很头疼的事情。

考虑到海报在小程序中的广泛使用，开发者的烦恼就交给官网吧~

官方小程序上线了可以直接将小程序wxml导出为图片的组件。

生成海报

在服务器上使用或绘制海报时，很难实现复杂的布局，例如圆角，百分比，自定义字体等。

但是使用wxml实现起来很简单，下面的例子中我们用wxml来实现海报

class="snapshot-box"> <view class="poster-container"> <view class="poster-header"> <image /> ... view> <view class="description"> ... view> <view class="footer"> ... view> view> view>

接下来我们就可以导出海报了，使用起来非常简单：

1. 用组件包装海报的 wxml

2.调用获取图像数据

3.调用fs.将海报数据写入本地文件

4.调用wx.um将海报保存到本地

<snapshot id="view">   snapshot> <button bindtap="tap">保存海报button>

tap() {   this.createSelectorQuery().select("#view")     .node().exec(res => {       const node = res[0].node              // 保存海报       node.takeSnapshot({         type: 'arraybuffer',         format: 'png',         success: (res) => {           const f = `${wx.env.USER_DATA_PATH}/hello.png`           const fs = wx.getFileSystemManager();                      // 将海报数据写入本地文件           fs.writeFileSync(f, res.data, 'binary')           this.setData({             img: f           })                      // 把海报图片保存到本地           wx.saveImageToPhotosAlbum({             filePath: f           })         }       })     }) }

最后我们来看看使用组件生成海报的效果吧~

除了正常尺寸的分享海报，后续我们还会支持无法处理的超长海报的导出~

你的小程序也有生成海报的需求吗？

赶紧标记此代码片段以便访问和使用吧~