餐馆点餐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
阅读 ( 1102 )
分类：其他类型

餐馆点餐App制作实例（自由模式）

方式/步调

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »

推荐文章