基于HTML5的點(diǎn)餐平臺(tái)手機(jī)客戶端設(shè)計(jì)

摘 要：文章首先對(duì)本類型送餐服務(wù)進(jìn)行了介紹，并簡(jiǎn)要介紹了Sencha Touch框架。接著介紹了開發(fā)環(huán)境的配置，程序的架構(gòu)，以及代碼的具體實(shí)現(xiàn)方法。最后提出了一些可以改進(jìn)的內(nèi)容。

關(guān)鍵詞：點(diǎn)餐平臺(tái)；手機(jī)客戶端

中圖分類號(hào)：TP311.52

一般情況下，訂餐平臺(tái)會(huì)開發(fā)各種平臺(tái)的App供用戶使用，然而對(duì)于資金和人力都比較有限的中小型企業(yè)，同時(shí)開發(fā)多個(gè)平臺(tái)的開發(fā)費(fèi)用和維護(hù)費(fèi)用很高，因此對(duì)于中小型企業(yè)并不是最優(yōu)選擇。本文我們使用了基于HTML5的框架Sencha Touch來解決這個(gè)問題。

1 準(zhǔn)備工作

我們首先需要配置好開發(fā)環(huán)境，從官方網(wǎng)站下載好Sencha Touch的框架，解壓縮完畢后就可以找到Sencha Touch的主框架，將其引入新建的送餐頁面index.html的標(biāo)簽中，代碼如下：

其中sencha-touch.css是樣式文件，sencha-touch-debug.js是框架的js文件，app.js是我們即將發(fā)開的app的js文件。注意到包含debug字符的文件或文件夾是方便開發(fā)者調(diào)試的，在正式build時(shí)應(yīng)該替換為發(fā)布版的css和js文件，可以有效減小app的大小。之后就可以打開我們創(chuàng)建的app.js文件開始進(jìn)行開發(fā)。

2 程序結(jié)構(gòu)

手機(jī)app應(yīng)該包含四個(gè)主要窗口：定位，選餐，購(gòu)物車，賬號(hào)。定位頁面主要用于定位用戶的區(qū)域，從而計(jì)算出距離用戶的餐廳或計(jì)算送餐費(fèi)用等。選餐頁面應(yīng)該列出所有符合條件的餐館，并包含根據(jù)不同搜索條件，如菜系等進(jìn)行篩選的功能，其次應(yīng)該包含一個(gè)子頁面，用于在用戶點(diǎn)選餐廳后，顯示該餐廳擁有的餐品列表供用戶進(jìn)行選擇。購(gòu)物車頁面應(yīng)該包含一個(gè)列表顯示出用戶已點(diǎn)餐品，同時(shí)應(yīng)包含一個(gè)子頁面，用于在用戶點(diǎn)擊購(gòu)物車頁面中的結(jié)賬按鈕后顯示出客人需要輸入的聯(lián)系信息。賬號(hào)頁面用于供用戶進(jìn)行登錄、注冊(cè)等動(dòng)作。最后，這四部分應(yīng)該包含在一個(gè)主架構(gòu)中，寫在app.js里。

3 代碼實(shí)現(xiàn)

3.1 主體結(jié)構(gòu)。Sencha Touch中有許多組件，用于實(shí)現(xiàn)各種功能，在使用之前我們需要引用相應(yīng)的庫。

Ext.require（'Ext.TabPanel'）；

Ext.require（['Ext.form.FieldSet'， 'Ext.picker.Picker'， 'Ext.TitleBar']）；

Ext.require（['Ext.dataview.List'，'Ext.form.Panel'，'Ext.navigation.View'，'Ext.navigation.Bar']）；

上面的代碼示例引用了Tab面板、表單庫中的FieldSet、單選組件、主題欄等各種我們可能會(huì)用到的組件。引用庫的目的在于在編譯app文件時(shí)，將相關(guān)的庫整合至app中，如果沒有引用庫，在載入頁面時(shí)程序會(huì)另行載入相關(guān)的庫文件，由于庫文件眾多且沒有進(jìn)行壓縮，這種情況下程序的載入速度會(huì)明顯拖慢。

本文中的app包含四個(gè)窗口，每個(gè)窗口使用類似如下代碼創(chuàng)建：

var p0=Ext.create（'Ext.Panel'， {title：’zone’}）； //創(chuàng)建一個(gè)名為zone的窗口0

之后創(chuàng)建一個(gè)tabPanel，并將創(chuàng)建好的四個(gè)窗口Panel綁定至此tabPanel。

var tabPanel = Ext.create（'Ext.TabPanel'，{ id：'tabPanel' }）；//創(chuàng)建一個(gè)tabPanel容器

tabPanel.add（p0）；//將之前創(chuàng)建的窗口0加入tabPanel中

Ext.Viewport.add（tabPanel）；//將tabPanel添加至視圖中

將以上代碼放入主框架中，

Ext.application（{

name： 'MyApp'，

launch： function（）{…}

}）；

這樣就實(shí)現(xiàn)了主體架構(gòu)完成，tabPanel下方的導(dǎo)航欄包含4個(gè)按鈕，觸碰按鈕將會(huì)切換不同的窗口。接下來實(shí)現(xiàn)每個(gè)窗口中的功能。

3.2 定位。定位窗口主要分為地址搜索欄與選擇列表，用戶在搜索欄中輸入地址的關(guān)鍵字，通過Ajax從服務(wù)器獲取到對(duì)應(yīng)的地址數(shù)組，及時(shí)更新至選擇列表供用戶選擇正確的地址。搜索的實(shí)現(xiàn)是用過設(shè)置Store類中的代理，先用Ajax將數(shù)據(jù)返回，然后通過list組件列出返回的地址。

var StoreZoneAddress = Ext.create（'Ext.data.Store'，{…}）；//建立dataStore

StoreZoneAddress.setProxy（{type：\"ajax\"，

url：”www.test.com/ AjaxAddressReturn”，

reader：{ type： \"json\"，rootProperty：\"zoneAddr\"}

}）；//設(shè)置dataStore的代理

StoreZoneAddress.load（）；//載入數(shù)據(jù)

上面的代碼首先定義了一個(gè)Store，Store是Sencha Touch中非常強(qiáng)大的數(shù)據(jù)類，可以完成執(zhí)行后臺(tái)方法獲取json格式的數(shù)據(jù)、即時(shí)排序等功能。之后設(shè)置了代理，設(shè)置了將要運(yùn)行的服務(wù)端URL方法，定義了讀取器并將解析類型定為json。最后使用Load方法運(yùn)行服務(wù)端方法，解析返回內(nèi)容并儲(chǔ)存在Store中。接下來我們定義一個(gè)現(xiàn)實(shí)模板XTemplate：

var TplZoneAddr = new Ext.XTemplate（

''，

'

''）；

最后使用如下代碼來顯示Store和XTemplate的內(nèi)容

{xtype：'list'，

itemTpl：TplZoneAddr，

store： StoreZoneAddress，

listeners：{…}}

其中xtype聲明了對(duì)象的類型，itemTpl指定了使用的模板，store指定了所使用的store類。監(jiān)聽器中可以定義針對(duì)不同事件的響應(yīng)。至此用戶的地址搜索與選擇功能已經(jīng)實(shí)現(xiàn)完畢。

3.3 選餐。選餐窗口的大體結(jié)構(gòu)與定為窗口相同，同樣是定義一個(gè)Store用來存放餐廳數(shù)據(jù)并列出，顯示時(shí)可以列出餐廳的圖片、送餐時(shí)間預(yù)計(jì)等信息。需注意的是應(yīng)該在每個(gè)餐廳欄增加一個(gè)響應(yīng)事件，其中定義一個(gè)Store和XTemplate用來存放和顯示餐品數(shù)據(jù)，供用戶選擇。同時(shí)也可以定義一個(gè)下拉菜單作為根據(jù)菜系分類的過濾器，每次選擇時(shí)可以重新設(shè)定餐廳Store的代理并重新載入，達(dá)到過濾餐廳的效果。

3.4 購(gòu)物車。在定義選餐窗口時(shí)我們需要同時(shí)定義一個(gè)Store對(duì)象用于儲(chǔ)存用戶已經(jīng)點(diǎn)選餐品的信息，如餐品名、數(shù)量、價(jià)格等。同時(shí)采用與選餐窗口同樣的方法，例如使用XTemplate模板對(duì)象將購(gòu)物車?yán)L制完成。在導(dǎo)航欄中應(yīng)該加入增減按鈕，用于增加或減少購(gòu)物車中選中的餐品。在此窗口中應(yīng)有一個(gè)結(jié)賬按鈕，用于壓入另一個(gè)子表單窗口供用戶輸入用戶地址等信息，并確認(rèn)訂單，表單類型的xtype屬性是formpanel。

3.5 賬號(hào)。賬號(hào)窗口中應(yīng)包含一個(gè)表單供用戶進(jìn)行登錄操作，在通過Ext.Ajax.request驗(yàn)證成功后，壓入一個(gè)已登錄窗口，其中應(yīng)該包含查看歷史訂單、修改密碼等功能，需注意的是查看歷史訂單功能可能需要進(jìn)一步壓入一個(gè)顯示訂單的子窗口。

4 其他需要解決的問題

通過在html頁面中引用Sencha touch的庫會(huì)導(dǎo)致載入速度非常慢，此時(shí)需要安裝SDK Tools進(jìn)行編譯，從而將庫壓縮至js文件中，較大地減小文件的體積。中文在某些版本的SDK Tools編譯后會(huì)導(dǎo)致亂碼，可在調(diào)用app時(shí)動(dòng)態(tài)從服務(wù)器載入中文字符進(jìn)行替換。而App的CSS樣式既可以從CSS文件中定義，也可以改寫SASS文件，由編譯器自動(dòng)生成CSS文件。

參考文獻(xiàn)：

[1]蔡惠.基于移動(dòng)終端的智能點(diǎn)餐系統(tǒng)分析設(shè)計(jì)[J].計(jì)算機(jī)光盤軟件與應(yīng)用，2014（15）：290-291.

[2]鄭逸凡.基于HTML5技術(shù)的Web游戲設(shè)計(jì)[J].計(jì)算機(jī)光盤軟件與應(yīng)用，2014（17）：49-50.

作者單位：西安郵電大學(xué)，西安 710121