Web3.0开发上-准备和概念理解

title: Web3.0开发上-准备和概念理解 id: 66fca64ed8ea09a1463266273b136f79 tags:

• Web3

• 智能合约

• 区块链 date: 2000/01/01 00:00:00 updated: 2023/11/24 17:30:15 isPublic: true --#|[分隔]|#--

Web3.0开发上-准备和概念理解

以太坊官网：https://ethereum.org/zh/。

web3官方教程：https://web3js.readthedocs.io/

以太坊区块链浏览器：https://etherscan.io/

以太坊开发文档：https://ethereum.org/zh/developers/docs/

以太坊JSON-RPC 应用程序接口：https://ethereum.org/zh/developers/docs/apis/json-rpc/

小狐狸(MetaMask)文档：https://docs.metamask.io/

币安钱包文档：https://docs.bnbchain.org/docs/binance

开发前工具准备

Web3.0的开发，就是和区块链的节点服务器进行的交互。

我们拿到了节点服务器的RPC配置信息，可以直接使用 HTTP、 WebSocket 或者 IPC 文件的进程间通信，来进行交互，但配置参数比较麻烦，一些上链的操作还需要输入私钥进行签名才能执行。

工具一：钱包插件

我们一般都会使用钱包连接某个节点服务器，也就是连接到了某个网络，再使用钱包创建、或者使用私钥导入自己的现有的账户到钱包，可以使用钱包方便的管理我们的账户列表了。

任何一个钱包，都可以连接若干个网络；

每个网络，都可以创建或者导入该网络支持的账户；

每个账户下面，可以添加若干种该网络支持的代币，如果我们这个账户的下面的这个代币拥有余额，那就会直接显示出来。

使用钱包，我们可以管理账户、查看各个账户下代币的余额，也可以进行一些钱包支持的简单操作，比如在自己各个账户间互相转账。

工具二：web3.js

页面开发时，我们需要展示用户的账户地址、余额、账户中某种代币的余额……等等操作，这些操作都需要和节点服务器交互。

但和节点交互的传参还是比较麻烦，参数还需要转换格式等等，而且，和平时开发一样，我们很少直接写原生ajax去调用接口，而是会使用 jquery、axios等封装的库来更便利的去间接调用ajax。

所以，Web3.0使用的第三方 js 工具库来了，比如 ethers、web3.js、truffle、Embark，这里我们流行度相对最广泛的 web3.js。

使用web3.js时，传入RPC实例化得到web3对象，我们可以通过调用 web3 封装好的方法，更加方便的间接和节点服务器交互。

但有两点比较麻烦：

• 需要用户手动输入自己的账户地址，页面才知道是谁在使用页面，展示余额信息时该展示谁的。

• 一些需要上链的操作，需要使用私钥签名，需要用户手动输入私钥，这一个操作太敏感，相当于让用户输入银行密码，而且私钥一般都被用户保存在隐秘的地方，用户找出来就很麻烦。

两个工具整合：web3.js + 钱包

有了钱包，可以方便的管理账户，可以签名，所以可以转账，但一些复杂的操作无法进行，而且钱包只能添加代币合约，不能连接其他自定义的、功能丰富的智能合约。

有了web3.js，可以连接节点，连接任何智能合约，进行任何的读取操作，但需要用户手动输入账户、且没有私钥无法签名，无法进行上链操作。

所以，页面可以使用 web3.js，连接用户已经配置好的钱包，两者配合，可以进行复杂丰富的各种操作。

在Web3.0前端开发这方面，小狐狸的主要作用：

• 提供一个允许页面操作的账户地址，连接小狐狸时，小狐狸会让勾选选择。

• 用户进行上链操作时，弹出确认交易签名的弹框，供用户确认后进行签名，并扣除手续费。

其他的复杂代码，就可以使用web3.js才进行，而且 web3.js 已经对小狐狸钱包兼容的很好（其他钱包并不太常用，没有太过了解），我们只需要在一开始实例化web3对象时，设置好使用RPC还是钱包，后面在进行读取、上链操作，都是一样的写法了。

和区块链交互的最直接操作

通过RPC和节点服务器，也就是区块链进行交互。

交互式需要按照以太坊指定的JSON-RPC 应用程序接口：https://ethereum.org/zh/developers/docs/apis/json-rpc/。

比如下面就是调用RPC地址作为接口地址，方法post，参数如下的一个请求：

{
    "jsonrpc": "2.0",
    "id": 5664776926875333,
    "method": "eth_call", // 要调用的以太坊的方法
    "params": [ // 参数们
        {
            "data": "0x70a08231000000000000000000000000f99058c3a9692719381d350735dc69bdb9e790f7",
            "to": "0xb4fbf271143f4fbf7b91a5ded31805e42b2208d6"
        },
        "latest"
    ]
}

上面主要就是 method 和 params 两个字段，修改两个字段就是修改要调用的方法和参数。

web3.js和钱包，两者和链上交互时，本质都是进行这样的请求，只是两者都对这些方法进行了包装。

而且钱包插件基本都有暴露一个 request 方法，可以用来支持开发人员直接和区块链交互。

比如小狐狸暴露了 window.ethereum.request 方法，传入method和 params 两个参数来调用：

const result = await window.ethereum.request({
  method: "eth_sendTransaction",
  params: [rawTx],
})