小程序上支持Latex(不依赖服务端)

小程序Latex渲染解决方案

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

效果预览图

源码地址

https://github.com/rojer95/katex-mini

实现原理

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

局限性

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

解决方式

• 引入eval5模块对象 katex 模块进行在线加载，从而减小包体大小。（2022 年 7 月 6 日起小程序不允许使用eval5）
• 如果你希望再小一点，可以将解析模块放在服务端，提供解析接口，再将结果展示在rich-text中（已实现）虽然这里使用了服务端，但是这里是产出json格式的nodes而非图片，相对于将latex转为图片的方案也好很多

如何使用？

在原生小程序项目中直接使用

Demo: https://github.com/rojer95/katex-mini/tree/master/demo

1. 在小程序中安装依赖

npm install @rojer/katex-mini

2. 在小程序开发者工具中 - 工具 - 构建 npm，执行后会看到生成的miniprogram_npm目录

3. 在 app.wxss 加载 katex 的内置 css 样式

@import "./miniprogram_npm/@rojer/katex-mini/index.wxss";

4. 在 app.js 的 onLaunch 中加载 katex

// app.js
import { loadKatex } from "@rojer/katex-mini";
App({
  onLaunch() {
    // 通过动态方式加载katex代码，节省小程序包体大小
    wx.request({
      url: "https://lib.baomitu.com/KaTeX/latest/katex.min.js",
      success: ({ data: code }) => {
        loadKatex(code);
        wx.katex = true;
      },
    });
  },
});

5. 在小程序中解析 latex

// index.js
import 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 () {
    this.setData({
      nodes: parse(this.data.latex),
    });
  },
});

6. 在页面中展示

<view class="container">
  <rich-text nodes="{{nodes}}">rich-text>
  <textarea value="{{latex}}" bindinput="onInput" maxlength="1400">textarea>
  <button bindtap="renderLatex">渲染button>
view>

在Taro中直接使用

Demo: https://github.com/rojer95/katex-mini-taro-demo

1、clone 项目

git clone [email protected]:rojer95/katex-mini-taro-demo.git

2、项目根目录安装依赖

yarn

3、编译

yarn dev:weapp

4、编译后:

• 打开小程序开发者工具, 打开 dist 目录
• 可以修改文本框内容 Latex 公式，点击渲染查看效果

使用API调用方式

Demo: https://github.com/rojer95/katex-mini-api

1、导入 wxss

katex-mini.wxss ： https://cdn.jsdelivr.net/npm/@rojer/katex-mini/dist/index.wxss

// 在app.wxss中
@import "katex-mini.wxss";

2、请求接口

wx.request({
  url: "https://katex-mini-api.vercel.app",
  data: {
    latex: "a=b+c",
  },
  dataType: "json",
  success(res) {
    this.setData({
      nodes: res.data,
    });
  },
});

3、放到 RichText 组件里

<rich-text nodes="{{ nodes }}" />

写在最后

如果能帮到你，希望能给我一个Star。感谢！