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

時間 2019-11-19

標籤如何使用 web3.js web api 頁面進行轉帳欄目 HTML 简体版

原文原文鏈接

本文首發於深刻淺出區塊鏈社區原文連接:如何使用Web3.js API 在頁面中進行轉帳原文已更新，請讀者前往原文閱讀html

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

寫在前面

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

轉帳UI 頁面的編寫

轉帳UI主體的界面如圖：安全

實現這個界面很簡單，這裏就不代碼了。你們能夠打開Demo，右擊查看頁面源碼。服務器

用戶環境檢查

既然須要使用Web3.js API 在頁面中進行轉帳，首先應該檢查在瀏覽器環境有沒有安裝好錢包，而且錢包應該是解鎖狀態。app

先檢查是否安裝了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 文檔引入web3ide

檢查是否錢包已經解鎖：咱們在發送交易以前應該先首先檢查一下當前錢包的一個狀態，檢查錢包是否解鎖(是否輸入了密碼進入了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。