在此步骤中，您将创建一个新的Web组件，该组件显示特定会议会话的详细信息。您还实现了一个简单的导航系统，该系统允许用户在会话列表和会话详细信息之间来回导航。

首先，让我们创建Web组件的JavaScript文件。

1. 在现有my文件夹下，创建一个名为的新文件夹sessionDetails。
2. 在sessionDetails文件夹中，创建一个名为的新文件sessionDetails.js。
3. 实现了sessionDetails类，如下所示：

   import { LightningElement, api } from 'lwc';
   import { getSession } from 'data/sessionService';
   export default class SessionDetails extends LightningElement {
     session;
     @api
     set sessionId(id) {
       this._sessionId = id;
       this.session = getSession(id);
     }
     get sessionId() {
       return this._sessionId;
     }
   }

   我们使用@api装饰器将sessionIdsetter方法定义为public。这样，您就可以提供标签sessionId 的属性my-session-details。带注释的属性@api是反应性的：当其值更改时，组件将自动重新呈现。

4. 保存的sessionDetails.js文件。

现在，让我们在Web组件模板中创建用户界面。

1. 在sessionDetails文件夹中，创建一个名为的新文件sessionDetails.html。
2. 实施模板，如下所示：

   <template>
     <template if:true={session}>
       <h2>{session.name}</h2>
       <p class="icon time">{session.dateTime}</p>
       <p class="icon room">{session.room}</p>
       <h3>Abstract</h3>
       <div class="abstract">{session.description}</div>
     </template>
   </template>
   
3. 保存的sessionDetails.html文件。

接下来，让我们创建Web组件的CSS文件，以确保一切看起来都不错。

1. 在sessionDetails文件夹中，创建一个名为的新文件sessionDetails.css。
2. 定义以下样式：

   :host {
     width: 100%;
     margin: 2rem;
     color: #080707;
   }
   p {
     margin: 0;
   }
   .icon {
     color: #039be5;
     background-repeat: no-repeat;
     background-size: contain;
     padding-left: 24px;
   }
   .icon.time {
     background-image: url(https://developer.salesforce.com/files/js-dev/icons/clock.svg);
     margin-top: .6rem;
   }
   .icon.room {
     background-image: url(https://developer.salesforce.com/files/js-dev/icons/location.svg);
     margin-top: .4rem;
   }
   h2 {
     font-weight: 600;
     font-size: 1.4rem;
   }
   h2 a, h2 a:visited {
     color: #039be5;
     text-decoration: none;
   }
   h2 a:hover {
     color: #017bb7;
   }
   h3 {
     font-weight: bold;
     font-size: 1.1rem;
     margin: 1.5rem 0 0.5rem 0;
   }
   .list-wrapper {
     display: flex;
     flex-direction: column;
   }
   .speaker-list {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     margin: 0 -0.5rem;
   }
3. 保存的sessionDetails.css文件。

而已！您创建了一个显示会议会话详细信息的Web组件。

要查看它的实际效果，您需要将其添加到应用程序中。

1. 打开了app.html该文件app的文件夹。
2. 在标签之后添加以下<my-session-list></my-session-list>标签：

   <my-session-details session-id={sessionId}></my-session-details>
3. 保存的app.html文件。
4. 打开该app.js文件。
5. 在App类定义中定义一个属性：

   import { LightningElement } from 'lwc';
   export default class App extends LightningElement {
     sessionId;
   }
6. 保存的app.js文件。

返回浏览器，请注意该sessionDetails组件未出现。这是因为sessionId您刚刚定义的 属性app.js尚未指向实际的sessionId。换句话说，应用程序不知道要显示哪个会话。这就提出了一个很好的问题：sessionDetails 组件应实际显示哪个会话？答案是：用户在sessionList组件中单击的会话！sessionList组件如何通知应用程序单击了特定会话？通过调度自定义DOM事件。

现在，您已经创建了所有不同的组件，您需要在应用程序的不同方面显示它们，并确保不同的组件相互反应。首先，让我们修改sessionList组件，使其在单击会话时触发一个事件。

1. 打开该sessionList.html文件。
2. 将以下属性添加到<a>标签：data-index={index} onclick={handleSessionClick}它看起来像 

   <a key={session.id} class="session" data-index={index} onclick={handleSessionClick}>
3. 保存的sessionList.html文件。
4. 打开该sessionList.js文件。
5. 在handleSessionClick函数SessionList之后，将事件处理程序添加到类中handleSearchKeyInput：

   handleSessionClick(event) {
     const index = event.currentTarget.dataset.index;
     const navigateEvent = new CustomEvent('navigate', {
       detail: {
         sessionId: this.sessions[index].id
       }
     });
     this.dispatchEvent(navigateEvent);
   }
6. 保存的sessionList.js文件。

接下来，让我们在appWeb组件中监听该事件。

1. 打开该app.html文件。
2. onnavigate在my-session-list标签上添加一个属性：

   <my-session-list onnavigate={handleNavigate}></my-session-list>
3. 保存的app.html文件。
4. 打开该app.js文件。
5. 在handleNavigate之后添加事件处理程序sessionId;：

   handleNavigate(event) {
     this.sessionId = event.detail.sessionId;
   }
6. 保存的app.js文件。

返回浏览器，然后单击其中一个会话。现在，该会话的详细信息应出现在列表之后。 

一切正常，但是滚动到列表底部以查看详细信息并不是很好的用户体验。您可以在列表的右侧显示详细信息，但这可能不适用于移动设备。在下一部分中，您将实现一个基本的导航系统，该系统允许用户导航到不同的视图。

导航是单页应用程序的重要组成部分。在此项目中，您将为应用程序使用两个状态（“列表”和“详细信息”）实现最小导航系统，并使用自定义事件在这些状态之间进行导航。

1. 打开该app.js文件。
2. 声明一个state产权后sessionId;：

   state = 'list';
3. 修改的handleNavigate事件处理程序更改应用程序的基础上，自定义导航事件值的状态。

   handleNavigate(event) {
     this.state = event.detail.state;
     this.sessionId = event.detail.sessionId;
   }
4. 添加两个可以在组件模板中使用的getter函数，以检查应用程序的当前状态。

   get isStateList() {
     return this.state === 'list';
   }
   get isStateDetails() {
     return this.state === 'details';
   }
5. 保存的app.js文件。
6. 打开该app.html文件。
7. 裹<my-session-list>在一个if:true指令时，应用程序的状态是“清单”，只显示它：

   <template if:true={isStateList}>
     <my-session-list onnavigate={handleNavigate}>
     </my-session-list>
   </template>
   
8. 裹<my-session-details>在一个if:true指令时，应用程序的状态是“细节”，只显示它：

   <template if:true={isStateDetails}>
     <my-session-details session-id={sessionId}>
     </my-session-details>
   </template>
9. onnavigate在my-session-details标签上添加一个属性：

   <my-session-details onnavigate={handleNavigate} session-id={sessionId}>
   </my-session-details>
10. 保存的app.html文件。

接下来，让我们确保选择会话时更改状态。

1. 打开该sessionList.js文件。
2. 将handleSessionClick事件处理函数替换为：

   handleSessionClick(event) {
     const index = event.currentTarget.dataset.index;
     const navigateEvent = new CustomEvent('navigate', {
       detail: {
         state: 'details',
         sessionId: this.sessions[index].id
       }
     });
     this.dispatchEvent(navigateEvent);
   }
3. 保存的sessionList.js文件。

接下来，让我们确保用户可以返回到会话列表。

1. 1. 打开该sessionDetails.html文件。
   2. 将会话标题替换为<h2>{session.name}</h2>：

<h2><a href="#" onclick={handleSessionsClick}>Sessions</a> &gt; {session.name}</h2>

1. 保存的sessionDetails.html文件。
2. 打开该sessionDetails.js文件。
3. 将handleSessionsClick事件处理程序添加到sessionDetails类中，紧接在sessionIdgetter函数之后：

   handleSessionsClick() {
     const navigateEvent = new CustomEvent('navigate', {
       detail: {
         state: 'list'
       }
     });
     this.dispatchEvent(navigateEvent);
   }
   
4. 保存的sessionDetails.js文件。

返回浏览器，然后单击其中一个会话。现在，会话列表显示单击的会话的详细信息视图。如果单击会话标题旁边的“会话”链接，则返回到会话列表。

很好！会议与会者单击特定的会议时，可以查看会议列表并导航到详细信息视图。为了将您学到的东西付诸实践，创建一个最终的Web组件，该组件在会话详细信息视图上显示扬声器卡。

首先，让我们创建Web组件的JavaScript文件。

1. 在现有my文件夹下，创建一个名为的新文件夹speakerCard。
2. 在speakerCard文件夹中，创建一个名为的新文件speakerCard.js。
3. 实现SpeakerCard该类，如下所示：

   import { LightningElement, api } from 'lwc';
     export default class SpeakerCard extends LightningElement {
       @api speaker;
   }
4. 保存的speakerCard.js文件。

接下来，让我们创建Web组件的HTML模板。

1. 在speakerCard文件夹中，创建一个名为的文件speakerCard.html。
2. 实施模板，如下所示：

   <template>
     <div class="card">
       <div class="header">
         <img src={speaker.pictureUrl} alt="Speaker picture">
         <div>
           <p class="title">{speaker.name}</p>
           <p class="icon email">{speaker.email}</p>
         </div>
       </div>
       {speaker.bio}
     </div>
   </template>
3. 保存的speakerCard.html文件。

接下来，让我们添加一些样式以确保一切都看起来不错。

1. 在speakerCard文件夹中，创建一个名为的文件speakerCard.css。
2. 添加以下样式：

   :host {
     margin: 0.5rem;
     flex: 1;
     color: #080707;
   }
   .card {
     border: 1px solid #dddbda;
     border-radius: 0.25rem;
     padding: 1rem;
   }
   .card .header {
     display: flex;
     align-items: center;
     margin-bottom: 1rem;
   }
   .card img {
     border-radius: 50%;
     height: 5rem;
     margin-right: 1rem;
   }
   .card .title {
     font-weight: 600;
   }
   .card .icon {
     color: #039be5;
     background-repeat: no-repeat;
     background-size: contain;
     padding-left: 24px;
   }
   .card .icon.email {
     background-image: url(https://developer.salesforce.com/files/js-dev/icons/email.svg);
     margin-top: 0.4rem;
   }
   p {
     margin: 0;
   }
3. 保存的speakerCard.css文件。

最后，让我们将扬声器卡添加到会话详细信息视图中。

1. 打开该sessionDetails.html文件。
2. 在abstractdiv之后添加以下标记：

   <h3>Speakers</h3>
     <div class="speaker-list">
       <template if:true={session.speakers}>
         <template for:each={session.speakers} for:item="speaker">
           <my-speaker-card key={speaker.id} speaker={speaker}>
           </my-speaker-card>
       </template>
     </template>
   </div>
3. 保存的sessionDetails.html文件。

返回浏览器窗口，然后单击列表中的会话。会话详细信息视图现在应该看起来像这样，包括扬声器卡。

恭喜，您已经成功创建了第一个Lightning Web Component开源应用程序！请查看本系列的下一个项目，在该项目中您可以修改应用程序以使用REST服务从Salesforce获取会议数据。您无需了解Salesforce即可执行下一个项目。我们将指导您完成所有步骤。

在JavaScript或Web组件应用程序中，有许多访问数据的策略。在此步骤中，您将创建一个简单的数据服务模块，可以将其导入任何Web组件中以检索会议会话列表。该模块使我们可以通过REST服务访问云中托管的示例数据。您可以使用 此链接在浏览器中调用端点来浏览数据。由于数据以JSON格式存储，因此我们的浏览器无法以漂亮的方式呈现信息。

要使此数据可用，请创建一个sessionService模块，该模块封装数据访问逻辑以检索会议会话列表。

1. 在src/client/modules文件夹中，创建一个名为的新文件夹data。
2. 在data文件夹中，创建一个名为的文件夹sessionService。
3. 在sessionService文件夹中，创建一个名为的文件sessionService.js。
4. 在中sessionService.js，如下执行数据服务。

   const URL = 'https://conference-lwc-app.herokuapp.com/api/sessions';
   let sessions = [];
   export const getSessions = () => fetch(URL)
     .then(response => {
       if (!response.ok) {
         throw new Error('No response from server');
       }
       return response.json();
     })
     .then(result => {
       sessions = result.data;
       return sessions;
     });
   export const getSession = sessionId => {
     return sessions.find(session => {
       return session.id === sessionId;
     });
   }

   该 getSession() 函数允许您从缓存的sessions 阵列中检索特定的会话 。创建会话详细信息Web组件时，可以在此项目的后面使用此功能。

5. 保存的sessionService.js文件。

而已！您创建了一个数据服务模块，可用于检索会议应用程序中任何位置的数据。在下一步中，您将创建一个Web组件，该组件使用 sessionService数据服务来显示会议列表。

在JavaScript或Web组件应用程序中，有许多访问数据的策略。在此步骤中，您将创建一个简单的数据服务模块，可以将其导入任何Web组件中以检索会议会话列表。该模块使我们可以通过REST服务访问云中托管的示例数据。您可以使用 此链接在浏览器中调用端点来浏览数据。由于数据以JSON格式存储，因此我们的浏览器无法以漂亮的方式呈现信息。

要使此数据可用，请创建一个sessionService模块，该模块封装数据访问逻辑以检索会议会话列表。

1. 在src/client/modules文件夹中，创建一个名为的新文件夹data。
2. 在data文件夹中，创建一个名为的文件夹sessionService。
3. 在sessionService文件夹中，创建一个名为的文件sessionService.js。
4. 在中sessionService.js，如下执行数据服务。

   const URL = 'https://conference-lwc-app.herokuapp.com/api/sessions';
   let sessions = [];
   export const getSessions = () => fetch(URL)
     .then(response => {
       if (!response.ok) {
         throw new Error('No response from server');
       }
       return response.json();
     })
     .then(result => {
       sessions = result.data;
       return sessions;
     });
   export const getSession = sessionId => {
     return sessions.find(session => {
       return session.id === sessionId;
     });
   }

   该 getSession() 函数允许您从缓存的sessions 阵列中检索特定的会话 。创建会话详细信息Web组件时，可以在此项目的后面使用此功能。

5. 保存的sessionService.js文件。

而已！您创建了一个数据服务模块，可用于检索会议应用程序中任何位置的数据。在下一步中，您将创建一个Web组件，该组件使用 sessionService数据服务来显示会议列表。

在上一步中，您使用该create-lwc-app 工具创建了样板应用程序 。在此步骤中，您将修改默认应用程序并将其变成会议管理应用程序。

您可以使用自己喜欢的代码编辑器完成此项目。我们建议使用 Visual Studio Code，但这不是必需的。我们以VS Code为将来的指示。

1. 1. 打开Visual Studio代码。
   2. 在菜单中选择文件>打开。
   3. 选择您的conference-app文件夹，然后单击“打开”。

1. 在VS Code文件资源管理器中，展开src文件夹，然后展开client文件夹。
2. 打开该index.html文件。
3. 将现有内容替换为以下HTML代码：

   <!DOCTYPE html>
   <html lang="en">
     <head>
       <meta charset="utf-8" />
       <title>Lightning Conference</title>
       <style>
         body {
           font-family: Helvetica, Arial, sans-serif;
           margin: 0;
           padding: 0;
         }
       </style>
       <meta name="viewport" content="width=device-width,initial-scale=1" />
       <link rel="shortcut icon" href="/resources/favicon.ico" />
     </head>
     <body>
       <div id="main"></div>
     </body>
   </html>
4. 保存的index.html文件。

在此新版本中，您更改了页面标题和嵌入式CSS以支持我们应用程序的要求。在div与IDmain为您的应用程序使用了JavaScript中的入口点index.js文件使用追加了第一个Web组件createElement来创建组件。

import { createElement } from 'lwc';
import MyApp from 'my/app';
const app = createElement('my-app', { is: MyApp });
document.querySelector('#main').appendChild(app);

<my-app>是表示我们第一个Web组件的自定义元素：my是映射到文件系统上我的文件夹的名称空间，并且app是Web组件名称。所述appWeb组件被用作应用程序的容器。

让我们修改 app Web组件以显示会议管理应用程序的标题。该组件可协调应用程序中的所有事件和数据。

1. 在VS代码文件浏览器中，展开app文件夹下src/client/modules/my。该文件夹包含组成Lightning Web组件的三个文件：一个html文件（模板），一个js文件（类定义）和一个css文件（样式）。
2. 打开该app.html文件。
3. 用以下标记替换现有内容：

   <template>
     <header>
       <img src="resources/lwc.png" alt="App logo">
       <h2>Lightning Conference</h2>
     </header>
     <main class="content">
       <!-- Add components here -->
     </main>
   </template>

   该 <template> 标签是定制元素说明书的一部分，包括用于网络组件的HTML标记。

4. 保存的app.html文件。

1. 闪电Web组件的样式看起来最好。打开文件app.css。
2. 用以下样式替换现有内容：

   .content {
     padding: 0 3rem;
   }
   header {
     padding: 1rem;
     display: flex;
     color: #ffffff;
     background: #0288d1;
     box-shadow: 0 4px 3px rgba(1, 87, 155, 0.5);
     align-items: center;
   }
   header img {
     height: 3rem;
     margin-right: 0.3rem;
   }
   header h2 {
     font-size: 1.75rem;
     font-weight: 300;
   }
3. 保存的app.css文件。

返回浏览器窗口以查看更改。该应用程序应如下所示：

做得好！您修改了默认的“应用程序” Web组件，并准备好主持会议应用程序。在下一步中，您将创建用于检索会议会话的数据服务。