ในช่วงไม่กี่วันที่ผ่านมา ฉันใช้ 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- กล่องโต้ตอบ > <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:; dial__btn_primary style=พื้นหลัง: #ff4400; border-radius: 4px; color: #fff;>การชำระเงิน<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(คลิก, ฟังก์ชั่น( e ){ if($(this).hasClass(face)){ //Image var img = $(this)[0].cloneNode(true); editor.focus(); setTimeout(ฟังก์ชั่น(){ var ช่วง, โหนด; 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(เท็จ); window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } }, 16); } อื่น ๆ if($(this).hasClass(del)){ // ลบ editor.focus(); = window.getSelection().getRangeAt(0); range.collapse(false); var = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); document.execCommand(delete); }});//...ตัวแก้ไขการจัดรูปแบบประกอบด้วยแท็ก editor.addEventListener(โฟกัส, ฟังก์ชัน(evt) { ล้อมรอบ()} , จริง); editor.addEventListener (อินพุต, ฟังก์ชัน (evt) { ล้อมรอบ ();}, เท็จ); ฟังก์ชันล้อมรอบ () { setTimeout (ฟังก์ชัน () { //chrome var sel = window.getSelection(); var anchorNode = sel.anchorNode; if (!anchorNode) กลับ; if (sel.anchorNode === ตัวแก้ไข || (sel.anchorNode.nodeType === 3 && sel. anchorNode.parentNode === ตัวแก้ไข)) { var range = sel.getRangeAt (0); var p = document.createElement(p); range.selectNodeContents(p); range.insertNode(document.createElement(br)); //chrome sel.collapse(p, 0); { var elems = [].slice.call(editor.children); สำหรับ (var i = 0, len = elems.length; i < len; i++) { var el = elems[i]; if (el.tagName.toLowerCase() == br) { editor.removeChild(el); } elems.length = 0; } }, 0) ;}//...เลื่อนไปที่ด้านล่างของฟังก์ชันเนื้อหาแชท scrollToBottom(){ $('.ws__chatMsg-panel').animate({scrollTop: $(#J__chatMsgList).height()}, 300);}ผลการดำเนินงาน:
สรุปข้างต้นคืออินเทอร์เฟซการแชท WeChat เลียนแบบ HTML5 และโค้ดตัวอย่าง WeChat Moments ที่แนะนำโดยผู้แก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันแล้วโปรแกรมแก้ไขจะตอบกลับคุณทันเวลา ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!