vue專案使用百度分享
又開始新專案啦,這次的專案有分享功能,第一想法就是使用jiaThis,寫到分享這裡馬上去百度jiaThis。首先官網開啟是空的,然後繼續搜尋看到關於jiathis的新聞,原來jiaThis2018年4月30日起關閉了旗下的“友言”業務、旗下“分享”業務和“友薦”業務。之前一直用的是jiaThis,允悲。
然後就換用百度分享
1.從百度分享官網生成相關分享程式碼
開啟百度分享官網http://share.baidu.com/,按照官網的指導生成程式碼,複製到我們的專案裡面;
2.將分享結構放入到專案
<div class="bdsharebuttonbox"> <a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a> <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空間"></a> <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a> </div>
3.處理js部分
mounted: function(){ const that=this; setTimeout(()=>{ that.setShare() },0) }, methods:{ setShare(){ //分享相關程式碼 window._bd_share_config={ "common":{ "bdSnsKey":{}, "bdText":"", "bdMini":"1", "bdMiniList":false, "bdPic":"", "bdStyle":"1", "bdSize":"24" }, "share":{}, "selectShare":{ "bdContainerClass":null, "bdSelectMiniList":["sqq","qzone","tsina"] } }; const s = document.createElement('script'); s.type = 'text/javascript'; s.src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5); document.body.appendChild(s); }, },
如果不想要圖片也有分享的話,記得把window._bd_share_config裡面images的相關配置刪掉
"image":{
"viewList":["qzone","tsina","tqq","renren","weixin"],
"viewText":"分享到:",
"viewSize":"16"
},
3.按照設計圖調整樣式
這部分就略了
===============added 20180915===============
專案搬到伺服器上後發現了一個問題,自己的專案是在https域名上面,然而百度的js是在http域名上的,在https上引用http的js會報錯。
線上使用解決辦法:
1.需要下載最新的版本外掛,GitHub地址:https://github.com/hrwhisper/baiduShare
2.將下載外掛好的放到static下;
3.結構部分同之前;
4.js引用,因為很多頁面用到了分享,我就在index.html中引用的,js部分如下,根據自己的路徑來設定s.src
<script type="text/javascript">
//分享相關程式碼
window._bd_share_config={
"common":{
"bdSnsKey":{},
"bdText":"",
"bdMini":"1",
"bdMiniList":false,
"bdPic":"",
"bdStyle":"1",
"bdSize":"24"
},
"share":{},
};
const s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5);
document.body.appendChild(s);
</script>
5.打包放到線上看看,如果好了就大功告成了。如果還是沒有,首先檢查一下s.src的路徑是否正確。
6.我這個專案的線上地址前面多了一個hmweb路徑,然後我是修改了share.js的domain:{staticUrl:"/hmweb/"}就好了