用 Ethers.js 创建你的第一个 Ethereum 去中心化应用（DApp）

本文将带你逐步学习如何使用 Ethers.js 构建一个完整的 Ethereum DApp，从前端界面到智能合约，并实现两者的无缝连接。无论你是刚接触区块链开发，还是希望巩固基础，本教程都将为你提供清晰、实用的指引。

我们将使用主流工具链：MetaMask 钱包、Remix IDE 和 Ethers.js 库。完成本教程后，你将拥有一个能够与区块链交互的简单 DApp，包含设置和读取情绪状态的功能。

开发环境准备

在开始编码前，你需要准备好开发环境。

安装 MetaMask 钱包

MetaMask 是与以太坊区块链交互的核心工具。如果你还没有安装，请按照以下步骤操作：

访问 MetaMask 官网下载并安装浏览器插件
创建新钱包或导入已有钱包，妥善保管助记词
将网络切换至 Ropsten 测试网络（或其他以太坊测试网）
复制你的账户公共地址备用

获取测试网 ETH

在测试网上部署和交互需要测试代币，请通过以下方式获取：

访问 Ropsten 水龙头网站申请测试币
通常需要输入你的钱包地址并完成简单验证
等待几分钟，测试币就会到达你的钱包

搭建本地服务器

为了运行前端页面，你需要一个本地服务器：

安装 Node.js 环境
通过 npm 全局安装 lite-server：npm install -g lite-server
这将提供一个轻量级的本地开发服务器

创建基础前端页面

前端是与用户交互的界面，我们将创建一个简洁的 HTML 页面。

HTML 结构搭建

创建 index.html 文件并构建基本结构：

<!DOCTYPE html>
<html>
<head>
    <title>我的第一个DApp</title>
    <style>
        body { text-align: center; font-family: Arial, sans-serif; }
        div { width: 20%; margin: 0 auto; display: flex; flex-direction: column; }
        button { width: 100%; margin: 10px 0px 5px 0px; }
    </style>
</head>
<body>
    <h1>这是我的DApp！</h1>
    <div>
        <p>在这里设置或获取情绪状态：</p>
        <label>输入情绪：</label>
        <input type="text" id="mood">
        <button onclick="getMood()">获取情绪</button>
        <button onclick="setMood()">设置情绪</button>
    </div>
</body>
</html>

启动本地服务器

在包含 index.html 的目录中运行：

lite-server

然后在浏览器中访问 http://127.0.0.1:3000/ 查看你的页面。

编写智能合约

智能合约是 DApp 的核心逻辑所在，我们将使用 Solidity 语言编写。

合约基础结构

在 Remix IDE 中创建 mood.sol 文件：

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.1;

contract MoodDiary {
    string mood;
    
    // 设置情绪的函数
    function setMood(string memory _mood) public {
        mood = _mood;
    }
    
    // 读取情绪的函数
    function getMood() public view returns(string memory) {
        return mood;
    }
}

编译与部署合约

在 Remix 中完成以下步骤：

选择正确的编译器版本（匹配 pragma 声明）
编译合约，确保没有错误
在部署选项卡中选择 "Injected Web3" 环境
确认 MetaMask 已连接至 Ropsten 测试网
部署合约并确认交易

部署成功后，务必保存：

合约地址（从已部署合约列表复制）
合约 ABI（从编译选项卡复制）

连接前端与智能合约

现在我们将使用 Ethers.js 库将前端界面与智能合约连接起来。

集成 Ethers.js 库

在 index.html 中添加 Ethers.js 脚本：

<script src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js"></script>
<script>
    // 合约地址和ABI
    const MoodContractAddress = "你的合约地址";
    const MoodContractABI = [ABI数组];
    
    let MoodContract;
    let signer;
    
    // 初始化提供商和合约
    const provider = new ethers.providers.Web3Provider(window.ethereum, "ropsten");
    
    provider.send("eth_requestAccounts", []).then(() => {
        provider.listAccounts().then((accounts) => {
            signer = provider.getSigner(accounts[0]);
            MoodContract = new ethers.Contract(
                MoodContractAddress,
                MoodContractABI,
                signer
            );
        });
    });
    
    // 获取情绪函数
    async function getMood() {
        const getMoodPromise = MoodContract.getMood();
        const Mood = await getMoodPromise;
        console.log(Mood);
    }
    
    // 设置情绪函数
    async function setMood() {
        const mood = document.getElementById("mood").value;
        const setMoodPromise = MoodContract.setMood(mood);
        await setMoodPromise;
    }
</script>

ABI 配置详解

ABI（应用程序二进制接口）是前端与合约交互的桥梁。对于我们的合约，ABI 应该包含两个函数对象：

const MoodContractABI = [
    {
        "inputs": [],
        "name": "getMood",
        "outputs": [
            {
                "internalType": "string",
                "name": "",
                "type": "string"
            }
        ],
        "stateMutability": "view",
        "type": "function"
    },
    {
        "inputs": [
            {
                "internalType": "string",
                "name": "_mood",
                "type": "string"
            }
        ],
        "name": "setMood",
        "outputs": [],
        "stateMutability": "nonpayable",
        "type": "function"
    }
];

测试与验证

完成编码后，现在是测试你的 DApp 的时候了。

功能测试步骤

确保本地服务器正在运行（lite-server）
在浏览器中打开 http://127.0.0.1:3000/
点击"设置情绪"按钮，输入情绪值并确认交易
等待交易确认（约15秒）
点击"获取情绪"按钮，在控制台查看结果

区块链交易验证

所有交易都可以在区块链浏览器上查看：

访问 Etherscan 的 Ropsten 版本
输入你的合约地址或交易哈希
查看交易详情和状态

👉 查看实时区块链交易工具

进阶应用与扩展

成功构建基础 DApp 后，你可以考虑以下扩展方向：

功能增强建议

添加情绪历史记录功能
实现多用户情绪分享
增加情绪分类和标签系统
添加可视化图表展示情绪变化

性能优化方向

使用事件监听替代轮询查询
实现前端状态缓存机制
添加加载状态和用户反馈
优化 Gas 费用消耗

常见问题

什么是 Ethers.js？

Ethers.js 是一个轻量级的以太坊 JavaScript 库，用于与以太坊区块链及其生态系统交互。它提供了简洁的 API 来连接钱包、发送交易、调用智能合约等功能，比 web3.js 更轻量且模块化设计更好。

为什么需要使用测试网？

测试网允许开发者在不消耗真实资金的情况下测试 DApp 功能。Ropsten 是以太坊的主要测试网之一，提供与主网相似的环境但使用无价值的测试代币，非常适合开发和调试。

如何降低 Gas 费用消耗？

优化 Gas 消耗的方法包括：减少不必要的存储操作、使用适当的数据类型、合并多个操作 into 单次交易、使用视图函数读取数据（不消耗 Gas）等。在合约设计阶段就应考虑 Gas 优化。

什么是 ABI？为什么需要它？

ABI（Application Binary Interface）是智能合约与外部世界交互的接口规范。它定义了如何调用合约函数、参数如何编码解码、返回数据如何解析等。没有 ABI，前端应用无法正确与合约交互。

如何处理交易失败情况？

在 Ethers.js 中，可以使用 try-catch 块捕获交易异常。建议在前端添加交易状态跟踪、错误提示和重试机制，提供更好的用户体验。同时，合理设置 Gas 限制和 Gas 价格也能减少失败概率。

如何将 DApp 部署到主网？

主网部署步骤与测试网类似，但需要特别注意：彻底测试所有功能、确保安全性审计、准备真实 ETH 支付 Gas 费用、考虑合约不可升级性、制定应急计划等。建议先在测试网充分演练后再部署到主网。

总结

通过本教程，你已学会了如何使用 Ethers.js 创建完整的 Ethereum DApp。从环境配置、前端开发、智能合约编写到最终集成，每一步都是构建去中心化应用的重要基础。

掌握这些基础技能后，你可以进一步探索更复杂的 DApp 开发，如 DeFi 协议、NFT 市场或DAO治理系统。区块链开发世界充满机遇，持续学习和实践是关键。

👉 探索更多 DApp 开发策略

记住，优秀的 DApp 不仅需要技术实现，更需要关注用户体验、安全性和实际价值。祝你在这个充满创新的领域取得成功！