Web3.js 入门

Web3.js是一个库集合，允许你使用HTTP, IPC或WebSocket与本地或远程以太坊节点进行交互，用于构建基于 JavaScript 的区块链应用程序。在本文中，我将为你介绍 Web3.js，以及如何入门，以及你所需要的完整指南。本文将涵盖 Web3.js 的先决条件以及你需要遵循的正确步骤，这样你就可以快速入门，开始在短时间内构建自己的区块链应用程序。

Web3.js 是什么

Web3.js 是一个用于与以太坊区块链交互的JavaScript库。它提供了一组API，使得开发者可以通过JavaScript与以太坊区块链节点通信，执行交易、读取区块链状态和调用智能合约等操作。Web3.js允许开发者在前端或后端JavaScript应用程序中与以太坊区块链进行交互，从而创建去中心化应用程序（DApp）。

主要功能包括：

连接以太坊节点： Web3.js 允许开发者连接到以太坊网络的节点，无论是本地节点（通过Geth、Parity等客户端软件运行）还是远程节点（例如Infura提供的公共节点）。
创建账户和交易： 使用Web3.js，开发者可以创建新的以太坊账户，构建交易，设置Gas价格和Gas限制，并将交易发送到以太坊网络上。
智能合约交互： Web3.js 提供了与以太坊智能合约交互的功能，包括部署合约、调用合约函数、监听合约事件等。
处理加密和签名： Web3.js 允许开发者使用以太坊账户进行加密和签名操作，确保交易和消息的安全性。
处理ERC-20和ERC-721代币： Web3.js 提供了用于处理ERC-20和ERC-721代币（加密货币标准代币）的函数，包括查询余额、转账代币等。

Web3.js 对于以太坊开发者社区来说是一个非常重要的工具，它简化了与以太坊区块链的交互过程，使得开发者可以更容易地构建去中心化应用程序和服务。

Web3.js 的工作原理

如果你想创建一个网站，以便与区块链的节点通信，以便与智能合约进行交互，从区块链获取信息并编写新的交易，你需要连接到一个节点。

节点

Web3.js 它提供了一组API，允许开发者通过JavaScript代码与以太坊智能合约和区块链交互。以下是Web3.js的主要工作原理：

连接到以太坊节点

Web3.js通过以太坊节点（Ethereum node）与以太坊区块链进行通信。这可以是一个本地节点（通过Geth或Parity等客户端软件运行），也可以是远程节点（例如Infura提供的公共节点）。

创建Web3实例

在JavaScript中，首先需要创建一个Web3实例，该实例将用于与以太坊网络进行交互。

const Web3 = require('web3');
const web3 = new Web3('http://localhost:8545'); // 这里使用本地节点的地址，你也可以使用远程节点

发起交易和调用智能合约

通过Web3.js，你可以创建并发送交易，调用智能合约的函数，读取智能合约的状态。例如，以下是一个使用Web3.js发送以太币的示例：

const accountFrom = '0xYourAccountAddress';
const accountTo = '0xRecipientAddress';
const amountToSend = web3.utils.toWei('1', 'ether'); // 1 ETH

web3.eth.sendTransaction({
  from: accountFrom,
  to: accountTo,
  value: amountToSend
})
.then(receipt => {
  console.log('Transaction Receipt:', receipt);
})
.catch(error => {
  console.error('Transaction Error:', error);
});

监听事件和处理回调

Web3.js允许你监听区块链上的事件，以及处理交易的回调。这使得你能够及时响应智能合约的状态变化或交易的完成。

const contract = new web3.eth.Contract(abi, contractAddress);
contract.events.MyEvent()
  .on('data', event => {
      console.log('Event Data:', event.returnValues);
  })
  .on('error', error => {
      console.error('Event Error:', error);
  });

使用Promises和回调处理异步操作

Web3.js使用Promises和回调来处理异步操作，确保在交易和智能合约调用完成后执行相应的逻辑。

web3.eth.getBalance(accountAddress)
  .then(balance => {
      console.log('Account Balance:', balance);
  })
  .catch(error => {
      console.error('Balance Error:', error);
  });

处理Gas费用

在交易和智能合约调用中，你需要指定Gas限制和Gas价格。Gas价格决定了交易被打包进区块的优先级。Web3.js允许你指定这些参数，以便更灵活地控制交易成本和处理时间。

Web3.js 的模块

在Web3.js中，各种功能被组织成不同的模块，每个模块负责特定的任务。以下是Web3.js主要的模块：

1. `web3` 模块

这是Web3.js的核心模块，它提供了与以太坊网络进行交互的基本功能，包括连接以太坊节点、查询区块链信息、创建账户、发送交易等。

const Web3 = require('web3');
const web3 = new Web3('http://localhost:8545'); // 创建Web3实例并连接到以太坊节点

2. `eth` 模块

eth 模块包含了与以太坊智能合约和交易相关的功能，包括发送交易、查询账户余额、查询交易信息等。

const balance = await web3.eth.getBalance('0xYourAccountAddress'); // 查询账户余额

3. `net` 模块

net 模块用于查询以太坊网络的信息，例如网络ID、连接节点数等。

const networkId = await web3.eth.net.getId(); // 查询以太坊网络ID

4. `personal` 模块

personal 模块提供了与以太坊个人账户相关的功能，例如解锁账户、修改密码等。请注意，这些功能在许多节点上是禁用的出于安全考虑。

await web3.eth.personal.unlockAccount('0xYourAccountAddress', 'YourPassword', 600); // 解锁账户，持续时间为600秒

5. `utils` 模块

utils 模块包含了各种用于处理以太坊数据的实用函数，例如转换以太币单位、处理地址、处理数据等。

const weiAmount = web3.utils.toWei('1', 'ether'); // 将1以太转换为Wei单位

6. `abi` 模块：

abi 模块用于处理以太坊智能合约的ABI（Application Binary Interface），包括编码和解码智能合约数据。

const contractABI = [...]; // 合约ABI定义
const encodedData = web3.eth.abi.encodeFunctionCall(contractABI, ['param1', 'param2']); // 编码函数调用数据

这些模块提供了Web3.js库的核心功能，开发者可以根据需要选择性地使用这些模块，以便与以太坊区块链进行各种交互和操作。

Web3.js 的应用场景

Web3.js 是一个用于与以太坊区块链交互的强大工具，它可以在各种应用场景中发挥作用，包括但不限于以下几个方面：

1. 去中心化应用程序（DApps）开发

Web3.js使开发者能够构建去中心化应用程序（DApps），这些应用程序运行在以太坊区块链上，使用智能合约来实现各种功能，如数字身份验证、投票系统、游戏、金融服务等。

2. 数字钱包

Web3.js可用于创建数字钱包应用程序，用户可以使用这些钱包管理以太币和其他代币、签署交易、与智能合约交互等。例如，MetaMask就是一个基于Web3.js的常用以太坊钱包插件。

3. 区块链游戏

许多区块链游戏使用Web3.js与以太坊智能合约进行集成。这使得游戏中的虚拟资产（如道具、角色、地图等）可以以加密代币的形式存在，玩家可以真正拥有这些资产，并在区块链上交易它们。

4. 众筹和募资活动

Web3.js使得众筹（ICO，Initial Coin Offering）和募资（STO，Security Token Offering）活动能够直接在区块链上进行，包括资金募集、代币发行、投资者KYC（Know Your Customer）验证等。

5. 供应链管理

区块链技术与Web3.js的结合，使得供应链管理更加透明和高效。智能合约可以跟踪产品的流动、记录交易信息，并确保供应链上的所有参与者都能够实时获取到最新的信息。

6. 金融服务和智能合约平台

Web3.js可以用于开发各种金融服务应用，如借贷平台、保险产品、支付解决方案等。智能合约可以提供自动化的金融服务，无需传统金融机构的中介。

7. 数字身份验证

Web3.js和以太坊智能合约可以用于创建去中心化的数字身份系统，实现更加安全和私密的身份验证，用户掌握自己的身份信息。

8. 智能合约审计和安全检测

Web3.js可以用于编写自动化测试脚本，用于检测智能合约的安全漏洞和性能问题，提高合约的质量和安全性。

Web3.js为开发者提供了丰富的工具和API，使得他们能够在不同领域的应用中充分利用以太坊区块链的功能和特性，创造出更加安全、透明和可信的去中心化应用。

连接 RPC 客户端

JSON-RPC API 另一种与以太坊交互的比较流行的方式，用在所有主要的以太坊节点 (如 Geth 和 Parity) 以及许多第三方 web 服务 (如 INFURA)。它通常提供了:

连接以太坊网络 (Provider)
保存你的私钥并且可以签名 (Signer)

使用 Web3.js 连接 RPC 客户端相当容易。你可以按照以下步骤开始使用 Web3.js。

搭建环境

Node.js
在安装 Web3.js 之前，你需要在你的计算机上安装 Node.js，请点击此链接安装 Node.js。
Ganache
Ganache 快速启动个人以太坊区块链，你可以使用它运行测试、执行命令和检查状态，同时控制链如何运行，是 Truffle 工具套装的一部分。请点击此链接安装 Ganache，启动后打开或新建一个工作空间。

Ganache

新建工程

首先，为你的项目创建一个新的项目目录，并导航到它:

$ mkdir tutorial
$ cd tutorial

接下来，使用 npm 初始化一个新的 Node.js 项目:

$ npm init -y

安装依赖

这将在 tutorial 目录中创建一个 package.json。

在设置好 Node.js 我们来安装 Web3.js。

npm install --save web3

Web3.js 当前版本为 1.7.3

新建脚本

将下面的脚本保存到一个文件中，例如 index.js。

// 这将在你的项目中导入 Web3.js
const Web3 = require('web3')

const url = 'http://localhost:7545'
const provider = new Web3.providers.HttpProvider(url);

const web3 = new Web3(provider);

async function main() {
  const blockNumber = await web3.eth.getBlockNumber();
  console.log('Current block number: ' + blockNumber);

  const accounts = await web3.eth.getAccounts();
  const balance = await web3.eth.getBalance(accounts[0])
  console.log('Current account balance: ' + web3.utils.fromWei(balance, 'ether'))
};
main();

getBlockNumber 将返回最新区块号，getBalance 会获取给定地址的帐户余额。

运行测试

在终端窗口中，运行 node index.js 脚本，控制台显示如下信息：

$ node index.js
Current block number: 0
Current block number: 100

连接 MetaMask

开发任何基于以太坊的产品的最快最简单的方法是使用 Metamask。下述示例将访问 MetaMask 的最新区块号和账户余额。

安装 MetaMask

MetaMask

Metamask 是一个加密货币钱包，可以让用户存储以太坊和其他 ERC-20 代币。它是一个浏览器插件，可以帮助你存储或转移以太坊或任何其他 ERC-20 代币。它是一个提供以下功能的浏览器扩展：

连接到以太坊网络
保留你的私钥并可以将其用作签名者。
与测试网络上的虚拟硬币等水龙头进行交互。

Ganache 本质上是个本地太坊区块链模拟器，相比之下 MetaMask 的数据更接近真实交易。

安装 MetaMask 后请为其设置账户，并通过水龙头充值。推荐我常用的水龙头：

新建页面

新建一个 HTML 文件，添加如下代码：

html 代码

<body>
  <p id="blockNumber"></p>
  <p id="balance"></p>
  <script src="https://unpkg.com/web3@1.7.3/dist/web3.min.js"></script>
  <script type="module">
    // ...
  </script>
</body>

CDN 加载的 web3.js 目前不支持 ems 模块，可以在浏览器中通过 ES3 (UMD)的方式访问。

javaScript 代码

async function main() {
  const el = document.getElementById('balance');
  // Check if MetaMask is installed
  if (window.ethereum == null) {
    el.innerHTML = 'MetaMask is not installed';
  } else {
    web3 = new Web3(window.ethereum);
    const blockNumber = await web3.eth.getBlockNumber();
    document.getElementById('blockNumber').innerText = 'Current block number: ' + blockNumber;
    try {
      await window.ethereum.enable();
    } catch (error) {
      el.innerHTML = 'User denied account access';
    }
    const accounts = await web3.eth.getAccounts();
    const balance = await web3.eth.getBalance(accounts[0])
    el.innerText = 'The first account balance: ' + web3.utils.fromWei(balance, 'ether');
  }
}
main();

本例中使用 web3.eth.getAccounts(), 它返回一个 promise 从中可以获取到由助记词生成的所有账号。

运行测试

在 Chrome 中运行，浏览器显示如下信息：

Current block number: 9856316

The first account balance: 1.361959997126591

出于安全，通常较好的方式是使用 npm 将这个库复制到你的web服务器中来进行各种操作。但若想快速构建实例展示，可以将我们的 CDN 加载到你的 web 应用程序中。

Web3.js 是什么

Web3.js 的工作原理

Web3.js 的模块

1. `web3` 模块

2. `eth` 模块

3. `net` 模块

4. `personal` 模块

5. `utils` 模块

6. `abi` 模块：

Web3.js 的应用场景

1. 去中心化应用程序（DApps）开发

2. 数字钱包

3. 区块链游戏

4. 众筹和募资活动

5. 供应链管理

6. 金融服务和智能合约平台

7. 数字身份验证

8. 智能合约审计和安全检测

连接 RPC 客户端

搭建环境

新建工程

安装依赖

新建脚本

运行测试

连接 MetaMask

安装 MetaMask

新建页面

运行测试

将智能合约与前端集成

Hello World 智能合约

Solidity 的高级特性

Infura 入门

评论 (0)

Web3.js 入门

Web3.js 是什么

Web3.js 的工作原理

Web3.js 的模块

1. web3 模块

2. eth 模块

3. net 模块

4. personal 模块

5. utils 模块

6. abi 模块：

Web3.js 的应用场景

1. 去中心化应用程序（DApps）开发

2. 数字钱包

3. 区块链游戏

4. 众筹和募资活动

5. 供应链管理

6. 金融服务和智能合约平台

7. 数字身份验证

8. 智能合约审计和安全检测

连接 RPC 客户端

搭建环境

新建工程

安装依赖

新建脚本

运行测试

连接 MetaMask

安装 MetaMask

新建页面

运行测试

将智能合约与前端集成

Hello World 智能合约

Solidity 的高级特性

Infura 入门

评论 (0)

1. `web3` 模块

2. `eth` 模块

3. `net` 模块

4. `personal` 模块

5. `utils` 模块

6. `abi` 模块：