mp html

MP-HTML

مكون نص قوي للتطبيق غني

مقدمة وظيفية

• يدعم الاستخدام في منصات التطبيقات السائدة المتعددة و uni-app
• يدعم العلامات الغنية (بما في ذلك table ، video ، svg ، إلخ)
• يدعم تأثيرات الأحداث الغنية (المعاينة التلقائية للصور ومعالجة الارتباطات وما إلى ذلك)
• إعداد الدعم لخرائط العلامات التجارية (التحميل ، الأخطاء ، المعاينات)
• يدعم الوظائف الغنية مثل القفزة المرساة والضغط الطويل والنسخ
• يدعم معظم كيانات HTML
• المكونات الإضافية الغنية (البحث عن الكلمات الرئيسية ، تحرير المحتوى ، صيغ latex ، إلخ)
• كفاءة عالية ، تحمل خطأ قوي وخفيفة الوزن ( ≈25KB ، 9KB gzipped )

عرض وظيفة مقدمة لمعرفة المزيد

كيفية استخدام

المنصة الأصلية

• طريقة npm

  1. تثبيت حزم المكونات في دليل المشروع

     npm install mp-html

  2. تحقق من使用npm 模块في أداة المطور (إذا لم يكن هناك خيار ، فلن تكون هناك حاجة) وانقر فوق工具- 构建npm

  3. أضف في ملف json الذي يحتاج إلى استخدام الصفحة

     {
       "usingComponents" : {
         "mp-html" : " mp-html "
       }
     }

  4. أضف ملف wxml الذي يحتاج إلى استخدام الصفحة

      < mp-html content =" {{html}} " />

  5. أضف في ملف js الذي يحتاج إلى استخدام الصفحة

      Page ( {
       onLoad ( ) {
         this . setData ( {
           html : '<div>Hello World!</div>'
         } )
       }
     } )

• طريقة رمز المصدر

  1. mp-html حزمة التعليمات البرمجية components dist/platform

  2. أضف في ملف json الذي يحتاج إلى استخدام الصفحة

     {
       "usingComponents" : {
         "mp-html" : " /components/mp-html/index "
       }
     }

  الخطوات التالية هي نفسها كما هو مذكور أعلاه

تحقق من البداية السريعة لمعرفة المزيد

Uni-App

• طريقة رمز المصدر

  1. انسخ المحتوى في dist/uni-app في الرمز المصدر إلى دليل جذر المشروع ويمكن تقديمه مباشرة من خلال سوق المكونات الإضافية.

  2. أضف ملف vue الذي يحتاج إلى استخدام الصفحة

     < template >
       < view >
         < mp-html :content = " html " />
       </ view >
     </ template >
     < script >
       import mpHtml from ' @/components/mp-html/mp-html '
       export default {
         // HBuilderX 2.5.5+ 可以通过 easycom 自动引入
         components : {
           mpHtml
         },
         data () {
           return {
             html : ' <div>Hello World!</div> '
           }
         }
       }
     </ script >

• طريقة npm

  1. تثبيت حزم المكونات في دليل المشروع

     npm install mp-html

  2. أضف ملف vue الذي يحتاج إلى استخدام الصفحة

     < template >
       < view >
         < mp-html :content = " html " />
       </ view >
     </ template >
     < script >
       import mpHtml from ' mp-html/dist/uni-app/components/mp-html/mp-html '
       export default {
         // 不可省略
         components : {
           mpHtml
         },
         data () {
           return {
             html : ' <div>Hello World!</div> '
           }
         }
       }
     </ script >

  عند تقديم المشاريع التي تعمل باستخدام طريقة cli من خلال npm ، تحتاج إلى تكوين transpileDependencies في vue.config.js . لمزيد من التفاصيل ، انظر #330
  static dist/uni-app/static nvue

تحقق من البداية السريعة لمعرفة المزيد

خصائص المكون

ملكية	يكتب	القيمة الافتراضية	يوضح
على غرار الحاوية	خيط		نمط الحاوية (2.1.0+)
محتوى	خيط		سلسلة HTML لتقديمها
نسخ الوصلة	منطقية	حقيقي	ما إذا كنت للسماح بالنسخ التلقائي للروابط الخارجية عند النقر فوق
اِختِصاص	خيط		اسم المجال الرئيسي (لخياطة الارتباط)
خطأ-IMG	خيط		رابط العنصر النائب عند حدوث خطأ في الصورة
الحمل الكسول	منطقية	خطأ شنيع	سواء لتمكين تحميل الصور كسول
التحميل-IMG	خيط		روابط العنصر النائب أثناء تحميل الصورة
توقف مؤقت	منطقية	حقيقي	سواء كنت ستوقف تلقائيًا مقاطع فيديو أخرى عند تشغيل مقطع فيديو
معاينة-IMG	منطقية	حقيقي	ما إذا كنت للسماح بمعاينة الصورة تلقائيًا عند النقر عليها
طاولة التمرير	منطقية	خطأ شنيع	ما إذا كنت تريد إضافة طبقة التمرير إلى كل جدول حتى يتمكن من التمرير أفقيًا بمفردها
يمكن اختياره	منطقية	خطأ شنيع	ما إذا كان لتمكين النص طويل الضغط على النسخ
set-title	منطقية	حقيقي	ما إذا كنت تريد تعيين محتوى علامة العنوان على عنوان الصفحة
Show-IMG-Menu	منطقية	حقيقي	ما إذا كنت للسماح للصورة بالضغط لفترة طويلة لعرض القائمة
على غرار العلامة	هدف		اضبط النمط الافتراضي للعلامة
الاستخدام	منطقية	خطأ شنيع	ما إذا كان لاستخدام روابط المرساة

عرض الخصائص لمعرفة المزيد

أحداث المكون

اسم	توقيت الزناد
حمولة	عندما يتم تحميل شجرة دوم
مستعد	عندما يتم تحميل الصورة
خطأ	عندما يحدث خطأ في تقديم
imgtap	عندما يتم النقر على الصورة
LinkTap	عندما يتم النقر على الرابط

انظر الأحداث لمعرفة المزيد

API

يتم توفير بعض أساليب api على مثيلات المكونات للاتصال

اسم	تأثير
في	الحد من نطاق المرساة يقفز إلى عرض التمرير
Navigateto	قفزة مرساة
getText	احصل على محتوى نص
getRect	احصل على موقع وحجم محتوى النص الغني
setContent	اضبط محتوى نص غني
imglist	احصل على مجموعة من جميع الصور
بوسيميديا	وقفة تشغيل الصوت والفيديو (2.2.2+)
setPlayBackRate	اضبط معدل تشغيل الصوت والفيديو (2.4.0+)

تحقق من واجهة برمجة التطبيقات لمعرفة المزيد

ملحقات البرنامج المساعد

بالإضافة إلى الوظائف الأساسية ، يوفر هذا المكون أيضًا امتدادات غنية ويمكن اختياره حسب الحاجة.

اسم	تأثير
صوتي	مشغل الموسيقى
قابلة للتحرير	تحرير النص الغني
الرموز التعبيرية	تحليل الرموز التعبيرية
تسليط الضوء	تمييز كتلة الكود
تخفيض السعر	عرض تخفيض
يبحث	البحث عن الكلمات الرئيسية
أسلوب	تطابق الأنماط في علامات النمط
TXV-Video	باستخدام الفيديو tencent
IMG-Cache	ذاكرة التخزين المؤقت للصورة بواسطة pentatea
مطاط	عرض صيغة اللاتكس بواسطة @zeng-j
بطاقة	عرض البطاقة بواسطة whooooami

تحقق من البرنامج المساعد لمعرفة المزيد

استخدام الحالات

مثال رسمي	مول سعيد	يا لها من حياة	فحص طريقة الطعام	فايمو	قراءة الأدب الكلاسيكي

مراجعة العلوم	رحلة التكنولوجيا المبرمج	مدونة ديانديان	ملاحظات ممتازة	365 سؤال	الكتب المشتركة في نفس المدينة

حصة مصدر التكنولوجيا	رمزك رائع	حقيقي	Mottoni	العروض التوضيحية	منظمة العفو الدولية والي

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

الترخيص والدعم

• ترخيص مجاني (بما في ذلك الاستخدام التجاري) ، ونسخ أو تعديل ترخيص معهد ماساتشوستس للتكنولوجيا هذا
  من الضروري الخضوع للاختبار الكافي قبل استخدامه في بيئة الإنتاج. أنت لست مسؤولاً عن أي خسائر ناتجة عن bug المكونات (يمكنك تعديل الكود المصدر بنفسك)

• اتصل بنا ومرحبا بكم للانضمام إلى مجموعة الاتصالات QQ :
  المجموعة 1 (كاملة): 699734691
  المجموعة 2 (كاملة): 778239129
  المجموعة 3: 960265313
  

• يدعم
  

تحديث سجل

• v2.5.0 (20240422)

  1. يضيف الحدث U play src وتفاصيل المعلومات الأخرى
  2. U preview-img السمة تدعم الإعداد all لتمكين تفاصيل معاينة الصورة base64
  3. يضيف المكون الإضافي U editable وضعًا بسيطًا (انقر فوق نص لتحريره مباشرة)
  4. يدعم U latex Plug-in تفاصيل صيغة مستوى الكتلة
  5. F إصلاح مشكلة فقدان الخلفية في بعض حالات الجدول.
  6. F إصلاح بعض المشكلات التي لا يمكن عرض svg بالتفصيل
  7. F إصلاح المشكلة التي لا يمكن التعرف على النمط في حزمة uni-app h5 وينتهي app .
  8. F إصلاح مشكلة العرض غير الصحيحة في المكون الإضافي latex في بعض الحالات.
  9. F تم إصلاح المشكلة التي لا يمكن حذف جدول البرنامج المساعد editable
  10. F أصلح مشكلة Plugt- editable uni-app Package vue3 h5 النقر فوق خطأ الصورة
  11. F أصلح المشكلة حيث editable حزمة uni-app Plugg

• v2.4.3 (20240121)

  1. تفاصيل المكون الإضافي لبطاقة A بواسطة whooooami
  2. F تم إصلاح المشكلة التي لا يجوز عرض foreignobject في تفاصيل svg
  3. F إصلاح مشكلة العرض غير الصحيح في حالة الخلايا المدمجة في جزء الجدول من التفاصيل
  4. F أصلح مشكلة object-fit في علامات img لـ IMPID
  5. F أصلح المشكلة التي تفيد بأن صيغة المكونات الإضافية latex ستلف تفاصيل الخط
  6. F إصلاح المشكلة التي لا يمكن تحريرها عند النقر فوق audio عند editable حزمة uni-app وملابس audio . تفاصيل من قبل whooooami
  7. F قد أصلحت المشكلة التي حددها Appay Applet العرض والارتفاع الذي قد يعرض بشكل غير طبيعي.
  8. F أصلح المشكلة التي ستقوم uni-app WeChat Applet بإبلاغها عن خطأ في replace of undefined في بعض الحالات.
  9. F أصلح المشكلة التي لا يعرضها برنامج uni-app package Kuaishou Mini مفصلاً

  يمكن رؤية دليل التحديث من طريقة الترقية 1.x

تحقق من سجل التحديث لمعرفة المزيد