Configure for Experience Builder — Targets & Properties

好，今天我们来看一个很关键的小文件——`.js-meta.xml` 配置文件。这个文件就像是你的组件在 Experience Builder 里的身份证，Builder 全靠它来认识你的组件，决定它能在哪儿出现、能接收哪些属性。 首先，它定义了三种目标类型，也就是你的组件可以出现在三种不同的地方。第一种是 `page` 目标，这是最常见的，它让你组件出现在 Builder 左侧的组件面板里，用户可以像拖积木一样把它拖到页面上去。第二种叫 `Page_Layout` 目标，专门给内容布局那个窗口用的，通常是用在 LWR 布局组件里。第三种是 `Theme_Layout`，用在设置里的主题布局，同样也是针对 LWR 主题的组件。所以，你这个组件想在哪里被使用，就要在配置文件里指明对应的目标类型。 还有一个特别重要的事情——，必须包含默认目标，。什么意思呢？就是哪怕你只把这组件用在某个特定地方，你也得给属性面板一个“默认”的入口。如果没有这个默认目标，Builder 的属性面板上就根本不会出现你定义的可编辑属性，等于你白写了属性定义，用户也就没法在界面上调整你的组件。 接下来看属性类型。标准属性类型有几种：字符串、数字、布尔、颜色，还有一个叫内容参考的。内容参考可以用来链接另一块内容，比如链接到一个页面或图片。如果你想做一个下拉选择框，给用户几个选项选一选，那就得用 `收件箱` 属性来模拟。做法是在属性里加 `inbox="option1,option2,option3"`，逗号分隔选项值，这样 Builder 就会为你生成一个选择列表。而且，收件箱属性还能带上最小和最大长度的限制，来控制输入或选项的范围。 最后，如果你在开发 LWR 网站，有两个很酷的配置项要记住：一个是 `screenResponsive=true`，另一个是 `exposedTo=css`。打开这个之后，Builder 的属性面板就能感知不同的屏幕尺寸了。比如你定义了一个颜色或文本属性，用户可以分别设置它在桌面、平板、手机上的值。背后其实是靠 CSS 自定义属性和媒体查询在起作用，但这个配置省去了你手写媒体查询的麻烦，直接在 Builder 里就能针对每个视图模式填入不同的值。界面会自动为每个模式显示独立的属性框，非常方便。 所以，`.js-meta.xml` 这个小小的配置文件，其实是 Experience Builder 集成的中央控制点。目标类型决定组件出现在哪里，默认目标决定了属性能不能被看见，属性类型决定了用户能输入什么，而 LWR 的响应式设置更是把多设备适配变得非常简单。记得每次新建组件时，都要认真写好这个文件哦。