在 UniApp 开发中，经常需要在小程序端展示 Markdown 格式的内容（如文档、文章详情等），而 Towxml 是一款专为微信小程序设计的 Markdown 渲染工具，支持公式、代码高亮、表格等丰富特性。本文将详细介绍 UniApp 中集成 Towxml 正常版本的完整配置流程，帮助开发者快速落地。这是其 仓库地址，感谢作者开源！！！ sbfkcel/towxml： 微信小程序HTML、Markdown渲染库

 

一、核心配置步骤

步骤 1：导入 Towxml 组件

        先将下载好的 Towxml 正常版本解压，把 towxml 文件夹完整复制到 UniApp 项目的 wxcomponents 目录下（若没有 wxcomponents 文件夹，手动创建即可），确保组件文件完整无误。建议直接从 GitHub 上下载即可。

步骤 2：在分包页面配置 usingComponents

找到需要展示 Markdown 的目标页面（本文以 pages_book/chapterDetail/index 为例），在其对应的 index.json 文件中，添加 usingComponents 配置，指定 Towxml 组件的路径，代码如下：
 

{
  "name": "book",
  "root": "pages_book",
  "pages": [
    {
      "path": "bookChapter/index",
      "style": {
        "navigationBarTitleText": "书本"
      }
    },
    {
      "path": "chapterDetail/index",
      "style": {
        "navigationBarTitleText": "章节详情",
        "navigationStyle": "custom",
        "usingComponents": {
          "towxml": "/wxcomponents/towxml/towxml"
        }
      }
    }
  ]
}

目录结构如下：

步骤 3：生成微信小程序代码并调整组件路径

1. 执行编译命令：在 UniApp 项目根目录运行 npm run dev:mp-weixin，生成微信小程序对应的代码
2. 转移 Towxml 组件：为避免主包与分包的路径引用问题，建议将 wxcomponents/towxml 文件夹复制到目标分包目录下（本文为 pages_book 分包），此时组件路径变为 pages_book/towxml/towxml。
3. 更新配置路径：修改目标页面 index.json 中 usingComponents 的 towxml 路径，改为分包内的组件路径，代码如下：

   "usingComponents": {
     // 调整前路径：指向 wxcomponents 内的 Towxml 组件
     // "towxml": "/wxcomponents/towxml/towxml"
       
     // 调整后路径：指向分包内的 Towxml 组件（根据你的分包名称修改）
     "towxml": "../../pages_book/towxml/towxml"
   }

        文件图片如下
        

步骤 4：把使用组件的地址也修改为分包内的组件路径

        比如 pages_book/chapterDetail/index.js 中使用的是以下代码

const towxml = requier("/wxcomponents/towxml/index.js")

        则需改为以下代码

// 你的实际路径
const towxml = requier("../../pages_book/towxml/index.js") 

        凡是使用的都需要调整喔

关键注意事项

建议将所有需要使用 Towxml 渲染 Markdown 的页面集中放到同一个分包中（如本文的 pages_book 分包），并将 Towxml 组件也放置在该分包内。若主包页面直接引用分包内的 Towxml 组件，可能会出现无法渲染的问题。
 

本文书写不易，如有帮助到您，还请点赞收藏，如还有疑问或者不可以展示等等，可以评论下，我看到了会回复