Lightning Web Component 和 Salesforce 数据操作示例

使用 Salesforce 数据的途径

在 Lightning Web Component 中使用 Salesforce 数据有以下几种途径：

使用 lightning-record-form 系列预定义组件，直接读取和操作数据
使用 @wire 注解来绑定数据

上面两者都使用了 Lightning Data Service 来缓存数据，提高组件的运行效率。如果数据有了更改，也会在组件中及时更新数据。

lightning-record-form 示例

lightning-record-form 是预定义的组件，可以绑定到某一条记录。

它有几种模式，通过 mode 属性来定义：

view：显示数据，具有 inline 的编辑功能
edit：直接显示数据编辑界面
readonly：只能显示数据，无法编辑

代码示例：

HTML 文件：

<template>
    <lightning-record-form
        record-id={accountId}
        object-api-name="Account"
        layout-type="Full"
        mode="view">
    </lightning-record-form>
</template>

JavaScript 文件：

@api accountId;

注意：如果不提供 record-id 属性值，则它会自动变为新建记录的界面。

也可以在 JavaScript 文件中引用对象和字段的定义，比如：

HTML 文件：

<template>
    <lightning-record-form
        record-id={accountId}
        object-api-name={objectApiName}
        fields={fields}
        mode="view">
    </lightning-record-form>
</template>

JavaScript 文件：

import { LightningElement } from 'lwc';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import NAME_FIELD from '@salesforce/schema/Account.Name';
import PHONE_FIELD from '@salesforce/schema/Account.Phone';

export default class exampleCmp extends LightningElement {
    accountId = 'xxxxxx';

    objectApiName = ACCOUNT_OBJECT;

    fields = [NAME_FIELD, PHONE_FIELD];
}

使用 field 相关预定义组件

lightning-record-view-form 组件和 lightning-output-field 组件结合可以显示记录信息，比如：

<lightning-record-view-form record-id={accountId} object-api-name="Account">
    <lightning-output-field field-name="Name"></lightning-output-field>
    <lightning-output-field field-name="Phone"></lightning-output-field>
</lightning-record-view-form>

lightning-record-edit-form 组件和 lightning-input-field 等组件结合可以编辑记录信息，比如：

<lightning-record-edit-form record-id={accountId} object-api-name="Account">
    <lightning-input-field field-name="Name"></lightning-input-field>
    <lightning-button type="submit" label="Save"></lightning-button>
</lightning-record-edit-form>

@wire 注解示例

下面的示例将使用 @wire 来绑定 Apex 函数，进行 Account 的查询。

这里假设我们已经有了一个 Apex 类 AccountController，其中有函数 getAccounts()，接收一个字符串并返回 Account 列表信息。

public with sharing class AccountController {
    // 必须要有 @AuraEnabled(cacheable=true) 注解
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccounts(String searchText) {
        return [SELECT Id, Name, Phone FROM Account WHERE Name LIKE :searchText + '%' LIMIT 10];
    }
}

HTML 文件：

<template>
    <lightning-input label="Search" value={searchText} onchange={handleSearch}></lightning-input>

    <template if:true={records.data}>
        <template for:each={records.data} for:item="account">
            <lightning-layout-item key={account.Id} class="slds-p-around_x-small">
                <lightning-card title={account.Name} icon-name="action:record">
                    <div class="slds-m-around_medium">
                        <lightning-record-form record-id={account.Id} object-api-name={objectApiName}
                            fields={fieldsToDisplay} mode="view">
                        </lightning-record-form>
                    </div>
                </lightning-card>
            </lightning-layout-item>
        </template>
    </template>
</template>

JavaScript 文件：

import { LightningElement, wire, api } from 'lwc';
import getAccounts from '@salesforce/apex/AccountController.getAccounts';

export default class AccountListLwc extends LightningElement {
    @api searchText;

    objectApiName = 'Account';
    fieldsToDisplay = ['Name', 'Phone'];

    // 在 HTML 文件中使用 records.data 来得到 Account 列表
    @wire(getAccounts, { searchText: '$searchText' }) 
    records;

    handleSearch(event) {
        this.searchText = event.target.value;
    }
}