关于低版本safari浏览器打开h5白屏这件事

506 阅读2分钟

总体情况

大体情况是这样的,我们这做的app,内嵌h5,突然一天早上测试说,哎呀,进不去啦,白屏啦....我:...

排查思路

  1. 找ios要进入h5的链接,手机版本(因为并不是所有的手机都进不去),问了一下,iPhone 11,ios 11版本系统。(在线嫌弃,这是多少年前的系统了....)
  2. 链接感觉没问题。

完了,应该是h5这边的问题,看了一下手机上的效果。进入h5效果是:首先有滚动条,后面就没了,猜测应该是加载项目资源的时候,某行代码报错了,因为别的手机没问题,猜测,应该是写的某些代码会涉及到浏览器版本的原因。难道是某些ES6语法不兼容?

借助第三方工具排查

因为看不出什么报错信息,所以查了一下,可以安装Xcode来看h5报了什么错

1.jpg

好家伙,不识别扩展运算符

解决方法

  1. 引入babel转义扩展运算符的插件,注意插件名叫plugin-proposal-object-spread,

:查找插件,可以在这个npm官网查找。我是直接下载的babel包,然后把要的插件安装包放到项目@babel下面的。(这里有个坑,待会说) 2.jpg 引入之后,坑来了,npm run serve准备飞起,完了,报错了,打开plugin-proposal-object-spread/lib/index.js发现,要引用的包这个没有: plugin-syntax-object-spread,所以,

  1. 继续安装plugin-syntax-object-spread。为了以防万一,require引用的包文件,都可以检查一下是否引入。 3.jpg

  2. npm run serve,准备再次飞起,完了,报错了

4.jpg

找到相对应的文件,发现api.targets() is not a function,所以找到相对应的文件,

6.jpg

应该是这个文件helperPluginUtils有点问题.

5.jpg

将这个包下面的index.js替换成最新的。

  1. npm run serve,成功。
  2. npm run build --test,打包成功。
  3. 项目可以成功打开了。

总结

可能就是项目是内网开发,所以有的依赖包太老了,比如babel,建议安装最新版babel,这些扩展运算符依赖插件都会包含进去,省的自己替换是有风险的,像我上面虽然替换完文件可以解决问题,但不排除会有其他问题发生。