别把可视化拖拽当万能，缺的是组件边界认知

很多转岗做小程序的同行，一上手就碰可视化编辑器，觉得拖拽几下就能上线。真到做业务页时，问题全暴露：列表渲染不对、弹窗层级乱、侧边栏和面板分不清。这门即速应用编辑器说明课，解决的就是这种“会用但乱用”的缺口。它不教代码语法，专讲编辑器里基础组件和布局组件到底怎么排、各自边界在哪。适合两类人：一是刚接手小程序前端、只会套模板的；二是之前写过原生代码，但对可视化平台组件体系没系统认知的。别假装什么都会，基础组件和布局组件的区分，很多人真说不清。

先看基础再看布局，组件分类要拆透

建议先从基础组件块看起。文本、图片、按钮、标题这些看着简单，但高级列表和轮播、公告、视频才是重点。高级列表涉及数据绑定逻辑，轮播和公告涉及内容动态切换，这些组件配置错了，页面直接空白或渲染异常。看完基础，立刻接布局组件。双栏和分割线是页面骨架，弹窗、面板、自由面板、滑动面板这四个容易混。弹窗是临时触发，面板是固定区域，自由面板允许绝对定位，滑动面板依赖手势。动态分类和侧边栏、悬浮窗，则关系导航交互。资料包里的练习要这么配：先照着基础组件说明，独立搭一个含轮播和高级列表的内容页；再用布局组件，把同一页面改成双栏加侧边栏结构。别只看不动手，组件边界这种东西，拖错几次才记得住。

学完能独立搭页并排障，别止于照抄模板

学完这门说明，你应能独立完成一件事：拿到一个页面设计稿，判断哪些部分用基础组件、哪些用布局组件，然后在即速应用里从零搭出结构，不是套模板改字。更关键的是排障能力。页面布局乱了，你能定位是自由面板用错还是滑动面板配置问题；列表不显示，你能判断是数据源没绑还是高级列表字段映射错。资料配合练习时，重点做对比训练：同一个页面交互效果，分别用弹窗和面板实现一次，体会触发逻辑和层级差异。把这些组件说明当工具手册查，缺哪块补哪块，比囫囵看一遍强。可视化编辑器上手快，但组件用准用对，才是前端转岗该有的底子。

课程目录

1 01文本【基础组件】 (01:40)
2 02图片【基础组件】 (01:37)
3 03按钮【基础组件】 (01:23)
4 04标题【基础组件】 (02:21)
5 05高级列表【基础组件】 (01:39)
6 06视频【基础组件】 (07:04)
7 07轮播【基础组件】 (06:28)
8 08公告【基础组件】 (05:05)
9 09添加组合【基础组件】 (01:05)
10 01双栏【布局组件】 (02:40)
11 02分割线【布局组件】 (01:11)
12 03弹窗【布局组件】 (01:41)
13 04面板【布局组件】 (01:15)
14 05自由面板【布局组件】 (01:47)
15 06滑动面板【布局组件】 (01:42)
16 07动态分类【布局组件】 (02:55)
17 08侧边栏【布局组件】 (02:27)
18 09悬浮窗【布局组件】 (01:36)
19 01电商【功能组件】 (01:39)
20 02到店【功能组件】 (01:23)
21 03排号【功能组件】 (02:10)
22 04预约【功能组件】 (02:05)
23 05多商家【功能组件】 (01:36)
24 06资讯【功能组件】 (02:22)
25 07社区【功能组件】 (02:07)
26 08评论【功能组件】 (48)
27 09动态列表【功能组件】 (02:25)
28 10表单【功能组件】 (02:00)
29 11动态容器【功能组件】 (02:07)
30 12插件【功能组件】 (56)
31 13公告【功能组件】 (01:34)
32 01秒杀【营销组件】 (01:12)
33 02优惠券【营销组件】 (01:46)
34 03会员卡【营销组件】 (01:35)
35 04储值【营销组件】 (01:19)
36 05当面付【营销组件】 (01:08)
37 06砸金蛋大转盘刮刮乐【营销组件】 (01:39)
38 01计数【其他组件】 (01:06)
39 02音频【其他组件】 (51)
40 03地图【其他组件】 (01:03)
41 04搜索【其他组件】 (01:27)