Interfaz de chat WeChat de imitación HTML5 y código de ejemplo de WeChat Moments

En los últimos días, he usado H5 para desarrollar una interfaz de usuario de chat similar a WeChat. Especialmente el editor inferior de WeChat se maneja muy bien. Aunque las funciones y efectos no son tan completos como WeChat. , sigue siendo bastante bueno. Puede enviar mensajes, emoticones y mensajes enviados que se desplazan automáticamente hacia la parte inferior. Además, puede tener diferentes indicaciones de procesamiento con el botón derecho para mensajes, imágenes y videos, así como recompensas y ocupación de la pantalla. y otras operaciones.

fragmento de código html:

 <!--BEGIN Recompensa--><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> <!-- //Área de plantilla de propinas--> <div class=ws__popup-template> <h2 class=hdTit>Consejo para tus programas favoritos</h2> <div class=item flexbox> <input class=ipt-txt align-l flex1 type=text name=dschooseProgram placeholder=Elige dar consejo Programa de agradecimiento de solo lectura /> </div> <div class=item item-area> <textarea class=describe nombre=contenido placeholder=Ingrese un mensaje de recompensa, dentro de 30 palabras (opcional)></textarea> </div> <div class=item item-gift id=J__chooseGift> <div class=regalo flexbox seleccionado data-gift=001> <label class =txt><span>Coches de lujo</span><em class=time>Domina la pantalla durante 50 segundos</em></label> <span class=cantidad>￥<em>12</em> <i class=chkbox></i></span> </div> <div class=regalo flexbox data-gift=002> <label class=txt>< span>Moving Rose</span><em class=time>Domina la pantalla durante 20 segundos</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 estilo=fondo: #ff4400; radio del borde: 4px; color: #fff;>Pago<span>￥<em class=moneyNum>12</em></span> Recompensa</a> </div> </div></div><!--END Recompensa-->

Fragmento de código Javascript:

 /* -Área del editor de chat*/var $editor = $(.J__editorText), editor = $editor[0];var $face = $(.emotion-area dd img);$face.on(click, function( e ){ if($(this).hasClass(face)){ //Imagen var img = $(this)[0].cloneNode(true); setTimeout(function(){ var); rango, nodo if(document.selection && document.selection.createRange){ document.selection.createRange().pasteHTML(img }else if(window.getSelection && window.getSelection().getRangeAt){ rango = ventana; .getSelection().getRangeAt(0); range.insertNode(img.range.collapse(false var sel); window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } }, 16); }else if($(this).hasClass(del)){ //Eliminar rango editor.focus(); = ventana.getSelection().getRangeAt(0); range.collapse(false var sel = ventana.getSelection(); sel.removeAllRanges(); sel.addRange(range); document.execCommand(delete); }});//... El editor de formato contiene etiquetas editor.addEventListener(focus, function(evt) { rodean()}, verdadero);editor.addEventListener(entrada, función(evt) { rodea();}, falso);función rodea() { setTimeout(función () { //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 rango = sel.getRangeAt(0); document.createElement(p); range.surroundContents(p); range.selectNodeContents(p); range.insertNode(document.createElement(br)); //chrome sel.collapse(p, 0); { var elems = [].slice.call(editor.children); para (var i = 0, len = elems.length; i < len; i++) { var el = elems[i]; if (el.tagName.toLowerCase() == br) { editor.removeChild(el } } elems.length = })(); ;}//...Desplácese hasta el final de la función de contenido del chat scrollToBottom(){ $('.ws__chatMsg-panel').animate({scrollTop: $(#J__chatMsgList).height()}, 300);}

Efecto de operación:

Lo anterior es la interfaz de chat WeChat de imitación HTML5 y el código de ejemplo de WeChat Moments presentado por el editor. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá a tiempo. ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!