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

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
    内部调用 => 单独的商品展示