Jquery实现PC端分享到微信朋友圈/QQ

转载

寻梦xunm| 144| 收集

4个月前

超过129天温馨提示

本文最后更新于2024年07月14日，已超过129天没有更新，若内容或图片失效，请留言反馈。

需要引入JS：

document.write("<script language=javascript src='https://cdn.bootcdn.net/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js'></script>");

html代码

<a href="javascript:;" class="share wx js-share icon-share-weichat" data-cmd="weixin" title="分享到微信"></a>
<a href="javascript:;" class="share qq js-share icon-share-qq" data-cmd="qzone" title="分享到QQ空间"></a>
<div id="bdshare_weixin_qrcode_dialog" class="bd_weixin_popup">
    <div class="bd_weixin_popup_head">
        <span>
            分享到微信朋友圈
        </span>
        <a href="#" onclick="return false;" class="bd_weixin_popup_close">
            ×
        </a>
    </div>
    <div id="bdshare_weixin_qrcode_dialog_qr" class="bd_weixin_popup_main">
    </div>
    <div class="bd_weixin_popup_foot">
        打开微信，点击底部的“发现”，
        <br>
        使用“扫一扫”即可将网页分享至朋友圈。
    </div>
</div>

JS绑定

<script>
var ShareTip =  {
    shareToWx: function () {  // 分享到微信的二维码
        $("#bdshare_weixin_qrcode_dialog_qr").qrcode({
            text: path,            // 设置二维码内容
            render: "table",       // 设置渲染方式
            width: 256,            // 设置宽度,默认生成的二维码大小是 256×256
            height: 256,           // 设置高度
            typeNumber: -1,        // 计算模式
            background: "#ffffff", // 背景颜色
            foreground: "#000000"  // 前景颜色
        });
    },
    shareToQq: function (content, url) {   // 分享到腾讯QQ
        var shareqqstring = 'https://connect.qq.com/widget/shareqq/index.html?url=' + encodeURIComponent(url) + '&title=' + content + '&desc='+content+'&pics=';
        window.open(shareqqstring);
    },
}
var path = window.location.href
var title = '{$info.title}';
ShareTip.shareToWx()
$(".icon-share-weichat").click(function() {
    $('#bdshare_weixin_qrcode_dialog').show();
})
$('.bd_weixin_popup_close').click(function() {
    $('#bdshare_weixin_qrcode_dialog').hide();
})
$(".icon-share-qq").click(function(params) {
    ShareTip.shareToQq(title, path)
})
</script>

CSS样式

.bd_weixin_popup{position:fixed;left:50%;top:50%;padding:10px;width:280px !important;height:340px !important;background:#fff;border:solid 1px #d8d8d8;z-index:11001;font-size:12px;margin-top:-170px;margin-left:-140px;display:none}
.bd_weixin_popup .bd_weixin_popup_head{font-size:12px;font-weight:bold;text-align:left;line-height:16px;height:16px;position:relative;color:#000}
.bd_weixin_popup .bd_weixin_popup_head .bd_weixin_popup_close{width:16px;height:16px;position:absolute;right:0;top:0;color:#999;text-decoration:none;font-size:16px}
.bd_weixin_popup .bd_weixin_popup_main{padding:15px 10px;min-height:150px;_height:150px}
.bd_weixin_popup .bd_weixin_popup_foot{font-size:12px;text-align:left;line-height:22px;color:#666}

none

2 赞 or 打赏

喜欢就打赏一点