如何使用Web3.js API 在頁面中進行轉賬
本文介紹如何使用Web3.js API 在頁面中進行轉賬，是我翻譯的文件Web3.js 0.2x 中文版 及 ofollow,noindex">區塊鏈全棧-以太坊DAPP開發實戰 中Demo的文章說明。
寫在前面
閱讀本文前，你應該對以太坊、智慧合約、錢包的概念有所瞭解，如果你還不瞭解，建議你先看以太坊是什麼
除此之外，你最好還了解一些HTML及JavaScript知識。
轉賬UI 頁面的編寫
轉賬UI主體的介面如圖：
實現這個介面很簡單，這裡就不程式碼了。大家可以開啟Demo，右擊檢視頁面原始碼。
使用者環境檢查
既然需要使用Web3.js API 在頁面中進行轉賬， 首先應該檢查在瀏覽器環境有沒有安裝好錢包，並且錢包應該是解鎖狀態。
- 先檢查是否安裝了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
-
檢查是否錢包已經解鎖：
我們在傳送交易之前應該先首先檢查一下當前錢包的一個狀態，檢查錢包是否解鎖(是否輸入了密碼進入了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多位區塊鏈技術大牛和愛好者。