Towxml 3.0让微信小程序支持LaTex数学公式及yuml流程图

陆续不断地写了近两个月，根据客户的反馈和小程序提供的API对Towxml进行了完成的重写。

新版本较之前解析速度更快，体积也更小，并且支持无限层级的内容。

同时也根据部分客户的反馈添加了少量新功能。对微信小程序的Markdown及Html内容解析支持更加完善。

项目地址： sbfkcel/towxml

主要添加的有：

• 支持echarts图表（3.0+）?
• 支持LaTex数学公式（3.0+）?
• 支持yuml流程图（3.0+）?
• 支持按需构建（3.0+）?

Demo截图

image.png

如何使用？

Towxml 3.0使用有以下几个步骤。

首先，需要构建Towxml

• 克隆项目到本地
  • git clone sbfkcel/towxml.git
• 安装构建依赖
  • npm install 或者 yarn
• 编辑配置文件towxml/config.js
  • 根据自行需要，仅保留你需要的功能就可（配置中有详细注释）
• 运行 npm run build 或者 yarn run build就可

新构建出来的文件会保存在你桌面上的towxml目录，需要将此目录复制到你的小程序项目中去

开始使用

将构建出来的towxml并解压至小程序项目根目录下，即（小程序/towxml）

引入库/app.js

//app.jsApp({    // 引入`towxml3.0`解析方法    towxml:require('/towxml/parse')})

在页面配置文件中引入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. 为什么需要构建，不能直接使用吗？
也可以直接使用，不过可能会存在少量问题，或者有少量无用的文件。所以建议还是自行构建出自己想要的版本库。