收藏本站|设为首页

您现在的位置: 首页 > 新闻中心 > 建站经验 > 详细内容

如不美观解决Hybrid开发中的白屏问题

2012-09-04 10:25 来源: 卓杰科技 www.zhuojie.net [ ]

有人必定要问,为什么不直接用Objective-c代码写WebView的onLoad事务?很简单,因为Load完成可能还有良多事要做,而且一般要延时300毫秒再切换View才能保证白屏不呈现。你可能要再问了,直接悠揭捉时欠好么,为什么要这么麻烦?分歧的机械机能纷歧,而且有些时辰内存占得多加载可能就慢点,直接延时太死。

这两天有人在邮件和微博上问我,同化(Hybrid)开发若何解决白屏的问题,原本我是打算要写一写Hybrid开发的各类问题,但看来文章可能会太长,所以仍是先谈谈白屏的问题吧。我感受Android如不美观使用到Hybrid手艺的,也是可以借鉴的,解决思绪是一样的。

第一种是页面切换带来的白屏,就是你年夜index.html跳转到product.html会呈现的白屏,嵌个WebView就加载一个网站最轻易呈现这种问题。这个问题只能年夜设计上解决,手艺上是无法解决的,或者解决起来比开发一个Native轨范成本还高。正确的做法应该是避免页面之间的跳转,将所有的内容放入到一个HTML中,经由过程CSS的Display属性来切换View。

其实要我说,只有第二种才算是真正的Hybrid,话说Hybrid这个词可真难听,翻译过来的词是杂种、杂交,既然巨匠都这媚暌姑,我也就随了吧。很主要的一点是Native和Web有没有交互,没有的不算,你直接在WebView中加载一个HTML页面,这算哪门子的Hybrid开发,这种也谈不上什么手艺含岑岭,没什么好讲的。你这种开发很难模拟Native的体验嘛,用户一看就不合错误啊,我说的Hybrid开发是那种年夜都用户看不出分歧的。

我们凡是把移动开发分为Web、Native和Hybrid,但其实Hybrid又可以细分的。最简单的是在Native中放一个WebView,然后加载一个兼容智能机的网站,其实就相当于在用户的手机上成立一个快捷体例,也算是占有用户桌面的应急用法吧。用这种体例要注重检测收集是否正常,不正常要给以提醒,否则苹不美观是不予经由过程的。第二种是将Web相关文件全数放在当地,数据库一般用Sqlite做当地存储,用户就算不联网也能工作。第三种可能是以Native为主,在某些特定的模块才会用到WebView。

之所以我要把Hybrid开发的种类讲清嚣张,是因为它们碰着的白屏问题有所分歧,有些白屏问题是可以经由过程手艺解决的,有些是需要经由过程设计上去解决的,凡是我们说的白屏有三种。

第三种白屏是启动的时辰有厌恶的白屏,因为WebView加载HTML并衬着有必然的时刻,用户一打开你的App,WebView还没有加载并衬着完比,白屏呈现了。这种情形解决要用一些技巧,iOS可以用两个View,一个View放上Loading画面,另一个View加载HTML,当HTML加载完毕后,用Javascript通知Native,收到HTML加载完比后Native代码负责切换View即可。

文章来历:涂雅博客

第二种是因为页面过长带来的白屏,在iOS的WebView中,如不美观页面内容过长,iOS是不会一次衬着完成的,所以太长的时辰,就会发生一种像Phtoshop中那种透明布景的方格效不美观。这个问题最好的解决体例仍是年夜设计上入手,避免这种过长的滚动。使用iScroll做滚动可以解决部门问题,但仍是不能太长。