基于AgentWeb 的Android 混合應用設計與實現

楊權

（湖南省婦幼保健院信息中心，長沙410000）

0 引言

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

1 主要技術簡介

1.1 Android簡介

Android 是Google 推出的開源手機操作系統，Android 基于Linux 平臺，由操作系統、中間件、用戶界面和應用軟件組成[4]。使用Android 提供的SDK，應用開發者可以開發個性化的移動App。

1.2 AgentWeb簡介

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

1.3 MUI簡介

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

2 界面設計

采用底部設置多個Tab 選項卡來布局主界面，分別為“首頁”、“選擇醫院”和“個人中心”；“首頁”分為資訊區和功能區，功能區以九宮格的形式顯示常用功能的圖標和文字說明，點擊某個圖標便能打開對應的功能頁面；“選擇醫院”以列表的形式顯示醫院名稱，點擊某個醫院名稱便打開某個醫院的首頁；“個人中心”提供注冊、登錄、忘記密碼等功能，同時顯示個人相關記錄，例如：預約記錄、繳費記錄、咨詢記錄等。

根據需求變化的頻率，將界面分為“固定區域”和“易變區域”，其中“固定區域”包括“首頁”，采用Android原生頁面實現；“易變區域”包括“選擇醫院”和“個人中心”，采用H5 頁面實現，如圖1 固定區域-首頁、圖2 易變區域-選擇醫院、個人中心所示。

圖1 固定區域-首頁

圖2 易變區域-選擇醫院、個人中心

3 Android原生頁面與H5頁面數據通信設計

Android 混合應用中的H5 頁面不僅僅是展示數據，還能通過JS 代碼跟原生頁面進行數據通信，實現特定的功能。

實現Android 原生頁面與H5 頁面數據通信分為三步：首先，在Android 工程中引用AgentWeb 第三方庫，用AgentWeb 代替Android WebView 顯示H5 頁面；其次，擴展AgentWeb 提供的與JS 通訊的接口，自定義個性化接口供JS 調用；最后，在H5 頁面中編寫JS 函數供原生頁面調用。

Android 原生頁面與H5 頁面數據通信的過程如圖3 Native 與H5 數據通信原理所示。

圖3 Native與H5數據通信原理

4 具體實現

4.1 JS調用Android原生方法實現

（1）Android 項目中引入AgentWeb 依賴包：

（2）在Fragment 中定義AgentWeb 對象：

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

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

（4）JS 調用Android 原生方法

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

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

4.2 Android調用JS方法

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

（2）使用mAgentWeb.getJsAccessEntrace（）.quick-CallJs（JS 方法名，參數）形式調用，例如：mAgentWeb.getJsAccessEntrace（）.quickCallJs（"jsMethod1"）;mAgentWeb.getJsAccessEntrace（）.quickCallJs（"jsMethod2"，"這是jsMethod2 的入參"）;

4.3 界面示例

如圖4 預約掛號詳情界面、圖5 空中診室咨詢支付確認界面所示，兩個界面都是用H5 頁面展示數據，雖然是兩個完全不同的業務，但是當用戶點擊界面中的“微信支付”按鈕時，都是調用了Android 原生程序中定義的喚起微信支付的方法。

圖4 預約掛號詳情界面

圖5 空中診室咨詢支付確認界面

5 結語

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

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