Interface de chat WeChat imitation HTML5 et exemple de code WeChat Moments

Ces derniers jours, j'ai utilisé H5 pour développer une interface frontale de chat de type WeChat, en particulier l'éditeur inférieur de WeChat est très bien géré, bien que les fonctions et les effets ne soient pas aussi complets que WeChat. , c'est toujours assez bien. Vous pouvez envoyer des messages, des émoticônes et des messages envoyés revenir automatiquement vers le bas. De plus, vous pouvez avoir différentes invites de traitement par clic droit pour les messages, les images et les vidéos, ainsi que les récompenses et l'occupation de l'écran. et d'autres opérations.

extrait de code html :

 <!--BEGIN Récompense--><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> <!-- //Zone de modèle de pourboire--> <div class=ws__popup-template> <h2 class=hdTit>Astuce pour vos programmes préférés</h2> <div class=item flexbox> <input class=ipt-txt align-l flex1 type=text name=dschooseProgram placeholder=Choisissez de donner un pourboire Programme d'appréciation en lecture seule /> </div> <div class=item item-area> <textarea class=describe name=content placeholder=Entrez un message de récompense, dans les 30 mots (facultatif)></textarea> </div> <div class=item item-gift id=J__chooseGift> <div class=gift flexbox selected data-gift=001> <classe d'étiquette =txt><span>Voitures de luxe</span><em class=time>Dominez l'écran pendant 50 secondes</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>Dominez l'écran pendant 20 secondes</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 ; couleur : #fff;>Paiement<span>￥<em class=moneyNum>12</em></span> Récompense</a> </div> </div></div><!--END Récompense-->

Extrait de code Javascript :

 /* -Zone de l'éditeur de chat*/var $editor = $(.J__editorText), editor = $editor[0];var $face = $(.emotion-area dd img);$face.on(click, function( e ){ if($(this).hasClass(face)){ //Image var img = $(this)[0].cloneNode(true); setTimeout(function(){ var); range, node; if(document.selection && document.selection.createRange){ document.selection.createRange().pasteHTML(img); else if(window.getSelection && window.getSelection().getRangeAt){ range = window .getSelection().getRangeAt(0); range.insertNode(img); range.collapse(false); window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } }, 16); else if($(this).hasClass(del)){ //Supprimer editor.focus(); = window.getSelection().getRangeAt(0); range.collapse(false); sel.removeAllRanges(); sel.addRange(range); document.execCommand(delete); }});//...L'éditeur de formatage contient des balises 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 === éditeur || (sel.anchorNode.nodeType === 3 && sel. AnchorNode.parentNode === éditeur)) { 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 } } elems.length = 0; ;}//...Faites défiler vers le bas de la fonction de contenu du chat scrollToBottom(){ $('.ws__chatMsg-panel').animate({scrollTop : $(#J__chatMsgList).height()}, 300);}

Effet de fonctionnement :

Ce qui précède est l'interface de chat WeChat imitation HTML5 et l'exemple de code WeChat Moments introduits par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !