学习目标
在本项目中，你将：
- 构建一组简单的 Lightning Web Components。
- 从单条记录检索并显示数据，再从记录列表检索。
- 把功能封装到子组件中。
- 用事件进行跨组件通信。
引言
在本项目中，你通过创建一个让公园护林员追踪熊的应用，来实践 Lightning Web Components 的基本概念。Lightning Web Components 是构建 Lightning 组件的新编程模型，使用最新的 Web 标准，可与原有的 Aura 编程模型互操作。你为 Ursus Park（一个虚构的国家公园）工作，创建的应用让护林员追踪在公园里游荡的熊。
开始之前
承担本项目前，先完成 Quick Start: Lightning Web Components 中的步骤，并确保已安装 VS Code 和 Salesforce CLI。
设置 Trailhead Playground
创建一个新的 Trailhead Playground（点击步骤末尾的下拉框选择 Create a Trailhead Playground），然后点击 Launch。如果 org 中有 Get Your Login Credentials 选项卡，通过它记录用户名、重置密码。如果没有，通过 App Launcher 的 Playground Starter 应用完成。
设置 Ursus Park 应用
设置应用：克隆 Ursus Park 应用 git 仓库（git clone https://github.com/trailheadapps/build-apps-with-lwc.git，仓库包含 Ursus Park 应用、带字段的 Bear 对象、记录和页面布局、检索熊记录的 Apex 代码和示例数据）→ 进入 build-apps-with-lwc 目录 → 用 Salesforce CLI 授权 Playground（别名 bear-tracking）→ 部署应用代码（sf project deploy start -d force-app/main/default）→ 分配 Ursus_Park_User 权限集 → 导入示例数据 → 打开 org，从 App Launcher 选择 Ursus Park，点击 Bears 选项卡确认有示例数据。
用静态 HTML 创建 Hello World LWC
创建第一个 Lightning Web Component：helloWebComponent。在 VS Code 中右键 lwc 文件夹创建组件，在 HTML 中用 lightning-card base 组件加静态文本 "Hello World!"；编辑 js-meta.xml 把 isExposed 设为 true 并添加 lightning__AppPage / RecordPage / HomePage 目标（允许把组件加到任意 Lightning 页面）；部署代码到 org。
把 Hello World 组件添加到页面
实现组件后把它加到页面查看：在 org 中从 App Launcher 选择 Ursus Park → 点击齿轮图标选择 Edit Page → 在 Custom Components 下把 helloWebComponent 拖到右列顶部 → Save → 首次修改标准主页需 Activate → 选 App Default 选项卡 → Assign to Apps → 勾选 Ursus Park → Next、Save → Back 返回主页查看组件。
使用数据绑定
给组件加数据，用单向数据绑定：把 "Hello World!" 改为 Hello {greeting}!，在 JS 中声明并初始化 greeting 属性（reactive，值变化时 HTML 模板自动刷新）。再加一个 lightning-input 输入框（value 绑定 greeting、onchange 触发 handleGreetingChange），handleGreetingChange 从事件中取值赋给 greeting——这样数据就变成可编辑的。
使用表达式
用表达式显示动态值：把卡片 title 改为 {capitalizedGreeting}（一个 getter 函数，返回大写的问候语），用 currentDate 类属性保存并显示当前日期。getter 函数称为表达式（expression），用于像属性一样显示值，但值可根据函数中的逻辑计算。与属性不同，表达式不是 reactive 的——它们在每次组件重新渲染时自动重新求值（无论值是否变化）。
处理单条记录
本单元用 @wire 适配器处理单条记录。
你将做什么
Ursus Park 的护林员需要你的帮助追踪在公园里游荡的熊。他们已在 Salesforce 中输入了一些信息，但需要你提供定制化的应用体验。
创建 Bear Location 组件
创建 bearLocation 组件：编辑 js-meta.xml 使其只能放在 Bear 记录页（targetConfig 指定 Bear__c 对象）。组件用 getRecord adapter 通过 Lightning Data Service 检索记录（无需写 Apex），用 getFieldValue 辅助函数获取字段值，recordId 属性用 @api 装饰自动接收当前记录 id，@wire 装饰器配置 loadBear 函数在组件加载或记录 id 变化时自动调用，最终用熊的名称和坐标构建地图标记。
把 Bear Location 组件添加到 Bear 记录页
在 org 中导航到 Bears 选项卡打开任意记录 → 点击 Setup（齿轮）选择 Edit Page → 在 Custom Components 下把 bearLocation 拖到右列顶部 → Save → Activate → Assign as App Default → 勾选 Ursus Park → Next、Next、Save → Back 返回记录页查看。现在能在地图上看到熊了。
创建 Bear Supervisor 组件
护林员被分配监督特定的熊，若某只熊行为鲁莽，员工需快速联系其监督者。创建 bearSupervisor 组件：用 if:true 指令在熊数据加载后条件渲染监督者，用 lightning-record-form 显示监督者（Contact）记录的紧凑视图；通过 schema import 导入 Bear__c.Supervisor__c 字段（而非硬编码字符串，保证引用完整性）；用 @wire 和 getRecord 检索熊记录，用 getFieldValue 获取 supervisor 字段值。
把 Bear Supervisor 组件添加到 Bear 记录页
在熊记录页点击 Setup 选择 Edit Page，把 bearSupervisor 组件拖到 bearLocation 组件下方，Save 和 Back 返回查看。这一单元展示了 LWC 如何用 @wire 适配器处理单条记录。
处理记录列表
本单元用 imperative Apex 和 wired Apex 处理记录列表，并在 Apex 调用中传递参数。
创建 Bear List 组件
护林员想直接从主页查看熊名录。创建 bearList 组件：用 for:each 和 for:item 指令遍历熊记录（每个迭代项用唯一的 key 标记）；导入 ursusResources 静态资源适配器构建熊剪影图片 URL；导入 getAllBears 适配器调用 BearController.getAllBears() Apex 方法；用 connectedCallback 在组件加载后调用 loadBears（命令式 Apex，通过 JS promise 保存数据或报告错误）；创建 bearList.css 添加卡片边框和图片高度样式。
把 Bear List 组件添加到应用主页
从 App Launcher 选择 Ursus Park → 点击 Setup 选择 Edit Page → 把 bearList 拖到页面左上 → Save、Back 返回主页查看熊名录。
使用 Wired Apex
改用 wired Apex 而非命令式 Apex 检索熊列表：把模板中的 if:true={bears} 改为 if:true={bears.data}、for:each={bears} 改为 for:each={bears.data}、错误改为 bears.error；JS 用 @wire(getAllBears) bears; 一行装饰器大幅简化代码——所有数据都通过这一行传来。
在 Apex 调用中传递参数
护林员想筛选熊列表快速查找。给 bearList 添加搜索框（lightning-input type="search"，onchange 触发 handleSearchTermChange），添加无结果提示（if:false={hasResults} 时显示）。关键点：用 searchTerm reactive 属性作为 wired Apex 调用 searchBears 的参数，handleSearchTermChange 中引入 300 毫秒延迟（debouncing 防抖），减少用户打字时的 Apex 调用次数——理想情况是用户输完后再调用一次 searchBears。
创建子组件并与之交互
本单元把 bear list 组件重构为更小的子组件，并探索父子组件通信。
创建 Bear Tile 组件
代码库已增长，现在把熊磁贴的代码移到新组件 bearTile。把 bearList.html 中熊磁贴的代码剪切到 bearTile.html，用 @api 装饰的 bear 属性把熊数据暴露给父组件，创建 bearTile.css（用 :host 和 CSS 变量加渐变背景）。然后 bearList.html 中引用 <c-bear-tile bear={bear}>（c 是默认命名空间，组件名转小写并用连字符分隔）。部署后熊列表有更精致的渐变样式。
与 Bear List 组件交互
护林员想快速查看并编辑熊记录而无需离开主页。让熊磁贴可点击并打开可编辑的熊记录表单：给 bearTile 加一个编辑按钮（lightning-button-icon，用 actions slot 放在卡片上），点击时 handleOpenRecordClick 创建并派发自定义 bearview 事件（携带熊记录 id）；bearList 用 onbearview={handleBearView} 捕获该事件，导入 navigation mixin 导航到熊记录页。这一单元展示了从父到子（@api 装饰器）和从子到父（自定义事件）的通信。
跨应用组件通信
本单元用 Lightning Message Service 让熊列表和熊地图跨组件通信。
更新 Bear List 组件
护林员最后一个需求：筛选熊列表时在地图上定位熊。更新 bearList：从 lightning/messageService 导入 publish 和 MessageContext，导入 BearListUpdate__c 消息通道；用 wired 函数捕获传入的熊列表数据，并发布携带熊记录列表的 BearListUpdate__c Lightning 消息；把 searchTerm 作为动态参数传给 searchBears，这样每次 searchTerm 变化时 loadBears 重新执行、发布带新搜索结果的消息。
创建 Bear Map 组件
创建 bearMap 组件：显示包含地图的卡片，地图展示 mapMarkers 数组的项。实现两个生命周期钩子 connectedCallback 和 disconnectedCallback（组件加载和卸载时自动调用），用它们订阅和退订 BearListUpdate__c Lightning 消息；收到消息时 handleBearListUpdate 把当前筛选的熊记录列表构建为地图标记、传给 mapMarkers 并显示在地图上。
把 Bear Map 组件添加到应用主页
从 App Launcher 选择 Ursus Park → 点击 Setup 选择 Edit Page → 把 bearMap 拖到页面右上 → Save、Back 返回主页，检查筛选熊列表时地图是否自动更新。
项目总结
大功告成！护林员现在能轻松追踪熊了。你在整个项目中用到了 Lightning Web Components 的所有核心概念：数据绑定、表达式、条件渲染、命令式和 wired Apex、组件组合、以及组件间事件。善用这些知识，构建你自己的灵活 LWC 应用吧！
文章来源：Trailhead - Build a Bear-Tracking App with Lightning Web Components