记录一次vue使用分享
固定内容的分享 参考文档
vue 使用
facebook 使用分享
找到index.html 添加一下代码
<!-- facebook 分享 --> <div></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 data-href="" data-layout="button_count" data-size="small" data-mobile-iframe="true"><a target="_blank" href="">分享</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></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" } ); }