又开始新项目啦,这次的项目有分享功能,第一想法就是使用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/"}就好了