#0

小程序海报对用户拉新、留存、回流都有着非常重要的作用。

个性海报的制作也就成了小程序开发者的必要功课。

结合 BBC English Podcast 小程序，今天我分享一下怎么利用云开发完成个性化海报的制作。

#1

个性海报可以放在云函数里用图片处理 npm 包来制作，也可以放在小程序端制作。

为了节省云函数资源，我们放在小程序端来制作。

在开始之前，我们理一下个性化海报生成的流程：

  步骤一、确定海报内容

  步骤二、确定海报样式

  步骤三、获取小程序页面的小程序码或者二维码

  步骤四、合成海报

  步骤五、让用户下载保存

  步骤六、上传生成的海报并添加记录到云数据库给下一个用户分享里直接下载使用

这里我手写了一个简单的流程图。

#2

海报内容和海报样式都是个性化比较强的，就不多作介绍了。

从生成小程序或者二维码开始。

开始之前，先看一下我已经实现的效果。

在用户点击生成时，需要先判断之前是否有用户已经生成过。

如果已生成，则直接展示生成好的图片。

如果没有已生成的海报时，需要生成海报，在生成之前也需要先判断是否已有生成好的小程序码，  没有则先生成小程序码

获取小程序码需要在云函数里面操作，这里需要注意给云函数配置调用生成小程序码的权限

获取到小程序码的 fileID 之后需要转换成 url。 给海报生成函数调用。

生成海报我们用开源库https://github.com/Kujiale-Mobile/Painter

海报样式也可以用这个在线工具拖拽生成https://lingxiaoyi.github.io/painter-custom-poster/

通过上面的工具按自己需求生成对应的代码后，

我们可以精简一些空属性和把动态内容改成对应的参数传递进去，

模版定义好后就可以生成海报。

生成海报之后，我们需要上传到云存储并添加记录到对应的数据库里面方便下一个用户分享时直接下载使用

最后，就是给用户提供保存到相册的功能了。

#3



首发在 ikeeplearn 公众号

到这里，利用云开发实现个性海报就结束了。

如果你有其他疑问或者需求欢迎加我微信一起交流