在 Salesforce Targets 中使用组件

了解如何在不同的目标中使用 Lightning Web 组件，包括 Lightning Experience、Salesforce 移动应用程序和 Experience Builder 站点。

查看组织中的 Lightning 组件列表

在设置中，查看组织中 Lightning Web 组件和 Aura 组件的列表。

在“设置”中，输入“快速查找”框，然后选择“Lightning 组件”。在此页面中，您可以：Lightning Components

查看组织中的 Lightning Web 组件和 Aura 组件。
查看组件详细信息。单击组件名称或标签。
在开发者控制台中打开 Aura 组件。单击组件名称，然后单击 Developer Console。

注意

要开发 Lightning Web 组件，请使用 Salesforce CLI 和您选择的代码编辑器。请参阅设置开发环境。

在 AppExchange上分发组件

作为 ISV 或 Salesforce 合作伙伴，您可以打包组件并将其分发给 AppExchange（Salesforce 商店）上的其他 Salesforce 用户和组织。

将组件添加到托管包

托管包可确保应用程序和其他资源完全可升级。

要创建和使用受管软件包，请使用 Developer Edition 组织并注册名称空间前缀。托管包在组件名称中包含命名空间前缀，可防止安装程序组织中的命名冲突。

注意

自定义 Lightning Web 组件无法引用从托管软件包安装的 Lightning Web 组件。请参阅组件命名空间。

要将组件添加到包中，请参阅 Salesforce 帮助中的将组件添加到包中。

将组件添加到包中时，将自动包含该组件引用的其他组件以及导入的任何资源。有关详细信息，请参阅@salesforce模块。@salesforce/*

发布包后，组件名称将被锁定，但包开发人员仍然可以在组件的配置文件中编辑这些值。

apiVersion
description
isExposed（只能更改为falsetrue)
masterLabel
targetConfigs
targets

如果 is ，包开发人员可以从组件中删除配置和 public （）属性。isExposedfalsetargets@api

如果是，并且组件位于已发布的托管包中，则包开发人员无法从组件中删除配置或 public （）属性。即使目标或公共属性是在包的最近发布之后添加的，也会强制执行此限制。isExposedtruetargets@api

从托管包中删除组件

发布托管包后，可以决定重构包并删除组件。您有责任让客户了解您删除的任何组件的潜在影响。在升级程序包的发行说明中，列出已删除的所有自定义组件，并通知客户任何必要的操作。

注意

若要在打包组织中启用组件删除，请在合作伙伴社区中记录案例。

要从托管包中删除组件，请执行以下操作：

在“设置”中，输入“快速查找”框。Lightning Components
选择 Lightning 组件。
单击要删除的组件的 Del。

注意

当您从软件包中删除 Lightning Web 组件时，该组件将在订阅者安装升级后的软件包后保留在订阅者的组织中。如果需要，订阅者组织的管理员可以删除该组件。

当您删除值为的 Lightning Web 组件时，我们建议采用两阶段过程，以确保已删除的组件不依赖于包中的其他项目。isExposedtrue

第一阶段：删除引用。

编辑要删除的 Lightning Web 组件，以删除对其他 Lightning Web 组件的所有引用。
上传新的包版本。
将第一阶段升级推送给订阅者。

第二阶段：删除过时的组件。

从软件包中删除 Lightning Web 组件。
（可选）删除其他相关组件和类。
上传新的包版本。
将第二阶段升级推送给订阅者。

使用托管包中的组件

托管包可以为您的组织提供有用的功能。某些托管软件包包括托管的 Lightning Web 组件。通过 AppExchange 安装托管软件包后，您可以通过在自定义组件中使用托管软件包来引用托管软件包中包含的托管 Lightning Web 组件（LWC）。

重要

托管包的作者必须同时使用 Locker 和 LWS 进行测试，以确保其组件在这两种环境中都能正常工作。我们建议先在沙盒中安装和测试托管软件包，然后再将其安装到生产组织中。

在自定义组件中使用托管 LWC

托管软件包中的 Lightning Web 组件具有与您自己的命名空间不同的命名空间。我们建议您参考有关托管包的文档。

在自定义组件中使用托管包中的 LWC 时，请使用烤肉串大小写（短划线分隔）。同样，您在 LWC HTML 模板中使用的全局属性必须使用 kebab 大小写。

例如，如果托管包在命名空间中包含 LWC，并且托管组件名称为，则可以像这样引用该组件。lwc_partneraccount-verification

<!-- myComponent.html -->
<template>
  <lwc_partner-account-verification attribute-name="value"> </lwc_partner-account-verification>
</template>

在 Salesforce Target 中使用托管 LWC

托管 LWC 可用于不同的 LWC 目标，您可以使用相应的托管包文档进行验证。例如，如果在自定义 LWC 中使用托管 LWC，则可以通过更新配置标记在各种目标中显示托管 LWC。<targets>

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>58.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
    <target>lightning__RecordPage</target>
    <target>lightning__AppPage</target>
    <target>lightning__HomePage</target>
  </targets>
</LightningComponentBundle>

Lightning 应用程序生成器
使用点击式工具开发可用于为 Lightning Experience 和 Salesforce 移动应用程序快速构建自定义页面的组件。

为 Lightning 应用程序生成器配置组件

在 Lightning 应用程序生成器的 Lightning 页面上使用自定义 Lightning Web 组件之前，需要执行几个步骤。

1. 在配置文件中定义组件元数据

componentName.js-meta.xml 文件定义组件的元数据值，包括用于 Lightning 应用程序生成器的组件的设计配置。编辑配置文件以：

使您的组件可在 Lightning 应用程序生成器和托管软件包中使用。
定义您的组件可用于哪些类型的 Lightning 页面。
配置组件的属性。
设置组件支持的对象。

请参阅 XML 配置文件元素的完整列表。

此示例配置文件使该组件可用于所有 Lightning 页面类型，但限制仅对帐户、商机和仓库对象的记录页面支持。该组件具有为记录页面定义的一组属性，而不是为应用程序和主页定义的属性。

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>47.0</apiVersion>
  <isExposed>true</isExposed>
  <masterLabel>Best Component Ever</masterLabel>
  <description>This is a demo component.</description>
  <targets>
    <target>lightning__RecordPage</target>
    <target>lightning__AppPage</target>
    <target>lightning__HomePage</target>
  </targets>
  <targetConfigs>
    <targetConfig targets="lightning__RecordPage">
      <property name="prop1" type="String" />
      <objects>
        <object>Account</object>
        <object>Opportunity</object>
        <object>Warehouse__c</object>
      </objects>
    </targetConfig>
    <targetConfig targets="lightning__AppPage, lightning__HomePage">
      <property name="prop2" type="Boolean" />
    </targetConfig>
  </targetConfigs>
</LightningComponentBundle>

注意

定义组件属性时，请确保在文件和配置文件中为其分配了相同的类型（String、Integer、Boolean）。如果分配的类型不匹配，则配置文件中的类型分配优先。.js

2. 选项：将 SVG 资源添加到组件包中

要在 Lightning App Builder 中将 SVG 资源作为组件的自定义图标包含在内，请将其添加到组件的文件夹中。它必须被命名为。每个文件夹只能有一个 SVG。componentName.svg

在 Lightning 应用程序构建器中配置用于动态交互的组件

管理员和开发人员都需要使动态交互正常工作，但 keystone 是一个自定义源组件，用于定义要触发的事件的属性。将事件元数据和属性添加到源组件，以将事件公开给 Lightning 应用程序构建器，然后管理员可以在其中配置事件的目标和交互。

只有 Lightning Web 组件可以是源组件，但任何组件（Aura 或 LWC）都可以成为目标。若要公开源组件中的事件，请在其文件中触发标准 JavaScript CustomEvent。若要使事件可被发现，请在组件文件中使用特定于动态交互的元数据，类似于生成器属性的公开方式。.jsjs-meta.xml

注意

有关动态交互的概述，请参阅 Salesforce 帮助。

使用动态交互公开事件

动态交互使用两个子标签，您可以将这两个子标签放入源组件包的 componentName.js-meta.xml 文件中以公开事件。targetConfig

event
schema

注意

这些子标签仅适用于目标 .targetConfiglightning__AppPage

下面是帐户列表源组件的示例配置文件。它包括一个事件，其架构包括文件中定义的和。js-meta.xmlitemselectedapiNamerecordId.js

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>52.0</apiVersion>
  <isExposed>true</isExposed>
  <masterLabel>Account List</masterLabel>
  <targets>
    <target>lightning__AppPage</target>
  </targets>
  <targetConfigs>
    <targetConfig targets="lightning__AppPage">
      <property name="apiName" type="String"/>
      <property name="listViewApiName" type="String"/>
      <event name="itemselected" label="Item Selected" description="This event fires when an item is selected.">
        <schema>
          {
            "type": "object",
            "properties": {
              "recordId": {
                "type": "string",
                "title": "Record ID"
                "description": "Enter an 18-digit record ID."
          },
              "apiName": {
                "type": "string"
              }
            }
          }
        </schema>
      </event>
    </targetConfig>
  </targetConfigs>
  <description>meta xml description</description>
</LightningComponentBundle>

.js-meta.xml 文件的注意事项

动态交互仅使用架构和架构。架构中的所有其他项都将被忽略。typeproperties
唯一支持的属性特性是、和。typetitledescription
在事件架构中，支持的唯一有效属性类型是 String、Integer 和 Boolean。
不会针对文件验证标记元数据。event.js

使用 Lightning 应用程序生成器的提示

在创建要在 Lightning 应用程序生成器中公开的组件时，请牢记这些准则。

组件提示

使组件填充其显示区域的宽度（包括边距）的 100%。请参阅使组件具有宽度感知能力。
如果组件需要交互，请在 Lightning 应用程序生成器中提供适当的占位符行为。
不要显示空白框。想想其他网站是如何工作的。例如，Facebook 在实际的源项从服务器返回之前显示源的轮廓。大纲改进了用户对 UI 响应能力的感知。
如果组件依赖于触发的事件，请为其指定在事件触发之前显示的默认状态。
使用 Salesforce Design System 设置组件样式。

配置文件提示

使用配置文件中的标记为组件设置友好名称。masterLabel
使用配置文件向 Lightning 应用程序生成器公开属性。
我们强烈建议在所有组件的配置文件中包含支持的外形规格信息。
为所有属性指定一个具有友好显示名称的标签。
提供说明以解释预期数据和任何准则，例如数据格式或预期值范围。描述文本在 Lightning 应用程序生成器的属性编辑器中显示为工具提示。
为所需的属性提供默认值。将具有必需属性且没有默认值的组件添加到应用程序构建器时，该组件将显示为无效，这是一种糟糕的用户体验。
对任何公开的属性使用基本支持的类型（字符串、整数、布尔值）。
定义组件属性时，请确保在文件和配置文件中为其分配了相同的类型（String、Integer、Boolean）。如果分配的类型不匹配，则配置文件中的类型分配优先。.js
指定整数属性的 min 和 max 属性，以控制接受值的范围。
字符串属性可以为数据源提供一组预定义值，允许属性将其配置公开为选择列表。
如果在 Lightning 页面或托管软件包中使用组件，我们会阻止您进行可能破坏组件的破坏性更改。这些破坏性变化的一些示例是：
- 如果组件正在该对象的记录页面上使用，则删除该对象标签。
- 如果组件正在该类型的页面上使用，则删除页面类型支持。
- 如果组件正在 Lightning 页面上使用，则更改 min 或 max 属性值。

局限性

Lightning 应用程序构建器不支持地图、对象或 java:// 复杂类型。
在 Lightning 页面上使用组件后，您只能增加该组件支持的外形规格，而不能减小它们。
拉取刷新不适用于 Salesforce 移动应用程序中的自定义 Lightning Web 组件。