APP 微信 卡片 分享

一直在别人的app上使用的分享图片到微信的功能,轮到自己写的时候,感觉要了老命了~

1.环境配置

• vue.js 1.0 +  webpack
• cordova微信插件: https://github.com/xu-li/cordova-plugin-wechat

2.思路历程

阶段一:

隔壁项目组的小伙伴做过微信内的图片分享,所以跑去取了下经,流程如下:

1. 将需要分享的html部分转成base64(名为originImg);
2. 在屏幕外渲染出最终分享的dom(名为shareDom),其中用img来承载originImg;
3. 将shareDom转为base64;
4. 将shareIimg转成blob格式;
5. 将blob转成formData格式发送到服务器;
6. 分享存入服务器的图片.

在按如上流程完成后,效果如下:

可以看出,图片的效果一般,十分的模糊.

苦思冥想许久以后,发现了图片下半部分清晰度还是可以的,那么上半部分为什么就不清晰呢？

回溯了图片生成的流程，找到了原因：上半部分图片经过了两次转base64的操作.

阶段二:

改进后的实现流程:

1. clone需要分享的dom(名为originDom);
2. 在屏幕外渲染出最终分享的dom(名为shareDom),把originDom放到对应位置;
3. 将shareDom转为base64;
4. 分享base64;(插件支持)

最终效果: