wxmlify

Wxmlify

Ein leichtes und schnelles Plug-in, das Ihnen hilft, vom Rich-Text-Editor generiertes HTML in WeChat-Miniprogrammen anzuzeigen.

Hinweis: Die neue Version des WeChat-Miniprogramms bietet bereits <rich-text> , deren Kompatibilität kann jedoch derzeit nicht garantiert werden. Möglicherweise benötigen Sie weiterhin Analysetools von Drittanbietern.

Vorteil

• Klein und leicht – nur 2 Dateien, insgesamt 14 KB
• Es werden keine redundanten Stile hinzugefügt, was beim Anpassen von Dokumentstilen praktisch ist
• Sie können den ursprünglichen Dokumentstil selektiv beibehalten, indem Sie beispielsweise angeben, dass font-size , font-weight usw. des Originaldokuments beibehalten werden sollen.
• Das Parsen ist schneller
• Einfach zu bedienen
• Unterstützen Sie Bilder, Videos, Tabellen

Mangel

• Analysiert vorzugsweise vom Rich-Text-Editor generiertes HTML und ist nicht für alle Szenarien geeignet. Denn der vom Rich-Text-Editor generierte HTML-Code entspricht bestimmten Spezifikationen.

Nutzung (Demo)

1. Kopieren Sie den Ordner „wxmlify“ in Ihr Weapp-Projekt.
2. Fügen Sie es in die js der Seite ein, auf der Sie Rich Text anzeigen müssen, und erstellen Sie eine neue Instanz, zum Beispiel:

 // 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. Fügen Sie die Vorlage in die entsprechende WXML-Seite ein, zum Beispiel:

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

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

---

Dokumentansicht

Konstrukteur

 new Wxmlify ( html , page [ , options ] )

• Parameter:
  • html: string – die Zeichenfolge des zu analysierenden HTML-Codes
  • Seite: Mini-Programmseiteninstanz – das heißt, der Zeiger this in allen Seitenmethoden
  • Optionen: Optionen
• Rückgabewert: eine wxmlify-Instanz, die zum Aufrufen der Methode verwendet wird

Optionen

Datenschlüssel

• Der Schlüssel der analysierten Daten in den Seitendaten
• Typ: string
• Standard: 'wxmlified'
• Zum Beispiel:

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

Entsprechend in wxml:

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

PreserveStyles

• Name des CSS-Stils, der beibehalten werden soll (Camel-Case-Format)
• Typ:
  • Die Zeichenfolge 'all' bedeutet, dass alle Stile beibehalten werden
  • Negative Werte wie false , 0 , null bedeuten, dass alle integrierten Stile entfernt werden
  • Array, das angibt, dass bestimmte Stile beibehalten werden sollen, z. B. ['fontSize', 'fontWeight', 'background']
• Standard: 'all' (alle Stile standardmäßig beibehalten)

disableImagePreivew

• Bildklickvorschau deaktivieren
• Typ: boolean
• Standard: false

onImageTap

• Bildklick-Verarbeitungsfunktion
• Typ: function
• Standard: function() {}

Verfahren

wxmlify.getFullNodes()

• Gibt ein Javascript-Array zurück, die JSON-Datenstruktur, nachdem HTML analysiert wurde

wxmlify.getHTML()

• Gibt den übergebenen HTML-Code zurück

wxmlify.getImages()

• Gibt ein Array zurück, das die URLs aller Bilder enthält

Benutzerdefinierter Stil

. 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;
}

---

? Dieses kleine Tool wird durch einen Open-Source-HTML-zu-JSON-Parser himalaya von Chris Andrejewski ermöglicht.