项目背景
后端Java、小程序开发uniapp
后台需要发布文章，在微信小程序端显示，但是后台文章保存格式为markdown格式，而且在文章中存在table数据，在微信小程序中是没有table的，这里的转编译就成了一个大问题，之前也使用过Towxml直接对markdown进行编译，发现在显示图片和table时仍然会出现问题，而且在uniapp中使用Towxml也不是太方便，这里我们采用后端将markdown先转换为html，再到小程序端将其转换为wxml来进行处理。
处理方式
后端：
后端这里我使用的是Java，用FlexMark框架将markdown转换为html，再发送给前端，Java处理markdown文章入下，这里不进行过多说明：
微信小程序端：
微信小程序端我使用的是mphtml框架进行的处理：
步骤一：
npm install mp-html
步骤二：
到需要的页面进行导入
import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
步骤三：
导入组件，将html绑定
<mp-html :content="html" ></mp-html>
注意：
这里如果想对编译后的wxml进行样式修改，可以直接通过绑定标签来编辑css，如下代码实例：
html
<template>
<div class="wrap">
<mp-html :content="html" :tag-style="tagStyle" ></mp-html>
</div>
</template>
<script>
import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
export default {
data() {
return {
html: `<div id="md-editor-v-0-preview" class="md-editor-preview default-theme md-editor-scrn"><h2 data-line="0" id="新增政策">新增政策</h2>
<figure data-line="1"><img src="http://localhost:8088/static/img/2025/02/%E9%B8%A1%E5%93%A51739467171418.png" alt="" class="md-zoom medium-zoom-image"></figure>
<ul data-line="2">
<li data-line="2">孩子们我是政策1</li>
<li data-line="3">孩子们我是政策2</li>
<li data-line="4">孩子们我是政策3</li>
</ul>
<table data-line="7">
<thead data-line="7">
<tr data-line="7">
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
</tr>
</thead>
<tbody data-line="9">
<tr data-line="9">
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
<td>1.4</td>
</tr>
<tr data-line="10">
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
</tr>
</tbody>
</table>
</div>`,
tagStyle: {
table: 'border-top: 1px solid gray; border-left: 1px solid gray; border-collapse:collapse;margin: auto;',
th: 'border-right: 1px solid gray; border-bottom: 1px solid gray;background-color: #eeeeee;',
td: 'border-right: 1px solid gray; border-bottom: 1px solid gray;',
h2: 'text-align: center;'
}
};
},
mounted() {
},
components: {
mpHtml
}
};
</script>
<style>
/* a 标签默认效果 */
._a {
padding: 1.5px 0 1.5px 0;
color: #366092;
word-break: break-all;
}
/* a 标签点击态效果 */
._hover {
text-decoration: underline;
opacity: 0.7;
}
/* 图片默认效果 */
._img {
max-width: 100%;
-webkit-touch-callout: none;
}
</style>输出效果：
更多的用法可以研究下官方文档：