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

xiaolinbang 發布于2019-08-23 11:58 / 1860人閱讀

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

本文首發于深入淺出區塊鏈社區
原文鏈接:如何使用Web3.js API 在頁面中進行轉賬原文已更新，請讀者前往原文閱讀

本文介紹如何使用Web3.js API 在頁面中進行轉賬，是我翻譯的文檔Web3.js 0.2x 中文版及區塊鏈全棧-以太坊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? 需要安裝
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多位區塊鏈技術大牛和愛好者。

GPU云服務器云服務器 webrtc如何在web中使用在php中如何使用n 在防火墻中可以對什么網絡進行設置如何使用云服務器進行分配

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97776.html

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

摘要：本文首發于深入淺出區塊鏈社區原文鏈接如何使用在頁面中進行轉賬原文已更新，請讀者前往原文閱讀本文介紹如何使用在頁面中進行轉賬，是我翻譯的文檔中文版及區塊鏈全棧以太坊開發實戰中的文章說明。本文首發于深入淺出區塊鏈社區原文鏈接:如何使用Web3.js API 在頁面中進行轉賬原文已更新，請讀者前往原文閱讀本文介紹如何使用Web3.js API 在頁面中進行轉賬，是我翻譯的文檔Web3.j...

zhisheng 2019-06-27 18:44 評論0 收藏0
以太坊錢包開發系列3 - 展示錢包信息及發起簽名交易

本文首發于深入淺出區塊鏈社區原文鏈接:[使用 ethers.js 開發以太坊 Web 錢包 3 - 展示錢包信息及發起簽名交易）](https://learnblockchain.cn/20...，請讀者前往原文閱讀以太坊去中心化網頁錢包開發系列，將從零開始開發出一個可以實際使用的錢包，本系列文章是理論與實戰相結合，一共有四篇：創建錢包賬號、賬號Keystore文件導入導出、展示錢包信息及發起簽...

tuniutech 2019-08-23 12:59 評論0 收藏0
以太坊錢包開發系列3 - 展示錢包信息及發起簽名交易

本文首發于深入淺出區塊鏈社區原文鏈接:[使用 ethers.js 開發以太坊 Web 錢包 3 - 展示錢包信息及發起簽名交易）](https://learnblockchain.cn/20...，請讀者前往原文閱讀以太坊去中心化網頁錢包開發系列，將從零開始開發出一個可以實際使用的錢包，本系列文章是理論與實戰相結合，一共有四篇：創建錢包賬號、賬號Keystore文件導入導出、展示錢包信息及發起簽...

keke 2019-06-27 18:51 評論0 收藏0
truffle安裝以及使用示例

摘要：安裝命令使用命令安裝完成后，直接輸入即可。函數名函數名用于修改狀態變量的函數的調用，可以簡寫為后面這種。訪問內有使用教程。文件夾中沒有，取而代之的是，內容是個簡單的，功能是修改一個狀態變量的值為然后讀取它。 Truffle ubuntu下安裝truffle truffle安裝的依賴環境有：Nodejs，git ，python2.7（ubuntu自帶）安裝git sudo apt-get...

RiverLi 2019-06-27 18:19 評論0 收藏0