大家之所以都开始看重微信小程序，就是因为它的背后是微信的海量用户，很多人在提到微信小程序与app比较的时候，就会说小程序推广更加容易。熟悉微信小程序的朋友也知道，微信小程序目前开放的能力中，我们仅能够把小程序分享到微信好友或者群聊天中，而不能够直接分享到其他渠道中。

为此很多小程序，特别是新闻资讯、淘宝客等类型的小程序中，就转化了一种思维用来实现把微信小程序转发的微信朋友圈。比如以下就是今日头条的做法，点击底部朋友圈后我们可以获得一张带有小程序码的图片。

那么这是怎么实现的呢？其实在传统互联网当中，这种一般是采用后台服务端生成的方式，比如使用服务端的GD库，然而这种生成过程是非常消耗资源的。而微信小程序是支持canvas的，我们完全可以利用canvas组件及其对应的API来实现。开始之前需要准备几个东西：

1、动态的小程序码：每个页面的小程序码肯定要不相同的，否则就没啥意义了，我们可以通过微信开发的接口通过服务端拿到对应页面的小程序码（需要通过http请求服务端数据）；

2、其他的信息：比如上图中的标题、作者、时间、字数信息、图片等，也是需要服务端获得。

下面就是基本创建这种图片的基本流程：

1、当用户点击分享按钮的时候，请求服务端拉取我们以上所需要的数据，并且把图片下载到客户端本地临时文件；

2、创建一个canvas，并且显示画布区域；

3、把所得的数据画到画布上面，其中可能需要用到fillText、drawImage等API，具体请参考微信小程序官方文档的《API-画布》部分。

4、通过wx.canvasToTempFilePath把画布转化为图片，并得到图片的临时路径。

5、通过所得图片的临时路径，可以通过wx.saveImageToPhotosAlbum保存到用户设备的相册（需要用户授权）。

用户保存到相册中的图片就是如以上今日头条的图片，有了这个图片就可以到处传播啦。以上就是基本的流程，然而在实际项目运用过程中，还是需要解决一些问题，比如典型的一些问题：

1、wx.canvasToTempFilePath转化的图片模糊，我们可以按照设备的显示倍率输出图片来解决，这里提醒各位网上很多文章描述这个问题的时候有问题，很多作者仅从理论来描述，实际上误导了读者。

2、canvas文字自动换行，在H5中我们可以通过measureText来获取文字宽度然后分段截取，在小程序中目前主流的基础库版本不支持该方法，但在开发工具中最新的1.9.91支持该方法，以后是否支持看微信官方。

3、…..

总而言之，在实际实践过程中有很多坑要填，如果大家想尝试，请仔细阅读微信小程序官方文档关于canvas部分的内容，同时也可以参考网上公开资料文档。但必须提醒的是，需要有自我的思考与判断，网上很多文章作者自己都没实操，仅仅凭理论推演就把文章给写了，然而那些坑可能就出现在一些简单的细节上面。

当然，如果你自己嫌麻烦，可以把这部分交给我们，我们将提供完善的解决方案。另外，如果你有小程序相关需求，也可以联系我们，我们将给你提供全面的微信小程序解决方案(特别是湖南长沙及周边的朋友哦)。

以下就是一个简单的demo（数据非正式数据，样式也没调整，仅供演示；实际使用需要进一步优化）：