Java 企业级 SaaS 架构 B2C 微信小程序电商项目实战训练营06- uni-app + Vue 3 移动端开发

文章目录一、概述学习目标前置知识二、项目概述与技术栈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.js13.2 utils/validator.js13.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）微信小程序开发基础（可选）基