uni-app开发微信小程序使用markdow组件，亲测有效

PHP学习网

发布于 2026-03-18 15:52:18

1140

文章被收录于专栏：PHP学习网PHP学习网

PHP学习网将不定时分享优质开源项目，优质技术文章，精选面试题和资源，大家可以把PHP学习网设为🌟星标，第一时间获取最新推送，以防错过优质内容

最近在开发一款壁纸类的微信小程序，因为要加一个文章类别的效果，之后好写一些通知啥的，然后就遇到了这个问题，如下图所示。

经过查找发现了 towxml插件，Towxml 是一个让小程序（微信/QQ）可以解析Markdown、HTML的解析库。能够使小程序完美解析Markdown内容，使用方法如下。

第一步：首先，需要构建Towxml（常规步骤，按照操作步骤执行就是了）

#克隆项目到本地
git clone twoxml地址（文末回复下载）
#安装构建依赖
npm install 或 yarn
#编辑配置文件towxml/config.js
#根据自行需要，仅保留你需要的功能即可（配置中有详细注释）
运行 npm run build 或 yarn run build即可
（重要）修改 towxml/decode.json 里所有/towxml开头的绝对路径为相对路径。例如 “decode”: “/towxml/decode”, 改成 “decode”: “./decode”,

第二步：将构建好的towxml复制到项目中

首先在项目下新建wxcomponents目录，名字不能错，必须使用这个名字。

将第一步构建的Towxml目录复制到wxcomponents中,目录结构如下

第三步：开始使用

1、在main.js中进入Towxml

// #ifdef VUE3
const towxml = require("./wxcomponents/towxml/index") #引入towxml，这里最后一定是index，不要写成了towxml

import { createSSRApp } from 'vue'

export function createApp() {

const app = createSSRApp(App)

app.config.globalProperties.$towxml = towxml #加载到全局

return {

app

}

}

2、在页面中引入组件

在pages.json中，在指定页面新增组件：


{

"path": "pages/message/detail",

"style": {

"navigationStyle": "custom",

"usingComponents": {

"towxml": "/wxcomponents/towxml/towxml"  #哪个页面使用则引用到哪个页面

}

}

},

3、在页面插入组件

<template>
     <view>
         <towxml :nodes="visibleContentNodes"></towxml>
     </view>
</template>

4、解析内容


// 可见内容markdown节点

visibleContentNodes() {

const content = this.visibleContent

if (!content) return []

try {

return this.$towxml(content, 'markdown') #特别注意这句，这个是全局使用的方法

} catch (error) {

console.error('Markdown解析错误:', error)

return []

}

},

以上就是towxml的使用方法，经过我亲测使用在uniapp中使用是没问题的，大家在加上对应的css，即可很方便的解析。

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2025-07-31，如有侵权请联系 cloudcommunity@tencent.com 删除

微信