微信小程序中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 效果


相关推荐
万岳软件开发小城20 分钟前
陪诊APP+小程序一体化搭建方案:如何低成本打造医疗陪护平台?
小程序·医院陪诊系统源码·陪诊软件开发·陪诊平台开发·陪诊小程序开发
摇滚侠3 小时前
11 空间转换 前端 Web 开发 HTML5 + CSS3 + 移动 web 视频教程,前端web入门首选黑马程序员
前端·css·html·css3·html5
小李子呢02114 小时前
前端八股CSS---CSS布局
css·html·css3
lichenyang4534 小时前
Expo 小程序媒体库功能设计与实现记录
小程序
Beginner x_u6 小时前
前端八股整理总索引|JS/TS、HTML/CSS、Vue、浏览器、工程化与手写题
前端·javascript·html
经济元宇宙8 小时前
2026混合开发工具选型:小程序生态适配测评
小程序
T畅N20 小时前
审批流设计器(前端)
前端·elementui·vue·html·流程图·js
lpfasd12321 小时前
微信小程序虚拟支付(道具直购)踩坑全记录:从-15005到支付成功
微信小程序·小程序
ZC跨境爬虫1 天前
跟着 MDN 学 HTML day_17:媒体与 Web Audio API 自动播放指南——策略、检测与最佳实践
前端·笔记·ui·html·音视频·媒体
crazy_wsp1 天前
使用AI从0到1上线微信小程序
人工智能·微信小程序·小程序