DEX475

课程介绍

大家好，欢迎开始使用Lightning Web Components。这个介绍性章节会带大家全面认识一下 LWC，也就是在 Salesforce 平台上构建自定义用户界面的现代方式。咱们今天聊的内容很多，但我会一步一步，用最简单的话帮你们理清楚。 首先，究竟什么是 LWC 呢？简单说，它就是一套利用标准 JavaScript 和 HTML 来写组件的框架，完全贴合 Web 组件标准。也就是说，你写的代码就是浏览器原生能懂的东西，性能好，还容易维护。而且，它跟 Salesforce 以前的 Aura 框架不是对立的，而是可以很好地共存——同一个页面里，Aura 组件和 LWC 组件能够并肩工作，这叫向后兼容性。 接下来，我们还会看到官方的 Lightning 组件库，里面有很多预先做好的漂亮组件，直接拿来用就行，能帮你省下大量时间。要是你想立刻动手试试，甚至不用在本机装任何东西，我们可以利用 StackBlitz 这个在线工具，几分钟就能创建出你的第一个 LWC 组件，马上看到效果。LWC 本身还是开源的，代码公开，社区可以贡献，这让它更有生命力。 在课程里，你还会学到 API 版本控制是怎么回事，它能保证你的组件在平台升级时稳稳当当。我们也会明确列出支持的浏览器和 JavaScript 版本，这样你就知道可以放心用哪些 ES6+ 特性。另外，LWC 能在哪些 Salesforce 目标上跑、用什么样的开发工具，这些我都会详细说明。 最后，我们还会聊聊一个很实际的问题：什么情况下该选 LWC，什么情况下用 Aura 更合适。等你听完这些，心里就会有数了。LWC 的确是在 Salesforce 上构建用户界面最高效、最现代的方式，从这一章开始，咱们一起慢慢掌握它。

课程章节

本课程共有 10 个章节

• 1

  Get Started with Lightning Web Components

  第 2 页

  好，我们来看这一页。这一页呢，是对 Lightning Web Components —— 我们通常简称为 LWC —— 做一个非常核心的介绍。 你可以把 LWC 理解成是 Salesforce 提供的一套现代化前端框架。它的目的，就是让你能够在 Salesforce 这个平台上，去构建各种自定义的用户界面。不管是咱们平时在电脑上用的网页版界面，还是手机上的移动应用，甚至是一些外部的数字体验站点，都可以用 LWC 来搭建。 那么，LWC 组成本身是什么呢？其实特别简单，它就是一个自定义的 HTML 元素。怎么做的呢？就是用你本来就熟悉的 HTML 和 JavaScript 来写。也就是说，你写出来的东西，最终会在页面上变成一个像 `<my-component>` 这样的标签，但它背后是你自己定义的逻辑和样子。 而且 Salesforce 很贴心，它不是让你从零开始造轮子。它提供了一大堆现成的基础组件，这些基础组件长得好看、风格统一，因为它们都是基于 Salesforce 的 Lightning 设计系统来做的。你可以直接拿这些基础组件当积木块一样，搭出你想要的界面。 这里还有一个非常重要的点 —— 为什么叫 Lightning Web Components？因为它特别“轻”，性能非常好。原因就在于，LWC 的代码绝大部分都是在浏览器里直接“本地”运行的，没有什么多余的中间层或者复杂的框架包装。所以你写的代码，基本上就是标准的、原生支持的 JavaScript 和 HTML，这意味着它不仅跑得快，而且学起来上手也很快，你过去的网页开发知识在这里几乎可以无缝接过来。 简单总结一下：用标准的技术、轻量的方式，借助 Salesforce 提供的现成设计模块，去构建各种体验一致的应用界面 —— 这就是 LWC 给我们带来的最大价值。

  ▶ 播放视频 查看详情
• 2

  LWC — Standard JavaScript & Web Components

  第 3 页

  同学们，咱们今天来看一下 Lightning Web Components 最核心的几个特点。 首先，LWC 它是完全基于浏览器原生 Web Components 标准来构建的。这怎么理解呢？就是说，它把浏览器自己提供的能力，比如自定义元素、模板呀这些直接拿来用，Salesforce 只给它加上能在我们支持的浏览器里稳定运行的必要内容，多余的包袱没有。因为代码就在浏览器本地跑，几乎没有中间抽象层，所以 LWC 特别轻，页面反应快，性能非常棒。 另外值得提的是，Salesforce 一直致力于开放网络标准，它本身就是 W3C 的成员，LWC 呢也是开源的。这对咱们开发者来说，意味着技术透明，社区也能一起贡献力量，用着更放心。 那在我们平台上，其实有两种组件模型可以选：LWC 和以前的 Aura。它们俩可以在同一个页面里共存，互相调用，并不冲突。但如果你现在有选择权，记住一句话——请果断选 LWC，因为它更现代、更快，也是未来的方向。 好，这一页的重点我们就聊到这儿。

  ▶ 播放视频 查看详情
• 3

  Lightning Component Library

  第 4 页

  各位同学，今天我们来聊聊 Lightning 组件库，这个在我们 LWC 开发里非常实用。大家先看这张幻灯片，它告诉我们组件库到底能做什么、能在哪里用。 首先，组件库里包含了所有标准组件的参考信息，还有安全工具，帮助咱们写出更安全的组件。那么在哪里能用呢？有两个地方：一个是公共网站，所有人都能直接打开查看，不需要登录。另一个呢，是链接到你所在 Salesforce 组织的、经过验证的网站。后者的好处可多了——它能看到你自己组织里定制的特有组件，也能看到从托管包里安装进来的组件，这些在公共网站上是看不到的。 组件库给我们提供了好几个选项卡，非常方便。里面有“组件参考”，就是每个组件的详细用法；“LWC 开发人员指南”，帮助大家深入理解；还有“LWS 控制台”和“LWS 失真查看器”，LWS 是 Lightning Web Security 的缩写，这两个工具用来监控和调试安全引起的问题；另外还有“NPS 控制台”和“NPS API 查看器”，辅助你管理命名空间和脚本相关的事情。 另外要提醒大家一下，现在新的 Lightning 组件参考已经放到 developer.salesforce.com 这个开发人员网站上了。而以前那个旧版的组件参考呢，会在 2026 年春季发布时彻底停用，不再维护。所以从今天起，大家最好养成习惯，直接用新版参考，这样才不会落后。 好了，这张幻灯片的核心内容就是这些，很简单对吧？大家记住组件库的入口和它的几个主要选项卡就行。

  ▶ 播放视频 查看详情
• 4

  Lightning Web Security & Locker Tools

  第 5 页

  好的同学们，咱们今天来聊一聊 Lightning Web Security，也就是 LWS。 这是 Salesforce 在 2022 年春季推出的一套新的安全架构。它的核心思路是跟着最新的 Web 标准走，在一种虚拟的 JavaScript 沙箱里运行你的组件。 沙箱你可以想象成一个隔离的“安全盒子”，代码在里面跑，但不让它随便碰到外面不安全的东西。 那在 LWS 之前，我们用的是什么呢？就是更传统的 Locker Service，很多人也叫它 Locker。 Locker 是通过过滤 API 来实现组件隔离的，就是把你可能用到的浏览器 API 做一层安全的包装，只给你安全的那些部分。 而 LWS 是利用浏览器原生的安全机制，再套上一层虚拟沙箱，这样性能更好，也更贴近标准的 Web 开发体验。 不过不管是 LWS 还是 Locker，它们都有一个共同的规矩：强制开启 JavaScript 的严格模式。 也就是说，你不能用一些不安全的老写法，比如未声明的变量，这能帮我们提前发现很多问题。 在 Salesforce 平台上，有一点比较特殊，很容易踩坑。 就是在组件里用 `this.template.host` 拿到的永远是个空值，`null`。这和你在开源环境，也就是 OSS 里的行为不一样。 还有，如果你去访问组件模板检索出来的元素上的 `shadowRoot`，也会返回空。 这其实就是沙箱故意给你“屏蔽”掉了一些东西，为了安全嘛。 平时开发的话，如果你在用 LWS，就可以打开浏览器的 LWS 控制台，或者用 LWS 失真查看器来调试。 这里“失真查看器”其实是个翻译，英文是 Distortion Viewer，能让你看到沙箱对代码做了哪些改动。 如果你还在维护老项目，需要保证代码兼容 Locker，那就用 SYS 控制台和 SYS API 查看器，它们能帮你检查代码在 Locker 下的表现。 简单总结一下：LWS 是更现代、更标准的沙箱安全方案，而 Locker 是经典的 API 过滤方案。 无论用哪个，严格模式是跑不掉的，而且 `host` 和 `shadowRoot` 在平台上返回空是正常现象，用好对应的调试工具就行。 好了，这节课就到这儿，下次我们接着往下讲。

  ▶ 播放视频 查看详情
• 5

  Get Started Coding — Your First Component

  第 6 页

  我们来看看如何快速写出你的第一个 Lightning Web 组件。 写 Lightning Web 组件最快的方法，不是在你本地搭建开发环境，而是直接用一个在线的编辑器，叫做 StackBlitz，地址是 playground.lwc.dev。你只需要打开浏览器就能开始写代码，甚至连登录都不用。当然，如果你想保存你的修改，可以用 GitHub 账号登录一下，它就会帮你把代码存下来。 在这个在线环境里，每一个 Lightning Web 组件其实就是一个文件夹，文件夹里必须有两个同名的文件：一个是 .html 文件，用来写组件的界面；另一个是 .js 文件，用来写组件的逻辑。它们名字一样，才能配成一对。 咱们先看 HTML 部分。组件的模板要放在一对 <template> 标签里面。如果你想在界面上显示某个变量的值，就用一对花括号把表达式包起来，比如 {变量名}，这样就能做到数据绑定，变量变了，界面也会跟着变。 再来看 JavaScript 文件。这个文件里，你需要从 lwc 这个模块里导入一个叫 LightningElement 的基础类，然后自己定义一个类，用 extends 去继承它，最后用 export default 把这个类导出去。这样你的组件就有了最基本的骨架。 那写好组件之后，怎么在 HTML 页面里用呢？很简单，就用一个自定义标签，标签名要用短横线分隔式写法，也就是 kebab-case，形式是：命名空间-组件名。比如命名空间叫 x，组件名叫 app，那标签就是 <x-app>。 在我们刚打开的默认项目里，已经有两个例子了，一个是 x-app，一个是 x-counter，你可以先看看它们是怎么写的，然后试着改一改，很快就能上手了。

  ▶ 播放视频 查看详情
• 6

  Development Environments & Next Steps

  第 7 页

  我们现在来聊聊这个关于学习Lightning Web Components开发工具的话题。 你可能已经听说过StackBlitz，这是一个在浏览器里就能写代码、看效果的工具，对刚接触LWC的同学来说，特别方便，不用安装任何东西，打开就能练习。它就像个简易的练功房，让你快速上手组件的基本写法。 但是呢，这个练功房有它的局限性，迟早你会发现它不够用了。为什么呢？我告诉你几个关键点： 第一，StackBlitz会自动更新到最新的开源版本，而这个版本可能比你在Salesforce正式环境里用的版本还要新。也就是说，你在StackBlitz里跑得很溜的代码，放到真实的Salesforce组织里，可能会因为版本差异出问题。 第二，它完全访问不到Salesforce平台上的数据。你想做个组件显示客户的姓名、机会的金额，这根本做不到，因为没有真实数据源，只能假数据演练。 第三，更重要的是，它不支持Salesforce独有的导入，比如“@salesforce/apex”去调用服务端方法，或者“@salesforce/label”获取自定义标签。这些是真实项目里天天都要用的东西，StackBlitz里都用不了。 还有，它也不包含Salesforce的设计系统SLDS和那些开箱即用的基本组件，比如lightning-button、lightning-card，你在StackBlitz里得自己模拟样式，看不到真正的Salesforce界面效果。 所以，在你用StackBlitz熟悉了LWC的基础语法之后，我们就要走出练功房，到真实的开发环境中去。怎么做呢？你要使用Salesforce DX工具，在你的电脑上搭建本地开发环境，然后用命令把你的代码推送到自己的Salesforce组织里，去那里看到真正的数据和界面。同时，在这个过程中，你会真正理解“数据绑定”这个概念，就是组件的属性怎么跟真实数据联动起来，这是LWC最核心的运行逻辑。 好在Salesforce官方给了你很友好的学习路径，你可以跟着Trailhead上的互动教程一步步走，还可以去参考示例代码库，里面有很多写好可以直接拿来改的组件。这样你就不容易迷失，一步步成为真正的Salesforce开发者。 这段讲解就是这样的，用聊天式的语言，让听众明白StackBlitz的定位，以及下一步该干什么。

  ▶ 播放视频 查看详情
• 7

  LWC Open Source

  第 8 页

  同学们，咱们今天这一页幻灯片，讲的是 Lightning Web Components 一个很核心的理念——开源和平台差异。听起来有点技术，但其实很好理解，我来给你慢慢拆解。 首先，LWC 是开源的，也就是说，它的源代码是完全公开的。你可以去 GitHub 上看它是怎么写的，甚至自己修改、扩展，然后用在任何你想用的平台上，不只是 Salesforce，你还可以在普通的网页、Node.js 环境里搭建企业级的 Web 组件。这就带来一个很大的好处：以前你开发一个应用，可能后端用 Apex、前端用 Aura，报表又用别的框架，技术栈乱七八糟的。但现在 LWC 统一了，你完全可以用同一套组件模型，既写 Salesforce 平台上的功能，也写外部系统的界面，不再需要来回切换思维。 那开源版本和 Salesforce 平台上的版本到底有什么区别呢？幻灯片里说了——核心引擎是一模一样的，代码逻辑完全相同。真正的区别只在于编译器和运行时的配置。你可以把引擎想象成汽车的发动机，开源版和平台版装的是同一个发动机，只是变速箱调校、安全限速这些不一样。开源版本每周都会发布更新，你能第一时间尝鲜；而平台版本为了保证稳定和安全，会滞后三到六个月，等经过充分测试再上线。 在 Salesforce 平台上运行 LWC 时，还会多出一些安全限制，这完全是出于企业级防护的需要。比如，实验性的 API 是不能用的，那些还在测试中的新功能，平台不会开放，防止你写出不稳定的代码。还有 ESLint 规则会强制执行，保证代码风格统一、规避常见错误。另外，动态导入，也就是那个 `import()` 函数，是被禁止的，因为动态加载可能引入不可控的脚本，带来安全风险。 最典型的安全限制，要数 NPS 和 LWS 安全层施加的隔离。比如你在组件里尝试访问 `this.template.host`，你会发现它返回的是 `null`；去访问子组件的 `shadowRoot` 属性，得到的也是 `null`。这是什么意思呢？其实很简单——LWC 把你的组件包裹在一个封闭的沙箱里，你不可以直接拿到宿主元素的引用，也不能直接穿透别的组件的影子 DOM。这就像每个人都在自己的小房间里工作，互相看不到对方的内部结构，只能通过正式的门（也就是公开的 API 和属性）来交流。这样能防止莫名其妙的代码篡改，让整个应用更健壮、更安全。 所以总结一下，这页幻灯片就是在告诉我们：LWC 既是开放的，让你自由地在任何地方使用；又是受控的，在 Salesforce 平台上通过合理的限制来保障稳定与安全。理解了这一点，你就能更好地把握什么时候该直接写代码，什么时候需要遵守平台的约束。好，这一部分就讲这么多，有问题随时提出来。

  ▶ 播放视频 查看详情
• 8

  LWC API Versioning

  第 9 页

  同学们，今天我们来了解一个 LWC 组件开发中非常重要的新要求——自定义组件的版本控制。这个变化从 24 年冬季，也就是我们说的 Winter '24 开始引入，当时只要你的 API 版本在 59.0 及以上，就可以选择性地给组件加上版本号。从 25 年春季起，所有新建或修改的自定义组件都强制要求有版本了。也就是说，没加版本号的组件再也无法保存。 那么，为什么要这么做呢？简单理解，API 版本就像给组件的代码拍了一张快照。一个组件里的 HTML、CSS、JS 每个文件都会绑定一个特定的 Salesforce 版本。这样一来，不管 Salesforce 未来怎么升级底层平台，你的组件都会在当初指定的那个版本环境下稳定运行，行为不会突然改变，这就是稳定性的保障。 以前保存的那些没有版本号的老组件，还能继续用，不会受影响。但只要你哪天想修改它，就必须先给它设定一个 API 版本才能保存。如果直接修改没版本的组件再点保存，系统就会直接报错，不让你通过。 所以，现在做 LWC 开发时，记得在组件文件的配置里（也就是 meta.xml 文件或源代码文件的开头），清晰地标上 API 版本。这既是对组件运行环境的锁定，也是 Salesforce 推动大家规范化开发的新底线。很简单但很关键，一定要记住。

  ▶ 播放视频 查看详情
• 9

  Supported Browsers & JavaScript

  第 10 页

  同学们，我们来看这个幻灯片。它讲的是Lightning Web Components支持的浏览器，还有一些JavaScript的注意事项。 首先，浏览器的支持情况很简单：LWC和整个Lightning Experience保持一致，只支持最新稳定版本的Edge、Chrome、Firefox和Safari。像IE 11这种老浏览器，官方支持已经在2023年1月1号结束了，我们不用再操心了。 还有一个容易忽略的地方：Salesforce明确不支持第三方的浏览器扩展，这些扩展可能会偷偷干扰Lightning Experience的稳定性，如果你的页面莫名其妙出问题，说不定就是某个扩展惹的祸。 在JavaScript方面，我们能用的功能就是浏览器本身支持的最新特性，再加上Salesforce环境允许的。有个术语叫SYS和LWS，它们会限制一些不安全的用法。标准JavaScript的语法和API，大家去查MDN文档就行；而我们LWC特有的一些功能，比如线适配器，专门在本指南里记录，可以放心用。 最后记住，不管是新的Lightning Web Security（我们简称LWS）还是旧版的Lightning Buttons，都会自动开启JavaScript的严格模式。这能帮我们写出更安全的代码，但也要求大家严格遵循规范。 好，这一页的重点就这么多，大家有什么问题吗？

  ▶ 播放视频 查看详情
• 10

  Supported Salesforce Targets, Tools & APIs

  第 11 页

  同学们，我们来看这一页。Lightning Web Components，也就是LWC，它可以在很多Salesforce的环境里使用。你需要在组件的配置文件中声明它支持哪些目标。支持的目标包括Lightning Experience，就是那个经典的桌面界面；还有Mobile App；App Builder，可以让你拖拽搭建页面；Experience Builder，用来建社区门户；还有Flows流程；Quick Action快捷操作；以及各种打包发布的方式。 需要注意的是，有些地方，比如Chatter扩展，或者标准按钮动作的覆盖Standard Action Overrides，它们还要求你用Aura组件把LWC包一层，不能直接放LWC。 好消息是，很多Salesforce的API，LWC都能直接用，通过“Lightning/*”这样的导入就能访问。包括CRM Analytics、Einstein Discovery，还有BEP API、UI API和Tools API等等。 但要记住一条规则：LWC里面不能包含Aura组件。也就是说，一个LWC的整个DOM子树必须全部是LWC，不能混入Aura。好了，这一页就讲这些。有疑问吗？

  ▶ 播放视频 查看详情