test.vue 文件
<template>
<view class="content">
{{content}}
</view>
</template>
<script>
export default {
data() {
return {
content: '解:↵首先产生了中子、质子和电子,可知最先产生的元素为氢,其中子数比质子数多1的核素,其质量数为3,核素可表示为$_{1}^{3}\textrm{H}$或T,↵故答案为:氢;$_{1}^{3}\textrm{H}$或$T$↵'
};
},
methods: {
initMathJax() {
console.log(MathJax)
// TODO:公式解析
MathJax.Hub.Config({
"HTML-CSS": {
availableFonts: ["STIX-Web"],
preferredFont: "STIX-Web",
linebreaks: { automatic: false },
undefinedFamily: "STIXGeneral,'Arial Unicode MS',serif",
EqnChunk: (MathJax.Hub.Browser.isMobile ? 10 : 50),
webFont: "STIX-Web",
imageFont: "",
showMathMenu: false,
scale: 90
},
jax: ["input/TeX", "input/MathML", "output/HTML-CSS", "output/NativeMML", "output/CommonHTML"],
tex2jax: {
inlineMath: [
["$", "$"],
["\\(", "\\)"]
],
displayMath: [
["$$", "$$"],
["\\[", "\\]"]
],
processEscapes: true,
ignoreClass: "tex2jax_ignore|dno"
},
TeX: {
extensions: ["AMSmath.js", "AMSsymbols.js", "noErrors.js", "noUndefined.js"],
noUndefined: {
attributes: { mathcolor: "red", mathbackground: "#FFEEEE", mathsize: "100%" }
}
},
messageStyle: "none",
extensions: ["tex2jax.js", "mml2jax.js", "MathMenu.js", "MathZoom.js", "CHTML-preview.js"],
errorSettings: { message: ["parse..."] },
SVG: { linebreaks: { automatic: true }, width: "100% container" },
menuSettings: { CHTMLpreview: true }
})
MathJax.Hub.Queue(['Typeset', MathJax.Hub, ''])
}
}
}
</script>
<script module="MathJax" lang="renderjs">
export default {
mounted() {
if (typeof window.MathJax === 'object') {
this.initMathJax()
} else {
const script = document.createElement('script')
// script.src = 'https://www.stuspy.com/mathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML'
script.src = 'http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML'
console.log('-----------')
console.log(this)
console.log('-----------')
script.onload = this.initMathJax.bind(this)
document.head.appendChild(script)
}
},
methods: {
// ...
}
}
</script>
<style lang="scss">
.content{font-size: 18px;margin-top: 150px;}
</style>
2 个回复
chenli
可以改用katex库使用看看。这个库渲染速度也比较高
DCloud_UNI_GSQ
意思是 initMathJax 不存在
App端渲染层和逻辑层并不在同一个js运行环境,你的 renderjs 里并没有这个方法
1***@163.com (作者)
非常感谢,把initMathJax放到渲染层的methods后可以解析了
2020-06-27 15:14