值不值得学：先看它解决什么工作场景
很多前端开发者和转行者面临一个现实困境：公司要求用一套代码同时交付安卓、iOS应用和微信小程序，但自己只写过传统Web页面，对跨端框架的适配和打包一头雾水。这门聚焦uni-app商城项目实战的资料，针对的就是这种“多端快速交付”的痛点。它不是带你背诵框架文档，而是围绕一个真实的电商业务场景，把首页渲染、底部导航、全局样式等高频需求拆解成具体开发步骤。如果你当下正需要接手小程序迁移APP的任务，或者想用一套技术栈覆盖多端以提升接单竞争力，这套实操记录值得花时间拆解；但若你连Vue基础语法和组件概念都不熟悉，盲目跟练只会卡在报错环节。
适合什么基础与建议先看哪几块
从资料呈现的实操颗粒度来看，它适合已经掌握HTML、CSS和Vue基本指令的开发者。资料开篇直接进入环境搭建和项目创建，随后切入全局样式引入与报错修复，这说明它默认你具备一定的前端工程化常识。建议你先看项目介绍与初始化部分，了解整体架构思路；接着重点研究UI基础库封装和全局样式编写这两块——这是决定多端样式是否统一的关键，也是很多人自己看文档容易跳过的细节。底部导航开发部分也不容忽视，它是理解uni-app路由配置与原生组件结合的切入点。先把这些底层基建跑通，后续写具体业务页面时才不会频繁返工。
学完能独立做什么与资料怎么配合练习
完整跟下这套实操流程后，你应当能独立搭建一个商城类应用的多端框架，完成基础UI组件的二次封装，并实现首页等核心页面的跨端渲染。具体到工作产出，你可以独立承担小型电商项目的前端开发，将同一套代码编译为微信小程序和独立APP。在练习方式上，不要只用“看视频”的被动模式。建议在本地同步创建一个空项目，每看完一个环节就暂停，自己敲一遍代码。遇到全局样式引入报错等问题，先对照资料里的排查思路自己解决，再去看演示是怎么修复的。这种“先试错再对答案”的方式，能帮你把跨端开发的踩坑经验真正转化为自己的肌肉记忆。
通过学习可以独立开发商城APP、微信小程序
课程目录
* 01 项目介绍/
* 01 项目介绍.mp4 15:03
* 02 搭建和项目创建/
* 01 环境搭建和项目创建.mp4 04:23
* 03 App.vue引入全局公共样式/
* 01 App.vue引入全局公共样式.mp4 08:54
* 02 修复引入uni.css报错问题.mp4 02:01
* 03 动画库使用和图标库创建.mp4 10:38
* 04 编写uniapp全局样式.mp4 11:04
* 04 底部导航开发/
* 01 底部导航开发.mp4 09:06
* 05 UI基础库封装/
* 01 基础UI库快速上手.mp4 12:00
* 02 UI基础库封装（一）.mp4 12:24
* 03 UI基础库封装（二）.mp4 11:39
* 06 首页开发（vue部分）/
* 01 首页pages.json配置.mp4 08:15
* 02 首页轮播图组件开发.mp4 06:47
* 03 封装首页轮播图组件.mp4 07:24
* 04 图标分类组件开发.mp4 08:34
* 05 封装图标分类组件.mp4 05:27
* 06 封装全局分割线组件.mp4 06:18
* 07 三图广告位组件开发.mp4 10:12
* 08 封装三图广告位组件.mp4 06:23
* 09 大图广告组件开发.mp4 08:01
* 10 封装基础卡片组件.mp4 12:01
* 11 公共列表组件开发.mp4 17:01
* 12 封装价格显示组件.mp4 04:12
* 13 封装公共列表组件.mp4 07:32
* 14 【更新】顶部选项卡（一）.mp4 06:57
* 15 【更新】顶部选项卡（二）-获得列表模块（一）.mp4 10:39
* 16 【更新】顶部选项卡（三）-滑动列表模块（二）.mp4 08:00
* 17 【更新】顶部选项卡（四）-组织数据格式.mp4 11:13
* 18 【更新】顶部选项卡（五）-加载数据.mp4 07:51
* 19 【更新】顶部选项卡（六）-上拉加载更多.mp4 09:08
* 07 nvue基础快速入门/
* 01 补充课：关于nvue编译模式问题（重要）.mp4 07:27
* 02 weex组件浅析（一）.mp4 12:39
* 03 如何使用nvue.mp4 05:58
* 04 nvue中css的注意事项.mp4 18:30
* 05 weex组件浅析（二）.mp4 05:52
* 06 nvue和vue之间的通讯（一）.mp4 09:31
* 07 nvue和vue之间的通讯（二）.mp4 09:00
* 08 vue和nvue共享变量和数据.mp4 07:43
* 09 nvue使用uni-app接口.mp4 06:19
* 08 首页开发（Nvue部分）/
* 01 轮播图组件开发.mp4 07:54
* 02 封装轮播图组件.mp4 03:55
* 03 图标分类组件开发.mp4 11:10
* 04 封装图标分类组件.mp4 06:31
* 05 封装分割线组件和监听页面显示.mp4 08:04
* 06 三图广告位组件开发.mp4 11:07
* 07 大图广告位组件开发.mp4 03:49
* 08 公共列表组件开发.mp4 20:11
* 09 封装公共列表组件.mp4 08:33
* 10 原生顶部选项卡开发（一）.mp4 13:36
* 11 原生顶部选项卡开发（二）.mp4 10:17
* 12 原生顶部选项卡开发（三）.mp4 14:50
* 13 原生顶部选项卡开发（四）.mp4 05:54
* 14 原生顶部选项卡开发（五）.mp4 14:39
* 15 原生顶部选项卡开发（六）.mp4 25:32
* 09 搜索页开发/
* 01 Pages.json配置.mp4 04:33
* 02 随机颜色按钮组件开发.mp4 13:03
* 03 搜索记录组件开发.mp4 13:19
* 10 搜索列表页开发/
* 01 排序筛选组件开发（一）.mp4 12:07
* 02 排序筛选组件开发（二）.mp4 11:47
* 03 排序筛选组件开发（三）.mp4 12:48
* 04 排序筛选组件开发（四）.mp4 05:59
* 05 排序筛选组件开发（五）.mp4 08:48
* 06 开发搜索列表组件.mp4 09:36
* 07 封装搜索列表组件.mp4 06:07
* 11 商品分类页开发/
* 01 商品分类页UI界面构建（一）.mp4 09:54
* 02 商品分类页UI界面构建（二）.mp4 09:46
* 03 商品分类页UI界面构建（三）.mp4 07:55
* 04 分类菜单联动实现（一）.mp4 14:12
* 05 分类菜单联动实现（二）.mp4 05:23
* 06 分类菜单联动实现（三）.mp4 07:30
* 07 分类菜单联动实现（四）.mp4 14:10
* 08 分类菜单联动实现（五）.mp4 09:03
* 09 优化分类页体验.mp4 06:10
* 12 商品详情页开发/
* 01 轮播图组件二次优化.mp4 16:43
* 02 基础详情组件开发.mp4 06:29
* 03 滚动商品特性组件开发.mp4 11:04
* 04 开发属性选择样式.mp4 13:43
* 05 滚动评论列表组件开发.mp4 20:34
* 06 商品详情富文本解析开发.mp4 10:58
* 07 热门推荐商品列表开发.mp4 05:49
* 08 底部操作条组件开发.mp4 08:19
* 09 底部弹出框组件开发.mp4 19:59
* 10 弹出属性筛选组件开发（一）.mp4 14:22
* 11 弹出属性筛选组件开发（二）.mp4 14:23
* 12 弹出选择配送地址开发.mp4 09:33
* 13 封装弹出服务说明组件.mp4 05:14
* 14 修改返回键默认行为.mp4 03:30
* 13 商品评论列表页开发/
* 01 评论分类组件开发.mp4 14:55
* 02 评论列表组件开发.mp4 19:51
* 14 vuex快速掌握/
* 01 Vuex的基础使用.mp4 06:36
* 02 Vuex的state多种用法.mp4 13:31
* 03 Vuex的Getters多种用法（一）.mp4 07:25
* 04 Vuex的Getters多种用法（二）.mp4 08:19
* 05 Vuex的Mutatio.mp4 04:58
* 06 Vuex的Action用法.mp4 07:12
* 07 Vuex模块化实现.mp4 13:17
* 15 购物车开发/
* 01 自定义导航开发.mp4 13:29
* 02 无商品默认显示组件开发.mp4 05:55
* 03 开发购物车商品列表组件（一）.mp4 04:18
* 04 开发购物车商品列表组件（二）.mp4 12:53
* 05 开发购物车商品列表组件（三）.mp4 10:36
* 06 合计组件开发.mp4 04:57
* 07 全选和取消全选功能实现.mp4 18:53
* 08 合计价格优雅实现.mp4 05:48
* 09 选中和取消选中单个实现.mp4 06:28
* 10 无商品禁用全选功能.mp4 02:46
* 11 修复分类页联动滚动bug.mp4 04:31
* 12 编辑购物车（一）- ui构建.mp4 06:57
* 13 编辑购物车（二）- 删除功能.mp4 07:21
* 14 编辑购物车（三）- 修改属性（1）.mp4 11:25
* 15 编辑购物车（四）- 修改属性（2）.mp4 11:40
* 16 完善详情页加入购物车功能.mp4 13:07
* 16 个人中心页开发/
* 01 自定义头部组件开发.mp4 15:24
* 02 UI界面构建（一）- 图标分类.mp4 08:02
* 03 UI界面构建（二）- 菜单部分.mp4 08:26
* 17 设置页开发/
* 01 用户设置页面开发.mp4 10:01
* 18 编辑个人资料页开发/
* 01 修改资料页面开发.mp4 06:13
* 19 收货地址页开发/
* 01 收货地址页面开发.mp4 08:54
* 02 增加收货地址页面开发.mp4 13:10
* 03 引入三级联动.mp4 16:23
* 04 列表滑动操作.mp4 07:29
* 05 使用vuex来管理收货地址.mp4 07:47
* 06 创建收货地址功能.mp4 10:36
* 07 删除收货地址功能.mp4 05:00
* 08 修改收货地址功能.mp4 14:02
* 09 完善详情页收货地址.mp4 10:29
* 10 完善设置默认收货地址（一）.mp4 08:13
* 11 完善设置默认收货地址（二）.mp4 06:40
* 12 补充购物车热门列表.mp4 10:53
* 20 订单页开发/
* 01 创建订单页面.mp4 06:20
* 02 封装默认显示组件.mp4 12:13
* 03 顶部tab选项卡开发.mp4 10:51
* 04 订单列表组件开发（一）.mp4 10:48
* 05 订单列表组件开发（二）.mp4 08:22
* 06 订单列表组件开发（三）.mp4 19:01
* 21 订单支付页开发/
* 01 选择地址组件开发.mp4 11:28
* 02 列表组件功能升级.mp4 10:18
* 03 订单支付页UI开发.mp4 12:22
* 04 底部导航组件开发.mp4 07:57
* 05 自动填写默认地址.mp4 08:51
* 06 选择收货地址功能.mp4 12:09
* 22 发票页开发/
* 01 发票选择页面开发（一）.mp4 10:24
* 02 发票选择页面开发（二）.mp4 07:16
* 23 登录页开发/
* 01 登录页UI界面构建（一）.mp4 08:48
* 02 登录页UI界面构建（二）.mp4 08:23
* 03 登录页UI界面构建（三）.mp4 07:57
* 04 表单验证功能实现（一）.mp4 11:49
* 05 表单验证功能实现（二）.mp4 14:51
* 24 通知页开发/
* 01 通知列表页开发.mp4 09:28
* 25 通知详情页开发/
* 01 通知详情页开发.mp4 11:38
* 26 优化首次加载白屏问题/
* 01 优化首次加载页面白屏问题（一）.mp4 11:59
* 02 优化首次加载页面白屏问题（二）.mp4 10:44
* 27 支付方式页和支付成功页开发/
* 01 选择支付方式页开发（一）.mp4 09:58
* 02 选择支付方式页开发（二）.mp4 07:37
* 03 支付成功页开发.mp4 07:42
* 28 选择优惠券页开发/
* 01 选择优惠券页开发（一）.mp4 07:58
* 02 选择优惠券页开发（二）.mp4 13:17
* 03 选择优惠券页开发（三）.mp4 12:33
* 29 订单详情页开发/
* 01 订单详情页开发（一）.mp4 10:13
* 02 订单详情页开发（二）.mp4 04:44
* 03 订单详情页页面开发（三）.mp4 09:26
* 30 物流信息页开发/
* 01 物流信息页开发.mp4 03:46
* 31 申请售后页开发/
* 01 申请售后页开发（一）.mp4 10:37
* 02 申请售后页开发（二）.mp4 10:08
* 03 申请售后页开发（三）.mp4 07:40
* 32 关于商城页开发/
* 01 关于商城页开发.mp4 05:49
* 33 前后端交互部分开发/
* 01 前后端交互前置知识.mp4 12:45
* 02 request的三种方式（一）.mp4 08:15
* 03 request的三种方式（二）.mp4 09:09
* 04 首页前后端交互（一）渲染分类和首屏数据.mp4 09:28
* 05 首页前后端交互（二）滑动渲染数据.mp4 11:13
* 06 首页前后端交互（三）上拉加载实现.mp4 08:16
* 07 首页前后端交互（四）下拉刷新.mp4 07:01
* 08 优化空数据默认显示.mp4 05:35
* 09 防止选项卡多次请求问题.mp4 07:38
* 10 优化首页加载状态.mp4 07:14
* 11 request请求类封装（一）.mp4 13:39
* 12 request请求类封装（二）.mp4 06:39
* 13 request请求类封装（三）.mp4 11:51
* 14 【小程序端】首页导航适配.mp4 15:47
* 15 【小程序端】首页前后端交互（一）.mp4 06:41
* 16 【小程序端】首页前后端交互（二）.mp4 11:28
* 17 【小程序端】首页前后端交互（三）.mp4 04:56
* 18 【小程序端】首页前后端交互（四）.mp4 09:09
* 19 【小程序端】首页前后端交互（五）.mp4 07:50
* 20 商品详情页交互（一）轮播图.mp4 16:01
* 21 商品详情页交互（二）商品信息.mp4 08:19
* 22 商品详情页交互（三）热门评论.mp4 07:55
* 23 商品详情页交互（四）商品详情和热门推荐.mp4 06:02
* 24 商品详情页交互（五）多规格（一）.mp4 12:34
* 25 商品详情页交互（六）多规格（二）.mp4 05:57
* 26 评论接口调整.mp4 07:37
* 27 多规格选择功能（一）.mp4 06:52
* 28 多规格选择功能（二）.mp4 11:23
* 29 多规格选择功能（三）.mp4 05:22
* 30 规格选择库存限制.mp4 05:02
* 31 最大购买数的处理.mp4 05:38
* 32 指定商品评论列表交互.mp4 21:13
* 33 评论列表 - 分页功能实现.mp4 11:42
* 34 评论列表 - 分类实现.mp4 09:53
* 35 评论列表 - 下拉刷新功能.mp4 06:18
* 36 评论列表 - 客服回复.mp4 06:39
* 37 优化蒙版滚动问题.mp4 02:37
* 38 完善搜索页面-搜索记录（一）.mp4 09:36
* 39 完善搜索页面-搜索记录（二）.mp4 05:38
* 40 完善搜索页面-搜索记录（三）.mp4 04:08
* 41 完善搜索页面-搜索记录（四）.mp4 05:03
* 42 搜索列表 - 搜索功能.mp4 14:46
* 43 搜索列表 - 排序功能（一）.mp4 06:05
* 44 搜索列表 - 排序功能（二）.mp4 09:57
* 45 搜索列表-筛选功能（一）.mp4 09:25
* 46 搜索列表-筛选功能（二）.mp4 09:28
* 47 搜索列表-重置筛选功能.mp4 08:07
* 48 搜索列表-上拉加载更多.mp4 07:37
* 49 搜索列表-下拉刷新功能.mp4 07:03
* 50 搜索列表-优化搜索页面（一）.mp4 11:47
* 51 搜索列表-优化搜索页面（二）.mp4 07:36
* 52 搜索列表-优化搜索页面（三）.mp4 07:19
* 53 优化搜索列表和公共列表.mp4 06:38
* 54 商品分类前后端交互（一）.mp4 14:51
* 55 商品分类前后端交互（二）.mp4 03:05
* 56 用户登录功能（一）.mp4 07:49
* 57 用户登录功能（二）.mp4 10:21
* 58 退出登录功能.mp4 08:20
* 59 初始化登录状态.mp4 12:00
* 60 封装跳转权限验证.mp4 07:30
* 61 全局处理请求token（一）.mp4 06:16
* 62 全局处理请求token（二）.mp4 07:26
* 63 全局处理token失效（三）.mp4 05:55
* 64 商品详情单规格处理.mp4 16:10
* 65 优化收货地址滑动操作性能.mp4 11:02
* 66 收货地址列表和下拉刷新功能.mp4 08:11
* 67 收货地址列表上拉加载功能.mp4 09:02
* 68 新增收货地址功能实现.mp4 13:10
* 69 删除收货地址功能实现.mp4 05:46
* 70 修改收货地址功能实现.mp4 14:12
* 71 修复购物车一些小问题.mp4 05:40
* 72 获取当前用户购物车列表.mp4 10:41
* 73 修改购物车商品数量.mp4 04:31
* 74 修改购物车商品sku（一）.mp4 11:02
* 75 修改购物车商品sku（二）.mp4 12:42
* 76 修改购物车商品sku（三）.mp4 08:47
* 77 修改购物车商品sku（四）.mp4 06:33
* 78 修改购物车商品sku（五）.mp4 06:38
* 79 修改购物车商品sku（六）- 默认选中规格.mp4 07:19
* 80 处理库存不足问题.mp4 08:02
* 81 购物车列表下拉刷新功能.mp4 03:30
* 82 加入购物车功能.mp4 10:45
* 83 批量删除购物车商品功能.mp4 04:51
* 84 购物车角标提示更新功能（一）.mp4 07:18
* 85 购物车角标提示更新功能（二）.mp4 07:29
* 86 优化购物车列表加载问题（一）.mp4 08:40
* 87 优化购物车列表加载问题（二）.mp4 08:32
* 88 领取优惠券功能（一）.mp4 08:21
* 89 领取优惠券功能（二）.mp4 15:32
* 90 领取优惠券功能（三）.mp4 04:18
* 91 领取优惠券功能（四）.mp4 10:27
* 92 当前用户已领取优惠券列表.mp4 14:25
* 93 购物车结算交互（一）.mp4 06:30
* 94 购物车结算交互（二）.mp4 16:36
* 95 购物车结算交互（三）-可用优惠券数量.mp4 09:41
* 96 购物车结算交互（四）-优惠券价格计算.mp4 16:35
* 97 购物车结算交互（五）-优惠券不可用判断.mp4 12:06
* 98 购物车结算交互（六）-下单流程（一）.mp4 14:08
* 99 购物车结算交互（七）-下单流程（二）.mp4 06:17
* 100 订单支付（一）.mp4 10:46
* 101 订单支付（二）-支付实现.mp4 17:10
* 102 订单支付（三）-支付成功处理.mp4 10:12
* 103 订单列表交互.mp4 23:57
* 104 订单列表交互-完成支付和取消订单.mp4 13:47
* 105 订单列表交互-申请退款.mp4 11:06
* 106 订单列表交互-查看物流.mp4 14:17
* 107 订单列表交互-确认收货.mp4 02:37
* 108 订单详情交互.mp4 14:22
* 109 订单详情交互-自动取消订单.mp4 15:52
* 110 订单详情交互-自动确认收货.mp4 04:00
* 111 订单详情交互-优惠券显示.mp4 07:52
* 112 订单详情交互-完善小细节.mp4 15:48
* 113 微信支付申请流程.mp4 11:12
* 114 自定义基座和微信支付调试.mp4 06:56
* 34 多端兼容处理/
* 01 兼容微信小程序处理.mp4 26:32
* 02 微信小程序支付申请到实现流程.mp4 25:24
* 35 打包上线/
* 01 证书申请和打包上线.mp4 18:10
* 36 后端部署（附加课）/
* 01 部署前环境搭建.mp4 14:58
* 02 域名解析.mp4 04:37
* 03 后端api部署.mp4 16:33
