移动端-分享微信新浪等插件

最新推荐文章于 2025-05-28 14:53:37 发布

转载最新推荐文章于 2025-05-28 14:53:37 发布 · 2.7k 阅读

SocialShare是一款轻量级的分享组件，只需引入soshm.js文件即可实现对微信、QQ和微博等平台的内容分享功能。支持多种配置方式，包括通过脚本参数或HTML属性进行配置。同时提供弹窗分享功能，方便用户一键分享到多个社交平台。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转：http://www.calledt.com/soshm/

Social Share

特性

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

安装

通过npm进行安装

npm install -S soshm

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

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

使用

参数

第一个参数为字符串类型，代表选择器。支持querySelectorAll 所支持的参数类型。。
第二个参数为对象字面量，配置分享的相关内容。

<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>