lwc组件结构

一个 lightning web component bundle的构成。可以分成以下部分

Html: UI展示用
Js: 前端逻辑用
Css: 需要对UI指定的式样进行增强或者覆盖用
Js-meta.xml：用来配置这个组件可以暴露范围以及参数设置。

我们在创建一个LWC component时，会默认生成一个html / js /meta xml文件，其中meta xml 会指定LWC component很多配置特性，比如当前的LWC component可以引用在哪种类型的lightning page中，api version等配置信息。主要配置项有以下几点：

apiVersion：指定LWC component的api version，目前建议使用50及以上；
description：当前LWC component的描述信息，当显示在lightning app builder或者community builder的列表中我们鼠标移动到上面会展示此描述信息，此配置项是一个可选项，不必填；
isExposed：用来指定当前的component是否可以暴露给lightning app builder或者community builder使用；此标签很像aura中针对aura:component的implements的用法；
masterLabel：用来指定当前的component在lightning app builder或者community builder显示的名字。默认名字显示的是定义的component的API name，如果我们想在列表初显示需要显示的名字，我们可以设置此字段。和description一样，这个是可选项，非必填；
targets：用来指定当前的component在哪里可以添加。当我们指定isExposed为true时，则必须要有targets信息。targets下面有taget子标签，用来标识当前的component可以加在什么类型的lightning page中。target的可选值包括但不限于以下：
- lightning__AppPage：允许当前的component在lightning app builder使用在app page中；
- lightning__HomePage：允许当前的component在lightning app builder使用在home page中；
- lightning__RecordPage：允许当前的component在lightning app builder使用在record page中；
- lightning__Inbox：允许当前的component在lightning app builder中使用，用于为outlook/gmail集成添加email 应用窗；
- lightningCommunity__Page：允许当前的component在community builder中使用在lightning community page；
- lightningCommunity__Default：和lightningCommunity__Page共同使用。添加此项可以包括可配置的变量当这个component引用的时候；
- lightning__RecordAction：允许在详情页面的quick action中选择使用；
- lightning__Tab：允许组件用于自定义tab中。

我们在项目中常用的配置就是lightning__AppPage / lightning__HomePage / lightning__RecordPage/lightning__RecordAction以及lightning__Tab了。

targetConfigs：用来配置不同类型的lightning page和不同的初始化的component 变量。一个lwc component可能有很多的变量声明，我们针对不同类型的lightning page中需要初始化不同的变量，便可以使用此标签去实现。和上面的targets一样，他也是一个父标签，内容在子标签targetConfig 声明。targetConfig有一个属性叫做targets,我们可以使用此属性去声明当前的配置项针对哪个类型的lightning page，针对多个类型的lightning page，我们可以使用逗号','分隔。例如：

<targetConfig targets="lightning__RecordPage,lightning__AppPage">

targetConfig下可以配置三个子标签，分别是property / objects / supportedFormFactors,用来给变量进行初始化操作。下面对这三个子标签分别描述。

Property: 我们在LWC js中会使用@api标签声明public变量，使用Property在引用在lightning app builder或者community builder的时候我们可以设置一些初始值以及初始化配置。Property有以下的属性：
- type：用来声明变量的类型，比如 Integer/ String / Boolean .
- required：用来标识当前的变量是否必须设置。默认值为false；
- placeholder：仅用于type为String的情况，用于当输入框为空的时候在输入框中展示的提示信息；
- name：我们在js中声明的变量名称，两者必须完全匹配。
- min：当type为Integer的时候，设置我们想要设置变量的最小值；
- max：当type为Integer的时候，设置我们想要设置变量的最大值；
- label：在工具中展示attribute的显示的label 名称；
- description：在工具中展示attribute的描述信息；
- default：当前attribute的默认值；
- datasource：当type为string情况下需要渲染变量为picklist，则使用此属性，不同之间的字符串使用逗号','分割。
上述的属性中，只有name以及type是必填项，其他都是可选项。
objects:当我们在target中声明当前的LWC component在targetConfig中配置了可以引用在lightning record page时，我们可以指定当前的component可以用于哪些objects使用。同targetConfigs一样，他也有一个子标签叫做object用来声明可以用在哪个object中使用。object标签不能使用*来声明可以引用所有objects
supportedFormFactors：我们访问salesforce可能使用手机或者电脑，我们针对不同的媒介访问不同的页面(home page/ record page等)可能需要展示不同的大小，这时我们就需要设置supportedFormFactors了。针对此配置项的配置信息，详情可以查看 https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.use_config_form_factors

上面内容晦涩难懂，以几个例子进行更好的说明：

此组件仅用于组件间使用，无法在 lightning app builder查看到，因为 isExposed为false

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="<http://soap.sforce.com/2006/04/metadata>">
    <apiVersion>52.0</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>

此组件在 Record, App,Home情况下可以在 lightning app builder中选择到，其中：
1. 针对Record Detail，仅允许当前表时 Account / Opportunity / Warehouse__c才可以选择到，其他的表无法选择到这个组件，并且当详情页选择到时，选中后可以配置prop1变量的默认值
2. 针对app以及home page，可以配置prop2变量的默认值

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="<http://soap.sforce.com/2006/04/metadata>">
  <apiVersion>52.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>

此组件用于配置在community cloud中，可以设置string,boolean,integer等变量初始值

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="<http://soap.sforce.com/2006/04/metadata>" fqn="helloWorld">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Hello World</masterLabel>
    <targets>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightningCommunity__Default">
            <property name="string" type="String" default="jsMetaValue"></property>
            <property name="boolean" type="Boolean" default="true"></property>
            <property name="integer" type="Integer" default="5"></property>
            <property name="picklist" type="String" default="value3" datasource="value1,value2,value3"></property>
            <property name="backgroundColor" type="Color" default="#ff00ff"></property>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

此组件用于配置在 app/record/home页面，如果项目没有严格要求，这种配置也可以作为通用配置项

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

参考文档：

XML Configuration File Elements