📱 小程序组件化开发
与代码复用实战
30 章 · 从入门到架构 ·
2025 体系课
📦
30
章节
🧩
30
个组件案例
⚡
200+
知识点
🎯
实战驱动
01
组件化基础
开篇
什么是组件化开发 · 组件化的优势 · 小程序组件系统架构
→
02
创建第一个组件
组件文件结构 · Component构造器 · 组件的生命周期
→
03
组件数据与属性
data定义 · properties声明 · observer监听器 · 数据流向
→
04
组件通信方式
父传子(properties) · 子传父(triggerEvent) · 兄弟通信 · 跨层级通信
→
05
插槽(slot)机制
单个插槽 · 多个插槽 · 作用域插槽 · 插槽的实战应用
→
06
组件样式隔离
样式隔离原理 · externalClasses · styleIsolation · 样式穿透技巧
→
07
组件复用策略
mixin混入 · behaviors定义 · behaviors组合与覆盖规则
→
08
抽象节点与泛型
抽象节点定义 · generic参数传递 · 泛型组件的应用场景
→
09
自定义组件事件
事件绑定 · 事件冒泡 · 自定义事件命名规范 · 事件对象详解
→
10
组件生命周期详解
created · attached · ready · moved · detached · error
→
11
页面与组件关系
页面引用组件 · 组件嵌套组件 · 组件树管理 · ref引用
→
12
组件库搭建
组件目录设计 · 组件命名规范 · 组件文档编写 · 组件测试
→
13
UI组件封装
按钮组件 · 输入框组件 · 弹窗组件 · 加载组件封装
→
14
业务组件封装
商品卡片组件 · 用户信息组件 · 列表组件 · 表单组件
→
15
高阶组件(HOC)
高阶组件概念 · 属性代理 · 反向继承 · 微信小程序实现
→
16
渲染函数与JSX
wxs使用 · 渲染函数模式 · JSX在小程序中的替代方案
→
17
组件性能优化
setState优化 · 避免不必要渲染 · 虚拟列表组件 · 懒加载组件
→
18
跨平台组件
Taro/uni-app组件规范 · 条件编译 · 平台差异处理 · 跨平台组件库
→
19
组件测试
单元测试框架 · 组件渲染测试 · 事件测试 · 快照测试
→
20
组件版本管理
语义化版本 · 组件发布流程 · 版本兼容 · 变更日志
→
21
组件设计模式
容器组件与展示组件 · 受控与非受控组件 · 复合组件
→
22
状态管理在组件中
组件内状态 · 全局状态 · Context机制 · 状态管理库集成
→
23
动画与交互组件
CSS动画组件 · JS动画组件 · 手势组件 · 过渡动画组件
→
24
数据可视化组件
图表组件封装 · Canvas组件 · WebGL组件 · 性能考量
→
25
表单组件进阶
表单验证 · 表单联动 · 动态表单 · 复杂表单组件设计
→
26
组件国际化
多语言方案 · 组件内国际化 · 运行时切换 · 工具链支持
→
27
无障碍访问
ARIA属性 · 键盘导航 · 屏幕阅读器支持 · 组件无障碍测试
→
28
组件安全
XSS防护 · 数据校验 · 权限控制 · 安全最佳实践
→
29
微前端与组件
微前端架构 · 组件共享 · 独立部署 · 运行时集成
→
30
组件化未来趋势
前沿
Web Components标准 · AI辅助组件生成 · 低代码组件 · 组件市场生态
→