wxmlify

Wxmlify

Легкий и быстрый плагин, который помогает отображать HTML, созданный редактором форматированного текста, в мини-программах WeChat.

Примечание. Новая версия мини-программы WeChat уже предоставляет компонент форматированного текста <rich-text> , но его совместимость на данный момент не гарантируется. Вам все равно могут потребоваться сторонние инструменты анализа.

преимущество

• Маленький и легкий - всего 2 файла общим весом 14 КБ.
• Не добавляются избыточные стили, что удобно для настройки стилей документа.
• Вы можете выборочно сохранить исходный стиль документа, например, указав сохранение font-size , font-weight и т. д. исходного документа.
• Парсинг стал быстрее
• Простота в использовании
• Сопровождение картинками, видео, таблицами

недостаток

• Предпочитает анализировать HTML, созданный редактором форматированного текста , и подходит не для всех сценариев. Потому что HTML, созданный редактором форматированного текста, соответствует определенным спецификациям.

Использование (демо)

1. Скопируйте папку wxmlify в свой проект weapp.
2. Внесите его в js страницы, где нужно отображать форматированный текст, и создайте новый экземпляр, например:

 // 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-кода для анализа.
  • страница: Экземпляр страницы мини-программы, то есть указатель 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

onImageTap

• Функция обработки кликов по изображению
• Тип: 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-JSON с открытым исходным кодом, созданному Крисом Андреевски.