Giter VIP home page Giter VIP logo

soshm's Introduction

Social Share

PC版请查看

特性

  • 仅需调用soshm.js,无其他库依赖
  • 支持微信,QQ,微博的原生应用分享(借用UC浏览器或者QQ浏览器或者URL scheme进行)
  • 支持使用dataset配置
  • 支持AMD、CommonJS和浏览器全局变量(使用UMD)
  • 图标及样式打包在js里,无需额外请求

安装

通过npm进行安装

npm install -S soshm

或者把脚本引进你的页面里

<script src="soshm.min.js"></script>

使用

参数

  1. 第一个参数为字符串类型,代表选择器。支持querySelectorAll 所支持的参数类型。。
  2. 第二个参数为对象字面量,配置分享的相关内容。
<div class="soshm"></div>
<script src="dist/soshm.min.js"></script>
<script>
  soshm('#share', {
    // 分享的链接,默认使用location.href
    url: '',
    // 分享的标题,默认使用document.title
    title: '',
    // 分享的摘要,默认使用<meta name="description" content="">content的值
    digest: '',
    // 分享的图片,默认获取本页面第一个img元素的src
    pic: '',
    // 默认显示的网站为以下六个个,支持设置的网站有
    // weixin,weixintimeline,qq,qzone,yixin,weibo,tqq,renren,douban,tieba
    sites: ['weixin', 'weixintimeline', 'yixin', 'weibo', 'qq', 'qzone']
  });
</script>

使用dataset进行配置

除了函数参数配置外,也可以用[data-*]的方式进行配置。 TIP: 函数参数配置优先级高于dataset配置

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

弹窗形式

soshm.popIn函数已弹窗的形式展示分享的站点,接收一个表示配置分享内容的对象字面量参数。

<button id="shareBtn"></button>
<script>
  document.getElementById('shareBtn').addEventListener('click', function() {
    soshm.popIn({
      title: '弹窗分享',
      sites: ['weixin', 'weixintimeline', 'weibo', 'yixin', 'qzone', 'tqq', 'qq']
    });
  }, false);
</script>

原生分享

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

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

License

MIT © calledT

soshm's People

Contributors

calledt avatar kokororin avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

soshm's Issues

引入成功了,也调用了,看到头部也有改js的样式,咋没效果呢?

<script src="static/js/soshm.min.js"></script>
  soshm('#share', {
// 分享的链接,默认使用location.href
url: 'https://github.com/calledT/soshm',
// 分享的标题,默认使用document.title
title: '测试',
// 分享的摘要,默认使用<meta name="description" content="">content的值
digest: '',
// 分享的图片,默认获取本页面第一个img元素的src
pic: '',
// 默认显示的网站为以下六个个,支持设置的网站有
// weixin,weixintimeline,qq,qzone,yixin,weibo,tqq,renren,douban,tieba
sites: ['weixin', 'weixintimeline', 'yixin', 'weibo', 'qq', 'qzone']

});

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.