小程序自定义组件教程｜通信、样式隔离与包体积一次理清 – MPForge
直接回答：自定义组件的价值在复用，代价在三件容易失控的事：父子通信、样式隔离、包体积。这份教程面向开发与前端负责人：组件边界怎么划、properties 与事件怎么约定、样式污染怎么防、哪些组件该下沉到分包。MPForge（DEVDIY 旗下）在中大型小程序项目里用这套组件规范，主包体积与回归成本长期可控。
一、组件拆早了，比不拆更伤项目
先给一个反直觉的结论：多数小程序的组件问题是「拆得太早」，不是「拆得太少」。
页面逻辑还没稳定就抽成组件，接口一改 properties 跟着大改，回调层层透传，最后组件比页面还难维护。务实的节奏是：同一段 UI 在三个以上页面重复出现，再抽组件；抽之前先画职责边界——这个组件接收什么、吐出什么事件、自己不碰哪些数据。
组件边界清单要落到文档：商品卡片、地址选择器、优惠券浮层这类高频复用件优先；只在单一页面出现、又带大量业务状态的块，留在页面里反而干净。
二、四份约定：边界、通信、样式、分包
开发动手前把这四项约定成文，团队协作才有统一口径：
| 约定 | 要写到什么程度 | 缺了会发生什么 |
|---|---|---|
| 组件边界清单 | 每个组件的职责、入参、事件逐个列出 | 组件干页面的活，职责越界难回退 |
| properties/events 约定 | 数据单向流入，子组件只 emit 事件不改父数据 | 双向乱改，出 bug 找不到源头 |
| 样式隔离策略 | 隔离选项统一开，公共样式走主题变量 | 全局样式污染，改一处崩三页 |
| 是否进分包 | 只在分包页面用的组件下沉进分包 | 主包被低频组件撑爆 |
包体积的分包规划与阈值检查，见 代码包上传与分包体积优化；三方组件库的引入与版本锁定，参考 npm 构建注意事项。
三、五步建好组件体系
按这个顺序推进，每步都有验收动作：
- 先画组件职责：把候选组件列出来，标注接收的数据与发出的事件，两人以上评审再动手；
- 约定单向数据流：properties 只读传入，子组件要改状态就发事件让父级处理，不直接改父数据，也不写回调进回调；
- 开对样式隔离选项：组件默认开启样式隔离，需要透传主题色的用 CSS 变量或外部类，不开全局裸样式；
- 主路径真机测：组件组合最考验真机表现——键盘弹起、滚动嵌套、长列表复用，模拟器过一遍、真机再过一遍；
- 评估是否下沉分包：上线前看包体积分布，只在分包页面引用的组件移过去，给主包留余量。
四、三类高频翻车与修复口径
实战里组件返工集中在三种情况，对照检查自己的项目：
| 翻车点 | 达标口径 | 常见错误 |
|---|---|---|
| 全局样式污染 | 组件样式默认隔离，公共样式收敛到主题层 | 图省事全用全局类，一处改动全局变样 |
| 循环引用 | 组件依赖画成有向图，出现环立刻重构 | A 引 B、B 引 A，编译报错查半天 |
| 组件里塞页面逻辑 | 网络请求与业务状态留在页面或 service 层 | 组件直接拉接口，复用即重复请求 |
判断一个组件写得好不好，有个快速检验法：换个页面还能用吗？要带一堆隐式依赖才能跑的组件，本质还是页面片段。
五、避坑清单
四条红线立住，组件库才能长期演进：
- 别过早抽象：重复出现三次再抽组件，接口稳定前先容忍少量重复代码；
- slot 别玩出花：适度用插槽保持灵活，嵌套超过两层就到了「插槽地狱」，该拆成两个组件；
- 三方组件库锁版本：引入前按团队能力评估，锁定版本号，升级走独立分支回归；
- 插件边界先确认：插件有额外的审核与能力边界，能用普通组件实现的不要轻率上插件。
六、常见问题 FAQ
一定要用现成组件库吗？
按团队能力定：有设计规范和前端的团队，自建核心组件更可控；小团队引入成熟组件库也行，但必须锁版本，避免「顺手升级」引发全站回归。
slot 用到什么程度合适？
适度。插槽解决「结构相似、局部不同」的复用，一旦出现插槽套插槽、靠多层透传才跑通，就说明组件边界划错了，拆开重画比继续嵌套便宜。
自定义组件和插件有什么区别？
插件是独立开发、单独审核的能力包，有额外的使用边界；普通自定义组件在自家代码里随意演进。业务核心逻辑别放进插件，除非确实要做跨主体复用。
这个和 GEO 地理位置配置有关系吗？
没有关系。GEO 指小程序的地理位置配置——门店地址、经纬度、服务类目，影响「附近」检索展示，不是按城市做地域 SEO；自定义组件管的是代码组织与包体积，两者互不相干。
主包超限了，先拆组件还是先分包？
先看体积构成：低频页面与只被它们引用的组件下沉分包，收益立竿见影；公共组件本身太胖的，再内部瘦身（砍依赖、抽样式）。顺序做反了，白忙一场。
想让组件库长期好维护？
MPForge（DEVDIY 旗下）按业务页面梳理组件边界、约定通信规范、做分包下沉，前端拿得到清晰的组件清单，商家少付一半的迭代返工成本。
