Trailhead 官方 LWC trailmix 解读之 “熊出没” APP 搭建

LWC 免费推荐系列的最后一篇了：Build a Bear-Tracking App with Lightning Web Components
这是一个湿手项目，你可以跟着5个 Unit 开始搭建一个像样的 LWC 程序。准备好咖啡，我们开始。

Unit 1: Completed Create a Hello World Lightning Web Component

“熊出没”项目背景介绍：我们需要为野熊领（Ursus Park）的林地游骑兵（Ranger）创建一个追踪公园内熊大，熊二，熊一窝的 APP。
项目实现：项目需要用最新的 LWC 前端技术 + source driven 方式开发。所以我们需要的开发工具有： Salesforce CLI ，VS Code ， Github。
为了能平滑进入状态，在 Unit 1 中主要完成的是基本环境的搭建，包括从 github 下载代码到本地，创建 VS Code 项目，连接到开发 ORG，部署代码到开发 ORG，配置用户权限，导入初始数据，然后创建一个简单的 Hello 组件，发布组件到 ORG，在 Lightning App Builder 中添加 Hello 组件。
这里推荐下 LWC 的playground，这种简单的不需要连 ORG 操作数据的小练习，都可以在 playground 里做的，很方便。在本 Unit 整个以代码驱动的项目开发流程中，重度依赖 Salesforce CLI 工具：

sfdx force:auth:web:login -s -a bear-tracking
sfdx force:source:deploy -p force-app/main/default
sfdx force:user:permset:assign -n Ursus_Park_User
sfdx force:data:tree:import -p data/plan.json
sfdx force:org:open

Unit 2:Work with a Single Record

现在开始搭建“熊出没”的基本组件，针对对象的操作：bearLocation 和 bearSupervisor。bearLocation 组件主要是在地图上显示当前熊的位置。bearSupervisor 是显示关联到负责这只熊的护林员信息。
简单两个显示组件，主要练习通过 Lightning Data Service 直接从 ORG 中查询数据，然后取出需要的对象属性显示在页面上。
这里的画的重点有：

@wire 装饰器对于属性和方法的做用
getRecord 从后台查询数据的调用（from 'lightning/uiRecordApi'）
getFieldValue 从对象中取出指定属性
直接import 对象的属性名称

两个组件获取对象属性名称方法不同，一个硬编码，一个通过import 导入，当然是推荐用导入的方式，编译器可以做校验。还需要注意的是在这个 unit 里对于组件的 meta 定义文件做了限定，这两个组件限定在特定对象的特定页面，也就是意味着这两个组件只有在用 APP Builder 编辑熊对象的页面时才可选。

思考题：怎么能取一个对象的多个属性呢？

Unit 3:Work with Lists of Records

在这个 Unit 中，我们要获取一组熊的信息，然后显示在页面上。通过调用 apex contrroller 类获取后台列表数据。第一次用的是没有查询参数的 BearController.getAllBears 直接获取所有熊的数据显示到列表里。第二次是通过调用后台带查询条件的 BearController.searchBears 方法。
而前端字做查询时采用 debouncing 的方式，触发查询框实时输入条件的查询操作。听上去很多东西，所以需要做这个module时读懂每一行代码。这 Unit 中学到知识点有：

template 中循环语句 for:each for:item的使用
引入后台apex类获取数据 import getAllBears from '@salesforce/apex/BearController.getAllBears';
异步加载后台数据的方法

部署完自己的这个 Unit 项目，可以喝杯咖啡欣赏下，想想还差什么呢？

Unit 4:Create a Child Component and Interact with It

在 Unit 4中，开始演示在父子组件中事件和数据的传递。事件向上，属性向下，这也是单项绑定前端框架的标准通讯方式。在这个 Unit 中对之前的列表页做了重构：

重构列表页面，把列表页面中显示每个对象的块，单独生产一个新组件 bearTile。
为拆分出来的新组件 bearTile 添加点击事件，事件触发跳转到对应的熊的详情页面。

在拆分出的 bearTile 组件中需要将触发的事件冒泡向上传到父组件 bearList 中。在父组件中增加方法 handleBearView 处理子组件产生的点击事件，然后掉用 NavigationMixin.Navigate 方法执行跳转操作跳到熊的详情页面。
这里用的不少新的知识点：

用 loadStyle 加载静态资源
用 NavigationMixin mixin 扩展页面跳转方法
用 slot 做 markup 嵌入
在父组件中嵌入子组件

需要注意事件在这个例子中的传递路径：子组件发生的事件通过 dispatchEvent 把 bubbles 为 true 的事件冒泡到父组件。

Unit 5: Completed Communicate with Components Across an App

终于要完了，最后一个 Unit 了。咻~
最后的这个 Unit，展示在页面上平级的两个组件之间如何通讯。列表页里又新引入了地图组件 bearMap ，这个组件会把熊的当前位置标示在地图上。地图组件同带查询功能的列表用同样的数据源。这样我们只需要把查询结果通过事件注册的方式，把数据存储在页面的一个订阅里，然后地图组件监听此订阅，当有新数据到达时，用新数据更新地图上的熊大，熊二，熊一家的位置点。
为了实现页面的事件订阅功能：

引入代表页面引用的属性 CurrentPageReference
引入事件发布方法 import { fireEvent } from 'c/pubsub';
引入监听/取消监听方法 import { registerListener, unregisterAllListeners } from 'c/pubsub';

事件流程：在列表处理查询结果的方法里加入事件触发方法：fireEvent(this.pageRef, 'bearListUpdate', result.data); 把数据推送到页面的 bearListUpdate 订阅主题。在地图组件加载时添加对应主题的监听方法
registerListener('bearListUpdate', this.handleBearListUpdate, this); 当发现有新的查询结果时，会调用此订阅下注册的 handleBearListUpdate 方法接受事件数据刷新当前地图组件里各熊的位置信息。

恩就是这样，怎么样。明白了吗？不明白没关系，可以参加我马上就会推出的 LWC 现学现卖课程。欢迎关注。看懂了的，可以给我点各喜欢。

好了，春节 LWC 入门系列文章就到这里。猪年嘿嘿嘿。

LWC 系列文章

Salesforce 未来最有钱途的闪电（Lightning）开发组件 LWC (Lightning Web Component) 导读
Trailhead 官方 LWC trailmix 解读之 Quick Start: Lightning Web Components
Trailhead 官方 LWC trailmix 解读之 LWC basics
Trailhead 官方 LWC trailmix 解读之 Set Up Your Lightning Web Components Developer Tools
Trailhead 官方 LWC trailmix 解读之 Lightning Web Components for Aura Developers （纯净版）
本篇 Trailhead 官方 LWC trailmix 解读之 “熊出没” APP 搭建