一问题出现

H5 页面上线后,部分用户反馈页面显示空白. 经问题排查页面空白的手机主要是vivo和oppo手机且andriod系统版本较低. 测试机显示空白的版本是andriod 5.1.1 版本.本项目是在jsp页面中引入的vue

二问题排查

在浏览器中显示正常. 不会出现空白. 通过抓包工具发现抓取的文件用浏览器也会出现空白页面的,且没有报错信息.
通过网上搜索和需求帮助, 定位到问题是由于es5 不兼容 es6, 会导致很多问题.要解决问题就要把es6的js转码成 es5的js
根据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的写法.当然这样比较麻烦,可以用转码的工具

转码方法一:
在线转码的地址https://es6console.com/ 通过输入自己写的js 会转码为es5的js. 修改对应的报错函数.解决问题.
转码方法二:

1 首先全局安装Babel。  npm install -g babel-cli2  Babel的配置文件是.babelrc   {"presets": [],"plugins": []
}3  presets字段设定转码规则
# ES2015转码规则
$ npm install --save-dev babel-preset-es20154 我们需要将这些规则加入到.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中的函数定义的语法导致的

Vue2.0 中的定义函数的写法如下:
修改前

methods: {setType(val) {},
}

转码为es5的写法为后

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

遍历集合方法修改
修改前:

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

转码为es5的写法为后

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

部分安卓手机h5页面出现空白页面相关推荐

解决安卓手机H5页面input获得焦点时页面挤压或者底部上移
在安卓手机上,如果底部有一个定位的元素比如一个input 或者一个 footer 在正常情况下是没有问题的, 但是一旦input获得焦点,那么定位元素会被软键盘向上推,ios手机没有问题此时解决办 ...
博客园首页新随笔联系订阅管理如何使用电脑上的谷歌浏览器来调试安卓手机上的移动端页面...
本教程用的是我自己的手机三星A9,其他安卓手机方法也相同. 第一步首先你得打开手机的开发者选项,确保USB调试和通过USB验证应用程序保持打开状态,如图所示第二步,确保你的电脑和安卓手机都已经安装了 ...
Android通过Chrome Inspect调试WebView的H5 App出现空白页面的解决方法（不需要FQ）
本文系博主原创,未经许可不得转载.如未经本人同意,私自转载或盗取资源提供下载,本人保留追究其法律责任的权利. 调试基于WebView的Hybrid App最舒服的工具当然是Chrome自带的开发者工具 ...
如何使用电脑上的谷歌浏览器来调试安卓手机上的移动端页面
本教程用的是我自己的手机三星A9,其他安卓手机方法也相同. 第一步首先你得打开手机的开发者选项,确保USB调试和通过USB验证应用程序保持打开状态,如图所示第二步,确保你的电脑和安卓手机都已经安装了 ...
安卓手机H5页面判断wifi还是数据
前言这个小事件是公司有这个需求,然我我去解决,虽然也是网上找的,也找了挺长时间,写这文章主要是让大家,碰到这个需求的时候有幸能碰到这篇文章的话会更方便一点直接上代码,复制过去就能用 functio ...
为什么php打开网页空白的_PHP页面出现空白页面该怎么办
以下为引用的内容: error_reporting(report_level); 以下为引用的内容: 如果参数 level 未指定,当前报错级别将被返回.下面几项是 level 可能的值:值 ...
h5页面输入框在安卓手机上被键盘挡住
h5页面输入框在安卓手机上被键盘挡住 1.弹窗的解决方法 .floatbox{position:absolute; top:50%; right:0; bottom:0; left:0; backgr ...
安卓手机键盘弹出导致h5页面错乱
安卓手机键盘弹出导致h5页面错乱特别是有表单的h5,点击input输入信息的时候提交的按钮.以及定位到下方的图片都会被挤上来. 解决方法如下: <div class="bg_img& ...
记录：app内嵌H5页面分享到微信后，在安卓手机打开白屏，苹果手机正常渲染的问题始末
**背景:**app内嵌的一个个人名片页面需要分享到微信,测试环境下,分享到微信后,安卓和苹果手机都能正常渲染,生产环境苹果手机没问题,安卓手机打开分享的链接,页面一直空白. **原因分析:**单独加 ...

部分安卓手机h5页面出现空白页面

一问题出现

二问题排查

三问题解决

部分安卓手机h5页面出现空白页面相关推荐

最新文章

热门文章

部分安卓手机h5页面出现空白页面

一 问题出现

二 问题排查

三 问题解决

部分安卓手机h5页面出现空白页面相关推荐

最新文章

热门文章

一问题出现

二问题排查

三问题解决