lsposed manager框架_wpf控件大全

LWC（Lightning Web Component）入门介绍及教程

Salesforce Lightning Experience

为了适应多端以及现代化Web应用，Salesforce在2015年推出了全新的Lightning Experience用户界面。

目前为止，Salesforce的用户界面分为两种：

1. Salesforce Classic
   • Visualforce Pages
2. Salesforce Lightning Experience
   • Lightning Web Components
   • Aura Components
   • Visualforce Pages

Lightning Web Components

Lightning Web Components是使用HTML和现代JavaScript构建的自定义HTML元素UI框架。LWC使用核心Web组件（Web Components by WICG) 标准，提供在Salesforce支持的浏览器中表现良好所需的内容。因为LWC建立在浏览器中原生运行的代码上，因此它是轻量级、拥有卓越的性能的。所需要编写的代码大部分都是标准的JavaScript及HTML代码。

创建LWC组件

目前只能在VSCode等IDE中编写LWC组件（Developer Console中无法创建、查看、编辑）

使用Salesforce Cli的命令Create Ligthing Web Component, 输入组件名之后，本地会生成一个文件夹即新建的LWC组件。

LWC的命名规则

• 必须以小写字母开头
• 必须只包含字母数字或下划线字符
• 在命名空间中必须是唯一的
• 不能包括空白处
• 不能以下划线结尾
• 不能包含两个连续的下划线
• 不能包含连字符（破折号）。

LWC文件结构

myComponent
   ├──myComponent.html
   ├──myComponent.js
   ├──myComponent.js-meta.xml
   ├──myComponent.css
   └──myComponent.svg

HTML文件

<!-- myComponent.html -->
<template>
    <!-- Replace comment with component HTML -->
</template>

在HTML文件中引用其他组件：

<!-- myComponent.html -->
<template>
    <!-- 将驼峰字母小写，前面加上`-` -->
    <c-todo-item></c-todo-item>
</template>

JS文件

import { 
    LightningElement } from 'lwc';
export default class MyComponent extends LightningElement { 
   

}

lwc 模组是LWC的核心模组，import 声明将 LightningElement 导入到组件中。

LightningElement 是一个标准HTML元素的自定义包装器

在JavaScript等编程语言中，包装器是一个旨在调用一个或多个其他函数的函数，有时纯粹是为了方便，有时在这个过程中对它们进行调整，以完成一个稍微不同的任务。

JS文件中，主要包含以下内容：

• 该组件通过@api注解方法和属性的公用API。
• 事件处理逻辑
• 私有变量

组件配置文件

想要在页面上使用LWC组件，最简单的配置内容为：

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

CSS文件

用Cli命令创建的LWC组件中默认没有CSS文件，需要手动创建同名CSS文件。例如组件名为 myComponent，则CSS文件需命名为myComponent.css

部署组件

在VSCode中使用Cli命令Deploy Source To Org， 然后在需要组件的对象详细页面中编辑页面，拖拽组件并保存。

Hello World

接下来我们尝试一下新建一个最简单的Hello World组件，并将它显示在记录页面上。

HTML:

<template>
    <lightning-formatted-text value="Hello, World!"></lightning-formatted-text>
</template>

JS:

import { 
    LightningElement } from 'lwc';

export default class HelloWorld extends LightningElement { 
   }

XML:

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

HTML模板特性

在LWC的HTML文件中，所有组件内容都包含在<template>标签内。本节介绍一些基础用法。

数据绑定

JS类中属性的绑定

<!-- hello.html -->
<template>
    Hello, {greeting}!
</template>

import { 
    LightningElement } from 'lwc';

export default class Hello extends LightningElement { 
   
    greeting = 'World';
}

{}内部可以是JS标识符或成员表达式，例如{data}, {data.name}

lightning-input字段使用onchange属性来监听其值的变化。

<!-- helloBinding.html -->
<template>
    <p>Hello, {greeting}!</p>
    <lightning-input label="Name" value={greeting} onchange={handleChange}></lightning-input>
</template>

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

export default class HelloBinding extends LightningElement { 
   
    greeting = 'World';

    handleChange(event) { 
   
        this.greeting = event.target.value;
    }
}

使用getter方法渲染表达式值。

<!-- helloExpressions.html -->
<template>
    <div class="slds-m-around_medium">
        <lightning-input name='firstName' label="First Name" onchange={handleChange}></lightning-input>
        <lightning-input name='lastName' label="Last Name" onchange={handleChange}></lightning-input>
        <p class="slds-m-top_medium">Uppercased Full Name: {uppercasedFullName}</p>
    </div>
</template>

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

export default class HelloExpressions extends LightningElement { 
   
    firstName = '';
    lastName = '';

    handleChange(event) { 
   
        const field = event.target.name;
        if (field === 'firstName') { 
   
            this.firstName = event.target.value;
        } else if (field === 'lastName') { 
   
            this.lastName = event.target.value;
        }
    }

    get uppercasedFullName() { 
   
        return `${ 
     this.firstName} ${ 
     this.lastName}`.toUpperCase();
    }
}

条件性渲染DOM元素

指令if:true|false={property} 根据变量property的布尔值决定删除或是插入DOM元素。

<!-- helloConditionalRendering.html -->
<template>
    <lightning-card title="HelloConditionalRendering" icon-name="custom:custom14">
        <div class="slds-m-around_medium">
            <lightning-input type="checkbox" label="Show details" onchange={handleChange}></lightning-input>

今天的文章lsposed manager框架_wpf控件大全分享到此就结束了，感谢您的阅读。