DEX475

课程介绍

大家好，今天我们来聊聊 Lightning Web Components 部署时的一些目标配置，尤其是在 AI 辅助建页面这个场景下。 首先，当你根据用户的自然语言描述来创建 Lightning 页面时，安装程序里的 Agentforce 可以智能地分析和推荐你已有的自定义组件。想让你的组件能被 AI 认出来并推荐，你必须在组件的 js-meta 配置文件中，用 `ai` 这个标签集加上一段描述文字，告诉 AI 这个组件是做什么的。这样 Agentforce 才能理解你的组件。 接着，这张幻灯片还带我们复习了其他几种部署目标。比如你可以把组件打包成一个独立的 Aura 应用程序来运行，这个时候要用一个驼峰命名的交付名称，格式是 `命名空间:camelCaseDeliveryName`。如果你希望组件在移动端有特殊的表现，可以通过 `lightning/mobileCapabilities` 来开启移动设备功能。 还有一个常见的场景是把组件放到页面的实用程序栏里，那就要把目标设为 `lightning__UtilityBar`，并且配上一个 SVG 图标，这样在工具栏上就能看到一个漂亮的入口了。 最后，如果你想在 Visualforce 页面里嵌入 Lightning 组件，就得用 Lightning Out 技术。基本方式就是在 Visualforce 中通过 `$Lightning.use()` 初始化一个依赖应用，然后用 `$Lightning.createComponent()` 这类方法把组件动态创建和渲染出来。 好了，这一页的重点就这些，我们理解了组件的不同部署选项之后，可以更灵活地把它们放到各种容器里运行。

课程章节

本课程共有 3 个章节

• 1

  AI Component Descriptions — Configuration & Writing Tips

  第 375 页

  好，咱们今天要讲的内容，是跟 Agentforce 和咱们自定义组件的人工智能描述相关的。想象一下，以后用户只要用一句大白话描述自己想要什么功能，Agentforce 就能智能地分析出来，然后推荐咱们的组件。这个靠的就是咱们在组件里放一段特殊的 AI 描述。 具体怎么做呢？你要在组件的 js‑meta.html 文件的顶层，放一个 `<ai>` 标签。注意啊，每个组件文件里只能放一次这个标签。在这个 `<ai>` 标签里面，要包含一个总的描述标签，然后里面可以有多个属性标签，每个属性都有自己的 `name` 和 `aiDiagnostics` 属性。 但有一点要记住，那些属性的定义，还是必须老老实实地在 `targetConfig` 里再定义一遍，AI 描述只是额外给它加层说明，不会替代它。 那什么样的描述才是好描述呢？一个好的 AI 描述必须清晰地回答四个问题：第一，受众是谁，也就是谁会用到这个组件；第二，功能，它到底能做什么；第三，好处，用户为什么要用它；第四，上下文，就是在什么场景下、什么时候用它最合适。 所以你在写的时候，要用最终用户能听懂的语言来写，千万别用技术黑话。比如，要有详细的例子，说明它可配置的选项有哪些，也要诚实地写它有什么限制，或者跟别的组件比好在哪里。特别要记得，还要写清楚这个组件，不能，做什么，这样 Agentforce 就不会在错误的情况下推荐它了。 反过来，糟糕的描述是什么样的呢？要么很模糊，比如写“用于一般用途”，要么满嘴开发术语，像“CRUD 操作”这种，用户听了完全不知道是什么。这就是我们要避免的。 总结一下，把 AI 描述写好，其实就是帮 Agentforce 更准确地把咱们的组件推给真正需要的人。这样做既提升了用户体验，也让你的组件更容易被发现和重用。

  ▶ 播放视频 查看详情
• 2

  Standalone Aura Apps & Mobile Device Features

  第 376 页

  同学们，现在我们来看这一页关于LWC在Aura应用中使用的一些约定。 首先，如果你要在一个独立的Aura应用里引用LWC组件，这个引用命名空间是使用camel的大小写格式来写的，其实就是驼峰式命名。不过请注意，这和你在Aura组件内部引用LWC时用的约定是完全一样的。那默认的命名空间是什么呢？就是那个简单的字母‘c’。所以当你在Aura应用里想放一个LWC组件，通常就是用c-后面跟上你组件的名称。 接着，我们来看移动终端的能力。Salesforce提供了一个专门的模块，叫做Lightning/moveCapabilities，通过它，你可以访问移动设备的一些底层功能，比如相机、位置信息、联系人以及日历访问。这样就能让你的应用获得类似原生App的移动体验。如果你对这方面特别感兴趣，想要了解更详细的用法和开发方式，你可以去看看官方的《移动和离线开发人员指南》，那里有非常完整的文档。 再往后，我们说说实用工具栏的配置。如果你想把自己的LWC组件放在Lightning的实用工具栏里，你需要做两件事：第一，在组件的元数据配置文件中，把isExposed属性设为true，然后把目标设为lightning__UtilityBar。这样，你的组件就具备了被添加到工具栏的基本资格。第二点，关于图标。你要注意，如果你在组件的配置中使用了可选的SVG图标，这个图标仅仅是在应用程序管理器里，当管理员去选择要添加到工具栏的组件时，能在选择器里看到你的图标。但在运行时的工具栏上，这个SVG图标并不会直接生效——你必须单独在应用程序管理器里，为这个工具栏项设置SLDS工具图标。也就是说，运行时显示的图标是另外设置的。 最后，如果你需要编程来控制实用工具栏，比如打开、关闭、获取当前状态等等，你可以使用Lightning控制台的JavaScript API。这样就能在组件里通过代码去动态操作实用工具栏了。 好，这一页的重点就这么多，大家理解了吗？有不清楚的地方可以随时提问。

  ▶ 播放视频 查看详情
• 3

  Use Components in Visualforce Pages — Lightning Out

  第 377 页

  我们来看一下怎么在Visualforce页面里嵌入Lightning Web Components。这需要用到一个叫Lightning Out的功能，目前还是测试版。 整个过程可以分成三步。第一步很简单，就像我们平时在页面里引入一个外部JavaScript库一样，在你的Visualforce页面里加上一行代码，加载Lightning Out的JavaScript库。这行代码会帮我们准备好后面要用的工具。 第二步呢，需要在同一个Salesforce组织里，创建一个独立的Aura应用程序。这个应用程序不是我们平时给用户看的那种，它的作用就是一个“容器”，用来承载Lightning Web Component。创建的时候，让这个程序扩展ltng冒号outApp，这样它就变成了一个Lightning Out应用程序。然后，在程序里，用这个标签 aura冒号dependency 来声明你要用的所有LWC组件，告诉平台“等一下可能会用到这些组件哦，请提前准备好”。这里有个细节，扩展ltng冒号outApp会自动带上Salesforce的SIDS样式，让组件外观更统一。如果你不想用这些样式，想让组件保持最原始的样子，可以换成扩展ltng冒号outAppUnstyled。 第三步，我们要在Visualforce页面的JavaScript代码里，做两件事。首先，调用Lightning点use函数，来引用刚才创建的那个应用程序。你需要传入应用程序的名字，如果是在命名空间包里，前面还要加上命名空间，然后提供一个回调函数，平台准备好之后会通知你。这个use函数可以多次调用，但要注意，每次调用的都必须是同一个应用程序。 然后用Lightning点createComponent函数去真正创建一个组件实例。你需要告诉它组件类型是什么，要传进去哪些属性，以及你想把组件放到页面上哪个HTML元素里，也就是提供一个DOM元素的ID。同样提供一个回调，当组件创建完成后，回调函数会收到这个组件，你就可以把它渲染出来、或者做其他操作了。 最后有一个非常重要的提醒：Lightning Web Components和Visualforce页面，它们是从不同的域提供服务的。这就意味着，在组件里产生的cookie，会被浏览器看作是第三方cookie。所以，用户必须在自己的浏览器设置中，允许第三方cookie，否则组件功能可能会出问题。这一点在考虑使用Lightning Out的时候，一定要心里有数。 好，这样我们就把在Visualforce里集成LWC的三个步骤讲完了。

  ▶ 播放视频 查看详情