+-
![Towxml 3.0让微信小程序支持LaTex数学公式及yuml流程图 Towxml 3.0让微信小程序支持LaTex数学公式及yuml流程图](https://bitbucket.org/wylovelq/tu08/raw/1d43048c8488b60f50b7c092c932f83178894753/2021/01/15/84a3714c2179465381bca354b617a17e_400.jpg)
Towxml 是一个让小程序可以解析Markdown、HTML的解析库。能够使小程序完美解析Markdown内容。
根据用户的反馈和小程序提供的API对Towxml进行了完成的重写。陆续间断地经历了近半年,终于迎来了一个新的大版本。
新版本较之前解析速度更快,体积也更小,并且支持无限层级的内容。
同时也根据部分用户的反馈增加了一些新功能。对微信小程序的Markdown及Html内容解析支持更加完善。
项目地址: https://github.com/sbfkcel/towxml
主要增加的有:
支持echarts图表(3.0+)✨ 支持LaTex数学公式(3.0+)✨ 支持yuml流程图(3.0+)✨ 支持按需构建(3.0+)✨Demo截图
如何使用?
Towxml 3.0使用有以下几个步骤。
首先,需要构建Towxml
克隆项目到本地
git clone https://github.com/sbfkcel/towxml.git
安装构建依赖
npm install
或
yarn
编辑配置文件towxml/config.js
npm run build
或
yarn run build
即可
新构建出来的文件会保存在你桌面上的
towxml
目录,需要将此目录复制到你的小程序项目中去
开始使用
将构建出来的towxml
并解压至小程序项目根目录下,即(小程序/towxml
)
引入库/app.js
//app.js
App({
// 引入`towxml3.0`解析方法
towxml:require('/towxml/index')
})
在页面配置文件中引入towxml组件 /pages/index/index.json
{
"usingComponents": {
"towxml":"/towxml/towxml"
}
}
在页面中插入组件/pages/index/index.wxml
<!--index.wxml-->
<view class="container">
<towxml nodes="{{article}}"/>
</view>
解析内容并使用/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
});
}
})
API
app.towxml(str,type,options)
有三个参数
str
<必选> string,html或markdown字符串
type
<必选> string,需要解析的内容类型
html
或
markdown
options
<可选> object,可选参数,可以该选项设置
主题
、
绑定事件
、
设置base
等
FAQ
1. 为什么选择yuml作为流程图?
yuml相对比uml来说有灵活的图形定制方式,且解析速度更快。
2. echarts所有图表都支持吗?
考虑到库体积的问题,Towxml3.0 默认集成的echarts仅支持柱状图
、折线图
、饼图
,如需其它图表可 自行定制。
3. 为什么需要构建,不能直接使用吗?
也可以直接使用,不过可能会存在一些问题,或有一些无用的文件。所以建议还是自行构建出自己想要的版本库。