Descarga de wxmlify - Descarga del código fuente wxmlify

wxmlify

Código Fuente de IA

v1.2.0

Descargar

Wxmlify

Un complemento ligero y rápido que le ayuda a mostrar HTML generado por el editor de texto enriquecido en los miniprogramas WeChat.

Nota: La nueva versión del mini programa WeChat ya proporciona `<rich-text>` , pero su compatibilidad no está garantizada por el momento. Es posible que aún necesite herramientas de análisis de terceros.

ventaja

Pequeño y liviano: solo 2 archivos, 14 kb en total
No se agregan estilos redundantes, lo cual resulta conveniente para personalizar los estilos de los documentos.
Puede conservar selectivamente el estilo del documento original, como especificar que se conserve font-size , font-weight etc. del documento original.
El análisis es más rápido
Fácil de usar
Imágenes de soporte, vídeos, tablas.

defecto

Prefiere analizar HTML generado por un editor de texto enriquecido y no es adecuado para todos los escenarios. Porque el HTML generado por el editor de texto enriquecido se ajusta a determinadas especificaciones.

Uso (demostración)

Copie la carpeta wxmlify a su proyecto weapp.
Introdúzcalo en el js de la página donde necesita mostrar texto enriquecido y cree una nueva instancia, por ejemplo:

 // pages/index/index.js

var Wxmlify = require ( '../../wxmlify/wxmlify.js' )

Page ( {
  onLoad ( ) {
    // 以任何方式获得要解析的Html代码
    var html = getHTMLStringSomehow ( ) 

    // new 一个 wxmlify 实例就好了
    var wxmlify = new Wxmlify ( html , this , { } )
  }
} )

Introduce la plantilla en la página correspondiente wxml, por ejemplo:

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

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

Ver documento

Constructor

 new Wxmlify ( html , page [ , options ] )

parámetro:
- html: string - la cadena de código html a analizar
- página: instancia de página de mini programa, es decir, el puntero de this en todos los métodos de página
- opciones: opciones
Valor de retorno: una instancia de wxmlify utilizada para llamar al método

Opciones

clave de datos

La clave de los datos analizados en los datos de la página.
Tipo: string
Valor predeterminado: 'wxmlified'
Por ejemplo:

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

Correspondientemente en wxml:

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

preservar estilos

nombre de estilo CSS para preservar (formato de caja de camello)
tipo:
- La cadena 'all' significa mantener todos los estilos.
- Los valores negativos, como false , 0 , null , significan eliminar todos los estilos integrados.
- Matriz, que especifica conservar ciertos estilos, como ['fontSize', 'fontWeight', 'background']
Predeterminado: 'all' (deje todos los estilos por defecto)

desactivarImagePreivew

Deshabilitar la vista previa de clic en la imagen
Tipo: boolean
Predeterminado: false

enImageTap

Función de procesamiento de clics en imágenes
Tipo: function
Predeterminado: function() {}

método

wxmlify.getFullNodes()

Devuelve una matriz de Javascript, la estructura de datos json después de analizar HTML

wxmlify.getHTML()

Devuelve el HTML pasado

wxmlify.getImages()

Devuelve una matriz que contiene las URL de todas las imágenes.

Estilo personalizado

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