微信自動化相關

 前言:

wxpy模塊能夠經過python程序獲取微信 好友、羣組、公衆號,併發送文本消息、圖片、視頻,實現微信消息發送自動化;php

 

暫不支持如下功能:css

支付相關 - 紅包、轉帳、收款 等都不支持html

在羣聊中@他人 - 是的,Web 微信中被人@後也不會提醒python

發送名片 - 但能夠經過 send_raw_msg() 轉發jquery

發送分享連接 - 也沒法轉發linux

發送語音消息git

朋友圈相關web

 

參考:http://wxpy.readthedocs.io/zh/latest/faq.html#linuxajax

 

 

                                                                                

 

 

一.使用豆瓣源安裝wxpy模塊

pip install -U wxpy -i http://pypi.douban.com/simple --trusted-host pypi.douban.com

 

2、掃碼自動登陸

from wxpy import *

if __name__ == '__main__':
    #掃碼自動登陸微信
    logging.basicConfig()
    bot=Bot(cache_path=True)#彈出QR.ong的二維碼圖片,引導用戶掃碼登陸!
    bot.enable_puid()
    #用戶登陸以後,用戶信息保存在同路徑下的wxpy.pkl的文件中

Bot對象就至關於1個自動發送微信的機器人,以後獲取 好友、羣組、公衆號信息都要經過Bot;

3、查看 當前登陸帳號信息

  # 查看微信帳號自己
    my_wechat=bot.self
    print('個人暱稱%s'%(my_wechat.nick_name))
    print(my_wechat.signature)
    print(my_wechat.sex) #1表明男 2表明女

 

4、文件傳輸助手

    bot.file_helper.send_file(path=r'D:\redis.conf')  #傳輸文件
    bot.file_helper.send(content='你好張根!')          #傳輸文本消息
    bot.file_helper.send_image(path=r'D:\1.png')      #傳輸圖片

 

 

4、獲取好友、羣組、微信公衆號信息

   #提取微信全部好友信息
    my_friends_list=bot.friends()
    print(len(my_friends_list))  # 微信好友總數
    girls=[g.name for g in my_friends_list if g.sex==2 ] #獲取所有女性好友
    boys=[b.name for b in my_friends_list if b.sex==1 ]  #獲取所有男性好友


    #提取當前微信加入的 全部羣組
    my_groups_list=bot.groups()
    print(len(my_groups_list))                           #獲取加入羣的個數
    for group in my_groups_list:
        print(group.name,len(group.members),group.owner) #查看羣名稱,人數,羣主
    my_group=my_groups_list.search(keywords='神馬鬼')[0]  #搜素某個羣,並獲取該羣成員信息!
    for member in my_group.members:
        print(member.name,member.puid)


    #獲取微信關注的全部關注號
    MPS=bot.mps().search(keywords='唐縣')
    Friend=bot.friends().search(keywords='').search(sex=2)  #seach 搜素姓王的女性的好友!
    Group=bot.groups().search(keywords='神馬')[0].members     #seach 搜素 X羣並顯示該羣全部成員!
    print(MPS)  
    print(Friend)
    print(Group)

 

 

5、自動發送 文字/文件/圖片  ----》   好友/羣組/公衆號

   #1.給好友發送消息
    ai_qing=bot.friends().search(keywords='艾青')[0]
    ai_qing.send_image(path=r'D:\timg.jpg')
    ai_qing.send_file(path=r'D:\redis6680.conf')
    ai_qing.send_video(path='視頻路徑')
    print(dir(ai_qing))
    for i in range(0,5):
        ai_qing.send('上午好,艾總!')
#2.給羣組發送消息 to_group=bot.groups().search(keywords='神馬')[0] to_group.send('上午好,各位大佬!') content=''' 今每天氣不錯, 空氣挺好, ''' to_group.send(content)

 

 

                      基於爬蟲的web微信

 

如何突破圖片放盜鏈?redis

 

若是在本身的Django web程序(本域)使用 img標籤去src雖然能夠突破同源策略,可是騰訊會檢查你的cokie、referer信息,圖片就會加載失敗!

解決:

使用本域頁面 img標籤的src屬性去訪問本域下的url,而後在視圖裏面 執行爬蟲,僞造瀏覽器去騰訊服務器獲取圖片,返回給客戶端;

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/jquery-3.2.1.js"></script>
</head>
<body>
<div>
    <img id="img" style="height: 400px;width: 400px;" src="https://login.weixin.qq.com/qrcode/{{ uuid }}">
</div>
</body>
<script>
    $(function () {
        checkLogin()
    });

    function checkLogin() {
        $.ajax({
            url:{% url 'checklogin' %},
            type: 'GET',
            data: {},
            dataType: 'JSON',
            success: function (res) {
                if (res.code == 408) {
                    checkLogin();
                } else if (res.code == 201) {
                    $('#img').attr('src', res.data);
                    checkLogin();
                }
                else {
                        location.href = "/index.html"
                    }
            }
        })
    }
</script>
</html>
login.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>我的信息</h1>
    <img src="/avatar.html?prev={{ request.session.INIT_DICT.User.HeadImgUrl }}">
    <h2>{{ request.session.INIT_DICT.User.NickName }}</h2>
    <h1>最近聯繫人</h1>
        <ul>
        {% for user in  request.session.INIT_DICT.ContactList %}
            <li><img src="/avatar.html?prev={{ user.HeadImgUrl }}">  {{ user.UserName }}   {{ user.NickName }}</li>
        {% endfor %}
        </ul>
     <a href="/contact_list.html">更多聯繫人</a>
    <h1>公衆號信息</h1>
</body>
</html>
index.html
{% extends 'logout.html' %}

{% block f2 %}
    <h4>發送消息</h4>
        <input placeholder="接受者" id="to" />
        <input placeholder="消息內容" id="msg" />
        <input type="button" value="發送" onclick="sendMsg();" />

    <div style="font-size: 17px;color: white;line-height: 40px">用戶列表({{ user_list.MemberCount }})</div>
    {% for user in user_list.MemberList %}
        <div username="{{ user.UserName }}">
            <li>
                <img style="width: 40px;height: 40px;" src="/avatar.html?prev={{ user.HeadImgUrl }}"><span>{{ user.NickName }}</span>
            </li>
        </div>
    {% endfor %}

{% endblock %}


{% block f22 %}
 <script src="/static/jquery-3.2.1.js"></script>
    <script>
        $(function () {
            getMsg();
        });

        function getMsg() {
            $.ajax({
                url: '/get_msg.html',
                type: 'GET',
                success:function (arg) {
                    //console.log(arg);
                    getMsg();
                }
            })
        }


        function  sendMsg() {
            $.ajax({
                url: '/send_msg.html',
                type: "POST",
                data: {'to': $('#to').val(), 'msg': $('#msg').val(),'csrfmiddlewaretoken':"{{ csrf_token }}"},
                success:function (arg) {
                    alert(arg);
                }
            })
        }
    </script>

{% endblock %}
contact_list.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>


    <!--STYLESHEET-->
    <!--=================================================-->

    <!--Open Sans Font [ OPTIONAL ]-->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>


    <!--Bootstrap Stylesheet [ REQUIRED ]-->
    <link href="../static/demo/css/bootstrap.min.css" rel="stylesheet">


    <!--Nifty Stylesheet [ REQUIRED ]-->
    <link href="../static/demo/css/nifty.min.css" rel="stylesheet">


    <!--Nifty Premium Icon [ DEMONSTRATION ]-->
    <link href="../static/demo/css/demo/nifty-demo-icons.min.css" rel="stylesheet">


    <!--Demo [ DEMONSTRATION ]-->
    <link href="../static/demo/css/demo/nifty-demo.min.css" rel="stylesheet">



    <!--Summernote [ OPTIONAL ]-->
    <link href="../static/demo/plugins/summernote/summernote.min.css" rel="stylesheet">






    <!--JAVASCRIPT-->
    <!--=================================================-->

    <!--Pace - Page Load Progress Par [OPTIONAL]-->
    <link href="../static/demo/plugins/pace/pace.min.css" rel="stylesheet">
    <script src="../static/demo/plugins/pace/pace.min.js"></script>


    <!--jQuery [ REQUIRED ]-->
    <script src="../static/demo/js/jquery.min.js"></script>


    <!--BootstrapJS [ RECOMMENDED ]-->
    <script src="../static/demo/js/bootstrap.min.js"></script>


    <!--NiftyJS [ RECOMMENDED ]-->
    <script src="../static/demo/js/nifty.min.js"></script>






    <!--=================================================-->

    <!--Demo script [ DEMONSTRATION ]-->
    <script src="../static/demo/js/demo/nifty-demo.min.js"></script>


    <!--Summernote [ OPTIONAL ]-->
    <script src="../static/demo/plugins/summernote/summernote.min.js"></script>


    <!--Mail [ SAMPLE ]-->
    <script src="../static/demo/js/demo/mail.js"></script>





    <!--=================================================

    REQUIRED
    You must include this in your project.


    RECOMMENDED
    This category must be included but you may modify which plugins or components which should be included in your project.


    OPTIONAL
    Optional plugins. You may choose whether to include it in your project or not.


    DEMONSTRATION
    This is to be removed, used for demonstration purposes only. This category must not be included in your project.


    SAMPLE
    Some script samples which explain how to initialize plugins or components. This category should not be included in your project.


    Detailed information and more samples can be found in the document.

    =================================================-->


</head>

<!--TIPS-->
<!--You may remove all ID or Class names which contain "demo-", they are only used for demonstration. -->
<body>
    <div id="container" class="effect aside-float aside-bright mainnav-lg">

        <!--NAVBAR-->
        <!--===================================================-->
        <header id="navbar">
            <div id="navbar-container" class="boxed">

                <!--Brand logo & name-->
                <!--================================-->
                <div style="width: 389px;" class="navbar-header">
                    <a href="index.html" class="navbar-brand">
                        <div style="width: 389px;" class="brand-title">
                            <span style="font-size: 30px" class="brand-text">WeChat</span>
                        </div>
                    </a>
                </div>
                <!--================================-->
                <!--End brand logo & name-->


                <!--Navbar Dropdown-->
                <!--================================-->
                <div style="margin-left: 385px;" class="navbar-content clearfix">
                    <ul class="nav navbar-top-links pull-left">

                        <!--Navigation toogle button-->
                        <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

                        <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                        <!--End Navigation toogle button-->



                        <!--Notification dropdown-->
                        <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                        <li class="dropdown">
                            <a href="#" data-toggle="dropdown" class="dropdown-toggle">
                                <i class="demo-pli-bell"></i>
                                <span class="badge badge-header badge-danger"></span>
                            </a>

                            <!--Notification dropdown menu-->
                            <div class="dropdown-menu dropdown-menu-md">
                                <div class="pad-all bord-btm">
                                    <p class="text-semibold text-main mar-no">You have 9 notifications.</p>
                                </div>
                                <div class="nano scrollable">
                                    <div class="nano-content">
                                        <ul class="head-list">

                                            <!-- Dropdown list-->
                                            <li>
                                                <a href="#">
                                                    <div class="clearfix">
                                                        <p class="pull-left">Database Repair</p>
                                                        <p class="pull-right">70%</p>
                                                    </div>
                                                    <div class="progress progress-sm">
                                                        <div style="width: 70%;" class="progress-bar">
                                                            <span class="sr-only">70% Complete</span>
                                                        </div>
                                                    </div>
                                                </a>
                                            </li>

                                            <!-- Dropdown list-->
                                            <li>
                                                <a href="#">
                                                    <div class="clearfix">
                                                        <p class="pull-left">Upgrade Progress</p>
                                                        <p class="pull-right">10%</p>
                                                    </div>
                                                    <div class="progress progress-sm">
                                                        <div style="width: 10%;" class="progress-bar progress-bar-warning">
                                                            <span class="sr-only">10% Complete</span>
                                                        </div>
                                                    </div>
                                                </a>
                                            </li>

                                            <!-- Dropdown list-->
                                            <li>
                                                <a class="media" href="#">
                                            <span class="badge badge-success pull-right">90%</span>
                                                    <div class="media-left">
                                                        <i class="demo-pli-data-settings icon-2x"></i>
                                                    </div>
                                                    <div class="media-body">
                                                        <div class="text-nowrap">HDD is full</div>
                                                        <small class="text-muted">50 minutes ago</small>
                                                    </div>
                                                </a>
                                            </li>

                                            <!-- Dropdown list-->
                                            <li>
                                                <a class="media" href="#">
                                                    <div class="media-left">
                                                        <i class="demo-pli-file-edit icon-2x"></i>
                                                    </div>
                                                    <div class="media-body">
                                                        <div class="text-nowrap">Write a news article</div>
                                                        <small class="text-muted">Last Update 8 hours ago</small>
                                                    </div>
                                                </a>
                                            </li>

                                            <!-- Dropdown list-->
                                            <li>
                                                <a class="media" href="#">
                                            <span class="label label-danger pull-right">New</span>
                                                    <div class="media-left">
                                                        <i class="demo-pli-speech-bubble-7 icon-2x"></i>
                                                    </div>
                                                    <div class="media-body">
                                                        <div class="text-nowrap">Comment Sorting</div>
                                                        <small class="text-muted">Last Update 8 hours ago</small>
                                                    </div>
                                                </a>
                                            </li>

                                            <!-- Dropdown list-->
                                            <li>
                                                <a class="media" href="#">
                                                    <div class="media-left">
                                                        <i class="demo-pli-add-user-plus-star icon-2x"></i>
                                                    </div>
                                                    <div class="media-body">
                                                        <div class="text-nowrap">New User Registered</div>
                                                        <small class="text-muted">4 minutes ago</small>
                                                    </div>
                                                </a>
                                            </li>

                                            <!-- Dropdown list-->
                                            <li class="bg-gray">
                                                <a class="media" href="#">
                                                    <div class="media-left">
                                                        <img class="img-circle img-sm" alt="Profile Picture" src="../static/demo/img/profile-photos/9.png">
                                                    </div>
                                                    <div class="media-body">
                                                        <div class="text-nowrap">Lucy sent you a message</div>
                                                        <small class="text-muted">30 minutes ago</small>
                                                    </div>
                                                </a>
                                            </li>

                                            <!-- Dropdown list-->
                                            <li class="bg-gray">
                                                <a class="media" href="#">
                                                    <div class="media-left">
                                                        <img class="img-circle img-sm" alt="Profile Picture" src="../static/demo/img/profile-photos/3.png">
                                                    </div>
                                                    <div class="media-body">
                                                        <div class="text-nowrap">Jackson sent you a message</div>
                                                        <small class="text-muted">40 minutes ago</small>
                                                    </div>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                                <!--Dropdown footer-->
                                <div class="pad-all bord-top">
                                    <a href="#" class="btn-link text-dark box-block">
                                        <i class="fa fa-angle-right fa-lg pull-right"></i>Show All Notifications
                                    </a>
                                </div>
                            </div>
                        </li>
                        <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                        <!--End notifications dropdown-->



                        <!--Mega dropdown-->
                        <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                        <li class="mega-dropdown">
                            <a href="#" class="mega-dropdown-toggle">
                                <i class="demo-pli-layout-grid"></i>
                            </a>
                            <div class="dropdown-menu mega-dropdown-menu">
                                <div class="row">
                                    <div class="col-sm-4 col-md-3">

                                        <!--Mega menu list-->
                                        <ul class="list-unstyled">
                                            <li class="dropdown-header"><i class="demo-pli-file icon-fw"></i> Pages</li>
                                            <li><a href="#">Profile</a></li>
                                            <li><a href="#">Search Result</a></li>
                                            <li><a href="#">FAQ</a></li>
                                            <li><a href="#">Sreen Lock</a></li>
                                            <li><a href="#" class="disabled">Disabled</a></li>                                        </ul>

                                    </div>
                                    <div class="col-sm-4 col-md-3">

                                        <!--Mega menu list-->
                                        <ul class="list-unstyled">
                                            <li class="dropdown-header"><i class="demo-pli-mail icon-fw"></i> Mailbox</li>
                                            <li><a href="#"><span class="pull-right label label-danger">Hot</span>Indox</a></li>
                                            <li><a href="#">Read Message</a></li>
                                            <li><a href="#">Compose</a></li>
                                        </ul>
                                        <p class="pad-top mar-top bord-top text-sm">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
                                    </div>
                                    <div class="col-sm-4 col-md-3">
                                        <!--Mega menu list-->
                                        <ul class="list-unstyled">
                                            <li>
                                                <a href="#" class="media mar-btm">
                                                    <span class="badge badge-success pull-right">90%</span>
                                                    <div class="media-left">
                                                        <i class="demo-pli-data-settings icon-2x"></i>
                                                    </div>
                                                    <div class="media-body">
                                                        <p class="text-semibold text-dark mar-no">Data Backup</p>
                                                        <small class="text-muted">This is the item description</small>
                                                    </div>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#" class="media mar-btm">
                                                    <div class="media-left">
                                                        <i class="demo-pli-support icon-2x"></i>
                                                    </div>
                                                    <div class="media-body">
                                                        <p class="text-semibold text-dark mar-no">Support</p>
                                                        <small class="text-muted">This is the item description</small>
                                                    </div>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#" class="media mar-btm">
                                                    <div class="media-left">
                                                        <i class="demo-pli-computer-secure icon-2x"></i>
                                                    </div>
                                                    <div class="media-body">
                                                        <p class="text-semibold text-dark mar-no">Security</p>
                                                        <small class="text-muted">This is the item description</small>
                                                    </div>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#" class="media mar-btm">
                                                    <div class="media-left">
                                                        <i class="demo-pli-map-2 icon-2x"></i>
                                                    </div>
                                                    <div class="media-body">
                                                        <p class="text-semibold text-dark mar-no">Location</p>
                                                        <small class="text-muted">This is the item description</small>
                                                    </div>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="col-sm-12 col-md-3">
                                        <p class="dropdown-header"><i class="demo-pli-file-jpg icon-fw"></i> Gallery</p>
                                        <ul class="list-unstyled list-inline text-justify">

                                            <li class="pad-btm">
                                                <img src="img//thumbs/mega-menu-2.jpg" alt="thumbs">
                                            </li>
                                            <li class="pad-btm">
                                                <img src="img//thumbs/mega-menu-3.jpg" alt="thumbs">
                                            </li>
                                            <li class="pad-btm">
                                                <img src="img//thumbs/mega-menu-1.jpg" alt="thumbs">
                                            </li>
                                            <li class="pad-btm">
                                                <img src="img//thumbs/mega-menu-4.jpg" alt="thumbs">
                                            </li>
                                            <li class="pad-btm">
                                                <img src="img//thumbs/mega-menu-5.jpg" alt="thumbs">
                                            </li>
                                            <li class="pad-btm">
                                                <img src="img//thumbs/mega-menu-6.jpg" alt="thumbs">
                                            </li>
                                        </ul>
                                        <a href="#" class="btn btn-sm btn-block btn-default">Browse Gallery</a>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                        <!--End mega dropdown-->

                    </ul>
                    <ul class="nav navbar-top-links pull-right">

                        <!--Language selector-->
                        <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

                        <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                        <!--End language selector-->



                        <!--User dropdown-->
                        <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                        <li id="dropdown-user" class="dropdown">
                            <a href="#" data-toggle="dropdown" class="dropdown-toggle text-right">
                                <span class="pull-right">
                                    <!--<img class="img-circle img-user media-object" src="img/profile-photos/1.png" alt="Profile Picture">-->
                                    <i class="demo-pli-male ic-user"></i>
                                </span>
                                <div class="username hidden-xs">Aaron Chavez</div>
                            </a>


                            <div class="dropdown-menu dropdown-menu-md dropdown-menu-right panel-default">

                                <!-- Dropdown heading  -->
                                <div class="pad-all bord-btm">
                                    <p class="text-main mar-btm"><span class="text-bold">750GB</span> of 1,000GB Used</p>
                                    <div class="progress progress-sm">
                                        <div class="progress-bar" style="width: 70%;">
                                            <span class="sr-only">70%</span>
                                        </div>
                                    </div>
                                </div>


                                <!-- User dropdown menu -->
                                <ul class="head-list">
                                    <li>
                                        <a href="#">
                                            <i class="demo-pli-male icon-lg icon-fw"></i> Profile
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <span class="badge badge-danger pull-right">9</span>
                                            <i class="demo-pli-mail icon-lg icon-fw"></i> Messages
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <span class="label label-success pull-right">New</span>
                                            <i class="demo-pli-gear icon-lg icon-fw"></i> Settings
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <i class="demo-pli-information icon-lg icon-fw"></i> Help
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <i class="demo-pli-computer-secure icon-lg icon-fw"></i> Lock screen
                                        </a>
                                    </li>
                                </ul>

                                <!-- Dropdown footer -->
                                <div class="pad-all text-right">
                                    <a href="pages-login.html" class="btn btn-primary">
                                        <i class="demo-pli-unlock"></i> Logout
                                    </a>
                                </div>
                            </div>
                        </li>
                        <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                        <!--End user dropdown-->

                        <li>
                            <a href="#" class="aside-toggle navbar-aside-icon">
                                <i class="pci-ver-dots"></i>
                            </a>
                        </li>
                    </ul>
                </div>
                <!--================================-->
                <!--End Navbar Dropdown-->

            </div>
        </header>
        <!--===================================================-->
        <!--END NAVBAR-->

        <div class="boxed">

            <!--CONTENT CONTAINER-->
            <!--===================================================-->
            <div style="padding-left: 402px;" id="content-container">


                <!--Page content-->
                <!--===================================================-->
                <div id="page-content">
                    <div class="fixed-fluid">
                            <!-- COMPOSE EMAIL -->
                            <!--===================================================-->
                             <div class="row">
                        <div class="">

                            <!--Chat widget-->
                            <!--===================================================-->
                            <div style="" class="panel">
                                <!--Heading-->
                                <div class="panel-heading">
                                    <div class="panel-control">
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-default" data-toggle="dropdown"><i class="demo-pli-gear icon-lg"></i></button>
                                            <ul class="dropdown-menu dropdown-menu-right">
                                                <li><a href="#">Available</a></li>
                                                <li><a href="#">Busy</a></li>
                                                <li><a href="#">Away</a></li>
                                                <li class="divider"></li>
                                                <li><a id="demo-connect-chat" href="#" class="disabled-link" data-target="#demo-chat-body">Connect</a></li>
                                                <li><a id="demo-disconnect-chat" href="#" data-target="#demo-chat-body" >Disconect</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <h3 class="panel-title">聊天室</h3>
                                </div>

                                <!--Widget body-->
                                <div>
                                    <div class="nano" style="height:300px">
                                        <div class="nano-content pad-all">
                                            <ul class="list-unstyled media-block">
                                                <li class="mar-btm">
                                                    <div class="media-left">
                                                        <img src="img/profile-photos/1.png" class="img-circle img-sm" alt="Profile Picture">
                                                    </div>
                                                    <div class="media-body pad-hor">
                                                        <div class="speech">
                                                            <a href="#" class="media-heading">Aaron Chavez</a>
                                                            <p>Hello Lucy, how can I help you today ?</p>
                                                            <p class="speech-time">
                                                            <i class="demo-pli-clock icon-fw"></i>09:23AM
                                                            </p>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="mar-btm">
                                                    <div class="media-right">
                                                        <img src="img/profile-photos/8.png" class="img-circle img-sm" alt="Profile Picture">
                                                    </div>
                                                    <div class="media-body pad-hor speech-right">
                                                        <div class="speech">
                                                            <a href="#" class="media-heading">Lucy Doe</a>
                                                            <p>Hi, I want to buy a new shoes.</p>
                                                            <p class="speech-time">
                                                                <i class="demo-pli-clock icon-fw"></i> 09:23AM
                                                            </p>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="mar-btm">
                                                    <div class="media-left">
                                                        <img src="img/profile-photos/1.png" class="img-circle img-sm" alt="Profile Picture">
                                                    </div>
                                                    <div class="media-body pad-hor">
                                                        <div class="speech">
                                                            <a href="#" class="media-heading"></a>
                                                            <p>Shipment is free. You'll get your shoes tomorrow!</p>
                                                            <p class="speech-time">
                                                                <i class="demo-pli-clock icon-fw"></i> 09:25
                                                            </p>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="mar-btm">
                                                    <div class="media-right">
                                                        <img src="img/profile-photos/8.png" class="img-circle img-sm" alt="Profile Picture">
                                                    </div>
                                                    <div class="media-body pad-hor speech-right">
                                                        <div class="speech">
                                                            <a href="#" class="media-heading">Lucy Doe</a>
                                                            <p>Wow, that's great!</p>
                                                            <p class="speech-time">
                                                                <i class="demo-pli-clock icon-fw"></i> 09:27
                                                            </p>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="mar-btm">
                                                    <div class="media-right">
                                                        <img src="img/profile-photos/8.png" class="img-circle img-sm" alt="Profile Picture">
                                                    </div>
                                                    <div class="media-body pad-hor speech-right">
                                                        <div class="speech">
                                                            <a href="#" class="media-heading">Lucy Doe</a>
                                                            <p>Ok. Thanks for the answer. Appreciated.</p>
                                                            <p class="speech-time">
                                                            <i class="demo-pli-clock icon-fw"></i> 09:28
                                                            </p>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="mar-btm">
                                                    <div class="media-left">
                                                        <img src="img/profile-photos/1.png" class="img-circle img-sm" alt="Profile Picture">
                                                    </div>
                                                    <div class="media-body pad-hor">
                                                        <div class="speech">
                                                            <a href="#" class="media-heading">Aaron Chavez</a>
                                                            <p>You are welcome! <br/> Is there anything else I can do for you today?</p>
                                                            <p class="speech-time">
                                                                <i class="demo-pli-clock icon-fw"></i> 09:30
                                                            </p>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="mar-btm">
                                                    <div class="media-right">
                                                        <img src="img/profile-photos/8.png" class="img-circle img-sm" alt="Profile Picture">
                                                    </div>
                                                    <div class="media-body pad-hor speech-right">
                                                        <div class="speech">
                                                            <a href="#" class="media-heading">Lucy Doe</a>
                                                            <p>Nope, That's it.</p>
                                                            <p class="speech-time">
                                                                <i class="demo-pli-clock icon-fw"></i> 09:31
                                                            </p>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="mar-btm">
                                                    <div class="media-left">
                                                        <img src="img/profile-photos/1.png" class="img-circle img-sm" alt="Profile Picture">
                                                    </div>
                                                    <div class="media-body pad-hor">
                                                        <div class="speech">
                                                            <a href="#" class="media-heading">Aaron Chavez</a>
                                                            <p>Thank you for contacting us today</p>
                                                            <p class="speech-time">
                                                                <i class="demo-pli-clock icon-fw"></i> 09:32
                                                            </p>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>

                                    <!--Widget footer-->
                                    <div class="panel-footer">
                                        <div style="margin-left: 136px" class="row">
                                            <div class="col-xs-9">
                                                <input class="col-xs-6" placeholder="接受者" id="to"/>
                                                <input class="col-xs-6" placeholder="消息內容" id="msg"/>
                                            </div>
                                            <div class="col-xs-3">
                                                 <input type="button" value="發送" onclick="sendMsg();"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--===================================================-->
                            <!--Chat widget-->

                        </div>
                    </div>

                            <!--===================================================-->
                            <!-- END COMPOSE EMAIL -->
                        </div>
                    </div>


                </div>
                <!--===================================================-->
                <!--End page content-->


            </div>
            <!--===================================================-->
            <!--END CONTENT CONTAINER-->



            <!--ASIDE-->
            <!--===================================================-->
            <aside id="aside-container">
                <div id="aside">
                    <div class="nano">
                        <div class="nano-content">

                            <!--Nav tabs-->
                            <!--================================-->
                            <ul class="nav nav-tabs nav-justified">
                                <li class="active">
                                    <a href="#demo-asd-tab-1" data-toggle="tab">
                                        <i class="demo-pli-speech-bubble-7"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="#demo-asd-tab-2" data-toggle="tab">
                                        <i class="demo-pli-information icon-fw"></i> Report
                                    </a>
                                </li>
                                <li>
                                    <a href="#demo-asd-tab-3" data-toggle="tab">
                                        <i class="demo-pli-wrench icon-fw"></i> Settings
                                    </a>
                                </li>
                            </ul>
                            <!--================================-->
                            <!--End nav tabs-->



                            <!-- Tabs Content -->
                            <!--================================-->
                            <div class="tab-content">

                                <!--First tab (Contact list)-->
                                <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                                <div class="tab-pane fade in active" id="demo-asd-tab-1">
                                    <p class="pad-hor mar-top text-semibold text-main">
                                        <span class="pull-right badge badge-warning">3</span> Family
                                    </p>

                                    <!--Family-->
                                    <div class="list-group bg-trans">
                                        <a href="#" class="list-group-item">
                                            <div class="media-left pos-rel">
                                                <img class="img-circle img-xs" src="../static/demo/img/profile-photos/2.png" alt="Profile Picture">
                                                <i class="badge badge-success badge-stat badge-icon pull-left"></i>
                                            </div>
                                            <div class="media-body">
                                                <p class="mar-no">Stephen Tran</p>
                                                <small class="text-muted">Availabe</small>
                                            </div>
                                        </a>
                                        <a href="#" class="list-group-item">
                                            <div class="media-left pos-rel">
                                                <img class="img-circle img-xs" src="../static/demo/img/profile-photos/7.png" alt="Profile Picture">
                                            </div>
                                            <div class="media-body">
                                                <p class="mar-no">Brittany Meyer</p>
                                                <small class="text-muted">I think so</small>
                                            </div>
                                        </a>
                                        <a href="#" class="list-group-item">
                                            <div class="media-left pos-rel">
                                                <img class="img-circle img-xs" src="../static/demo/img/profile-photos/1.png" alt="Profile Picture">
                                                <i class="badge badge-info badge-stat badge-icon pull-left"></i>
                                            </div>
                                            <div class="media-body">
                                                <p class="mar-no">Jack George</p>
                                                <small class="text-muted">Last Seen 2 hours ago</small>
                                            </div>
                                        </a>
                                        <a href="#" class="list-group-item">
                                            <div class="media-left pos-rel">
                                                <img class="img-circle img-xs" src="../static/demo/img/profile-photos/4.png" alt="Profile Picture">
                                            </div>
                                            <div class="media-body">
                                                <p class="mar-no">Donald Brown</p>
                                                <small class="text-muted">Lorem ipsum dolor sit amet.</small>
                                            </div>
                                        </a>
                                        <a href="#" class="list-group-item">
                                            <div class="media-left pos-rel">
                                                <img class="img-circle img-xs" src="../static/demo/img/profile-photos/8.png" alt="Profile Picture">
                                                <i class="badge badge-warning badge-stat badge-icon pull-left"></i>
                                            </div>
                                            <div class="media-body">
                                                <p class="mar-no">Betty Murphy</p>
                                                <small class="text-muted">Idle</small>
                                            </div>
                                        </a>
                                        <a href="#" class="list-group-item">
                                            <div class="media-left pos-rel">
                                                <img class="img-circle img-xs" src="../static/demo/img/profile-photos/9.png" alt="Profile Picture">
                                                <i class="badge badge-danger badge-stat badge-icon pull-left"></i>
                                            </div>
                                            <div class="media-body">
                                                <p class="mar-no">Samantha Reid</p>
                                                <small class="text-muted">Offline</small>
                                            </div>
                                        </a>
                                    </div>

                                    <hr>
                                    <p class="pad-hor text-semibold text-main">
                                        <span class="pull-right badge badge-success">Offline</span> Friends
                                    </p>

                                    <!--Works-->
                                    <div class="list-group bg-trans">
                                        <a href="#" class="list-group-item">
                                            <span class="badge badge-purple badge-icon badge-fw pull-left"></span> Joey K. Greyson
                                        </a>
                                        <a href="#" class="list-group-item">
                                            <span class="badge badge-info badge-icon badge-fw pull-left"></span> Andrea Branden
                                        </a>
                                        <a href="#" class="list-group-item">
                                            <span class="badge badge-success badge-icon badge-fw pull-left"></span> Johny Juan
                                        </a>
                                        <a href="#" class="list-group-item">
                                            <span class="badge badge-danger badge-icon badge-fw pull-left"></span> Susan Sun
                                        </a>
                                    </div>


                                    <hr>
                                    <p class="pad-hor mar-top text-semibold text-main">News</p>

                                    <div class="pad-hor">
                                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetuer
                                            <a data-title="45%" class="add-tooltip text-semibold" href="#">adipiscing elit</a>, sed diam nonummy nibh. Lorem ipsum dolor sit amet.
                                        </p>
                                        <small class="text-muted"><em>Last Update : Des 12, 2014</em></small>
                                    </div>


                                </div>
                                <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                                <!--End first tab (Contact list)-->


                                <!--Second tab (Custom layout)-->
                                <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                                <div class="tab-pane fade" id="demo-asd-tab-2">

                                    <!--Monthly billing-->
                                    <div class="pad-all">
                                        <p class="text-semibold text-main">Billing &amp; reports</p>
                                        <p class="text-muted">Get <strong>$5.00</strong> off your next bill by making sure your full payment reaches us before August 5, 2016.</p>
                                    </div>
                                    <hr class="new-section-xs">
                                    <div class="pad-all">
                                        <span class="text-semibold text-main">Amount Due On</span>
                                        <p class="text-muted text-sm">August 17, 2016</p>
                                        <p class="text-2x text-thin text-main">$83.09</p>
                                        <button class="btn btn-block btn-success mar-top">Pay Now</button>
                                    </div>


                                    <hr>

                                    <p class="pad-hor text-semibold text-main">Additional Actions</p>

                                    <!--Simple Menu-->
                                    <div class="list-group bg-trans">
                                        <a href="#" class="list-group-item"><i class="demo-pli-information icon-lg icon-fw"></i> Service Information</a>
                                        <a href="#" class="list-group-item"><i class="demo-pli-mine icon-lg icon-fw"></i> Usage Profile</a>
                                        <a href="#" class="list-group-item"><span class="label label-info pull-right">New</span><i class="demo-pli-credit-card-2 icon-lg icon-fw"></i> Payment Options</a>
                                        <a href="#" class="list-group-item"><i class="demo-pli-support icon-lg icon-fw"></i> Message Center</a>
                                    </div>


                                    <hr>

                                    <div class="text-center">
                                        <div><i class="demo-pli-old-telephone icon-3x"></i></div>
                                        Questions?
                                        <p class="text-lg text-semibold text-main"> (415) 234-53454 </p>
                                        <small><em>We are here 24/7</em></small>
                                    </div>
                                </div>
                                <!--End second tab (Custom layout)-->
                                <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->


                                <!--Third tab (Settings)-->
                                <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                                <div class="tab-pane fade" id="demo-asd-tab-3">
                                    <ul class="list-group bg-trans">
                                        <li class="pad-top list-header">
                                            <p class="text-semibold text-main mar-no">Account Settings</p>
                                        </li>
                                        <li class="list-group-item">
                                            <div class="pull-right">
                                                <input class="toggle-switch" id="demo-switch-1" type="checkbox" checked>
                                                <label for="demo-switch-1"></label>
                                            </div>
                                            <p class="mar-no">Show my personal status</p>
                                            <small class="text-muted">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</small>
                                        </li>
                                        <li class="list-group-item">
                                            <div class="pull-right">
                                                <input class="toggle-switch" id="demo-switch-2" type="checkbox" checked>
                                                <label for="demo-switch-2"></label>
                                            </div>
                                            <p class="mar-no">Show offline contact</p>
                                            <small class="text-muted">Aenean commodo ligula eget dolor. Aenean massa.</small>
                                        </li>
                                        <li class="list-group-item">
                                            <div class="pull-right">
                                                <input class="toggle-switch" id="demo-switch-3" type="checkbox">
                                                <label for="demo-switch-3"></label>
                                            </div>
                                            <p class="mar-no">Invisible mode </p>
                                            <small class="text-muted">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </small>
                                        </li>
                                    </ul>


                                    <hr>

                                    <ul class="list-group pad-btm bg-trans">
                                        <li class="list-header"><p class="text-semibold text-main mar-no">Public Settings</p></li>
                                        <li class="list-group-item">
                                            <div class="pull-right">
                                                <input class="toggle-switch" id="demo-switch-4" type="checkbox" checked>
                                                <label for="demo-switch-4"></label>
                                            </div>
                                            Online status
                                        </li>
                                        <li class="list-group-item">
                                            <div class="pull-right">
                                                <input class="toggle-switch" id="demo-switch-5" type="checkbox" checked>
                                                <label for="demo-switch-5"></label>
                                            </div>
                                            Show offline contact
                                        </li>
                                        <li class="list-group-item">
                                            <div class="pull-right">
                                                <input class="toggle-switch" id="demo-switch-6" type="checkbox" checked>
                                                <label for="demo-switch-6"></label>
                                            </div>
                                            Show my device icon
                                        </li>
                                    </ul>



                                    <hr>

                                    <p class="pad-hor text-semibold text-main mar-no">Task Progress</p>
                                    <div class="pad-all">
                                        <p>Upgrade Progress</p>
                                        <div class="progress progress-sm">
                                            <div class="progress-bar progress-bar-success" style="width: 15%;"><span class="sr-only">15%</span></div>
                                        </div>
                                        <small class="text-muted">15% Completed</small>
                                    </div>
                                    <div class="pad-hor">
                                        <p>Database</p>
                                        <div class="progress progress-sm">
                                            <div class="progress-bar progress-bar-danger" style="width: 75%;"><span class="sr-only">75%</span></div>
                                        </div>
                                        <small class="text-muted">17/23 Database</small>
                                    </div>

                                </div>
                                <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                                <!--Third tab (Settings)-->

                            </div>
                        </div>
                    </div>
                </div>
            </aside>
            <!--===================================================-->
            <!--END ASIDE-->


            <!--MAIN NAVIGATION-->
            <!--===================================================-->
            <nav style="width: 389px;" id="mainnav-container">
                <div id="mainnav">

                    <!--Menu-->
                    <!--================================-->
                    <div id="mainnav-menu-wrap">
                        <div class="nano">
                            <div class="nano-content">

                                <!--Profile Widget-->
                                <!--================================-->
                                <div id="mainnav-profile" class="mainnav-profile">

                                    <div id="profile-nav" class="collapse list-group bg-trans">
                                        <a href="#" class="list-group-item">
                                            <i class="demo-pli-male icon-lg icon-fw"></i> View Profile
                                        </a>
                                        <a href="#" class="list-group-item">
                                            <i class="demo-pli-gear icon-lg icon-fw"></i> Settings
                                        </a>
                                        <a href="#" class="list-group-item">
                                            <i class="demo-pli-information icon-lg icon-fw"></i> Help
                                        </a>
                                        <a href="#" class="list-group-item">
                                            <i class="demo-pli-unlock icon-lg icon-fw"></i> Logout
                                        </a>
                                    </div>
                                </div>


                                <!--Shortcut buttons-->
                                <!--================================-->
                                <div style="margin-top: 16px;margin-bottom: 25px;color: white;" id="mainnav-shortcut">
                                    <ul style="width: 136%;font-size: 15px" class="list-unstyled">
                                       <li class="col-xs-2" data-content="wechat">
                                            <a  href="/index.html" >
                                                微信
                                            </a>
                                        </li>
                                        <li class="col-xs-2" data-content="Address book">
                                            <a href="/contact_list.html" >
                                                通信錄
                                            </a>
                                        </li>
                                        <li class="col-xs-2" data-content="find">
                                            <a href="" >
                                                發現
                                            </a>
                                        </li>
                                        <li class="col-xs-2" data-content="Button">
                                            <a href="" ></a>
                                        </li>
                                    </ul>
                                </div>

                                <!--===========<!--主文件區模板-->

                                {% block f1 %}{% endblock %}
                                {% block f2 %}{% endblock %}






                                <!--===============<!--主文件區模板-->
                                <div class="mainnav-widget">

                                    <!-- Show the button on collapsed navigation -->
                                    <div class="show-small">
                                        <a href="#" data-toggle="menu-widget" data-target="#demo-wg-server">
                                            <i class="demo-pli-monitor-2"></i>
                                        </a>
                                    </div>

                                    <!-- Hide the content on collapsed navigation -->
                                    <div id="demo-wg-server" class="hide-small mainnav-widget-content">

                                    </div>
                                </div>
                                <!--================================-->
                                <!--End widget-->

                            </div>
                        </div>
                    </div>
                    <!--================================-->
                    <!--End menu-->

                </div>
            </nav>
            <!--===================================================-->
            <!--END MAIN NAVIGATION-->

        </div>



        <!-- FOOTER -->
        <!--===================================================-->

        <!--===================================================-->
        <!-- END FOOTER -->


        <!-- SCROLL PAGE BUTTON -->
        <!--===================================================-->
        <button class="scroll-top btn">
            <i class="pci-chevron chevron-up"></i>
        </button>
        <!--===================================================-->



    </div>
    <!--===================================================-->
    <!-- END OF CONTAINER -->



        <!-- SETTINGS - DEMO PURPOSE ONLY -->
    <!--===================================================-->
    <div id="demo-set" class="demo-set">
        <div id="demo-set-body" class="demo-set-body collapse">
            <div id="demo-set-alert"></div>
            <div class="pad-hor bord-btm clearfix">
                <div class="pull-right pad-top">
                    <button id="demo-btn-close-settings" class="btn btn-trans">
                        <i class="pci-cross pci-circle icon-lg"></i>
                    </button>
                </div>
                <div class="media">
                    <div class="media-left">
                        <i class="demo-pli-gear icon-2x"></i>
                    </div>
                    <div class="media-body">
                        <span class="text-semibold text-lg text-main">Costomize</span>
                        <p class="text-muted text-sm">Customize Nifty's layout, sidebars, and color schemes.</p>
                    </div>
                </div>
            </div>
            <div class="demo-set-content clearfix">
                <div class="col-xs-6 col-md-3">
                    <div class="pad-all bg-gray-light">
                        <p class="text-semibold text-main text-lg">Layout</p>
                        <p class="text-semibold text-main">Boxed Layout</p>
                        <div class="pad-btm">
                            <div class="pull-right">
                                <input id="demo-box-lay" class="toggle-switch" type="checkbox">
                                <label for="demo-box-lay"></label>
                            </div>
                            Boxed Layout
                        </div>
                        <div class="pad-btm">
                            <div class="pull-right">
                                <button id="demo-box-img" class="btn btn-sm btn-trans" disabled><i class="pci-hor-dots"></i></button>
                            </div>
                            Background Images <span class="label label-primary">New</span>
                        </div>

                        <hr class="new-section-xs bord-no">
                        <p class="text-semibold text-main">Animations</p>
                        <div class="pad-btm">
                            <div class="pull-right">
                                <input id="demo-anim" class="toggle-switch" type="checkbox" checked>
                                <label for="demo-anim"></label>
                            </div>
                            Enable Animations
                        </div>
                        <div class="pad-btm">
                            <div class="select pull-right">
                                <select id="demo-ease">
                                    <option value="effect" selected>ease (Default)</option>
                                    <option value="easeInQuart">easeInQuart</option>
                                    <option value="easeOutQuart">easeOutQuart</option>
                                    <option value="easeInBack">easeInBack</option>
                                    <option value="easeOutBack">easeOutBack</option>
                                    <option value="easeInOutBack">easeInOutBack</option>
                                    <option value="steps">Steps</option>
                                    <option value="jumping">Jumping</option>
                                    <option value="rubber">Rubber</option>
                                </select>
                            </div>
                            Transitions
                        </div>

                        <hr class="new-section-xs bord-no">

                        <p class="text-semibold text-main text-lg">Header / Navbar</p>
                        <div>
                            <div class="pull-right">
                                <input id="demo-navbar-fixed" class="toggle-switch" type="checkbox">
                                <label for="demo-navbar-fixed"></label>
                            </div>
                            Fixed Position
                        </div>

                        <hr class="new-section-xs bord-no">

                        <p class="text-semibold text-main text-lg">Footer</p>
                        <div class="pad-btm">
                            <div class="pull-right">
                                <input id="demo-footer-fixed" class="toggle-switch" type="checkbox">
                                <label for="demo-footer-fixed"></label>
                            </div>
                            Fixed Position
                        </div>
                    </div>
                </div>
                <div class="col-lg-9 pos-rel">
                    <div class="row">
                        <div class="col-lg-4">
                            <div class="pad-all">
                                <p class="text-semibold text-main text-lg">Sidebars</p>
                                <p class="text-semibold text-main">Navigation</p>
                                <div class="mar-btm">
                                    <div class="pull-right">
                                        <input id="demo-nav-fixed" class="toggle-switch" type="checkbox">
                                        <label for="demo-nav-fixed"></label>
                                    </div>
                                    Fixed Position
                                </div>
                                <div class="mar-btm">
                                    <div class="pull-right">
                                        <input id="demo-nav-profile" class="toggle-switch" type="checkbox" checked>
                                        <label for="demo-nav-profile"></label>
                                    </div>
                                    Widget Profil <small class="label label-primary">New</small>
                                </div>
                                <div class="mar-btm">
                                    <div class="pull-right">
                                        <input id="demo-nav-shortcut" class="toggle-switch" type="checkbox" checked>
                                        <label for="demo-nav-shortcut"></label>
                                    </div>
                                    Shortcut Buttons
                                </div>
                                <div class="mar-btm">
                                    <div class="pull-right">
                                        <input id="demo-nav-coll" class="toggle-switch" type="checkbox">
                                        <label for="demo-nav-coll"></label>
                                    </div>
                                    Collapsed Mode
                                </div>

                                <div class="clearfix">
                                    <div class="select pad-btm pull-right">
                                        <select id="demo-nav-offcanvas">
                                            <option value="none" selected disabled="disabled">-- Select Mode --</option>
                                            <option value="push">Push</option>
                                            <option value="slide">Slide in on top</option>
                                            <option value="reveal">Reveal</option>
                                        </select>
                                    </div>
                                    Off-Canvas
                                </div>

                                <p class="text-semibold text-main">Aside</p>
                                <div class="mar-btm">
                                    <div class="pull-right">
                                        <input id="demo-asd-vis" class="toggle-switch" type="checkbox">
                                        <label for="demo-asd-vis"></label>
                                    </div>
                                    Visible
                                </div>
                                <div class="mar-btm">
                                    <div class="pull-right">
                                        <input id="demo-asd-fixed" class="toggle-switch" type="checkbox" checked>
                                        <label for="demo-asd-fixed"></label>
                                    </div>
                                    Fixed Position
                                </div>
                                <div class="mar-btm">
                                    <div class="pull-right">
                                        <input id="demo-asd-float" class="toggle-switch" type="checkbox" checked>
                                        <label for="demo-asd-float"></label>
                                    </div>
                                    Floating <span class="label label-primary">New</span>
                                </div>
                                <div class="mar-btm">
                                    <div class="pull-right">
                                        <input id="demo-asd-align" class="toggle-switch" type="checkbox">
                                        <label for="demo-asd-align"></label>
                                    </div>
                                    Left Side
                                </div>
                                <div>
                                    <div class="pull-right">
                                        <input id="demo-asd-themes" class="toggle-switch" type="checkbox">
                                        <label for="demo-asd-themes"></label>
                                    </div>
                                    Dark Version
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-8">
                            <div id="demo-theme">
                                <div class="row bg-gray-light pad-top">
                                    <p class="text-semibold text-main text-lg pad-lft">Color Schemes</p>
                                    <div class="demo-theme-btn col-md-4 pad-ver">
                                        <p class="text-semibold text-main">Header</p>
                                        <div class="demo-justify-theme">
                                            <a href="#" class="demo-theme demo-a-light add-tooltip" data-theme="theme-light" data-type="a" data-title="(A). Light">
                                                <div class="demo-theme-brand"></div>
                                                <div class="demo-theme-head"></div>
                                                <div class="demo-theme-nav"></div>
                                            </a>
                                            <a href="#" class="demo-theme demo-a-navy add-tooltip" data-theme="theme-navy" data-type="a" data-title="(A). Navy Blue">
                                                <div class="demo-theme-brand"></div>
                                                <div class="demo-theme-head"></div>
                                                <div class="demo-theme-nav"></div>
                                            </a>
                                            <a href="#" class="demo-theme demo-a-ocean add-tooltip" data-theme="theme-ocean" data-type="a" data-title="(A). Ocean">
                                                <div class="demo-theme-brand"></div>
                                                <div class="demo-theme-head"></div>
                                                <div class="demo-theme-nav"></div>
                                            </a>
                                        </div>
                                        <div class="demo-justify-theme">
                                            <a href="#" class="demo-theme demo-a-lime add-tooltip" data-theme="theme-lime" data-type="a" data-title="(A). Lime">
                                                <div class="demo-theme-brand"></div>
                                                <div class="demo-theme-head"></div>
                                                <div class="demo-theme-nav"></div>
                                            </a>
                                            <a href="#" class="demo-theme demo-a-purple add-tooltip" data-theme="theme-purple" data-type="a" data-title="(A). Purple">
                                                <div class="demo-theme-brand"></div>
                                                <div class="demo-theme-head"></div>
                                                <div class="demo-theme-nav"></div>
                                            </a>
                                            <a href="#" class="demo-theme demo-a-dust add-tooltip" data-theme="theme-dust" data-type="a" data-title="(A). Dust">
                                                <div class="demo-theme-brand"></div>
                                                <div class="demo-theme-head"></div>
                                                <div class="demo-theme-nav"></div>
                                            </a>
                                        </div>
                                        <div class="demo-justify-theme">
                                            <a href="#" class="demo-theme demo-a-mint add-tooltip" data-theme="theme-mint" data-type="a" data-title="(A). Mint">
                                                <div class="demo-theme-brand"></div>
                                                <div class="demo-theme-head"></div>
                                                <div class="demo-theme-nav"></div>
                                            </a>
                                            <a href="#" class="demo-theme demo-a-yellow add-tooltip" data-theme="theme-yellow" data-type="a" data-title="(A). Yellow">
                                                <div class="demo-theme-brand"></div>
                                                <div class="demo-theme-head"></div>
                                                <div class="demo-theme-nav"></div>
                                            </a>
                                            <a href="#" class="demo-theme demo-a-well-red add-tooltip" data-theme="theme-well-red" data-type="a" data-title="(A). Well Red">
                                                <div class="demo-theme-brand"></div>
                                                <div class="demo-theme-head"></div>
                                                <div class="demo-theme-nav"></div>
                                            </a>
                                        </div>
                                        <div class="demo-justify-theme">
                                            <a href="#" class="demo-theme demo-a-coffee add-tooltip" data-theme="theme-coffee" data-type="a" data-title="(A). Coffee">
                                                <div class="demo-theme-brand"></div>
                                                <div class="demo-theme-head"></div>
                                                <div class="demo-theme-nav"></div>
                                            </a>
                                            <a href="#" class="demo-theme demo-a-prickly-pear add-tooltip" data-theme="theme-prickly-pear" data-type="a" data-title="(A). Prickly pear">
                                                <div class="demo-theme-brand"></div>
                                                <div class="demo-theme-head"></div>
                                                <div class="demo-theme-nav"></div>
                                            </a>
                                            <a href="#" class="demo-theme demo-a-dark add-tooltip" data-theme="theme-dark" data-type="a" data-title="(A). Dark">
                                                <div class="demo-theme-brand"></div>
                                                <div class="demo-theme-head"></div>
                                                <div class="demo-theme-nav"></div>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="demo-theme-btn col-md-4 pad-ver">
                                        <p class="text-semibold text-main">Brand</p>
                                        <div class="demo-justify-theme">
                                            <a href="#" class="demo-theme demo-b-light add-tooltip" data-theme="theme-light" data-type="b" data-title="(B). Light">
                                                <div class="demo-theme-brand"></div>
                                                <div class="demo-theme-head"></div>
                                                <div class="demo-theme-nav"></div>
                                            </a>
                                            <a href="#" class="demo-theme demo-b-navy add-tooltip" data-theme="theme-navy" data-type="b" data-title="(B). Navy Blue">
                                                <div class="demo-theme-brand"></div>
                                                <div class="demo-theme-head"></div>
                                                <div class="demo-theme-nav"></div>
                                            </a>
                                            <a href="#" class="demo-theme demo-b-ocean add-tooltip" data-theme="theme-ocean" data-type="b" data-title="(B). Ocean">
                                                <div class="demo-theme-brand"></div>
                                                <div class="demo-theme-head"></div>
                                                <div class="demo-theme-nav"></div>
                                            </a>
                                        </div>
                                        <div class="demo-justify-theme">
                                            <a href="#" class="demo-theme demo-b-lime add-tooltip" data-theme="theme-lime" data-type="b" data-title="(B). Lime">
                                                <div class="demo-theme-brand"></div>
                                                <div class="demo-theme-head"></div>
                                                <div class="demo-theme-nav"></div>
                                            </a>
                                            <a href="#" class="demo-theme demo-b-purple add-tooltip" data-theme="theme-purple" data-type="b" data-title="(B). Purple">
                                                <div class="demo-theme-brand"></div>
                                                <div class="demo-theme-head"></div>
                                                <div class="demo-theme-nav"></div>
                                            </a>
                                            <a href="#" class="demo-theme demo-b-dust add-tooltip" data-theme="theme-dust" data-type="b" data-title="(B). Dust">
                                                <div class="demo-theme-brand"></div>
                                                <div class="demo-theme-head"></div>
                                                <div class="demo-theme-nav"></div>
                                            </a>
                                        </div>
                                        <div class="demo-justify-theme">
                                            <a href="#" class="demo-theme demo-b-mint add-tooltip" data-theme="theme-mint" data-type="b" data-title="(B). Mint">
                                                <div class="demo-theme-brand"></div>
                                                <div class="demo-theme-head"></div>
                                                <div class="demo-theme-nav"></div>
                                            </a>
                                            <a href="#" class="demo-theme demo-b-yellow add-tooltip" data-theme="theme-yellow" data-type="b" data-title="(B). Yellow">
                                                <div class="demo-theme-brand"></div>
                                                <div class="demo-theme-head"></div>
                                                <div class="demo-theme-nav"></div>
                                            </a>
                                            <a href="#" class="demo-theme demo-b-well-red add-tooltip" data-theme="theme-well-red" data-type="b" data-title="(B). Well red">
                                                <div class="demo-theme-brand"></div>
                                                <div class="demo-theme-head"></div>
                                                <div class="demo-theme-nav"></div>
                                            </a>
                                        </div>
                                        <div class="demo-justify-theme">
                                            <a href="#" class="demo-theme demo-b-coffee add-tooltip" data-theme="theme-coffee" data-type="b" data-title="(B). Coofee">
                                                <div class="demo-theme-brand"></div>
                                                <div class="demo-theme-head"></div>
                                                <div class="demo-theme-nav"></div>
                                            </a>
                                            <a href="#" class="demo-theme demo-b-prickly-pear add-tooltip" data-theme="theme-prickly-pear" data-type="b" data-title="(B). Prickly pear">
                                                <div class="demo-theme-brand"></div>
                                                <div class="demo-theme-head"></div>
                                                <div class="demo-theme-nav"></div>
                                            </a>
                                            <a href="#" class="demo-theme demo-b-dark add-tooltip" data-theme="theme-dark" data-type="b" data-title="(B). Dark">
                                                <div class="demo-theme-brand"></div>
                                                <div class="demo-theme-head"></div>
                                                <div class="demo-theme-nav"></div>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="demo-theme-btn col-md-4 pad-ver">
                                        <p class="text-semibold text-main">Navigation</p>
                                        <div class="demo-justify-theme">
                                            <a href="#" class="demo-theme demo-c-light add-tooltip" data-theme="theme-light" data-type="c" data-title="(C). Light">
                                                <div class="demo-theme-brand"></div>
                                                <div class="demo-theme-head"></div>
                                                <div class="demo-theme-nav"></div>
                                            </a>
                                            <a href="#" class="demo-theme demo-c-navy add-tooltip" data-theme="theme-navy" data-type="c" data-title="(C). Navy Blue">
                                                <div class="demo-theme-brand"></div>
                                                <div class="demo-theme-head"></div>
                                                <div class="demo-theme-nav"></div>
                                            </a>
                                            <a href="#" class="demo-theme demo-c-ocean add-tooltip" data-theme="theme-ocean" data-type="c" data-title="(C). Ocean">
                                                <div class="demo-theme-brand"></div>
                                                <div class="demo-theme-head"></div>
                                                <div class="demo-theme-nav"></div>
                                            </a>
                                        </div>
                                        <div class="demo-justify-theme">
                                            <a href="#" class="demo-theme demo-c-lime add-tooltip" data-theme="theme-lime" data-type="c" data-title="(C). Lime">
                                                <div class="demo-theme-brand"></div>
                                                <div class="demo-theme-head"></div>
                                                <div class="demo-theme-nav"></div>
                                            </a>
                                            <a href="#" class="demo-theme demo-c-purple add-tooltip" data-theme="theme-purple" data-type="c" data-title="(C). Purple">
                                                <div class="demo-theme-brand"></div>
                                                <div class="demo-theme-head"></div>
                                                <div class="demo-theme-nav"></div>
                                            </a>
                                            <a href="#" class="demo-theme demo-c-dust add-tooltip" data-theme="theme-dust" data-type="c" data-title="(C). Dust">
                                                <div class="demo-theme-brand"></div>
                                                <div class="demo-theme-head"></div>
                                                <div class="demo-theme-nav"></div>
                                            </a>
                                        </div>
                                        <div class="demo-justify-theme">
                                            <a href="#" class="demo-theme demo-c-mint add-tooltip" data-theme="theme-mint" data-type="c" data-title="(C). Mint">
                                                <div class="demo-theme-brand"></div>
                                                <div class="demo-theme-head"></div>
                                                <div class="demo-theme-nav"></div>
                                            </a>
                                            <a href="#" class="demo-theme demo-c-yellow add-tooltip" data-theme="theme-yellow" data-type="c" data-title="(C). Yellow">
                                                <div class="demo-theme-brand"></div>
                                                <div class="demo-theme-head"></div>
                                                <div class="demo-theme-nav"></div>
                                            </a>
                                            <a href="#" class="demo-theme demo-c-well-red add-tooltip" data-theme="theme-well-red" data-type="c" data-title="(C). Well Red">
                                                <div class="demo-theme-brand"></div>
                                                <div class="demo-theme-head"></div>
                                                <div class="demo-theme-nav"></div>
                                            </a>
                                        </div>
                                        <div class="demo-justify-theme">
                                            <a href="#" class="demo-theme demo-c-coffee add-tooltip" data-theme="theme-coffee" data-type="c" data-title="(C). Coffee">
                                                <div class="demo-theme-brand"></div>
                                                <div class="demo-theme-head"></div>
                                                <div class="demo-theme-nav"></div>
                                            </a>
                                            <a href="#" class="demo-theme demo-c-prickly-pear add-tooltip" data-theme="theme-prickly-pear" data-type="c" data-title="(C). Prickly pear">
                                                <div class="demo-theme-brand"></div>
                                                <div class="demo-theme-head"></div>
                                                <div class="demo-theme-nav"></div>
                                            </a>
                                            <a href="#" class="demo-theme demo-c-dark add-tooltip" data-theme="theme-dark" data-type="c" data-title="(C). Dark">
                                                <div class="demo-theme-brand"></div>
                                                <div class="demo-theme-head"></div>
                                                <div class="demo-theme-nav"></div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="demo-bg-boxed" class="demo-bg-boxed">
                        <div class="demo-bg-boxed-content">
                            <p class="text-semibold text-main text-lg mar-no">Background Images</p>
                            <p class="text-sm text-muted">Add an image to replace the solid background color</p>
                            <div class="row">
                                <div class="col-lg-4 text-justify">
                                    <p class="text-semibold text-main">Blurred</p>
                                    <div id="demo-blurred-bg" class="text-justify">
                                        <!--Blurred Backgrounds-->
                                    </div>
                                </div>
                                <div class="col-lg-4 text-justify">
                                    <p class="text-semibold text-main">Polygon &amp; Geometric</p>
                                    <div id="demo-polygon-bg" class="text-justify">
                                        <!--Polygon Backgrounds-->
                                    </div>
                                </div>
                                <div class="col-lg-4 text-justify">
                                    <p class="text-semibold text-main">Abstract</p>
                                    <div id="demo-abstract-bg" class="text-justify">
                                        <!--Abstract Backgrounds-->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="demo-bg-boxed-footer">
                            <button id="demo-close-boxed-img" class="btn btn-primary">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <button id="demo-set-btn" class="btn" data-toggle="collapse" data-target="#demo-set-body"><i class="demo-psi-gear icon-lg"></i></button>
    </div>
    <!--===================================================-->
    <!-- END SETTINGS -->
{% block f11 %}{% endblock %}
{% block f22 %}{% endblock %}
 <script src="/static/jquery-3.2.1.js"></script>
    <script>
        $(function () {
            getMsg();
        });

        function getMsg() {
            $.ajax({
                url: '/get_msg.html',
                type: 'GET',
                success:function (arg) {
                    //console.log(arg);
                    getMsg();
                }
            })
        }


        function  sendMsg() {
            $.ajax({
                url: '/send_msg.html',
                type: "POST",
                data: {'to': $('#to').val(), 'msg': $('#msg').val()},
                success:function (arg) {
                    alert(arg);
                }
            })
        }
    </script>
</body>
</html>
logout.html

 

from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^login/',views.login),
    url(r'^check_login/',views.check_login,name='checklogin'),
    url(r'^index.html/', views.index, name='index'),
    url(r'^avatar.html$', views.avatar),
    url(r'^contact_list.html$', views.contact_list),
    url(r'^send_msg.html$', views.send_msg),
    url(r'^get_msg.html$', views.get_msg),


]
urls.py
from django.shortcuts import render,HttpResponse
import requests
import time
import re
import json
from django.views.decorators.csrf import csrf_exempt
def ticket(html):
    from bs4 import BeautifulSoup
    ret = {}
    soup = BeautifulSoup(html,'html.parser')
    for tag in soup.find(name='error').find_all():
        ret[tag.name] = tag.text
    return ret


def login(req):
    if req.method == 'GET':
        uuid_time = int(time.time() * 1000)

        base_uuid_url = "https://login.wx.qq.com/jslogin?appid=wx782c26e4c19acffb&redirect_uri=https%3A%2F%2Fwx.qq.com%2Fcgi-bin%2Fmmwebwx-bin%2Fwebwxnewloginpage&fun=new&lang=zh_CN&_={0}"
        uuid_url =base_uuid_url.format(uuid_time)
        r1 = requests.get(uuid_url)
        result = re.findall('= "(.*)";',r1.text)
        uuid = result[0]

        req.session['UUID_TIME'] = uuid_time
        req.session['UUID'] = uuid



        return render(req,'login.html',{'uuid':uuid})



def check_login(req):
    response = {'code': 408,'data':None}

    ctime = int(time.time()*1000)
    # base_login_url = "https://login.wx.qq.com/cgi-bin/mmwebwx-bin/login?loginicon=true&uuid={0}&tip=0&r=-735595472&_={1}"
    base_login_url = "https://login.wx.qq.com/cgi-bin/mmwebwx-bin/login?loginicon=true&uuid={0}&tip=0&r=-735595472&_={1}"
    # "https://login.wx.qq.com/cgi-bin/mmwebwx-bin/login?loginicon=true&uuid=AbPhQTMl9w==&tip=0&r=-736896961&_=1503975440649"
    login_url = base_login_url.format(req.session['UUID'],ctime)
    r1 = requests.get(login_url)
    if 'window.code=408' in r1.text:
        # 無人掃碼
        response['code'] = 408
    elif 'window.code=201' in r1.text:
        # 掃碼,返回頭像
        response['code'] = 201
        response['data'] = re.findall("window.userAvatar = '(.*)';",r1.text)[0]

    elif 'window.code=200' in r1.text:
        # 掃碼,並確認登陸

        req.session['LOGIN_COOKIE'] = r1.cookies.get_dict()
        base_redirect_url = re.findall('redirect_uri="(.*)";',r1.text)[0]
        redirect_url = base_redirect_url + '&fun=new&version=v2'

        # 獲取憑證
        r2 = requests.get(redirect_url)
        ticket_dict = ticket(r2.text)

        req.session['TICKED_DICT'] = ticket_dict
        req.session['TICKED_COOKIE'] = r2.cookies.get_dict()


        # 初始化,獲取最近聯繫人信息:工做號
        post_data = {
            "BaseRequest":{
                "DeviceID": "e384757757885382",
                'Sid': ticket_dict['wxsid'],
                'Uin': ticket_dict['wxuin'],
                'Skey': ticket_dict['skey'],
            }
        }
        # 用戶初始化,講最近聯繫人我的信息放在session中
        #https://wx2.qq.com/cgi-bin/mmwebwx-bin/webwxinit?r=-565154492
        init_url = "https://wx2.qq.com/cgi-bin/mmwebwx-bin/webwxinit?r=-565154492&pass_ticket={0}".format(ticket_dict['pass_ticket'])
        r3 = requests.post(
            url=init_url,
            json=post_data
        )
        r3.encoding = 'utf-8'
        init_dict = json.loads(r3.text)
        req.session['INIT_DICT'] = init_dict
        response['code'] = 200


    return HttpResponse(json.dumps(response))


def avatar(req):
    prev = req.GET.get('prev') # /cgi-bin/mmwebwx-bin/webwxgeticon?seq=602427528

    username = req.GET.get('username') # @fb736164312cbcdb9abe746d81e24835
    skey = req.GET.get('skey') # @crypt_2ccf8ab9_4414c9f723cbe6e9caca48b7deceff93
    img_url = "https://wx2.qq.com{0}&username={1}&skey={2}".format(prev,username,skey)

    cookies= {}
    cookies.update(req.session['LOGIN_COOKIE'])
    cookies.update(req.session['TICKED_COOKIE'])
    res = requests.get(img_url,cookies=cookies,headers={'Content-Type': 'image/jpeg'})
    return HttpResponse(res.content)

def index(req):
    """顯示最近聯繫人"""
    # https://wx.qq.com

    return render(req,'index.html')




def contact_list(req):
    """
    獲取全部聯繫人
    :param req:
    :return:
    """
    ctime = int(time.time()*1000)
    base_url = "https://wx2.qq.com/cgi-bin/mmwebwx-bin/webwxgetcontact?lang=zh_CN&r={0}&seq=0&skey={1}"
    url = base_url.format(ctime,req.session['TICKED_DICT']['skey'])
    cookies = {}
    cookies.update(req.session['LOGIN_COOKIE'])
    cookies.update(req.session['TICKED_COOKIE'])

    r1 = requests.get(url,cookies=cookies)
    r1.encoding = 'utf-8'

    user_list = json.loads(r1.text)

    return render(req, 'contact_list.html',{'user_list':user_list})



@csrf_exempt
def send_msg(req):
    """
    發送消息
    :param req:
    :return:
    """
    current_user = req.session['INIT_DICT']['User']['UserName']  # session初始化,User.UserName
    to = req.POST.get('to')  # @dfb23e0da382f51746575a038323834a
    msg = req.POST.get('msg')  # asdfasdfasdf

    # session Ticket
    # session Cookie
    ticket_dict = req.session['TICKED_DICT']
    ctime = int(time.time() * 1000)

    post_data = {
        "BaseRequest": {
            "DeviceID": "e384757757885382",
            'Sid': ticket_dict['wxsid'],
            'Uin': ticket_dict['wxuin'],
            'Skey': ticket_dict['skey'],
        },
        "Msg": {
            "ClientMsgId": ctime,
            "LocalID": ctime,
            "FromUserName": current_user,
            "ToUserName": to,
            "Content": msg,
            "Type": 1
        },
        "Scene": 0
    }

    url = "https://wx2.qq.com/cgi-bin/mmwebwx-bin/webwxsendmsg?pass_ticket={0}".format(ticket_dict['pass_ticket'])
    # res = requests.post(url=url,json=post_data) # application/json,json.dumps(post_data)
    # res = requests.post(url=url,data=json.dumps(post_data),headers={'Content-Type': "application/json"}) # application/json,json.dumps(post_data)

    res = requests.post(url=url, data=json.dumps(post_data, ensure_ascii=False).encode('utf-8'),
                        headers={'Content-Type': "application/json"})  # application/json,json.dumps(post_data)

    return HttpResponse('...')


def get_msg(req):
    """
    長輪詢獲取消息
    :param req:
    :return:
    """
    # 檢查是否有消息到來
    ctime = int(time.time() * 1000)
    ticket_dict = req.session['TICKED_DICT']
    check_msg_url = "https://webpush.wx2.qq.com/cgi-bin/mmwebwx-bin/synccheck"

    cookies = {}
    cookies.update(req.session['LOGIN_COOKIE'])
    cookies.update(req.session['TICKED_COOKIE'])

    synckey_dict = req.session['INIT_DICT']['SyncKey']
    synckey_list = []
    for item in synckey_dict['List']:
        tmp = "%s_%s" % (item['Key'], item['Val'])
        synckey_list.append(tmp)
    synckey = "|".join(synckey_list)

    r1 = requests.get(
        url=check_msg_url,
        params={
            'r': ctime,
            "deviceid": "e384757757885382",
            'sid': ticket_dict['wxsid'],
            'uin': ticket_dict['wxuin'],
            'skey': ticket_dict['skey'],
            '_': ctime,
            'synckey': synckey
        },
        cookies=cookies
    )
    print(r1.text)
    if '{retcode:"0",selector:"0"}' in r1.text:
        return HttpResponse('...')

    # 有消息,獲取消息
    base_get_msg_url = "https://wx2.qq.com/cgi-bin/mmwebwx-bin/webwxsync?sid={0}&skey={1}&lang=zh_CN&pass_ticket={2}"
    get_msg_url = base_get_msg_url.format(ticket_dict['wxsid'], ticket_dict['skey'], ticket_dict['pass_ticket'])

    post_data = {
        "BaseRequest": {
            "DeviceID": "e384757757885382",
            'Sid': ticket_dict['wxsid'],
            'Uin': ticket_dict['wxuin'],
            'Skey': ticket_dict['skey'],
        },
        'SyncKey': req.session['INIT_DICT']['SyncKey']
    }
    r2 = requests.post(
        url=get_msg_url,
        json=post_data,
        cookies=cookies
    )
    r2.encoding = 'utf-8'
    # 接受到消息: 消息,synckey
    msg_dict = json.loads(r2.text)
    print(msg_dict)
    for msg in msg_dict['AddMsgList']:
        print('您有新消息到來:', msg['Content'])
    init_dict = req.session['INIT_DICT']
    init_dict['SyncKey'] = msg_dict['SyncKey']
    req.session['INIT_DICT'] = init_dict

    return HttpResponse('...')
view.py

 

微信公衆號API

1.接收用戶發送給微信公衆號的消息並自動回覆

 

 

2.python3--》wechart的SDK

#!/usr/bin/env python
# -*- coding: utf-8 -*-
#########################################################################
# Author: jonyqin
# Created Time: Thu 11 Sep 2014 01:53:58 PM CST
# File Name: ierror.py
# Description:定義錯誤碼含義 
#########################################################################
WXBizMsgCrypt_OK = 0
WXBizMsgCrypt_ValidateSignature_Error = -40001
WXBizMsgCrypt_ParseXml_Error = -40002
WXBizMsgCrypt_ComputeSignature_Error = -40003
WXBizMsgCrypt_IllegalAesKey = -40004
WXBizMsgCrypt_ValidateCorpid_Error = -40005
WXBizMsgCrypt_EncryptAES_Error = -40006
WXBizMsgCrypt_DecryptAES_Error = -40007
WXBizMsgCrypt_IllegalBuffer = -40008
WXBizMsgCrypt_EncodeBase64_Error = -40009
WXBizMsgCrypt_DecodeBase64_Error = -40010
WXBizMsgCrypt_GenReturnXml_Error = -40011
ierror.py
   #!/usr/bin/env python
# -*- encoding:utf-8 -*-

"""
    python3對公衆平臺發送給公衆帳號的消息加解密代碼.支持中文.
"""
# ------------------------------------------------------------------------

import base64
import string
import random
import hashlib
import time
import struct

import binascii
from Crypto.Cipher import AES
import xml.etree.cElementTree as ET
import socket

from . import ierror

""" AES加解密用 pycrypto """


class FormatException(Exception):
    pass


def throw_exception(message, exception_class=FormatException):
    """my define raise exception function"""
    raise exception_class(message)


class SHA1:
    """計算公衆平臺的消息簽名接口"""

    def getSHA1(self, token, timestamp, nonce, encrypt):
        """用SHA1算法生成安全簽名
        @param token:  票據
        @param timestamp: 時間戳
        @param encrypt: 密文
        @param nonce: 隨機字符串
        @return: 安全簽名
        """
        try:
            token = token.decode()
            sortlist = [token, timestamp, nonce, encrypt]
            sortlist.sort()
            sha = hashlib.sha1()
            sha.update("".join(sortlist).encode("utf8"))
            return ierror.WXBizMsgCrypt_OK, sha.hexdigest()
        except Exception as e:
            print(e)
            return ierror.WXBizMsgCrypt_ComputeSignature_Error, None


class XMLParse(object):
    """提供提取消息格式中的密文及生成回覆消息格式的接口"""

    # xml消息模板
    AES_TEXT_RESPONSE_TEMPLATE = """<xml>
        <Encrypt><![CDATA[%(msg_encrypt)s]]></Encrypt>
        <MsgSignature><![CDATA[%(msg_signaturet)s]]></MsgSignature>
        <TimeStamp>%(timestamp)s</TimeStamp>
        <Nonce><![CDATA[%(nonce)s]]></Nonce>
        </xml>"""

    def extract(self, xmltext):
        """提取出xml數據包中的加密消息
        @param xmltext: 待提取的xml字符串
        @return: 提取出的加密消息字符串
        """
        try:
            xml_tree = ET.fromstring(xmltext)
            encrypt = xml_tree.find("Encrypt")
            touser_name = xml_tree.find("ToUserName")
            return ierror.WXBizMsgCrypt_OK, encrypt.text, touser_name.text
        except Exception as e:
            print(e)
            return ierror.WXBizMsgCrypt_ParseXml_Error, None, None

    def generate(self, encrypt, signature, timestamp, nonce):
        """生成xml消息
        @param encrypt: 加密後的消息密文
        @param signature: 安全簽名
        @param timestamp: 時間戳
        @param nonce: 隨機字符串
        @return: 生成的xml字符串
        """
        resp_dict = {
            'msg_encrypt': encrypt,
            'msg_signaturet': signature,
            'timestamp': timestamp,
            'nonce': nonce,
        }
        resp_xml = self.AES_TEXT_RESPONSE_TEMPLATE % resp_dict
        return resp_xml


class PKCS7Encoder(object):
    """提供基於PKCS7算法的加解密接口"""

    block_size = 32

    def encode(self, text):
        """ 對須要加密的明文進行填充補位
        @param text: 須要進行填充補位操做的明文
        @return: 補齊明文字符串
        """
        text_length = len(text)
        # 計算須要填充的位數
        amount_to_pad = self.block_size - (text_length % self.block_size)
        if amount_to_pad == 0:
            amount_to_pad = self.block_size
        # 得到補位所用的字符
        pad = chr(amount_to_pad).encode()
        return text + pad * amount_to_pad

    def decode(self, decrypted):
        """刪除解密後明文的補位字符
        @param decrypted: 解密後的明文
        @return: 刪除補位字符後的明文
        """
        pad = ord(decrypted[-1])
        if pad < 1 or pad > 32:
            pad = 0
        return decrypted[:-pad]


class Prpcrypt(object):
    """提供接收和推送給公衆平臺消息的加解密接口"""

    def __init__(self, key):
        # self.key = base64.b64decode(key+"=")
        self.key = key
        # 設置加解密模式爲AES的CBC模式
        self.mode = AES.MODE_CBC

    def encrypt(self, text, appid):
        """對明文進行加密
        @param text: 須要加密的明文
        @return: 加密獲得的字符串
        """
        # 16位隨機字符串添加到明文開頭
        len_str = struct.pack("I", socket.htonl(len(text.encode())))
        # text = self.get_random_str() + binascii.b2a_hex(len_str).decode() + text + appid
        text = self.get_random_str() + len_str + text.encode() + appid
        # 使用自定義的填充方式對明文進行補位填充
        pkcs7 = PKCS7Encoder()
        text = pkcs7.encode(text)
        # 加密
        cryptor = AES.new(self.key, self.mode, self.key[:16])
        try:
            ciphertext = cryptor.encrypt(text)
            # 使用BASE64對加密後的字符串進行編碼
            return ierror.WXBizMsgCrypt_OK, base64.b64encode(ciphertext).decode('utf8')
        except Exception as e:
            return ierror.WXBizMsgCrypt_EncryptAES_Error, None

    def decrypt(self, text, appid):
        """對解密後的明文進行補位刪除
        @param text: 密文
        @return: 刪除填充補位後的明文
        """
        try:
            cryptor = AES.new(self.key, self.mode, self.key[:16])
            # 使用BASE64對密文進行解碼,而後AES-CBC解密
            plain_text = cryptor.decrypt(base64.b64decode(text))
        except Exception as e:
            print(e)
            return ierror.WXBizMsgCrypt_DecryptAES_Error, None
        try:
            # pad = ord(plain_text[-1])
            pad = plain_text[-1]
            # 去掉補位字符串
            # pkcs7 = PKCS7Encoder()
            # plain_text = pkcs7.encode(plain_text)
            # 去除16位隨機字符串
            content = plain_text[16:-pad]
            xml_len = socket.ntohl(struct.unpack("I", content[: 4])[0])
            xml_content = content[4: xml_len + 4]
            from_appid = content[xml_len + 4:]
        except Exception as e:
            return ierror.WXBizMsgCrypt_IllegalBuffer, None
        if from_appid != appid:
            return ierror.WXBizMsgCrypt_ValidateAppid_Error, None
        return 0, xml_content.decode()

    def get_random_str(self):
        """ 隨機生成16位字符串
        @return: 16位字符串
        """
        rule = string.ascii_letters + string.digits
        str = random.sample(rule, 16)
        return "".join(str).encode()


class WXBizMsgCrypt(object):
    # 構造函數
    # @param sToken: 公衆平臺上,開發者設置的Token
    # @param sEncodingAESKey: 公衆平臺上,開發者設置的EncodingAESKey
    # @param sAppId: 企業號的AppId
    def __init__(self, sToken, sEncodingAESKey, sAppId):
        try:
            self.key = base64.b64decode(sEncodingAESKey + "=")
            assert len(self.key) == 32
        except Exception:
            throw_exception("[error]: EncodingAESKey unvalid !", FormatException)
            # return ierror.WXBizMsgCrypt_IllegalAesKey)
        self.token = sToken.encode()
        self.appid = sAppId.encode()

    def EncryptMsg(self, sReplyMsg, sNonce, timestamp=None):
        # 將公衆號回覆用戶的消息加密打包
        # @param sReplyMsg: 企業號待回覆用戶的消息,xml格式的字符串
        # @param sTimeStamp: 時間戳,能夠本身生成,也能夠用URL參數的timestamp,如爲None則自動用當前時間
        # @param sNonce: 隨機串,能夠本身生成,也能夠用URL參數的nonce
        # sEncryptMsg: 加密後的能夠直接回複用戶的密文,包括msg_signature, timestamp, nonce, encrypt的xml格式的字符串,
        # return:成功0,sEncryptMsg,失敗返回對應的錯誤碼None
        pc = Prpcrypt(self.key)
        ret, encrypt = pc.encrypt(sReplyMsg, self.appid)
        if ret != 0:
            return ret, None
        if timestamp is None:
            timestamp = str(int(time.time()))
        # 生成安全簽名
        sha1 = SHA1()
        ret, signature = sha1.getSHA1(self.token, timestamp, sNonce, encrypt)

        if ret != 0:
            return ret, None
        xmlParse = XMLParse()
        return ret, xmlParse.generate(encrypt, signature, timestamp, sNonce)
    def VerifyURL(self, sMsgSignature, sTimeStamp, sNonce, sEchoStr):
        sha1 = SHA1()
        ret,signature = sha1.getSHA1(self.token, sTimeStamp, sNonce, sEchoStr)
        if ret  != 0:
            return ret, None
        if not signature == sMsgSignature:
            return ierror.WXBizMsgCrypt_ValidateSignature_Error, None
        pc = Prpcrypt(self.key)
        ret,sReplyEchoStr = pc.decrypt(sEchoStr,self.appid)
        return ret,sReplyEchoStr

    def DecryptMsg(self, sPostData, sMsgSignature, sTimeStamp, sNonce):
        # 檢驗消息的真實性,而且獲取解密後的明文
        # @param sMsgSignature: 簽名串,對應URL參數的msg_signature
        # @param sTimeStamp: 時間戳,對應URL參數的timestamp
        # @param sNonce: 隨機串,對應URL參數的nonce
        # @param sPostData: 密文,對應POST請求的數據
        #  xml_content: 解密後的原文,當return返回0時有效
        # @return: 成功0,失敗返回對應的錯誤碼
        # 驗證安全簽名
        xmlParse = XMLParse()
        ret, encrypt, touser_name = xmlParse.extract(sPostData)
        if ret != 0:
            return ret, None
        sha1 = SHA1()
        ret, signature = sha1.getSHA1(self.token, sTimeStamp, sNonce, encrypt)
        if ret != 0:
            return ret, None
        if not signature == sMsgSignature:
            return ierror.WXBizMsgCrypt_ValidateSignature_Error, None
        pc = Prpcrypt(self.key)
        ret, xml_content = pc.decrypt(encrypt, self.appid)
        return ret, xml_content
WXBizMsgCrypt.py

3.後臺

@csrf_exempt
def sql_confirm(request):
    from tools.wechart_callback.WXBizMsgCrypt import WXBizMsgCrypt
    token = "Qyumy9FYbtk3O"
    sVerifyEchoStr = "TMHEaa8cxiFfWbfiAQaCiNKLM01ABLOri3eCHq844l2"
    sCorpID = 'wwb36fe32f36b224b0'
    wxcpt = WXBizMsgCrypt(token, sVerifyEchoStr, sCorpID)
    signature = request.GET.get('msg_signature')  # msg_signature
    timestamp = request.GET.get('timestamp')
    nonce = request.GET.get('nonce')
    echostr = request.GET.get('echostr')

    if request.method == "GET":
        ret, sEchoStr = wxcpt.VerifyURL(signature, timestamp, nonce, echostr)
        if (ret != 0):
            print("ERR: VerifyURL ret:", ret)
        print(sEchoStr)
        return HttpResponse(sEchoStr)

    else:
        sReqData = request.body.decode('utf-8')
        ret, sMsg = wxcpt.DecryptMsg(sReqData, signature, timestamp, nonce)
        import xml.etree.ElementTree as ET
        if ret == 0:
            xml_tree = ET.fromstring(sMsg)
            user_mail = xml_tree.find("FromUserName").text
            content = xml_tree.find("Content").text
            t = loader.get_template('weChart_automatic_reply.xml')
            c= {'to_user':user_mail, 'send_content':content}
            r=t.render(c)
            ret,sEncryptMsg = wxcpt.EncryptMsg(r,nonce,timestamp)
            return HttpResponse(sEncryptMsg)
視圖

 

 

2.使用微信公衆號發送圖表

先上傳本地圖片信息到微信,獲取media id,而後使用media_id 發送圖片;

#!/usr/bin/python
#_*_coding:utf-8 _*_



import requests
import json
import sys


requests.packages.urllib3.disable_warnings()
requests.adapters.DEFAULT_RETRIES = 5
s = requests.session()
s.keep_alive = False



class WeChatClass(object):
    corpid = xxxxx'
    # CorpID是企業號的標識
    corpsecret = 'iqFW7f6TXPPsGhKzTriMND0JdmTuQiqg03lAdIkJTY8'
    # corpsecretSecret是管理組憑證密鑰
    gettoken_url = 'https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=' + corpid + '&corpsecret=' + corpsecret
    # def __init__(self,content):
    #     self.content=content
    def gettoken(self):
        try:
            token_info = json.loads(requests.get(url=self.gettoken_url,verify=False).text)
            access_token=token_info.get("access_token")
        except Exception as e:
            print('微信插件,獲取微信tocken錯誤:%s'%(e))
            sys.exit()
        return access_token

    def send_senddata(self,content,user):
        if user:
            send_values = {
                "touser": user,  # 企業號中的部門id。
                "msgtype": "text",  # 消息類型。
                "agentid": "xxxxx",  # 企業號中的應用id。
                "text": {"content":content},#發送的內容
                "safe": "0"
                           }

        else:
            send_values = {
                "toparty": "1",  # 企業號中的部門id。
                "msgtype": "text",  # 消息類型。
                "agentid": "xxxxx",  # 企業號中的應用id。
                "text": {
                    "content":content
                },
                "safe": "0"
            }
        send_url = 'https://qyapi.weixin.qq.com/cgi-bin/message/send?access_token=%s'%(self.gettoken())
        send_data=json.dumps(send_values,ensure_ascii=False).encode('utf-8')
        head = {'Content-Type': 'application/json;charset=utf-8'}
        ret=requests.post(url=send_url,headers=head,data=send_data)
        return ret

    def get_media_ID(self,path):
        img_url = 'https://qyapi.weixin.qq.com/cgi-bin/media/upload'
        payload_img = {
            'access_token':self.gettoken(),
            'type':'image'
        }
        data = {'media':open(path,'rb')}
        r = requests.post(url=img_url, params=payload_img, files=data)
        return r.json()['media_id']

    def send_image(self,user,imge):
        send_values = {
            "touser": user,  # 企業號中的部門id。
            "msgtype": "image",  # 消息類型。
            "agentid": "xxxx",  # 企業號中的應用id。
            "image":  {"media_id":self.get_media_ID(imge) },  # 發送的內容
            "safe": "0"
            }
        send_url = 'https://qyapi.weixin.qq.com/cgi-bin/message/send?access_token=%s' % (self.gettoken())
        send_data = json.dumps(send_values, ensure_ascii=False).encode('utf-8')
        head = {'Content-Type': 'application/json;charset=utf-8'}
        ret = requests.post(url=send_url, headers=head, data=send_data)
        return ret


WeChatInterface=WeChatClass()


if __name__ == '__main__':
    # touser = str(sys.argv[1])  # zabbix傳過來的第一個參數
    # content=str(sys.argv[2])
    WeChatInterface.send_senddata(content='SSS',user='zhanggen@bestseller.com.cn')
    WeChatInterface.send_image(user='zhanggen@bestseller.com.cn', imge='/WorkOrderSystemData/plotings/late_work_order.png')










#https://qydev.weixin.qq.com/wiki/index.php?title=%E4%B8%8A%E4%BC%A0%E4%B8%B4%E6%97%B6%E7%B4%A0%E6%9D%90%E6%96%87%E4%BB%B6
WeChat_plugin.py

 

 

參考

企業微信官方文檔

相關文章
相關標籤/搜索