閱讀本文前，你應該對以太坊、智慧合約、錢包的概念有所瞭解，如果你還不瞭解，建議你先看以太坊是什麼除此之外，你最好還了解一些HTML及JavaScript知識。
轉賬UI 頁面的編寫
轉賬UI主體的介面如圖：

實現這個介面很簡單，這裡就不程式碼了。大家可以開啟Demo，右擊檢視頁面原始碼。

想學習Web前端的小夥伴，在這推薦下我自己的Web學習群：585843909，不定期分享乾貨

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

1 2 3 4 5 6 7 8 9 10 11 12
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? 需要安裝MetaMask!"); } }
 

MetaMask推薦在window載入時，進行MetaMask的檢查，當然在沒有安裝MetaMask時，也可以指定一個節點Provider來建立web3，可以參考Web3.js 文件引入web3
檢查是否錢包已經解鎖： 我們在傳送交易之前應該先首先檢查一下當前錢包的一個狀態，檢查錢包是否解鎖(是否輸入了密碼進入了MetaMask)，通常使用eth下面的getAccounts來進行檢查，getAccounts是會返回賬號的一個列表，如果當前賬號列表裡面有資料的話，說明錢包已經解鎖可以獲得到賬號，如果賬號拿到的列表是空的話，那麼說明錢包沒有解鎖。
可以把下面的程式碼加到上面的監聽函式中：

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

傳送交易
如果MetaMask錢包是解鎖的，我們就可以來發送交易，傳送交易使用sendtransaction這個方法。
1
web3.eth.sendTransaction(transactionObject [, callback])
第一個引數是一個交易物件，交易物件裡面有幾個欄位：
from : 就是從哪個賬號傳送金額
to : 發動到到哪個賬號
value 是傳送的金額
gas: 設定gas limit
gasPrice: 設定gas 價格
如果from沒有的話，他就會用當前的預設賬號， 如果是轉賬to和value是必選的兩個欄位。 在傳送交易的時候彈出來MetaMask的一個授權的視窗，如果我們gas和gasPrice沒有設定的話，就可以在MetaMask裡面去設定。如果這兩個gas和gas Price設定了的話，MetaMask就會使用我們設定的gas。
因此在傳送交易的時候，關鍵是構造這樣一個交易物件，JavaScrpt程式碼如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
// 這裡使用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伺服器的目錄下，自己試驗下。