【李炎恢】【微信小程序开发 / 组件篇 / 阶段一】【十天精品课堂】

这门课在做什么

这是微信小程序开发的第一阶段，也就是组件篇阶段一。它解决的是最基础的入门问题：装好开发工具、跑通第一个小程序项目，并把页面里要用到的所有基础组件过一遍。十天、几十节短视频，每节十分钟上下，节奏密、覆盖全，目的是把官方组件文档里那些零散的标签，用代码示例串起来讲清楚。课程的重心不在业务，而在「工具会用」。所以这一阶段不讲云开发、不讲后端对接、不讲完整项目，只讲小程序自己的语言 WXML、WXSS、JS 配置文件这些原生写法。

适合什么基础

这门课定位是零基础起步。资料线索里专门有一节讲 VS Code 环境配置，说明默认用的是官方开发者工具搭配 VS Code，不要求有编辑器使用经验。但有两点要心里有数：一是至少要会用 JavaScript 的变量、函数、if 和 for 循环，看数据绑定、条件渲染、列表渲染、事件回调时不会发懵；二是要懂一点点 HTML 和 CSS 的基本概念，比如 div、class、样式选择器，WXSS 相当于 CSS 的子集，理解起来会顺很多。如果只会切图、不写代码，或者只会点鼠标、不接触逻辑，需要先去补一下 JS 基础再看，不然事件绑定那几节会卡住。

建议先看哪几块

前十节是骨架，必须按顺序走：入门和安装、结构分析、VS Code 配置、生命周期、组件与数据绑定、条件与列表渲染、模板与引用、WXSS 单位、基础组件概述。这十节一旦看完，小程序「页面是怎么跑起来的」这件事就通了。后面的组件部分可以挑着用：做展示型页面，重点看视图类组件（view、scroll-view、swiper），做表单交互多的页面，重点看表单类组件（button、input、picker、switch、slider），做内容详情页，把 text、rich-text、icon、progress 这几节补上。不需要每节都精看，先按要做的页面类型挑，看完一个组件就在自己的项目里写一个小例子，比纯听课记得牢。

学完能独立做什么

学完这一阶段，你能从零搭一个小程序工程目录，能看懂官方文档里任何一个基础组件的 demo 并改造成自己想要的样式，能做出常见的列表页、表单页、轮播图页、详情页，也能处理点击事件、输入事件、滑动事件这些基本交互。简单说，就是能完成前端工程师在原型阶段交付的静态交互页面。但要注意，这一阶段不涉及自定义组件的封装、不涉及复杂状态管理、不涉及登录支付网络请求这些业务逻辑，做出来的是「壳子」而非完整产品。如果你的目标是上线一个能发布的完整小程序，这阶段只是地基，后面还有 API、网络请求、云开发、组件封装等着你。

资料怎么配合练习

资料里有视频源码，建议按这个节奏用：每节视频先看一遍，看完立刻在自己本地新建一个空白小程序，把示例代码原样敲一遍，再尝试改一个变量名、换一个颜色、调一个尺寸，看页面变化。组件部分尤其要动手，每个组件至少做一页 Demo，把所有列出来的属性都试一遍，记笔记记录踩过的雷，比如 scroll-view 的下拉刷新要开 lower-threshold 这种小坑，文档里讲得不够细，视频里会带过一遍。最后把练习的 Demo 整理成一个文件夹，就是后面做真实项目的组件库，比任何文档都好用。十天看似不长，但每天两节、边看边敲，是这一阶段最合理的打开方式。