跨平臺(tái)移動(dòng)應(yīng)用開發(fā)技術(shù)研究

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

跨平臺(tái)移動(dòng)應(yīng)用開發(fā)技術(shù)研究

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

（北京信息科技大學(xué) 北京 100083）

為提高移動(dòng)應(yīng)用開發(fā)效率，研究了基于HTML5和WebView的跨平臺(tái)移動(dòng)應(yīng)用開發(fā)模式，可適用于移動(dòng)Web開發(fā)、微信嵌入、Android應(yīng)用開發(fā)等場(chǎng)景；對(duì)跨平臺(tái)移動(dòng)應(yīng)用開發(fā)核心技術(shù)要點(diǎn)進(jìn)行了研究與總結(jié)；期望為相關(guān)研究提供相應(yīng)的基礎(chǔ)與借鑒。

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

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

1 核心技術(shù)

1.1 HTML5

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

圖1 瀏覽器高層結(jié)構(gòu)

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

1.2 WebView簡(jiǎn)介

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

2 關(guān)鍵技術(shù)及其解決方案：

由于我們首先進(jìn)行了Web應(yīng)用的開發(fā)，然后進(jìn)行安卓二次開發(fā)，在開發(fā)過程中主要有以下幾個(gè)技術(shù)的關(guān)鍵點(diǎn)。

2.1 App本地加載HTML

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

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

①首先準(zhǔn)備工作，我們需要在安卓項(xiàng)目中main文件下新建一個(gè)assets文件夾，把所需的h5、css、JavaScript等文件全部導(dǎo)入進(jìn)來。

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

跳轉(zhuǎn)問題，具體解決方案如下：

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

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

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

關(guān)于底部導(dǎo)航定位功能，解決方案如下：

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

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

圖3 底部導(dǎo)航欄的實(shí)現(xiàn)

引導(dǎo)頁(yè)的實(shí)現(xiàn)方案如下：

①首先我們需要新建一個(gè)活動(dòng)，讓它繼承Activity類，并在其對(duì)應(yīng)的布局文件中添加一個(gè)ImageView組件，用來顯示我們事先放在資源文件里引導(dǎo)頁(yè)圖片。

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

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

圖4 引導(dǎo)頁(yè)的實(shí)現(xiàn)

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

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

關(guān)于Web定位功能的解決方案如下：

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

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

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

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

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

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

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

2.3 在安卓中使用DOM Storage

如何在APP中使用DomStorage，我們進(jìn)行了相關(guān)的研究與總結(jié)：

①DOM Storage是HTML5中新增加的一個(gè)特性，主要功能是用來作為本地存儲(chǔ)，DOM Storage分為兩種，這里我們使用的是localStorage用來長(zhǎng)時(shí)間存儲(chǔ)。

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

圖6 在真機(jī)上測(cè)試定位

圖7 使用localStorage完成本地存儲(chǔ)

3 結(jié)語(yǔ)

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

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

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

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

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