wxapp img loader

wxapp-img-loader

يعد هذا مكونًا أصليًا للتحميل المسبق للصور مناسبًا لبرامج WeChat المصغرة ( إذا كنت تستخدم Taro، فيرجى الانتقال إلى فرع القلقاس ). وقد تم استخدامه في العديد من البرامج المصغرة مثل JD Shopping. خطوات الاستخدام هي كما يلي:

1. انسخ دليل img-loader إلى مشروعك

2. أضف الكود التالي إلى ملف WXML الخاص بالصفحة لتقديم قالب المكون

 < import src =" ../../img-loader/img-loader.wxml " />
< template is =" img-loader " data =" {{ imgLoadList }} " > </ template >

3. قم بإدخال البرامج النصية للمكونات في ملف JS الخاص بالصفحة

 const ImgLoader = require ( '../../img-loader/img-loader.js' )

4. قم بإنشاء كائن ImgLoader وقم بتمريره (كائن الصفحة الحالي) المعلمة الثانية اختيارية وهي طريقة رد الاتصال الافتراضية لإكمال تحميل الصورة.

 this . imgLoader = new ImgLoader ( this )

5. قم باستدعاء طريقة التحميل لمثيل ImgLoader لتحميل الصورة. المعلمة الأولى هي رابط الصورة، والمعلمة الثانية اختيارية وهي طريقة رد الاتصال عند تحميل الصورة.

 this . imgLoader . load ( imgUrlOriginal , ( err , data ) => {
    console . log ( '图片加载完成' , err , data . src , data . width , data . height )
} )

ملاحظة: المعلمة الأولى لطريقة رد الاتصال بعد اكتمال تحميل الصورة هي رسالة الخطأ (خالية إذا كان التحميل ناجحًا)، والمعلمة الثانية هي معلومات الصورة (نوع الكائن، بما في ذلك src والعرض والارتفاع).

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

-eof-