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 ของมินิโปรแกรม ซึ่งสามารถข้ามภายในมินิโปรแกรมได้ ค่าดีฟอลต์คือ falsehighlight ไม่ว่าจะเน้นรหัสค่าเริ่มต้นคือ 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 (โครงการ typescript เท่านั้น) declare namespace JSX {
interface IntrinsicElements {
wemark : any
}
} ไดเรกทอรี taro ของโครงการนี้มีโครงการสาธิตแอปเพล็ตเผือกที่สมบูรณ์ คุณสามารถเรียกใช้ npm run copy ในไดเรกทอรีราก wemark จากนั้นเปิดและใช้ในเครื่องมือสำหรับนักพัฒนา WeChat
ขอขอบคุณเป็นพิเศษสำหรับ @Songkeys สำหรับการติดตามการใช้เผือกตลอดกระบวนการ ดูรายละเอียดใน #36
npm install
npm test เอ็มไอที
หากคุณใช้ wemark ด้วย โปรดส่ง PR เพื่อเพิ่มมินิโปรแกรมของคุณเองลงในรายการ
rich-text โดยใช้คอมโพเนนต์ Rich Text ของโปรแกรมขนาดเล็กvideo[poster] เพื่อเพิ่มภาพหน้าปกวิดีโอ #15 โดย @kilik52widthFix และจะไม่คำนวณความสูง #11 #12 แบบไดนามิกอีกต่อไป~~deleted~~ )
