小程序项目架构设计与基础页面搭建(基础)

原创

peace-free

发布于 2026-01-03 15:34:18

2750

本篇目标：学会从0开始设计一个小程序的整体架构，理解"为什么这样设计"比"怎么写代码"更重要

🎯 本篇学习目标

学完这一篇，你将掌握：

✅ 如何思考和设计项目架构
✅ 为什么要分层，怎么分层
✅ 小程序的核心配置文件作用
✅ 页面路由和导航的设计思路
✅ 从用户角度思考功能流程

🤔 第一章：开始前的思考

1.1 我们要做什么？

在动手写代码前，先想清楚：我们要做一个什么样的ChatGPT小程序？

核心功能：

用户输入Access Key进行认证
支持文字和图片的聊天对话
AI实时回复（流式响应）
查看使用配额

用户使用流程：

1.2 这个流程告诉我们什么？

从用户流程可以看出，我们至少需要：

启动页 - 用户第一次打开看到的页面
认证页 - 让用户输入Access Key
聊天页 - 核心的对话界面

🤔 思考题：为什么不把认证和聊天放在一个页面？

点击查看答案

分离的好处：

职责明确：每个页面只做一件事
用户体验：认证成功后有明确的"进入"感觉
维护简单：修改认证逻辑不会影响聊天功能

🏗️ 第二章：架构设计思维

2.1 什么是好的架构？

想象你要建一栋房子，你会：

先画设计图（整体规划）
分出客厅、卧室、厨房（功能分区）
规划水电布线（基础设施）

小程序架构也是一样：

2.2 为什么要这样分层？

举个例子：聊天气泡在多个地方都会用到

❌ 不分层：每个页面都写一遍聊天气泡代码
✅ 分层设计：写一个ChatBubble组件，到处复用

分层的好处：

复用性：写一次，到处用
维护性：改一个地方，全部生效
可读性：每个文件职责清晰

2.3 我们的目录设计

基于以上思考，我们设计这样的目录结构：

💡 设计原则：

按功能分组：相关的文件放在一起
见名知意：文件夹和文件名要一看就懂
便于扩展：后续添加功能有地方放

⚙️ 第三章：核心配置文件

3.1 小程序的"户口本" - manifest.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

这个文件管理所有页面：

{
  "pages": [
    { "path": "pages/index/index" },
    { "path": "pages/auth/auth" }, 
    { "path": "pages/chat/chat" }
  ],
  "globalStyle": {
    "navigationBarTitleText": "ChatGPT小程序",
    "backgroundColor": "#f8f9fa"
  }
}

设计思路：

第一个页面是默认首页
每个页面可以有独立的导航栏设置
全局样式保证一致性

3.3 应用入口 - main.js

UniApp支持Vue2和Vue3，我们选择Vue2（更稳定）：

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 用户访问流程

我们设计这样的用户体验：

1. 启动页 (2秒)
   ↓
2. 检查是否已认证
   ├─ 是 → 直接进入聊天页
   └─ 否 → 跳转认证页
            ↓
3. 认证页面
   ├─ 输入Access Key
   ├─ 验证成功 → 保存信息 → 进入聊天页
   └─ 验证失败 → 提示重新输入
            ↓
4. 聊天页面
   ├─ 发送消息
   ├─ 接收回复
   └─ 管理对话历史

4.2 页面跳转的核心代码

认证成功后跳转：

// 认证成功
if (result.valid) {
  // 保存认证信息
  uni.setStorageSync('accessKey', accessKey)
  
  // 跳转到聊天页
  uni.reLaunch({
    url: '/pages/chat/chat'
  })
}

关键API说明：

uni.setStorageSync()：本地存储，下次打开还在
uni.reLaunch()：清空页面栈，相当于重新开始

4.3 页面间数据传递

有时候需要在页面间传递数据：

// 方式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中定义：

// 主色系
$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;       // 次背景

使用方式：

.chat-button {
  background-color: $primary-color;  // 统一使用变量
  color: $text-primary;
}

5.3 间距和字体规范

// 间距系统（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 启动页的核心代码

<template>
  <view class="splash-page">
    <view class="logo-section">
      <text class="app-title">ChatGPT助手</text>
      <text class="app-subtitle">智能对话，即刻开始</text>
    </view>
    
    <view class="loading-section">
      <view class="loading-dots">
        <view class="dot"></view>
        <view class="dot"></view>
        <view class="dot"></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  onLoad() {
    // 2秒后自动跳转
    setTimeout(() => {
      this.checkAuthAndRedirect()
    }, 2000)
  },
  
  methods: {
    checkAuthAndRedirect() {
      const accessKey = uni.getStorageSync('accessKey')
      
      if (accessKey) {
        // 已认证，直接进入聊天
        uni.reLaunch({ url: '/pages/chat/chat' })
      } else {
        // 未认证，去认证页
        uni.reLaunch({ url: '/pages/auth/auth' })
      }
    }
  }
}
</script>

代码要点解释：

onLoad()：页面加载时执行
setTimeout()：延迟2秒，给用户品牌印象时间
uni.getStorageSync()：检查是否已保存Access Key
uni.reLaunch()：清空页面栈重新开始

6.3 样式设计的思考

.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. 善用控制台：

console.log('用户信息:', userInfo)  // 查看数据
console.error('API调用失败:', error)  // 查看错误

2. 微信开发者工具的调试功能：

Network面板：查看API请求
Console面板：查看日志输出
Storage面板：查看本地存储

3. 真机调试：

// 开发环境 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的倍数间距原则
开发流程：
- 页面跳转和数据传递
- 本地存储的使用
- 调试技巧和问题解决

💡 记住：好的架构不是一开始就完美的，而是在不断实践中逐步优化的。现在你已经有了一个坚实的基础，后面的功能开发会越来越顺手！

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S17

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S17

登录后参与评论

0 条评论

热度