认识以太坊钱包

大家好，今天咱们来聊聊如何开发一个简单的以太坊钱包。想想自己的钱包，除了拿现金和卡，还能存储虚拟货币，这感觉是不是很酷呢？以太坊作为最流行的区块链平台之一，在加密货币领域有着举足轻重的地位。在这里，我们不仅可以存储ETH，还能处理智能合约、去中心化应用等等。不管你是新手还是稍微懂点的技术大佬，这篇文章都能给你带来一些启发。

环境准备

开始之前，咱们得先准备好开发环境。首先，你需要一个Node.js的环境。它就是咱们的开发基础。去官网下载安装就行，方便简单。装好后，打开命令行，输入`node -v`，确保它正常工作。接下来，我们还需要一些依赖库，最常用的就是`web3.js`，这个库能让咱们和以太坊节点交互。

至于代码编辑器，随便用你喜欢的，我推荐用Visual Studio Code，它功能强大，还支持很多插件，方便开发。

项目初始化

接下来，咱们来初始化一个新的项目。打开命令行，创建一个新文件夹，切换到这个文件夹，然后运行`npm init -y`，这样就生成了一个`package.json`文件。这个文件记录了你项目的基本信息。

然后，我们来安装`web3.js`，在命令行里输入：`npm install web3`。这一步必不可少，安装完后，咱们就可以用它来和以太坊网络交互了。

创建基本的HTML结构

现在，咱们来创建一个简单的HTML文件，文件名叫做`index.html`。这里是我们钱包的用户界面。把以下内容复制到`index.html`文件里：




    
    
    以太坊钱包Demo
    
    


    
以太坊钱包Demo

这段代码就是咱们的页面基础了，里面有一个按钮用来连接钱包，下面会显示钱包信息。

编写钱包逻辑

接着，咱们开始编写钱包的一些基本功能。创建一个叫做`app.js`的文件，这个文件会处理与以太坊的交互。咱们添加连接钱包的逻辑：当用户点击按钮时，就连接他们的以太坊钱包，比如MetaMask。

window.onload = () => {
    const connectButton = document.getElementById('connectWallet');
    const walletInfoDisplay = document.getElementById('walletInfo');

    connectButton.onclick = async () => {
        if (window.ethereum) {
            await window.ethereum.request({ method: 'eth_requestAccounts' });
            const web3 = new Web3(window.ethereum);
            const accounts = await web3.eth.getAccounts();
            walletInfoDisplay.innerHTML = `钱包地址：${accounts[0]}`;
        } else {
            walletInfoDisplay.innerHTML = '请安装MetaMask！';
        }
    }
};

这段代码首先检查用户的浏览器里是否装了MetaMask。如果有，就请求连接钱包，拿到用户的以太坊地址，并显示在页面上。如果没有安装MetaMask，就提醒用户去安装。

测试钱包功能

代码写完后，咱们可以用浏览器来测试一下。打开`index.html`文件，你会看到“连接我的钱包”按钮，点一下它，就会提示你连接钱包。连接后，会显示你的以太坊地址。

这个过程是不是很简单？简简单单的几行代码，就完成了钱包的核心逻辑。哇塞，我自己都觉得有点不可思议呢！但是还不要急，这只是个开始，接下来我们可以考虑增加一些有趣的功能，比如发送交易、查看余额等等。

添加发送交易功能

现在，让咱们给钱包加个新功能——发送交易。为了方便展示，我们可以添加一个简单的表单，让用户输入接收地址和发送的金额。在`index.html`里加上以下内容：


    
发送交易

这段代码创建了一个可以输入接收地址和金额的表单，下面有一个发送按钮。接下来在`app.js`里添加发送交易的逻辑：

document.getElementById('sendTransaction').onclick = async () => {
    const recipient = document.getElementById('recipient').value;
    const amount = document.getElementById('amount').value;

    if (!recipient || !amount) {
        document.getElementById('transactionStatus').innerText = '请填写接收地址和金额！';
        return;
    }

    try {
        const web3 = new Web3(window.ethereum);
        const accounts = await web3.eth.getAccounts();
        const transaction = await web3.eth.sendTransaction({
            from: accounts[0],
            to: recipient,
            value: web3.utils.toWei(amount, 'ether')
        });
        document.getElementById('transactionStatus').innerText = `交易成功！交易哈希: ${transaction.transactionHash}`;
    } catch (error) {
        document.getElementById('transactionStatus').innerText = `交易失败：${error.message}`;
    }
};

这里的逻辑很简单，先获取用户输入的地址和金额。然后用`web3.eth.sendTransaction`方法发送交易。发送成功后，会显示交易的哈希，让用户可以在区块链上查看交易记录。

添加查看余额功能

除了发送交易，查看余额也是一个非常实用的功能。那么如何实现呢？我们可以在界面上加个按钮，当用户点击后显示他们的以太坊余额。在`index.html`里面，添加“查看余额”的按钮：

接下来在`app.js`中，添加相应的逻辑：

document.getElementById('checkBalance').onclick = async () => {
    const web3 = new Web3(window.ethereum);
    const accounts = await web3.eth.getAccounts();
    const balance = await web3.eth.getBalance(accounts[0]);
    const etherBalance = web3.utils.fromWei(balance, 'ether');
    document.getElementById('balanceInfo').innerText = `您的余额：${etherBalance} ETH`;
};

这段代码获取用户的以太坊地址，并查询他们的余额，最后显示在页面上。通过这些简单的操作，咱们的以太坊钱包就越来越完备了。

总结与展望

现在，咱们已经有了一个基本的以太坊钱包，有连接、发送和查看余额的功能。是不是觉得很酷呢？不过，这只是冰山一角，咱们可以继续扩展更多的功能，比如接入其他的Token，甚至是与去中心化应用（dApp）互动。

对于开发者而言，这个过程更像是一次探索之旅，随时可能遇到新的挑战。但别怕，编程的乐趣就在于此。随着自己经验的积累，你会发现这个世界更大、更精彩。

希望这篇简单的以太坊钱包Demo能够帮到你。如果你有兴趣，欢迎尝试和自己动手实现。若有任何问题，随时交流哦！

总之，在这个数字化快速发展的时代，掌握加密货币和区块链技术将为你的未来增添无限可能。快来加入这场创新的浪潮吧！