或者

投稿 2026-03-01 14:54 点击数： 3

Web3.js 入门指南：如何在前端应用中调用以太坊

随着区块链技术的普及,去中心化应用（DApps）正逐渐走入大众视野，一个完整的DApp通常包含前端界面和后端智能合约，而连接这两者的关键桥梁，就是JavaScript库——Web3.js，本文将作为一份入门指南，详细讲解如何使用Web3.js在前端应用中调用以太坊网络，与智能合约进行交互。

什么是 Web3.js？

Web3.js 是一个由以太坊官方维护的JavaScript库，它为Web浏览器和Node.js环境提供了一组API，使得JavaScript能够与以太坊区块链进行通信，它就像一座翻译官，将前端应用的操作（如发送交易、读取数据）翻译成以太坊节点能够理解的指令，反之亦然。

通过Web3.js，开发者可以实现以下核心功能：

连接以太坊节点：连接到本地节点（如Ganache）或公共节点（如Infura, Alchemy）。
管理账户：获取账户地址、检查账户余额、管理私钥。
读取智能合约数据：调用合约的“只读”函数（view或pure函数）。
发送交易：调用合约的“写入”函数，修改链上状态，例如转账、铸造NFT等。

准备工作：环境搭建

在开始编码之前,我们需要准备好以下工具和环境：

Node.js 和 npm/yarn：Web3.js是一个Node.js包，因此需要先安装Node.js（推荐LTS版本），它会自动包含npm包管理器。
一个以太坊节点：你的前端应用需要与以太坊网络对话，你有两种选择：
- 本地私有链：使用Ganache等工具一键搭建一个本地的、可即时确认的测试网络，这对于开发和调试非常方便。
- 公共测试网节点服务：使用Infura或Alchemy等服务提供商，它们提供免费的公共测试网（如Goerli, Sepolia）节点接入点，你可以直接在代码中使用。
一个测试钱包：你需要一个钱包来发送交易和接收测试币（ETH），MetaMask是最流行的浏览器钱包插件，非常适合DApp开发。

核心步骤：使用 Web3.js 调用以太坊

下面我们通过一个实际的流程,来体验如何使用Web3.js。

步骤1：安装 Web3.js

在你的项目目录下,通过npm或yarn安装Web3.js库。

npm install web3yarn add web3

步骤2：连接以太坊节点

这是最关键的一步,我们需要告诉Web3.js你的应用应该连接到哪个以太坊节点。

// 引入Web3
const Web3 = require('web3');
// 替换为你的节点URL，例如从Infura获取的Goerli测试网URL
const providerUrl = 'https://goerli.infura.io/v3/YOUR_INFURA_PROJECT_ID';
// 创建Web3实例，并连接到节点
const web3 = new Web3(providerUrl);
// 或者，如果用户使用MetaMask，可以这样连接：
// if (window.ethereum) {
//   web3 = new Web3(window.ethereum);
//   try {
//     // 请求用户授权
//     await window.ethereum.request({ method: 'eth_requestAccounts' });
//   } catch (error) {
//     console.error("用户拒绝了连接请求");
//   }
// } else {
//   console.error("请安装MetaMask!");
// }

步骤3：获取账户信息

连接成功后,我们可以使用web3.eth对象来获取账户信息，例如账户列表和余额。

// 获取当前节点的所有账户
web3.eth.getAccounts().then(accounts => {
  console.log('账户列表:', accounts);
  const myAccount = accounts[0]; // 通常第一个账户是默认账户
  // 获取指定账户的余额
  web3.eth.getBalance(myAccount).then(balance => {
    // 余额默认是以'wei'为单位，我们将其转换为'ether'
    const balanceInEther = web3.utils.fromWei(balance, 'ether');
    console.log(`账户 ${myAccount} 的余额是: ${balanceInEther} ETH`);
  });
});

步骤4：与智能合约交互

这是Web3.js最强大的功能，假

设我们有一个简单的智能合约，存储了一个数字，我们可以读取和修改它。

你需要合约的ABI（Application Binary Interface）和合约地址，ABI是JSON格式，描述了合约的函数、事件和变量；地址是部署在链上的合约位置。

读取合约数据（调用只读函数）

// 假设这是我们的合约ABI（简化版）
const contractABI = [
  {
    "inputs": [],
    "name": "getNumber",
    "outputs": [{ "internalType": "uint256", "name": "", "type": "uint256" }],
    "stateMutability": "view",
    "type": "function"
  }
];
// 合约部署在Goerli测试网的地址
const contractAddress = '0xYourContractAddress...';
// 创建合约实例
const myContract = new web3.eth.Contract(contractABI, contractAddress);
// 调用合约的getNumber()函数
myContract.methods.getNumber().call()
  .then(result => {
    console.log('合约中的数字是:', result);
  })
  .catch(error => {
    console.error('读取数据失败:', error);
  });

发送交易（调用写入函数）

调用写入函数会修改链上状态,因此需要用户签名并发送一笔交易，这个过程会消耗Gas费。

// 假设合约还有一个setNumber(uint256)函数
const setNumberFunction = myContract.methods.setNumber(42);
// 获取用户账户
web3.eth.getAccounts().then(accounts => {
  const fromAccount = accounts[0];
  // 发送交易
  setNumberFunction.send({ from: fromAccount })
    .then(receipt => {
      // receipt是交易回执，包含了交易哈希、区块号等信息
      console.log('交易已发送，回执:', receipt);
      console.log('交易哈希:', receipt.transactionHash);
    })
    .catch(error => {
      console.error('发送交易失败:', error);
    });
});

总结与展望

Web3.js是构建DApp前端不可或缺的工具，通过它，我们能够轻松地将传统的Web应用与强大的区块链世界连接起来，从连接节点、管理账户，到读取和写入智能合约数据，Web3.js提供了完整的解决方案。

随着以太坊向以太坊2.0的演进以及Layer 2扩容方案的发展，Web3.js也在不断更新，以支持新的功能和更优的性能，对于任何有志于开发去中心化应用的开发者而言，深入掌握Web3.js都是迈向成功的第一步，希望本指南能为你打开Web3世界的大门，开启激动人心的开发之旅。

或者