الأسئلة الشائعة

1. تعديل تكوين easycom لا يسري

الأعراض: أضفت قاعدة easycom إلى pages.json أو عدّلتها، لكن <lh-xxx> في القالب لا يزال يُبلغ عن «المكوّن غير مُسجَّل».

السبب: تراعي uni-app أداء الترجمة، لذا تعديل easycom في pages.json لا يشترط إعادة التحويل.

الحل: بعد تعديل القاعدة، غيّر محتوى أي صفحة (احفظها بعد إضافة مسافة كافٍ) لإعادة التحويل؛ أو أعد تشغيل خادوم التطوير مباشرة.

2. تعذّر الحصول على ref المكوّن / القياس يُرجع قيمًا فارغة

الأعراض: تستدعي طرق ref المكوّن داخل onLoad، أو تستدعي قدرات getLhRect / useLhPopper، فتحصل على undefined أو مستطيل فارغ.

السبب: في مرحلة onLoad لم يكتمل إنشاء المكوّنات بعد، فمثيلات المكوّنات الفرعية وعقدها غير جاهزة.

الحل: ضع كل استدعاءات ref وقياسات العقد بعد onReady (onReady يقابل اكتمال أول عملية عرض للصفحة):

import { onReady } from '@dcloudio/uni-app'

onReady(() => {
  // هنا فقط يمكن الوصول بأمان إلى ref المكوّنات الفرعية / قياس العقد
})

3. الخدمات الحتمية (message / loading) لا تستجيب بعد الاستدعاء

الأعراض: استدعيت useLhMessage().success(...)، وظهر تحذير console.error في الطرفية، لكن الرسالة لم تظهر في الصفحة.

السبب: لا يستطيع البرنامج المصغر إنشاء DOM عبر JS، فتعتمد الخدمات الحتمية نمط نقطة التركيب — يجب وضع <lh-message /> / <lh-loading /> في الصفحة أولًا، والاستدعاء لا يضيف سوى سجلّ إلى مخزن مفرد (singleton) يتولّى مكوّن نقطة التركيب عرضه.

الحل: ضع نقطة التركيب في الصفحات التي تحتاجها (أو في مكوّن جذر دائم):

<lh-config-provider>
  <view><!-- المحتوى --></view>
  <lh-message />
  <lh-loading />
</lh-config-provider>

التحذير تصميم مقصود — عدم التخفيض الصابت، وتجنّب الخطأ الخفي المتمثّل في «استدعاء يبدو ناجحًا لكن دون أي استجابة».

4. الأنماط لا تُطبَّق / الأصناف موجودة لكن الأنماط مفقودة

ترتيب الفحص:

1. تأكد من إدراج ناتجَي CSS: @lh-ui/uniapp/src/theme/index.css و@lh-ui/uniapp/src/icon/iconfont.css. وعند غياب متغيّرات السمة، ترجع كل قيم var(--lh-*) إلى افتراضاتها (تختل الألوان وزوايا الاستدارة كافة).
2. تأكد من عدم طمس styleIsolation الخاص بالمكوّن. يأتي SFC المكوّن بـ styleIsolation: 'shared' + addGlobalClass: true؛ فإن فرض إعداد المشروع عزلًا أشد، فلن ترى أنماط المكوّن وأنماط الصفحة بعضها.
3. مرّر الأنماط المخصصة عبر prop custom-class / custom-style، ولا تكتب أسماء أصناف BEM الداخلية للمكوّن مباشرةً في الصفحة (الأصناف الداخلية مثل .lh-button__text ليست جزءًا من API العام).

5. ما سبب وجود base64 الخاص بـ iconfont داخل حزمة البرنامج المصغر

إنه خط الأيقونات (بضع عشرات من الكيلوبايت تقريبًا)، المضمّن في CSS ويُنشر مع الحزمة. ولا يدعم البرنامج المصغر وسم <svg>، فلا بدّ لل أيقونات من حل الخطوط؛ وسبب تضمين base64 هو أن @font-face في البرنامج المصغر لا يسمح بالإشارة إلى ملفات الخطوط المحلية (فتقبل url(...) في wxss عناوين شبكية أو بتنسيق base64 فقط). وهذا هو النهج السائد لحلول الأيقونات في uni-app.

6. طبقة الحوار في موضعها الصحيح في H5، لكنها منحرفة في البرنامج المصغر

يعتمد تموضع طبقة الحوار على تسلسل «القياس بإطارين → التموضع → العرض» (عرض شفاف أولًا لقياس الأبعاد، ثم التموضع، وأخيرًا العرض لمنع الوميض). فإذا كانت منحرفة، فالمشكلة عادةً في توقيت الاستدعاء: تأكد أن تشغيل التموضع يحدث بعد onReady، وأن عقدة trigger قد اكتمل تخطيطها. كما يُرجى ملاحظة أن getLhRect في البرنامج المصغر غير متزامن، فلا تفترض الحصول على النتيجة بشكل متزامن.

7. الوضع الداكن لا يعمل

تُرفق متغيّرات الوضع الداكن بـ page.dark, .dark، ويُبدَّل بإضافة فئة dark إلى العقدة المغلّفة بواسطة ConfigProvider. تأكد أن <lh-config-provider :theme="dark"> يغلّف فعليًا نطاق المحتوى الذي تريد له الوضع الداكن (فعلى خلاف الويب، حيث تُرفق المتغيّرات على document.documentElement بشكل عام، يتبع النطاق في هذا المسجل العقدة المغلّفة).