在uniapp里面使用 mp-html 并且开启 latex 功能

已于 2024-05-06 17:21:12 修改
阅读量1.2k 收藏 2
点赞数 1
文章标签： 微信小程序 uniapp
于 2024-05-06 17:19:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43191327/article/details/138501638
版权
本文介绍了如何在uniapp的mp-html中启用默认不支持的Latex功能，通过引入katex-mini并针对vite构建环境进行修改，详细步骤包括下载代码、修改以适应uniapp和vite打包过程。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在uniapp里面使用 mp-html 并且开启 latex 功能

默认情况下 mp-html 是不会开启 latex 功能的, 如果需要开启 latex 功能是需要到代码操作拉取代码自行打包的。

这里说一下 mp-html 里面的 latex 功能是由 https://github.com/rojer95/katex-mini 提供的技术实现， 但是这个仓库是专门为小程序写得功能，也就是说 mp-html 仓库里面的相关 latex 功能是被mp-html作者修改过的。代码对于 vite 构建的 uniapp 不太友好, 我这里自己把 katex-mini 改了一版, 修改为由 vite 打包。我修改过的代码,里面也有使用demo

重点来了
现在来说如何在 mp-html 里面开启 latex 渲染功能。代码拉取到本地，修改代码然后自行打包，这里说一下如何修改代码（其实很简单）。

在这里插入图片描述
然后执行打包就行了

是阿臻
关注
uni-app开发微信小程序使用mp-html插件实现Latex数学公式渲染
TencentVue的博客
01-03 1266
uniapp开发微信小程序使用mp-html插件实现数学公式渲染。
uniapp实现微信小程序富文本之mp-html插件详解
CSDN_Admin0的博客
01-15 8807
uniapp实现微信小程序中富文本展示，微信小程序中图片自适应调整，微信小程序集成mp-html富文本
uniapp中使用mathJax解析数学公式
03-15
uniapp中使用mathJax解析数学公式，兼容App与H5
uni-app使用富文本组件 mp-html
qq_38517231的博客
07-26 3906
uni-app使用富文本组件 mp-html
uniapp小程序开发-富文本编辑器mp-html，juice外部样式转内联样式
weixin_40599951的博客
12-07 5371
在开发一款公司的小程序过程中，有一个需求：web端后端可以上传word文档，后端转为html字符串；小程序接收显示，并且可以在小程序进行编辑修改。 这款插件也是插件库里的一款，内部其实也是封装使用微信中原生的editor这款插件的兼容性也很不错，目前也是有人维护的， 如果小程序有需要还是可以支棱起来的 第一步 使用 安装 安装成功后，在中找到mp-html 可以封装一个组件，组件中直接引用 遇到的问题 因为后端解析的word文档是一个完整的html字符串，例如： 而对于我们的富文本是不支持解析
小程序富文本组件,支持渲染和编辑html,支持在微信,QQ,百度,支付宝,头条和uni-app平台使用- jin-yufeng / mp-html
01-27
mp-html 一个强大的小程序富文本组件 功能介绍 支持在多个主流的小程序平台和 uni-app 中使用 支持丰富的标签（包括 table、video、svg 等） 支持丰富的事件效果（自动预览图片、链接处理等） 支持设置占位图（加载中、出错时、预览时） 支持锚点跳转、长按复制等丰富功能 支持大部分 html 实体 丰富的插件（关键词搜索、内容 编辑 等） 效率高、容错性强且轻量化（≈24.5KB，9KB gzipped） 查看 了解更多 使用方法 原生平台 npm 方式 在项目目录下安装组件包 npm install mp-html 开发者工具中勾选 使用 npm 模块 并点击 工具 - 构建 npm 在需要使用页面的 json 文件中添加 { "usingComponents": { "mp-html": "mp-html" } } 在需要使用页面的 wxml 文件
LaTeX2HTML-RegEX-：用于将LaTeX转换为HTML的可定制Python程序
02-21
在参考文献的末尾（脚注之前）放置参考书目，并附上使用的引文和超链接。 将宏转换为完全可定制HTML容器/标签。 该程序不能： 将tikzpicture （及其子tikzcd ，如tikzcd ）转换为SVG （但是， 可用于在MathJax中...
markdown-it-latex2img：用于markdown-it markdown解析器的LaTex插件，将LaTeX Math方程放在任何位置标签
02-03
Markdown-it-latex2img 用于 Markdown解析器的LaTex插件，服务器端MathJax Renderer。 背景 有关 markdown-it-math：最初旨在渲染MathML。 markdown-it-mathjax：只是为了绕过LaTeX数学进行mathjax处理，需要导入 ...
Python 使用千问 Qwen2-VL 大模型训练 LaTeX 数学公式图集，并进行LaTeX图识别测试工程源码
12-19
本工程是一个使用Python编程语言，依托于千问Qwen2-VL大模型来训练与测试LaTeX数学公式图集的项目。LaTeX是一种基于TeX的排版系统，广泛应用于生成复杂表格和数学公式，常用于科技、数学和工程领域的文档撰写。本...
travis-ci-latex-pdf：使用Travis-CI构建LaTeX的不同方法的概述（@jackolney提出的想法，@ PHPirates和贡献者完全重写了该想法）
01-30
travis-ci-latex-pdf：使用Travis-CI构建LaTeX的不同方法的概述（@jackolney提出的想法，@ PHPirates和贡献者完全重写了该想法）
【mp-html】小程序富文本组件（页面内嵌html）
m0_71621983的博客
09-18 9738
显示动态html富文本是很多应用必要的需求，小程序平台不支持dom操作使得这成为一个难题，其自带的rich-text组件支持的标签少且屏蔽所有事件，难以实际应用。因此就有了这样一个能够便捷的在小程序平台上处理富文本的组件，还支持丰富的扩展功能。提示：以下是mp-html正文内容，下面案例可供参考。
mp-html （小程序富文本组件）
热门推荐
code
04-10 1万+
功能介绍 支持在多个主流的小程序平台和uni-app中使用 支持丰富的标签（包括table、video、svg等） 支持丰富的事件效果（自动预览图片、链接处理等） 支持设置占位图（加载中、出错时、预览时） 支持锚点跳转、长按复制等丰富功能 支持大部分html实体 丰富的插件（关键词搜索、内容编辑等） 效率高、容错性强且轻量化（≈24.5KB，9KB gzipped） 查看功能介绍了解更多 使用方法 原生平台 npm方式 在项目目录下安装组件包 ...
html显示latex公式,wordpress显示数学公式插件【LaTeX转HTML】
weixin_36488760的博客
06-28 1407
20190616更新，我的理解有误。正确写法是，直接切换到代码编辑器。https://www.mathjax.org/然后写Tex格式，示例如下：\title{Hello LaTeX2HTML}\begin{thm}[Newdon-Leibniez]\label{thm:NL}If $f\in C^1([a,b])$ then\begin{equation}\label{eq:NL}\int_a^...
uniapp 引用MathJax.js 动态 渲染latex 公式
huxiying001的专栏
10-30 3051
1.uniapp 支持renderjs renderjs是一个运行在视图层的js。它比WXS更加强大。它只支持app-vue和h5。 2.在页面上写如下代码： <template> <view> <view class="content" :prop="content" :change:prop="MathJax.updateMathJax" > {{content}} <text v-html="conte...
在html前端中插入LaTeX公式
YLCHUP的博客
06-22 394
参考链接：在html中使用数学公式latex_html数学公式latex-CSDN博客
uni-app-微信小程序实现markdown文本解析、数学公式解析超详细教程
weixin_42100033的博客
11-08 4220
uni-app-微信小程序实现markdown文本解析、数学公式解析超详细教程,Towxml 是一个可将HTML、Markdown转为微信小程序WXML(WeiXin Markup Language)的渲染库。用于解决在微信小程序中Markdown、HTML不能直接渲染的问题。
uniapp解析富文本
xniYa的博客
10-12 617
uniapp解析富文本
uin-app组件的属性 以学习笔记生成
最新发布
03-18
<think>好的，我现在需要回答用户关于uni-app组件属性的问题，并生成学习笔记。首先，我得回忆一下uni-app的组件体系。uni-app是基于Vue.js的跨平台框架，所以它的组件应该和Vue组件类似，但可能有自己特有的属性。接下来，用户可能想知道常用组件及其属性，比如view、text、image、input、button等，这些是基础组件。 我需要确保每个组件的属性用正确的LaTeX格式，比如$hover-class$这样的行内公式。同时，用户可能还关心平台专属属性，比如在不同小程序或H5中的差异，这部分需要提到但可能不需要太深入，除非用户特别指出。 另外，自定义组件和原生组件也是重点，比如scroll-view和swiper的属性，比如scroll-top、current等。事件绑定相关的属性如@click、@input也需要说明，但要注意事件和属性的区别，避免混淆。 可能还需要注意一些常见的坑，比如image组件的mode属性处理图片裁剪，input的confirm-type设置键盘按钮，这些实际开发中常用到的点应该包含进去。此外，兼容性问题和注意事项，比如原生组件在部分平台上的层级问题，也需要提醒用户。 最后，结构要清晰，分点列出，每个组件给出属性和示例，符合用户生成学习笔记的需求。确保使用正确的中文术语，避免翻译生硬，同时保持语言简洁明了。检查LaTeX格式是否正确，属性名用$符号包裹，独立公式如果有的话用$$，不过这里可能用不上独立公式。总之，确保回答既全面又易于理解，帮助用户快速掌握uni-app组件的属性使用。</think># uni-app组件属性学习笔记 ## 一、基础组件属性 ### 1. `<view>` 容器组件 - **hover-class**：触摸时添加的样式类（默认值：`none`） 示例：`<view hover-class="active">点击变色</view>` - **hover-start-time**：触摸后触发hover的延迟（单位：ms，默认值：50） - **hover-stay-time**：松开后hover样式的保留时间（单位：ms，默认值：400） ### 2. `<text>` 文本组件 - **selectable**：是否允许长按选择文字（默认值：false） 示例：`<text selectable>可复制的文字</text>` - **space**：空格处理方式（可选值：`ensp`/`emsp`/`nbsp`） - **decode**：是否解码HTML实体（支持` ` `<` `>`） ### 3. `<image>` 图片组件 - **src**：图片路径（支持本地路径/网络URL） 示例：`<image src="/static/logo.png" mode="aspectFit"></image>` - **mode**：图片裁剪模式（共14种，如$scaleToFill$/$aspectFit$/$widthFix$） - **lazy-load**：是否开启懒加载（默认值：false） ### 4. `<input>` 输入框 - **type**：输入类型（text/number/idcard/digit等） - **password**：是否密码输入（默认值：false） - **confirm-type**：键盘确认按钮文字（如send/search） - **maxlength**：最大输入长度（默认值：140） ## 二、平台专属属性（需条件编译） ```html <!-- #ifdef MP-WEIXIN --> <button open-type="getPhoneNumber">获取手机号</button> <!-- #endif --> ``` - 微信小程序特有：`open-type="getUserInfo"` - 支付宝特有：`public-id="2021xxxx"` ## 三、复杂组件属性示例 ### 1. `<scroll-view>` 滚动容器 ```html <scroll-view scroll-y :scroll-top="scrollTop" @scrolltolower="loadMore" > <!-- 内容 --> </scroll-view> ``` - **scroll-top**：设置竖向滚动条位置（需通过数据绑定更新） - **scroll-into-view**：滚动到指定元素ID位置 - **enable-back-to-top**：iOS点击状态栏是否返回顶部（默认false） ### 2. `<swiper>` 轮播组件 ```html <swiper :current="currentIndex" :autoplay="true" interval="3000" > <swiper-item v-for="item in list" :key="item.id"> <image :src="item.img"></image> </swiper-item> </swiper> ``` - **indicator-dots**：是否显示面板指示点 - **circular**：是否循环播放 - **vertical**：是否纵向滚动 ## 四、自定义组件传参 ### 1. Props定义 ```javascript export default { props: { title: { type: String, default: '默认标题' }, dataList: { type: Array, required: true } } } ``` ### 2. 使用示例 ```html <custom-card title="商品列表" :data-list="goods" @item-click="handleClick" /> ``` ## 五、注意事项 1. 原生组件层级问题：`<map>`/`<video>`等组件在部分平台层级最高 2. 属性值类型：布尔属性需使用`:attr="true"`形式绑定 3. 样式覆盖：部分组件（如button）需用`!important`覆盖默认样式 4. 平台差异：相同属性在不同平台可能有不同表现，需用条件编译处理 > 建议结合uni-app官方文档进行实践验证： > [https://uniapp.dcloud.net.cn/component/](https://uniapp.dcloud.net.cn/component/)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值