微信移动端页面报错Script error 问题追踪

858 阅读3分钟

问题还原:

负责开发一个移动端页面,在提交测试环境后,微信打开页面报错Scrpit error
在电脑上开发和调试页面是没有问题的,但是在移动端的环境下就会有问题

解决问题:

网上找了一下问题成因
    1. 跨域资源引用
    2. 采用了ES6写法

跨域问题首先被排除,这一块不由我负责,出错的可能性极低。
那问题就聚焦到第二点上,部分ES6高级语法在PC的chrome上不会报错,但是在手机的低版本内核上会报错

回想了一下代码,其实代码中使用高级语法的地方并不多

先将所有的let改成了var,报错还在,不是let的问题。然后就想到了js里面使用的fetch(),包含它的方法使使用了异步请求async/await,来返回一个promise对象,我马上就怀疑是async/await的问题(后续证明确实是它)。

使用了微信开发者工具调试代码,报错

    index.js:400 Uncaught ReferenceError: regeneratorRuntime is not defined

百度了一下错误,见blog.csdn.net/weixin_3379… ,需要安装一个babel-plugin-transform-runtime插件来协助babel进行转换,但是公司该项目中没有使用babel,只是用vue-cli搭了个结构而已。安装babel-plugin-transform-runtime插件又得有babel,安装方式一般是npm安装,但是在我这个项目里不能使用该方式,npm无效。遂想到去下载babel和babel-plugin-transform-runtime的原js文件,然后在页面中直接引入,找了很久没找到,最后也放弃了这种解决方式。

转换思路,如果不能解决ES6/ES5转换,只能放弃使用fetch()和async/await,使用ajax()实现请求,修改代码后,问题解决。

第二次出现问题

第二天,在部分手机上(安卓苹果都有)出现报错 “Script error”

和第一天一样的情况,但是问题只出现在部分机型上,我下意识的想到是ES6高级语法导致,先是修改了一切可疑的高级语法,但是问题并没有得到解决。最后多方求证,发现清理微信缓存后就会解决这个问题。推测是发布的时候没添加版本号,导致微信读取了缓存,然而缓存中的是错误的版本。

在清理缓存和给js添加版本号后,解决了Script Error的错误。但是发现还有部分手机虽然不会出现Script Error报错,但是部分css样式发生错误,在别的手机上能正常显示在该手机上不行。

最后修改css样式,解决问题。

后话

之后看了一下那台有问题的苹果11,发现它的系统为ios13,当前最新版本为ios15,css出现错误是否可能是ios版本问题呢?或者是nignx强缓存问题?