趙文艷 唐山市職業(yè)教育中心

前言

本文所討論的正是通過中間件的技術(shù)支撐，通過Web對(duì)移動(dòng)端的應(yīng)用進(jìn)行開發(fā)，并能在不同平臺(tái)穩(wěn)定運(yùn)行。隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，人們把更多的精力都用在了移動(dòng)端應(yīng)用的研發(fā)上，到底使用什么技術(shù)來對(duì)應(yīng)用進(jìn)行開發(fā)是一個(gè)必須要思考的問題。就本文而言，我們選用了Web技術(shù)，因此我們應(yīng)該先對(duì)Hybrid App進(jìn)行理解。Web App是通過訪問瀏覽器，下載全部的Web App而交互。近些年隨著HTML5的崛起，其表現(xiàn)能力提升了很多，同時(shí)緩存功能的加入促成了Web App的存在性。但需要指出的是，Web App必須在瀏覽器中運(yùn)行，所以對(duì)網(wǎng)速非常依賴，這就造成客戶對(duì)其的體驗(yàn)感不夠，這些問題都有待于進(jìn)一步解決。相比于成本，大企業(yè)一般更在乎應(yīng)用的性能，所以一般會(huì)選擇Native App，也就是原生應(yīng)用的開發(fā)。這種類型的App需要對(duì)各種系統(tǒng)平臺(tái)進(jìn)行開發(fā)，才能在最大程度上保持對(duì)客戶的覆蓋，但這種方式確實(shí)會(huì)大大提高成本預(yù)算。在這種背景下，Hybrid App就成為了大部分公司所選擇的技術(shù)方案。本文對(duì)Hybrid App的實(shí)現(xiàn)原理進(jìn)行了簡(jiǎn)述。

1 使用中間件的技術(shù)完成Hybrid App

當(dāng)前，發(fā)展的速度決定了應(yīng)用開發(fā)的成本和效率都需要有更好的控制。HTML5因?yàn)榫哂谐杀镜秃托矢叩奶攸c(diǎn)，可以使應(yīng)用中間件技術(shù)的Hybrid App得到廣泛關(guān)注。想要開發(fā)Hybrid App模式，我們需要先弄清Native層和Web層的功能分別是什么。前者主要用來提供宿主而后者則可根據(jù)實(shí)際需要完成業(yè)務(wù)功能。二者的交互則是使用JS法相互調(diào)用。此外，我們還需要注意兩個(gè)問題，一個(gè)是如何儲(chǔ)存資源，一個(gè)是如何避免白屏。文本和文件的儲(chǔ)存都可以通過HTML5實(shí)現(xiàn)，但有時(shí)會(huì)有一些延時(shí)的情況出現(xiàn)。使用HTML5，會(huì)因?yàn)槠湫阅艿脑驇沓霈F(xiàn)白屏的可能性，這一般可以通過預(yù)加載的方法來解決。預(yù)加載是在用戶使用移動(dòng)設(shè)備的空閑期出現(xiàn)已經(jīng)加載完的頁面，這樣就能使渲染預(yù)先完成，當(dāng)用戶進(jìn)行點(diǎn)擊的時(shí)候，預(yù)加載畫面直接顯示，從而去除了渲染的時(shí)間，這樣就可以避免發(fā)生白屏的情況。

2 移動(dòng)設(shè)備端GMF運(yùn)動(dòng)應(yīng)用的設(shè)計(jì)

對(duì)GMF運(yùn)動(dòng)應(yīng)用進(jìn)行可以適用于包括ios和Android各種終端產(chǎn)品的設(shè)計(jì)，使其實(shí)現(xiàn)各種實(shí)用功能，包括定位、緩存、支付等等。這款產(chǎn)品在各方面比較完備，因此對(duì)Native的要求很高，對(duì)終端設(shè)備的性能也有一定的要求。如前文所述，可以使用Hybrid App的中間件技術(shù)來實(shí)現(xiàn)這個(gè)產(chǎn)品，因?yàn)檫@樣可以更好地控制成本和開發(fā)時(shí)間。Web技術(shù)可以實(shí)現(xiàn)使用同一套代碼，這既能解決各種不同終端設(shè)備的匹配問題，也可以縮短產(chǎn)品開發(fā)的周期。根據(jù)各種中間件優(yōu)劣性的對(duì)比，最后選擇了HTML5對(duì)其進(jìn)行開發(fā)。首先，在加載文檔的時(shí)候，需要以一定的順序進(jìn)行加載。其次，需要確定界面的加載方式和如何構(gòu)建架構(gòu)。在基于Web技術(shù)的App中，界面的加載和架構(gòu)的搭建是非常重要的兩項(xiàng)工作。開發(fā)者得使用HTML5對(duì)API進(jìn)行封裝，以實(shí)現(xiàn)Webview界面的加載，進(jìn)而提升其性能。至于搭建頁面的問題，我們可以根據(jù)上下拉刷新或者文件目錄結(jié)構(gòu)兩種方式來進(jìn)行構(gòu)建。通常情況下，應(yīng)用界面的首頁都會(huì)有導(dǎo)航欄，這可以使用div切換進(jìn)行構(gòu)建，其速度也會(huì)同時(shí)提高。具體到GMF運(yùn)動(dòng)應(yīng)用，其首頁可以包括導(dǎo)航欄和頁頭，詳細(xì)內(nèi)容可按導(dǎo)航欄菜單來建立與其對(duì)應(yīng)的子窗口。至于刷新頁，基本都是用DIV技術(shù)模擬出下拉后回彈的效果。再次就是嵌入第三方的SDK。大部分的SDK都集成在API中，在API封裝完畢之后，只要將其根據(jù)適當(dāng)流程調(diào)用即可。最后就是打包分發(fā)和優(yōu)化。對(duì)于打包和分發(fā)的問題，可以在manifest.JSon中將全部信息填好，然后對(duì)Appid、啟動(dòng)圖標(biāo)、加載模塊等進(jìn)行配置，就可以將其一鍵上傳到云端服務(wù)器，然后即可打包。打包結(jié)束后，就可以得到一個(gè)安裝包，可根據(jù)需要將其上傳到Apple Store等各個(gè)平臺(tái)的分發(fā)渠道來完成分發(fā)。HTML5在體驗(yàn)方面一直都存在一些問題，在ios系統(tǒng)中的表現(xiàn)還能相對(duì)較好，但在Android系統(tǒng)中，尤其是在一些低端設(shè)備中，則有卡頓等情況的出現(xiàn)。因此還需要對(duì)其進(jìn)行一定程度的優(yōu)化，使用戶擁有更好的體驗(yàn)。

3 結(jié)語

綜上所述，簡(jiǎn)單分析了以Web相關(guān)技術(shù)進(jìn)行的Hybrid移動(dòng)端應(yīng)用的中間件技術(shù)，以HTML5作為架構(gòu)開發(fā)應(yīng)用的細(xì)節(jié)，使GMF運(yùn)動(dòng)應(yīng)用得以實(shí)現(xiàn)。這種開發(fā)可以降低成本，但其也不可避免的有一些局限性。雖然如此，但是對(duì)于大多數(shù)開發(fā)者來說，如果他們想占領(lǐng)市場(chǎng)，那么使用這種中間件技術(shù)的Hydrid還是一個(gè)非常不錯(cuò)的選擇。我們也有理由相信隨著Web相關(guān)技術(shù)的不斷優(yōu)化，這樣的應(yīng)用和產(chǎn)品必然會(huì)有更加廣闊的未來。