Lightning Web Component 学习随记

编程入门行业动态更新时间:2024-10-27 08:27:04

LWC随记

前序说明
LWC的组成部分
- 常见名词解释:
- - UI Component (界面型组件)
  - Service Component (服务型组件)
- Lighting Web Component 的组成
- - HTML文件相关
  - - LWC的HTML文件编程简述
    - 在HTML页面中控制组件的显示
    - 在HTML页面中渲染列表(Render List)
  - JS文件
  - CSS文件

前序说明

	各位尊敬的读者:
			本人并非专业开发出身,所以有的注释比较浅显,希望阅读者多加包含与理解,如有错误之处,欢迎私信或评论纠正!
	谢谢各位!

LWC的组成部分

常见名词解释:

UI Component (界面型组件)

	指的是带有UI显示的LWC

Service Component (服务型组件)

	指的是可以被其他组件调用的组件,该类组件类似开发中的Service类,提供功能性服务,可以不包含界面

Lighting Web Component 的组成

	要创建一个LWC,首先要创建一个文件夹
	文件夹内的文件的文件名部分都是相同的,文件类型后缀不同
	一般来说为以下几部分

accountSortComponent
- accountSortComponent.html
- accountSortComponent.js
- accountSortComponent.js-meta.xml
- accountSortComponent.css
- accountSortComponent.svg

html

和通常的html文件类似,除了可以使用html标签外,有许多SF定义的标签

主要控制前端交互以及后端资源的调用

js-meta.xml

js文件定义的metadata文件

css

html用样式文件

svg

在App Builder或者Experience Cloud中可以调用的图标(Icon)资源

HTML文件相关

LWC的HTML文件编程简述

每一个界面型组件(UI Component)必须至少包含一个带有<template>标签的html文件
服务型组件(Service Component)也叫libraries,可以不包含HTML文件

<template></template>

示例:

<!-- accountSortComponent.html -->
<template>
    <!-- 需要实施的功能 -->
</template>

当Salesforce编译后,前端会将该Template标签替换为组件名的一个标签
<template> —> <c-account-sort-component->

<!-- <template></template>将被Salesforce在渲染页面时自动替换为: -->
<c-account-sort-component-></c-account-sort-component->

'c’是Salesforce的默认的命名空间

调用其他的组件时
组件必须和html的标签类似有关闭的标签

<!-- accountSortComponent.html -->
<template>
	<!-- 嵌入其他的组件时的范例 -->
    <c-other-account-component></c-other-account-component>
</template>

在HTML页面中控制组件的显示

如果想要在加载时不渲染某些部分,可以编写标签进行控制
控制时,变量的变换方法通常会在Javascript文件中编写

请参考下方示例中{isVisibleAccountInfo}变量的书写方式

<!-- accountSortComponent.html -->
<template>
	<!-- 符合某些条件的显示 -->
    <template if:true={isVisibleAccountInfo}>
	    <div class="slds-m-vertical_medium">
	    	显示AccountInfo...
	    </div>
	</template>
</template>

import { LightningElement } from 'lwc';

export default class AccountSortComponent extends LightningElement {
    isVisibleAccountInfo = false;

    handleChange(event) {
        this.isVisibleAccountInfo = event.target.checked;
    }
}

代码书写规范注释:
html标签中的空格

用来分割各个标签属性的符号例如: <div 属性1=‘1’ 属性2=‘2’>
通常在声明,判断,赋值的’='两边不会加入括号

而通常Apex/Javascript中的空格规范参照JAVA

List<Account> acc = new List<Account>();

*代码书写规范虽然不是强制必须的,但是我认为一个合格的开发者需要遵循一个让他人也易于阅读的书写标准

在HTML页面中渲染列表(Render List)

需要使用[迭代器]iterator或者[循环每一条]for:each将一个List渲染到前端

<!-- accountSortComponent.html-->
<template>
	<lightning-card title="accountSortComponent" icon-name="custom:custom14">
		<ul class="slds-m-around_medium">=
			<template for:each={accList} for:item="acc">
			    
				<li key={acc.Id}>
					{acc.Name}:{acc.AccountInfo__c}
				</li>
			</template>
		</ul>
	</lightning-card>
</template>

// accountSortComponent.js
import { LightningElement } from 'lwc';

export default class AccountSortComponent extends LightningElement {
    accList = [
        {
            Id: id01,
            Name: '赵某',
            Title: '销售员',
        },
        {
            Id: id02,
            Name: '李某',
            Title: '销售经理',
        },
        {
            Id: id03,
            Name: '王某',
            Title: 'CEO',
        },
    ];
}