UNIAPP实战项目笔记1 项目开发前分析

布满荆棘的人生 2024-04-06 11:06 39阅读 0赞

1.产品经理 : 设计产品 \[产品原型图\]  
2.研发部分和产品经理开会

功能模块
        定则:  张三: 复制 首页,列表页,搜索,我的页面
                李斯: SDK

一. 首页index

1. 顶部滑动导航
        封装:否
        
    2. 头图
        名称: banner
        封装:否 
        
    3. 宫格
        名称: icons
        封装:是
        
    4. 卡片
        名称: card
        封装:是
        公用:否 
        
    5. 品牌
        名称: brand
        封装:是
        公用:否
        
    6. 热销
        名称: hot
        封装:是
        
    7. 店铺
        名称: shop
        封装:是
    
    8. 为您推荐
    
    9. 上拉加载 [功能]

二. 搜索 search

1. 最近搜索
        封装: 否
    2. 热门搜索
        封装:否

三. 搜索列表 search-lish

1.商品的筛选
        封装: 否

四. 商品详情deatils

1. 头图滑动
        名称: swiper
        封装: 是
    2. 内容
        名称:content
        封装: 是
    3. 看了又看   [调用-> 商品展示列表组件]
        封装: 是
    4. 加入购物车
        名称:addCart
        封装: 是

五. 购物车 shopCart 数据: vuex

*** 检测是否登录
    1. 商品内容
    2. 结算

六. 分类 list

七. 我的 my

*** 检测是否登录

八. 登录

九. 支付

uniapp的目录结构

小程序和vue的结合体
    
    
    
    manifest.json   配置文件: appid logo...
    
    pages.json      配置文件:导航  tabbar 路由
    
    main.json       vue 初始化入口文件
    
    App.vuex        全局配置: 样式  全局监听
    
    static          静态资源: 图片 字体图标

pages 页面

index
        index.vue
    list
        list.vue
    my
        my.vue

components 组件

index
        Banner.vue
        Icons.vue
    
    list
        xxx.vue
    common
        commodity.vue

common 公共文件

全局的css文件

#### 公用的组件 ####

1. 单独的商品展示 : commodity
        图片.文字
    
    2. 商品展示列表: commodityList
        内部调用 => 单独的商品展示