一个走社会主义道路,适合中国国情的社交分享组件
发布在前端!==钱端2016年2月4日view:3893前端开发BrettBatIconFontKaylynSCSS
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

Github地址  Demo地址

特性

  • 针对PC和手机分为两个版本,移动版gzip之后仅8kb,PC版也仅10kb
  • 仅需调用sosh.js或者msosh.js,无其他库依赖
  • PC版支持IE7以上浏览器
  • 移动端支持微信,QQ,微博的原生应用分享(借用UC浏览器或者QQ浏览器或者URL scheme进行)
  • 样式包含在脚本里,减少http请求
  • 使用iconfont当图标
  • 支持使用dataset配置

PC版(sosh.js)

默认初始化

Sosh默认初始化带有类名sosh的元素,所以只需简单的两行代码就可以用上分享

<div class="sosh"></div>
<script src="dist/sosh.min.js"></script>

使用构造函数初始化

使用Sosh构造函数进行初始化:

  1. 第一个参数为字符串类型,代表选择器。支持简单的ID和Class两种形式,如:#id.classname
  2. 第二个参数为对象字面量,配置分享的相关内容
<div id="soshid"></div>
<script>
  new Sosh('#soshid', {
    // 分享的链接,默认使用location.href
    url: '', 
    // 分享的标题,默认使用document.title
    title: '', 
    // 分享的摘要,默认使用<meta name="description" content="">content的值  
    digest: '', 
    // 分享的图片,默认获取本页面第一个img元素的src
    pic: '', 
    // 选择要显示的分享站点,顺序同sites数组顺序,
    // 支持设置的站点有weixin,yixin,weibo,qzone,tqq,douban,renren,tieba
    sites: ['weixin,', 'weibo', 'yixin', 'qzone'] 
  })
</script>

使用dataset进行配置

除了能在构造函数初始化的时候进行参数配置外,也可以用[data-*]的方式进行配置,并且优先级高于函数参数

<div class="pcdataset" data-title="分享标题" data-sites="yixin,weibo,weixin,tqq,qzone"></div>
<script>
  new Sosh('.pcdataset', {
    sites: ['weixin,', 'weibo', 'yixin', 'qzone'] 
  })
</script>

移动版(msosh.js)

使用构造函数初始化

移动版的构造函数为Msosh,移动版不会进行默认的初始化调用,需要手动初始化,构造函数的参数和PC版类似,第一个参数代表selector,支持querySelectorAll所支持的参数类型,第二个参数配置分享相关的内容。同样也支持使用dataset配置。

<div class="msosh"></div>
<script src="dist/msosh.min.js"></script>
<script>
  var msosh = new Msosh('.msosh', {
    // 默认显示的网站为以下六个个,支持设置的网站有
    // weixin,weixintimeline,qq,qzone,yixin,weibo,tqq,renren,douban,tieba
    sites: ['weixin', 'weixintimeline', 'yixin', 'weibo', 'qq', 'qzone']
  });

  // 初始化过后可以调用popIn函数来弹出分享窗口,一般用来做更多分享的用途
  // 在第一个调用这个函数的时候可以传入配置参数,不传则使用初始化时
  // 所使用的配置,参数仅在第一个调用的时候生效。
  msosh.popIn({
    sites: ['weixin', 'weixintimeline', 'yixin', 'weibo', 'qq', 'qzone', 'tqq', 'renren', 'teiba']
  })
</script>

在微信里点击微信分享会在右上角浮出分享操作的提示,也可以手动调用Msosh.wxShareTip()函数,此函数仅在微信里生效。

在UC浏览器和QQ浏览器里支持唤起微信、QQ、微博客户端进行分享。其他浏览器里支持唤起QQ客户端的分享,微博分享使用webapi进行,而微信分享需要借用QQ浏览器进行,如果用户没有安装,则点击无反应。

样式

因为CSS打包在js里所以无需另外引用,但是由于图标使用iconfont,所以还需要把图标放在网页能请求到的地方,当然也可以自定义优先级更高的样式覆盖默认的样式。

评论
发表评论
2年前
赞了此文章!
2年前
赞了此文章!
2年前
赞了此文章!
WRITTEN BY
Kimi
一句话介绍不了自己~
TA的新浪微博
PUBLISHED IN

我的收藏