張文孝 白俊鴿* 四川大學(xué)錦城學(xué)院 計(jì)算機(jī)與軟件學(xué)院
近年來(lái)隨著手機(jī)行業(yè)的迅速發(fā)展,手機(jī)變得越來(lái)越智能化。日常生活中,人們也愈加依賴手機(jī),這都?xì)w功于手機(jī)便攜和易操作的特點(diǎn)。通過(guò)移動(dòng)設(shè)備不僅可以進(jìn)行娛樂(lè)也可以辦理一些簡(jiǎn)單的服務(wù)。作為交通運(yùn)輸服務(wù)業(yè)的汽車租賃業(yè)正慢慢收到企業(yè)和個(gè)人的青睞,因?yàn)橥ㄟ^(guò)汽車租賃,個(gè)人或者企業(yè)就可以享受到和擁有個(gè)人車輛或者公司車輛一樣的便捷。而相較于買車,租車又有不用辦理保險(xiǎn)、無(wú)需年檢維修、可隨意更換車輛等優(yōu)點(diǎn)。
在選擇使用何種移動(dòng)開發(fā)技術(shù)時(shí),首先考慮的是原生APP開發(fā)?;贜ative APP框架,不同手機(jī)操作系統(tǒng)采用不同語(yǔ)言和框架進(jìn)行開發(fā),由云服務(wù)器數(shù)據(jù)和APP 客戶端構(gòu)成,可有最佳用戶體驗(yàn),可節(jié)省帶寬成本,訪問(wèn)本地資源,但需不同平臺(tái)分別開發(fā)且周期時(shí)間。但是目前手機(jī)系統(tǒng)主要分為安卓和ios兩大陣營(yíng),如果使用原生APP開發(fā)就需要使用不同的編程語(yǔ)言進(jìn)行開發(fā),以滿足安卓和ios用戶。因此使用原生APP開發(fā)的成本較高,而且后期的維護(hù)成本也較高。
另一種選擇是基于 HTML5 的跨平臺(tái)移動(dòng)開發(fā)技術(shù)。其中的MUI框架直接采用原生JS編寫,性能高于大多數(shù)框架。MUI框架還有一個(gè)最大的優(yōu)勢(shì)就是跨平臺(tái),不需要像原生APP開發(fā)那樣對(duì)于不同的操作系統(tǒng)需要使用不同的編程語(yǔ)言??缙脚_(tái)開發(fā)技術(shù)簡(jiǎn)單說(shuō)就是能夠讓一種程序代碼在不同移動(dòng)終端上應(yīng)用,可以大大降低開發(fā)技術(shù)損耗的精力和時(shí)間。
由于是移動(dòng)端的應(yīng)用,面向的是需要租賃汽車的用戶,因此移動(dòng)端應(yīng)用本身不需要涉及到后臺(tái)的數(shù)據(jù)操作等管理員需要的功能。對(duì)于實(shí)際的用戶需求可以設(shè)計(jì)出三部分主要的功能,包括登錄注冊(cè)功能、車輛信息展示功能和數(shù)據(jù)統(tǒng)計(jì)功能。
用戶可以通過(guò)登錄賬號(hào)查看個(gè)人信息,包括當(dāng)前正在租用的汽車信息和計(jì)時(shí)計(jì)費(fèi)信息??紤]到租賃汽車手續(xù)比較繁雜,因此沒(méi)有設(shè)計(jì)直接在移動(dòng)應(yīng)用上租賃汽車的功能。車輛展示功能主要展示當(dāng)前可租用車輛的車輛信息,方便用戶考慮租用哪種車輛。數(shù)據(jù)統(tǒng)計(jì)功能可以展示當(dāng)前總的汽車租賃情況,可直觀地看到哪種車輛最受用戶喜愛,也能給用戶選擇車輛時(shí)作參考。
應(yīng)用的首頁(yè)主要展示的是當(dāng)前可以租賃的汽車的信息,包括價(jià)格、車輛編號(hào)、車輛類型信息。
頁(yè)面頂端顯示該頁(yè)標(biāo)題,在標(biāo)題下方使用的是區(qū)域滾動(dòng)組件中的橫向滾動(dòng),將汽車根據(jù)汽車的類型進(jìn)行分類顯示。中間部分為內(nèi)容顯示部分,這一部分展示車輛的價(jià)格及編號(hào)等信息,用戶可以通過(guò)點(diǎn)擊上方按鈕選擇不同的車輛類型,內(nèi)容部分就會(huì)顯示對(duì)應(yīng)類型的車輛信息。最后,頁(yè)面底部為導(dǎo)航欄,通過(guò)點(diǎn)擊可跳轉(zhuǎn)至其他兩個(gè)頁(yè)面。
數(shù)據(jù)統(tǒng)計(jì)頁(yè)面主要展示近期車輛的租賃情況以及車輛性能比較,為用戶在選擇車輛時(shí)作參考。通過(guò)引入Echarts圖表可以將數(shù)據(jù)可視化,讓數(shù)據(jù)直觀地展示給用戶。Echarts提供了豐富的API接口以及文檔, 通過(guò)合理設(shè)置并結(jié)合后臺(tái)傳送的json數(shù)據(jù), 即可展示所需的數(shù)據(jù)主題。
個(gè)人頁(yè)面可以展示當(dāng)前用戶的用戶名、正在租用的車輛信息以及該車輛的計(jì)時(shí)和累計(jì)費(fèi)用等信息。此外為了能方便用戶切換賬號(hào)和新用戶注冊(cè),設(shè)計(jì)了登錄、注冊(cè)和注銷功能。
第一部分顯示用戶的基本信息,包括用戶名和用戶ID,第二部分展示租車信息和計(jì)時(shí)信息,右上角的菜單包含了登錄和注冊(cè)兩個(gè)子頁(yè)面以及注銷功能。
在用戶未登錄時(shí),將不顯示個(gè)人信息。登錄成功后從登錄頁(yè)面跳轉(zhuǎn)至個(gè)人頁(yè)面,此時(shí)將顯示正在租用車輛的信息,包括車輛類型和開始租用該車的時(shí)間,以及顯示該車的租用時(shí)長(zhǎng)和累計(jì)的費(fèi)用。
在首頁(yè)的車輛信息展示界面將汽車分為了五類,這里僅以“A類車”為例。因?yàn)槠嚨男畔⑹菑暮笈_(tái)獲取的,所以需要首先需要實(shí)現(xiàn)與后臺(tái)之間的發(fā)送和接受數(shù)據(jù),然后將接收到的數(shù)據(jù)用卡片視圖的形式展現(xiàn)出來(lái)。
首先定義了一個(gè)findAllCars的函數(shù),將前臺(tái)與后臺(tái)的交互和信息顯示這兩個(gè)功能在該函數(shù)中實(shí)現(xiàn)。
首先是前臺(tái)與后臺(tái)交互這個(gè)功能,想要獲取后臺(tái)數(shù)據(jù)首先需要向后臺(tái)發(fā)送數(shù)據(jù)。這里使用了JSON數(shù)據(jù)格式,首先定義了一個(gè)strTemp的對(duì)象,然后將" find_AllCars"這個(gè)字符串賦值給對(duì)象中的reqKey這個(gè)變量。" find_AllCars"字符串與數(shù)據(jù)庫(kù)中的find_AllCars這個(gè)存儲(chǔ)過(guò)程相對(duì)應(yīng),告訴后臺(tái)要執(zhí)行查找所有車輛信息這個(gè)操作。最后將strTemp這個(gè)對(duì)象轉(zhuǎn)換成JSON字符串,把這個(gè)JSON字符串作為sendToServer函數(shù)的第一個(gè)參數(shù)發(fā)送給后臺(tái)。
sendToServer函數(shù)就承擔(dān)了數(shù)據(jù)的發(fā)送和接收的工作。在該函數(shù)中,變量url的值是一個(gè)字符串,這個(gè)字符串表示Apache Web服務(wù)器的doserver.php這個(gè)文件的地址。接下來(lái)就是使用ajax發(fā)送請(qǐng)求和服務(wù)器響應(yīng)成功后執(zhí)行funcName(jsonVar)函數(shù)。
代碼示例:
function sendToServer(tStr,funcName)
信息展示這個(gè)功能是在成功接收到后臺(tái)數(shù)據(jù)后執(zhí)行的,因此可以將實(shí)現(xiàn)這一部分的代碼寫在sendToServer函數(shù)的第二個(gè)參數(shù)的function(data)函數(shù)中。函數(shù)function(data)將從后臺(tái)接收來(lái)的數(shù)據(jù)通過(guò)解析提取有用的數(shù)據(jù),后臺(tái)返回的數(shù)據(jù)是一個(gè)對(duì)象,我們只需要對(duì)象中data這個(gè)二維數(shù)組的數(shù)據(jù)。最后通過(guò)判斷語(yǔ)句篩選出“A類車”的數(shù)據(jù),在繪制div盒子時(shí)將對(duì)應(yīng)的數(shù)據(jù)添加進(jìn)去就實(shí)現(xiàn)了車輛信息的動(dòng)態(tài)顯示。其他頁(yè)面的不同類型車輛信息的展示原理是類似的,只需要將function(data)函數(shù)中判斷語(yǔ)句的條件進(jìn)行修改即可。
以柱狀圖為例,和獲取車輛信息的方法類似,首先定義了一個(gè)findAllRecord函數(shù)用于獲取汽車租賃記錄。在函數(shù)中定義一個(gè)strTemp的對(duì)象,對(duì)象中有一個(gè)叫reqKey的變量,給其賦值為"find_AllRecord",對(duì)應(yīng)于數(shù)據(jù)庫(kù)中查找所有汽車租賃記錄的存儲(chǔ)過(guò)程。同樣地,將這個(gè)對(duì)象轉(zhuǎn)換成JSON字符串,作為sendToServer函數(shù)的第一個(gè)參數(shù)。而sendToServer函數(shù)的第二個(gè)參數(shù)是個(gè)函數(shù),在該函數(shù)體中,將從后臺(tái)接收來(lái)的數(shù)據(jù)中表示車輛類型的字符串與事先定義好的type對(duì)象數(shù)組的name成員進(jìn)行對(duì)比,如果一樣則將對(duì)象中的sum成員加一,以此來(lái)計(jì)算不同類型車輛的數(shù)目。然后將統(tǒng)計(jì)好的車輛數(shù)目的數(shù)據(jù)存在localStorage緩存中,方便接下來(lái)使用。
接下來(lái)是實(shí)現(xiàn)柱狀圖數(shù)據(jù)的顯示,通過(guò)getItem函數(shù)將緩存中的數(shù)據(jù)取出來(lái)放在一個(gè)數(shù)組中,然后將這個(gè)數(shù)組中的成員依次放入echarts代碼的data中就可以將數(shù)據(jù)顯示出來(lái)了。當(dāng)然為了能方便刷新數(shù)據(jù),可以添加一個(gè)下拉刷新函數(shù),然后把findAllRecord這個(gè)函數(shù)放入下拉刷新函數(shù),就可以在下拉釋放后調(diào)用此函數(shù)再次查詢后臺(tái)數(shù)據(jù)以實(shí)現(xiàn)數(shù)據(jù)的刷新了。
注冊(cè)功能主要分為兩個(gè)步驟,首先獲取用戶在表單中輸入的數(shù)據(jù),然后將獲取的數(shù)據(jù)發(fā)送給后臺(tái)執(zhí)行注冊(cè)操作。在這里還是要用到strTemp這個(gè)對(duì)象,不過(guò)與上述兩個(gè)頁(yè)面不同的是,在strTemp中需要添加一個(gè)input成員,input中包含了用戶在表單中輸入的數(shù)據(jù)。給reqKey賦值為Insert_Users,告訴服務(wù)器要注冊(cè)新的用戶。
將strTemp對(duì)象轉(zhuǎn)換成JSON字符串后,同樣地調(diào)用sendToServer函數(shù),不過(guò)需要對(duì)function(data)函數(shù)進(jìn)行修改。為了能夠?qū)?shù)據(jù)傳到另一個(gè)頁(yè)面,方便在另一個(gè)頁(yè)面使用,需要將這些數(shù)據(jù)存入緩存。在注冊(cè)成功后再跳轉(zhuǎn)到個(gè)人頁(yè)面。
登錄功能的實(shí)現(xiàn)和注冊(cè)功能類似,這里就不再論述了。個(gè)人頁(yè)面主要是個(gè)人信息的展示,因此也需要使用sendToServer函數(shù)通過(guò)后臺(tái)查詢用戶的信息。在這之前需要先判斷用戶是否登錄,判斷用戶是否登錄只需要從緩存中查找userName的值是否為空就行了,因?yàn)樵谧?cè)和登錄成功后就已經(jīng)將相關(guān)數(shù)據(jù)存入到緩存中了。這時(shí)如果緩存中userName的值為空,表示用戶未登錄或已經(jīng)注銷,則不再顯示用戶信息;如果不為空,則需要調(diào)用相關(guān)函數(shù)查詢用戶信息并顯示。
因?yàn)橐@示租車信息和計(jì)時(shí)信息,所以在實(shí)現(xiàn)這個(gè)功能的函數(shù)中要調(diào)用兩次sendToServer函數(shù),且函數(shù)需要使用不同的參數(shù)。先定義兩個(gè)對(duì)象strTemp1和strTemp2,分別作為兩次調(diào)用sendToServer函數(shù)時(shí)的第一個(gè)參數(shù),告訴服務(wù)器要執(zhí)行的操作。
對(duì)象strTemp1是為了通過(guò)緩存中的userIDCard也就是用戶的id查找該用戶在租車輛的租用信息,對(duì)象strTemp2是用于查找對(duì)應(yīng)車輛,找到其租賃價(jià)格。這兩個(gè)對(duì)象對(duì)應(yīng)數(shù)據(jù)庫(kù)中對(duì)兩個(gè)表的操作。
第一次調(diào)用sendToServer函數(shù)時(shí),將str1作為第一個(gè)參數(shù),第二個(gè)參數(shù)依然是function(data)函數(shù),該函數(shù)先將后臺(tái)服務(wù)器傳回來(lái)的數(shù)據(jù)存入緩存中,再通過(guò)innerHTML方法將數(shù)據(jù)顯示在界面上,進(jìn)而實(shí)現(xiàn)租車信息的顯示。
第二次調(diào)用sendToServer函數(shù)時(shí),將str2作為第一個(gè)參數(shù),第二個(gè)參數(shù)是function(data)函數(shù),函數(shù)中將獲取到的對(duì)應(yīng)汽車價(jià)格存入緩存,然后通過(guò)把當(dāng)前時(shí)間與租車時(shí)間作差,求出到現(xiàn)在為止租用的時(shí)長(zhǎng),再與汽車價(jià)格相乘求出累計(jì)費(fèi)用。結(jié)束語(yǔ)
本文介紹了如何使用MUI框架開發(fā)移動(dòng)應(yīng)用,使用MUI框架開發(fā)移動(dòng)應(yīng)用具有跨平臺(tái)、開發(fā)成本低等特點(diǎn),且代碼簡(jiǎn)單易懂,應(yīng)用界面簡(jiǎn)潔統(tǒng)一。相較于原生APP開發(fā),雖然使用MUI框架開發(fā)APP還有很多不足的地方,但是其學(xué)習(xí)成本較低,適合于移動(dòng)應(yīng)用開發(fā)的初學(xué)者。