更新记录

0.1.0（2026-05-09） 下载此版本

初始版本：

• 支持 Vue2 / Vue3、H5/Web、微信小程序
• 支持 text 与 segments 渲染 AI 答案、解析和 LaTeX 公式
• 内置 mp-html 与 latex 渲染能力

平台兼容性

uni-app(3.7.7)

AI LaTeX 富文本渲染

hyc-latex-render 是一个面向 AI 答案/解析场景的 uni-app 富文本公式组件。它基于 mp-html 和 latex 插件封装，支持 Vue2、Vue3、H5/Web 和微信小程序。

安装

把插件目录复制到项目：

uni_modules/hyc-latex-render

发布到 DCloud 插件市场前，请按你的账号信息调整 package.json 里的 id、repository、contact 等字段。

如果项目开启 easycom，可以直接在页面使用：

<hyc-latex-render :segments="aiExplanationSegments" variant="explanation" />

必须引入公式样式

在业务项目 App.vue 的全局样式中引入：

@import "@/uni_modules/hyc-latex-render/styles/katex.css";

特别是微信小程序端，公式字体、上下标、分式和根号都依赖这份全局样式。

基础用法

<template>
  <view class="page">
    <hyc-latex-render
      :text="answer"
      variant="answer"
    />

    <hyc-latex-render
      :segments="explanationSegments"
      variant="explanation"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      answer: '(1) $\\frac{q}{m}=\\frac{2v_0^2}{Eh}$',
      explanationSegments: [
        { type: 'text', text: '粒子做类平抛运动，运动时间 ' },
        { type: 'formula', latex: 't=\\frac{h}{v_0}', display: false },
        { type: 'text', text: '。' }
      ]
    }
  }
}
</script>

如果你直接拿的是错题详情接口对象，也可以让组件自己按字段读取：

<hyc-latex-render
  :mistake="mistake"
  field="answer"
  variant="answer"
/>

<hyc-latex-render
  :mistake="mistake"
  field="explanation"
  variant="explanation"
/>

字段映射：

支持的输入

1. 普通文本

text 中可以直接写 $...$、$$...$$、\(...\) 或 \[...\]：

<hyc-latex-render text="由 $h=v_0t$ 得 $t=\\frac{h}{v_0}$。" />

2. 后端分段协议

推荐后端返回 segments，这样比从字符串里猜公式更稳定：

[
  { type: 'text', text: '答案为 ' },
  {
    type: 'formula',
    latex: '\\frac{q}{m}=\\frac{2v_0^2}{Eh}',
    display: false
  }
]

字段说明：

Props

Events

方法

this.$refs.richText.getText()

返回渲染后的纯文本内容。

兼容说明

• Vue2 / Vue3：组件使用 Options API，避免 Vue2 项目无法编译 script setup。
• H5 / Web：使用 mp-html 递归渲染，长公式会跟随容器横向滚动。
• 微信小程序：组件内部设置了 styleIsolation: 'shared' 和 addGlobalClass: true，同时需要在 App.vue 全局引入 styles/katex.css。
• App Vue：理论可用，但首版没有把 App 端作为承诺平台。
• nvue：暂不支持。

注意事项

• 这是 AI 富文本公式渲染组件，不是通用 HTML 安全过滤器。不要直接渲染未经过后端信任处理的用户 HTML。
• latex 渲染来自 mp-html 的 latex 插件和 katex-mini，不是完整 MathJax，复杂公式支持范围以 katex-mini 为准。
• 如果微信小程序端字体文件加载异常，可以把 CSS 中的 KaTeX 字体资源转存到自己的 CDN，并加入小程序合法域名。