更新记录

1.0.0（2025-08-14） 下载此版本

1.0.0 支持公式绑定和CDN资源配置、虚拟键盘布局配置

平台兼容性

uni-app(4.07)

uni-app x(4.07)

其他

Mathlive App 项目说明

本项目基于 uni-app 框架，适配 H5 和 App 端，集成了 mathlive 数学公式编辑器。通过 renderjs 技术，实现了 mathlive 在 H5 端和 App 端的无缝运行：

• H5 端：使用本地静态资源加载 mathlive，提升加载速度和离线可用性。
• App 端：通过 CDN 加载 mathlive，保证资源的最新性和兼容性。

主要功能

• 数学公式编辑与展示
• 虚拟键盘支持
• 适配多端（H5/App）

组件使用说明

MathEditor 组件 Props

事件

• input：公式内容变更时触发，参数为最新公式字符串。

使用示例

<template>
    <MathEditor
        :value="latex"
        editorId="math-editor-1"
        :layouts="['default', 'numeric']"
        :cdnUrl="'https://unpkg.com/mathlive'"
        @input="onFormulaChange"
    />
</template>

<script>
import MathEditor from '@/components/MathEditor.vue'

export default {
    components: { MathEditor },
    data() {
        return {
            latex: ''
        }
    },
    methods: {
        onFormulaChange(newValue) {
            this.latex = newValue
            // 处理公式内容变更逻辑
        }
    }
}
</script>

本地静态资源操作说明

• mathlive 资源包可通过 npm 安装（npm install mathlive），将 node_modules/mathlive 下的相关文件（如 js、css、fonts、sounds 等）复制到项目的 static/mathlive 目录下。
• 组件使用了 static/mathlive 目录下的资源。

目录结构简述

• components/mathlive-app/mathlive-app.vue：核心数学公式编辑器组件
• static/mathlive/：H5 端 mathlive 静态资源
• pages/：页面入口

适配说明

• H5 端自动加载本地 mathlive 资源，无需配置 CDN。
• App 端通过 cdnUrl 指定 mathlive CDN 地址。

参考

• mathlive 官方文档
• uni-app 官方文档