需求沟通：

解决方案：基于 KaTeX 构建的小程序原生 LaTeX 渲染组件（不依赖服务端渲染）。

效果预览图

实现原理

基于 katex 库，解析 latex 公式生成虚拟 dom 树对象，将 dom 对象翻译成小程序的 rich-text 支持的 nodes 由小程序渲染

局限性依赖微信小程序的 rich-text 组件渲染，请注意小程序基础库 1.4.0 开始支持由于 katex 库过大会大量占用小程序包体大小。

如何使用？在原生小程序项目中直接使用1. 在小程序中安装依赖npm install @rojer/katex-mini安装 katex （@rojer/katex-mini@1.2.0 之后需要手动安装）

自 1.2.0 版本起，@rojer/katex-mini不再包含katex，因此你需要自行安 装katex

npm install katex2. 在小程序开发者工具中 - 工具 - 构建 npm，执行后会看到生成的miniprogram_npm目录3. 在app.wxss加载 katex 的内置 css 样式@import "./miniprogram_npm/@rojer/katex-mini/index.wxss";4. 在小程序中解析 latex// index.jsimport parse from "@rojer/katex-mini";Page({ data: { nodes: [], latex: "\\displaystyle \\frac{1}{\\Bigl(\\sqrt{\\phi \\sqrt{5}}-\\phi\\Bigr) e^{\\frac25 \\pi}} = 1+\\frac{e^{-2\\pi}} {1+\\frac{e^{-4\\pi}} {1+\\frac{e^{-6\\pi}} {1+\\frac{e^{-8\\pi}} {1+\\cdots} } } }", }, onInput: function (e) { this.setData({ latex: e.detail.value, }); }, renderLatex: function () { const katexOption = { displayMode: true, }; // 参考 katex 的配置 this.setData({ nodes: parse(this.data.latex, { throwError: true, // 为true时，解析失败会抛出错误，否则会直接把错误信息解析为nodes结构展示 ...katexOption, }), }); },});5. 在页面中展示<!--index.wxml--><view>渲染</button></view>