价值198 uni-app实战商城类app和小程序

前端开发

课程简介

《价值198 uni-app实战商城类app和小程序》具备Html+Css+Javascript基础知识和Vuejs基础知识。【技能收获】学完可掌握：Vue / 前端工程化。课程以实战为导向，覆盖从基础概念到完整项目落地的关键步骤，配套章节笔记便于课后复盘与面试前快速回顾。【学习建议】建议按目录顺序学习，先打基础再进入综合实战章节；每完成 2～3 节可结合笔记整理一份学习小结，最终尝试独立复现一套完整 Demo 写入个人作品集。【就业发展】可面向岗位：Linux 运维工程师、SRE、云计算工程师、DevOps 工程师。云原生与自动化运维仍是企业 IT 刚需方向，认证 + 实战项目组合能显著提升

已有 1 人浏览发布 2026-09-15 更新 2026-09-18

这套 uni-app 商城实战课标价 198，放在今天看不算贵，但值不值得花时间，取决于你是想"多一套收藏"还是真想跑通一条跨端商城的完整链路。我的判断是：它更适合已经能写 Vue 页面、但没亲手做过"一套代码编译到 App + 小程序"的人。如果你连 Vue 的组件通信、生命周期都没写过，直接进来会卡在环境配置那一章。

课纲的含金量集中在中后段

这类商城课的骨架基本固定：项目搭建 → 首页 → 分类 → 详情 → 购物车 → 订单 → 个人中心。真正拉开差距的不是功能列表，而是看它怎么处理跨端差异。前面搭建环境、跑通第一个页面的部分，信息密度低，倍速过一遍即可，重点确认它用的是 HBuilderX 还是 CLI 方式初始化——这决定你后面要不要自己补一套工程化配置。

值得精看的是涉及条件编译的章节。商城项目里 tabBar、下拉刷新、支付回调、分享这几处天然有平台差异，课程如果在这里给了具体的平台判断写法，含金量就上来了。反过来，如果这些地方只是"跟着我敲一遍"，你需要自己停下来补文档。

这几个模块建议慢下来动手

购物车与本地状态管理：商品勾选、数量增减、全选反选、价格实时计算，这一块最能暴露你对响应式数据的理解是不是到位。别只看视频，自己把数据流画一遍。
列表渲染与分页：商城首页、分类页都是长列表，观察它怎么做上拉加载和滚动性能处理，这是面试里会被追问的点。
接口联调与数据封装：看它有没有把请求单独抽一层、怎么做统一错误处理。只会写页面不会封接口，项目一到真实环境就散架。
登录态与订单流程：涉及 token 存储、页面拦截，跨端存储的差异在这里最容易踩坑。

资料包怎么拆开用

配套的章节笔记不要当成"抄一遍目录"。正确用法是：看完一节，把笔记里没写清楚的实现细节自己补上，尤其是那些视频里一笔带过的配置项。源码部分，建议先删掉自己重写一遍关键页面，写不出来再回头对照，比顺着读一遍源码有效得多。

这套材料更适合被你"拆成两轮"用：第一轮按顺序跑通，不求全懂；第二轮只挑购物车、订单、跨端差异这几个硬骨头重做。两轮之间隔几天，效果比连着一口气看完好。

学完之后能对接什么

跑完这套项目，你手上应该有一个能同时演示 App 端和小程序端的商城 Demo，这才算真正的产出。原作那段课程介绍里写的"掌握 Vue / 前端工程化"方向没问题，但它后面接的那串岗位——Linux 运维、SRE、云原生——明显是套模板串词了，和这套前端商城课根本对不上，别被那几句话带偏。

实际能对标的，是前端岗里偏移动端、跨端开发的方向，或者给已有 Web 项目补一套小程序端的场景。如果你正卡在"会写页面但没做过完整业务闭环"这一步，这套课的投入产出比是划算的；如果你已经独立做过两三个完整前端项目，那它的边际价值就有限，不如直接去啃官方文档里更细的跨端能力。

具备Html+Css+Javascript基础知识和Vuejs基础知识。

课程推荐

视频目录（223 节）

* ┗━━[1.1]--项目介绍（买前必看）.mp4

* ].mp4

* ┗━━[11.1]--导航栏tab导航开发.mp4

* ┣━━[12.1]--滑动滚动区域计算.mp4

* ┣━━[12.2]--导航列表联动实现.mp4

* ┗━━[12.3]--顶踩操作和上拉加载功能.mp4

* ┣━━[13.1]--热门分类组件开发.mp4

* ┣━━[13.2]--封装热门分类组件.mp4

* ┣━━[13.3]--轮播图和搜索框开发.mp4

* ┣━━[13.4]--话题列表组件开发.mp4

* ┗━━[13.5]--封装话题列表组件.mp4

* ┗━━[14.1]--话题分类页开发.mp4

* ┣━━[15.1]--page.json配置.mp4

* ┣━━[15.2]--话题介绍组件开发.mp4

* ┣━━[15.3]--封装话题介绍组件.mp4

* ┣━━[15.4]--精华帖子列表组件开发.mp4

* ┣━━[15.5]--tab选项卡组件开发.mp4

* ┣━━[15.6]--利用计算属性实现列表切换.mp4

* ┗━━[15.7]--话题详情上拉加载实现.mp4

* ┣━━[16.1]--page.json配置.mp4

* ┣━━[16.2]--消息列表组件开发.mp4

* ┣━━[16.3]--封装消息列表组件.mp4

* ┣━━[16.4]--下拉刷新功能实现.mp4

* ┣━━[16.5]--下拉弹出层组件使用.mp4

* ┗━━[16.6]--下拉弹出选项完善.mp4

* ┣━━[17.1]--page.json配置.mp4

* ┣━━[17.2]--tab导航组件再次优化.mp4

* ┣━━[17.3]--好友列表组件开发.mp4

* ┣━━[17.4]--强化badge组件功能.mp4

* ┣━━[17.5]--封装好友列表组件.mp4

* ┗━━[17.6]--优化我的好友列表页面.mp4

* ┣━━[18.1]--page.json配置.mp4

* ┣━━[18.2]--聊天输入框组件开发.mp4

* ┣━━[18.3]--聊天列表组件开发.mp4

* ┣━━[18.4]--封装聊天列表组件完善时间显示.mp4

* ┗━━[18.5]--完善聊天页功能.mp4

* ┣━━[19.1]--搜索列表功能完善（上）.mp4

* ┗━━[19.2]--搜索列表功能完善（下）.mp4

* ┣━━[2.1]--开发环境搭建.mp4

* ┗━━[2.2]--创建uni-app项目.mp4

* ┣━━[21.1]--page.json配置.mp4

* ┣━━[21.2]--个人中心UI构建（上）.mp4

* ┣━━[21.3]--个人中心UI构建（中）.mp4

* ┗━━[21.4]--个人中心UI构建（下）.mp4

* ┗━━[22.1]--设置页UI构建.mp4

* ┣━━[23.1]--修改密码UI界面开发.mp4

* ┗━━[23.2]--表单验证功能实现.mp4

* ┣━━[24.1]--修改邮箱页UI界面开发.mp4

* ┗━━[24.2]--表单验证功能实现.mp4

* ┣━━[25.1]--编辑资料UI界面实现.mp4

* ┣━━[25.2]--修改头像功能实现.mp4

* ┣━━[25.3]--showActionSheet接口使用.mp4

* ┣━━[25.4]--修改生日功能实现.mp4

* ┗━━[25.5]--三级联动城市选择器使用.mp4

* ┗━━[26.1]--帮助反馈UI界面实现.mp4

* ┗━━[27.1]--关于页面UI界面.mp4

* ┣━━[28.1]--page.json配置.mp4

* ┣━━[28.2]--登录页UI界面构建.mp4

* ┣━━[28.3]--登录类型切换效果实现.mp4

* ┣━━[28.4]--表单基础功能实现（上）.mp4

* ┣━━[28.5]--表单基础功能实现（中）.mp4

* ┣━━[28.6]--表单基础功能实现（下）.mp4

* ┗━━[28.7]--第三方登录组件功能实现.mp4

* ┣━━[29.1]--page.json配置.mp4

* ┣━━[29.2]--个人空间头部组件开发.mp4

* ┣━━[29.3]--个人空间UI界面实现（一）.mp4

* ┣━━[29.4]--个人空间UI界面实现（二）.mp4

* ┣━━[29.5]--个人空间UI界面实现（三）.mp4

* ┗━━[29.6]--个人空间操作菜单.mp4

* ┣━━[30.1]--清除缓存功能.mp4

* ┣━━[30.2]--全局方法和配置文件封装.mp4

* ┣━━[30.3]--监听网络状态.mp4

* ┗━━[30.4]--热更新初体验.mp4

* ┗━━[31.1]--动画效果优化.mp4

* ┣━━[33.1]--数据表设计.mp4

* ┣━━[33.10]--手机号登录api开发.mp4

* ┣━━[33.11]--账号密码登录api开发.mp4

* ┣━━[33.12]--第三方登录api开发（上）.mp4

* ┣━━[33.13]--第三方登录api开发（下）.mp4

* ┣━━[33.14]--auth中间件基础用法.mp4

* ┣━━[33.15]--封装异常类助手函数.mp4

* ┣━━[33.16]--auth中间件封装（1）.mp4

* ┣━━[33.17]--auth中间件封装（2）.mp4

* ┣━━[33.18]--退出登录api.mp4

* ┣━━[33.2]--接口开发常见问题.mp4

* ┣━━[33.3]--全局异常类封装.mp4

* ┣━━[33.4]--全局验证层封装（一）.mp4

* ┣━━[33.5]--全局验证层封装（二）.mp4

* ┣━━[33.6]--封装基类控制器.mp4

* ┣━━[33.7]--获取手机验证码api开发.mp4

* ┣━━[33.8]--对接阿里大于短信sdk.mp4

* ┗━━[33.9]--路由分组和api版本控制.mp4

* ┣━━[4.1]--引入官方css样式库.mp4

* ┣━━[4.2]--引入自定义图标库.mp4

* ┗━━[4.3]--引入css动画库.mp4

* ┣━━[42.1]--数据表设计.mp4

* ┣━━[42.2]--用户评论api.mp4

* ┗━━[42.3]--获取当前文章评论列表api.mp4

* ┣━━[43.1]--编辑头像api.mp4

* ┣━━[43.2]--修改资料api.mp4

* ┗━━[43.3]--修改密码api.mp4

* ┣━━[45.1]--数据表设计.mp4

* ┣━━[45.2]--关注用户api.mp4

* ┣━━[45.3]--取消关注api.mp4

* ┣━━[45.4]--互关列表api.mp4

* ┣━━[45.5]--粉丝列表api.mp4

* ┗━━[45.6]--关注列表api.mp4

* ┣━━[48.1]--websocket快速入门.mp4

* ┣━━[48.2]--websocket测试工具搭建.mp4

* ┣━━[48.3]--websocket环境搭建.mp4

* ┣━━[48.4]--聊天流程原理.mp4

* ┣━━[48.6]--发送信息api.mp4

* ┣━━[48.7]--获取离线消息队列api.mp4

* ┣━━[48.8]--【补充课程】聊天模块部分代码修改（重点）.mp4

* ┗━━[48.9]--【补充课程】聊天后端api接口修改（重点）.mp4

* ┣━━[49.1]--部署后端源码到线上服务器.mp4

* ┣━━[49.2]--部署https（上）.mp4

* ┣━━[49.3]--部署https（下）.mp4

* ┣━━[49.4]--导出api接口文档.mp4

* ┗━━[49.5]--配置wss和隐藏端口号.mp4

* ┗━━[5.1]--设置全局属性globalStyle.mp4

* ┣━━[50.1]--vuex实战初体验.mp4

* ┣━━[50.10]--分享功能实现.mp4

* ┣━━[50.11]--搜索文章功能实现.mp4

* ┣━━[50.12]--话题专题页交互实现.mp4

* ┣━━[50.13]--话题分类交互实现.mp4

* ┣━━[50.14]--话题详情交互实现.mp4

* ┣━━[50.15]--搜索话题交互实现.mp4

* ┣━━[50.16]--账号邮箱手机登录功能实现（上）.mp4

* ┣━━[50.17]--账号邮箱手机登录功能实现（中）.mp4

* ┣━━[50.18]--账号邮箱手机登录功能实现（下）.mp4

* ┣━━[50.19]--退出登录功能实现.mp4

* ┣━━[50.2]--封装跳转权限验证层.mp4

* ┣━━[50.20]--第三方登录功能实现.mp4

* ┣━━[50.21]--修改账号与安全页面.mp4

* ┣━━[50.22]--绑定手机功能实现.mp4

* ┣━━[50.23]--修改密码功能实现.mp4

* ┣━━[50.24]--绑定邮箱功能实现.mp4

* ┣━━[50.25]--绑定第三方登录功能实现（上）.mp4

* ┣━━[50.26]--绑定第三方登录功能（下）.mp4

* ┣━━[50.27]--修改头像功能实现.mp4

* ┣━━[50.28]--修改资料功能实现.mp4

* ┣━━[50.29]--列表关注功能实现（上）.mp4

* ┣━━[50.3]--封装请求模块（上）.mp4

* ┣━━[50.30]--列表关注功能实现（中）.mp4

* ┣━━[50.31]--列表关注功能实现（下）.mp4

* ┣━━[50.32]--列表顶踩功能实现（上）.mp4

* ┣━━[50.33]--列表顶踩功能实现（中）.mp4

* ┣━━[50.34]--列表顶踩功能实现（下）.mp4

* ┣━━[50.35]--发布文章功能实现（一）.mp4

* ┣━━[50.36]--发布文章功能实现（二）.mp4

* ┣━━[50.37]--发布文章功能实现（三）.mp4

* ┣━━[50.38]--发布文章功能实现（四）.mp4

* ┣━━[50.39]--评论功能实现（一）.mp4

* ┣━━[50.4]--封装请求模块（下）.mp4

* ┣━━[50.40]--评论功能实现（二）.mp4

* ┣━━[50.41]--好友最新动态列表实现.mp4

* ┣━━[50.42]--我的好友列表实现.mp4

* ┣━━[50.43]--搜索用户功能实现.mp4

* ┣━━[50.44]--个人空间功能实现（一）.mp4

* ┣━━[50.45]--个人空间功能实现（二）.mp4

* ┣━━[50.46]--个人空间功能实现（三）.mp4

* ┣━━[50.47]--个人空间功能实现（四）.mp4

* ┣━━[50.48]--浏览历史功能实现.mp4

* ┣━━[50.49]--聊天模块封装（一）.mp4

* ┣━━[50.5]--首页交互实现（一）.mp4

* ┣━━[50.50]--聊天模块封装（二）.mp4

* ┣━━[50.51]--聊天模块封装（三）.mp4

* ┣━━[50.52]--聊天模块封装（四）.mp4

* ┣━━[50.53]--聊天模块封装（五）.mp4

* ┣━━[50.54]--【补充课程】聊天模块绑定上线修改（重点）.mp4

* ┣━━[50.55]--聊天会话列表实现.mp4

* ┣━━[50.56]--聊天历史记录实现.mp4

* ┣━━[50.57]--聊天接收信息实现.mp4

* ┣━━[50.58]--消息实时通知功能实现.mp4

* ┣━━[50.59]--app检查更新功能实现.mp4

* ┣━━[50.6]--首页交互实现（二）.mp4

* ┣━━[50.60]--接收离线信息功能实现.mp4

* ┣━━[50.61]--修复scroll-view大屏手机显示不全问题.mp4

* ┣━━[50.62]--修复第三方登录无法退出问题.mp4

* ┣━━[50.63]--补充聊天列表页两个小问题.mp4

* ┣━━[50.7]--请求错误处理封装.mp4

* ┣━━[50.8]--列表人性化时间显示.mp4

* ┗━━[50.9]--文章详情页交互实现.mp4

* ┣━━[51.1]--隐藏滚动条.mp4

* ┣━━[51.10]--支付宝小程序登录.mp4

* ┣━━[51.11]--补充课程：关于后端api接口更新.mp4

* ┣━━[51.2]--小程序自定义导航栏.mp4

* ┣━━[51.3]--小程序分享功能实现.mp4

* ┣━━[51.4]--隐藏版本检测更新.mp4

* ┣━━[51.5]--微信小程序登录实现.mp4

* ┣━━[51.6]--微信小程序打包上线.mp4

* ┣━━[51.7]--app热更新操作流程.mp4

* ┣━━[51.8]--app打包上线.mp4

* ┗━━[51.9]--支付宝小程序兼容处理上线.mp4

* ┗━━[52.1]--最后导语.mp4

* ┗━━[6.1]--底部导航开发.mp4

* ┣━━[7.1]--view和text组件和动画使用.mp4

* ┣━━[7.10]--计算属性.mp4

* ┣━━[7.2]--uni-app的css3选择器.mp4

* ┣━━[7.3]--flex布局快速上手.mp4

* ┣━━[7.4]--数据渲染.mp4

* ┣━━[7.5]--class和style绑定.mp4

* ┣━━[7.6]--条件渲染.mp4

* ┣━━[7.7]--列表渲染.mp4

* ┣━━[7.8]--事件处理器.mp4

* ┗━━[7.9]--监听属性.mp4

* ┣━━[8.1]--page.json配置.mp4

* ┣━━[8.10]--滚动tab导航开发（中）.mp4

* ┣━━[8.11]--滚动tab导航开发（下）-列表显示.mp4

* ┣━━[8.12]--上拉加载组件开发.mp4

* ┣━━[8.13]--封装上拉加载组件.mp4

* ┣━━[8.14]--封装无数据默认组件.mp4

* ┣━━[8.2]--图文列表样式（上）.mp4

* ┣━━[8.3]--图文列表样式（下）.mp4

* ┣━━[8.4]--封装列表样式组件.mp4

* ┣━━[8.5]--全局分割线开发.mp4

* ┣━━[8.6]--优化列表组件-动画特效.mp4

* ┣━━[8.7]--优化列表组件-关注功能.mp4

* ┣━━[8.8]--优化列表组件-顶踩功能.mp4

* ┗━━[8.9]--滚动tab导航开发（上）.mp4

* ┣━━[9.1]--搜索页开发（上）.mp4

* ┗━━[9.2]--搜索页开发（下）.mp4