如何使用Web3.js API 在頁面中進(jìn)行轉(zhuǎn)賬

zhisheng 發(fā)布于2019-06-27 18:44 / 1151人閱讀

摘要：本文首發(fā)于深入淺出區(qū)塊鏈社區(qū)原文鏈接如何使用在頁面中進(jìn)行轉(zhuǎn)賬原文已更新，請讀者前往原文閱讀本文介紹如何使用在頁面中進(jìn)行轉(zhuǎn)賬，是我翻譯的文檔中文版及區(qū)塊鏈全棧以太坊開發(fā)實(shí)戰(zhàn)中的文章說明。

本文首發(fā)于深入淺出區(qū)塊鏈社區(qū)
原文鏈接:如何使用Web3.js API 在頁面中進(jìn)行轉(zhuǎn)賬原文已更新，請讀者前往原文閱讀

本文介紹如何使用Web3.js API 在頁面中進(jìn)行轉(zhuǎn)賬，是我翻譯的文檔Web3.js 0.2x 中文版及區(qū)塊鏈全棧-以太坊DAPP開發(fā)實(shí)戰(zhàn) 中Demo的文章說明。

寫在前面

閱讀本文前，你應(yīng)該對以太坊、智能合約、錢包的概念有所了解，如果你還不了解，建議你先看以太坊是什么
除此之外，你最好還了解一些HTML及JavaScript知識(shí)。

轉(zhuǎn)賬UI 頁面的編寫

轉(zhuǎn)賬UI主體的界面如圖：

實(shí)現(xiàn)這個(gè)界面很簡單，這里就不代碼了。大家可以打開Demo，右擊查看頁面源碼。

用戶環(huán)境檢查

既然需要使用Web3.js API 在頁面中進(jìn)行轉(zhuǎn)賬，首先應(yīng)該檢查在瀏覽器環(huán)境有沒有安裝好錢包，并且錢包應(yīng)該是解鎖狀態(tài)。

先檢查是否安裝了MetaMask錢包：

window.addEventListener("load", function() {
        if (typeof web3 !== "undefined") {
            web3 = new Web3(web3.currentProvider);
            if (web3.currentProvider.isMetaMask == true) {
                // "MetaMask可用"
            } else {
                // "非MetaMask環(huán)境"
            }
        } else {
            $("#env").html("No web3? 需要安裝
MetaMask推薦在window加載時(shí)，進(jìn)行MetaMask的檢查，當(dāng)然在沒有安裝MetaMask時(shí)，也可以指定一個(gè)節(jié)點(diǎn)Provider來創(chuàng)建web3，可以參考Web3.js 文檔引入web3
檢查是否錢包已經(jīng)解鎖：
我們在發(fā)送交易之前應(yīng)該先首先檢查一下當(dāng)前錢包的一個(gè)狀態(tài)，檢查錢包是否解鎖(是否輸入了密碼進(jìn)入了MetaMask)，通常使用eth下面的getAccounts來進(jìn)行檢查，getAccounts是會(huì)返回賬號的一個(gè)列表，如果當(dāng)前賬號列表里面有數(shù)據(jù)的話，說明錢包已經(jīng)解鎖可以獲得到賬號，如果賬號拿到的列表是空的話，那么說明錢包沒有解鎖。
可以把下面的代碼加到上面的監(jiān)聽函數(shù)中：
web3.eth.getAccounts(function (err, accounts) {
            if (accounts.length == 0) {
                $("#account").html("請檢查錢包是否解鎖");
            } 
            });
發(fā)送交易
如果MetaMask錢包是解鎖的，我們就可以來發(fā)送交易，發(fā)送交易使用sendtransaction這個(gè)方法。
web3.eth.sendTransaction(transactionObject [, callback])
第二個(gè)參數(shù)是回調(diào)函數(shù)用來獲得發(fā)送交易的Hash值。
第一個(gè)參數(shù)是一個(gè)交易對象，交易對象里面有幾個(gè)字段：

from : 就是從哪個(gè)賬號發(fā)送金額
to : 發(fā)動(dòng)到到哪個(gè)賬號
value 是發(fā)送的金額
gas: 設(shè)置gas limit
gasPrice: 設(shè)置gas 價(jià)格

如果from沒有的話，他就會(huì)用當(dāng)前的默認(rèn)賬號， 如果是轉(zhuǎn)賬to和value是必選的兩個(gè)字段。
在發(fā)送交易的時(shí)候彈出來MetaMask的一個(gè)授權(quán)的窗口，如果我們gas和gasPrice沒有設(shè)置的話，就可以在MetaMask里面去設(shè)置。如果這兩個(gè)gas和gas Price設(shè)置了的話，MetaMask就會(huì)使用我們設(shè)置的gas。
因此在發(fā)送交易的時(shí)候，關(guān)鍵是構(gòu)造這樣一個(gè)交易對象，JavaScrpt代碼如下：
//  這里使用Metamask 給的gas Limit 及 gas 價(jià)
var fromAccount = $("#fromAccount").val();
var toAccount = $("#toAccount").val();
var amount = $("#amount").val();

// 對輸入的數(shù)字做一個(gè)檢查
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";
        }
    }
}

補(bǔ)充說明：$("#fromAccount").val()是使用JQuery用來獲取用戶輸入內(nèi)容，其次應(yīng)該在實(shí)際構(gòu)造發(fā)送交易之前對輸入的參數(shù)做一個(gè)判斷，web3.isAddress用來檢查字符串是不是地址。另外對于一個(gè)向普通外部地址賬號的轉(zhuǎn)賬，消耗的gas 是固定的21000。
運(yùn)行測試
需要注意一點(diǎn)的是，由于安全原因，MetaMask只支持站點(diǎn)方式訪問的頁面，即通過http:// 來訪問頁面，在瀏覽器中通過file:// + 文件地址的方式是不行的。
因此需要把編寫的代碼放置到web服務(wù)器的目錄下，自己試驗(yàn)下。
線上的Demo地址為https://web3.learnblockchain.cn/transDemo.html
想好好系統(tǒng)學(xué)習(xí)以太坊DApp開發(fā)，這門視頻課程以太坊DAPP開發(fā)實(shí)戰(zhàn)不容錯(cuò)過。
深入淺出區(qū)塊鏈 - 系統(tǒng)學(xué)習(xí)區(qū)塊鏈，打造最好的區(qū)塊鏈技術(shù)博客。
深入淺出區(qū)塊鏈知識(shí)星球，最專業(yè)的區(qū)塊鏈問題技術(shù)社區(qū)，歡迎加入，作為星友福利，星友還可以加入我創(chuàng)建優(yōu)質(zhì)區(qū)塊鏈技術(shù)群，群內(nèi)聚集了300多位區(qū)塊鏈技術(shù)大牛和愛好者。