小程序组件化开发与复用技巧

🎒 30章 · 从入门到企业级
1
01 组件化基础
什么是组件化、组件化的优势、小程序组件化与Vue/React组件的异同
2
02 创建第一个组件
组件文件结构、Component构造器、properties与data的区别
3
03 组件通信(上)
父传子(properties)、子传父(triggerEvent)、兄弟组件通信
4
04 组件通信(下)
跨页面组件通信(EventBus)、全局状态管理(Store)与组件的关系
5
05 插槽(slot)
单个插槽、多个插槽(多slot)、插槽的作用域与样式隔离
6
06 组件样式隔离
styleIsolation配置、外部样式类(externalClasses)、组件内部样式穿透
7
07 组件生命周期
created、attached、ready、detached、组件所在页面的生命周期
8
08 组件复用实战(一)
封装一个通用的Loading组件(骨架屏与加载动画)
9
09 组件复用实战(二)
封装一个通用的空状态(Empty)组件
10
10 组件复用实战(三)
封装一个通用的弹窗(Modal/Dialog)组件
11
11 组件复用实战(四)
封装一个通用的Toast/轻提示组件
12
12 组件复用实战(五)
封装一个通用的导航栏(Navbar)组件
13
13 组件复用实战(六)
封装一个通用的Tab切换组件
14
14 组件复用实战(七)
封装一个通用的列表(List)组件,支持下拉刷新与上拉加载
15
15 组件复用实战(八)
封装一个通用的表单(Form)组件,包含输入校验
16
16 组件复用实战(九)
封装一个通用的评分(Rate)组件
17
17 组件复用实战(十)
封装一个通用的倒计时(Countdown)组件
18
18 高阶组件(HOC)与组合模式
使用高阶组件实现逻辑复用、组件组合(Composition)模式
19
19 Behaviors(行为/混入)
Behaviors的定义与使用、多个Behaviors的合并规则
20
20 组件间关系(relations)
父子组件关系、兄弟组件关系、relations的抽象节点
21
21 抽象节点(Component Generics)
抽象节点的定义、使用场景、与插槽的区别
22
22 自定义组件的数据监听器(observers)
observers的用法、深度监听、性能优化
23
23 自定义组件的纯数据字段(pureDataPattern)
什么是纯数据字段、如何配置、使用场景
24
24 组件的单元测试
使用Jest/miniprogram-simulate进行组件测试、测试生命周期与事件
25
25 组件的性能优化
避免不必要的渲染(setData优化)、组件懒加载、虚拟列表
26
26 组件库的搭建(一)
组件库的项目结构、npm发布流程、版本管理
27
27 组件库的搭建(二)
组件文档的编写(使用JSDoc或Markdown)、示例页面的构建
28
28 组件库的搭建(三)
组件的按需加载与全局注册、Tree Shaking支持
29
29 第三方组件库的使用
Vant Weapp、iView Weapp等主流组件库的集成与定制
30
30 综合实战
从0到1搭建一个企业级小程序组件库,包含10+个通用组件