wxmlify

Wxmlifier

Un plug-in léger et rapide qui vous aide à afficher le HTML généré par l'éditeur de texte enrichi dans les mini-programmes WeChat.

Remarque : La nouvelle version du mini-programme WeChat fournit déjà <rich-text> , mais sa compatibilité n'est pas garantie pour le moment. Vous aurez peut-être encore besoin d'outils d'analyse tiers.

avantage

• Petit et léger - seulement 2 fichiers, total 14 Ko
• Aucun style redondant n'est ajouté, ce qui est pratique pour personnaliser les styles de document
• Vous pouvez conserver de manière sélective le style du document d'origine, par exemple en spécifiant de conserver font-size , font-weight etc. du document d'origine.
• L'analyse est plus rapide
• Facile à utiliser
• Prise en charge des images, vidéos, tableaux

défaut

• Préfère analyser le HTML généré par un éditeur de texte enrichi et ne convient pas à tous les scénarios. Parce que le HTML généré par l’éditeur de texte enrichi est conforme à certaines spécifications.

Utilisation (démo)

1. Copiez le dossier wxmlify dans votre projet weapp.
2. Introduisez-le dans le js de la page où vous devez afficher du texte enrichi, et créez une nouvelle instance, par exemple :

 // 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. Introduisez le modèle dans la page wxml correspondante, par exemple :

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

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

---

Vue du document

Constructeur

 new Wxmlify ( html , page [ , options ] )

• paramètre:
  • html: string - la chaîne du code HTML à analyser
  • page : instance de mini-page de programme - c'est-à-dire le pointeur de this dans toutes les méthodes de page
  • options:options
• Valeur de retour : une instance de wxmlify utilisée pour appeler la méthode

Possibilités

clé de données

• La clé des données analysées dans les données de la page
• Type : string
• Par défaut : 'wxmlified'
• Par exemple:

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

En conséquence dans wxml :

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

préserver les styles

• nom du style CSS à conserver (format camel case)
• taper:
  • La chaîne 'all' signifie conserver tous les styles
  • Les valeurs négatives, telles que false , 0 , null , signifient la suppression de tous les styles intégrés
  • Tableau, spécifiant de conserver certains styles, tels que ['fontSize', 'fontWeight', 'background']
• Par défaut : 'all' (laisser tous les styles par défaut)

désactiverImagePreivew

• Désactiver l'aperçu du clic sur l'image
• Type : boolean
• Par défaut : false

surImageTap

• Fonction de traitement des clics d'image
• Type : function
• Par défaut : function() {}

méthode

wxmlify.getFullNodes()

• Renvoie un tableau Javascript, la structure de données json après analyse HTML

wxmlify.getHTML()

• Renvoie le code HTML transmis

wxmlify.getImages()

• Renvoie un tableau contenant les URL de toutes les images

Style personnalisé

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

---

? Ce petit outil est rendu possible grâce à un analyseur HTML-JSON open source himalaya créé par Chris Andrejewski.