常见白屏问题

目前在对接客户技术支持上,发现反馈页面白屏的问题是最多的。我们经过排查,发现白屏问题往往都是由客户自己的代码引起的。
常见的原因可分为以下几种:

1.h5页面语法使用不恰当

在低版本(iOS 8,9系统)的iOS或Android(4.4以下)上不支持,导致页面显示白屏,如:

  • 1.使用了es6的语法(如 let ),但是本身代码没有做es5的自动适配

  • 2.引入了三方外部插件,外部插件语法存在兼容性问题

2.jsn页面:class用法不恰当

如以下写法

<div :class="item.buy=='20'?'desc':''"></div>

:class 要求是数组,需要加个[]
不然会报以下错误

TypeError: second argument to Function.prototype.apply must be an Array-like object (evaluating 'u.push.apply(u, o.class)')

3.jsn页面写了不支持的样式语法

jsnative环境和web环境有一些非常明显的差异,需要在开发过程中尽量规避,否则会造成应用无法启动、页面白屏或者页面报错的问题,具体标准参考 jsn开发注意事项

4.编译后的app.native.js或者app.js大小不对

5.页面逻辑问题

  • 字段undefined,导致列表加载不出来

  • array数组再转JSON,导致字段为空,影响数据列表的显示

  • 页面数据依赖网络接口,且页面没有默认的初始数据。导致在网络不好的情况下,接口数据没有获取到。从而导致页面列表数据空白等问题

6.jsn项目以H5页面的形式访问,如index.html#/index

解决方法:app.js中在应用启动的时候改变rem的计算模式,默认值为document,设置为screen时可以兼容移动端h5页面,此时deviceWidth的值等同于window.screen.width,从而计算出正确的rem值。

Light.start({
    remMode:"screen"
})

7.lightview的调试模式未关闭

lightview的调试模式如果忘记关闭了,直接去预览其他的工程也会白屏。

8.使用了离线包,网络不通

如果页面中使用了离线包,但是在本地却没有预置离线包,在网络比较差的情况下会出现白屏。