
Towxml 是一个可将HTML、Markdown转为微信小程序WXML(WeiXin Markup Language)的渲染库。 用于解决在微信小程序中Markdown、HTML不能直接渲染的问题。
特色:
1、可控制的音频播放器(可自行调节样式,解决原生audio在部分iPhone上不能自动播放的情况)
2、支持代码语法高亮
3、支持emoji表情
4、支持上标、下标、下划线、删除线、表格、视频、图片(几乎所有html元素)……
5、支持typographer字符替换
6、多主题动态支持
7、极致的中文排版优化
8、Markdown TodoList
下载地址:https://github.com/jyblogs/towxml
或者:git clone git@github.com:jyblogs/towxml.git
使用流程:
1、下载,解压,复制至小程序根目录

2、引入库/app.js
//app.js
App({
// 引入`towxml3.0`解析方法
towxml:require('/towxml/index')
})
3. 在页面配置文件中引入towxml组件 /pages/index/index.json
{
"usingComponents": {
"towxml":"/towxml/towxml"
}
}4. 在页面中插入组件/pages/index/index.wxml
<!--index.wxml-->
<view>
<towxml nodes="{{article}}"/>
</view>5. 解析内容并使用/pages/index/index.js
//获取应用实例
const app = getApp();
Page({
data: {
isLoading: true, // 判断是否尚在加载中
article: {} // 内容数据
},
onLoad: function () {
let result = app.towxml(`# Markdown`,'markdown',{
base:'https://xxx.com', // 相对资源的base路径
theme:'dark', // 主题,默认`light`
events:{ // 为元素绑定的事件方法
tap:(e)=>{
console.log('tap',e);
}
}
});
// 更新解析数据
this.setData({
article:result,
isLoading: false
});
}
})str 必选,html或markdown字符串
type 必选,需要解析的内容类型html或markdown
options [object] 可选,可以该选项设置主题、绑定事件、设置base等
API
app.towxml(str,type,options)有三个参数
base [string] 可选,用于指定静态相对资源的base路径。例如:https://xx.com/static/
theme [string] 可选,默认:light,用于指定主题'light'或'dark',或其它自定义
events [object] 可选,用于为元素绑定事件。key为事件名称,value则必须为一个函数。例如:{tap:e=>{console.log(e)}}
towxml3.0 支持以下功能:
echarts图表,默认禁用,需自行构建以开启此功能
LaTeX数学公式,默认禁用,需搭建解析服务并自行构建以开启此功能
yuml图表,默认禁用,需要搭建解析服务并自行构建以开启此功能
highlight代码高亮,默认开启(默认仅开启bash、javascript、json、python、html、css、php、scss、shell),其它语言高亮支持需自行构建以开启