第20章-移動應(yīng)用開發(fā)實戰(zhàn)

20.1移動APP引導(dǎo)頁APP軟件啟動時，在正式進入APP軟件界面之前，會首先通過幾個引導(dǎo)面向用戶介紹該款A(yù)PP軟件的主要功能與特色，第一印象的好壞會極大地影響到后續(xù)的產(chǎn)品使用體驗。

功能分析制作步驟在本案例的制作過程中，每個引導(dǎo)頁面都是一個不同的圖片，通過創(chuàng)建jQueryMobile頁面，并且在頁面的內(nèi)容區(qū)域中順序插入4張不同的圖片，通過CSS樣式控制4張圖片的顯示效果，最后通過添加相應(yīng)的JavaScript腳本代碼來實現(xiàn)在各APP引導(dǎo)頁之間的滑動效果。實戰(zhàn)練習(xí)——移動APP引導(dǎo)頁

最終文件：光盤\最終文件\第20章\20-1.html視頻：光盤\視頻\第20章\20-1.swf

20.2移動應(yīng)用首頁移動應(yīng)用與網(wǎng)站相似，由多個不同功能的頁面構(gòu)成，其中最重要的就是移動應(yīng)用的首頁面，在該頁面中通常會安排導(dǎo)航元素，使用戶能夠快速進入自己感覺興趣的內(nèi)容中，并且為了方案方戶的操作，需要能夠?qū)崿F(xiàn)流暢的操作體驗。

功能分析制作背景圖輪換背景圖片輪換效果與上一節(jié)中講解的APP引導(dǎo)頁使用了不同的制作方法，在頁面中使用項目列表的方式來放置各背景圖片，通過CSS樣式來控制背景圖片的顯示效果，最后添加相應(yīng)的JavaScript腳本代碼實現(xiàn)背景圖片的滑動輪換效果。實戰(zhàn)練習(xí)——制作背景圖輪換

最終文件：光盤\最終文件\第20章\20-2.html視頻：光盤\視頻\第20章\20-2-2.swf

制作可滑動的底部導(dǎo)航欄在頁面底部放置導(dǎo)航菜單，每個導(dǎo)航菜單項都采用圖標與文字相結(jié)合的方式，便于用戶的理解和操作。導(dǎo)航菜單分為兩個大部分，分別放置在<li>標簽中，這樣可以通過與背景圖片滑動切換相同的方式來實現(xiàn)導(dǎo)航菜單的滑動切換效果。實戰(zhàn)練習(xí)——制作可滑動的底部導(dǎo)航欄

最終文件：光盤\最終文件\第20章\20-2.html視頻：光盤\視頻\第20章\20-2-3.swf

20.3訂餐APP隨著移動互聯(lián)網(wǎng)的不斷發(fā)展，人們上網(wǎng)的習(xí)慣也在悄然發(fā)生變化，由原來的PC端桌面瀏覽器逐步向移動終端設(shè)備過渡，而開發(fā)基于移動終端設(shè)備的應(yīng)用系統(tǒng)已成為各互聯(lián)網(wǎng)企業(yè)的共識。本節(jié)將使用jQueryMobile框架，開發(fā)一從此移動終端訂餐APP。系統(tǒng)分析制作啟動頁面通常在啟動APP時都會顯示一個啟動頁面，該啟動頁面可以放置宣傳廣告、推廣活動等信息內(nèi)容，經(jīng)過一定時間后自動跳轉(zhuǎn)到APP首頁面中，從而起到有效的宣傳推廣作用。實戰(zhàn)練習(xí)——制作啟動頁面

最終文件：光盤\最終文件\第20章\20-3\loading.html視頻：光盤\視頻\第20章\20-3-2.swf

制作訂餐APP首頁面APP啟動頁面顯示5秒鐘后自動跳轉(zhuǎn)到APP首頁面，在該頁面中將通過項目列表的方式來展示不同類型風(fēng)味的食品，單擊相應(yīng)的食品類型可以進入選擇區(qū)域的界面中。實戰(zhàn)練習(xí)——制作訂餐APP首頁面制作訂餐城市頁面在首頁面中選擇需要的食品類型即可進入選擇訂餐城市頁面，在該頁面中同樣使用項目列表的形式表現(xiàn)訂餐城市名稱，不同的是在該頁面中加入了列表過濾功能，可以使用戶快速找到需要訂餐的城市。實戰(zhàn)練習(xí)——制作訂餐城市頁面

最終文件：光盤\最終文件\第20章\20-3\index.html視頻：光盤\視頻\第20章\20-3-3.swf最終文件：光盤\最終文件\第20章\20-3\select-city.html視頻：光盤\視頻\第20章\20-3-4.swf制作餐廳列表頁面在select-city.html頁面中單擊相應(yīng)的訂餐城市，即可進入該城市餐廳列表頁面，可以在該頁面中查看相應(yīng)的餐廳，該頁面的餐廳列表與首頁面中的食品類型列表非常相似。實戰(zhàn)練習(xí)——制作餐廳列表頁面制作餐廳介紹頁面在餐廳列表頁面中單擊某個餐廳即可進入該餐廳的介紹頁面，在該頁面中將分兩個部分對餐廳信息和餐廳聯(lián)系方式進行介紹，并且使用jQueryMobile中的布局網(wǎng)格將介紹信息內(nèi)容分為兩欄顯示。實戰(zhàn)練習(xí)——制作餐廳介紹頁面最終文件：光盤\最終文件\第20章\20-3\select-restaurant.html視頻：光盤\視頻\第20章\20-3-5.swf最終文件：光盤\最終文件\第20章\20-3\restaurant.html視頻：光盤\視頻\第20章\20-3-6.swf

20.4本章小結(jié)本章通過3個具有代表性的移動應(yīng)用案例的制作