Vue utilise Facebook Twitter pour partager des exemples

Cet article présente principalement l'exemple de Vue utilisant Facebook et Twitter pour partager. Maintenant, je le partage avec vous et le donne comme référence.

Enregistrer un partage d'utilisation de vue

Document de référence de partage de contenu fixe

document de partage Facebook

document de partage Twitter

vue utilise

facebook et utilise le partage

pour trouver index.html et ajoutez le 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>

et utilisez

La première façon 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>

La deuxième façon 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 utilise share

trouver index.html ajouter Le code

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

est utilisé sur la page vue

est ajouté dans xxx.vue Le code

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

est le mien. , j'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

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

Vue implémente la méthode de commutation par clic actif

Explication détaillée de l'API du projet Vue.js et de la configuration du routeur split Practice

Méthode de NodeJS pour implémenter le cryptage irréversible et enregistrer le texte chiffré du mot de passe

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!