Skip to main content

使用本地开发预览您的组件

注意

注意

用中文（简体）学习？在中文（简体）Trailhead Playground 中开始挑战，用括号中提供的译文完成挑战。仅复制并粘贴英文值，因为挑战验证基于英文数据。如果在中文（简体）组织中没有成功通过挑战，我们建议您 (1) 将区域设置切换为美国，(2) 按此处说明将语言切换为英文，(3) 再次单击“检查挑战”按钮。

查看 Trailhead 本地化语言徽章详细了解如何利用 Trailhead 译文。

在本项目早期阶段，您创建了一个临时组织（别名 scratchOrg）、一个 Lightning 应用程序和一个 Lightning Web 组件 (myFirstWebComponent)。现在，您将运行本地开发在 Lightning 应用程序的实时预览中查看您的组件。

在桌面环境中为 Lightning 应用程序运行本地开发

借助本地开发，您可以在桌面或 Salesforce 移动应用程序（iOS 或 Android）环境中实时预览 Lightning 应用程序。当您的本地组件发生更改时，预览会自动更新，因此您无需部署代码或刷新浏览器页面。运行桌面预览和移动预览时会有不同的命令标记。

让我们使用本地开发在桌面环境中预览 Sales Lightning 应用程序。您的临时组织自带一些您可以使用的默认应用程序。

  1. 在 Visual Studio Code 中，单击 macOS 上的 Command + Shift + P 或 Windows 或 Linux 上的 Ctrl + Shift + P ，然后输入 new terminal（新终端）并选择Terminal: Create New Terminal（终端：创建新终端）。
  2. 确保您拥有最新版本的本地开发命令。在 Terminal（终端）选项卡中，输入 sf update 并按 Enter 键。
  3. 更新完成后，在同一 Terminal（终端）选项卡中，输入 sf lightning dev app --target-org scratchOrg --device-type desktop 并按 Enter 键。
  4. 当系统提示您选择要预览的 Lightning Experience 应用程序时，使用箭头键选择 Sales（销售），然后按 Enter 键。

如果该命令成功运行，它会在您的浏览器中打开一个新选项卡，其中包含您的组织的 Seller Home（卖方主页）预览。为此临时组织启用了本地开发。这些是您在命令中使用的参数。

  • --target-org 定义了您希望预览的目标组织。将此标记设置为 scratchOrg。
  • --device-type 定义了预览运行所处的环境。将此标记设置为 desktop（桌面）可确保您的预览在桌面环境中运行。

要了解 sf lightning dev app 命令的其他可选标记，请参阅 Lightning Web 组件开发人员指南：Lightning 应用程序预览（普遍可用）。

现在，让我们来编辑您的组件，看看本地开发预览如何实时更新自身。

  1. 在您的浏览器中，单击 Accounts（客户）选项卡并打开 Component Developers（组件开发人员）记录。
  2. 在 Visual Studio Code 中，打开 myFirstWebComponent.html。
  3. 在 <lightning-card> 元素中，将“ContactInformation”的 title（标题）变更为 “Contact Information”（联系人信息）。更新后的代码行应如下所示：
    <lightning-card title="Contact Information" icon-name="custom:custom14">
  4. 在 macOS 上按 Command + S，或在 Windows 或 Linux 上按 Ctrl + S 以保存文件。

在浏览器中查看您的应用程序预览，并注意组件的标题如何根据您本地所做更改自动更新。您无需重新部署应用程序，也无需手动刷新页面即可查看您修订的内容。

在 iOS 环境（仅限 macOS）中为 Lightning 应用程序运行本地开发

借助本地开发，您可以在 iOS 模拟器或 Android 模拟器中查看您的项目。我们来看看如何在 iOS 环境中预览同一个 Lightning 应用程序。

注意

在本节中，我们只介绍 iOS 模拟器，但您可以按照相同的过程使用 Android 模拟器。如需了解如何将本地开发与 Android Studio 结合使用，请参阅 Android 模拟器。

Mac 用户可以通过 Xcode 为本地开发运行 iOS 模拟器。如果您尚未安装 Xcode，请从 Mac 应用程序商店安装并完成初始设置流程。确保下载适用于移动设备的 iOS 模拟器。

安装完 Xcode 后，打开 Visual Studio Code。此时可以在 iPhone 模拟器中运行 Lightning 应用程序了。

  1. 在 Visual Studio Code 中，单击 Command + Shift + P，然后输入 new terminal（新终端）并选择 Terminal: Create New Terminal（终端：创建新终端）。
  2. 在新的终端窗口中，运行 sf lightning dev app --target-org scratchOrg --device-type ios。
  3. 当系统提示您选择要预览的 Lightning Experience 应用程序时，选择 Sales（销售），然后按 Enter 键。
  4. 当系统提示您选择要用于预览的设备时，请从有效选项列表中选择 iPhone。
  5. 当系统提示您下载并安装 Salesforce 移动应用程序时，输入 y，然后按 Enter 键。

以下是本地开发命令成功运行时，您的终端输出可能呈现如下情形。

sf lightning dev app --target-org scratchOrg --device-type ios
? Which Lightning Experience App do you want to use for the preview? Sales
✔ Requirements (0.444 sec)
  ✔ PASSED: Checking macOS Environment (0.000 sec)
  ✔ PASSED: Checking Xcode (0.029 sec)
    › Xcode installed: Xcode 16.2 Build version 16C5032a
  ✔ PASSED: Checking Supported Simulator Runtime (0.414 sec)
    › One or more supported simulator runtimes are configured for iOS: iOS 17.0 iOS 18.2
? Which device do you want to use for the preview? iPhone 15 Pro, iOS 17
Booting device iPhone 15 Pro, iOS 17.0.0, DCF7AD98-FAC7-4267-A546-14A80F874209... done
Installing self-signed certificate... done
? Salesforce Mobile App isn’t installed on your device. Do you want to download and install it? yes
Preparing to download... done
Installing app com.salesforce.chatter... done
terminating app com.salesforce.chatter... done

Salesforce 应用程序应在 iPhone 模拟器中自动打开。接受应用的使用条款。然后，模拟器应显示 Salesforce 登录页面。

手机屏幕上显示的 Salesforce 登录页面。

按照以下步骤在应用程序中打开您的临时组织。

  1. 在模拟器的右上角，单击 Settings（设置） (设置) 以打开 Choose Connection（选择连接）菜单。
  2. 在 Choose Connection（选择连接）菜单中，单击 Add（添加）(添加) 以添加新主机。
  3. Host 字段的域应为临时组织 URL。您可以通过在 VS Code 终端窗口中运行 sf org display user --target-org scratchOrg 来获取此 URL。
  4. 从终端输出中复制实例 URL，并将其粘贴到模拟器的 Host（主机）字段中，如下所示：
    终端输出包括此实例 URL：https://energy-site-4762-dev-ed.scratch.my.salesforce.com。
  5. 然后，在 iOS 模拟器的右上角，单击 Done（完成）以添加新域并返回到 Salesforce 登录页面。
  6. 在 Username（用户名）字段中，复制并粘贴步骤 3 中终端输出中的 Username（用户名）值。用户名应遵循 test-value@example.com 格式。
  7. 要获取此用户名的有效密码，请在 VS Code 终端中输入 sf org generate password --target-org scratchOrg 并按 Enter 键。
  8. 从终端输出中，复制密码并将其粘贴到 iOS 模拟器的 Password（密码）字段中，然后单击 Log In to Sandbox（登录 Sandbox）。
  9. 如果需要，请输入发送到指定电子邮件地址的验证码。
  10. 如果应用程序提示您访问您的组织，请选择 Allow（允许）。
    Xcode iPhone 模拟器窗口，展示了 Salesforce 移动应用程序中的 Allow Access（允许访问）提示框。

现在，您应该会在 iOS 模拟器中看到 Salesforce 应用程序。让我们导航到 Sales（销售）应用程序中的 Component Developer（组件开发人员）帐户，以便我们可以看到本地开发的实际运行情况。

  1. 在应用程序的右下角，单击 Menu（菜单），然后选择 Accounts（帐户）。
  2. 在 Recent Accounts（最新帐户）下，单击 Component Developers（组件开发人员）。您应该在页面上看到 myFirstWebComponent LWC。
  3. 在 Visual Studio Code 中，打开 myFirstWebComponent.html。
  4. 在 <lightning-card> 元素中，将 “Contact Information”（联系人信息） 的 title（标题）变更为 “Contact Info”（联系人信息）。更新后的代码行应如下所示：
    <lightning-card title="Contact Info" icon-name="custom:custom14”>
  5. 在 macOS 上按 Command + S，或在 Windows 或 Linux 上按 Ctrl + S 以保存文件。

现在请回到您的 iOS 模拟器界面，确认一下您所创建组件的标题是否已自动更新。了解使用本地开发可以在多长时间内迭代组件？

就是这样！在本项目中，您安装并使用了推荐的开发人员工具来开发 Lightning Web 组件。您复制并粘贴了有错误的代码（将来应避免这样做）。您使用本地开发在桌面环境中实时预览 Lightning Web 组件的更改。如果您是 Mac 用户，您还使用了本地开发在 iPhone 环境中预览您的组件。

我们无法在临时组织中检查您的工作，但您仍然可以单击 Verify Step（验证步骤）并获得徽章。查看 Trailhead 应用程序示例和 Lightning Web 组件模式了解更多代码示例，学习如何开发出色的 Lightning Web 组件。

资源

在 Salesforce 帮助中分享 Trailhead 反馈

我们很想听听您使用 Trailhead 的经验——您现在可以随时从 Salesforce 帮助网站访问新的反馈表单。

了解更多 继续分享反馈