wemark
1.0.0
يتمتع البرنامج المصغر بدعم أصلي لعرض HTML ويمكنه استبدال Wemark بشكل أساسي. هذه المكتبة في حالة سيئة ولا تخضع حاليًا للصيانة، يرجى استخدامها بحذر.
يستخدم لتقديم نص Markdown في البرامج المصغرة.
قبل ولادة البرامج المصغرة، كان عرض Markdown يتطلب عمومًا التحليل إلى HTML، ثم عرض HTML الذي تم تحليله. ومع ذلك، لا توفر البرامج المصغرة وظائف عرض HTML، لذلك، قبل ولادة Wemark، لم تتمكن جميع مكتبات عرض Markdown تقريبًا من العمل بشكل صحيح ضمن البرامج المصغرة.
يمكن لـ wemark عرض محتوى Markdown ضمن برنامج صغير ويدعم معظم ميزات Markdown بما في ذلك الصور والجداول.
rich-text الأصليwemark إلى الدليل الجذر للبرنامج الصغيرwemark في ملف التكوين الخاص بالصفحة {
"usingComponents" : {
"wemark" : " ../wemark/wemark "
}
}<wemark md="{{md}}" link highlight type="wemark"></wemark>يمكن العثور على التعليمات البرمجية التفصيلية في الدليل
demo، وهو مشروع صغير كامل "مقتطف التعليمات البرمجية" يمكنك تشغيلnpm run copyفي الدليل الجذر لـ wemark ثم إضافته إلى "مقتطف التعليمات البرمجية" لأدوات مطور WeChat للحصول على الخبرة. .
وصف المعلمة:
md ، مطلوب، سلسلة Markdown التي يجب عرضها؛link ، إذا تم تحليله، فسيتم عرضه باستخدام مكون navigator البرنامج المصغر، والذي يمكنه الانتقال داخل البرنامج false .highlight على ما إذا كان سيتم تمييز الرمز أم لا، فالوضع الافتراضي هو false ؛type وطريقة العرض، سوف يستخدم wemark بنية بيانات wemark والقالب للعرض، وسيستخدم rich-text مكون rich-text المدمج في البرنامج الصغير للعرض (لا يتم دعم انتقالات الارتباط ومقاطع الفيديو).ملاحظة: سيؤدي تمييز التعليمات البرمجية إلى زيادة عدد العلامات وكمية البيانات التي تم تحليلها، مما قد يتسبب في حدوث مشكلات في أداء العرض. يرجى استخدامه بالشكل المناسب بناءً على الاحتياجات الفعلية.
يدعم mpvue تقديم مكونات WeChat المخصصة. يمكنك إضافة تكوين في ملف .js الخاص بالصفحة، ومرجع wemark ، ثم استخدام wemark مباشرة في جزء template من ملف .vue :
export default {
config : {
// 这儿添加要用的小程序组件
usingComponents : {
wemark : '../../static/wemark/wemark'
}
}
} < wemark :md =" md " link highlight type =" wemark " > </ wemark >ملاحظة: لتمكين mpvue من حزم حزمة
wemarkفي دليلdistعند التعبئة، يوصى بوضعwemarkفي الدليلstaticللكود المصدر.
يحتوي دليل mpvue لهذا المشروع على مشروع عرض تطبيق صغير mpvue كامل. يمكنك تشغيل npm run copy في الدليل الجذر wemark ، ثم فتحه واستخدامه في أدوات مطور WeChat.
قم بإجراء التعديلات التالية في مشروع القلقاس الحالي:
wemark في دليل src ، أي دليل src/wemarkwemark ليتم نسخه أثناء التجميع، وتعديل config/index.js ، وإضافة wemark إلى عنصر إعداد copy ، المرجع هو كما يلي: copy : {
patterns : [
{
from : 'src/wemark' ,
to : 'dist/wemark' ,
} ,
] ,
options : {
}
} ,remarkable.js عند التجميع، واستمر في تعديل config/index.js . weapp: {
compile : {
exclude : [
'src/wemark/remarkable.js' ,
]
} ,
...
}wemark واستخدامه في الصفحة، مثل src/pages/index/index.js : config = {
navigationBarTitleText : '首页' ,
usingComponents : {
wemark : '../../wemark/wemark'
}
}
state = {
md : '# headingnnText'
}
//...
render ( ) {
return (
< View className = 'index' >
< wemark md = { this . state . md } link highlight type = 'wemark' />
</ View >
)
}global.d.ts (مشاريع الكتابة المطبوعة فقط) declare namespace JSX {
interface IntrinsicElements {
wemark : any
}
} يحتوي دليل taro لهذا المشروع على مشروع توضيحي كامل لبرنامج القلقاس. يمكنك تشغيل npm run copy في الدليل الجذر wemark ، ثم فتحه واستخدامه في أدوات مطور WeChat.
شكر خاص لـSongkeys لمتابعة استخدام القلقاس طوال العملية، راجع رقم 36 للحصول على التفاصيل.
npm install
npm test معهد ماساتشوستس للتكنولوجيا
إذا كنت تستخدم wemark أيضًا، فيرجى إرسال بيان علاقات عامة لإضافة برنامجك الصغير إلى القائمة.
rich-text باستخدام مكونات النص المنسق للبرنامج الصغيرvideo[poster] لإضافة صورة غلاف الفيديو رقم 15 بواسطة @kilik52widthFix ولم يعد يحسب الارتفاع #11 #12 ديناميكيًا~~deleted~~ )
