微信小程序如何分享到朋友圈?

目前微信小程序不支持直接将小程序分享到朋友裂正圈，但好多人都是将小程序二维码分享到朋友圈中，同样可以达到这种效果，腾讯这块限制分享的原因是因为朋友圈广告，如果直接分享到朋友圈，在用户这块可能就不容易分清楚广告跟小程序

简书作者

2019-03-07 16:36

背景

业务场景需要在小程序内生成活动的分享海报，图片中的某些数据需动态展示。可行的方案有️二：

服务端合成：直接返回给前端图片URL

客户端陵源岁合成：客户端利用canvas绘制

客户端合成需要用到canvas，见这个网址，小程序canvas的尺睁那些事。客户端感觉很麻烦，要自己 *** 作canvas。

服务器端合成

我发现有人做了一个接口，输入服务器端的URL,直接返回一个图片，这样我就可以让前作做一个H5的页面，然后小程序中，直接得到这个图片然后分享到朋友圈。

下面是这个接口的小程序演示demo

在小程序里，我们知道分享功能只有分慧银享到微信好友或者群，无法直接分享到朋友圈，但是我们可以生成分享图片，然后保存到相册，在发布朋友圈从相册选择图片，所以关键是如何生成需要的图片，使用canvas 画布即可实现。

canvas 是微信小程序里碧携的原生组件，相关属性及注意事项可参考小程序官方文档 。一般生成分享图片需要显示文字和相应的图片，在结合不同位置和不同大小的需求形成特定样式前慧宴的图片。

在wxml中添加<canvas></canvas>组件。注意，这里必须要给id属性，style属性中必须有饥孙width和height。关于width和height的值，有个技巧就是width为100%，height为window高度。

获取window的高度，宽度，和像素比例。

写画图方法。新建canvas的上下文环境context，通过画window大小的矩形来设置背景色为#ffffff，老肢饥将图片插入到canvas中（注意left，top，width，height等参数），将文本插入到canvas中。最后调用wx.drawCanvas()来将图形和文字绘制出来。

在onReady中准备好图片（因为后期需要长按保存，所以需要使用https下图片，这里先下载到缓存中），调用前面定义绘图方法。

图片生成侍返，在真机（注意一定要在真机上测试，因为经常会出现开发工具中是好的，但是真机不能画出来的问题，一定要注意！）上测试也通过，OK啦。（这里不贴手机上的截图了）。

---