微信小程序markdown转换为wxml（uniapp开发）

项目背景

后端Java、小程序开发uniapp

后台需要发布文章，在微信小程序端显示，但是后台文章保存格式为markdown格式，而且在文章中存在table数据，在微信小程序中是没有table的，这里的转编译就成了一个大问题，之前也使用过Towxml直接对markdown进行编译，发现在显示图片和table时仍然会出现问题，而且在uniapp中使用Towxml也不是太方便，这里我们采用后端将markdown先转换为html，再到小程序端将其转换为wxml来进行处理。

处理方式

后端：

后端这里我使用的是Java，用FlexMark框架将markdown转换为html，再发送给前端，Java处理markdown文章入下，这里不进行过多说明：

Java处理markdown为HTML

微信小程序端：

微信小程序端我使用的是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>

输出效果：

更多的用法可以研究下官方文档：

mphtml中文文档