近來一直在做微信開發(fā)，涉及的東西很多，但是思路基本是從微信接口拿數(shù)據(jù)這樣一個流程。在開發(fā)過程中，順便寫了一個聊天頁面。個人感覺還不錯，所以把其中遇到的幾個知識點分享給大家。
整體的界面就是上面的樣子，排版方面的知識就不多說了，畢竟我也不是做前端的，而且很多樣式都是直接從官網(wǎng)拿過來。還是主要說一說流程邏輯方面的知識。其實并沒有太深的學(xué)問，只要有基礎(chǔ)的Js,循環(huán)，判斷語句就可以了。我主要想表達的還是實戰(zhàn)思路。接下來我先把問題拋出來，如果已經(jīng)想到了很好的方法大可不必再浪費時間看下去了。
1，中框部分的聊天記錄顯示問題（各部分均為獨立iframe框架）
難點：因為顯示的條數(shù)受限，假設(shè)只顯示最近5條，那么應(yīng)該是用時間倒序獲取5條數(shù)據(jù)，這樣能實現(xiàn)最近5條數(shù)據(jù)，但是顯示結(jié)果會是自上而下從晚到早。相反，如果按照時間順序提取5條，那么顯示順序沒問題，可是獲取的5條數(shù)據(jù)卻不是最近的而是最早的。
2，與第1點同步的會出現(xiàn)每條發(fā)送信息的時間，但是每條數(shù)據(jù)后面跟著一串‘2017-01-20 15:30:23’肯定會很難看。理想的效果是，短時間內(nèi)（例如半小時內(nèi)）就顯示一次發(fā)送時間，當(dāng)天聊天記錄就只顯示時分秒，今天以前的聊天就顯示年月日時分秒。如果判斷是否當(dāng)天還好說，可是判斷是否距離上一條記錄（嚴(yán)格來說是上一條顯示時間的記錄）半小時以內(nèi)就要動動腦筋了。
3，中框的聊天信息展示肯定要隨時更新的，如果你發(fā)送一條信息用post提交，相當(dāng)于刷新一次頁面還好理解。但是如果是收到一條信息又怎么能即時刷新呢。
4，倘若中框的聊天記錄有10條，窗口大小只能顯示5條，怎么能讓它顯示到最底部一條信息。當(dāng)然，你可以只讓它獲取到最近5條數(shù)據(jù)，但是如果某一條數(shù)據(jù)內(nèi)容特別長，還是會出現(xiàn)滾動條，還是不是顯示頁面底部。
5，發(fā)送信息采用ctrl+enter發(fā)送，因為如果只按enter發(fā)送，就不能換行了。網(wǎng)上可以搜到相關(guān)代碼，但是很有可能出現(xiàn)ctrl+enter鍵按下時，打開新的窗口。所以我在下面會放上測試好的代碼。
6，當(dāng)聊天頁面處于關(guān)閉狀態(tài)，收到新信息會有消息提醒。這一點比較容易就不說了。另外一種情況，你在聊天頁面與某一個好友聊天時，另一個或多個好友來消息時，也需要在對應(yīng)的頭像和分組菜單有消息提醒。
7，發(fā)送消息方式一般采用post提交，提交后頁面刷新也能獲取到最新消息。但是如果提交信息用的是其它接口（比如用微信公眾號發(fā)送），就會首先獲取到接口返回的數(shù)據(jù)后才能算發(fā)送成功，才能進行寫入數(shù)據(jù)庫或其它操作。在這個過程可能會3到5秒，體驗效果就會變差。所以建議采用ajax異步提交，并且提交后利用Js顯示到聊天主窗口（發(fā)送中狀態(tài)），當(dāng)收到ajax發(fā)送成功的反饋時刷新頁面，否則提示發(fā)送失敗。
針對以上的問題，在下面一一解答或者直接粘貼代碼。
問題一思路：把獲取到的最近5條信息遍歷出來，逆序賦值給一個變量，然后把這個變量當(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)天可以用拿到的時間與當(dāng)天日期進行比較（如果字段有時分秒可以截取前10位）
判斷是否與上一條顯示時間相隔半小時，就需要先聲明一個時間變量，當(dāng)每次需要顯示時間時就賦值一次。
這里還有一個問題，因為顯示時第一條信息是5條里面最早的，最后一條是最近的，然后獲取數(shù)據(jù)的順序正好相反。所以判斷時間是否相隔半小時，是拿到的一條時間與下一條時間做比較。這當(dāng)然是不可能的。那么我想到的方法先把獲取的數(shù)據(jù)賦值給數(shù)組，再用數(shù)據(jù)遍歷輸出。
問題三思路：在里加入一行代碼
讓這個頁面每5秒刷新一次。這當(dāng)然是個方法，只是不太好。原因很簡單，頁面會不斷的閃動也會占用服務(wù)器承載量。所以建議用ajax獲取是否有新消息，如果有，則啟動刷新。
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();
問題四思路：這個問題是個很實用的問題，曾很困擾。我嘗試用模擬點擊事件，自動運行js效果都不太好。其實最簡單的方法是在頁面末端加一個全局選擇器，例如id.
然后在url地址尾處加一個#go_foot,,,倘若不好用的話，再設(shè)置瞄點模擬點擊。
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ù)先給每個好友設(shè)置好提醒的html元素（id名需要與該好友的id相關(guān)聯(lián)以便查找），并處理隱藏狀態(tài)。當(dāng)用ajax獲取到該好友的新消息時，則找到對應(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();
備注：以上代碼在消息提醒的同時，也會獲取到未讀消息的發(fā)送時間和內(nèi)容，需要在相關(guān)頁面設(shè)置，僅供參考。
問題七思路：首先在中框聊天列表的頁面里，預(yù)先插入一條備用聊天記錄（包括發(fā)送人，發(fā)送信息，發(fā)送中狀態(tài)圖標(biāo)），使其隱藏狀態(tài)。當(dāng)點擊發(fā)送時，需要處理幾個動作。a,利用ajax把文本框內(nèi)容發(fā)送，b,文本框的內(nèi)容賦值給備用聊天記錄，c,令備用聊天記錄可見，同時文本框內(nèi)容清空d,模擬點擊事件讓聊天頁面顯示底部，f,獲取ajax發(fā)送反饋，如果成功則刷新聊天記錄窗口。如果失敗利用js把發(fā)送中圖標(biāo)改為失敗圖標(biāo)，并且彈出發(fā)出失敗的反饋信息。
