wxmlify

Wxmlify

Um plug-in leve e rápido que ajuda a exibir HTML gerado pelo editor de rich text em miniprogramas WeChat.

Nota: A nova versão do miniprograma WeChat já fornece <rich-text> , mas sua compatibilidade não é garantida por enquanto. Você ainda pode precisar de ferramentas de análise de terceiros.

vantagem

• Pequeno e leve – apenas 2 arquivos, 14kb no total
• Nenhum estilo redundante é adicionado, o que é conveniente para personalizar estilos de documentos
• Você pode reter seletivamente o estilo do documento original, como especificar a manutenção font-size , font-weight etc. do documento original.
• A análise é mais rápida
• Fácil de usar
• Suporte fotos, vídeos, tabelas

deficiência

• Prefere analisar HTML gerado pelo editor de rich text e não é adequado para todos os cenários. Porque o HTML gerado pelo editor de rich text está em conformidade com determinadas especificações.

Uso (demonstração)

1. Copie a pasta wxmlify para o seu projeto weapp.
2. Introduza-o no js da página onde você precisa exibir rich text e crie uma nova instância, por exemplo:

 // 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. Insira o modelo na página wxml correspondente, por exemplo:

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

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

---

Visualização de documento

Construtor

 new Wxmlify ( html , page [ , options ] )

• parâmetro:
  • html: string - a string do código HTML a ser analisado
  • page: instância da página do mini programa - ou seja, o ponteiro this em todos os métodos da página
  • opções: opções
• Valor de retorno: uma instância wxmlify usada para chamar o método

Opções

chave de dados

• A chave dos dados analisados ​​nos dados da página
• Tipo: string
• Padrão: 'wxmlified'
• Por exemplo:

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

Correspondentemente em wxml:

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

preservarStyles

• nome do estilo css a ser preservado (formato camel case)
• tipo:
  • A string 'all' significa manter todos os estilos
  • Valores negativos, como false , 0 , null , significam remover todos os estilos integrados
  • Array, especificando para manter certos estilos, como ['fontSize', 'fontWeight', 'background']
• Padrão: 'all' (deixe todos os estilos como padrão)

desativarImagePreivew

• Desativar visualização de clique na imagem
• Tipo: boolean
• Padrão: false

onImageTap

• Função de processamento de clique de imagem
• Tipo: function
• Padrão: function() {}

método

wxmlify.getFullNodes()

• Retorna uma matriz Javascript, a estrutura de dados json após a análise do HTML

wxmlify.getHTML()

• Retorna o HTML passado

wxmlify.getImages()

• Retorna um array contendo as URLs de todas as imagens

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

---

?Esta pequena ferramenta é possível graças a um analisador de HTML para JSON de código aberto feito por Chris Andrejewski.