如何使用Web3.js API 在页面中进行转账

本文介绍如何使用Web3.js API 在页面中进行转账,是区块链全栈-以太坊DAPP开发实战 中Demo文字说明版本。

写在前面

阅读本文前,你应该对以太坊、智能合约、钱包的概念有所了解,如果你还不了解,建议你先看以太坊是什么
除此之外,你最好还了解一些HTML及JavaScript知识。

转账UI 页面的编写

转账UI主体的界面如图:

实现这个界面很简单,这里就不代码了。大家可以打开Demo,右击查看页面源码。

用户环境检查

既然需要使用Web3.js API 在页面中进行转账, 首先应该检查在浏览器环境有没有安装好钱包,并且钱包应该是解锁状态。

  1. 先检查是否安装了MetaMask钱包:
window.addEventListener('load', function() {
        if (typeof web3 !== 'undefined') {
            web3 = new Web3(web3.currentProvider);
            if (web3.currentProvider.isMetaMask == true) {
                // "MetaMask可用"
            } else {
                // "非MetaMask环境"
            }
        } else {
            $("#env").html("No web3? 需要安装<a href='https://metamask.io/'>MetaMask</a>!");
        }
}

MetaMask推荐在window加载时,进行MetaMask的检查,当然在没有安装MetaMask时,也可以指定一个节点Provider来创建web3,可以参考Web3.js 文档引入web3

  1. 检查是否钱包已经解锁:
    我们在发送交易之前应该先首先检查一下当前钱包的一个状态,检查钱包是否解锁(是否输入了密码进入了MetaMask),通常使用eth下面的getAccounts来进行检查,getAccounts是会返回账号的一个列表,如果当前账号列表里面有数据的话,说明钱包已经解锁可以获得到账号,如果账号拿到的列表是空的话,那么说明钱包没有解锁。

可以把下面的代码加到上面的监听函数中:

web3.eth.getAccounts(function (err, accounts) {
            if (accounts.length == 0) {
                $("#account").html("请检查钱包是否解锁");
            } 
            });

发送交易

top Created with Sketch.