[JS]二维码分享到微信

最新推荐文章于 2024-01-25 20:45:00 发布

Jia的博客

最新推荐文章于 2024-01-25 20:45:00 发布

阅读量7.4k

点赞数 1

分类专栏： jQuery JavaScript 文章标签：二维码微信 javascript java web

本文链接：https://blog.youkuaiyun.com/Konaji/article/details/53840921

版权

JavaScript 同时被 2 个专栏收录

17 篇文章

订阅专栏

jQuery

7 篇文章

订阅专栏

本文介绍了如何使用JavaScript配合qrcode.js库，实现网页内容的纯JS微信二维码分享功能，无需依赖Java或其他后端技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

纯JS实现微信二维码分享，其中需要使用qrcode.js

<html>
    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="./qrcode.js" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
            window.onload = function() {
                (function() {
                    //获取放置微信二维码的DIV
                    var content = document.getElementById("qrcode");
                    //设置属性
                    var qrcode = new QRCode(content, {
                        width: 200,
                        height: 200
                    });
                    //设置二维码内容
                    var defaultContent = "http://blog.youkuaiyun.com/konaji";
                    qrcode.makeCode(defaultContent);
                })();
            }

            /**
             * 关闭微信分享窗口
             */
            function hideWeiXin() {
                var weixinDiv = document.getElementById("weixinDiv");
                weixinDiv.style.display = "none";
            }

        </script>
        <style type="text/css">
            #weixinDiv{
                background-color:#FFF;
                border: 1px solid ;
                width:300px;
                height:300px;
                /*下面是页面固定居中*/
                position:fixed;
                *position:absolute; 
                top:50%; 
                left:40%; 
                margin:-50px 0 0 -50px;
            }
            #hideWeiXinDiv{
                text-align: right;
                float: right;
                padding-right: 10px;
                padding-top: 2px;
            }
            #qrcode{
                width:200px;
                height:200px;
                margin: 0px auto;
            }
        </style>
    </head>
    <body>
        <div id="weixinDiv">
            <div>
                <h3 style="float: left;">分享到微信朋友圈</h3>
                <a id="hideWeiXinDiv" onclick="hideWeiXin()">关闭</a>
            </div>
            <div id="qrcode">
                <img alt="" style="">
            </div>
        </div>
    </body>
</html>