Heim >Web-Frontend >js-Tutorial >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 = '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>
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
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!