先判断这门课值不值得学

uniapp 加 uView UI 这套组合，主要解决的是“用一套前端代码同时跑在多个平台”的问题。如果你平时工作里要对接小程序、App 或 H5 商城，不想分别写三套原生代码，那这个方向是值得投入的。课程本身聚焦在商城前端实现，从首页、分类、购物车到个人中心、订单页，覆盖了一个标准电商项目最核心的交互场景。它不涉及后端接口开发和数据库设计，重点在于把页面搭出来、把数据接上、把交互跑通。对转行做前端、或需要独立接小程序外包的人来说，这种项目级练习比单纯看组件文档更能帮你建立整体工程感。

适合什么基础、建议先看哪几块

这课不适合完全没写过代码的人。你需要先有基本的 HTML、CSS、JavaScript 基础，能看懂简单的 Vue 模板语法和组件传值，否则到自定义组件那一段会卡住。如果你只写过静态页面，建议先补一下 Vue 的基础再来看。进入课程后，建议先看项目简介和课前准备，把开发环境配好，确认能正常跑起 uniapp 项目。接着重点看自定义导航栏、轮播图、搜索组件这几个部分，它们是后续所有页面的通用模块。商品列表组件和价格组件那几节也值得反复看，因为商城里几乎所有页面都在复用这套列表逻辑。把这几块吃透，后面购物车和订单页的拼装会顺很多。

学完能独立做什么、资料怎么配合练习

学完之后，你应该能独立搭建一个多端商城的前端页面，包括首页布局、商品分类切换、详情页展示、购物车数量计算和订单流程跳转，并且能处理组件复用、数据分离和打包上线的操作。资料包里主要是项目源码和分步实现的代码片段，建议不要直接拷贝运行就了事。正确用法是：先自己照着课程思路写一遍，卡住了再对照资料里的对应文件，找出自己漏掉的部分。特别是组件分离和数据绑定那几节，一定要自己手敲一遍，改改样式和接口数据，确认自己真的理解了逻辑而不是在抄。最后打包上线那部分，建议真机跑一次，看看不同平台上的样式有没有错位，这样才算把整个流程走完。


课程简介 · 商城首页 · 商品分类 · 优选页面 · 购物车 · 个人中心 · 搜索 · 商品详情页 · 订单页面 · 打包上线

课程目录

*   01 课程简介/

  *   01 项目简介

  *   02 课程大纲

  *   03 课前准备

*   02 商城首页/

  *   01 新建项目

  *   02 Navibar自定义导航栏

  *   03 Swiper轮播图组件

  *   04 NoticeBar滚动通知

  *   05 引入自定义样式文件

  *   06 宫格布局组件

  *   07 Search搜索组件

  *   08 推荐分类组件1

  *   09 推荐分类组件2

  *   10 推荐分类组价3

  *   11 推荐商品列表

  *   12 完成推荐分类组件

  *   13 制作商品列表组件

  *   14 价格与原价组件

  *   15 自定义标题组件

  *   16 商品列表(样式2)

  *   17 分离轮播图和分类列表数据

  *   18 分离推荐分类组件

  *   19 分离商品列表（样式一）组件

  *   20 返回顶部

  *   21 上拉加载更多

*   03 商品分类/

  *   01 原生底部菜单栏

  *   02 分类页面布局

  *   03 渲染分类页面数据

  *   04 分页页面联动1

  *   05 分类页面联动2

  *   06 分类页面联动4

  *   07 分类页面联动3

*   04 优选页面/

  *   01 优选页面布局

  *   02 下拉刷新

  *   03 上拉加载更多

*   05 购物车/

  *   01 vuex入门之state

  *   02 vuex入门之getter

  *   03 vuex入门之actions

  *   04 vuex入门之mutations

  *   05 vuex入门之modules

  *   06 购物车页面布局1

  *   07 购物车页面布局2

  *   08 购物车页面布局3

  *   09 渲染购物车商品数据

  *   10 选中商品与取消选中商品

  *   11 全选与全不选

  *   12 计算购物车选中商品的总价

  *   13 修改购物车状态

  *   14 删除购物车商品

*   06 个人中心/

  *   01 个人中心页面布局1

  *   02 个人中心页面布局2

  *   03 登录页面布局1

  *   04 登录页面布局2

  *   05 模拟用户登录1

  *   06 模拟用户登录2

  *   07 我的订单1

  *   08 我的订单2

  *   09 我的订单3

  *   10 商品收藏列表

  *   11 优惠券1

  *   12 优惠券2

  *   13 收货地址列表1

  *   14 收货地址列表2

  *   15 添加收货地址1

  *   16 添加收货地址2

  *   17 添加收货地址3

  *   18 编辑收货地址

  *   19 删除收货地址

  *   20 关于我们

  *   21 设置页面

  *   22 头像裁剪

  *   23 个人资料1

  *   24 个人资料2

  *   25 绑定手机号

  *   26 修改密码

  *   27 清除缓存

  *   28 更新系统

  *   29 消息列表1

  *   30 消息列表2

  *   31 消息详情页

*   07 搜索/

  *   01 搜索页布局

  *   02 搜索结果列表页

*   08 商品详情页/

  *   01 布局商品详情页1

  *   02 布局商品详情页2

  *   03 布局商品详情页3

  *   04 引入骨架屏组件

  *   05 商品属性1

  *   06 商品属性2

  *   07 商品参数

  *   08 商品评论

  *   09 引入商品数据1

  *   10 引入商品数据2

  *   11 完善商品列表功能

*   09 订单页面/

  *   01 加入购物车

  *   02 布局订单确认页1

  *   03 布局订单确认页2

  *   04 引入收货地址1

  *   05 引入收货地址2

  *   06 引入选中商品列表

  *   07 引入优惠券列表1

  *   08 引入优惠券列表2

  *   09 订单支付1

  *   10 订单支付2

  *   11 订单支付3

  *   12 生成支付订单1

  *   13 生成支付订单2

*   10 打包上线/

  *   01 完成H5端打包

  *   02 完成小程序端打包

  *   03 完成安卓app打包