Vue nutzt Facebook und Twitter, um Beispiele zu teilen

In diesem Artikel wird hauptsächlich das Beispiel von Vue vorgestellt, das Facebook und Twitter zum Teilen verwendet. Jetzt teile ich es mit Ihnen und gebe es als Referenz.

Eine Vue-Nutzungsfreigabe aufzeichnen

Referenzdokument zur Inhaltsfreigabe korrigiert

Facebook-Freigabedokument

Twitter-Freigabedokument

vue verwendet

Facebook, um

zu teilen, um index.html zu finden, den Code

 <!-- facebook 分享 -->
 <p id="fb-root"></p>
 <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 = &#39;https://connect.facebook.net/zh_CN/sdk.js#xfbml=1&version=v2.12&appId=你的APPID&autoLogAppEvents=1&#39;;
   fjs.parentNode.insertBefore(js, fjs);
  }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
 </script>

hinzuzufügen und

zu verwenden vue Der erste Weg ist HTML

<p class="fb-share-button" data-href="http://dev.XXXX.io/" data-layout="button_count" data-size="small" data-mobile-iframe="true">
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse" 
class="fb-xfbml-parse-ignore">分享</a>
</p>

Der zweite Weg ist 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 Verwenden Sie share

Suchen Sie index.html und fügen Sie den Code hinzu

<!-- 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>

Verwenden Sie

auf der Vue-Seite und fügen Sie

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

Javascript-Code

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"
  }
 );
}

in xxx.vue ein Es wird in Zukunft für alle hilfreich sein.

Verwandte Artikel:

Vue implementiert die aktive Klickschaltmethode

Detaillierte Erläuterung der Vue.js-Projekt-API und Router-Konfiguration Split-Praxis

NodeJS-Methode zur Implementierung irreversibler Verschlüsselung und zum Speichern von Passwort-Chiffretext

Das obige ist der detaillierte Inhalt vonVue nutzt Facebook und Twitter, um Beispiele zu teilen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!