APP使用MathJax解析数学公式

分类：uni-app

MathJAX

近期有个需求，将之前后台录入的MathJax公式解析展示到APP中，研究了一下论坛里的代码，最终实现了需求，将代码和遇到的问题整理一下发出来，分享一下经验。

实现的效果图在下面附件中，目前只测试过安卓APP，H5和苹果APP未测试

核心代码如下：
因为目前只有一个页面使用数学公式，所以未封装，多个页面需要的话可以自行封装一个JS。
将代码完整的复制到vue页面里即可使用

<script module="MathJax" lang="renderjs">  
    export default {  
        mounted() {  
            let that = this;  
            if (typeof window.MathJax === 'object') {  
                that.initMathJax()  
            } else {  
                const script = document.createElement('script')  
                                //MathJax地址，为保持稳定可以下载到自己的服务器上引用,注意config参数不可忽略  
                script.src = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML'  
                script.onload = that.initMathJax.bind(that);  
                document.head.appendChild(script)  
            }  
        },  
        methods: {  
            initMathJax() {  
                MathJax.Hub.Config({  
                    showProcessingMessages: false, //关闭js加载过程信息  
                    messageStyle: "none", //不显示信息  
                    jax: ["input/TeX", "output/HTML-CSS"],  
                    tex2jax: {  
                        inlineMath: [  
                            ["$", "$"],  
                            ["\\(", "\\)"]  
                        ], //行内公式选择符  
                        displayMath: [   
                            ["$$", "$$"],  
                            ["\\[", "\\]"]  
                        ], //段内公式选择符  
                        skipTags: ["script", "noscript", "style", "textarea", "pre", "code", "a"] //避开某些标签  
                    },  
                    "HTML-CSS": {  
                        availableFonts: ["STIX", "TeX"], //可选字体  
                        showMathMenu: false //关闭右击菜单显示  
                    }  
                });  
                this.MathQueue();  
            },  
            MathQueue: function() {  
                if (!window.MathJax) {  
                    return;  
                }  
                                //container 是当前页面DOM的ID，可以自定义  
                window.MathJax.Hub.Queue(["Typeset", window.MathJax.Hub, document.getElementById('container')]);  
            }  
        }  
    }  
</script>

HTML代码：

此时可以不用v-html，我用v-html是因为公式中还含有html元素,execQuestionContent方法的作用是处理斜杠，如果公式正确可以不用,方法代码在下方图中,有需要的可以参考

遇到的问题：
1、执行后公式没有变化
排查原因：
1、排查公式是否符合inlineMath、displayMath选择符匹配标准，例如\\( 对应公式里的 \(， \\\\(对应\\(，此处是决定能否匹配数学公式的关键，需要注意。
注：我的数据库之前存储的是\\\\(,这时候需要手动处理成 \( ,然后再用 \\( 来匹配
例子如下：
数学公式：函数\\(a{{x}^{2}}+5x+b>0\\)的解集为\\(\\left\\{ x\\left| \\frac{1}{3}
我通过String.raw({ raw: content })处理后变成\\(,最后通过replace(/\\/g,'\')变成\(