基于AgentWeb 的Android 混合應(yīng)用設(shè)計(jì)與實(shí)現(xiàn)

楊權(quán)

（湖南省婦幼保健院信息中心，長(zhǎng)沙410000）

0 引言

自2007 年Android 技術(shù)出現(xiàn)以來，基于Android開發(fā)的移動(dòng)App 數(shù)量與日俱增，然而使用Android 開發(fā)移動(dòng)App 仍有一些弊端，例如：Android 版本間的兼容性問題；開發(fā)周期長(zhǎng)，維護(hù)成本高，調(diào)試?yán)щy；需要依賴第三方應(yīng)用商店的審核上架[3]；更新迭代周期長(zhǎng)。為此，國(guó)內(nèi)外機(jī)構(gòu)或個(gè)人嘗試使用移動(dòng)Web 技術(shù)構(gòu)建跨平臺(tái)的移動(dòng)應(yīng)用；國(guó)外出現(xiàn)了React Native、Titanium、PhoneGap 等技術(shù)框架，國(guó)內(nèi)較著名的有uni-app、5+App、WeX5 等框架。但是這些框架普遍存在可擴(kuò)展性差、更新緩慢等問題，不能滿足復(fù)雜的個(gè)性化需求，因此越來越多的開發(fā)者開始呼吁回歸原生應(yīng)用開發(fā)。鑒于此，我們既不完全采用Android 技術(shù)也不完全使用移動(dòng)Web 跨平臺(tái)技術(shù)開發(fā)移動(dòng)App 的所有功能與界面，而是根據(jù)需求變化將移動(dòng)App 界面分成“固定區(qū)域”和“易變區(qū)域”，“固定區(qū)域”采用Android 原生技術(shù)實(shí)現(xiàn)，“易變區(qū)域”采用HTML5（以下簡(jiǎn)稱H5）技術(shù)和MUI 技術(shù)實(shí)現(xiàn)，“固定區(qū)域”和“易變區(qū)域”之間的數(shù)據(jù)通信采用Android 第三方開源組件AgentWeb 實(shí)現(xiàn)。

1 主要技術(shù)簡(jiǎn)介

1.1 Android簡(jiǎn)介

Android 是Google 推出的開源手機(jī)操作系統(tǒng)，Android 基于Linux 平臺(tái)，由操作系統(tǒng)、中間件、用戶界面和應(yīng)用軟件組成[4]。使用Android 提供的SDK，應(yīng)用開發(fā)者可以開發(fā)個(gè)性化的移動(dòng)App。

1.2 AgentWeb簡(jiǎn)介

AgentWeb 是一個(gè)高度封裝的Android WebView[1]，屬于第三方開源組件。它解決了Android 原生Web-View 常見的問題，同時(shí)提供更多的功能，例如支持進(jìn)度條及自定義進(jìn)度條、文件下載、文件斷點(diǎn)續(xù)傳、簡(jiǎn)化JavaScript（以下簡(jiǎn)稱JS）通信等。實(shí)際上AgentWeb 相當(dāng)于一款A(yù)ndroid 小型瀏覽器庫(kù)。

1.3 MUI簡(jiǎn)介

MUI 以iOS 平臺(tái)UI 為基礎(chǔ)，補(bǔ)充部分Android 平臺(tái)特有的UI 控件[2]，提供基于HTML5 技術(shù)的折疊面板（accordion）、操作表（actionsheet）等UI 組件、窗口管理、事件管理、下拉刷新、上拉加載等功能，是一套很接近原生UI 的前端框架。

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

采用底部設(shè)置多個(gè)Tab 選項(xiàng)卡來布局主界面，分別為“首頁(yè)”、“選擇醫(yī)院”和“個(gè)人中心”；“首頁(yè)”分為資訊區(qū)和功能區(qū)，功能區(qū)以九宮格的形式顯示常用功能的圖標(biāo)和文字說明，點(diǎn)擊某個(gè)圖標(biāo)便能打開對(duì)應(yīng)的功能頁(yè)面；“選擇醫(yī)院”以列表的形式顯示醫(yī)院名稱，點(diǎn)擊某個(gè)醫(yī)院名稱便打開某個(gè)醫(yī)院的首頁(yè)；“個(gè)人中心”提供注冊(cè)、登錄、忘記密碼等功能，同時(shí)顯示個(gè)人相關(guān)記錄，例如：預(yù)約記錄、繳費(fèi)記錄、咨詢記錄等。

根據(jù)需求變化的頻率，將界面分為“固定區(qū)域”和“易變區(qū)域”，其中“固定區(qū)域”包括“首頁(yè)”，采用Android原生頁(yè)面實(shí)現(xiàn)；“易變區(qū)域”包括“選擇醫(yī)院”和“個(gè)人中心”，采用H5 頁(yè)面實(shí)現(xiàn)，如圖1 固定區(qū)域-首頁(yè)、圖2 易變區(qū)域-選擇醫(yī)院、個(gè)人中心所示。

圖1 固定區(qū)域-首頁(yè)

圖2 易變區(qū)域-選擇醫(yī)院、個(gè)人中心

3 Android原生頁(yè)面與H5頁(yè)面數(shù)據(jù)通信設(shè)計(jì)

Android 混合應(yīng)用中的H5 頁(yè)面不僅僅是展示數(shù)據(jù)，還能通過JS 代碼跟原生頁(yè)面進(jìn)行數(shù)據(jù)通信，實(shí)現(xiàn)特定的功能。

實(shí)現(xiàn)Android 原生頁(yè)面與H5 頁(yè)面數(shù)據(jù)通信分為三步：首先，在Android 工程中引用AgentWeb 第三方庫(kù)，用AgentWeb 代替Android WebView 顯示H5 頁(yè)面；其次，擴(kuò)展AgentWeb 提供的與JS 通訊的接口，自定義個(gè)性化接口供JS 調(diào)用；最后，在H5 頁(yè)面中編寫JS 函數(shù)供原生頁(yè)面調(diào)用。

Android 原生頁(yè)面與H5 頁(yè)面數(shù)據(jù)通信的過程如圖3 Native 與H5 數(shù)據(jù)通信原理所示。

圖3 Native與H5數(shù)據(jù)通信原理

4 具體實(shí)現(xiàn)

4.1 JS調(diào)用Android原生方法實(shí)現(xiàn)

（1）Android 項(xiàng)目中引入AgentWeb 依賴包：

（2）在Fragment 中定義AgentWeb 對(duì)象：

（3）定義與JS 通訊的接口類AndroidInterfaceWeb，里面定義了一套供JS 調(diào)用的方法：

（4）在Fragment 的onViewCreated 中初始化Agent-Web 對(duì)象，同時(shí)向JS 的window 對(duì)象中注冊(cè)agentWeb對(duì)象，該agentWeb 對(duì)象可以自定義名稱：

（4）JS 調(diào)用Android 原生方法

在H5 頁(yè)面的JS 代碼塊中使用window.agentWeb.原生方法名的形式調(diào)用Android 原生方法例如：window.agentWeb.NativeMethod1（）;

需要注意的是：window.agentWeb 中的agentWeb名字必須跟Fragment 向JS 的window 對(duì)象中注冊(cè)的agentWeb 名字保持一致。

4.2 Android調(diào)用JS方法

（1）在H5 頁(yè)面中定義JS 方法，例如：

（2）使用mAgentWeb.getJsAccessEntrace（）.quick-CallJs（JS 方法名，參數(shù)）形式調(diào)用，例如：mAgentWeb.getJsAccessEntrace（）.quickCallJs（"jsMethod1"）;mAgentWeb.getJsAccessEntrace（）.quickCallJs（"jsMethod2"，"這是jsMethod2 的入?yún)?）;

4.3 界面示例

如圖4 預(yù)約掛號(hào)詳情界面、圖5 空中診室咨詢支付確認(rèn)界面所示，兩個(gè)界面都是用H5 頁(yè)面展示數(shù)據(jù)，雖然是兩個(gè)完全不同的業(yè)務(wù)，但是當(dāng)用戶點(diǎn)擊界面中的“微信支付”按鈕時(shí)，都是調(diào)用了Android 原生程序中定義的喚起微信支付的方法。

圖4 預(yù)約掛號(hào)詳情界面

圖5 空中診室咨詢支付確認(rèn)界面

5 結(jié)語(yǔ)

使用AgentWeb 第三方組件構(gòu)建Android 混合應(yīng)用具有較好的靈活性：一方面，修改易變區(qū)域H5 頁(yè)面以滿足業(yè)務(wù)需求變化的頻繁性和多樣性，避免頻繁提交App 到第三方應(yīng)用商店審核，縮短App 迭代更新周期；另一方面，在App 內(nèi)編寫一套供JS 調(diào)用的統(tǒng)一接口（如：支付、拍照、獲取設(shè)備信息接口）可以減輕App開發(fā)工作量。

本文基于AgentWeb 設(shè)計(jì)與實(shí)現(xiàn)了Android 混合應(yīng)用，可以較好地滿足界面簡(jiǎn)單、功能較少的App 開發(fā)需要；為了適應(yīng)需求的變化，在Android 原生程序中可以編寫一套完整的供JS 調(diào)用的接口，這樣能方便更多H5 應(yīng)用集成到App 上，同時(shí)也節(jié)省Android 原生程序開發(fā)工作量。但是對(duì)于界面復(fù)雜，功能多樣的App 開發(fā)，該Android 混合應(yīng)用具有一定的局限性，仍需要更多Android 原生程序開發(fā)。