项目场景：
uni-app开发微信小程序使用mp-html插件实现数学公式渲染
问题描述
uni-app中下载安装mp-html组件不渲染数学公式
原因分析：
mp-html组件中不包含数学公式渲染插件，需要自行下载全量mp-html安装latex插件再替换到原组件中使用
解决方案：
先安装mp-html组件 https://ext.dcloud.net.cn/plugin?id=805这里有安装方法，不再赘述
。。。
手动下载mp-html全量插件
github地址: https://github.com/jin-yufeng/mp-html
直接下载ZIP文件包，不建议用npm install 因为可能会有问题
下载完毕后打开根目录下的tools文件夹下的config.js文件
修改plugins 按需打开注释即可 代码如下
/**
* @fileoverview 配置文件
*/
module.exports = {
/**
* @description 需要的插件列表
*/
plugins: [
// 按需打开注释即可
// 'audio', // 音乐播放器
// 'editable', // 内容编辑
// 'emoji', // 小表情
// 'highlight', // 代码高亮
// 'markdown', // 解析 md
'latex', // 解析 latex
// 'search', // 关键词搜索
// 'style', // 解析 style 标签
// 'txv-video', // 使用腾讯视频
// 'img-cache' // 图片缓存
// 'card', // 卡片展示
],
/**
* @description 要引入到组件中的外部样式（css）
* 仅支持标签名和 class 选择器
*/
externStyle: '',
/**
* @description 要引入到模板中的自定义标签（ad 等）
* 每个标签为一个 object，包含 name（标签名，必要）、attrs（属性列表，非必要）、platforms（需要添加的平台，非必要）
*/
customElements: [
/*
// 需要使用广告标签则打开此注释
{
name: 'ad',
attrs: ['unit-id']
}
*/
],
/**
* @description babel 配置（es6 转 es5）
* @tutorial https://babeljs.io/docs/usage/options/
*/
babel: {
presets: ['@babel/env']
},
/**
* @description js 压缩配置
* @tutorial https://www.npmjs.com/package/uglify-js#minify-options
*/
uglify: {
mangle: {
toplevel: true
},
output: {
comments: /^!/
}
},
/**
* @description html 压缩配置
* @tutorial https://github.com/kangax/html-minifier#options-quick-reference
*/
htmlmin: {
caseSensitive: true,
collapseWhitespace: true,
removeComments: true,
keepClosingSlash: true
},
/**
* @description css 压缩配置
* @tutorial https://github.com/jakubpawlowicz/clean-css#constructor-options
*/
cleanCss: {
}
}
保存后使用命令
npm install
npm run build:uni-app
重点
⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️
打开目录：dist/uni-app/
复制此目录下的所有文件 替换到你自己项目中的uni_modules/mp-html文件夹下
⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️
vue文件中使用
如果需要开启文本长按复制 需要加selectable=true 并且你的富文本中需要有<div></div>或其他标签包括
<mp-html content="yourContent" :selectable="true"></mp-html>
保存后重新运行你的项目即可
觉得对你有帮助 给个赞赏支持一下
