文章目录
- 一、概述
- 学习目标
- 前置知识
- 二、项目概述与技术栈
- 2.1 项目定位
- 2.2 技术栈清单
- 2.3 目录结构全景
- 三、环境配置体系
- 3.1 运行时配置（env/config.js）
- 3.2 环境地址配置
- 3.3 Vite 代理配置
- 3.4 配置策略总结
- 四、应用入口与生命周期（App.vue）
- 4.1 启动场景解析（parseScene）
- 4.2 微信小程序更新管理
- 4.3 APP 热更新（checkAppUpdate）
- 五、全局注册与注入（main.js）
- 5.1 全局组件注册
- 5.2 全局方法注入
- 5.3 H5 微信 JS-SDK 集成
- 5.4 动态 TabBar 配置
- 六、HTTP 请求封装
- 6.1 请求方法族
- 6.2 请求流程与错误处理
- 6.3 登录态失效处理（doLogin）
- 七、状态管理与主题系统
- 7.1 Vuex Store 定义
- 7.2 7 套预设主题色
- 7.3 主题切换联动机制
- 八、页面路由配置（pages.json）
- 8.1 页面清单
- 8.2 自定义导航栏策略
- 8.3 TabBar 配置
- 8.4 条件编译配置（condition）
- 九、多端打包配置（manifest.json）
- 9.1 App 端配置（app-plus）
- 9.2 分发配置（distribute）
- 9.3 微信小程序配置
- 9.4 H5 配置
- 十、样式系统与主题化
- 10.1 全局 SCSS 变量（uni.scss）
- 10.2 原子化样式库（common/style.scss）
- 10.3 单位使用规范
- 十一、组件化开发
- 11.1 头部占位组件（header.vue）
- 11.2 DIY 装修引擎（components/diy/）
- 11.3 自定义导航栏与 TabBar
- 十二、条件编译详解
- 12.1 基本语法
- 12.2 项目中的实际应用场景
- 12.3 pages.json 中的条件编译
- 十三、通用工具库
- 13.1 common/utils.js
- 13.2 utils/validator.js
- 13.3 common/gotopage.js
- 十四、支付集成（common/pay.js）
- 14.1 多端支付方式总览
- 14.2 支付核心流程
- 十五、开发调试与测试
- 15.1 开发环境启动命令
- 15.2 三端调试方案
- 15.3 condition 快速切换页面
- 十六、常见问题与解答
- Q1：H5 环境请求后端 404？
- Q2：TabBar 图标不更新？
- Q3：微信小程序支付失败？
- Q4：App 端热更新不生效？
- Q5：页面样式在不同平台表现不一致？
- Q6：登录态频繁失效？
- 十七、实践练习
- 十八、总结
一、概述
在当下移动互联网生态中，同一套业务逻辑需要覆盖 H5、微信小程序、原生 App 等多端场景已成常态。uni-app 作为国内主流的跨平台开发框架，通过条件编译和统一 API实现了"一套代码，多端运行"的高效开发模式。
本文以电商项目wind_shop_single_app为例，系统拆解基于uni-app 3.0 + Vue 3 Composition API + Vite构建三端电商应用的完整技术方案。全文贯穿项目实战，覆盖从环境搭建、架构设计到多端发布的全链路知识，适合有一定 Vue 基础、希望深入掌握 uni-app 跨平台开发的工程师阅读。
学习目标
- 掌握 uni-app 跨平台项目架构与多端适配策略
- 理解页面路由配置、生命周期管理与全局状态控制
- 学会 HTTP 请求封装、Token 鉴权与登录态失效处理
- 掌握动态主题切换、TabBar 配置与 DIY 装修引擎
- 了解 H5 / 小程序 / App 三端差异化开发与条件编译
前置知识
- Vue 3 基础（Composition API / Options API）
- uni-app 框架基本概念（pages.json、manifest.json）
- 微信小程序开发基础（可选）
- 基
)
