微信小程序--支持LaTex数学公式

wxParse和towxml都是微信小程序中HTML和Markdown的解析组件。刚开始在项目中使用了wxParse，但是发现不能解析数学公式，后来了解到towxml3.0，发现towxml3.0功能很强大，支持很多的功能（包括数学公式、echarts图标以及yuml流程图）。于是将wxParse替换成了towxml

towxml支持功能：

支持echarts图表（3.0+）✨
支持LaTex数学公式（3.0+）✨
支持yuml流程图（3.0+）✨
支持按需构建（3.0+）✨
支持代码语法高亮、代码块行号显示
支持emoji表情😉
支持上标、下标、下划线、删除线、表格、视频、图片（几乎所有html元素）……
支持typographer字符替换
支持多主题切换
支持Markdown TodoList
支持事件绑定（这样允许自行扩展功能哟，例如：点击页面中的某个元素，更新当前页面内容等...）
极致的中文排版优化
支持前后解析数据

官方给出的Demo截图如下：

 

根据官网demo，自己写了一个测试demo。写的过程中遇到些问题，对这些问题的解决方法及解决过程中使用的实用工具做如下的总结：

一、构建Towxml

1、克隆项目到本地

git clone https://github.com/sbfkcel/towxml.git

注：访问github速度慢时，可转访问百度网盘下载：https://pan.baidu.com/s/1KwlAe2nS4yIPrjngB6oeMg ，提取码：qwer

2、把项目文件towxml复制到你小程序根目录文件下，如下所示：

3、在微信开发者工具中构建npm(前提你已经下载npm)

二、使用，显示如下效果

1、在app.js引入towxml库

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

2、在页面配置文件中引入towxml组件 /pages/index/index.json

{
  "usingComponents": {
    "towxml":"/towxml/towxml"
  }
}

3、解析内容并使用/pages/index/index.js

 var math = '$$\\left(\\sum_{ k=1 } ^ n a_k b_k \\right) ^ { \\!\\!2} \\leq\\left(\\sum_{ k = 1 }^ n a_k ^ 2 \\right) \\left(\\sum_{ k=1 } ^ n b_k ^ 2 \\right)$$'
    let result = app.towxml(math, 'markdown', {
      base: 'https://xxx.com', // 相对资源的base路径
      theme: 'light', // 主题，默认`light`
      events: { // 为元素绑定的事件方法
        tap: (e) => {
          console.log('tap', e);
        }
      }
    });

    // 更新解析数据
    this.setData({
      article: result,
    });

4、在页面中插入组件/pages/index/index.wxml

<view style="margin-top:32px">
      测试towxml数学公式以及Markdown
      <towxml nodes="{{article}}"/>
</view>

三、总结

1、使用LaTex在线数学公式，可访问网址进行公式值转化：https://zh.numberempire.com/latexequationeditor.php

2、使用LaTex数学公式，towxml会自动规定（\转义符）转义字符串里的特殊字符,如下结果

所以你需要咋转化公式对应添加转义字符\

3、测试mathquill公式库，在线公式值的转化：http://www.jmeditor.com/jme/demo.html

4、demo源码参考：https://gitee.com/lipan57/my-towxml-demo