DEX470

课程介绍

今天我们来聊聊Salesforce中的“与组件通信”和“跨应用程序”这两个概念。听起来有点技术性，但其实很简单，我会用通俗易懂的方式来解释。 首先，，与组件通信，，顾名思义，就是让不同的组件之间能够“对话”。在Salesforce中，组件可以是页面上的按钮、表格、输入框等等。想象一下，你在一个页面上点击了一个按钮，然后页面上某个表格的数据就自动更新了。这就是组件之间的通信。它们通过某种方式传递信息，告诉对方“我做了什么”或者“我需要什么数据”。 在Salesforce中，常用的通信方式有几种： 1. ，事件（Events），：就像你在家里喊一声“开饭了”，全家人都能听到。组件A发出一个事件，组件B监听这个事件，然后做出响应。 2. ，属性（Attributes），：就像你给朋友递一张纸条，上面写着“帮我买杯咖啡”。组件A通过属性把数据传递给组件B。 3. ，方法（Methods），：就像你直接打电话给朋友，告诉他“帮我做件事”。组件A调用组件B的方法，直接让它执行某个操作。 接下来是，跨应用程序，。这个就更有意思了。想象一下，Salesforce就像一个大公司，里面有多个部门（应用程序）。每个部门都有自己的工作流程和数据。但有时候，部门之间需要合作，比如销售部门需要从客户服务部门获取一些客户反馈。这时候就需要“跨应用程序”通信。 在Salesforce中，跨应用程序通信通常通过以下几种方式实现： 1. ，API（应用程序接口），：就像公司内部的电话系统，部门A可以通过API调用部门B的数据或服务。 2. ，平台事件（Platform Events），：就像公司内部的广播系统，某个部门发布一个消息，其他部门都能接收到并做出响应。 3. ，外部服务（External Services），：有时候，公司还需要和外部供应商合作。Salesforce可以通过外部服务与其他系统（比如ERP系统）进行通信。 总结一下，，与组件通信，是让页面上的各个部分能够互相配合，而，跨应用程序，是让不同的Salesforce应用或外部系统能够协同工作。这两者都是为了让我们在Salesforce中构建更强大、更灵活的解决方案。 希望这个解释能让你对这两个概念有更清晰的理解！如果有任何问题，随时问我哦！

课程章节

本课程共有 6 个章节

• 1

  Bear-Tracking App with Lightning Web Components - 71

  第 71 页

  让我们一步一步来解决这个问题。首先，我们需要理解公园护林员的需求：他们希望在过滤熊的名单时，能够在地图上看到这些熊的位置。为了实现这个功能，我们需要做两件事：一是创建一个新的“熊地图”组件，二是更新现有的“熊列表”组件，让它能够与地图组件进行通信。 ### 第一步：更新熊列表组件 首先，我们需要修改“熊列表”组件，使其在用户选择或过滤熊时，能够发送一个事件。这个事件将包含被选中或过滤的熊的信息，特别是它们的位置数据。 1. ，添加事件发送功能，：在“熊列表”组件中，当用户选择一个熊或者应用一个过滤器时，我们需要触发一个自定义事件。这个事件将携带熊的位置信息（比如经纬度）。 2. ，定义事件，：我们可以使用Lightning Web Components的`CustomEvent`来定义一个事件。例如，我们可以创建一个名为`bearselected`的事件，当用户选择一个熊时，这个事件就会被触发，并且携带该熊的位置数据。 ### 第二步：创建熊地图组件 接下来，我们需要创建一个新的“熊地图”组件，这个组件将接收来自“熊列表”组件的事件，并在地图上显示相应的熊的位置。 1. ，设置地图，：我们可以使用任何支持的地图服务（如Google Maps或Mapbox）来显示地图。在组件中，我们需要初始化地图，并设置一个标记层来显示熊的位置。 2. ，监听事件，：在“熊地图”组件中，我们需要监听来自“熊列表”组件的`bearselected`事件。当接收到这个事件时，我们可以提取出熊的位置信息，并在地图上添加或更新标记。 ### 第三步：集成和测试 最后，我们需要将这两个组件集成到应用程序中，并进行测试以确保一切正常工作。 1. ，集成组件，：在应用程序的主页面或适当的布局中，同时包含“熊列表”和“熊地图”组件。 2. ，测试功能，：通过选择不同的熊或应用不同的过滤器，检查地图是否正确地更新显示熊的位置。 通过以上步骤，我们就可以实现公园护林员的需求，使他们在过滤熊名单时，能够在地图上实时看到这些熊的位置。这不仅提高了应用的实用性，也增强了用户体验。

  ▶ 播放视频 查看详情
• 2

  App Page - 72

  第 72 页

  让我们来聊聊如何在Salesforce的Lightning组件中进行通信，特别是当这些组件不在同一个DOM树中时。 首先，想象一下，你有一个页面，左边有一个“熊列表”组件，右边有一个“熊地图”组件。这两个组件是兄弟关系，但它们不在同一个DOM分支上。现在，你想要在“熊列表”中选择一只熊时，右边的“熊地图”能够显示这只熊的位置。这听起来是不是有点像你需要一种方式让这两个组件“聊天”？ 在这种情况下，我们可以使用一种叫做“发布-订阅”模式的通信方式。这种模式非常像一个公告板：一个组件（发布者）可以在公告板上发布一条消息（事件），而其他感兴趣的组件（订阅者）可以订阅这个公告板，以便在消息发布时接收并处理它。 在Salesforce中，我们有一个叫做`pubSub`的模块，它帮助我们实现这种发布-订阅模式。这个模块非常轻量级，整个代码不到100行，但它非常强大。它允许我们在同一个页面内的不同组件之间发送和接收事件。 举个例子，在我们的项目中，我们可以在“熊列表”组件中选择一只熊时，发布一个包含熊信息的事件。然后，“熊地图”组件会订阅这个事件，一旦事件被发布，它就能接收到熊的信息，并在地图上显示这只熊的位置。 这种方法的好处是，它使得组件之间的通信变得非常灵活和松散耦合。组件不需要知道彼此的具体实现，只需要知道如何发布和订阅事件即可。 最后，值得注意的是，虽然我们现在使用的是`pubSub`模块，但在未来，当Salesforce的Lightning消息服务变得更加成熟和可用时，我们可能会更新我们的通信模式，以利用更强大的功能。 希望这个解释能帮助你理解如何在Salesforce的Lightning组件中使用发布-订阅模式进行通信。如果你有任何问题，随时问我！

  ▶ 播放视频 查看详情
• 3

  Bear List Component – JavaScript File

  第 73 页

  今天我们来聊聊如何在Salesforce的Lightning页面中，让不同的组件之间能够互相通信。想象一下，你有一个页面，上面有几个兄弟组件，它们需要共享信息或者根据其他组件的动作来更新自己。这时候，我们就需要用到一些特殊的工具和技巧。 首先，我们需要导入两个重要的东西。第一个是一个适配器，它的作用是帮助我们获取当前页面的引用。你可以把它想象成一个钥匙，有了它，我们就能打开当前页面的大门，知道我们在哪个页面上工作。第二个是一个帮助函数，它允许我们在整个页面上触发事件。这个函数就像是我们的广播员，它可以把消息发送到页面的每一个角落。 接下来，我们会使用一个叫做“有线函数”的东西。这个函数非常聪明，它能够捕获到传入的熊列表数据。当数据变化时，它会自动触发一个我们自定义的事件，叫做“Bear ListUpdate”。这个事件就像是我们的信号灯，告诉其他组件：“嘿，数据有变化了，快来看看！” 为了让这个系统更加灵活，我们还会把搜索词作为一个动态参数传递给我们的有线搜索适配器。这样，每当搜索词发生变化时，我们的“有线函数”就会重新执行，加载新的搜索结果，并触发一个新的事件。这就像是我们的搜索引擎，每次输入新的关键词，它都会给我们新的结果。 最后，我们会使用之前导入的那个自定义的FireEvent函数。这个函数会在整个Lightning页面上触发我们的事件。无论你的组件在页面的哪个位置，只要它订阅了这个事件，它就能接收到更新。这就像是我们的广播系统，确保每个角落都能听到最新的消息。 所以，总结一下，通过这种方式，我们可以在Salesforce的Lightning页面中，让不同的组件之间高效地通信和更新。希望这个解释能帮助你更好地理解这个过程！

  ▶ 播放视频 查看详情
• 4

  Bear Map Component – JavaScript File

  第 74 页

  让我们来聊聊这两个组件——Bear Map组件和图表组件，以及它们是如何通过JavaScript文件中的生命周期挂钩函数来工作的。 首先，我们来看Bear Map组件。在这个组件中，我们使用了两个非常重要的生命周期挂钩函数：`linkedCallback`和`dislinkedCallback`。这两个函数就像是组件的“出生”和“死亡”信号。当组件被加载到页面上时，`linkedCallback`会自动被调用；而当组件从页面上移除时，`dislinkedCallback`则会被触发。 在这两个函数中，我们主要做了一件事：注册和注销一个叫做`bearListUpdate`的自定义事件。这个事件的作用是，当熊的记录列表有更新时，它会通知我们的组件。一旦我们收到了这个事件，就会调用一个名为`Inbox BearListUpdate`的函数。这个函数会根据当前过滤后的熊记录列表，生成一个新的地图标记列表，并将这个列表传递给地图的`Markers`属性。这样，地图上就会显示出最新的熊的位置信息。 接下来，我们再看图表组件。这个组件的JavaScript文件中也实现了同样的两个生命周期挂钩函数：`linkedCallback`和`dislinkedCallback`。它们的作用和Bear Map组件中的一样，都是在组件加载和卸载时自动调用。 在图表组件中，我们同样注册和注销了一个自定义事件，这次叫做`earearListUpdate`。当这个事件被触发时，我们会立即调用`Inbox BearListUpdate`函数。这个函数会根据当前过滤后的Bear记录列表，生成一个新的地图标记列表，并将这个列表传递给地图的`Markers`属性。这样，地图上就会显示出最新的Bear的位置信息。 总的来说，这两个组件都是通过监听自定义事件来动态更新地图上的标记。无论是Bear Map组件还是图表组件，它们都利用了生命周期挂钩函数来确保在适当的时候注册和注销事件，从而保持数据的实时更新。这样，用户就能在地图上看到最新的信息了。

  ▶ 播放视频 查看详情
• 5

  5. Communicate with Components Across an App

  第 75 页

  同学们，今天我们来聊聊如何在Salesforce的Lightning Web Components（LWC）中实现跨应用程序与组件之间的通信。这个练习的目标是在熊的详细信息页面上创建一个新的组件，叫做`bearMap`，这个组件会显示一个地图，地图上会展示和`bearList`组件中相同的熊的列表。 首先，我们需要理解一个关键概念：`pubSub`。这是一个用于在不同组件之间传递信息的机制，特别是在那些没有直接父子关系的组件之间。想象一下，`pubSub`就像是一个邮局，它帮助不同的组件发送和接收消息，即使它们不在同一个页面上。 接下来，按照以下步骤操作： 1. ，更新熊清单组件，：首先，我们需要确保`bearList`组件能够发送熊的信息。这通常涉及到在组件中添加一些代码，以便当用户选择一只熊时，相关信息可以被发送出去。 2. ，创建Bear Map组件，：然后，我们创建一个新的组件`bearMap`。这个组件的主要任务是接收来自`bearList`的信息，并在地图上显示这些熊的位置。 3. ，将Bear Map组件添加到App主页，：最后，我们需要将这个新创建的`bearMap`组件添加到应用程序的主页上，这样用户就可以在查看熊的列表的同时，也能看到它们在地图上的位置。 完成这些步骤后，别忘了将你的更改提交到本地存储库，并标记为“已完成步骤5：同级组件”。 记住，这个过程虽然看起来有点复杂，但只要你理解了`pubSub`的工作原理，就会变得简单多了。现在，让我们动手试试吧！

  ▶ 播放视频 查看详情
• 6

  Communication between Sibling Components - Fill in the Blanks

  第 76 页

  今天我们来聊聊Salesforce中的兄弟姐妹组件之间的通信。这个话题听起来有点复杂，但其实很简单，就像你和你的兄弟姐妹之间传递消息一样。 首先，想象一下，你有一个页面，上面有两个组件，就像两个兄弟姐妹一样。一个组件负责显示“当前页面参考”，另一个组件负责显示“火灾事件”和“熊列表更新”。这两个组件需要互相通信，才能确保页面上的信息是最新的。 那么，他们怎么通信呢？在Salesforce中，我们通常使用“事件”来实现这种通信。你可以把事件想象成一个小纸条，一个组件写好了信息，然后传递给另一个组件。 举个例子，假设“火灾事件”组件检测到了一个新的火灾事件，它就会创建一个事件，里面包含这个新事件的信息。然后，这个事件会被传递给“熊列表更新”组件，告诉它：“嘿，有新的火灾事件了，你需要更新一下熊的列表！” 这样，两个组件就通过事件实现了通信，页面上的信息也就同步更新了。 总结一下，兄弟姐妹组件之间的通信，其实就是通过事件来传递信息，确保页面上的各个部分都能及时更新。希望这个解释能帮助你更好地理解这个概念！

  ▶ 播放视频 查看详情