上文 html通过web3JS 获取当前连接的区块链信息和账号信息在html中通过 Web3.0.js 获取了本地虚拟的区块链信息 和通过 公钥获取了账号的 ETH

那么 之前我们文章 Web3通过 MetaMask简单演示对ganache虚拟环境账号进行管理操作演示了通过MetaMask在本地发送ETH给其他账号 那么 现在 我们就用网页来实现一次

文档是有描述 这个sendTransaction

文档是就有一个比较清晰可见的案例

为了方便测试 还是先起来ganache的环境
然后通过 MetaMask 导入两个账号来管理

然后 我们这里操作 账号2 发送 账号3

这里 我们需要先执行一个函数
文档中有一个requestAccounts

用来授权MetaMask
我们直接编写代码如下

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

运行网页之后 MetaMask 会自动弹出让我选择授权账号
这里 我们选择 刚刚导入的 账号2 和 账号3 然后 下一步

然后 直接点击 连接

等他连接好就行了

我们赋值一下账号3的公钥地址

然后 切换回账号2

我们直接在网页中编写代码如下

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

web3.eth.getAccounts().then(function(accounts) {
  var from = accounts[0];
  web3.eth.sendTransaction({
    from: from,
    to: '0x0d9F9DA0c4c83a69d7F2317971Ce3395134a92f9',
    value: web3.utils.toWei("1", 'ether'),
    chainId: 1337
  }).then(res => {
    console.log("转发完成");
  }).catch(err => {
    console.error(err);
  });
});

我们这里 的意思就是
getAccounts获取登录的账号列表 然后 获取到第一个下标 用来做from参数 to放刚刚复制到的 账号3的公钥 然后 发送 单位 1 用web3.utils.toWei转为ether避免单位错误
然后 chainId 写明当前的链id 避免错误

我们运行代码 对应的操作就会弹出来 我们直接点确认就好了
然后 来回操作几次 我们在回头来看用户信息 就改变了