文/謝宇威 方偉杰 洪波 應(yīng)鑫迪

移動校園跨平臺技術(shù)實現(xiàn)

文/謝宇威 方偉杰 洪波 應(yīng)鑫迪

隨著高校信息化建設(shè)的不斷深入，互聯(lián)網(wǎng)、3G網(wǎng)絡(luò)及無線網(wǎng)絡(luò)技術(shù)蓬勃發(fā)展，校內(nèi)3G和無線用戶飛速增長，在移動終端上使用各種互聯(lián)網(wǎng)應(yīng)用已漸漸成為一種習(xí)慣，每所高校都有自己獨(dú)特的校園環(huán)境和各類資源，如果教師和學(xué)生在移動設(shè)備上可以隨時隨地獲取這些信息，那么它將對教師的教學(xué)科研及學(xué)生的學(xué)習(xí)生活起到很大的幫助作用。

校園移動門戶是學(xué)校信息化重點建設(shè)項目，構(gòu)建了移動應(yīng)用中心、個人信息中心，聚合了校內(nèi)新聞、資訊、公告、電話黃頁、圖書及班車查詢等服務(wù)，為師生提供了方便、高效的移動化應(yīng)用。同時構(gòu)建了一套移動的應(yīng)用開發(fā)平臺與開發(fā)規(guī)范，有利于推進(jìn)學(xué)校系統(tǒng)移動化建設(shè)，為各部門移動化應(yīng)用改造提供支撐。

移動平臺客戶端開發(fā)技術(shù)介紹

Native APP

Native App是包含二進(jìn)制的可執(zhí)行文件，通常可從App Store和google play下載安裝。

Native App直接與移動操作系統(tǒng)進(jìn)行聯(lián)系，可隨意訪問由操作系統(tǒng)開發(fā)商提供的所有API；無論從用戶體驗還是交互性上來說，Native App的表現(xiàn)都十分突出，但缺點也同樣明顯，開發(fā)成本過高以及應(yīng)用更新維護(hù)上缺乏靈活性。

根據(jù)不同的平臺，開發(fā)者必須使用由操作系統(tǒng)開發(fā)商提供的開發(fā)工具，使用相關(guān)不同的開發(fā)語言來對源代碼進(jìn)行編譯，建立二進(jìn)制形式的可執(zhí)行文件，并連同其他資源一起封裝起來形成最后的App。

Web App

Web App是通過標(biāo)準(zhǔn)的網(wǎng)頁開發(fā)技術(shù)，通過各平臺的瀏覽器訪問來實現(xiàn)跨平臺訪問的。借助HTML5強(qiáng)大的技術(shù)威力，用于開發(fā)基于瀏覽器的移動應(yīng)用程序。

Web App的優(yōu)點很明顯，開發(fā)成本相對較低，支持多平臺，可以實現(xiàn)在不同平臺上提供統(tǒng)一的用戶體驗。Web App則在瀏覽器里面運(yùn)行，瀏覽器本身是一種可以直接訪問操作系統(tǒng)API的Native App，只有少量的API向瀏覽器里面運(yùn)行的Web App公開，本地API調(diào)用能力較差約束了Web App的功能性，一些對本地資源需求較高的應(yīng)用將會使Web App顯得很乏力。

Hybrid App

Hybrid開發(fā)方法結(jié)合了Native開發(fā)和Web技術(shù)。核心是使用Web的開發(fā)技術(shù)，再通過中間件包裝成各平臺的應(yīng)用程序，通過這種開發(fā)方式，開發(fā)者就能使用跨平臺技術(shù)，僅通過Web開發(fā)技術(shù)，就能實現(xiàn)平臺的應(yīng)用程序，同時還能通過中間件的集成，調(diào)用大部分常用的本地API。

Hybrid App的Native代碼部分使用操作系統(tǒng)的API來創(chuàng)建嵌入式HTML渲染引擎，在瀏覽器和設(shè)備的API之間起到連接作用，使得Hybrid App得以充分利用設(shè)備所提供的全部特性。

現(xiàn)有的一些跨平臺開發(fā)方法結(jié)合了Native容器特性，提供開發(fā)者開發(fā)環(huán)境，因而讓開發(fā)者有辦法只要使用Web語言，就可以輕松調(diào)用本地特性來開發(fā)應(yīng)用程序，同時很多時候開發(fā)者可以根據(jù)自己的需要來定制獨(dú)特的Native容器。

比較

Native的開發(fā)方法在性能和設(shè)備訪問方面很出色，但成本和更新方面有缺點。Web的開發(fā)方法更新起來簡單得多，成本較低，也相對容易，但是功能有限，也無法獲得絕大多數(shù)的Native API調(diào)用權(quán)限，降低了用戶體驗。Hybrid開發(fā)方法提供了結(jié)合兩者的優(yōu)點：兼?zhèn)淞丝缙脚_的開發(fā)和高效的本地API調(diào)用能力，提高了用戶體驗的同時也降低了開發(fā)的成本。

圖1 客戶端與服務(wù)端對接模式

圖2 頁面分析流程結(jié)構(gòu)

ExMobi

ExMobi是專門針對企業(yè)領(lǐng)域移動應(yīng)用開發(fā)特點推出的跨平臺的專業(yè)開發(fā)平臺中間件。ExMobi采用了可以結(jié)合Native App與Web App優(yōu)勢的、可擴(kuò)展的“Hybrid App”路線。與常見Hybrid App方案不同的是，為了保證系統(tǒng)具有足夠的性能及良好的擴(kuò)展性， ExMobi自研了一套精簡與優(yōu)化的“瀏覽器內(nèi)核”來實現(xiàn)客戶端的渲染與呈現(xiàn)，采用標(biāo)準(zhǔn)Web開發(fā)語言+自定義標(biāo)簽擴(kuò)展的方式，一方面降低開發(fā)者的進(jìn)入門檻，另一方面，可以通過自定義標(biāo)簽解決個性化定制的問題?？蛻舳送ㄟ^不同的方式與服務(wù)端對接不同開發(fā)模式。

解決方案

高校信息化建設(shè)缺乏統(tǒng)一的系統(tǒng)規(guī)劃，各院系，部門根據(jù)業(yè)務(wù)需求構(gòu)建各自的業(yè)務(wù)系統(tǒng)，結(jié)合高校本身的復(fù)雜性，校內(nèi)資訊的內(nèi)容大多數(shù)來源于學(xué)校部門和院系的網(wǎng)站，頁面格式以及展示效果上更是五花八門，導(dǎo)致用戶體驗非常差。

本案例中，我們采取基于Exmobi高校移動應(yīng)用平臺的頁面分析技術(shù)與接口調(diào)用相結(jié)合的方式，來解決繁多復(fù)雜的高校信息化系統(tǒng)的移動化建設(shè)。

以下介紹通過頁面分析的手段來獲取校內(nèi)資訊的內(nèi)容。實施步驟：

1.第一步，我們需要在客戶端頁面文件中ajax發(fā)送請求，定義通過接口獲取數(shù)據(jù)。

url = ＊＊＊＊;

var requestHeader = '{"Content-Type": "application/x-www-form-urlencoded"}'; $a.go(url, method, "", showList, null, requestHeader, true);

2.第二步，我們針對客戶端發(fā)起請求，在規(guī)則文件mapp. xml 中，定義urlname對應(yīng)一個域名地址urladdress；

描述客戶端請求和對應(yīng)的服務(wù)端處理第三方數(shù)據(jù)jsp文件。

3.第三步，在jsp文件 affairsList.jsp中對第三方響應(yīng)的數(shù)據(jù)進(jìn)行分析，可以用java 和 xpath 的方法操作。

首先，服務(wù)端請求

其次，對服務(wù)端請求之后第三方響應(yīng)數(shù)據(jù)通過java和xpath方法分析，都是標(biāo)準(zhǔn)java語言和通用xpath取值方法；

String title = aa.xpath("./heading","table") .replaceAll("<", "<")

再次，服務(wù)端響應(yīng)到客戶端數(shù)據(jù)，拼裝成json數(shù)據(jù)返回給客戶端使用。

4.第四步，對服務(wù)端響應(yīng)給客戶端的json數(shù)據(jù)進(jìn)行樣式還原展示；在第一步的ajax請求回調(diào)函數(shù)中進(jìn)行數(shù)據(jù)頁面標(biāo)簽還原達(dá)到最終效果。

5.第五步，對列表進(jìn)入詳情頁面進(jìn)行數(shù)據(jù)分析。

6.第六步和上面的第三步類似，通過affairsdetail.jsp對頁面進(jìn)行分析，并將數(shù)據(jù)整理完整返回給客戶端。

結(jié)合本例，這里獲取的數(shù)據(jù)有三類。

第一類是第三方系統(tǒng)通過接口返回數(shù)據(jù)，將第三方返回的數(shù)據(jù)經(jīng)過服務(wù)端的處理后返回客戶端，放置到browser控件里面顯示，可以通過正則和替換等java的方法處理數(shù)據(jù)，再包裝成json格式的數(shù)據(jù)返回給客戶端。第二類，通過請求第三方的網(wǎng)站，根據(jù)頁面結(jié)構(gòu)進(jìn)行在服務(wù)端的數(shù)據(jù)分析。第三類，將把第三方的地址返回給客戶端，并裝載到brower控件中，通過brower控件訪問第三方數(shù)據(jù)信息。

7.第七步，把服務(wù)返回到客戶端數(shù)據(jù)，裝載到brower控件中，并進(jìn)行結(jié)構(gòu)化展示。

通過對Exmobi平臺體系結(jié)構(gòu)的研究分析，基于Exmobi中間件的高校移動應(yīng)用能夠在多平臺輕松實現(xiàn)。利用頁面分析的方法，解決了高校信息化建設(shè)初期各部門、院系平臺不統(tǒng)一所造成的移動化建設(shè)的困難。但是高校的龐大校內(nèi)院系、部門及其他單位的網(wǎng)站有幾百個之多，結(jié)合ExMobi中間件，我們能夠快速地對學(xué)校部門、機(jī)構(gòu)進(jìn)行移動化建設(shè)，同時，高效地利用頁面分析的技術(shù)能夠加速移動化的實施，便于高校移動應(yīng)用平臺的應(yīng)用接入與業(yè)務(wù)拓展。

（作者單位為浙江大學(xué)圖書與信息中心）