分析一个项目(微信小程序篇)二

目录

首页:

发现:

购物车:

我的:


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

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

各个页面的分布情况:

首页:



  
  
  
    
    
  
  
    
      
    
  

其页面如下: 

分析一个项目(微信小程序篇)二_第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张图片

  • 内容部分使用了“t-cell”组件

你可能感兴趣的:(解析项目,微信小程序,windows,前端)