怎样解决Hybrid开发中的白屏问题

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

其实要我说，只有第二种才算是真正的Hybrid，话说Hybrid这个词可真难听，翻译过来的词是杂种、杂交，既然大家都这么用，我也就随了吧。很重要的一点是Native和Web有没有交互，没有的不算，你直接在WebView中加载一个HTML页面，这算哪门子的Hybrid开发，这种也谈不上什么技术含量了，没什么好讲的。你这种开发很难模拟Native的体验嘛，用户一看就不对啊，我说的Hybrid开发是那种多数用户看不出差别的。

之所以我要把Hybrid开发的种类讲清楚，是因为它们遇到的白屏问题有所不同，有些白屏问题是可以通过技术解决的，有些是需要通过设计上去解决的，通常我们说的白屏有三种。

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

第二种是因为页面过长带来的白屏，在iOS的WebView中，如果页面内容过长，iOS是不会一次渲染完成的，所以太长的时候，就会产生一种像Phtoshop中那种透明背景的方格效果。这个问题最好的解决方法还是从设计上入手，避免这种过长的滚动。使用iScroll做滚动可以解决部分问题，但还是不能太长。

第三种白屏是启动的时候有讨厌的白屏，因为WebView加载HTML并渲染有一定的时间，用户一打开你的App，WebView还没有加载并渲染完比，白屏出现了。这种情况解决要用一些技巧，iOS可以用两个View，一个View放上Loading画面，另一个View加载HTML，当HTML加载完毕后，用Javascript通知Native，收到HTML加载完比后Native代码负责切换View即可。

有人肯定要问，为什么不直接用Objective-c代码写WebView的onLoad事件？很简单，因为Load完成可能还有很多事要做，而且一般要延时300毫秒再切换View才能保证白屏不出现。你可能要再问了，直接用延时不好么，为什么要这么麻烦？不同的机器性能不一，而且有些时候内存占得多加载可能就慢点，直接延时太死。

本文来自成都品牌网站建设网站设计公司-创新互联

本文名称：怎样解决Hybrid开发中的白屏问题
URL网址：/news28/316278.html

成都网站建设公司_创新互联，为您提供静态网站、企业网站制作、云服务器、网站策划、微信公众号、网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联