【初识Web3】基础语法及简单的web3项目开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

Web3.js基础语法

获取Web3对象

let Web3 = require('web3');
// 创建实例，并提供一个provider
const web3 = new Web3(new Web3.providers.HttpProvider(url));

// web3实例
console.log(web3);
console.log(Web3.modules);
console.log(Web3.version);

Web3.modules 子模块列表：

Eth - Function：与以太坊网络进行交互
Net - Function：与网络属性进行交互
Personal - Function：与以太坊账户进行交互
Shh - Function：与whisper协议交互
Bzz - Function：与swarm协议交互

基本信息查询

查看Web3连接的节点信息

web3.eth.getNodeInfo([callback]) 查看web3连接的节点信息

查看是否连接到节点

web3.eth.net.isListening([callback]) 返回当前所连接节点的网络监听状态（ssh也可）

获取网络号（Network ID）

web3.eth.net.getId([callback]) 返回当前连接网络的ID（ssh也可）

获取节点的以太坊协议版本

web3.eth.getProtocolVersion([callback]) 返回节点的以太坊协议版本

查看当前连接的peer节点

web3.eth.net.getPeerCount([callback]) 返回当前节点上已经连接的其他节点数量（ssh也可）

Provider相关

查看当前设置的 web3 provider

web3.currentProvider 返回当前设置的对象

查看浏览器环境设置的 web3 provider

在以太坊兼容的浏览器中使用web3.js时，web3.givenProvider 属性将返回 浏览器设置的原生服务提供器，否则返回 null 。（eth、ssh、bzz也可）

设置/修改 provider

web3.setProvider() 方法用来修改指定模块的底层通讯服务提供器。 （eth、ssh、bzz也可）

批处理请求（batch requests）

将几个请求打包在一起提交，能够保证事务的执行顺序。在 Web3.js 中使用 BatchRequest 实现批处理。

实例化

new web3.BatchRequest()
方法

add(request) ：将请求对象添加到批调用中

excute() ：将执行批处理请求

实机操作

接下来我介绍一下创建一个新的 web3 项目的详细的操作：

打开Ganache，新建一个项目并运行。记住 NETWORK ID 和 RPC SERVER 的值。
打开Remix，新建一个 .sol 文件。编写一段简单的智能合约代码，保存并点击编译按钮：

// SPDX-License-Identifier: MIT
pragma solidity >=0.7.0 <0.9.0;

contract Demo {
    uint number;

    function setNumber(uint _number) public {
        number = _number;
    }

    function getNumber() public view returns(uint) {
        return number;
    }
}

在MetaMask中【添加网络】，输入刚才记住的 RPC URL 和 链ID 。
在MetaMask中【导入账户】，去Ganache中复制随便复制一个账户的私钥导入即可。
将Remix中的【Environment】属性设置为【Injected Provider - MetaMask】，页面会调用小狐狸钱包，点击确定即可。
在Remix上点击【Deploy】部署你的合约到链上。此步骤会消耗一定的Gas费。你可以通过点击 setNumber 按钮来设置合约中 number 属性的值，修改合约状态也需要花费一定的Gas费。
复制合约的【ABI】以及部署合约的【Address】信息。
在VSCode中初始化一个前端项目 npm init -y ，添加 web3.js 库至项目中 npm install web3.js
创建 main.mjs ，编写代码：

import Web3 from 'web3';

let web3;
if (typeof web3 !== 'undefined') {
    web3 = new Web3(web3.currentProvider);
} else {
    // set the provider you want from Web3.providers
    web3 = new Web3(new Web3.providers.HttpProvider("<http://localhost:7545>"));
}

/** 在Remix编译合约
let source = `
// SPDX-License-Identifier: MIT
pragma solidity >=0.7.0 <0.9.0;

contract Demo {
    uint number;

    function setNumber(uint _number) public {
        number = _number;
    }

    function getNumber() public view returns(uint) {
        return number;
    }
}
`
**/

// 导入合约
const abi = [
	{
		"inputs": [
			{
				"internalType": "uint256",
				"name": "_number",
				"type": "uint256"
			}
		],
		"name": "setNumber",
		"outputs": [],
		"stateMutability": "nonpayable",
		"type": "function"
	},
	{
		"inputs": [],
		"name": "getNumber",
		"outputs": [
			{
				"internalType": "uint256",
				"name": "",
				"type": "uint256"
			}
		],
		"stateMutability": "view",
		"type": "function"
	}
]
const address = '0x723138D1FdeE8De916Bfc8F1116e8dBeCcaF03e4'
const contract = new web3.eth.Contract(abi, address)

const callback1 = (error, res) => {
    console.log(`callback1 run, error: ${error}, res: `, res)
}
const callback2 = (error, res) => {
    console.log(`callback2 run, error: ${error}, res: `, res)
}

const batch = new web3.BatchRequest()
// 获取账户信息
batch.add(web3.eth.getBalance.request('0x326C6C15CEca232CB2813D9Af73E647E6dC8B16e', 'latest', callback1))
// 对合约进行操作
batch.add(contract.methods.getNumber().call.request({
    from: '0x326C6C15CEca232CB2813D9Af73E647E6dC8B16e',
}, callback2))
// 调用getNumber方法
batch.add(contract.methods.getNumber().call.request({
    from: '0x326C6C15CEca232CB2813D9Af73E647E6dC8B16e',
}, (error, result) => {
    console.log(error)
    console.log(result)
}))
// 调用批处理
batch.execute()

命令行运行 node ./main.mjs 命令，运行这段代码。

总结

今天我们介绍了 web3.js 库中的一些基础语法和创建一个极为简单的 web3 项目，接下来我们将介绍一下 web3.js 库中的一些封装好的常用工具。