网站文章详情页面添加分享至微信功能
微wx笑
2022-07-13【帝国CMS】
5
0关键字：
网页的文章在电脑上看的时候希望分享到微信，需要用户使用手机扫二维码来实现。
这里记录一下实现的方法。
网页的文章在电脑上看的时候希望分享到微信，需要用户使用手机扫二维码来实现。
这里记录一下实现的方法。
效果：
点击弹出一个窗口，显示二维码
相关代码：
html
<a href="javascript:void(0);" title="分享至微信" onclick="shareToWechat()" class="shareToWechat"> <span class="diggit" style="width:80px;"> <img src="/images/c04.png"> </span> </a>
qrcode.html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>手机扫码分享 - 无知</title>
<script src="/js/jquery-1.8.3.min.js" ></script>
<script src="/js/jquery.qrcode.min.js"></script>
</head>
<body >
<h3 style="border-bottom: 1px solid #DDDDDD; margin-bottom:15px; padding-bottom: 10px; text-align:center;">用手机扫下面的二维码分享</h3>
<div id="qrcode" style="margin-bottom:15px;"></div>
<div style="border-top: 1px solid #DDDDDD;padding-top:11px;"> </div>
<script>
$.urlParam = function (name) {
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (results == null) {
return null;
}
else {
return results[1] || 0;
}
}
</script>
<script>
$(function () {
$('#qrcode').qrcode({ width: 200, height: 200, text: decodeURIComponent($.urlParam('url')) });
});
</script>
</body>
</html>依赖：jquery.qrcode.min.js
打开窗口的js代码
function shareToWechat(){
var url = "/qrcode.html?url=" + encodeURIComponent(window.location);
var name = "_blank";
var iWidth = 400;
var iHeight = 360;
var iTop = (window.screen.height-30-iHeight)/2;
var iLeft = (window.screen.width-10-iWidth)/2;
window.open(url,name,'height='+iHeight+',,innerHeight='+iHeight+',width='+iWidth+',innerWidth='+iWidth+',top='+iTop+',left='+iLeft+',toolbar=no,menubar=no,scrollbars=auto,resizeable=no,location=no,status=no');
}其实 window.location也可以不传递的，qrcode.html页面中可以通过 window.opener.location 来获取。
本文由 微wx笑 创作，采用 署名-非商业性使用-相同方式共享 4.0 许可协议，转载请附上原文出处链接及本声明。
原文链接：https://www.ivu4e.cn/blog/EmpireCMS/2022-07-13/1305.html
