Use Components in Visualforce Pages — Lightning Out

我们来看一下怎么在Visualforce页面里嵌入Lightning Web Components。这需要用到一个叫Lightning Out的功能，目前还是测试版。 整个过程可以分成三步。第一步很简单，就像我们平时在页面里引入一个外部JavaScript库一样，在你的Visualforce页面里加上一行代码，加载Lightning Out的JavaScript库。这行代码会帮我们准备好后面要用的工具。 第二步呢，需要在同一个Salesforce组织里，创建一个独立的Aura应用程序。这个应用程序不是我们平时给用户看的那种，它的作用就是一个“容器”，用来承载Lightning Web Component。创建的时候，让这个程序扩展ltng冒号outApp，这样它就变成了一个Lightning Out应用程序。然后，在程序里，用这个标签 aura冒号dependency 来声明你要用的所有LWC组件，告诉平台“等一下可能会用到这些组件哦，请提前准备好”。这里有个细节，扩展ltng冒号outApp会自动带上Salesforce的SIDS样式，让组件外观更统一。如果你不想用这些样式，想让组件保持最原始的样子，可以换成扩展ltng冒号outAppUnstyled。 第三步，我们要在Visualforce页面的JavaScript代码里，做两件事。首先，调用Lightning点use函数，来引用刚才创建的那个应用程序。你需要传入应用程序的名字，如果是在命名空间包里，前面还要加上命名空间，然后提供一个回调函数，平台准备好之后会通知你。这个use函数可以多次调用，但要注意，每次调用的都必须是同一个应用程序。 然后用Lightning点createComponent函数去真正创建一个组件实例。你需要告诉它组件类型是什么，要传进去哪些属性，以及你想把组件放到页面上哪个HTML元素里，也就是提供一个DOM元素的ID。同样提供一个回调，当组件创建完成后，回调函数会收到这个组件，你就可以把它渲染出来、或者做其他操作了。 最后有一个非常重要的提醒：Lightning Web Components和Visualforce页面，它们是从不同的域提供服务的。这就意味着，在组件里产生的cookie，会被浏览器看作是第三方cookie。所以，用户必须在自己的浏览器设置中，允许第三方cookie，否则组件功能可能会出问题。这一点在考虑使用Lightning Out的时候，一定要心里有数。 好，这样我们就把在Visualforce里集成LWC的三个步骤讲完了。