近來一直在做微信開發(fā)浊服，涉及的東西很多，但是思路基本是從微信接口拿數(shù)據(jù)這樣一個(gè)流程狂巢。在開發(fā)過程中撑毛，順便寫了一個(gè)聊天頁面。個(gè)人感覺還不錯(cuò)唧领，所以把其中遇到的幾個(gè)知識點(diǎn)分享給大家藻雌。
整體的界面就是上面的樣子，排版方面的知識就不多說了斩个，畢竟我也不是做前端的胯杭，而且很多樣式都是直接從官網(wǎng)拿過來。還是主要說一說流程邏輯方面的知識受啥。其實(shí)并沒有太深的學(xué)問歉摧，只要有基礎(chǔ)的Js,循環(huán)，判斷語句就可以了。我主要想表達(dá)的還是實(shí)戰(zhàn)思路叁温。接下來我先把問題拋出來再悼，如果已經(jīng)想到了很好的方法大可不必再浪費(fèi)時(shí)間看下去了。
1膝但，中框部分的聊天記錄顯示問題（各部分均為獨(dú)立iframe框架）
難點(diǎn)：因?yàn)轱@示的條數(shù)受限冲九，假設(shè)只顯示最近5條，那么應(yīng)該是用時(shí)間倒序獲取5條數(shù)據(jù)跟束，這樣能實(shí)現(xiàn)最近5條數(shù)據(jù)莺奸，但是顯示結(jié)果會是自上而下從晚到早。相反冀宴，如果按照時(shí)間順序提取5條灭贷，那么顯示順序沒問題，可是獲取的5條數(shù)據(jù)卻不是最近的而是最早的略贮。
2甚疟，與第1點(diǎn)同步的會出現(xiàn)每條發(fā)送信息的時(shí)間，但是每條數(shù)據(jù)后面跟著一串‘2017-01-20 15:30:23’肯定會很難看逃延。理想的效果是览妖，短時(shí)間內(nèi)（例如半小時(shí)內(nèi)）就顯示一次發(fā)送時(shí)間，當(dāng)天聊天記錄就只顯示時(shí)分秒揽祥，今天以前的聊天就顯示年月日時(shí)分秒讽膏。如果判斷是否當(dāng)天還好說，可是判斷是否距離上一條記錄（嚴(yán)格來說是上一條顯示時(shí)間的記錄）半小時(shí)以內(nèi)就要?jiǎng)觿?dòng)腦筋了拄丰。
3府树，中框的聊天信息展示肯定要隨時(shí)更新的，如果你發(fā)送一條信息用post提交料按，相當(dāng)于刷新一次頁面還好理解奄侠。但是如果是收到一條信息又怎么能即時(shí)刷新呢。
4站绪，倘若中框的聊天記錄有10條，窗口大小只能顯示5條丽柿，怎么能讓它顯示到最底部一條信息恢准。當(dāng)然，你可以只讓它獲取到最近5條數(shù)據(jù)甫题，但是如果某一條數(shù)據(jù)內(nèi)容特別長馁筐，還是會出現(xiàn)滾動(dòng)條，還是不是顯示頁面底部坠非。
5敏沉，發(fā)送信息采用ctrl+enter發(fā)送，因?yàn)槿绻话磂nter發(fā)送，就不能換行了盟迟。網(wǎng)上可以搜到相關(guān)代碼秋泳，但是很有可能出現(xiàn)ctrl+enter鍵按下時(shí)，打開新的窗口攒菠。所以我在下面會放上測試好的代碼迫皱。
6，當(dāng)聊天頁面處于關(guān)閉狀態(tài)辖众，收到新信息會有消息提醒卓起。這一點(diǎn)比較容易就不說了。另外一種情況凹炸，你在聊天頁面與某一個(gè)好友聊天時(shí)戏阅，另一個(gè)或多個(gè)好友來消息時(shí)，也需要在對應(yīng)的頭像和分組菜單有消息提醒啤它。
7奕筐，發(fā)送消息方式一般采用post提交，提交后頁面刷新也能獲取到最新消息蚕键。但是如果提交信息用的是其它接口（比如用微信公眾號發(fā)送）救欧，就會首先獲取到接口返回的數(shù)據(jù)后才能算發(fā)送成功，才能進(jìn)行寫入數(shù)據(jù)庫或其它操作锣光。在這個(gè)過程可能會3到5秒笆怠，體驗(yàn)效果就會變差。所以建議采用ajax異步提交誊爹，并且提交后利用Js顯示到聊天主窗口（發(fā)送中狀態(tài)）蹬刷，當(dāng)收到ajax發(fā)送成功的反饋時(shí)刷新頁面，否則提示發(fā)送失敗频丘。
針對以上的問題办成，在下面一一解答或者直接粘貼代碼。
問題一思路：把獲取到的最近5條信息遍歷出來搂漠，逆序賦值給一個(gè)變量迂卢，然后把這個(gè)變量當(dāng)成html元素放到頁面。
$res= mysql_query(“select * from msg where sid= 23 and user=23 order bycreat_time? limit 0,5”);//從數(shù)據(jù)庫獲取最近5條數(shù)據(jù)
$str= ‘’;//聲明變量
While($rows = mysql_fetch_array($res))
{
$str = “
{$rows[‘name’]}{$rows[‘con’]}
”.$str;
}
Html部分
{$str}
問題二思路：
是否當(dāng)天可以用拿到的時(shí)間與當(dāng)天日期進(jìn)行比較（如果字段有時(shí)分秒可以截取前10位）
判斷是否與上一條顯示時(shí)間相隔半小時(shí)桐汤，就需要先聲明一個(gè)時(shí)間變量而克，當(dāng)每次需要顯示時(shí)間時(shí)就賦值一次。
這里還有一個(gè)問題怔毛，因?yàn)轱@示時(shí)第一條信息是5條里面最早的员萍，最后一條是最近的，然后獲取數(shù)據(jù)的順序正好相反拣度。所以判斷時(shí)間是否相隔半小時(shí)碎绎，是拿到的一條時(shí)間與下一條時(shí)間做比較螃壤。這當(dāng)然是不可能的。那么我想到的方法先把獲取的數(shù)據(jù)賦值給數(shù)組筋帖，再用數(shù)據(jù)遍歷輸出奸晴。
問題三思路：在里加入一行代碼
讓這個(gè)頁面每5秒刷新一次。這當(dāng)然是個(gè)方法幕随，只是不太好蚁滋。原因很簡單，頁面會不斷的閃動(dòng)也會占用服務(wù)器承載量赘淮。所以建議用ajax獲取是否有新消息辕录，如果有，則啟動(dòng)刷新梢卸。
functionget_msg(){
var str = '';
$.get("./ajax/ajax_wechat_new_list.php?uid="+uid+"&mid="+mid,function(data,status){
if(data>0){
window.location.reload();
}
});
setTimeout(function(){
get_msg();
},3000)
}
get_msg();
問題四思路：這個(gè)問題是個(gè)很實(shí)用的問題走诞，曾很困擾。我嘗試用模擬點(diǎn)擊事件蛤高，自動(dòng)運(yùn)行js效果都不太好蚣旱。其實(shí)最簡單的方法是在頁面末端加一個(gè)全局選擇器，例如id.
然后在url地址尾處加一個(gè)#go_foot,,,倘若不好用的話戴陡，再設(shè)置瞄點(diǎn)模擬點(diǎn)擊塞绿。
document.getElementById('go_foot').click();
問題五思路：
$("#sms_content").keyup(function(event){
if(event.ctrlKey && event.which ==13)?????? //13等于回車鍵(Enter)鍵值,ctrlKey等于Ctrl
{
$('#send').trigger("click");
}
});
備注：其中‘sms_content’是input提交標(biāo)簽的Id, keyup（松開按鍵）可以改為keydown（按下鍵盤），但是會出現(xiàn)打開新窗口的情況恤批。
問題六思路：
預(yù)先給每個(gè)好友設(shè)置好提醒的html元素（id名需要與該好友的id相關(guān)聯(lián)以便查找）异吻，并處理隱藏狀態(tài)。當(dāng)用ajax獲取到該好友的新消息時(shí)喜庞，則找到對應(yīng)標(biāo)簽變?yōu)轱@示狀態(tài)诀浪。
functionget_msg(){
var str = '';
$.get("./ajax/ajax_wechat_notice1.php?uid="+uid+"&show="+show,function(data,status){
if(data!=0){
varmsg = eval("("+data+")");
for(vari=0;i
{
varmid = msg[i].id;
vartime = msg[i].time;
varcon = msg[i].msg.substring(0,16)+'...';
$("#show_msg"+mid).show();
$("#show_msg"+mid).parent().prevAll('.time_tag').text(time);
$("#show_msg"+mid).parent().prevAll('.ext').children('.new_msg').text(con);
$("#show_msg"+mid).parent().parent().parent().prev().prev('.group_user').children('img').show();
}
}
});
setTimeout(function(){
get_msg();
},10000);
}
get_msg();
備注：以上代碼在消息提醒的同時(shí)，也會獲取到未讀消息的發(fā)送時(shí)間和內(nèi)容延都，需要在相關(guān)頁面設(shè)置雷猪，僅供參考。
問題七思路：首先在中框聊天列表的頁面里晰房，預(yù)先插入一條備用聊天記錄（包括發(fā)送人求摇，發(fā)送信息，發(fā)送中狀態(tài)圖標(biāo)）殊者，使其隱藏狀態(tài)与境。當(dāng)點(diǎn)擊發(fā)送時(shí)，需要處理幾個(gè)動(dòng)作幽污。a,利用ajax把文本框內(nèi)容發(fā)送嚷辅，b,文本框的內(nèi)容賦值給備用聊天記錄簿姨，c,令備用聊天記錄可見距误，同時(shí)文本框內(nèi)容清空d,模擬點(diǎn)擊事件讓聊天頁面顯示底部簸搞，f,獲取ajax發(fā)送反饋，如果成功則刷新聊天記錄窗口准潭。如果失敗利用js把發(fā)送中圖標(biāo)改為失敗圖標(biāo)趁俊，并且彈出發(fā)出失敗的反饋信息。
