📌 什么是 Popup 文件？
Popup 文件（.popup）是一种类似 HTML 的文本格式，用于定义交互式弹窗界面。所有 <> 标签都用于声明交互元素（输入框、选择器、按钮等），而非渲染为真实 HTML DOM。
文件在 Gandi 文件编辑器中创建和编辑，通过 Scratch 积木加载后解析为弹窗界面，用户操作完成后返回 JSON 格式的结果数据。
Popup 文件会在 Gandi 文件编辑器中获得语法高亮支持（标签、属性、注释等）。
🚀 快速开始
- 1 在 Gandi 文件编辑器中新建文件，命名为
example.popup - 2 编写 Popup 代码（见下方示例）
- 3 在 Scratch 中使用积木 「用Popup文件 [example.popup] 生成弹窗并返回」
- 4 积木返回 JSON 字符串，包含用户输入的所有数据
📝 基础示例
一个简单的用户信息收集表单：
example.popup
<!-- 设置弹窗标题 -->
<title>用户信息表单</title>
<!-- 显示提示文字 -->
<text>请填写以下信息：</text>
<!-- 文本输入框 -->
<input id="name" placeholder="请输入姓名">
<!-- 数字输入框 -->
<input id="age" type="number" placeholder="请输入年龄">
<!-- 下拉选择 -->
<select id="gender">
<option>男</option>
<option>女</option>
</select>
返回结果：
JSON
{
"name": "张三",
"age": 25,
"gender": "男"
}
🎯 完整示例
展示所有可用标签的完整弹窗：
full-demo.popup
<title>完整弹窗演示</title>
<!-- 文字内容 -->
<text>这是一个包含所有元素类型的弹窗</text>
<!-- 各种输入框 -->
<input id="username" placeholder="用户名">
<input id="password" type="password" placeholder="密码">
<input id="score" type="number" placeholder="分数">
<!-- 下拉选择 -->
<select id="city">
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select>
<!-- 滑杆 -->
<slider id="volume" min="0" max="100" value="50">
<!-- 颜色选取 -->
<color id="themeColor" value="#4c97ff">
<!-- 文件导入 -->
<file id="avatar" mode="both">
<!-- 自定义 HTML -->
<custom id="bio">
<textarea placeholder="自我介绍..." rows="3"></textarea>
</custom>
<!-- 按钮 -->
<button label="✓ 提交" value="submit" color="#4CAF50">
<button label="✗ 取消" value="cancel" color="#ff6b6b">
📖 标签参考
| 标签 | 用途 | 关键属性 |
|---|---|---|
<title> |
弹窗标题 | — |
<text> |
显示文字（可多个） | — |
<input> |
输入框 | id type placeholder |
<select> |
下拉选择（内含 <option>） |
id |
<button> |
按钮 | label value color |
<slider> |
滑杆 | id min max value step |
<color> |
颜色选取 | id value |
<file> |
文件导入 | id mode（both/drop/click） |
<custom> |
自定义 HTML 元素 | id |
<image> |
图片展示 | id src width height |
🔤 input 支持的 type
| type 值 | 效果 | 示例 |
|---|---|---|
text（默认） | 文本输入框 | <input id="name" placeholder="姓名"> |
number / int / float | 数字输入框 | <input id="age" type="number"> |
password | 密码输入框 | <input id="pwd" type="password"> |
email | 邮箱输入框 | <input id="mail" type="email"> |
url | 网址输入框 | <input id="site" type="url"> |
🧩 在 Scratch 中使用
使用积木 「用Popup文件 [FILE] 生成弹窗并返回」：
📁 文件选择
下拉菜单会自动列出 Gandi 文件编辑器中所有 .popup 文件，也可以手动输入文件名。
📦 返回值
弹窗关闭后返回 JSON 字符串，键名为标签中的 id 属性值，值为用户输入的内容。
🔗 数据解析
配合 JavaScript 工具箱等扩展解析 JSON，获取各个字段的值进行后续处理。
每个交互元素必须有唯一的
id 属性，否则返回结果中该字段的值可能丢失。💬 注释语法
Popup 文件支持 HTML 风格的注释，注释内容不会被解析：
注释示例
<!-- 这是注释，不会被解析 -->
<title>标题</title>
<!-- <input id="temp"> 被注释掉的代码不会生效 -->