هنا هو "فئة من برنامج مكافحة تعليمي صغير المورد الكهرباء" المواد الثلاث الأولى.

على واحدة والإجراءات المعروفة (مايكرو الإشارة zxcx0101) ألعوبة تشي الصغير فان الطفل الحب هو تجريبي، يصف قائمة السلع التنفيذ.

اليوم، ونحن سوف كاملة لأول مرة على وظيفة "تحميل المزيد من القائمة"، ومرة أخرى إلى نقاش كيف صفحة تفاصيل المنتج، وتحويلها وصف البضائع إلى بيانات النص الغنية من البيانات JSON، والتنضيد .

"مشاهدة المزيد" ميزة

نحن ننظر أولا في الاداءات:

1. دعوة نخب نصائح

من خلال الدعوة wx.showToast، مما يشير إلى الرقم المذكور أعلاه لا يمكن أن يتحقق زارة نخب (تحميل).

نخب قناة الصغرى المقدمة التجميع مع التحميل ونجاح دولتين (الإصدار الأقدم من المكون وقد تم التخلي عن تحميل).

/ *** *** list.js / wx.showToast ({عنوان: "النجاح"، // النص موجه رسالة رمز: 'النجاح'، // رمز، ويدعم فقط "النجاح"، "تحميل" المدة: 2000 // الوقت الفوري تأخير (في الألف)، وتصل إلى 10000 النجاح: وظيفة {}، // استدعاء faile وظيفة النجاح رد: وظيفة {}، تفشل // // رد استدعاء دالة لاستدعاء نهاية الدالة واجهة رد الاتصال (الدعوة نجاح، وسيتم تنفيذ الفشل) كاملة: وظيفة {}})

لاحظ أنه عند تنفيذ showToast، الصفحة بأكملها ليست قابلة للنقر. لذلك، بغض النظر عن المستخدم تحريك بطريق الخطأ عدة مرات "شاهد المزيد" المشكلة.

استدعاء wx.hideToast لاخفاء نخب مربع الفوري.

الآن، دعونا نفكر في مشكلة. عندما يتعلق الأمر مدة أقصاها هو 10000 مللي wx.showToast أعلاه، عندما وسائل طلب أكثر من مرة و10 ثانية، إذا تم إرجاع أية بيانات، تحميل مربع موجه سوف تختفي تلقائيا.

هذا يمكن أن يسبب مشاكل:

• "شاهد المزيد" الزر لتغيير العودة إلى الحالة يمكن النقر عليها، قد يسبب إعادة الموافقة علي الطلب.
• يظهر الموجه لتحميل الفارق الزمني بين اختفاء وتحميل البيانات بنجاح.

كيفية حل هذه المشكلة؟ هو في الواقع بسيط جدا.

نعطي إعدادات التحميل 10000 ميلي ثانية الكمون، أكثر من 10،000 ميلي ثانية، حتى لو كان الطلب ناجحا، عدم حفظ أية بيانات.

وفي الوقت نفسه، فإن النص الزر مرة أخرى إلى "شاهد المزيد" يمكن أن يكون.

نحن تهيئة لtimeoutFlag الكائن باستخدام الموقت = setTimeout وضع 9800 مللي تأخير. بعد 9800 مللي ثانية، لتعيين مفتاح كائن مؤقت {isTimeout: صحيح}، في كل مرة سوف يكون هناك طلب لبدء معرف الموقت.

إذا القيم نجح الطلب timeoutFlag.timer {isTimeout: صحيح}، ومعالجة البيانات ليست طلب ناجحة.

لماذا وضع 9800 ميلي ثانية 10000 ميلي ثانية بدلا من ذلك؟

وذلك لأن setTimeout توقيت ليست دقيقة، نعطي مسبقا 200 مللي ثانية لمنع رمز الخطأ.

نحن _setTimeoutFlag لتغليف طريقة:

/***list.js***/_setTimeoutFlag: وظيفة {فار = أن ذلك؛ فار الموقت = فارغة؛ الموقت = setTimeout (وظيفة {that.setData ({tipText: 'قراءة'})؛ timeoutFlag.timer = {isTimeout: صحيح}؛}، 9800)؛ timeoutFlag.timer = {isTimeout: كاذبة}؛ عودة الموقت؛}

2. البناء والوظيفة لتحقيق loadMore

نحن بحاجة إلى وظيفة loadMore، للقيام ترحيل البيانات الاستعلام.

عموما، يتم التحكم بها توفير معلمتين الاستعلام على التوالي، والحد من عدد من الحانات في كل طلبات طلب البدء في عدد تعويض (أي بيانات تم الحصول عليها من القليلة الأولى).

لاحتياجاتنا، على سبيل المثال:

• الحصول على أول 20: الحد = 20 & تعويض = 0
• والثاني ومن ثم إضافة 10: الحد = 100 & تعويض = 20
• ثالثا ثم إضافة 10: الحد = 10 & تعويض = 30

وبطبيعة الحال، وفقا لعلامات التبويب المختلفة لتحقيق، والحد من والإزاحة اسمه ليست هي نفسها، طالما أننا يمكن أن نفهم هذا المبدأ.

وفقا لمنطق أعلاه، عندما ينقر المستخدم على "شاهد المزيد" زر، ينبغي إيلاء تطبيقات في حالات مختلفة الرد المناسب:

• التغييرات نص الزر إلى "تحميل ..." صفحة للملوثات العضوية الثابتة "تحميل ..." مربع الرسالة التحميل، تعيين + 10 تعويض والشروع طلب
• عندما يتم تحميل البيانات الجديدة، النص مرة أخرى على زر "شاهد المزيد" لإغلاق مربع موجه تحميل، لتوفير التيار تعويض
• عندما يتم تحميل أية بيانات جديد، يتغير نص الزر إلى "لا أصدقاء أكثر،" مربع موجه مغلق تحميل
• إذا فشل الطلب، يتغير نص الزر إلى "رؤية المزيد" لإغلاق مربع التحميل الفوري

زر الإعدادات في list.wxml أولا، وانقر فوق ربط loadMore الحدث،.

/***list.wxml***/

وفقا لعملية المذكورة أعلاه، علينا أن ننظر في حزمة وطريقة loadMore _getProductList.

/***list.js***/loadMore: وظيفة {فار = أن ذلك؛ this.setData ({tipText: "تحميل ... '})؛ wx.showToast ({عنوان:" تحميل ... '، رمز:' تحميل '، والمدة: 10000})؛ فار الموقت = that._setTimeoutFlag، this._getMoreProductList (مؤقت)؛}، _ getMoreProductList: وظيفة (مؤقت) {فار = أن ذلك؛ wx.request ({رابط: CONFIG .API_URL.PRODUCT_LIST + this.data.orderBy، الأسلوب: 'GET'، البيانات: {الحد: 10، ويقابل: this.data.offset + 10، shelf__id: this.data.shelfId، img_size: 'صغيرة'}، والنجاح : وظيفة (بيانات) {إذا (timeoutFlag.timer.isTimeout!) {إذا (data.data.objects.length >  1) {فار كائنات = that.data.productList .concat (data.data.objects)؛ that.setData ({productList: التحف، ويقابل: that.data.offset + 10، tipText: 'قراءة'})؛ } آخر {that.setData ({tipText: "ليس لديه أصدقاء أكثر '})؛}} clearTimeout (مؤقت)؛ wx.hideToast؛}، تفشل: وظيفة {that.setData ({tipText:' قراءة '}) ، wx.hideToast؛}})؛}

وحتى الآن، حققنا تنمية كاملة من صفحة قائمة المنتجات، ثم أدخل صفحة تفاصيل المنتج.

تفاصيل المنتج التنضيد

في صفحة تفاصيل المنتج، ونحن نتحدث أساسا عن تحقيق التنضيد.

تفاصيل المنتج الحالي وصف الرسم، وعادة من خلال خلفية محرر النصوص الغنية لإنشاء تخطيط من البيانات المحفوظة في شكل كود HTML، ثم تقدم بها مباشرة على الصفحة.

ولكن بالنسبة لبرامج صغيرة، هذه البيانات شكل HTML لا يمكن استخدامها مباشرة، بسبب برنامج صغير لا يمكن تحليل رمز HTML .

في هذه المرحلة، ونحن بحاجة لمعالجة البيانات عن طريق محرر النصوص الغنية لخلق، وتحويله إلى صيغ البيانات JSON لاستخدامها في برنامج صغير.

لدينا اثنين من الأفكار لحل هذه المشكلة:

تحليل البيانات من شكل نهاية أتش تي أم أل الأمامي، مع علامات HTML العادية المباراة، ثم تحويلها إلى بيانات JSON.

سلمت إلى الجهة الخلفية للتصميم، في حين اضاف API مخصص، تحليله عوائد البيانات JSON.

نحن نستخدم الخيار الثاني، والوصول إلى تنسيق البيانات JSON كما يلي:

{ "الوصف": }

نحن البيانات التي يحصل عليها فقط WX: للتقديم، يتم تحديد جزء من النص أو الصورة لتحديد نوع المقابلة عند التقديم.

/***detail.wxml***/

انظروا الاداءات:

إذا ما أمعنا النظر، يمكننا أن نرى أن كل عرض الصورة والارتفاع وبدرجات متفاوتة خضعوا للمحاصيل والتمدد أو ضغط.

ويرجع ذلك إلى مكونات الصورة الافتراضية واسعة يعزى ذلك إلى ارتفاع، قلنا في الفترة الأولى، وإيلاء اهتمام خاص لصغيرة النمط الافتراضي المدمج في مكونات البرنامج، فإنها من المحتمل أن تسبب مجموعة متنوعة من المشاكل.

برنامج علم الانتباه (الصغرى إشارة zxcx0101)، ردا على "المورد الكهرباء" الحصول على مورد للكهرباء فترة الطبقة صغير لمواد البرنامج التعليمي القتال.

ونتوقع أن الصورة يمكن عرضها في نسبة الجانب الأصلي، وعرض كل صورة يمكن أن تعقد على المنطقة المحتوى بالكامل. كيف يجب التعامل مع هذا؟

هنا لا بد من مكونات صورة الحدث استخدام التحميل، وذلك باستخدام الحدث الخاصية bindload ملزمة في مكون الصورة.

يمكننا استخدام event.detail = {ذروة: 'ارتفاع صورة بكسل "، العرض:" صورة العرض بكسل'} من عرض صورة والارتفاع أبعاد تعديل.

نحدد وظيفة imageLoad كما معالج الحدث تحميل مكونات الصورة، مع مؤشر البيانات إنقاذ WX الحالية: قيمة المؤشر للصورة الحالية حيث بلغت قيمة المؤشر.

عنصر صورة detail.wxml إعادة كتابة على النحو التالي:

وظيفة detail.js imageLoad محددة على النحو التالي:

بيانات: {الصور: {}}، imageLoad: وظيفة (ه) {فار realityWidth = e.detail.width؛ // الحصول على الصورة الفعلية عرض فار realityHeight = e.detail.height؛ // // الحصول على ارتفاع الفعلية الصورة صورة اكتساب الجانب النسبة الفعلية فار نسبة = realityWidth / realityHeight؛ // تعيين عرض تقديم صورة، 750rpx - (2 * 40rpx) = 670rpx؛ // الحشو حول العنصر الأصل هو 40rpx فار viewWidth = 670؛ // راتا جعل من ارتفاع الصورة فار viewHeight = 670 / نسبة؛ فار الصور = this.data.images، // قيمة مؤشر بيانات الصورة كهدف // الصور الرئيسية المقدمة لتخزين عرض محسوبة وارتفاع الصور الصورة  = {العرض: viewWidth، الطول: viewHeight}؛ this.setData ({الصور: صور})؛}

عند هذه النقطة، يمكننا الحصول على الصور في عنصر صورة .width والصور .height، ووضع خط النمط العرض إلى كل عالية مجموعة الصور.

عنصر صورة detail.wxml إعادة كتابة على النحو التالي:

أنجزت الآثار FIG على النحو التالي:

في هذا الملخص القضية

هذا العدد من "الكهربائية في درجة رجال الأعمال القتالية الصغير التعليمي" هنا.

الكاتب يريد التواصل تطوير الانترنت الصغير، والتركيز الجزئي إشارة zxcx0101، انقر على شريط القوائم القول "بالاضافة الى التبادل السكاني" يمكن أن يكون.

وأخيرا، مع العلم البرنامج (zxcx0101 مايكرو الإشارة) لتلخيص محور هذه المشكلة:

نخب نصيحة:

• نخب wx.showToast النصائح التي يمكنك استخدامها للاتصال، wx.hideToast استخدام المخفية.
• يمكن للمطورين تخصيص نخب لإظهار الوقت، تظهر كوبيوريتنغ وهلم جرا.
• نخب أطول وقت نحن لا يمكن أن تظهر أكثر من 10،000 ميلي ثانية، تحتاج المطورين للقيام تجهيز الوقت بدل الضائع.

التنضيد:

• إذا كان الملقم البيانات هي البيانات HTML ليتم تحويلها إلى JSON، وتطبيقات يمكن حلها.
• مباشرة إلى الصورة المطبعية، وعرض الصورة ومشاكل ارتفاع. تحتاج للمطورين لمعالجة قضية عرض وارتفاع الصورة.

في الدفعة المقبلة، فإننا سوف تجمع مكونات navTab وtabBar، إلى الحديث عن تنفيذ مكونات محددة ذاتيا، يرجى الاستمرار في التركيز برنامجها.

المادة الأصلية التي تنتجها الإجراءات المعروفة، والتركيز الجزئي إشارة zxcx0101 "المورد الكهرباء" من هذه المادة للحصول على المورد الكهرباء الصغير دليل عملي.

المخاوف سريعة المعروف إجراءات

برنامج التوعية (مايكرو الإشارة zxcx0101) الأطفال فان الحب تركيز الجمهور على عدد قليل من البرامج البيئية. ونحن نقدم معلومات أشمل جديدة الصغير (الأخبار والآراء والمبادئ التوجيهية والأنشطة) والخدمات، حيث يمكنك معرفة كل شيء عن الصغير.