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