Dapp开发（二）：前端如何使用web3.js

书接上回，我们了解了一些关于web3.0的相关概念，本来开始正式进入Dapp的开发。（ps：本文只适用于小白观看，不敢在经验丰富的大佬面前耍大刀，有不妥之处欢迎指出）

前篇我们已经在浏览器安装了MetaMask这个扩展，在新启的项目中也安装了web3.js这个库，它有很多函数，使用它可以在以太坊生态系统中通过HTTP或IPC与本地或者以太坊远程节点交互，如查看链上信息等，在此过程中使用是的JSON-RPC（一个无状态且轻量级的远程过程调用（RPC）传送协议，其传递内容透过 JSON 为主）。我们使用web3.js来读取和写入以太坊区块链数据。

首先大家可以打开web3.js的英文官网，如果不习惯看英文的宝子可以看web3.js的中文文档，这是GitHub地址。

我们在新创的vue项目中，已经引入了web3.js，接下来，我们看看如何使用他进行交互。如官网所言，他分为四大模块，各自的功能主要是：

web3-eth 用来与以太坊区块链及合约的交互；
web3-shh Whisper 协议相关，进行p2p通信和广播；
web3-bzz swarm 协议（去中心化文件存储）相关；
web3-utils 包含一些对 DApp 开发者有用的方法。

将web3.js引入后，我们需要先创建一个 web3 的实例，设置一个 provider。 MetaMask 会有提供一个 ethereumProvider 或 web3.currentProvider 。可以检查 Web3.givenProvider ，如果属性为 null 再连接本地或远程的节点，这样我们就可以开始使用web3.js了，但我们要判断用户是否连接就需要做另外的处理了。

js 复制代码

var web3 = new Web3(Web3.givenProvider || "ws://localhost:8545");

通常情况下，我们会在页面初始化时，使用一个名为 ethereum 的全局对象，判断用户钱包是否已经授权，此全局对象可以用于与用户的以太坊钱包（MetaMask）进行交互。通过这个 ethereum 对象，开发者可以请求用户授权、获取用户账户信息、发送交易等操作。

使用 ethereum 对象的一般流程如下：

1.检查是否存在 window.ethereum:

首先，检查全局作用域中是否存在 window.ethereum 对象。

2.请求授权:

如果 window.ethereum 存在，通过该对象请求用户授权以访问其账户信息和执行交易。

3.连接到以太坊网络:

一旦用户授权，可以使用 ethereum 对象连接到用户所选择的以太坊网络。

4.发送交易:

通过 ethereum.request 方法，就可以向用户请求发送交易或调用智能合约。

简单示例代码：

js 复制代码

// 检查是否存在 ethereum 对象
if (window.ethereum) {
    const ethereum = window.ethereum;

    // 请求用户授权
    ethereum.request({ method: 'eth_requestAccounts' })
        .then((accounts) => {
            const account = accounts[0];
            console.log('已连接到账户:', account);

            // 实例化 Web3 对象
            const web3 = new Web3(ethereum);

            // 现在可以使用 web3 对象进行以太坊操作
            web3.eth.getBalance(account, (error, balance) => {
                if (!error) {
                    console.log('账户余额:', web3.utils.fromWei(balance, 'ether'), 'ETH');
                } else {
                    console.error('获取余额失败:', error);
                }
            });
        })
        .catch((error) => {
            console.error('请求授权失败:', error);
        });
} else {
    console.error('未检测到 ethereum 对象，请确保以太坊钱包已安装并登录。');
}

当用户成功连接后，实例化web3对象，web3.eth.getBalance方法是获取返回地址在指定区块的余额。这里还提到了web3.utils.fromWei这个方法，这个方法接收两个参数，第一个是数量（wei），第二个是需要转换的单位，用于将以太币数量从最小单位（wei）转换为以太币单位（如 ether），反之还有一个相反的方法web3.utils.toWei。web3.utils.toWei 方法用于将以太币数量从以太币单位（如 ether）转换为最小单位（wei），接收参数一样。

js 复制代码

web3.utils.fromWei('1', 'ether');//"0.000000000000000001"
web3.utils.toWei('1', 'ether');//"1000000000000000000"

以太币单位转换关系：

1 wei = 1 wei
1 Kwei (Kilowei) = 1,000 wei
1 Mwei (Megawei) = 1,000,000 wei = 1,000 Kwei
1 Gwei (Gigawei) = 1,000,000,000 wei = 1,000 Mwei = 1,000 Kwei
1 microether = 1,000,000,000 wei = 1,000 Mwei = 1,000 Kwei = 1 Gwei
1 milliether = 1,000,000,000,000 wei = 1,000 microether = 1,000 Gwei
1 nanoether = 1,000,000,000,000,000 wei = 1,000 milliether = 1,000,000 microether
1 picoether = 1,000,000,000,000,000,000 wei = 1,000 nanoether = 1,000,000 milliether
1 femtoether = 1,000,000,000,000,000,000,000 wei = 1,000 picoether = 1,000,000 nanoether
1 attoweber = 1,000,000,000,000,000,000,000,000 wei = 1,000 femtoether = 1,000,000 picoether
1 ether = 1,000,000,000,000,000,000,000,000 wei = 1,000 attoweber

以上就是web3.js大致的使用过程了，接下来就是如何调用智能合约进行交互了，智能合约大多使用solidity语言来编写的，想了解更多的可以去看看相关的课程。