怎樣解決Hybrid開發(fā)中的白屏問題

我們通常把移動(dòng)開發(fā)分為Web、Native和Hybrid，但其實(shí)Hybrid又可以細(xì)分的。最簡(jiǎn)單的是在Native中放一個(gè)WebView，然后加載一個(gè)兼容智能機(jī)的網(wǎng)站，其實(shí)就相當(dāng)于在用戶的手機(jī)上建立一個(gè)快捷方式，也算是占據(jù)用戶桌面的應(yīng)急用法吧。用這種方法要注意檢測(cè)網(wǎng)絡(luò)是否正常，不正常要給予提示，否則蘋果是不予通過的。第二種是將Web相關(guān)文件全部放在本地，數(shù)據(jù)庫(kù)一般用Sqlite做本地存儲(chǔ)，用戶就算不聯(lián)網(wǎng)也能工作。第三種可能是以Native為主，在某些特定的模塊才會(huì)用到WebView。

其實(shí)要我說，只有第二種才算是真正的Hybrid，話說Hybrid這個(gè)詞可真難聽，翻譯過來的詞是雜種、雜交，既然大家都這么用，我也就隨了吧。很重要的一點(diǎn)是Native和Web有沒有交互，沒有的不算，你直接在WebView中加載一個(gè)HTML頁(yè)面，這算哪門子的Hybrid開發(fā)，這種也談不上什么技術(shù)含量了，沒什么好講的。你這種開發(fā)很難模擬Native的體驗(yàn)嘛，用戶一看就不對(duì)啊，我說的Hybrid開發(fā)是那種多數(shù)用戶看不出差別的。

之所以我要把Hybrid開發(fā)的種類講清楚，是因?yàn)樗鼈冇龅降陌灼羻栴}有所不同，有些白屏問題是可以通過技術(shù)解決的，有些是需要通過設(shè)計(jì)上去解決的，通常我們說的白屏有三種。

第一種是頁(yè)面切換帶來的白屏，就是你從index.html跳轉(zhuǎn)到product.html會(huì)出現(xiàn)的白屏，嵌個(gè)WebView就加載一個(gè)網(wǎng)站最容易出現(xiàn)這種問題。這個(gè)問題只能從設(shè)計(jì)上解決，技術(shù)上是無法解決的，或者解決起來比開發(fā)一個(gè)Native程序成本還高。正確的做法應(yīng)該是避免頁(yè)面之間的跳轉(zhuǎn)，將所有的內(nèi)容放入到一個(gè)HTML中，通過CSS的Display屬性來切換View。

第二種是因?yàn)轫?yè)面過長(zhǎng)帶來的白屏，在iOS的WebView中，如果頁(yè)面內(nèi)容過長(zhǎng)，iOS是不會(huì)一次渲染完成的，所以太長(zhǎng)的時(shí)候，就會(huì)產(chǎn)生一種像Phtoshop中那種透明背景的方格效果。這個(gè)問題最好的解決方法還是從設(shè)計(jì)上入手，避免這種過長(zhǎng)的滾動(dòng)。使用iScroll做滾動(dòng)可以解決部分問題，但還是不能太長(zhǎng)。

第三種白屏是啟動(dòng)的時(shí)候有討厭的白屏，因?yàn)閃ebView加載HTML并渲染有一定的時(shí)間，用戶一打開你的App，WebView還沒有加載并渲染完比，白屏出現(xiàn)了。這種情況解決要用一些技巧，iOS可以用兩個(gè)View，一個(gè)View放上Loading畫面，另一個(gè)View加載HTML，當(dāng)HTML加載完畢后，用Javascript通知Native，收到HTML加載完比后Native代碼負(fù)責(zé)切換View即可。

有人肯定要問，為什么不直接用Objective-c代碼寫WebView的onLoad事件？很簡(jiǎn)單，因?yàn)長(zhǎng)oad完成可能還有很多事要做，而且一般要延時(shí)300毫秒再切換View才能保證白屏不出現(xiàn)。你可能要再問了，直接用延時(shí)不好么，為什么要這么麻煩？不同的機(jī)器性能不一，而且有些時(shí)候內(nèi)存占得多加載可能就慢點(diǎn)，直接延時(shí)太死。

本文來自成都品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)公司-創(chuàng)新互聯(lián)

本文名稱：怎樣解決Hybrid開發(fā)中的白屏問題
URL網(wǎng)址：http://www.muchs.cn/news28/316278.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、企業(yè)網(wǎng)站制作、云服務(wù)器、網(wǎng)站策劃、微信公眾號(hào)、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)