Salesforce LWC（四）：创建与部署

84 阅读 0 评论 56 点赞

我是靠谱客的博主狂野书包，最近开发中收集的这篇文章主要介绍Salesforce LWC（四）：创建与部署，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

创建一个LWC

在之前面准备好的project中,右键lwc文件夹，选择FDX: Create Lightning Web Component
输入文件名bikeCard
保存位置在lwc文件夹下面
创建成功后会自动生成三个文件，html文件，js，xml文件（css是默认不主动创建的）
把下面的代码放到相应的文件中

bikeCard.html

<template>
    <div>
        <div>Name: {name}</div>
        <div>Description: {description}</div>
        <lightning-badge label={material}></lightning-badge>
        <lightning-badge label={category}></lightning-badge>
        <div>Price: {price}</div>
        <div><img src={pictureUrl}/></div>
    </div>
</template>

bikeCard.js

import { LightningElement } from 'lwc';
export default class BikeCard extends LightningElement {
   name = 'Electra X4';
   description = 'A sweet bike built for comfort.';
   category = 'Mountain';
   material = 'Steel';
   price = '$2,700';
   pictureUrl = 'https://s3-us-west-1.amazonaws.com/sfdc-demo/ebikes/electrax4.jpg';
 }

bikeCard.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <!-- The apiVersion may need to be increased for the current release -->
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Product Card</masterLabel>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

保存文件。

组件配置文件

html，css，js文件相信大家都不陌生，在创建一个新的lwc的时候还会自动生成一个xml文件，这个xml文件就是配置文件，以下面的代码为例，详细介绍一下各个标签的含义。

<?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Product Card</masterLabel>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
        <target>lightningCommunity__Page</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Product__c</object>
            </objects>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

< masterLabel >:在我们设置app builder的时候所显示的名称，如果没有的话就默认是原来的component的名字。
< targets >：这个lwc可以适用在哪些地方，这个地方是非常多的我们可以参照文档看到所有可以使用的地方。
< isExposed >：这个顾名思义，根据标签中的内容判定这个lwc是否暴露出来。
< targetConfigs >：为不同的页面配置一些单独使用的内容
还有很多标签https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.reference_configuration_tags文档中都有详细的描述。

部署LWC

Authenticate with your Dev Hub org using SFDX: Authorize an Org from the Command Palette in VS Code. When prompted, accept the Project Default and press Enter to accept the default alias. If prompted to allow access, click Allow.----连接环境
Deploy the project files using SFDX: Deploy this Source to Org from the Command Palette in VS Code.-------右键lwc文件夹，选择部署