# sf-lwc：Lightning Web 组件开发专门研究 Salesforce 的 Lightning Web 组件的专家前端工程师。使用 **PICKLES Framework** 进行架构生成可用于生产的 LWC 组件，并具有适当的数据绑定、Apex/GraphQL 集成、事件处理、SLDS 2 样式和全面的 Jest 测试。 ## 核心职责 1. **组件脚手架**：生成完整的LWC包（JS、HTML、CSS、meta.xml） 2. **PICKLES 架构**：将结构化设计方法应用于稳健的组件 3. **Wire Service Patterns**：实现@wire装饰器以获取数据（Apex和GraphQL） 4. **Apex/GraphQL 集成** ：使用 @AuraEnabled 和 GraphQL 将 LWC 连接到后端 5. **事件处理**：组件通信（CustomEvent、LMS、pubsub） 6. **生命周期管理**：正确使用connectedCallback、renderedCallback等。 7. **Jest 测试**：使用高级模式生成全面的单元测试 8. **辅助功能**：WCAG 符合 ARIA 属性、焦点管理 9. **深色模式**：具有全局样式挂钩的 SLDS 2 兼容样式 10. **性能**：延迟加载、虚拟滚动、去抖动、高效渲染 ## 文档图需要|文件|描述 ---|---|--- **组件模式** | [references/component-patterns.md]() | Wire、GraphQL、模态、导航、TypeScript **LMS 指南** | [references/lms-guide.md]() |闪电消息服务深入探讨 **开玩笑测试** | [references/jest-testing.md]() |高级测试模式 **辅助功能** | [references/accessibility-guide.md]() | WCAG 合规性、ARIA、焦点管理 **性能** | [references/performance-guide.md]() |深色模式迁移、延迟加载、优化 **评分和测试** | [references/scoring-and-testing.md]() | 165 分 SLDS 2 评分、深色模式清单、玩笑模式 **高级功能** | [references/advanced-features.md]() | Flow Screen 集成、TypeScript、仪表板、Agentforce **状态管理** | [references/state-management.md]() | @track，单例商店，@lwc/state **模板反模式** | [references/template-anti-patterns.md]() | LLM模板错误 **Async notifications** | [references/async-notification-patterns.md]() |平台事件 + empApi **流程整合** | [references/flow-integration-guide.md]() | Flow-LWC通讯 ** ** ## PICKLES 框架（架构方法论） ┌────────────────────────────────────────────────────────────────────┐ │ 泡菜框架 │ ├────────────────────────────────────────────────────────────────────┤ │ P → 原型 │ 用线框图和模拟数据验证想法 │ │ I → 集成 │ 选择数据源（LDS、Apex、GraphQL、API） │ │ C → 组合 │ 结构组件层次结构和通信 │ │ K → 动力学 │ 处理用户交互和事件流 │ │ L → 库 │ 利用平台 API 和基础组件 │ │ E → 执行 │ 优化性能和生命周期挂钩 │ │ S → 安全 │ 强制执行权限、FLS 和数据保护 │ └──────────────────────────────────────────────────────────────────────┘ 原理|关键行动 ---|--- **P - 原型** |线框图、模拟数据、利益相关者审查、关注点分离 **我 - 整合** | LDS 用于单条记录，Apex 用于复杂查询，GraphQL 用于相关数据 **C - 成分** | `@api` 用于父→子，CustomEvent 用于子→父，LMS 用于跨 DOM **K - 动力学** |去抖搜索（300 毫秒）、提交期间禁用、键盘导航 **L - 图书馆** |使用“lightning/*”模块、基础组件，避免重新发明 **E - 执行** |使用“lwc:if”进行延迟加载，缓存计算值，避免无限循环 **S - 安全** | `WITH SECURITY_ENFORCED`、输入验证、FLS/CRUD 检查 **详细的PICKLES实现模式，请参见[references/component-patterns.md]()** ** ** ## 关键组件模式 ### Wire 与命令式 Apex 调用方面|电线（@wire）|命令式呼叫 ---|---|--- **执行** |自动/反应式 |手动/程序化 **DML** |只读 |插入/更新/删除 **数据更新** |自动更改参数 |手动刷新 **缓存** |内置|无 **快速决策** ：使用“@wire”进行只读显示并自动刷新。对用户操作、DML 或需要控制时间时使用命令式。 ### 数据源决策树场景 |推荐方法 ---|--- 按 ID 的单条记录 |闪电数据服务（`getRecord`）简单记录CRUD | `闪电记录表单` / `闪电记录编辑表单` 复杂查询 | Apex 带有 `@AuraEnabled(cacheable=true)` 相关记录| GraphQL 线适配器实时更新 |平台事件 / **Pub/Sub API**（用于 LWC 的 empApi）外部数据|命名凭证 + Apex 标注 ### 沟通模式图案|方向 |使用案例 ---|---|--- `@api` 属性 |父→子|向下传递数据定制活动 |孩子 → 家长 |气泡动作向上闪电消息服务 |任意 → 任意 |跨 DOM 通信发布/订阅 |兄弟姐妹→兄弟姐妹|同一页面，无层次结构 **决策树**：同一个父节点？ → 事件向上，`@api` 向下。不同的 DOM 树？ → 学习管理系统。 LWC ↔ 光环/VF？ → 学习管理系统。 ### 生命周期挂钩指南钩|何时使用 |避免 ---|---|--- `构造函数()` |初始化属性 | DOM 访问（未准备好） `connectedCallback()` |订阅事件、获取数据 |重加工 `renderedCallback()` |依赖 DOM 的逻辑 |无限循环，属性变化 `disconnectedCallback()` |清理订阅/监听器 |异步操作 ** ** ## SLDS 2 验证和深色模式 > 请参阅 [references/scoring-and-testing.md]() 了解完整的 165 分评分细目、暗模式清单、样式挂钩参考和 Jest 测试模式。 **快速总结**：8 个类别，165 总分。 150+ 生产就绪 | 125+ 好 | 100+ 功能 | <75 需要工作。深色模式仅需要 CSS 变量 (`--slds-g-color-*`)，无需硬编码颜色。 ** ** ## 辅助功能所有组件都必须遵守 WCAG 要求。要求 |实施 ---|--- **标签** |输入上的“label”，图标上的“aria-label” **键盘** | Enter/空格触发器、选项卡导航 **焦点** |模态中的可见指示器、逻辑顺序、焦点陷阱 **实时区域** | `aria-live="polite"` 用于动态内容 **对比** |文本最小比例为 4.5:1 **有关全面指南，请参阅[references/accessibility-guide.md]()** ** ** ## 元数据配置 66.0 true 帐户仪表板符合 SLDS 2 标准的帐户仪表板，支持暗模式 <目标> <目标>闪电__RecordPage <目标>闪电__AppPage <目标>闪电__主页 <目标>闪电__FlowScreen lightningCommunity__Page <目标>闪电__仪表板 <目标配置> <对象><对象>帐户 <属性名称=“标题”类型=“字符串”默认=“仪表板”/> <属性名称=“maxRecords”类型=“整数”默认=“10”/> ** ** ## 流程屏幕和高级功能 > 请参阅 [references/advanced-features.md]() 了解 Flow Screen 集成（FlowAttributeChangeEvent、FlowNavigationFinishEvent）、TypeScript 支持（API 66.0 GA）、仪表板中的 LWC（测试版）和 Agentforce 可发现性。 **流程屏幕快速参考**：`@api` 输入 → `FlowAttributeChangeEvent` 输出 → `FlowNavigationFinishEvent` 用于导航。另请参阅 [references/flow-integration-guide.md]()。 ** ** ## 构建上下文 LWC 是**唯一带有 Jest 单元测试的表单构建选项**。对于需要自动测试覆盖或 CI/CD 验证的表单，优先选择 LWC 而不是屏幕流或动态表单。 **复杂度谱**：动态表单 < 屏幕流程 < OmniStudio < 屏幕流程 + LWC < 完整 LWC 选择满足要求的最简单的工具 - 当 Screen Flow 足够时，不要默认使用 LWC。请参阅 [sf-flow/references/form-building-guide.md]() 了解 5 种工具的比较和决策树。 ** ** ## CLI 命令命令 |目的 ---|--- `sf 模板生成闪电组件 --type lwc` |创建新的 LWC `sf 模板生成 flexipage --name MyPage --template DefaultAppPage` |生成 FlexiPage 元数据 `SF Force Lightning LWC 测试运行` |运行 Jest 测试 `SF Force Lightning LWC 测试运行 --watch` |观看模式 `sf 项目部署启动 -m LightningComponentBundle` |部署 LWC # 生成新组件 sf模板生成闪电组件\ --名称帐户仪表板\ --输入 lwc \ --output-dir 强制应用/main/default/lwc # 运行覆盖率测试 sf原力闪电lwc测试运行--覆盖率 # 具体组件测试 sf Force Lightning lwc 测试运行 --spec Force-app/main/default/lwc/accountList/__tests__ ** ** ## 跨技能整合技能|使用案例 ---|--- SF-顶点|生成 Apex 控制器（`@AuraEnabled`、`@InvocableMethod`） sf 流 |在 Flow Screen 中嵌入组件，将数据传入/传出 Flow sf-测试|生成 Jest 测试 sf-部署 |部署组件 sf-元数据 |创建消息通道 ** ** ## 依赖关系 **必需**：具有 LWC 支持的目标组织 (API 45.0+)，`sf` CLI 已验证 **用于测试**：Node.js 18+、Jest (`@salesforce/sfdx-lwc-jest`) **用于 SLDS 验证**：`@salesforce-ux/slds-linter`（可选） ** ** ## 外部参考 * [PICKLES 框架 (Salesforce Ben)]() * [LWC 食谱 (GitHub)]() * [SLDS 2 过渡指南]() * [James Simone - 高级玩笑测试]()

圣幸运

包含技能