缺什么补什么:前后端打通才是这门课的靶心

很多转岗或自学前端的同学,微信小程序能照着文档拼出页面,Node.js 也能跑起 Express 返回几句 JSON,可一旦要求自己把两端接起来,立刻卡壳:不知道怎么用 wx.request 正确请求后端接口,不知道跨域和鉴权怎么处理,更不知道页面生命周期和后端路由怎么配合。这门课要解决的,正是这个从能写静态页面到能独立跑通全栈链路的能力缺口。它不堆砌大而全的架构理论,而是逼你把小程序前端和 Node.js 后端真正对接起来,把数据从数据库一路搬到手机屏幕上。

先补视图与生命周期,再啃接口联调

课程内容按实战顺序铺开,建议按这个顺序补缺。第一块是小程序视图层,重点放在弹性盒布局和页面实战拼装上,如果你平时写页面总靠死宽高和浮动,这部分得认真跟着练,把 flex 容器属性和组件排布吃透,后面做列表页才不会乱。第二块是逻辑层,重点是 App 和页面的生命周期函数。很多人只会把 onLoad 当成页面入口,却不懂 onHide、onUnload 什么时候触发,导致数据该清理时不清、该缓存时不存。第三块是高级接口调用,核心是 wx.request 拿列表数据,这是前后端联调的第一道关。如果你对 Node.js 基础路由和 Express 中间件还没概念,建议先花半天把 Express 的路由响应跑通,再回来看小程序怎么发请求,否则只看前端调用会云里雾里。

学完能独立做什么,资料怎么配合练习

学完这门课,你应该能独立完成一个带列表展示、接口请求和生命周期管理的小程序前端,并用 Express 提供对应的后端数据接口。具体来说,你要能自己搭一个列表页:前端用弹性盒布局排版,在 onLoad 里发 wx.request 拉取数据,后端用 Express 写好路由返回 JSON,并且知道数据在哪个生命周期阶段绑定到视图最合适。配套练习建议这样安排:先跟着视频把页面布局和生命周期敲一遍,不要只看不练;到接口联调环节,自己用 Express 起一个本地服务,写一个返回几条假数据的列表接口,再用小程序去请求它,把请求参数、响应回调、数据渲染整条链路亲手跑通。资料里的代码片段别直接复制,照着手敲一遍,重点理解请求配置和生命周期函数的触发时机。看完后问自己三个问题:页面生命周期各阶段适合做什么操作?wx.request 的参数和回调怎么处理?Express 路由怎么和小程序请求对接?答得上来,这课才算补到位。

课程目录

1-1 [前言] 微信小程序概要 (52:33)
1-2 [前言] 微信小程序项目构成 (48:41)
2-1 [微信小程序视图层处理] 弹性盒容器属性 (42:30)
2-2 [微信小程序视图层处理] 实战页面布局一 (45:56)
2-3 [微信小程序视图层处理] 实战页面布局二 (13:47)
2-4 [微信小程序视图层处理] 实战页面布局三 (14:13)
2-5 [微信小程序视图层处理] 小程序视图层处理 (51:49)
3-1 [微信小程序逻辑层处理] 小程序事件处理 (10:09)
3-2 [微信小程序逻辑层处理] 小程序APP生命周期 (35:50)
3-3 [微信小程序逻辑层处理] 小程序页面生命周期 (35:09)
3-4 [微信小程序逻辑层处理] 生命周期函数应用 (24:58)
4-1 [微信小程序高级接口调用-列表数据获取] wx.request接口使用 (25:17)
4-2 [微信小程序高级接口调用-列表数据获取] 小程序服务器域名解决方案 (13:39)
5-1 [微信小程序高级接口调用-表单处理] 表单提交前端处理 (38:05)
5-2 [微信小程序高级接口调用-表单处理] 表单提交后端服务处理 (12:16)
6-1 [微信小程序高级接口-文件上传] 图片上传chooseImage&uploadFile接口调用 (16:46)
6-2 [微信小程序高级接口-文件上传] 图片上传后端服务处理 (30:52)
7-1 [微信小程序高级接口-模板消息] 模板消息概述 (31:34)
7-2 [微信小程序高级接口-模板消息] 用户openid的获取 (14:09)
7-3 [微信小程序高级接口-模板消息] formId和accesstoken的获取 (30:35)
7-4 [微信小程序高级接口-模板消息] Promise异步发送模板消息 (54:51)