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

vue项目使用百度分享

猜你喜欢