지난 며칠 동안 H5를 사용하여 WeChat과 유사한 채팅 프런트 엔드 인터페이스를 개발했습니다. 특히 WeChat의 하단 편집기는 HTML5를 사용하여 개발되었지만 WeChat만큼 포괄적이지 않습니다. , 여전히 꽤 좋습니다. 메시지, 이모티콘 및 보낸 메시지를 자동으로 다시 하단으로 스크롤할 수 있습니다. 또한 메시지, 사진, 비디오에 대한 다양한 마우스 오른쪽 버튼 클릭 처리 프롬프트를 표시할 수 있으며, 화면 점유도 가능합니다. 및 기타 작업.
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=팁을 선택하세요 감사 프로그램 읽기전용 /> </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:; Dialog__btn_primary 스타일=배경: #ff4400; 테두리 반경: 4px; 색상: #fff;>결제<span>\<em class=moneyNum>12</em></span> 보상</a> </div> </div></div><!--END 보상-->
자바스크립트 코드 조각:
/* -채팅 편집기 영역*/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); setTimeout(function(){ var 범위, 노드; if(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.addRange(range); } }, 16); }else if($(this).hasClass(del)){ //editor.focus(); = window.getSelection().getRangeAt(0); range.collapse(false); var sel = window.getSelection(); sel.removeAllRanges(); document.execCommand(delete); }});//...형식 편집기에는 editor.addEventListener(focus, function(evt) { arounds()} , true);editor.addEventListener(input, function(evt) { arounds();}, false);function arounds() { setTimeout(function () { //chrome var sel = window.getSelection(); var 앵커Node = sel.anchorNode; if (!anchorNode) return; if (sel.anchorNode === editor || (sel.anchorNode.nodeType === 3 && sel. AnchorNode.parentNode === 편집기)) { var range = sel.getRangeAt(0); document.createElement(p); range.surroundContents(p); range.insertNode(document.createElement(br)); (함수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 })(); ;}//...채팅 콘텐츠 함수의 아래쪽으로 스크롤하십시오. scrollToBottom(){ $('.ws__chatMsg-panel').animate({scrollTop: $(#J__chatMsgList).height()}, 300);}가동 효과:
요약위는 편집자가 소개한 HTML5 모방 WeChat 채팅 인터페이스와 WeChat Moments 예제 코드입니다. 궁금한 점이 있으면 메시지를 남겨주시면 편집자가 시간에 맞춰 답변해 드리겠습니다. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!