前面 我们讲了 MetaMask和ganache的配置安装 并用 MetaMask管理ganache的启动的虚拟区块链
那么 我们现在也完全可以写一个网页来做这个东西的管理

您可以先查看文章web3.js获取导入做一个导入了 web3的html文件

首先我们可以来试着 获取 自己当前是在哪个区块的
getBlockNumber
当然 你要有本地的区块链 我们还是通过ganache启动起虚拟的环境
然后在网页中编写

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src = "./js/web3.min.js"></script></head><body><script>var web3 = new Web3(Web3.givenProvider || "ws://localhost:8545");web3.eth.getBlockNumber().then(res =>{console.log(res);})</script></body></html>

这里 就输出了我们的区块链编号

如果你是刚起来的环境 自然就是0 如果中间你做过其他操作 可能就会向后退 变成 1 2 3 4 5

我们在运行 ganache 时 会出现一个链id

web3就可以获取到当前连接的这个链的id
getChainId
我们在网页中编写代码如下

web3.eth.getChainId().then(res =>{console.log(res);})


这里 就成功将我们的 链id就输出出来了

这里 我们也很确定了 确实是 网页已经连接到了我们本地的区块链

那么 下面我们就来做点有意义的事吧
通过账号 获取用户的ETH数量

你们要自己找方法 可以用文档https://learnblockchain.cn/docs/web3.js/web3-eth.html#getchainid
上面都会有函数演示和说明 但是他这个文档老实说结构做点不是特别清晰 需要耐心去找

这里 文档跟我们说 需要一个地址 简单说 就是需要账号的公钥

我们可以这样编写代码

web3.eth.getBalance("0xCA9368CbD09A84457a39E0909Ce9335D15Be81C6").then(res =>{ console.log(res);})

0xCA9368CbD09A84457a39E0909Ce9335D15Be81C是我ganache中十个账号中的一个的公钥 这里 你们肯定要自己去 启动的 ganache 环境中去拿一个账号来用

但是 这东西一输出 我估计大家都麻了 这明显就有问题啊

其实这个 展示的也没问题 只是一个单位没有转换处理
我不知道 大家对文件单位的转换敏不敏感 这个就差不多 就好比 我们 1024 转 M这个概念是一样的
这里 我们接口返回的单位也是最小的 叫 wei

其实这个我们直接 除就可以了 但是 我们还是搞正规一点 它有专门的方法

但是先说个题外话 这六个单位 其实你们可以拿名字去查一下 很有纪念意义 他们都是在数学和密码学上很有贡献的人
这个东西的作者还是有心了的
这边很多平台和文档都会说 希望在做计算是 还是 以wei这个单位来处理 只是涉及到展示时才要将他转换成 ether给用户看 方便用户统计处理

我们将代码改成

web3.eth.getBalance("0xCA9368CbD09A84457a39E0909Ce9335D15Be81C6").then(res =>{console.log(web3.utils.fromWei(res,"ether"));})

utils.fromWei 两个参数 第一个 要转换的单位 第二个 要转换成什么点位
运行结果如下

这样 我们的单位就是之前看到的 1000了