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

java_强哥2024-08-31 14:08

一、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}}"/>

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

一、Towxml

二、引入

2.1 clone代码

2.2 安装依赖

2.3 打包

2.4 引入文件

三、使用

3.1 app.js引入

3.2 页面配置文件json中引用

3.3 页面js使用

3.4 wxml展示

3.5 效果