Instantiating Lightning Web Components on a Visualforce Page

DEX602 - Unit 3 Surfacing Lightning Web Components

📄 第 263 页 🎬 视频课程

课程章节介绍

让我们来聊聊如何在Visualforce页面中实例化一个Lightning Web组件(LWC)。这个过程其实并不复杂,我会一步步带你了解。 首先,你需要知道,Visualforce页面是Salesforce中一种传统的页面构建方式,而Lightning Web组件则是更现代、更强大的UI构建工具。虽然它们属于不同的技术栈,但Salesforce提供了一种方式,让它们可以一起工作。 ### 第一步:加载Lightning的JavaScript库 在你的Visualforce页面中,首先需要加载Lightning的JavaScript库。这个库是让Visualforce页面能够识别和加载Lightning组件的基础。你可以通过以下代码来实现: ```html ``` 这行代码会自动加载Lightning所需的JavaScript文件,包括`lightning.out.js`,这是让Visualforce页面能够与Lightning组件通信的关键。 ### 第二步:创建一个容器 接下来,你需要在Visualforce页面中创建一个`
`标签,并给它一个唯一的`id`。这个`
`将作为你Lightning Web组件的容器。比如: ```html
``` 这个`
`就是你的组件将要显示的地方。 ### 第三步:加载Lightning App 现在,你需要使用JavaScript来加载Lightning App。Lightning App是一个特殊的容器,它允许你在Visualforce页面中加载Lightning组件。你可以使用`$Lightning.use()`函数来实现这一点。这个函数会加载Lightning App,并将你的Lightning Web组件加载到内存中。 ```javascript $Lightning.use("c:MyLightningApp", function() { // 这里可以继续编写代码 }); ``` 这里的`c:MyLightningApp`是你Lightning App的名称,你需要确保这个App已经在你的Salesforce组织中创建好了。 ### 第四步:实例化Lightning Web组件 最后一步是将你的Lightning Web组件实例化到之前创建的`
`容器中。你可以使用`$Lightning.createComponent()`函数来实现这一点。这个函数会将你的组件渲染到指定的DOM容器中。 ```javascript $Lightning.createComponent("c:deliveryListMap", {}, "myLWCContainer", function(cmp) { // 组件加载完成后的回调函数 }); ``` 在这个例子中,`c:deliveryListMap`是你的Lightning Web组件的名称,`{}`是传递给组件的属性(如果有的话),`"myLWCContainer"`是你之前创建的`
`的`id`。 ### 总结 通过以上四个步骤,你就可以在Visualforce页面中成功实例化一个Lightning Web组件了。整个过程其实就是在Visualforce页面中加载Lightning的JavaScript库,创建一个容器,加载Lightning App,最后将组件实例化到容器中。 希望这个解释对你有帮助!如果你有任何问题,随时问我哦!