第20章-移動(dòng)應(yīng)用開(kāi)發(fā)實(shí)戰(zhàn)

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

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

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

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

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

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

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

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

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

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

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

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

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