本篇目标：学会从0开始设计一个小程序的整体架构，理解"为什么这样设计"比"怎么写代码"更重要
🎯 本篇学习目标学完这一篇，你将掌握：
✅ 如何思考和设计项目架构✅ 为什么要分层，怎么分层 ✅ 小程序的核心配置文件作用✅ 页面路由和导航的设计思路✅ 从用户角度思考功能流程🤔 第一章：开始前的思考1.1 我们要做什么？在动手写代码前，先想清楚：我们要做一个什么样的ChatGPT小程序？
核心功能：
用户输入Access Key进行认证支持文字和图片的聊天对话AI实时回复（流式响应）查看使用配额用户使用流程：
image-202601031457371491.2 这个流程告诉我们什么？从用户流程可以看出，我们至少需要：
启动页 - 用户第一次打开看到的页面认证页 - 让用户输入Access Key聊天页 - 核心的对话界面🤔 思考题：为什么不把认证和聊天放在一个页面？
点击查看答案
分离的好处：
职责明确：每个页面只做一件事用户体验：认证成功后有明确的"进入"感觉维护简单：修改认证逻辑不会影响聊天功能🏗️ 第二章：架构设计思维2.1 什么是好的架构？想象你要建一栋房子，你会：
先画设计图（整体规划）分出客厅、卧室、厨房（功能分区）规划水电布线（基础设施）小程序架构也是一样：
image-202601031458054132.2 为什么要这样分层？举个例子：聊天气泡在多个地方都会用到
❌ 不分层：每个页面都写一遍聊天气泡代码✅ 分层设计：写一个ChatBubble组件，到处复用分层的好处：
复用性：写一次，到处用维护性：改一个地方，全部生效可读性：每个文件职责清晰2.3 我们的目录设计基于以上思考，我们设计这样的目录结构：
image-20260103145823663💡 设计原则：
按功能分组：相关的文件放在一起见名知意：文件夹和文件名要一看就懂便于扩展：后续添加功能有地方放⚙️ 第三章：核心配置文件3.1 小程序的"户口本" - manifest.json这个文件就像小程序的身份证，定义了：
代码语言：json复制{
"name": "chatgpt-miniprogram",
"appid": "__UNI__XXXXXX",
"description": "仿ChatGPT的AI聊天小程序",
"mp-weixin": {
"appid": "你的小程序AppID",
"setting": {
"urlCheck": false // 关键：允许调用本地API
}
}
}🔧 重点配置解释：
urlCheck: false：开发时允许调用localhost接口appid：微信小程序的唯一标识后续发布时需要修改为线上配置3.2 页面路由管理 - pages.json这个文件管理所有页面：
代码语言：json复制{
"pages": [
{ "path": "pages/index/index" },
{ "path": "pages/auth/auth" },
{ "path": "pages/chat/chat" }
],
"globalStyle": {
"navigationBarTitleText": "ChatGPT小程序",
"backgroundColor": "#f8f9fa"
}
}设计思路：
第一个页面是默认首页每个页面可以有独立的导航栏设置全局样式保证一致性3.3 应用入口 - main.jsUniApp支持Vue2和Vue3，我们选择Vue2（更稳定）：
代码语言：javascript复制import App from './App'
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()为什么选择Vue2：
兼容性更好社区资源丰富学习资料更多🛣️ 第四章：页面流程设计4.1 用户访问流程我们设计这样的用户体验：
代码语言：txt复制1. 启动页 (2秒)
↓
2. 检查是否已认证
├─ 是 → 直接进入聊天页
└─ 否 → 跳转认证页
↓
3. 认证页面
├─ 输入Access Key
├─ 验证成功 → 保存信息 → 进入聊天页
└─ 验证失败 → 提示重新输入
↓
4. 聊天页面
├─ 发送消息
├─ 接收回复
└─ 管理对话历史4.2 页面跳转的核心代码认证成功后跳转：
代码语言：javascript复制// 认证成功
if (result.valid) {
// 保存认证信息
uni.setStorageSync('accessKey', accessKey)
// 跳转到聊天页
uni.reLaunch({
url: '/pages/chat/chat'
})
}关键API说明：
uni.setStorageSync()：本地存储，下次打开还在uni.reLaunch()：清空页面栈，相当于重新开始4.3 页面间数据传递有时候需要在页面间传递数据：
代码语言：javascript复制// 方式1：URL参数（简单数据）
uni.navigateTo({
url: '/pages/chat/chat?from=auth&userId=123'
})
// 方式2：本地存储（复杂数据）
uni.setStorageSync('userInfo', userInfo)🤔 思考题：什么时候用URL参数，什么时候用本地存储？
点击查看答案
URL参数：简单的标识符，如ID、状态标志本地存储：复杂对象、敏感信息、需要持久化的数据🎨 第五章：设计规范建立5.1 为什么需要设计规范？想象一下：
这个页面按钮是蓝色的那个页面按钮是绿色的 字体大小也不统一用户会觉得这是个"山寨"应用。
5.2 建立色彩系统我们在styles/variables.scss中定义：
代码语言：scss复制// 主色系
$primary-color: #007aff; // 主品牌色
$success-color: #34c759; // 成功绿
$warning-color: #ff9500; // 警告橙
$error-color: #ff3b30; // 错误红
// 文字色彩
$text-primary: #000000; // 主要文字
$text-secondary: #666666; // 次要文字
$text-disabled: #cccccc; // 禁用文字
// 背景色彩
$bg-primary: #ffffff; // 主背景
$bg-secondary: #f5f5f5; // 次背景使用方式：
代码语言：scss复制.chat-button {
background-color: $primary-color; // 统一使用变量
color: $text-primary;
}5.3 间距和字体规范代码语言：scss复制// 间距系统（8的倍数原则）
$spacing-xs: 8rpx; // 极小间距
$spacing-sm: 16rpx; // 小间距
$spacing-md: 24rpx; // 中等间距
$spacing-lg: 32rpx; // 大间距
// 字体大小
$font-size-sm: 24rpx; // 小字
$font-size-base: 28rpx; // 正文
$font-size-lg: 32rpx; // 标题💡 为什么用8的倍数：
视觉上更和谐设计师和开发者的通用规则适配不同屏幕时计算简单📱 第六章：创建第一个页面6.1 启动页的设计思路启动页要解决什么问题？
品牌展示：让用户知道这是什么应用加载缓冲：给应用初始化留时间用户引导：第一印象很重要6.2 启动页的核心代码代码语言：vue复制
代码要点解释：
onLoad()：页面加载时执行setTimeout()：延迟2秒，给用户品牌印象时间uni.getStorageSync()：检查是否已保存Access Keyuni.reLaunch()：清空页面栈重新开始6.3 样式设计的思考代码语言：scss复制.splash-page {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.app-title {
font-size: $font-size-xxl; // 使用设计变量
color: $text-inverse; // 使用设计变量
font-weight: bold;
text-align: center;
}设计思路：
使用渐变背景营造科技感垂直居中布局，视觉焦点集中所有数值都使用设计变量，便于后续调整🔧 第七章：开发调试技巧7.1 如何高效调试？1. 善用控制台：
代码语言：javascript复制console.log('用户信息:', userInfo) // 查看数据
console.error('API调用失败:', error) // 查看错误2. 微信开发者工具的调试功能：
Network面板：查看API请求Console面板：查看日志输出Storage面板：查看本地存储3. 真机调试：
代码语言：javascript复制// 开发环境 vs 生产环境
const API_BASE = process.env.NODE_ENV === 'development'
? 'http://localhost:7714' // 本地开发
: 'https://api.yourdomain.com' // 线上环境7.2 常见问题解决问题1：页面空白
检查pages.json是否正确配置检查Vue语法是否有错误查看控制台错误信息问题2：API调用失败
检查manifest.json中的urlCheck设置确认后端服务是否启动查看Network面板的请求详情📝 第八章：本章总结8.1 我们学到了什么？架构思维：先思考用户流程，再设计技术方案分层设计，职责明确可复用、可维护、可扩展配置管理：manifest.json：应用基本信息pages.json：页面路由管理 main.js：应用入口配置设计规范：建立色彩和字体系统使用设计变量保证一致性8的倍数间距原则开发流程：页面跳转和数据传递本地存储的使用调试技巧和问题解决💡 记住：好的架构不是一开始就完美的，而是在不断实践中逐步优化的。现在你已经有了一个坚实的基础，后面的功能开发会越来越顺手！