vue分享至qq空间，新浪微博，微信朋友圈及微信好友

vue分享至qq空间，新浪微博，微信朋友圈及微信好友

本博客主要针对pc网页版分享，移动端相似之处不做参考

关于分享，对于分享到qq空间、好友及新浪微博比较简单，给一个点击事件调用一下官方接口就可以了，自己绑定一些标题、链接、图片内容就可以了

分享到qq空间及好友

qq空间：
https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=你的网址&sharesource=qzone&title=你的分享标题&pics=你的分享图片&summary=你的分享描述信息

qq好友：

http://connect.qq.com/widget/shareqq/index.html?url=你的分享网址&sharesource=qzone&title=你的分享标题&pics=你的分享图片地址&summary=你的分享描述&desc=你的分享简述
获取当前网址要用encodeURIComponent(document.location)

分享到新浪微博

http://service.weibo.com/share/share.php?url=你的分享网址&sharesource=weibo&title=你的分享标题&pic=你的分享图片&appkey=你的key，需要在新浪微博开放平台中申请

分享到微信

首先需要安装微信的js-sdk,这里我安装的是1.4.0版本，之后在需要使用的地方引入就可以了（这里的引入方式是采用下面的这种方式）

npm i weixin-js-sdk --save

const wx = require(‘weixin-js-sdk’);

这里微信分享的逻辑是弹出一个二维码，用户使用手机扫描二维码进入网页，右上角会有一个微信的菜单，打开之后会有分享，我们只需要配置好一些参数，及分享的内容标题等

关于二维码

二维码使用的是qrcodejs2这个插件，使用起来也很简单，同样，使用的地方正常引入就可以了

npm i qrcodejs2 --save

import QRCode from ‘qrcodejs2’

下面是怎么使用的代码

<div id="qrcode" ref="qrcode"></div>

this.$nextTick(() => {
	let qrcode = new QRCode('qrcode',{
		width: 200, // 设置宽度，单位像素
        height: 200, // 设置高度，单位像素
        text: window.location.href // 设置二维码内容或跳转地址
     })
})

这是我们只是做了一个二维码让用户能够扫面这个二维码进入网站，分享还需要我们去做一些配置，这里是vue，只讲前端，前端需要发送请求获取一些信息（这个要跟后端去要），当然发送请求的时候要把当前页面的路径发送出去

let data = {
	url: window.location.href //当前页面的路径
}
this.$axios.post('你的路径'，data).then(function(res){
	wx.config({
	    appId: res.data.data.signPackage.appId,// 必填，公众号的唯一标识
	    timestamp: res.data.data.signPackage.timestamp,// 必填，生成签名的时间戳
	    nonceStr: res.data.data.signPackage.nonceStr, // 必填，生成签名的随机串
	    signature: res.data.data.signPackage.signature,// 必填，签名
	    jsApiList: ["updateAppMessageShareData","updateTimelineShareData"]// 必填，需要使用的JS接口列表(这里的接口是你下面需要使用的，必须提前声明)
    });
    wx.ready(function() {
		//分享给朋友
        wx.updateAppMessageShareData({
          title: '中国创意共享平台·壹企划',
          desc: title,
          link: window.location.href,
          imgUrl: picLink,
          success: function() {
            console.log('分享成功')
          }
        });
        //分享到朋友圈
        wx.updateTimelineShareData({
          title: title,
          link: window.location.href,
          imgUrl: picLink,
          success: function() {
            console.log('分享成功')
          }
        }); 
		//分享失败
        wx.error(function(res){
          alert('分享失败')
        })            
	})
})

如果这些配置都正常的话，就可以正常使用了，如果有什么问题也可以给我留言或者私信，如果及时看到一定会给大家分析，互帮互助才能成长

下面是我微信Xiongwei953(欢迎交流，备注csdnbear就好)