這幾天使用H5開發了一個仿微信聊天前端介面，尤其微信底部編輯器那塊處理的很好，使用HTML5來開發，雖說功能效果並沒有微信那麼全，但是也相當不錯了，可以發送訊息、表情，傳送的訊息自動回滾定位到底部，另外可以對訊息、圖片、影片有不同的右鍵處理提示，還有打賞、佔螢幕等操作。
html程式碼片段：
<!--BEGIN 打賞--><div class=js_dialog id=J_Dialog_dashang style=display: none;> <!--<div class=weui-mask></div>--> <div class=weui- dialog> <i class=weui-xclose></i> <div class=weui-dialog__bd> <!-- //打賞模板區--> <div class=ws__popup-template> <h2 class=hdTit>為喜歡的節目打賞</h2> <div class=item flexbox> <input class=ipt-txt align-l flex1 type=text name=dschooseProgram placeholder=選擇打賞節目readonly /> </div> <div class=item item-area> <textarea class=describe name=content placeholder=輸入打賞語，30字以內（選填）></textarea> </div> <div class=item item-gift id=J__chooseGift> <div class=gift flexbox selected data-gift=001> <label class=txt><span>豪華汽車</span><em class=time>霸屏50秒</em></label> <span class=amount>￥<em>12</em> <i class=chkbox></i></span> </div> <div class=gift flexbox data-gift=002> <label class=txt>< span>動人玫瑰</span><em class=time>霸屏20秒</em></label> <span class=amount>￥<em>8</em> <i class=chkbox></i></span> </div> </div> </div> </div> <div class=weui-dialog__ft> <a href=javascript:; class=weui-dialog__btn weui- dialog__btn_primary style=background: #ff4400; border-radius: 4px; color: #fff;>支付<span>￥<em class=moneyNum>12</em></span> 打賞</a> </div> </div></div><!--END 打賞-->
Javascript程式碼片段：
/* -聊天編輯器區域*/var $editor = $(.J__editorText), editor = $editor[0];var $face = $(.emotion-area dd img);$face.on(click, function( e){ if($(this).hasClass(face)){ //影像var img = $(this)[0].cloneNode(true); editor.focus(); setTimeout(function(){ var range, node; if(document.selection && document.selection.createRange){ document.selection.createRange().pasteHTML(img); }else if(window.getSelection &&m. .getRangeAt){ range = window.getSelection().getRangeAt(0); range.insertNode(img); range.collapse(false); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } }, 16); }else if($(this).hasClass(del)){ //刪除editor.focus(); range = window.getSelection().getRangeAt(0); range.collapse(false); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); document.execCommand(delete); });//...格式化編輯器包含標籤editor.addEventListener(focus, function(evt) { surrounds()}, true);editor.addEventListener(input, function(evt) { surrounds();}, false);function surrounds() { setTimeout(function () { //chrome var sel = window.getSelection() ; var anchorNode = sel.anchorNode; if (!anchorNode) return; if (sel.anchorNode === editor || (sel.anchorNode.nodeType === 3 && sel.anchorNode.parentNode === editor)) { var range = sel.getRangeAt(0); var p = document.createElement( p); range.surroundContents(p); range.selectNodeContents(p); range.insertNode(document.createElement(br)); //chrome sel.collapse(p, 0); (function clearBr() { var elems = [].slice.call(editor.children); for (var i = 0, len = elems.length; i < len; i++) { var el = elems[i]; if (el.tagName.toLowerCase() == br) { editor.removeChild(el); } } elems.length = 0; })(); } }, 0);}//...捲動到聊天內容底部function scrollToBottom(){ $('.ws__chatMsg-panel').animate({scrollTop: $(#J__chatMsgList).height()}, 300);}運行效果：
總結以上所述是小編給大家介紹的HTML5仿微信聊天介面、微信朋友圈實例代碼，希望對大家有幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對VeVb武林網站的支持！