分析一个项目(微信小程序篇)二
作者:mmseoamin日期:2024-02-06

目录

首页:

发现:

购物车:

我的:


分析一个项目讲究的是如何进行对项目的解析分解,进一步了解项目的整体结构,熟悉项目的结构,能够知道每个组件所处在哪个位置,发挥什么作用。

接下来我们进一步分析本次项目:

各个页面的分布情况:

首页:



  
  
  
    
    
  
  
    
      
    
  

其页面如下: 

分析一个项目(微信小程序篇)二,第1张

  •  搜索框使用了 “t-search-bar”组件
  • 轮播图方面使用了“t-swiper”组件
  • 菜单方面使用了“t-menu”组件
  • 商品方面使用了分包中 data-url="/pagesGoods/detail/index" ,点击事件进行跳转

    分类页面:

    
    
      
        
        
      
      
        
        
          
            
              精品茶具
              
                
                  
                  {{item.name}}
                
              
            
          
        
      
    

    其页面如下:

    分析一个项目(微信小程序篇)二,第2张

    •  搜索框使用了“t-search-bar”组件
    • 侧边框使用了“t-tab”组件

      发现:

      
      
        
        
        
          
        
        
          
            
              
                
                
                  
                    
                      甑选商城
                    
                  
                  68 浏览
                
              
              
                品茶,品的是茶味还是人生
                
                  茶,只是一杯茶,晨起日落,生命有它陪伴不曾离开,不可或缺。
                  
                
              
            
          
        
      

      其页面如下:

      分析一个项目(微信小程序篇)二,第3张

      •  搜索框使用了“t-search-bar”组件
      • tab框使用了“t-tab”组件
      • 内容部分使用了“t-cell”组件,“t-image”组件

        购物车:

        
        
          
          
            
              
                
                  
                    
                  
                  
                
                
                  
                    {{item.name}}
                    {{item.spec}}
                  
                  
                    ¥{{item.price}}
                    
                      
                    
                  
                
              
            
            
              
                
                全选
                
                  合计:
                  ¥198.00
                
              
            
          
        

        其页面如下:

        分析一个项目(微信小程序篇)二,第4张

        内容部分使用了“t-cell”组件,“t-input-number”组件

        我的:

        
        
        	
        	
        		
        			
        				
        				
        					{{userInfo.userId?userInfo.nickname:'立即登录'}}
        					{{userInfo.userId?today:'登录体验完整功能'}}
        				
        			
        		
        		
        			
        				
        					我的订单
        					查看全部
        				
        				
        					
        						100
        						待付款
        					
        					
        						0
        						待发货
        					
        					
        						0
        						待收货
        					
        					
        						0
        						已完成
        					
        				
        			
        			
        				
        					
        				
        			
        			
        				
        					
        				
        			
        		
        	
        

        其页面如下:

        分析一个项目(微信小程序篇)二,第5张