لقد قمت بإنشاء نسخة من محطة الهاتف المحمول h5 WeChat من قبل، خلال هذه الفترة الزمنية، قمت بفرز المشاريع السابقة وترقيتها بناءً على الإصدار الأصلي، لذلك لدينا نسخة تقليد عالية من WeChat الحالية من h5 تمت إضافة أشياء جديدة: Wechat ودفتر العناوين والاستكشاف وأنا. تتميز الوحدة بالتبديل بين شاشة اللمس والتمرير لليمين واليسار، وقد قامت صفحة الدردشة بتحسين معاينة الصور المتعددة، وتشغيل الفيديو، وقائمة الضغط لفترة طويلة، وتمت إعادة تحسين المحرر الموجود أسفل الدردشة وتنظيمه (إضافة المزيد من الرموز التعبيرية) ، وتستخدم النافذة المنبثقة 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 class =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 /><input type=file 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> <!-- // قالب المغلف الأحمر.begin --> <div id=J__popupTmpl-Hongbao style=display:none;> <div class=wc__popupTmpl tmpl-hongbao> <i class=wc-x Close > </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=تهانينا على أن تصبح ثريًا و حظا سعيدا></ textarea> </li> <li class=amountTotal>￥<em class=num>0.00</em></li> </ul> </div> </div> <!-- // قالب المظروف الأحمر --></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 isRevoc = that.parents(li).hasClass(me); <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>+ _revoc +<a href='#' ><i class='ico i5'></i>حذف</a></div>; }else if(that.hasClass(video)){ console.log(ضغطة طويلة على الفيديو MenuTpl = <div class='menu Menu-video') ><a href='#'><i class='ico i3'></i>حفظ باسم</a> + _revoc +<a href='#'><i class='ico i5'></i>حذف</a></div>; }else{ console.log(text long press); MenuTpl = <div class='menu Menu-text'><a href='#'> <i class='ico i1'></i>نسخ</a><a href='#'><i class='ico i2'></i>اجمع</a> + _revoc +<a href ='#'><i class='ico i5'></i>حذف</a></div>; } if(!$(.wc__chatTapMenu).length){ $(.wc__chatMsg-panel).append(menuNode.html(menuTpl) ); $(.wc__chatTapMenu).hide().html(menuTpl).fadeIn(250); } 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())، أعلى: that.position().top - $(.wc__chatTapMenu).outerHeight( ) - 8 }});تقديم:
تلخيصما ورد أعلاه هو مربع حوار WeChat التقليد عالي الجودة |. وظيفة المحرر التي قدمها المحرر. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليها لك في الوقت المناسب. أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!