Read this tutorial in English →

操作教程 · 6 分钟 · 更新于 2026-09-07

如何把 HTML、CSS、JS 打包成可运行项目?导出与验收清单

从工作台导出 ZIP,了解每个文件的作用、解压与运行步骤,区分项目源码、上线网站和正式 App 安装包。

项目导出不只是“下载成功”。接收者应该知道从哪个文件启动、需要什么依赖,以及当前功能能做到什么。本教程使用没有外部依赖的每日计划示例,导出一个可在浏览器打开的静态项目。导出的 ZIP 是源文件包,不是 Android APK、iPhone 安装包,也不会自动生成一个公开网址。

导出前先做两件事

先点击“运行项目”,确认预览里的标题是你刚修改的版本。然后分别测试勾选与添加任务。如果你只编辑了代码却没有运行,下载得到的代码可能与你最后看到的预览不同。工作台会读取当前三个编辑区的内容打包,因此应确保这三份代码属于同一个版本。

下载并解压 ZIP

  1. 导入教程示例,把 HTML 标题改成“我的学习计划”,点击运行并检查计数。
  2. 点击“下载项目 ZIP”。工作台生成 haoword-app-project.zip,浏览器按自身下载设置保存它。
  3. 找到下载文件,先解压到一个新文件夹。不要只在压缩包预览窗口中双击某个文件。
  4. 确认 index.html、styles.css、app.js 位于同一层目录,然后用浏览器打开 index.html。
  5. 在浏览器中重复勾选和添加任务,确认标题、样式与交互都正确。

导出文件分别做什么

文件用途
index.html页面入口,组织标题、表单和任务列表。
styles.css配色、间距以及手机宽度下的布局规则。
app.js添加任务、统计完成数等交互。
brief.json你在需求表单中填写的内容,方便后续修改。
README.txt启动方式与预览、打包范围的说明。

工作台会把样式和脚本链接整理为同目录的 styles.css 与 app.js。额外图片、字体、外部库和服务器不会自动装进这个 ZIP。如果你的项目用到它们,需要自己整理依赖和相对路径,并在合适的环境运行。

导出后为什么不一样

把文件交给别人之前

在一个新的解压目录中,从头打开 index.html。检查没有密码、API 密钥或私人资料留在代码和 brief.json 中。随后附上简短说明:“这是静态演示,任务刷新后重置,不含登录、支付或云端保存。”如果你想让他人通过网址访问,还需要把公开文件部署到网站托管服务;这与源码下载是两个不同步骤。

验收结果

你应当拿到一个完整 ZIP,并且在解压目录里可以独立运行每日计划,确认手机布局和交互均与工作台一致。这才算完成一次可交付的导出。

本篇示例文件

三个教程共用同一个每日计划项目。可自由修改;没有外部依赖,也不会自动保存任务。

index.html · styles.css · app.js

继续练习

作者:HaoWord Studio。按当前工作台功能编写;示例对外部服务、数据库和正式 App 打包没有依赖。