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.按照設計圖調整樣式

這部分就略了