wxmlify

Wxmlify

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

ملاحظة: الإصدار الجديد من برنامج WeChat mini يوفر بالفعل مكون النص المنسق <rich-text> ، ولكن توافقه غير مضمون في الوقت الحالي، وقد لا تزال بحاجة إلى أدوات تحليل تابعة لجهات خارجية.

ميزة

• صغير وخفيف الوزن - ملفان فقط، إجمالي حجمهما 14 كيلو بايت
• لا تتم إضافة أي أنماط زائدة، وهو أمر مناسب لتخصيص أنماط المستندات
• يمكنك الاحتفاظ بشكل انتقائي بنمط المستند الأصلي، مثل تحديد الاحتفاظ font-size font-weight وما إلى ذلك للمستند الأصلي.
• التحليل أسرع
• سهل الاستخدام
• دعم الصور ومقاطع الفيديو والجداول

عيب

• يفضل تحليل HTML الذي تم إنشاؤه بواسطة محرر النص المنسق ، وهو غير مناسب لجميع السيناريوهات. لأن HTML الذي تم إنشاؤه بواسطة محرر النص المنسق يتوافق مع مواصفات معينة.

الاستخدام (تجريبي)

1. انسخ المجلد wxmlify إلى مشروع weapp الخاص بك.
2. أدخله في ملف js الخاص بالصفحة حيث تحتاج إلى عرض نص منسق وإنشاء مثيل جديد، على سبيل المثال:

 // pages/index/index.js

var Wxmlify = require ( '../../wxmlify/wxmlify.js' )

Page ( {
  onLoad ( ) {
    // 以任何方式获得要解析的Html代码
    var html = getHTMLStringSomehow ( ) 

    // new 一个 wxmlify 实例就好了
    var wxmlify = new Wxmlify ( html , this , { } )
  }
} )

3. أدخل القالب في الصفحة المقابلة wxml، على سبيل المثال:

 <!-- pages/index/index.wxml  -->
< import src =" ../../wxmlify/wxmlify.wxml " />

< template is =" wxmlify " data =" {{nodes: wxmlified}} " > </ template > 

---

عرض الوثيقة

منشئ

 new Wxmlify ( html , page [ , options ] )

• المعلمة:
  • html: string - سلسلة كود html المراد تحليلها
  • الصفحة: مثيل صفحة البرنامج المصغر - أي مؤشر this في جميع طرق الصفحة
  • خيارات: خيارات
• قيمة الإرجاع: مثيل wxmlify المستخدم لاستدعاء الطريقة

خيارات

dataKey

• مفتاح البيانات التي تم تحليلها في بيانات الصفحة
• النوع: string
• الافتراضي: 'wxmlified'
• على سبيل المثال:

 new Wxmlify ( html , this , {
  dataKey : 'myRichText'
} )

في المقابل في wxml:

 < template is =" wxmlify " data =" {{nodes: myRichText}} " > </ template > 

saveStyles

• اسم نمط CSS للحفاظ عليه (تنسيق حالة الجمل)
• يكتب:
  • السلسلة 'all' تعني الاحتفاظ بجميع الأنماط
  • القيم السالبة، مثل false و 0 و null تعني إزالة كافة الأنماط المضمنة
  • مصفوفة، تحدد الاحتفاظ بأنماط معينة، مثل ['fontSize', 'fontWeight', 'background']
• الافتراضي: 'all' (اترك جميع الأنماط بشكل افتراضي)

DisableImagePreivew

• تعطيل معاينة النقر على الصورة
• النوع: boolean
• الافتراضي: false

onImageTap

• وظيفة معالجة النقر على الصورة
• النوع: function
• الافتراضي: function() {}

طريقة

wxmlify.getFullNodes()

• تُرجع مصفوفة Javascript، وهي بنية بيانات json بعد تحليل HTML

wxmlify.getHTML()

• إرجاع HTML الذي تم تمريره

wxmlify.getImages()

• إرجاع مصفوفة تحتوي على عناوين URL لجميع الصور

نمط مخصص

. wxmlified-element {
  /* 修改段落块的样式 */
}

. wxmlified-element . h1 {
  /* 修改原<h1>标签块的样式，其它块级标签同理 */
}

. wxmlified-image {
  /* 修改图片的样式 */
}

. wxmlified-text {
  /* 修改文字节点的样式 */
}

. wxmlified-table . table {
  /* table 的样式 */
  border : 1 rpx solid # acacac ;
}

. wxmlified-table . tr {
  /* tr 的样式 */
  border-bottom : 1 rpx solid # acacac ;
}

. wxmlified-table . tr : last-child {
  border-bottom : 0 ;
}

. wxmlified-table . th , . wxmlified-table . td {
  /* th,td 的样式 */
  border-right : 1 rpx solid # acacac ;
  line-height : 2 ;
}

. wxmlified-table . th : last-child , . wxmlified-table . td : last-child {
  border-right : none;
}

. wxmlified-table . th {
  font-weight : bold;
}

---

أصبحت هذه الأداة الصغيرة ممكنة بفضل محلل HTML-to-JSON مفتوح المصدر الذي صممه كريس أندريجوسكي.