vivo\oppo 手機出現 App 端內部分 H5 頁面白屏

1、問題背景

在端內首頁進入活動頁等 H5 頁面均白屏，出現白屏的手機型號集中在 oppo 和 vivo。

2、解決方式

經排查發如今出現問題的手機內會報 Uncaught SyntaxError: Unexpected token … js 的錯誤，發現是打包後的組件文件出現的錯誤，再次定位發現是 oppovivo 部分版本手機不兼容 ES6，出現問題的組件是 Swiper，發現頁面內引入 Swiper 的方式爲如下這種 npm 安裝組件包的方式：

考慮到也許是這種引入方式致使在項目打包時沒法處理 Swiper 組件的 ES6 語法致使的兼容問題，將引入方式換成如下這種方式引入：

成功解決了頁面白屏的問題。（除此以外能夠採用 cdn 的引用方式也能解決白屏問題。）

3、總結

低版本手機常常會出現語法不兼容問題，所以須要在項目中安裝語法轉換包，可是 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...