设置 web3.js 以在 JavaScript 中使用以太坊区块链

在本教程中，我们将了解如何开始使用 web3.jsopens in a new tab 与以太坊区块链进行交互。 Web3.js 可用于前端和后端，从区块链读取数据或进行交易，甚至部署智能合约。

第一步是将 web3.js 加入到你的项目中。 要在网页中使用它，你可以使用 JSDeliver 等 CDN 直接导入库。

1<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>

如果你更喜欢在后端或使用 build 的前端项目中安装库，可以使用 npm 进行安装：

npm install web3 --save

然后，要将 Web3.js 导入 Node.js 脚本或 Browserify 前端项目，你可以使用以下 JavaScript 代码行：

1const Web3 = require("web3")
复制

现在我们已在项目中添加了该库，我们需要对其进行初始化。 你的项目需要能够与区块链通信。 大多数以太坊库通过 RPC 调用与节点进行通信。 要启动我们的 Web3 提供程序，我们将实例化一个 Web3 实例，并将该提供程序的 URL 作为构造函数传递。 如果你在计算机上运行着节点或 ganache 实例opens in a new tab，它将如下所示：

1const web3 = new Web3("http://localhost:8545")
复制

如果你想直接访问托管节点，可以在节点即服务中找到选项。

1const web3 = new Web3("https://cloudflare-eth.com")
复制

为了测试我们是否正确配置了 Web3 实例，我们将尝试使用 getBlockNumber 函数检索最新的区块编号。 该函数接受回调作为参数，并以整数形式返回区块编号。

1var Web3 = require("web3")
2const web3 = new Web3("https://cloudflare-eth.com")
3
4web3.eth.getBlockNumber(function (error, result) {
5  console.log(result)
6})
复制

如果你执行这个程序，它只会打印最新的区块编号：区块链的顶部。 你还可以使用 await/async 函数调用来避免在代码中嵌套回调：

1async function getBlockNumber() {
2  const latestBlockNumber = await web3.eth.getBlockNumber()
3  console.log(latestBlockNumber)
4  return latestBlockNumber
5}
6
7getBlockNumber()
复制

你可以在 web3.js 官方文档opens in a new tab中查看该 Web3 实例上可用的所有函数。

大多数 Web3 库都是异步的，因为在后台，该库对返回结果的节点进行 JSON-RPC 调用。

如果你在浏览器中操作，一些钱包会直接注入 Web3 实例，你应该尽可能尝试使用它，特别是在你打算与用户的以太坊地址交互以进行交易时。

下面的代码片段用来检测 MetaMask 钱包是否可用，如果可用，则尝试启用它。 稍后它将允许你读取用户的余额，并使他们能够验证你想让他们在以太坊区块链上进行的交易：

1if (window.ethereum != null) {
2  state.web3 = new Web3(window.ethereum)
3  try {
4    // 如果需要，请求帐户访问权限
5    await window.ethereum.enable()
6    // 帐户现已公开
7  } catch (error) {
8    // 用户拒绝了帐户访问...
9  }
10}
显示全部
复制

web3.js 的替代品，如 Ethers.jsopens in a new tab，也已存在并被广泛使用。 在下一个教程中，我们将了解如何轻松侦听区块链上新传入的区块并查看其内容opens in a new tab。

页面最后更新： 2025年8月21日

copens in a new tab

popens in a new tab

nopens in a new tab

+9

查看贡献者