百度分享组件使用爬坑

阳光穿透心脏的1/2处 2021-12-10 14:21 317阅读 0赞

最近在做公司一个项目需要用到百度分享的功能，苦中有一页是一个列表页，需要针对每一行做一个分享功能！

就像如下这种类似的。

![Image 1][]

于是查看百度分享组件的文挡，查看文挡，得知文挡分享的使用范例如下：

1 <div class="bdsharebuttonbox" data-tag="share_1">
     2     <a class="bds_mshare" data-cmd="mshare"></a>
     3     <a class="bds_qzone" data-cmd="qzone" href="#"></a>
     4     <a class="bds_tsina" data-cmd="tsina"></a>
     5     <a class="bds_baidu" data-cmd="baidu"></a>
     6     <a class="bds_renren" data-cmd="renren"></a>
     7     <a class="bds_tqq" data-cmd="tqq"></a>
     8     <a class="bds_more" data-cmd="more">更多</a>
     9     <a class="bds_count" data-cmd="count"></a>
    10 </div>
    11 <script>
    12     window._bd_share_config = {
    13         common : {
    14             bdText : '自定义分享内容',    
    15             bdDesc : '自定义分享摘要',    
    16             bdUrl : '自定义分享url地址',     
    17             bdPic : '自定义分享图片'
    18         },
    19         share : [{
    20             "bdSize" : 16
    21         }]37     }
    38     with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];
    39 </script>

这样只能针对一个分享来配置，但是我这里需要用到多个，我就想把分享的HTML结构这一块单独放在外面，当鼠标移过![Image 1][]按钮的时候再用定位去实现分享结构的位置，再来使用分享功能，但是怎么动态配置分享的文字与链接了，一开始是当鼠标滑过的时候通过设置window.\_bd\_share\_config.bdText=“想要分享的内容”与window.\_bd\_share\_config.bdUrl=“想要分享的链接”，发现根本不鸟你，心里满满的忧伤，于是再仔细查看文挡，发现有一个回调事件可以动态设置参数，官方说明如下：

![Image 1][]

但是找不到具体的示例代码，只能尝试着去配置，我是这么做的

1 window._bd_share_config = {
     2 13         common : {
     3 14             bdText : '自定义分享内容',    
     4 15             bdDesc : '自定义分享摘要',    
     5 16             bdUrl : '自定义分享url地址',     
     6 17             bdPic : '自定义分享图片'，
     7                 onBeforClick:function(cmd,config){
     8                    return config.bdText="想要分享的内容"！
     9     
    10                 }
    11 18         },
    12 19         share : [{
    13 20             "bdSize" : 16
    14 21         }]
    15 37     }

也没有回响，我有console.log(config)，参数确实已经被改啦，就是不起作用，当时欲哭无泪，于是忍下再查看文挡，看到有一个帮助一栏，惊奇发现里面有动态设置分享内容的说明，说明如下:

1 //2、通过增加按钮html标签的data属性进行修改：
     2 
     3 
     4 <div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare" data="{'text':'这里写入您想要自定义的分享内容A'}">
     5     <a class="bds_qzone">QQ </a>
     6     <a class="bds_tsina">新浪</a>
     7     <a class="bds_tqq">腾讯</a>
     8     <a class="bds_renren">人人</a>
     9     <span class="bds_more">更多</span>
    10 </div>
    11 <script type="text/javascript" id="bdshare_js" data="type=tools" ></script>
    12     <script type="text/javascript" id="bdshell_js"></script>
    13     <script type="text/javascript">
    14         document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000);
    15     </script>
    16

于是我在上面的分享结构标签上加上data="\{'text':'这里写入您想要自定义的分享内容A'\}"，没想到还是不鸟人，后面多次尝试才知道这是1.0版的方法，要想用上面的这HTML上加data的方式配置就行也按上面的方法引人1.0版的，当时就想是不是2.0还没完善，是不是还不支持动态配置参数，本想就按上面引入1.0的方式去解决，但是还不心甘，于是百度再百度，也一直没找到好的解决方法，于是又反复的看文挡，感觉应该是onBeforeClick全用不对，于是百度搜索"百度分享onBeforeClick",才终于知道问题出在哪，方法如下:

1 <script>
     2         window._bd_share_config={
     3                 "common":{
     4                     "bdSnsKey":{},
     5                     "bdText":"123654",
     6                     "bdMini":"1",
     7                     "bdMiniList":false,
     8                     "bdPic":"",
     9                     "bdStyle":"0",
    10                     "bdSize":"24",
    11                     "onBeforeClick":function(cmd,config){
    12                         return {bdText:'66666688888888'}
    13                     }
    14 
    15                 },
    16                 "share":{
    17                     "bdSize":16
    18                 }
    19             };
    20                 with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
    21         </script>

其实是你要动态设置哪几个内容，只要以json形式返回你新设的参数即可，而不是直接修改config.bdText下的属性,至些完美解决，其实问题不是特别复杂，在此记录，只让后续有人用百度分享遇到这样的情况下有个案例展现，少走弯路！共勉！

转载于:https://www.cnblogs.com/xwwin/p/4545335.html

[Image 1]: