DApp 前端实战：从 0 到 1 一个完整应用
2026/8/24大约 2 分钟
Web3 区块链系列 · 阶段 5 · DApp 全栈 · 第 30/57 篇 · 🚧 占位待学
上一篇：《钱包连接：EIP-1193、EIP-6963 与多钱包》
下一篇：《链上数据与 The Graph 子图》
学习大纲：《Web3 区块链学习总纲》
状态：待学习。 本文为占位文档：知识点清单、实验与验收标准已就绪，正文待按「先学习、先实验、再撰写」补全。
对应总纲单元：阶段 5 · 单元 5.3
一、本文要解决的问题
把 Solidity 阶段的众筹合约接上真实前端——读链状态、写链交易、等确认、刷新 UI、处理所有失败分支。这是第一个「产品级」交付物。
二、知识点清单
- 链状态与前端状态的同步策略：乐观更新 vs 等确认回执
- 交易三态 UX：pending / success / revert 的界面反馈
- wagmi hooks（React）：useAccount / useReadContract / useWriteContract
- ABI 导入与 TypeScript 类型生成（自动补全合约方法）
- 本地联调：anvil + 前端开发服务器 + MetaMask 自定义网络
- DApp 的架构谱系：纯链 / 链 + 中心化索引 / 链 + 传统后端
三、动手实验（学习时必须真跑）
- 用 React + wagmi + viem 实现众筹 DApp 前端，连本地链跑通全流程
- 模拟交易失败（比如已截止仍投资），验证 UI 反馈路径
四、验收标准（全部通过才进入下一篇）
五、写作提示（补正文时遵守）
- 开篇问题驱动；结构走「是什么 → 为什么 → 怎么做 → 背景知识」
- 所有代码、命令、输出必须先在本机跑通再写入，不得杜撰
- 版本口径以总纲环境清单为准（以太坊 Fusaka / Solidity 0.8.36 / Foundry v1.0 / OpenZeppelin Contracts 5.x）
- 涉及版本敏感结论时标注出处与时间
本篇完成后，把文首导航块的「🚧 占位待学」去掉，并在总纲处打卡。