微信小程序如何转发到微信朋友圈?canvas来解决!

2018-02-26 16:32 栏目:技术开发 查看(3450)

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

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

35325

 

那么这是怎么实现的呢?其实在传统互联网当中,这种一般是采用后台服务端生成的方式,比如使用服务端的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(数据非正式数据,样式也没调整,仅供演示;实际使用需要进一步优化):

42342

与我们的项目经理联系
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

转载请注明出处:微信小程序如何转发到微信朋友圈?canvas来解决! - 微构网络
分享: