PC版分享给朋友空间微博等

功能概述

        浏览器中分享网址到QQ好友，QQ空间，微博，微信。适合在PC端使用。由于微信安全策略的特殊性，其中微信分享是生成二维码，需要打开手机微信扫码后分享。

组件及项目源码 
        ps.本次我做成了vue组件，组件在HellowWolrd.vue中调用了。
             可查看完整代码帮助理解，或者通过这些代码学习组件化。

效果

图1.分享图标按钮 图2.分享给微博 图3.分享到空间 图4.微信二维码网页

分析

在PC端分享功能是非常简单的，只要在对应的网址后面拼接参数即可。

QQ好友分享： http://connect.qq.com/widget/shareqq/index.html? + 参数

QQ空间分享： http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey? + 参数

新浪微博分享：http://service.weibo.com/share/share.php? + 参数

各个网站分享接收的参数内容有很多相同的键，所以我们可以整合到一起：

图5.参数列表

        其中大多可选，少数必填，如下图是我的默认参数，也是可通过组件传递的参数：        

图6.参数举例

然后我们遍历集合，把集合内的键值对转换成字符串的形式，拼接到分享链接后面：

图7.拼接方法

微信二维码直接img标签，src为 http://qr.liantu.com/api.php?text=  + 分享的网址。这个链接可以生成网址二维码。我用iconfont与elementUI做了一下。

本次我将这个做成了vue组件，通过v-share标签使用。怎么使用组件编辑组件不详解了。可自行阅读源码。

组件及项目源码 ps.组件在HellowWolrd.vue中调用了

转载到其他平台需含本文的简书链接，vue技术我只在简书发布