通过社交软件分享的方式来进行营销小程序,是一个常用的运营途径。小程序本身支持直接将一个小程序的链接卡片分享至微信好友或微信群,然后别人就可以通过点击该卡片进入该小程序页面。但是小程序目前不支持直接分享到微信朋友圈,而对我们来说,微信朋友圈又是一个很重要的吸引别人关注的入口,所以,得想办法把这个资源利用起来。
可能有的人已经知道,微信小程序支持通过扫描/长按识别二维码或小程序码图片的方式进入一个小程序首页或小程序中某个特定页面(如何生成这类常规二维码、小程序码,可参考《微信小程序之生成自定义参数小程序二维码》这篇文章),我们可以将二维码或小程序码分享到朋友圈去。
不过,这种二维码看起来比较单调,不太感人!
为了提升吸引力,我们可以把这种用于分享出去的二维码图片做的尽量美观、有情景感一些,比如像腾讯出品的小程序《长城你造不造》里生成的这种分享图片:
这种配有图文的图片,就比单单给一个硬邦邦的二维码要吸引人得多啦!你是不是也想试试做这种分享图呢?我们今天就来讨论一下如何实现这样的分享图。
实现这种合并图文的方案,选择无外乎就是在前端做还是在后端做。如果在后端做的话,可选的技术方案还是挺多的,各种后端语言都有自己的绘图工具库,比如nodejs里可以用node-canvas来做,或者也可以通过调用一些图片编辑软件(如ImageMagic)来实现。
而在前端做的话,由于微信小程序也提供了一系列基于canvas的绘图相关API,所以绘制这样的图片还是比较简单易上手的,且调试起来也比较方便直观。所以,决定先在小程序前端这边来实现了。
添加画布
首先,在小程序里进行绘图操作需要用到组件,那我们就先在我们的wxml代码中放入如下的:
canvas-id="shareCanvas" style="width:600px;height:900px">