salesforce零基础学习之lightning out

随着salesforce对lightning的推进，越来越多的项目基于lightning开发，导致很多小伙伴可能都并不了解classic或者认为不需要用到classic直接就开始了lightning的开发。其实有精力了解classic的使用还是很有必要的，因为lightning还在不断的优化中，可能有一部分还需要使用classic的功能来实现或者来协助实现，比如list view的list button目前只能使用visualforce page搭配lightning component。那么vf 如何去引用已经弄好的lightning component呢，我们接下来使用一个demo去简单了解一下。

 需求：在lightning环境下的contact list view定义一个自定义的list button，实现使用pop up方式弹出所勾选的数据列表( lwc + aura实现)。

 实现步骤：

1.构建LwC component画UI；

2. 构建aura component包含lwc component；

3. 创建aura single APP继承ltng:outApp(包含SLDS样式库)/ltng:outAppUnstyled(不包含SLDS样式库)，使用aura:dependency标签的resource属性引入2步骤中的aura component；

4. 创建vf page，使用$Lightning.use引入上面的aura single APP，然后动态创建component显示即可。

Talk is cheap,show me the code.下面根据上面的需求进行开发。

 1. ContactListController.cls：根据选择的contact id list进行搜索数据，因为前端使用wire装载方式，所以方法声明必须使用cacheable=true

public with sharing class ContactListController {
    @AuraEnabled(cacheable=true)
    public static List<Contact> fetchContactListByIDs(List<String> idList){
        return [SELECT Id,Name
                FROM Contact
                WHERE Id IN :idList];
    }
}

 2. contactListForLwc.html：用来展示一个popup modal，modal中展示一个table数据

<template>
    <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-