适用于Visualforce开发人员的Lightning Web组件 – 使用导航服务并重新使用Visualforce

学习目标 

完成本单元后，您将能够：

• 说明如何在Lightning Web组件中实现导航模式。
• 评估是将特定的Visualforce功能移至Lightning还是将其保留在Visualforce中。
• 描述Lightning Web组件如何与Visualforce页面交互。

我们已经看到了如何使用一些Visualforce概念来理解Lightning Web Components基础。我们还看到了如何有效使用Salesforce数据。在本单元中，我们涵盖两个剩余的概念：导航和Visualforce重用。最后，我们用一些建议的后续步骤包装了此模块。

URLFOR与导航服务

执行导航任务的模式在Visualforce中很常见。Visualforce页面通常使用URLFOR带有<apex:commandButton>和<apex:commandLink>标记的功能来导航到Salesforce内部或外部的页面。Apex控制器方法还可以通过返回来简化导航PageReferences。 

以编程方式从Lightning Web组件导航到其他任何地方的首选方法是使用 Lightning Navigation Service。该服务允许您生成URL，导航到页面引用，使用URL参数以及打开文件。支持许多 页面引用类型，例如App，Lightning Component，Navigation Item（选项卡）和Record Page。

导航服务通过使用有意义的PageReference对象来执行导航，从而消除了硬编码的URL 。如果Salesforce更改了特定的URL，则链接到该URL的代码不会中断。

要使用导航服务：

1. 将lightning/navigationJavaScript模块导入Lightning Web组件。
2. 使Lightning Web组件的类扩展NavigationMixin。
3. 调用该Navigate方法，传递要导航到的页面的页面引用。

考虑此示例，该示例使用导航服务导航到联系人列表页面。

clientSideNavigation.js

import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
export default class ClientSideNavigation extends NavigationMixin(LightningElement) {
    handleButtonClick() {
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Contact',
                actionName: 'list'
            }
        });
    }
}

代码重点：

• 第2行：我们NavigationMixin从lightning/navigation模块导入。
• 第3行：ClientSideNavigation定义组件的类扩展了NavigationMixin。
• 第4-10行：当handleButtonClick方法运行时（在用户单击按钮之后），导航服务将用户重定向到list该Contact对象的页面。这可以通过调用mixinNavigate方法来实现。

在Lightning体验中重用Visualforce

假设您想继续在Lightning Experience中使用Visualforce页面。你可以做到的。许多低代码工具都支持Visualforce页面，包括Lightning页面，Utility栏和Quick Actions。该 Visualforce和闪电体验模块解释了如何配置你的Visualforce页面在闪电体验使用。Visualforce和Lightning Web组件也可以共存于同一页面上并进行交互。

如果要在Visualforce页面上的特定位置包含Lightning Web组件，请使用 Visualforce JavaScript库的Lightning组件。该技术使用iframe，并为您提供了在组件和Visualforce页面之间进行通信的工具。

Visualforce的Lightning组件适用于Aura组件和Lightning Web组件。

使用Lightning Message Service可以促进DOM的不同层次结构中的Lightning组件和Visualforce页面之间的通信。LWC Recipes示例应用程序演示了如何使用Lightning Message Service发布和订阅消息。

重建与重用

在开始开发Lightning Web组件时，需要确定何时在Lightning Experience中重新使用Visualforce页面以及何时将其重建为Lightning Web组件。认真考虑在需要时进行重建：

• 更具吸引力和响应能力的用户体验。
• 易于针对多种设备尺寸进行优化的体验。
• 在您的应用程序中获得更好的性能。

对于新开发，我们始终建议使用Lightning Experience低代码工具和Lightning Web组件。它们提供了各种好处并简化了开发过程。

包起来

恭喜你！除了学习Lightning Web组件的体系结构和编码概念，访问数据以及处理服务器错误之外，您还创建并部署了四个Lightning Web组件。 

现在您已经了解了Visualforce与Lightning Web Components的比较方式，我们希望从Visualforce过渡到Lightning Web Components的开发似乎没有那么艰巨。通过Trailhead上的这些学习资源，继续您的Lightning Experience UI开发之旅。