网页如何使用以太坊Web3，从零开始的完整开发指南

随着区块链技术的普及,越来越多的开发者希望在网页中集成以太坊功能，无论是开发去中心化应用（DApp）、NFT市场还是DeFi产品，掌握网页与以太坊交互的技术都是必不可少的，本文将详细介绍网页如何使用以太坊Web3，带你从零开始完成整个开发流程。

什么是Web3？

Web3是以太坊生态中网页与区块链交互的技术总称,传统的网页开发中，前端通过HTTP请求与后端服务器通信；而在Web3世界中，网页可以直接与以太坊区块链交互，实现以下功能：

• 连接用户的加密钱包（如MetaMask）
• 读取链上数据和账户余额
• 发送以太币（ETH）转账交易
• 调用智能合约的方法
• 签名消息验证身份

准备工作

在开始编写代码之前,需要准备以下环境：

安装钱包插件

推荐安装MetaMask（小狐狸钱包），它是最流行的浏览器以太坊钱包，安装后会自动向网页注入window.ethereum对象。

引入Web3库

目前主流的库有两个：

<!-- 方式一：使用CDN引入ethers.js（推荐） -->
<script src="https://cdn.ethers.org/lib/ethers-5.7.umd.min.js"></script>
<!-- 方式二：使用CDN引入web3.js -->
<script src="https://cdn.jsdelivr.net/npm/web3@1.10.0/dist/web3.min.js"></script>

使用npm安装（现代前端项目）

npm install ethers
# 或
npm install web3

检测钱包是否安装

在网页中使用以太坊功能的第一步是检测用户是否安装了钱包插件：

// 检测MetaMask是否安装
if (typeof window.ethereum !== 'undefined') {
    console.log('MetaMask已安装！');
} else {
    console.log('请先安装MetaMask钱包');
    alert('检测到您未安装Web3钱包，请先安装MetaMask');
}

连接用户钱包

连接钱包需要用户授权,必须由用户主动触发（例如点击按钮）：

<button id="connectBtn">连接钱包</button>
<p id="accountDisplay"></p>

document.getElementById('connectBtn').addEventListener('click', async () => {
    try {
        // 请求用户授权连接钱包
        const accounts = await window.ethereum.request({
            method: 'eth_requestAccounts'
        });
        console.log('连接成功，账户地址：', accounts[0]);
        document.getElementById('accountDisplay').innerText = 
            '当前账户：' + accounts[0];
    } catch (error) {
        console.error('用户拒绝连接：', error);
    }
});

查询账户余额

连接钱包后,可以查询当前账户的ETH余额：

async function getBalance() {
    const accounts = await window.ethereum.request({
        method: 'eth_accounts'
    });
    const address = accounts[0];
    // 获取余额（返回值为十六进制，单位是wei）
    const balanceHex = await window.ethereum.request({
        method: 'eth_getBalance',
        params: [address, 'latest']
    });
    // 将wei转换为ETH（1 ETH = 10^18 wei）
    const balance = parseInt(balanceHex, 16) / 1e18;
    console.log(`账户余额：${balance} ETH`);
}

使用ethers.js库可以让代码更简洁：

async function getBalanceWithEthers() {
    const provider = new ethers.providers.Web3Provider(window.ethereum);
    const signer = provider.getSigner();
    const address = await signer.getAddress();
    const balance = await provider.getBalance(address);
    console.log(`账户余额：${ethers.utils.formatEther(balance)} ETH`);
}

发送ETH转账交易

实现网页内的转账功能：

async function sendTransaction() {
    const params = {
        // 发送方（当前连接的账户）
        from: '0x你的账户地址',
        // 接收方地址
        to: '0x接收方地址',
        // 金额（十六进制，单位wei，这里发送0.01 ETH）
        value: '0x2386F26FC10000',
    };
    try {
        // 发送交易请求，钱包会弹出确认窗口
        const txHash = await window.ethereum.request({
            method: 'eth_sendTransaction',
            params: [params],
        });
        console.log('交易已发送，哈希值：', txHash);
        alert('交易成功！哈希：' + txHash);
    } catch (error) {
        console.error('交易失败：', error);
    }
}

与智能合约交互

智能合约交互是DApp开发的核心,以下是调用智能合约的示例：

// 智能合约ABI（接口定义）
const contractABI = [
    "function balanceOf(address owner) view returns (uint256)",
    "function transfer(address to, uint256 amount) returns (bool)"
];
// 合约地址
const contractAddress = '0x合约地址';
async function interactWithContract() {
    const provider = new ethers.providers.Web3Provider(window.ethereum);
    const signer = provider.getSigner();
    // 创建合约实例
    const contract = new ethers.Contract(contractAddress, contractABI, signer);
    // 调用读取方法（不需要花费Gas）
    const myBalance = await contract.balanceOf('0x你的地址');
    console.log('代币余额：', myBalance.toString());
    // 调用写入方法（需要钱包签名确认）
    const tx = await contract.transfer('0x目标地址', 100);
    await tx.wait(); // 等待交易确认
    console.log('转账完成！');
}

监听账户和网络变化

用户可能切换账户或网络,网页需要及时响应：

// 监听账户切换
window.ethereum.on('accountsChanged', (accounts) => {
    if (accounts.length === 0) {
        console.log('用户已断开连接');
    } else {
        console.log('账户已切换为：', accounts[0]);
        // 更新页面显示
    }
});
// 监听网络切换
window.ethereum.on('chainChanged', (chainId) => {
    console.log('网络已切换，chainId：', chainId);
    // 建议刷新页面以重置状态
    window.location.reload();
});

常见问题与注意事项

网络选择

不同的应用部署在不同的网络上,如主网（chainId: 1）、Sepolia测试网等，可以通过以下代码切换网络：

await window.ethereum.request({
    method: 'wallet_switchEthereumChain',
    params: [{ chainId: '0xaa36a7' }], // Sepolia测试网
});

安全注意事项

• 永远不要在网页中存储私钥
• 所有敏感操作必须由钱包签名确认
• 验证用户输入的地址格式是否正确
• 对交易参数进行合法性检查

兼容性处理

不同钱包的API可能有细微差异,建议使用ethers.js等库来屏蔽底层差异。

通过本文的介绍,我们学习了网页使用以太坊Web3的完整流程：从检测钱包、连接账户、查询余额、发送交易到调用智能合约，核心要点如下：

1. window.ethereum 是网页与钱包沟通的桥梁
2. 连接钱包等敏感操作必须由用户主动触发 3