mp html

MP-HTML

ส่วนประกอบข้อความที่อุดมไปด้วยแอปเพล็ตที่ทรงพลัง

การแนะนำการทำงาน

• รองรับการใช้งานในแพลตฟอร์มแอปเพล็ตกระแสหลักและ uni-app
• รองรับแท็กที่หลากหลาย (รวมถึง table video svg ฯลฯ )
• รองรับเอฟเฟกต์เหตุการณ์ที่หลากหลาย (ตัวอย่างภาพอัตโนมัติของรูปภาพการประมวลผลลิงค์ ฯลฯ )
• สนับสนุนการตั้งค่าแผนที่ placeholder (การโหลดข้อผิดพลาดตัวอย่าง)
• รองรับฟังก์ชั่นที่หลากหลายเช่นการกระโดดจุดยึด, กดยาวและคัดลอก
• สนับสนุนเอนทิ ตี HTML ส่วนใหญ่
• Rich Plug-ins (การค้นหาคำหลัก, การแก้ไขเนื้อหา, สูตร 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. คัดลอกแพ็คเกจรหัส ( dist/platform ) ของแพลตฟอร์มที่เกี่ยวข้องในซอร์สโค้ดไปยังไดเรกทอรี components และเปลี่ยนชื่อเป็น mp-html

  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
  หากใช้ใน nvue ให้คัดลอกเนื้อหาในไดเรกทอรี dist/uni-app/static ไปยังไดเรกทอรี static ของโครงการมิฉะนั้นจะไม่ทำงาน

ตรวจสอบการเริ่มต้นอย่างรวดเร็วเพื่อเรียนรู้เพิ่มเติม

คุณสมบัติส่วนประกอบ

คุณสมบัติ	พิมพ์	ค่าเริ่มต้น	อธิบาย
สไตล์คอนเทนเนอร์	สาย		สไตล์คอนเทนเนอร์ (2.1.0+)
เนื้อหา	สาย		สตริง HTML สำหรับการแสดงผล
การคัดลอกลิงค์	บูลีน	จริง	ไม่ว่าจะอนุญาตให้คัดลอกลิงก์ภายนอกอัตโนมัติเมื่อคลิก
โดเมน	สาย		ชื่อโดเมนหลัก (สำหรับการเย็บลิงก์)
ข้อผิดพลาด-IMG	สาย		ลิงค์ตัวยึดตำแหน่งเมื่อเกิดข้อผิดพลาดของภาพ
ขี้เกียจ	บูลีน	เท็จ	ไม่ว่าจะเปิดใช้งานการโหลดรูปภาพขี้เกียจ
กำลังโหลด	สาย		ลิงก์ตัวยึดในระหว่างการโหลดภาพ
การหยุดชั่วคราว	บูลีน	จริง	ไม่ว่าจะหยุดวิดีโออื่น ๆ โดยอัตโนมัติเมื่อเล่นวิดีโอ
ดูตัวอย่าง-IMG	บูลีน	จริง	ไม่ว่าจะอนุญาตให้ภาพดูตัวอย่างโดยอัตโนมัติเมื่อคลิก
โต๊ะเลื่อน	บูลีน	เท็จ	ไม่ว่าจะเพิ่มเลเยอร์เลื่อนลงในแต่ละตารางเพื่อให้สามารถเลื่อนแนวนอนคนเดียวได้
เลือกได้	บูลีน	เท็จ	ไม่ว่าจะเปิดใช้งานข้อความยาวกดเพื่อคัดลอก
set-title	บูลีน	จริง	ไม่ว่าจะตั้งค่าเนื้อหาของแท็กชื่อเป็นชื่อหน้า
Show-Img-Menu	บูลีน	จริง	ไม่ว่าจะอนุญาตให้กดรูปภาพเป็นเวลานานในการแสดงเมนู
แท็กสไตล์	วัตถุ		ตั้งค่าสไตล์เริ่มต้นของแท็ก
anchor ใช้	บูลีน	เท็จ	ไม่ว่าจะใช้ลิงก์สมอ

ดูคุณสมบัติเพื่อเรียนรู้เพิ่มเติม

เหตุการณ์ส่วนประกอบ

ชื่อ	เวลาทริกเกอร์
โหลด	เมื่อโหลดต้นไม้ DOM
พร้อม	เมื่อโหลดภาพ
ข้อผิดพลาด	เมื่อเกิดข้อผิดพลาดในการแสดงผล
imgtap	เมื่อคลิกรูปภาพ
linktap	เมื่อคลิกลิงก์

ดูกิจกรรมเพื่อเรียนรู้เพิ่มเติม

API

มีวิธี api บางอย่างในอินสแตนซ์ส่วนประกอบสำหรับการโทร

ชื่อ	ผล
ใน	จำกัด ช่วงของจุดยึดกระโดดไปยังมุมมองเลื่อน
การนำทาง	Anchor Jump
getTex	รับเนื้อหาข้อความ
getRect	รับตำแหน่งและขนาดของเนื้อหาข้อความที่หลากหลาย
setcontent	ตั้งค่าเนื้อหาข้อความที่หลากหลาย
imglist	รับอาร์เรย์ของภาพทั้งหมด
การหยุดชั่วคราว	หยุดการเล่นเสียงและวิดีโอ (2.2.2+)
setPlaybackrate	ตั้งค่าอัตราการเล่นเสียงและวิดีโอ (2.4.0+)

ตรวจสอบ API เพื่อเรียนรู้เพิ่มเติม

ส่วนขยายปลั๊กอิน

นอกเหนือจากฟังก์ชั่นพื้นฐานส่วนประกอบนี้ยังมีส่วนขยายที่หลากหลายและสามารถเลือกได้ตามต้องการ

ชื่อ	ผล
เสียง	เครื่องเล่นเพลง
สามารถแก้ไขได้	การแก้ไขข้อความที่อุดมไปด้วย
อีโมจิ	วิเคราะห์อิโมจิ
เน้น	การเน้นบล็อกรหัส
การทำเครื่องหมาย	เรนเดอร์ markdown
ค้นหา	การค้นหาคำหลัก
สไตล์	สไตล์การจับคู่ในแท็กสไตล์
txv-video	ใช้วิดีโอ Tencent
img-cache	รูปภาพแคชโดย @Pentatea
น้ำยาง	แสดงสูตรยางพาราโดย @zeng-j
การ์ด	แสดงการ์ดโดย @whoooami

ตรวจสอบปลั๊กอินเพื่อเรียนรู้เพิ่มเติม

ใช้เคส

ตัวอย่างอย่างเป็นทางการ	ห้างสรรพสินค้ามีความสุข	ช่างเป็นอะไร	วิธีการตรวจสอบอาหาร	Weimu	อ่านวรรณกรรมคลาสสิก

รีวิววิทยาศาสตร์	การเดินทางทางเทคโนโลยีของโปรแกรมเมอร์	บล็อก Diandian	โน้ตที่ยอดเยี่ยม	365 คำถาม	หนังสือแบ่งปันในเมืองเดียวกัน

ส่วนแบ่งแหล่งเทคโนโลยี	รหัสของคุณยอดเยี่ยมมาก	จริง	Mottoni	การสาธิตเทมเพลต	Ai Wali

การจัดอันดับข้างต้นไม่มีลำดับโดยเฉพาะและมีการรวบรวมกรณีการใช้งานที่มองเห็นได้มากขึ้น (โปรดเพิ่ม)

ใบอนุญาตและการสนับสนุน

• ใบอนุญาตอนุญาตให้คุณใช้ (รวมถึงการใช้งานเชิงพาณิชย์) คัดลอกหรือแก้ไขใบอนุญาต MIT ส่วนประกอบนี้ฟรี
  มีความจำเป็นที่จะต้องผ่านการทดสอบที่เพียงพอก่อนที่จะใช้ในสภาพแวดล้อมการผลิต คุณจะไม่รับผิดชอบต่อการสูญเสียที่เกิดจาก bug ปลั๊กอิน (คุณสามารถแก้ไขซอร์สโค้ดด้วยตัวเองได้)

• ติดต่อเราและยินดีต้อนรับสู่การเข้าร่วมกลุ่มสื่อสาร QQ :
  กลุ่ม 1 (เต็ม): 699734691
  กลุ่ม 2 (เต็ม): 778239129
  กลุ่ม 3: 960265313
  

• สนับสนุน
  

อัพเดทบันทึก

• v2.5.0 (20240422)

  1. U play Event เพิ่ม src และรายละเอียดข้อมูลอื่น ๆ
  2. U แอตทริบิวต์ preview-img รองรับการตั้งค่า all เพื่อเปิดใช้งานรายละเอียดการดูตัวอย่างรูปภาพ base64
  3. U editable เพิ่มโหมดง่าย ๆ (คลิกข้อความเพื่อแก้ไขโดยตรง)
  4. ปลั๊กอิน U latex รองรับรายละเอียดสูตรระดับบล็อก
  5. F แก้ไขปัญหาการสูญเสียพื้นหลังในบางกรณีของตาราง
  6. F แก้ไขปัญหาบางอย่างที่ svg ไม่สามารถแสดงในรายละเอียดได้
  7. F แก้ไขปัญหาที่ไม่สามารถรับรู้สไตล์ในแพ็คเกจ uni-app h5 และ app สิ้นสุดลง
  8. F แก้ไขปัญหาการแสดงผลที่ไม่ถูกต้องในปลั๊กอิน latex ในบางกรณี
  9. F แก้ไขปัญหาที่ไม่สามารถลบตารางปลั๊กอิน editable
  10. F แก้ไขปัญหาของแพ็คเกจ uni-app editable vue3 h5 ข้อผิดพลาดการคลิกรูปภาพ
  11. F แก้ไขปัญหาที่แพ็คเกจปลั๊กอิน uni-app editable คลิกบนตารางโดยไม่มีแถบเมนู

• v2.4.3 (20240121)

  1. รายละเอียดปลั๊กอินการ์ด A โดย @whoooami
  2. F แก้ไขปัญหาที่ไม่อาจแสดง foreignobject ในรายละเอียด svg
  3. F แก้ไขปัญหาการแสดงที่ไม่ถูกต้องในกรณีของเซลล์ที่ผสานในส่วนของตารางของรายละเอียด
  4. F แก้ไขปัญหาของการตั้งค่า object-fit ในแท็ก img สำหรับไม่ถูกต้อง
  5. F แก้ไขปัญหาที่สูตรปลั๊กอิน latex จะปิดรายละเอียดบรรทัด
  6. F แก้ไขปัญหาที่การคลิก audio ไม่สามารถแก้ไขได้เมื่อแพ็คเกจ uni-app editable และปลั๊กอิน audio ถูกแชร์ รายละเอียดโดย @whoooami
  7. F แก้ไขปัญหาที่แอปเพล็ต Alipay ได้ตั้งค่าความกว้างและความสูงที่อาจแสดงอย่างผิดปกติ
  8. F แก้ไขปัญหาที่แอปเพล็ต WeChat แพ็คเกจ uni-app จะรายงานข้อผิดพลาดใน replace of undefined ในบางกรณี
  9. F แก้ไขปัญหาที่โปรแกรม uni-app Kuaishou Mini ไม่แสดงรายละเอียด

  คู่มือการอัปเดตสามารถเห็นได้จากวิธีการอัปเกรดของ 1.x

ตรวจสอบบันทึกการอัปเดตเพื่อเรียนรู้เพิ่มเติม