Lightning Container 简介

在 Lightning 框架中，如果我们想要使用第三方的组件，可以将它们包含在 Lightning Container 模块中。

Lightning Container 的工作原理

Lightning Container 会将内部的组件包含在一个 iframe 中，并且提供了若干函数让其内部的组件和外部的 Lightning 应用进行通信。

它要求内部的组件是作为“静态资源（static resource）”上传到 Salesforce 中。

它的语法本质上是调用静态资源的 URL 路径。

举个例子，我们已经有了一个 Vue 应用，它的入口文件是 index.html，我们将它上传到 Salesforce 的静态资源，名字叫 “testApp”，那么调用它的方式如下：

<lightning:container src="{!$Resource.testApp + '/index.html'}" />

Lightning Container NPM 包和使用实例

Lightning Container 提供了 NPM 包，可以让第三方组件调用 API，从而和 Lightning 组件进行通信。

我们以两个 Vue-cli 例子程序来说明：

• 如何和 Lightning 组件进行通信
• 如何从第三方组件中调用 Apex 函数

设置 Lightning Container

初始化 Vue-cli 项目，然后安装 NPM 包：

npm install lightning-container --save

在 main.js 文件中加入以下两行：

import LCC from 'lightning-container'

Vue.prototype.$LCC = LCC

这样，我们就可以在其他的组件中引用模块了，语法如下：

this.$LCC

编译 Vue 应用

在命令行中运行以下命令即可将 Vue 的应用编译到 “dist” 文件夹下：

npm run build

然后我们将 “dist” 文件夹下的内容打包成 zip 文件，上传到 Salesforce 中作为静态资源。

Vue-cli 的应用默认的入口是 index.html 文件。

和 Lightning 组件的通信演示

在这个通信的演示程序中，我们要达到的目标是把文字在 Lightning 组件和 Vue 应用中相互发送。

在 Vue 项目中，在 “src/components” 文件夹中新建 Vue 组件，名为 “Messaging.vue”，代码如下：

<template>
  <div>
    <h3>通信演示</h3>
    
    <div>
      发送给 Lightning Component:
      <input type="text" id="text-input-to-Lc" class="slds-input" v-model="msgToLC" />
      <button id="sendBtn" class="slds-button slds-button--neutral" v-on:click="sendMessage">发送到 Lightning Component</button>
    </div>
    
    <div>
      从 Lightning Component 接收的信息:
      <input type="text" id="text-input-from-Lc" class="slds-input" v-model="msgFromLC" />
    </div>
  </div>
</template>

<script>
export default {
    data () {
        return {
        msgToLC: '',
        msgFromLC: ''
        }
    },
    mounted: function() {
        this.$LCC.addMessageHandler(this.receiveMessage); // 使用 addMessageHandler() 函数定义如何接收从 Lightning 组件中传来的数据
    },
    methods: {
        receiveMessage: function(message) {
            this.msgFromLC = message.value;
        },

        sendMessage: function() {
            // 使用 sendMessage() 函数发送信息给 Lightning 组件
            this.$LCC.sendMessage({name: "Message To LC", value: this.msgToLC})
        }
    }
}
</script>

在 Vue 项目的 “src/router” 文件夹下，修改 “index.js” 文件，将刚才建立的 Vue 组件定义为默认的路径：

import Messaging from '@/components/Messaging'

export default new Router({
    routes: [
    {
        path: '/',
        name: 'Messaging',
        component: Messaging
    },
    ]
})

编译 Vue 应用，然后上传到 Salesforce 中，作为静态资源，名为 “VueApplication”。

在 Salesforce 中新建 Lightning 组件：

<aura:component access="global">
    <aura:attribute access="private" name="messageToSend" type="String" default=""/>
    <aura:attribute access="private" name="messageReceived" type="String" default=""/>
    
    <div>
        <lightning:input name="messageToSend" value="{!v.messageToSend}" label="发送给 Vue 应用: "/>
        <lightning:button label="Send" onclick="{!c.sendMessage}"/>
        <br/>

        <lightning:input value="{!v.messageReceived}" label="接收自 Vue 应用: "/>
        <br/>
    
        <!-- 使用 lightning:container 来调用静态资源中的 Vue 应用，并定义在收到它的信息时使用的函数 -->
        <lightning:container aura:id="vueApp"
                             src="{!$Resource.vueApplication + '/index.html'}"
                             onmessage="{!c.handleMessage}"/>
    </div>
</aura:component>

定义控制器：

({
    /*
     * 从 Lightning 组件中发送信息
     */
	sendMessage : function(component, event, helper) {
        var msg = {
            name: "Message From LC",
            value: component.get("v.messageToSend")
        };
      
        component.find("vueApp").message(msg);
    },
    
    /*
     * 接收从 Vue 应用中发送的信息
     */ 
    handleMessage: function(component, event, helper) {
        var value = event.getParams().payload.value;
   
        component.set("v.messageReceived", value);        
    },
})

当我们使用这个 Lightning 组件时，它会自动调用 Vue 应用，然后可以将文字在两个应用之间发送和接收。

当我们查看页面的源代码时，可以看到，lightning:container 中的内容被放在了一个 iframe 中，所以我们的 Vue 应用其实是封装起来的。

调用 Apex 函数

在接下来的应用中，我们要从 Vue 应用中调用 Apex 函数。

在 Salesforce 中建立 Apex 函数：

global without sharing class VueController {
	@RemoteAction
    global static Account[] getAccounts(String searchString) {
        return [SELECT Id, Name, Phone, Type, NumberOfEmployees FROM Account Limit 10];
    }
}

为了调用 Apex 函数，我们在 Vue 应用中需要一个特殊的设置。在 “dist” 文件夹下建立一个名为 “manifest.json” 的文件，内容如下：

{
    "landing-pages" : [
        {
            "path": "index.html",
            "apex-controller": "VueController"
        }
    ]
}

在 Vue 应用中建立一个名为 “AccountList” 的组件：

<template>
  <div>
    <h3>接收到的数据：</h3>
    
    <ul>
      <li v-for="item in accounts">
        {{ item.Name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
    data () {
        return {
            accounts: [],
        }
    },
    mounted: function() {
        this.getAccounts();
    },
    methods: {
        getAccounts: function() {
            // 使用 callApex() 函数来调用相应的函数
            this.$LCC.callApex("VueController.getAccounts", 
            {
            searchString: ''
            }, 
            this.handleResult, 
            {});
        },

        handleResult: function(result) {
            this.accounts = result;
        },
    }
}
</script>

这样，在用 lightning:container 在 Lightning 组件中执行 Vue 应用时，Vue 应用会直接调用 Apex 函数，然后给出结果。

与 Locker Service 的比较

Lightning Container 机制和 Locker Service 机制都是对 Lightning 组件的安全进行提高，将不同来源（命名空间等）的组件分别封装。

Lightning Container 是基于 iframe 的，它将第三方的组件或应用封装在 iframe 中，而 Locker Service 则不需要这样，它是将不同的组件放在同一个 DOM 树中，将不同的 DOM 元素封装起来。这是两者最大的不同，从而也决定了它们不同的特性：

• Locker Service 可以利用 Lightning 框架的各种本地功能，而 Lightning Container 中的内容则受到限制，比如只能通过其 NPM 包中提供的 API 函数来进行通信
• Lightning Container 支持的第三方框架比 Locker Service 更多
• Locker Service 中的组件执行速度比 Lightning Container 中的要快
• Locker Service 中的组件和整个 Lightning 框架的外观是一致的，而 Lightning Container 中的内容由于被封装在 iframe 中，在特殊的情况下可能会出现问题