張文孝 白俊鴿* 四川大學錦城學院 計算機與軟件學院

1 引言

近年來隨著手機行業(yè)的迅速發(fā)展，手機變得越來越智能化。日常生活中，人們也愈加依賴手機，這都歸功于手機便攜和易操作的特點。通過移動設備不僅可以進行娛樂也可以辦理一些簡單的服務。作為交通運輸服務業(yè)的汽車租賃業(yè)正慢慢收到企業(yè)和個人的青睞，因為通過汽車租賃，個人或者企業(yè)就可以享受到和擁有個人車輛或者公司車輛一樣的便捷。而相較于買車，租車又有不用辦理保險、無需年檢維修、可隨意更換車輛等優(yōu)點。

2 移動開發(fā)技術的選擇

在選擇使用何種移動開發(fā)技術時，首先考慮的是原生APP開發(fā)?；贜ative APP框架，不同手機操作系統(tǒng)采用不同語言和框架進行開發(fā)，由云服務器數(shù)據(jù)和APP 客戶端構成，可有最佳用戶體驗，可節(jié)省帶寬成本，訪問本地資源，但需不同平臺分別開發(fā)且周期時間。但是目前手機系統(tǒng)主要分為安卓和ios兩大陣營，如果使用原生APP開發(fā)就需要使用不同的編程語言進行開發(fā)，以滿足安卓和ios用戶。因此使用原生APP開發(fā)的成本較高，而且后期的維護成本也較高。

另一種選擇是基于 HTML5 的跨平臺移動開發(fā)技術。其中的MUI框架直接采用原生JS編寫，性能高于大多數(shù)框架。MUI框架還有一個最大的優(yōu)勢就是跨平臺，不需要像原生APP開發(fā)那樣對于不同的操作系統(tǒng)需要使用不同的編程語言?？缙脚_開發(fā)技術簡單說就是能夠讓一種程序代碼在不同移動終端上應用，可以大大降低開發(fā)技術損耗的精力和時間。

3 主要功能描述

由于是移動端的應用，面向的是需要租賃汽車的用戶，因此移動端應用本身不需要涉及到后臺的數(shù)據(jù)操作等管理員需要的功能。對于實際的用戶需求可以設計出三部分主要的功能，包括登錄注冊功能、車輛信息展示功能和數(shù)據(jù)統(tǒng)計功能。

用戶可以通過登錄賬號查看個人信息，包括當前正在租用的汽車信息和計時計費信息。考慮到租賃汽車手續(xù)比較繁雜，因此沒有設計直接在移動應用上租賃汽車的功能。車輛展示功能主要展示當前可租用車輛的車輛信息，方便用戶考慮租用哪種車輛。數(shù)據(jù)統(tǒng)計功能可以展示當前總的汽車租賃情況，可直觀地看到哪種車輛最受用戶喜愛，也能給用戶選擇車輛時作參考。

4 界面設計

4.1 應用首頁

應用的首頁主要展示的是當前可以租賃的汽車的信息，包括價格、車輛編號、車輛類型信息。

頁面頂端顯示該頁標題，在標題下方使用的是區(qū)域滾動組件中的橫向滾動，將汽車根據(jù)汽車的類型進行分類顯示。中間部分為內(nèi)容顯示部分，這一部分展示車輛的價格及編號等信息，用戶可以通過點擊上方按鈕選擇不同的車輛類型，內(nèi)容部分就會顯示對應類型的車輛信息。最后，頁面底部為導航欄，通過點擊可跳轉至其他兩個頁面。

4.2 數(shù)據(jù)統(tǒng)計頁面

數(shù)據(jù)統(tǒng)計頁面主要展示近期車輛的租賃情況以及車輛性能比較，為用戶在選擇車輛時作參考。通過引入Echarts圖表可以將數(shù)據(jù)可視化，讓數(shù)據(jù)直觀地展示給用戶。Echarts提供了豐富的API接口以及文檔, 通過合理設置并結合后臺傳送的json數(shù)據(jù), 即可展示所需的數(shù)據(jù)主題。

4.3 個人頁面

個人頁面可以展示當前用戶的用戶名、正在租用的車輛信息以及該車輛的計時和累計費用等信息。此外為了能方便用戶切換賬號和新用戶注冊，設計了登錄、注冊和注銷功能。

第一部分顯示用戶的基本信息，包括用戶名和用戶ID，第二部分展示租車信息和計時信息，右上角的菜單包含了登錄和注冊兩個子頁面以及注銷功能。

在用戶未登錄時，將不顯示個人信息。登錄成功后從登錄頁面跳轉至個人頁面，此時將顯示正在租用車輛的信息，包括車輛類型和開始租用該車的時間，以及顯示該車的租用時長和累計的費用。

5 功能實現(xiàn)

5.1 應用首頁

在首頁的車輛信息展示界面將汽車分為了五類，這里僅以“A類車”為例。因為汽車的信息是從后臺獲取的，所以需要首先需要實現(xiàn)與后臺之間的發(fā)送和接受數(shù)據(jù)，然后將接收到的數(shù)據(jù)用卡片視圖的形式展現(xiàn)出來。

首先定義了一個findAllCars的函數(shù)，將前臺與后臺的交互和信息顯示這兩個功能在該函數(shù)中實現(xiàn)。

首先是前臺與后臺交互這個功能，想要獲取后臺數(shù)據(jù)首先需要向后臺發(fā)送數(shù)據(jù)。這里使用了JSON數(shù)據(jù)格式，首先定義了一個strTemp的對象，然后將" find_AllCars"這個字符串賦值給對象中的reqKey這個變量。" find_AllCars"字符串與數(shù)據(jù)庫中的find_AllCars這個存儲過程相對應，告訴后臺要執(zhí)行查找所有車輛信息這個操作。最后將strTemp這個對象轉換成JSON字符串，把這個JSON字符串作為sendToServer函數(shù)的第一個參數(shù)發(fā)送給后臺。

sendToServer函數(shù)就承擔了數(shù)據(jù)的發(fā)送和接收的工作。在該函數(shù)中，變量url的值是一個字符串，這個字符串表示Apache Web服務器的doserver.php這個文件的地址。接下來就是使用ajax發(fā)送請求和服務器響應成功后執(zhí)行funcName(jsonVar)函數(shù)。

代碼示例：

function sendToServer(tStr,funcName)

信息展示這個功能是在成功接收到后臺數(shù)據(jù)后執(zhí)行的，因此可以將實現(xiàn)這一部分的代碼寫在sendToServer函數(shù)的第二個參數(shù)的function(data)函數(shù)中。函數(shù)function(data)將從后臺接收來的數(shù)據(jù)通過解析提取有用的數(shù)據(jù)，后臺返回的數(shù)據(jù)是一個對象，我們只需要對象中data這個二維數(shù)組的數(shù)據(jù)。最后通過判斷語句篩選出“A類車”的數(shù)據(jù)，在繪制div盒子時將對應的數(shù)據(jù)添加進去就實現(xiàn)了車輛信息的動態(tài)顯示。其他頁面的不同類型車輛信息的展示原理是類似的，只需要將function(data)函數(shù)中判斷語句的條件進行修改即可。

5.2 統(tǒng)計頁面

以柱狀圖為例，和獲取車輛信息的方法類似，首先定義了一個findAllRecord函數(shù)用于獲取汽車租賃記錄。在函數(shù)中定義一個strTemp的對象，對象中有一個叫reqKey的變量，給其賦值為"find_AllRecord"，對應于數(shù)據(jù)庫中查找所有汽車租賃記錄的存儲過程。同樣地，將這個對象轉換成JSON字符串，作為sendToServer函數(shù)的第一個參數(shù)。而sendToServer函數(shù)的第二個參數(shù)是個函數(shù)，在該函數(shù)體中，將從后臺接收來的數(shù)據(jù)中表示車輛類型的字符串與事先定義好的type對象數(shù)組的name成員進行對比，如果一樣則將對象中的sum成員加一，以此來計算不同類型車輛的數(shù)目。然后將統(tǒng)計好的車輛數(shù)目的數(shù)據(jù)存在localStorage緩存中，方便接下來使用。

接下來是實現(xiàn)柱狀圖數(shù)據(jù)的顯示，通過getItem函數(shù)將緩存中的數(shù)據(jù)取出來放在一個數(shù)組中，然后將這個數(shù)組中的成員依次放入echarts代碼的data中就可以將數(shù)據(jù)顯示出來了。當然為了能方便刷新數(shù)據(jù)，可以添加一個下拉刷新函數(shù)，然后把findAllRecord這個函數(shù)放入下拉刷新函數(shù)，就可以在下拉釋放后調用此函數(shù)再次查詢后臺數(shù)據(jù)以實現(xiàn)數(shù)據(jù)的刷新了。

5.3 注冊、登錄及個人頁面

注冊功能主要分為兩個步驟，首先獲取用戶在表單中輸入的數(shù)據(jù)，然后將獲取的數(shù)據(jù)發(fā)送給后臺執(zhí)行注冊操作。在這里還是要用到strTemp這個對象，不過與上述兩個頁面不同的是，在strTemp中需要添加一個input成員，input中包含了用戶在表單中輸入的數(shù)據(jù)。給reqKey賦值為Insert_Users，告訴服務器要注冊新的用戶。

將strTemp對象轉換成JSON字符串后，同樣地調用sendToServer函數(shù)，不過需要對function(data)函數(shù)進行修改。為了能夠將數(shù)據(jù)傳到另一個頁面，方便在另一個頁面使用，需要將這些數(shù)據(jù)存入緩存。在注冊成功后再跳轉到個人頁面。

登錄功能的實現(xiàn)和注冊功能類似，這里就不再論述了。個人頁面主要是個人信息的展示，因此也需要使用sendToServer函數(shù)通過后臺查詢用戶的信息。在這之前需要先判斷用戶是否登錄，判斷用戶是否登錄只需要從緩存中查找userName的值是否為空就行了，因為在注冊和登錄成功后就已經(jīng)將相關數(shù)據(jù)存入到緩存中了。這時如果緩存中userName的值為空，表示用戶未登錄或已經(jīng)注銷，則不再顯示用戶信息；如果不為空，則需要調用相關函數(shù)查詢用戶信息并顯示。

因為要顯示租車信息和計時信息，所以在實現(xiàn)這個功能的函數(shù)中要調用兩次sendToServer函數(shù)，且函數(shù)需要使用不同的參數(shù)。先定義兩個對象strTemp1和strTemp2，分別作為兩次調用sendToServer函數(shù)時的第一個參數(shù)，告訴服務器要執(zhí)行的操作。

對象strTemp1是為了通過緩存中的userIDCard也就是用戶的id查找該用戶在租車輛的租用信息，對象strTemp2是用于查找對應車輛，找到其租賃價格。這兩個對象對應數(shù)據(jù)庫中對兩個表的操作。

第一次調用sendToServer函數(shù)時，將str1作為第一個參數(shù)，第二個參數(shù)依然是function(data)函數(shù)，該函數(shù)先將后臺服務器傳回來的數(shù)據(jù)存入緩存中，再通過innerHTML方法將數(shù)據(jù)顯示在界面上，進而實現(xiàn)租車信息的顯示。

第二次調用sendToServer函數(shù)時，將str2作為第一個參數(shù)，第二個參數(shù)是function(data)函數(shù)，函數(shù)中將獲取到的對應汽車價格存入緩存，然后通過把當前時間與租車時間作差，求出到現(xiàn)在為止租用的時長，再與汽車價格相乘求出累計費用。結束語

6 結束語

本文介紹了如何使用MUI框架開發(fā)移動應用，使用MUI框架開發(fā)移動應用具有跨平臺、開發(fā)成本低等特點，且代碼簡單易懂，應用界面簡潔統(tǒng)一。相較于原生APP開發(fā)，雖然使用MUI框架開發(fā)APP還有很多不足的地方，但是其學習成本較低，適合于移動應用開發(fā)的初學者。