设置 web3.js 以用 JavaScript 操作 Ethereum 区块链。

web3.jsjavascript

初学者

jdourlens

EthereumDev(opens in a new tab)

2020年4月11日

4 分钟阅读 minute read

comp-tutorial-metadata-tip-author 0x19dE91Af973F404EDF5B4c093983a7c6E3EC8ccE

在本教程中，我们将了解如何开始使用 web3.js(opens 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")
 复制

如果您想直接访问一个托管节点，您可以使用 Infura。 您也可以使用由 Cloudflare(opens in a new tab)、Moralis(opens in a new tab) 或 Alchemy(opens in a new tab)提供的免费节点：

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    // Request account access if needed
5    await window.ethereum.enable()
6    // Accounts now exposed
7  } catch (error) {
8    // User denied account access...
9  }
10}
显示全部
 复制

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