vivo\oppo 手机出现 App 端内部分 H5 页面白屏

一、问题背景

在端内首页进入活动页等 H5 页面均白屏，出现白屏的手机型号集中在 oppo 和 vivo。

二、解决方式

经排查发现在出现问题的手机内会报 Uncaught SyntaxError: Unexpected token … js 的错误，发现是打包后的组件文件出现的错误，再次定位发现是 oppovivo 部分版本手机不兼容 ES6，出现问题的组件是 Swiper，发现页面内引入 Swiper 的方式为以下这种 npm 安装组件包的方式：

考虑到也许是这种引入方式导致在项目打包时无法处理 Swiper 组件的 ES6 语法导致的兼容问题，将引入方式换成以下这种方式引入：

成功解决了页面白屏的问题。（除此之外可以采用 cdn 的引用方式也能解决白屏问题。）

三、总结

低版本手机经常会出现语法不兼容问题，因此需要在项目中安装语法转换包，但是 babel 只负责语法转换，例如将 ES6 语法转换为 ES5，但是如果部分对象、方法、浏览器本身不支持，例如：

• 全局对象：Promise 等
• 全局静态函数：Array.from、Object.assign 等
• 实例方法：Array.prototype.includes 等

此时需要引入 babel-polyfill 来模拟实现这些对象、方法。

参考文档：

1. https://www.jianshu.com/p/ceb... 【解决问题】
2. https://qemcs.com/2018/03/17/...
3. https://www.cnblogs.com/mei12...
4. https://www.jianshu.com/p/a5e...