林增坦

（仰恩大學(xué) 福建 泉州 362000）

1 引言

隨著掌上設(shè)備的普及和移動(dòng)4G服務(wù)的推廣，高校學(xué)生群體獲取網(wǎng)絡(luò)信息的方式已經(jīng)從桌面設(shè)備轉(zhuǎn)移到了掌上設(shè)備，因原生開發(fā)要實(shí)現(xiàn)跨平臺(tái)，開發(fā)和維護(hù)的成本很高，而Web開發(fā)的設(shè)備訪問能力差。為此，引入Hybrid混合開發(fā)，解決設(shè)備多樣化帶給傳統(tǒng)移動(dòng)開發(fā)的諸多限制，它是一種新的移動(dòng)開發(fā)模式，它所開發(fā)產(chǎn)生的應(yīng)用稱為Hybrid App。Web開發(fā)產(chǎn)生的應(yīng)用稱為Web app。Hybrid App(混合模式移動(dòng)應(yīng)用)兼具“Native App良好用戶交互體驗(yàn)的優(yōu)勢(shì)”和“Web App跨平臺(tái)開發(fā)的優(yōu)勢(shì)”[1]。

2 總體設(shè)計(jì)

2.1 混合的總體架構(gòu)設(shè)計(jì)

本系統(tǒng)APP架構(gòu)設(shè)計(jì)采用三層結(jié)構(gòu)設(shè)計(jì)見圖1所示。

圖1 混合的總體架構(gòu)設(shè)計(jì)圖示

2.2 通信及接口設(shè)計(jì)

混合開發(fā)中，通信層的設(shè)計(jì)是首先要解決的內(nèi)容，系統(tǒng)的邏輯性工作是以通信層為基礎(chǔ)的。簡(jiǎn)單地講就是完成Native和H5之間的信息往來，其具體通信方法見圖2所示[2]。

圖2 通信層的原理圖示

私有協(xié)議實(shí)現(xiàn)通信，當(dāng)一個(gè)APP被安裝完成，會(huì)在手機(jī)操作系統(tǒng)上注冊(cè)一個(gè)私有協(xié)議，手機(jī)瀏覽器無法全部識(shí)別，其將不識(shí)別部分交給操作系統(tǒng)去處理，操作系統(tǒng)幫忙查找能夠識(shí)別該私有協(xié)議的APP。

為了解決JavaScript中引發(fā)的進(jìn)程阻塞問題，確保有序地調(diào)用H5。將兩者之間的通訊接口設(shè)計(jì)，模仿JSONP的通信思路，將信息請(qǐng)求方法模仿request對(duì)象的方法，將信息回復(fù)方法模仿response對(duì)象方法[3]。則一次通信的回路涉及的操作：

Step1：請(qǐng)求方法調(diào)用一個(gè)接口，發(fā)送一個(gè)同時(shí) 帶有相關(guān)參數(shù)和自身生成的簽名的請(qǐng)求給被請(qǐng)求方；

Step2：被請(qǐng)求方對(duì)該請(qǐng)求信息做出相應(yīng)并處理，并發(fā)送一個(gè)帶有相關(guān)參數(shù)及其自身生成的簽名的回復(fù)給請(qǐng)求方；

Step3：請(qǐng)求方憑借其簽名查找回調(diào)方法入口，并執(zhí)行該方法。

2.3 UI與交互的交付設(shè)計(jì)

混合開發(fā)的目的：全面綜合H5和Native的優(yōu)點(diǎn)，營造更好地用戶體驗(yàn)。其中跨平臺(tái)、快速迭代能力是H5的優(yōu)勢(shì)，流暢性、系統(tǒng)API調(diào)用能力是Native的優(yōu)勢(shì)[4]。因此，如果要盡量發(fā)揮兩者的優(yōu)點(diǎn)，前端展示的內(nèi)容盡可能多地用H5來完成，針對(duì)JS語言在交互上的缺點(diǎn)，盡可能用Native本身的高交互性和并行處理、高的輸入輸出的性能等來彌補(bǔ)JS的缺點(diǎn)。概括說來，前者有內(nèi)容呈現(xiàn)上的優(yōu)勢(shì)，后者更具交互操作上的優(yōu)點(diǎn)，并根據(jù)具體情況對(duì)原生的WebView進(jìn)行整合與優(yōu)化，以加強(qiáng)H5的呈現(xiàn)效果。

重要的界面、多交互的界面用Native來開發(fā)；APP中的導(dǎo)航類UI依托原生開發(fā)來完成。通用類型的UI設(shè)計(jì)系統(tǒng)交給Native完成，系統(tǒng)的默認(rèn)UI設(shè)計(jì)交給Native完成。當(dāng)H5出項(xiàng)加載失敗或延遲時(shí)，系統(tǒng)會(huì)調(diào)用默認(rèn)UI，以免出現(xiàn)假死現(xiàn)象。

3 系統(tǒng)穩(wěn)定性及健壯性的解決方案

3.1 系統(tǒng)穩(wěn)定性的解決方案

Native要完成重要類型、導(dǎo)航類型、通用類型、公共類型的UI設(shè)計(jì)，還要充當(dāng)H5的運(yùn)行管理者的作用，它要提供H5運(yùn)行的資源管理、狀態(tài)監(jiān)控等功能，保證H5運(yùn)行的穩(wěn)定性和健壯性。

系統(tǒng)對(duì)H5提供離線訪問的策略來解決web app高延遲問題。離線訪問，就是把所需的H5在APP安裝時(shí)提前下載到用戶手機(jī)的存儲(chǔ)空間中，這大大提高了訪問H5的速度[5]。但是這必須考慮H5的動(dòng)態(tài)更新問題，否則H5的可用性無法保證。

首先，服務(wù)器必須要有H5的線上備份，用戶本地的H5被刪除或丟失時(shí)，可在線向服務(wù)器提取H5的線上備份，確保H5能用。另外，對(duì)一下兩種情況不使用前述的策略。一種是動(dòng)態(tài)的活動(dòng)頁面，更新頻率很大，開發(fā)成本很高；另一種是基本不用更新頁面，可節(jié)省存儲(chǔ)空間。

其次，通過原聲代碼對(duì)H5的資源類的多項(xiàng)請(qǐng)求操作實(shí)現(xiàn)動(dòng)態(tài)管理，完成線上與本地的H5靜態(tài)資源的同步，即形成一張兩處資源的映射表。

發(fā)布之前，H5以手機(jī)端HTTP代理的方式訪問本地資源。發(fā)布之后，H5被發(fā)送到離線包管理器，在這里完成進(jìn)行編譯打包，最后由離線包管理器借助相應(yīng)的推送通道把H5的更新傳送到手機(jī)端，手機(jī)端接收到對(duì)應(yīng)的更新指令后，執(zhí)行相應(yīng)的下載與校驗(yàn)工作。

然后，使用分包處理策略，解決H5資源多樣性的問題，分包時(shí)，將H5資源分兩大類，一類為高頻率更新代碼；另一類為低頻率更新的代碼[6]。執(zhí)行分包時(shí)，先將代碼進(jìn)行分類，再按其具體類型進(jìn)行分別分包，最后在手機(jī)存儲(chǔ)空間中進(jìn)行分類存儲(chǔ)。

最后，通過解析線上與離線資源的同步映射表解決離線資源調(diào)用。系統(tǒng)中借鑒了較好的解決方案，讓H5生成映射規(guī)則，即線上與離線資源的同步映射表，而Native作為H5的容器通過解析這張映射表就可輕松地使用本地資源了。系統(tǒng)內(nèi)部的資源訪問流程見圖3所示。

圖3 系統(tǒng)內(nèi)部的資源訪問流程圖示

上圖中，代理服務(wù)表示發(fā)布之前H5以手機(jī)端HTTP代理的方式訪問本地資源。

3.2 系統(tǒng)安全性的解決方案

系統(tǒng)的安全，指的是埋點(diǎn)數(shù)據(jù)輸入與傳送的安全，及本地硬件資源的訪問安全，都是安全要考慮的基本問題。

在系統(tǒng)中，用戶與系統(tǒng)交互的過程中所輸入的埋點(diǎn)數(shù)據(jù)及頁面跳轉(zhuǎn)的痕跡統(tǒng)一讓Native負(fù)責(zé)記錄和報(bào)備。另外將Native對(duì)本地資源的調(diào)用能力封裝成接口；H5調(diào)用這些接口對(duì)本地的資源進(jìn)行間接訪問，如截屏、喇叭、麥克風(fēng)、攝像頭、定位等功能的調(diào)用都一次需要調(diào)用相應(yīng)的接口。

4 數(shù)據(jù)庫設(shè)計(jì)

4.1 關(guān)鍵實(shí)體結(jié)構(gòu)及關(guān)系設(shè)計(jì)

（1）書籍信息實(shí)體結(jié)構(gòu)圖如下：

圖4 書籍信息實(shí)體結(jié)構(gòu)圖

（2）已借書籍信息實(shí)體結(jié)構(gòu)E-R圖如下：

圖5 借出記錄信息實(shí)體結(jié)構(gòu)圖

（3）實(shí)體之間的關(guān)系E-R圖如下：

圖6 實(shí)體之間的關(guān)系E-R圖

5 界面設(shè)計(jì)

APP界面設(shè)計(jì)采用簡(jiǎn)潔易用的理念，配色與本學(xué)院的網(wǎng)站主頁相搭配協(xié)調(diào)，主界面及關(guān)鍵界面的設(shè)計(jì)見圖7、8所示。

圖7 個(gè)人信息中心界面設(shè)計(jì)圖示

圖8 當(dāng)前借閱界面設(shè)計(jì)圖示

6 結(jié)語

總之，Hybrid開發(fā)的高效帶來了開發(fā)低預(yù)算，加之其跨平臺(tái)的亮點(diǎn)；其增量式的版本更新，為舊版的BUG修復(fù)帶來便捷，這些足以讓很多開發(fā)者爭(zhēng)先去嘗試。

但是，Hybrid開發(fā)不是萬能鑰匙，用戶對(duì)APP的體驗(yàn)上，與Native APP相比是有差別的，本課題中分析了使用Hybrid開發(fā)圖書館APP的詳細(xì)過程，歸結(jié)起來無非就是在解決如下4個(gè)問題：

（1）如何劃分Native與HTML5之間的服務(wù)點(diǎn)

（2）如何解決Native與HTML5之間通信

（3）如何設(shè)計(jì)離線更新過程、系統(tǒng)分包、系統(tǒng)資源訪問等邏輯過程

（4）如何封裝底層的通信API接口

雖然Hybrid開發(fā)是一種好的解決方案，但不是必選方案，在其應(yīng)用還沒有十分成熟之前，要慎重選擇。