uniapp 使用towxml

肥喵蒙太奇2025-10-03 9:43

Towxml 是一个可将HTML、Markdown转为微信小程序WXML(WeiXin Markup Language)的渲染库。用于解决在微信小程序中Markdown、HTML不能直接渲染的问题。

克隆项目到本地

bash 复制代码

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

构建依赖

bash 复制代码

npm install

本地打包

bash 复制代码

npm run build

拷贝dist到项目中，重命名
修改 decode.json

路径修改为相对路径

javascript 复制代码

{
  "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"
  }
}

使用

在 pages.json 中进行组件注册

如果单个页面使用

javascript 复制代码

{
	"pages": [

		{
			"path": "pages/detail/detail",
			"style": {
				"navigationBarTitleText": "详情",
				"disableScroll": true,
				"app-plus": {
					"softinputMode": "adjustResize"
				},
				// 如果是单个页面使用
				// #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-QQ
				// "usingComponents": {
					// "towxml": "/wxcomponents/towxml/towxml"
				// }
				// #endif
			}
		},
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		// 如果是组件使用
		// #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-QQ
		"usingComponents": {
			"towxml": "/wxcomponents/towxml/towxml"
		}
		// #endif
	},
	"uniIdRouter": {}
}