以太坊Web3接口

Web3接口是连接前端应用和以太坊区块链的桥梁，提供了与智能合约交互的API。本文详细介绍Web3.js和ethers.js的使用方法，帮助开发者构建去中心化应用的前端部分。

Web3 API

一、什么是Web3接口

一、1 基本概念

Web3接口是JavaScript库，提供了与以太坊区块链交互的API。通过Web3接口，前端应用可以连接以太坊节点，查询区块链数据，发送交易，与智能合约交互。

二、2 主要库

Web3.js：

官方JavaScript库
功能完整
广泛使用
社区支持

1	ethers.js：

更现代的库
更好的TypeScript支持
更小的包体积
推荐使用

其他库：

web3.py：Python版本
web3j：Java版本
各种语言实现

二、如何使用Web3.js

三、1 安装和配置

1	安装： `npm install web3` 基本使用：

const Web3 = require('web3');

// 连接到本地节点
const web3 = new Web3('http://localhost:8545');

// 连接到Infura
const web3 = new Web3('https://mainnet.infura.io/v3/YOUR-PROJECT-ID');

// 连接到MetaMask
const web3 = new Web3(window.ethereum);

四、2 账户操作

创建账户：
// 创建新账户
const account = web3.eth.accounts.create();
console.log('Address:', account.address);
console.log('Private Key:', account.privateKey);

`查询余额：```javascript

// 查询账户余额（返回Wei）
const balance = await web3.eth.getBalance(address);
// 转换为ETH显示
console.log('Balance:', web3.utils.fromWei(balance, 'ether'), 'ETH');

`发送交易：```javascript

const tx = {
    from: account.address,
    to: recipientAddress,
    value: web3.utils.toWei('1', 'ether'),  // 转换为Wei
    gas: 21000,
    gasPrice: await web3.eth.getGasPrice()  // 获取当前Gas价格

};

1
2
3

// 发送交易并等待确认
const receipt = await web3.eth.sendTransaction(tx);
console.log('Transaction hash:', receipt.transactionHash);


### 五、3 合约交互

加载合约：
// 创建合约实例
const contract = new web3.eth.Contract(abi, contractAddress);

// 调用view函数（不消耗Gas）
const value = await contract.methods.getValue().call();
console.log('Value:', value);

// 调用状态改变函数（需要Gas）
await contract.methods.setValue(42).send({
    gas: 100000
});
`监听事件：```javascript
// 监听转账事件
contract.events.Transfer({
    filter: { from: userAddress },  // 过滤条件
    fromBlock: 0                    // 从区块0开始
}, function(error, event) {
    console.log('Transfer:', event.returnValues);
})
.on('data', function(event) {
    console.log('From:', event.returnValues.from);
    console.log('To:', event.returnValues.to);
    console.log('Value:', event.returnValues.value);
});

三、如何使用ethers.js

六、1 安装和配置

1 2	安装： `npm install ethers` 基本使用： const { ethers } = require('ethers');

// 连接到Provider
const provider = new ethers.providers.JsonRpcProvider('http://localhost:8545');
// 或连接到Infura
const provider = new ethers.providers.InfuraProvider('mainnet', 'YOUR-PROJECT-ID');
// 或连接到MetaMask
const provider = new ethers.providers.Web3Provider(window.ethereum);


### 七、2 账户操作

创建钱包：
// 创建随机钱包
const wallet = ethers.Wallet.createRandom();
console.log('Address:', wallet.address);
console.log('Private Key:', wallet.privateKey);
// 查询账户余额
const balance = await provider.getBalance(address);
// 格式化为ETH显示
console.log('Balance:', ethers.utils.formatEther(balance), 'ETH');
// 发送ETH转账
const tx = await wallet.sendTransaction({
    value: ethers.utils.parseEther('1.0')  // 转换为Wei
});
// 等待交易确认
await tx.wait();
console.log('Transaction confirmed');

八、3 合约交互

1 2	// 创建合约实例（只读） const contract = new ethers.Contract(contractAddress, abi, provider);

1
2
3

// 调用view函数
const value = await contract.getValue();
console.log('Value:', value.toString());

// 使用signer调用状态改变函数
const signer = provider.getSigner();
const contractWithSigner = contract.connect(signer);
const tx = await contractWithSigner.setValue(42);
await tx.wait();  // 等待确认
// 监听所有转账事件
contract.on("Transfer", (from, to, value, event) => {
    console.log(`Transfer: ${from} -> ${to}, ${value}`);
});

// 过滤事件：只监听从特定地址发出的转账
const filter = contract.filters.Transfer(userAddress, null);
contract.on(filter, (from, to, value) => {
    console.log(`Received from ${from}: ${value}`);
});


## 四、应用场景

### 九、1 DApp前端

连接钱包：
// 连接MetaMask钱包
async function connectWallet() {
    if (window.ethereum) {
        // 请求账户访问权限
        await window.ethereum.request({ method: 'eth_requestAccounts' });
        const address = await signer.getAddress();
        console.log('Connected:', address);
    }
`查询数据：```javascript
// 加载合约数据
async function loadData() {
    // 查询用户余额
    const balance = await contract.balanceOf(userAddress);
    // 查询总供应量
    const totalSupply = await contract.totalSupply();
    // 更新UI显示
}
// 发送交易
async function sendTransaction() {
    const contract = new ethers.Contract(contractAddress, abi, signer);
    // 调用合约函数
    const tx = await contract.transfer(recipientAddress, amount);
}

十、2 区块链浏览器

查询交易：
// 根据交易哈希查询交易信息
async function getTransaction(txHash) {
    const tx = await provider.getTransaction(txHash);
    const receipt = await provider.getTransactionReceipt(txHash);
    return { tx, receipt };

}
`查询区块：```javascript

// 根据区块号查询区块信息
async function getBlock(blockNumber) {
    const block = await provider.getBlock(blockNumber);
    return block;

}


### 十一、3 监控服务

监听新区块：
// 监听新区块
provider.on('block', (blockNumber) => {
    console.log('New block:', blockNumber);
});

// 监听特定事件
contract.on('Transfer', (from, to, value) => {
    // 处理转账事件
});

五、最佳实践

十二、1 错误处理

处理错误：
try {
    const tx = await contract.setValue(42);
} catch (error) {
    if (error.code === 'USER_REJECTED') {
        console.log('User rejected transaction');
    } else if (error.code === 'INSUFFICIENT_FUNDS') {
        console.log('Insufficient funds');
    } else {
        console.error('Error:', error);


### 十三、2 性能优化

批量查询：
// 批量查询多个地址的余额
async function batchQuery(addresses) {
    const promises = addresses.map(addr => contract.balanceOf(addr));
    const balances = await Promise.all(promises);
    return balances;
}
`缓存数据：```javascript
let cachedBalance = null;
let lastUpdate = 0;

// 缓存余额数据，减少查询次数
async function getBalance(address) {
    const now = Date.now();
    // 5秒内的缓存有效
    if (cachedBalance && now - lastUpdate < 5000) {
        return cachedBalance;
    }
    cachedBalance = await contract.balanceOf(address);
    lastUpdate = now;
}

十四、3 用户体验

加载状态：
// 发送交易时显示加载状态
    setLoading(true);
    try {
        const tx = await contract.transfer(to, amount);
        setStatus('Waiting for confirmation...');
        setStatus('Transaction confirmed!');
        setStatus('Transaction failed');
    } finally {
        setLoading(false);


## 六、总结

Web3接口是构建DApp前端的基础工具。关键要点：

主要库：
- Web3.js：传统选择
- ethers.js：推荐使用
- 根据需求选择

核心功能：
- 连接区块链
- 查询数据
- 发送交易
- 合约交互

最佳实践：
- 错误处理
- 性能优化
- 用户体验
- 安全考虑

通过掌握Web3接口，可以构建功能完整的去中心化应用前端，实现与区块链的交互。

本文标题：以太坊Web3接口

发布时间： 2024年03月10日 00:00

最后更新： 2025年12月30日 08:54

原始链接： https://haoxiang.eu.org/37bc219c/

赏

狂欢马克思

专注硬件开发