H5 移动APP - 面包店

使用jquerymobile、html5、css3实现移动APP

流程图

H5 移动APP - 面包店_第1张图片

打包

用hbuilder实现打包

效果截图展示

图2-1 APP图标

H5 移动APP - 面包店_第2张图片

图2-2 主页

H5 移动APP - 面包店_第3张图片

H5 移动APP - 面包店_第4张图片

图2-3 面包列表&详细信息

H5 移动APP - 面包店_第5张图片

图2-4 订购

H5 移动APP - 面包店_第6张图片

图2-5 生成&查看订单

H5 移动APP - 面包店_第7张图片

图2-6 删除订单

H5 移动APP - 面包店_第8张图片

H5 移动APP - 面包店_第9张图片

图2-7 分店列表&详细信息

H5 移动APP - 面包店_第10张图片

图2-8 定位系统

主要代码

index.html


    
        
        
        
        
        
        
        
    
    
        
            
                                 

面包物语

            
                         
                                                                   
                        
  • 面包列表
  •                     
  • 我的订单
  •                     
  • 地图定位
  •                     
  • 商店信息
  •                     
  • 关于我们
  •                                      
            
        
     search.html                       用户查询订单                                                                         
            
                主页                 

订单列表

            
            
                
                        
  • 面包种类
  •                     
  • 奶油面包
  •                     
  • 口味
  •                     
  •                     
  • 订购数量
  •                     
  •                 
                
                        
  • 面包种类
  •                     
  • 全麦培根面包
  •                     
  • 口味
  •                     
  •                     
  • 订购数量
  •                     
  •                 
                
                        
  • 面包种类
  •                     
  • 黑糖面包
  •                     
  • 口味
  •                     
  •                     
  • 订购数量
  •                     
  •                 
                
                        
  • 面包种类
  •                     
  • 全麦面包
  •                     
  • 口味
  •                     
  •                     
  • 订购数量
  •                     
  •                 
                
                        
  • 订单已删除!
  •                 
                修改订单                 删除订单                 支付订单                 已完成订单                 没有订单哦~
点此查看面包~
            
            
                订购专线:18900229966             
        
     list.html                       面包列表                                                                         
            
                主页                 

面包物语

                提交订单             
            
                
                        
  •                             

    奶油面包

                                

    面包中包含夹心奶油,入口即化,口味俱佳,若是加热三分钟,口感更上一层

                            
                                                     
                                关闭                             

                                    

                                    

    面包中包含夹心奶油,入口即化,口味俱佳,若是加热三分钟,口感更上一层

                                    
                                    选择包装种类:                                                                                                   选择口味:                                                                  
                                                                             
                                        订购数量:                                                                                                               
                                                                         
                                

                            
                        
  •                     
  •                             

    全麦培根面包

                                

    德国进口的炭烧培根,嵌入全麦面包片中,味道超级棒

                            
                            
                                关闭                             

                                    

                                    

    德国进口的炭烧培根,嵌入全麦面包片中,味道超级棒

                                    
                                    选择包装种类:                                                                                                   选择口味:                                                                  
                                                                             
                                        订购数量:                                                                                                               
                                                                         
                                

                            
                                                 
  •                     
  •                             

    黑糖面包

                                

    精选黑糖,烧至糖汁,涂至面包外层,冷凝成黑糖层,口味极佳,一致好评

                            
                            
                                关闭                             

                                    

                                    

    精选黑糖,烧至糖汁,涂至面包外层,冷凝成黑糖层,口味极佳,一致好评

                                    
                                    选择包装种类:                                                                                                   选择口味:                                                                  
                                                                             
                                        订购数量:                                                                                                               
                                                                         
                                

                            
                                                 
  •                     
  •                             

    全麦面包

                                

    全麦面包纯手工制作,天然不含任何添加物

                            
                            
                                关闭                             

                                    

                                    

    全麦面包纯手工制作,天然不含任何添加物

                                    
                                    选择包装种类:                                                                                                   选择口味:                                                                  
                                                                             
                                        订购数量:                                                                                                               
                                                                         
                                

                            
                        
  •                 
            
        
     info.html 分店信息
主页

分店信息

jiameng.html                                     加盟热线               
                
                    主页                     

联系方式

                     
                     
                    
                            
  •                         
  • 联系人:朱先生
  •                         
  • QQ:520131499
  •                         
  • 加盟热线:12345678911
  •                         
  • 备用电话:11125052544
  •                     
                
                      
pay.html                                                                             支付                   
            
                完成支付                 

支付

            
            
                             
        
    

你可能感兴趣的:(H5 移动APP - 面包店)