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 会有提供一个 ethereumProviderweb3.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.toWeiweb3.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语言来编写的,想了解更多的可以去看看相关的课程。

相关推荐
Asort17 分钟前
JavaScript 从零开始(六):控制流语句详解——让代码拥有决策与重复能力
前端·javascript
无双_Joney35 分钟前
[更新迭代 - 1] Nestjs 在24年底更新了啥?(功能篇)
前端·后端·nestjs
在云端易逍遥37 分钟前
前端必学的 CSS Grid 布局体系
前端·css
ccnocare38 分钟前
选择文件夹路径
前端
艾小码39 分钟前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
闰五月39 分钟前
JavaScript作用域与作用域链详解
前端·面试
泉城老铁43 分钟前
idea 优化卡顿
前端·后端·敏捷开发
前端康师傅43 分钟前
JavaScript 作用域常见问题及解决方案
前端·javascript
司宸1 小时前
Prompt结构化输出:从入门到精通的系统指南
前端