部分安卓手机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) {
});