部分安卓手機h5頁面出現空白頁面

一 問題出現

H5 頁面上線後,部分用戶反饋頁面顯示空白. 經問題排查頁面空白的手機主要是vivo和oppo手機且andriod系統版本較低. 測試機顯示空白的版本是andriod 5.1.1 版本.本項目是在jsp頁面中引入的vue

二 問題排查

1. 在瀏覽器中顯示正常. 不會出現空白. 通過抓包工具發現抓取的文件用瀏覽器也會出現空白頁面的,且沒有報錯信息.
2. 通過網上搜索和需求幫助, 定位到問題是由於es5 不兼容 es6, 會導致很多問題.要解決問題就要把es6的js轉碼成 es5的js
3. 根據vue官網上發現vue2.0對於ie8是不支持的.就考慮到是不是由於瀏覽器的原因.查看出現問題的手機內嵌瀏覽器信息爲.
   在瀏覽器中輸入 javascript:alert(navigator.userAgent)
   會彈出
   Mozilla/5.0 (Linux;Andriod 5.1.1; vivo X7 Build/LMY47v;wv) AppleWebkit/537.36(KHTML,like Gecko) Chrome/62.0.3202.84 Mobile Safari/537.36

這些也看不懂,就直接用電腦中的ie瀏覽器打開出現問題的h5頁面.而且發現了報錯信息. 如SCRIPT1003: 缺少 ‘:’ 等信息,可以找到對應的行.

三 問題解決

通過找到的報錯位置,發現可能是vue2.0中的語法在ie瀏覽器不能正確的解析. 可以一個一個查如何改寫成es5的寫法.當然這樣比較麻煩,可以用轉碼的工具

1. 轉碼方法一:
   在線轉碼的地址https://es6console.com/ 通過輸入自己寫的js 會轉碼爲es5的js. 修改對應的報錯函數.解決問題.

2. 轉碼方法二:

1 首先全局安裝Babel。  npm install -g babel-cli

2  Babel的配置文件是.babelrc   {
  "presets": [],
  "plugins": []
}

3  presets字段設定轉碼規則
# ES2015轉碼規則
$ npm install --save-dev babel-preset-es2015

4 我們需要將這些規則加入到.babelrc中去
{
    "presets": [
      "es2015",
      "react",
      "stage-2"
    ],
    "plugins": []
  }

5 轉碼、轉碼的規則：
# 轉碼結果輸出到標準輸出
$ babel test.js
 
# 轉碼結果寫入一個文件
# --out-file 或 -o 參數指定輸出文件
$ babel a.js --out-file b.js
# 或者
$ babel a.js -o b.js
 
# 整個目錄轉碼
# --out-dir 或 -d 參數指定輸出目錄
$ babel src --out-dir lib
# 或者
$ babel src -d lib
 
# -s 參數生成source map文件
$ babel src -d lib -s

把報錯的方法修改後,在ie瀏覽器中能夠正常展示,在出問題的手機中也可以正常顯示了.

本次出現的問題是vue中的函數定義的語法導致的

1. Vue2.0 中的定義函數的寫法如下:
   修改前

methods: {
    setType(val) {
    },
}

轉碼爲es5的寫法爲後

methods: {
    setType: function setType(val) {
    },
}

2. 遍歷集合方法修改
   修改前:

list[0].orderList.forEach((ord) => {
});

轉碼爲es5的寫法爲後

list[0].orderList.forEach(function (ord) {
});