m-share.js
Version:
h5页面分享组件、支持分享到微信、朋友圈、qq、QQ空间、QQ好友。
102 lines (93 loc) • 3.18 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="initial-scale=1.0,user-scalable=no,minimum-scale=1.0, maximum-scale=1.0,width=device-width"
/>
<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" />
<title>m-share</title>
<style>
div {
margin: 30px;
}
.actionSheet {
background: palevioletred;
color: #fff;
width: 120px;
}
</style>
<script src="../dist/m-share.js"></script>
</head>
<body>
<!-- 基础配置 -->
<h1>基础配置</h1>
<div class="m-share"></div>
<!-- 弹层分享 -->
<h1>弹层分享</h1>
<button class="actionSheet">点击弹层</button>
<!-- 指定dom渲染 -->
<h1>指定dom渲染</h1>
<div class="myClass"></div>
<!-- js调用 -->
<h1>js调用分享</h1>
<button class="shareWx">分享到微信</button>
<button class="shareWxline">分享到朋友圈</button>
<button class="shareQq">分享到qq</button>
<button class="shareQzone">分享到qzone</button>
<button class="shareWeibo">分享到微博</button>
<script>
var config = {
title: "m-share", // 标题，默认读取document.title
desc: "m-share的描述", // 描述, 默认读取head标签：<meta name="description" content="desc" />
link: "http://www.dearhaoge.com/project/m-share/", // 网址，默认使用window.location.href
imgUrl: "http://www.dearhaoge.com/project/m-share/shareIcon.jpg", // 图片, 默认取网页中第一个img标签
types: ["wx", "wxline", "qq", "qzone", "weibo"], // 开启的分享图标, 默认为全部
infoMap: {
wx: {
title: "m-share微信分享",
desc: "我是微信的分享",
link: "http://www.dearhaoge.com/project/m-share/?ADTAG=wx",
imgUrl: "http://www.dearhaoge.com/project/m-share/shareIcon.jpg",
},
},
fnDoShare: function (type) {
console.log(1);
},
};
// 基础配置
Mshare.init(config);
// // 指定dom渲染
Mshare.render(document.querySelector(".myClass"), config);
// js调用分享
document.querySelector(".shareWx").addEventListener("click", function () {
Mshare.to("wx", config);
});
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(".shareWeibo")
.addEventListener("click", function () {
Mshare.to("weibo", config);
});
document
.querySelector(".actionSheet")
.addEventListener("click", function () {
Mshare.popup(config);
});
</script>
</body>
</html>