项目导出不只是“下载成功”。接收者应该知道从哪个文件启动、需要什么依赖,以及当前功能能做到什么。本教程使用没有外部依赖的每日计划示例,导出一个可在浏览器打开的静态项目。导出的 ZIP 是源文件包,不是 Android APK、iPhone 安装包,也不会自动生成一个公开网址。
导出前先做两件事
先点击“运行项目”,确认预览里的标题是你刚修改的版本。然后分别测试勾选与添加任务。如果你只编辑了代码却没有运行,下载得到的代码可能与你最后看到的预览不同。工作台会读取当前三个编辑区的内容打包,因此应确保这三份代码属于同一个版本。
下载并解压 ZIP
- 导入教程示例,把 HTML 标题改成“我的学习计划”,点击运行并检查计数。
- 点击“下载项目 ZIP”。工作台生成 haoword-app-project.zip,浏览器按自身下载设置保存它。
- 找到下载文件,先解压到一个新文件夹。不要只在压缩包预览窗口中双击某个文件。
- 确认 index.html、styles.css、app.js 位于同一层目录,然后用浏览器打开 index.html。
- 在浏览器中重复勾选和添加任务,确认标题、样式与交互都正确。
导出文件分别做什么
| 文件 | 用途 |
|---|---|
| index.html | 页面入口,组织标题、表单和任务列表。 |
| styles.css | 配色、间距以及手机宽度下的布局规则。 |
| app.js | 添加任务、统计完成数等交互。 |
| brief.json | 你在需求表单中填写的内容,方便后续修改。 |
| README.txt | 启动方式与预览、打包范围的说明。 |
工作台会把样式和脚本链接整理为同目录的 styles.css 与 app.js。额外图片、字体、外部库和服务器不会自动装进这个 ZIP。如果你的项目用到它们,需要自己整理依赖和相对路径,并在合适的环境运行。
导出后为什么不一样
- 样式丢失:通常是只移动了 index.html,或者 styles.css 被改名。三个文件应一起移动。
- 脚本报错:检查文件名大小写和路径;不要把 JS 留在旧文件夹。
- 预览正常,实际项目依赖接口:本教程示例可以本地打开;涉及 fetch、ES module 或服务器的其他项目,可能需要本地 HTTP 服务与正式后端。
- 浏览器没有下载:查看浏览器下载提示或下载设置,不要连续点击制造多份不易区分的文件。
把文件交给别人之前
在一个新的解压目录中,从头打开 index.html。检查没有密码、API 密钥或私人资料留在代码和 brief.json 中。随后附上简短说明:“这是静态演示,任务刷新后重置,不含登录、支付或云端保存。”如果你想让他人通过网址访问,还需要把公开文件部署到网站托管服务;这与源码下载是两个不同步骤。
验收结果
你应当拿到一个完整 ZIP,并且在解压目录里可以独立运行每日计划,确认手机布局和交互均与工作台一致。这才算完成一次可交付的导出。