美文网首页
vue将pc文章分享到facebook,twitter,微博,微

vue将pc文章分享到facebook,twitter,微博,微

作者: leesession | 来源:发表于2019-11-14 15:15 被阅读0次

前言:
1.分享的4个平台,facebook,twitter,微博是通过链接来进行分享,微信是通过二维码来分享。
2.facebook是不支持自带title进入的。
注:分享的vue项目的网页地址,如有参数不要用query传值(xxx.com?test=123),要用params传值(xxx.com/123)。router路由模式,最好用 history

开始:
1.twitter分享:text是分享传入的标题,url是分享的网页地址

<a href="http://twitter.com/share?text=这是分享的title&url=这是分享的地址" title="twitter" target="_blank">twitter</a>

2.微博分享:title是分享传入的标题,url是分享的网页地址

<a href="http://service.weibo.com/share/share.php?url=这是分享的地址&title=这是分享的title" title="weibo" target="_blank">weibo</a>

3.facebook分享:u是分享的网页地址

<a href="https://www.facebook.com/sharer.php?u=这是分享的地址" title="facebook" target="_blank">facebook</a>

4.微信分享:将网页链接转成二维码,用户用微信来扫一扫,打开网页后在分享

1.先安装转二维码的包:
npm i qrcode2 -S
2.引入项目中
 import QRCode from 'qrcode2'
3.创建一个放二维码的div,且加上id
 <div id="wechat"></div>
4.将当前网页的链接转成二维码,注:分享的title,微信会将网页的title认为的分享的title
 new QRCode('wechat', {
        width: 200,  // 二维码宽度
        height: 200, // 二维码高度
        text: url, //url为网页的链接
       });

如果问题,请留言

相关文章

网友评论

      本文标题:vue将pc文章分享到facebook,twitter,微博,微

      本文链接:https://www.haomeiwen.com/subject/dterictx.html