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

前言:
1.分享的4個平臺,facebook,twitter,微博是通過鏈接來進行分享,微信是通過二維碼來分享。
2.facebook是不支持自帶title進入的。
注:分享的vue項目的網(wǎng)頁地址,如有參數(shù)不要用query傳值(xxx.com?test=123),要用params傳值(xxx.com/123)。router路由模式,最好用 history

開始:
1.twitter分享:text是分享傳入的標題,url是分享的網(wǎng)頁地址

<a  title="twitter" target="_blank">twitter</a>

2.微博分享:title是分享傳入的標題,url是分享的網(wǎng)頁地址

<a  title="weibo" target="_blank">weibo</a>

3.facebook分享:u是分享的網(wǎng)頁地址

<a  title="facebook" target="_blank">facebook</a>

4.微信分享:將網(wǎng)頁鏈接轉成二維碼,用戶用微信來掃一掃,打開網(wǎng)頁后在分享

1.先安裝轉二維碼的包:
npm i qrcode2 -S
2.引入項目中
 import QRCode from 'qrcode2'
3.創(chuàng)建一個放二維碼的div,且加上id
 <div id="wechat"></div>
4.將當前網(wǎng)頁的鏈接轉成二維碼,注:分享的title,微信會將網(wǎng)頁的title認為的分享的title
 new QRCode('wechat', {
        width: 200,  // 二維碼寬度
        height: 200, // 二維碼高度
        text: url, //url為網(wǎng)頁的鏈接
       });

如果問題,請留言

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 分享是為了更好的傳播,尤其是做業(yè)務平臺網(wǎng)站的,傳播是自然的事情,而且要和國際化接軌,就要能分享到Facebook、...
    Dannn_Y閱讀 16,579評論 0 7
  • 先引入JS 文件 this.wxShare() 在created里調用 首先登陸微信公眾號 JSSDK使用步驟 步...
    寄魚予海與你閱讀 6,949評論 1 3
  • 現(xiàn)在,我已經(jīng)回到家中,但是這不能成為我放松腳步的理由。這一次,我接觸到的內容是event這一部分。event在學校...
    隱藏的記號閱讀 189評論 0 1
  • 1。 所謂永遠,所謂曾經(jīng),到不了的就是永遠,忘不了的就是曾經(jīng)。 當你開始疑問“他對我好嗎?”的時候,就算不愿意承認...
    陳大伯說閱讀 807評論 1 3
  • 又是一年黑色的七月,高考成績剛剛頒布,幾家歡喜幾家愁。今天又輪到中考,又一批家長在學校門前徘徊守望。 回想十幾年前...
    黑的白的黑閱讀 322評論 0 0

友情鏈接更多精彩內容