Hello World in a Scratch Org — Walkthrough

同学们，今天我们来看一个经典的入门例子：Hello World 组件。我们会从头开始，一步步搭建一个完整的 Lightning Web Component。 首先，给组件起名字的时候，记得用驼峰命名法，比如 helloWorld。这个名字会自动映射成 HTML 标签，变成小写字母加连字符的形式——c-hello-world。你之后在页面里使用这个组件时，就可以直接用这个标签了。 在这个组件里，我们会用到一个叫 @api 的装饰器，它的作用是把组件里的某个属性标记为公开的。这样一来，你就能在 Lightning App Builder 里直接配置这个属性的值，比如设置名字。这就是我们让组件变得可配置的关键。 接下来看 HTML 模板部分。我们用大括号把属性名括起来，比如 {名称}，这样就能把 JavaScript 里定义的“名称”属性，动态显示在界面上。另外，为了让界面好看，我把内容包在一个 Lightning 基本组件 light-card 里面，这样自带 Salesforce 的样式，看起来整洁又专业。 别忘了组件的配置文件，就是那个 js-meta.xml 文件。它定义了组件能出现在 App Builder 的哪些页面区域，也列出了哪些属性可以被管理员在界面上直接编辑。你不写这个文件，组件就没法拖拽到页面里。 之后就是把代码推送到我们的临时开发环境。推送完成后，打开那个临时组织，进入 Lightning App Builder，新建一个应用页面。在组件列表里找到你的 Hello World 组件，直接拖到页面上，然后在属性面板里就能看到那个名字输入框，填上你想要的文字，保存、激活页面，最后去前台查看，就能看到被 Light Card 包裹的、你亲自命名的 Hello World 欢迎信息了。 整个过程虽然简单，但已经包含了 LWC 开发最核心的几个环节：命名规则、属性暴露、模板绑定、配置文件和 App Builder 集成。大家跟着做一遍，对 LWC 的入门就算完成了。