【uniapp开发教程】uni-app实战商城类app和小程序【网易云课堂】

这份资料解决什么问题

uni-app 的官方文档足够细，但真正落到一个完整商城项目上，会遇到一堆文档里不会连起来讲的问题：页面栈怎么组织、tabBar 与自定义导航如何共存、请求层怎么封装才能同时跑在 H5、小程序和 App 三端、登录态在 App 端要写 storage 而小程序端要考虑时效、支付与订单状态在前后端之间怎么对齐。这份《uni-app 实战商城类 app 和小程序》走的不是 API 罗列路线，而是围绕一个商城业务把上述问题串起来，适合已经有 Vue 基础、准备第一次把 uni-app 项目做完整的人拿来对照实践。

技术栈与工程结构

项目基于 Vue 语法体系，使用 uni-app 的多端编译能力，一套代码产出小程序与 App 两端包。结构上遵循 uni-app 常见的 pages / static / components / common 分层，业务模块按首页、分类、商品详情、购物车、订单、个人中心切分。值得对照看的是几个复用点：

• 请求层通常封装为统一拦截器，处理 baseURL、token 注入、错误码提示，屏蔽 wx.request、uni.request 在多端的差异；
• 商品卡片、价格格式化、数量步进器这类组件抽成公共组件，避免在多个页面里复制粘贴；
• 路由跳转统一走一层封装函数，把需要登录的页面集中做权限判断，而不是散落在每个按钮的点击事件里；
• 状态管理根据项目规模选择 Vuex 或全局 mixin，购物车这类跨页面共享数据是最典型的落点。

这些做法谈不上新奇，但它们是商城类项目最容易在后期返工的地方，提前看清结构收益很大。

课程里最值得动手的部分

商城类应用的难点很少在单个页面，而在于状态流转。购物车的增删改查、选中态与总价联动、结算时地址选择与订单确认页的数据传递、订单列表的多状态筛选，这些都是可以独立拆出来练的模块。建议不要顺着视频被动看完，而是拿到一份接口文档后自己先写结构和数据流，再回去对比课程里的实现方式，差异点往往就是经验点。

跨端适配同样值得单独花时间。小程序对包体积、分包加载有硬性限制，App 端要考虑原生导航栏与自定义头部的取舍，H5 端则要处理路由模式和刷新丢失状态的问题。课程里对这些差异有覆盖，但真正记住的方式还是自己改一次配置、跑一次三端。

怎么用它自学

• 第一步先把环境跑通，确认 HBuilderX 或 CLI 两种创建方式各跑一次，理解 manifest.json 与 pages.json 的作用边界；
• 第二步跳过纯讲解段落，直接从商品列表与详情页开始写，把数据请求与渲染打通；
• 第三步做购物车与订单，重点处理数据持久化和页面间通信；
• 第四步做打包发布，小程序走一遍上传审核流程，App 走一遍云打包或本地打包，这一步会暴露大量配置层面的坑。

配套源码的价值在于对照，而不是照抄。每完成一个模块，回头看一遍参考实现，把命名、目录、抽组件的粒度调整到一致，长期看这比多敲几百行代码更有用。

适合与不适合

如果你已经写过 Vue 项目、想做第一个跨端商城应用，或者在维护一个 uni-app 项目但结构比较乱，这份资料能提供一条可参照的工程线索。如果你还没接触过 Vue 的组件与生命周期，建议先把这块补上再看，否则会卡在语法而不是 uni-app 本身。整体上它是一份偏实践的参考资料，配合动手节奏使用效果最好。