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

分享至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('分享失败')
        })            
	})
})

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

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值