記錄一次vue使用分享

固定內(nèi)容的分享 參考文檔

facebook 分享文檔

twitter 分享文檔

vue 使用

facebook 使用分享

找到index.html 添加一下代碼

 <!-- facebook 分享 --> <div id="fb-root"></div> <script>(function (d, s, id) {   var js, fjs = d.getElementsByTagName(s)[0];   if (d.getElementById(id)) return;   js = d.createElement(s); js.id = id;   js.src = 'https://connect.facebook.net/zh_CN/sdk.js#xfbml=1&version=v2.12&appId=你的APPID&autoLogAppEvents=1';   fjs.parentNode.insertBefore(js, fjs);  }(document, 'script', 'facebook-jssdk')); </script>

在vue 里面使用

第一種方式 html

代碼如下:
<div class="fb-share-button" data- data-layout="button_count" data-size="small" data-mobile-iframe="true"><a target="_blank" class="fb-xfbml-parse-ignore">分享</a></div>

第二種方式 js

 facebook() {  // 初始化     FB.init({    appId: 你的appid,    autoLogAppEvents: true,    xfbml: true,    version: "v2.12"   });   FB.ui(    {     method: "share",     mobile_iframe: true,     href: "http://dev.XXXX.io/?test=12345"    },    function(response) {}   );  },

twitter 使用分享

找到index.html 添加一下代碼

<!-- twitter 分享 --> <script>window.twttr = (function (d, s, id) {   var js, fjs = d.getElementsByTagName(s)[0],    t = window.twttr || {};   if (d.getElementById(id)) return t;   js = d.createElement(s);   js.id = id;   js.src = "https://platform.twitter.com/widgets.js";   fjs.parentNode.insertBefore(js, fjs);   t._e = [];   t.ready = function (f) {    t._e.push(f);   };   return t;  }(document, "script", "twitter-wjs")); </script>

在vue頁面使用

在xxx.vue里面添加

<div class="twitter-share-button" id="container"></div>

javascropt 代碼

twitter() { console.log(twttr) twttr.widgets.createShareButton(  "http://dev.XXXX.io/?test=12345",  document.getElementById("container"),  {   text: "分享測試",   size: "large",   hashtags: "example,demo",   via: "twitterdev",   related: "twitterapi,twitter"  } );}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯新站長站。