怎么使用Web3.js API 在頁面中進行轉賬

這期內容當中小編將會給大家帶來有關怎么使用Web3.js API 在頁面中進行轉賬，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

如何使用Web3.js API 在頁面中進行轉賬

小編介紹如何使用Web3.js API 在頁面中進行轉賬，是我翻譯的文檔Web3.js 0.2x 中文版 及 區塊鏈全棧-以太坊DAPP開發實戰 中Demo的文章說明。

寫在前面

閱讀本文前，你應該對以太坊、智能合約、錢包的概念有所了解，如果你還不了解，建議你先看以太坊是什么 除此之外，你最好還了解一些HTML及JavaScript知識。

轉賬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

2. 檢查是否錢包已經解鎖： 我們在發送交易之前應該先首先檢查一下當前錢包的一個狀態，檢查錢包是否解鎖(是否輸入了密碼進入了MetaMask)，通常使用eth下面的getAccounts來進行檢查，getAccounts是會返回賬號的一個列表，如果當前賬號列表里面有數據的話，說明錢包已經解鎖可以獲得到賬號，如果賬號拿到的列表是空的話，那么說明錢包沒有解鎖。

可以把下面的代碼加到上面的監聽函數中：

web3.eth.getAccounts(function (err, accounts) {
            if (accounts.length == 0) {
                $("#account").html("請檢查錢包是否解鎖");
            } 
            });

發送交易

如果MetaMask錢包是解鎖的，我們就可以來發送交易，發送交易使用sendtransaction這個方法。

web3.eth.sendTransaction(transactionObject [, callback])

第二個參數是回調函數用來獲得發送交易的Hash值。

第一個參數是一個交易對象，交易對象里面有幾個字段：

• from : 就是從哪個賬號發送金額

• to : 發動到到哪個賬號

• value 是發送的金額

• gas: 設置gas limit

• gasPrice: 設置gas 價格

如果from沒有的話，他就會用當前的默認賬號， 如果是轉賬to和value是必選的兩個字段。 在發送交易的時候彈出來MetaMask的一個授權的窗口，如果我們gas和gasPrice沒有設置的話，就可以在MetaMask里面去設置。如果這兩個gas和gas Price設置了的話，MetaMask就會使用我們設置的gas。

因此在發送交易的時候，關鍵是構造這樣一個交易對象，JavaScrpt代碼如下：

//  這里使用Metamask 給的gas Limit 及 gas 價
var fromAccount = $('#fromAccount').val();
var toAccount = $('#toAccount').val();
var amount = $('#amount').val();

// 對輸入的數字做一個檢查
if (web3.isAddress(fromAccount) &&
            web3.isAddress(toAccount) &&
            amount != null && amount.length > 0） {
    var message = {from: fromAccount, to:toAccount, value: web3.toWei(amount, 'ether')};

    web3.eth.sendTransaction(message, (err, res) => {
        var output = "";
        if (!err) {
            output += res;
        } else {
            output = "Error";
        }
    }
}

補充說明：$('#fromAccount').val()是使用JQuery用來獲取用戶輸入內容，其次應該在實際構造發送交易之前對輸入的參數做一個判斷，web3.isAddress用來檢查字符串是不是地址。另外對于一個向普通外部地址賬號的轉賬，消耗的gas 是固定的21000。

運行測試

需要注意一點的是，由于安全原因，MetaMask只支持站點方式訪問的頁面，即通過http:// 來訪問頁面，在瀏覽器中通過file:// + 文件地址的方式是不行的。 因此需要把編寫的代碼放置到web服務器的目錄下，自己試驗下。

上述就是小編為大家分享的怎么使用Web3.js API 在頁面中進行轉賬了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。