当前位置：首页 > news >正文

小桌签 —— 一个编程小白用华为云码道（CodeArts），1 小时做出自己的第一个网页 App

news 2026/5/30 18:34:47

小桌签 —— 一个编程小白用华为云码道（CodeArts），1 小时做出自己的第一个网页 App

案例介绍

这是一篇编程小白也能跟着做的实战记录。

我的背景：HTML 学了 3 周，CSS 大概知道color、background，JavaScript 只会alert("hello")。
我的目标：做一个只属于我自己的每日待办网页，关掉浏览器再打开，数据还在。
我的工具：华为云码道（CodeArts）AI IDE，1 个index.html文件，0 行后端代码。
我的耗时：1 小时 7 分钟，从打开 IDE 到把网页发布到华为云 OBS 让朋友访问。

如果你也在学前端，或者你只是想体验一下"AI 帮我写代码"是种什么感觉，这篇文章就是写给你的。

⚠️ 全文没有一行你看不懂的术语 —— 看到生词，码道都帮我解释了。

最终产出：

1 个index.html文件（一共 220 行，HTML + CSS + JS 全在里面）
1 个上线的网址（部署在华为云 OBS，比购物车还便宜）
1 份给"未来的我"的AGENTS.md（让码道每次都用我能听懂的方式说话）

下面是我的 1 小时全流程。

案例流程

1. 我为什么要做这个？

我手机上装了 7 个待办类 App。要么收费，要么广告多，要么把"番茄钟、打卡、社交"全塞进来 —— 我只想要一个干净的、关掉浏览器再打开数据还在的小页面。

朋友说：“你不是在学前端吗，自己做一个嘛。”

我心想：HTML 我就会个<div>、<h1>，做不出来吧。

直到我看到这次活动 ——「华为云码道（CodeArts）代码智能体 + 新特性完成应用开发」。我心想：让 AI 帮我写代码，那我会不会就行了？

试试呗，反正不要钱。

2. 准备：3 件事

2.1 注册华为云账号

按官网指引注册 + 实名认证，10 分钟。这一步本文不展开。

2.2 打开码道

进华为云开发者空间，点「码道（CodeArts）AI IDE」，浏览器直接打开（也可以下载桌面版，本文用浏览器版）。

2.3 新建项目

点「新建项目」，名字填XiaoZhuoQian（小桌签的拼音）。
项目类型选「空项目」—— 我们什么模板都不要，从零开始。

💡小贴士：项目名只能用英文/数字。中文我也试过，码道会提示"项目名只能含英文、数字、下划线"。

3. 第一招：写一份"员工手册" AGENTS.md

这是码道4-5 月新特性「新增 AGENTS.md 文件支持」。
你可以把它理解成 ——「我对 AI 的使用说明书」。
写一次，以后每次找 AI 都不用重复废话。

我在项目根目录新建一个文件AGENTS.md，写了下面这些（我自己写的，没让 AI 写，因为这是给 AI 看的规则）：

# 小桌签 · AGENTS.md（新手友好版） > 一句话规则：任何代码必须能在浏览器双击 index.html 直接跑起来， > 不允许引入任何需要 npm install 的依赖。 ## 为什么这么严？ 我是编程入门 3 个月的小白，下面这些一旦出现，我就跑不起来： - ❌ React / Vue / TypeScript（要 npm、要编译） - ❌ 后端服务器（要装 Node / Python） - ❌ 数据库（要装 MySQL / Redis） ## 允许的东西 - ✅ HTML / CSS / 原生 JavaScript - ✅ localStorage 做本地存储 - ✅ 不用 npm，不用 build ## 子代理 @teacher 每次回复必须包含： 1. 怎么做（步骤 123） 2. 为什么（用比喻让我听懂） 3. 完整代码（复制粘贴就能跑）

保存。然后码道左下角弹出一行字：

✅ 已加载项目规约AGENTS.md，子代理@teacher已就位。

🤔新手疑惑：为什么要写这个？
因为 AI 默认会用"程序员的方式"和你说话 —— 张嘴就是"你 npm install 一下"、“用 webpack 配一下”。
写了 AGENTS.md，码道就知道"这哥们是个新手，别整花活"，每次都用我能听懂的方式说话。
我一开始没写这个，AI 给我推荐用 React 写，我光是装 Node.js 就装了 40 分钟还没成功。
写了之后再也没出现过类似情况。

4. 第二招：和`@teacher`对话，一步步把页面搭起来

4.1 先要一个能输入的输入框

我对码道说：

@teacher我想做一个待办列表网页。先给我一个输入框 + 一个"添加"按钮，长得好看一点（圆角、有点阴影）。一个index.html文件，能双击打开就行。

@teacher回复（我精简一下）：

怎么做：
新建index.html
用<input>做输入框，<button>做按钮
用 CSS 给它们加圆角、阴影
为什么：
把网页想象成一张纸。<input>是纸上挖了个洞让你填字，<button>是按钮像门铃。CSS 是装修。
完整代码：
（给了 60 行代码）

我把代码复制进index.html，双击打开。

✨第一次有了"是我做的"的感觉。虽然按钮按了没反应。

4.2 让按钮真的能添加待办

我接着说：

@teacher现在按按钮没反应。我要：点一下按钮，输入框里的字变成一条待办，显示在下面。

@teacher关键代码：

// ========== 5. 添加待办 ==========functionaddTodo(){constinput=document.getElementById('new-todo');consttext=input.value.trim();if(!text)return;todos.push({text,done:false,createdAt:Date.now()});input.value='';save();render();}

它给我解释：

为什么：
addTodo是一个"动作"，按钮被点的时候执行它。
input.value是输入框里你打的字，.trim()是把前后空格删掉（不然你输入一个空格也能添加，怪难看的）。
todos.push(...)是把新待办塞进数组。todos是个"清单"，push是"在清单末尾追加一行"。
save()我们下一步会写，先放着。
render()是"重新画一遍列表"，因为数据变了。

我把代码加进去，按钮真的能用了。这一刻我笑出声了。

💡新手收获：
AI 不是"给你代码就完了"，码道里的@teacher是真的在教。
"为什么"那一段我读完之后，第二次自己就能写类似的东西。

4.3 让待办能勾选完成、能删除

// 列表事件委托：勾选 / 删除document.getElementById('todo-list').addEventListener('click',e=>{constidx=e.target.dataset.idx??e.target.dataset.del;if(idx===undefined)return;if(e.target.tagName==='INPUT'){todos[idx].done=e.target.checked;}elseif(e.target.dataset.del!==undefined){todos.splice(idx,1);}save();render();});

这一段我看不太懂。我直接问：

@teacher这一段我没看懂，给我用人话讲讲？

它说：

为什么：
想象你管的不是 1 个按钮，而是 100 条待办每条都有勾选框和删除按钮。
笨办法：给每个按钮都绑一个事件，100 条就要 200 个事件，浪费。
聪明办法：只在最外层的<ul>上绑一个事件，不管你点哪个里头的小按钮，事件都会"飘上来"被这个最外层抓到。这叫"事件冒泡"，但你只要记住"在大盒子上听就够了"。
e.target就是"你具体点的那个东西"。我们看它身上的data-idx、data-del标签，决定是勾选还是删除。

—— 这是我第一次明白"事件冒泡"是干啥的。HTML 课本讲了 5 页，没这个比喻好懂。

4.4 关掉网页再打开，数据还在

这是整个项目最关键的一步：

@teacher我刷新一下网页，待办全没了。我希望关了浏览器再开还在。

@teacher给的方案是localStorage：

// ========== 1. 数据：从 localStorage 读，没有就给空数组 ==========lettodos=JSON.parse(localStorage.getItem('xiaozhuoqian_todos')||'[]');// ========== 2. 工具函数：保存到 localStorage ==========functionsave(){localStorage.setItem('xiaozhuoqian_todos',JSON.stringify(todos));}

它解释：

为什么：
localStorage是浏览器自带的"小冰箱"，每个网站都有自己的一格，可以塞字符串进去。
关了浏览器，冰箱不会被偷走，下次打开还在。
但是冰箱只能存"字符串"。我们的待办是"数组"，所以要JSON.stringify把它压扁成字符串，读的时候JSON.parse还原回来。

我加完这段代码，刷新页面 ——待办还在！
我关掉整个浏览器、重启 Mac、再打开 ——还在！

那一刻的感觉是：我做出了一个真的能用的东西。

5. 一个翻车现场：被`@teacher`救回来了

我做完上面这些，得意地问朋友要不要看。朋友输入了一条待办：

<script>alert('你的网页被我黑了')</script>

—— 然后页面真的弹出来一个框 😱

我吓了一跳，赶紧问@teacher：

我的网页被人输入了一段奇怪的代码就弹框了，怎么回事？？

@teacher没批评我（这点很好），它说：

这个错误叫 XSS（跨站脚本攻击），听起来很吓人，其实很简单：
用户输入的字，不能直接当成 HTML 塞进页面。
想象成：你点外卖，老板让"你写啥我就照做啥"。如果你写"把店关了"，老板真去关店了，那不就坏了。
修复办法：把用户输入里的特殊字符转义一下。
<变成<，>变成>，浏览器看到<就会显示成<，但不会再当成标签去执行。

它给了我这段代码：

// ========== 4. 防 XSS：把用户输入里的 HTML 标签转义 ==========functionescapeHtml(str){returnstr.replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));}

加上之后，朋友再输入那段代码，只是显示成一行文字，不会再执行了。

💡这一段是我整个 1 小时里学到最多的部分。
没有@teacher，我根本不知道有"XSS"这种东西；
知道了也不知道怎么修；
修了也不会自己解释给别人听。
这就是"AI 当老师"和"AI 当代笔"的区别。

6. 让它好看：1 句话，CSS 全靠码道

代码功能都对了，但页面长得像 1995 年的网页 —— 灰底、Times New Roman、按钮像砖头。

我直接说：

@teacher把样式做好看一点。要现代风、卡片式、配色清爽。

码道一口气给了 80 多行 CSS，关键片段：

body{font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;background:linear-gradient(135deg,#fdfbfb 0%,#ebedee 100%);min-height:100vh;display:flex;justify-content:center;padding:40px 20px;}.card{width:100%;max-width:480px;background:#fff;border-radius:16px;box-shadow:0 8px 32pxrgba(0,0,0,0.08);padding:28px;}

它解释：

为什么：
字体优先-apple-system，让 Mac 用户看苹方、Windows 用户看微软雅黑，不用下载任何字体文件；
背景是 135 度斜向的浅灰渐变，比纯白柔和；
卡片用border-radius: 16px圆角 +box-shadow一抹淡淡的影子，立体感就出来了。

刷新页面 ——宛如换了一个 App。

7. 部署上线：让朋友打开就能用（华为云 OBS 静态托管）

7.1 为什么选 OBS？

我问了@teacher：「我这个网页只有一个index.html，怎么让朋友也能访问？」

它推荐了华为云 OBS 静态托管：

方案	月费用	难度
买云服务器	¥80+	难（要装 Nginx）
国内 CDN	看流量	难（要备案）
华为云 OBS 静态托管	几乎为 0（按存储量计费，1GB 约 ¥0.0099/月）	简单（点几下鼠标）
Vercel/GitHub Pages	免费	国内访问慢

— 对我这种就一个 html 文件 + 几张图的小白来说，OBS 性价比最高。

7.2 7 步搞定 OBS 静态托管

下面是我的真实操作：

登录华为云 → 控制台 → 搜索「对象存储 OBS」
点「创建桶」
- 桶名：xiaozhuoqian（必须全网唯一，加自己拼音就行）
- 区域：选离你最近的，我选了「华北-北京四」
- 存储类别：标准存储
- 桶策略：公共读（这样别人才能访问）
创建好后，进入桶 →上传对象→ 把index.html拖进去
左侧菜单 →基础配置 → 静态网站托管→启用
- 默认主页：index.html
- 默认 404 页：index.html（图省事，反正只有一个页面）
点「保存」
在「概览」页找到「静态网站托管访问域名」
浏览器打开这个域名 ——网页上线了！

我把链接发给朋友，朋友秒开，开始往里面加待办：

“买猫粮”
“周三还书”
“把鱼缸刷一下”

朋友说：“这真是你做的？”
我说：“是我和码道一起做的。”

8. 1 小时账单

8. 1 小时账单：码道给我烧了多少 Token？

打开码道**「数据看板 → Token 消耗监控」**（这是 4-5 月新特性），1 小时消耗：

阶段	我说了什么	Token	大概几毛钱
写 AGENTS.md（自己写的）	—	0	0
输入框 + 按钮	“做个待办列表，先要输入框”	4.2K	~¥0.5
加事件让按钮可用	“按钮没反应”	5.8K	~¥0.7
持久化	“刷新数据没了”	3.1K	~¥0.4
修 XSS 漏洞	“网页被人弹框了”	6.4K	~¥0.8
美化样式	“做好看一点”	7.9K	~¥1.0
部署引导	“怎么发给朋友看”	4.5K	~¥0.5
合计	—	~32K	~¥4