小程序开发的那些事儿：架构设计与基础搭建的“巧妙”之处

哎呀， 说到小程序，大家肯定都不陌生吧？现在的微信生态当中， 小程序相辅相成给了用户更加完美的用户体验，如果你现在是个人或者公司，想要享受到小程序的红利时刻，那第一步就是应该先会做一款属于企业或者属于你的小程序！ 弯道超车。 这听起来是不是很激动人心？但是别急，这事儿说起来容易做起来难啊。今天我们就来聊聊如何将小程序项目架构设计与基础页面搭建巧妙地结合起来 虽然说是“巧妙”，其实很多时候就是一堆坑和经验的堆砌。

先说说我们得明白一个道理，架构设计不是空中楼阁。想象一下你要建一栋房子，你会先干嘛？肯定是打地基啊！小程序也是一样。我们在动手写代码前，先想清楚：我们要做一个什么样的ChatGPT小程序？ 害... 对， 就拿ChatGPT小程序来举例吧，毕竟现在AI这么火，不做个AI聊天小程序都不好意思说自己是程序员。

1. 痛点分析：为什么你的项目总是乱糟糟？

PTSD了... 很多人刚开始做小程序， 代码写得那叫一个随心所欲，文件到处乱扔，再说说连自己都找不到东西在哪。用户会觉得这是个“山寨”应用。所以一个好的架构至关重要！本篇目标：学会从0开始设计一个小程序的整体架构，理解“为什么这样设计”比“怎么写代码”更重要。

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

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

看到了吗？这就是一个简单的流程。但是为了实现这个流程，我们需要多少文件？多少配置？这就要说到我们的“户口本”了。

2. 核心配置：manifest.json与app.json的爱恨情仇

这个文件就像小程序的身份证，定义了：你是谁？你叫什么？你要干什么？UniApp支持Vue2和Vue3，我们选择Vue2。 求锤得锤。 为什么选择Vue2？别问，问就是稳定！虽然Vue3很香，但是为了不踩坑，我们先稳一手。

✅ 如何思考和设计项目架构.3.1 小程序的 户口本 - manifest.json.，切记...

{ "name": "chatgpt-miniprogram", "appid": "__UNI__XXXXXX", "description": "仿AI聊天小程序", "mp-weixin": { "appid": "你的小程序AppID", "setting": { "urlCheck": false // 关键：允许调用本地API } }}，绝绝子...

🔧 重点配置解释看到那个`urlCheck`了吗？这个简直是开发者的福音，不然你调本地接口的时候会被微信无情拦截，那时候你就真的想砸电脑了，栓Q了...。

拯救一下。 除了manifest， 还有一个app.json，这个文件管理所有页面：

我爱我家。 { "pages": , "globalStyle": { "navigationBarTitleText": "ChatGPT小程序", "backgroundColor": "#f8f9fa" }}

小程序的基本目录结构 pages是所有页面的主页面,每个页面一个文件夹,它有2个子目录 utils是公具包 pages所有都可以用utils里的文件 app.js是小程序的主逻辑文件,主要用来注册小程序全局实例 app.json小程序公共设置文件,配置小程序全局设置 app.wxss小程序主样式表文件 .js文件 页面逻辑文件 .wxml 页面结构文件 .wxss 页面样式表文件 .json 页面配置文件 小程序开发框架 小程序MINA框架将整个系统分为视图层、逻辑层和 配置文件，我服了。。

是不是感觉头有点大？别急，这才刚开始呢！

3. 技术选型与工具对比：工欲善其事必先利其器

我始终觉得... 在开发之前，我们得选好工具。现在市面上有很多开发小程序的框架，到底哪个好用？我特意整理了一个表格，大家看看就明白了。

看完了表格，你应该知道怎么选了吧？如果你是个Vue粉，那UniApp绝对是你的不二之选。 盘它... 就像我们上面说的，UniApp支持Vue2和Vue3，我们选择Vue2。

4. 页面搭建：从启动页到聊天页的华丽转身

好了 配置搞定了工具选好了接下来就是写页面了。写页面最怕什么？ 出岔子。 最怕样式乱！所以我们需要一套规范。

我们在styles/中定义：

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

别犹豫... 💡 为什么用8的倍数这是一个设计原则， 为了让布局更协调，更美观。不信你试试用7的倍数，绝对丑哭你。

// 间距系统$spacing-xs: 8rpx; // 极小间距$spacing-sm: 16rpx; // 小间距 $spacing-md: 24rpx; // 中等间距$spacing-lg: 32rpx; // 大间距// 字体大小$font-size-sm: 24rpx; // 小字$font-size-base: 28rpx; //正文$font-size-lg: 32rpx; // 标题

我跟你交个底... 有了这些变量，我们写起样式来就得心应手了。比如我们的启动页：

image-20260103145737149

切中要害。 这个启动页看起来是不是很高端？用了渐变背景，还有加载动画。这就是我们要的效果！启动页要解决什么问题？就是要给用户一种“哇，这个应用好专业”的第一印象。

然后是样式部分：

我们都... .splash-page { height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient;}.app-title { font-size: $font-size-xxl; // 使用设计变量 color: $text-inverse; // 使用设计变量 font-weight: bold; text-align: center;}

image-20260103145805413，实锤。

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

这是一个好问题！如果你把它们放在一起，代码会变得非常臃肿，逻辑也会混乱。分离的好处是什么？就是单一职责！认证页只管认证， 我比较认同... 聊天页只管聊天。这样以后维护起来也方便，不然改个认证逻辑把聊天功能搞崩了那就得不偿失了。

5. 逻辑层与数据交互：让小程序动起来

页面搭好了 只是个花架子，还得有逻辑。小程序的逻辑层和视图层是分离的， 一言难尽。 这和Web开发不太一样。我们需要通过数据绑定来更新视图。

比如认证成功后我们要跳转：

// 认证成功if { // 保存认证信息 // 跳转到聊天页 }，没眼看。

这里用到了本地存储。🤔 思考题什么时候用URL参数，什么时候用本地存储？

多损啊！ // 方式1：URL参数// 方式2：本地存储

我裂开了。 简单 数据少就用URL，数据多且需要持久化就用Storage。别什么都往URL里塞，那样URL长得像乱码一样，看着都难受。

微信小程序不仅在底层架构的运行机制上做了大量的优化,还在重要功能上使用接近于系统层的组件承载.■ wxml 文件页面结构文件,用于设计页面的布局、数据绑定等, 盘它。 类似 HTML 页目中的. html 文件.微信小程序的主体部分由3个文件组成,这3个文件必须放在项目的主目录中,负责小程序的整体配置,它们的名称是固定的..

我们还需要处理API请求。开发环境和生产环境是不一样的，千万别搞混了！

// 开发环境 vs 生产环境const API_BASE = _ENV === 'development' ? 体验感拉满。 'http://localhost:7714' // 本地开发 : 'https://' // 线上环境

太暖了。 如果你在开发环境用了线上地址， 或者反过来那你调试起来绝对是一头雾水。

6. 调试与排错：程序员的自我修养

写完代码不是结束，只是开始。真正的挑战在于调试！ 不忍卒读。 小程序开发，调试是必不可少的环节。

1. 善用控制台

// 查看数据 // 查看错误

别小看console.log，它是你最好的朋友。当你不知道数据为什么没渲染出来的时候，先log一下看看数据到底有没有，是不是格式不对，我CPU干烧了。。

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

这个工具虽然有时候卡顿， 有时候报错看不懂，但功能还是很强大的。断点调试、查看网络请求、查看Storage，这些都是基本功，还行。。

3. 真机调试

说白了就是... 模拟器跑通了不代表真机没问题。一定要真机调试！有时候模拟器好好的，一到真机上就白屏，或者样式错乱，那叫一个崩溃。

这里列举两个常见问题：

问题1：页面空白

这通常是主要原因是路径写错了或者app.json里没注册页面。新加的页面必须在pages里注册,否则页面无效,小程序默认显示最上面的路径。这个细节一定要记住！

问题2：API调用失败

检查域名配置， 检查request是不是合法域名，检查是不是http没配成https。微信对平安要求很高的，乱七八糟的请求都会被拦截。

7. ：架构是为了更好的开发

项目 本文详细介绍了如何开发一个微信小程序,通过编写简单的待办事项应用,涵盖了项目的创建、 配置和页面开发.微信小程序云开发是一种基于微信平台的轻量级应用开发框架,它允许开发者在不搭建后端服务器的情况下,直接利用微信的云服务进行数据存储、处理和分发.微信小程序开发基础1533微信小程序第六章1363微信小程序第四章1353第三章...，这就说得通了。

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

本系列将会带着大家一起从0学习微信小程序,再说说做出一个微信小 躺平... 程序小项目.wxml类型文件,类似html文件,设计页面结构.

再说说给大家一个设计思路不要为了架构而架构。适合自己项目的才是最好的架构。如果你的项目只有两个页面搞个什么MVC、MVVM可能反而麻烦。简单直接就是美！

说句可能得罪人的话... 好了今天的内容就到这里。希望大家都能搭建出自己心目中完美的小程序架构！如果觉得有用，记得点赞哦！