构建 Lightning Out 2.0 应用程序
使用低代码 Lightning Out 2.0 应用程序管理器创建并配置 Lightning Out 2.0 应用程序。将自定义 Lightning Web 组件 (LWC) 添加到每个 Lightning Out 2.0 应用程序，并可以选择定义外部应用程序可以传递给这些组件的自定义属性值。生成 Lightning Out 2.0 代码块，您可以直接嵌入外部应用程序的 HTML 标记。
所需的 Edition
| 适用于：Lightning Experience |
适用于：Professional、Enterprise、Performance、Unlimited、所有 Agentforce 1 Edition 和 Developer Edition |
| 所需用户权限 | |
|---|---|
| 创建修改 Lightning Out 2.0 应用程序： | 自定义应用程序 |
开始之前,请完成准备构建 Lightning Out 2.0 应用程序和为 Lightning Out 2.0 设置身份验证中的步骤。
重要 Lightning Out 2.0 目前仅支持自定义 Lightning Web 组件。不支持 Lightning 基础组件和 Aura 组件。
见Lightning Web Components 开发人员指南中的 Lightning Out 2.0 限制。
创建 Lightning Out 2.0 应用程序
- 从“设置”中，在快速查找框中输入Lightning Out，然后选择 Lightning Out 2.0 应用程序管理器。
- 单击 New Lightning Out 2.0 应用程序。
-
输入 Lightning Out 2.0 应用程序的唯一名称。
名称最多可包含 64 个字母、数字和特殊字符。它必须包含至少一个字母。不允许名称仅包含数字或特殊字符。您可以稍后在“应用程序设置”选项卡中更改应用程序名称。
-
单击保存并继续。
将打开编辑 Lightning Out 2.0 页面。
-
在“应用程序设置”选项卡中，要激活应用程序，请将应用程序状态设置为“已启用”。
如果应用程序状态被禁用，用户身份验证将失败，并且嵌入的组件不会加载到外部应用程序中。
-
打开“主机页面域名”选项卡，然后输入将托管 Lightning Out 2.0 应用程序的任何外部应用程序的域名。
包括 https:// 协议，并删除域名末尾的斜杠 (/)。要添加多个域，请在输入每个域名后单击添加域名。
- 要将组件添加到应用程序，请打开“应用程序组件”选项卡。然后按照Lightning Out 2.0应用程序配置组件部分中的步骤3-5。
- 保存更改。
为 Lightning Out 2.0 应用程序配置组件
-
从 Lightning Out 2.0 应用程序管理器中，从 Lightning Out 2.0 应用程序名称旁边的操作下拉列表中选择编辑应用程序。
编辑 Lightning Out 2.0 应用程序页面会打开应用程序设置选项卡。
- 从编辑 Lightning Out 2.0 应用程序页面，打开应用程序组件选项卡。
-
在组件名称字段中，输入自定义组件的名称。然后单击添加组件。
组件必须已经存在于您的组织中。使用反斜杠 (/) 或连字符 (-) 将命名空间与组件名称分开。如果组件没有自定义命名空间，请包含默认
c命名空间。例如，complexNs/lwcComponent和complex_ns-lwc-component是等效的有效格式。 -
或者，要将样式和属性从应用程序传递到嵌入组件，单击该组件的自定义属性单元格中的
。以 JSON 格式输入属性及其值。
例如，要传递 CSS 自定义属性，输入{"style": "--custom-color: #000000;"}。Lightning Out 2.0目前支持覆盖组件可用的style属性和其他属性。见在 Lightning Out 2.0 应用程序中设置组件样式和属性。 - 对要添加到 Lightning Out 2.0 应用程序的任何其他组件重复步骤 3 和 4。
- 保存更改。
将 Lightning Out 2.0 应用程序嵌入外部应用程序
- 从 Lightning Out 2.0 应用程序管理器中，单击 Lighting Out 2.0 应用程序的 ID。
-
要将生成的 Lightning Out 2.0 代码块复制到外部应用程序，请单击复制到剪贴板。
生成的 Lightning Out 2.0 代码块不包含
lightning-out-application组件上的frontdoor_url属性。相反，您可以在运行时通过调用 UI 桥 API 端点来设置此属性。见为 Lightning Out 2.0 设置身份验证。 -
将 Lightning Out 2.0 应用程序代码块粘贴到外部应用程序中页面的 HTML 标记。
在运行时，Lightning Out 2.0 应用程序中的组件呈现在您嵌入代码块的位置。要更改组件在页面上呈现的位置，请将其移动到目标位置。
例如，要在外部应用程序页面上呈现
c-other-lwc高于c-my-lwc，请调整标记，以便c-other-lwc元素高于c-my-lwc元素。您可以将 Lightning Out 2.0 应用程序组件标记与外部页面元素混合。<--- External App Page ---> <html> <body> <external-page-element-1></external-page-element-1> <script type="text/javascript" async="" src="https://MyDomain.my.salesforce.com/lightning/lightning.out.latest/index.iife.prod.js"> </script> <lightning-out-application frontdoor-url="Set at run time" app-id="18-digit Salesforce ID" components="c-my-lwc, complex_ns-lwc-component"> </lightning-out-application> <c-other-lwc></c-my-lwc> <external-page-element-2></external-page-element-2> <c-my-lwc style="--custom-color: brown;"></c-my-lwc> <external-page-element-3></external-page-element-3> </body> </html> -
或者，通过使用文档对象模型界面 JavaScript 方法，以编程方式嵌入 Lightning Out 2.0 应用程序。从生成的 Lightning Out 2.0 代码块中复制元素名称和属性值。
关于JavaScript的实施,请参见在 Lightning Out 2.0 应用程序中设置组件样式和属性中的示例。
本文章是否解决您的问题？
请与我们共享您的想法，以便我们进行改进！
