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


相关推荐
毕设源码-朱学姐2 小时前
【开题答辩全过程】以 基于微信小程序的大学生安全素质综合培养平台设计与实现为例,包含答辩的问题和答案
微信小程序·小程序
潆润千川科技5 小时前
中老年垂直社交小程序产品功能对比与设计思路分析
小程序
木风未来5 小时前
解锁自然新可能:露营租赁小程序如何让轻量化户外触手可及
小程序
木风未来8 小时前
破解家政维修信任困局:一个小程序如何让家庭服务更透明、更高效
小程序
温轻舟10 小时前
前端可视化大屏【附源码】
前端·javascript·css·html·可视化·可视化大屏·温轻舟
北极象10 小时前
Flying-Saucer HTML到PDF渲染引擎核心流程分析
前端·pdf·html
CappuccinoRose10 小时前
HTML语法学习文档(一)
前端·学习·html
Java.慈祥10 小时前
速通-微信小程序 5Day
java·微信小程序·小程序·npm
web打印社区10 小时前
web-print-pdf:专为Web打印而生的专业解决方案
前端·javascript·vue.js·electron·html
说私域11 小时前
数字围城下的防御与突围:基于私域流量与智能名片商城小程序的用户关系重构研究
小程序·重构·流量运营·私域运营