微信答题小程序支持latex公式显示解决方案

需求沟通:

解决方案:基于 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 katex

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

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

复制代码
@import "./miniprogram_npm/@rojer/katex-mini/index.wxss";

4. 在小程序中解析 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 () {
    const katexOption = {
      displayMode: true,
    }; // 参考 katex 的配置
    this.setData({
      nodes: parse(this.data.latex, {
        throwError: true, // 为true时,解析失败会抛出错误,否则会直接把错误信息解析为nodes结构展示
        ...katexOption,
      }),
    });
  },
});

5. 在页面中展示

复制代码
<!--index.wxml-->
<view class="container">
  <rich-text nodes="{{nodes}}"></rich-text>
  <textarea value="{{latex}}" bindinput="onInput" maxlength="1400"></textarea>
  <button bindtap="renderLatex">渲染</button>
</view>
相关推荐
狂团商城小师妹9 小时前
JAVA露营基地预约户外露营预约下单系统小程序
java·开发语言·微信小程序·小程序
知识分享小能手11 小时前
微信小程序入门学习教程,从入门到精通,微信小程序页面制作(2)
前端·javascript·学习·微信小程序·小程序·前端框架·notepad++
说私域11 小时前
情绪点设置在开源AI大模型驱动的S2B2C商城小程序AI智能名片中的应用研究
人工智能·小程序·开源
2501_9160074713 小时前
Java界面开发工具有哪些?常用Java GUI开发工具推荐、实战经验与对比分享
android·java·开发语言·ios·小程序·uni-app·iphone
流***陌14 小时前
扭蛋机抽赏小程序:重构线上娱乐的“盲盒式”新体验
小程序·重构·娱乐
一 乐14 小时前
社区互助养老系统|基于java和小程序的社区互助养老系统小程序设计与实现(源码+数据库+文档)
java·数据库·spring boot·小程序·论文·毕设·社区互助养老系统小程序
lingggggaaaa14 小时前
小迪安全v2023学习笔记(九十讲)—— 小程序篇&反编译&外在&主包分包&配置泄露&算法逆向&未授权
笔记·学习·安全·web安全·网络安全·小程序
说私域14 小时前
基于定制开发开源AI智能名片S2B2C商城小程序的文案信息传达策略研究
大数据·人工智能·小程序
OEC小胖胖16 小时前
组件化思维(下):表单与交互组件,倾听用户的心声
前端·微信小程序·小程序·微信开放平台
2501_9159214319 小时前
TCP 抓包分析实战,从抓取到定位(命令、常见症状、排查流程与真机抓包补充)
网络·网络协议·tcp/ip·ios·小程序·uni-app·iphone