Interface de bate-papo WeChat de imitação HTML5 e código de exemplo do WeChat Moments

Nos últimos dias, usei o H5 para desenvolver uma interface front-end de bate-papo semelhante ao WeChat. Especialmente o editor inferior do WeChat é muito bem gerenciado. Embora as funções e efeitos não sejam tão abrangentes quanto o WeChat. , ainda é muito bom. Você pode enviar mensagens, Emoticons e mensagens enviadas rolar automaticamente para baixo. Além disso, você pode ter diferentes prompts de processamento de clique com o botão direito para mensagens, fotos e vídeos, bem como recompensas, ocupação de tela. e outras operações.

trecho 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 modelo de gorjeta--> <div class=ws__popup-template> <h2 class=hdTit>Dica para seus programas favoritos</h2> <div class=item flexbox> <input class=ipt-txt align-l flex1 type=text name=dschooseProgram placeholder=Escolha dar gorjeta Programa de apreciação somente leitura /> </div> <div class=item item-area> <textarea class=describe name=content placeholder=Insira uma mensagem de recompensa, com até 30 palavras (opcional)></textarea> </div> <div class=item item-gift id=J__chooseGift> <div class=gift flexbox selected data-gift=001> <label class =txt><span>Carros de luxo</span><em class=time>Domine a tela por 50 segundos</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>Moving Rose</span><em class=time>Domine a tela por 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 style=background: #ff4400; border-radius: 4px color: #fff;>Pagamento<span>￥<em; class=moneyNum>12</em></span> Recompensa</a> </div> </div></div><!--END Recompensa-->

Trecho de código Javascript:

 /* -Área do editor de bate-papo*/var $editor = $(.J__editorText), editor = $editor[0];var $face = $(.emotion-area dd img);$face.on(click, function( e ){ if($(this).hasClass(face)){ //Imagem var img = $(this)[0].cloneNode(true); intervalo, nó; if(document.selection && document.selection.createRange){ document.selection.createRange().pasteHTML(img); getSelection().getRangeAt(0); range.insertNode(img); window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } }, 16); = window.getSelection().getRangeAt(0); range.collapse(false); sel.removeAllRanges(); sel.addRange(range); document.execCommand(delete }});//...O editor de formatação contém tags editor.addEventListener(focus, function(evt) { surrounds()} , true);editor.addEventListener(input, function(evt) { surrounds();}, false);function surrounds() { setTimeout(function () { //cromo var sel = window.getSelection(); var âncoraNode = sel.anchorNode; if (!anchorNode) return; âncoraNode.parentNode === editor)) { var range = sel.getRangeAt(0); document.createElement(p); range.surroundContents(p); range.selectNodeContents(p); range.insertNode(document.createElement(br)); { 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); ;}//...Role até o final da função de conteúdo do bate-papo scrollToBottom(){ $('.ws__chatMsg-panel').animate({scrollTop: $(#J__chatMsgList).height()}, 300);}

Efeito da operação:

O texto acima é a interface de bate-papo WeChat de imitação HTML5 e o código de exemplo do WeChat Moments introduzido pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá a tempo. Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!