900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > vue分享至qq空间 新浪微博 微信朋友圈及微信好友

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

时间:2019-05-04 16:46:09

相关推荐

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

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

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

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

分享到qq空间及好友

qq空间:

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

qq好友:

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

分享到新浪微博

/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就好)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。