<a href="javascript:" onclick="document.getElementById('mcover').style.display='block'">分享到朋友圈</a>
<div id="mcover" onclick="document.getElementById('mcover').style.display=''" style="display: none">
<img src="/public/images/guide.png">
</div>
对应样式如下：
#mcover {
position: fixed
top: 0
left: 0
width: 100%
height: 100%
background: rgba(0, 0, 0, 0.7)
display: none
z-index: 20000
}
#mcover img {
position: fixed
right: 18px
top: 5px
width: 260px
height: 180px
z-index: 999
}
这是百度的示例，如果你要其他平台的你需要去所在平台的开发者中心查看就行了！
右边：
<!-- Baidu Button BEGIN --><script type="text/javascript" id="bdshare_js" data="type=slide&img=0&pos=right&uid=11824" ></script>
<script type="text/javascript" id="bdshell_js"></script>
<script type="text/javascript">
var bds_config = {"bdTop":155}
document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + new Date().getHours()
</script>
<!-- Baidu Button END -->
左边：
<!-- Baidu Button BEGIN --><script type="text/javascript" id="bdshare_js" data="type=slide&img=6&pos=left&uid=15177" ></script>
<script type="text/javascript" id="bdshell_js"></script>
<script type="text/javascript">
var bds_config = {"bdTop":15}
document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + new Date().getHours()
</script>
<!-- Baidu Button END -->
简介的话正常分享就可以显示，只是前面的缩略图无法显示。这是由于微信官方对此做出了限制，如果不满足官方需求，都是相同的默认图片。JSSDK自定义分享接口的策略调整。官方文件：为规范自定义分享链接功能在网页上的使用，自2017年4月25日起，JSSDK“分享到朋友圈”及“发送给朋友”接口，自定义的分享链接，其域名或路径必须与当前页面对应的公众号JS安全域名一致，否则将调用失败。例如，当前页面是 http://www.abc.com/123，其公众号对应的JS安全域名为 www.abc.com 以及 www.xyz.com，则分享自定义链接 http://www.abc.com/456 可以成功，分享 http://www.xyz.com/123 或 http://www.def.com/123 均将失败。对于未接入微信JSSDK或已接入但JSSDK调用失败的网页，被用户分享时，分享卡片将统一使用默认缩略图和标题简介，不允许自定义。接口完整用法请参考《微信JSSDK说明文档》，请开发者及时完成调整。
