1. 程式人生 > >vue專案使用百度分享

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/"}就好了