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

Tiny熊發表於2018-09-14
WebJSAPI

本文介紹如何使用Web3.js API 在頁面中進行轉賬，是我翻譯的文件Web3.js 0.2x 中文版 及 區塊鏈全棧-以太坊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("請檢查錢包是否解鎖");
            } 
            });

傳送交易

如果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伺服器的目錄下，自己試驗下。

線上的Demo地址為https://web3.learnblockchain.cn/transDemo.html

想好好系統學習以太坊DApp開發，這門視訊課程以太坊DAPP開發實戰不容錯過。

深入淺出區塊鏈 – 系統學習區塊鏈，打造最好的區塊鏈技術部落格。
深入淺出區塊鏈知識星球，最專業的區塊鏈問題技術社群，歡迎加入，作為星友福利，星友還可以加入我建立優質區塊鏈技術群，群內聚集了300多位區塊鏈技術大牛和愛好者。

相關文章