m-share

github.com/cgzero/msha… （原地址）

安装方式

1. npm install m-share npm安装
2. script引入

配置项 config

const config = {
      link: "http://www.qq.com", // 分享网址，默认使用window.location.href
      title: "标题", // 分享的标题，默认读取document.title
      desc: "分享描述", // 分享描述, 默认读取<meta name="description" content="desc" />
      imgUrl: "http://backtonature.github.io/project/m-share/demo1.png", // 分享的图片, 默认取网页中第一个img标签
      types: ["wx", "wxline", "qq", "qzone", "sina"], // 启用的社交分享,默认为全部启用
      infoMap: {
        // 针对不同平台设定不同分享内容
        wx: {
          link: "分享到微信的链接", // 覆盖分享到微信的链接
          title: "分享到微信的标题", // 覆盖分享到微信的标题
          desc: "分享到微信的描述", // 覆盖分享到微信的标题
          imgUrl: "分享到微信的图片链接", // 覆盖分享到微信的图片链接
        },
      },
      fnDoShare(type) {
        // 执行分享的回调，type为'wx', 'wxline', 'qq', 'qzone', 'sina'
      },
    };

所有的配置项，都不是必填项

使用方式

1. 配置项配置 config
2. 初始化 Mshare.init(config)
3. 用想用的方式去分享

具体的分享方式

基础用法

// html
<h1>基础用法</h1>
<div class="m-share"></div>
​
​
// js
let config = {
      title: "基础用法的分享",
      desc: "Mshare的分享描述",
      types: ["wx", "wxline", "qq", "qzone", "sina"],
    };
Mshare.init(config);

点击弹层分享

//html
<h1>弹层分享</h1>
<button class="actionSheet">点击分享</button>
​
//js
let config = {
      title: "基础用法的分享",
      desc: "Mshare的分享描述",
      types: ["wx", "wxline", "qq", "qzone", "sina"],
    };
Mshare.init(config);
​
  document.querySelector(".actionSheet").addEventListener("click", function () {
        Mshare.popup(config);
});

指定DOM渲染

//html
<h1>指定Dom渲染</h1>
<div class="myDom"></div>
​
//js
 Mshare.render(document.querySelector(".myDom"), config);

js调用分享

//html
<h1>js调用分享</h1>
<button class="shareWx">分享到微信</button>
<button class="shareWxline">分享到朋友圈</button>
<button class="shareQq">分享到qq</button>
<button class="shareQzone">分享到qzone</button>
<button class="shareSina">分享到微博</button>
​
//js
document.querySelector(".shareWxline").addEventListener("click", function () {
        Mshare.to("wxline", config);
      });
​
document.querySelector(".shareQq").addEventListener("click", function () {
      Mshare.to("qq", config);
    });
​
    document.querySelector(".shareQzone")  .addEventListener("click", function () {
        Mshare.to("qzone", config);
      });
​
    document.querySelector(".shareSina").addEventListener("click", function () {
      Mshare.to("sina", config);
    });

手机右上角三个点分享

let config = {
      link: '点击分享链接后进入的地址',
      title: '分享的标题',
      desc: '分享的描述',
      imgUrl:'分享的图片'
    };
Mshare.init(config);

下面就是大概的样式

-----------如有侵权，请联系删除