AI 给出一段代码,并不等于已经有了可以打开的应用。先看清它提供的是完整 HTML 页面、三个静态文件,还是需要构建的 React 项目。本教程处理前两种情况,目标是在浏览器里看到一个可以勾选任务、添加任务的“每日计划”页面。
先确认你拿到了哪种代码
完整 HTML 一般包含 <html>、<head> 和 <body>。如果还提供 CSS 与 JavaScript,把它们分别保存为 styles.css 和 app.js。不要把 Markdown 的三个反引号也复制进文件。若内容主要是 JSX、import React、package.json 或 npm 命令,这不是可直接运行的静态项目,应先按项目说明构建,或请 AI 输出不依赖框架的 HTML/CSS/JS 版本。
跟着每日计划示例操作
- 下载下方示例 ZIP,并先解压。你会看到 index.html、styles.css、app.js 和 README.txt。
- 打开 App 工作台,点击“导入 HTML / CSS / JS”。只选择前面三个代码文件,不要选择 ZIP 或 README。
- 页面会载入代码并更新预览。也可以通过下方“一键打开示例”进入工作台,再点击“导入教程示例”。这会替换当前编辑器内容,请先导出需要保留的项目。
- 在 HTML 标签中找到
<h1>我的每日计划</h1>,把文字改成“我的学习计划”。 - 点击“运行项目”,确认预览标题改变。接着勾选一件任务,计数应从 0 / 3 变成 1 / 3。
- 在预览的输入框添加“复习一个知识点”,点击添加。列表应出现新任务,总数变为 4。
如何判断真的运行成功
看到页面只能说明 HTML 被显示。颜色与间距正确,说明 CSS 生效;勾选后计数变化、点击添加后出现新任务,才说明 JavaScript 交互运行了。依次检查这三层,可以快速定位问题。这个示例没有服务器、登录或数据库,刷新后任务重置属于预期行为。
常见错误与排查
- 显示一堆代码:检查文件是否实际叫 index.html.txt,并确认导入到了 HTML 编辑区。
- 有文字但没有样式:同时导入 styles.css,或把 CSS 粘贴到 CSS 标签,重新运行。
- 按钮不工作:确认 app.js 已导入,且没有把脚本放进 CSS 区。示例代码的 task-form、tasks 等 ID 应保持一致。
- 外部图片或接口不显示:工作台预览禁用了外部网络请求和依赖,这不是自动接入服务的工具。需要外部服务的项目应在自己配置好的开发环境测试。
完成后的练习
再修改副标题,并尝试添加一个包含中文标点的任务。不要改动页面 ID。确认两次修改后都能完成计数,再进入手机预览教程。你会得到一个真正测试过的页面,而不是一张静态效果图。