前端頁面設計

前端主要采用bootstrap和jquery開發，聊天室的頁面展示代碼在template/webqq/dashboard.html

主要設計分為：

對data_type的切換是聯系人還是群組，

聯系人搜索和列表的設計，

聯系人列表通過通過for循環取出

對在和誰聊天名字的顯示，

聊天內容和輸入框img，

以及登錄頁面。

主要代碼

• 聯系人
• 群組

{% for contact in request.user.userprofilehpy.friends.select_related %}

0

{{ contact.name }}

{% endfor %}

img

......

效果展示

用jquery實現選中聊天對象變色以及將把聊天人是誰賦值給dialog-box-head

$(document).ready(function(){

//用遞歸，結束這個線程在進行下一個，不用for

GetNewMsg_hpy();

/*不用setInterval每次用一個線程

RefreshMsgs = setInterval(function(){

//定時器3秒向后端請求

GetNewMsg_hpy();

},3000);*/

$("#contact-list a").click(function(){

//點中與誰聊天的顏色改變，并且把名字賦予dialog-box-head

$ (this).addClass("active");

$(this).children("span").addClass("hide");

$(this).children("span").text("0");

$(this).siblings().removeClass("active");//同級別siblings,切換聊天人

//console.log("hello");

SwitchChatBoxhpy(this);

});

});

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的python webqq机器人_python模拟开发WebQQ（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。