1. 程式人生 > >如何使用Web3.js API 在頁面中進行轉賬

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

寫在前面

閱讀本文前,你應該對以太坊、智慧合約、錢包的概念有所瞭解,如果你還不瞭解,建議你先看以太坊是什麼 除此之外,你最好還了解一些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伺服器的目錄下,自己試驗下。

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

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