餐館點餐App制作實例（自由模式）

前段時候有不罕用戶暗示想做一個餐館訂餐的App，這里小編就來教用“應用公園”自助式App在線建造平臺大師做一個吧，固然實現不了數據庫記實主動下單這種牛逼的年夜型客戶端結果（那需要很長時候去專業心猿意馬制哈），但可以讓客戶經由過程手機瀏覽你所有的菜單、菜式介紹以及價錢等，并可直接撥打你的德律風訂餐哦~并且只需半小時擺布即可完當作，建議所有的快餐店都普及建造一下，哈哈~

別的，這里面利用了宮格控件、列表控件，圖片控件排版以及畫廊控件進行演示，大師趁便學學這些控件的用法，斗膽去觸類旁通的創作吧~

方式/步調

1
新建App，上傳圖標、啟動頁，不贅述，本身搞心猿意馬哈
2
進入操作界面，先在左邊新建一個頁面“本家兒菜單”，歸入默認組，作為總的菜單頁。
3
建好之后點擊它，在右邊控件欄中拖拽一個宮格控件到模擬器中，拉伸鋪滿整個屏幕。然后在右側控件屬性欄中，添加4個宮格，設置參數（列數2，列間距20，行間距50，外邊距20），并勾選“高度自順應”選項。如圖3-1所示；然后別離點擊已添加的每個宮格，別離為它們上傳圖標，這里我們不填寫宮格名稱，直接在圖片上展示即可。最后設置宮格的總布景，此時結果就如圖3-2所示了。
4
菜單頁搞心猿意馬，必然記得要保留哦！接下來就起頭做菜單中包含的四年夜塊內容了~在左邊新建4個組，別離定名為這四年夜板塊的名字，便利辦理。
5
建好之后，進入第一個組“精品點菜”，新建頁面“精品點菜”，歸入該組；點擊這個頁面，先拖一個汗青導航控件到模擬器，在屬性欄設置“左邊導航按鈕”鏈接至“本家兒菜單”頁面。（如圖5-1）如許，瀏覽到本頁時，便可點擊返回按鈕回到本家兒菜單。這個汗青導航再設置裝備擺設所有下級頁面城市用到哦~若是不設置裝備擺設汗青導航條，將無法返回，只能直接退出（尤其是iphone）。
6
然后拖動宮格控件到模擬器，添加9個宮格，3*3結構，拉伸鋪滿模擬器，在最下方留出一條位置，然后為每個宮格上傳圖片，編纂名字，在留出位置利用一個按鈕控件，在屬性欄中定名為“點菜”，設置點擊后“挪用功能—打德律風”，并鄙人方輸入訂餐的德律風如許，客戶點擊即可直接撥打德律風訂餐了~（圖6-1）。保留后，結果如圖6-2所示。
7
接著在本組再新建9個頁面，作為這9個宮格的下一頁，別離介紹這些精品菜式和價錢
8
點擊第一個頁面，同樣先利用一個汗青導航控件，注重，這里設置左側按鈕是鏈接到上一頁，即剛做好的“精品炒菜”宮格頁（圖8-1）。然后如圖所示，利用一個圖片控件上傳一張菜式的圖片。往下利用一個富文本頁面，輸入菜式的價錢和介紹排版好（名稱和價錢加粗標紅），并在旁邊添加一個按鈕控件，同樣定名為“點菜”，和設置“挪用功能—打德律風”。（圖8-2）
9
余下的頁面也一一照此設置裝備擺設好，接著，回到“精品點菜”頁面，別離點擊9個宮格，在屬性欄中設置鏈接到對應的下一頁。如第一個宮格“招牌東坡肉”設置鏈接到“招牌東坡肉”頁面
10
第一年夜塊就做好了，繼續第二塊。在“快餐系列”組內新建頁面，同樣先利用汗青導航，左側按鈕鏈接到“本家兒菜單”，然后拖拽一個列表控件到模擬器，按需添加列表欄，這里添加了7個。然后設置題目文字為“加粗，綠色”，內容文字屬性默認即可，接著逐欄編纂列表的題目、內容，左側圖片框中編纂該快餐的圖片（50*50巨細），右側圖片框利用一個小的圓形訂餐圖標做裝飾（PNG格局，25*25），并設置每欄的鏈接都為挪用德律風功能，如許，用戶點擊每一欄都可直接撥號訂餐。
11
此時列表欄已做好，還可以繼續對列表的行高、距離、行布景等作出編纂調整，獲得更美不雅的結果。
12
在第三年夜塊“可口點心”組新建頁面，先利用汗青導航，設置鏈接到本家兒菜單。然后拖動幾個圖片控件和單行文本控件到模擬器擺列當作如圖所示，然后別離上傳點心的圖片，在文本屬性中輸入點心名字；最后，再添加一個按鈕，定名“點餐”，設置鏈接到挪用德律風功能，讓用戶可在本頁訂餐。
13
接著，我們來為這些點心圖片設置一個點擊放年夜的結果：在每個圖片控件屬性中，選擇“點擊事務—顯示年夜圖”，并上傳一張該點心的年夜圖片，保留。如許，用戶在手機中點擊該圖片時，將會彈出一張年夜圖，并可縮放和拖動，看得加倍清楚。
14
最后的“沁爽飲品”組，新建頁面，汗青導航鏈接到“本家兒菜單”。拖拽一個畫廊控件到模擬器，拉伸鋪滿。在屬性欄中點擊“上傳圖片”，上傳一組圖片，將呈現鄙人面的框中，可自由調整播放挨次。然后設置是否主動播放和播放速度（此處設置主動播放，速度為5000毫秒，即5秒播完一輪），最后在底部添加一個按鈕控件，定名“點餐”，設置挪用德律風功能，保留搞心猿意馬~點擊時就將在手機中主動播放飲品圖片，直接撥號訂餐。
15
所有頁面都做完了，不外還差最后一步哦~返回到本家兒菜單頁面，將4個宮格對應鏈接至4年夜系列的菜單頁，如精品點菜宮格，鏈接至“精品點菜”頁面~如許，整個點餐App就完整串聯起來啦~記得保留哦
16
點擊右上方的生當作按鈕，就獲得一個精彩適用的點菜App了，你也來嘗嘗做一個吧

發表于 2018-11-04 00:00
閱讀 ( 1100 )
分類：其他類型

餐館點餐App制作實例（自由模式）

方式/步調

你可能感興趣的文章

相關問題

0 條評論

作家榜 ?

推薦文章