في الأيام القليلة الماضية، استخدمت H5 لتطوير واجهة أمامية للدردشة تشبه WeChat، وخاصة أن المحرر السفلي لـ WeChat تم تطويره باستخدام HTML5، على الرغم من أن الوظائف والتأثيرات ليست شاملة مثل WeChat ، لا يزال بإمكانك إرسال الرسائل والرموز التعبيرية والرسائل المرسلة تلقائيًا إلى الأسفل، بالإضافة إلى ذلك، يمكنك الحصول على مطالبات مختلفة لمعالجة النقر بزر الماوس الأيمن للرسائل والصور ومقاطع الفيديو، بالإضافة إلى المكافأة واحتلال الشاشة. وغيرها من العمليات.
مقتطف كود HTML:
<!--مكافأة البدء--><div class=js_dialog id=J_Dialog_dashang style=display: none;> <!--<div class=weui-mask></div>--> <div class=weui- حوار > <i class=weui-xclusive></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 flexboxselected 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; color: #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 editor.focus(); setTimeout(function(){ var النطاق والعقدة if(document.selection && document.selection.createRange){ document.selection.createRange().pasteHTML(img); .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); sel.removeAllRanges(); sel.addRange(range); document.execCommand(delete }});//...يحتوي محرر التنسيق على علامات editor.addEventListener(focus, function(evt) {arounds()} , صحيح)؛editor.addEventListener(input, function(evt) {arounds();}, false);functionarounds() { setTimeout(function () { //chrome var sel = window.getSelection(); varnchorNode = sel.anchorNode; if (!anchorNode) return; if (sel.anchorNode === editor || (sel.anchorNode.nodeType === 3 && sel. مرساةNode.parentNode === محرر)) { var range = sel.getRangeAt(0); document.createElement(p); range.surroundContents(p); range.selectNodeContents(p); { var elems = [].slice.call(editor.children); for (var i = 0, len = elems.length; i < len; i++) { var el = elems[i]; ;}//...قم بالتمرير إلى أسفل وظيفة محتوى الدردشةscrollToBottom(){ $('.ws__chatMsg-panel').animate({scrollTop: $(#J__chatMsgList).height()}, 300);}تأثير العملية:
تلخيصما ورد أعلاه هو واجهة دردشة WeChat المقلدة بتنسيق HTML5 وكود نموذج WeChat Moments الذي قدمه المحرر، وآمل أن يكون مفيدًا لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليك في الوقت المناسب. أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!