在微信小程序中渲染MarkDown（非流式输出）_微信小程序 markdown

使用Towxml在微信小程序中渲染MarkDown文本

下载Towxml

从GitHub下载Towxml，GitHub - sbfkcel/towxml: 微信小程序HTML、Markdown渲染库，这里面也有详细的使用方法介绍，需要其他复杂需求的可查看里面的详解，这里只展示基本文本渲染

1.克隆到本地

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

2.安装构建依赖

npm install 或 yarn

3.按需编辑配置文件towxml/config.js

注释掉不需要的减小体积

4.打包

运行 npm run build 或 yarn run build即可

新构建出来的文件在dist目录下，将dist目录复制到你的小程序项目中并将目录名称改为towxml即可

使用Towxml

在app.js中引入Towxml

// app.jsApp({ towxml:require(\'/towxml/index\'),});

在使用页面的json文件中也要注册

 // pages/text/text.json { \"usingComponents\": { \"towxml\": \"/towxml/towxml\" } }

 在目标页面调用Towxml

// pages/text/text.jsconst app = getApp();//实例appPage({ /** * 页面的初始数据 * MarkDown文本要用换行符分隔，不然解析出来会堆在一行 */ data: { text:`# 这是一个一级标题 \\n ## 这是一个二级标题 \\n这是一段普通的文本内容，在 Markdown 中可以很方便地进行文本排版。 \\n- 这是一个无序列表项 1 \\n- 这是一个无序列表项 2 \\n- 这是无序列表项 2 的子项 1 \\n - 这是无序列表项 2 的子项 2 \\n1. 这是一个有序列表项 1 \\n2. 这是一个有序列表项 2 \\n这是一段包含 **加粗** 、*斜体* 和 ~~删除线~~ 的文本。`, article:{} }, show(e){ const {text} =this.data; console.log(text);//检查编译前文本 let obj = app.towxml(text,\'markdown\',{// theme:\'dark\',events:{tap:e => {console.log(\'tap\',e);},change:e => {console.log(\'todo\',e);}}});this.setData({article:obj,}); console.log(this.data.article);//检查编译后的文本 }, })

在wxml中渲染

   {{text}}  编译  <towxml nodes=\"{{article}}\"/>  

效果