记h5项目中在ios9白屏问题

2,234 阅读1分钟

h5项目在内嵌在app应用中,在ios9白屏,想到的解决方案

  1. 使用vconsole(腾讯开发的)一个插件,在手机应用中查看控制台信息
  2. 在ios9的safari浏览器中打开一个白屏页面的链接,查看报错信息
实际用到的是第二种方式
因为白屏,啥都没有也就没有vconsole的按钮,但是vconsole还是很有用的,拿个小本本记下来

1.在safari控制台发现报错信息

SyntaxError: Use of const in strict mode.

搜索结果

原来在webpack-dev-server的2.7.0以上版本中,在webpack-dev-server下的client/index.js文件中使用了es6的语法,而我们在使用babel-loader解析js的时候会将node_modules下的文件exculde,这就导致了报错!!! 解决方案

module: {
    rules: [
        {
            test: /.js$/,
            loader: 'babel-loader',
            include:[resolve('src'), resolve('node_modules/webpack_dev_server/client')]
        }
    ]
    
}

在解决了这个问题后,我的h5页面就可以正常展示啦,开心 2. 展示的样式不对,这个主要是position: unset样式不支持,改成position: initial

  1. 获取viewport的方式不对
// 这种方式在iso9下并不支持
document.getElementsByTagName('meta').viewport
// 改用
// 1. 在  <meta name='viewport' id='viewport' ...> 添加id为viewport
// 2. 通过getElementById获取对象,通过setAttribute设置content内容
document.getElementById('viewport').setAttribute('content', '。。。')
  1. vue在ios9系统下,数组在使用for in时,会循环两遍的问题
// 将for in改成for循环
for(let i = 0; i < items.length; i++){
    ...
}

以上

在此之前兼容问题很少弄,所以开始时,有些方,导致解决问题用时很长,用小本本记下来,以后按照流程走,不能方,要稳!