其他教程

其他教程

Products

当前位置:首页 > 其他教程 >

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

GG网络技术分享 2025-03-18 16:17 0


需要引入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}

标签: 二维码 朋友圈

提交需求或反馈

Demand feedback