前端对接微信分享朋友圈，微信分享好友功能开发心得，并使用html2canvas截取所需分享部分div

作为一位web前端开发工程师，前几天拿到一个新得需求，将webApp对接微信支付，以及微信分享朋友圈功能，基于vue-cli 3.0脚手架进行项目开发，而对接微信之中所有用到一个插件就是cordova，起初一直使用微信开放接口skd，而在app项目中并为起到想要的作用，也不能唤醒微信app，后来发现使用cordova-plugin-wechat插件就可以直接唤醒微信app，到达微信支付，微信分享朋友圈的效果，废话不多说上代码。

cordova-plugin-wechat的使用

转：https://www.jianshu.com/p/3089b6096475

cordova的官方文档

http://cordova.axuer.com/

安装与部署环境请查阅以上文档，一下直接上代码。

首先npm完插件之后，引入插件，在所需要用到插件的地方引入插件；一下是实现分享朋友圈功能代码：

在所需要的地方引入此js文件：

再使用

html2canvas插件对需要分享的地方进行截图，此插件为截取所需要分享的div中的内容，

详情使用请查看开发文档：http://html2canvas.hertzen.com/

此插件截取的是一堆base64位的数据，不需要进行转化为图片路径，直将其传入此插件中将会转化图片唤醒微信app

setTimeout以外的代码是为了防止图片不完整或者清晰的的设置，详情请自己百度