◆黎茂林 王天鑫 魏嵩 閆冉 宿世博 陳曉宇

跨平臺移動應用開發(fā)技術研究

◆黎茂林 王天鑫 魏嵩 閆冉 宿世博 陳曉宇指導教師

（北京信息科技大學 北京 100083）

為提高移動應用開發(fā)效率，研究了基于HTML5和WebView的跨平臺移動應用開發(fā)模式，可適用于移動Web開發(fā)、微信嵌入、Android應用開發(fā)等場景；對跨平臺移動應用開發(fā)核心技術要點進行了研究與總結；期望為相關研究提供相應的基礎與借鑒。

跨平臺；混合開發(fā)；WebView；HTML5

隨著移動端的不斷發(fā)展，Android（安卓系統(tǒng)，由谷歌公司和開放手機聯(lián)盟領導及開發(fā)的移動操作系統(tǒng)）占據(jù)著絕大多數(shù)的市場份額，移動端的便捷性使安卓應用軟件呈井噴式的增長。Web應用的便捷性也是不能忽視的，這也使得Web應用也占據(jù)著很大的市場份額。由于這兩種應用程序采用了不同的開發(fā)模式，同一應用若想應用到安卓、Web上通常就需要采用兩套開發(fā)技術、兩組開發(fā)人員，這對開發(fā)成本、開發(fā)時間、后期維護等都會成倍地增加。為解決這個問題，本文提出了使用WebView框架，只需完成Web的開發(fā)，通過WebView框架簡單的混合開發(fā)，就能完成Android應用的開發(fā)，極大減少了開發(fā)時間、開發(fā)成本、也為后期維護減少工作量。

1 核心技術

1.1 HTML5

HTML5技術在HTML4.01的基礎上做了集合并革新。HTML5的便捷性使得HTML5程序通過瀏覽器就能運行，這樣用戶就可以在個人電腦、智能手機或平板電腦上任意訪問程序，這給用戶帶來了極大的便捷性。HTML5新增的地理定位功能和數(shù)據(jù)存儲功能在本APP中有所應用。

圖1 瀏覽器高層結構

（本圖來源：How Browsers Work： Behind the Scenes of Modern Web Browsers，https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/）

1.2 WebView簡介

WebView作為Android中一個非常重要的一個控件，它基于webkit引擎來展示我們所寫的web頁面，WebView控件的作用是來顯示和渲染W(wǎng)eb頁面，可以直接使用html文件，還可以和JavaScript交互調用，來實現(xiàn)混合開發(fā)。

2 關鍵技術及其解決方案：

由于我們首先進行了Web應用的開發(fā)，然后進行安卓二次開發(fā)，在開發(fā)過程中主要有以下幾個技術的關鍵點。

2.1 App本地加載HTML

基于HTML5開發(fā)的應用，移植到APP中需要進行適應性修正，本節(jié)就過程中的H5界面顯示、跳轉、底部導航定位、引導頁設置等平臺差異性問題進行了研究與總結。

應用移植首先需要解決界面顯示問題，具體解決方案如下：

①首先準備工作，我們需要在安卓項目中main文件下新建一個assets文件夾，把所需的h5、css、JavaScript等文件全部導入進來。

②WebView中l(wèi)oadUrl方法可以完成對網(wǎng)頁的加載，這時我們只需要把要加載的h5文件找到就可以了。首先loadUrl參數(shù)中我們要清楚協(xié)議格式，由于我們的h5是本地文件，所以要使用File協(xié)議（若是網(wǎng)絡文件則要http協(xié)議）；然后找到我們新建的assets文件，因為我們所有的h5文件都保存在這個文件下，最后找到需要加載的h5頁面；需要注意的是，由于安卓的內(nèi)核是Linux，在路徑的表達方式上采用的是Linux的方式，還需要注意的是，我們不能直接通過assets來訪問我的h5文件，需要把assets轉換為android_asset，這樣才能有效訪問到我需要加載的h5文件。

跳轉問題，具體解決方案如下：

除了只能顯示界面是不夠的，我們還需要界面可以實現(xiàn)跳轉。Android提供了兩種顯示網(wǎng)頁的方法如下圖，若沒有設置其對應的WebViewClient方法，則會由系統(tǒng)（Activity Manager）來處理該url，系統(tǒng)通常是打開外部瀏覽器或者彈出瀏覽器選擇對話框。這里我們并不希望在外部的瀏覽器中打開，這時我們需要自己來處理這個url；將在setWebViewClient方法中的shouldOverrideUrlLoading函數(shù)在加載網(wǎng)頁需要重新定向的時候回調，我們重寫此函數(shù)，告訴程序需要接管對網(wǎng)頁的加載的控制，該方法返回true值時，系統(tǒng)就不會調用外部瀏覽器來處理該url。此時我們只需要在此函數(shù)中每次都判斷當前頁面是否含有url值，若有的話我們就調用loadUrl，這就實現(xiàn)了頁面的跳轉。

圖2 Android提供了兩種不同的方式顯示W(wǎng)eb頁面

（本圖來源：安卓開發(fā)者文檔 https：//developer.android.google.cn）

關于底部導航定位功能，解決方案如下：

①原來實現(xiàn)這個功能往往是通過js獲取頁面的高度來實現(xiàn)的，這里我們采用的是純CSS的方法來實現(xiàn)的，通過固定底部的高度，通過絕對定位的方法來實現(xiàn)。

②首先我們需要設置body的高度充滿整個屏幕（min-height：100vh），然后讓body作為底部絕對定位的參考點，最后設置底部為絕對定位，并設置一個固定值，設置寬度讓其占滿整個屏幕。

圖3 底部導航欄的實現(xiàn)

引導頁的實現(xiàn)方案如下：

①首先我們需要新建一個活動，讓它繼承Activity類，并在其對應的布局文件中添加一個ImageView組件，用來顯示我們事先放在資源文件里引導頁圖片。

②第二步我們要修改活動的啟動順序，原來我們啟動后首先打開的是主活動，現(xiàn)在我們啟動后需要先打開引導頁。在安卓AndroidManifest.xml文件中android.intent.action.MAIN決定了首先顯示哪一個活動，android.intent.category.LAUNCHER表示該活動允許用安卓系統(tǒng)的啟動器來啟動它，我們把這兩個從原來的主活動中轉移到引導頁的活動中去，這樣的話，我們在啟動時，首先就到了引導頁了。

③如何從引導頁跳轉到主活動？在引導頁活動中首先我們需要用intent機制來實現(xiàn)引導頁活動和主活動之間的跳轉，（Intent（引導頁類名.this，主活動類名.class）），在安卓handler.sendEmptyMessageDelayed方法可以指定多少毫秒后發(fā)送消息，我們把活動之間的跳轉封裝成函數(shù)，再調用以上方法，設置響應時間，這就完成了多少毫秒后引導頁向主活動的跳轉。

圖4 引導頁的實現(xiàn)

2.2 定位功能的實現(xiàn)

基于HTML5的開發(fā)，并移植到Android中過程中，我們對如何實現(xiàn)Web定位功能、在APP中如何實現(xiàn)定位進行了研究與總結

關于Web定位功能的解決方案如下：

①Web開發(fā)時使用了HTML5新增的地理定位功能，在用戶同意獲取位置的前提下，通過HTML5 Geolocation API來獲取用戶的地理位置，再使用getCurrentPosition（）方法可以較為準確地獲取到我們的位置信息，最后通過showPosition（）函數(shù)顯示出經(jīng)度和緯度信息。

②只是獲取到經(jīng)緯度，這樣給人感覺不夠直觀，我們還需要結合地圖，在地圖上顯示出我們的位置。這里我們使用的是高德地圖，在高德地圖開發(fā)者官網(wǎng)上申請一個密鑰，在頁面中引入高德API；添加一個div標簽作為地圖容器，并為該div指定id屬性。

③通過AMap.Map（‘div的id’）方法創(chuàng)建地圖，有了地圖后，我們通過AMap.plugin方法引入高德的AMap.Geolocation定位插件，在定位插件中我們通過設置enableHighAccuracy方法來是否實現(xiàn)高精度定位，通過timeout設置定位響應時間等等。

圖5 實現(xiàn)Web定位

在APP定位問題解決方案如下：

①首先我們得讓該應用程序有定位權限，需要在AndroidManifest.xml中配置access_coarse_location粗略定位的權限和access_fine_location精確定位權限。

②然后在主活動里允許相關的功能的實現(xiàn)，因為我們先實現(xiàn)網(wǎng)頁的定位，在安卓中我們就必須允許應用調用JavaScript，定位肯定離不開地理定位的功能（setGeolocationEnabled（true）），當H5調用地理位置API時，會先通過WebChromeClient.onGeolocationPermissionsShowPrompt申請授權，我們通過origin來允許使用定位的API，這樣我們就實現(xiàn)了定位（注意：從API24開始，僅支持安全源（https）的請求，由于我們導入的是本地的html文件，這就不會存在定位請求會被拒絕的問題）。

2.3 在安卓中使用DOM Storage

如何在APP中使用DomStorage，我們進行了相關的研究與總結：

①DOM Storage是HTML5中新增加的一個特性，主要功能是用來作為本地存儲，DOM Storage分為兩種，這里我們使用的是localStorage用來長時間存儲。

②首先我們得讓應用支持DomStorage（setDomStorageEnabled（true）），然后我們就需要設置緩存（setAppCacheEnabled（true）），并設置它的緩存路徑（setDatabasePath（path）），這里的路徑（path）也需要自己來設置。

圖6 在真機上測試定位

圖7 使用localStorage完成本地存儲

3 結語

本文通過對WebView的深入了解，針對Web應用和Android應用開發(fā)需要兩套不同的開發(fā)技術，極大的增加開發(fā)成本、時間和后期維護等問題，提出了使用WebView來完成跨平臺的開發(fā)的解決方案，通過對相關關鍵技術的研究可以極快并且有效的完成Android應用的開發(fā)，極大縮減我們的開發(fā)時間。

[1]郭霖.第一行代碼Android[M].第二版.北京：人民郵電出版社，2016.12

[2]任平紅，陳矗.Web編程基礎：HTML5、CSS3、JavaScript[M].第2版.北京：清華大學出版社，2019

[3]Andy Rubin Android developers[EB/OL].[2019-09-04].https：//developer.android.google.cn/

本文由北京信息科技大學2020年大學生創(chuàng)新創(chuàng)業(yè)訓練計劃項目資助