微信小程序中Towxml解析Markdown及html

一、Towxml

Towxml 是一个让小程序可以解析Markdown、HTML的解析库。

二、引入

2.1 clone代码

bash 复制代码
git clone https://github.com/sbfkcel/towxml.git

2.2 安装依赖

bash 复制代码
npm install

2.3 打包

bash 复制代码
npm run build

2.4 引入文件

将dist文件复制到微信小程序根目录,改名为towxml

三、使用

3.1 app.js引入

js 复制代码
//app.js
App({
    // 引入`towxml`解析方法
    towxml:require('/towxml/index')
})

3.2 页面配置文件json中引用

json 复制代码
{
  "usingComponents": {
    "towxml": "../towxml/towxml"
  }
}

3.3 页面js使用

js 复制代码
const app = getApp();
Page({
    data: {
        content: ''
    },
    onLoad: function (options) {
        // todo 库中返回markdown
        const contentMd = '# 一级标题';
        let result = app.towxml(contentMd, 'markdown', {
        	theme: 'light'
        });
        this.setData({
            content: result
        });
    }
})

3.4 wxml展示

xml 复制代码
<towxml nodes="{{content}}"/>

3.5 效果


相关推荐
nbwenren2 小时前
2026实测:Gemini 3 镜像站视觉能力实践——拍照原型图,一键生成 HTML+CSS 代码
前端·css·html
云云只是个程序马喽3 小时前
AI漫剧创作系统开发定制指南
人工智能·小程序·php
爱上好庆祝8 小时前
学习js的第五天
前端·css·学习·html·css3·js
前端老石人9 小时前
前端开发中的 URL 完全指南
开发语言·前端·javascript·css·html
jingqingdai311 小时前
别用正则格式化 HTML!我用 DOM 遍历实现零风险本地格式化,老项目重构效率直接拉满
前端·重构·html
斯班奇的好朋友阿法法11 小时前
鸿蒙 vs iOS vs 微信小程序:开发平台全面对比
ios·微信小程序·harmonyos
a11177613 小时前
“像风之翼“无人机巡检平台仪表盘
前端·javascript·开源·html·无人机
a11177613 小时前
QQ 宠物(怀旧 开源)前端electron项目
前端·开源·html
ZC跨境爬虫13 小时前
跟着 MDN 学 HTML day_8:(高级文本语义标签+适配核心功底)
前端·css·笔记·ui·html
Dxy123931021613 小时前
HTML中的伪类详解:从基础到高级应用的全面指南
前端·html