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


相关推荐
JasonMa1539 小时前
从零搭建一个微信小程序活动管理平台(一):架构设计与技术选型
javascript·微信小程序·node.js
杨超越luckly12 小时前
Agent应用指南:基于 SPTCC 一卡通数据的上海地铁客流特征分析(2015.04)
html·agent·可视化·一卡通·地图客流
2601_9657984713 小时前
Arrow Unlocker HTML5 Game Review: Keep Web Arcade Players Coming Back
前端·html·html5
醉城夜风~14 小时前
HTML常用标签详解学习博客:从基础标签到页面结构完整掌握
前端·学习·html
带娃的IT创业者16 小时前
单文件架构的极致美学:深入解析 Bento 的 HTML 幻灯片技术实现
前端·架构·html·web开发·bento·单文件架构
游戏开发爱好者816 小时前
iOS应用加固方案全解析:源码加固与IPA在线加固对比
android·macos·ios·小程序·uni-app·cocoa·iphone
IMPYLH17 小时前
HTML 的 <dl> 元素
linux·windows·html
2301_810313181 天前
宠物服务APP开发宠物社交上门喂养洗护商城系统源码搭建
小程序·团队开发·软件需求·宠物
用户298698530141 天前
在 PC 上将 HTML 转换为 PDF 的3种有效方法
人工智能·c#·html
momodira81 天前
防溺水作品投票小程序选哪个?
小程序·投票工具·线上制作教程