多端渲染场景下，不同终端的渲染引擎、API能力和交互规则存在明显差异，构建统一的通用组件规范是降低跨端开发成本、保障组件表现一致性的核心手段。规范的制定需要覆盖组件的结构、样式、逻辑、交互等全维度，同时预留足够的扩展空间适配不同终端的特性。
一、核心设计原则
通用组件规范的设计需要遵循以下三个核心原则，确保规范的可落地性和通用性：
- 最小差异原则：尽量统一多端一致的属性和行为，仅对终端独有的特性做差异化处理，减少开发者的学习成本。
- 可扩展原则：预留自定义扩展入口，允许开发者针对特定终端补充专属逻辑，避免规范过于僵化无法适配特殊场景。
- 可校验原则：规范内容需要可量化、可校验，能够通过工具自动检测组件是否符合规范，降低人工审核成本。
二、组件结构规范
组件的结构需要统一属性和事件的定义方式，避免不同终端的属性命名冲突。以下是通用的结构约定：
2.1 属性定义规则
所有组件的属性需要遵循统一的命名规范，基础属性分为通用属性和终端专属属性两类：
| 属性类型 | 命名规则 | 示例 |
|---|---|---|
| 通用属性 | 小驼峰命名，无前缀 | title, isShow, listData |
| Web专属属性 | web前缀+小驼峰 | webClass, webStyle |
| 小程序专属属性 | mp前缀+小驼峰 | mpSlot, mpObservers |
2.2 事件定义规则
事件命名统一使用on+事件名的小驼峰格式，事件参数保持多端一致，以下是事件定义的示例代码：
// 通用按钮组件事件定义示例
export default {
props: {
// 点击事件，多端统一触发逻辑
onClick: {
type: Function,
default: () => {}
}
},
methods: {
handleTap() {
// 多端统一调用onClick回调，参数保持一致
this.onClick({
timestamp: Date.now(),
target: this // 多端统一返回组件实例
})
}
}
}
三、样式规范
样式需要适配不同终端的样式单位、选择器支持差异，制定统一的样式约束：
- 单位统一使用
rpx作为跨端适配单位，该单位可自动适配不同屏幕宽度，避免px单位在不同终端的缩放问题。 - 禁止使用终端专属的CSS选择器，如Web端的
:hover伪类、小程序端的page选择器等，交互状态通过类名切换实现。 - 组件根节点必须设置统一的类名前缀，如
com-，避免样式冲突，示例代码如下：
/* 通用按钮组件样式示例 */
.com-button {
display: flex;
align-items: center;
justify-content: center;
width: 200rpx;
height: 80rpx;
border-radius: 8rpx;
background-color: #1677ff;
color: #fff;
}
/* 禁用状态通过类名切换，多端通用 */
.com-button--disabled {
opacity: 0.5;
pointer-events: none;
}
四、逻辑适配规范
不同终端的API能力存在差异，逻辑层需要统一适配方式，避免直接在组件中写终端专属代码：
4.1 能力适配层
建立统一的能力适配层，封装多端差异的API，组件直接调用适配层接口，示例代码如下：
// 适配层：封装多端获取系统信息的接口
export const getSystemInfo = () => {
// #ifdef WEB
return {
platform: 'web',
screenWidth: window.innerWidth
}
// #endif
// #ifdef MP-WEIXIN
return wx.getSystemInfoSync()
// #endif
// #ifdef APP-PLUS
return plus.device
// #endif
}
4.2 组件逻辑编写约束
组件内部禁止直接调用终端专属API，所有差异逻辑通过适配层调用，同时生命周期需要统一使用跨端框架提供的通用生命周期，如created、mounted等，避免使用终端专属生命周期。
五、规范校验机制
为了保证组件符合规范，需要建立自动校验机制，通过ESLint插件和样式检测工具实现：
- ESLint规则校验属性命名、事件定义是否符合规范，禁止出现未适配的终端专属API调用。
- 样式检测工具校验单位使用、选择器是否符合要求，自动识别冲突的类名前缀。
- 建立组件发布前的校验流程，不符合规范的组件无法进入组件库，保障整体组件库的一致性。
规范的落地需要配套对应的文档和工具支持，建议同步维护组件规范说明文档和示例代码，降低开发者的使用门槛，同时定期根据新的终端特性迭代规范内容，保持规范的适用性。