Heim > Web-Frontend > js-Tutorial > Vue nutzt Facebook und Twitter, um Beispiele zu teilen

Vue nutzt Facebook und Twitter, um Beispiele zu teilen

亚连
Freigeben: 2018-05-30 14:19:21
Original
4627 Leute haben es durchsucht

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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) {}
   );
  },
Nach dem Login kopieren

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>
Nach dem Login kopieren

Verwenden Sie

auf der Vue-Seite und fügen Sie

<p class="twitter-share-button" id="container"></p>
Nach dem Login kopieren

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"
  }
 );
}
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage