很多项目中需要文档类型的输出，使用html或者wxml来输出显得很不方便，markdown的文档输出方式是开发人员的首选，由于微信小程序不能直接渲染HTML，因此富文本编辑器生成的HTML内容无法直接在小程序中展示。

ui-markit是小程序工具库xquery的文档解析组件，支持HTML/MARKDOWN文档解析及输出，下例是仿小米手机卡片效果，结合html及markdown文档输出小程序的结构

仿小米html源码

组件解析html结构并生成小程序结构

<div class="card-container">
  <div class="for-img">
    <img class="card-img" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2c16238f786e4f93bdb175d7bf21aa47.jpg" />
  </div>
  <h3 class="for-title" style="border: 1px solid red;">
    Redmi K30
  </h3>
  <p class="for-desc">
    120Hz流速屏，全速热爱
  </p>
  <p class="for-price">
    1599元起
  </p>
</div>

css
stylus样式，需要编译生成wxss样式文件

.card-it
  width 100%
  margin 0 auto
  background-color #f5f5f5
  padding: 20px 0

.card-container
  position: relative;
  z-index: 1;
  width: 234px;
  height: 260px;
  margin 0 auto
  // margin-left: 14px;
  margin-bottom: 14px;
  background: #fff;
  padding: 20px 0;
  transition: all .2s linear;
  .for-img
    width: 160px;
    height: 160px;
    margin: 0 auto 18px;
    .card-img
      width: 160px;
      height: 160px;
      image
        width 160px
        height 160px
  .for-title
    display: block;
    font-size: 16px;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: 400;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin: 0 10px 2px;
  .for-desc
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin: 0 10px 10px;
    height: 18px;
    font-size: 12px;
    color: #b0b0b0;
  .for-price
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    text-align: center;
    color: #ff6700;
    margin: 0 10px 14px;

文档说明内容

## xquery富文本组件使用 
富文本组件是xquery的内置组件，通过下面几个步骤安装使用
...

组件使用

引入xquery组件ui-markit可以很方便的解析html结构
如何引入组件

wxml

<ui-markit dataSource="{{htmlConfig}}" textType="html" />
<ui-markit dataSource="{{mdConfig}}" textType="md" />

js

const Pager = require('components/aotoo/core/index')
Pager({
  data: {
    htmlConfig: {
      listClass: 'html-class',  // 容器样式类
      content: `<div ...`
    },
    
    mdConfig: {
      listClass: 'md-class',  // 容器样式类
      content: `markdown 内容部分`
    }
  }
})

内联使用

富文本组件是xquery的内部组件，在item组件中可以非常方便进行引用

wxml

<ui-item item="{{itemConfig}}" />

js

const Pager = require('components/aotoo/core/index')
Pager({
  data: {
      title: '内联引用富文本组件',
      "@html": {
          listClass: 'html-class',
          content: '<div ...'
      },
      
      "@md": {
          listClass; 'md-class',
          content: `markdown 的内容`
      }
  }
})

github地址：https://github.com/webkixi/aotoo-xquery

小程序demo演示