1***@163.com
1***@163.com
  • 发布:2020-06-16 17:30
  • 更新:2020-06-22 11:32
  • 阅读:925

【报Bug】MathJax用renderjs加载后,H5可以解析,APP端报错

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 7

HBuilderX类型: 正式

HBuilderX版本号: 2.7.9

手机系统: Android

手机系统版本号: Android 9.0

手机机型: 未知

页面类型: vue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

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>  

操作步骤:

test.vue 文件放到项目中看效果

预期结果:

test.vue 文件里的内容公式可以解析到

实际结果:

test.vue 文件在APP端报错了,报错内容为TypeError: Cannot read property 'bind' of undefined at view.umd.min.js:1

bug描述:

APP端报错 TypeError: Cannot read property 'bind' of undefined at view.umd.min.js:1,无法解析公式
用浏览器开发预览可以完成公式解析

2020-06-16 17:30 负责人:DCloud_UNI_GSQ 分享
已邀请:
chenli

chenli

可以改用katex库使用看看。这个库渲染速度也比较高

DCloud_UNI_GSQ

DCloud_UNI_GSQ

意思是 initMathJax 不存在
App端渲染层和逻辑层并不在同一个js运行环境,你的 renderjs 里并没有这个方法

  • 1***@163.com (作者)

    非常感谢,把initMathJax放到渲染层的methods后可以解析了

    2020-06-27 15:14

该问题目前已经被锁定, 无法添加新回复