Интерфейс чата WeChat, имитирующий HTML5, и пример кода WeChat Moments

В последние несколько дней я использовал H5 для разработки внешнего интерфейса чата, похожего на WeChat. Особенно хорошо работает нижний редактор WeChat. Он разработан с использованием HTML5, хотя функции и эффекты не так полны, как WeChat. , это все еще неплохо. Вы можете отправлять сообщения, смайлы и отправленные сообщения автоматически прокручивать вниз. Кроме того, вы можете иметь различные подсказки для обработки сообщений, изображений и видео, вызываемые щелчком правой кнопкой мыши, а также вознаграждение, занимающее экран. и другие операции.

фрагмент html-кода:

 <!--BEGIN Reward--><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=Выберите совет Программа благодарности только для чтения /> </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- диалог__btn_primary style=background: #ff4400; border-radius: 4px; цвет: #fff;>Payment<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 диапазон, узел; если (document.selection && document.selection.createRange) { document.selection.createRange().pasteHTML (img); } else if (window.getSelection && window.getSelection().getRangeAt) { диапазон = окно .getSelection().getRangeAt(0); range.insertNode(img); range.collapse(false); window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } }, }else if($(this).hasClass(del)){ //Удалить editor.focus(); = 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 === редактор)) { 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); { 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 })(); ;}//...Прокрутим содержимое чата вниз function ScrollToBottom(){ $('.ws__chatMsg-panel').animate({scrollTop: $(#J__chatMsgList).height()}, 300);}

Эффект операции:

Выше представлен интерфейс чата WeChat, имитирующий HTML5, и пример кода WeChat Moments, представленный редактором. Надеюсь, он будет вам полезен. Если у вас есть какие-либо вопросы, оставьте мне сообщение, и редактор ответит вам вовремя. Я также хотел бы поблагодарить всех за поддержку сайта боевых искусств VeVb!