이전에 h5 WeChat 채팅 모바일 단말기 버전을 만든 적이 있습니다. 이 기간 동안 이전 프로젝트를 정리하고 원래 버전을 기반으로 업그레이드하여 현재의 h5 모방 WeChat 채팅 고급 버전을 갖게 되었습니다. , Wechat, 주소록, Explore, Me 등 4개의 새로운 항목이 추가되었습니다. 모듈에는 왼쪽 및 오른쪽 터치 및 슬라이드 화면 전환 기능이 있으며 채팅 페이지에는 다중 이미지 미리보기, 비디오 재생, 길게 누르기 메뉴 UI가 최적화되었으며 채팅 하단의 편집기가 다시 최적화 및 구성되었습니다(더 많은 이모티콘 추가). , 팝업창은 자체 개발한 wcPop.js를 사용합니다. 특히 프로젝트 렌더링을 확인해보세요!
HTML 코드 조각:
<!-- //Wechat 하단 기능 패널--><div class=wc__footTool-panel> <!-- 입력 상자 모듈--> <div class=wc__editor-panel wc__borT flexbox> <div class=wrap-editor flex1 > <div class=editor J__wcEditor contenteditable=true></div></div> <i class=btn btn-emotion></i> <i class=btn btn-choose></i> <button class=btn-submit J__wchatSubmit>보내기</button> </div> <!-- 표현식, 선택 모듈--> <div class=wc__choose-panel wc__borT style= 표시: 없음;> <!-- 표현식 영역--> <div class=wrap-emotion style=display: none;> <div class=emotion__cells flexbox flex__direction-column> <div class=emotion__cells-swiper flex1 id=J__swiperEmotion> <div class=swiper-container> <div class=swiper-wrapper></div> <div class=pagination-emotion></div> < /div> </div> <div class=emotion__cells-footer id=J__emotionFootTab> <ul class=clearfix> <li class=swiperTmpl cur tmpl=swiper__tmpl-emotion01><img src=img/emotion/face01/face-lbl.png <li class=swiperTmpl tmpl=swiper__tmpl-emotion02><img src=img/emotion/ face02/face-lbl.gif <li class=swiperTmpl tmpl=swiper__tmpl-emotion03><img src=img/emotion/face03/face-lbl.gif <li class=swiperTmpl tmpl=swiper__tmpl-emotion04><img src=img/emotion/face04/face-lbl.gif <li 클래스 =swiperTmpl tmpl=swiper__tmpl-emotion05><img src=img/emotion/face05/face-lbl.gif <li class=swiperTmpl tmpl=swiper__tmpl-emotion06><img src=img/emotion/face06/face-lbl.gif <li class=swiperTmplSet><img src=img /wchat/icon__emotion-set.png </ul> </div> </div> </div> <!-- 영역 선택--> <div class=wrap-choose style=display: none;> <div class=choose__cells> <ul class=clearfix> <li><a class=J__wchatZp href=javascript ::><span class=img><img src=img/wchat/icon__choose-zp.png /><입력 유형=파일 accept=image/* /></span><em>사진</em></a></li> <li><a class=J__wchatSp href=javascript:;><span class=img><img src=img/wchat/ icon__choose-sp.png /><input type=file accept=video/* /></span><em>동영상</em></a></li> <li><a class=J__wchatHb href=javascript:;><span class=img><img src=img/wchat/icon__choose-hb.png /></span><em>빨간 봉투</em></a></li> <li > <a class=J__wchatSc href=javascript:;><span class=img><img src=img/wchat/icon__choose-sc.png /></span><em>내 컬렉션</em></a></li> <li><a class=J__wchatWj href=javascript:;><span class=img><img src=img/ wchat /icon__choose-wj.png /></span><em>파일</em></a></li> </ul> </div> </div> </div></div>< div class=wc__choosePanel-tmpl> <!-- //빨간 봉투 template.begin --> <div id=J__popupTmpl-Hongbao style=display:none;> <div class=wc__popupTmpl tmpl-hongbao> <i class=wc-xclose > </i> <ul class=clearfix> <li class=item flexbox> <label class=txt>총액</label><input class=ipt-txt flex1 type=tel name=hbAmount placeholder=0.00 /><em class=unit>원</em> </li> <li class=item flexbox> <label class=txt>빨간 봉투 갯수< /li> label><input class=ipt-txt flex1 type=tel name=hbNum placeholder=숫자 입력/><em class=unit>조각</em> </li> <li class=tips>총 <em class=memNum>186</em>명이 온라인 상태입니다.</li> <li class=item item-area> <textarea class=describe name=content placeholder=부자와 부자가 되신 것을 축하합니다 luck></ textarea> </li> <li class=amountTotal>₩<em class=num>0.00</em></li> </ul> </div> </div> <!-- //빨간 봉투 template.end --></div>
Js 코드 조각:
// ...길게 누르기 팝업 메뉴 $(#J__chatMsgList).on(longTap, li .msg, function(e){ var that = $(this), menuTpl, menuNode = $(<div class='wc__chatTapMenu 애니메이션 애니메이션 -fadeIn'></div>) that.addClass(taped); that.parents(li).siblings().find(.msg).removeClass(taped); var isRevoke = that.parents(li).hasClass(me) var _revoke = '#'> <i class='ico i4'></i>철회</a> : ; if(that.hasClass(picture)){ console.log(picture long press); <div class='menu menu-picture'><a href='#'><i class='ico i1'></i>복사</a><a href='#'><i class=' ico i2'></i>수집</a><a href='#'><i class='ico i3'></i>다른 이름으로 저장</a>+ _revoke +<a href='#' ><i class='ico i5'></i>삭제</a></div>; }else if(that.hasClass(video)){ console.log(video long press) menuTpl = <div class='menu menu-video' ><a href='#'><i class='ico i3'></i>다른 이름으로 저장</a> + _revoke +<a href='#'><i class='ico i5'></i>삭제</a></div>; }else{ console.log(텍스트 길게 누르기); menuTpl = <div class='menu menu-text'><a href='#'> <i class='ico i1'></i>복사</a><a href='#'><i class='ico i2'></i>수집</a> + _revoke +<a href ='#'><나는 class='ico i5'></i>삭제</a></div>; } if(!$(.wc__chatTapMenu).length){ $(.wc__chatMsg-panel).append(menuNode.html(menuTpl) ); 자동 위치(); $(.wc__chatTapMenu).hide().html(menuTpl).fadeIn(250); autoPos() } function autoPos(){ console.log(that.position().top) var _other = that.parents(li ).hasClass(others); $(.wc__chatTapMenu).css({ 위치: 절대, 왼쪽: that.position().left + parseInt(that.css(marginLeft)) + (_other ? 0 : that.outerWidth() - $(.wc__chatTapMenu).outerWidth()), top: that.position().top - $(.wc__chatTapMenu).outerHeight( ) - 8 });표현:
요약위 내용은 편집자가 소개한 HTML5 고급 위챗 채팅 및 위챗 채팅 이모티콘 | 편집기 기능입니다. 궁금한 사항이 있으시면 메시지를 남겨주시면 편집자가 답변해 드리겠습니다. 당신은 시간에. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!