微信小程序--支持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

测试towxml数学公式以及Markdown

三、总结

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！