隨著比較全面智能手機(jī)時(shí)代的到來(lái)，移動(dòng)上網(wǎng)速度不斷提升，大大提升了人們?cè)诰W(wǎng)上消費(fèi)的頻率。如今在電商APP上完成一筆消費(fèi)，顯得太簡(jiǎn)單了。手機(jī)已經(jīng)成為日常生活中重要的工具之一。

這一現(xiàn)象也引發(fā)了電商APP創(chuàng)業(yè)潮，眾多創(chuàng)客們紛紛投身到APP的創(chuàng)業(yè)中，并且在移動(dòng)互聯(lián)網(wǎng)中贏得了人生桶金。比如河貍家、愛鮮蜂、e袋洗等優(yōu)秀的同城服務(wù)APP，都是很好的例子。如果你也具有這樣的一個(gè)APP創(chuàng)意，首先就要有自己的APP平臺(tái)。大多數(shù)電商APP是可以自己制作的，這樣既可以節(jié)約APP開發(fā)成本又可以讓自己在APP的制作過(guò)程中更加隨心所欲，何樂(lè)而不為呢？那么，如何自己制作APP軟件？有沒(méi)有一款能夠快速上手的APP在線制作平臺(tái)呢？

在此，小編就向大家推薦一款不用編程的APP在線制作工具:應(yīng)用公園apppark，下面，就跟著這個(gè)訂餐APP開發(fā)教程來(lái)一步一步學(xué)會(huì)怎么制作屬于自己的電商APP平臺(tái)吧！下面以一款點(diǎn)餐APP為例：

先看看App客戶端的效果：

開始制作：

1、 新建App，上傳圖標(biāo)、啟動(dòng)頁(yè)，不贅述，自己搞定哈~

2、 進(jìn)入操作界面，先在左邊新建一個(gè)頁(yè)面“主菜單”，歸入默認(rèn)組，作為總的菜單頁(yè)。

3、 建好之后點(diǎn)擊它，在右邊控件欄中拖拽一個(gè)宮格控件到模擬器中，拉伸鋪滿整個(gè)屏幕。然后在右側(cè)控件屬性欄中，添加4個(gè)宮格，設(shè)置參數(shù)（列數(shù)2，列間距20，行間距50，外邊距20），并勾選“高度自適應(yīng)”選項(xiàng)。如圖3-1所示；然后分別點(diǎn)擊已添加的每個(gè)宮格，分別為它們上傳圖標(biāo)，這里我們不填寫宮格名稱，直接在圖片上展示即可。后設(shè)置宮格的總背景，此時(shí)效果就如下圖所示了；

訂餐APP制作" width="550" vspace="0" hspace="0" height="329" border="0" />

4、 菜單頁(yè)搞定，一定記得要保存哦！接下來(lái)就開始做菜單中包含的四大塊內(nèi)容了~在左邊新建4個(gè)組，分別命名為這四大板塊的名字，方便管理。

5、 建好之后，進(jìn)入個(gè)組“精品點(diǎn)菜”，新建頁(yè)面“精品點(diǎn)菜”，歸入該組；點(diǎn)擊這個(gè)頁(yè)面，先拖一個(gè)歷史導(dǎo)航控件到模擬器，在屬性欄設(shè)置“左邊導(dǎo)航按鈕”鏈接“主菜單”頁(yè)面。（如下圖）這樣，瀏覽到本頁(yè)時(shí)，便可點(diǎn)擊返回按鈕回到主菜單。這個(gè)歷史導(dǎo)航再配置所有下級(jí)頁(yè)面都會(huì)用到哦~如果不配置歷史導(dǎo)航條，將無(wú)法返回，只能直接退出（尤其是iphone）。

6、 然后拖動(dòng)宮格控件到模擬器，添加9個(gè)宮格，3*3布局，拉伸鋪滿模擬器，在下方留出一條位置，然后為每個(gè)宮格上傳圖片，編輯名字，在留出位置使用一個(gè)按鈕控件，在屬性欄中命名為“點(diǎn)菜”，設(shè)置點(diǎn)擊后“調(diào)用功能—打電話”，并在下方輸入訂餐的電話這樣，客戶點(diǎn)擊即可直接撥打電話訂餐了~。保存后，效果如下圖。

7、 接著在本組再新建9個(gè)頁(yè)面，作為這9個(gè)宮格的下一頁(yè)，分別介紹這些精品菜式和價(jià)格~（如下圖）

8、 點(diǎn)擊個(gè)頁(yè)面，同樣先使用一個(gè)歷史導(dǎo)航控件，注意，這里設(shè)置左側(cè)按鈕是鏈接到上一頁(yè)，即剛做好的“精品炒菜”宮格頁(yè)。然后如圖所示，使用一個(gè)圖片控件上傳一張菜式的圖片。往下使用一個(gè)富文本頁(yè)面，輸入菜式的價(jià)格和介紹排版好（名稱和價(jià)格加粗標(biāo)紅），并在旁邊添加一個(gè)按鈕控件，同樣命名為“點(diǎn)菜”，和設(shè)置“調(diào)用功能—打電話”。（如下圖

9、 余下的頁(yè)面也一一照此配置好，接著，回到“精品點(diǎn)菜”頁(yè)面，分別點(diǎn)擊9個(gè)宮格，在屬性欄中設(shè)置鏈接到對(duì)應(yīng)的下一頁(yè)。如個(gè)宮格“招牌東坡肉”設(shè)置鏈接到“招牌東坡肉”頁(yè)面。

10、大塊就做好了，繼續(xù)第二塊。在“快餐系列”組內(nèi)新建頁(yè)面，同樣先使用歷史導(dǎo)航，左側(cè)按鈕鏈接到“主菜單”，然后拖拽一個(gè)列表控件到模擬器，按需添加列表欄，這里添加了7個(gè)。然后設(shè)置標(biāo)題文字為“加粗，綠色”，內(nèi)容文字屬性默認(rèn)即可，接著逐欄編輯列表的標(biāo)題、內(nèi)容，左側(cè)圖片框中編輯該快餐的圖片（50*50大小），右側(cè)圖片框使用一個(gè)小的圓形訂餐圖標(biāo)做裝飾（PNG格式，25*25），并設(shè)置每欄的鏈接都為調(diào)用電話功能，這樣，用戶點(diǎn)擊每一欄都可直接撥號(hào)訂餐。（如下圖）

11、此時(shí)列表欄已做好，還可以繼續(xù)對(duì)列表的行高、間隔、行背景等作出編輯調(diào)整，獲得更美觀的效果。（如下圖）

12、在第三大塊“可口點(diǎn)心”組新建頁(yè)面，先使用歷史導(dǎo)航，設(shè)置鏈接到主菜單。然后拖動(dòng)幾個(gè)圖片控件和單行文本控件到模擬器排列成如圖所示，然后分別上傳點(diǎn)心的圖片，在文本屬性中輸入點(diǎn)心名字；后，再添加一個(gè)按鈕，命名“點(diǎn)餐”，設(shè)置鏈接到調(diào)用電話功能，讓用戶可在本頁(yè)訂餐。

13、接著，我們來(lái)為這些點(diǎn)心圖片設(shè)置一個(gè)點(diǎn)擊放大的效果：在每個(gè)圖片控件屬性中，選擇“點(diǎn)擊事件—顯示大圖”，并上傳一張?jiān)擖c(diǎn)心的大圖片，保存。這樣，用戶在手機(jī)中點(diǎn)擊該圖片時(shí)，將會(huì)彈出一張大圖，并可縮放和拖動(dòng)，看得更加清晰。（如下圖）

14、后的“沁爽飲品”組，新建頁(yè)面，歷史導(dǎo)航鏈接到“主菜單”。拖拽一個(gè)畫廊控件到模擬器，拉伸鋪滿。在屬性欄中點(diǎn)擊“上傳圖片”，上傳一組圖片，將出現(xiàn)在下面的框中，可自由調(diào)整播放順序。然后設(shè)置是否自動(dòng)播放和播放速度（此處設(shè)置自動(dòng)播放，速度為5000毫秒，即5秒播完一輪），后在底部添加一個(gè)按鈕控件，命名“點(diǎn)餐”，設(shè)置調(diào)用電話功能，保存搞定~點(diǎn)擊時(shí)就將在手機(jī)中自動(dòng)播放飲品圖片，直接撥號(hào)訂餐。

15、所有頁(yè)面都做完了，不過(guò)還差后一步哦~返回到主菜單頁(yè)面，將4個(gè)宮格對(duì)應(yīng)鏈接4大系列的菜單頁(yè)，如精品點(diǎn)菜宮格，鏈接“精品點(diǎn)菜”頁(yè)面~這樣，整個(gè)點(diǎn)餐App就完整串聯(lián)起來(lái)啦~記得保存哦（如下圖）

16、點(diǎn)擊右上方的生成按鈕，就得到一個(gè)精美實(shí)用的點(diǎn)菜App了。

應(yīng)用公園作為國(guó)內(nèi)早、功能強(qiáng)大的應(yīng)用開發(fā)工具。內(nèi)涵上百種功能控件，可以任意組合搭配。如果感覺上面的步驟比較復(fù)雜，那就選擇主題模式，里面有上百款經(jīng)典模板、成功案例，可以一鍵運(yùn)用，僅需要對(duì)文字圖片內(nèi)容進(jìn)行更換。十分鐘制作不是夢(mèng)。