Web 端與手機App 端應用對接原理的研究

胡 強，張 娜，吳艷文

（安徽警官職業(yè)學院，安徽 合肥 230031）

信息化背景下智能手機上的各類App 應用提供了便利的信息化服務，盡管PC 端的Web 信息平臺仍然占據(jù)了信息化的重要地位，但手機App 應用協(xié)同了大量Web 端應用業(yè)務，并在各種信息業(yè)務中的趨勢愈發(fā)明顯，為了能讓廣大用戶能夠享受到App 端的各類信息服務，許多Web 端應用便開始同手機端App 應用進行功能同步對接，兩者間如何在功能開發(fā)上達到同步對接已然成了IT 領域廣為關注的技術問題。

手機App 應用通過連接WiFi、3G、4G、5G 網(wǎng)絡登錄后，可以與Web 端在線系統(tǒng)一樣享受信息化服務，雖然不同終端的訪問模式所要借助的前端媒介不同，但在數(shù)據(jù)操作的功能上的效果也要完全一致，在現(xiàn)有的前端開發(fā)技術中HTML5 可以針對移動端設備，滿足該類應用的前端所需［1］。

一、應用底層功能開源技術的研究

開源的jeecg 快速開發(fā)平臺具有兼容各類智能手機操作系統(tǒng)的分辨率的特點，并且在Web 開發(fā)上可以借助前端配置表單，直接同步至后臺數(shù)據(jù)庫和同步生成數(shù)據(jù)表，無需使用SQL 語句進行數(shù)據(jù)庫對象的創(chuàng)建以及能自動生成表單的常規(guī)操作（增、刪、改、查操作）的jsp 功能頁面和Java 源碼，大大提升了功能開發(fā)的工作效率，表單配置的功能模塊如圖1 所示。

圖1 jeecg 表單配置

在手機的屏幕分辨率方面該框架還能相互兼容，能作為兩種不同平臺上相同功能對接的契合點，在應用的功能上可以具有前端相互兼容的效果，達到功能上的“觸一發(fā)而動全身”，能為手機App及Web 應用的協(xié)同開發(fā)調(diào)試工作帶來一定的捷徑［2］。除此之外，該平臺還具有進行權限控制、模糊查詢、自帶標簽展現(xiàn)等機制，能夠為Web 端的應用開發(fā)進行環(huán)節(jié)上的簡化，同時還具有生成Json 串的功能，能夠為手機App 端接收數(shù)據(jù)和傳輸信息提供數(shù)據(jù)傳輸渠道。

二、手機App 應用功能實現(xiàn)的主要方案

（一）框架自有適應模式

Jeecg 快速開發(fā)平臺具有自動生成的Web 頁面在手機展現(xiàn)時具有較強的自適應性，從而不論手機App 端還是Web 端都使用同樣一個頁面，能夠支持Android 及IOS 系列所有的操作系統(tǒng)的屏幕分辨率。其缺點在于jeecg 平臺在前端頁面的展現(xiàn)方式上不夠友好，尤其是表格中的行列展現(xiàn)在手機端展現(xiàn)會顯得頁面不很美觀，用戶體驗舒適感不強；雖然能在手機App 上進行自適應，但無法達到手機定制化頁面的良好效果。

（二）終端自識別方式

在應用功能完全相同的前提下，使用JavaEE 的開發(fā)框架中手機App 應用同Web 應用在控制層Controller、業(yè)務邏輯層Service 及數(shù)據(jù)庫操作Dao 層完全相同，但在前端表現(xiàn)層上不同，通過請求所發(fā)出的參數(shù)不同在Controller 層中進行識別，判斷是手機終端還是Web 終端，識別為Web 終端請求則轉(zhuǎn)向Web 定制化頁面，若是手機端則轉(zhuǎn)向手機App的頁面。就開發(fā)而言工作量偏大，手機App 端和Web 端展現(xiàn)都要進行前端開發(fā)，由于專門能為手機端定制設計頁面，因而具有前端展現(xiàn)效果較好的優(yōu)勢［3］。功能代碼在Controller 層中針對不同的設備建立不同的界面跳轉(zhuǎn)機制，如：

（三）App 端獨立開發(fā)模式

該模式是Web 端和App 端應用對接較為妥善的模式，運用JavaEE 平臺框架結(jié)合HBuilder 工具開發(fā)手機APP 應用功能，其突出特點是將Web 前端與手機App 前端應用的開發(fā)進行分離，手機App前端作為一個獨立的應用與Web 前端應用的環(huán)境完全分離。后臺的數(shù)據(jù)交互方面，App 端應用借助于JavaEE 的Jeecg 開源平臺中的Restful 接口進行，與Web 端應用功能底層共享一個數(shù)據(jù)庫卻相互間沒有沖突，達到低耦合的效果。Restful 接口以Json串的形式進行數(shù)據(jù)交互，通過js 解析加工成Html格式文件以便前臺可以識別并展現(xiàn)［4］。在Web 端頁面的展現(xiàn)上還是借助于JavaEE 平臺的模式，通過Controller 層的跳轉(zhuǎn)至jsp 服務端頁面，與獨立手機前端頁面相互不干擾，系統(tǒng)請求響應結(jié)構(gòu)，如圖2所示。

圖2 系統(tǒng)結(jié)構(gòu)圖

三、Web 應用功能向手機App 端的移植

（一）前端信息展現(xiàn)技術的分析

Web 開發(fā)所用的JSP、ASP、PHP 為常見的頁面展現(xiàn)方式，目前較為新穎的前端語言是HTML5，它的出現(xiàn)推動了App 時代的到來，在其前端的展現(xiàn)方面突出表現(xiàn)出：圖標設計、流體布局、主體突出、頁面精悍、徹底導航和易于點擊等特點［5］。該模式可以滿足手機App 頁面展現(xiàn)特性上的需求，前端的展現(xiàn)基礎是要以后臺數(shù)據(jù)庫中所獲取數(shù)據(jù)為基礎，隨著用戶數(shù)量的不斷增加在同一個時間段對后臺數(shù)據(jù)請求的壓力會越來越大，進而引起效率問題。同JSP 頁面信息要不斷請求后臺相比，HTML5 具有Web Storage 的客戶端臨時存儲數(shù)據(jù)的功能以及離線緩存的Application Cache 接口技術，這對于解決無網(wǎng)狀態(tài)下下無法使用問題及減輕服務器端的負擔問題大有幫助［6］。

（二）后臺數(shù)據(jù)交互原理

前端不論是Web 端還是手機App 端，其前端信息的展現(xiàn)必須依賴于數(shù)據(jù)庫操作層的調(diào)用，鑒于當前手機用戶數(shù)量之大，使得手機App 應用頻率之高就很容易造成底層調(diào)用負載過高的現(xiàn)象，運用手機應用與Web 應用后臺相互獨立的方式可以改善對Web 端應用負載過高的弊端。為讓手機前端App 展現(xiàn)信息而提供的底層技術是restful 接口，對所需要操作的數(shù)據(jù)表采用JavaEE 架構(gòu)中的Service層、Dao 層注入的方式來調(diào)用，這樣就完全與Web應用層面的Controller 層完全獨立開，從而降低開發(fā)過程中的耦合性。

（三）終端對接的核心點

功能的對接主要是能夠使得在Web 端所能展現(xiàn)的頁面效果可以借助手機App 端同樣予以展現(xiàn)，而手機App 端的頁面與Web 端頁面在樣式、布局及可適用的分辨率上不同，因此要開發(fā)出專門用于手機App 應用的前端頁面，用于接收和Web 端一樣的數(shù)據(jù)Json 請求，并在前端借助Ajax+ JQuery 的方式將JSon 請求予以解析，解析的代碼如下：

在Controller 中進行如下設置：

其中的produces=“text/plain；charset=UTF-8”是為了確保Json 串傳輸時格式的正確，最終Json 串中的信息是在js 中進行解析后傳遞至HTML 頁面域當中予以展現(xiàn)，HTML 示例代碼：

其中的id 值“l(fā)istnews”所指向的〈ul〉是Json 串解析后信息的顯示區(qū)域，Json 串中的信息解析在HTML 中引入js 完成，代碼如：

在js 中解析了Json 后將其封裝為HTML 文件在變量flist 中，再通document.getElementById（索引值）來調(diào)用頁面中div 中的ul 域來展示Json 串中所解析的數(shù)據(jù)。同時要在spring-mvc.xml 文件的代碼段

用于確保攔截器不會將url 所指向的“rest/user-Controller/”地址進行強制密碼登錄攔截，而是可以直接請求到Json 數(shù)據(jù)。在HTML5 頁面上通過〈script〉…〈/script〉引入js 時要將其放置在〈/html〉之后，否則可能會導致document.getElementById（id值）的方法無法獲取“id 值”而失效。

四、技術拓展方向上的研究

（一）應用開發(fā)的框架分析

手機設備與PC 機器基于不同的操作系統(tǒng)平臺，兩種平臺間相同功能應用的對接能夠利于找到平臺間的契合點，為應用平臺的開發(fā)提出了相關技術要求，主要表現(xiàn)在：

（1）頁面分辨率適應的要求

新型移動設備層出不窮，在日常的使用中一定程度上可以替代PC 機，因此應當更加完善手機App 應用的功能，滿足廣大用戶的使用需求、提高便攜性。

（2）JavaEE 開發(fā)平臺方面的請求解析問題

Java 所開發(fā)的應用請求可以將后臺數(shù)據(jù)的處理結(jié)果予以封裝，這使得其傳遞過程中涉及的參數(shù)會被隱藏，對安全保密性有所提高。

（3）后臺功能的再利用

通過手機App 應用與Web 端應用對接的研究發(fā)現(xiàn)后臺對數(shù)據(jù)庫底層的操作可以使用統(tǒng)一功能源碼，對代碼的資源可以具有較高的復用性，避免類似重復開發(fā)提高對代碼資源的使用效率。

（二）數(shù)據(jù)交互與動態(tài)識別

應用后臺主要是處理前端傳遞來的數(shù)據(jù)并將其與數(shù)據(jù)庫直接進行交互（常規(guī)型的數(shù)據(jù)操作），后臺再將處理的數(shù)據(jù)結(jié)果反饋于前端。在手機App應用和Web 應用中的后臺數(shù)據(jù)交互及業(yè)務處理可以借助于相同的功能源碼，在手機頁面及Web 應用頁面的返回上可以開發(fā)一套能夠自適應于手機App端與Web 端的頁面，或者能借助于識別判斷終端是手機App 端還是Web 端來決定所跳轉(zhuǎn)的頁面對象［7］。在目前的Jeecg 框架上的頁面具備終端自適應的能力，但在展現(xiàn)效果上相對一般，從CSS 的樣式上可以作為手機自適應頁面的突破口，從設備的登錄上能進行動態(tài)識別，根據(jù)判斷是手機還是PC端作出自動識別跳轉(zhuǎn)式?jīng)Q定。

（三）應用前端技術及調(diào)試

谷歌的Chrome 瀏覽器能夠模擬Android、IOS等移動手機設備的操作系統(tǒng)，同時還能對平板電腦等多種移動設備進行模擬，能將使用專門設備依次調(diào)試分辨率的環(huán)節(jié)予以省略，提升調(diào)試的效率。模擬手機端應用調(diào)試的方法：打開Chrome 瀏覽器中的“更多工具”-〉“開發(fā)者工具”后便會進入手機調(diào)試模式，如圖3 所示。

圖3 chrome 瀏覽器調(diào)試工具

該瀏覽器上所能現(xiàn)實的調(diào)試效果與對應的手機界面完全一致，方便了開發(fā)者處理前端頁面的對齊方式、分辨率不統(tǒng)一等問題。

五、基于移動端App 應用的展望

（一）發(fā)揮手機App 應用的優(yōu)勢

與Web 應用相比較手機App 應用出現(xiàn)的時間較晚，從技術沉淀的角度來說要比Web 應用更加成熟，就目前HTML5 本身來說，其克服了前端技術還未標準化、服務器端的開發(fā)量大、對設備適應性差等缺點，并具備了多媒體、圖像、用戶交互、設備適配等諸多優(yōu)點［8］。在移動端設備的移植上也頗有良好的自適應性，手機App 的操作性方面具有易于點擊、徹底導航和頁面精湛的特點，符合大眾的使用習慣，所開發(fā)出的應用具有較強的生命力。

（二）大數(shù)據(jù)資源的融合

信息化服務所產(chǎn)生的數(shù)據(jù)信息需要借助于容器進行存儲，平臺本身可以看成是自有數(shù)據(jù)源，數(shù)據(jù)的數(shù)量會隨著平臺的使用而持續(xù)產(chǎn)生，所收集到的數(shù)據(jù)會提煉為信息，信息又會進一步被提煉成知識，基礎數(shù)據(jù)的積累最終會形成大數(shù)據(jù)，處在這樣一個循環(huán)過程中會讓信息平臺隨著大數(shù)據(jù)的積累而更加智能，智能的信息平臺又會使得大數(shù)據(jù)會更加具有價值［9］?？v觀手機App 應用端，其產(chǎn)生的數(shù)據(jù)多數(shù)與商業(yè)營銷、教育、金融、通信相關，對于所涉行業(yè)的戰(zhàn)略分析具有重要意義，這就要求手機App 后臺數(shù)據(jù)容器的管理模式上要更加統(tǒng)一、理性化，最終要能發(fā)現(xiàn)平臺數(shù)據(jù)中潛在的價值就必須讓大數(shù)據(jù)技術予以介入。

Web 端應用與手機App 應用的相互對接符合了當下信息化服務的普遍趨勢，對該方面技術的研究，為大量Web 端應用對手機端的移植提供了寶貴技術支持，對智能手機業(yè)務的拓展起到了進一步推動作用［10］。但在手機開發(fā)App 的開發(fā)技術中所面臨的技術更新快、開發(fā)工具種類多、業(yè)務需求復雜的問題不容小視，在以后的技術探索中要精益求精，不斷從各類技術中吸取經(jīng)驗，努力開展思維創(chuàng)新，爭取研發(fā)出一套新思維、新理念。