Web 与小程序全栈学习路线

先用一张图理解全栈#

用户看到和点击的部分
├── Web 前端：HTML + CSS + JavaScript
└── 小程序前端：WXML + WXSS + JavaScript
             │ 发送 HTTPS 请求
             ▼
后端：Node.js + Express（接收请求、判断规则、返回数据）
             │ 使用 SQL
             ▼
数据库：PostgreSQL（长期保存用户、文章、订单等数据）
             │
             ▼
服务器：Linux + Nginx + Docker（让程序一直在线）

可以把它想成一家餐厅：前端是菜单和服务员；后端是厨房和工作流程；数据库是仓库与账本；服务器是餐厅所在的房屋和水电系统。用户不该直接进入仓库，前端也不该直接持有数据库密码，所有业务都经过后端。

零基础应该先学什么#

第 1 阶段：共同基础#

文件和文件夹、浏览器、代码编辑器、终端、Git。 理解 URL、请求、响应和 JSON 的直觉。 成果：能打开自己的 HTML 文件，能保存一次 Git 提交。

第 2 阶段：Web 前端#

1. HTML：决定内容是什么；
2. CSS：决定内容如何排列和显示；
3. JavaScript：决定点击后发生什么；
4. 浏览器与网络：理解页面如何加载、如何请求 API；
5. 响应式与无障碍：让手机、电脑和不同用户都能使用。

成果：完成一个响应式学习记录网站，数据先保存在浏览器中。

第 3 阶段：数据库与后端#

1. 用 PostgreSQL 建表和查询；
2. 用 Node.js/Express 编写 API；
3. 处理输入、错误、登录和权限；
4. 让 Web 前端通过 fetch 调用 API。

成果：完成有注册、登录和数据隔离的任务管理系统。

第 4 阶段：微信小程序#

1. 认识 WXML、WXSS、页面配置和生命周期；
2. 使用事件、数据绑定、组件和本地缓存；
3. 使用 wx.request 调用同一套 HTTPS 后端；
4. 了解登录流程、合法域名、隐私与发布审核；
5. 可选：使用云开发数据库、存储和云函数快速完成小项目。

成果：把任务管理系统做成小程序端，复用后端接口。

第 5 阶段：上线与维护#

学习 Linux、Nginx、HTTPS、Docker、日志、备份、恢复与更新。 成果：Web 页面和小程序都能安全访问线上 API。

推荐顺序与时间#

每天只有 1 小时也完全可以。不要因为计划写着“周”就赶进度：通过当前阶段的完成标准再继续。

Web 和小程序有哪些相同与不同#

它们不是同一种运行环境。先学 Web 基础能帮助理解小程序，但不能简单地把 HTML 文件改名成 WXML。

现在不用学什么#

React/Vue、TypeScript、状态管理、微服务、Redis、消息队列、Kubernetes 都可以以后学。先用原生 HTML/CSS/JavaScript 完成一个项目，你才知道框架解决了什么问题。

学会的判断标准#

• 能用自己的话解释，而不是背定义；
• 关闭教程后能从空文件开始；
• 改变需求后仍能完成；
• 遇到错误会看控制台、网络面板和日志；
• 一周后能重新做出；
• 能说明数据从界面到后端再到数据库的完整路径。