uniapp + Towxml 3.0 实现小程序markdown格式文本渲染

 展示效果：

 

1.克隆项目到本地

git clone https://github.com/sbfkcel/towxml.git

2.安装依赖后在本地执行build编译代码

npm install
npm run build

3.将towxml打包文件放到uniapp项目中

把构建好的文件夹dist改名为towxml，在uni-app项目根目录中新建wxcomponents目录，将towxml复制进去即可

4.towxml/decode.json中需要将引用路径更改一下

{
  "component": true,
  "usingComponents": {
    "decode": "./decode",
    "audio-player": "./audio-player/audio-player",
    "echarts": "./echarts/echarts",
    "latex": "./latex/latex",
    "table": "./table/table",
    "todogroup": "./todogroup/todogroup",
    "yuml": "./yuml/yuml",
    "img": "./img/img"
  }
}

5.pages.json配置

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"usingComponents": {
					"towxml": "/wxcomponents/towxml/towxml"
				}
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"usingComponents": {
			"towxml": "/wxcomponents/towxml/towxml",
			"decode": "/wxcomponents/towxml/decode"
		}
	},
	"uniIdRouter": {}
}

6.配置main.js

7.index.vue 测试展示效果

<template>
	<div class="wrap">
		<towxml :nodes="html" />
	</div>
</template>

<script>
	export default {
		data() {
			return {
				html: '',
			};
		},
		mounted() {
			let str = `
# 一
## 二
### 三
#### 四
##### 五
###### 六
> 你好，这是引用
- ***无序***
1. ***有序***
	| 1    | 1    | 1    |
	| ---- | ---- | ---- |
	| 2    | 2    | 2    |
	| 3    | 3    | 3    |
	| 4    | 4    | 4    |

`
			this.html = this.towxml(str, 'markdown')
		},
	};
</script>

 8.展示效果：

如果本文对你有帮助的话，记得点赞支持一下哦

扩展

我实现了一个基于uniapp的微信小程序markdown编辑器组件，大家可以去试试，下面就是源码
Academicrubbish/mdEditor: uniapp 微信小程序 markdowm编辑器 (github.com)

用完觉得可以的话，麻烦给我github项目点一个小小的⭐，谢谢啦