第三方分享工具bShare的技巧

最新推荐文章于 2021-03-23 04:52:52 发布

潘潘91

最新推荐文章于 2021-03-23 04:52:52 发布

阅读量4.3k

点赞数

分类专栏：前端杂谈文章标签：用户体验

本文链接：https://blog.csdn.net/PanRuiFang/article/details/42387515

版权

前端杂谈专栏收录该内容

7 篇文章 0 订阅

订阅专栏

最近项目让我做分享的部分，我们的项目呢，使用HTTPS协议的，我就对比了几个第三方分享框架，最后使用了bShare。在使用的过程中，遇到了一些问题，就记录下来，供大家和我自己查看。

一般的网站或者应用的话，可以使用bShare默认的分享方式，如果决定他们不太符合自己的要求，可以redirectAPI来自定义分享的方式。

具体步骤如下：

1. 定义分享dom 以及样式

样式就自己CSS写啦～～

2. 定义调用方法

function shareTo(site){
var e = encodeURIComponent, s = screen, d = document, wd = 640, hg = 480, u = d.location;
var uuid = '';
var img ="http://ww4.sinaimg.cn/mw690/005QP7Jmgw1em6xv6694hg30dw07unei.gif";

var ctxt = d.getElementById('contentText').getElementsByTagName('p').length>0?d.getElementById('contentText').getElementsByTagName('p')[0].innerHTML.replace(/<[^>].*?>/g,'').substr(0,120):'';

var url = "http://api.bshare.cn/share/"+site+"?url="+e("http://www.bshare.cn")+"&title="+e(d.title)+"&publisherUuid="+uuid+"&summary="+ctxt+"&pic="+img;
window.open(url, 'bshare', ['toolbar=0,status=0,resizable=1,width='+ wd +',height='+ hg +',left='+ (s.width - wd) / 2+ ',top='+ (s.height - hg) / 2]);
}

使用中遇到的问题：

1. bshare分享的url中的title 和summary都可以自定义的。默认的title是我们页面中<head></head>标签中定义的<title></title>中的内容，summary是<meta name="description" content="content">content中的内容。如果没有定义description的话，分享的时候，title位置就会出现“This is the title - ”的形式。比如分享到微博的时候，在那个文本框里就会显示“This is the title -” ，用户体验不好。

这是因为bShare默认的在title和summary中有一个“-”,有两个方法可以改善用户体验。

1）注册bShare成为站长，然后在站长的站点管理中改变模板。

2）自定义summary，不让它的内容为空。

2. 分享到微信的时候，那个二维码特别小，只有129×129。在一个大窗口中只有左上角一个很小的二维码，看起来是不是很别扭？很难看呢？

所以我们可以只获取二维码，然后自定义显示样式。

获取二维码的url是：

url = "http://b.bshare.cn/barCode?site=weixin&type=0&url="+e(_getShareUrl())+&publisherUuid="+uuid;

这个url就是二维码图片的url地址了，我们只需要使用<img>标签，让它的src属性指向这个url就可以啦，想要怎么显示就怎么显示，是不是很方便？
*注意：获取微信二维码的url不需要很多参数，这个接口是不需要过多的参数的，只需要分享的地址，还有站长的id就可以了。