俗话说：民以食为天，现代生活节奏快、压力大，据统计，仅有34%的上班族选择中午自带午餐，剩余人中约半数以上的上班族会选择通过线上O2O应用进行网上订餐。敏锐的移动开发者从中嗅到商机，饿了么、美团、百度糯米等，这些大热的O2O应用如何实现线上订餐？AppCan社区昵称为“明明”的开发者为大家分享了仿百度糯米APP源码，从界面UI到功能实现，都一一给出了参考。下面，请跟随小编一起去膜拜吧！
首页效果图UI部分
新建并添加index.html页面footer部分
divid=footerclass=h3
divid=tabviewclass=ufsc-bgubtsc-border-tab/div
/div
效果为：
JS代码部分
（1）在首页面appcan.ready函数体内添加加载浮动窗口代码：
appcan.frame.open({
id:content,
url:[{
inPageName:p1,
inUrl:shouye.html,
},{
inPageName:p2,
inUrl:near.html,
},{
inPageName:p3,
inUrl:choose.html,
},{
inPageName:p4,
inUrl:my.html,
}],
top:0,
left:0,
index:0,
change:function(err,res){
tabview.moveTo(res.multiPopSelectedIndex);
}
});
（2）在首页面加载浮动窗口代码下边增加tab选项卡代码：
vartabview=appcan.tab({
selector:#tabview,
hasIcon:true,
hasAnim:true,
hasLabel:true,
hasBadge:true,
data:[{
label:首页,
icon:fa-home
},{
label:附近,
icon:fa-map-marker
},{
label:精选,
icon:fa-heart-o,
},{
label:我的,
icon:fa-user,
});
tabview.on(click,function(obj,index){
appcan.window.selectMultiPopover(content,index);
})
效果如下：
附近效果图（1）修改near.html标题内容为：“附近”
效果如下：
（2）在header布局下面添加代码
hrstyle=margin-top:0;
divid=class=h1w_mar_5style=margin-bottom:0.5em;
divid=class=w_25uflcenterm_text
全部分类
divid=class=fafa-angle-down/div
/div
divid=class=w_25uflcenterm_text
全程
divid=class=fafa-angle-down/div
/div
divid=class=w_25uflcenterm_text
距离优先
divid=class=fafa-angle-down/div
/div
divid=class=w_25uflcenterm_text
筛选
divid=class=fafa-angle-down/div
/div
/div
divid=class=h0bg_8
divid=class=m_text
当前：湖北省武汉市江夏区金融港
/div
/div
效果如下：
精选choose.html页面我的主页my.html页面具体文档附件