javascript实现网页分享至朋友圈功能

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #WX {
                width: 231px;
                height: 285px;
                background: red;
                padding: 10px;
                background: #fff;
                border: solid 1px #d8d8d8;
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
            }
            
            .bd_weixin_popup_head {
                font-size: 12px;
                font-weight: bold;
                text-align: left;
                line-height: 16px;
                height: 16px;
                position: absolute;
                color: #000;
            }
            
            .bd_weixin_popup_head span {
                font-size: 12px;
                font-weight: bold;
                text-align: left;
                line-height: 16px;
            }
            
            .bd_weixin_popup_close {
                width: 16px;
                height: 16px;
                text-decoration: none;
                font-size: 16px;
                text-align: right;
                position: absolute;
                right: 0;
                top: 0;
                cursor: pointer;
            }
            
            .bd_weixin_popup_foot {
                font-size: 12px;
                text-align: left;
                line-height: 22px;
                color: #666;
            }
            
            #weixin {
                width: 185px;
                height: auto;
                margin: 10px auto;
            }
        </style>
    </head>

    <body>
        <div id="WX">
            <div class="bd_weixin_popup_head">
                <span>分享到微信朋友圈</span>
                <a class="bd_weixin_popup_close">×</a>
                <div id="weixin"></div>
                <div class="bd_weixin_popup_foot">打开微信，点击底部的“发现”，<br>使用“扫一扫”即可将网页分享至朋友圈。</div>
            </div>
        </div>
    </body>
    <script type='text/javascript' src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></script>
    <script type="text/javascript" src="http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
    <script type="text/javascript">
        var path = window.location.href;//获取页面的链接
        $("#weixin").qrcode({
            text: path, //设置二维码内容 
//            render: "table", //设置渲染方式 
            width: 185, //设置宽度,默认生成的二维码大小是 256×256
            height: 185, //设置高度 
            typeNumber: -1, //计算模式 
            background: "#ffffff", //背景颜色 
            foreground: "#000000" //前景颜色 
        });
    </script>

</html>
javascript实现网页分享至朋友圈功能

猜你喜欢
