wxmlify

Wxmlify

ปลั๊กอินน้ำหนักเบาและรวดเร็วที่ช่วยให้คุณแสดง HTML ที่สร้างโดยโปรแกรมแก้ไขข้อความที่หลากหลายในโปรแกรมขนาดเล็กของ WeChat

หมายเหตุ: มินิโปรแกรม WeChat เวอร์ชันใหม่มี <rich-text> Rich Text อยู่แล้ว แต่ยังไม่รับประกันความเข้ากันได้ในขณะนี้ คุณยังอาจต้องใช้เครื่องมือแยกวิเคราะห์จากบุคคลที่สาม

ข้อได้เปรียบ

• ขนาดเล็กและน้ำหนักเบา - เพียง 2 ไฟล์ รวม 14kb
• ไม่มีการเพิ่มสไตล์ที่ซ้ำซ้อน ซึ่งสะดวกสำหรับการปรับแต่งสไตล์เอกสาร
• คุณสามารถเลือกคงรูปแบบเอกสารต้นฉบับไว้ได้ เช่น การระบุให้คง font-size , font-weight ฯลฯ ของเอกสารต้นฉบับ
• การแยกวิเคราะห์เร็วขึ้น
• ใช้งานง่าย
• รองรับรูปภาพ วิดีโอ ตาราง

ข้อบกพร่อง

• ต้องการแยกวิเคราะห์ HTML ที่สร้างโดย Rich Text Editor และไม่เหมาะกับทุกสถานการณ์ เนื่องจาก HTML ที่สร้างโดยโปรแกรมแก้ไข Rich Text สอดคล้องกับข้อกำหนดเฉพาะบางอย่าง

การใช้งาน(สาธิต)

1. คัดลอกโฟลเดอร์ wxmlify ไปยังโปรเจ็กต์ weapp ของคุณ
2. แนะนำลงใน js ของเพจที่คุณต้องการแสดง Rich Text และสร้างอินสแตนซ์ใหม่ เช่น:

 // 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 ที่จะแยกวิเคราะห์
  • page: อินสแตนซ์ของเพจมินิโปรแกรม - นั่นคือตัวชี้ของ this ในเมธอดเพจทั้งหมด
  • ตัวเลือก: ตัวเลือก
• ส่งคืนค่า: อินสแตนซ์ wxmlify ที่ใช้ในการเรียกเมธอด

ตัวเลือก

ข้อมูลคีย์

• คีย์ของข้อมูลที่แยกวิเคราะห์ในข้อมูลหน้า
• ประเภท: string
• ค่าเริ่มต้น: 'wxmlified'
• ตัวอย่างเช่น:

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

ตามลำดับใน wxml:

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

รักษาสไตล์

• ชื่อสไตล์ CSS ที่จะรักษา (รูปแบบเคสอูฐ)
• พิมพ์:
  • สตริง 'all' หมายถึงการเก็บสไตล์ทั้งหมดไว้
  • ค่าลบ เช่น false , 0 , null หมายถึงการลบสไตล์ที่มีอยู่แล้วภายในทั้งหมด
  • อาร์เรย์ ระบุให้คงลักษณะบางอย่างไว้ เช่น ['fontSize', 'fontWeight', 'background']
• ค่าเริ่มต้น: 'all' (ปล่อยให้สไตล์ทั้งหมดเป็นค่าเริ่มต้น)

ปิดการใช้งาน ImagePreivew

• ปิดใช้งานการแสดงตัวอย่างการคลิกรูปภาพ
• ประเภท: boolean
• ค่าเริ่มต้น: false

บนรูปภาพTap

• ฟังก์ชั่นการประมวลผลการคลิกรูปภาพ
• ประเภท: 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 แบบโอเพ่นซอร์ส ที่สร้างโดย Chris Andrejewski