DEX602

Unit 2 Introducing Lightning Web Components

首页/ 认证培训/ DEX602/ Unit 2 Introducing Lightning Web Components

课程介绍

今天我们来聊聊Salesforce中的Lightning Web组件，简称LWC。你可以把它想象成是构建Salesforce应用的小积木。每个LWC都是一个独立的、可重用的代码块，它们可以帮助你创建更加动态和响应式的用户界面。 LWC是基于现代Web标准构建的，比如HTML、JavaScript和CSS。这意味着它们不仅轻量级，而且性能非常好。你可以用它们来创建从简单的按钮到复杂的数据表等各种UI元素。 使用LWC的好处是，它们可以很容易地集成到Salesforce的Lightning Experience中，而且由于它们是基于标准的Web技术，所以学习曲线相对平缓。此外，Salesforce提供了丰富的组件库，你可以直接使用这些组件，或者根据需要自定义它们。 在接下来的课程中，我们会更深入地探讨如何创建和使用这些组件，以及如何将它们集成到你的Salesforce应用中。希望你能对LWC有一个初步的了解，并期待在接下来的学习中一起探索更多有趣的内容！

课程章节

本课程共有 155 个章节

  • 1

    Unit 2 Introducing Lightning Web Components

    第 51 页

    今天我们来聊聊Salesforce中的Lightning Web组件，简称LWC。你可以把它想象成是构建Salesforce应用的小积木。每个LWC都是一个独立的、可重用的代码块，它们可以帮助你创建更加动态和响应式的用户界面。 LWC是基于现代Web标准构建的，比如HTML、JavaScript和CSS。这意味着它们不仅轻量级，而且性能非常好。你可以用它们来创建从简单的按钮到复杂的数据表等各种UI元素。 使用LWC的好处是，它们可以很容易地集成到Salesforce的Lightning Experience中，而且由于它们是基于标准的Web技术，所以学习曲线相对平缓。此外，Salesforce提供了丰富的组件库，你可以直接使用这些组件，或者根据需要自定义它们。 在接下来的课程中，我们会更深入地探讨如何创建和使用这些组件，以及如何将它们集成到你的Salesforce应用中。希望你能对LWC有一个初步的了解，并期待在接下来的学习中一起探索更多有趣的内容！

    查看详情
  • 2

    Unit 2: Introducing Lightning Web Components

    第 52 页

    同学们，今天我们来聊聊Salesforce的Lightning Web组件，简称LWC。这个技术是Salesforce用来构建现代、高效的用户界面的。听起来很高大上，但其实我们可以一步步来理解。 首先，Lightning Web组件模型是基于现代Web标准构建的，这意味着它使用HTML、JavaScript和CSS这些我们可能已经熟悉的技术。创建这些组件其实很简单，你只需要定义一些HTML模板，加上一些JavaScript来控制逻辑，再用CSS来美化一下，一个组件就诞生了。 接下来，我们会学习如何给这些组件添加样式，让它们看起来更符合我们的需求。然后，我们会定义组件的属性，这些属性可以让我们在组件之间传递数据，非常灵活。 处理DOM事件也是很重要的一部分。DOM事件就是用户与页面交互时发生的事件，比如点击按钮、输入文本等。我们会学习如何在组件中捕获这些事件，并做出相应的处理。 当然，我们也会学习如何卸载不再需要的组件，这样可以优化我们的应用性能。使用Salesforce数据是LWC的一个强大功能，我们可以直接从Salesforce中读取数据，并在组件中展示出来。 最后，我们会学习如何使用基本的Lightning组件，以及如何在组件之间提出和处理事件。这让我们可以在不同的组件之间进行通信，构建出更加动态和交互性强的应用。 完成这个单元后，你将能够创建风格化的组件，维护组件的状态，从Salesforce读取数据，并与其他组件进行通信。这些都是构建现代Salesforce应用的基础技能。希望你们能跟上节奏，享受学习的过程！

    查看详情
  • 3

    Evolution of the Web Stack

    第 53 页

    让我们来聊聊Web Stack和Aura组件的演变。想象一下，2014年的时候，Salesforce推出了一个叫做Aura的组件框架。那时候，Web开发的标准还不多，所以Aura框架自己定义了一套组件模型和模块化编程的方法。这就像是在一个没有规则的游戏里，Aura自己制定了一套规则来玩。 但是，时间快进到2019年，Web开发的标准已经丰富了很多。很多以前需要Aura框架提供的功能，现在浏览器自己就能支持了。这就像是游戏规则已经完善了，大家都可以按照统一的标准来玩，不再需要Aura自己制定的那套规则了。 所以，现在你不需要那些专有的组件模型、语言扩展或者模块了。浏览器已经能够很好地处理这些需求，这让开发变得更加简单和统一。这就是技术进步的美丽之处，它让我们的生活和工作变得更加高效和便捷。

    查看详情
  • 4

    What are Lightning Web Components?

    第 54 页

    让我们来聊聊Lightning Web Components，简称LWC。你可以把它想象成是Salesforce提供的一个工具箱，专门用来构建现代、高效的用户界面。这个工具箱非常强大，因为它不仅包含了构建界面所需的基本工具，还有一些高级功能，让你的开发工作更加轻松。 首先，LWC的核心是一组叫做Base Lightning Components的UI组件。这些组件就像是预先设计好的积木块，总共有70多种，你可以直接拿来用，快速搭建出漂亮的界面。这些组件都是基于现代Web标准构建的，所以它们不仅好用，还能确保你的应用在各种设备上都能流畅运行。 接下来，LWC还提供了一个叫做Lightning Data Service的功能。这个功能非常贴心，它让你可以轻松地访问Salesforce的数据和元数据。你不需要写复杂的代码来获取数据，只需要简单地声明你需要什么数据，LWC就会自动帮你处理数据的获取、缓存和同步。这样一来，你的应用不仅响应更快，还能减少对服务器的请求，提升整体性能。 最后，LWC还依赖于一个叫做用户界面API的底层服务。这个API就像是LWC的“大脑”，它让Base Lightning Components和Lightning Data Service能够“感知”Salesforce的元数据。这意味着，你的组件可以自动适应Salesforce的环境，知道哪些数据是可用的，哪些功能是可以使用的。这样一来，你就不需要手动去调整组件，开发效率自然就提高了。 总结一下，Lightning Web Components是一个强大的工具集，它通过提供现成的UI组件、简化数据访问和利用底层API，帮助你快速构建高效、现代化的Salesforce应用。无论你是新手还是经验丰富的开发者，LWC都能让你的开发工作变得更加轻松愉快。

    查看详情
  • 5

    Aura and Lightning Web Components Interoperability

    第 55 页

    今天我们来聊聊Salesforce中的Aura组件和Lightning Web组件（简称LWC）之间的互操作性。这个话题听起来可能有点技术性，但其实很简单，我会用通俗易懂的方式来解释。 首先，Aura组件和LWC是Salesforce中两种不同的技术，用来构建用户界面。Aura是Salesforce早期推出的框架，而LWC是后来推出的，基于现代Web标准的新框架。虽然它们的技术基础不同，但它们可以很好地共存和互操作。 想象一下，Aura组件和LWC就像是两种不同的语言，但它们可以在同一个“房间”里交流。它们共享相同的高级服务，比如Lightning数据服务和用户界面API。这些服务就像是它们之间的“翻译”，帮助它们理解彼此。 你可以在同一个页面上同时使用Aura组件和LWC。比如，你可以在一个页面上放一个Aura组件，旁边再放一个LWC，它们可以一起工作，互不干扰。而且，Aura组件甚至可以包含LWC，就像是在Aura的“房子”里放了一个LWC的“家具”。 另外，Aura组件和LWC都使用相同的Base Lightning组件。这些基础组件就像是“标准零件”，无论是Aura还是LWC都可以使用它们。而且，这些基础组件已经用LWC重新实现了，所以它们更现代化，性能也更好。 总结一下，Aura组件和LWC虽然技术不同，但它们可以共存、互操作，并且共享相同的服务和基础组件。这就像是两种不同的语言在同一个团队中合作，最终目标都是为了构建更好的用户体验。 希望这个解释能帮助你理解Aura和LWC的互操作性。如果有任何问题，随时问我！

    查看详情
  • 6

    Aura Components vs. Lightning Web Components

    第 56 页

    今天我们来聊聊Salesforce中的Aura Components和Lightning Web Components（简称LWC）。这两个都是用来构建用户界面的技术，但它们背后的代码结构和工作方式有很大的不同。 首先，Aura Components是Salesforce早期推出的一种组件框架。它使用了一种叫做Aura的标记语言和JavaScript来构建组件。Aura Components的代码结构相对复杂一些，因为它需要处理很多底层的细节，比如事件处理、数据绑定等。虽然功能强大，但编写和维护Aura Components的代码可能会比较繁琐。 接下来是Lightning Web Components，这是Salesforce在2019年推出的新一代组件框架。LWC基于现代的Web标准，比如ES6（JavaScript的最新版本）和Web Components。它的代码结构更加简洁和模块化，开发起来也更加高效。LWC利用了浏览器原生的能力，性能上也有很大的提升。 虽然Aura Components和LWC在代码层面有很大的不同，但对于最终用户来说，他们看到的界面和交互体验是几乎一样的。用户不会察觉到这些组件是用Aura还是LWC构建的。 总结一下，Aura Components和LWC都是用来构建Salesforce用户界面的技术，但LWC更现代、更高效。如果你是新项目，建议优先考虑使用LWC，因为它代表了未来的发展方向。如果你已经有Aura Components的项目，也可以逐步迁移到LWC，享受更好的开发体验和性能。 希望这个解释对你有帮助！如果有更多问题，随时问我哦。

    查看详情
  • 7

    Aura Components vs. Lightning Web Components - Markup

    第 57 页

    今天我们来聊聊Salesforce中的Aura组件和Lightning Web组件（LWC）的标记部分。这两种技术都是用来构建Salesforce Lightning界面的，但它们在结构和用法上有一些不同。 首先，我们来看一下LWC的标记部分。在LWC中，我们使用HTML模板来定义组件的结构。比如，你可能会看到一个``标签，里面包含了组件的布局和元素。例如，一个简单的LWC组件可能包含一个``，里面有一个按钮和一个输入框。按钮的点击事件和输入框的值变化都会通过JavaScript函数来处理。这种方式使得视图（HTML）和逻辑（JavaScript）是分开的，这样代码更清晰，也更容易维护。 接下来，我们看看Aura组件。Aura组件的标记部分看起来和LWC有些相似，但它包含的信息更多。比如，在Aura组件中，你不仅定义了组件的布局，还直接在标记中声明了变量（如``）和配置信息（如`implements`关键字）。这意味着在Aura组件中，标记不仅仅是用来定义视图的，它还承担了一部分逻辑和配置的角色。 总结一下，LWC和Aura组件在标记上的主要区别在于信息的封装和分离。LWC更倾向于将视图和逻辑分离，而Aura组件则在标记中包含了更多的逻辑和配置信息。这种差异使得LWC在代码组织和维护上可能更有优势，尤其是在构建大型和复杂的应用时。 希望这个解释能帮助你更好地理解这两种组件的区别和各自的优势。如果你有任何问题，随时提问哦！

    查看详情
  • 8

    Aura Components vs. Lightning Web Components - Controllers

    第 58 页

    今天我们来聊聊Salesforce中的Aura Components和Lightning Web Components（LWC）的控制器部分。我会尽量用简单易懂的方式来解释，这样你们听起来也会觉得轻松。 首先，我们来看一下LWC的控制器。在LWC中，控制器是一个ES6模块，这意味着它使用了现代JavaScript的标准。在这个模块中，我们可以直接声明变量。比如，你看到的这段代码： ```javascript import { LightningElement, track } from 'lwc'; export default class HelloBinding extends LightningElement { greeting = '世界'; change(event) { this.greeting = event.target.value; } count() { alert(this.greeting.length + ' letters'); } } ``` 这里，`greeting` 是一个变量，它被初始化为“世界”。`change` 方法用于更新这个变量的值，而 `count` 方法则用来显示这个字符串的长度。你可以看到，这些变量和方法都是直接在类中声明的，非常直观。 接下来，我们看看Aura Components的控制器。Aura的控制器写法就有点不同了。它不会直接在控制器中声明变量，而是通过组件标记来声明和获取变量。比如这段代码： ```javascript ({ count: function(component, event, helper) { let greeting = component.get("v.greeting"); alert(greeting.length + " letters"); } }) ``` 在这里，`greeting` 变量是在组件的标记中声明的，控制器通过 `component.get("v.greeting")` 来获取这个变量的值。这种方式虽然稍微复杂一点，但它提供了一种在不同组件之间共享数据的机制。 总结一下，LWC的控制器更现代，直接在类中声明变量和方法，而Aura的控制器则依赖于组件标记来管理变量。两者各有优势，选择哪一种取决于你的具体需求和项目的架构。 希望这个解释能帮助你们更好地理解Aura和LWC的控制器部分。如果有任何问题，随时提问哦！

    查看详情
  • 9

    Lightning Web Components Playground

    第 59 页

    今天我们来聊聊如何在Salesforce的Lightning Web组件（LWC）中创建一个简单的“Hello World”组件。我们将使用Salesforce提供的交互式代码编辑器，也就是我们常说的“游乐场”。 首先，打开游乐场，你会看到界面分为三个主要部分。左边是项目面板（1），这里你可以设置你的应用程序的详细信息，比如标题、命名空间和文件结构。中间是代码编辑区（2），你可以在这里编写和编辑你的JavaScript、HTML和CSS代码。右边是输出面板（3），在这里你可以实时预览你的代码效果，并查看编译后的代码。 在开始之前，我们先来了解一下游乐场的一些限制。由于游乐场没有连接到Salesforce组织，所以它不支持需要从Salesforce获取数据的功能。比如，你不能使用Wire服务、Apex方法，或者需要记录ID的组件，如记录表单、记录查看表单和记录编辑表单。此外，一些依赖内部JavaScript库的组件，如格式化地址、输入地址等，也无法在游乐场中使用。 现在，让我们开始创建一个简单的“Hello World”组件。首先，在项目面板中设置好你的应用程序标题和命名空间。然后，在代码编辑区中，编写你的HTML和JavaScript代码。HTML部分可以简单地写一个`<h1>`标签，内容为“Hello World”。JavaScript部分可以留空，或者你可以添加一些简单的逻辑来增强你的组件。 编写完成后，点击运行按钮，你可以在输出面板中看到“Hello World”显示出来。如果你对结果满意，可以保存你的应用程序，并与他人分享。 这就是如何在Salesforce的Lightning Web组件中创建一个简单的“Hello World”组件。希望这个过程对你来说既简单又有趣！</h1>

    查看详情
  • 10

    Lightning Mini Playground

    第 60 页

    让我们来聊聊这个Lightning Mini Playground。想象一下，你有一个小小的实验室，可以在这里快速测试和查看你的代码效果。这个迷你游乐场就是这样一个地方。当你点击“在Playground中打开”按钮时，它会带你进入一个更完整的Lightning Playground环境，并且会带上你当前正在查看的示例的副本。 这里有个小秘密：虽然看起来很简单，但你其实可以在这个迷你游乐场里直接编辑HTML和JavaScript代码，就像你在常规的Playground里做的那样。你可以修改代码，然后立即看到结果的变化。这对于快速测试和调整代码片段非常有用，尤其是在你想要快速验证某个想法或修复一个小问题时。 所以，下次当你使用Lightning Mini Playground时，记得你可以随时动手修改代码，看看效果如何。这是一个非常方便的工具，可以帮助你更高效地学习和实验。

    查看详情
  • 11

    Learn More About Lightning Web Components

    第 61 页

    同学们，今天我们来聊聊Salesforce的Lightning Web组件，也就是我们常说的LWC。这是一个非常强大的工具，可以帮助我们构建高效、响应迅速的用户界面。 首先，想象一下，你有一个宝库，里面装满了各种现成的Web组件示例。这些示例就像是烹饪书中的食谱，每个食谱都教你如何用不超过30行的代码来完成一个特定的任务。这听起来是不是很神奇？你只需要查看源链接，就能直接跳转到GitHub，看到这些代码是如何实现的。 不过，这里有个小提示：如果今天不是我们课程的最后一天，我可能不会现场演示这些“食谱”。但别担心，你们可以自己动手尝试，这将是学习的最佳方式。 除了这些“食谱”，我们还有其他一些非常有趣的示例应用程序，比如电动自行车应用程序。这个应用程序不仅展示了如何在Salesforce中使用LWC，还包括了如何在社区（Community）中应用这些组件。还有一个叫做Dreamhouse的示例，它不仅有LWC版本，还有Aura版本，这样你就可以比较两种技术的不同之处了。 总之，通过这些示例，你们可以更深入地理解LWC的强大功能，以及如何在实际项目中应用它们。希望这些信息对你们有所帮助，让我们一起探索Salesforce的无限可能吧！

    查看详情
  • 12

    Reviewing OOTB Lightning Web Components

    第 62 页

    今天我们来聊聊Salesforce中的Lightning Web组件（LWC）和Aura组件的一些基础知识。 首先，Salesforce提供了一个公共的Lightning Web组件参考网站，网址是www.example.com。这个网站列出了所有标准的、开箱即用的LWC组件，你可以在这里找到它们的使用方法和示例代码。 但是，除了这个公共的参考网站，你还可以访问一个专门为你的Salesforce组织定制的组件引用页面。这个页面的网址通常是这样的：https://www.example.com。这个私有组件引用页面会列出你组织中所有的自定义组件，包括那些你自己或者你的团队创建的组件。 这里有一个重要的区别：从2020年春季开始，自定义的LWC组件虽然会被列出来，但它们可能没有详细的文档。而自定义的Aura组件则不同，它们可以有自己的自定义文档。 所以，当你使用这些组件时，一定要区分清楚哪些是Aura组件，哪些是LWC组件。因为它们在文档、使用方法和功能上可能有所不同。 希望这些信息对你有帮助！如果你有任何问题，随时问我。

    查看详情
  • 13

    10 minutes

    第 63 页

    同学们，今天我们来做一个简单的练习，叫做“审查可用组件”。这个练习的目的是让我们熟悉一下Salesforce提供的开箱即用的Lightning Web组件，也就是我们常说的OOTB（Out of the Box）组件。 首先，我们要知道，Lightning Web Components（LWC）是Salesforce提供的一种现代化的前端开发框架，它允许我们构建快速、响应式的用户界面。Salesforce已经为我们准备了很多现成的组件，我们可以直接使用，而不需要从头开始编写代码。 在这个练习中，我们特别要关注的是`lightning-button`组件。这个组件是一个非常基础的按钮组件，但它非常强大，可以用来触发各种用户交互。 接下来，我们要做的是访问Salesforce的文档库。文档库是一个宝藏，里面包含了所有关于Lightning Web Components的详细信息和示例代码。我们可以在文档库中找到`lightning-button`组件的详细说明，包括它的属性、方法和事件。 通过查看文档，我们可以了解到`lightning-button`组件有哪些可用的属性，比如`label`（按钮上显示的文本）、`variant`（按钮的样式，比如是主要按钮还是次要按钮）等等。我们还可以看到如何使用这个组件，以及它支持哪些事件，比如点击事件。 这个练习虽然简单，但它能帮助我们快速上手Salesforce的Lightning Web Components，了解如何使用这些现成的组件来构建我们的应用。所以，大家一定要认真完成这个练习，为后续的学习打下坚实的基础。 好了，这就是我们今天的内容，希望大家能够通过这个练习，对Lightning Web Components有一个初步的了解。我们下次再见！

    查看详情
  • 14

    Unit 2: Introducing Lightning Web Components - 64

    第 64 页

    同学们，今天我们来聊聊Salesforce的Lightning Web组件，简称LWC。这个技术是Salesforce用来构建现代、响应式用户界面的强大工具。 首先，我们来看看什么是Lightning Web组件模型。简单来说，它就是一个基于现代Web标准的框架，允许开发者使用HTML、JavaScript和CSS来创建组件。这些组件可以在Salesforce的Lightning平台上运行，提供丰富的用户体验。 接下来，我们会学习如何创建Lightning Web组件。这个过程其实很简单，你只需要使用Salesforce提供的工具和模板，就可以快速搭建起一个组件的基本结构。 然后，我们会讨论如何给这些组件添加样式，也就是造型组件。通过CSS，我们可以让组件看起来更美观，更符合我们的品牌形象。 定义组件属性是下一个重点。属性就像是组件的“设置”，我们可以通过属性来控制组件的行为和显示内容。 处理事件也是非常重要的一部分。在Web开发中，事件是用户与页面交互的桥梁。我们会学习如何在组件中监听和处理这些事件，比如点击按钮或者输入数据。 当然，我们也会学习如何卸载不再需要的Lightning Web组件，以保持应用的性能和整洁。 使用Salesforce数据是LWC的一个强大功能。我们可以直接从Salesforce中获取数据，并在组件中展示出来，这对于构建数据驱动的应用非常有用。 最后，我们会探讨如何使用基本的Lightning组件，以及如何在用户之间进行高级通信。这包括如何提出事件，以及如何处理这些事件，使得组件之间可以相互通信和协作。 在本单元的最后，我们将动手实践，创建一个Lightning App构建器页面，并且构建两个Lightning Web组件。这将是一个很好的机会，让我们把学到的知识应用到实际中去。 好了，这就是我们今天要学习的内容。希望大家能够跟上节奏，一起探索Lightning Web组件的奇妙世界。如果有任何问题，随时提问，我会在这里帮助大家。

    查看详情
  • 15

    Defining a Lightning Web Component in VS Code

    第 65 页

    让我们来聊聊在VS Code中如何定义Lightning Web组件（LWC）。首先，VS Code是一个非常强大的代码编辑器，而Salesforce为它提供了一些扩展，这些扩展让VS Code变得“上下文感知”。这是什么意思呢？简单来说，就是VS Code能够理解你正在工作的Salesforce项目，并且根据你当前的工作内容提供相应的功能。 比如说，当你在VS Code中右键点击一个LWC文件夹时，你会看到一个选项叫做“创建Lightning Web组件”。点击这个选项，VS Code就会帮你生成一个新的LWC组件的基本结构，包括HTML、JavaScript和CSS文件。这样，你就可以直接开始编写你的组件代码了，而不需要手动创建这些文件。 同样地，如果你右键点击一个Apex类的文件夹，你会看到一个选项叫做“创建Apex类”。点击这个选项，VS Code会帮你生成一个新的Apex类的基本结构，这样你就可以直接开始编写你的Apex代码了。 这些功能大大简化了开发过程，让你可以更专注于编写代码，而不是花时间在设置文件结构上。希望这些信息对你有帮助！

    查看详情
  • 16

    Naming Rules

    第 66 页

    让我们来聊聊关于Salesforce Lightning Web Components（LWC）的格式和命名规则。这些规则听起来可能有点复杂，但别担心，我会尽量用简单的方式来解释。 首先，当你使用Salesforce CLI（命令行界面）来创建一个新的LWC时，CLI会自动为你生成一个文件夹，里面包含了几个必要的文件：一个HTML文件、一个JavaScript文件和一个元数据文件。这些文件都是LWC的基础组成部分。 如果你选择手动创建这些文件和文件夹，那么你需要确保文件夹和里面的文件都遵循相同的命名规则。这意味着，文件夹的名字和文件的名字必须完全一致，包括大小写和下划线的使用。 接下来，我们来看看命名规则。首先，文件夹和文件的名字必须以大写字母开头。这就像给一个名字起头一样，首字母要大写。其次，名字中只能包含字母、数字或下划线。这意味着你不能使用空格、特殊字符或连字符（也就是破折号）。 此外，这个名字在你的命名空间内必须是唯一的，不能和其他组件重名。还有，名字不能以下划线结尾，也不能包含两个连续的下划线。这些都是为了保持命名的清晰和一致性。 总结一下，创建LWC时，无论是自动还是手动，都要注意文件夹和文件的命名规则。确保它们以大写字母开头，只包含字母、数字或下划线，并且在你的命名空间内是唯一的。这样，你的LWC组件就能顺利地在Salesforce环境中运行了。希望这些信息对你有帮助！

    查看详情
  • 17

    Which Files to Include?

    第 67 页

    让我们来聊聊Salesforce中的组件文件结构。想象一下，你在搭建一个小房子，每个房间都有不同的功能，而每个房间都需要一些特定的工具和材料来建造。在Salesforce中，组件就像是这些小房间，而文件就是建造它们所需的工具和材料。 首先，我们有两种类型的组件：UI组件和服务组件。UI组件就像是客厅或厨房，它们是用户直接看到和交互的地方。为了建造这些UI组件，我们需要三个基本文件：一个HTML文件、一个JavaScript文件和一个元数据配置文件。HTML文件就像是房间的蓝图，告诉系统这个房间应该长什么样子；JavaScript文件则像是房间里的电器和开关，控制着房间的功能；元数据配置文件则像是房间的说明书，告诉系统这个房间应该如何配置和使用。 服务组件则更像是工具房或储藏室，它们不直接与用户交互，但提供了其他组件可以复用的功能。对于服务组件，我们只需要一个JavaScript文件和一个元数据文件。JavaScript文件包含了可复用的代码，而元数据文件则描述了这些代码的用途和配置。 所有的这些文件都必须使用相同的名称（不包括扩展名），这样Salesforce的框架才能自动将它们连接起来，就像是用同一种颜色的电线连接电器一样，确保它们能够正常工作。 接下来，我们需要为每个组件创建一个文件夹，这个文件夹就像是每个房间的专属工具箱，里面存放着建造这个房间所需的所有工具和材料。 对于UI组件，HTML文件是必不可少的，它必须有一个根标记为“”的HTML文件。这个文件定义了组件的结构和外观。 每个组件都必须有一个JavaScript文件，这个文件定义了组件的行为和逻辑。如果组件是UI组件，那么这个JavaScript文件还会定义HTML元素的行为。 每个组件还必须有一个配置文件，这个文件定义了组件的元数据值，包括在Lightning App Builder和Community Builder中的设计配置。 组件还可以包括一个CSS文件，用来设置组件的样式，就像是为房间选择合适的墙纸和家具。 如果组件需要一个自定义图标，我们还可以添加一个SVG文件，这个文件会在Lightning App Builder和Community Builder中显示为组件的图标。 除了这些基本文件，组件的文件夹还可以包含其他JavaScript文件，这些文件可以用来共享代码，就像是在工具箱里放一些通用的工具，供多个房间使用。 最后，为了确保组件的质量，我们还可以为组件创建Jest测试。这些测试就像是房间的质量检查，确保每个房间都符合标准。我们可以在组件文件夹的顶层创建一个名为Jest的文件夹，并将测试保存在__Tests__文件夹中。 每个组件都是命名空间的一部分，这就像是每个房间都属于一个更大的建筑群，确保它们不会与其他建筑群中的房间混淆。 这就是Salesforce中组件文件结构的基本介绍，希望这能帮助你更好地理解如何构建和管理这些组件。

    查看详情
  • 18

    Client and Server Architecture

    第 68 页

    让我们来聊聊客户端和服务器架构，以及如何使用LWC（Lightning Web Components）来构建单页面应用程序。 首先，想象一下，我们有两个不同的MVP（最小可行产品），一个在服务器上，一个在客户端。虽然这个类比并不完美，但它能帮助我们更好地理解整个架构。 ，服务器端MVP：， 1. ，模型，：在服务器端，模型就是Salesforce中的标准或自定义对象。你可以把它们看作是数据库表，但实际上它们比简单的数据库表要复杂得多，因为它们包含了业务逻辑和数据关系。 2. ，视图，：服务器最初会提供一个HTML页面的“外壳”。这个外壳是页面的基本结构，还没有填充具体的内容。 3. ，控制器，：在服务器端，控制器是由Apex类来实现的。Apex类负责处理业务逻辑，决定如何处理数据，并将处理后的数据传递给视图。 ，客户端MVP：， 1. ，模型，：在客户端，模型是组件中存储的状态。这些状态是通过在JavaScript控制器中声明的属性来管理的。你可以把这些属性看作是组件的数据存储。 2. ，视图，：客户端的视图是由模板HTML驱动的。模板HTML定义了组件的结构和外观，它会根据模型中的数据动态生成内容。 3. ，控制器，：客户端的控制器是JavaScript控制器。它负责处理用户的交互，更新模型中的数据，并确保视图与模型保持同步。 总结一下，服务器端负责提供初始的HTML结构和处理业务逻辑，而客户端则负责处理用户交互和动态更新页面内容。通过这种方式，我们可以构建一个高效、响应迅速的单页面应用程序。 希望这个解释能帮助你更好地理解客户端和服务器架构，以及LWC在其中的作用。如果有任何问题，随时问我！

    查看详情
  • 19

    Basic UI Component - JavaScript File

    第 69 页

    让我们来聊聊Salesforce中的基本UI组件，特别是JavaScript文件的部分。每个UI组件都需要一个JavaScript文件，这个文件至少包含一些基本的代码。 首先，我们来看第一行代码。这里，我们从`lwc`模块导入了`LightningElement`。`lwc`是Lightning Web Components的核心模块，你可以把它想象成一个工具箱，里面有很多工具可以帮助我们构建组件。而`LightningElement`呢，它就像是标准HTML元素的一个升级版，一个自定义的包装器，让我们可以更方便地使用和扩展这些元素。 接下来是第二行代码。这里，我们通过扩展`LightningElement`来创建一个JavaScript类，这个类就是我们的Lightning Web组件的核心。我们使用`export default`关键字来导出这个类，这样其他组件就可以使用它了。按照惯例，类名通常采用Pascal Case，也就是每个单词的首字母都大写。比如，在我们的例子中，组件的类名就是`MyComponents`。 简单来说，这段代码就是为我们的UI组件搭建了一个基础框架，让我们可以在此基础上添加更多的功能和样式。希望这个解释能帮助你更好地理解这部分内容！

    查看详情
  • 20

    Basic UI Component - HTML File

    第 70 页

    让我们来聊聊Salesforce中的基本UI组件，特别是HTML文件的部分。今天我们要重点讲的是`parent.html`这个文件。 首先，每个UI组件都必须有一个HTML文件，这个文件是组件的“脸面”，决定了组件在页面上看起来是什么样子。这个HTML文件必须有一个根标签，叫做``。你可以把这个``标签想象成一个容器，里面装的就是组件的所有HTML内容。 这个HTML文件的命名也有一定的规则。它的名字应该和组件的名字一致，后面加上`.html`。比如说，如果你的组件叫做`myDelivery`，那么它的HTML文件就应该叫做`myDelivery.html`。 在``标签里面，你可以用声明式的方式来写HTML代码。也就是说，你可以直接写HTML标签，比如`<div>`、`<p>`等等，来定义组件的结构和样式。 另外，一个组件还可以包含另一个组件。比如说，在`parent.html`这个文件里，你可以通过``这样的标签来包含另一个组件。这里的`c-my-component`就是你要包含的另一个组件的名字。 最后，我们还会在课程的后面讲到一种特殊的组件，叫做服务组件（或者叫库组件）。这种组件不需要HTML文件，因为它们主要是用来提供一些功能，而不是用来显示内容的。 好了，这就是关于基本UI组件中HTML文件的一些基本知识。希望你能理解，如果有任何问题，随时问我哦！</p></div>

    查看详情
  • 21

    Basic UI Component - CSS File

    第 71 页

    今天我们来聊聊Salesforce中的基本UI组件，特别是关于CSS文件的使用。在Lightning Web组件中，我们可以通过CSS文件来设置组件的样式，让它们看起来更符合我们的需求。 首先，CSS文件其实就是一种用来描述网页元素样式的文件。在Lightning Web组件中，如果你想为某个组件设置样式，你需要在组件的文件夹中创建一个与该组件同名的CSS文件。比如说，如果你的组件名字叫“myComponents”，那么你就需要创建一个名为“myComponents.css”的文件。 这个CSS文件一旦创建，就会自动应用到对应的组件上。你不需要做任何额外的操作，Salesforce会自动识别并应用这些样式。 如果你之前使用过Aura组件，你可能会记得在Aura中设置样式时需要使用一些特定的方法。但在Lightning Web组件中，这些都不再需要了。Lightning Web组件简化了样式的管理，让你可以更直接、更简单地使用标准的CSS语法来美化你的组件。 所以，总结一下，如果你想给你的Lightning Web组件添加一些个性化的样式，只需创建一个与组件同名的CSS文件，然后按照标准的CSS语法编写样式即可。这样，你的组件就会按照你设定的样式来展示了。是不是很简单呢？

    查看详情
  • 22

    PascalCase, camelCase or kebab-case ?

    第 72 页

    同学们，今天我们来聊聊在Lightning Web组件中遇到的几种命名规则：PascalCase、骆驼Case和烤肉串Case。这些命名规则听起来可能有点复杂，但其实它们很简单，一旦你理解了它们的用途，就会觉得非常直观。 首先，我们来说说，烤肉串Case，。这种命名方式就像烤肉串一样，单词之间用短横线（-）连接。在Lightning Web组件中，你只需要在编辑`.html`文件时使用这种命名方式。比如，如果你有一个组件叫`my-component`，那么在HTML文件中，你会这样写：``。 接下来是，骆驼Case，。这种命名方式就像骆驼的驼峰一样，单词之间没有空格，但每个单词的首字母大写，除了第一个单词。在JavaScript文件中，你会经常使用这种命名方式。比如，一个变量名可能是`myVariableName`。 最后是，PascalCase，。这种命名方式和骆驼Case很像，但每个单词的首字母都大写，包括第一个单词。在Lightning Web组件中，你会在类名中使用PascalCase。比如，如果你有一个类叫`MyComponent`，那么在JavaScript文件中，你会这样定义它：`class MyComponent {}`。 有趣的是，这些命名规则的起源也很有意思。，烤肉串Case，和，骆驼Case，的命名方式非常直观，就像它们的名字一样。而，PascalCase，则是源自Pascal编程语言，这种语言在命名时也采用了类似的规则。 所以，同学们，记住这些命名规则，它们在不同的文件中有不同的用途。一旦你熟悉了它们，编写Lightning Web组件就会变得更加轻松和愉快。

    查看详情
  • 23

    Using Lightning App Builder

    第 73 页

    今天我们来聊聊Salesforce中的Lightning App Builder。这是一个非常强大的工具，特别适合那些不太懂技术的用户。通过这个工具，你可以轻松地创建和自定义页面，而无需编写任何代码。 首先，Lightning App Builder是一个拖放式的图形界面。这意味着你可以像拼图一样，通过简单的拖拽操作来构建页面。你可以为Lightning Experience和Salesforce移动版创建单页面应用程序，也可以自定义Lightning Experience的主页和记录页面。 Lightning Pages是介于页面布局和Visualforce页面之间的一个中间地带。与传统的页面布局类似，Lightning Pages允许你向页面添加自定义的内容。但不同的是，这些内容不是简单的字段或Visualforce组件，而是更灵活的Lightning组件。 Lightning组件提供了更大的灵活性，因为它们可以包含更复杂的逻辑和交互。你可以使用这些组件来创建更动态、更用户友好的页面。比如，你可以添加一个图表组件来展示销售数据，或者添加一个表单组件来收集用户反馈。 总的来说，Lightning App Builder是一个非常直观且功能强大的工具，能够帮助你快速构建和自定义Salesforce页面，提升用户体验。希望这个简单的介绍能帮助你更好地理解和使用这个工具。

    查看详情
  • 24

    Configuration File

    第 74 页

    让我们来聊聊Salesforce中的Lightning Web组件（LWC）的配置文件。这个配置文件对于每个组件来说都是必不可少的，它就像是组件的“身份证”，告诉Salesforce这个组件是谁，它能做什么，以及它能在哪里使用。 首先，每个LWC组件文件夹里都必须有一个名为`.js-meta.xml`的文件。这个文件就是配置文件，它定义了组件的元数据值，比如这个组件在Lightning App Builder和Community Builder中的设计配置。 在这个配置文件中，有几个关键的部分需要我们特别注意： 1. ，ApiVersion，：这是一个双精度值，用来将组件绑定到Salesforce的API版本。简单来说，就是告诉Salesforce这个组件是基于哪个版本的API开发的。 2. ，描述，：这是对组件的一个简短描述，通常只有一句话。这个描述会出现在设置中的Lightning组件列表里，也会在Lightning App Builder和Community Builder中作为工具提示出现。 3. ，IsExposed，：这是一个布尔值（也就是True或False）。如果你想让这个组件在所有组织以及Lightning App Builder和Community Builder中都能使用，那么你需要把这个值设置为True。特别是如果你想让这个组件在托管包中也能用，那就一定要设置为True。 4. ，Master Label，：这是组件的标题。它会显示在设置中的Lightning组件列表里，也会在Lightning App Builder和Community Builder中显示。 5. ，目标，：这个部分指定了组件可以添加到哪些类型的Lightning页面。如果你希望你的组件出现在Lightning App Builder或Community Builder中，那么你至少需要指定一种Lightning页面类型。支持的目标有很多，比如`Lightning__AppPage`和`Lightning__Tab`等。我们会在后续的课程中详细介绍这些目标。 总的来说，配置文件就像是组件的“说明书”，它告诉Salesforce这个组件的基本信息和它能做什么。通过正确配置这个文件，你可以确保你的组件在Salesforce中能够正常工作，并且能够在需要的地方被使用。

    查看详情
  • 25

    Generating a Password to Allow Login via the Salesforce App

    第 75 页

    今天我们来聊聊如何在Salesforce中生成允许登录的密码。这个过程其实很简单，但有几个关键点需要注意。 首先，如果你是通过Salesforce App来登录Salesforce，那么你需要一个用户名和密码。这个密码可以通过Salesforce的命令行工具（CLI）来生成。具体来说，你可以使用`sfdx force:user:password:generate`这个命令来生成密码。这个命令会为你生成一个新的密码，然后你就可以用这个密码来登录了。 不过，这里有一个小细节需要注意。如果你是应用程序用户，那么在登录时，你必须选择Sandbox作为连接类型。这是因为Sandbox环境是用来测试的，和正式的生产环境是分开的。 另外，如果你是网络用户，也就是说你通过浏览器来登录Salesforce，那么你需要登录的是`test.salesforce.com`，而不是通常的`login.salesforce.com`。这是因为`test.salesforce.com`是专门用来测试的登录页面。 最后，无论你是通过App还是通过网站登录，你都可以使用相同的用户名和密码。也就是说，一旦你生成了密码，你就可以在多个地方使用它，只要确保你登录的是正确的环境就可以了。 好了，这就是关于如何在Salesforce中生成允许登录的密码的全部内容。希望这对你有所帮助！如果有任何问题，随时问我哦。

    查看详情
  • 26

    AwInstructors App Page (Main Region & Right Sidebar) added to Certification App

    第 76 页

    同学们，今天我们来学习如何在Salesforce中创建一个Lightning App Builder页面，并且添加一些自定义的组件。这个过程其实挺有趣的，就像搭积木一样，我们把不同的部分组合在一起，最终形成一个完整的应用程序页面。 首先，我们要创建一个Lightning App Builder页面。这个页面是我们应用程序的主要展示区域，用户会在这里看到我们设计的内容。你可以把它想象成一个画布，我们可以在上面放置各种组件。 接下来，我们要创建一个叫做StudentBrowse的组件。这个组件会被放置在我们刚刚创建的Lightning App Builder页面上。StudentBrowse组件的主要作用是浏览学生信息。为了让它更完整，我们还需要创建一个StudentBrowserForm组件，这个组件会包含在StudentBrowse组件里面。一开始，这个StudentBrowserForm组件可能很简单，只包含一个<h1>标签，用来显示一个标题。 在创建这些组件的过程中，我们会使用VS Code这个工具。VS Code是一个非常强大的代码编辑器，我们可以在这里编写和调试我们的代码。我会一步步指导你们如何在VS Code中处理这些构建任务，确保你们能够顺利地完成这个练习。 好了，这就是我们今天的主要内容。希望你们能够跟上节奏，如果有任何问题，随时提问。我们开始动手吧！</h1>

    查看详情
  • 27

    Unit 2: Introducing Lightning Web Components - 78

    第 78 页

    同学们，今天我们来聊聊Salesforce的Lightning Web组件（LWC）。这是一个非常强大的工具，可以帮助我们构建现代化的、响应式的用户界面。 首先，我们来看看什么是Lightning Web组件模型。简单来说，它是一套基于现代Web标准的框架，允许我们使用HTML、CSS和JavaScript来创建组件。这些组件可以在Salesforce平台上运行，提供丰富的用户体验。 接下来，我们学习如何创建一个Lightning Web组件。这个过程其实很简单，你只需要在Salesforce的开发者控制台中，选择“新建”然后选择“Lightning Web组件”。给你的组件起个名字，然后Salesforce会自动为你生成一些基础的代码。 然后，我们来谈谈如何给这些组件添加样式。你可以使用CSS来定义组件的外观和感觉。Salesforce提供了一些内置的样式类，你也可以自定义CSS来满足你的需求。 定义组件属性是下一个重点。属性允许你从外部传递数据到组件中，这样你的组件就可以根据不同的数据展示不同的内容。 处理DOM事件也是非常重要的。你可以通过JavaScript来监听用户的交互，比如点击按钮或者输入文本，然后根据这些交互来更新你的组件。 有时候，你可能需要卸载一个组件。这通常发生在组件不再需要时，你可以通过调用特定的方法来安全地移除它。 使用Salesforce数据是LWC的一个强大功能。你可以通过Apex或者直接使用Lightning Data Service来获取和操作Salesforce中的数据。 最后，我们还会学习如何使用基本的Lightning组件，比如按钮、输入框等，以及如何提出和处理事件，实现用户之间的高级通信。 好了，这就是我们今天要讲的内容。希望你们能够通过这些知识，为你们的Salesforce应用增添更多的风格和功能。下次课我们再见！

    查看详情
  • 28

    Styling Lightning Web Components

    第 79 页

    今天我们来聊聊设计Lightning Web组件时的两个重要考虑因素。 首先，我们来看第一个考虑因素：Salesforce为我们提供了哪些开箱即用的工具？Salesforce的闪电设计系统（Lightning Design System）为开发者提供了一系列非常实用的资源。这包括语义化且易于访问的组件标记，这意味着你可以直接使用这些标记来构建用户界面，而不需要从头开始编写代码。此外，它还提供了跨浏览器兼容的CSS，确保你的应用在不同的浏览器上都能有一致的表现。还有图标、字体和设计指南，这些都是为了帮助你快速构建符合Salesforce风格的应用。最后，组件蓝图是一个非常有用的资源，它提供了组件的详细设计和实现指南，你可以通过访问https://lightningdesignsystem.com/components/overview/来了解更多关于蓝图的信息。 接下来是第二个考虑因素：如何创建和使用自己的自定义样式？其实，为你的组件创建自定义CSS是非常简单的。你只需要遵循一些基本的步骤，比如定义你的样式规则，然后将这些规则应用到你的组件上。这样，你就可以根据自己的需求来定制组件的外观和感觉，使其更符合你的应用风格。 总之，利用Salesforce提供的工具和资源，你可以更高效地设计和实现Lightning Web组件，同时也能灵活地添加自己的个性化样式。希望这些信息对你有所帮助！

    查看详情
  • 29

    CSS Basics in Lightning Web Components

    第 80 页

    今天我们来聊聊在Lightning Web组件中如何使用CSS。CSS，也就是层叠样式表，是用来控制网页外观和布局的。在Lightning Web组件中，我们可以通过几种简单的方式来应用CSS。 首先，你可以在HTML文件中给元素添加类。比如，如果你有一个按钮，你可以在HTML文件中这样写：`点击我`。这里的`myButton`就是你给按钮添加的类名。 接下来，你需要在组件包的CSS文件中定义这个类。你可以在CSS文件中这样写：`.myButton { background-color: blue; color: white; }`。这样，所有带有`myButton`类的按钮都会变成蓝色背景和白色文字。 最后，有一点需要注意的是，尽量使用类名选择器而不是ID选择器。因为在Lightning Web组件中，当模板被渲染时，ID值可能会被转换为全局唯一的值，这可能会导致你的样式无法正确应用。所以，使用类名选择器会更加安全和可靠。 总结一下，通过给HTML元素添加类，然后在CSS文件中定义这些类，你就可以轻松地控制Lightning Web组件的外观了。记得使用类名选择器，这样你的样式会更加稳定和可靠。希望这些内容对你有帮助！

    查看详情
  • 30

    CSS Scope

    第 81 页

    让我们来聊聊Salesforce中的组件样式和CSS ScopeStyles。想象一下，你有一个父组件和一个子组件，就像是一个家庭中的父母和孩子。每个组件都有自己的“衣服”，也就是样式。在Salesforce中，我们使用CSS来定义这些“衣服”的样式。 现在，假设我们在父组件中给h1标签（也就是标题）穿上了一件特别大的“衣服”，我们设置它的字体大小为xx-large。这意味着，在父组件中，所有的h1标题都会显得特别大。 但是，这里有一个有趣的地方：即使子组件也有h1标签，它并不会自动继承父组件的这件大“衣服”。这是因为在Salesforce中，每个组件的样式是独立的，这就是所谓的CSS ScopeStyles。它确保了每个组件的样式只影响自己，不会影响到其他组件。 所以，当你在浏览器中查看时，你会发现父组件的h1标题非常大，而子组件的h1标题则保持默认的大小。这就是CSS ScopeStyles的魔力，它让每个组件都能保持自己的风格，同时也能在不同的地方重复使用，而不用担心样式会混乱。 简单来说，CSS ScopeStyles就像是给每个组件穿上了一件定制的“衣服”，确保它们在任何地方都能保持自己的独特风格，不会影响到其他组件。这样，你的Salesforce应用就能既美观又功能强大，每个组件都能在它应该在的地方，做它应该做的事情。

    查看详情
  • 31

    CSS :host Selector

    第 82 页

    今天我们来聊聊在Salesforce Lightning Web Components（LWC）中如何使用CSS来设计组件的样式，特别是关于`:host`选择器和从父组件中设计子组件样式的问题。 首先，我们来看一下`:host`选择器。这个选择器非常有用，因为它允许组件直接给自己添加样式。比如说，你有一个组件叫`c-child`，你可以在这个组件的CSS文件中使用`:host`选择器来定义它自己的样式。这样，无论这个组件在哪里使用，它都会保持一致的样式。 接下来，我们谈谈从父组件中设计子组件的样式。有时候，你可能想要从父组件中控制子组件的样式。这时候，你可以在父组件的CSS文件中使用`c-child`作为选择器来定义子组件的样式。这种方法可以让你在父组件中统一管理多个子组件的样式，非常方便。 但是，这里有一个重要的建议：不要同时从组件本身和父组件中设计同一个组件的样式。这样做可能会让代码变得混乱，难以维护，甚至可能产生一些意想不到的样式冲突。所以，最好是选择一种方式，要么在组件内部使用`:host`选择器，要么在父组件中统一管理样式。 总结一下，使用`:host`选择器可以让组件自己管理自己的样式，而从父组件中设计子组件的样式则可以在父组件中统一管理多个子组件的样式。但记住，不要两者都做，选择一种方式，保持代码的清晰和可维护性。 希望这个解释对你有帮助！如果有任何问题，随时问我哦。

    查看详情
  • 32

    Style Components with Custom Aura Design Tokens

    第 83 页

    同学们，今天我们来聊聊如何在Salesforce中使用自定义的Aura设计代币来美化我们的组件。首先，想象一下，你有一堆组件，它们都需要使用相同的颜色、字体或者边距。如果每个组件都单独设置这些样式，那工作量可就大了。所以，我们有一个聪明的办法，就是使用自定义的Aura设计代币。 从2020年春季开始，Salesforce就推出了这个功能。使用自定义代币其实很简单。首先，你需要在开发者控制台中创建一个名为`defaultTokens.token`的文件。这个文件就像是你的样式库，里面定义了所有你想要共享的样式属性。 创建好之后，你就可以在你的CSS文件中引用这些代币了。引用的方式也很简单，只需要以`--c-`开头，后面跟上你在`defaultTokens.token`中定义的属性名就可以了。比如，如果你定义了一个颜色代币叫做`primaryColor`，那么在CSS中你就可以这样写：`color: var(--c-primaryColor);`。 另外，如果你不想自己定义这些代币，Salesforce还提供了一个叫做Lightning Design System的工具，里面有很多预设的代币可以直接使用。你只需要访问https://www.lightningdesignsystem.com/design-tokens/，找到你需要的代币，然后在你的CSS中引用就可以了。比如，如果你想使用一个高亮背景色，你可以这样写：`background: var(--lwc-colorBackgroundHighlight);`。 总之，使用自定义的Aura设计代币，可以让你的组件样式更加统一，管理起来也更加方便。希望这个小技巧能帮助到你们！

    查看详情
  • 33

    Introducing the Salesforce Lightning Design System (SLDS)

    第 84 页

    今天我们来聊聊Salesforce Lightning设计系统，简称SLDS。这个系统是Salesforce为了帮助开发者更高效地创建一致且美观的用户界面而设计的。你可以把它想象成一个工具箱，里面装满了各种工具和指南，帮助你在Salesforce平台上构建应用时，能够快速上手并且保持设计的一致性。 首先，SLDS提供了一套语义化且可访问的组件标记。这意味着，无论你是新手还是老手，使用这些标记都能确保你的应用不仅看起来专业，而且对所有用户，包括那些使用辅助技术的用户，都是友好的。 其次，SLDS的CSS是跨浏览器兼容的。无论你的用户使用的是Chrome、Firefox还是Safari，你的应用都能保持一致的外观和体验。这大大减少了你在不同浏览器间调试样式的时间。 此外，SLDS还包括了一套丰富的图标和字体，以及详细的设计指南。这些资源可以帮助你快速找到适合你应用的视觉元素，并且确保它们与Salesforce的整体设计风格相匹配。 最后，SLDS还为Lightning Components提供了HTML/CSS原型。这些原型是非常有价值的资源，因为它们可以帮助你快速理解和实现复杂的UI组件，而不需要从零开始。 总之，Salesforce Lightning设计系统是一个强大的工具集，它可以帮助你更快、更高效地构建出既美观又功能强大的Salesforce应用。如果你想要深入了解，可以访问www.lightningdesignsystem.com，那里有更多的资源和文档等着你去探索。

    查看详情
  • 34

    Applying SLDS Classes

    第 85 页

    今天我们来聊聊Salesforce Lightning设计系统（SLDS）中的CSS，特别是如何使用BEM命名约定来组织你的样式代码。 首先，BEM代表的是“块（Block）、元素（Element）、修饰符（Modifier）”。这是一种非常流行的CSS命名方法，它帮助开发人员创建清晰、结构化的代码。想象一下，如果你在建造一座房子，BEM就像是给每个房间、每扇门、每扇窗户都贴上标签，这样每个人都知道它们是什么，以及它们属于哪里。 在SLDS中，使用BEM的好处是显而易见的。它让你的CSS代码不仅易于理解，而且还能确保团队中的每个开发人员都遵循相同的模式。这意味着无论谁接手项目，都能快速上手，减少混乱和错误。 SLDS提供了大量的CSS类，这些类不仅模仿了原生Lightning Experience组件的外观和感觉，还涵盖了排版、定位、用户交互等多个方面。使用这些预定义的类，你可以快速构建出既美观又功能强大的用户界面，而无需从头开始编写大量的CSS代码。 总之，通过采用BEM命名约定和利用SLDS的强大功能，你可以确保你的Salesforce应用既高效又易于维护。这样，你的团队就可以更加专注于创造出色的用户体验，而不是被复杂的样式问题所困扰。

    查看详情
  • 35

    Applying SLDS Classes - 86

    第 86 页

    同学们，今天我们来聊聊Salesforce Lightning Design System，也就是我们常说的SLDS。这是一个非常强大的工具，它帮助我们创建既美观又符合Salesforce风格的界面。 首先，我们来看一个简单的HTML按钮，使用原生的``标签。这个按钮虽然功能上没问题，但它的外观可能并不吸引人，也不符合Salesforce的设计标准。这时候，SLDS就派上用场了。 当我们使用``这个组件时，按钮不仅功能齐全，还会自动应用SLDS的样式，这样按钮看起来就更加专业和吸引人了。而且，如果我们把多个按钮放在一个按钮组里，它们会以一种非常整洁和有序的方式排列，这样用户界面看起来就更加统一和协调。 接下来，我们来看一个具体的例子。假设我们想要在页面上居中显示一段文本。在传统的BEM（Block Element Modifier）方法中，我们可能需要写一些复杂的CSS代码来实现这一点。但在SLDS中，我们只需要给包含文本的块级元素添加一个简单的类名`slds-ign_absolute-center`，文本就会自动居中显示。这种方法不仅简单，而且非常直观，大大提高了我们的开发效率。 总之，SLDS提供了一系列的类和组件，帮助我们快速构建出既美观又符合Salesforce设计标准的用户界面。通过使用这些工具，我们可以更专注于业务逻辑的实现，而不是花费大量时间在样式的调整上。希望今天的讲解对你们有所帮助，下次再见！

    查看详情
  • 36

    Using SLDS Icons

    第 87 页

    让我们来聊聊如何在Salesforce中使用SLDS图标。SLDS，也就是Salesforce Lightning Design System，提供了超过200个图标，这些图标可以帮助你在应用程序中更直观地展示信息。 这些图标被分成了几个类别，比如“行动”、“自定义”、“DOCTYPE”、“标准”和“实用”。每个图标都有一个特定的名称，你可以通过“类别名称:图标名称”的方式来引用它们。 举个例子，如果你想在你的Lightning组件中使用一个“添加联系人”的图标，你可以这样写： ```html <div class="slds-p-horizontal_medium"> // 这里放你的内容 </div> ``` 在这个例子中，`icon-name=&quot;action:add_contact&quot;` 就是引用了“行动”类别下的“add_contact”图标。这样，你的卡片上就会显示一个添加联系人的图标，让用户一眼就能明白这个卡片的功能。 记住，选择合适的图标可以让你的应用界面更加友好和专业。所以，花点时间去熟悉这些图标，看看哪些最适合你的应用场景。

    查看详情
  • 37

    SLDS Component Blueprints

    第 88 页

    让我们来聊聊Salesforce的Lightning设计系统，特别是关于SDDS组件蓝图的部分。首先，SDDS组件蓝图的最后更新是在2020年的春季，这意味着它包含了当时最新的设计和开发标准。 Lightning设计系统是一个非常强大的资源，它包含了大量的组件蓝图。如果你正在创建自己的组件，但又不想花太多时间在用户界面（UI）的设计上，那么这个系统就是你的好帮手。你可以从这里开始，直接借用类似组件的标记，这样可以节省大量的时间和精力。 在这个系统中，你会看到几个不同颜色的区域，每个区域都有其特定的功能： 1. ，红色区域，：这里展示的是组件本身。你可以点击这里来浏览各种不同的组件。当你选择一个组件时，右侧的内容会相应地变化，展示出该组件的详细信息。 2. ，蓝色区域，：这部分展示了组件的一系列可能状态。每个状态都有不同的输出和标记，这帮助你理解组件在不同情况下的表现。 3. ，橙色区域，：这是组件的渲染输出区域。你可以在这里看到组件在实际应用中的样子。 4. ，绿色区域，：这里展示了生成橙色区域输出所需的标记和CSS代码。这对于开发者来说非常有用，因为它提供了实现这些UI效果的具体代码。 通过这些区域，你可以轻松地理解和应用Lightning设计系统中的组件，无论是为了学习还是实际开发，这都是一个极好的起点。希望这能帮助你更好地利用Salesforce的资源，提升你的开发效率！

    查看详情
  • 38

    Changing Background in Lightning Experience

    第 89 页

    同学们，今天我们来聊聊如何在Salesforce的Lightning Experience中更改背景。作为管理员，你可以通过一个叫做“安装程序”的工具来调整默认的背景图像和颜色。这个功能非常实用，因为它允许你根据公司的品牌或者特定的活动需求来定制Salesforce的外观。 首先，你需要登录到Salesforce，然后找到“设置”菜单。在设置中，你会看到一个选项叫做“安装程序”。点击进入后，你会看到很多自定义的选项，其中就包括“活动主题”。在这里，你可以上传新的背景图片，或者选择不同的颜色方案来改变整个界面的感觉。 这样，每当你的团队成员登录Salesforce时，他们就会看到这个新的背景，这不仅能提升使用体验，还能增强品牌的一致性。是不是很简单呢？希望这个小技巧能帮助到你们！

    查看详情
  • 39

    Background Color and Image

    第 90 页

    同学们，今天我们来聊聊在Salesforce的Lightning页面上如何设置背景颜色和图像，让我们的页面看起来既清晰又专业。 首先，我们知道，为了让背景颜色和图像在页面上显示得清晰，我们需要为它们提供一个坚实的背景。这里，我们有两个选择来实现这一点。 ，第一个选择是硬编码CSS背景颜色。， 这个方法很简单，你只需要将你的标记（也就是你的HTML代码）包装在一个`<div>`标签中，然后给这个`<div>`应用一个CSS类。这个CSS类里，你可以定义你想要的背景颜色。这样，你的组件就有了一个坚实的背景，颜色和图像都会显示得很清晰。 ，第二个选择是使用Lightning卡（）。， 这个方法更高级一些，但也很简单。你只需要把你的组件包装在一个``标签里。这个标签会自动为你的组件提供一个清晰的背景，而且它的样式是基于Salesforce Lightning设计系统（SLDS）的，这意味着你的组件会自动继承未来对SLDS的任何更新和改进。 在本课程中，我们推荐使用第二种方法，也就是使用``。这样，你的页面不仅看起来更专业，而且还能保持与Salesforce最新设计标准的一致性。 好了，这就是今天的内容。希望你们能理解并掌握这两种方法，让你们的Lightning页面更加出色！如果有任何问题，随时提问哦！</div></div>

    查看详情
  • 40

    student-browser-form custom component

    第 91 页

    同学们，今天我们要来做一个有趣的练习，就是修改我们的学生浏览器表单的外观和感觉。我们会用到一个叫做“闪电卡”的东西来包裹我们的表单，这样看起来会更专业一些。 首先，我们要在闪电卡里添加一个标题，叫做“过滤学生”，还会放一个放大镜的图标，这样用户一看就知道这里是用来搜索和过滤学生信息的。 接下来，我们要创建一个自定义的CSS类。这个类会让我们的表单文字使用Comic Sans字体，并且加上文本阴影。这样做的目的是让这个表单看起来与众不同，一眼就能看出我们应用了这个样式。 最后，我们还会用到SDS中的一些实用程序类。这些类有两个作用：一是给浏览器表单内部添加一些填充，让内容看起来不那么拥挤；二是在闪电卡和下面的标签集之间提供一些页边距，这样它们就不会紧贴在一起，整体布局会更加美观。 好了，这就是我们今天要做的练习。通过这些步骤，我们的学生浏览器表单不仅功能强大，外观也会变得更加吸引人。大家开始动手试试吧！

    查看详情
  • 41

    Unit 2: Introducing Lightning Web Components - 93

    第 93 页

    让我们开始今天的课程吧。今天我们要聊的是Salesforce的Lightning Web组件，简称LWC。这是一个非常强大的工具，可以帮助我们构建动态和响应式的用户界面。 首先，我们来看看什么是Lightning Web组件模型。简单来说，它是一套基于现代Web标准的开发模型，允许我们使用HTML、JavaScript和CSS来创建组件。这些组件可以在Salesforce的Lightning平台上运行，提供丰富的用户体验。 接下来，我们会学习如何创建一个Lightning Web组件。创建组件其实很简单，你只需要定义一些HTML模板，然后编写一些JavaScript来控制这些模板的行为。我们还会学习如何给这些组件添加样式，让它们看起来更美观。 在组件中，属性是非常重要的。它们就像是组件的“记忆”，可以存储和传递数据。我们会在JavaScript控制器中定义这些属性，这样组件就可以根据这些属性的变化来更新显示的内容。 我们还会学习如何处理DOM事件。DOM事件是用户与页面交互时触发的，比如点击按钮或者输入文本。通过处理这些事件，我们可以让组件响应用户的操作。 当然，我们也会学习如何卸载不再需要的组件，以优化应用的性能。 使用Salesforce数据是LWC的一个强大功能。我们可以直接从Salesforce中获取数据，并在组件中显示。此外，我们还会使用一些基本的Lightning组件，比如按钮、输入框等，来构建我们的界面。 最后，我们会学习如何提出和处理事件。事件是组件之间通信的一种方式。通过事件，一个组件可以通知另一个组件发生了某些事情。 我们还会使用Lightning Data Service进行CRUD操作，即创建、读取、更新和删除数据。这是与Salesforce数据交互的一种非常高效的方式。 好了，这就是我们今天要学习的内容。希望你们能跟上节奏，如果有任何问题，随时提问。我们开始吧！

    查看详情
  • 42

    What is a Property?

    第 94 页

    让我们来聊聊“财产”这个概念。在编程中，特别是在使用像Salesforce的Lightning Web Components（LWC）这样的现代框架时，财产（Property）是一个非常基础但重要的概念。 首先，财产可以理解为对象或组件中的一个变量，它存储着数据。这些数据可以是任何类型，比如数字、字符串、对象或者数组。在LWC中，财产有两个关键的特性需要注意： 1. ，反应性（Reactivity），：这是指当财产的值发生变化时，组件是否会自动更新或重新渲染。如果一个财产是反应性的，那么一旦它的值改变，组件就会自动更新显示这个新值。这非常有用，因为它让开发者不需要手动去更新UI，框架会自动处理这些变化。 2. ，访问修饰符（Access Modifiers），：这决定了财产是公共的还是私有的。公共的财产可以被组件外部的代码访问和修改，而私有的财产则只能在组件内部使用。在LWC中，我们不需要像在Apex中那样显式地声明这些修饰符，框架会根据上下文自动处理。 截至2020年春季，LWC中的所有字段默认都是反应性的。这意味着，如果你改变了这些字段的值，组件会自动更新。但是，如果你使用的是数组或对象，并且希望这些复杂数据类型的变化也能触发组件的重新渲染，你需要使用`@track`装饰器来标记它们。 希望这能帮助你理解LWC中的财产概念。如果你想要更深入地了解，可以查看提供的链接，那里有更详细的文档和示例。

    查看详情
  • 43

    Decorators

    第 95 页

    让我们来聊聊Lightning Web Components（LWC）中的装饰器。装饰器是一种特殊的标记，它们可以帮助我们更好地控制组件的属性和行为。在LWC中，我们有三个主要的装饰器：@api、@track和@wire。 首先，我们来看@api。这个装饰器用于定义公共属性。当你用@api装饰一个属性时，这个属性就变成了组件API的一部分。这意味着，其他使用这个组件的组件可以访问和修改这个属性。而且，@api属性是反应性的，也就是说，当这个属性的值发生变化时，组件会自动更新显示这个属性的部分。 接下来是@track。这个装饰器用于观察对象属性或数组元素的变化。被@track装饰的属性是私有的，也就是说，它们只能在组件内部访问。当这些属性的值发生变化时，组件也会自动更新相关的显示部分。 最后是@wire。这个装饰器用于读取Salesforce的数据。当使用@wire装饰一个方法或属性时，LWC会自动调用Salesforce的数据服务，并在数据到达时重新渲染组件。不过，关于@wire的详细内容，我们会在后面的课程中深入讨论。 简单来说，装饰器就像是给组件的属性和方法加上了一些特殊的“标签”，这些标签告诉LWC如何处理这些属性和方法。通过使用装饰器，我们可以更灵活地控制组件的行为和数据的流动。希望这些解释能帮助你更好地理解LWC中的装饰器！

    查看详情
  • 44

    Access Controls for Properties

    第 96 页

    今天我们来聊聊Salesforce中的访问控制，特别是在APEX和Lightning Web Components（LWC）中的应用。 首先，在APEX中，我们可以为类成员和方法设置访问修饰符。这些修饰符包括私有（private）、受保护（protected）、公共（public）和全局（global）。这些修饰符帮助我们控制谁可以访问这些类成员和方法。例如，私有成员只能在定义它们的类内部访问，而公共成员则可以被任何其他类访问。 接下来，我们来看看JavaScript属性。在JavaScript中，我们通常不使用访问修饰符来标记属性。相反，这些属性的访问权限是由修饰符和的值共同决定的。这意味着，即使一个属性没有明确的访问修饰符，它的访问权限仍然可以通过其他方式被控制。 现在，让我们谈谈一个重要的警告。从2020年春季开始，自定义的Lightning Web组件不能访问自定义命名空间中的其他Lightning Web组件或模块。这意味着，如果你有一个自定义的命名空间，你的组件只能访问那些在同一个命名空间中的组件和模块，而不能访问其他命名空间中的内容。 最后，如果你正在使用托管包分发的组件，这些组件可以在App Builder中使用，但不能从你自己的LWC实例化，即使你使用了它们的自定义命名空间。 希望这些信息对你有帮助！如果你有更多问题，随时问我。

    查看详情
  • 45

    Reactivity in Private Properties with no Decorator

    第 97 页

    让我们来聊聊这个话题。想象一下，你有一个房子，这个房子代表你的Salesforce组件。房子里有一些基本的家具，比如桌子和椅子，这些就像是组件中的基元值，比如数字、字符串等。当你改变这些家具的位置时，比如把椅子从客厅搬到卧室，整个房子（也就是你的组件）会立即重新布置，这就是所谓的“重新渲染”。 但是，如果你的房子里有一些更复杂的东西，比如一个书架，上面摆满了书，这些书就像是对象属性或者数组中的元素。如果你只是改变书架上的某一本书的位置，比如把一本书从左边移到右边，房子（组件）不会自动重新布置，除非你特别告诉它要这样做。这就是为什么在没有使用@track装饰器的情况下，对象属性的更新不会触发重新渲染。 所以，简单来说，基元值的改变就像是移动家具，会立即引起注意，而对象属性的改变就像是重新整理书架上的书，除非你特别说明，否则不会引起注意。希望这个比喻能帮助你更好地理解这个概念！

    查看详情
  • 46

    Using the @track Decorator on Objects and Arrays

    第 98 页

    让我们来聊聊Salesforce中的@Track修饰器，特别是它在处理对象和数组时的作用。想象一下，你有一个班级，里面有很多学生，每个学生都有自己的信息。在Salesforce的Lightning Web Components（LWC）中，我们经常需要处理这样的数据结构。 首先，@Track修饰器是用来告诉Salesforce，当某个属性发生变化时，我们需要重新渲染相关的UI部分。这对于保持用户界面的实时更新非常重要。 现在，假设我们有两个属性：`students`和`class`。这两个属性都被@Track修饰了。这意味着，如果我们改变了`students`或`class`的引用（比如给它们赋一个新的数组或对象），Salesforce会自动检测到这个变化，并重新渲染相关的组件。 但是，这里有一个小细节需要注意。如果我们只是修改了`students`数组中的一个学生信息，或者改变了`class`对象中的一个属性，而没有改变它们的引用，那么Salesforce默认是不会检测到这些变化的。这时候，@Track就派上用场了。它可以让Salesforce深入到对象或数组的内部，去观察这些细微的变化，并在变化发生时触发重新渲染。 举个例子，如果我们有一个学生列表，我们想要更新某个学生的成绩。如果我们只是修改了数组中某个学生的成绩，而没有改变整个数组的引用，那么没有@Track的话，Salesforce是不会知道这个变化的。但是，如果我们用@Track修饰了`students`属性，Salesforce就会知道去检查数组内部的变化，并在成绩更新时重新渲染相关的UI。 总结一下，@Track修饰器在处理对象和数组时非常有用，尤其是在我们需要观察这些数据结构内部的变化时。它帮助我们确保用户界面能够及时反映出数据的最新状态。希望这个解释能帮助你更好地理解@Track的作用！

    查看详情
  • 47

    Public Properties

    第 99 页

    让我们来聊聊Salesforce中的公共属性，特别是在Lightning Web Components (LWC) 中如何使用它们。 首先，想象一下你有一个盒子，这个盒子代表你的LWC组件。现在，如果你想让这个盒子里的某些东西可以被外面的人看到或者修改，你就需要把这些东西标记为“公共的”。在LWC中，我们通过使用一个叫做`@api`的装饰器来实现这一点。 在第1行，我们首先需要从LWC模块中导入这个装饰器。这就像是从工具箱里拿出一个标记笔，准备用来标记那些公共的东西。 然后，在第4行，我们使用`@api`来标记一个属性。这个属性现在就像是盒子上的一个透明窗口，外面的人可以通过这个窗口看到里面的内容，甚至可以通过这个窗口传递东西进来。 这个被标记为`@api`的属性有几个特点： 1. ，自动反应，：这意味着如果外面的人改变了传递给这个属性的值，组件内部会自动更新，不需要你手动去刷新。 2. ，可传递性，：其他组件或者页面可以传递值给这个属性。比如，你可以在设计时通过配置HTML来传递值，或者在记录详情页面上使用特定的`recordId`来传递值。 总结一下，使用`@api`装饰器可以让你的LWC组件的某些属性变得“公共”，这样它们就可以被外部访问和修改，同时保持组件的响应性和灵活性。希望这个解释能帮助你更好地理解LWC中的公共属性！

    查看详情
  • 48

    Instructor Demo: Reactivity in Arrays

    第 100 页

    同学们，今天我们来聊聊Salesforce中的阵列反应性。想象一下，你有一个装满不同颜色球的篮子，这些球就是我们的数据。在Salesforce的Lightning Web Components（LWC）中，我们有两种方式来处理这些“球”——一种是未跟踪的阵列，另一种是已跟踪的阵列。 未跟踪的阵列就像是你把球放在一个普通的篮子里，如果你改变了一个球的颜色，篮子里的其他球不会自动知道这个变化。而已跟踪的阵列则像是每个球都装在一个智能篮子里，一旦有一个球的颜色变了，整个篮子里的球都会立即知道并更新自己的状态。 为了让大家更直观地理解这一点，我准备了一个演示组件。你们可以把这个组件复制到你们的LWC文件夹中，然后运行它。这样，你们就能看到未跟踪的阵列和已跟踪的阵列在实际操作中的区别了。 如果你手头有一个包含这个组件的游乐场链接，或者你自己创建了另一个演示，那也可以使用。重要的是，我们要通过一个具体的、可视化的例子来理解这个概念，而不是仅仅停留在抽象的理论上。 好了，现在让我们动手试试吧，看看这两种阵列在实际操作中有什么不同。记住，实践是学习的最好方式！

    查看详情
  • 49

    Getters

    第 101 页

    让我们来聊聊getter这个概念。想象一下，你有一个盒子，里面装着你想要的东西。在编程中，这个盒子就像是一个对象的属性，而getter就是帮你从盒子里拿东西的一种方式。但是，getter不仅仅是从盒子里拿东西那么简单，它还可以在拿东西的时候做一些小计算或者检查。 在我们的例子中，有一个叫做`tileselect`的getter。这个getter的工作是看看一个叫做`selective`的属性是真是假。如果`selective`是真的，那么`tileselect`就会返回两个字符串：“tile”和“tile selective”。如果`selective`是假的，它就只返回“tile”。 这里用到了一个叫做三进制运算符的小技巧，它就像是if/then/else的简化版。如果条件成立，就返回第一个值；如果不成立，就返回第二个值。 虽然这个getter的具体逻辑可能看起来有点复杂，但它的核心作用很简单：根据某些条件来决定返回什么值。在我们的项目中，这个getter会帮助我们决定在组件上显示哪种CSS类，从而改变组件的样式，比如是否显示边框。 所以，getter不仅仅是一个简单的属性访问器，它还可以包含逻辑，帮助我们更灵活地控制数据的展示。希望这个解释能帮助你更好地理解getter的作用！

    查看详情
  • 50

    Setters

    第 102 页

    让我们来聊聊Salesforce中的Lightning Web Components（LWC）和如何使用getter和setter。 首先，我们来看一个简单的例子。假设我们有一个组件叫做`MyComponents`，它继承自`LightningElement`。在这个组件中，我们有一个属性叫做`studentName`，我们想要在设置这个属性的时候做一些特殊的处理，比如把名字转换成大写。 ```javascript import { LightningElement, api } from &#39;lwc&#39;; export default class MyComponents extends LightningElement { _studentName; @api get studentName() { return this._studentName; } set studentName(value) { this._studentName = value.toUpperCase(); } } ``` 在这个例子中，我们定义了一个私有的属性`_studentName`来存储学生的名字。然后我们定义了一个getter和一个setter来访问和修改这个属性。 ### Getter Getter是一个函数，它允许我们获取属性的值。在这个例子中，`get studentName()`方法返回`_studentName`的值。我们使用`@api`装饰器来标记这个getter，这样它就可以被其他组件访问。 ### Setter Setter是一个函数，它允许我们设置属性的值。在这个例子中，`set studentName(value)`方法接收一个值，并将其转换为大写后赋值给`_studentName`。这样，每次设置`studentName`时，名字都会被自动转换成大写。 ### 最佳实践 1. ，使用@api装饰getter，：这是最佳实践，因为getter通常用于暴露组件的公共属性。 2. ，同时定义getter和setter，：如果你为公共属性定义了setter，那么你也应该定义getter。 3. ，使用私有属性存储值，：在getter和setter中，使用私有属性（如`_studentName`）来存储实际的值，这样可以避免直接暴露内部状态。 ### 注意事项 - ，不要同时注释getter和setter，：你只能选择其中一个来使用`@api`装饰器，通常选择getter。 - ，逻辑处理，：setter非常适合在设置属性时执行一些逻辑处理，比如数据验证、格式化等。 希望这个解释能帮助你理解如何在LWC中使用getter和setter。如果你有任何问题，随时问我！

    查看详情
  • 51

    What is Data Binding?

    第 103 页

    让我们来聊聊数据绑定这个概念。想象一下，你有一个遥控器和一个电视。遥控器可以控制电视的开关、音量等，这就是一种“绑定”关系。在编程中，数据绑定也是类似的，它连接了数据（比如遥控器）和用户界面（比如电视）。 在Salesforce的Lightning Web组件中，数据绑定默认是单向的。这意味着数据只能从一个方向流动，比如从JavaScript控制器流向用户界面。这就像你只能用遥控器控制电视，但电视不能反过来控制遥控器。 但是，有时候我们可能需要双向数据绑定，就像你既可以用遥控器控制电视，电视的反馈也能影响遥控器的显示。在Lightning Web组件中，虽然默认是单向的，但开发者可以通过特定的方法实现双向数据绑定。 接下来，我们会通过一些代码示例来具体展示如何实现这些数据绑定，让你更清楚地理解这个概念。这样，你就能在自己的项目中灵活运用数据绑定了。

    查看详情
  • 52

    Input Field with No Data Binding

    第 104 页

    让我们来聊聊这个简单的Salesforce组件示例。这个组件非常基础，它展示了一个文本输入字段，但有趣的是，这个字段并没有与任何数据绑定。这意味着，无论你在界面上输入什么，都不会影响到组件内部的数据。 在这个组件中，我们有一个私有的变量，叫做`greeting`。这个变量是用来存储一些问候语的，比如“你好”或者“早上好”。但是，这个`greeting`变量和你在界面上看到的输入字段之间没有任何联系。也就是说，无论你在输入字段里输入什么，`greeting`变量都不会改变。 这个例子很好地展示了什么是无数据绑定的输入字段。它帮助我们理解，在Salesforce中，数据绑定是一个非常重要的概念，它允许用户界面和后台数据之间进行实时的交互和更新。但在我们这个简单的组件中，我们暂时还没有用到这个功能。 所以，当你看到这个组件时，你可以想象它是一个独立的小世界，界面的输入和后台的数据是分开的，互不干扰。这对于初学者来说，是一个很好的起点，来理解Salesforce组件是如何工作的。

    查看详情
  • 53

    Input Field with One-Way Data Binding

    第 105 页

    让我们来聊聊这个有趣的话题。想象一下，你有一个输入框，就像你在网上填写表单时看到的那种。在这个例子中，我们使用了一个叫做“lightning-input”的组件，并且我们给它设置了一个值，这个值是从一个叫做“greeting”的变量来的。 现在，当这个组件第一次显示在屏幕上时，输入框里会显示“greeting”变量的值。如果后台的代码改变了“greeting”的值，那么这个输入框也会自动更新，显示新的值。这就是所谓的“单向数据绑定”，意思是数据从后台流向界面，但界面上的变化不会反过来影响后台的数据。 但是，这里有一个小问题。如果用户在输入框里打字，输入了新的内容，这个“greeting”变量的值并不会自动更新。这可能让你觉得有点奇怪，特别是如果你之前用过其他框架或者Aura组件，它们可能不是这样工作的。 那么，如果我们想要在用户输入的时候，让“greeting”的值也跟着更新，我们该怎么办呢？我们需要做的是添加一个事件监听器。当用户在输入框里输入内容时，这个监听器会捕捉到这个变化，然后我们可以写一些代码来更新“greeting”的值。这样，输入框和“greeting”变量就能保持同步了。 简单来说，单向数据绑定让数据从后台流向界面，但如果想要界面上的变化也能影响后台的数据，我们就需要添加一些额外的代码来处理用户的输入。希望这个解释能帮助你更好地理解这个概念！

    查看详情
  • 54

    Input Field with Two-Way Data Binding

    第 106 页

    同学们，今天我们来聊聊如何在Salesforce中实现一个简单的功能：当用户在输入字段中输入内容时，自动更新一个问候语的属性。这个功能听起来是不是很有趣呢？我们一步步来。 首先，我们需要一个输入字段，这个字段是用来让用户输入他们的名字或者其他信息的。然后，我们还需要一个地方来显示问候语，比如“你好，张三！”这样的句子。 为了实现这个功能，我们需要使用到“双向数据绑定”这个概念。简单来说，双向数据绑定就是当输入字段的内容发生变化时，显示问候语的地方也会自动更新，反之亦然。 接下来，我们需要给输入字段添加一个“onchange”事件处理程序。这个处理程序的作用是，当用户输入内容并离开输入字段时，它会捕捉到这个变化，并执行一些操作。 在这个事件处理程序中，我们需要更新问候语的属性。具体怎么做呢？我们可以利用传递到事件处理程序的事件变量，也就是我们常说的“event”。通过这个event变量，我们可以获取到输入字段的最新值。具体来说，我们可以使用event.target来指向输入字段，然后通过event.target.value来获取用户输入的内容。 最后，我们将这个值赋给问候语的属性，这样问候语就会自动更新了。 总结一下，我们通过双向数据绑定和onchange事件处理程序，实现了当用户输入内容时，问候语自动更新的功能。这个过程虽然听起来有点复杂，但只要你理解了基本的原理，就会发现其实很简单。 好了，今天的课程就到这里，希望你们都能掌握这个技巧，并在实际的项目中运用起来。如果有任何问题，随时欢迎提问！

    查看详情
  • 55

    Defining Properties and Functions

    第 107 页

    同学们，今天我们来聊聊Salesforce中的一些核心概念——属性和功能。首先，我们要明确一点：每次当我们更新一个反应性属性时，所有的getter函数都会重新被评估。这听起来可能有点复杂，但其实很简单。想象一下，getter函数就像是一个小助手，它总是准备好给你提供最新的信息，即使它自己并没有直接使用那个刚刚更新的属性。 接下来，我们会一起看看装饰师以及getters和setters。装饰师在这里的作用就像是给我们的代码穿上了一件漂亮的外衣，让它不仅功能强大，而且看起来也很整洁。而getters和setters则是我们用来获取和设置属性值的工具，它们确保我们的数据既安全又易于管理。 最后，教练有一个小建议：在处理代码时，一行一行地来，不要急于求成。有时候，放弃一些看似重要但实际上并不必要的服务，反而能让我们的代码更加简洁高效。我们稍后会再回到这个话题，到时候会有更多的细节和例子来帮助大家理解。 好了，这就是今天的内容，希望大家能够跟上节奏，如果有任何疑问，随时提问哦！

    查看详情
  • 56

    Working with Boolean Values in Components

    第 108 页

    今天我们来聊聊在Salesforce Lightning Web Components（LWC）中，如何使用布尔值属性，特别是那些与HTML标准属性如“selected”或“checked”相关的属性。 首先，当你创建一个自定义组件时，可能会想要使用像“selected”这样的属性来表示某个选项是否被选中。在LWC中，你可以通过@api装饰器来暴露这样的属性，使得父组件可以传递值给子组件。 但是，这里有个小细节需要注意。在HTML中，像“selected”这样的属性是布尔属性，它们的值通常不需要明确指定。例如，在HTML中，你可能会这样写： ```html Option 1 ``` 这里，“selected”属性没有值，它的存在本身就表示这个选项被选中了。在LWC中，如果你想模拟这种行为，你应该这样写： ```html ``` 而不是： ```html ``` 后者虽然看起来更直观，但实际上并不符合HTML的布尔属性处理方式。LWC的Linter（代码检查工具）会提醒你这一点，规则编号是LWC1037。这个规则告诉你，布尔属性应该直接使用属性名，而不是给它赋值。 所以，总结一下，当你在LWC中使用布尔属性时，尤其是那些与HTML标准属性同名的属性，记得直接使用属性名，而不是给它赋值。这样不仅符合HTML的标准，也能让你的代码更加清晰和一致。 希望这个解释对你有帮助！如果你有任何问题，随时问我。

    查看详情
  • 57

    student-browser custom component

    第 109 页

    同学们，今天我们来聊聊如何在Salesforce中创建一个自定义组件，这个组件会显示单个学生的信息。我们把这个组件叫做“学生磁贴”。 首先，我们需要在Salesforce中引入一个新的组件，这个组件就是我们的“学生磁贴”。这个磁贴会显示一个学生的详细信息，比如名字、年龄、班级等。 接下来，我们会从“学生浏览器”这个组件中实例化出“学生磁贴”。也就是说，我们会在“学生浏览器”中使用“学生磁贴”来展示每个学生的信息。 在开始的时候，我们会把学生的数据硬编码在“学生磁贴”内部。这意味着我们会直接在代码中写入学生的信息，而不是从数据库或其他地方动态获取。这样做是为了让我们能够更专注于组件的布局和样式，而不是数据的获取和处理。 最后，我们会实现一个getter方法。这个getter方法的作用是根据一个属性（比如“是否选中”）的值来切换“学生磁贴”的边框颜色。如果这个属性被设置为true，那么边框就会变成蓝色；如果不是，边框就会保持原来的颜色。 这样，我们就完成了一个简单的自定义组件，它能够根据不同的条件改变外观，展示学生的信息。希望这个练习能帮助大家更好地理解Salesforce中的组件开发和数据绑定。

    查看详情
  • 58

    During this exercise, you will start building the student gallery.

    第 110 页

    同学们，今天我们来做一个非常有趣的练习，我们要开始构建一个学生图库。这个练习的重点是学习如何使用Salesforce的组件属性。我们会分几个步骤来完成这个任务，整个过程大概需要20分钟。 首先，我们要定义一个叫做`studentTile`的组件。这个组件就像是一个小盒子，里面会显示每个学生的信息。你可以把它想象成一张小卡片，每张卡片上都有一个学生的名字、照片或者其他信息。 接下来，我们要定义这个组件的属性。属性是什么呢？简单来说，属性就是组件的“特征”或者“设置”。比如，我们可以为`studentTile`组件定义一个`studentName`属性，用来存储学生的名字；再定义一个`studentPhoto`属性，用来存储学生的照片。这些属性可以让我们的组件更加灵活，能够根据不同的学生显示不同的信息。 最后，我们要生成动态标记。动态标记的意思是说，我们不需要手动为每个学生创建卡片，而是通过代码自动生成。比如，如果我们有一个学生列表，我们可以用循环语句来为每个学生生成一个`studentTile`组件，并且把学生的名字和照片自动填充进去。 总结一下，今天的练习分为三步： 1. 定义`studentTile`组件。 2. 定义组件的属性，比如`studentName`和`studentPhoto`。 3. 生成动态标记，自动为每个学生创建卡片。 好了，现在你们可以开始动手了！如果有任何问题，随时问我。

    查看详情
  • 59

    Unit 2: Introducing Lightning Web Components - 111

    第 111 页

    同学们，今天我们来聊聊Salesforce中的Lightning Web组件（LWC）。这个技术是现代Salesforce开发的核心，它让我们能够构建快速、响应式的用户界面。 首先，Lightning Web组件模型是基于现代Web标准的，这意味着它使用了HTML、CSS和JavaScript。这种模型让我们能够创建可重用的组件，这些组件可以在不同的Salesforce应用中使用。 创建Lightning Web组件其实很简单。你只需要在Salesforce的开发者控制台中创建一个新的LWC文件，然后开始编写你的HTML模板和JavaScript控制器。HTML模板定义了组件的结构，而JavaScript控制器则处理组件的逻辑。 接下来，我们来谈谈如何给组件添加样式。你可以直接在组件的CSS文件中编写样式，这样你的组件就会看起来更加美观和符合你的应用风格。 定义组件属性是另一个重要的部分。属性允许你从父组件传递数据到子组件，这样你的组件就可以更加灵活和动态。 处理DOM事件是用户交互的关键。你可以通过监听用户的点击、输入等事件来做出响应，比如更新数据或改变UI。 卸载Lightning Web组件也很重要。当组件不再需要时，正确地卸载它可以释放资源，避免内存泄漏。 使用Salesforce数据是LWC的一个强大功能。你可以通过Apex控制器或直接使用Lightning Data Service来获取和操作Salesforce中的数据。 使用基本Lightning组件可以加快开发速度。Salesforce提供了一系列预构建的组件，如按钮、输入框等，你可以直接在你的应用中使用。 提出和处理事件是组件间通信的基础。你可以通过自定义事件来让组件之间进行交互，这样你的应用就可以更加动态和互动。 最后，我们来谈谈生命周期钩子。这些钩子允许你在组件的不同生命周期阶段执行代码，比如在组件加载时、更新时或卸载时。理解这些钩子可以帮助你更好地控制组件的行为。 好了，这就是今天的内容。希望你们对Lightning Web组件有了更深入的了解。下次我们会继续深入探讨更多高级话题。记得练习哦，实践是学习的最好方式！

    查看详情
  • 60

    Handling DOM Events

    第 112 页

    让我们来聊聊DOM事件。想象一下，DOM事件就像是用户和网页元素之间的一次小对话。比如，当用户点击一个按钮，或者把鼠标移到一个图片上时，这些动作都会触发一个DOM事件。 我们有时候会把“DOM事件”和“用户事件”这两个词混着用，其实它们的意思差不多，都是指用户和网页的互动。 举个例子，常见的DOM事件有`onClick`（点击事件）、`onfocus`（聚焦事件）、`onblur`（失焦事件）等等。这些事件就像是网页元素的“耳朵”，它们一直在监听用户的操作。 现在，假设我们有一个学生列表，每个学生都有一个“学生卡片”（studentTile）。在这个卡片里，我们定义了一个叫`onStudentClick`的函数。这个函数的作用是，当用户点击某个学生的卡片时，就会触发这个函数，执行一些操作。 在HTML文件里，我们把一个按钮的点击事件和这个`onStudentClick`函数绑定在一起。也就是说，当用户点击这个按钮时，`onStudentClick`函数就会被调用。 不过，这里有个小提示：虽然我们在这个例子里用了标准的HTML ``元素，但如果你是在Salesforce的Lightning框架下开发，最好还是用``。为什么呢？因为``自带了很多内置的样式和功能，用起来更方便，效果也更好。 所以，记住啦，虽然标准HTML按钮也能用，但在Salesforce的世界里，``才是你的好朋友！

    查看详情
  • 61

    What is a Lifecycle Hook?

    第 113 页

    让我们来聊聊Inbox Hook。你可以把它想象成一个“钩子”，就像你在钓鱼时用的那种钩子。这个钩子可以帮助我们在组件的不同生命周期阶段“钓”出我们想要执行的代码。 想象一下，你的组件就像是一个小生命，它有自己的出生、成长和消亡的过程。在这个过程中，有几个关键时刻，比如： 1. ，初始化，：这是组件刚刚“出生”的时候，我们可以在这里做一些准备工作，比如设置一些初始值。 2. ，渲染，：这是组件“成长”的阶段，它会在页面上显示出来。我们可以在这里做一些与显示相关的操作，比如更新UI。 3. ，毁灭，：这是组件“消亡”的时候，我们可以在这里做一些清理工作，比如释放资源。 Inbox Hook就是让我们在这些关键时刻“钩”住一些代码，让它们在特定的时刻自动执行。比如，你可以在组件初始化的时候“钩”住一段代码，让它自动加载一些数据；或者在组件毁灭的时候“钩”住一段代码，让它自动保存一些信息。 总的来说，Inbox Hook就是帮助我们更好地控制组件在不同生命周期阶段的行为，让我们的代码更加灵活和高效。希望这个解释能让你对Inbox Hook有一个清晰的理解！

    查看详情
  • 62

    Defining a Constructor

    第 114 页

    让我们来聊聊Salesforce Lightning Web Components（LWC）中的构造器。想象一下，构造器就像是你新买的房子的地基。在你开始装修和摆放家具之前，你需要确保地基是稳固的。在LWC中，构造器就是这个“地基”。 当你创建一个新的组件时，首先会调用构造器。这是组件生命周期的起点。在构造器中，我们首先需要调用`super()`。这就像是告诉Salesforce：“嘿，我正在建造一个新组件，请确保我继承了所有必要的功能和属性。”这一步非常重要，因为它确保了你的组件能够正确地连接到Salesforce的生态系统。 在构造器中，我们通常会做一些初始化工作。比如，如果你有一个学生列表，你可能会在这里硬编码一些数据，或者设置一些默认值。你可能会使用`forEach`循环来遍历这个列表，并为每个学生创建一个JavaScript对象。这个对象看起来就像Salesforce中的`sObject`，这样你就可以在组件中使用它了。 不过，有一点需要注意：在构造器中，你还不能访问组件的子元素，因为它们还没有被创建出来。同样，组件的属性也还没有被传递进来。所以，如果你定义了一个`@api`属性，不要在构造器中尝试访问它。这些属性会在构造器之后，但在`connectedCallback()`钩子之前被分配给组件。 最后，如果你想在构造器中访问组件的模板元素，你可以使用`this.template`。这就像是你在建造房子时，先看看蓝图，确保你知道每个房间的位置和大小。 总之，构造器是组件生命周期的第一步，确保你在这里做好所有必要的准备工作，这样你的组件才能顺利运行。

    查看详情
  • 63

    HTML Template Directives

    第 115 页

    同学们，今天我们来聊聊Lightning Web组件中的HTML模板指令。这些指令可以帮助我们更高效地控制页面的显示和逻辑。我们可以把这些指令大致分为两类：循环和条件渲染。 首先，我们来看看循环指令。循环指令主要有两种形式：一种是标准的集合循环，比如`for:each`，它允许我们遍历一个集合，并对每个元素执行相同的操作。另一种是迭代器循环，比如`iterator`，它提供了一种更灵活的方式来处理集合中的元素。在使用这些循环指令时，我们还需要使用`key`属性。这个`key`是由框架用来优化性能的，确保每个循环元素都能被正确识别和更新。如果不使用`key`，虽然代码还能运行，但你会看到浏览器控制台报错。 接下来是条件渲染指令。这里我们主要使用`if:true`和`if:false`来根据条件决定是否渲染某个元素。这个功能非常有用，尤其是在我们需要根据用户的操作或其他条件动态显示或隐藏页面元素时。在我们的课程中，我们会频繁使用`if:true`来进行条件渲染，特别是在LayoutManager组件中。 现在，我想特别强调一下条件渲染和CSS中显示/隐藏的区别。在条件渲染中，当条件不满足时，元素不仅会被隐藏，实际上它会被从DOM中移除。这意味着元素会被销毁，当条件再次满足时，元素会被重新创建。这与CSS中的`display: none`或`visibility: hidden`不同，后者只是简单地隐藏元素，元素仍然存在于DOM中。理解这一点对于优化应用性能和确保正确的用户界面行为非常重要。 好了，这就是今天的内容。希望大家能够理解并掌握这些指令的使用。我们会在接下来的练习中实际应用这些知识，所以请保持关注！

    查看详情
  • 64

    Iterating over an Array

    第 116 页

    让我们来聊聊这个例子。想象一下，你有一个学生名单，这个名单里包含了每个学生的ID和名字。在Salesforce中，我们通常会用一种叫做“迭代”的方式来处理这样的列表。 在这个例子里，`studentList`就是我们的学生名单，它是一个数组，里面存放着每个学生的信息。现在，我们想要在网页上展示这些学生的信息，怎么办呢？我们可以在`studentTiles.html`文件中，使用一个循环来遍历这个`studentList`数组。 每次循环时，我们都会为数组中的每一个学生创建一个`student-tile`，这就像是为每个学生制作一个小卡片，卡片上会显示学生的ID和名字。 这里有一个小细节需要注意，那就是`key`的使用。`key`是一个特殊的属性，它帮助Salesforce识别每个`student-tile`是唯一的。如果你忘记加`key`，虽然代码还是可以运行，但你的浏览器控制台会显示一个错误，提醒你缺少了`key`。 所以，记得在使用循环创建组件时，给每个组件加上一个唯一的`key`，这样可以帮助Salesforce更高效地管理和更新这些组件。这样，你的网页就会更加流畅，用户体验也会更好。

    查看详情
  • 65

    Iterating over an Array (Cont.)

    第 117 页

    同学们，今天我们来聊聊如何在编程中迭代数组，特别是使用两种不同的循环语法。我们有一个学生列表的数组，里面包含了四个学生的信息，每个学生都有一个ID和名字。 首先，我们来看看第一种方法，叫做“for：each”循环。这种方法很简单，就是遍历数组中的每一个元素。在我们的例子中，我们会遍历学生列表，并且使用一个叫做“for：index”的变量来记录当前是第几次循环。这样，我们就可以在输出时显示每个学生的名字以及他们在列表中的位置。比如，第一次循环时，我们会输出“0. John”，第二次是“1. Paul”，依此类推。 接下来，我们看看第二种方法，叫做“迭代器”循环。这种方法比“for：each”稍微复杂一点，但它有一个很酷的功能，就是可以对数组中的第一个和最后一个元素进行特殊处理。在我们的例子中，我们会在第一个学生名字前面加上一个特殊的div标签，类名为“list-first”，在最后一个学生名字后面加上另一个特殊的div标签，类名为“list-last”。这样，我们就可以通过CSS给第一个和最后一个学生添加一些特别的样式，比如红色的上边框和蓝色的下边框。 如果你想要亲自试试这些代码，可以在你的开发环境中运行一下。记得添加一些CSS样式，比如给“list-first”类添加红色的上边框和顶部内边距，给“list-last”类添加蓝色的下边框和底部内边距。这样，你就可以看到第一个和最后一个学生的名字被特别标记出来了。 好了，这就是今天的内容。希望你们能理解这两种迭代数组的方法，并且能够在实际编程中灵活运用。如果有任何问题，随时问我哦！

    查看详情
  • 66

    connectedCallback() function

    第 118 页

    让我们来聊聊`linkedCallback()`这个函数。想象一下，你在玩积木，当你把一块积木放到另一块上面时，这块积木就“插入”到了你的积木塔中。`linkedCallback()`就像是这块积木的一个小助手，当它被插入到塔中时，这个小助手就会跳出来说：“嘿，我在这里了！” 但是，这个小助手有一个特点，它只能看到它自己所在的积木，也就是我们说的“主机元素”，它看不到其他积木，因为那些积木可能还没有被放上去。所以，如果你想通过这个小助手去碰触其他积木，那是做不到的。 还有一点要注意，这个小助手可能会被叫出来好几次。比如，如果你把这块积木从塔上拿下来，然后又放回去，或者你把它移到塔的另一个位置，这个小助手就会再次跳出来说：“我又在这里了！”所以，如果你希望它只做一次事情，你就要告诉它：“嘿，小助手，如果你已经做过了，就别再做了。” 这就是`linkedCallback()`的基本工作方式。它帮助你在元素被插入到文档中时执行一些操作，但你要小心，因为它可能会被多次触发。希望这个比喻能帮助你更好地理解这个概念！

    查看详情
  • 67

    constructor() vs connectedCallback() – Host Element

    第 119 页

    让我们来聊聊Salesforce中的`constructor()`和`linkedCallback()`这两个生命周期方法，以及它们在使用时的一些注意事项。 首先，`constructor()`是组件的构造函数。当组件被创建时，这个方法会被自动调用。你可以在这里做一些初始化的工作，比如设置一些默认值或者初始化一些变量。但是，这里有一个重要的限制：在`constructor()`中，你不能直接向宿主元素（也就是组件本身）添加属性。为什么呢？因为在构造期间，宿主元素还没有完全准备好，如果你尝试在这个时候添加属性，可能会导致一些不可预见的错误。 举个例子，假设你有一个组件，你想在创建时给它添加一个`class`属性。如果你在`constructor()`中这样做，代码可能会像这样： ```javascript constructor() { super(); this.classList.add(&#39;my-class&#39;); // 这是非法的 } ``` 这段代码是非法的，因为`this.classList`在构造期间还不存在，或者还没有准备好被操作。 那么，什么时候可以安全地向宿主元素添加属性呢？答案是在`linkedCallback()`中。`linkedCallback()`是组件生命周期中的一个阶段，当组件被插入到DOM中时，这个方法会被调用。在这个时候，宿主元素已经完全准备好了，你可以安全地向它添加属性。 所以，正确的做法应该是这样的： ```javascript connectedCallback() { this.classList.add(&#39;my-class&#39;); // 这是合法的 } ``` 在这个例子中，`connectedCallback()`确保了宿主元素已经完全准备好，你可以安全地添加`class`属性。 总结一下，`constructor()`是用来做初始化的，但在构造期间不要向宿主元素添加属性。而`linkedCallback()`是组件插入到DOM时调用的，这个时候你可以安全地向宿主元素添加属性。希望这个解释能帮助你更好地理解这两个生命周期方法的使用场景和限制。

    查看详情
  • 68

    constructor() vs connectedCallback() – Property Access

    第 120 页

    让我们来聊聊Salesforce中的`constructor()`和`linkedCallback()`，特别是在处理`@api`属性时的区别。 首先，`constructor()`是组件的构造函数。当你创建一个新的组件实例时，这个函数会被自动调用。但是，这里有一个重要的限制：在`constructor()`中，你不能访问`@api`属性。为什么呢？因为在构造函数执行的时候，组件的属性还没有被初始化。所以，如果你尝试在`constructor()`中访问`@api`属性，你会得到一个错误，因为这时候这些属性还不存在。 接下来是`linkedCallback()`。这个函数是在组件被连接到DOM之后调用的。这时候，所有的`@api`属性都已经初始化完毕，你可以安全地访问它们了。所以，如果你需要在组件中使用`@api`属性，你应该把这些逻辑放在`linkedCallback()`中，而不是`constructor()`中。 总结一下： - 在`constructor()`中，你不能访问`@api`属性，因为它们还没有被初始化。 - 在`linkedCallback()`中，你可以安全地访问`@api`属性，因为它们已经准备好了。 所以，记住：如果你需要处理`@api`属性，一定要等到`linkedCallback()`再去做。这样，你就可以避免在构造函数中遇到属性访问的问题了。

    查看详情
  • 69

    Lifecycle Hooks

    第 121 页

    让我们来聊聊Salesforce中的钩生命周期挂钩。想象一下，你正在搭建一个乐高模型，每个步骤都有特定的顺序和时机，钩生命周期挂钩就像是搭建乐高时的每一步指导。 首先，我们有`constructor()`，这就像是开始搭建乐高时的第一步。当你开始创建一个组件时，这个挂钩就会被调用。这时候，你还没有把任何小零件（也就是子元素）放上去，所以你还不能看到或操作它们。所有的属性设置都会在这个阶段之后，但在下一个步骤之前完成。 接下来是`linkedCallback()`，这就像是当你把乐高模型的一部分插入到整个结构中。这个挂钩会在元素被插入到文档中时被调用。这时候，你的模型开始有了形状，但还没有完全完成。 然后我们有`render()`，这就像是当你需要根据特定的设计图来调整你的乐高模型。如果你需要做一些复杂的调整，比如有条件地展示某些部分或者导入一些特别的模板，你就会用到这个函数。这个函数会在`linkedCallback()`之后被调用，并且你需要确保返回的HTML模板是正确的。 最后是`renderedCallback()`，这就像是每次你完成一部分乐高模型后，都会回头检查一下，确保一切都按照计划进行。这个挂钩会在每次渲染组件后被调用，确保你的组件看起来和运行起来都如你所愿。 记住，这些挂钩就像是搭建乐高时的步骤指导，帮助你确保每个部分都在正确的时间以正确的方式被添加和调整。希望这个比喻能帮助你更好地理解钩生命周期挂钩的概念！

    查看详情
  • 70

    Lifecycle Hooks when a Component is Removed from the DOM

    第 122 页

    让我们来聊聊Salesforce中的组件生命周期，特别是关于“disconnectCallback”这个部分。想象一下，你有一个家庭，家庭成员之间是有联系的。在Salesforce中，组件就像是这个家庭中的成员，它们之间也有联系。 当你在页面上使用一个组件时，这个组件就像是加入了这个家庭。但是，有时候你可能不再需要这个组件了，就像家庭成员可能会搬出去一样。这时候，“disconnectCallback”就派上用场了。 “disconnectCallback”是一个特殊的函数，它会在组件从页面上被移除时自动调用。这个过程是从父组件开始，然后流向子组件的。也就是说，当父组件被移除时，它会先告诉它的子组件：“嘿，我们要离开了！”然后子组件也会执行它们的“disconnectCallback”。 这个过程确保了所有的组件都能在被移除前做好清理工作，比如断开连接、释放资源等。这样，你的页面就能保持干净和高效。 所以，简单来说，“disconnectCallback”就像是组件在离开页面前的告别仪式，确保一切都井然有序。希望这个解释能帮助你更好地理解这个概念！

    查看详情
  • 71

    Common Lifecycle Hook Use Cases

    第 123 页

    同学们，今天我们来聊聊Salesforce Lightning Web Components（LWC）中的生命周期挂钩。这些挂钩就像是组件的生命旅程中的各个重要站点，让我们能够在组件的不同阶段执行特定的操作。 首先，我们来看，构造函数()，。这个挂钩在组件刚刚创建时被调用。想象一下，这就像是组件出生的那一刻。在这个阶段，组件还没有完全准备好，所以你不能访问它的子元素，因为子元素还没有被创建出来。同时，组件的属性也还没有被传递进来。不过，你可以访问宿主元素，也就是组件本身所在的HTML元素。 接下来是，已连接回叫()，。这个挂钩在组件被插入到文档中时被调用。你可以把它想象成组件被“安装”到页面上的那一刻。在这个阶段，组件已经存在了，但子元素仍然不可访问。你可以使用这个挂钩来访问宿主元素，并且可以开始使用组件的属性来构建一些动态内容。 然后是，已断开连接的回叫()，。这个挂钩在组件从文档中被移除时调用。这就像是组件被“卸载”了。你可以在这个阶段做一些清理工作，比如取消订阅事件或释放资源。 接下来是，Render()，。这个挂钩用于覆盖标准的渲染功能。如果你需要做一些复杂的渲染操作，比如有条件地显示某些内容，或者导入自定义的模板，你可以使用这个挂钩。它会在，已连接回叫()，之后被调用，并且必须返回一个有效的HTML模板。 然后是，RenderedCallback()，。这个挂钩在组件每次渲染后被调用。它特别适用于Lightning Web Components，并且是从子组件流向父组件的。如果你在这个挂钩中执行一次性操作，记得要手动跟踪它，否则可能会导致不必要的重新渲染，甚至无限循环。 最后是，ErrorCallback(错误，堆栈)，。这个挂钩在子组件的生命周期挂钩中发生错误时被调用。你可以把它想象成一个错误捕捉器。你可以使用这个挂钩来创建一个错误边界组件，它会捕获所有子组件中的错误，并记录错误信息，甚至可以显示一个替代视图来告诉用户发生了什么。 好了，这就是我们今天关于LWC生命周期挂钩的讲解。希望这些内容能帮助你们更好地理解和使用这些挂钩，让你们的组件更加灵活和强大。如果有任何问题，随时问我哦！

    查看详情
  • 72

    Organizing your Controller

    第 124 页

    让我们来聊聊这段代码的组织方式。当很多开发人员一起工作时，保持代码的一致性和可读性非常重要。这段代码展示了一种组织Lightning Web Components（LWC）控制器的常见方法。 首先，我们导入了必要的模块和Apex方法。`LightningElement`是LWC的基础类，`api`和`track`是装饰器，用于定义组件的公共属性和内部状态。`Wire`用于调用Apex方法并自动更新数据。 接下来，我们定义了一个默认导出的类`MyOrderDemo`，它继承了`LightningElement`。在这个类中，我们按照一定的顺序组织了代码： 1. ，属性，：首先是`@api`和`@track`装饰的属性。`@api`用于定义组件的公共属性，可以被外部组件访问和修改。`@track`用于定义组件的内部状态，当状态变化时，组件会自动重新渲染。 2. ，生命周期钩子，：然后是生命周期钩子方法，比如`constructor`和`connectedCallback`。`constructor`是类的构造函数，用于初始化对象。`connectedCallback`在组件插入DOM时调用，可以在这里执行一些初始化操作。 3. ，getter/setter，：接下来是getter和setter方法，用于控制属性的访问和修改。getter用于获取属性的值，setter用于设置属性的值。 4. ，其他功能，：最后是其他自定义方法，比如`myValue`，用于实现组件的具体功能。 这种组织方式的好处是，代码结构清晰，易于理解和维护。当多个开发人员一起工作时，遵循这种约定可以减少混乱，提高开发效率。 希望这个解释对你有帮助！如果有任何问题，随时问我。

    查看详情
  • 73

    student-browser custom component - 125

    第 125 页

    同学们，今天我们要来做一个有趣的练习。在这个练习中，我们会创建一个新的组件，叫做`studentTiles`。这个组件的作用是显示一个学生列表。听起来很简单，对吧？但在这个过程中，我们会学到两个非常重要的概念：生命周期钩子和迭代器。 首先，我们来谈谈生命周期钩子。在Salesforce的Lightning Web Components（LWC）中，生命周期钩子是一些特殊的方法，它们在组件的不同阶段自动被调用。今天我们要用到的钩子是`constructor()`。这个钩子在组件被创建时自动调用。我们可以在这里做一些初始化的工作，比如创建一个硬编码的学生数组。虽然现在我们是手动输入学生数据，但以后我们会从数据库中获取这些数据。 接下来，我们要用到迭代器。迭代器的作用是让我们能够遍历一个数组或列表。在我们的例子中，我们会遍历那个硬编码的学生列表，并为每一个学生创建一个`c-student-tile`组件。这样，每个学生都会有一个自己的小卡片显示在页面上。 总结一下，今天我们要做的是： 1. 使用`constructor()`生命周期钩子来初始化一个学生数组。 2. 使用迭代器遍历这个数组，并为每个学生创建一个`c-student-tile`组件。 这样，我们就能在页面上看到一个漂亮的学生列表了。是不是很简单呢？让我们开始动手吧！

    查看详情
  • 74

    Challenge 1: Output the Date and Time

    第 127 页

    我们来一步步解决这个挑战。首先，我们需要创建一个名为`challenge_currentDate`的Lightning组件，这个组件会在页面加载时显示当前的日期和时间。然后，我们还要添加一个按钮，点击这个按钮可以手动更新日期和时间。最后，我们希望这个日期和时间能够每秒自动更新一次。 ### 第一步：创建Lightning组件 1. 打开你的Salesforce开发环境，进入开发者控制台。 2. 点击“文件” -&gt; “新建” -&gt; “Lightning组件”。 3. 给组件命名为`challenge_currentDate`，然后点击“提交”。 ### 第二步：编写组件的HTML 在组件的HTML文件中，我们需要显示当前的日期和时间，并且添加一个按钮来手动更新它们。 ```html <p>{!v.currentDateTime}</p> ``` ### 第三步：编写JavaScript控制器 接下来，我们需要编写JavaScript控制器来处理按钮点击和自动更新日期和时间的逻辑。 ```javascript ({ doInit: function(component, event, helper) { helper.updateDateTime(component); setInterval(function() { helper.updateDateTime(component); }, 1000); }, updateDateTime: function(component, event, helper) { helper.updateDateTime(component); } }) ``` ### 第四步：编写JavaScript助手 助手函数`updateDateTime`用于获取当前的日期和时间，并更新组件的属性。 ```javascript ({ updateDateTime: function(component) { var today = new Date(); var dateTime = today.toLocaleString(); component.set(&quot;v.currentDateTime&quot;, dateTime); } }) ``` ### 第五步：在Lightning App Builder中使用组件 1. 打开Lightning App Builder。 2. 创建一个新的页面，命名为“Challenge Gallery”。 3. 在页面布局中，找到并拖动`challenge_currentDate`组件到页面上。 4. 保存并激活页面。 ### 总结 现在，当你加载“Challenge Gallery”页面时，你会看到当前的日期和时间显示在页面上。点击按钮可以手动更新日期和时间，而且日期和时间会每秒自动更新一次。 希望这个解释对你有帮助！如果有任何问题，随时问我。

    查看详情
  • 75

    Unit 2: Introducing Lightning Web Components - 128

    第 128 页

    同学们，今天我们来聊聊Salesforce中的Lightning Web组件（LWC）。这是一个非常强大的工具，可以帮助我们构建现代化的、响应式的用户界面。 首先，，Lightning Web组件模型，是基于现代Web标准的，这意味着它使用了HTML、JavaScript和CSS。这种模型让我们能够创建高效、可重用的组件，这些组件可以在Salesforce的Lightning平台上运行。 接下来，我们来看看，如何创建Lightning Web组件，。创建过程其实很简单，你只需要使用Salesforce CLI或者开发者控制台，按照一定的结构来组织你的文件。每个组件通常包括一个HTML文件、一个JavaScript文件和一个CSS文件。 然后，我们谈谈，造型组件，。通过CSS，我们可以为组件添加样式，使其看起来更符合我们的设计需求。你可以使用标准的CSS，也可以利用Salesforce提供的设计系统——SLDS（Salesforce Lightning Design System）。 ，定义组件属性，是另一个重要的部分。属性允许我们从外部传入数据到组件中，这样组件就可以根据传入的数据动态地展示内容。属性可以是简单的数据类型，比如字符串或数字，也可以是复杂的对象。 ，处理多姆事件，是指组件能够响应用户的交互，比如点击按钮或者输入文本。通过JavaScript，我们可以监听这些事件，并做出相应的处理。 当我们不再需要一个组件时，，卸载Lightning Web组件，是一个好习惯。这可以帮助我们释放资源，避免内存泄漏。 ，使用Salesforce数据，是LWC的一个强大功能。我们可以通过Apex控制器或者直接使用Lightning Data Service来获取和操作Salesforce中的数据。 ，使用基本Lightning组件，，比如按钮、输入框等，可以让我们快速构建用户界面。这些组件已经预先设计好，可以直接使用。 ，提出和处理事件，是组件间通信的一种方式。一个组件可以发出一个事件，另一个组件可以监听这个事件并做出响应。 最后，，用户之间的高级通信，涉及到更复杂的场景，比如跨组件的通信或者与父组件的通信。这通常需要更精细的事件处理机制。 好了，这就是我们今天的内容。希望你们对Lightning Web组件有了更深入的了解。记得，实践是最好的学习方式，所以不妨动手试试创建你自己的组件吧！如果有任何问题，随时提问。我们下次再见！

    查看详情
  • 76

    Lightning Component Framework Modes

    第 129 页

    同学们，今天我们来聊聊Salesforce的闪电组件框架中的两种模式：生产模式和调试模式。这两种模式主要是为了帮助我们更好地开发和优化我们的应用程序。 首先，我们来看生产模式。在生产模式下，Salesforce会对我们的代码进行一些优化，主要是为了提升性能。这些优化包括对JavaScript代码进行“精简”处理，也就是我们常说的“模糊处理”。这样做可以减少代码的大小，让应用程序加载和运行得更快。这里要注意的是，这种小型化主要是为了性能优化，而不是为了保护知识产权。虽然缩小后的代码很难阅读，但它并没有被加密，所以还是可以被查看的。 接下来是调试模式。在调试模式下，框架的JavaScript代码不会被缩小，这样代码就更容易阅读和调试。此外，调试模式还会提供更详细的警告和错误输出，帮助我们更快地找到问题所在。但是，调试模式下的自定义组件代码既没有优化也没有缩小，这会对性能产生显著影响。也就是说，启用了调试模式的用户在使用Salesforce时会感觉速度变慢。因此，我们建议只在需要调试JavaScript代码时启用调试模式，并且只让参与调试活动的用户使用。不要永久打开调试模式，因为这会影响到所有用户的使用体验。启用了调试模式的用户每周会看到一次横幅通知，提醒他们当前处于调试模式。 最后，如果你们对“代码优化”这个概念还有疑问，可以查看这个链接，那里有更详细的解释和示例代码。希望这些信息对你们有所帮助，如果还有其他问题，随时问我哦！

    查看详情
  • 77

    How to Enable Debug Mode – Option 1

    第 130 页

    今天我们来聊聊如何在Salesforce中启用收件箱模式。这个功能特别有用，尤其是当你需要调试JavaScript代码时。默认情况下，Salesforce会压缩和混淆你的JavaScript代码，这虽然有助于提高性能，但在调试时可能会让你头疼。启用收件箱模式后，这些代码就不会被压缩和混淆了，这样你就可以更轻松地使用浏览器的开发者工具来查找和解决问题。 那么，怎么启用这个模式呢？很简单，跟着我一步步来： 1. 首先，点击页面右上角的个人资料图标，就是那个小小的头像或者你的名字旁边的小图标。 2. 然后，点击“设置”选项。 3. 接下来，找到并点击“高级用户详细信息”，这里可能需要你稍微滚动一下页面。 4. 点击“编辑”按钮，这个按钮可能不会直接显示在屏幕上，但你应该能在页面上找到它。 5. 在弹出的选项中，你会看到一个“收件箱模式”的复选框，勾选它。 6. 最后，别忘了点击“保存”按钮，这样你的设置就生效了。 这样，你就成功启用了收件箱模式，可以更轻松地进行JavaScript代码的调试了。希望这个讲解对你有帮助！如果有任何问题，随时问我哦。

    查看详情
  • 78

    How to Enable Debug Mode – Option 2

    第 131 页

    今天我们来聊聊如何在Salesforce中启用调试模式。这是一个非常实用的功能，特别是当你需要帮助其他用户解决一些复杂的问题时。 首先，打开你的Salesforce设置。你可以通过点击右上角的齿轮图标来找到设置选项。进入设置后，你会看到一个搜索框，输入“调试模式”这几个字，然后按下回车键。 接下来，你会看到一个名为“调试模式”的区域。在这里，你可以为其他用户启用调试模式。只需要点击“新建”按钮，然后从列表中选择你想要启用调试模式的用户。选择好用户后，点击“保存”按钮，这样就完成了。 启用调试模式后，这些用户在运行代码或进行其他操作时，系统会生成详细的日志信息。这些日志对于排查问题和优化性能非常有帮助。 记住，调试模式会生成大量的日志信息，所以只在需要的时候启用它，并且在使用完毕后及时关闭，以避免不必要的系统负担。 好了，这就是如何在Salesforce中启用调试模式的简单步骤。希望这对你有所帮助！如果有任何问题，随时问我。

    查看详情
  • 79

    How to Enable Debug Mode – Option 3

    第 132 页

    让我们来聊聊如何在Salesforce中启用收件箱模式，特别是通过Apex代码来实现这一点。这个方法非常适合那些需要频繁创建新的scratch org的开发人员，因为它可以自动化这个过程，节省时间。 首先，我们需要理解什么是收件箱模式。在Salesforce中，收件箱模式是一种用户界面模式，它优化了用户在Salesforce Lightning Experience中的邮件和任务管理体验。启用这个模式可以帮助用户更高效地处理他们的日常任务和沟通。 现在，让我们看看如何通过Apex代码来启用这个模式。你提供的代码片段是一个很好的例子。这段代码首先查询了一个特定的用户，然后更新了这个用户的偏好设置，启用了收件箱模式。具体来说，代码做了以下几件事： 1. 查询用户：代码首先通过用户名查询了一个用户记录。这里假设用户名是“用户用户”，你需要根据实际情况替换这个值。 2. 更新用户偏好：然后，代码设置了`userPreferencesUsegModePref`字段为`true`，这表示启用收件箱模式。 3. 更新用户记录：最后，代码通过`update`语句将更改保存到数据库中。 这段代码通常放在创建scratch org的脚本中，这样每次创建新的scratch org时，收件箱模式都会自动启用，而不需要手动操作。 总结一下，通过使用Apex代码，我们可以自动化启用Salesforce中的收件箱模式，这对于提高开发效率和用户体验都是非常有帮助的。希望这个解释对你有帮助！如果你有任何问题，随时问我。

    查看详情
  • 80

    What is “Minified JavaScript”?

    第 133 页

    让我们来聊聊“迷你化的JavaScript”。想象一下，你有一封信，信里有很多空行、空格和不必要的词语。如果你想让这封信更短，更快速地传递给别人，你会怎么做呢？你可能会删掉那些空行、空格和不必要的词语，对吧？这就是“迷你化”JavaScript代码的基本概念。 在技术世界里，当我们说“迷你化”JavaScript时，我们指的是通过删除代码中所有不必要的部分来优化它。这些不必要的部分包括空格、换行、制表符，甚至是那些帮助我们理解代码的注释。这样做的目的是让代码文件变得更小，这样当用户访问一个网站时，他们的浏览器可以更快地下载这些文件，从而提高网站的加载速度。 此外，迷你化过程还会改变代码中变量和函数的名称。比如，原本一个变量可能叫做`mySuperVariable`，在迷你化后，它可能就变成了一个简单的字母`d`。这样做不仅减少了代码的大小，还使得代码更难以被逆向工程，增加了一定的安全性。 在Salesforce的Lightning Web Components中，当你处于生产模式时，所有的JavaScript文件都会经过这样的迷你化处理。这意味着，当你的浏览器从Salesforce请求这些组件时，它接收到的是一份经过优化、体积更小的代码，这有助于提升应用的性能和响应速度。 所以，简单来说，迷你化的JavaScript就是通过删除不必要的字符和简化代码结构，来减少文件大小，加快网页加载速度的一种技术。

    查看详情
  • 81

    What is “Minified JavaScript”? (Prettified)

    第 134 页

    让我们来聊聊“迷你化的JavaScript”这个概念。想象一下，你有一篇很长的文章，为了节省空间，你决定去掉所有的空格、换行，甚至把一些长的词语替换成短的缩写。这样，文章就变得非常紧凑，占用的空间也小了。迷你化的JavaScript其实就是这个道理。 在开发网页或应用时，开发者写的JavaScript代码通常有很多空格、换行和详细的变量名，这些都是为了让代码更容易被人阅读和理解。但是，当这个代码要放到网上去运行时，为了加快加载速度，开发者会用工具把这些代码“压缩”一下，去掉不必要的空格、换行，甚至把长的变量名换成短的。这个过程就叫做“迷你化”。 现在，你可能会问，这样的代码怎么调试呢？别担心，虽然代码看起来很难读懂，但现代的浏览器，比如Chrome，提供了强大的开发者工具（DevTools）。在这个工具里，有一个“漂亮格式”的选项，可以把迷你化的代码重新格式化，加上适当的空格和换行，让它变得稍微容易理解一些。 在我们的幻灯片中，你看到的代码是经过迷你化处理的，所以变量名和函数名都变得很短，不容易直接理解。但是，这并不妨碍你调试它。你可以在Chrome DevTools中设置断点，运行代码时暂停，查看变量的值，甚至可以修改这些值来测试不同的情况。这就是为什么我们说，尽管代码被迷你化了，但它仍然是可调试的。 所以，下次当你看到一堆看起来乱七八糟的JavaScript代码时，记得，它可能只是被迷你化了，用对了工具，你依然可以轻松地调试它。

    查看详情
  • 82

    Debug Mode Enabled

    第 135 页

    让我们来聊聊Salesforce中的调试模式。想象一下，你正在处理一段代码，但这段代码被压缩得非常小，几乎无法阅读。这时候，调试模式就像是你的放大镜，它可以帮助你看清楚代码的每一个细节。 首先，我们有一段被压缩过的代码，它看起来就像是一团乱麻，没有任何空白，难以理解。但是，当我们启用了调试模式，就像是给这团乱麻解开了结，代码变得清晰易读。这时候，我们可以看到代码的结构，比如一个类是如何扩展另一个类的。 具体来说，我们看到了一个名为`StudentTile`的类，它扩展了`lwc.LightningElement`。这意味着`StudentTile`类继承了`LightningElement`的所有特性，并且可以在此基础上添加或修改功能。 所以，启用调试模式后，代码不再被压缩，所有的细节都清晰可见，这对于我们理解和调试代码是非常有帮助的。希望这个解释能帮助你更好地理解调试模式的作用。

    查看详情
  • 83

    Custom Formatters

    第 136 页

    同学们，今天我们来聊聊一个在Salesforce开发中可能会遇到的小挑战——如何在Chrome调试工具中更好地查看自定义脚本JavaScript代理中的数据。 首先，我们知道在Salesforce中，使用JavaScript代理可以帮助我们保持@api和@Wire属性的只读状态，并且可以观察@track属性的数据变化。但是，这样做的一个副作用是，Chrome的调试工具可能无法直接显示这些属性的实际值，这给调试带来了一些不便。 不过，别担心，Salesforce为我们提供了一个解决方案。当你在Salesforce中为你的用户开启调试模式时，会提供自定义格式器，这些格式器可以让代理数据在Chrome开发工具中变得可读。要使用这个功能，你需要在Chrome的开发人员工具设置中启用它。 现在，这里有个小技巧。找到自定义格式器选项可能会有点棘手，因为Chrome的设置分为常规设置和开发人员工具设置两部分。我强烈建议大家在开始练习之前，先花点时间熟悉一下如何找到这个设置。这样，当你在实际开发中需要调试时，就能快速找到并使用这个功能，而不是在遇到问题时才匆忙寻找。 记住，熟悉工具的使用是提高开发效率的关键。希望这个小技巧能帮助大家在Salesforce开发中更加得心应手！

    查看详情
  • 84

    Programmatically Setting Breakpoints

    第 137 页

    同学们，今天我们来聊聊如何在JavaScript代码中设置断点。断点是什么呢？简单来说，断点就是你在代码中设置的一个“暂停”按钮，当代码运行到这里时，它会停下来，让你有机会检查当前的变量值、程序状态等，这对于调试代码非常有用。 首先，我们来看第一种方法：在代码中直接添加“debugger;”语句。你只需要在你想要暂停的地方写上“debugger;”这行代码。当你在浏览器中运行这段代码，并且打开了开发者工具（通常按F12可以打开），代码运行到“debugger;”这一行时，就会自动暂停。这个方法的好处是，不管是谁，只要他们打开了开发者工具并运行这段代码，都会在这个断点处暂停。 接下来是第二种方法：在浏览器的“源”选项卡中手动添加断点。这种方法不需要修改代码。你只需要打开开发者工具，切换到“源”选项卡，找到你想要暂停的代码行，然后点击行号旁边的空白区域，就会出现一个蓝色的标记，这就是你设置的断点。这种方法的好处是，它只影响你自己的浏览器，不会影响其他运行这段代码的人。 这两种方法各有优缺点，第一种方法适合在开发过程中快速调试，而第二种方法则更适合在你不想修改代码的情况下进行调试。希望这些信息对你们有帮助，下次调试代码时，不妨试试这些方法吧！

    查看详情
  • 85

    Stepping Through Your Code

    第 138 页

    让我们来聊聊如何在Salesforce中逐步执行代码。想象一下，你正在编写一段代码，但不确定它是否按预期工作。这时，调试器就像你的好朋友，帮你一步步检查代码的运行情况。 首先，你可以使用调试器控件来逐步执行代码。这就像是在看一部电影，你可以一帧一帧地播放，看看每一帧发生了什么。在代码中，你可以一行一行地执行，看看每一行代码是如何影响程序的。 其次，你还可以设置“监视运算式”。这就像是在你的代码中放了一个小摄像头，专门盯着某个变量。每当这个变量的值发生变化时，你都能立即看到。这样，你就可以清楚地了解代码是如何更改变量的内容的。 通过这些方法，你可以更深入地理解你的代码，确保它按照你的预期运行。希望这些信息对你有帮助！

    查看详情
  • 86

    Throttle Network Speed when Testing Your Application

    第 139 页

    今天我们来聊聊如何在测试应用程序时限制网络速度。你知道吗，Chrome DevTools 提供了一个非常方便的功能，可以帮助我们模拟不同的网络速度。这对于测试应用程序在不同网络条件下的表现非常有用。 首先，打开你的 Chrome 浏览器，然后按下 F12 或者右键点击页面，选择“检查”来打开 DevTools。接着，找到并点击“网络”选项卡。在这里，你会看到一个叫做“在线”的下拉菜单，点击它，你会看到一系列预设的网络速度选项，比如“快速3G”、“慢速3G”等。 选择你想要的网络速度，然后刷新你的页面，这样你就可以看到你的应用程序在这个网络速度下的表现了。这个方法简单又实用，可以帮助你更好地优化你的应用程序，确保它在各种网络环境下都能良好运行。试试看吧！

    查看详情
  • 87

    Instructor Demo: Using Git for Checkpoints in VS Code

    第 140 页

    同学们，今天我们来聊聊在VS Code中使用Git进行版本控制的一个小技巧，这个技巧会让你们在编程的路上走得更顺畅。 首先，想象一下，你正在做一个项目，修改了很多文件，但突然发现代码出错了。这时候，如果你没有及时“提交”你的更改，那么要找出问题所在就会变得非常困难。因为你可能已经修改了25个文件，却不知道具体是哪个文件出了问题。所以，养成及时提交的习惯非常重要。 现在，我们来看看如何在VS Code中操作。首先，确保你的工作目录是“干净”的，也就是说，所有的文件都已经提交了，源代码管理选项卡上没有任何未提交的更改。 接下来，我们来做个小实验。对至少两个文件做一些简单的修改。你会注意到，源代码管理选项卡上的数字会变成“2”，这表示有两个文件被修改了。你可以点击“源”选项卡，查看这两个文件的具体更改。 VS Code还提供了一个非常方便的“差异”视图，你可以轻松地看到每个文件中具体发生了哪些变化。这个功能对于理解代码的改动非常有帮助。 最后，如果你发现这些更改并不需要，或者你想重新开始，你可以选择放弃这些更改。这样，你的工作目录就又回到了一个干净的状态。 记住，及时提交你的更改，这样不仅可以避免混乱，还能在遇到问题时更快地找到解决方案。希望这个小技巧能帮助你们在编程的道路上更加顺利！

    查看详情
  • 88

    Using GitLens to Compare Two Branches

    第 141 页

    同学们，今天我们来聊聊如何使用GitLens来比较两个分支的代码。GitLens是一个非常强大的工具，它可以帮助我们更清晰地看到代码的变化。 首先，假设我们有两个分支，一个是你的工作分支，另一个是解决方案分支。我们想要看看这两个分支之间有什么不同。 1. ，比较两个分支，：在GitLens中，你可以轻松选择两个分支进行比较。你只需要在GitLens的界面中找到“选择比较/与选定内容进行比较”的功能，然后选择你想要比较的两个分支。这样，GitLens就会显示出这两个分支之间的所有差异。 2. ，查看所有提交，：在比较分支的同时，GitLens还会列出所有相关的提交。这意味着你可以看到每个提交的详细信息，包括谁提交的、什么时候提交的，以及提交的具体内容。 3. ，查看所有文件更改，：接下来，你可以查看所有文件的更改。GitLens会列出所有在两个分支之间有差异的文件。你可以点击每个文件，查看具体的更改内容。 4. ，单击文件查看累积更改，：当你点击一个文件时，GitLens会展示出这个文件在两个分支之间的累积更改。这样，你可以非常清楚地看到每一行代码的变化。 5. ，将代码与解决方案进行比较，：在整个课程中，你会发现将你的代码与解决方案进行比较非常有帮助。通过GitLens，你可以轻松地将当前分支与解决方案分支进行比较，看看你的代码是否达到了预期的效果。 总之，GitLens为我们提供了一个简单而有效的方法来比较代码，帮助我们更好地理解和掌握代码的变化。希望这个工具能帮助大家在开发过程中更加得心应手！

    查看详情
  • 89

    Writing Jest Tests

    第 142 页

    让我们来聊聊如何在Salesforce的Lightning Web Components (LWC) 中编写和运行测试。想象一下，你正在为一个小组件编写测试，这个组件叫做“Hello”，它的任务很简单，就是在页面上显示“Hello, World!”。 首先，我们需要导入一些工具来帮助我们创建和测试这个组件。我们使用`createElement`方法，这个方法只在测试环境中可用。我们还需要导入我们想要测试的组件，也就是`c/Hello`。这些导入就像是我们的工具箱，让我们能够构建和测试我们的组件。 接下来，我们定义一个测试描述块。你可以把它想象成一个文件夹，里面装满了相关的测试。每个测试都是一个小故事，讲述我们期望组件如何工作。在这个例子中，我们的故事是：“Hello组件应该显示‘Hello, World!’”。 在测试运行之前，我们需要确保我们的测试环境是干净的。我们使用`Jest_After Each()`方法来重置DOM。因为测试是在没有浏览器的情况下运行的，Jest使用了一个叫做jsdom的工具来模拟浏览器的环境。这样，我们就可以在测试中像在真实浏览器中一样操作DOM了。 现在，我们开始创建我们的组件实例。我们使用之前导入的`createElement`方法来创建`c-Hello`组件的一个实例。这就像是在我们的测试舞台上放置了一个演员，准备开始表演。 然后，我们将这个组件添加到DOM中。这就像是让我们的演员走上舞台，开始表演。当组件被添加到DOM中时，它的`renderedCallback()`生命周期方法会被调用，这意味着组件已经被渲染并准备好显示内容了。 最后，我们使用`expect`语句来断言我们的组件是否按照预期工作。在这个例子中，我们断言组件的文本内容应该是“Hello, World!”。如果这个断言成立，那么我们的测试就通过了，我们的组件工作正常。 这就是一个简单的测试流程，从准备工具，到定义测试，再到执行和验证。希望这个解释能帮助你理解如何在Salesforce中编写和运行测试。

    查看详情
  • 90

    Instructor Demo: Test Lightning Web Components

    第 143 页

    同学们，今天我们来聊聊如何在Salesforce中测试Lightning Web组件，特别是使用Jest这个工具。Jest是一个非常流行的JavaScript测试框架，它可以帮助我们确保我们的代码按预期工作。 首先，我们要明确一点：使用Jest进行测试时，并没有强制性的覆盖范围要求。这意味着你可以根据项目的需要来决定测试的深度和广度，不必担心必须达到某个特定的测试覆盖率。 接下来，值得注意的是，这些测试脚本是存储在代码仓库中的，而不是Salesforce组织元数据的一部分。这样做的好处是，测试脚本不会影响到你的生产环境，同时也可以方便地进行版本控制和团队协作。 最后，我们可以将这些测试集成到持续集成（CI）流程中。这意味着每次当你提交代码到Git仓库时，可以自动运行这些测试，确保新提交的代码不会引入新的错误。这就像是一个自动化的质量检查员，帮助我们在代码合并到主分支之前发现问题。 总之，使用Jest进行Lightning Web组件的测试，不仅可以帮助我们提高代码质量，还可以通过自动化流程来节省时间和减少错误。希望这些信息对你们有所帮助，现在让我们动手试试吧！

    查看详情
  • 91

    Experiment with Debugging and Logging

    第 144 页

    同学们，今天我们来聊聊一个非常实用的练习。这个练习主要是让你们熟悉一些开发工具，比如收件箱、日志记录、三角机断点、踏步，还有客户端控制台日志和GitLens。听起来有点复杂，但其实很简单，我们一步步来。 首先，收件箱和日志记录是开发过程中常用的工具。收件箱可以帮助你管理收到的信息，而日志记录则是用来记录程序运行时的各种信息，方便你后续查看和调试。 接下来是三角机断点和踏步。这两个词听起来有点技术性，但其实它们就是调试工具。断点是你设置在代码中的标记，程序运行到这里时会暂停，方便你查看此时的状态。踏步则是让你一步步执行代码，看看每一步的变化。 客户端控制台日志是你在浏览器中查看程序运行时的输出信息。你可以通过它来查看程序是否按预期运行，或者哪里出了问题。 最后是GitLens，这是一个非常强大的版本控制工具。它可以帮助你更好地管理代码的版本，查看代码的修改历史，甚至是谁在什么时候修改了哪一行代码。 这个练习的目的不是要你马上掌握所有工具，而是让你慢慢熟悉它们，感受它们的功能。所以，不要着急，慢慢来，享受这个过程。等你熟悉了这些工具，你会发现开发工作变得更加轻松和高效。 好了，这就是今天的练习内容。希望你们能从中有所收获，下次见！

    查看详情
  • 92

    Unit 2: Introducing Lightning Web Components - 145

    第 145 页

    同学们，今天我们要聊的是Salesforce中的Lightning Web组件，简称LWC。这是一个非常强大的工具，可以帮助我们构建动态、响应式的用户界面。 首先，我们来了解一下什么是Lightning Web组件模型。简单来说，它是一套基于现代Web标准的框架，允许我们使用HTML、JavaScript和CSS来创建组件。这些组件可以在Salesforce的Lightning平台上运行，提供丰富的用户体验。 接下来，我们会学习如何创建Lightning Web组件。这个过程其实很简单，你只需要使用Salesforce提供的工具，比如Salesforce CLI或者开发者控制台，就可以快速创建一个新的组件。创建好之后，你就可以开始编写HTML模板和JavaScript控制器了。 然后，我们会讨论如何给这些组件添加样式。你可以使用CSS来定制组件的外观，让它们看起来更符合你的品牌或者用户的需求。 定义组件属性也是很重要的一步。属性允许你从外部传入数据到组件中，这样你的组件就可以根据不同的数据展示不同的内容。 处理多姆事件是另一个关键点。在Web开发中，事件是用户与页面交互的桥梁。在LWC中，你可以监听这些事件，并做出相应的反应，比如更新数据或者改变界面。 当然，我们也会学习如何卸载不再需要的Lightning Web组件，以优化性能和资源使用。 使用Salesforce数据是LWC的一个亮点。你可以轻松地从Salesforce数据库中获取数据，并在组件中展示出来。这大大简化了数据驱动的应用开发。 我们还会介绍一些基本的Lightning组件，比如按钮、输入框等，这些都是构建用户界面的基础。 提出和处理事件是组件间通信的一种方式。你可以让一个组件触发事件，另一个组件监听并响应这个事件，从而实现组件间的交互。 最后，我们会探讨用户之间的高级通信。这包括如何在不同的用户之间共享数据，以及如何实现实时的数据同步。 好了，这就是我们今天要讲的内容。希望你们能对Lightning Web组件有一个初步的了解。接下来，我们会一步步深入，让你们能够熟练地使用这些工具来构建强大的Salesforce应用。让我们一起开始这段精彩的旅程吧！

    查看详情
  • 93

    Lightning Data Service

    第 146 页

    同学们，今天我们来聊聊Lightning Data Service（LDS）。这是一个非常强大的工具，它可以帮助我们在Salesforce中更高效地处理记录数据和元数据。简单来说，LDS就像是我们的数据助手，它让我们能够轻松地从Salesforce数据库中获取信息，而不需要写很多复杂的代码。 首先，我们有几个基本的Lightning组件可以使用，比如“闪电记录形式”、“闪电记录编辑形式”和“闪电记录视图形式”。这些组件就像是现成的模板，我们可以直接拿来用，快速展示或编辑记录。 接下来，如果我们想要从Salesforce数据库中读取信息，有两种主要的方法：一种是使用Apex Classes，另一种是使用用户界面API（UI API）。Apex Classes就像是自定义的查询工具，我们可以自己编写SOQL或SOSL查询语句，然后把结果返回给我们的组件。而UI API则更加自动化，它位于LDS之上，让我们能够处理单个记录，而不需要写Apex类。这意味着CRED（创建、读取、编辑、删除）和FLS（字段级安全性）这些复杂的操作，UI API都会帮我们自动处理。 所以，总结一下，LDS和UI API让我们的工作变得更加简单和高效。我们不需要深入了解所有的技术细节，只需要知道它们能帮我们做什么，然后选择合适的工具来使用就可以了。希望这个简单的介绍能帮助大家更好地理解LDS的作用和优势。我们后续会有更多的幻灯片来深入探讨这个话题，所以现在大家只需要有个大致的了解就好。

    查看详情
  • 94

    User Interface API or Apex?

    第 147 页

    今天我们来聊聊Salesforce中的用户界面API和Apex。这两个工具在处理数据时都非常有用，但它们的使用场景有所不同。 首先，用户界面API。如果你正在处理单个记录，并且是通过recordId来查询这个记录，那么用户界面API是你的好帮手。为什么呢？因为它可以自动处理字段级别的安全性（FLS）、跨记录类型的数据访问（CRED）以及记录共享规则。这意味着你不需要手动去检查这些权限，用户界面API会帮你搞定。你可以轻松地读取和写入数据，而不用担心安全问题。 但是，如果你需要处理多个记录，或者虽然只处理一个记录，但你是通过recordId以外的条件来查询的，比如通过某个字段的值来查找记录，那么你就需要用到Apex了。Apex是一种编程语言，它允许你编写更复杂的逻辑来处理数据。不过，使用Apex时，你需要自己手动处理字段级别的安全性和跨记录类型的数据访问。这意味着你需要确保你的代码遵守Salesforce的安全模型，保护数据不被未授权的访问。 总结一下，用户界面API适合简单的、基于recordId的单个记录操作，而Apex则适合更复杂的、需要自定义逻辑的数据处理。希望这能帮助你更好地理解何时使用用户界面API，何时使用Apex。

    查看详情
  • 95

    Using lightning/uiRecordApi

    第 148 页

    今天我们来聊聊如何在Salesforce的Lightning Web Components (LWC)中使用`lightning/uiRecordApi`来获取和处理记录数据。这个API非常强大，能让我们轻松地与Salesforce的数据进行交互。 首先，假设我们有一个记录的ID，我们想通过这个ID来获取这条记录的详细信息。这时候，我们就可以使用`getRecord`函数。这个函数非常直接，你只需要提供记录的ID，它就会返回这条记录的所有字段数据。 接下来，我们可能只需要记录中的某个特定字段的值。这时候，`getFieldValue`和`getFieldDisplayValue`就派上用场了。这两个函数可以帮助我们从返回的记录数据中提取出我们需要的字段值。`getFieldValue`会返回字段的原始值，而`getFieldDisplayValue`则会返回字段的显示值，这对于处理一些特殊类型的字段（如选择列表）特别有用。 除了这些，`lightning/uiRecordApi`还提供了很多其他的方法，比如`DeliverRecord`和`updateRecord`，这些方法可以帮助我们进一步操作记录数据。如果你对这些方法感兴趣，可以访问Salesforce的官方文档，那里有详细的介绍和示例。 总之，`lightning/uiRecordApi`是一个非常实用的工具，能帮助我们在LWC中高效地处理Salesforce的数据。希望今天的讲解对你有帮助，如果有任何问题，随时提问哦！

    查看详情
  • 96

    What is Wire Service?

    第 149 页

    让我们来聊聊电讯服务（Wire Service）在Salesforce中的应用。想象一下，你有一个组件，这个组件需要从Salesforce中获取一些数据来显示。电讯服务就像是一个聪明的助手，它可以帮助你的组件自动获取这些数据，而不需要你手动去调用复杂的代码。 当你使用电讯服务时，你的组件会通过JavaScript类中的`@Wire`装饰器，从`lightning/ui*Api`模块中调用一个电线适配器。这个适配器就像是数据的搬运工，它负责从Salesforce中获取数据，并将这些数据传递给组件。 电讯服务提供的是一个不可变的数据流。这意味着，一旦数据被传递到组件中，它就不会被改变。每次数据更新时，电讯服务都会提供一个全新的数据版本，这样你的组件总是能够显示最新的信息。 但是，有一点需要注意，你不能将TLR（Test Level Run）陈述与电讯服务一起使用。这是因为电讯服务的设计是为了在运行时动态获取数据，而TLR陈述通常用于测试环境中，它们的工作方式不同，所以不能混用。 简单来说，电讯服务让你的组件能够轻松地获取和显示Salesforce中的数据，而且这些数据总是最新的。你只需要设置好`@Wire`，剩下的就交给电讯服务来处理吧！

    查看详情
  • 97

    Wiring a Property for Lightning Data Service (JavaScript)

    第 150 页

    让我们来聊聊如何使用Lightning Data Service（LDS）在Salesforce Lightning组件中获取和显示数据。今天我们要讲的例子是一个简单的组件，它的任务是接受一个记录的ID，并显示与该记录关联的电子邮件地址。 首先，我们需要一个公共属性，叫做`recordId`。这个属性会从父组件传递进来，告诉我们具体要显示哪条记录的信息。 接下来，我们会使用一个叫做`Wire`的装饰器。这个装饰器允许我们连接到Salesforce的数据服务，而不需要写任何Apex代码。我们还会从`lightning/uiRecordApi`模块中导入`getRecord`方法，这个方法可以帮助我们获取记录的数据。 在我们的例子中，我们特别关注电子邮件字段。为了确保我们只获取这个字段，我们会从`lightning/uiRecordApi`模块中导入对电子邮件字段的引用。这样，当我们调用`getRecord`方法时，我们可以明确地告诉它我们只需要电子邮件字段。 这里有一个有趣的点，我们称`recordId`为反应性变量。这意味着如果`recordId`的值发生变化，`getRecord`方法会自动重新获取数据。这就是为什么我们在代码中看到`$recordId`，它表示这个变量是反应性的。 在组件中显示数据时，我们通常会使用一个getter方法。在这个例子中，我们定义了一个叫做`email`的getter。这个方法会返回一个字符串“尚未加载”，直到数据从服务器返回为止。一旦数据到达，我们就可以使用`getFieldValue`或`getFieldDisplayValue`方法来获取并显示电子邮件的值。 最后，老师提到，虽然我们可以直接传入字段名称的字符串（例如`[&#39;Contact.Email&#39;]`），但最佳实践是导入这些字段的引用。这样做的好处是，它可以在编译时检查这些字段是否真的存在，从而避免运行时错误。 这就是我们今天的内容，希望你们能理解如何使用Lightning Data Service来获取和显示数据。如果有任何问题，随时提问！

    查看详情
  • 98

    Options for Wire Service

    第 151 页

    让我们来聊聊有线服务（Wire Service）在Salesforce中的使用。首先，有线服务是一个非常强大的工具，它可以帮助我们在Lightning Web Components（LWC）中轻松地获取数据。你可以把它想象成一个“数据管道”，它可以直接从服务器获取数据，然后把这些数据传递给你的组件。 一开始，你可能会觉得有线服务有点复杂，因为它既可以用于方法，也可以用于属性。但别担心，我们慢慢来。 想象一下，你有一个组件，需要从Salesforce服务器获取一些记录。你可能会使用`getRecord`这个有线服务方法来获取数据。通常，我们会把这个方法连接到一个属性上，这样当数据从服务器返回时，它就会自动更新这个属性。 但是，这里有两个问题需要考虑： 1. ，数据转换，：有时候，服务器返回的数据并不是我们直接想要的格式。我们可能需要对数据进行一些处理或转换，然后再使用它。 2. ，错误处理，：如果服务器在获取数据时出错了，我们可能希望运行一些自定义的代码来处理这个错误，而不是直接让组件崩溃。 那么，我们该怎么办呢？答案是：我们可以连接一个函数，而不是直接连接一个属性。 通过连接一个函数，我们可以在数据返回时对数据进行处理，或者在出错时执行一些自定义的逻辑。这样，我们就有了更多的控制权，可以确保数据在进入组件之前是符合我们要求的。 总结一下，有线服务是一个非常灵活的工具，它不仅可以连接属性，还可以连接函数。通过连接函数，我们可以更好地控制数据的处理和错误的管理。希望这个解释能帮助你更好地理解有线服务的使用！

    查看详情
  • 99

    Wiring a Function for Lightning Data Service (JavaScript)

    第 152 页

    让我们来聊聊这段代码的亮点和一些需要注意的地方。 首先，我们有一个公共属性叫做`recordID`，这个属性是作为反应变量提供给`wire`服务的。这意味着当`recordID`的值发生变化时，`wire`服务会自动重新获取数据。 接下来，我们不是直接装饰一个属性，而是装饰一个方法，这个方法的名字叫做`WiredContact`。这个名字其实没有什么特别的含义，它只是一个方法名，不能在其他地方使用，但它也不能是匿名的。这个方法会接收一个对象，这个对象有两个属性：`Error`和`Data`。 我们需要一个地方来存放这些数据或错误信息，所以我们声明了两个属性来存储记录和错误。这里有一个重要的点：我们不可能同时接收到错误和数据。也就是说，要么我们接收到数据，要么我们接收到错误，但不会同时接收到两者。这就是为什么我们在每个子句中都要将另一个属性设置为`UNDEFINED`。 另外，当`wire`服务初始化时，可能会发生既没有接收到错误也没有接收到数据的情况。所以，即使我们已经检查了`if(Data)`，我们仍然需要在`else`子句中检查`if(Error)`。 最后，关于语法`@wire(参数)wiredMethodName`，这应该会让你想起使用带参数的Apex注解，比如`@Future(allout=true)ApexMethodName`。这种语法结构在Apex中也很常见，用来指定方法的执行方式或行为。 总结一下，这段代码展示了如何使用`wire`服务来动态获取数据，并处理可能出现的错误。通过装饰一个方法而不是属性，我们可以更灵活地控制数据的获取和处理过程。希望这些解释能帮助你更好地理解这段代码的工作原理！

    查看详情
  • 100

    Markup for Displaying Data Retrieved using Wire Service

    第 153 页

    让我们来聊聊这个话题。想象一下，你有一个收件箱，里面装满了各种邮件。现在，你想从这些邮件中找出一些特定的信息，比如某个特定客户的邮件。这时候，你就需要一种方法来检索这些数据。 在Salesforce中，我们使用一种叫做Wire Service的技术来帮助我们做这件事。Wire Service就像是一个智能助手，它可以帮助我们从大量的数据中快速找到我们需要的信息。 在这个例子中，我们特别关注的是recordId。recordId就像是每封邮件的身份证号码，它唯一标识了每一封邮件。只有当recordId被定义时，我们才能确保我们检索到的数据是有意义的。所以，我们会根据recordId是否被定义来决定是否显示某些信息。 另外，我们还会使用一个叫做“电子邮件获取器”的工具。这个工具就像是一个专门用来抓取邮件的机器人，它可以帮助我们从收件箱中提取出我们需要的邮件数据。 所以，总结一下，Wire Service帮助我们检索数据，recordId确保数据的准确性，而电子邮件获取器则帮助我们获取具体的邮件信息。这样，我们就可以轻松地从收件箱中找到我们需要的数据了。

    查看详情
  • 101

    Exposing an Apex Method to a Lightning Web Component

    第 154 页

    让我们来聊聊如何将Apex方法公开给Lightning Web组件。想象一下，你有一个强大的工具，可以帮助你从服务器端获取数据或执行一些复杂的操作。这个工具就是Apex方法。但是，为了让Lightning Web组件能够使用这个工具，我们需要做一些准备工作。 首先，我们需要确保这个Apex方法可以被Lightning Web组件“看到”和“使用”。为此，我们需要在Apex方法上加上一个特殊的标记，叫做`@AuraEnabled`。这个标记就像是一个信号灯，告诉Lightning Web组件：“嘿，我在这里，你可以调用我！” 接下来，这个Apex方法需要是“公开”的，也就是说，它的访问修饰符必须是`global`或`public`。这样，Lightning Web组件才能从外部访问它。 最后，这个方法还必须是“静态”的。静态方法意味着你不需要创建类的实例就可以直接调用它。这就像是你有一个可以直接使用的工具，而不需要先组装它。 总结一下，要让Apex方法可以被Lightning Web组件调用，你需要： 1. 使用`@AuraEnabled`注解。 2. 将方法设置为`global`或`public`。 3. 确保方法是静态的。 这样，你的Lightning Web组件就可以轻松地调用这个Apex方法，获取数据或执行操作了。希望这个解释对你有帮助！

    查看详情
  • 102

    Enabling Client-Side Caching

    第 155 页

    让我们来聊聊如何在Lightning Web组件中使用Apex方法，并且如何通过启用客户端缓存来提升性能。 首先，我们有两种方式可以从Lightning Web组件调用Apex方法：一种是使用Wire服务，另一种是使用命令式Apex。今天我们先聊聊Wire服务。 当我们使用Wire服务调用Apex方法时，有一个小技巧可以提升性能，那就是在Apex方法的@AuraEnabled注释上设置cacheable=true。这样做的好处是，组件可以快速显示来自客户端存储的缓存数据，而不需要每次都等待服务器响应。如果缓存的数据已经过时了，框架会自动从服务器获取最新的数据。 那么，如何刷新这个缓存呢？有两种方式： 1. 改变反应变量的值（这个我们已经讨论过了）。 2. 调用refreshApex方法（这个我们会在后面的课程中详细讲解）。 另外，对于那些有Aura背景的同学，可能会问这和setStorable()有什么关系。简单来说，以前在Aura组件中，我们需要在客户端声明服务器调用为可缓存的，但现在在Lightning Web组件中，我们直接在服务器端的Apex方法上使用@AuraEnabled(cacheable=true)，这样更加集中和方便。 这就是今天的内容，希望你们能理解并记住这些要点。如果有任何问题，随时问我哦！

    查看详情
  • 103

    By Default, Apex Classes and Triggers…

    第 156 页

    让我们来聊聊Apex类和触发器，以及它们与Lightning组件之间的互动。首先，Apex类是Salesforce平台上的一种编程语言，它允许开发者创建复杂的业务逻辑。而触发器则是在特定事件发生时自动执行的代码块，比如在记录被插入、更新或删除时。 现在，当我们谈到Lightning组件调用Apex方法时，这里有一个关键点需要注意：这些Apex方法是在系统上下文中运行的。这意味着什么呢？简单来说，就是这些方法在执行时，不会考虑当前用户的权限设置。具体来说，以下三项安全措施不会对当前用户强制执行： 1. ，CRED收件箱，：这是Salesforce中的一种安全机制，用于控制用户对特定记录的访问权限。但在系统上下文中，这些限制会被忽略。 2. ，现场级安全（FLS），：这涉及到字段级别的权限控制，比如哪些用户可以查看或编辑某个字段。在系统上下文中，这些权限设置也不会被考虑。 3. ，共享规则，：这些规则定义了用户之间如何共享记录。同样，在系统上下文中，这些规则也不会被强制执行。 那么，为什么我们要关心这些呢？因为如果你在开发Lightning组件时，没有考虑到这些安全模型，可能会导致安全漏洞，比如用户能够访问或修改他们本不应该接触的数据。 在接下来的内容中，我们会介绍一些技术，帮助你在需要时强制执行这些安全模型。这样，你就可以确保你的应用程序既强大又安全。希望这些信息对你有帮助！

    查看详情
  • 104

    Enforcing Sharing Rules

    第 157 页

    今天我们来聊聊Salesforce中的共享规则和Apex类中的共享关键字。这个话题对于确保数据安全和正确访问非常重要。 首先，我们来看一下共享规则。共享规则决定了用户可以看到哪些数据。在Salesforce中，数据访问控制是非常严格的，共享规则就是其中的一部分。 在Apex编程中，我们有几个关键字可以帮助我们控制这些共享规则： 1. ，WITH SHARING，：当你在声明一个类时使用这个关键字，它会强制实施适用于当前用户的共享规则。这意味着，如果你的类中有查询或操作数据的代码，它会尊重用户的共享设置，只允许用户访问他们有权限看到的数据。 2. ，WITHOUT SHARING，：这个关键字的作用正好相反。使用它声明的类不会强制实施当前用户的共享规则。这在某些情况下非常有用，比如当你需要从一个已经实施了共享规则的类中调用另一个类，但希望在这个被调用的类中忽略共享规则时。 3. ，INHERITED SHARING，：这是一个比较新的关键字。使用它声明的类会根据调用它的类的共享模式来运行。如果调用它的类使用了WITH SHARING，那么这个类也会尊重共享规则；如果调用它的类使用了WITHOUT SHARING，那么这个类也会忽略共享规则。 这里有一个重要的区别：如果你在Apex类中省略了共享关键字，那么当这个类作为Apex事务的入口点时，它会默认以WITHOUT SHARING的方式运行。但是，如果你使用了INHERITED SHARING，它会默认以WITH SHARING的方式运行，除非它被显式地在一个没有共享的上下文中调用。 这些关键字在开发Lightning组件控制器、Visualforce控制器、Apex REST服务等时都非常有用。它们帮助开发者确保数据访问的安全性和正确性。 希望这些解释能帮助你更好地理解Salesforce中的共享规则和Apex类中的共享关键字。如果你有更多问题，随时提问！

    查看详情
  • 105

    Simple Object-Level and Field-Level Security

    第 158 页

    让我们来聊聊Salesforce中的对象级和字段级安全，特别是关于`WITH SECURITY_ENFORCED`这个SOQL子句的使用。 首先，想象一下，你有一个数据库，里面存储了很多敏感信息，比如社会安全号码（SSN）。在Salesforce中，我们通过对象和字段来组织这些数据。对象就像是数据库中的表格，而字段则是表格中的列。 现在，假设你正在编写一个Apex代码，想要查询这些数据。但是，你不想让所有用户都能看到所有的数据，尤其是像SSN这样的敏感信息。这就是对象级和字段级安全发挥作用的地方。 `WITH SECURITY_ENFORCED`是一个SOQL（Salesforce Object Query Language）子句，它可以帮助你在查询时强制执行这些安全设置。简单来说，当你把这个子句加入到你的SOQL查询中时，Salesforce会检查当前用户是否有权限访问你查询的对象和字段。 如果用户没有权限访问某个字段或对象，Salesforce不会返回任何数据，而是会抛出一个异常。这就像是一个严格的保安，确保只有有权限的人才能看到特定的信息。 这个功能特别适合那些对安全开发不太熟悉的Apex开发人员，或者那些不需要处理复杂权限错误的应用程序。它简化了安全性的管理，让你不需要在代码中手动检查每个字段和对象的权限。 但是，需要注意的是，`WITH SECURITY_ENFORCED`只能在Apex代码中使用，不能在开发控制台的查询编辑器中运行。此外，如果你的Apex类或触发器的API版本早于45.0，也不建议使用这个子句。 总结一下，`WITH SECURITY_ENFORCED`是一个强大的工具，可以帮助你在Salesforce中轻松管理对象和字段级别的安全性。它确保了只有有权限的用户才能访问特定的数据，从而保护了敏感信息的安全。希望这个解释能帮助你更好地理解这个概念！

    查看详情
  • 106

    Detailed Object and Field-Level Security using Apex Describe Information

    第 160 页

    今天我们来聊聊如何在Salesforce中使用Apex代码来确保对象和字段级别的安全性。这个话题非常重要，因为它关系到我们如何保护数据不被未授权的用户访问或修改。 首先，我们来看一个简单的Apex方法示例，这个方法叫做`createContact`，它的目的是创建一个新的联系人记录。在这个方法中，我们首先定义了一个集合`fieldsToCheck`，这个集合包含了我们需要检查权限的字段，比如联系人的名字、姓氏、电话和关联的账户ID。 接下来，我们创建了一个`NoAccessException`的实例，这是一个自定义的异常类，用来在用户没有权限时抛出异常。 然后，我们使用`Contact.sobjectType.getDescribe().isCreateable()`来检查当前用户是否有权限创建联系人记录。如果没有权限，我们就设置异常信息并抛出异常。 之后，我们遍历`fieldsToCheck`集合中的每一个字段，使用`field.getDescribe().isCreateable()`来检查用户是否有权限创建这些字段。如果用户没有权限，我们同样设置异常信息并抛出异常。 如果所有的检查都通过了，那么我们就可以安全地插入新的联系人记录了。 这个方法的核心思想是尊重运行用户的对象和字段访问权限。通过这种方式，我们可以确保只有具有适当权限的用户才能执行特定的操作。 最后，我还想提一下，如果你需要比`WITH_SECURITY_ENFORCED`更精细的控制，你可以选择使用Apex Describe信息来检查和强制用户访问对象或字段。这种方法可以让你在用户没有权限时，优雅地响应而不是直接抛出错误。 希望这个解释对你有帮助，如果你有任何问题，随时问我！

    查看详情
  • 107

    Techniques for Implementing CRED and Field-Level Security

    第 161 页

    让我们来回顾一下实施CRED（自定义报告、仪表板、电子邮件和文档）以及FLS（字段级安全性）的一些关键方法。这些技术对于确保你的Salesforce环境既安全又高效至关重要。 首先，关于CRED的实施，我们通常会关注以下几个方面： 1. ，自定义报告，：创建报告时，确保你只选择那些对用户真正有用的字段。这不仅可以帮助用户更快地找到他们需要的信息，还可以减少数据冗余。 2. ，仪表板，：仪表板是展示关键业务指标的好方法。确保你的仪表板设计简洁，只包含最重要的数据，这样用户可以一目了然地获取信息。 3. ，电子邮件模板，：在创建电子邮件模板时，确保它们简洁明了，并且包含所有必要的信息。这样可以提高沟通效率，减少误解。 4. ，文档管理，：确保所有文档都存储在适当的位置，并且只有授权用户可以访问。这有助于保护敏感信息，同时确保团队成员可以轻松找到他们需要的文档。 接下来，我们来看看FLS的实施： 1. ，字段级安全性，：通过设置字段级安全性，你可以控制哪些用户可以查看或编辑特定字段。这对于保护敏感数据非常重要。 2. ，配置文件，：确保每个用户的配置文件都正确设置，以便他们只能访问他们需要的字段和数据。 3. ，权限集，：使用权限集来授予用户额外的访问权限，而不必更改他们的配置文件。这提供了更大的灵活性。 4. ，验证规则，：设置验证规则以确保数据输入的正确性。这可以帮助防止错误数据进入系统。 最后，记得定期审查和更新你的CRED和FLS设置，以确保它们仍然符合你的业务需求和安全要求。希望这些回顾对你有所帮助！

    查看详情
  • 108

    Wiring an Apex Method

    第 162 页

    同学们，今天我们来聊聊如何在Salesforce的Lightning Web Components（LWC）中使用Apex方法。这个例子中，我们有一个名为`StudentBrowser`的Apex类，里面定义了一个公共的、静态的、可缓存的方法`getInstructors`。这个方法的作用是从用户表中获取一定数量的记录。 首先，我们来看一下Apex代码部分： ```apex public with sharing class StudentBrowser { @AuraEnabled(cacheable=true) public static List getInstructors(Integer recordCount) { return [SELECT Id FROM User LIMIT :recordCount]; } } ``` 这里，`getInstructors`方法接受一个整数参数`recordCount`，并返回一个用户列表，列表中的用户数量不超过`recordCount`指定的数量。这个方法被标记为`@AuraEnabled`，这意味着它可以从客户端JavaScript代码中调用。`cacheable=true`表示这个方法的结果可以被缓存，以提高性能。 接下来，我们来看一下LWC的JavaScript部分： ```javascript import { LightningElement, track, wire } from &#39;lwc&#39;; import getInstructors from &#39;@salesforce/apex/StudentBrowser.getInstructors&#39;; export default class WireApex extends LightningElement { @track instructors; @track error; maxRecords = 3; @wire(getInstructors, { recordCount: &#39;$maxRecords&#39; }) wiredInstructors({ error, data }) { if (data) { this.instructors = data; this.error = undefined; } else if (error) { this.instructors = undefined; this.error = error; } } } ``` 在这段代码中，我们首先导入了`LightningElement`、`track`和`wire`装饰器，以及我们刚刚定义的`getInstructors`方法。然后，我们定义了一个名为`WireApex`的类，它扩展了`LightningElement`。 在这个类中，我们使用了`@track`装饰器来跟踪`instructors`和`error`这两个属性的变化。`maxRecords`是一个固定值，设置为3，表示我们最多获取3条用户记录。 `@wire`装饰器用于将`getInstructors`方法与`wiredInstructors`函数连接起来。当`maxRecords`的值发生变化时，`@wire`会自动调用`getInstructors`方法，并将结果传递给`wiredInstructors`函数。如果数据获取成功，`data`参数将包含用户列表，我们将其赋值给`instructors`属性；如果发生错误，`error`参数将包含错误信息，我们将其赋值给`error`属性。 最后，我想强调的是，LWC并不局限于单一的Apex控制器。我们可以从任意多个不同的Apex控制器导入方法，这为我们的开发提供了极大的灵活性。 希望这个例子能帮助大家更好地理解如何在LWC中使用Apex方法。如果有任何问题，欢迎随时提问！

    查看详情
  • 109

    Wired Function Signatures

    第 163 页

    今天我们来聊聊Salesforce中的有线函数签名。这个话题听起来可能有点复杂，但其实很简单，我会用通俗易懂的方式来解释。 首先，有线函数签名是你在连接到函数时，可以使用的两种不同的语法方式。第一种方式是，你可以只指定一个参数的名称，而不需要使用对象语法。这种方式比较直接，适合简单的场景。 第二种方式则是，你可以在一个对象内部指定错误和数据参数。这种方式更加灵活，适合处理更复杂的情况。 现在，重点来了！如果你想要使用一个叫做`refreshApex`的功能（这个功能我们稍后会详细讨论），那么你就必须使用第二种方式，也就是在对象内部指定参数。这是因为`refreshApex`需要接收一个对象作为参数，而不是单个参数。 所以，简单来说，选择哪种语法方式，取决于你要实现的功能和场景的复杂程度。希望这个解释能帮助你更好地理解有线函数签名的使用。如果有任何疑问，随时问我哦！

    查看详情
  • 110

    When does Wire Service Run?

    第 164 页

    让我们来聊聊Salesforce中的有线服务（Wire Service）。这是一个非常强大的功能，它帮助我们在Lightning Web Components（LWC）中轻松地获取和管理数据。 首先，有线服务在组件被创建之后，但在任何其他生命周期事件发生之前，会分配一个默认值。这个默认值是一个对象，它包含两个属性：数据和错误。最初，这两个属性都是未定义的，也就是说，它们还没有任何值。 当数据变得可用时，它会填充到“数据”属性中，而“错误”属性则保持未定义。相反，如果获取数据时发生了错误，那么“错误”属性会被填充，而“数据”属性则保持未定义。 这里有一个重要的注意事项：如果你使用了反应变量（这些变量通常以$符号为前缀），并且这些变量发生了变化，有线服务会自动提供新的数据。如果数据已经被缓存在客户端，那么可能不会触发新的网络请求，这样可以提高应用的性能。 接下来，我们来看看有线功能。这个功能会在值可用时被调用，无论这个值是在组件连接之前还是之后变得可用。这意味着你可以在组件渲染之前就开始处理数据，这对于优化性能非常有帮助。 有线服务提供了一个不可变的数据流给组件。这意味着流中的每个值都是基于前一个值的新版本，这样可以确保数据的连续性和一致性。 最后，记住在配置AdapterConfiger对象时，你不能让任何属性未定义。如果属性未定义，有线服务将不会提供任何数据。所以，确保你传递的反应变量都是定义好的。 这就是有线服务的基本工作原理和一些关键点。希望这能帮助你更好地理解和使用Salesforce中的有线服务！

    查看详情
  • 111

    Wire Service Summary

    第 165 页

    让我们来聊聊Wire Service的摘要。Wire Service在Salesforce中是一个非常重要的工具，它帮助我们更高效地处理数据和逻辑。想象一下，你有一堆需要跟踪的排列，就像整理书架上的书一样，我们需要一个清晰的方式来管理它们。 首先，Wire Service允许我们做两件事：装饰一处房产或者装饰一种方法。这里的“装饰”其实是指我们可以通过Wire Service来获取或处理数据。具体来说，我们可以连接到`getRecord()`函数，或者连接到Apex方法。`getRecord()`是Salesforce提供的一个内置函数，用来获取记录数据，而Apex方法则是我们自己写的逻辑代码。 为了更清楚地理解这些排列，我们可以制作一个简单的矩阵。这个矩阵就像是一个表格，帮助我们一目了然地看到不同的组合方式。 1. ，客户端财产 | getRecord， 这意味着我们可以通过Wire Service，使用`getRecord()`来获取某个客户端的数据。比如，你想获取某个客户的联系信息，就可以用这种方式。 2. ，客户端财产 | Apex， 这里我们使用Apex方法来处理客户端的数据。比如，你可能有一个自定义的逻辑来计算客户的信用评分，这时就可以通过Apex方法来获取这个数据。 3. ，客户端方法 | getRecord， 这种情况下，我们通过Wire Service调用`getRecord()`来获取数据，但这次是通过一个客户端方法来触发这个操作。比如，你可能有一个按钮，点击后通过这个方法获取数据。 4. ，客户端方法 | Apex， 最后，我们也可以通过Wire Service调用Apex方法，但这次是通过客户端方法来触发。比如，你可能有一个表单提交按钮，点击后通过Apex方法来处理表单数据。 通过这个矩阵，你可以清楚地看到Wire Service的不同使用场景。无论是直接获取数据，还是通过自定义逻辑处理数据，Wire Service都能帮助你更高效地完成任务。 希望这个解释能帮助你更好地理解Wire Service的排列和使用方式！

    查看详情
  • 112

    student-browser custom component - 166

    第 166 页

    让我们来聊聊这个练习2-7的内容。在这个练习中，我们要做的是从数据库中提取学生记录，而不是像之前那样硬编码这些数据。这样做的好处是，数据可以动态更新，更加灵活。 首先，我们会定义一个Apex类，叫做`StudentBrowser`。这个类里面会有一个特别的方法，叫做`getStudents`。这个方法是一个公共的静态方法，并且我们给它加了一个`@AuraEnabled`的标签，这样我们的前端组件就可以调用它了。 `getStudents`方法会接受两个参数，一个是`ContractorId`，另一个是`courseDeliveryId`。这两个参数是用来过滤学生记录的。不过，在这个练习中，我们暂时不需要给这两个参数传值，所以我们会把它们设为空字符串。 接下来，我们会更新我们的学生浏览器组件。这个组件会使用Salesforce的“有线服务”来调用`getStudents`方法，并获取数据。有线服务是Salesforce提供的一种机制，可以让前端组件轻松地调用后端Apex方法。 总结一下，这个练习的主要任务就是让我们的学生浏览器组件能够从数据库中动态获取学生记录，而不是使用硬编码的数据。我们通过定义一个Apex类，并在其中创建一个可缓存的方法来实现这一点。然后，我们更新前端组件，使用有线服务来调用这个方法并获取数据。 希望这个解释能帮助你理解这个练习的内容。如果有任何问题，随时问我哦！

    查看详情
  • 113

    Call an Apex method from a Lightning web component and render the results.

    第 167 页

    同学们，今天我们来学习如何在Lightning Web组件中调用Apex方法，并将结果显示为磁贴。这个练习大约需要30分钟，我们会一步步来，确保大家都能跟上。 首先，我们需要创建一个Apex类，这个类将包含一个方法，用于从Salesforce平台获取数据。我们可以把这个方法想象成一个“数据提取器”，它会去Salesforce的数据库中抓取我们需要的联系人信息。 接下来，我们会在Lightning Web组件中调用这个Apex方法。你可以把Lightning Web组件想象成一个“展示台”，它会从Apex方法那里拿到数据，然后以磁贴的形式展示出来。 具体步骤如下： 1. 创建Apex类：在Salesforce中，我们首先需要创建一个Apex类。这个类会有一个方法，比如叫做`getContacts`，它会返回一组联系人。这个方法会使用SOQL查询来从Salesforce的Contact对象中获取数据。 2. 在Lightning Web组件中调用Apex方法：接下来，我们会在Lightning Web组件中编写JavaScript代码，调用我们刚刚创建的Apex方法。我们会使用`@wire`装饰器或者`@api`装饰器来调用这个方法，并获取返回的联系人数据。 3. 渲染数据为磁贴：最后，我们会在Lightning Web组件的HTML模板中，使用`lightning-card`或者`lightning-tile`组件来展示这些联系人数据。每个磁贴会显示一个联系人的信息，比如名字、电话和邮箱。 整个过程就像是一个流水线：Apex类负责提取数据，Lightning Web组件负责展示数据。通过这种方式，我们可以轻松地在Salesforce平台上创建动态的、数据驱动的用户界面。 好了，这就是我们今天的主要内容。希望大家能够通过这个练习，掌握如何在Lightning Web组件中调用Apex方法，并将数据以磁贴的形式展示出来。如果有任何问题，随时提问，我会在这里帮助大家。现在，让我们开始动手实践吧！

    查看详情
  • 114

    Unit 2: Introducing Lightning Web Components - 168

    第 168 页

    今天我们来聊聊Salesforce的Lightning Web组件，简称LWC。这是一种现代的、基于标准的编程模型，用于构建高性能的Salesforce应用程序。 首先，创建Lightning Web组件其实很简单。你只需要在Salesforce的开发环境中，使用一些基本的HTML、JavaScript和CSS代码，就可以创建一个组件。这些组件可以在Salesforce的Lightning页面上使用，提供丰富的用户界面和交互体验。 接下来，我们来谈谈如何造型这些组件。你可以使用CSS来定义组件的外观和感觉，确保它们与你的品牌和用户体验标准相匹配。 定义组件属性也很重要。这些属性允许你从外部传入数据，使组件更加灵活和可重用。你可以定义不同类型的属性，比如字符串、数字、对象等。 处理多姆事件是LWC中的一个关键概念。你可以监听和响应用户的交互，比如点击按钮或输入数据。这让你能够创建动态和交互式的用户界面。 卸载Lightning Web组件是指当组件不再需要时，如何安全地从DOM中移除它。这有助于管理资源和提高应用程序的性能。 使用Salesforce数据是LWC的一个强大功能。你可以直接从Salesforce中获取数据，并在组件中显示或处理这些数据。这让你能够构建与Salesforce数据紧密集成的应用程序。 使用基本Lightning组件可以加快开发速度。Salesforce提供了一系列预构建的组件，比如按钮、输入框、表格等，你可以直接在你的应用中使用。 提出和处理事件是LWC中的另一个重要概念。你可以创建自定义事件，并在组件之间传递信息。这让你能够构建复杂的、组件化的应用程序。 最后，用户之间的高级通信涉及到如何在不同的组件或不同的用户之间传递信息。这可以通过使用Salesforce的平台事件或消息通道来实现。 好了，这就是我们今天关于Lightning Web组件的介绍。希望这些信息能帮助你更好地理解和使用LWC来构建强大的Salesforce应用程序。

    查看详情
  • 115

    What is <lightning-combobox>?

    第 169 页

    同学们，今天我们来聊聊一个非常实用的Lightning Web Components (LWC) 组件——。这个组件可以帮助我们在Salesforce应用中创建下拉列表，让用户能够从一系列选项中选择一个值。 首先，让我们回顾一下你们已经使用过的一些基础组件。比如，你们可能已经用过来创建卡片式的布局，或者来组织内容到不同的标签页中。这些都是Salesforce提供的开箱即用的组件，非常方便。 现在，假设我们正在开发一个名为StudentBrowserForm的应用，我们需要在其中添加两个下拉列表：一个是“选择讲师”，另一个是“选择交付”。为了实现这个功能，我们将使用。 是一个专门用于创建下拉列表的组件。它允许用户从预定义的选项中选择一个值。不过，需要注意的是，截至2020年春季，还不支持多选功能。如果你需要让用户选择多个选项，那么你应该使用，这是一个支持多选的组件。 在Aura框架中，我们有两个组件可以实现下拉列表的功能：和。但在LWC中，我们只有，没有。不过，的用户体验比更好，所以即使没有，我们也能很好地完成任务。 总结一下，是一个非常强大的组件，可以帮助我们轻松地在Salesforce应用中创建下拉列表。虽然它目前不支持多选，但它的用户体验非常好，是我们开发中不可或缺的工具之一。希望你们在接下来的项目中能够熟练使用这个组件，提升应用的用户体验。

    查看详情
  • 116

    Using the <lightning-combobox>

    第 170 页

    让我们来简单理解一下这段代码。 首先，我们有一个 `lightning-combobox` 组件，它是一个下拉菜单。这个组件有几个重要的属性： 1. ，label，：这是下拉菜单的标签，显示在菜单旁边，告诉用户这个菜单是用来选择什么的。在这里，标签是 &quot;Country&quot;，表示这是一个选择国家的菜单。 2. ，value，：这是当前选中的值。我们用一个变量 `value` 来存储它。初始值是 &#39;uk&#39;，表示默认选中的是英国。 3. ，options，：这是下拉菜单中的选项列表。我们通过一个叫做 `options` 的 getter 方法来定义这些选项。每个选项都有一个 `label` 和一个 `value`。`label` 是显示在下拉菜单中的文本，而 `value` 是实际存储的值。比如，`label` 是 &quot;UK&quot;，`value` 是 &quot;uk&quot;。 4. ，onchange，：这是一个事件处理函数，当用户选择了一个新的选项时，这个函数会被调用。在这里，我们定义了一个 `handleChange` 函数来处理这个事件。当用户选择了一个新的国家时，`handleChange` 函数会更新 `value` 变量，使其等于用户选择的新值。 最后，我们在页面上显示当前选中的国家。通过 `{value}`，我们可以动态地显示用户选择的国家。 总结一下，这段代码实现了一个简单的国家选择器。用户可以从下拉菜单中选择一个国家，选中的国家会实时显示在页面上。

    查看详情
  • 117

    Handling <lightning-combobox> Events

    第 171 页

    让我们来聊聊如何在Salesforce的Lightning Web Components (LWC) 中处理 `` 的事件，特别是 `onblur` 和 `onchange` 事件。 首先，我们来看一下你提供的代码片段。你有一个 `` 组件，它允许用户选择一个国家。这个组件有几个重要的属性： - `标签`：这是显示在组合框旁边的标签，告诉用户这个框是用来选择国家的。 - `值`：这是当前选中的值，它会随着用户的选择而变化。 - `占位符`：这是在没有选择任何选项时显示的提示文本，比如“选择国家”。 - `选项`：这是用户可以选择的选项列表。 - `onchange`：这是一个事件处理器，当用户改变选择时，这个事件会被触发。 在你的代码中，`onchange` 事件绑定到了一个叫做 `Change` 的函数。这个函数会在用户改变选择时被调用。在这个函数里，你通过 `event.detail.value` 来获取用户选择的新值，并将其赋值给 `this.Value`。 这里有一个重要的点需要注意：在LWC中，数据的绑定是单向的。这意味着，如果你在JavaScript中改变了 `this.Value`，这个变化会自动反映在UI上。但是，如果用户在UI上改变了选择，这个变化不会自动更新到JavaScript中的 `this.Value`，除非你显式地处理 `onchange` 事件，就像你在这里做的那样。 现在，让我们来谈谈 `onblur` 事件。这个事件在用户离开组合框（即组合框失去焦点）时触发。你可以使用这个事件来执行一些清理工作，或者在用户完成输入后进行验证。 总结一下，`onchange` 事件是你最常使用的，因为它允许你在用户改变选择时立即做出反应。而 `onblur` 事件则更适合在用户完成交互后进行一些操作。记住，LWC中的数据绑定是单向的，所以你需要通过事件处理器来同步UI和JavaScript中的数据。 希望这个解释对你有帮助！如果你有任何问题，随时问我。

    查看详情
  • 118

    Implementing an Icon Button

    第 172 页

    让我们来聊聊这个代码示例。这个例子展示了如何在Salesforce的Lightning Web Components（LWC）中创建一个带有图标的按钮。这个按钮不仅看起来漂亮，而且功能也很实用。 首先，我们来看一下代码的结构。在``标签内，我们定义了一个``组件。这个按钮有几个属性： - `变体=&quot;brand&quot;`：这决定了按钮的样式。`brand`是Salesforce的品牌颜色，通常是一个蓝色的按钮。 - `标签=&quot;下载&quot;`：这是按钮上显示的文本，告诉用户点击这个按钮会做什么。 - `icon-name=&quot;utility:down&quot;`：这里我们指定了按钮上的图标。`utility:down`是一个向下的箭头图标，表示下载。 - `icon-location=&quot;left&quot;`：这决定了图标的位置。在这里，图标会显示在文本的左边。 接下来，我们有一个`onClick`事件处理器，它指向一个名为`Click`的函数。当用户点击这个按钮时，`Click`函数会被触发。 在`Click`函数中，我们简单地使用`alert`函数显示一个消息框，内容是“按钮被点击！”。这是一个非常基础的用户反馈，告诉用户他们的点击已经被注册。 这个例子很好地展示了如何在Salesforce的LWC中使用图标按钮。通过这种方式，你可以增强用户界面的互动性和视觉吸引力。希望这个解释对你有帮助！如果有任何疑问，随时提问。

    查看详情
  • 119

    Theming <lightning-button> with Variant Options

    第 173 页

    同学们，今天我们来聊聊Salesforce中的组件，特别是它的变体选项。这些变体可以帮助我们快速创建不同风格和用途的按钮，让界面看起来更专业、更符合业务需求。 首先，我们来看一下的几种常见变体： 1. ，Base（基地），：这是最基础的按钮样式，它去掉了所有默认的样式，让你可以从零开始自定义。通常用在一些特殊的场景，比如触发一个模式窗口，或者显示一个“点赞”链接。 2. ，Neutral（中立，默认），：这是默认的按钮样式，适合大多数常规操作。如果你不确定用哪种样式，选择这个准没错。 3. ，Brand（品牌），：这个变体是Salesforce的标志性蓝色按钮，非常适合用在需要突出品牌风格的场景，比如“提交”或“保存”按钮。 4. ，Destructive（破坏性），：这个按钮是红色的，通常用于表示一些破坏性操作，比如“删除”或“取消”。红色能很好地提醒用户，这个操作是不可逆的。 5. ，Inverse（逆），：如果你的按钮放在深色背景上，使用这个变体可以让按钮更显眼。它会自动调整颜色，确保按钮在深色背景下依然清晰可见。 6. ，Success（成功），：这个按钮通常用于表示成功的操作，比如“完成”或“确认”。它的颜色通常是绿色，给人一种积极、成功的感觉。 接下来，我们来看一下代码示例： ```html ``` 在这段代码中，我们分别创建了三个按钮，分别使用了`base`、`brand`和`destructive`变体。每个按钮都有一个`label`属性，用来显示按钮上的文字，还有一个`onclick`事件，用来处理按钮点击后的操作。 最后，我们再来总结一下这些变体的用途： - ，Base，：用于自定义按钮样式。 - ，Neutral，：默认样式，适合大多数场景。 - ，Brand，：Salesforce品牌风格，适合突出品牌。 - ，Destructive，：用于破坏性操作，提醒用户谨慎。 - ，Inverse，：适合深色背景，确保按钮可见。 - ，Success，：用于表示成功操作，绿色按钮。 希望这些内容能帮助大家更好地理解和使用的变体选项。如果有任何问题，欢迎随时提问！

    查看详情
  • 120

    Using the <lightning-layout> Grid System

    第 174 页

    今天我们来聊聊Salesforce中的网格系统。这个系统非常灵活，可以帮助我们在页面或者容器内排列内容。它的设计理念是“移动优先”，也就是说，它首先考虑的是在移动设备上的显示效果，然后才是在桌面设备上的显示效果。 基于一个12列的网格系统。这意味着你可以将页面分成最多12个等宽的列，然后根据需要将内容放置在这些列中。这种布局方式非常灵活，可以轻松地适应不同大小的屏幕和设备。 不过，有一点需要注意的是，微软的Edge浏览器和IE11并不支持。如果你需要在这些浏览器上实现类似的布局效果，你可以使用<div>标签，并为其添加SLDS（Salesforce Lightning Design System）的网格类。这样，你就可以在这些浏览器上创建出灵活的网格系统了。 总的来说，是一个非常强大的工具，可以帮助我们快速构建出响应式的页面布局。只要你掌握了它的基本用法，就可以轻松地在Salesforce中创建出美观且功能强大的用户界面。</div>

    查看详情
  • 121

    Using the <lightning-layout> Grid System - 175

    第 175 页

    让我们来聊聊Salesforce中的网格系统。这个系统其实很简单，它主要由两部分组成：一个是网格的容器，我们叫它；另一个是放在这个容器里的列，我们叫它。 首先，我们来看看水平对齐这个属性。这个属性可以让你决定这些列在容器里怎么水平排列。有几种选择： 1. ，空格（space），：这个选项会让列在容器里均匀分布，前后都有空格。想象一下，就像你在桌子上均匀地摆放几本书，每本书之间都有一定的距离。 2. ，居中（center），：这个选项会把所有的列都挤在一起，然后整体放在容器的中间。就像你把所有的书都堆在一起，然后放在桌子的正中间。 3. ，扩展（spread），：这个选项会让列在容器里均匀分布，但前后没有空格。就像你把书从桌子的一边摆到另一边，没有多余的空间。 4. ，靠右（end），：这个选项会把所有的列都挤在一起，然后放在容器的右边。就像你把所有的书都堆在一起，然后放在桌子的右边。 接下来，我们来看看灵活性这个属性。这个属性决定了列在容器里怎么随着空间的变化而变化。有几种选择： 1. ，增长（grow），：这个选项会让列随着空间的增加而均匀地变宽。就像你的书桌变大了，每本书都相应地变宽了。 2. ，自动（auto），：这个选项会让列在空间允许的情况下均匀地变大或变小。就像你的书桌大小在变化，每本书都自动调整宽度。 3. ，收缩（shrink），：这个选项会让列随着空间的减少而均匀地变窄。就像你的书桌变小了，每本书都相应地变窄了。 4. ，不收缩（no-shrink），：这个选项会让列不会随着空间的减少而变窄。就像你的书桌变小了，但每本书的宽度保持不变。 5. ，不增长（no-grow），：这个选项会让列不会随着空间的增加而变宽。就像你的书桌变大了，但每本书的宽度保持不变。 6. ，不灵活（none），：这个选项会让列不会随着空间的变化而变大或变小。就像你的书桌大小在变化，但每本书的宽度始终保持不变。 希望这些解释能帮助你更好地理解网格系统的工作原理。如果有任何问题，随时问我哦！

    查看详情
  • 122

    Specifying Columns with Relative Sizing

    第 176 页

    同学们，今天我们来聊聊如何在Salesforce的Lightning组件中使用`size`属性来控制列的大小。这个`size`属性是用来调整`lightning-layout-item`的宽度的，非常直观和方便。 首先，我们得知道，`size`属性的值是从1到12的整数。这里的12代表的是整个行的宽度。所以，如果你设置一个`lightning-layout-item`的`size`为12，那么这个列就会占据整行的宽度。 举个例子，如果你设置`size`为3，那么这个列就会占据一行的四分之一宽度，因为3是12的四分之一。同理，如果你设置`size`为6，那么这个列就会占据一半的宽度，因为6是12的一半。 现在，假设我们有一个`studentBrowserForm`，里面有两个`lightning-combobox`，我们希望这两个组合框在布局中占据相同的大小。我们就可以给包含这两个组合框的`lightning-layout-item`设置相同的`size`值，比如都设置为6。这样，每个组合框就会占据一半的宽度，整个布局看起来就会非常均衡和美观。 简单吧？通过这种方式，我们可以轻松地控制布局中各个列的大小，让我们的页面看起来更加整洁和专业。希望这个解释对你们有帮助！如果有任何问题，随时问我哦！

    查看详情
  • 123

    Demo: Responsive Column Sizes

    第 177 页

    让我们来聊聊如何在Salesforce的Lightning组件中实现响应式布局。想象一下，你正在设计一个网页，这个网页需要在不同大小的设备上都能很好地显示，比如手机、平板和电脑。这就是响应式设计的魅力所在。 首先，我们来看一个简单的代码示例。这个代码使用了`Lightning-Layout`和`Lightning-Layout-Item`组件来创建一个布局。每个`Lightning-Layout-Item`都有一个`size`属性，这个属性决定了这个组件在布局中占多少空间。比如，`size=&quot;12&quot;`意味着这个组件会占据整个宽度，而`size=&quot;6&quot;`则意味着它只占据一半的宽度。 但是，我们不仅仅想让布局在电脑上看起来好，我们还希望它在手机和平板上也能自动调整。这就是为什么我们还需要设置`small-device-size`和`medium-device-size`属性。这些属性告诉组件，在小型设备（如手机）和中等设备（如平板）上，它们应该占据多少空间。 例如，代码中的导航和正文部分在电脑上各占一半宽度（`size=&quot;6&quot;`），但在平板上，它们各自只占四分之一宽度（`medium-device-size=&quot;4&quot;`），而在手机上，它们又恢复到各占一半宽度（`small-device-size=&quot;6&quot;`）。这样，无论用户使用什么设备访问你的网页，布局都能自动调整，提供最佳的浏览体验。 最后，记住一点：如果你没有设置`size`属性，那么你就不能设置设备特定的大小属性。而且，`size`属性必须放在设备特定大小属性之前。这是确保你的布局能够正确响应的关键。 希望这个解释能帮助你理解如何在Salesforce中实现响应式布局。如果你有任何问题，随时问我！

    查看详情
  • 124

    JavaScript Template Literals

    第 178 页

    同学们，今天我们来聊聊JavaScript中的一个非常酷的特性——模板文字。这是在ES6，也就是ECMAScript 2015中引入的，它让字符串的拼接变得更加简单和直观。 想象一下，你有一堆变量，比如交付的开始日期、地点和参与者的数量，你想把这些信息组合成一个句子。在以前，你可能需要这样写： ```javascript let Label = 交付.开始_日期__c + &#39; &#39; + 交付.地点__c + &#39; &#39; + 交付.与会者_计数__c + &#39; 学生&#39;; ``` 看起来有点乱，对吧？每个变量之间都要用加号和空格来连接，容易出错，也不容易阅读。 现在，有了模板文字，一切都变得简单了。你可以这样写： ```javascript let Label = `${交付.开始_日期__c} ${交付.地点__c} ${交付.与会者_计数__c} 学生`; ``` 看到那些反引号（``）和${}了吗？这就是模板文字的魔法。反引号包裹整个字符串，而${}里面可以直接放变量或者任何表达式，JavaScript会自动把它们转换成字符串并插入到正确的位置。 这样写不仅代码更简洁，而且更容易维护和阅读。如果你想要了解更多关于模板文字的细节，可以访问Mozilla的开发者文档，那里有更详细的解释和例子。 好了，这就是今天的内容，希望你们喜欢这个小小的JavaScript技巧，下次再见！

    查看详情
  • 125

    student-browser custom component - 179

    第 179 页

    同学们，今天我们来聊聊如何在Salesforce中创建一个学生浏览器的自定义组件。这个组件会用到几个关键的概念，包括使用现成的组合框（combobox）、网格布局（瓷砖）、处理多姆事件（onchange），以及如何通过通讯社（wire service）从数据库中获取数据。 首先，我们会在`studentBrowserForm`这个组件里实现两个组合框。第一个组合框会显示一个讲师列表，第二个组合框则会显示所选讲师负责的交付列表。这两个组合框的数据都会通过有线服务（wire service）从Salesforce数据库中获取。 对于讲师列表，我们不需要使用反应变量（reactive variable），因为讲师列表一旦加载就不会改变。但是，对于交付列表，我们会使用一个反应变量`InspectorId`。这个变量会根据用户选择的讲师动态变化，从而更新交付列表。 具体来说，当用户从第一个组合框中选择一个讲师时，这个选择会改变`ContractorId`的值。因为`ContractorId`是一个反应式输入，所以它的变化会触发第二个组合框的更新，显示与所选讲师相关的交付列表。 这样，通过组合框和反应变量的配合使用，我们就可以创建一个动态交互的学生浏览器组件了。希望这个解释能帮助大家理解这个过程！如果有任何问题，随时提问哦！

    查看详情
  • 126

    Define the Filter Students form as a set of dynamically populated select boxes.

    第 180 页

    同学们，今天我们来做一个非常实用的练习。我们将创建一个学生浏览器表单，这个表单里有两个选择器：一个是讲师选择器，另一个是课程交付选择器。这两个选择器会根据用户的选择动态地填充数据。 首先，我们需要使用Lightning-layout组件来定义一个两列的水平布局。这个布局将帮助我们更好地组织表单中的元素，使得界面看起来更加整洁和直观。 接下来，我们需要创建一个Apex类和方法。这个Apex类将会被我们的Lightning Web组件调用，用来从Salesforce平台读取数据。这样，我们就可以在表单中动态地展示讲师和课程的信息了。 然后，我们来创建讲师选择器。这个选择器将列出所有的讲师，用户可以选择一个讲师。一旦讲师被选中，课程交付选择器就会根据所选讲师的数据动态地填充可选的课程。 最后，我们创建课程交付选择器。这个选择器会根据用户选择的讲师，动态地展示该讲师负责的课程。这样，用户就可以根据讲师来选择相应的课程了。 整个练习大约需要25分钟。通过这个练习，你们将学会如何使用Lightning组件和Apex类来创建动态的表单，这对于以后开发Salesforce应用是非常有帮助的。好了，让我们开始吧！

    查看详情
  • 127

    Unit 2: Introducing Lightning Web Components - 181

    第 181 页

    同学们，今天我们来聊聊Salesforce中的Lightning Web组件（LWC）。这是一个非常强大的工具，可以帮助我们构建动态和响应式的用户界面。 首先，Lightning Web组件模型是基于现代Web标准的，这意味着它使用HTML、JavaScript和CSS来创建组件。这种模型让我们能够利用最新的Web技术来构建高效、可维护的组件。 接下来，我们会学习如何创建一个Lightning Web组件。这个过程其实很简单，你只需要定义一些基本的HTML结构，然后添加一些JavaScript逻辑来处理用户交互。我们还会学习如何给这些组件添加样式，让它们看起来更美观。 在定义组件属性时，我们可以设置一些可配置的选项，这样同一个组件就可以在不同的地方以不同的方式使用。这增加了组件的灵活性和重用性。 处理多姆事件是另一个重要的部分。多姆事件是指当用户与页面上的元素交互时发生的事件，比如点击按钮或输入文本。我们会学习如何捕捉这些事件，并做出相应的反应。 当然，我们也会学习如何卸载不再需要的Lightning Web组件，以优化应用的性能。 使用Salesforce数据是LWC的一个核心功能。我们会学习如何从Salesforce中获取数据，并在组件中展示这些数据。 最后，我们会介绍一些基本的Lightning组件，比如按钮、输入框等，并学习如何提出和处理事件。这些事件可以帮助我们在不同的组件之间进行通信。 在接下来的两个单元中，我们会更深入地探讨组件之间的通信，特别是当它们位于多姆树的同一分支时。这将帮助我们构建更加复杂和交互性强的应用。 好了，这就是今天的内容。希望你们对Lightning Web组件有了一个基本的了解。我们下节课再见！

    查看详情
  • 128

    App Page

    第 182 页

    同学们，今天我们来聊聊如何在Salesforce的Lightning Web Components（LWC）中实现子组件与父组件之间的通信。想象一下，我们正在构建一个应用程序，这个应用程序的页面已经设计好了，但还缺少一些学生详细信息的部分。我们已经知道如何从父组件向子组件传递信息，但反过来，从子组件向父组件传递信息，我们还没有尝试过。 这里，我们要使用一个叫做CustomEvents的工具。CustomEvents允许子组件发送消息给父组件。如果你之前用过Aura组件，你可以把CustomEvents想象成Aura中的组件事件。不过，有一个小区别：在LWC中，CustomEvents默认只会向上传递一级，也就是说，它只会传递给直接的父组件。而在Aura中，组件事件会一直向上传递，直到你明确地停止它们。 所以，使用CustomEvents，我们可以确保子组件的信息能够准确地传递给父组件，而不会无限制地向上传递。这样，我们的应用程序就能更加高效和有序地运行了。希望这个解释能帮助大家更好地理解如何在LWC中处理组件间的通信。如果有任何问题，随时提问哦！

    查看详情
  • 129

    How Custom Events Work? (Child to Parent)

    第 183 页

    让我们来聊聊自定义事件是如何在Salesforce的Lightning Web Components (LWC) 中工作的，特别是从子组件到父组件的通信。 想象一下，你有一个子组件，里面有一个按钮。当用户点击这个按钮时，我们希望触发一个事件，告诉父组件：“嘿，有人点击了按钮！” 这就是自定义事件的用武之地。 首先，在子组件中，我们有一个按钮和一个控制器函数，我们叫它`sendEvent`。当按钮被点击时，`sendEvent`函数会被调用。在这个函数里，我们创建一个`CustomEvent`的实例。这个事件我们给它起个名字，比如`sampleEvent`。同时，我们还可以在这个事件里附带一些信息，比如“作者”和“教师”。 接下来，我们来看看父组件。在父组件中，我们需要设置一个事件监听器来捕捉这个`sampleEvent`。我们通过给父组件的一个属性（比如`onsampleEvent`）赋值一个函数，比如`handleSampleEvent`，来实现这一点。这个`handleSampleEvent`函数就是当`sampleEvent`被触发时，父组件会执行的函数。 在`handleSampleEvent`函数里，我们可以通过`event.detail`来访问子组件发送过来的数据。为了查看这些数据，我们可以使用`JSON.stringify`来把数据转换成字符串，然后用`console.log`或者`alert`来显示出来。 关于`detail`属性，有一点需要注意：`CustomEvent`接口对`detail`属性没有类型或结构的要求。但是，为了安全起见，最好只发送原始数据（比如字符串、数字等）。因为JavaScript中，除了原始数据类型，其他数据类型都是通过引用传递的。如果我们在`detail`里发送一个对象，那么任何监听这个事件的组件都可以修改这个对象，这可能会导致不可预见的副作用。 所以，最佳实践是只发送原始数据，或者在发送前将数据复制到一个新的对象中。这样可以确保发送的数据是安全的，接收方无法修改原始数据。 这就是自定义事件在LWC中的基本工作原理。希望这能帮助你理解如何在Salesforce中使用自定义事件来实现组件间的通信。如果你有更多问题，或者想要深入了解，可以访问Salesforce的官方文档获取更多信息。

    查看详情
  • 130

    Declare an Event Listener Programmatically

    第 184 页

    同学们，今天我们来聊聊在Salesforce的Lightning Web Components（LWC）中如何监听事件。这里有两种主要的方法：一种是通过组件的HTML模板来声明，另一种是通过JavaScript API以编程方式来实现。 首先，从HTML模板中监听事件是非常直接和简单的。你只需要在HTML中使用类似`onclick`这样的属性来指定当某个事件发生时应该调用哪个JavaScript函数。这样做的好处是，代码量少，易于维护，而且Salesforce的框架会自动帮你管理这些监听器，包括在组件不再需要时自动清理它们。 第二种方法是通过JavaScript API以编程方式添加事件监听器。这种方法虽然灵活，但需要你手动管理监听器的生命周期。具体来说，你需要在组件的`connectedCallback`方法中添加监听器，并在`disconnectedCallback`方法中移除它们。这是因为如果你将监听器添加到全局的`window`对象上，Salesforce框架不会自动帮你清理这些监听器，这可能会导致内存泄漏。 总结一下，虽然两种方法都可以实现事件监听，但从HTML模板中监听是更推荐的做法，因为它减少了代码量，并且由框架自动管理监听器的生命周期，减少了出错的可能性。当然，如果你需要更复杂的控制，使用JavaScript API也是完全可以的，只是记得要手动管理监听器的添加和移除。 希望这能帮助大家更好地理解在LWC中如何处理事件监听。如果有任何疑问，随时提问哦！

    查看详情
  • 131

    App Page - 185

    第 185 页

    今天我们来聊聊在Salesforce的Lightning Web Components（LWC）中，如何实现父组件和子组件之间的通信。特别是，我们将通过一个具体的例子来理解这个过程。 假设我们有一个父组件叫做`c-student-browser`，它负责展示一个学生列表。在这个列表中，每个学生都是一个独立的子组件，我们称之为`c-student-tile`。当用户点击某个学生时，我们希望在另一个子组件`c-student-details`中显示这个学生的详细信息。 那么，父组件如何将选中的学生信息传递给`c-student-details`呢？这里我们有两种主要的方法： ，选项1：通过HTML属性分配子属性， 在父组件的HTML中，我们可以直接通过属性将数据传递给子组件。例如，如果我们有一个学生对象`selectedStudent`，我们可以在父组件的HTML中这样写： ```html ``` 这里，`student`是子组件`c-student-details`中的一个属性，我们用`@api`装饰器来标记它，使其成为公共的，这样父组件就可以通过HTML属性来设置它。 ，选项2：调用孩子的公共方法， 另一种方法是，父组件可以调用子组件的公共方法来传递数据。首先，在子组件中，我们定义一个公共方法，并用`@api`装饰器标记它： ```javascript @api updateStudentDetails(student) { // 更新学生详细信息的逻辑 } ``` 然后，在父组件中，我们可以通过JavaScript来调用这个方法： ```javascript this.template.querySelector(&#39;c-student-details&#39;).updateStudentDetails(this.selectedStudent); ``` 这里，`this.template.querySelector(&#39;c-student-details&#39;)`是用来获取子组件的引用，然后我们调用它的`updateStudentDetails`方法，并传递选中的学生对象。 这两种方法都可以有效地实现父组件和子组件之间的通信。选择哪一种，取决于你的具体需求和场景。希望这个解释能帮助你更好地理解LWC中的组件通信机制。如果有任何疑问，随时提问哦！

    查看详情
  • 132

    Communication between Components: Parent to Child Calling Child’s Public Methods

    第 187 页

    今天我们来聊聊在Salesforce Lightning Web Components (LWC) 中，父组件和子组件之间如何进行通信，特别是如何从父组件调用子组件的公共方法。 首先，想象一下，我们有一个父组件叫做`StudentBrowser`，它包含一个子组件`StudentTiles`。在`StudentTiles`组件中，我们有一个方法叫做`unselectStudent`，这个方法的作用是取消当前选中的学生磁贴。这个方法被标记为`@api`，这意味着它可以从外部组件（比如父组件）被调用。 现在，我们想要在`StudentBrowser`组件中添加一个按钮，当用户点击这个按钮时，它会调用`StudentTiles`组件中的`unselectStudent`方法，从而取消选中的学生磁贴。 ### 步骤1：在`StudentBrowser`中声明一个闪电按钮 首先，我们需要在`StudentBrowser`组件的HTML文件中添加一个按钮。这个按钮将用于触发取消选择的操作。 ```html ``` ### 步骤2：为按钮分配一个点击处理程序 接下来，我们需要在`StudentBrowser`组件的JavaScript文件中为这个按钮添加一个点击处理程序。这个处理程序将负责调用子组件的`unselectStudent`方法。 ```javascript import { LightningElement } from &#39;lwc&#39;; export default class StudentBrowser extends LightningElement { handleUnselect() { // 这里我们将获取对子组件的引用 } } ``` ### 步骤3：使用`querySelector`获取子组件的引用 在`handleUnselect`方法中，我们需要使用`querySelector`函数来获取对`StudentTiles`子组件的引用。`querySelector`是一个标准的DOM API函数，它允许我们通过选择器来获取页面上的元素。 ```javascript handleUnselect() { const studentTiles = this.template.querySelector(&#39;c-student-tiles&#39;); if (studentTiles) { studentTiles.unselectStudent(); } } ``` ### 步骤4：调用子组件的公共方法 一旦我们获取了对`StudentTiles`组件的引用，我们就可以直接调用它的`unselectStudent`方法了。这个方法会清除当前选中的学生磁贴的ID，从而实现取消选择的效果。 ### 总结 通过这种方式，父组件`StudentBrowser`可以轻松地与子组件`StudentTiles`进行通信，调用子组件的公共方法来实现特定的功能。这种方法非常灵活，可以用于各种场景，比如同步视图、更新数据等。 希望这个解释能帮助你理解如何在LWC中实现父组件和子组件之间的通信。如果你有任何问题，随时问我！

    查看详情
  • 133

    Adding Functionality without Inheritance

    第 188 页

    让我们来聊聊如何在Salesforce的Lightning Web组件中添加额外的功能，而不需要继承多个类。 首先，我们知道每个有用户界面的Lightning Web组件都需要扩展`LightningElement`这个基础类。但是，JavaScript有一个限制，就是你不能同时扩展多个类。这就带来了一个问题：如果我们已经在扩展`LightningElement`，怎么才能把另一个类的方法加入到我们的组件中呢？ 这里有一个聪明的解决方案，叫做“Mixin”。Mixin是一种设计模式，它允许我们将一个类的方法“混合”到另一个类中，而不需要使用传统的继承。 具体怎么做呢？我们可以在扩展`LightningElement`之前，先把Mixin应用到`LightningElement`上。这样，`LightningElement`就会拥有Mixin类中的所有方法，然后我们的组件再扩展这个已经“增强”过的`LightningElement`，自然也就拥有了这些方法。 举个例子，假设我们有一个Mixin类叫做`MyMixin`，它有一些我们想要在组件中使用的方法。我们可以这样做： ```javascript import { LightningElement } from &#39;lwc&#39;; import MyMixin from &#39;c/myMixin&#39;; export default class MyCustomElement extends MyMixin(LightningElement) { // 现在MyCustomElement不仅拥有LightningElement的功能，还拥有MyMixin的功能 } ``` 在这个例子中，`MyMixin(LightningElement)`这部分代码就是先把`MyMixin`应用到`LightningElement`上，然后再让`MyCustomElement`去扩展这个已经混合了`MyMixin`的`LightningElement`。 这样，我们就巧妙地绕过了JavaScript不能多继承的限制，让我们的组件拥有了更多的功能。希望这个解释对你有帮助！

    查看详情
  • 134

    What is a Mixin?

    第 189 页

    今天我们来聊聊Mixin这个概念。Mixin这个词听起来可能有点复杂，但其实它的概念很简单。你可以把它想象成一个“功能包”，它允许我们给一个类添加一些额外的功能，而不需要改变这个类的继承关系。 想象一下，你有一个类，它已经继承了一个父类。在大多数编程语言中，一个类只能继承一个父类，这就限制了它的灵活性。但是，如果我们还想给这个类添加一些其他的功能，怎么办呢？这时候，Mixin就派上用场了。 Mixin就像一个“插件”，你可以把它“混入”到你的类中，这样你的类就能拥有Mixin提供的所有功能，而不需要改变它原有的继承结构。这就像是给你的类穿上了一件“功能外套”，让它变得更加强大和灵活。 举个例子，假设你有一个类叫做“汽车”，它已经继承了“交通工具”这个父类。现在，你想给“汽车”类添加一个“自动驾驶”的功能。你可以创建一个Mixin，叫做“自动驾驶Mixin”，然后把这个Mixin混入到“汽车”类中。这样，“汽车”类就拥有了自动驾驶的功能，而不需要改变它原有的继承关系。 所以，Mixin是一个非常灵活的工具，它让我们在不改变类继承结构的情况下，轻松地为类添加新的功能。希望这个解释能帮助你更好地理解Mixin的概念！

    查看详情
  • 135

    NavigationMixin Methods

    第 190 页

    让我们来聊聊这个`NavigationMixin`，它其实是一个非常方便的工具，可以帮助我们在Salesforce的Lightning Web Components（LWC）中轻松实现页面导航。 首先，`NavigationMixin`是一个“混入”（mixin），你可以把它想象成一个“插件”或者“扩展包”。当我们把这个混入应用到我们的组件时，它会为我们的组件添加两个新的功能：`navigate()`和`generateUrl()`。 ### 1. `navigate()` 方法 这个方法的作用是帮助我们导航到应用程序中的另一个页面。比如说，你有一个按钮，点击这个按钮后，用户应该被带到另一个页面。这时候，你就可以使用`navigate()`方法来实现这个功能。 ### 2. `generateUrl()` 方法 这个方法的作用是生成一个URL。它会返回一个“承诺”（Promise），这个承诺最终会解析成一个URL。你可以用这个URL来做很多事情，比如在页面上显示一个链接，或者在其他地方使用这个URL。 ### 代码示例 让我们来看一个简单的代码示例： ```javascript import { LightningElement } from &#39;lwc&#39;; import { NavigationMixin } from &#39;lightning/navigation&#39;; export default class MyCustomElement extends NavigationMixin(LightningElement) { // 这里可以添加你的逻辑 } ``` 在这个例子中，我们首先导入了`LightningElement`和`NavigationMixin`。然后，我们创建了一个名为`MyCustomElement`的类，并且通过`extends NavigationMixin(LightningElement)`的方式，将`NavigationMixin`应用到了这个类上。 这样一来，`MyCustomElement`就拥有了`navigate()`和`generateUrl()`这两个新方法，你可以在组件中使用它们来实现页面导航或者生成URL。 ### 总结 简单来说，`NavigationMixin`就是一个帮助我们实现页面导航的工具。通过它，我们可以轻松地在Lightning Web Components中实现页面跳转和生成URL的功能。希望这个解释对你有帮助！如果你有任何问题，随时问我哦！

    查看详情
  • 136

    Navigation Service Implementation

    第 191 页

    让我们一步一步来理解如何在Salesforce中使用闪电导航服务（Lightning Navigation Service）。 首先，闪电导航服务是一个非常强大的工具，它允许我们在Salesforce的Lightning Experience、Lightning Community以及Salesforce应用程序中进行页面导航。这意味着我们可以从一个页面跳转到另一个页面，或者打开一个新的记录创建表单，而不需要刷新整个页面。 现在，假设我们有一个自定义的Lightning组件，我们想要在这个组件中使用导航服务。我们需要做以下几件事情： 1. ，导入导航服务，：首先，我们需要从`lightning/navigation`模块中导入`NavigationMixin`。这就像是在告诉我们的组件，“嘿，我们需要使用导航功能了！” ```javascript import { NavigationMixin } from &#39;lightning/navigation&#39;; ``` 2. ，扩展组件类，：接下来，我们需要让我们的组件类继承`NavigationMixin`。这就像是给我们的组件添加了一个新的能力，让它能够使用导航服务。 ```javascript export default class MyCustomElement extends NavigationMixin(LightningElement) {} ``` 3. ，调用导航服务，：现在，我们可以在组件中定义一个方法，比如`onAddNewDelivery`，在这个方法中，我们可以使用`NavigationMixin.Navigate`来发起一个导航请求。这个请求会告诉Salesforce，“请打开一个新的课程交付记录创建表单。” ```javascript onAddNewDelivery() { this[NavigationMixin.Navigate]({ type: &#39;standard__objectPage&#39;, attributes: { objectApiName: &#39;Course_Delivery__c&#39;, actionName: &#39;new&#39; } }); } ``` 在这个例子中，`type`指定了我们想要导航到的页面类型，这里是标准的对象页面。`attributes`中的`objectApiName`指定了我们要操作的对象，这里是`Course_Delivery__c`，而`actionName`指定了我们想要执行的操作，这里是创建一个新的记录。 总结一下，使用闪电导航服务的步骤就是：导入、扩展、调用。通过这些步骤，我们就可以在Salesforce的Lightning组件中实现页面导航了。希望这个解释对你有帮助！

    查看详情
  • 137

    Passing Default Values to Navigation Service

    第 192 页

    让我们一步一步来理解如何在Salesforce中使用导航服务，并传递默认值。 首先，我们需要导入必要的模块。在你的代码顶部，确保你已经导入了`lightning/navigation`模块，因为我们将使用它来进行页面导航。同时，我们还需要导入`encodeDefaultFieldValues`函数，这个函数帮助我们编码默认字段值，以便在导航时传递。 ```javascript import { NavigationMixin } from &#39;lightning/navigation&#39;; import { encodeDefaultFieldValues } from &#39;lightning/pageReferenceUtils&#39;; ``` 接下来，我们需要确保我们的组件使用了`NavigationMixin`。这个Mixin为我们的组件提供了导航功能。你可以在组件的类定义中使用它： ```javascript export default class YourComponent extends NavigationMixin(LightningElement) { // 你的组件代码 } ``` 现在，假设我们有一个场景，我们需要导航到一个新的“课程交付”记录页面，并且我们希望在打开页面时，某些字段已经预先填充了默认值。我们可以这样做： ```javascript let pageInfo = { type: &#39;standard__objectPage&#39;, attributes: { objectApiName: &#39;Course_Delivery__c&#39;, actionName: &#39;new&#39; }, state: { defaultFieldValues: encodeDefaultFieldValues({ Instructor__c: this.selectedInstructorId }) } }; this[NavigationMixin.Navigate](pageInfo); ``` 在这段代码中，我们创建了一个`pageInfo`对象，它描述了我们要导航到的页面类型和属性。`type`设置为`standard__objectPage`，表示我们要导航到一个标准对象页面。`attributes`对象中，我们指定了对象API名称`Course_Delivery__c`和动作名称`new`，表示我们要创建一个新的记录。 在`state`对象中，我们使用了`encodeDefaultFieldValues`函数来编码默认字段值。这里，我们传递了一个对象，其中键是字段的API名称，值是我们希望设置的默认值。在这个例子中，`Instructor__c`字段将被设置为`this.selectedInstructorId`的值。 最后，我们调用`this[NavigationMixin.Navigate](pageInfo);`来执行导航操作。这将打开一个新的“课程交付”记录页面，并且`Instructor__c`字段将自动填充为`this.selectedInstructorId`的值。 总结一下，使用导航服务并传递默认值的步骤是： 1. 导入必要的模块。 2. 应用`NavigationMixin`到你的组件。 3. 创建`pageInfo`对象来描述导航目标。 4. 使用`encodeDefaultFieldValues`来编码默认字段值。 5. 调用`this[NavigationMixin.Navigate](pageInfo);`来执行导航。 希望这个解释对你有帮助！如果有任何疑问，随时问我。

    查看详情
  • 138

    student-browser custom component - 193

    第 193 页

    同学们，今天我们要来聊聊一个非常有趣的练习——学生浏览器的自定义组件练习2-9。这个练习有点长，但别担心，我会一步步带你们理解。 首先，我们来看看第一个行为。想象一下，你有一个学生列表，当你点击不同的学生时，这个学生的边框会发生变化，告诉你现在选中的是哪个学生。这是怎么实现的呢？其实很简单，我们通过一个叫做StudentTile的组件来触发一个自定义事件，这个事件会告诉StudentTiles组件哪个学生被选中了。然后，每个StudentTile会检查自己的ID是否和选中的学生ID匹配，如果匹配，就显示被选中的状态。 接下来是第二个行为。在这个行为中，我们有两个组合框，一个是选择讲师，另一个是选择课程交付。当你改变这两个组合框中的任何一个选项时，都会触发一个叫做filterchange的自定义事件。这个事件会包含当前选择的讲师ID和课程交付ID。然后，StudentBrowser组件会存储这些ID，并通过更新这些值来处理FilterChange事件。这样，无论你改变哪个组合框，都会触发一个服务调用来刷新学生列表。 最后，我们来看看第三个行为。在这个行为中，我们要添加一个“Add New Delivery”按钮。当你点击这个按钮时，会弹出一个窗口，让你可以添加一个新的课程交付。这是怎么实现的呢？我们只需要在StudentBrowserForm中添加一个新的Lightning-Layout-Item和按钮，然后给这个按钮添加一个点击处理程序。这个处理程序会调用NavigationMixin.Navigate，并带上适当的参数，这样就可以打开添加课程交付的窗口了。 好了，这就是我们今天要讲的三个行为。虽然这个练习有点长，但只要你一步步来，相信你们都能掌握。加油！

    查看详情
  • 139

    Unit 2: Introducing Lightning Web Components - 195

    第 195 页

    同学们，今天我们来聊聊Salesforce的Lightning Web组件（LWC）。这个技术非常强大，可以帮助我们构建动态、响应式的用户界面。 首先，，Lightning Web组件模型，是基于现代Web标准的，这意味着它使用HTML、JavaScript和CSS来创建组件。这种模型让我们能够利用最新的Web技术，同时保持与Salesforce平台的紧密集成。 ，创建Lightning Web组件，其实很简单。你只需要在Salesforce Developer Console或者VS Code中创建一个新的LWC项目，然后定义你的HTML模板、JavaScript控制器和CSS样式。这样，一个基本的组件就诞生了。 接下来是，造型组件，。你可以使用CSS来美化你的组件，让它看起来更符合你的品牌风格。Salesforce也提供了一些内置的样式类，帮助你快速实现一致的外观。 ，定义组件属性，是让组件更灵活的关键。你可以通过属性来传递数据，这样同一个组件可以在不同的地方使用，显示不同的内容。 ，处理多姆事件，是指组件能够响应用户的操作，比如点击按钮或者输入文本。你可以编写JavaScript代码来处理这些事件，并做出相应的反应。 ，卸载Lightning Web组件，也很重要。当组件不再需要时，确保它被正确地销毁，这样可以避免内存泄漏。 ，使用Salesforce数据，是LWC的一个亮点。你可以通过Apex或者直接使用Lightning Data Service来获取和操作Salesforce中的数据。 ，使用基本Lightning组件，可以加快开发速度。Salesforce提供了一系列现成的组件，比如按钮、输入框等，你可以直接使用它们。 ，提出和处理事件，是组件间通信的基础。你可以通过事件来通知其他组件发生了某些事情，比如数据更新了。 ，学生之间的高级沟通，，这里我们指的是组件之间的高级通信。比如，你可以配置事件，让一个孙子组件直接与祖父母组件通信，而不需要通过中间组件。 ，在多姆树的不同分支之间进行通信，，这意味着即使组件不在同一个父组件下，它们也可以通过事件或者共享状态来进行通信。 最后，，使用导航服务，可以让你利用Salesforce内置的功能，比如页面跳转或者打开记录详情页。 好了，这就是我们今天的内容。希望你们对Lightning Web组件有了更深的了解。下次我们会继续深入探讨更多高级功能。记得多练习，实践是学习的最好方式！

    查看详情
  • 140

    App Page - 196

    第 196 页

    让我们来聊聊如何在Salesforce的Lightning Web Components (LWC) 中实现从孙子组件（StudentTile）到祖父母组件（StudentBrowse）的通信。 首先，我们知道在LWC中，组件之间的通信通常是通过事件来实现的。默认情况下，LWC的事件系统是“冒泡”的，这意味着事件只能从子组件传递到父组件，而不能直接传递到更上层的祖父母组件。这就是为什么我们需要做一些调整来实现从StudentTile到StudentBrowse的通信。 那么，我们该如何做呢？这里有一个简单的方法：我们可以使用一个中间组件来“中继”这个事件。具体来说，我们可以让StudentTile组件发出一个事件，然后让它的父组件（假设是StudentList）捕获这个事件，并再次发出一个事件，这样StudentBrowse组件就能接收到这个事件了。 听起来有点复杂？别担心，我来给你举个例子： 1. ，StudentTile组件，：当某个动作发生时（比如点击一个按钮），StudentTile会发出一个自定义事件，比如`studentselected`。 2. ，StudentList组件，：这个组件是StudentTile的父组件。它会监听`studentselected`事件，并在捕获到这个事件后，再次发出一个类似的事件，比如`studentselectedrelay`。 3. ，StudentBrowse组件，：这个组件是StudentList的父组件，也就是祖父母组件。它会监听`studentselectedrelay`事件，并在捕获到这个事件后，执行相应的逻辑。 通过这种方式，我们就能实现从孙子组件到祖父母组件的通信了。 总结一下，虽然LWC的默认事件系统不支持直接从孙子组件到祖父母组件的通信，但我们可以通过使用中间组件来中继事件，从而实现这一目标。希望这个解释对你有帮助！如果你有任何问题，随时问我哦。

    查看详情
  • 141

    Shadow DOM

    第 197 页

    让我们来聊聊阴影DOM和阴影边界，这些概念听起来可能有点复杂，但其实它们是为了帮助我们更好地管理和保护我们的网页组件。 首先，想象一下你在网页上有一个小部件，比如一个按钮或者一个滑块。这个部件是由HTML、CSS和JavaScript组成的。现在，如果你想要这个部件在不同的网页上都能正常工作，不受其他网页代码的影响，那么你就需要一种方法来“封装”这个部件。这就是阴影DOM的作用。 阴影DOM是W3C Web组件规范的一部分，它允许我们将一个部件的内部结构（也就是DOM）封装起来，这样外部的HTML、CSS和JavaScript就不能随意改变它。这个被封装的内部DOM结构就叫做影子树。 现在，让我们来看看几个关键的定义： 1. ，影子主机，：这是影子DOM附加到的常规DOM节点。你可以把它想象成一个普通的网页元素，比如一个`<div>`，它现在承载了一个影子DOM。 2. ，影子树，：这是影子DOM中的DOM树。它包含了所有被封装的HTML、CSS和JavaScript。 3. ，阴影边界，：这是影子DOM结束和常规DOM开始的地方。你可以把它想象成一个看不见的墙，它保护影子DOM内部的元素不受外部的影响。 4. ，影子根，：这是影子树的根节点。它是影子DOM的起点，所有的内部元素都从这里开始。 所以，当你配置CustomEvents时，你可能会遇到一个问题：我的事件可以通过阴影边界传播吗？这个问题的答案取决于你如何设置你的影子DOM和事件。通常，影子DOM的设计是为了保护内部元素，所以默认情况下，事件不会穿过阴影边界。但是，你可以通过一些设置来允许事件传播，这取决于你的具体需求。 希望这个解释能帮助你更好地理解阴影DOM和阴影边界的概念。如果你有任何问题，随时问我！</div>

    查看详情
  • 142

    Shadow DOM (Cont.)

    第 198 页

    今天我们来聊聊Salesforce中的Lightning Web Components（LWC）和阴影DOM（Shadow DOM）的一些有趣特性。 首先，阴影DOM是一个非常重要的概念，它允许我们将组件的HTML、CSS和JavaScript封装起来，这样它们就不会影响到页面的其他部分。在LWC中，每个组件都有自己的阴影DOM，这意味着它们可以独立地管理自己的样式和行为，而不用担心会干扰到其他组件。 在你提供的代码中，我们看到了两个组件：`StudentTiles`和`StudentTile`。每个组件都有自己的阴影DOM，这就是为什么我们在代码中看到了`#shadow-root`的标签。这个标签表示的是组件的阴影DOM的根节点。 但是，这里有一个小问题：并不是所有的浏览器都支持原生的阴影DOM。为了解决这个问题，Salesforce使用了一个叫做“Shadow DOM PolyFill”的技术。这个技术可以在不支持原生阴影DOM的浏览器中模拟出阴影DOM的效果。这就是为什么在Chrome的开发工具中，你可能看不到`#shadow-root`的标签，因为LWC使用了这个PolyFill技术来确保在所有支持的浏览器中都能正常工作。 最后，如果你对这个技术感兴趣，我建议你可以查看Salesforce的官方博客和GitHub上的代码库。那里有更多关于Shadow DOM PolyFill的详细讨论和示例代码。 希望这个解释能帮助你更好地理解LWC和阴影DOM的工作原理。如果你有任何问题，随时问我！

    查看详情
  • 143

    Shadow DOM (Cont.) - 199

    第 199 页

    同学们，今天我们来聊聊Salesforce中的Lightning Web Components（LWC），特别是关于“影子DOM”的概念。 首先，想象一下，每个LWC组件就像是一个小房子，而影子DOM就是这个房子的围墙。这个围墙把房子里的东西（也就是我们的HTML和CSS）和外面的世界隔离开来。这样做的好处是，房子里的装饰（CSS样式）不会影响到外面的世界，外面的世界也不会干扰到房子里的装饰。 在我们的代码示例中，`` 和 `` 就是两个这样的小房子。每个小房子都有自己的影子DOM，也就是它们自己的围墙。在``这个小房子里，我们有一个`<h1>`标签，用来显示学生的名字。这个`</h1><h1>`标签和它的样式都被封装在影子DOM里，所以它不会影响到其他组件，也不会被其他组件的样式所影响。 在`studentTiles.html`文件中，我们可以看到从第1行到第12行的代码，这些代码定义了我们的``和``组件。每个组件都有自己的影子DOM，这就是为什么我们说影子DOM封装了每个Lightning Web组件中的元素。 最后，记住一点，影子DOM不仅影响我们如何使用CSS，还影响我们如何处理事件和多姆（DOM）。理解这一点，对于我们开发高效、可维护的Salesforce应用是非常重要的。 好了，今天的内容就到这里，希望大家能够理解影子DOM的概念，并在实际开发中运用它。如果有任何疑问，欢迎随时提问！</h1>

    查看详情
  • 144

    Defining Event Propagation

    第 200 页

    让我们来聊聊事件传播的配置方式。在Salesforce的Lightning Web组件中，我们可以通过两个属性来控制事件的传播方式：一个是“冒泡”（bubbles），另一个是“合成”（composed）。这两个属性都是布尔值，也就是说，它们只能是“真”或“假”。 首先，我们来看第一个配置：冒泡设置为“假”，合成也设置为“假”。这是默认的配置，也就是说，如果你不特别设置这两个属性，它们就会是这样的。在这种配置下，事件不会通过DOM（文档对象模型）向上冒泡，也不会跨越阴影边界。这意味着，如果你想监听这个事件，你必须在直接触发这个事件的组件上添加监听器。举个例子，如果有一个学生浏览器的组件，它实例化了一个学生浏览器表单的组件，那么你只能在学生浏览器表单这个组件上直接添加一个监听器来监听“onfilterchange”这个事件。 接下来是第二个配置：冒泡和合成都设置为“真”。在这种配置下，事件不仅会通过DOM向上冒泡，还会跨越阴影边界，继续向上冒泡到文档的根。这样，事件就可以从一个组件传递到另一个组件，再传递到更上层的组件。比如，我们可以让学生选择事件从学生卡片组件传递到学生卡片列表组件，再传递到学生浏览器组件。 第三个配置是冒泡设置为“真”，但合成设置为“假”。这种配置在课程中我们不会使用。在这种配置下，事件会通过DOM冒泡，但不会跨越阴影边界。这意味着事件只能在同一个组件内部或者在同一层级的组件之间传播。 最后，我们来看一个无效的配置：冒泡设置为“假”，但合成设置为“真”。这种配置在Lightning Web组件中是不使用的。因为如果事件不能冒泡，那么它也就无法跨越阴影边界，这样的配置是没有意义的。 希望这些解释能帮助你更好地理解事件传播的配置方式。如果你有任何问题，随时问我哦！

    查看详情
  • 145

    Configuring Bubbles and Composed

    第 201 页

    今天我们来聊聊Salesforce Lightning Web Components（LWC）中的事件配置，特别是关于“气泡”和“合成”这两个概念。 首先，我们有两个主要的事件配置选项：假事件和合成事件。假事件是你的首选，因为它们对系统的影响最小。这些事件不会通过DOM（文档对象模型）冒泡，也不会跨越阴影边界。这意味着它们只在触发它们的组件内部有效，不会影响到其他组件。在我们的例子中，StudentBrowserForm组件触发了一个名为‘filterchange’的定制事件，我们就使用了这种配置。 接下来，我们来看看“气泡：真”和“合成：真”的配置。这种配置下，事件会在整个DOM树上冒泡，跨越阴影边界，并且会传递给父组件，除非你明确地阻止它。这种事件类型会成为组件公共API的一部分，也就是说，任何消费这个组件的其他组件及其所有祖先组件都会将这个事件作为它们API的一部分。这就像是一个很大的API合同，一旦签署，就意味着你承诺了这个事件类型是全局唯一的。 如果你不想使用“气泡：真”和“合成：真”的配置，你还可以选择捕获并重新激发事件。这种方法虽然不会在文档中明确提到，但它是一个有效的替代方案。 最后，如果你想了解更多关于LWC事件最佳实践的信息，可以访问Salesforce的官方文档，那里有详细的指导和示例。 希望这些信息对你有帮助，如果你有任何问题，随时欢迎提问！

    查看详情
  • 146

    Event Retargeting

    第 202 页

    让我们来聊聊Salesforce中的事件重新定位和影子DOM的概念。首先，想象一下，每个组件就像是一个小房间，它们有自己的小世界，也就是我们说的“影子DOM”。这些房间不需要知道其他房间里发生了什么，它们只需要管好自己的事情就可以了。 现在，有一种方法可以帮助这些房间保持自己的秘密，这就是“事件重新定位”。想象一下，如果你在一个房间里按了一个按钮，这个按钮会发出一个信号（也就是事件），这个信号可以被房间里的其他人听到，也可以被房间外面的人听到。但是，如果这个信号是从房间里的某个小角落发出的，那么房间外面的人听到的信号来源就会变成整个房间，而不是那个小角落。 在Salesforce中，我们可以通过两种方式来触发这个信号：一种是直接从组件内部发出，就像你在房间里大喊一声；另一种是在组件的DOM内部发出，就像你在房间的某个角落按了一个按钮。如果这个信号是从组件内部的某个元素发出的，而且我们的处理程序（也就是听这个信号的人）是在组件内部定义的，那么这个信号的目标（event.target）就是那个小角落。但如果处理程序是在组件外面定义的，那么这个信号的目标就会变成整个组件。 简单来说，事件重新定位就是帮助组件保持自己的独立性，让它们不需要知道其他组件的内部情况，只需要关注自己内部发生的事情。这样，每个组件都可以更加专注于自己的任务，整个系统也会更加稳定和高效。

    查看详情
  • 147

    App Page - 203

    第 203 页

    同学们，今天我们来聊聊如何在Salesforce的Lightning组件之间进行通信，特别是当这些组件不在同一个DOM树中时。如果你之前有接触过Aura组件，那么你对发布订阅模式应该不会感到陌生。这个模式和我们今天要讲的pubSub模块非常相似。 想象一下，我们有两个组件：c-Student-Browser和c-Student-Detail。它们就像是两个兄弟，虽然在一个家庭里，但住在不同的房间。现在，我们需要把c-Student-Browser中选择的StudentID传递给c-Student-Detail。因为它们不在同一个DOM分支上，直接交流有点困难。这时候，pubSub模块就派上用场了。 pubSub模块的工作方式就像是学校里的广播系统。当一个组件（比如c-Student-Browser）有消息要发布时，它就像是通过广播发出一个通知。其他组件（比如c-Student-Detail）如果对这个消息感兴趣，就可以“订阅”这个广播，一旦有消息发布，它们就能接收到并处理。 Salesforce提供的这个pubSub模块非常轻量级，整个模块的代码不到100行。它的设计非常巧妙，确保事件只在单个页面内传播，不会影响到其他页面。 现在，让我们来看一个实际的例子。假设我们正在开发一个班级管理系统，我们需要在App Builder页面的右列添加一个新的组件StudentDetail，这个组件将是StudentBrowser的兄弟组件。我们的目标是当在StudentBrowser中选择一个学生时，StudentDetail能够显示这个学生的详细信息。 为了实现这个功能，我们会使用pubSub模块。当在StudentBrowser中选择一个学生时，它会发布一个StudentSelected事件，这个事件包含了被选中的学生的ID。StudentDetail组件会订阅这个事件，一旦接收到事件，它就会根据收到的学生ID来显示相应的学生信息。 通过这种方式，即使两个组件不在同一个DOM树中，它们也能有效地进行通信，确保信息的准确传递。这就是pubSub模块的强大之处，它让组件间的通信变得简单而高效。希望这个解释能帮助大家更好地理解如何在Salesforce中使用pubSub模块进行组件间的通信。

    查看详情
  • 148

    Communication between Components through a Pub-Sub Library

    第 204 页

    让我们一步一步地来理解如何在Salesforce Lightning Web Components (LWC) 中实现组件之间的通信。我们将通过一个具体的例子来讲解，这个例子中，`StudentBrowser`组件需要将`StudentID`传递给`StudentDetail`组件。 ### 1. 导入必要的模块 首先，我们需要从`c/pubSub`模块导入`FireEvent`函数，以及从`lightning/navigation`模块导入`CurrentPageReference`。这些模块将帮助我们实现组件之间的通信。 ```javascript import { FireEvent } from &#39;c/pubSub&#39;; import { CurrentPageReference } from &#39;lightning/navigation&#39;; ``` ### 2. 在`StudentBrowser`组件中设置页面引用 在`StudentBrowser`组件中，我们使用`@wire`装饰器来获取当前页面的引用，并将其存储在`pageRef`属性中。 ```javascript export default class StudentBrowser extends LightningElement { @wire(CurrentPageReference) pageRef; handleNotify(event) { const studentID = event.detail.studentID; FireEvent(this.pageRef, &#39;StudentChange&#39;, { studentID }); } } ``` ### 3. 触发事件 当`StudentBrowser`组件中的`filterChange`事件被触发时，我们从事件中捕获`StudentID`，然后使用`FireEvent`函数发布一个名为`StudentChange`的事件，并将`StudentID`作为参数传递。 ### 4. 在`StudentDetail`组件中注册监听器 在`StudentDetail`组件中，我们需要从`c/pubSub`模块导入`registerListener`函数，并在组件连接到DOM时注册一个监听器。 ```javascript import { registerListener } from &#39;c/pubSub&#39;; import { CurrentPageReference } from &#39;lightning/navigation&#39;; export default class StudentDetail extends LightningElement { studentID; @wire(CurrentPageReference) pageRef; connectedCallback() { registerListener(&#39;StudentChange&#39;, this.handleStudentChange, this); } handleStudentChange(event) { this.studentID = event.studentID; } } ``` ### 5. 处理事件 在`StudentDetail`组件中，我们定义了一个`handleStudentChange`函数来处理`StudentChange`事件。当事件被触发时，这个函数会将传递过来的`StudentID`保存到组件的`studentID`属性中。 ### 总结 通过以上步骤，我们实现了`StudentBrowser`组件和`StudentDetail`组件之间的通信。`StudentBrowser`组件发布了一个包含`StudentID`的事件，而`StudentDetail`组件则监听这个事件，并在事件触发时更新自己的状态。 这种发布-订阅模式（Pub-Sub）是LWC中实现组件间通信的一种常见方式，特别适用于那些没有直接父子关系的组件之间的通信。希望这个解释能帮助你更好地理解这个过程！

    查看详情
  • 149

    student-browser custom component

    第 205 页

    同学们，今天我们来聊聊Salesforce中的自定义组件和事件传递。想象一下，我们有一个学生浏览器，就像是一个家族中的祖父母。然后，我们有一个学生Tile，就像是孙子。我们的目标是让孙子（学生Tile）能够向祖父母（学生浏览器）发送消息。 首先，我们需要更新学生的配置，确保气泡选择并组成均为真。这就像是确保电话线畅通无阻，消息可以顺利传递。当学生浏览器在customEvents中接收到studentId时，它会使用pubSub（一种发布-订阅模式）将这个studentId发送到我们的新组件studentDetail。 这个新组件studentDetail就像是家族中的另一个成员，它会更新自己存储的studentId属性。然后，studentDetail会使用有线服务和uiRecordApi的getRecord方法，就像是去图书馆查找更多关于这个学生的详细信息。 简单来说，我们就是在建立一个家族内部的通讯系统，确保信息能够从孙子传到祖父母，然后再传到另一个家庭成员，最终获取到我们需要的信息。这样，我们的学生浏览器就能更智能地展示学生信息了。希望这个比喻能帮助大家更好地理解这个过程！

    查看详情
  • 150

    Code Review

    第 207 页

    同学们，今天我们来聊聊代码审查这个话题。代码审查，简单来说，就是大家一起看看写的代码有没有问题，是不是符合标准，能不能运行得更好。这就像是我们写完作文后，老师帮我们检查错别字和语法一样。 首先，我们来看第一个组件——PubSub。PubSub是一种设计模式，它允许不同的部分（我们称之为“订阅者”）监听（或者说“订阅”）特定的事件或消息。当这些事件发生时，发布者会通知所有订阅者。在Salesforce中，这通常用于在不同的组件之间传递信息，比如当用户点击一个按钮时，可能需要更新另一个组件的数据。 接下来是“学生浏览器”。这个组件可能是一个用户界面元素，用来展示学生列表。想象一下，这就像是一个电子表格，每一行代表一个学生，每一列代表学生的不同信息，比如姓名、学号、成绩等。在代码审查时，我们需要确保这个组件能够正确地显示数据，并且用户可以方便地浏览和搜索学生信息。 最后是“学生详情”。这个组件通常用于展示单个学生的详细信息。当用户从“学生浏览器”中选择一个学生时，“学生详情”组件就会显示这个学生的所有相关信息。在代码审查时，我们需要检查这个组件是否能够正确地接收和显示数据，以及是否有足够的错误处理机制，比如当数据加载失败时，能够给出友好的提示。 在代码审查过程中，我们不仅要看代码是否能够工作，还要看它是否易于理解和维护。我们可能会讨论代码的结构、命名规范、是否有重复代码、是否有潜在的性能问题等。通过这样的审查，我们可以确保代码的质量，减少未来的维护成本。 好了，这就是今天关于代码审查的简单介绍。希望你们能够理解，并在未来的项目中应用这些知识。如果有任何问题，随时提问哦！

    查看详情
  • 151

    Unit Summary

    第 208 页

    让我们来聊聊Salesforce的Lightning Web Components（LWC）。想象一下，你正在建造一座房子。这座房子的每一块砖、每一扇窗户、每一扇门，都是你精心设计和搭建的。在Salesforce的世界里，Lightning Web Components就像是这些砖块和窗户，它们是构建用户界面的基本元素。 首先，LWC是基于Web标准的，这意味着它们使用的是现代浏览器都能理解的语言。这就像是你用大家都懂的语言来设计你的房子，这样无论谁来参观，都能轻松理解和使用。 每个LWC都是由多个文件组成的，这些文件就像是房子的设计图纸。它们包括声明性标记，这就像是房子的蓝图，告诉房子应该是什么样子的；JavaScript，这就像是房子的神经系统，控制着房子的各种功能；还有样式，这就像是房子的装饰，让房子看起来更漂亮。 当你在房子里移动家具或者改变装饰时，房子会立即反映出这些变化。同样，在LWC中，当组件的值发生变化时，反应性属性会迫使组件重新渲染，就像房子会立即更新以反映新的装饰一样。 最后，LWC使用Lightning数据服务来读取Salesforce的数据。这就像是你有一个智能助手，它知道房子里所有的物品在哪里，当你需要某样东西时，它能够迅速找到并展示给你。 所以，简单来说，Lightning Web Components就是Salesforce中用来构建用户界面的小模块，它们易于理解和使用，能够快速响应变化，并且能够轻松地与Salesforce的数据进行交互。希望这个比喻能帮助你更好地理解LWC的概念！

    查看详情
  • 152

    Unit Review

    第 209 页

    让我们来回顾一下这些关键点，确保大家都能跟上。 首先，，HTML， 是负责提供结构的。你可以把它想象成一座房子的框架，它决定了房子的基本形状和布局。在Salesforce中，HTML就是用来定义组件的基本结构的。 接下来是 ，JavaScript (JS)，，它负责处理事件并定义业务逻辑。你可以把它想象成房子的电气系统，它让房子里的灯、电视、空调等设备能够正常工作。在Salesforce中，JS就是用来处理用户交互和定义组件的行为的。 然后是 ，js-meta.html，，这个文件是用来定义元数据值的。元数据可以理解为关于数据的数据，它告诉系统这个组件在Lightning App Builder和Community Builder中应该如何配置和显示。你可以把它想象成房子的设计图纸，它告诉建筑师和装修工人如何建造和装饰房子。 ，CSS， 则是负责提供组件的外观和感觉。你可以把它想象成房子的装修风格，它决定了房子的颜色、材质、家具等外观元素。在Salesforce中，CSS就是用来美化组件的。 在命名组件时，我们使用 ，kebab-case，，比如 ``。这种命名方式有助于保持代码的一致性和可读性。 每个组件都必须有一个 ，配置文件，，这个文件定义了组件的元数据值，包括在Lightning App Builder和Community Builder中的设计配置。你可以把它想象成房子的施工手册，它详细说明了如何建造和配置这个房子。 在开发过程中，我们经常会使用 ，发布-订阅模式，。这种模式允许组件之间进行松耦合的通信，就像房子里的不同房间可以通过对讲系统进行交流，而不需要直接连接电线。 最后，当我们想要检索多个记录时，或者需要通过ID以外的其他内容进行查询时，我们会使用特定的方法来实现。这就像在房子里，你可能需要通过不同的方式来找到你需要的物品，而不仅仅是依靠一个固定的位置。 希望这些比喻能帮助大家更好地理解这些概念。如果有任何问题，随时提问！

    查看详情
  • 153

    Lab Phase 1 Output Data from Lightning Data Service

    第 210 页

    今天我们来聊聊Salesforce中的Lightning数据服务，特别是它的输出数据。想象一下，Lightning数据服务就像是一个超级智能的助手，它帮助我们在Salesforce的Lightning平台上快速、高效地获取和操作数据。 首先，Lightning数据服务的主要任务是让我们能够轻松地从Salesforce数据库中获取数据，而不需要写复杂的代码。它通过一种叫做“Wire Service”的技术来实现这一点。Wire Service就像是数据的传送带，自动把数据从数据库送到我们的前端界面。 那么，输出数据是什么呢？简单来说，就是Lightning数据服务从数据库中获取并展示给我们的信息。这些数据可以是任何Salesforce对象中的记录，比如客户信息、销售机会、任务等等。 举个例子，假设我们有一个Lightning组件，用来显示客户的联系信息。当我们使用Lightning数据服务时，它会自动从Salesforce的“联系人”对象中获取数据，比如姓名、电话、邮箱等，然后把这些信息展示在我们的组件上。 这里有几个关键点需要注意： 1. ，实时性，：Lightning数据服务获取的数据是实时的，这意味着一旦数据库中的数据有更新，我们的前端界面也会立即反映这些变化。 2. ，安全性，：所有的数据访问都是基于Salesforce的安全模型，确保只有有权限的用户才能看到相应的数据。 3. ，效率，：由于使用了Wire Service，数据获取和展示都非常高效，减少了页面加载时间，提升了用户体验。 总结一下，Lightning数据服务的输出数据就是它从Salesforce数据库中获取并展示给我们的信息。这些数据是实时、安全且高效的，帮助我们更好地管理和展示业务数据。希望这个解释能帮助你更好地理解Lightning数据服务的输出数据。如果有任何问题，随时问我哦！

    查看详情
  • 154

    Lab Phase 1: Output Data from Lightning Data Service

    第 211 页

    同学们，今天我们来聊聊Salesforce Lightning数据服务的输出数据，以及如何在实验阶段1中实现一些有趣的功能。我会用简单易懂的语言来解释，确保大家都能跟上。 首先，我们有一个，闪电按钮，，这个按钮是用来触发某些操作的。比如，点击它可能会显示学生的详细信息。我们还有一个，学生详情，的自定义组件，这个组件是用来展示学生具体信息的。 接下来，我们有一个，闪电牌，，这个牌是用来展示一些关键信息的。比如，学生的姓名、联系方式等。我们还可以在牌上添加，闪电格式的电子邮件，和，闪电格式的电话，，这样信息看起来会更整齐、更专业。 现在，我们来看一下实验的三个要求： 1. ，隐藏学生Detail的闪电卡，直到点击它，：这个功能的意思是，一开始学生的详细信息是隐藏的，只有当用户点击某个按钮或卡片时，才会显示出来。这样可以避免页面一开始就显示太多信息，让用户有更好的体验。 2. ，填写有关学生的更多信息，：当我们点击了某个学生后，我们需要展示更多的信息。比如，学生的成绩、课程、联系方式等。这些信息可以通过自定义组件来展示，确保信息清晰、易读。 3. ，添加“转到记录”按钮，：这个按钮的作用是让用户能够快速跳转到学生的详细记录页面。比如，点击这个按钮后，用户可以直接看到学生的完整档案，包括所有的历史记录、成绩单等。 总结一下，我们今天主要学习了如何在Salesforce Lightning中通过闪电按钮、闪电牌和自定义组件来展示学生的详细信息。我们还讨论了如何隐藏信息直到用户点击，以及如何添加一个方便的“转到记录”按钮。希望这些内容对大家有帮助，如果有任何问题，随时问我！

    查看详情
  • 155

    Challenge 2: Recent Worldwide Deliveries

    第 214 页

    同学们，今天我们来挑战一个有趣的任务：创建一个名为`challenge_recentDeliveries`的组件，用来展示最近的三次课程交付。我们会使用Apex类来从Salesforce中检索这些数据，并将它们动态地显示在一个漂亮的闪电卡片上。 首先，我们需要创建一个Apex类，命名为`CourseDeliveries`。在这个类中，我们会写一个方法叫做`getRecentDeliveries`，这个方法会去Salesforce数据库中查找最近的课程交付记录，并返回这些数据。 接下来，我们会在我们的Lightning组件中使用这个Apex方法。我们会设置一个属性来接收这些交付数据，然后将它们展示在一个带有世界图标的闪电卡片上。这样，任何访问我们应用的人都能一眼看到最近的课程交付情况。 整个过程大约需要30分钟，但别担心，我会一步步指导你们。准备好了吗？让我们开始吧，一起享受与数据打交道的乐趣！

    查看详情
返回课程目录

📋 课程信息

Unit 2 Introducing Lightning Web Components
  • 所属目录：DEX602
  • 课程名称：Unit 2 Introducing Lightning Web Components
  • 章节数量：155 个

🔗 相关链接